<!DOCTYPE html>
<html lang="vi">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Viec3mien - Tuyển dụng 2026</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link
    href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;900&family=Barlow+Condensed:wght@700;900&display=swap"
    rel="stylesheet" />
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <style>
    body {
      font-family: 'Barlow', sans-serif;
    }

    h1,
    h2,
    h3,
    .font-heading {
      font-family: 'Barlow Condensed', sans-serif;
    }

    :root {
      --red: #EE0033;
      --red-dark: #CC002D;
      --blue: #004A99;
    }

    /* Scroll animations */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Slide in from right */
    .reveal-right {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Benefit card hover */
    .benefit-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }

    .benefit-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
      border-color: #fecaca;
      background: white;
    }

    /* Spinner */
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spinner {
      width: 24px;
      height: 24px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      display: inline-block;
    }

    /* Table row hover */
    .salary-row {
      transition: background 0.2s ease;
    }

    .salary-row:hover {
      background: #EFF6FF;
    }

    /* Grayscale image hover */
    .team-img {
      transition: filter 0.7s ease;
      filter: grayscale(100%);
    }

    .team-img:hover {
      filter: grayscale(0%);
    }

    /* Logo grayscale */
    .logo-gray {
      transition: filter 0.3s ease, opacity 0.3s ease;
      filter: grayscale(100%);
      opacity: 0.4;
    }

    .logo-gray:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    /* Button hover */
    .btn-primary {
      background: var(--red);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .btn-primary:hover {
      background: var(--red-dark);
      transform: translateY(-2px);
    }

    /* Input focus */
    .input-field {
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .input-field:focus {
      outline: none;
      border-color: var(--red);
      background: white;
      box-shadow: 0 0 0 4px rgba(238, 0, 51, 0.08);
    }

    .input-field-blue:focus {
      outline: none;
      border-color: var(--blue);
      background: white;
      box-shadow: 0 0 0 4px rgba(0, 74, 153, 0.08);
    }

    .input-error {
      border-color: #ef4444 !important;
      background: #fef2f2 !important;
    }
  </style>
<link id="css-theme" rel="stylesheet" type="text/css" href="/css-theme_a71758c049839f2ff148af7d00e03989e0c8e67b.css">
<script id="scripts" type="text/javascript" src="/scripts_887a5339b2625a8970658c4f5f9bd94f1067ab7a.js"></script>
<meta name="referrer" content="same-origin" />

			<link rel="icon" sizes="16x16" type="image/png" href=/assets/favicon_16.png />
			<link rel="icon" sizes="32x32" type="image/png" href=/assets/favicon_32.png />
				<link rel="icon" sizes="any" type="image/svg+xml" href=/assets/favicon.svg />
<title>Viettel Digital Workplace</title><meta name="application-name" content="Viettel Digital Workplace"><meta name="apple-mobile-web-app-title" content="Viettel Digital Workplace">
<meta http-equiv="content-language" content=""><meta name="language" content="">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="msvalidate.01" content="">
<meta name="google-site-verification" content="">
<meta property="fb:app_id" content="">
<base href="/">
<link rel="stylesheet" href="/genhub-ui/browser/styles.css">
<script defer src="/genhub-ui/browser/env.js"></script>
<script type="module" src="/genhub-ui/browser/polyfills.js"></script>
<script defer src="/genhub-ui/browser/scripts.js"></script>
<script type="module" src="/genhub-ui/browser/main.js"></script>
<link id="style-genhub" rel="stylesheet" type="text/css" href="/style-genhub_0a2bfd393891f5c0ed2e661d92ed2a5a8d1f446c.css">
</head>

<body class="min-h-screen bg-white text-gray-900">

  <!-- ========== HEADER ========== -->
  <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
      <!-- Logo -->
      <div class="flex items-center gap-0 group cursor-pointer"
        onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
        <span class="text-3xl font-bold tracking-tight text-[#004A99] mr-1">Viec</span>
        <div class="relative flex items-center justify-center">
          <div class="w-10 h-10 border-4 border-[#004A99] rounded-full flex items-center justify-center bg-white">
            <span class="text-2xl font-bold text-[#EE0033]">3</span>
          </div>
          <div class="absolute -bottom-1 -right-1 w-5 h-2 bg-[#004A99] rotate-45 rounded-full"></div>
        </div>
        <span class="text-3xl font-bold tracking-tight text-[#004A99] ml-1">Mien</span>
      </div>
      <!-- Nav -->
      <div class="hidden md:flex items-center gap-8 text-sm font-bold text-gray-600 uppercase tracking-wide">
        <a href="#salary-table" class="hover:text-red-600 transition-colors">Bảng lương</a>
        <a href="#benefits" class="hover:text-red-600 transition-colors">Phúc lợi</a>
        <a href="#values" class="hover:text-red-600 transition-colors">Về chúng tôi</a>
        <button onclick="document.getElementById('registration-form').scrollIntoView({behavior:'smooth'})"
          class="btn-primary text-white px-6 py-2.5 rounded-full shadow-xl shadow-red-200">Đăng ký ngay</button>
      </div>
    </div>
  </header>

  <main>
    <!-- ========== SECTION 1: HERO ========== -->
    <section class="relative overflow-hidden bg-white pt-12 lg:pt-20 pb-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-12 gap-12 items-center">

          <!-- Registration Form -->
          <div id="registration-form" class="lg:col-span-6 order-1 reveal">
            <div class="bg-white rounded-2xl border border-gray-100 p-8 lg:p-14"
              style="box-shadow: 0 20px 50px rgba(0,0,0,0.1);">
              <h2 class="text-3xl font-bold mb-4" style="color:#004A99;"> Đăng ký ứng tuyển công nhân tại KCN </h2>
              <p class="text-gray-500 text-sm mb-10 font-medium"> Nhận việc ngay - Tư vấn miễn phí 24/7 </p>
              <!-- SUCCESS -->
              <div id="form-success" class="hidden py-12 text-center"> <i data-lucide="check-circle-2"
                  class="w-20 h-20 text-green-500 mx-auto mb-6"></i>
                <h3 class="text-2xl font-bold mb-2">Gửi thành công!</h3>
                <p class="text-gray-600 mb-8">Chúng tôi sẽ liên hệ với bạn sớm nhất.</p> <button onclick="resetForm()"
                  class="font-bold hover:underline" style="color:#EE0033;"> Gửi đăng ký khác </button>
              </div> <!-- FORM -->
              <form id="contact-form" onsubmit="handleSubmit(event)" class="space-y-8"> <!-- PHONE -->
                <div class="space-y-3"> <label class="text-xs font-bold text-gray-700 flex items-center gap-2"> <i
                      data-lucide="phone" class="w-4 h-4" style="color:#EE0033;"></i> Số điện thoại (Bắt buộc) </label>
                  <input id="input-phone" type="tel" placeholder="Nhập số điện thoại của bạn"
                    class="input-field w-full px-5 py-4 rounded-lg border-2 border-gray-100 bg-gray-50 text-lg font-medium"
                    oninput="clearPhoneError()" onblur="this.value = this.value.trim()"/>
                  <p id="phone-error" class="hidden text-red-500 text-sm font-bold"></p>
                </div> <!-- NAME -->
                <div class="space-y-3"> <label class="text-xs font-bold text-gray-700 flex items-center gap-2"> <i
                      data-lucide="user" class="w-4 h-4" style="color:#EE0033;"></i> Họ và tên (Bắt buộc)</label>
                  <input id="input-name" type="text" placeholder="Nhập họ và tên của bạn"
                    class="input-field w-full px-5 py-4 rounded-lg border-2 border-gray-100 bg-gray-50 text-lg font-medium"
                    oninput="clearNameError()" onblur="this.value = this.value.trim()"/>
                  <p id="name-error" class="hidden text-red-500 text-sm font-bold"></p>
                </div>
                <!-- LOCATION -->
                <div class="space-y-3">
                  <label class="text-xs font-bold text-gray-700 flex items-center gap-2">
                    <i data-lucide="map-pin" class="w-4 h-4" style="color:#EE0033;"></i>
                    Địa điểm làm việc (Bắt buộc)
                  </label>
                  <div class="relative" id="location-wrapper">
                    <button type="button" id="location-trigger" onclick="toggleLocationDropdown()"
                      class="input-field w-full px-5 py-4 rounded-lg border-2 border-gray-100 bg-gray-50 text-lg font-medium text-left flex items-start justify-between gap-3">
                      <div id="location-display" class="text-gray-400 flex-1 min-w-0">Chọn địa điểm làm việc</div>
                      <i data-lucide="chevron-down" id="location-chevron" class="w-5 h-5 text-gray-400 flex-shrink-0 transition-transform mt-1"></i>
                    </button>
                    <div id="location-panel"
                      class="hidden absolute z-20 mt-2 w-full bg-white border-2 border-gray-100 rounded-lg shadow-xl max-h-80 overflow-y-auto">
                    </div>
                  </div>
                  <p id="location-error" class="hidden text-red-500 text-sm font-bold"></p>
                </div>
                <!-- CONSULTATION TIME -->
                <div class="space-y-3">
                  <label class="text-xs font-bold text-gray-700 flex items-center gap-2">
                    <i data-lucide="clock" class="w-4 h-4" style="color:#EE0033;"></i>
                    Bạn có thể nghe điện thoại giờ nào? (Telesale tư vấn)
                  </label>
                  <div class="grid grid-cols-2 gap-3">
                    <label id="consult-opt-now" class="consult-option flex items-center gap-3 px-4 py-3 rounded-lg border-2 border-gray-100 bg-gray-50 cursor-pointer transition-colors">
                      <input type="radio" name="consult-type" value="now" class="w-4 h-4 accent-[#EE0033] flex-shrink-0" onchange="onConsultTypeChange()" checked />
                      <span class="font-bold text-gray-800 text-sm">Ngay sau khi đăng ký</span>
                    </label>
                    <label id="consult-opt-range" class="consult-option flex items-center gap-3 px-4 py-3 rounded-lg border-2 border-gray-100 bg-gray-50 cursor-pointer transition-colors">
                      <input type="radio" name="consult-type" value="range" class="w-4 h-4 accent-[#EE0033] flex-shrink-0" onchange="onConsultTypeChange()" />
                      <span class="font-bold text-gray-800 text-sm">Khung giờ cụ thể</span>
                    </label>
                  </div>
                  <div id="consult-range-wrapper" class="hidden border-2 border-dashed border-gray-200 rounded-lg p-4 bg-gray-50">
                    <div class="grid grid-cols-2 gap-3 items-end">
                      <div>
                        <label class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block">Từ</label>
                        <select id="consult-from"
                          class="input-field w-full px-4 py-3 rounded-lg border-2 border-gray-100 bg-white text-base font-medium"
                          onchange="onConsultRangeChange()"></select>
                      </div>
                      <div>
                        <label class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block">Đến</label>
                        <div id="consult-to"
                          class="w-full px-4 py-3 rounded-lg border-2 border-gray-100 bg-gray-100 text-base font-medium text-gray-500 cursor-not-allowed select-none">
                          15:00
                        </div>
                      </div>
                    </div>
                    <p id="consult-range-hint" class="text-xs text-gray-500 italic mt-3">* Viec3mien sẽ ưu tiên liên hệ trong khoảng từ 13:00 – 15:00</p>
                  </div>
                  <p id="consult-error" class="hidden text-red-500 text-sm font-bold"></p>
                </div>
                <!-- BUTTON --> <button id="submit-btn" type="submit"
                  class="w-full text-white py-5 rounded-lg font-bold text-xl flex items-center justify-center gap-3"
                  style="background:#EE0033;"> <span id="btn-text">Gửi đăng ký ngay ></span> <span id="btn-spinner"
                    class="spinner hidden"></span> </button>
                <p class="text-xs text-center text-gray-500 leading-relaxed"> Bằng việc Gửi đăng ký, bạn đồng ý cung cấp
                  số điện thoại cho đội ngũ hỗ trợ Viec3mien (qua đối tác Viettel, CT CNTT 3T) tư vấn và hỗ trợ. <br />
                  <span class="text-[10px] opacity-60">Thông tin của bạn được bảo mật
                    tuyệt đối.</span>
                </p>
              </form>
            </div>
          </div>

          <!-- Hero Content -->
          <div class="lg:col-span-6 z-10 order-2 reveal-right">
            <div>
              <h1 class="text-4xl lg:text-6xl font-bold leading-[1.2] mb-4" style="color:#004A99;"> Tuyển công nhân sản
                xuất linh kiện điện tử </h1>
              <p class="text-xl lg:text-2xl text-gray-700 font-medium mb-10"> Tại hệ thống nhà máy lớn Foxconn,
                Luxshare, Goertek... </p> <!-- SALARY CARD -->
              <div class="bg-gray-100 rounded-2xl p-8 lg:p-10 mb-12 border border-gray-200">
                <p class="font-bold text-sm mb-3">Tổng thu nhập thực tế</p>
                <p class="text-4xl lg:text-6xl font-bold mb-4" style="color:#EE0033;"> 12.000.000 - 20.000.000 </p>
                <span class="text-2xl font-bold" style="color:#EE0033;"> VNĐ/tháng </span>
                <p class="text-gray-500 font-bold mt-6 text-sm italic"> (Bao gồm: Lương, Thưởng, Tăng ca & Phụ cấp) </p>
              </div>
              <!-- RECRUITMENT AREAS -->
              <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6" style="color:#004A99;">KHU VỰC TUYỂN DỤNG</h3>
                <div id="recruitment-areas" class="bg-gray-50 rounded-2xl p-6 lg:p-8 border border-gray-200">
                  <!-- Provinces rendered dynamically by JS from PROVINCES -->
                </div>
              </div>
              <!-- BENEFITS -->
              <div class="space-y-6 mb-12">
                <div class="flex items-start gap-4 text-lg font-medium"> <i data-lucide="check-circle-2"
                    class="w-6 h-6 text-green-600"></i> Nhận cả lao động mới - Đào tạo nghề miễn phí. </div>
                <div class="flex items-start gap-4 text-lg font-medium"> <i data-lucide="check-circle-2"
                    class="w-6 h-6 text-green-600"></i> Thủ tục đơn giản - Phỏng vấn nhanh. </div>
                <div class="flex items-start gap-4 text-lg font-medium"> <i data-lucide="check-circle-2"
                    class="w-6 h-6 text-green-600"></i> Miễn phí xe đưa đón & hỗ trợ chỗ ở. </div>
              </div> <!-- IMAGE -->
              <div class="rounded-3xl overflow-hidden shadow-2xl border-8 border-white"><img id="hero-img"
                  src="/images/hero.jpg"
                  class="w-full h-auto object-cover" crossorigin="anonymous" /></div>
            </div>
          </div>

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

    <!-- ========== SECTION 2: BENEFITS ========== -->
    <section id="benefits" class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- ========== BENEFITS SECTION ========== -->

        <section id="benefits" class="bg-white">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            ```
            <!-- TITLE -->
            <div class="text-center mb-16">
              <h2 class="text-3xl lg:text-4xl font-bold mb-4" style="color:#004A99;">
                Phúc lợi & Chế độ
              </h2>
              <div class="w-20 h-1 mx-auto" style="background:#EE0033;"></div>
            </div>

            <!-- GRID -->
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">

              <!-- ITEM 1 -->
              <div
                class="bg-gray-50 p-8 rounded-xl text-center border border-gray-100 hover:shadow-lg transition-shadow">
                <div
                  class="w-16 h-16 bg-[#EE0033] text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-md">
                  <i data-lucide="home" class="w-8 h-8"></i>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">Ký túc xá</h3>
                <p class="text-sm text-gray-500">Hỗ trợ chỗ ở miễn phí</p>
              </div>

              <!-- ITEM 2 -->
              <div
                class="bg-gray-50 p-8 rounded-xl text-center border border-gray-100 hover:shadow-lg transition-shadow">
                <div
                  class="w-16 h-16 bg-[#EE0033] text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-md">
                  <i data-lucide="bus" class="w-8 h-8"></i>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">Xe đưa đón</h3>
                <p class="text-sm text-gray-500">Trợ cấp đi lại hàng tháng</p>
              </div>

              <!-- ITEM 3 -->
              <div
                class="bg-gray-50 p-8 rounded-xl text-center border border-gray-100 hover:shadow-lg transition-shadow">
                <div
                  class="w-16 h-16 bg-[#EE0033] text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-md">
                  <i data-lucide="shield-check" class="w-8 h-8"></i>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">Bảo hiểm</h3>
                <p class="text-sm text-gray-500">Đóng BHXH đầy đủ</p>
              </div>

              <!-- ITEM 4 -->
              <div
                class="bg-gray-50 p-8 rounded-xl text-center border border-gray-100 hover:shadow-lg transition-shadow">
                <div
                  class="w-16 h-16 bg-[#EE0033] text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-md">
                  <i data-lucide="utensils" class="w-8 h-8"></i>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">Ăn ca</h3>
                <p class="text-sm text-gray-500">Hỗ trợ cơm trưa tại nhà máy</p>
              </div>

            </div>
            ```

          </div>
        </section>

      </div>
    </section>

    <!-- ========== SECTION 3: VALUES ========== -->
    <section id="values" class="py-20 relative overflow-hidden" style="background:#004A99;">
      <!-- Background blobs -->
      <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-10">
        <div class="absolute rounded-full"
          style="top:-10%;left:-10%;width:40%;height:40%;background:white;filter:blur(100px);"></div>
        <div class="absolute rounded-full"
          style="bottom:-10%;right:-10%;width:40%;height:40%;background:#EE0033;filter:blur(100px);"></div>
      </div>

      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <!-- ========== COMMITMENT SECTION ========== -->

        <section id="commitment" class="py-20 text-white overflow-hidden">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-16 items-center">

              <!-- LEFT CONTENT -->
              <div>
                <h2 class="text-3xl lg:text-5xl font-bold leading-tight mb-6">
                  Việc 3 Miền - Đồng hành <br />
                  <span style="color:#EE0033;">miễn phí</span> cùng người lao động
                </h2>

                <p class="text-xl mb-12 leading-relaxed text-blue-100">
                  Chúng tôi không chỉ kết nối, chúng tôi hỗ trợ bạn từ A đến Z, giúp bạn ổn định cuộc sống sớm nhất.
                </p>

                <!-- FEATURES -->
                <div class="grid sm:grid-cols-2 gap-6">

                  <!-- ITEM 1 -->
                  <div class="flex items-start gap-4 bg-white/10 p-5 rounded-xl border border-white/10">
                    <div class="mt-1">
                      <i data-lucide="file-text" class="w-6 h-6" style="color:#EE0033;"></i>
                    </div>
                    <p class="font-medium text-sm leading-snug">
                      Tư vấn chi tiết, hướng dẫn hồ sơ miễn phí.
                    </p>
                  </div>

                  <!-- ITEM 2 -->
                  <div class="flex items-start gap-4 bg-white/10 p-5 rounded-xl border border-white/10">
                    <div class="mt-1">
                      <i data-lucide="users" class="w-6 h-6" style="color:#EE0033;"></i>
                    </div>
                    <p class="font-medium text-sm leading-snug">
                      Sắp xếp lịch phỏng vấn và phương tiện di chuyển.
                    </p>
                  </div>

                  <!-- ITEM 3 -->
                  <div class="flex items-start gap-4 bg-white/10 p-5 rounded-xl border border-white/10">
                    <div class="mt-1">
                      <i data-lucide="home" class="w-6 h-6" style="color:#EE0033;"></i>
                    </div>
                    <p class="font-medium text-sm leading-snug">
                      Hỗ trợ tìm chỗ ở phù hợp, an toàn gần nhà máy.
                    </p>
                  </div>

                  <!-- ITEM 4 -->
                  <div class="flex items-start gap-4 bg-white/10 p-5 rounded-xl border border-white/10">
                    <div class="mt-1">
                      <i data-lucide="shield-check" class="w-6 h-6" style="color:#EE0033;"></i>
                    </div>
                    <p class="font-medium text-sm leading-snug">
                      Có nhân sự theo sát, hỗ trợ xuyên suốt quá trình làm việc.
                    </p>
                  </div>

                </div>
              </div>

              <!-- RIGHT IMAGE -->
              <div class="relative">

                <!-- IMAGE -->
                <div class="rounded-3xl overflow-hidden border-8 border-white shadow-2xl">
                  <img id="commitment-img" src="/images/commitment.jpg"
                    alt="Viec3mien Companion Guidance" class="w-full h-auto" crossorigin="anonymous" />
                </div>

                <!-- BADGE -->
                <div class="absolute -bottom-6 -left-6 text-white p-8 rounded-2xl shadow-xl transform -rotate-3"
                  style="background:#EE0033;">
                  <p class="text-4xl font-bold mb-1">100%</p>
                  <p class="text-sm font-bold uppercase tracking-wider">
                    Miễn phí dịch vụ
                  </p>
                </div>

              </div>

            </div>

          </div>
        </section>

      </div>
    </section>

    <!-- ========== ABOUT SECTION ========== -->

    <section id="about" class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">

          <!-- TITLE -->
          <h2 class="text-3xl font-bold mb-8" style="color:#004A99;">
            Về chúng tôi - Việc 3 Miền
          </h2>

          <!-- DESCRIPTION -->
          <p class="text-lg text-gray-600 leading-relaxed mb-12">
            Việc 3 Miền là đơn vị cung ứng giải pháp nhân sự toàn diện và tuyển dụng nhân lực số lượng lớn trên toàn
            quốc.
            Chúng tôi kết nối hàng triệu người lao động với các doanh nghiệp hàng đầu, cam kết mang lại cơ hội việc làm
            tốt nhất
            và hoàn toàn miễn phí cho ứng viên.
          </p>

          <!-- PARTNERS -->
          <div class="flex flex-wrap justify-center gap-6">

            <!-- PARTNER 1 -->
            <div class="flex items-center gap-3 bg-white px-5 py-3 rounded-xl shadow-sm border border-gray-100">
              <div class="w-8 h-8 rounded flex items-center justify-center text-white font-bold text-sm"
                style="background:#EE0033;">
                V
              </div>
              <div class="flex flex-col items-start leading-none">
                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                  Đối tác
                </span>
                <span class="text-lg font-bold tracking-tight" style="color:#EE0033;">
                  Viettel
                </span>
              </div>
            </div>

            <!-- PARTNER 2 -->
            <div class="flex items-center gap-3 bg-white px-5 py-3 rounded-xl shadow-sm border border-gray-100">
              <div class="w-8 h-8 rounded flex items-center justify-center text-white font-bold text-sm"
                style="background:#004A99;">
                3T
              </div>
              <div class="flex flex-col items-start leading-none">
                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                  Đối tác
                </span>
                <span class="text-lg font-bold tracking-tight" style="color:#004A99;">
                  3T IT Company
                </span>
              </div>
            </div>

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

  </main>

  <!-- ========== FOOTER ========== -->
  <footer class="text-white py-12" style="background:#004A99;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row items-center justify-between gap-8">
        <div class="flex items-center gap-0 scale-75 origin-left">
          <span class="text-3xl font-bold tracking-tight text-white mr-1">Viec</span>
          <div class="relative flex items-center justify-center">
            <div class="w-10 h-10 border-4 border-white rounded-full flex items-center justify-center">
              <span class="text-2xl font-bold" style="color:#EE0033;">3</span>
            </div>
            <div class="absolute -bottom-1 -right-1 w-5 h-2 bg-white rotate-45 rounded-full"></div>
          </div>

          <span class="text-3xl font-bold tracking-tight text-white ml-1">Mien</span>
        </div>
        <p class="text-sm text-blue-100 opacity-80">
          © 2026 Viec3mien. Đối tác tuyển dụng tin cậy hàng đầu Việt Nam.
        </p>
        <div class="flex gap-6">
          <a href="#" class="text-sm hover:opacity-80 transition-colors" onmouseover="this.style.color='#EE0033'"
            onmouseout="this.style.color=''">
            Điều khoản
          </a>
          <a href="#" class="text-sm hover:opacity-80 transition-colors" onmouseover="this.style.color='#EE0033'"
            onmouseout="this.style.color=''">
            Bảo mật
          </a>
        </div>
      </div>
    </div>
  </footer>


  <!-- ========== JAVASCRIPT ========== -->
  <script>
    // Init Lucide icons
    lucide.createIcons();

    // ---- Province + factory data ----
    const PROVINCES = [
      { code: '24', name: 'BẮC GIANG', factories: [
        { name: 'LuxShare Vân Trung', address: 'KCN Vân Trung, Việt Yên, Bắc Giang' },
        { name: 'LuxShare Quang Châu 1-2-3', address: 'KCN Quang Châu, Việt Yên, Bắc Giang' },
        { name: 'Newwing', address: 'KCN Vân Trung, Việt Yên, Bắc Giang' },
        { name: 'Fuyu', address: 'KCN Quang Châu, Việt Yên, Bắc Giang' },
        { name: 'Fuhong', address: 'KCN Vân Trung, Việt Yên, Bắc Giang' },
        { name: 'Fukang', address: 'KCN Quang Châu, Việt Yên, Bắc Giang' },
        { name: 'Fulian', address: 'KCN Quang Châu, Việt Yên, Bắc Giang' },
        { name: 'Lens', address: 'KCN Quang Châu, Việt Yên, Bắc Giang' },
      ]},
      { code: '27', name: 'BẮC NINH', factories: [
        { name: 'Goertek', address: 'KCN Quế Võ mở rộng, Nam Sơn, Bắc Ninh' },
        { name: 'Fushan', address: 'KCN Vsip, Từ Sơn, Bắc Ninh' },
        { name: 'Biel Crystal', address: '98 Hữu Nghị, KCN Vsip, Đại Đồng, Bắc Ninh' },
        { name: 'Yuzhan', address: 'KCN Quế Võ, Phương Liễu, Bắc Ninh' },
        { name: 'ADTEK', address: 'KCN Quế Võ 3, Quế Võ, Bắc Ninh' },
        { name: 'AAC', address: 'KCN Quế Võ, Vân Dương, Bắc Ninh' },
      ]},
      { code: '40', name: 'NGHỆ AN', factories: [
        { name: 'Goertek Nghệ An', address: 'KCN WHA Industrial Zone 1, Khu kinh tế Đông Nam Nghệ An, Trung Lộc, Nghệ An' },
        { name: 'Luxshare Nghệ An', address: 'KCN Vsip, Hưng Tây, Hưng Nguyên, Nghệ An' },
      ]},
      { code: '30', name: 'HẢI DƯƠNG', factories: [
        { name: 'Biel Crystal', address: 'KCN An Phát 1, An Bình, Nam Sách, Hải Dương' },
      ]},
      { code: '31', name: 'HẢI PHÒNG', factories: [
        { name: 'USI', address: 'KVN Đình Vũ, Đông Hải 2, Hải Phòng' },
        { name: 'Pegatron Đình Vũ', address: 'KCN Deep C2A, Đông Hải, Hải An, Hải Phòng' },
      ]},
      { code: '35', name: 'HÀ NAM', factories: [
        { name: 'Wistron', address: 'KCN Đồng Văn 3, Hà Nam' },
        { name: 'Sumi Đồng Văn', address: 'KCN Thanh Liêm, Phú Lý, Hà Nam' },
        { name: 'Sumi Thanh Liêm', address: 'KCN Thanh Liêm, Phú Lý, Hà Nam' },
      ]},
      { code: '4', name: 'NAM ĐỊNH', factories: [
        { name: 'Sumi Nam Định', address: 'KCN Bảo Minh, Vụ Bản, Nam Định' },
      ]},
      { code: '25', name: 'PHÚ THỌ', factories: [
        { name: 'BYD', address: 'KCN Phú Hà, Hà Lộc, Phú Thọ' },
        { name: 'FUTURE INNOVATION', address: 'KCN Phú Hà, Hà Lộc, Phú Thọ' },
      ]},
      { code: '00', name: 'KHÁC', factories: [
        { name: 'Khu vực khác', address: '' },
      ]},
    ];

    // Layout: provinces split into two columns for the recruitment area display
    const RECRUITMENT_COLUMNS = [
      ['24', '27', '40', '30'],          // left column
      ['31', '35', '4', '25', '00'],     // right column
    ];

    // ---- Location Dropdown (province → factories, multi-select) ----
    let selectedProvinceCode = '';
    let selectedFactoryNames = [];

    function findProvince(code) {
      return PROVINCES.find(p => p.code === code);
    }

    function escapeHtml(s) {
      return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    function renderProvinceListView() {
      const panel = document.getElementById('location-panel');
      if (!panel) return;
      panel.innerHTML = `
        <div class="px-5 py-3 bg-gray-50 text-xs font-bold text-gray-500 uppercase tracking-wider border-b border-gray-100 sticky top-0">Chọn khu vực</div>
        <div>
          ${PROVINCES.map(p => {
            const active = selectedProvinceCode === p.code;
            return `
              <button type="button" onclick="openFactoryView('${p.code}')"
                class="w-full flex items-center justify-between px-5 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0 text-left ${active ? 'bg-red-50' : ''}">
                <span class="text-base font-bold ${active ? 'text-[#EE0033]' : 'text-gray-800'}">${escapeHtml(p.name)}</span>
                <i data-lucide="chevron-right" class="w-4 h-4 ${active ? 'text-[#EE0033]' : 'text-gray-400'}"></i>
              </button>
            `;
          }).join('')}
        </div>
      `;
      lucide.createIcons();
    }

    function openFactoryView(code) {
      if (code !== selectedProvinceCode) {
        selectedProvinceCode = code;
        selectedFactoryNames = [];
      }
      renderFactoryView();
    }

    function renderFactoryView() {
      const panel = document.getElementById('location-panel');
      const province = findProvince(selectedProvinceCode);
      if (!panel || !province) return;
      panel.innerHTML = `
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10">
          <button type="button" onclick="backToProvinceList()" class="text-[#004A99] text-sm font-bold flex items-center gap-1">
            <i data-lucide="chevron-left" class="w-4 h-4"></i> Quay lại
          </button>
          <span class="font-bold text-gray-800">${escapeHtml(province.name)}</span>
          <button type="button" onclick="closeLocationDropdown()" class="text-[#EE0033] text-sm font-bold">Xong</button>
        </div>
        <div class="px-5 py-3 bg-gray-50 text-xs font-bold text-gray-500 uppercase tracking-wider border-b border-gray-100">Chọn nhà máy (có thể chọn nhiều)</div>
        <div>
          ${province.factories.map(f => {
            const checked = selectedFactoryNames.includes(f.name);
            return `
              <label class="flex items-start gap-3 px-5 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0">
                <input type="checkbox" value="${escapeHtml(f.name)}"
                  class="factory-checkbox w-5 h-5 accent-[#EE0033] cursor-pointer mt-0.5 flex-shrink-0"
                  ${checked ? 'checked' : ''}
                  onchange="onFactoryChange(this)" />
                <div class="flex-1 min-w-0">
                  <div class="font-bold text-gray-900">${escapeHtml(f.name)}</div>
                  ${f.address ? `<div class="text-xs text-gray-500 mt-0.5">${escapeHtml(f.address)}</div>` : ''}
                </div>
              </label>
            `;
          }).join('')}
        </div>
      `;
      lucide.createIcons();
    }

    function onFactoryChange(cb) {
      const name = cb.value;
      if (cb.checked) {
        if (!selectedFactoryNames.includes(name)) selectedFactoryNames.push(name);
      } else {
        selectedFactoryNames = selectedFactoryNames.filter(n => n !== name);
      }
      updateLocationDisplay();
      clearLocationError();
    }

    function backToProvinceList() {
      renderProvinceListView();
    }

    function openLocationPanel() {
      const panel = document.getElementById('location-panel');
      const chevron = document.getElementById('location-chevron');
      panel.classList.remove('hidden');
      if (chevron) chevron.style.transform = 'rotate(180deg)';
    }

    function closeLocationDropdown() {
      const panel = document.getElementById('location-panel');
      const chevron = document.getElementById('location-chevron');
      panel.classList.add('hidden');
      if (chevron) chevron.style.transform = '';
    }

    function toggleLocationDropdown() {
      const panel = document.getElementById('location-panel');
      const isOpening = panel.classList.contains('hidden');
      if (isOpening) {
        renderProvinceListView();
        openLocationPanel();
      } else {
        closeLocationDropdown();
      }
    }

    function buildLocationDropdown() {
      const panel = document.getElementById('location-panel');
      if (panel && !panel.dataset.stopBound) {
        // Stop clicks inside the panel from reaching the outside-click handler.
        // Without this, re-rendering innerHTML on a child click detaches e.target,
        // which makes wrapper.contains(e.target) return false and closes the panel.
        panel.addEventListener('click', (e) => e.stopPropagation());
        panel.dataset.stopBound = '1';
      }
      renderProvinceListView();
    }

    function updateLocationDisplay() {
      const display = document.getElementById('location-display');
      if (!selectedProvinceCode) {
        display.innerHTML = '<span class="text-gray-400">Chọn địa điểm làm việc</span>';
        return;
      }
      const province = findProvince(selectedProvinceCode);
      if (!province) return;
      if (selectedFactoryNames.length === 0) {
        display.innerHTML = `<div class="text-gray-900 font-bold">${escapeHtml(province.name)}</div>`;
      } else {
        display.innerHTML = `
          <div class="text-gray-900 font-bold">${escapeHtml(province.name)}</div>
          <div class="text-sm text-[#EE0033] font-medium mt-0.5 whitespace-normal break-words">${selectedFactoryNames.map(escapeHtml).join(', ')}</div>
        `;
      }
    }

    function clearLocationError() {
      const err = document.getElementById('location-error');
      const trigger = document.getElementById('location-trigger');
      if (err) err.classList.add('hidden');
      if (trigger) trigger.classList.remove('input-error');
    }

    // ---- Recruitment areas display ----
    function renderRecruitmentAreas() {
      const container = document.getElementById('recruitment-areas');
      if (!container) return;
      const renderProvinceBlock = (code) => {
        const p = findProvince(code);
        if (!p) return '';
        return `
          <div>
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-5 rounded-sm" style="background:#004A99;"></div>
              <h4 class="font-bold uppercase tracking-wide" style="color:#004A99;">${escapeHtml(p.name)}</h4>
            </div>
            <div class="flex flex-wrap gap-2 pl-3">
              ${p.factories.map(f => `
                <span class="inline-flex items-center gap-1.5 bg-white px-3 py-1.5 rounded-full border border-gray-200 text-sm text-gray-700">
                  <i data-lucide="map-pin" class="w-3 h-3 flex-shrink-0" style="color:#EE0033;"></i>
                  ${escapeHtml(f.name)}
                </span>
              `).join('')}
            </div>
          </div>
        `;
      };
      container.innerHTML = `
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
          <div class="space-y-5">${RECRUITMENT_COLUMNS[0].map(renderProvinceBlock).join('')}</div>
          <div class="space-y-5">${RECRUITMENT_COLUMNS[1].map(renderProvinceBlock).join('')}</div>
        </div>
      `;
      lucide.createIcons();
    }

    // ---- Consultation Time ----
    const CONSULT_HOUR_START = 8;      // "Từ" min: 8:00
    const CONSULT_HOUR_END = 19;       // "Từ" max: 19:00
    const CONSULT_DURATION_HOURS = 2;  // "Đến" = "Từ" + 2h (auto, not editable)

    function addHoursToHHMM(hhmm, hours) {
      const [h, m] = hhmm.split(':').map(Number);
      return String(h + hours).padStart(2, '0') + ':' + String(m).padStart(2, '0');
    }

    // Default "Từ" = current hour, clamped to [CONSULT_HOUR_START, CONSULT_HOUR_END]
    function getDefaultFromHour() {
      let h = new Date().getHours();
      if (h < CONSULT_HOUR_START) h = CONSULT_HOUR_START;
      if (h > CONSULT_HOUR_END) h = CONSULT_HOUR_END;
      return String(h).padStart(2, '0') + ':00';
    }

    function buildConsultHourOptions() {
      const from = document.getElementById('consult-from');
      if (!from) return;
      let opts = '';
      for (let h = CONSULT_HOUR_START; h <= CONSULT_HOUR_END; h++) {
        const val = String(h).padStart(2, '0') + ':00';
        const display = h + ':00';
        opts += `<option value="${val}">${display}</option>`;
      }
      from.innerHTML = opts;
      from.value = getDefaultFromHour();
      updateConsultToDisplay();
    }

    function updateConsultToDisplay() {
      const fromEl = document.getElementById('consult-from');
      const toEl = document.getElementById('consult-to');
      if (!fromEl || !toEl) return '';
      const to = addHoursToHHMM(fromEl.value, CONSULT_DURATION_HOURS);
      toEl.textContent = to;
      return to;
    }

    function onConsultTypeChange() {
      const checked = document.querySelector('input[name="consult-type"]:checked');
      const isRange = checked && checked.value === 'range';

      // Toggle option card highlight
      ['consult-opt-now', 'consult-opt-range'].forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        const radio = el.querySelector('input[type="radio"]');
        const span = el.querySelector('span');
        if (radio.checked) {
          el.classList.add('border-[#EE0033]', 'bg-red-50');
          el.classList.remove('border-gray-100', 'bg-gray-50');
          span.classList.add('text-[#EE0033]');
          span.classList.remove('text-gray-800');
        } else {
          el.classList.remove('border-[#EE0033]', 'bg-red-50');
          el.classList.add('border-gray-100', 'bg-gray-50');
          span.classList.remove('text-[#EE0033]');
          span.classList.add('text-gray-800');
        }
      });

      document.getElementById('consult-range-wrapper').classList.toggle('hidden', !isRange);
      clearConsultError();
    }

    function onConsultRangeChange() {
      const from = document.getElementById('consult-from').value || '--:--';
      const to = updateConsultToDisplay();
      document.getElementById('consult-range-hint').textContent =
        `* Viec3mien sẽ ưu tiên liên hệ trong khoảng từ ${from} – ${to}`;
      clearConsultError();
    }

    function clearConsultError() {
      document.getElementById('consult-error').classList.add('hidden');
    }

    function getConsultationTime() {
      const checked = document.querySelector('input[name="consult-type"]:checked');
      if (!checked || checked.value === 'now') return 'Ngay sau khi đăng ký';
      const from = document.getElementById('consult-from').value;
      const to = addHoursToHHMM(from, CONSULT_DURATION_HOURS);
      return `${from} - ${to}`;
    }

    function validateConsultation() {
      // "Đến" is auto-calculated, "Từ" is constrained to valid options → no error to surface
      return '';
    }

    // ---- Form Logic ----
    function validatePhone(phone) {
      if (!phone.trim()) return 'Vui lòng nhập số điện thoại.';
      const re = /^(0|84)\d{8,11}$/;
      if (!re.test(phone)) return 'Số điện thoại không đúng định dạng (0x... hoặc 84x...).';
      return '';
    }

    function clearPhoneError() {
      const err = document.getElementById('phone-error');
      const inp = document.getElementById('input-phone');
      err.classList.add('hidden');
      inp.classList.remove('input-error');
    }

    function clearNameError() {
      const err = document.getElementById('name-error');
      const inp = document.getElementById('input-name');
      err.classList.add('hidden');
      inp.classList.remove('input-error');
    }

    function handleSubmit(e) {
      e.preventDefault();
      const phone = document.getElementById('input-phone').value;
      const name = document.getElementById('input-name').value;

      let hasError = false;

      const phoneErr = validatePhone(phone);
      if (phoneErr) {
        const errEl = document.getElementById('phone-error');
        errEl.textContent = phoneErr;
        errEl.classList.remove('hidden');
        document.getElementById('input-phone').classList.add('input-error');
        hasError = true;
      }

      const errName = document.getElementById('name-error');
      if (!name.trim()) {
        errName.textContent = 'Vui lòng nhập họ và tên.';
        errName.classList.remove('hidden');
        document.getElementById('input-name').classList.add('input-error');
        hasError = true;
      }else{
        errName.textContent = ''
      }

      const errLoc = document.getElementById('location-error');
      if (!selectedProvinceCode) {
        errLoc.textContent = 'Vui lòng chọn địa điểm làm việc.';
        errLoc.classList.remove('hidden');
        document.getElementById('location-trigger').classList.add('input-error');
        hasError = true;
      } else if (selectedFactoryNames.length === 0) {
        errLoc.textContent = 'Vui lòng chọn ít nhất một nhà máy.';
        errLoc.classList.remove('hidden');
        document.getElementById('location-trigger').classList.add('input-error');
        hasError = true;
      }

      const consultErr = validateConsultation();
      if (consultErr) {
        const errConsult = document.getElementById('consult-error');
        errConsult.textContent = consultErr;
        errConsult.classList.remove('hidden');
        hasError = true;
      }

      // Chỉ return 1 lần sau khi đã check hết
      if (hasError) return;

      // Show loading state
      const btn = document.getElementById('submit-btn');
      const btnText = document.getElementById('btn-text');
      const spinner = document.getElementById('btn-spinner');

      btn.disabled = true;
      btn.style.opacity = '0.7';
      btnText.textContent = '';
      spinner.classList.remove('hidden');

      // Call API
      const payload = {
        sender: "LandingPage",
        campaignCode: "VDS", // default CampaignCode
        phoneNumber: phone,
        candidateName: name,
        workProvinceCode: selectedProvinceCode,
        positionRankDesiderate: selectedFactoryNames.join(','),
        consultationTime: getConsultationTime()
      };

      fetch("https://viec3mien.viettelmoney.vn/ldp/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
          "x-api-key": "ZTc1NDJhOTYtYzM4ZS00MTk1LWFkNzItNjE4ZjI3YmM5YjM4" // keep landing page compatible to GGForm
        },
        body: JSON.stringify(payload)
      })
        .then(res => {
          if (!res.ok) throw new Error("HTTP " + res.status);
          return res.json();
        })
        .then(data => {
          // Success
          document.getElementById('contact-form').classList.add('hidden');
          document.getElementById('form-success').classList.remove('hidden');
        })
        .catch(err => {
          // Error — reset button, show error message
          console.error("API error:", err);
          btn.disabled = false;
          btn.style.opacity = '1';
          btnText.textContent = 'Gửi đăng ký ngay';
          spinner.classList.add('hidden');

          const errEl = document.getElementById('phone-error');
          errEl.textContent = 'Có lỗi xảy ra, vui lòng thử lại sau.';
          errEl.classList.remove('hidden');
          errName.classList.remove('hidden')
        });
    }

    function resetForm() {
      document.getElementById('input-phone').value = '';
      document.getElementById('input-name').value = '';
      selectedProvinceCode = '';
      selectedFactoryNames = [];
      renderProvinceListView();
      updateLocationDisplay();
      closeLocationDropdown();
      // Reset consultation time to default
      const radioNow = document.querySelector('input[name="consult-type"][value="now"]');
      if (radioNow) radioNow.checked = true;
      document.getElementById('consult-from').value = getDefaultFromHour();
      updateConsultToDisplay();
      onConsultTypeChange();
      onConsultRangeChange();
      clearPhoneError();
      clearNameError();
      clearLocationError();
      clearConsultError();
      const btn = document.getElementById('submit-btn');
      const btnText = document.getElementById('btn-text');
      const spinner = document.getElementById('btn-spinner');

      btn.disabled = false;
      btn.style.opacity = '1';
      btnText.textContent = 'Gửi đăng ký ngay';
      spinner.classList.add('hidden');

      document.getElementById('form-success').classList.add('hidden');
      document.getElementById('contact-form').classList.remove('hidden');
    }

    // ---- Scroll Reveal ----
    function initReveal() {
      const elements = document.querySelectorAll('.reveal, .reveal-right');
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.12 });

      elements.forEach(el => observer.observe(el));
    }

    // Trigger on load
    document.addEventListener('DOMContentLoaded', () => {
      buildLocationDropdown();
      renderRecruitmentAreas();
      buildConsultHourOptions();
      onConsultTypeChange(); // init highlight for default option
      lucide.createIcons(); // re-run after DOM ready
      initReveal();

      // Immediately reveal above-fold elements
      document.querySelectorAll('.reveal, .reveal-right').forEach(el => {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight) el.classList.add('visible');
      });

      // Close location dropdown when clicking outside
      document.addEventListener('click', (e) => {
        const wrapper = document.getElementById('location-wrapper');
        const panel = document.getElementById('location-panel');
        if (!wrapper || !panel) return;
        if (!wrapper.contains(e.target) && !panel.classList.contains('hidden')) {
          panel.classList.add('hidden');
          const chevron = document.getElementById('location-chevron');
          if (chevron) chevron.style.transform = '';
        }
      });
    });

    const IMAGES = [
      { id: 'header-logo', type: 'image/png' },
      { id: 'hero-img', type: 'image/jpeg' },
      { id: 'commitment-img', type: 'image/jpeg' },
    ];

    function convertToBase64(imgEl, type) {
      try {
        const canvas = document.createElement('canvas');
        canvas.width = imgEl.naturalWidth;
        canvas.height = imgEl.naturalHeight;
        canvas.getContext('2d').drawImage(imgEl, 0, 0);
        imgEl.src = canvas.toDataURL(type, 0.85);
      } catch (e) {
        console.warn('Base64 convert failed:', imgEl.id, e);
      }
    }

    function initConvert() {
      IMAGES.forEach(({ id, type }) => {
        const img = document.getElementById(id);
        if (!img) return;

        if (img.complete && img.naturalWidth > 0) {
          convertToBase64(img, type);
        } else {
          img.addEventListener('load', () => convertToBase64(img, type));
        }
      });
    }

    // Chạy sau khi DOM load xong
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initConvert);
    } else {
      initConvert();
    }
  </script>
</body>

</html>