?php get_header(); ?>

<main class="flex-grow">

    <!-- ============================================= -->
    <!-- 1. PHÂN HỆ TRANG CHỦ (PAGE: HOME) -->
    <!-- ============================================= -->
    <div id="page-trang-chu" class="page-section hidden">
      
      <!-- HERO BANNER TRÀN VIỀN SLIDESHOW (Ảnh dưới, Nội dung đè lên trên - Phong cách Hòa Phát) -->
      <section class="relative min-h-[75vh] md:min-h-[85vh] bg-brand-950 flex items-center overflow-hidden">
        
        <!-- Slideshow hình nền tự động chạy -->
        <div class="absolute inset-0 z-0">
          <!-- Slide 1 -->
          <div class="hero-slide absolute inset-0 opacity-100 transition-opacity duration-1000 ease-in-out">
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('[https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=1920](https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=1920)');"></div>
            <div class="absolute inset-0 bg-blueprint"></div>
          </div>
          <!-- Slide 2 -->
          <div class="hero-slide absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out">
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('[https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=1920](https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=1920)');"></div>
          </div>
          <!-- Slide 3 -->
          <div class="hero-slide absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out">
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('[https://images.unsplash.com/photo-1537462715879-360eeb61a0bc?auto=format&fit=crop&q=80&w=1920](https://images.unsplash.com/photo-1537462715879-360eeb61a0bc?auto=format&fit=crop&q=80&w=1920)');"></div>
          </div>
        </div>

        <!-- LỚP PHỦ CHUYỂN GRADIENT XANH DƯƠNG SẪM (Giúp chữ trắng nổi bật bên trái) -->
        <div class="absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-950/75 to-transparent z-10"></div>

        <!-- KHỐI CHỮ NỔI LÊN TRÊN SLIDESHOW -->
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 z-20 w-full">
          <div class="max-w-3xl text-left">
            <h1 class="font-display font-extrabold text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white tracking-tight leading-tight uppercase">
              Cơ Khí Đúc &<br>
              <span class="text-brand-400">Luyện Kim Công Nghiệp</span><br>
              Chất Lượng Cao
            </h1>
            <p class="mt-6 text-base sm:text-lg text-gray-300 font-normal leading-relaxed max-w-2xl">
              Công ty Đức Thành tự hào là đối tác chiến lược hàng đầu tại Việt Nam, chuyên nghiên cứu, đúc luyện và gia công chế tạo phụ tùng chịu mài mòn công suất lớn cho máy móc ngành khai thác mỏ, xi măng và xây dựng.
            </p>
            <div class="mt-10 flex flex-col sm:flex-row gap-4">
              <button onclick="switchPage('lien-he')" class="px-8 py-4 bg-brand-500 text-white font-bold rounded-sm text-center uppercase tracking-wide hover:bg-brand-600 transition-all duration-150 industrial-shadow-hover">
                Liên hệ nhận báo giá
              </button>
              <button onclick="switchPage('san-pham')" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-sm border border-white/20 text-center uppercase tracking-wide backdrop-blur-sm transition-all duration-150">
                Xem Danh Mục Sản Phẩm
              </button>
            </div>
          </div>
        </div>

        <!-- Nút chuyển Slide thủ công -->
        <button onclick="prevSlide()" class="absolute left-4 top-1/2 -translate-y-1/2 z-25 p-3 rounded-sm bg-black/25 text-white/80 hover:text-white hover:bg-black/50 transition-all hidden md:block">
          ❮
        </button>
        <button onclick="nextSlide()" class="absolute right-4 top-1/2 -translate-y-1/2 z-25 p-3 rounded-sm bg-black/25 text-white/80 hover:text-white hover:bg-black/50 transition-all hidden md:block">
          ❯
        </button>

        <!-- Chấm chỉ số Slide ở cạnh đáy -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-25 flex space-x-2">
          <button onclick="setSlide(0)" class="slide-dot w-3 h-3 rounded-full bg-white opacity-100 transition-all"></button>
          <button onclick="setSlide(1)" class="slide-dot w-3 h-3 rounded-full bg-white/40 opacity-100 transition-all"></button>
          <button onclick="setSlide(2)" class="slide-dot w-3 h-3 rounded-full bg-white/40 opacity-100 transition-all"></button>
        </div>
      </section>

      <!-- PHẦN TÓM TẮT GIỚI THIỆU (HOME - ABOUT US BRIEF) -->
      <section class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <span class="text-brand-500 font-semibold tracking-wider uppercase text-sm block mb-2">// Về chúng tôi</span>
              <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-950 tracking-tight mb-6">
                Chặng Đường Phát Triển Và Sứ Mệnh Chế Tạo Cơ Khí Nặng
              </h2>
              <p class="text-gray-600 leading-relaxed mb-4">
                Công ty TNHH Sản xuất và TMTH Đức Thành ra đời với định hướng mang tới cho thị trường Việt Nam các sản phẩm đúc thép chất lượng cao, có độ bền và khả năng chống chịu mài mòn vượt trội, đáp ứng tốt cho các cỗ máy hoạt động với cường độ khắc nghiệt hàng đầu tại các mỏ đá, công trường xây dựng và dây chuyền sản xuất xi măng.
              </p>
              <p class="text-gray-600 leading-relaxed mb-6 font-medium text-brand-500">
                “Sản phẩm Đúc thép chịu mòn cao cấp – Tiết kiệm chi phí vận hành cho doanh nghiệp của bạn.”
              </p>
              <button onclick="switchPage('gioi-thieu')" class="text-brand-500 font-bold hover:text-brand-600 flex items-center gap-2 group transition-colors">
                Xem toàn bộ lịch sử & định hướng của công ty
                <span class="group-hover:translate-x-1 transition-transform">→</span>
              </button>
            </div>
            <div class="relative p-2 bg-gray-100 rounded-lg">
              <div class="relative aspect-video w-full h-full rounded-md overflow-hidden bg-gray-200">
                <img src="[https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800)" alt="Nhà xưởng luyện kim Đức Thành" class="w-full h-full object-cover">
              </div>
              <div class="absolute -bottom-4 -right-4 bg-brand-500 text-white p-6 rounded-md hidden sm:block industrial-shadow">
                <p class="font-display font-extrabold text-3xl">15+</p>
                <p class="text-xs font-semibold uppercase tracking-wider">Năm kinh nghiệm</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- PHẦN SLIDE CATALOGUE SẢN PHẨM TIÊU BIỂU (HOME - PRODUCT CATALOGUE SLIDE) -->
      <section class="py-16 md:py-24 bg-blueprint">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12">
            <div>
              <span class="text-brand-500 font-semibold tracking-wider uppercase text-sm block mb-2">// Danh mục sản phẩm</span>
              <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-950 tracking-tight">Sản Phẩm Đúc Tiêu Biểu</h2>
            </div>
            <div class="flex gap-2 mt-4 md:mt-0">
              <button onclick="scrollCatalogue('prev')" class="p-3 bg-white border border-gray-200 hover:bg-brand-50 text-brand-500 rounded-sm hover:border-brand-500 transition-colors">
                ❮
              </button>
              <button onclick="scrollCatalogue('next')" class="p-3 bg-white border border-gray-200 hover:bg-brand-50 text-brand-500 rounded-sm hover:border-brand-500 transition-colors">
                ❯
              </button>
            </div>
          </div>

          <!-- CONTAINER SLIDE CHỨA CÁC CARD SẢN PHẨM -->
          <div id="product-catalogue-container" class="flex gap-6 overflow-x-auto scroll-smooth pb-4 px-2 -mx-2 snap-x" style="scrollbar-width: none; -ms-overflow-style: none;">
            
            <!-- Sản phẩm 1 -->
            <div class="min-w-[280px] sm:min-w-[320px] md:min-w-[380px] bg-white border border-gray-200 rounded-md p-4 snap-start flex-shrink-0 flex flex-col justify-between industrial-shadow-hover">
              <div>
                <div class="aspect-video w-full rounded-sm bg-gray-100 overflow-hidden mb-4">
                  <img src="[https://images.unsplash.com/photo-1563784462386-044fd95e9852?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1563784462386-044fd95e9852?auto=format&fit=crop&q=80&w=800)" alt="Búa nghiền đá hợp kim hàm lượng Mangan cao" class="w-full h-full object-cover">
                </div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-2">Búa Nghiền Đá Hợp Kim Mn13Cr2</h3>
                <p class="text-xs text-brand-500 font-bold mb-3 uppercase tracking-wider">Ngành Khai Thác Khoáng Sản Mỏ</p>
                <p class="text-sm text-gray-500 mb-4 line-clamp-3">Búa nghiền đúc bằng vật liệu Thép Mangan cao tăng cường khả năng chịu nén, chịu va đập cực lớn, chuyên phục vụ máy nghiền đá công suất lớn.</p>
              </div>
              <a href="tel:0989142366" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm text-center rounded-sm transition-colors block">
                📞 Liên Hệ Nhận Báo Giá
              </a>
            </div>

            <!-- Sản phẩm 2 -->
            <div class="min-w-[280px] sm:min-w-[320px] md:min-w-[380px] bg-white border border-gray-200 rounded-md p-4 snap-start flex-shrink-0 flex flex-col justify-between industrial-shadow-hover">
              <div>
                <div class="aspect-video w-full rounded-sm bg-gray-100 overflow-hidden mb-4">
                  <img src="[https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800)" alt="Tấm lót lò xi măng chịu nhiệt chịu mài mòn cao" class="w-full h-full object-cover">
                </div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-2">Tấm Lót Lò Nghiền Cr-Mo</h3>
                <p class="text-xs text-brand-500 font-bold mb-3 uppercase tracking-wider">Ngành Sản Xuất Xi Măng</p>
                <p class="text-sm text-gray-500 mb-4 line-clamp-3">Chế tạo từ Thép hợp kim Crom - Molypden có cơ tính chống mòn biến dạng siêu việt, giữ tuổi thọ máy nghiền xi măng ổn định dài lâu.</p>
              </div>
              <a href="tel:0989142366" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm text-center rounded-sm transition-colors block">
                📞 Liên Hệ Nhận Báo Giá
              </a>
            </div>

            <!-- Sản phẩm 3 -->
            <div class="min-w-[280px] sm:min-w-[320px] md:min-w-[380px] bg-white border border-gray-200 rounded-md p-4 snap-start flex-shrink-0 flex flex-col justify-between industrial-shadow-hover">
              <div>
                <div class="aspect-video w-full rounded-sm bg-gray-100 overflow-hidden mb-4">
                  <img src="[https://images.unsplash.com/photo-1530124560072-a059b014b37d?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1530124560072-a059b014b37d?auto=format&fit=crop&q=80&w=800)" alt="Bánh răng máy nghiền cơ khí chính xác" class="w-full h-full object-cover">
                </div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-2">Vành Răng Lớn & Bánh Răng Máy Nghiền</h3>
                <p class="text-xs text-brand-500 font-bold mb-3 uppercase tracking-wider">Cơ khí Chế tạo máy</p>
                <p class="text-sm text-gray-500 mb-4 line-clamp-3">Gia công răng chính xác bằng máy CNC khổ lớn, đúc thép khử oxy và nhiệt luyện xử lý bề mặt đạt độ cứng tối đa.</p>
              </div>
              <a href="tel:0989142366" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm text-center rounded-sm transition-colors block">
                📞 Liên Hệ Nhận Báo Giá
              </a>
            </div>

          </div>

          <div class="mt-8 text-center">
            <button onclick="switchPage('san-pham')" class="px-6 py-3 bg-brand-950 text-white font-semibold text-sm rounded-sm hover:bg-brand-900 transition-colors">
              Xem toàn bộ danh mục sản phẩm chi tiết
            </button>
          </div>
        </div>
      </section>

      <!-- PHẦN TÓM TẮT NĂNG LỰC (HOME - CAPABILITY BRIEF) -->
      <section class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <div class="lg:col-span-1">
              <span class="text-brand-500 font-semibold tracking-wider uppercase text-sm block mb-2">// Năng lực công nghiệp</span>
              <h2 class="font-display font-bold text-3xl text-brand-950 tracking-tight mb-6">Trang Thiết Bị Luyện Kim Đỉnh Cao</h2>
              <p class="text-gray-600 mb-6">
                Nhà xưởng Đức Thành sở hữu các lò điện cảm ứng trung tần thế hệ mới, kết hợp hệ thống phân tích phổ quang tự động đo lường hàm lượng hóa học thép đúc chính xác tới từng phần vạn.
              </p>
              <button onclick="switchPage('nang-luc')" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 text-white font-bold text-xs rounded-sm uppercase tracking-wide transition-all industrial-shadow-hover">
                Tìm hiểu năng lực sản xuất của chúng tôi
              </button>
            </div>
            
            <div class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div class="p-6 bg-gray-50 border border-gray-200 rounded-md">
                <span class="text-4xl">⚡</span>
                <h3 class="font-display font-bold text-lg text-brand-950 mt-4 mb-2">Lò Điện Trung Tần 2 Tấn</h3>
                <p class="text-sm text-gray-600">Cho phép đúc liên tục các phôi đúc kích thước khổng lồ với nhiệt độ lò ổn định, khử tạp chất hoàn hảo.</p>
              </div>
              
              <div class="p-6 bg-gray-50 border border-gray-200 rounded-md">
                <span class="text-4xl">🔬</span>
                <h3 class="font-display font-bold text-lg text-brand-950 mt-4 mb-2">Phòng Quang Phổ Nhập Khẩu</h3>
                <p class="text-sm text-gray-600">Kiểm soát KCS nghiêm ngặt đầu vào thép tấm và thành phẩm đúc luyện kim trước khi xuất xưởng.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>

    <!-- ============================================= -->
    <!-- 2. PHÂN HỆ TRANG GIỚI THIỆU (PAGE: ABOUT) -->
    <!-- ============================================= -->
    <div id="page-gioi-thieu" class="page-section hidden">
      <section class="bg-brand-950 text-white py-16 bg-blueprint">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
          <h1 class="font-display font-extrabold text-3xl sm:text-4xl uppercase tracking-tight">Giới Thiệu Doanh Nghiệp</h1>
          <p class="mt-2 text-brand-300 font-semibold">// Công ty TNHH Sản Xuất và TMTH Đức Thành</p>
        </div>
      </section>

      <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="prose prose-blue max-w-none">
            <h2 class="font-display font-bold text-2xl text-brand-950 mb-6 border-b pb-2 border-brand-500/20">Về Đức Thành</h2>
            <p class="text-gray-600 leading-relaxed mb-6">
              Được thành lập với khát vọng nâng cao giá trị kỹ thuật Việt Nam, **Công ty TNHH Sản Xuất và TMTH Đức Thành** chuyên tâm nghiên cứu và hoạt động trong lĩnh vực luyện kim, cơ khí chế tạo chịu mòn hàng đầu tại miền Bắc. Chúng tôi đặt mục tiêu bứt phá bằng việc tạo ra các chi tiết cơ khí phụ tùng có tuổi thọ vượt trội, trực tiếp hỗ trợ tăng hiệu suất nghiền sàng nguyên vật liệu cho các tập đoàn công nghiệp, nhà máy xi măng và mỏ khai khoáng đá trong nước.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 my-10 bg-gray-50 p-6 border border-gray-200 rounded-md">
              <div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-3">Tầm Nhìn Chiến Lược</h3>
                <p class="text-sm text-gray-600 leading-relaxed">
                  Trở thành doanh nghiệp hàng đầu Đông Nam Á trong việc nghiên cứu và chế tạo các loại thép đúc, gang đúc hợp kim chất lượng siêu cao dùng cho công nghiệp nặng và mài mòn.
                </p>
              </div>
              <div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-3">Sứ Mệnh Của Chúng Tôi</h3>
                <p class="text-sm text-gray-600 leading-relaxed">
                  Cung cấp những giải pháp cơ khí tối ưu nhất, giúp cắt giảm ít nhất 30% thời gian dừng lò để thay phụ tùng cho khách hàng, góp phần nâng cao khả năng cạnh tranh kinh tế chung.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- ============================================= -->
    <!-- 3. PHÂN HỆ TRANG SẢN PHẨM (PAGE: PRODUCTS) -->
    <!-- ============================================= -->
    <div id="page-san-pham" class="page-section hidden">
      <section class="bg-brand-950 text-white py-16 bg-blueprint">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
          <h1 class="font-display font-extrabold text-3xl sm:text-4xl uppercase tracking-tight">Danh Mục Sản Phẩm Đúc Luyện Kim</h1>
          <p class="mt-2 text-brand-300 font-semibold">// Phụ tùng máy nghiền mỏ, xi măng, xây dựng chịu lực cao</p>
        </div>
      </section>

      <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Sản phẩm mẫu 1 -->
            <div class="bg-white border border-gray-200 rounded-md p-5 flex flex-col justify-between industrial-shadow-hover">
              <div>
                <div class="aspect-video w-full rounded-sm bg-gray-100 overflow-hidden mb-4">
                  <img src="[https://images.unsplash.com/photo-1563784462386-044fd95e9852?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1563784462386-044fd95e9852?auto=format&fit=crop&q=80&w=800)" alt="Búa nghiền xi măng thép măng-gan" class="w-full h-full object-cover">
                </div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-1">Búa Nghiền Đá Mn13Cr2</h3>
                <span class="text-xs text-brand-500 font-semibold uppercase tracking-wider block mb-3">Khai khoáng / Đá mỏ</span>
                <p class="text-sm text-gray-500 mb-4 leading-relaxed">
                  Thiết kế rãnh cơ khí chịu mỏi tốt, bổ sung hợp kim vi lượng hiếm cho dẻo dai cao tránh hiện tượng rơi vỡ đầu búa khi vấp dị vật sắt thép dưới quặng.
                </p>
              </div>
              <a href="tel:0989142366" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm text-center rounded-sm transition-colors block">
                📞 Nhận báo giá ngay: 0989 142 366
              </a>
            </div>

            <!-- Sản phẩm mẫu 2 -->
            <div class="bg-white border border-gray-200 rounded-md p-5 flex flex-col justify-between industrial-shadow-hover">
              <div>
                <div class="aspect-video w-full rounded-sm bg-gray-100 overflow-hidden mb-4">
                  <img src="[https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800)" alt="Tấm lót vách xi măng lò nghiền" class="w-full h-full object-cover">
                </div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-1">Tấm Lót Lò Nghiền Cr-Mo</h3>
                <span class="text-xs text-brand-500 font-semibold uppercase tracking-wider block mb-3">Ngành xi măng</span>
                <p class="text-sm text-gray-500 mb-4 leading-relaxed">
                  Thép đúc chứa hàm lượng Crom cao (15-27% Cr) kết hợp mác Molybden dẻo hóa móng vách nghiền sàng cho dây chuyền clinker lò quay xi măng khắc nghiệt.
                </p>
              </div>
              <a href="tel:0989142366" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm text-center rounded-sm transition-colors block">
                📞 Nhận báo giá ngay: 0989 142 366
              </a>
            </div>

            <!-- Sản phẩm mẫu 3 -->
            <div class="bg-white border border-gray-200 rounded-md p-5 flex flex-col justify-between industrial-shadow-hover">
              <div>
                <div class="aspect-video w-full rounded-sm bg-gray-100 overflow-hidden mb-4">
                  <img src="[https://images.unsplash.com/photo-1530124560072-a059b014b37d?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1530124560072-a059b014b37d?auto=format&fit=crop&q=80&w=800)" alt="Bánh răng máy nghiền cơ khí chính xác" class="w-full h-full object-cover">
                </div>
                <h3 class="font-display font-bold text-lg text-brand-950 mb-1">Bánh Răng & Vành Răng CNC</h3>
                <span class="text-xs text-brand-500 font-semibold uppercase tracking-wider block mb-3">Cơ khí chế tạo</span>
                <p class="text-sm text-gray-500 mb-4 leading-relaxed">
                  Thiết kế tinh xảo trên phôi rèn hoặc đúc hợp kim, thực hiện mài dưỡng ăn khớp tiêu chuẩn công nghệ cao đem lại độ êm chống ồn tuyệt vời.
                </p>
              </div>
              <a href="tel:0989142366" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm text-center rounded-sm transition-colors block">
                📞 Nhận báo giá ngay: 0989 142 366
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- ============================================= -->
    <!-- 4. PHÂN HỆ TRANG NĂNG LỰC (PAGE: CAPABILITY) -->
    <!-- ============================================= -->
    <div id="page-nang-luc" class="page-section hidden">
      <section class="bg-brand-950 text-white py-16 bg-blueprint">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
          <h1 class="font-display font-extrabold text-3xl sm:text-4xl uppercase tracking-tight">Năng Lực Sản Xuất & Công Nghệ</h1>
          <p class="mt-2 text-brand-300 font-semibold">// Cơ sở hạ tầng máy móc hiện đại và quy chuẩn chất lượng</p>
        </div>
      </section>

      <section class="py-16 bg-white">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h2 class="font-display font-bold text-2xl text-brand-950 mb-4">Nhà Xưởng Đúc Điện Trung Tần Hiện Đại</h2>
              <p class="text-gray-600 leading-relaxed mb-4">
                Công ty Đức Thành sở hữu chuỗi dây chuyền luyện đúc tự động khép kín hoàn chỉnh, lò nung nấu điện từ trường trung tần thế mới cho phép khử khí tuyệt đối trong lòng thép lỏng, mang lại cấu trúc mạng tinh thể thép vô cùng mịn dai và ổn định.
              </p>
            </div>
            <div class="rounded-md overflow-hidden bg-gray-100 aspect-video">
              <img src="[https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800](https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800)" alt="Lò luyện thép đúc trung tần Đức Thành rực sáng" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- ============================================= -->
    <!-- 5. PHÂN HỆ TRANG TUYỂN DỤNG (PAGE: CAREERS) -->
    <!-- ============================================= -->
    <div id="page-tuyen-dung" class="page-section hidden">
      <section class="bg-brand-950 text-white py-16 bg-blueprint">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
          <h1 class="font-display font-extrabold text-3xl sm:text-4xl uppercase tracking-tight">Cơ Hội Nghề Nghiệp</h1>
          <p class="mt-2 text-brand-300 font-semibold">// Đồng hành cùng Đức Thành phát triển nền cơ khí nặng Việt Nam</p>
        </div>
      </section>

      <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="space-y-6">
            <div class="bg-gray-50 border border-gray-200 rounded-md p-6 industrial-shadow-hover">
              <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
                <div>
                  <span class="inline-block px-2.5 py-1 bg-brand-100 text-brand-500 text-xs font-bold rounded-xs uppercase tracking-wider mb-2">Toàn thời gian</span>
                  <h3 class="font-display font-bold text-xl text-brand-950">Kỹ Sư Luyện Kim - Đúc Thép Hợp Kim</h3>
                </div>
                <span class="text-sm font-semibold text-brand-500 bg-white border px-3 py-1.5 rounded-sm">Lương: 15 - 25 Triệu VNĐ</span>
              </div>
              <p class="text-sm text-gray-600 mb-4">
                <strong>Yêu cầu công việc:</strong> Tốt nghiệp chuyên ngành Luyện Kim, Khoa Học Vật Liệu. Có kinh nghiệm tính toán mẻ lò điện trung tần, phối liệu Crom, Mangan, Niken.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- ============================================= -->
    <!-- 6. PHÂN HỆ TRANG LIÊN HỆ (PAGE: CONTACT) -->
    <!-- ============================================= -->
    <div id="page-lien-he" class="page-section hidden">
      <section class="bg-brand-950 text-white py-16 bg-blueprint">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
          <h1 class="font-display font-extrabold text-3xl sm:text-4xl uppercase tracking-tight">Yêu Cầu Báo Giá & Liên Hệ</h1>
          <p class="mt-2 text-brand-300 font-semibold">// Tư vấn giải pháp luyện kim chế tạo máy đúc thép chịu mài mòn</p>
        </div>
      </section>

      <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            
            <!-- THÔNG TIN DOANH NGHIỆP CHI TIẾT -->
            <div>
              <span class="text-brand-500 font-semibold tracking-wider uppercase text-sm block mb-2">// kết nối trực tiếp</span>
              <h2 class="font-display font-bold text-2xl text-brand-950 mb-6">Liên Hệ Công Ty Đức Thành</h2>
              <p class="text-gray-600 leading-relaxed mb-8">
                Quý khách hàng vui lòng liên hệ theo mẫu hoặc các thông tin trực tiếp dưới đây:
              </p>

              <div class="space-y-6 text-sm">
                <p>🏢 <strong>Doanh nghiệp:</strong> Công ty TNHH Sản xuất và TMTH Đức Thành</p>
                <p>📍 <strong>Trụ sở:</strong> Hải Dương, Việt Nam</p>
                <p>🏢 <strong>MST:</strong> 0108927409</p>
                <p>📞 <strong>Hotline:</strong> 0989 142 366</p>
                <p>✉️ <strong>Email:</strong> ducthanhpt18@gmail.com</p>
              </div>
            </div>

            <!-- FORM GỬI EMAIL TỰ ĐỘNG (KẾT NỐI FORMSPREE) -->
            <div class="bg-gray-50 border border-gray-200 rounded-md p-8 industrial-shadow">
              <h3 class="font-display font-bold text-xl text-brand-950 mb-2">Điền Thông Tin Hỏi Báo Giá</h3>
              <p class="text-xs text-gray-500 mb-6">Thông tin sau khi gửi sẽ được tự động gửi về: <span class="font-medium text-brand-500">ducthanhpt18@gmail.com</span></p>
              
              <!-- THAY LINK FORMSPREE CỦA BẠN VÀO DƯỚI ĐÂY -->
              <form action="[https://formspree.io/f/THAY_MA_CUA_BAN_VAO_DAY](https://formspree.io/f/THAY_MA_CUA_BAN_VAO_DAY)" method="POST" class="space-y-5">
                <div>
                  <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Họ và tên quý khách *</label>
                  <input type="text" name="name" required placeholder="Ví dụ: Nguyễn Văn A" class="w-full px-4 py-3 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white text-sm">
                </div>

                <div>
                  <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Số điện thoại liên hệ trực tiếp *</label>
                  <input type="tel" name="phone" required placeholder="Ví dụ: 0912345678" class="w-full px-4 py-3 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white text-sm">
                </div>

                <div>
                  <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Sản phẩm cần báo giá *</label>
                  <textarea name="message" required rows="4" placeholder="Ví dụ: Báo giá búa máy nghiền đá Mn13..." class="w-full px-4 py-3 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white text-sm"></textarea>
                </div>

                <button type="submit" class="w-full py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm tracking-wide uppercase rounded-sm transition-all duration-150 industrial-shadow-hover">
                  Gửi yêu cầu nhận báo giá ngay
                </button>
              </form>
            </div>

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

