<?php

/**
 * The template for displaying the front page
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

<!-- --- SECTION 1: HERO BANNER --- -->
<section class="hero-section position-relative overflow-hidden" style="background-image: url('<?php echo esc_url(get_theme_mod('home_hero_bg', get_template_directory_uri() . '/assets/images/hero_logistics_bg.png')); ?>'); background-size: cover; background-position: center; min-height: 520px; height: 60vh;">
</section>


<!-- --- SECTION 2: VỀ CHÚNG TÔI (ABOUT US) --- -->
<section id="home-about-us" class="about-section pt-6 pb-0 bg-white overflow-hidden">
    <div class="container">
        <!-- Section Title & Bio -->
        <div class="section-header text-center mb-5 scroll-reveal">
            <h2 class="section-title section-title-center mb-4">
                <b></b>
                <span class="section-title-main"><?php esc_html_e('Về chúng tôi', 'theme-anphat'); ?></span>
                <b></b>
            </h2>
            <p class="short-intro text-muted max-w-100 mx-auto text-sm lh-lg text-start px-2">
                <?php echo esc_html(__('Công Ty Cổ Phần Dược Phẩm An Phát - Nhà phân phối của các hãng dược phẩm hàng đầu trên thế giới với hơn 10 năm xây dựng và phát triển. An Phát Pharma có hệ thống phân phối rộng khắp toàn quốc và mô hình kinh doanh chuyên nghiệp. Bằng tất cả tâm huyết, năng lực và quy mô không ngừng phát triển, An Phát Pharma cam kết cung cấp sản phẩm chất lượng với giá cả phải chăng nhằm phục vụ sức khoẻ cộng đồng. Bằng những nỗ lực đem sản phẩm và dịch vụ tốt nhất tới người tiêu dùng, An Phát Pharma hướng tới trở thành công ty phân phối kinh doanh dược phẩm uy tín hàng đầu tại Việt Nam.', 'theme-anphat')); ?>
            </p>
        </div>

        <div class="about_content">
            <div class="row align-items-stretch">
                <!-- Left Column: Tabs List (40% / col-md-5) -->
                <div class="col-lg-5 col-md-5 col-12 scroll-reveal">
                    <div id="vertical_tab_nav" class="about-vertical-tabs">
                        <ul class="list-unstyled mb-0 d-flex flex-column gap-3">
                            <!-- Tab Item 1 -->
                            <li class="about-tab-item active" data-tab="0">
                                <div class="icon">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_icon_1', get_template_directory_uri() . '/assets/images/aboutus_index_icon_1.png')); ?>" alt="icon-history">
                                </div>
                                <div class="info_desc">
                                    <h3><a class="selected"><?php esc_html_e('Lịch sử', 'theme-anphat'); ?></a></h3>
                                    <p><?php esc_html_e('Hơn 25 năm xây dựng và phát triển trong ngành Dược Phẩm - Thiết Bị Y Tế', 'theme-anphat'); ?></p>
                                </div>
                                <!-- Mobile Image (Accordion panel) -->
                                <div class="mobile-tab-image d-md-none mt-3 rounded-3 overflow-hidden" style="height: 220px; display: none;">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_img_1', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_1.jpg')); ?>" alt="<?php esc_attr_e('Lịch sử', 'theme-anphat'); ?>" class="w-100 h-100 object-cover">
                                </div>
                            </li>
                            <!-- Tab Item 2 -->
                            <li class="about-tab-item" data-tab="1">
                                <div class="icon">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_icon_2', get_template_directory_uri() . '/assets/images/aboutus_index_icon_2.png')); ?>" alt="icon-awards">
                                </div>
                                <div class="info_desc">
                                    <h3><a><?php esc_html_e('Danh Hiệu Giải Thưởng', 'theme-anphat'); ?></a></h3>
                                    <p><?php esc_html_e('Top 10 Công Ty Dược Việt Nam Uy Tín', 'theme-anphat'); ?></p>
                                </div>
                                <!-- Mobile Image (Accordion panel) -->
                                <div class="mobile-tab-image d-md-none mt-3 rounded-3 overflow-hidden" style="height: 220px; display: none;">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_img_2', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_2.jpg')); ?>" alt="<?php esc_attr_e('Danh hiệu Giải thưởng', 'theme-anphat'); ?>" class="w-100 h-100 object-cover">
                                </div>
                            </li>
                            <!-- Tab Item 3 -->
                            <li class="about-tab-item" data-tab="2">
                                <div class="icon">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_icon_3', get_template_directory_uri() . '/assets/images/aboutus_index_icon_3.png')); ?>" alt="icon-certificates">
                                </div>
                                <div class="info_desc">
                                    <h3><a><?php esc_html_e('Bằng Khen, Giấy Khen', 'theme-anphat'); ?></a></h3>
                                    <p><?php esc_html_e('Chủ tịch TPHCM, Tổng cục hải quan Thuế khen tặng', 'theme-anphat'); ?></p>
                                </div>
                                <!-- Mobile Image (Accordion panel) -->
                                <div class="mobile-tab-image d-md-none mt-3 rounded-3 overflow-hidden" style="height: 220px; display: none;">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_img_3', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_3.jpg')); ?>" alt="<?php esc_attr_e('Bằng khen, Giấy khen', 'theme-anphat'); ?>" class="w-100 h-100 object-cover">
                                </div>
                            </li>
                            <!-- Tab Item 4 -->
                            <li class="about-tab-item" data-tab="3">
                                <div class="icon">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_icon_4', get_template_directory_uri() . '/assets/images/aboutus_index_icon_4.png')); ?>" alt="icon-standards">
                                </div>
                                <div class="info_desc">
                                    <h3><a><?php esc_html_e('Hệ Thống Tiêu Chuẩn, Chất Lượng', 'theme-anphat'); ?></a></h3>
                                    <p><?php esc_html_e('GSP & GDP', 'theme-anphat'); ?></p>
                                </div>
                                <!-- Mobile Image (Accordion panel) -->
                                <div class="mobile-tab-image d-md-none mt-3 rounded-3 overflow-hidden" style="height: 220px; display: none;">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_img_4', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_4.jpg')); ?>" alt="<?php esc_attr_e('Hệ Thống Tiêu Chuẩn, Chất Lượng', 'theme-anphat'); ?>" class="w-100 h-100 object-cover">
                                </div>
                            </li>
                            <!-- Tab Item 5 -->
                            <li class="about-tab-item" data-tab="4">
                                <div class="icon">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_icon_5', get_template_directory_uri() . '/assets/images/aboutus_index_icon_5.png')); ?>" alt="icon-network">
                                </div>
                                <div class="info_desc">
                                    <h3><a><?php esc_html_e('Mạng Lưới Phân Phối', 'theme-anphat'); ?></a></h3>
                                    <p><?php esc_html_e('Chúng tôi tự hào về hệ thống phân phối với hơn 10,000 nhà thuốc, 1,000 bệnh viện trên 60/63 tỉnh thành khắp cả nước', 'theme-anphat'); ?></p>
                                </div>
                                <!-- Mobile Image (Accordion panel) -->
                                <div class="mobile-tab-image d-md-none mt-3 rounded-3 overflow-hidden" style="height: 220px; display: none;">
                                    <img src="<?php echo esc_url(get_theme_mod('home_about_img_5', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_5.jpg')); ?>" alt="<?php esc_attr_e('Mạng Lưới Phân Phối', 'theme-anphat'); ?>" class="w-100 h-100 object-cover">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Right Column: Tabs Content (Images - 60% / col-md-7) -->
                <div class="col-lg-7 col-md-7 col-12 scroll-reveal-right d-none d-md-block">
                    <div class="content_tab position-relative rounded-3 overflow-hidden w-100 h-100" style="min-height: 480px;">
                        <article class="tab-pane active" id="tab-pane-0" style="position: absolute; inset: 0; width: 100%; height: 100%;">
                            <img src="<?php echo esc_url(get_theme_mod('home_about_img_1', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_1.jpg')); ?>" alt="<?php esc_attr_e( 'Lịch sử', 'theme-anphat' ); ?>" class="w-100 h-100 object-cover">
                        </article>
                        <article class="tab-pane" id="tab-pane-1" style="position: absolute; inset: 0; width: 100%; height: 100%; display: none;">
                            <img src="<?php echo esc_url(get_theme_mod('home_about_img_2', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_2.jpg')); ?>" alt="<?php esc_attr_e( 'Danh hiệu Giải thưởng', 'theme-anphat' ); ?>" class="w-100 h-100 object-cover">
                        </article>
                        <article class="tab-pane" id="tab-pane-2" style="position: absolute; inset: 0; width: 100%; height: 100%; display: none;">
                            <img src="<?php echo esc_url(get_theme_mod('home_about_img_3', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_3.jpg')); ?>" alt="<?php esc_attr_e( 'Bằng khen, Giấy khen', 'theme-anphat' ); ?>" class="w-100 h-100 object-cover">
                        </article>
                        <article class="tab-pane" id="tab-pane-3" style="position: absolute; inset: 0; width: 100%; height: 100%; display: none;">
                            <img src="<?php echo esc_url(get_theme_mod('home_about_img_4', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_4.jpg')); ?>" alt="<?php esc_attr_e( 'Hệ Thống Tiêu Chuẩn, Chất Lượng', 'theme-anphat' ); ?>" class="w-100 h-100 object-cover">
                        </article>
                        <article class="tab-pane" id="tab-pane-4" style="position: absolute; inset: 0; width: 100%; height: 100%; display: none;">
                            <img src="<?php echo esc_url(get_theme_mod('home_about_img_5', get_template_directory_uri() . '/assets/images/aboutus_index_header_image_5.jpg')); ?>" alt="<?php esc_attr_e( 'Mạng Lưới Phân Phối', 'theme-anphat' ); ?>" class="w-100 h-100 object-cover">
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tương tác chuyển đổi Tab mượt mà -->
    <script>
        jQuery(document).ready(function($) {
            // Khởi tạo hiển thị cho mobile
            if ($(window).width() < 768) {
                $('.about-tab-item.active .mobile-tab-image').show();
            }

            $('.about-tab-item').on('click', function(e) {
                // Ngăn chặn chuyển trang của thẻ a
                if ($(e.target).closest('a').length) {
                    e.preventDefault();
                }

                var $this = $(this);
                var tabId = $this.data('tab');

                if ($(window).width() < 768) {
                    // Trên Mobile: Chuyển đổi dạng Accordion
                    if ($this.hasClass('active')) {
                        // Nếu click vào tab đang active, thu gọn lại
                        $this.removeClass('active');
                        $this.find('.mobile-tab-image').stop(true, true).slideUp(300);
                    } else {
                        // Thu gọn các tab khác và mở rộng tab hiện tại
                        $('.about-tab-item').removeClass('active');
                        $('.about-tab-item a').removeClass('selected');
                        $('.mobile-tab-image').stop(true, true).slideUp(300);

                        $this.addClass('active');
                        $this.find('a').addClass('selected');
                        $this.find('.mobile-tab-image').stop(true, true).slideDown(300);
                    }
                } else {
                    // Trên Desktop: Thay đổi hình ảnh cột phải
                    if ($this.hasClass('active')) {
                        return;
                    }

                    $('.about-tab-item').removeClass('active');
                    $('.about-tab-item a').removeClass('selected');
                    $this.addClass('active');
                    $this.find('a').addClass('selected');

                    // Hiệu ứng Fade mượt mà cho hình ảnh
                    $('.content_tab article').stop(true, true).fadeOut(250);
                    $('#tab-pane-' + tabId).stop(true, true).fadeIn(400);
                }
            });

            // Điều hướng lại khi xoay màn hình hoặc co dãn kích thước
            $(window).on('resize', function() {
                if ($(window).width() >= 768) {
                    $('.mobile-tab-image').hide();
                    var activeTab = $('.about-tab-item.active').data('tab');
                    if (activeTab !== undefined) {
                        $('.content_tab article').hide();
                        $('#tab-pane-' + activeTab).show();
                    } else {
                        // Fallback nếu không có active nào
                        $('.about-tab-item').first().addClass('active');
                        $('.about-tab-item').first().find('a').addClass('selected');
                        $('.content_tab article').hide();
                        $('#tab-pane-0').show();
                    }
                } else {
                    $('.content_tab article').hide();
                    $('.about-tab-item.active .mobile-tab-image').show();
                }
            });
        });
    </script>
</section>


<!-- --- SECTION 3: VÌ SAO CHỌN CHÚNG TÔI --- -->
<section class="why-choose-section pb-6 bg-white position-relative">
    <div class="container">
        <!-- Background block matching container width -->
        <div class="why-choose-wrapper position-relative p-4 p-lg-5" style="background-image: url('<?php echo esc_url(get_theme_mod('home_why_bg', get_template_directory_uri() . '/assets/images/bg_vs.png')); ?>'); background-size: cover; background-position: center;">
            <div class="row align-items-center g-5 position-relative z-index-1">

                <!-- Left Column: Text Content -->
                <div class="col-lg-5 scroll-reveal">
                    <h2 class="section-title font-heading fw-bold text-dark mb-3"><?php esc_html_e('VÌ SAO CHỌN', 'theme-anphat'); ?><br><span class="text-warning text-uppercase" style="color: var(--primary-color) !important;"><?php esc_html_e( 'An Phát Pharma', 'theme-anphat' ); ?></span></h2>
                    <div class="accent-line mb-4" style="background-color: var(--primary-color); width: 60px; height: 3px;"></div>
                    <p class="text-dark fs-6 mb-4">
                        <?php esc_html_e('Một trong những yếu tố tạo nên sức mạnh của An Phát Pharma chính là đội ngũ nhân viên trẻ trung, năng động và giàu kinh nghiệm. Với chuyên môn sâu trong lĩnh vực tư vấn bán hàng và dịch vụ hậu m...', 'theme-anphat'); ?>
                    </p>
                    <a href="<?php echo esc_url(home_url('/gioi-thieu/ve-an-phat/')); ?>" class="btn btn-primary px-4 py-2 fw-bold shadow-sm rounded-3"><?php esc_html_e('Xem Chi Tiết', 'theme-anphat'); ?></a>
                </div>

                <!-- Right Column: 3-column Staggered Cards with Floating Icons -->
                <div class="col-lg-7 scroll-reveal-right">
                    <div class="row g-3 align-items-center">

                        <!-- 1. Left Card (Sản Phẩm) -->
                        <div class="col-md-4 mt-5 pt-5">
                            <div class="why-choose-card bg-white rounded-4 shadow-sm text-center transition-transform hover-scale position-relative" style="padding: 3.5rem 1rem 1.5rem 1rem;">
                                <img src="<?php echo esc_url(get_theme_mod('home_why_icon_1', get_template_directory_uri() . '/assets/images/icon_chat_luong.png')); ?>" alt="<?php esc_attr_e('Sản Phẩm Chất Lượng Cao', 'theme-anphat'); ?>" class="position-absolute" style="top: -50px; left: 50%; transform: translateX(-50%); height: 110px; width: auto; z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));">
                                <h4 class="font-heading fw-bold text-dark fs-6 mb-0"><?php echo wp_kses_post(__('Sản Phẩm Chất<br>Lượng Cao', 'theme-anphat')); ?></h4>
                            </div>
                        </div>

                        <!-- 2. Center Cards (Quy Trình + Nhân Sự) -->
                        <div class="col-md-4 d-flex flex-column" style="gap: 5rem;">
                            <!-- Top Center (Quy Trình) -->
                            <div class="why-choose-card bg-white rounded-4 shadow-sm text-center transition-transform hover-scale position-relative" style="padding: 3.5rem 1rem 1.5rem 1rem;">
                                <img src="<?php echo esc_url(get_theme_mod('home_why_icon_2', get_template_directory_uri() . '/assets/images/icon_quy_trinh.png')); ?>" alt="<?php esc_attr_e('Quy Trình Tiêu Chuẩn', 'theme-anphat'); ?>" class="position-absolute" style="top: -80px; left: 50%; transform: translateX(-50%); height: 140px; width: auto; z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));">
                                <h4 class="font-heading fw-bold text-dark fs-6 mb-0"><?php echo wp_kses_post(__('Quy Trình Tiêu<br>Chuẩn', 'theme-anphat')); ?></h4>
                            </div>

                            <!-- Bottom Center (Nhân Sự) -->
                            <div class="why-choose-card bg-white rounded-4 shadow-sm text-center transition-transform hover-scale position-relative" style="padding: 3.5rem 1rem 1.5rem 1rem;">
                                <img src="<?php echo esc_url(get_theme_mod('home_why_icon_3', get_template_directory_uri() . '/assets/images/icon_nhan_su.png')); ?>" alt="<?php esc_attr_e('Nhân Sự Có Chuyên Môn Cao', 'theme-anphat'); ?>" class="position-absolute" style="top: -65px; left: 50%; transform: translateX(-50%); height: 110px; width: auto; z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));">
                                <h4 class="font-heading fw-bold text-dark fs-6 mb-0"><?php echo wp_kses_post(__('Nhân Sự Có<br>Chuyên Môn Cao', 'theme-anphat')); ?></h4>
                            </div>
                        </div>

                        <!-- 3. Right Card (Vận Hành) -->
                        <div class="col-md-4 mt-3">
                            <div class="why-choose-card bg-white rounded-4 shadow-sm text-center transition-transform hover-scale position-relative" style="padding: 3.5rem 1rem 1.5rem 1rem;">
                                <img src="<?php echo esc_url(get_theme_mod('home_why_icon_4', get_template_directory_uri() . '/assets/images/icon_van_hanh.png')); ?>" alt="<?php esc_attr_e('Vận Hành Chuyên Nghiệp', 'theme-anphat'); ?>" class="position-absolute" style="top: -70px; left: 50%; transform: translateX(-50%); height: 120px; width: auto; z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));">
                                <h4 class="font-heading fw-bold text-dark fs-6 mb-0"><?php echo wp_kses_post(__('Vận Hành Chuyên<br>Nghiệp', 'theme-anphat')); ?></h4>
                            </div>
                        </div>

                    </div>
                </div>

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


<!-- --- SECTION 4: SẢN PHẨM TIÊU BIỂU --- -->
<section class="products-section featured-products-strip overflow-hidden">
    <div class="container position-relative">
        <div class="section-header text-center mb-4 scroll-reveal">
            <h2 class="section-title font-heading fw-bold text-primary mb-2 text-uppercase"><?php esc_html_e('SẢN PHẨM NỔI BẬT', 'theme-anphat'); ?></h2>
            <div class="accent-line mx-auto bg-primary" style="width: 50px; height: 3px;"></div>
        </div>

        <!-- Products Slider -->
        <div class="featured-products-shell scroll-reveal position-relative">
            <?php
            $product_visibility_terms = function_exists('wc_get_product_visibility_term_ids') ? wc_get_product_visibility_term_ids() : array();
            $exclude_from_catalog_id  = isset($product_visibility_terms['exclude-from-catalog']) ? absint($product_visibility_terms['exclude-from-catalog']) : 0;
            $featured_term_id         = isset($product_visibility_terms['featured']) ? absint($product_visibility_terms['featured']) : 0;
            $product_tax_query        = array();
            $fallback_tax_query       = array();

            if ($exclude_from_catalog_id) {
                $fallback_tax_query[] = array(
                    'taxonomy' => 'product_visibility',
                    'field'    => 'term_taxonomy_id',
                    'terms'    => array($exclude_from_catalog_id),
                    'operator' => 'NOT IN',
                );
            }

            $product_tax_query = $fallback_tax_query;

            if ($featured_term_id) {
                $product_tax_query[] = array(
                    'taxonomy' => 'product_visibility',
                    'field'    => 'term_taxonomy_id',
                    'terms'    => array($featured_term_id),
                    'operator' => 'IN',
                );
            }

            $args_sp = array(
                'post_type'      => 'product',
                'post_status'    => 'publish',
                'posts_per_page' => 12, // Pull more products for the slider
                'orderby'        => 'date',
                'order'          => 'DESC'
            );

            if (! empty($product_tax_query)) {
                $args_sp['tax_query'] = $product_tax_query;
            }

            $query_sp = new WP_Query($args_sp);

            if (! $query_sp->have_posts() && $featured_term_id) {
                if (! empty($fallback_tax_query)) {
                    $args_sp['tax_query'] = $fallback_tax_query;
                } else {
                    unset($args_sp['tax_query']);
                }

                $query_sp = new WP_Query($args_sp);
            }

            if ($query_sp->have_posts()) :
            ?>
                <div class="swiper product-slider featured-products-slider">
                    <div class="swiper-wrapper">
                        <?php
                        while ($query_sp->have_posts()) : $query_sp->the_post();
                        ?>
                            <div class="swiper-slide">
                                <article class="featured-product-card">
                                    <a href="<?php the_permalink(); ?>" class="featured-product-image" aria-label="<?php the_title_attribute(); ?>">
                                        <?php if (has_post_thumbnail()) : ?>
                                            <?php the_post_thumbnail('medium_large', array('class' => 'featured-product-photo')); ?>
                                        <?php else : ?>
                                            <span class="featured-product-empty-icon"><i class="fa-solid fa-capsules"></i></span>
                                        <?php endif; ?>
                                    </a>
                                    <a href="<?php the_permalink(); ?>" class="featured-product-logo-card">
                                        <h3 class="featured-product-title"><?php the_title(); ?></h3>
                                    </a>
                                </article>
                            </div>
                        <?php endwhile;
                        wp_reset_postdata(); ?>
                    </div>
                </div>

                <!-- Swiper Navigation Arrows -->
                <button class="featured-products-nav featured-products-prev swiper-button-prev" type="button" aria-label="Previous product"></button>
                <button class="featured-products-nav featured-products-next swiper-button-next" type="button" aria-label="Next product"></button>
            <?php else : ?>
                <!-- Empty State -->
                <div class="empty-state text-center py-5">
                    <span class="empty-icon fs-1 text-muted"><i class="fa-solid fa-prescription-bottle"></i></span>
                    <h3 class="font-heading text-dark mt-3"><?php esc_html_e('Đang cập nhật danh sách sản phẩm', 'theme-anphat'); ?></h3>
                    <p class="text-muted text-sm"><?php esc_html_e('Vui lòng quay lại sau để cập nhật danh mục sản phẩm chính thức từ An Phát Pharma.', 'theme-anphat'); ?></p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>


<!-- --- SECTION 5: ĐỐI TÁC CHIẾN LƯỢC & BẢN ĐỒ --- -->
<section class="partners-map-section py-6 bg-light overflow-hidden">
    <div class="container">

        <div class="row align-items-center g-5">
            <!-- Left Side: Partners Tab & Logos -->
            <div class="col-lg-6 scroll-reveal">
                <h2 class="section-title font-heading fw-bold text-primary mb-3"><?php esc_html_e('ĐỐI TÁC', 'theme-anphat'); ?><br><span class="text-accent text-gradient-blue text-uppercase"><?php esc_html_e( 'An Phát Pharma', 'theme-anphat' ); ?> <i class="fa-solid fa-location-dot text-primary-dark fs-4"></i></span></h2>
                <p class="text-muted text-sm mb-4">
                    <?php esc_html_e('An Phát Pharma hợp tác với các bệnh viện, phòng khám, trung tâm y tế, các nhà thuốc chuyên nghiệp, hỗ trợ đắc lực việc phân phối và giới thiệu thuốc đến người bệnh, nâng cao sức khỏe cộng đồng.', 'theme-anphat'); ?>
                </p>

                <!-- Custom Interactive Tabs -->
                <div class="partner-tabs mb-4">
                    <ul class="nav nav-pills gap-2 border-0" id="partnerTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-4 py-2 font-heading fw-bold rounded-pill shadow-sm" id="international-tab" data-bs-toggle="pill" data-bs-target="#international" type="button" role="tab" aria-controls="international" aria-selected="false"><?php esc_html_e('Đối tác Quốc tế', 'theme-anphat'); ?></button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active px-4 py-2 font-heading fw-bold rounded-pill shadow-sm" id="domestic-tab" data-bs-toggle="pill" data-bs-target="#domestic" type="button" role="tab" aria-controls="domestic" aria-selected="true"><?php esc_html_e('Đối tác Trong nước', 'theme-anphat'); ?></button>
                        </li>
                    </ul>
                </div>

                <div class="tab-content" id="partnerTabContent">
                    <!-- Tab 1: International -->
                    <div class="tab-pane fade" id="international" role="tabpanel" aria-labelledby="international-tab">
                        <div class="row g-3 partner-logo-grid">
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <circle cx="20" cy="20" r="10" fill="#4A9FD4" />
                                        <circle cx="25" cy="15" r="5" fill="#FFB800" />
                                        <text x="40" y="25" font-family="var(--font-heading)" font-size="16" font-weight="bold" fill="#1A3636">Getz</text>
                                        <text x="78" y="25" font-family="var(--font-heading)" font-size="10" fill="#4A9FD4">Pharma</text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <span class="text-xs fw-bold text-muted">SANOFI</span>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <span class="text-xs fw-bold text-muted">NOVARTIS</span>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <span class="text-xs fw-bold text-muted">ASTRAZENECA</span>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <span class="text-xs fw-bold text-muted">PFIZER</span>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <span class="text-xs fw-bold text-muted">GSK</span>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <text x="20" y="26" font-family="var(--font-heading)" font-size="20" font-weight="900" fill="#E11D48" letter-spacing="-1">BRV</text>
                                        <path d="M 65,22 Q 85,15 105,22" stroke="#E11D48" stroke-width="2" fill="none" />
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <rect x="10" y="12" width="20" height="16" rx="8" fill="#1A3636" />
                                        <rect x="20" y="12" width="10" height="16" rx="0" fill="#4A9FD4" />
                                        <text x="40" y="25" font-family="var(--font-heading)" font-size="13" font-weight="bold" fill="#1A3636">PN PHARMA</text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <path d="M 10,28 L 22,8 L 34,28 Z" fill="#FFB800" />
                                        <path d="M 16,28 L 22,18 L 28,28 Z" fill="#FFF" />
                                        <text x="45" y="26" font-family="var(--font-heading)" font-size="18" font-weight="bold" fill="#D97706" letter-spacing="1">TTA</text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Tab 2: Domestic -->
                    <div class="tab-pane fade show active" id="domestic" role="tabpanel" aria-labelledby="domestic-tab">
                        <div class="row g-3 partner-logo-grid">
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <circle cx="15" cy="20" r="10" fill="none" stroke="#1A3636" stroke-width="2" />
                                        <path d="M 9,20 L 21,20 M 15,14 L 15,26" stroke="#1A3636" stroke-width="2" />
                                        <text x="32" y="18" font-family="var(--font-heading)" font-size="7" font-weight="bold" fill="#1A3636"><?php esc_html_e('BỆNH VIỆN ĐA KHOA', 'theme-anphat'); ?></text>
                                        <text x="32" y="28" font-family="var(--font-heading)" font-size="10" font-weight="bold" fill="#1A3636"><?php esc_html_e('ĐỒNG NAI', 'theme-anphat'); ?></text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <circle cx="15" cy="20" r="10" fill="#E11D48" />
                                        <path d="M 11,20 L 19,20 M 15,16 L 15,24" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" />
                                        <text x="32" y="18" font-family="var(--font-heading)" font-size="7" font-weight="bold" fill="#E11D48"><?php esc_html_e('BỆNH VIỆN TRUNG ƯƠNG', 'theme-anphat'); ?></text>
                                        <text x="32" y="28" font-family="var(--font-heading)" font-size="10" font-weight="bold" fill="#E11D48"><?php esc_html_e('HUẾ', 'theme-anphat'); ?></text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <circle cx="20" cy="20" r="10" fill="#4A9FD4" />
                                        <circle cx="25" cy="15" r="5" fill="#FFB800" />
                                        <text x="40" y="25" font-family="var(--font-heading)" font-size="16" font-weight="bold" fill="#1A3636">Getz</text>
                                        <text x="78" y="25" font-family="var(--font-heading)" font-size="10" fill="#4A9FD4">Pharma</text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <text x="20" y="26" font-family="var(--font-heading)" font-size="20" font-weight="900" fill="#E11D48" letter-spacing="-1">BRV</text>
                                        <path d="M 65,22 Q 85,15 105,22" stroke="#E11D48" stroke-width="2" fill="none" />
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <rect x="10" y="12" width="20" height="16" rx="8" fill="#1A3636" />
                                        <rect x="20" y="12" width="10" height="16" rx="0" fill="#4A9FD4" />
                                        <text x="40" y="25" font-family="var(--font-heading)" font-size="13" font-weight="bold" fill="#1A3636">PN PHARMA</text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <path d="M 10,28 L 22,8 L 34,28 Z" fill="#FFB800" />
                                        <path d="M 16,28 L 22,18 L 28,28 Z" fill="#FFF" />
                                        <text x="45" y="26" font-family="var(--font-heading)" font-size="18" font-weight="bold" fill="#D97706" letter-spacing="1">TTA</text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <text x="20" y="26" font-family="var(--font-heading)" font-size="20" font-weight="900" fill="#E11D48" letter-spacing="-1">BRV</text>
                                        <path d="M 65,22 Q 85,15 105,22" stroke="#E11D48" stroke-width="2" fill="none" />
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <rect x="10" y="12" width="20" height="16" rx="8" fill="#1A3636" />
                                        <rect x="20" y="12" width="10" height="16" rx="0" fill="#4A9FD4" />
                                        <text x="40" y="25" font-family="var(--font-heading)" font-size="13" font-weight="bold" fill="#1A3636">PN PHARMA</text>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-4 col-sm-4">
                                <div class="logo-box bg-white p-2 rounded shadow-sm d-flex align-items-center justify-content-center border" style="height: 70px;">
                                    <svg viewBox="0 0 150 40" width="100%" height="40">
                                        <path d="M 10,28 L 22,8 L 34,28 Z" fill="#FFB800" />
                                        <path d="M 16,28 L 22,18 L 28,28 Z" fill="#FFF" />
                                        <text x="45" y="26" font-family="var(--font-heading)" font-size="18" font-weight="bold" fill="#D97706" letter-spacing="1">TTA</text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Side: Southeast Asia Map Representation -->
            <div class="col-lg-6 scroll-reveal-right">
                <?php $map_image = get_theme_mod('home_map_image', get_template_directory_uri() . '/assets/images/bando-1727931603.png'); ?>
                <img class="w-100" src="<?php echo esc_url( $map_image ); ?>" alt="<?php esc_attr_e( 'Bản đồ hệ thống phân phối An Phát Pharma', 'theme-anphat' ); ?>" width="650" height="555" onerror="this.src='<?php echo esc_url( $map_image ); ?>';" loading="lazy">
            </div>
        </div>
    </div>
</section>


<!-- --- SECTION 6: TIN TỨC NỔI BẬT --- -->
<section class="news-section py-6 bg-white">
    <div class="container">
        <div class="section-header text-center mb-5 scroll-reveal">
            <h2 class="section-title font-heading fw-bold text-primary mb-2"><?php esc_html_e('TIN TỨC NỔI BẬT', 'theme-anphat'); ?></h2>
            <div class="accent-line mx-auto bg-accent"></div>
            <p class="text-muted mt-3 max-w-2xl mx-auto">
                <?php esc_html_e('Cập nhật nhanh nhất tin tức hoạt động công ty, tiến bộ y tế, thông tin y khoa hữu ích bảo vệ sức khỏe cho bạn và gia đình.', 'theme-anphat'); ?>
            </p>
        </div>

        <div class="scroll-reveal">
            <?php
            $args_news = array(
                'post_type'      => 'post',
                'posts_per_page' => 4,
                'orderby'        => 'date',
                'order'          => 'DESC'
            );
            $query_news = new WP_Query($args_news);

            if ($query_news->have_posts()) :
            ?>
                <div class="row g-4">
                    <?php
                    while ($query_news->have_posts()) : $query_news->the_post();
                    ?>
                        <div class="col-lg-3 col-md-6 d-flex">
                            <article class="news-card w-100 d-flex flex-column">
                                <a href="<?php the_permalink(); ?>" class="news-image-box position-relative d-block rounded-4 overflow-hidden mb-3" style="height: 180px;">
                                    <?php if (has_post_thumbnail()) : ?>
                                        <?php the_post_thumbnail('medium', array('class' => 'w-100 h-100 object-cover hover-scale transition-transform')); ?>
                                    <?php else : ?>
                                        <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-light text-primary">
                                            <i class="fa-regular fa-newspaper fs-1"></i>
                                        </div>
                                    <?php endif; ?>
                                </a>
                                <div class="d-flex flex-column flex-grow-1 px-1">
                                    <h3 class="news-card-title font-heading fw-bold fs-6 mb-2 line-clamp-2">
                                        <a href="<?php the_permalink(); ?>" class="text-decoration-none" style="color: var(--primary-dark);"><?php the_title(); ?></a>
                                    </h3>
                                    <p class="news-card-desc text-muted mb-0 line-clamp-3" style="font-size: 0.85rem; line-height: 1.6;">
                                        <?php echo wp_strip_all_tags(get_the_excerpt()); ?>
                                    </p>
                                </div>
                            </article>
                        </div>
                    <?php endwhile;
                    wp_reset_postdata(); ?>
                </div>
                <div class="text-center mt-5">
                    <a href="<?php echo esc_url(home_url('/tin-tuc/')); ?>" class="btn btn-primary px-4 py-3 fw-bold shadow"><?php esc_html_e('Xem Tất Cả Tin Tức', 'theme-anphat'); ?><i class="fa-solid fa-arrow-right ms-2"></i></a>
                </div>
            <?php else : ?>
                <!-- Empty State -->
                <div class="empty-state text-center py-5">
                    <span class="empty-icon fs-1 text-muted"><i class="fa-solid fa-rss"></i></span>
                    <h3 class="font-heading text-dark mt-3"><?php esc_html_e('Đang cập nhật danh mục tin tức', 'theme-anphat'); ?></h3>
                    <p class="text-muted text-sm"><?php esc_html_e('Vui lòng quay lại sau để cập nhật thông tin chính thức từ An Phát Pharma.', 'theme-anphat'); ?></p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php get_footer(); ?>