</main>

<!-- FOOTER TRANG WEB (Màu xanh dương tối ưu, có Logo) -->
  <footer class="bg-brand-950 text-gray-300 border-t border-brand-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
        
        <!-- Cột 1: Giới thiệu & Logo chân trang -->
        <div class="md:col-span-1 space-y-4">
          <div class="flex items-center gap-3">
            <div class="h-10 w-auto flex items-center justify-center bg-white p-0.5 rounded-xs">
              <img src="https://ducthanhpt.com/wp-content/themes/ducthanh-theme/logo-web.png" alt="Logo Đức Thành" class="h-full w-auto object-contain" onerror="this.style.display='none'; document.getElementById('footer-fallback-logo').style.display='flex';">
              <div id="footer-fallback-logo" class="hidden w-12 h-9 bg-brand-500 items-center justify-center text-white font-display text-[9px] font-bold rounded-xs">ĐTPT</div>
            </div>
            <span class="font-display font-extrabold text-lg text-white tracking-tight uppercase">ĐỨC THÀNH</span>
          </div>
          <p class="text-xs text-gray-400 leading-relaxed">
            Công ty TNHH Sản xuất và TMTH Đức Thành - Chuyên nghiên cứu đúc luyện thép hợp kim siêu mài mòn, búa nghiền, má nghiền hàm quặng công suất lớn cho nhà máy clinker xi măng và mỏ xây dựng Việt Nam.
          </p>
        </div>

        <!-- Cột 2: Đường dẫn liên kết nhanh -->
        <div>
          <h4 class="font-display font-bold text-white text-xs uppercase tracking-widest mb-4">// LIÊN KẾT NHANH</h4>
          <ul class="space-y-2 text-xs">
            <li><button onclick="switchPage('trang-chu')" class="hover:text-white transition-colors">Trang chủ chính</button></li>
            <li><button onclick="switchPage('gioi-thieu')" class="hover:text-white transition-colors">Về Công ty Đức Thành</button></li>
            <li><button onclick="switchPage('san-pham')" class="hover:text-white transition-colors">Danh mục sản phẩm đúc</button></li>
            <li><button onclick="switchPage('nang-luc')" class="hover:text-white transition-colors">Năng lực sản xuất thực tế</button></li>
            <li><button onclick="switchPage('tuyen-dung')" class="hover:text-white transition-colors">Cơ hội tuyển dụng cơ khí</button></li>
            <li><button onclick="switchPage('lien-he')" class="hover:text-white transition-colors">Mẫu liên hệ báo giá</button></li>
          </ul>
        </div>

        <!-- Cột 3: Thông tin liên hệ cơ bản -->
        <div class="space-y-4">
          <h4 class="font-display font-bold text-white text-xs uppercase tracking-widest mb-4">// THÔNG TIN DOANH NGHIỆP</h4>
          <div class="space-y-2 text-xs">
            <p><span class="text-brand-400 font-bold">Doanh nghiệp:</span> Công ty TNHH Sản xuất và TMTH Đức Thành</p>
            <p><span class="text-brand-400 font-bold">Mã số thuế:</span> 0108927409</p>
            <p><span class="text-brand-400 font-bold">Địa chỉ văn phòng:</span> Hải Dương, Việt Nam</p>
            <p><span class="text-brand-400 font-bold">Điện thoại:</span> <a href="tel:0989142366" class="hover:text-white">0989 142 366</a></p>
            <p><span class="text-brand-400 font-bold">Email:</span> <a href="mailto:ducthanhpt18@gmail.com" class="hover:text-white">ducthanhpt18@gmail.com</a></p>
          </div>
        </div>

      </div>

      <!-- Bản quyền copyright -->
      <div class="border-t border-brand-900/60 mt-12 pt-6 text-center text-[10px] text-gray-500">
        <p>© 2026 Công ty TNHH Sản xuất và TMTH Đức Thành. Bảo lưu toàn bộ quyền lợi về thông tin.</p>
        <p class="mt-1">Thiết kế website cơ khí luyện kim chuyên nghiệp, chuẩn Mobile-Responsive.</p>
      </div>
    </div>
  </footer>

  <!-- NÚT CHAT ZALO NỔI (ĐIỀU HƯỚNG MỞ ZALO) -->
  <a href="[https://zalo.me/0989142366](https://zalo.me/0989142366)" target="_blank" rel="noopener noreferrer" class="zalo-floating-btn" title="Chat qua Zalo">
    <svg viewBox="0 0 24 24" fill="none" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">
      <path d="M22 11.5C22 16.7467 17.5228 21 12 21C10.3983 21 8.89133 20.6384 7.55444 20C4.30133 21.0667 2.15244 21.5746 2.02133 21.2382C1.89067 20.9018 2.87111 18.2382 3.44756 16.5C2.52933 15.0804 2 13.356 2 11.5C2 6.25329 6.47716 2 12 2C17.5228 2 22 6.25329 22 11.5Z" fill="#0068FF"/>
      <path d="M12 7.5C9.23858 7.5 7 9.29086 7 11.5C7 12.3046 7.28427 13.0563 7.78855 13.6812L7.15217 15.5471C7.11326 15.6616 7.22851 15.7599 7.33644 15.7107L9.36217 14.7865C10.158 15.2415 11.0559 15.5 12 15.5C14.7614 15.5 17 13.7091 17 11.5C17 9.29086 14.7614 7.5 12 7.5ZM14.125 13H9.875C9.52982 13 9.25 12.7202 9.25 12.375C9.25 12.0298 9.52982 11.75 9.875 11.75H14.125C14.4702 11.75 14.75 12.0298 14.75 12.375C14.75 12.7202 14.4702 13 14.125 13ZM14.125 11.25H9.875C9.52982 11.25 9.25 10.9702 9.25 10.625C9.25 10.2798 9.52982 10 9.875 10H14.125C14.4702 10 14.75 10.2798 14.75 10.625C14.75 11.25 14.4702 11.25 14.125 11.25Z" fill="white"/>
    </svg>
  </a>

  <style>
    .zalo-floating-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      z-index: 9999;
      cursor: pointer;
      transition: transform 0.2s ease, filter 0.2s ease;
      border-radius: 8px;
      background-color: #0068FF;
      padding: 10px;
      box-shadow: 0 4px 15px rgba(0, 104, 255, 0.4);
      animation: zaloPulse 2s infinite;
    }
    .zalo-floating-btn:hover {
      transform: scale(1.1);
      filter: brightness(1.08);
    }
    .zalo-floating-btn svg {
      width: 100%;
      height: 100%;
    }
    @keyframes zaloPulse {
      0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.7); }
      70% { box-shadow: 0 0 0 12px rgba(0, 104, 255, 0); }
      100% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }
    }
    @media (max-width: 768px) {
      .zalo-floating-btn {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        padding: 8px;
      }
    }
  </style>

  
  <!-- KỊCH BẢN ĐIỀU PHỐI SPA & SLIDESHOW -->
  <script>
    // 1. LOGIC SPA ROUTING (Định tuyến không tải lại trang)
    function switchPage(pageId) {
      const sections = document.querySelectorAll('.page-section');
      sections.forEach(sec => sec.classList.add('hidden'));

      const activeSection = document.getElementById(`page-${pageId}`);
      if (activeSection) {
        activeSection.classList.remove('hidden');
      }

      window.scrollTo({ top: 0, behavior: 'instant' });

      // Cập nhật trạng thái màu cho Menu Desktop
      const navBtns = document.querySelectorAll('.nav-btn');
      navBtns.forEach(btn => {
        btn.classList.remove('active-nav-link');
        btn.classList.add('text-gray-700');
      });

      const activeBtn = document.getElementById(`nav-${pageId}`);
      if (activeBtn) {
        activeBtn.classList.remove('text-gray-700');
        activeBtn.classList.add('active-nav-link');
      }

      // Đóng menu mobile
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.add('hidden');
      
      if (history.pushState) {
        history.pushState(null, null, '#' + pageId);
      } else {
        location.hash = '#' + pageId;
      }
    }

    // Tự động nhận diện tab đang mở từ Hash URL khi load trang
    window.addEventListener('load', () => {
      let initialPage = 'trang-chu';
      const hash = window.location.hash.replace('#', '');
      if (hash && document.getElementById(`page-${hash}`)) {
        initialPage = hash;
      }
      switchPage(initialPage);
      startSlideshow();
    });

    window.addEventListener('hashchange', () => {
      const hash = window.location.hash.replace('#', '');
      if (hash && document.getElementById(`page-${hash}`)) {
        switchPage(hash);
      }
    });

    // 2. TOGGLE MOBILE MENU
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const hamburgerIcon = document.getElementById('hamburger-icon');

    mobileMenuBtn.addEventListener('click', () => {
      const isHidden = mobileMenu.classList.contains('hidden');
      if (isHidden) {
        mobileMenu.classList.remove('hidden');
        hamburgerIcon.setAttribute('d', 'M6 18L18 6M6 6l12 12');
      } else {
        mobileMenu.classList.add('hidden');
        hamburgerIcon.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
      }
    });

    // 3. AUTOMATED SLIDESHOW HERO BANNER
    let currentSlideIndex = 0;
    let slideTimer = null;
    const slides = document.querySelectorAll('.hero-slide');
    const dots = document.querySelectorAll('.slide-dot');

    function showSlide(index) {
      slides.forEach((slide, i) => {
        if (i === index) {
          slide.classList.remove('opacity-0');
          slide.classList.add('opacity-100', 'z-0');
        } else {
          slide.classList.remove('opacity-100', 'z-0');
          slide.classList.add('opacity-0');
        }
      });

      dots.forEach((dot, i) => {
        if (i === index) {
          dot.classList.remove('bg-white/40');
          dot.classList.add('bg-white');
        } else {
          dot.classList.remove('bg-white');
          dot.classList.add('bg-white/40');
        }
      });

      currentSlideIndex = index;
    }

    function nextSlide() {
      let nextIndex = (currentSlideIndex + 1) % slides.length;
      showSlide(nextIndex);
      resetSlideInterval();
    }

    function prevSlide() {
      let prevIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
      showSlide(prevIndex);
      resetSlideInterval();
    }

    // Thiết lập slide thủ công
    function setSlide(index) {
      showSlide(index);
      resetSlideInterval();
    }

    function startSlideshow() {
      slideTimer = setInterval(nextSlide, 5000); // 5 giây tự chuyển slide
    }

    function resetSlideInterval() {
      clearInterval(slideTimer);
      startSlideshow();
    }

    // 4. SCROLL CATALOGUE SẢN PHẨM TIÊU BIỂU
    function scrollCatalogue(direction) {
      const container = document.getElementById('product-catalogue-container');
      const scrollAmount = 350;
      if (direction === 'prev') {
        container.scrollLeft -= scrollAmount;
      } else {
        container.scrollLeft += scrollAmount;
      }
    }
  </script>
</body>
</html>