<?php

if( !defined('ABSPATH') ) exit;

class Custom_Cods_Wdplus{

    public function __construct()
    {
        
        add_action('init',[$this,'add_option_in_woodmart_setting']);
        add_action('admin_menu',[$this,'load_page_video_setting']);
        add_action('current_screen',[$this,'remove_notices_from_video_page']);
        
        add_action('admin_bar_menu', [$this,'show_video_guid_in_admin_bar'], 100);
    }

    public function show_video_guid_in_admin_bar($wp_admin_bar)
    {
    
        $args = array(
            'id'    => 'videowd_guid_bar',
            'title' => '<span style="margin-top:3px" class="ab-icon dashicons dashicons-video-alt3"></span> ' . __('آموزش وودمارت', 'woodmart'),
            'href'  => admin_url('admin.php?page=guid_wdplus'),
            'meta'  => array(
                'class' => 'themeplus-admin-navbar',
                'title' => __('آموزش وودمارت', 'woodmart')
            )
        );

        $wp_admin_bar->add_node($args);

    }

    public function load_notice_video_page()
    {

            $video_url = admin_url('admin.php?page=guid_wdplus');
            ?>
            <div class="notice notice-info is-dismissible">
                <h3 style="margin: 0.5em 0 0.5em 0;">🎬 <?php esc_html_e('ویدئوهای آموزشی وودمارت پلاس','woodmart'); ?></h3>
                <p style="font-size: 14px;">
                    <?php esc_html_e('برای دیدن ویدئوهای آموزش ','woodmart') ?>
                    <a href="<?php echo esc_url($video_url); ?>" 
                    style="color: #0073aa; text-decoration: none; font-weight: bold;">
                        <?php esc_html_e('اینجا کلیک کنید','woodmart'); ?>
                        <span style="font-size: 12px;">↗️</span>
                    </a>
                </p>
            </div>
            <?php
    }

    public function remove_notices_from_video_page( $screen )
    {
        
        if  ( $screen->id === 'toplevel_page_guid_wdplus' ||
             str_contains($screen->id,'guid_wdplus_sms')  ||
             str_contains($screen->id,'guid_wdplus_uniqe_fea') ||
             str_contains($screen->id,'guid_wdplus_app') ||
             str_contains($screen->id,'guid_wdplus_complex') ||
             str_contains($screen->id, 'guid_wdplus_faq')
            ) {
            remove_all_actions('admin_notices');
            remove_all_actions('all_admin_notices');
            remove_all_actions('network_admin_notices');
            remove_all_actions('user_admin_notices');
        }
    }
    
    public function load_page_video_setting()
    {
        add_menu_page(
            __('آموزش وودمارت', 'woodmart'),
            __('آموزش وودمارت', 'woodmart'),
            'manage_options',
            'guid_wdplus',
            [$this,'new_page_content'],
            'dashicons-welcome-learn-more',
            5
        );

        add_submenu_page(
            'guid_wdplus',
            'آموزس سیستم پیامکی وودمارت پلاس',
            'آموزس سیستم پیامکی وودمارت پلاس',
            'manage_options',
            'guid_wdplus_sms',
            [$this,'page_content_sms'],
            9
        );

        add_submenu_page(
            'guid_wdplus',
            'آموزش امکانات اختصاصی وودمارت پلاس',
            'آموزش امکانات اختصاصی وودمارت پلاس',
            'manage_options',
            'guid_wdplus_uniqe_fea',
            [$this,'page_content_uniqe_fea'],
            10
        );

        add_submenu_page(
            'guid_wdplus',
            'آموزش اپلیکیشن وودمارت پلاس',
            'آموزش اپلیکیشن وودمارت پلاس',
            'manage_options',
            'guid_wdplus_app',
            [$this,'page_content_app'],
            11
        );

        add_submenu_page(
            'guid_wdplus',
            'آموزش کامل تنظیمات وودمارت پلاس',
            'آموزش کامل تنظیمات وودمارت پلاس',
            'manage_options',
            'guid_wdplus_complex',
            [$this,'page_content_complex'],
            12
        );

        add_submenu_page(
            'guid_wdplus',
            'سوالات متداول در وودمارت پلاس',
            'سوالات متداول در وودمارت پلاس',
            'manage_options',
            'guid_wdplus_faq',
            [$this,'page_content_faq'],
            13
        );

    }

    
    public function add_option_in_woodmart_setting()
    {
        if( class_exists('XTS\Admin\Modules\Options') ){
            XTS\Admin\Modules\Options::add_field(
                array(
                    'id'          => 'performance_im',
                    'name'        => esc_html__( 'افزایش سرعت سایت', 'woodmart' ),
                    'description' => esc_html__( 'زمان محدودیت ها و اینترنت ملی این گزینه را فعال کنید', 'woodmart' ),
                    'type'        => 'switcher',
                    'section'     => 'performance_other',
                    'default'     => false,
                    'on-text'     => esc_html__( 'بله', 'woodmart' ),
                    'off-text'    => esc_html__( 'خیر', 'woodmart' ),
                    'priority'    => 20,
                )
            );
        }
        
       if( woodmart_get_opt('performance_im') ){
            $this->disable_scripts_and_request();
        }
    }

    private function disable_scripts_and_request()
    {
       function wp_strict_local_only_assetstes() {

            $site_host = parse_url(home_url(), PHP_URL_HOST);

            global $wp_scripts, $wp_styles;

            /* ----- BLOCK CSS ----- */
            if (!empty($wp_styles->queue)) {
                foreach ($wp_styles->queue as $handle) {

                    $src = $wp_styles->registered[$handle]->src ?? '';
                    $host = parse_url($src, PHP_URL_HOST);

                    if ($host && $host !== $site_host) {
                        wp_dequeue_style($handle);
                        wp_deregister_style($handle);
                    }
                }
            }

            /* ----- BLOCK JS ----- */
            if (!empty($wp_scripts->queue)) {
                foreach ($wp_scripts->queue as $handle) {

                    $src = $wp_scripts->registered[$handle]->src ?? '';
                    $host = parse_url($src, PHP_URL_HOST);

                    if ($host && $host !== $site_host) {
                        wp_dequeue_script($handle);
                        wp_deregister_script($handle);
                    }
                }
            }

        }
    
    add_action('wp_enqueue_scripts', 'wp_strict_local_only_assetstes', 999);


    /* =====================================================
    BLOCK WORDPRESS HTTP API EXTERNAL REQUESTS
    ===================================================== */

  

    /* =====================================================
    REMOVE DNS PREFETCH & PRECONNECT
    ===================================================== */

   

    /* =====================================================
    FILTER HTML OUTPUT (REMOVE EXTERNAL LINKS)
    ===================================================== */

    add_action('init', function(){

        ob_start(function($html){

            $site = parse_url(home_url(), PHP_URL_HOST);

            /* remove external scripts */
            $html = preg_replace('/<script[^>]+src=["\']https?:\/\/(?!'.$site.')[^"\']+["\'][^>]*><\/script>/i', '', $html);

            /* remove external styles */
            $html = preg_replace('/<link[^>]+href=["\']https?:\/\/(?!'.$site.')[^"\']+["\'][^>]*>/i', '', $html);

            /* remove external images */
            $html = preg_replace('/<img[^>]+src=["\']https?:\/\/(?!'.$site.')[^"\']+["\'][^>]*>/i', '', $html);

            /* remove external iframe */
            $html = preg_replace('/<iframe[^>]+src=["\']https?:\/\/(?!'.$site.')[^"\']+["\'][^>]*><\/iframe>/i', '', $html);

            /* remove google fonts & common cdn */
            $patterns = [
                '/https?:\/\/fonts\.googleapis\.com[^"\']*/i',
                '/https?:\/\/fonts\.gstatic\.com[^"\']*/i',
                '/https?:\/\/kit\.fontawesome\.com[^"\']*/i',
                '/https?:\/\/use\.fontawesome\.com[^"\']*/i',
                '/https?:\/\/cdnjs\.cloudflare\.com[^"\']*/i',
                '/https?:\/\/cdn\.jsdelivr\.net[^"\']*/i',
                '/https?:\/\/unpkg\.com[^"\']*/i'
            ];

            foreach ($patterns as $pattern) {
                $html = preg_replace($pattern, '', $html);
            }

            return $html;

        });

    });




    /**
     * بلاک کامل Google Fonts در فرانت‌اند و پیشخوان وردپرس
     */

    /* 1) جلوگیری در فرانت‌اند */
    add_action('wp_enqueue_scripts', function () {
        global $wp_styles;
        if (!empty($wp_styles->registered)) {
            foreach ($wp_styles->registered as $handle => $style) {
                if (!empty($style->src) && (
                    strpos($style->src, 'fonts.googleapis.com') !== false ||
                    strpos($style->src, 'fonts.gstatic.com') !== false
                )) {
                    wp_dequeue_style($handle);
                    wp_deregister_style($handle);
                }
            }
        }
    }, 999);

    /* 2) جلوگیری در پیشخوان (wp-admin) */
    add_action('admin_enqueue_scripts', function () {
        global $wp_styles;
        if (!empty($wp_styles->registered)) {
            foreach ($wp_styles->registered as $handle => $style) {
                if (!empty($style->src) && (
                    strpos($style->src, 'fonts.googleapis.com') !== false ||
                    strpos($style->src, 'fonts.gstatic.com') !== false
                )) {
                    wp_dequeue_style($handle);
                    wp_deregister_style($handle);
                }
            }
        }
    }, 999);

    /* 3) فیلتر HTML خروجی برای حذف تگ‌های لینک Google Fonts (فرانت + ادمین) */
    add_action('init', function () {
        if (!is_admin() || (defined('DOING_AJAX') && DOING_AJAX)) {
            return;
        }

        ob_start(function ($html) {
            $html = preg_replace('#<link[^>]+href=["\'].*fonts\.googleapis\.com.*?>#i', '', $html);
            $html = preg_replace('#<link[^>]+href=["\'].*fonts\.gstatic\.com.*?>#i', '', $html);
            return $html;
        });
    });

    /**
     * بلاک کامل آدرس‌های Google Fonts از خروجی سایت
     */
    add_action('template_redirect', function () {
        ob_start(function ($html) {
            $html = preg_replace('#https?:\/\/fonts\.googleapis\.com\/[^\s"\']+#i', '', $html);
            $html = preg_replace('#https?:\/\/fonts\.gstatic\.com\/[^\s"\']+#i', '', $html);
            return $html;
        });
    }, 0);


    function remove_google_fonts_from_outputt($buffer) {
        $buffer = preg_replace('/https?:\/\/fonts\.googleapis\.com[^\s"\']+/i', '', $buffer);
        $buffer = preg_replace('/https?:\/\/fonts\.gstatic\.com[^\s"\']+/i', '', $buffer);
        return $buffer;
    }

    function start_buffer_google_fontsss() {
        ob_start("remove_google_fonts_from_outputt");
    }

    add_action('init', 'start_buffer_google_fontsss');

    add_filter('pre_http_request', function($pre, $args, $url) {

        if (strpos($url, 'fonts.googleapis.com') !== false ||
            strpos($url, 'fonts.gstatic.com') !== false) {

            return new WP_Error('blocked_google_fonts', 'Google Fonts request blocked.');
        }

        return $pre;

    }, 10, 3);

    function block_external_google_fontss($buffer) {

        $patterns = array(
            '/<link[^>]+fonts\.googleapis\.com[^>]*>/i',
            '/<link[^>]+fonts\.gstatic\.com[^>]*>/i',
            '/@import\s+url\([^)]+fonts\.googleapis\.com[^)]+\);?/i'
        );

        return preg_replace($patterns, '', $buffer);
    }

    function start_google_fonts_bufferr() {
        ob_start('block_external_google_fontss');
    }

    add_action('template_redirect', 'start_google_fonts_bufferr');
    add_action('admin_init', 'start_google_fonts_bufferr');
    }

    public function new_page_content()
    {
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>  
            <style>
                @font-face {
                    font-family: YekanBakhFaNum;
                    font-style: normal;
                    font-weight: normal;
                    src: url('<?php echo $font_url; ?>'),   
                            
                }
                :root {
                --red: #b40016;
                --red-dark: #7d0010;
                --red-soft: #fff1f3;
                --black: #111111;
                --text: #2b2b2b;
                --muted: #737373;
                --line: #ececec;
                --white: #ffffff;
                --bg: #f7f7f8;
                --radius-lg: 24px;
                --shadow: 0 18px 45px rgba(17, 17, 17, .08);
                --shadow-soft: 0 12px 28px rgba(17, 17, 17, .07);
                }

                * { box-sizing: border-box; }
                html { scroll-behavior: smooth; }

                body {
                margin: 0;
                font-family: 'YekanBakhFaNum' !important;
                background:
                    radial-gradient(circle at top right, rgba(180, 0, 22, .10), transparent 30%),
                    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
                color: var(--text);
                line-height: 1.9;
                }


                
                a { color: inherit; text-decoration: none; }
                button, a { -webkit-tap-highlight-color: transparent; }

                .page {
                width: min(1120px, calc(100% - 32px));
                margin: 34px auto;
                }

                .hero {
                position: relative;
                overflow: hidden;
                border-radius: var(--radius-lg);
                background: linear-gradient(135deg, var(--black) 0%, #242424 56%, var(--red-dark) 100%);
                color: var(--white);
                padding: 34px;
                box-shadow: var(--shadow);
                }
.rtl,h1,h2,h3,h4,h5
{
   font-family: 'YekanBakhFaNum' !important;
}

                .hero::before {
                content: "";
                position: absolute;
                inset-inline-start: -80px;
                top: -90px;
                width: 240px;
                height: 240px;
                border-radius: 999px;
                background: rgba(255,255,255,.07);
                }

                .hero::after {
                content: "";
                position: absolute;
                inset-inline-end: -50px;
                bottom: -65px;
                width: 190px;
                height: 190px;
                border-radius: 999px;
                border: 36px solid rgba(255,255,255,.06);
                }

                .hero-content {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: 1.1fr .9fr;
                gap: 28px;
                align-items: center;
                }

                .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 7px 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.10);
                color: #ffe9ec;
                font-size: 12px;
                font-weight: 700;
                margin-bottom: 14px;
                border: 1px solid rgba(255,255,255,.12);
                }
                .hero-content h1,.hero-content h2{
                    color: white !important;
                }
                .hero h1 {
                margin: 0;
                font-size: 25px;
                line-height: 1.65;
                letter-spacing: -.4px;
                }

                .hero h1 span { color: #ffccd3; }

                .hero p {
                margin: 12px 0 0;
                color: rgba(255,255,255,.78);
                font-size: 13px;
                max-width: 650px;
                }

                .hero-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 22px;
                }

                .btn {
                border: 0;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 40px;
                padding: 9px 15px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 800;
                transition: .2s ease;
                white-space: nowrap;
                font-family: inherit;
                }

                .btn-red {
                background: var(--red);
                color: #fff;
                box-shadow: 0 10px 22px rgba(180, 0, 22, .24);
                }

                .btn-red:hover { background: #cf001a; transform: translateY(-1px); }

                .btn-light {
                background: rgba(255,255,255,.12);
                color: #fff;
                border: 1px solid rgba(255,255,255,.18);
                }

                .btn-light:hover { background: rgba(255,255,255,.18); }
                .btn-dark { background: var(--black); color: #fff; }

                .btn-outline {
                background: #fff;
                color: var(--black);
                border: 1px solid var(--line);
                }

                .btn-outline:hover {
                border-color: rgba(180,0,22,.35);
                color: var(--red);
                }

                .hero-panel {
                background: rgba(255,255,255,.09);
                border: 1px solid rgba(255,255,255,.13);
                border-radius: 20px;
                padding: 18px;
                backdrop-filter: blur(10px);
                }

                .hero-panel-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 14px;
                }

                .hero-panel-title h2 {
                font-size: 15px;
                margin: 0;
                }

                .pill {
                display: inline-flex;
                padding: 5px 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.12);
                color: #fff;
                font-size: 11px;
                font-weight: 700;
                }

                .mini-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                }

                .stat {
                background: rgba(255,255,255,.10);
                border-radius: 16px;
                padding: 12px;
                text-align: center;
                }

                .stat strong {
                display: block;
                font-size: 18px;
                line-height: 1.2;
                color: #fff;
                }

                .stat span {
                display: block;
                margin-top: 4px;
                font-size: 11px;
                color: rgba(255,255,255,.70);
                }

                .intro-video {
                margin-top: 22px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-soft);
                padding: 18px;
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 18px;
                align-items: center;
                }

                .intro-video h2,
                .section-title h2 {
                font-size: 18px;
                line-height: 1.6;
                margin: 0;
                color: var(--black);
                }

                .intro-video p,
                .section-title p {
                margin: 5px 0 0;
                font-size: 12px;
                color: var(--muted);
                }

                .intro-mark {
                width: 48px;
                height: 48px;
                min-width: 48px;
                border-radius: 16px;
                background: var(--red-soft);
                color: var(--red);
                display: grid;
                place-items: center;
                font-size: 19px;
                font-weight: 900;
                border: 1px solid rgba(180,0,22,.10);
                }

                .intro-main {
                display: flex;
                align-items: center;
                gap: 14px;
                }

                .intro-actions,
                .card-actions {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-end;
                }

                .section-title {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 16px;
                margin: 30px 0 14px;
                }

                .tag {
                display: inline-flex;
                align-items: center;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 800;
                background: #f3f3f3;
                color: #555;
                }

                .tag-red { background: var(--red-soft); color: var(--red); }

                .tutorial-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 16px;
                }

                .tutorial-card {
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 8px 22px rgba(17,17,17,.04);
                transition: .22s ease;
                display: flex;
                flex-direction: column;
                }

                .tutorial-card:hover {
                transform: translateY(-3px);
                border-color: rgba(180,0,22,.22);
                box-shadow: var(--shadow-soft);
                }

                .tutorial-cover {
                position: relative;
                display: block;
                width: 100%;
                aspect-ratio: 16 / 10;
                border: 0;
                border-bottom: 1px solid var(--line);
                overflow: hidden;
                background:
                    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 28%),
                    linear-gradient(135deg, #171717 0%, #2b2b2b 56%, var(--red-dark) 100%);
                cursor: pointer;
                font-family: inherit;
                text-align: inherit;
                }

                .tutorial-cover::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.20) 100%);
                transition: .2s ease;
                }

                .tutorial-card:hover .tutorial-cover::before {
                background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.30) 100%);
                }

                .cover-label {
                position: absolute;
                inset-inline-start: 14px;
                top: 14px;
                color: #fff;
                background: rgba(255,255,255,.12);
                border: 1px solid rgba(255,255,255,.14);
                padding: 5px 10px;
                border-radius: 999px;
                font-size: 11px;
                font-weight: 800;
                z-index: 1;
                }

                .cover-number {
                position: absolute;
                inset-inline-end: 16px;
                bottom: 4px;
                font-size: 58px;
                font-weight: 900;
                line-height: 1;
                color: rgba(255,255,255,.14);
                z-index: 1;
                letter-spacing: -2px;
                }

                .play-badge {
                position: absolute;
                inset-inline-start: 14px;
                bottom: 14px;
                width: 54px;
                height: 54px;
                border-radius: 18px;
                display: grid;
                place-items: center;
                background: rgba(17,17,17,.72);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255,255,255,.14);
                box-shadow: 0 10px 18px rgba(0,0,0,.20);
                transition: .2s ease;
                z-index: 2;
                }

                .play-badge::before {
                content: "▶";
                color: #fff;
                font-size: 18px;
                margin-inline-start: 3px;
                }

                .tutorial-card:hover .play-badge {
                background: rgba(180,0,22,.85);
                transform: scale(1.04);
                }

                .tutorial-body {
                padding: 14px;
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
                }

                .tutorial-tags {
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;
                }

                .tutorial-body h3 {
                margin: 0;
                font-size: 14px;
                line-height: 1.8;
                color: var(--black);
                min-height: 52px;
                }

                .tutorial-body p {
                margin: 0;
                font-size: 11px;
                color: var(--muted);
                line-height: 1.9;
                flex: 1;
                }

                .footer-note {
                margin-top: 24px;
                background: #111;
                color: rgba(255,255,255,.78);
                border-radius: 20px;
                padding: 18px;
                font-size: 12px;
                text-align: center;
                }

                .modal {
                position: fixed;
                inset: 0;
                z-index: 50;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(0,0,0,.72);
                }

                .modal.active { display: flex; }

                .modal-card {
                width: min(900px, 100%);
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 30px 80px rgba(0,0,0,.28);
                }

                .modal-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding: 13px 16px;
                border-bottom: 1px solid var(--line);
                }

                .modal-title {
                margin: 0;
                font-size: 14px;
                color: var(--black);
                line-height: 1.7;
                }

                .close-modal {
                width: 34px;
                height: 34px;
                border: 0;
                border-radius: 12px;
                background: var(--red-soft);
                color: var(--red);
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                font-family: inherit;
                }

                .video-wrap { background: #000; aspect-ratio: 16 / 9; }

                .video-wrap video {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                }

                .modal-foot {
                padding: 12px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                color: var(--muted);
                font-size: 11px;
                }

                @media (max-width: 1024px) {
                .tutorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                }

                @media (max-width: 860px) {
                .hero-content,
                .intro-video { grid-template-columns: 1fr; }
                .hero { padding: 24px; }
                .hero h1 { font-size: 22px; }
                .intro-actions, .card-actions { justify-content: flex-start; }
                .section-title {
                    align-items: flex-start;
                    flex-direction: column;
                }
                .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                }

                @media (max-width: 560px) {
                .page {
                    width: min(100% - 20px, 1120px);
                    margin: 18px auto;
                }
                .hero {
                    border-radius: 20px;
                    padding: 20px;
                }
                .hero h1 { font-size: 19px; }
                .hero p,
                .intro-video p,
                .section-title p,
                .tutorial-body p { font-size: 11px; }
                .hero-actions,
                .intro-actions,
                .card-actions { width: 100%; }
                .btn {
                    width: 100%;
                    min-height: 38px;
                }
                .mini-stats { grid-template-columns: 1fr; }
                .intro-video h2,
                .section-title h2 { font-size: 16px; }
                .tutorial-grid { grid-template-columns: 1fr; }
                .tutorial-body h3 { font-size: 14px; min-height: auto; }
                }
            </style>
            <main class="page">
            <header class="hero">
                <div class="hero-content">
                    <div>
                        <div class="eyebrow">● مینی‌دوره طراحی با وودمارت</div>
                        <h1>نقشه راه طراحی سایت فروشگاهی با <span>قالب وودمارت</span></h1>
                        <p>
                        این برگه براساس جلسات مینی‌دوره طراحی شده و مسیر یادگیری را از معرفی، نصب، بروزرسانی و ثبت لایسنس تا طراحی فروشگاه، تنظیمات و امکانات اختصاصی وودمارت نمایش می‌دهد.
                        </p>
                        <div class="hero-actions">
                        <button class="btn btn-red play-video" data-title="معرفی نقشه راه طراحی" data-video="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4">پخش جلسه اول</button>
                        <a class="btn btn-light" href="#tutorials">مشاهده جلسات</a>
                        </div>
                    </div>
                    <aside class="hero-panel">
                        <div class="hero-panel-title">
                        <h2>ساختار این برگه</h2>
                        <span class="pill">۱۴ جلسه آموزشی</span>
                        </div>
                        <div class="mini-stats">
                        <div class="stat">
                            <strong>۱۴</strong>
                            <span>جلسه ویدئویی</span>
                        </div>
                        <div class="stat">
                            <strong>۱۳</strong>
                            <span>جلسه مقدماتی</span>
                        </div>
                        <div class="stat">
                            <strong>RTL</strong>
                            <span>طراحی فارسی</span>
                        </div>
                        </div>
                    </aside>
                </div>
            </header>
            <section class="intro-video">
                <div class="intro-main">
                    <div class="intro-mark">▶</div>
                    <div>
                        <h2>معرفی نقشه راه طراحی</h2>
                        <p>در این جلسه با مسیر کامل طراحی سایت فروشگاهی با قالب وودمارت آشنا می‌شوید و نقشه راه دوره بررسی می‌شود.</p>
                    </div>
                </div>
                <div class="intro-actions">
                    <button class="btn btn-red play-video" data-title="معرفی نقشه راه طراحی" data-video="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4">پخش ویدئو</button>
                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4">لینک مستقیم</a>
                </div>
            </section>
            <section id="tutorials">
                <div class="section-title">
                    <div>
                        <h2>جلسات مینی‌دوره</h2>
                        <p>برای هر جلسه، عنوان، توضیح، مدت زمان، سطح آموزشی، دکمه پخش داخل صفحه و لینک مستقیم قرار داده شده است.</p>
                    </div>
                    <span class="tag tag-red">۱۴ آموزش</span>
                </div>
                <div class="tutorial-grid">
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="معرفی نقشه راه طراحی" data-video="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4">
                        <span class="cover-label">جلسه 1</span>
                        <span class="cover-number">01</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 1</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">2 دقیقه</span>
                        </div>
                        <h3>معرفی نقشه راه طراحی</h3>
                        <p>آشنایی با مسیر طراحی فروشگاه اینترنتی حرفه‌ای با قالب وودمارت.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="معرفی نقشه راه طراحی" data-video="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="آموزش نصب قالب وودمارت" data-video="https://doc.aramis-co.ir/wp-content/uploads/2025/05/install-theme-woodmart.mp4">
                        <span class="cover-label">جلسه 2</span>
                        <span class="cover-number">02</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 2</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">13 دقیقه</span>
                        </div>
                        <h3>آموزش نصب قالب وودمارت</h3>
                        <p>نصب اصولی قالب وودمارت و راه‌اندازی اولیه فروشگاه.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="آموزش نصب قالب وودمارت" data-video="https://doc.aramis-co.ir/wp-content/uploads/2025/05/install-theme-woodmart.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://doc.aramis-co.ir/wp-content/uploads/2025/05/install-theme-woodmart.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="آموزش بروزرسانی قالب وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/woodmart-update.mp4">
                        <span class="cover-label">جلسه 3</span>
                        <span class="cover-number">03</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 3</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">ویدئو آموزشی</span>
                        </div>
                        <h3>آموزش بروزرسانی قالب وودمارت</h3>
                        <p>در این جلسه با روش بروزرسانی قالب وودمارت و نکات مهم قبل از آپدیت آشنا می‌شوید.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="آموزش بروزرسانی قالب وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/woodmart-update.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/woodmart-update.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="نحوه ثبت لایسنس" data-video="https://aramis-co.ir/Learning/map-learn/licensecheck.mp4">
                        <span class="cover-label">جلسه 4</span>
                        <span class="cover-number">04</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 4</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">ویدئو آموزشی</span>
                        </div>
                        <h3>نحوه ثبت لایسنس</h3>
                        <p>آموزش ثبت و بررسی لایسنس برای فعال‌سازی صحیح قالب و امکانات مرتبط.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه ثبت لایسنس" data-video="https://aramis-co.ir/Learning/map-learn/licensecheck.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/licensecheck.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="نحوه بروزرسانی افزونه وودمارت پلاس" data-video="https://aramis-co.ir/Learning/map-learn/updateplugin.mp4">
                        <span class="cover-label">جلسه 5</span>
                        <span class="cover-number">05</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 5</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">ویدئو آموزشی</span>
                        </div>
                        <h3>نحوه بروزرسانی افزونه وودمارت پلاس</h3>
                        <p>در این قسمت نحوه بروزرسانی افزونه وودمارت پلاس و نکات مهم هنگام آپدیت بررسی می‌شود.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه بروزرسانی افزونه وودمارت پلاس" data-video="https://aramis-co.ir/Learning/map-learn/updateplugin.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/updateplugin.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="افزایش سرعت قالب در نت ملی" data-video="https://aramis-co.ir/Learning/map-learn/Mellinet/Mellinet.mp4">
                        <span class="cover-label">جلسه 6</span>
                        <span class="cover-number">06</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 6</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">2 دقیقه</span>
                        </div>
                        <h3>افزایش سرعت قالب در نت ملی</h3>
                        <p>در این آموزش یاد میگیرید که در زمان نت ملی چطور سرعت سایت را حفظ نمایید.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="افزایش سرعت قالب در نت ملی" data-video="https://aramis-co.ir/Learning/map-learn/Mellinet/Mellinet.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Mellinet/Mellinet.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="آموزش هدر ساز در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Header-Builder/Header-Builder.mp4">
                        <span class="cover-label">جلسه 7</span>
                        <span class="cover-number">07</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 7</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">3 دقیقه</span>
                        </div>
                        <h3>آموزش هدر ساز در وودمارت</h3>
                        <p>ساخت هدر حرفه‌ای و واکنش‌گرا با Header Builder.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="آموزش هدر ساز در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Header-Builder/Header-Builder.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Header-Builder/Header-Builder.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="آموزش ساخت انواع منو در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Menu-Design/Menu-Design.mp4">
                        <span class="cover-label">جلسه 8</span>
                        <span class="cover-number">08</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 8</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">3 دقیقه</span>
                        </div>
                        <h3>آموزش ساخت انواع منو در وودمارت</h3>
                        <p>طراحی منوهای حرفه‌ای و فروشگاهی در وودمارت.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="آموزش ساخت انواع منو در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Menu-Design/Menu-Design.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Menu-Design/Menu-Design.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="طراحی و سفارشی سازی برگه ها در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Design-Page/Elemetor-Design-Page.mp4">
                        <span class="cover-label">جلسه 9</span>
                        <span class="cover-number">09</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 9</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">10 دقیقه</span>
                        </div>
                        <h3>طراحی و سفارشی سازی برگه ها در وودمارت</h3>
                        <p>طراحی صفحات حرفه‌ای و سفارشی سازی برگه‌ها.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="طراحی و سفارشی سازی برگه ها در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Design-Page/Elemetor-Design-Page.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Design-Page/Elemetor-Design-Page.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="افزودن محصولات در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Add-Product/Add-Product.mp4">
                        <span class="cover-label">جلسه 10</span>
                        <span class="cover-number">10</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 10</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">10 دقیقه</span>
                        </div>
                        <h3>افزودن محصولات در وودمارت</h3>
                        <p>ساخت و مدیریت محصولات فروشگاهی در وودمارت.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="افزودن محصولات در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Add-Product/Add-Product.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Add-Product/Add-Product.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="طراحی فروشگاه در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Shop-Design/Shop-Design.mp4">
                        <span class="cover-label">جلسه 11</span>
                        <span class="cover-number">11</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 11</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">5 دقیقه</span>
                        </div>
                        <h3>طراحی فروشگاه در وودمارت</h3>
                        <p>ساخت فروشگاه حرفه‌ای با طراحی مدرن و کاربردی.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="طراحی فروشگاه در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Shop-Design/Shop-Design.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Shop-Design/Shop-Design.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="اسلایدر ساز در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Slider-Woodmart/Slider-Woodmart.mp4">
                        <span class="cover-label">جلسه 12</span>
                        <span class="cover-number">12</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 12</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">4 دقیقه</span>
                        </div>
                        <h3>اسلایدر ساز در وودمارت</h3>
                        <p>ساخت اسلایدرهای جذاب برای صفحات فروشگاهی.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="اسلایدر ساز در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Slider-Woodmart/Slider-Woodmart.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Slider-Woodmart/Slider-Woodmart.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="تنظیمات قالب وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Theme-Options/Theme-Options.mp4">
                        <span class="cover-label">جلسه 13</span>
                        <span class="cover-number">13</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 13</span>
                            <span class="tag">مقدماتی</span>
                            <span class="tag">4 دقیقه</span>
                        </div>
                        <h3>تنظیمات قالب وودمارت</h3>
                        <p>شخصی سازی تنظیمات اصلی و حرفه‌ای قالب.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="تنظیمات قالب وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Theme-Options/Theme-Options.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Theme-Options/Theme-Options.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="امکانات بزرگ و اختصاصی در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Woodmart-Pluss/Woodmart-Pluss.mp4">
                        <span class="cover-label">جلسه 14</span>
                        <span class="cover-number">14</span>
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <div class="tutorial-tags">
                            <span class="tag tag-red">جلسه 14</span>
                            <span class="tag">پیشرفته</span>
                            <span class="tag">4 دقیقه</span>
                        </div>
                        <h3>امکانات بزرگ و اختصاصی در وودمارت</h3>
                        <p>بررسی ویژگی‌ها و امکانات حرفه‌ای قالب Woodmart.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="امکانات بزرگ و اختصاصی در وودمارت" data-video="https://aramis-co.ir/Learning/map-learn/Woodmart-Pluss/Woodmart-Pluss.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://aramis-co.ir/Learning/map-learn/Woodmart-Pluss/Woodmart-Pluss.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                </div>
            </section>
            <div class="footer-note">
                سیستم کامل آموزش قالب وودمارت که توسط تیم توسعه وردپرس جهت رضایت کاربران ارائه شده است
            </div>
            </main>
            <div class="modal" id="videoModal" aria-hidden="true">
            <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
                <div class="modal-head">
                    <h3 class="modal-title" id="modalTitle">پخش ویدئو</h3>
                    <button class="close-modal" type="button" aria-label="بستن">×</button>
                </div>
                <div class="video-wrap">
                    <video id="courseVideo" controls playsinline preload="metadata"></video>
                </div>
                <div class="modal-foot">
                    <span>برای توقف کامل ویدئو، پنجره را ببندید.</span>
                    <span>Woodmart Mini Course</span>
                </div>
            </div>
            </div>
            <script>
            (function () {
                const modal = document.getElementById('videoModal');
                const video = document.getElementById('courseVideo');
                const title = document.getElementById('modalTitle');
                const closeBtn = modal.querySelector('.close-modal');
                const playButtons = document.querySelectorAll('.play-video');
            
                function openModal(videoUrl, videoTitle) {
                title.textContent = videoTitle || 'پخش ویدئو';
                video.src = videoUrl;
                modal.classList.add('active');
                modal.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
                video.play().catch(function () {});
                }
            
                function closeModal() {
                video.pause();
                video.removeAttribute('src');
                video.load();
                modal.classList.remove('active');
                modal.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
                }
            
                playButtons.forEach(function (button) {
                button.addEventListener('click', function () {
                    openModal(button.dataset.video, button.dataset.title);
                });
                });
            
                closeBtn.addEventListener('click', closeModal);
            
                modal.addEventListener('click', function (event) {
                if (event.target === modal) closeModal();
                });
            
                document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape' && modal.classList.contains('active')) closeModal();
                });
            })();
            </script>
        <?php
    }

    public function page_content_faq()
    {
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>
            <style>
                @font-face {
                    font-family: YekanBakhFaNum;
                    font-style: normal;
                    font-weight: normal;
                    src: url('<?php echo $font_url; ?>'),   
                            
                }
                :root {
                --red: #b40016;
                --red-dark: #7d0010;
                --red-soft: #fff1f3;
                --black: #111111;
                --text: #2b2b2b;
                --muted: #737373;
                --line: #ececec;
                --white: #ffffff;
                --bg: #f7f7f8;
                --radius-lg: 24px;
                --radius-md: 18px;
                --shadow: 0 18px 45px rgba(17, 17, 17, .08);
                --shadow-soft: 0 12px 28px rgba(17, 17, 17, .06);
                }

                * { box-sizing: border-box; }
                html { scroll-behavior: smooth; }

                body {
                margin: 0;
                font-family: YekanBakhFaNum !important;
                background:
                    radial-gradient(circle at top right, rgba(180, 0, 22, .10), transparent 28%),
                    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
                color: var(--text);
                line-height: 1.9;
                }

                a { color: inherit; text-decoration: none; }
                button, a { -webkit-tap-highlight-color: transparent; }

                .page {
                width: min(1080px, calc(100% - 32px));
                margin: 34px auto;
                }

                .hero {
                position: relative;
                overflow: hidden;
                border-radius: var(--radius-lg);
                background: linear-gradient(135deg, var(--black) 0%, #242424 54%, var(--red-dark) 100%);
                color: var(--white);
                padding: 34px;
                box-shadow: var(--shadow);
                }

                .hero::before {
                content: "";
                position: absolute;
                inset-inline-start: -90px;
                top: -90px;
                width: 240px;
                height: 240px;
                border-radius: 999px;
                background: rgba(255,255,255,.07);
                }

                .hero::after {
                content: "";
                position: absolute;
                inset-inline-end: -55px;
                bottom: -65px;
                width: 190px;
                height: 190px;
                border-radius: 999px;
                border: 34px solid rgba(255,255,255,.06);
                }

                .hero-content {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: 1.08fr .92fr;
                gap: 28px;
                align-items: center;
                }

                .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 7px 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.10);
                color: #ffe9ec;
                font-size: 12px;
                font-weight: 700;
                margin-bottom: 14px;
                border: 1px solid rgba(255,255,255,.12);
                }

                .hero h1 {
                margin: 0;
                font-size: 26px;
                line-height: 1.65;
                letter-spacing: -.4px;
                }

                .hero h1 span { color: #ffccd3; }

                .hero p {
                margin: 12px 0 0;
                color: rgba(255,255,255,.78);
                font-size: 13px;
                max-width: 650px;
                }

                .hero-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 22px;
                }

                .btn {
                border: 0;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 40px;
                padding: 9px 15px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 800;
                transition: .2s ease;
                white-space: nowrap;
                font-family: inherit;
                }

                .btn-red {
                background: var(--red);
                color: #fff;
                box-shadow: 0 10px 22px rgba(180,0,22,.24);
                }
                .btn-red:hover { background: #cf001a; transform: translateY(-1px); }

                .btn-light {
                background: rgba(255,255,255,.12);
                color: #fff;
                border: 1px solid rgba(255,255,255,.18);
                }
                .btn-light:hover { background: rgba(255,255,255,.18); }

                .btn-dark { background: var(--black); color: #fff; }

                .btn-outline {
                background: #fff;
                color: var(--black);
                border: 1px solid var(--line);
                }
                .btn-outline:hover {
                border-color: rgba(180,0,22,.35);
                color: var(--red);
                }

                .hero-panel {
                background: rgba(255,255,255,.09);
                border: 1px solid rgba(255,255,255,.13);
                border-radius: 20px;
                padding: 18px;
                backdrop-filter: blur(10px);
                }

                .hero-panel-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 14px;
                }

                .hero-panel-title h2 {
                margin: 0;
                font-size: 15px;
                }

                .pill {
                display: inline-flex;
                padding: 5px 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.12);
                color: #fff;
                font-size: 11px;
                font-weight: 700;
                }

                .mini-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                }

                .stat {
                background: rgba(255,255,255,.10);
                border-radius: 16px;
                padding: 12px;
                text-align: center;
                }

                .stat strong {
                display: block;
                font-size: 18px;
                line-height: 1.2;
                color: #fff;
                }

                .stat span {
                display: block;
                margin-top: 4px;
                font-size: 11px;
                color: rgba(255,255,255,.70);
                }

                .intro-box,
                .faq-section {
                margin-top: 22px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-soft);
                padding: 18px;
                }

                .intro-box {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 18px;
                align-items: center;
                }

                .intro-box h2,
                .section-title h2 {
                font-size: 18px;
                line-height: 1.6;
                margin: 0;
                color: var(--black);
                }

                .intro-box p,
                .section-title p {
                margin: 5px 0 0;
                font-size: 12px;
                color: var(--muted);
                }

                .intro-main {
                display: flex;
                align-items: center;
                gap: 14px;
                }

                .intro-mark {
                width: 48px;
                height: 48px;
                min-width: 48px;
                border-radius: 16px;
                background: var(--red-soft);
                color: var(--red);
                display: grid;
                place-items: center;
                font-size: 19px;
                font-weight: 900;
                border: 1px solid rgba(180,0,22,.10);
                }

                .intro-actions,
                .faq-actions {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-end;
                }

                .section-title {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 16px;
                margin-bottom: 16px;
                }

                .tag {
                display: inline-flex;
                align-items: center;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 800;
                background: #f3f3f3;
                color: #555;
                }

                .tag-red {
                background: var(--red-soft);
                color: var(--red);
                }

                .faq-list {
                display: grid;
                gap: 12px;
                }

                .faq-item {
                border: 1px solid var(--line);
                border-radius: 20px;
                background: #fff;
                overflow: hidden;
                transition: .2s ease;
                }

                .faq-item:hover {
                border-color: rgba(180,0,22,.20);
                box-shadow: 0 10px 22px rgba(17,17,17,.04);
                }

                .faq-header {
                width: 100%;
                border: 0;
                background: #fff;
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: center;
                gap: 14px;
                padding: 16px;
                text-align: right;
                cursor: pointer;
                font-family: inherit;
                }

                .faq-number {
                width: 46px;
                height: 46px;
                border-radius: 15px;
                background: #141414;
                color: #fff;
                display: grid;
                place-items: center;
                font-size: 13px;
                font-weight: 800;
                flex-shrink: 0;
                }

                .faq-question h3 {
                margin: 0;
                font-size: 14px;
                line-height: 1.8;
                color: var(--black);
                }

                .faq-question p {
                margin: 3px 0 0;
                font-size: 11px;
                color: var(--muted);
                }

                .faq-arrow {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                display: grid;
                place-items: center;
                background: var(--red-soft);
                color: var(--red);
                font-size: 18px;
                transition: .2s ease;
                flex-shrink: 0;
                }

                .faq-item.active .faq-arrow {
                transform: rotate(180deg);
                background: var(--red);
                color: #fff;
                }

                .faq-body {
                max-height: 0;
                overflow: hidden;
                transition: max-height .28s ease;
                }

                .faq-inner {
                padding: 0 16px 16px 16px;
                border-top: 1px solid var(--line);
                }

                .faq-desc {
                margin: 14px 0 10px;
                font-size: 12px;
                color: #4b4b4b;
                line-height: 2;
                }

                .faq-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-bottom: 14px;
                }

                .meta-pill {
                display: inline-flex;
                align-items: center;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 800;
                background: #f5f5f5;
                color: #666;
                }

                .meta-pill.red {
                background: var(--red-soft);
                color: var(--red);
                }

                .footer-note {
                margin-top: 24px;
                background: #111;
                color: rgba(255,255,255,.78);
                border-radius: 20px;
                padding: 18px;
                font-size: 12px;
                text-align: center;
                }

                .modal {
                position: fixed;
                inset: 0;
                z-index: 50;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(0,0,0,.72);
                }

                .modal.active { display: flex; }

                .modal-card {
                width: min(900px, 100%);
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 30px 80px rgba(0,0,0,.28);
                }

                .modal-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding: 13px 16px;
                border-bottom: 1px solid var(--line);
                }

                .modal-title {
                margin: 0;
                font-size: 14px;
                color: var(--black);
                line-height: 1.7;
                }

                .close-modal {
                width: 34px;
                height: 34px;
                border: 0;
                border-radius: 12px;
                background: var(--red-soft);
                color: var(--red);
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                font-family: inherit;
                }

                .video-wrap {
                background: #000;
                aspect-ratio: 16 / 9;
                }

                .video-wrap video {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                }

                .modal-foot {
                padding: 12px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                color: var(--muted);
                font-size: 11px;
                }

                @media (max-width: 860px) {
                .hero-content,
                .intro-box { grid-template-columns: 1fr; }
                .hero { padding: 24px; }
                .hero h1 { font-size: 22px; }
                .intro-actions, .faq-actions { justify-content: flex-start; }
                .section-title {
                    align-items: flex-start;
                    flex-direction: column;
                }
                }

                @media (max-width: 560px) {
                .page {
                    width: min(100% - 20px, 1080px);
                    margin: 18px auto;
                }

                .hero {
                    border-radius: 20px;
                    padding: 20px;
                }

                .hero h1 { font-size: 19px; }
                .hero p,
                .intro-box p,
                .section-title p,
                .faq-question p,
                .faq-desc { font-size: 11px; }

                .hero-actions,
                .intro-actions,
                .faq-actions { width: 100%; }

                .btn {
                    width: 100%;
                    min-height: 38px;
                }

                .mini-stats { grid-template-columns: 1fr; }
                .intro-box h2,
                .section-title h2 { font-size: 16px; }
                .faq-header {
                    grid-template-columns: auto 1fr;
                }
                .faq-arrow {
                    grid-column: 1 / -1;
                    width: 100%;
                    height: 36px;
                }
                .faq-question h3 { font-size: 13px; }
                }
                .hero-content h1,.hero-content h2{
                    color: white !important;
                }
            </style>
            <main class="page">
                <header class="hero">
                <div class="hero-content">
                    <div>
                    <div class="eyebrow">● سوالات متداول وودمارت پلاس</div>
                    <h1>پاسخ سریع به <span>سوالات متداول و آموزش‌های پرتکرار</span></h1>
                    <p>
                        در این صفحه، رایج‌ترین سوالات کاربران وودمارت پلاس به‌صورت دسته‌بندی‌شده قرار گرفته‌اند. هر سوال شامل توضیح کوتاه، لینک مستقیم و امکان پخش ویدئوی آموزشی داخل صفحه است.
                    </p>
                    <div class="hero-actions">
                        <a class="btn btn-red" href="#faq-list">مشاهده سوالات</a>
                        <button class="btn btn-light play-video" data-title="نحوه قراردادن استوری در وودمارت پلاس" data-video="https://file.lordwp.site/files/faq/1.mp4">پخش اولین آموزش</button>
                    </div>
                    </div>

                    <aside class="hero-panel">
                    <div class="hero-panel-title">
                        <h2>ساختار این برگه</h2>
                        <span class="pill">۱۳ سوال متداول</span>
                    </div>
                    <div class="mini-stats">
                        <div class="stat">
                        <strong>۱۳</strong>
                        <span>ویدئوی آموزشی</span>
                        </div>
                        <div class="stat">
                        <strong>FAQ</strong>
                        <span>سبک آکاردئونی</span>
                        </div>
                        <div class="stat">
                        <strong>RTL</strong>
                        <span>طراحی فارسی</span>
                        </div>
                    </div>
                    </aside>
                </div>
                </header>

                <section class="intro-box">
                <div class="intro-main">
                    <div class="intro-mark">؟</div>
                    <div>
                    <h2>راهنمای استفاده از بخش سوالات متداول</h2>
                    <p>روی هر سوال کلیک کن تا توضیح آن باز شود. سپس می‌توانی ویدئوی آموزشی را داخل صفحه پخش کنی یا با لینک مستقیم باز کنی.</p>
                    </div>
                </div>
                <div class="intro-actions">
                    <a class="btn btn-outline" href="#faq-list">رفتن به لیست سوالات</a>
                </div>
                </section>

                <section class="faq-section" id="faq-list">
                <div class="section-title">
                    <div>
                    <h2>سوالات متداول</h2>
                    <p>پرتکرارترین سوالات مربوط به قالب، افزونه، اپلیکیشن و تنظیمات وودمارت پلاس در این بخش قرار گرفته‌اند.</p>
                    </div>
                    <span class="tag tag-red">۱۳ مورد</span>
                </div>

                <div class="faq-list">

                    <article class="faq-item active">
                    <button class="faq-header" type="button">
                        <span class="faq-number">01</span>
                        <span class="faq-question">
                        <h3>نحوه قراردادن استوری در وودمارت پلاس</h3>
                        <p>آموزش اضافه‌کردن استوری و نمایش آن در ساختار سایت یا فروشگاه.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body" style="max-height: 340px;">
                        <div class="faq-inner">
                        <p class="faq-desc">در این آموزش یاد می‌گیرید چطور بخش استوری را در وودمارت پلاس اضافه و مدیریت کنید تا نمایش محتوای کوتاه و جذاب برای کاربران ساده‌تر شود.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۱</span>
                            <span class="meta-pill">استوری</span>
                            <span class="meta-pill">ویدئوی آموزشی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه قراردادن استوری در وودمارت پلاس" data-video="https://file.lordwp.site/files/faq/1.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/1.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">02</span>
                        <span class="faq-question">
                        <h3>نحوه فعال کردن فایل چیلد قالب وودمارت پلاس</h3>
                        <p>راهنمای فعال‌سازی قالب فرزند برای شخصی‌سازی امن‌تر قالب.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">اگر می‌خواهید تغییرات خود را بدون آسیب به فایل‌های اصلی قالب انجام دهید، در این ویدئو فعال‌سازی فایل چیلد قالب وودمارت پلاس به‌صورت مرحله‌به‌مرحله توضیح داده شده است.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۲</span>
                            <span class="meta-pill">چیلد تم</span>
                            <span class="meta-pill">قالب</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه فعال کردن فایل چیلد قالب وودمارت پلاس" data-video="https://file.lordwp.site/files/faq/2.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/2.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">03</span>
                        <span class="faq-question">
                        <h3>نحوه دریافت خروجی اپلیکیشن وودمارت پلاس</h3>
                        <p>آموزش آماده‌سازی و گرفتن خروجی از اپلیکیشن فروشگاهی.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">در این بخش فرایند نهایی‌سازی و خروجی گرفتن از اپلیکیشن وودمارت پلاس آموزش داده می‌شود تا بتوانید فایل مناسب انتشار یا تست را آماده کنید.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۳</span>
                            <span class="meta-pill">اپلیکیشن</span>
                            <span class="meta-pill">خروجی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه دریافت خروجی اپلیکیشن وودمارت پلاس" data-video="https://file.lordwp.site/learning-woodmartpluss/appsite.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/learning-woodmartpluss/appsite.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">04</span>
                        <span class="faq-question">
                        <h3>چرا با وجود درون‌ریزی چیدمان هیچ المانی اضافه نمی‌شود</h3>
                        <p>بررسی مشکل ایمپورت چیدمان و عدم نمایش المان‌ها.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">اگر چیدمان را درون‌ریزی کرده‌اید اما المانی در صفحه نمایش داده نمی‌شود، این ویدئو علت‌های رایج و روش برطرف‌کردن مشکل را توضیح می‌دهد.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۴</span>
                            <span class="meta-pill">ایمپورت</span>
                            <span class="meta-pill">المان‌ها</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="چرا با وجود درون‌ریزی چیدمان هیچ المانی اضافه نمی‌شود" data-video="https://file.lordwp.site/files/faq/3.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/3.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">05</span>
                        <span class="faq-question">
                        <h3>عدم نمایش گزینه دسته‌بندی‌ها در بخش نمایش / فهرست‌ها</h3>
                        <p>حل مشکل دیده‌نشدن دسته‌بندی‌ها در مدیریت فهرست‌ها.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">در این ویدئو یاد می‌گیرید اگر در بخش نمایش و فهرست‌ها گزینه دسته‌بندی‌ها برای شما دیده نمی‌شود، از چه مسیرهایی باید آن را فعال یا اصلاح کنید.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۵</span>
                            <span class="meta-pill">فهرست‌ها</span>
                            <span class="meta-pill">دسته‌بندی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="عدم نمایش گزینه دسته‌بندی‌ها در بخش نمایش / فهرست‌ها" data-video="https://file.lordwp.site/files/faq/4.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/4.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">06</span>
                        <span class="faq-question">
                        <h3>نحوه بروزرسانی دستی وردپرس</h3>
                        <p>آموزش آپدیت دستی وردپرس در شرایطی که بروزرسانی خودکار انجام نمی‌شود.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">اگر نیاز دارید وردپرس را به‌صورت دستی بروزرسانی کنید، در این آموزش مسیر صحیح انجام این کار برای جلوگیری از خطا یا از دست رفتن فایل‌ها توضیح داده شده است.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۶</span>
                            <span class="meta-pill">وردپرس</span>
                            <span class="meta-pill">بروزرسانی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه بروزرسانی دستی وردپرس" data-video="https://file.lordwp.site/files/faq/5.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/5.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">07</span>
                        <span class="faq-question">
                        <h3>نحوه برطرف شدن ارور کوکی‌ها در هنگام استفاده از قالب</h3>
                        <p>راهنمای رفع خطاهای مربوط به کوکی‌ها در سایت.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">اگر در هنگام استفاده از قالب با خطاهای مرتبط با کوکی‌ها روبه‌رو می‌شوید، این ویدئو دلایل احتمالی و روش‌های برطرف‌کردن آن را بررسی می‌کند.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۷</span>
                            <span class="meta-pill">کوکی‌ها</span>
                            <span class="meta-pill">عیب‌یابی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه برطرف شدن ارور کوکی‌ها در هنگام استفاده از قالب" data-video="https://file.lordwp.site/files/faq/6.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/6.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">08</span>
                        <span class="faq-question">
                        <h3>نحوه فعال‌سازی لایسنس قالب و افزونه وودمارت پلاس</h3>
                        <p>مراحل فعال‌سازی لایسنس برای قالب و افزونه‌های مرتبط.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">در این آموزش، فرایند فعال‌سازی لایسنس قالب و افزونه وودمارت پلاس مرور می‌شود تا امکانات محصول به‌درستی در اختیار شما قرار گیرد.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۸</span>
                            <span class="meta-pill">لایسنس</span>
                            <span class="meta-pill">فعال‌سازی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه فعال‌سازی لایسنس قالب و افزونه وودمارت پلاس" data-video="https://file.lordwp.site/files/faq/7.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/7.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">09</span>
                        <span class="faq-question">
                        <h3>چرا در قسمت دسته‌بندی فروشگاه همه محصولات قرار می‌گیرند</h3>
                        <p>بررسی دلیل نمایش همه محصولات در یک دسته‌بندی فروشگاه.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">اگر در دسته‌بندی فروشگاه همه محصولات با هم نمایش داده می‌شوند، در این ویدئو علت‌های رایج این رفتار و روش اصلاح ساختار دسته‌بندی‌ها آموزش داده شده است.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۹</span>
                            <span class="meta-pill">فروشگاه</span>
                            <span class="meta-pill">دسته‌بندی محصولات</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="چرا در قسمت دسته‌بندی فروشگاه همه محصولات قرار می‌گیرند" data-video="https://file.lordwp.site/files/faq/8.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/8.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">10</span>
                        <span class="faq-question">
                        <h3>نحوه نمایش توضیحات دسته‌بندی در آرشیو محصولات</h3>
                        <p>آموزش نمایش متن توضیحات دسته‌بندی در صفحه آرشیو محصولات.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">در این ویدئو یاد می‌گیرید چگونه توضیحات دسته‌بندی را در صفحات آرشیو محصولات نمایش دهید تا ساختار محتوایی و سئویی صفحه بهتر شود.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۱۰</span>
                            <span class="meta-pill">آرشیو محصولات</span>
                            <span class="meta-pill">توضیحات دسته‌بندی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه نمایش توضیحات دسته‌بندی در آرشیو محصولات" data-video="https://file.lordwp.site/files/faq/9.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/9.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">11</span>
                        <span class="faq-question">
                        <h3>نحوه استفاده از قسمت تسویه حساب در اپلیکیشن</h3>
                        <p>راهنمای استفاده از فرایند پرداخت و تسویه در اپلیکیشن.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">در این آموزش، بخش تسویه حساب اپلیکیشن و نحوه عملکرد آن بررسی می‌شود تا بتوانید تجربه خرید و پرداخت را بهتر مدیریت کنید.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۱۱</span>
                            <span class="meta-pill">اپلیکیشن</span>
                            <span class="meta-pill">تسویه حساب</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="نحوه استفاده از قسمت تسویه حساب در اپلیکیشن" data-video="https://file.lordwp.site/files/faq/10.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/10.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">12</span>
                        <span class="faq-question">
                        <h3>آموزش استفاده از سیستم ویژگی‌ها و محصولات متغیر</h3>
                        <p>آموزش ساخت ویژگی‌ها و تعریف محصولات متغیر در فروشگاه.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">اگر می‌خواهید از ویژگی‌ها، متغیرها و تنوع‌های محصول در فروشگاه خود استفاده کنید، این ویدئو ساختار این بخش را به‌صورت کاربردی توضیح می‌دهد.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۱۲</span>
                            <span class="meta-pill">محصول متغیر</span>
                            <span class="meta-pill">ویژگی‌ها</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="آموزش استفاده از سیستم ویژگی‌ها و محصولات متغیر" data-video="https://file.lordwp.site/files/faq/11.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/11.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                    <article class="faq-item">
                    <button class="faq-header" type="button">
                        <span class="faq-number">13</span>
                        <span class="faq-question">
                        <h3>چرا با وجود تغییر هدر در پیشخوان، تغییری در هدر ایجاد نمی‌شود</h3>
                        <p>بررسی علت عدم اعمال تغییرات هدر پس از ویرایش در پنل مدیریت.</p>
                        </span>
                        <span class="faq-arrow">⌄</span>
                    </button>
                    <div class="faq-body">
                        <div class="faq-inner">
                        <p class="faq-desc">در این ویدئو یاد می‌گیرید چرا با وجود ویرایش هدر در پیشخوان، تغییرات در سایت نمایش داده نمی‌شود و چگونه این مشکل را از نظر تنظیمات، کش یا ساختار هدر برطرف کنید.</p>
                        <div class="faq-meta">
                            <span class="meta-pill red">سوال ۱۳</span>
                            <span class="meta-pill">هدر</span>
                            <span class="meta-pill">عیب‌یابی</span>
                        </div>
                        <div class="faq-actions">
                            <button class="btn btn-dark play-video" data-title="چرا با وجود تغییر هدر در پیشخوان، تغییری در هدر ایجاد نمی‌شود" data-video="https://file.lordwp.site/files/faq/12.mp4">پخش ویدئو</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/files/faq/12.mp4">لینک مستقیم</a>
                        </div>
                        </div>
                    </div>
                    </article>

                </div>
                </section>

                <div class="footer-note">
                سیستم کامل آموزش قالب وودمارت که توسط تیم توسعه وردپرس جهت رضایت کاربران ارائه شده است
                </div>
            </main>

            <div class="modal" id="videoModal" aria-hidden="true">
                <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
                <div class="modal-head">
                    <h3 class="modal-title" id="modalTitle">پخش ویدئو</h3>
                    <button class="close-modal" type="button" aria-label="بستن">×</button>
                </div>
                <div class="video-wrap">
                    <video id="courseVideo" controls playsinline preload="metadata"></video>
                </div>
                <div class="modal-foot">
                    <span>برای توقف کامل ویدئو، پنجره را ببندید.</span>
                    <span>Woodmart Plus FAQ</span>
                </div>
                </div>
            </div>

            <script>
                (function () {
                const modal = document.getElementById('videoModal');
                const video = document.getElementById('courseVideo');
                const title = document.getElementById('modalTitle');
                const closeBtn = modal.querySelector('.close-modal');
                const playButtons = document.querySelectorAll('.play-video');
                const faqItems = document.querySelectorAll('.faq-item');

                function openModal(videoUrl, videoTitle) {
                    title.textContent = videoTitle || 'پخش ویدئو';
                    video.src = videoUrl;
                    modal.classList.add('active');
                    modal.setAttribute('aria-hidden', 'false');
                    document.body.style.overflow = 'hidden';
                    video.play().catch(function () {});
                }

                function closeModal() {
                    video.pause();
                    video.removeAttribute('src');
                    video.load();
                    modal.classList.remove('active');
                    modal.setAttribute('aria-hidden', 'true');
                    document.body.style.overflow = '';
                }

                playButtons.forEach(function (button) {
                    button.addEventListener('click', function () {
                    openModal(button.dataset.video, button.dataset.title);
                    });
                });

                faqItems.forEach(function (item) {
                    const header = item.querySelector('.faq-header');
                    const body = item.querySelector('.faq-body');

                    header.addEventListener('click', function () {
                    const isActive = item.classList.contains('active');

                    faqItems.forEach(function (otherItem) {
                        otherItem.classList.remove('active');
                        otherItem.querySelector('.faq-body').style.maxHeight = null;
                    });

                    if (!isActive) {
                        item.classList.add('active');
                        body.style.maxHeight = body.scrollHeight + 'px';
                    }
                    });
                });

                closeBtn.addEventListener('click', closeModal);

                modal.addEventListener('click', function (event) {
                    if (event.target === modal) closeModal();
                });

                document.addEventListener('keydown', function (event) {
                    if (event.key === 'Escape' && modal.classList.contains('active')) closeModal();
                });
                })();
            </script>
        <?php
    }
    public function page_content_complex()
    {
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>
            <style>
                @font-face {
                    font-family: YekanBakhFaNum;
                    font-style: normal;
                    font-weight: normal;
                    src: url('<?php echo $font_url; ?>'),   
                            
                }
                :root {
                --red: #b40016;
                --red-dark: #7d0010;
                --red-soft: #fff1f3;
                --black: #111111;
                --text: #2b2b2b;
                --muted: #737373;
                --line: #ececec;
                --white: #ffffff;
                --bg: #f7f7f8;
                --radius-lg: 24px;
                --shadow: 0 18px 45px rgba(17, 17, 17, .08);
                --shadow-soft: 0 12px 28px rgba(17, 17, 17, .07);
                }

                * { box-sizing: border-box; }
                html { scroll-behavior: smooth; }
                body {
                margin: 0;
                font-family: YekanBakhFaNum !important;
                background:
                    radial-gradient(circle at top right, rgba(180,0,22,.10), transparent 30%),
                    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
                color: var(--text);
                line-height: 1.9;
                }

                a { color: inherit; text-decoration: none; }
                button, a { -webkit-tap-highlight-color: transparent; }

                .page {
                width: min(1180px, calc(100% - 32px));
                margin: 34px auto;
                }

                .hero {
                position: relative;
                overflow: hidden;
                border-radius: var(--radius-lg);
                background: linear-gradient(135deg, #111111 0%, #232323 56%, var(--red-dark) 100%);
                color: #fff;
                padding: 34px;
                box-shadow: var(--shadow);
                }

                .hero::before {
                content: "";
                position: absolute;
                inset-inline-start: -80px;
                top: -90px;
                width: 240px;
                height: 240px;
                border-radius: 999px;
                background: rgba(255,255,255,.07);
                }

                .hero::after {
                content: "";
                position: absolute;
                inset-inline-end: -50px;
                bottom: -65px;
                width: 190px;
                height: 190px;
                border-radius: 999px;
                border: 36px solid rgba(255,255,255,.06);
                }

                .hero-content {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: 1.12fr .88fr;
                gap: 28px;
                align-items: center;
                }

                .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 7px 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.10);
                color: #ffe9ec;
                font-size: 12px;
                font-weight: 700;
                margin-bottom: 14px;
                border: 1px solid rgba(255,255,255,.12);
                }

                .hero h1 {
                margin: 0;
                font-size: 27px;
                line-height: 1.65;
                letter-spacing: -.4px;
                }

                .hero h1 span { color: #ffccd3; }

                .hero p {
                margin: 12px 0 0;
                color: rgba(255,255,255,.78);
                font-size: 13px;
                max-width: 680px;
                }

                .hero-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 22px;
                }

                .btn {
                border: 0;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 40px;
                padding: 9px 15px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 800;
                transition: .2s ease;
                white-space: nowrap;
                font-family: inherit;
                }

                .btn-red {
                background: var(--red);
                color: #fff;
                box-shadow: 0 10px 22px rgba(180,0,22,.24);
                }
                .btn-red:hover { background: #cf001a; transform: translateY(-1px); }

                .btn-light {
                background: rgba(255,255,255,.12);
                color: #fff;
                border: 1px solid rgba(255,255,255,.18);
                }
                .btn-light:hover { background: rgba(255,255,255,.18); }

                .btn-dark { background: #111111; color: #fff; }
                .btn-outline {
                background: #fff;
                color: #111;
                border: 1px solid var(--line);
                }
                .btn-outline:hover {
                border-color: rgba(180,0,22,.35);
                color: var(--red);
                }

                .hero-panel {
                background: rgba(255,255,255,.09);
                border: 1px solid rgba(255,255,255,.13);
                border-radius: 20px;
                padding: 18px;
                backdrop-filter: blur(10px);
                }

                .hero-panel-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 14px;
                }

                .hero-panel-title h2 {
                font-size: 15px;
                margin: 0;
                }

                .pill {
                display: inline-flex;
                padding: 5px 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.12);
                color: #fff;
                font-size: 11px;
                font-weight: 700;
                }

                .mini-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                }

                .stat {
                background: rgba(255,255,255,.10);
                border-radius: 16px;
                padding: 12px;
                text-align: center;
                }

                .stat strong {
                display: block;
                font-size: 18px;
                line-height: 1.2;
                color: #fff;
                }

                .stat span {
                display: block;
                margin-top: 4px;
                font-size: 11px;
                color: rgba(255,255,255,.70);
                }

                .intro-video {
                margin-top: 22px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-soft);
                padding: 18px;
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 18px;
                align-items: center;
                }

                .intro-video h2, .section-title h2 {
                font-size: 18px;
                line-height: 1.6;
                margin: 0;
                color: #111;
                }

                .intro-video p, .section-title p {
                margin: 5px 0 0;
                font-size: 12px;
                color: var(--muted);
                }

                .intro-mark {
                width: 48px;
                height: 48px;
                min-width: 48px;
                border-radius: 16px;
                background: var(--red-soft);
                color: var(--red);
                display: grid;
                place-items: center;
                font-size: 19px;
                font-weight: 900;
                border: 1px solid rgba(180,0,22,.10);
                }

                .intro-main {
                display: flex;
                align-items: center;
                gap: 14px;
                }

                .intro-actions,
                .card-actions {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-end;
                }

                .section-title {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 16px;
                margin: 30px 0 14px;
                }

                .tag {
                display: inline-flex;
                align-items: center;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 800;
                background: #f3f3f3;
                color: #555;
                }

                .tag-red {
                background: var(--red-soft);
                color: var(--red);
                }

                .tutorial-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 16px;
                }

                .tutorial-card {
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 8px 22px rgba(17,17,17,.04);
                transition: .22s ease;
                display: flex;
                flex-direction: column;
                }

                .tutorial-card:hover {
                transform: translateY(-3px);
                border-color: rgba(180,0,22,.22);
                box-shadow: var(--shadow-soft);
                }

                .tutorial-cover {
                position: relative;
                display: block;
                aspect-ratio: 16 / 10;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border-bottom: 1px solid var(--line);
                overflow: hidden;
                border: none;
                width: 100%;
                cursor: pointer;
                }

                .tutorial-cover::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.22) 100%);
                transition: .2s ease;
                }

                .tutorial-card:hover .tutorial-cover::before {
                background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.30) 100%);
                }

                .play-badge {
                position: absolute;
                inset-inline-start: 14px;
                bottom: 14px;
                width: 54px;
                height: 54px;
                border-radius: 18px;
                display: grid;
                place-items: center;
                background: rgba(17,17,17,.72);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255,255,255,.14);
                box-shadow: 0 10px 18px rgba(0,0,0,.20);
                transition: .2s ease;
                }

                .play-badge::before {
                content: "▶";
                color: #fff;
                font-size: 18px;
                margin-inline-start: 3px;
                }

                .section-badge {
                position: absolute;
                top: 12px;
                inset-inline-end: 12px;
                padding: 5px 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.14);
                color: #fff;
                font-size: 10px;
                font-weight: 800;
                border: 1px solid rgba(255,255,255,.18);
                backdrop-filter: blur(8px);
                }

                .tutorial-card:hover .play-badge {
                background: rgba(180,0,22,.85);
                transform: scale(1.04);
                }

                .tutorial-body {
                padding: 14px;
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
                }

                .tutorial-body h3 {
                margin: 0;
                font-size: 14px;
                line-height: 1.8;
                color: #111;
                min-height: 54px;
                }

                .tutorial-body p {
                margin: 0;
                font-size: 11px;
                color: var(--muted);
                line-height: 1.9;
                min-height: 64px;
                }

                .footer-note {
                margin-top: 24px;
                background: #111;
                color: rgba(255,255,255,.78);
                border-radius: 20px;
                padding: 18px;
                font-size: 12px;
                text-align: center;
                }

                .modal {
                position: fixed;
                inset: 0;
                z-index: 50;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(0,0,0,.72);
                }
                .modal.active { display: flex; }

                .modal-card {
                width: min(920px, 100%);
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 30px 80px rgba(0,0,0,.28);
                }

                .modal-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding: 13px 16px;
                border-bottom: 1px solid var(--line);
                }

                .modal-title {
                margin: 0;
                font-size: 14px;
                color: #111;
                line-height: 1.7;
                }

                .close-modal {
                width: 34px;
                height: 34px;
                border: 0;
                border-radius: 12px;
                background: var(--red-soft);
                color: var(--red);
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                font-family: inherit;
                }

                .video-wrap { background: #000; aspect-ratio: 16 / 9; }
                .video-wrap video {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                }

                .modal-foot {
                padding: 12px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                color: var(--muted);
                font-size: 11px;
                }

                @media (max-width: 1080px) {
                .tutorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                }

                @media (max-width: 860px) {
                .hero-content,
                .intro-video { grid-template-columns: 1fr; }
                .hero { padding: 24px; }
                .hero h1 { font-size: 22px; }
                .intro-actions, .card-actions { justify-content: flex-start; }
                .section-title {
                    align-items: flex-start;
                    flex-direction: column;
                }
                .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                }

                @media (max-width: 560px) {
                .page {
                    width: min(100% - 20px, 1180px);
                    margin: 18px auto;
                }
                .hero {
                    border-radius: 20px;
                    padding: 20px;
                }
                .hero h1 { font-size: 19px; }
                .hero p,
                .intro-video p,
                .section-title p,
                .tutorial-body p { font-size: 11px; }
                .hero-actions,
                .intro-actions,
                .card-actions { width: 100%; }
                .btn {
                    width: 100%;
                    min-height: 38px;
                }
                .mini-stats { grid-template-columns: 1fr; }
                .intro-video h2,
                .section-title h2 { font-size: 16px; }
                .tutorial-grid { grid-template-columns: 1fr; }
                .tutorial-body h3,
                .tutorial-body p { min-height: auto; }
                }
                .hero-content h1,.hero-content h2{
                    color: white !important;
                }
            </style>
            <main class="page">
                <header class="hero">
                <div class="hero-content">
                    <div>
                    <div class="eyebrow">● آموزش کامل قالب وودمارت</div>
                    <h1>راهنمای جامع <span>طراحی، تنظیم و سفارشی‌سازی فروشگاه با وودمارت</span></h1>
                    <p>
                        در این برگه، همه بخش‌های اصلی آموزش قالب وودمارت به‌صورت یکجا قرار گرفته‌اند؛ از معرفی و نصب قالب تا هدر، فوتر، تنظیمات فروشگاه، محصول، بلاگ، بهینه‌سازی، رنگ‌بندی و اپلیکیشن.
                    </p>
                    <div class="hero-actions">
                        <button class="btn btn-red play-video" data-title="معرفی قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Introduction.mp4">پخش معرفی</button>
                        <a class="btn btn-light" href="#tutorials">مشاهده بخش‌ها</a>
                    </div>
                    </div>

                    <aside class="hero-panel">
                    <div class="hero-panel-title">
                        <h2>ساختار این آموزش</h2>
                        <span class="pill">۱۷ بخش آموزشی</span>
                    </div>
                    <div class="mini-stats">
                        <div class="stat">
                        <strong>۱۷</strong>
                        <span>ویدئوی آموزشی</span>
                        </div>
                        <div class="stat">
                        <strong>۱</strong>
                        <span>مسیر کامل یادگیری</span>
                        </div>
                        <div class="stat">
                        <strong>RTL</strong>
                        <span>طراحی فارسی</span>
                        </div>
                    </div>
                    </aside>
                </div>
                </header>

                <section class="intro-video">
                <div class="intro-main">
                    <div class="intro-mark">▶</div>
                    <div>
                    <h2>شروع آموزش با معرفی قالب وودمارت</h2>
                    <p>اگر می‌خواهی اول با توانایی‌ها، دموها و مسیر کلی کار با قالب وودمارت آشنا شوی، این ویدئو بهترین نقطه شروع است.</p>
                    </div>
                </div>
                <div class="intro-actions">
                    <button class="btn btn-red play-video" data-title="معرفی قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Introduction.mp4">پخش ویدئو</button>
                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://files.rtl-theme.com/videos/1400-09-21-Introduction.mp4">لینک مستقیم</a>
                </div>
                </section>

                <section id="tutorials">
                <div class="section-title">
                    <div>
                    <h2>بخش‌های آموزش کامل وودمارت</h2>
                    <p>هر بخش شامل پوستر، عنوان، توضیح کوتاه، دکمه پخش داخل صفحه و لینک مستقیم ویدئو است.</p>
                    </div>
                    <span class="tag tag-red">۱۷ بخش</span>
                </div>

                <div class="tutorial-grid">
                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش اول: معرفی قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Introduction.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/d51bcb27-af59-4705-a240-d4a99a7c0245.jpg')">
                        <span class="section-badge">بخش ۱</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">شروع آموزش</span>
                        <h3>معرفی قالب وودمارت</h3>
                        <p>آشنایی با قالب وودمارت، دموهای متنوع، نسخه توسعه‌یافته وودمارت پلاس و امکانات اصلی آن.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش اول: معرفی قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Introduction.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-09-21-Introduction.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش دوم: آموزش نصب قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Install-Theme.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/5885e54f-fa58-482d-b63b-60d083fd893e.jpg')">
                        <span class="section-badge">بخش ۲</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">نصب و راه‌اندازی</span>
                        <h3>آموزش نصب قالب وودمارت</h3>
                        <p>نصب قالب در هاست، بارگذاری بسته نصبی، ساخت دیتابیس، داپلیکیتور و فعال‌سازی لایسنس.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش دوم: آموزش نصب قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Install-Theme.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-09-21-Install-Theme.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش سوم: معرفی افزونه‌های اصلی وودمارت پلاس" data-video="https://files.rtl-theme.com/videos/1400-09-21-Pluigns.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/d43462c6-7df2-4045-85b5-a0f8e23e63cf.jpg')">
                        <span class="section-badge">بخش ۳</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">افزونه‌های ضروری</span>
                        <h3>معرفی افزونه‌های اصلی وودمارت پلاس</h3>
                        <p>مرور افزونه‌های پایه و جانبی مثل Woodmart Core، المنتور، فرم تماس و ابزارهای مهم دیگر.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش سوم: معرفی افزونه‌های اصلی وودمارت پلاس" data-video="https://files.rtl-theme.com/videos/1400-09-21-Pluigns.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-09-21-Pluigns.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش چهارم: آموزش ایجاد هدر با Header Builder" data-video="https://files.rtl-theme.com/videos/1400-09-21-Header_Builder.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/eaba5266-8170-4e2b-8ebd-f81c7497635b.jpg')">
                        <span class="section-badge">بخش ۴</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">هدر بیلدر</span>
                        <h3>آموزش ایجاد هدر با Header Builder</h3>
                        <p>ساخت هدر سفارشی، ویرایش هدرهای آماده، افزودن لوگو و منو و تنظیم ساختار ردیف‌های هدر.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش چهارم: آموزش ایجاد هدر با Header Builder" data-video="https://files.rtl-theme.com/videos/1400-09-21-Header_Builder.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-09-21-Header_Builder.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش پنجم: آموزش تنظیمات فروشگاه‌ساز وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial5.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/782a3498-fbb8-46fc-8c9b-04764f1dfdbf.jpg')">
                        <span class="section-badge">بخش ۵</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">تنظیمات عمومی</span>
                        <h3>آموزش تنظیمات فروشگاه‌ساز وودمارت</h3>
                        <p>تنظیمات عمومی قالب، چیدمان سایت، ابزارک‌ها، عنوان برگه‌ها، رنگ‌ها، استایل‌ها و تایپوگرافی.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش پنجم: آموزش تنظیمات فروشگاه‌ساز وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial5.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial5.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش ششم: آموزش ویرایش صفحات با المنتور" data-video="https://files.rtl-theme.com/videos/1400-09-21-Edit-Page-Builder.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/3c9f4ccd-a022-4619-b067-b0ac86db9ce8.jpg')">
                        <span class="section-badge">بخش ۶</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">ویرایش صفحات</span>
                        <h3>ویرایش صفحات با ویرایشگر المنتور</h3>
                        <p>آموزش ویرایش المان‌های صفحات، تغییر استایل و محتوا و افزودن المان‌های المنتوری به برگه‌ها.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش ششم: آموزش ویرایش صفحات با المنتور" data-video="https://files.rtl-theme.com/videos/1400-09-21-Edit-Page-Builder.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-09-21-Edit-Page-Builder.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش هفتم: تنظیمات فوتر قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Edit-Footer-Config.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/a4a3b583-a46d-436f-b29e-63c2922445ef.jpg')">
                        <span class="section-badge">بخش ۷</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">فوتر</span>
                        <h3>تنظیمات فوتر قالب وودمارت</h3>
                        <p>ساخت و تنظیم فوترهای سفارشی، استفاده از ابزارک‌ها و ویرایش فوتر با بلاک HTML و المنتور.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش هفتم: تنظیمات فوتر قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1400-09-21-Edit-Footer-Config.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-09-21-Edit-Footer-Config.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش هشتم: آموزش تنظیمات فروشگاه در قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-wooddmart-tutorial8.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/c4e39858-9371-4466-abcf-90455075ba46.jpg')">
                        <span class="section-badge">بخش ۸</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">تنظیمات فروشگاه</span>
                        <h3>آموزش تنظیمات فروشگاه در قالب وودمارت</h3>
                        <p>تنظیم منوی فروشگاه، سبد خرید، جستجوی محصول، برندها، مقایسه، علاقمندی‌ها و ویژگی‌های Swatches.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش هشتم: آموزش تنظیمات فروشگاه در قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-wooddmart-tutorial8.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-wooddmart-tutorial8.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش نهم: تنظیمات آرشیو محصولات و محصول تکی" data-video="https://files.rtl-theme.com/videos/1402-09-woodmart-tutorial.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/bd5bf48a-a1c6-4399-9b15-0911925167e5.jpg')">
                        <span class="section-badge">بخش ۹</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">آرشیو و محصول تکی</span>
                        <h3>تنظیمات آرشیو محصولات و برگه محصول تکی</h3>
                        <p>آموزش گرید محصولات، فیلترها، سایدبار، دسته‌بندی‌ها و تنظیمات کامل صفحه محصول تکی.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش نهم: تنظیمات آرشیو محصولات و محصول تکی" data-video="https://files.rtl-theme.com/videos/1402-09-woodmart-tutorial.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-09-woodmart-tutorial.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش دهم: آموزش تنظیمات محصول در قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial10.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/23905f5e-6811-4d53-a7fe-7e338bcd990d.jpg')">
                        <span class="section-badge">بخش ۱۰</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">محصولات</span>
                        <h3>آموزش تنظیمات محصول در قالب وودمارت</h3>
                        <p>افزودن محصول جدید، تعریف ویژگی و متغیرها و مدیریت فروش ویژه در فروشگاه وودمارت.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش دهم: آموزش تنظیمات محصول در قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial10.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial10.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش یازدهم: آموزش ثبت‌نام و ورود سایت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial11.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/9da17187-9b65-4d19-9948-0772de88da00.jpg')">
                        <span class="section-badge">بخش ۱۱</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">ورود و عضویت</span>
                        <h3>آموزش ثبت‌نام و ورود سایت در قالب وودمارت</h3>
                        <p>سفارشی‌سازی صفحات ورود و عضویت، تنظیمات شبکه‌های اجتماعی و مدیریت حریم خصوصی ووکامرس.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش یازدهم: آموزش ثبت‌نام و ورود سایت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial11.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial11.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش دوازدهم: آموزش تنظیمات تایپوگرافی" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial12.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/0103e54a-3269-476b-b0d8-7d2620eee8bd.jpg')">
                        <span class="section-badge">بخش ۱۲</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">تایپوگرافی</span>
                        <h3>آموزش تنظیمات تایپوگرافی قالب وودمارت</h3>
                        <p>تنظیم فونت‌ها، استایل متن و عناوین، آپلود فونت سفارشی و تعریف فونت برای بخش‌های مختلف.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش دوازدهم: آموزش تنظیمات تایپوگرافی" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial12.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial12.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش سیزدهم: آموزش تنظیمات بلاگ" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial13.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/a5d5f819-402a-41a2-8796-d73b3ebfc920.jpg')">
                        <span class="section-badge">بخش ۱۳</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">بلاگ</span>
                        <h3>آموزش تنظیمات بلاگ قالب Woodmart</h3>
                        <p>تنظیم برگه اصلی وبلاگ، بایگانی‌ها، پست تکی، سایدبار و چیدمان محتوای بخش وبلاگ.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش سیزدهم: آموزش تنظیمات بلاگ" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial13.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial13.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش چهاردهم: سفارشی‌سازی نمونه‌کارها" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial14.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/eb856719-32f4-44a5-ac57-3ed58c04be43.jpg')">
                        <span class="section-badge">بخش ۱۴</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">نمونه کارها</span>
                        <h3>آموزش سفارشی‌سازی نمونه‌کارها</h3>
                        <p>مدیریت آرشیو نمونه‌کارها، ویرایش پروژه تکی، فیلتر دسته‌بندی و فعال‌سازی تنظیمات المنتور.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش چهاردهم: سفارشی‌سازی نمونه‌کارها" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial14.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial14.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش پانزدهم: آموزش بهینه‌سازی قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial15.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/b141c0f8-65e9-4c85-b244-ddc3617faaf8.jpg')">
                        <span class="section-badge">بخش ۱۵</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">بهینه‌سازی</span>
                        <h3>آموزش بهینه‌سازی قالب وودمارت</h3>
                        <p>تنظیمات کارایی، CSS و JS، بارگذاری تنبل، فونت‌ها، پیش‌بارگذاری و نگهداری سایت برای عملکرد بهتر.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش پانزدهم: آموزش بهینه‌سازی قالب وودمارت" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial15.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial15.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش شانزدهم: آموزش تنظیمات رنگ‌بندی" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial16.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/05b3d801-aee2-4fbe-bebd-08c52319ded4.jpg')">
                        <span class="section-badge">بخش ۱۶</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">رنگ‌بندی</span>
                        <h3>آموزش تنظیمات رنگ‌بندی در قالب وودمارت</h3>
                        <p>تغییر رنگ‌ها و استایل‌های قالب، پس‌زمینه صفحات، دکمه‌ها، فرم‌ها و اعلان‌های فروشگاه.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش شانزدهم: آموزش تنظیمات رنگ‌بندی" data-video="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial16.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1402-08-woodmart-tutorial16.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>

                    <article class="tutorial-card">
                    <button class="tutorial-cover play-video" data-title="بخش هفدهم: آموزش تنظیمات اپلیکیشن" data-video="https://files.rtl-theme.com/videos/1400-10-19-Learn-Application.mp4" style="background-image:url('https://content-marketing.rtlcdn.com/image/2025/12/f0555ea5-7fca-4dd9-b218-461f06124867.jpg')">
                        <span class="section-badge">بخش ۱۷</span><span class="play-badge"></span>
                    </button>
                    <div class="tutorial-body">
                        <span class="tag tag-red">اپلیکیشن</span>
                        <h3>آموزش تنظیمات اپلیکیشن</h3>
                        <p>تنظیمات اپلیکیشن وودمارت، همگام‌سازی با سایت، رنگ‌ها، لوگو، بنرها، برگه‌ها و امکانات فروشگاهی.</p>
                        <div class="card-actions">
                        <button class="btn btn-dark play-video" data-title="بخش هفدهم: آموزش تنظیمات اپلیکیشن" data-video="https://files.rtl-theme.com/videos/1400-10-19-Learn-Application.mp4">پخش</button>
                        <a class="btn btn-outline" href="https://files.rtl-theme.com/videos/1400-10-19-Learn-Application.mp4" target="_blank" rel="noopener">لینک</a>
                        </div>
                    </div>
                    </article>
                </div>
                </section>

                <div class="footer-note">
                سیستم کامل آموزش قالب وودمارت که توسط تیم توسعه وردپرس جهت رضایت کاربران ارائه شده است
                </div>
            </main>

            <div class="modal" id="videoModal" aria-hidden="true">
                <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
                <div class="modal-head">
                    <h3 class="modal-title" id="modalTitle">پخش ویدئو</h3>
                    <button class="close-modal" type="button" aria-label="بستن">×</button>
                </div>
                <div class="video-wrap">
                    <video id="courseVideo" controls playsinline preload="metadata"></video>
                </div>
                <div class="modal-foot">
                    <span>برای توقف کامل ویدئو، پنجره را ببندید.</span>
                    <span>Woodmart Complete Course</span>
                </div>
                </div>
            </div>

            <script>
                (function () {
                const modal = document.getElementById('videoModal');
                const video = document.getElementById('courseVideo');
                const title = document.getElementById('modalTitle');
                const closeBtn = modal.querySelector('.close-modal');
                const playButtons = document.querySelectorAll('.play-video');

                function openModal(videoUrl, videoTitle) {
                    title.textContent = videoTitle || 'پخش ویدئو';
                    video.src = videoUrl;
                    modal.classList.add('active');
                    modal.setAttribute('aria-hidden', 'false');
                    document.body.style.overflow = 'hidden';
                    video.play().catch(function () {});
                }

                function closeModal() {
                    video.pause();
                    video.removeAttribute('src');
                    video.load();
                    modal.classList.remove('active');
                    modal.setAttribute('aria-hidden', 'true');
                    document.body.style.overflow = '';
                }

                playButtons.forEach(function (button) {
                    button.addEventListener('click', function () {
                    openModal(button.dataset.video, button.dataset.title);
                    });
                });

                closeBtn.addEventListener('click', closeModal);
                modal.addEventListener('click', function (event) {
                    if (event.target === modal) closeModal();
                });

                document.addEventListener('keydown', function (event) {
                    if (event.key === 'Escape' && modal.classList.contains('active')) closeModal();
                });
                })();
            </script>
        <?php
    }
    public function page_content_app()
    {
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>
            <style>
                @font-face {
                    font-family: YekanBakhFaNum;
                    font-style: normal;
                    font-weight: normal;
                    src: url('<?php echo $font_url; ?>'),   
                            
                }
                :root {
                    --red: #b40016;
                    --red-dark: #7d0010;
                    --red-soft: #fff1f3;
                    --black: #111111;
                    --dark: #1d1d1f;
                    --text: #2b2b2b;
                    --muted: #737373;
                    --line: #eeeeee;
                    --white: #ffffff;
                    --bg: #f7f7f8;
                    --radius-lg: 24px;
                    --radius-md: 16px;
                    --shadow: 0 18px 45px rgba(17, 17, 17, .08);
                    --shadow-soft: 0 10px 25px rgba(17, 17, 17, .06);
                }

                * {
                    box-sizing: border-box;
                }

                html {
                    scroll-behavior: smooth;
                }

                body {
                    margin: 0;
                    font-family: YekanBakhFaNum !important;
                    background:
                        radial-gradient(circle at top right, rgba(180, 0, 22, .10), transparent 32%),
                        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
                    color: var(--text);
                    line-height: 1.9;
                }

                a {
                    color: inherit;
                    text-decoration: none;
                }

                button,
                a {
                    -webkit-tap-highlight-color: transparent;
                }

                .app-course {
                    width: min(1080px, calc(100% - 32px));
                    margin: 34px auto;
                }

                .hero {
                    position: relative;
                    overflow: hidden;
                    border-radius: var(--radius-lg);
                    background: linear-gradient(135deg, var(--black) 0%, #242424 54%, var(--red-dark) 100%);
                    color: var(--white);
                    padding: 34px;
                    box-shadow: var(--shadow);
                }

                .hero::before {
                    content: "";
                    position: absolute;
                    inset-inline-start: -80px;
                    top: -90px;
                    width: 230px;
                    height: 230px;
                    border-radius: 999px;
                    background: rgba(255, 255, 255, .07);
                }

                .hero::after {
                    content: "";
                    position: absolute;
                    inset-inline-end: -45px;
                    bottom: -65px;
                    width: 180px;
                    height: 180px;
                    border-radius: 999px;
                    border: 34px solid rgba(255, 255, 255, .06);
                }

                .hero-content {
                    position: relative;
                    z-index: 1;
                    display: grid;
                    grid-template-columns: 1.1fr .9fr;
                    gap: 28px;
                    align-items: center;
                }

                .eyebrow {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    padding: 7px 12px;
                    border-radius: 999px;
                    background: rgba(255, 255, 255, .10);
                    color: #ffe9ec;
                    font-size: 12px;
                    font-weight: 700;
                    margin-bottom: 14px;
                    border: 1px solid rgba(255, 255, 255, .12);
                }

                .hero h1 {
                    margin: 0;
                    font-size: 26px;
                    line-height: 1.6;
                    letter-spacing: -.5px;
                }

                .hero h1 span {
                    color: #ffccd3;
                }

                .hero p {
                    margin: 12px 0 0;
                    color: rgba(255, 255, 255, .78);
                    font-size: 13px;
                    max-width: 620px;
                }

                .hero-actions {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                    margin-top: 22px;
                }

                .btn {
                    border: 0;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    min-height: 40px;
                    padding: 9px 15px;
                    border-radius: 12px;
                    font-size: 12px;
                    font-weight: 800;
                    transition: .2s ease;
                    white-space: nowrap;
                    font-family: inherit;
                }

                .btn-red {
                    background: var(--red);
                    color: #fff;
                    box-shadow: 0 10px 22px rgba(180, 0, 22, .24);
                }

                .btn-red:hover {
                    background: #cf001a;
                    transform: translateY(-1px);
                }

                .btn-light {
                    background: rgba(255, 255, 255, .12);
                    color: #fff;
                    border: 1px solid rgba(255, 255, 255, .18);
                }

                .btn-light:hover {
                    background: rgba(255, 255, 255, .18);
                }

                .btn-dark {
                    background: var(--black);
                    color: #fff;
                }

                .btn-outline {
                    background: #fff;
                    color: var(--black);
                    border: 1px solid var(--line);
                }

                .btn-outline:hover {
                    border-color: rgba(180, 0, 22, .35);
                    color: var(--red);
                }

                .hero-panel {
                    background: rgba(255, 255, 255, .09);
                    border: 1px solid rgba(255, 255, 255, .13);
                    border-radius: 20px;
                    padding: 18px;
                    backdrop-filter: blur(10px);
                }

                .hero-panel-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 12px;
                    margin-bottom: 14px;
                }

                .hero-panel-title h2 {
                    font-size: 15px;
                    margin: 0;
                }

                .pill {
                    display: inline-flex;
                    padding: 5px 10px;
                    border-radius: 999px;
                    background: rgba(255, 255, 255, .12);
                    color: #fff;
                    font-size: 11px;
                    font-weight: 700;
                }

                .mini-stats {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 10px;
                }

                .stat {
                    background: rgba(255, 255, 255, .10);
                    border-radius: 16px;
                    padding: 12px;
                    text-align: center;
                }

                .stat strong {
                    display: block;
                    font-size: 18px;
                    line-height: 1.2;
                    color: #fff;
                }

                .stat span {
                    display: block;
                    margin-top: 4px;
                    font-size: 11px;
                    color: rgba(255, 255, 255, .70);
                }

                .intro-video {
                    margin-top: 22px;
                    background: #fff;
                    border: 1px solid var(--line);
                    border-radius: var(--radius-lg);
                    box-shadow: var(--shadow-soft);
                    padding: 18px;
                    display: grid;
                    grid-template-columns: 1fr auto;
                    gap: 18px;
                    align-items: center;
                }

                .intro-video h2,
                .section-title h2 {
                    font-size: 18px;
                    line-height: 1.6;
                    margin: 0;
                    color: var(--black);
                }

                .intro-video p,
                .section-title p {
                    margin: 5px 0 0;
                    font-size: 12px;
                    color: var(--muted);
                }

                .intro-mark {
                    width: 48px;
                    height: 48px;
                    min-width: 48px;
                    border-radius: 16px;
                    background: var(--red-soft);
                    color: var(--red);
                    display: grid;
                    place-items: center;
                    font-size: 19px;
                    font-weight: 900;
                    border: 1px solid rgba(180, 0, 22, .10);
                }

                .intro-main {
                    display: flex;
                    align-items: center;
                    gap: 14px;
                }

                .intro-actions,
                .lesson-actions {
                    display: flex;
                    gap: 8px;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                }

                .section-title {
                    display: flex;
                    align-items: end;
                    justify-content: space-between;
                    gap: 16px;
                    margin: 30px 0 14px;
                }

                .course-list {
                    display: grid;
                    gap: 12px;
                }

                .lesson {
                    position: relative;
                    display: grid;
                    grid-template-columns: 78px 1fr auto;
                    gap: 16px;
                    align-items: center;
                    background: #fff;
                    border: 1px solid var(--line);
                    border-radius: 18px;
                    padding: 14px 16px;
                    box-shadow: 0 8px 22px rgba(17, 17, 17, .04);
                    transition: .2s ease;
                }

                .lesson:hover {
                    transform: translateY(-2px);
                    border-color: rgba(180, 0, 22, .22);
                    box-shadow: var(--shadow-soft);
                }

                .lesson::before {
                    content: "";
                    position: absolute;
                    inset-inline-start: 0;
                    top: 17px;
                    bottom: 17px;
                    width: 4px;
                    border-radius: 999px;
                    background: var(--red);
                }

                .lesson-number {
                    width: 58px;
                    height: 58px;
                    border-radius: 18px;
                    background: #151515;
                    color: #fff;
                    display: grid;
                    place-items: center;
                    text-align: center;
                    line-height: 1.35;
                }

                .lesson-number small {
                    display: block;
                    font-size: 10px;
                    color: rgba(255, 255, 255, .60);
                    font-weight: 700;
                }

                .lesson-number strong {
                    display: block;
                    font-size: 17px;
                }

                .lesson-content h3 {
                    margin: 0;
                    font-size: 15px;
                    line-height: 1.7;
                    color: var(--black);
                }

                .lesson-content p {
                    margin: 3px 0 0;
                    font-size: 12px;
                    color: var(--muted);
                }

                .lesson-meta {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 6px;
                    margin-top: 8px;
                }

                .tag {
                    display: inline-flex;
                    align-items: center;
                    padding: 4px 9px;
                    border-radius: 999px;
                    font-size: 10px;
                    font-weight: 800;
                    background: #f3f3f3;
                    color: #555;
                }

                .tag-red {
                    background: var(--red-soft);
                    color: var(--red);
                }

                .footer-note {
                    margin-top: 24px;
                    background: #111;
                    color: rgba(255, 255, 255, .78);
                    border-radius: 20px;
                    padding: 18px;
                    font-size: 12px;
                    text-align: center;
                }

                .modal {
                    position: fixed;
                    inset: 0;
                    z-index: 50;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    padding: 18px;
                    background: rgba(0, 0, 0, .72);
                }

                .modal.active {
                    display: flex;
                }

                .modal-card {
                    width: min(880px, 100%);
                    background: #fff;
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
                }

                .modal-head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 14px;
                    padding: 13px 16px;
                    border-bottom: 1px solid var(--line);
                }

                .modal-title {
                    margin: 0;
                    font-size: 14px;
                    color: var(--black);
                    line-height: 1.7;
                }

                .close-modal {
                    width: 34px;
                    height: 34px;
                    border: 0;
                    border-radius: 12px;
                    background: var(--red-soft);
                    color: var(--red);
                    cursor: pointer;
                    font-size: 18px;
                    line-height: 1;
                    font-family: inherit;
                }

                .video-wrap {
                    background: #000;
                    aspect-ratio: 16 / 9;
                }

                .video-wrap video {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                .modal-foot {
                    padding: 12px 16px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 12px;
                    color: var(--muted);
                    font-size: 11px;
                }

                @media (max-width: 860px) {
                    .hero-content,
                    .intro-video,
                    .lesson {
                        grid-template-columns: 1fr;
                    }

                    .hero {
                        padding: 24px;
                    }

                    .hero h1 {
                        font-size: 22px;
                    }

                    .intro-actions,
                    .lesson-actions {
                        justify-content: flex-start;
                    }

                    .lesson {
                        gap: 12px;
                    }

                    .lesson::before {
                        top: 14px;
                        bottom: auto;
                        height: 4px;
                        width: 42px;
                        inset-inline-start: 16px;
                    }

                    .section-title {
                        align-items: flex-start;
                        flex-direction: column;
                    }
                }

                @media (max-width: 560px) {
                    .app-course {
                        width: min(100% - 20px, 1080px);
                        margin: 18px auto;
                    }

                    .hero {
                        border-radius: 20px;
                        padding: 20px;
                    }

                    .hero h1 {
                        font-size: 19px;
                    }

                    .hero p,
                    .intro-video p,
                    .section-title p,
                    .lesson-content p {
                        font-size: 11px;
                    }

                    .hero-actions,
                    .intro-actions,
                    .lesson-actions {
                        width: 100%;
                    }

                    .btn {
                        width: 100%;
                        min-height: 38px;
                    }

                    .mini-stats {
                        grid-template-columns: 1fr;
                    }

                    .intro-video h2,
                    .section-title h2 {
                        font-size: 16px;
                    }

                    .lesson-content h3 {
                        font-size: 14px;
                    }
                }
                .hero-content h1,.hero-content h2{
                    color: white !important;
                }
            </style>
            <main class="app-course">
                <header class="hero">
                    <div class="hero-content">
                        <div>
                            <div class="eyebrow">● آموزش اپلیکیشن وودمارت پلاس</div>
                            <h1>راهنمای کامل ساخت، تنظیم و انتشار <span>اپلیکیشن فروشگاهی</span></h1>
                            <p>
                                در این صفحه مسیر آموزشی اپلیکیشن وودمارت پلاس به‌صورت ساده و مرتب قرار گرفته است؛ از معرفی کلی سیستم تا گرفتن خروجی، انجام تنظیمات و انتشار در مارکت‌ها.
                            </p>
                            <div class="hero-actions">
                                <button class="btn btn-red play-video" data-title="معرفی کلی اپلیکیشن وودمارت پلاس" data-video="https://file.lordwp.site/learning-woodmartpluss/introapp.mp4">پخش معرفی کلی</button>
                                <a class="btn btn-light" href="#lessons">مشاهده قسمت‌ها</a>
                            </div>
                        </div>

                        <aside class="hero-panel">
                            <div class="hero-panel-title">
                                <h2>ساختار این آموزش</h2>
                                <span class="pill">۴ ویدئو</span>
                            </div>
                            <div class="mini-stats">
                                <div class="stat">
                                    <strong>۱</strong>
                                    <span>معرفی جامع</span>
                                </div>
                                <div class="stat">
                                    <strong>۳</strong>
                                    <span>قسمت آموزشی</span>
                                </div>
                                <div class="stat">
                                    <strong>RTL</strong>
                                    <span>طراحی فارسی</span>
                                </div>
                            </div>
                        </aside>
                    </div>
                </header>

                <section class="intro-video">
                    <div class="intro-main">
                        <div class="intro-mark">▶</div>
                        <div>
                            <h2>معرفی جامع اپلیکیشن</h2>
                            <p>قبل از شروع آموزش‌ها، این ویدئو دید کلی از قابلیت‌ها و مسیر استفاده از اپلیکیشن به شما می‌دهد.</p>
                        </div>
                    </div>
                    <div class="intro-actions">
                        <button class="btn btn-red play-video" data-title="معرفی جامع اپلیکیشن" data-video="https://file.lordwp.site/learning-woodmartpluss/introapp.mp4">پخش ویدئو</button>
                        <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/learning-woodmartpluss/introapp.mp4">لینک مستقیم</a>
                    </div>
                </section>

                <section id="lessons">
                    <div class="section-title">
                        <div>
                            <h2>قسمت‌های آموزشی اپلیکیشن</h2>
                            <p>ویدئوها را به ترتیب مشاهده کنید تا روند خروجی گرفتن، تنظیمات و انتشار اپلیکیشن کامل‌تر مشخص شود.</p>
                        </div>
                        <span class="tag tag-red">۳ قسمت اصلی</span>
                    </div>

                    <div class="course-list">
                        <article class="lesson">
                            <div class="lesson-number">
                                <div>
                                    <small>قسمت</small>
                                    <strong>۰۱</strong>
                                </div>
                            </div>
                            <div class="lesson-content">
                                <h3>آموزش نحوه خروجی اپلیکیشن</h3>
                                <p>در این بخش با فرآیند آماده‌سازی و گرفتن خروجی اپلیکیشن برای استفاده فروشگاه آشنا می‌شوید.</p>
                                <div class="lesson-meta">
                                    <span class="tag tag-red">شروع کار</span>
                                    <span class="tag">ویدئو آموزشی</span>
                                </div>
                            </div>
                            <div class="lesson-actions">
                                <button class="btn btn-dark play-video" data-title="آموزش نحوه خروجی اپلیکیشن" data-video="https://file.lordwp.site/learning-woodmartpluss/appsite.mp4">پخش</button>
                                <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/learning-woodmartpluss/appsite.mp4">لینک</a>
                            </div>
                        </article>

                        <article class="lesson">
                            <div class="lesson-number">
                                <div>
                                    <small>قسمت</small>
                                    <strong>۰۲</strong>
                                </div>
                            </div>
                            <div class="lesson-content">
                                <h3>آموزش کامل تنظیمات اپلیکیشن</h3>
                                <p>در این قسمت تنظیمات اصلی اپلیکیشن بررسی می‌شود تا بتوانید ساختار و امکانات آن را مطابق فروشگاه تنظیم کنید.</p>
                                <div class="lesson-meta">
                                    <span class="tag tag-red">تنظیمات</span>
                                    <span class="tag">ویدئو آموزشی</span>
                                </div>
                            </div>
                            <div class="lesson-actions">
                                <button class="btn btn-dark play-video" data-title="آموزش کامل تنظیمات اپلیکیشن" data-video="https://file.lordwp.site/learning-woodmartpluss/applications.mp4">پخش</button>
                                <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/learning-woodmartpluss/applications.mp4">لینک</a>
                            </div>
                        </article>

                        <article class="lesson">
                            <div class="lesson-number">
                                <div>
                                    <small>قسمت</small>
                                    <strong>۰۳</strong>
                                </div>
                            </div>
                            <div class="lesson-content">
                                <h3>نحوه قرار دادن اپلیکیشن در بازار و سیب‌اپ</h3>
                                <p>در پایان، روش آماده‌سازی و انتشار اپلیکیشن در مارکت‌های ایرانی مثل بازار و سیب‌اپ آموزش داده می‌شود.</p>
                                <div class="lesson-meta">
                                    <span class="tag tag-red">انتشار اپلیکیشن</span>
                                    <span class="tag">ویدئو آموزشی</span>
                                </div>
                            </div>
                            <div class="lesson-actions">
                                <button class="btn btn-dark play-video" data-title="نحوه قرار دادن اپلیکیشن در بازار و سیب‌اپ" data-video="https://file.lordwp.site/learning-woodmartpluss/platformapp.mp4">پخش</button>
                                <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site/learning-woodmartpluss/platformapp.mp4">لینک</a>
                            </div>
                        </article>
                    </div>
                </section>

                    <div class="footer-note">
                سیستم کامل آموزش قالب وودمارت که توسط تیم توسعه وردپرس جهت رضایت کاربران ارائه شده است
                </div>
            </main>

            <div class="modal" id="videoModal" aria-hidden="true">
                <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
                    <div class="modal-head">
                        <h3 class="modal-title" id="modalTitle">پخش ویدئو</h3>
                        <button class="close-modal" type="button" aria-label="بستن">×</button>
                    </div>
                    <div class="video-wrap">
                        <video id="courseVideo" controls playsinline preload="metadata"></video>
                    </div>
                    <div class="modal-foot">
                        <span>برای توقف کامل ویدئو، پنجره را ببندید.</span>
                        <span>Woodmart Plus App</span>
                    </div>
                </div>
            </div>

            <script>
                (function () {
                    const modal = document.getElementById('videoModal');
                    const video = document.getElementById('courseVideo');
                    const title = document.getElementById('modalTitle');
                    const closeBtn = modal.querySelector('.close-modal');
                    const playButtons = document.querySelectorAll('.play-video');

                    function openModal(videoUrl, videoTitle) {
                        title.textContent = videoTitle || 'پخش ویدئو';
                        video.src = videoUrl;
                        modal.classList.add('active');
                        modal.setAttribute('aria-hidden', 'false');
                        document.body.style.overflow = 'hidden';
                        video.play().catch(function () {});
                    }

                    function closeModal() {
                        video.pause();
                        video.removeAttribute('src');
                        video.load();
                        modal.classList.remove('active');
                        modal.setAttribute('aria-hidden', 'true');
                        document.body.style.overflow = '';
                    }

                    playButtons.forEach(function (button) {
                        button.addEventListener('click', function () {
                            openModal(button.dataset.video, button.dataset.title);
                        });
                    });

                    closeBtn.addEventListener('click', closeModal);

                    modal.addEventListener('click', function (event) {
                        if (event.target === modal) {
                            closeModal();
                        }
                    });

                    document.addEventListener('keydown', function (event) {
                        if (event.key === 'Escape' && modal.classList.contains('active')) {
                            closeModal();
                        }
                    });
                })();
            </script>
        <?php
    }
    public function page_content_uniqe_fea()
    {
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>
            <style>
                @font-face {
                    font-family: YekanBakhFaNum;
                    font-style: normal;
                    font-weight: normal;
                    src: url('<?php echo $font_url; ?>'),   
                            
                }
                    :root {
                        --red: #b40016;
                        --red-dark: #7d0010;
                        --red-soft: #fff1f3;
                        --black: #111111;
                        --dark: #1d1d1f;
                        --text: #2b2b2b;
                        --muted: #737373;
                        --line: #eeeeee;
                        --white: #ffffff;
                        --bg: #f7f7f8;
                        --radius-lg: 24px;
                        --radius-md: 16px;
                        --shadow: 0 18px 45px rgba(17, 17, 17, .08);
                        --shadow-soft: 0 10px 25px rgba(17, 17, 17, .06);
                    }

                    * { box-sizing: border-box; }
                    html { scroll-behavior: smooth; }

                    body {
                        margin: 0;
                        font-family: 'YekanBakhFaNum' !important;
                        background:
                            radial-gradient(circle at top right, rgba(180, 0, 22, .10), transparent 32%),
                            linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
                        color: var(--text);
                        line-height: 1.9;
                    }
                    .hero-content h1,.hero-content h2{
                        color: white !important;
                    }
                    a { color: inherit; text-decoration: none; }
                    button, a { -webkit-tap-highlight-color: transparent; }

                    .app-course {
                        width: min(1100px, calc(100% - 32px));
                        margin: 34px auto;
                    }

                    .hero {
                        position: relative;
                        overflow: hidden;
                        border-radius: var(--radius-lg);
                        background: linear-gradient(135deg, var(--black) 0%, #242424 54%, var(--red-dark) 100%);
                        color: var(--white);
                        padding: 34px;
                        box-shadow: var(--shadow);
                    }

                    .hero::before {
                        content: "";
                        position: absolute;
                        inset-inline-start: -80px;
                        top: -90px;
                        width: 230px;
                        height: 230px;
                        border-radius: 999px;
                        background: rgba(255, 255, 255, .07);
                    }

                    .hero::after {
                        content: "";
                        position: absolute;
                        inset-inline-end: -45px;
                        bottom: -65px;
                        width: 180px;
                        height: 180px;
                        border-radius: 999px;
                        border: 34px solid rgba(255, 255, 255, .06);
                    }

                    .hero-content {
                        position: relative;
                        z-index: 1;
                        display: grid;
                        grid-template-columns: 1.12fr .88fr;
                        gap: 28px;
                        align-items: center;
                    }

                    .eyebrow {
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                        padding: 7px 12px;
                        border-radius: 999px;
                        background: rgba(255, 255, 255, .10);
                        color: #ffe9ec;
                        font-size: 12px;
                        font-weight: 700;
                        margin-bottom: 14px;
                        border: 1px solid rgba(255, 255, 255, .12);
                    }

                    .hero h1 {
                        margin: 0;
                        font-size: 25px;
                        line-height: 1.65;
                        letter-spacing: -.4px;
                    }

                    .hero h1 span { color: #ffccd3; }

                    .hero p {
                        margin: 12px 0 0;
                        color: rgba(255, 255, 255, .78);
                        font-size: 13px;
                        max-width: 640px;
                    }

                    .hero-actions {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        margin-top: 22px;
                    }

                    .btn {
                        border: 0;
                        cursor: pointer;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        min-height: 40px;
                        padding: 9px 15px;
                        border-radius: 12px;
                        font-size: 12px;
                        font-weight: 800;
                        transition: .2s ease;
                        white-space: nowrap;
                        font-family: inherit;
                    }

                    .btn-red {
                        background: var(--red);
                        color: #fff;
                        box-shadow: 0 10px 22px rgba(180, 0, 22, .24);
                    }
                    .btn-red:hover { background: #cf001a; transform: translateY(-1px); }
                    .btn-light {
                        background: rgba(255, 255, 255, .12);
                        color: #fff;
                        border: 1px solid rgba(255, 255, 255, .18);
                    }
                    .btn-light:hover { background: rgba(255, 255, 255, .18); }
                    .btn-dark { background: var(--black); color: #fff; }
                    .btn-outline {
                        background: #fff;
                        color: var(--black);
                        border: 1px solid var(--line);
                    }
                    .btn-outline:hover {
                        border-color: rgba(180, 0, 22, .35);
                        color: var(--red);
                    }

                    .hero-panel {
                        background: rgba(255, 255, 255, .09);
                        border: 1px solid rgba(255, 255, 255, .13);
                        border-radius: 20px;
                        padding: 18px;
                        backdrop-filter: blur(10px);
                    }

                    .hero-panel-title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 12px;
                        margin-bottom: 14px;
                    }

                    .hero-panel-title h2 {
                        font-size: 15px;
                        margin: 0;
                    }

                    .pill {
                        display: inline-flex;
                        padding: 5px 10px;
                        border-radius: 999px;
                        background: rgba(255, 255, 255, .12);
                        color: #fff;
                        font-size: 11px;
                        font-weight: 700;
                    }

                    .mini-stats {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 10px;
                    }

                    .stat {
                        background: rgba(255, 255, 255, .10);
                        border-radius: 16px;
                        padding: 12px;
                        text-align: center;
                    }

                    .stat strong {
                        display: block;
                        font-size: 18px;
                        line-height: 1.2;
                        color: #fff;
                    }

                    .stat span {
                        display: block;
                        margin-top: 4px;
                        font-size: 11px;
                        color: rgba(255, 255, 255, .70);
                    }

                    .intro-video, .section-block {
                        margin-top: 22px;
                        background: #fff;
                        border: 1px solid var(--line);
                        border-radius: var(--radius-lg);
                        box-shadow: var(--shadow-soft);
                        padding: 18px;
                    }

                    .intro-video {
                        display: grid;
                        grid-template-columns: 1fr auto;
                        gap: 18px;
                        align-items: center;
                    }

                    .intro-video h2,
                    .section-title h2,
                    .section-head h2 {
                        font-size: 18px;
                        line-height: 1.6;
                        margin: 0;
                        color: var(--black);
                    }

                    .intro-video p,
                    .section-title p,
                    .section-head p {
                        margin: 5px 0 0;
                        font-size: 12px;
                        color: var(--muted);
                    }

                    .intro-mark {
                        width: 48px;
                        height: 48px;
                        min-width: 48px;
                        border-radius: 16px;
                        background: var(--red-soft);
                        color: var(--red);
                        display: grid;
                        place-items: center;
                        font-size: 19px;
                        font-weight: 900;
                        border: 1px solid rgba(180, 0, 22, .10);
                    }

                    .intro-main { display: flex; align-items: center; gap: 14px; }
                    .intro-actions, .lesson-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

                    .section-title {
                        display: flex;
                        align-items: end;
                        justify-content: space-between;
                        gap: 16px;
                        margin: 30px 0 14px;
                    }

                    .section-head {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        gap: 16px;
                        margin-bottom: 16px;
                    }

                    .course-list { display: grid; gap: 12px; }

                    .lesson {
                        position: relative;
                        display: grid;
                        grid-template-columns: 78px 1fr auto;
                        gap: 16px;
                        align-items: center;
                        background: #fff;
                        border: 1px solid var(--line);
                        border-radius: 18px;
                        padding: 14px 16px;
                        box-shadow: 0 8px 22px rgba(17, 17, 17, .04);
                        transition: .2s ease;
                    }

                    .lesson:hover {
                        transform: translateY(-2px);
                        border-color: rgba(180, 0, 22, .22);
                        box-shadow: var(--shadow-soft);
                    }

                    .lesson::before {
                        content: "";
                        position: absolute;
                        inset-inline-start: 0;
                        top: 17px;
                        bottom: 17px;
                        width: 4px;
                        border-radius: 999px;
                        background: var(--red);
                    }

                    .lesson-number {
                        width: 58px;
                        height: 58px;
                        border-radius: 18px;
                        background: #151515;
                        color: #fff;
                        display: grid;
                        place-items: center;
                        text-align: center;
                        line-height: 1.35;
                    }

                    .lesson-number small {
                        display: block;
                        font-size: 10px;
                        color: rgba(255, 255, 255, .60);
                        font-weight: 700;
                    }

                    .lesson-number strong { display: block; font-size: 17px; }

                    .lesson-content h3 {
                        margin: 0;
                        font-size: 15px;
                        line-height: 1.7;
                        color: var(--black);
                    }

                    .lesson-content p {
                        margin: 3px 0 0;
                        font-size: 12px;
                        color: var(--muted);
                    }

                    .lesson-meta {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 6px;
                        margin-top: 8px;
                    }

                    .tag {
                        display: inline-flex;
                        align-items: center;
                        padding: 4px 9px;
                        border-radius: 999px;
                        font-size: 10px;
                        font-weight: 800;
                        background: #f3f3f3;
                        color: #555;
                    }

                    .tag-red { background: var(--red-soft); color: var(--red); }
                    .tag-dark { background: #121212; color: #fff; }

                    .footer-note {
                        margin-top: 24px;
                        background: #111;
                        color: rgba(255, 255, 255, .78);
                        border-radius: 20px;
                        padding: 18px;
                        font-size: 12px;
                        text-align: center;
                    }

                    .modal {
                        position: fixed;
                        inset: 0;
                        z-index: 50;
                        display: none;
                        align-items: center;
                        justify-content: center;
                        padding: 18px;
                        background: rgba(0, 0, 0, .72);
                    }

                    .modal.active { display: flex; }

                    .modal-card {
                        width: min(880px, 100%);
                        background: #fff;
                        border-radius: 20px;
                        overflow: hidden;
                        box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
                    }

                    .modal-head {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 14px;
                        padding: 13px 16px;
                        border-bottom: 1px solid var(--line);
                    }

                    .modal-title {
                        margin: 0;
                        font-size: 14px;
                        color: var(--black);
                        line-height: 1.7;
                    }

                    .close-modal {
                        width: 34px;
                        height: 34px;
                        border: 0;
                        border-radius: 12px;
                        background: var(--red-soft);
                        color: var(--red);
                        cursor: pointer;
                        font-size: 18px;
                        line-height: 1;
                        font-family: inherit;
                    }

                    .video-wrap { background: #000; aspect-ratio: 16 / 9; }
                    .video-wrap video {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }

                    .modal-foot {
                        padding: 12px 16px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 12px;
                        color: var(--muted);
                        font-size: 11px;
                    }

                    @media (max-width: 860px) {
                        .hero-content,
                        .intro-video,
                        .lesson,
                        .section-head {
                            grid-template-columns: 1fr;
                            display: grid;
                        }

                        .hero { padding: 24px; }
                        .hero h1 { font-size: 22px; }
                        .intro-actions, .lesson-actions { justify-content: flex-start; }
                        .lesson { gap: 12px; }
                        .lesson::before {
                            top: 14px;
                            bottom: auto;
                            height: 4px;
                            width: 42px;
                            inset-inline-start: 16px;
                        }
                        .section-title {
                            align-items: flex-start;
                            flex-direction: column;
                        }
                    }

                    @media (max-width: 560px) {
                        .app-course {
                            width: min(100% - 20px, 1100px);
                            margin: 18px auto;
                        }
                        .hero {
                            border-radius: 20px;
                            padding: 20px;
                        }
                        .hero h1 { font-size: 19px; }
                        .hero p,
                        .intro-video p,
                        .section-title p,
                        .section-head p,
                        .lesson-content p { font-size: 11px; }
                        .hero-actions,
                        .intro-actions,
                        .lesson-actions { width: 100%; }
                        .btn {
                            width: 100%;
                            min-height: 38px;
                        }
                        .mini-stats { grid-template-columns: 1fr; }
                        .intro-video h2,
                        .section-title h2,
                        .section-head h2 { font-size: 16px; }
                        .lesson-content h3 { font-size: 14px; }
                    }
            </style>
            <main class="app-course">
                <header class="hero">
                    <div class="hero-content">
                        <div>
                            <div class="eyebrow">● آموزش سیستم‌های وودمارت پلاس</div>
                            <h1>راهنمای آموزش <span>داشبورد، اتومیشن، سفارشات و ابزارهای مکمل</span></h1>
                            <p>
                                در این برگه، آموزش بخش‌های مهم وودمارت پلاس به‌صورت دسته‌بندی‌شده قرار گرفته است؛ از داشبورد و ثبت‌نام پیامکی گرفته تا برندسازی، پیگیری سفارشات، تیکت، فاکتور، زمان ارسال، ایمپورت المان‌ها و شمسی‌ساز.
                            </p>
                            <div class="hero-actions">
                                <button class="btn btn-red play-video" data-title="معرفی جامع سیستم‌های وودمارت پلاس" data-video="https://file.lordwp.site//learning-woodmartpluss/General.mp4">پخش معرفی کلی</button>
                                <a class="btn btn-light" href="#sections">مشاهده فصل‌ها</a>
                            </div>
                        </div>

                        <aside class="hero-panel">
                            <div class="hero-panel-title">
                                <h2>ساختار این آموزش</h2>
                                <span class="pill">۸ فصل + معرفی</span>
                            </div>
                            <div class="mini-stats">
                                <div class="stat">
                                    <strong>۸</strong>
                                    <span>فصل آموزشی</span>
                                </div>
                                <div class="stat">
                                    <strong>۱۳</strong>
                                    <span>ویدئوی آموزشی</span>
                                </div>
                                <div class="stat">
                                    <strong>RTL</strong>
                                    <span>طراحی فارسی</span>
                                </div>
                            </div>
                        </aside>
                    </div>
                </header>

                <section class="intro-video">
                    <div class="intro-main">
                        <div class="intro-mark">▶</div>
                        <div>
                            <h2>معرفی جامع سیستم</h2>
                            <p>قبل از شروع فصل‌ها، این ویدئو یک دید کلی از امکانات وودمارت پلاس و مسیر استفاده از سیستم در اختیار شما قرار می‌دهد.</p>
                        </div>
                    </div>
                    <div class="intro-actions">
                        <button class="btn btn-red play-video" data-title="معرفی جامع سیستم‌های وودمارت پلاس" data-video="https://file.lordwp.site//learning-woodmartpluss/General.mp4">پخش ویدئو</button>
                        <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/General.mp4">لینک مستقیم</a>
                    </div>
                </section>

                <section id="sections">
                    <div class="section-title">
                        <div>
                            <h2>فصل‌های آموزشی وودمارت پلاس</h2>
                            <p>هر فصل شامل یک یا چند قسمت آموزشی است و ویدئوها به‌صورت مستقیم داخل صفحه قابل پخش هستند.</p>
                        </div>
                        <span class="tag tag-red">۸ فصل آموزشی</span>
                    </div>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل اول: سیستم کامل داشبورد وودمارت پلاس</h2>
                                <p>آشنایی با ساختار داشبورد، ورود و ثبت‌نام پیامکی و چیدمان المنتوری پنل.</p>
                            </div>
                            <span class="tag tag-dark">۳ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۱</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش داشبورد وودمارت پلاس</h3>
                                    <p>در این بخش با بخش‌های اصلی داشبورد وودمارت پلاس و نحوه استفاده از امکانات مدیریتی آن آشنا می‌شوید.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">داشبورد</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش داشبورد وودمارت پلاس" data-video="https://file.lordwp.site//learning-woodmartpluss/Dashboard/dashboard.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/Dashboard/dashboard.mp4">لینک</a>
                                </div>
                            </article>

                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۲</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش ثبت‌نام و ورود پیامکی</h3>
                                    <p>این قسمت روش فعال‌سازی و استفاده از ورود و ثبت‌نام پیامکی را برای ساده‌سازی ورود کاربران آموزش می‌دهد.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">ورود پیامکی</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش ثبت‌نام و ورود پیامکی" data-video="https://file.lordwp.site//learning-woodmartpluss/Dashboard/2-register-mobile.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/Dashboard/2-register-mobile.mp4">لینک</a>
                                </div>
                            </article>

                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۳</strong></div></div>
                                <div class="lesson-content">
                                    <h3>چیدمان المنتوری داشبورد</h3>
                                    <p>در این آموزش، نحوه طراحی و شخصی‌سازی ظاهر پنل داشبورد با استفاده از المنتور بررسی می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">المنتور</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="چیدمان المنتوری داشبورد" data-video="https://file.lordwp.site//learning-woodmartpluss/Dashboard/3-Elementor-Panel.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/Dashboard/3-Elementor-Panel.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل دوم: برند ساز اتومیشن پیامکی</h2>
                                <p>آموزش سیستم برند ساز تبلیغاتی، برندسازی هوشمند و کمپین‌های مناسبتی برای افزایش درآمد فروشگاه.</p>
                            </div>
                            <span class="tag tag-dark">۳ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۱</strong></div></div>
                                <div class="lesson-content">
                                    <h3>برند ساز اتومیشن (افزایش درآمد فروشگاه)</h3>
                                    <p>در این قسمت با سازوکار اتومیشن تبلیغاتی و تاثیر آن بر افزایش فروش و بازگشت مشتری آشنا می‌شوید.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">اتومیشن تبلیغاتی</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="برند ساز اتومیشن (افزایش درآمد فروشگاه)" data-video="https://file.lordwp.site//learning-woodmartpluss/customerclub/1.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/customerclub/1.mp4">لینک</a>
                                </div>
                            </article>

                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۲</strong></div></div>
                                <div class="lesson-content">
                                    <h3>برندسازی براساس هوش مصنوعی</h3>
                                    <p>این آموزش به شما کمک می‌کند تا از رویکردهای هوش مصنوعی برای برندسازی و ارتباط هوشمندتر با مخاطب استفاده کنید.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">هوش مصنوعی</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="برندسازی براساس هوش مصنوعی" data-video="https://file.lordwp.site//learning-woodmartpluss/customerclub/2.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/customerclub/2.mp4">لینک</a>
                                </div>
                            </article>

                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۳</strong></div></div>
                                <div class="lesson-content">
                                    <h3>برند سازی با سبک مناسبتی</h3>
                                    <p>در این بخش، نحوه ساخت سناریوهای مناسبتی برای کمپین‌های تبلیغاتی آموزش داده می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">کمپین مناسبتی</span>
                                        <span class="tag">لینک مشترک</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="برند سازی با سبک مناسبتی" data-video="https://file.lordwp.site//learning-woodmartpluss/customerclub/2.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/customerclub/2.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل سوم: سیستم پیگیری سفارشات</h2>
                                <p>راه‌اندازی ساختار سفارشات و پیامک‌های پیگیری برای مدیریت بهتر وضعیت خرید کاربران.</p>
                            </div>
                            <span class="tag tag-dark">۲ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۱</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش راه‌اندازی سیستم سفارشات</h3>
                                    <p>در این قسمت، مسیر راه‌اندازی ساختار سفارشات و مدیریت فرایند ثبت و پیگیری سفارش‌ها توضیح داده می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">سفارشات</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش راه‌اندازی سیستم سفارشات" data-video="https://file.lordwp.site//learning-woodmartpluss/orders/1.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/orders/1.mp4">لینک</a>
                                </div>
                            </article>

                            <article class="lesson">
                                <div class="lesson-number"><div><small>قسمت</small><strong>۰۲</strong></div></div>
                                <div class="lesson-content">
                                    <h3>راه‌اندازی سیستم پیامکی پیگیری سفارشات</h3>
                                    <p>در این آموزش، نحوه ارسال پیامک‌های مرتبط با وضعیت سفارش برای اطلاع‌رسانی بهتر به مشتریان بررسی می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">پیامک سفارشات</span>
                                        <span class="tag">لینک مشترک</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="راه‌اندازی سیستم پیامکی پیگیری سفارشات" data-video="https://file.lordwp.site//learning-woodmartpluss/orders/1.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/orders/1.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل چهارم: آموزش سیستم تیکت</h2>
                                <p>یادگیری ساختار پاسخ‌گویی و مدیریت درخواست‌های کاربران از طریق سیستم تیکت.</p>
                            </div>
                            <span class="tag tag-dark">۱ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>فصل</small><strong>۰۴</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش سیستم تیکت</h3>
                                    <p>در این ویدئو نحوه استفاده از سیستم تیکت برای دریافت، مدیریت و پاسخ به درخواست‌های مشتریان آموزش داده می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">پشتیبانی</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش سیستم تیکت" data-video="https://file.lordwp.site//learning-woodmartpluss/Ticket.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/Ticket.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل پنجم: آموزش سیستم فاکتور</h2>
                                <p>مدیریت صدور و نمایش فاکتور برای سفارشات کاربران در فروشگاه.</p>
                            </div>
                            <span class="tag tag-dark">۱ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>فصل</small><strong>۰۵</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش سیستم فاکتور</h3>
                                    <p>این بخش فرآیند کار با سیستم فاکتور، نمایش جزئیات سفارش و ساختار صدور فاکتور را توضیح می‌دهد.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">فاکتور</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش سیستم فاکتور" data-video="https://file.lordwp.site//learning-woodmartpluss/Factornew.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/Factornew.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل ششم: آموزش سیستم زمان ارسال کالا</h2>
                                <p>آشنایی با تنظیم زمان‌بندی ارسال کالا و نمایش زمان مناسب برای تحویل سفارشات.</p>
                            </div>
                            <span class="tag tag-dark">۱ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>فصل</small><strong>۰۶</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش سیستم زمان ارسال کالا</h3>
                                    <p>در این آموزش، نحوه تنظیم زمان‌های ارسال و استفاده از سیستم زمان‌بندی برای ارسال سفارش‌ها بررسی می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">ارسال کالا</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش سیستم زمان ارسال کالا" data-video="https://file.lordwp.site//learning-woodmartpluss/SendTime.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/SendTime.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل هفتم: آموزش ایمپورت المان‌های آماده المنتوری</h2>
                                <p>وارد کردن المان‌های آماده برای طراحی سریع‌تر صفحات با کمک المنتور.</p>
                            </div>
                            <span class="tag tag-dark">۱ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>فصل</small><strong>۰۷</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش ایمپورت المان‌های آماده المنتوری</h3>
                                    <p>این قسمت روش استفاده از المان‌های آماده و وارد کردن آن‌ها به صفحات المنتوری را توضیح می‌دهد.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">ایمپورت المنتور</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش ایمپورت المان‌های آماده المنتوری" data-video="https://file.lordwp.site//learning-woodmartpluss/import.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/import.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>

                    <section class="section-block">
                        <div class="section-head">
                            <div>
                                <h2>فصل هشتم: آموزش سیستم شمسی‌ساز (ووکامرس فارسی)</h2>
                                <p>آموزش استفاده از سیستم شمسی‌ساز برای هماهنگی بهتر فروشگاه با ساختار فارسی و ووکامرس.</p>
                            </div>
                            <span class="tag tag-dark">۱ قسمت</span>
                        </div>
                        <div class="course-list">
                            <article class="lesson">
                                <div class="lesson-number"><div><small>فصل</small><strong>۰۸</strong></div></div>
                                <div class="lesson-content">
                                    <h3>آموزش سیستم شمسی‌ساز (ووکامرس فارسی)</h3>
                                    <p>در این ویدئو نحوه استفاده از قابلیت‌های شمسی‌سازی و هماهنگ‌سازی بهتر تاریخ‌ها و ساختار فارسی آموزش داده می‌شود.</p>
                                    <div class="lesson-meta">
                                        <span class="tag tag-red">شمسی‌ساز</span>
                                        <span class="tag">ویدئو آموزشی</span>
                                    </div>
                                </div>
                                <div class="lesson-actions">
                                    <button class="btn btn-dark play-video" data-title="آموزش سیستم شمسی‌ساز (ووکامرس فارسی)" data-video="https://file.lordwp.site//learning-woodmartpluss/persianwoo.mp4">پخش</button>
                                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://file.lordwp.site//learning-woodmartpluss/persianwoo.mp4">لینک</a>
                                </div>
                            </article>
                        </div>
                    </section>
                </section>

                <div class="footer-note">
                سیستم کامل آموزش قالب وودمارت که توسط تیم توسعه وردپرس جهت رضایت کاربران ارائه شده است
                </div>
            </main>

            <div class="modal" id="videoModal" aria-hidden="true">
                <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
                    <div class="modal-head">
                        <h3 class="modal-title" id="modalTitle">پخش ویدئو</h3>
                        <button class="close-modal" type="button" aria-label="بستن">×</button>
                    </div>
                    <div class="video-wrap">
                        <video id="courseVideo" controls playsinline preload="metadata"></video>
                    </div>
                    <div class="modal-foot">
                        <span>برای توقف کامل ویدئو، پنجره را ببندید.</span>
                        <span>Woodmart Plus Learning</span>
                    </div>
                </div>
            </div>

            <script>
                (function () {
                    const modal = document.getElementById('videoModal');
                    const video = document.getElementById('courseVideo');
                    const title = document.getElementById('modalTitle');
                    const closeBtn = modal.querySelector('.close-modal');
                    const playButtons = document.querySelectorAll('.play-video');

                    function openModal(videoUrl, videoTitle) {
                        title.textContent = videoTitle || 'پخش ویدئو';
                        video.src = videoUrl;
                        modal.classList.add('active');
                        modal.setAttribute('aria-hidden', 'false');
                        document.body.style.overflow = 'hidden';
                        video.play().catch(function () {});
                    }

                    function closeModal() {
                        video.pause();
                        video.removeAttribute('src');
                        video.load();
                        modal.classList.remove('active');
                        modal.setAttribute('aria-hidden', 'true');
                        document.body.style.overflow = '';
                    }

                    playButtons.forEach(function (button) {
                        button.addEventListener('click', function () {
                            openModal(button.dataset.video, button.dataset.title);
                        });
                    });

                    closeBtn.addEventListener('click', closeModal);

                    modal.addEventListener('click', function (event) {
                        if (event.target === modal) {
                            closeModal();
                        }
                    });

                    document.addEventListener('keydown', function (event) {
                        if (event.key === 'Escape' && modal.classList.contains('active')) {
                            closeModal();
                        }
                    });
                })();
            </script>
        <?php
    }
    public function page_content_sms(){
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>
            <style>
                @font-face {
                    font-family: YekanBakhFaNum;
                    font-style: normal;
                    font-weight: normal;
                    src: url('<?php echo $font_url; ?>'),   
                            
                }
                :root {
                --red: #b40016;
                --red-dark: #7d0010;
                --red-soft: #fff1f3;
                --black: #111111;
                --dark: #1d1d1f;
                --text: #2b2b2b;
                --muted: #737373;
                --line: #ececec;
                --white: #ffffff;
                --bg: #f7f7f8;
                --radius-lg: 24px;
                --radius-md: 18px;
                --shadow: 0 18px 45px rgba(17, 17, 17, .08);
                --shadow-soft: 0 12px 28px rgba(17, 17, 17, .07);
                }

                .hero-content h1,.hero-content h2{
                    color:white !important;
                }
                * { box-sizing: border-box; }
                html { scroll-behavior: smooth; }

                body {
                margin: 0;
                font-family: 'YekanBakhFaNum' !important;
                background:
                    radial-gradient(circle at top right, rgba(180, 0, 22, .10), transparent 30%),
                    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
                color: var(--text);
                line-height: 1.9;
                }

                a { color: inherit; text-decoration: none; }
                button, a { -webkit-tap-highlight-color: transparent; }

                .page {
                width: min(1120px, calc(100% - 32px));
                margin: 34px auto;
                }

                .hero {
                position: relative;
                overflow: hidden;
                border-radius: var(--radius-lg);
                background: linear-gradient(135deg, var(--black) 0%, #242424 56%, var(--red-dark) 100%);
                color: var(--white);
                padding: 34px;
                box-shadow: var(--shadow);
                }

                .hero::before {
                content: "";
                position: absolute;
                inset-inline-start: -80px;
                top: -90px;
                width: 240px;
                height: 240px;
                border-radius: 999px;
                background: rgba(255,255,255,.07);
                }

                .hero::after {
                content: "";
                position: absolute;
                inset-inline-end: -50px;
                bottom: -65px;
                width: 190px;
                height: 190px;
                border-radius: 999px;
                border: 36px solid rgba(255,255,255,.06);
                }

                .hero-content {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: 1.1fr .9fr;
                gap: 28px;
                align-items: center;
                }

                .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 7px 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.10);
                color: #ffe9ec;
                font-size: 12px;
                font-weight: 700;
                margin-bottom: 14px;
                border: 1px solid rgba(255,255,255,.12);
                }

                .hero h1 {
                margin: 0;
                font-size: 25px;
                line-height: 1.65;
                letter-spacing: -.4px;
                }

                .hero h1 span { color: #ffccd3; }

                .hero p {
                margin: 12px 0 0;
                color: rgba(255,255,255,.78);
                font-size: 13px;
                max-width: 650px;
                }

                .hero-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 22px;
                }

                .btn {
                border: 0;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 40px;
                padding: 9px 15px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 800;
                transition: .2s ease;
                white-space: nowrap;
                font-family: inherit;
                }

                .btn-red {
                background: var(--red);
                color: #fff;
                box-shadow: 0 10px 22px rgba(180, 0, 22, .24);
                }

                .btn-red:hover { background: #cf001a; transform: translateY(-1px); }

                .btn-light {
                background: rgba(255,255,255,.12);
                color: #fff;
                border: 1px solid rgba(255,255,255,.18);
                }

                .btn-light:hover { background: rgba(255,255,255,.18); }
                .btn-dark { background: var(--black); color: #fff; }

                .btn-outline {
                background: #fff;
                color: var(--black);
                border: 1px solid var(--line);
                }

                .btn-outline:hover {
                border-color: rgba(180,0,22,.35);
                color: var(--red);
                }

                .hero-panel {
                background: rgba(255,255,255,.09);
                border: 1px solid rgba(255,255,255,.13);
                border-radius: 20px;
                padding: 18px;
                backdrop-filter: blur(10px);
                }

                .hero-panel-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 14px;
                }

                .hero-panel-title h2 {
                font-size: 15px;
                margin: 0;
                }

                .pill {
                display: inline-flex;
                padding: 5px 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.12);
                color: #fff;
                font-size: 11px;
                font-weight: 700;
                }

                .mini-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                }

                .stat {
                background: rgba(255,255,255,.10);
                border-radius: 16px;
                padding: 12px;
                text-align: center;
                }

                .stat strong {
                display: block;
                font-size: 18px;
                line-height: 1.2;
                color: #fff;
                }

                .stat span {
                display: block;
                margin-top: 4px;
                font-size: 11px;
                color: rgba(255,255,255,.70);
                }

                .intro-video {
                margin-top: 22px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-soft);
                padding: 18px;
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 18px;
                align-items: center;
                }

                .intro-video h2,
                .section-title h2 {
                font-size: 18px;
                line-height: 1.6;
                margin: 0;
                color: var(--black);
                }

                .intro-video p,
                .section-title p {
                margin: 5px 0 0;
                font-size: 12px;
                color: var(--muted);
                }

                .intro-mark {
                width: 48px;
                height: 48px;
                min-width: 48px;
                border-radius: 16px;
                background: var(--red-soft);
                color: var(--red);
                display: grid;
                place-items: center;
                font-size: 19px;
                font-weight: 900;
                border: 1px solid rgba(180,0,22,.10);
                }

                .intro-main {
                display: flex;
                align-items: center;
                gap: 14px;
                }

                .intro-actions,
                .card-actions {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-end;
                }

                .section-title {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 16px;
                margin: 30px 0 14px;
                }

                .tag {
                display: inline-flex;
                align-items: center;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 800;
                background: #f3f3f3;
                color: #555;
                }

                .tag-red {
                background: var(--red-soft);
                color: var(--red);
                }

                .tutorial-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 16px;
                }

                .tutorial-card {
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 8px 22px rgba(17,17,17,.04);
                transition: .22s ease;
                display: flex;
                flex-direction: column;
                }

                .tutorial-card:hover {
                transform: translateY(-3px);
                border-color: rgba(180,0,22,.22);
                box-shadow: var(--shadow-soft);
                }

                .tutorial-cover {
                position: relative;
                display: block;
                aspect-ratio: 16 / 10;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border-bottom: 1px solid var(--line);
                overflow: hidden;
                }

                .tutorial-cover::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.20) 100%);
                transition: .2s ease;
                }

                .tutorial-card:hover .tutorial-cover::before {
                background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.28) 100%);
                }

                .play-badge {
                position: absolute;
                inset-inline-start: 14px;
                bottom: 14px;
                width: 54px;
                height: 54px;
                border-radius: 18px;
                display: grid;
                place-items: center;
                background: rgba(17,17,17,.72);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255,255,255,.14);
                box-shadow: 0 10px 18px rgba(0,0,0,.20);
                transition: .2s ease;
                }

                .play-badge::before {
                content: "▶";
                color: #fff;
                font-size: 18px;
                margin-inline-start: 3px;
                }

                .tutorial-card:hover .play-badge {
                background: rgba(180,0,22,.85);
                transform: scale(1.04);
                }

                .tutorial-body {
                padding: 14px;
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
                }

                .tutorial-body h3 {
                margin: 0;
                font-size: 14px;
                line-height: 1.8;
                color: var(--black);
                min-height: 52px;
                }

                .tutorial-body p {
                margin: 0;
                font-size: 11px;
                color: var(--muted);
                line-height: 1.9;
                }

                .footer-note {
                margin-top: 24px;
                background: #111;
                color: rgba(255,255,255,.78);
                border-radius: 20px;
                padding: 18px;
                font-size: 12px;
                text-align: center;
                }

                .modal {
                position: fixed;
                inset: 0;
                z-index: 50;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(0,0,0,.72);
                }

                .modal.active { display: flex; }

                .modal-card {
                width: min(900px, 100%);
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 30px 80px rgba(0,0,0,.28);
                }

                .modal-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding: 13px 16px;
                border-bottom: 1px solid var(--line);
                }

                .modal-title {
                margin: 0;
                font-size: 14px;
                color: var(--black);
                line-height: 1.7;
                }

                .close-modal {
                width: 34px;
                height: 34px;
                border: 0;
                border-radius: 12px;
                background: var(--red-soft);
                color: var(--red);
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                font-family: inherit;
                }

                .video-wrap {
                background: #000;
                aspect-ratio: 16 / 9;
                }

                .video-wrap video {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                }

                .modal-foot {
                padding: 12px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                color: var(--muted);
                font-size: 11px;
                }

                @media (max-width: 1024px) {
                .tutorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                }

                @media (max-width: 860px) {
                .hero-content,
                .intro-video { grid-template-columns: 1fr; }

                .hero { padding: 24px; }
                .hero h1 { font-size: 22px; }
                .intro-actions, .card-actions { justify-content: flex-start; }
                .section-title {
                    align-items: flex-start;
                    flex-direction: column;
                }
                .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                }

                @media (max-width: 560px) {
                .page {
                    width: min(100% - 20px, 1120px);
                    margin: 18px auto;
                }

                .hero {
                    border-radius: 20px;
                    padding: 20px;
                }

                .hero h1 { font-size: 19px; }
                .hero p,
                .intro-video p,
                .section-title p,
                .tutorial-body p { font-size: 11px; }

                .hero-actions,
                .intro-actions,
                .card-actions { width: 100%; }

                .btn {
                    width: 100%;
                    min-height: 38px;
                }

                .mini-stats { grid-template-columns: 1fr; }
                .intro-video h2,
                .section-title h2 { font-size: 16px; }
                .tutorial-grid { grid-template-columns: 1fr; }
                .tutorial-body h3 { font-size: 14px; min-height: auto; }
                }
            </style>
            <main class="page">
            <header class="hero">
                <div class="hero-content">
                    <div>
                        <div class="eyebrow">● آموزش سیستم پیامکی و اتومیشن</div>
                        <h1>آموزش کامل <span>سیستم پیامکی، اتومیشن و اطلاع‌رسانی</span></h1>
                        <p>
                        در این برگه، آموزش‌های مربوط به سیستم پیامکی وودمارت پلاس، اتومیشن فروش، اطلاع‌رسانی سفارشات، تیکت‌ها و قابلیت‌های هوشمند، با همان تمپلیت قبلی و در قالبی یکدست و حرفه‌ای قرار گرفته‌اند.
                        </p>
                        <div class="hero-actions">
                        <button class="btn btn-red play-video" data-title="معرفی کامل سیستم پیامکی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/introductions.mp4">پخش معرفی کلی</button>
                        <a class="btn btn-light" href="#tutorials">مشاهده آموزش‌ها</a>
                        </div>
                    </div>
                    <aside class="hero-panel">
                        <div class="hero-panel-title">
                        <h2>ساختار این برگه</h2>
                        <span class="pill">۸ آموزش ویدئویی</span>
                        </div>
                        <div class="mini-stats">
                        <div class="stat">
                            <strong>۰۸</strong>
                            <span>ویدئو آموزشی</span>
                        </div>
                        <div class="stat">
                            <strong>۱</strong>
                            <span>معرفی جامع</span>
                        </div>
                        <div class="stat">
                            <strong>RTL</strong>
                            <span>طراحی فارسی</span>
                        </div>
                        </div>
                    </aside>
                </div>
            </header>
            <section class="intro-video">
                <div class="intro-main">
                    <div class="intro-mark">▶</div>
                    <div>
                        <h2>معرفی جامع سیستم پیامکی</h2>
                        <p>اگر می‌خواهی اول یک دید کلی از ساختار سیستم پیامکی و امکانات آن داشته باشی، این ویدئو بهترین نقطه شروع است.</p>
                    </div>
                </div>
                <div class="intro-actions">
                    <button class="btn btn-red play-video" data-title="معرفی کامل سیستم پیامکی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/introductions.mp4">پخش ویدئو</button>
                    <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/introductions.mp4">لینک مستقیم</a>
                </div>
            </section>
            <section id="tutorials">
                <div class="section-title">
                    <div>
                        <h2>ویدئوهای آموزشی</h2>
                        <p>برای هر آموزش، پوستر اختصاصی، دکمه پخش داخل صفحه و لینک مستقیم ویدئو قرار داده شده است.</p>
                    </div>
                    <span class="tag tag-red">۸ آموزش</span>
                </div>
                <div class="tutorial-grid">
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="معرفی کامل سیستم پیامکی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/introductions.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/onlinepayamak.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">شروع آموزش</span>
                        <h3>معرفی کامل سیستم پیامکی</h3>
                        <p>معرفی کلی امکانات سیستم پیامکی و آشنایی با ساختار اصلی این بخش در وودمارت پلاس.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="معرفی کامل سیستم پیامکی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/introductions.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/introductions.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="سیستم بزرگ اتومیشن 2X شاپ" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/2shopcamp.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/2shopcamp.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">اتومیشن فروش</span>
                        <h3>سیستم بزرگ اتومیشن 2X شاپ</h3>
                        <p>آشنایی با ساختار اتومیشن فروش و سناریوهای کاربردی برای رشد فروشگاه با کمک کمپین‌های هوشمند.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="سیستم بزرگ اتومیشن 2X شاپ" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/2shopcamp.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/2shopcamp.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="فروش مناسبتی اتوماتیک" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/2xshop.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/2xshop.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">کمپین مناسبتی</span>
                        <h3>فروش مناسبتی اتوماتیک</h3>
                        <p>آموزش اجرای فروش‌های مناسبتی به‌صورت خودکار و استفاده از فرصت‌های زمانی برای افزایش نرخ تبدیل.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="فروش مناسبتی اتوماتیک" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/2xshop.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/2xshop.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="سیستم فروش با هوش مصنوعی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/aishop.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/aishop.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">هوش مصنوعی</span>
                        <h3>سیستم فروش با هوش مصنوعی</h3>
                        <p>بررسی راهکارهای هوشمند برای شخصی‌سازی ارتباط با مشتری و بهینه‌سازی فرایند فروش با کمک AI.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="سیستم فروش با هوش مصنوعی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/aishop.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/aishop.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="ثبت نام در آنلاین پیامک ورود پیامکی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/registerlogin.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/registerlogin.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">ورود پیامکی</span>
                        <h3>ثبت نام در آنلاین پیامک ورود پیامکی</h3>
                        <p>آموزش اتصال و راه‌اندازی ثبت‌نام و ورود پیامکی برای ساده‌تر شدن ورود کاربران به فروشگاه.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="ثبت نام در آنلاین پیامک ورود پیامکی" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/registerlogin.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/registerlogin.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="اطلاع رسانی پیامکی تیکت" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/ticketmessage.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/ticketmessage.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">اطلاع‌رسانی تیکت</span>
                        <h3>اطلاع رسانی پیامکی تیکت</h3>
                        <p>نمایش نحوه ارسال پیامک‌های مرتبط با تیکت‌ها و اطلاع‌رسانی سریع‌تر به کاربران در فرایند پشتیبانی.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="اطلاع رسانی پیامکی تیکت" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/ticketmessage.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/ticketmessage.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="اطلاع رسانی پیامکی سفارشات" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/orders.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/orders.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">اطلاع‌رسانی سفارشات</span>
                        <h3>اطلاع رسانی پیامکی سفارشات</h3>
                        <p>آموزش ارسال پیامک‌های مربوط به وضعیت سفارش برای اطلاع‌رسانی بهتر و افزایش رضایت مشتریان.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="اطلاع رسانی پیامکی سفارشات" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/orders.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/orders.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                    <article class="tutorial-card">
                        <button class="tutorial-cover play-video" data-title="اطلاع رسانی پیامکی تیکت ها" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/ordermessage.mp4" style="background-image:url('https://newdemoes.aramis-co.ir/woodmart-update/pic/learning/ordermessage.png')">
                        <span class="play-badge" aria-hidden="true"></span>
                        </button>
                        <div class="tutorial-body">
                        <span class="tag tag-red">اعلان‌های تکمیلی</span>
                        <h3>اطلاع رسانی پیامکی تیکت ها</h3>
                        <p>یک آموزش تکمیلی برای پیاده‌سازی اعلان‌های پیامکی و یکپارچه‌سازی بهتر فرایند اطلاع‌رسانی در سایت.</p>
                        <div class="card-actions">
                            <button class="btn btn-dark play-video" data-title="اطلاع رسانی پیامکی تیکت ها" data-video="https://newdemoes.aramis-co.ir/woodmart-update/video/ordermessage.mp4">پخش</button>
                            <a class="btn btn-outline" target="_blank" rel="noopener" href="https://newdemoes.aramis-co.ir/woodmart-update/video/ordermessage.mp4">لینک</a>
                        </div>
                        </div>
                    </article>
                </div>
            </section>
            <div class="footer-note">
                سیستم کامل آموزش قالب وودمارت که توسط تیم توسعه وردپرس جهت رضایت کاربران ارائه شده است
            </div>
            </main>
            <div class="modal" id="videoModal" aria-hidden="true">
            <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
                <div class="modal-head">
                    <h3 class="modal-title" id="modalTitle">پخش ویدئو</h3>
                    <button class="close-modal" type="button" aria-label="بستن">×</button>
                </div>
                <div class="video-wrap">
                    <video id="courseVideo" controls playsinline preload="metadata"></video>
                </div>
                <div class="modal-foot">
                    <span>برای توقف کامل ویدئو، پنجره را ببندید.</span>
                    <span>Woodmart Plus SMS Learning</span>
                </div>
            </div>
            </div>
            <script>
            (function () {
                const modal = document.getElementById('videoModal');
                const video = document.getElementById('courseVideo');
                const title = document.getElementById('modalTitle');
                const closeBtn = modal.querySelector('.close-modal');
                const playButtons = document.querySelectorAll('.play-video');
            
                function openModal(videoUrl, videoTitle) {
                title.textContent = videoTitle || 'پخش ویدئو';
                video.src = videoUrl;
                modal.classList.add('active');
                modal.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
                video.play().catch(function () {});
                }
            
                function closeModal() {
                video.pause();
                video.removeAttribute('src');
                video.load();
                modal.classList.remove('active');
                modal.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
                }
            
                playButtons.forEach(function (button) {
                button.addEventListener('click', function () {
                    openModal(button.dataset.video, button.dataset.title);
                });
                });
            
                closeBtn.addEventListener('click', closeModal);
            
                modal.addEventListener('click', function (event) {
                if (event.target === modal) closeModal();
                });
            
                document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape' && modal.classList.contains('active')) closeModal();
                });
            })();
            </script>
        <?php
    }
    public function page_content()
    {
        $font_url = get_stylesheet_directory_uri() . '/font/yekanbakhfa/woff/YekanBakhFaNum-Regular.woff';
        ?>
            <style>
    @font-face {
        font-family: YekanBakhFaNum;
        font-style: normal;
        font-weight: normal;
        src: url('<?php echo $font_url; ?>'),   
                
    }
    body.rtl, html[dir=rtl],.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6{
        font-family: 'YekanBakhFaNum' !important;
    }
    .dashicons-video-alt3
    {
    margin-top:3px;
    }

    :root{
        --primary:#ff2d55;
        --primary-2:#ff5f7e;
        --dark:#141414;
        --dark-2:#1d1d1d;
        --card:#ffffff;
        --text:#1f2937;
        --muted:#6b7280;
        --line:#e5e7eb;
        --green:#22c55e;
        --blue:#2563eb;
        --shadow:0 18px 40px rgba(0,0,0,.12);
        --radius:22px;
    }

     /* *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    } */

    body.toplevel_page_guid_wdplus{

        background:
            radial-gradient(circle at top, rgba(255,45,85,.12), transparent 30%),
            linear-gradient(180deg, #101010 0%, #141414 100%);
        color:#fff;
        min-height:100vh;
    } 

    a{
        text-decoration:none;
        color:inherit;
    }

    .wrapperwd{
        max-width:1400px;
        margin:auto;
        padding:24px;
    }

    /* herowd */
    .herowd{
        position:relative;
        overflow:hidden;
        border-radius:32px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7));
        min-height:420px;
        padding:40px 34px;
        box-shadow:var(--shadow);
        border:1px solid rgba(255,255,255,.08);
    }

    .herowd::before{
        content:"";
        position:absolute;
        inset:0;
        background:
            radial-gradient(circle at 20% 20%, rgba(255,45,85,.22), transparent 22%),
            radial-gradient(circle at 80% 20%, rgba(255,255,255,.07), transparent 18%),
            radial-gradient(circle at 50% 80%, rgba(34,197,94,.12), transparent 20%);
        pointer-events:none;
    }

    .herowd-inner{
        position:relative;
        z-index:2;
        display:grid;
        grid-template-columns: 1.1fr .9fr;
        gap:24px;
        align-items:center;
        min-height:340px;
    }

    .herowd-badge{
        display:inline-flex;
        align-items:center;
        gap:10px;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(10px);
        color:#fff;
        padding:10px 16px;
        border-radius:999px;
        font-size:14px;
        margin-bottom:18px;
        width:max-content;
    }

    .herowd-title{
        font-size:clamp(30px, 5vw, 58px);
        font-weight:900;
        line-height:1.2;
    color:white;
            margin-bottom:16px;
            text-shadow:0 8px 30px rgba(0,0,0,.55);
        }

    .herowd-title span{
        color:#fff;
        text-shadow:
            0 0 10px rgba(255,45,85,.35),
            0 0 24px rgba(255,45,85,.55);
        -webkit-text-stroke: 1px rgba(255,255,255,.06);
    }

    .herowd-subtitle{
        font-size:18px;
        line-height:2;
        color:rgba(255,255,255,.92);
        max-width:760px;
    }

    .herowd-actions{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:24px;
    }

    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:14px 20px;
        border-radius:16px;
        font-weight:700;
        transition:.25s;
        border:none;
        cursor:pointer;
        font-size:15px;
    }

    .btn-primary{
        background:linear-gradient(135deg, var(--primary), var(--primary-2));
        color:#fff;
        box-shadow:0 12px 25px rgba(255,45,85,.28);
    }

    .btn-primary:hover{
        transform:translateY(-2px);
color:white;
    }
.btn-dark:hover
{
color:white;
}
    .btn-dark{
        background:rgba(255,255,255,.09);
        border:1px solid rgba(255,255,255,.14);
        color:#fff;
        backdrop-filter: blur(10px);
    }

    .herowd-panel{
        background:rgba(17,17,17,.55);
        border:1px solid rgba(255,255,255,.1);
        border-radius:28px;
        padding:24px;
        backdrop-filter: blur(12px);
        box-shadow:0 15px 35px rgba(0,0,0,.2);
    }

    .herowd-panel h3{
        font-size:20px;
        margin-bottom:14px;
color:white;
    }

    .herowd-panel p{
        color:rgba(255,255,255,.8);
        line-height:2;
        font-size:15px;
        margin-bottom:18px;
    }

    .panel-list{
        display:grid;
        gap:10px;
    }

    .panel-item{
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
        border-radius:14px;
        padding:12px 14px;
        color:#fff;
        font-size:14px;
    }

    /* INFO BOX */
    .info-box{
        margin-top:24px;
        background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,45,85,.12));
        border:1px solid rgba(255,255,255,.08);
        border-radius:26px;
        padding:22px;
        box-shadow:var(--shadow);
    }

    .info-box h2{
        font-size:22px;
        margin-bottom:10px;
        color:#fff;
    }

    .info-box p{
        color:rgba(255,255,255,.82);
        line-height:2;
        margin-bottom:12px;
    }

    .info-list{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:12px;
        margin-top:14px;
    }

    .info-item{
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.08);
        border-radius:16px;
        padding:14px 16px;
        color:#fff;
        line-height:1.9;
        font-size:14px;
    }

    .full-course-box{
        margin-top:18px;
        background:#fff;
        color:var(--text);
        border-radius:24px;
        padding:22px;
        box-shadow:var(--shadow);
        display:flex;
        justify-content:space-between;
        gap:18px;
        align-items:center;
        flex-wrap:wrap;
    }

    .full-course-box h3{
        font-size:20px;
        margin-bottom:8px;
        color:#111827;
    }

    .full-course-box p{
        color:var(--muted);
        line-height:1.9;
        max-width:900px;
    }

    .full-course-actions{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }

    /* sectionwd */
    .sectionwd{
        margin-top:28px;
    }

    .sectionwd-header{
        display:flex;
        justify-content:space-between;
        align-items:end;
        gap:16px;
        flex-wrap:wrap;
        margin-bottom:18px;
    }

    .sectionwd-header h2{
        font-size:28px;
        color:#fff;
    }

    .sectionwd-header p{
        color:rgba(255,255,255,.72);
        line-height:1.8;
    }

    /* GRID */
    .grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:22px;
    }

    .lesson-card{
        background:#fff;
        color:var(--text);
        border-radius:26px;
        overflow:hidden;
        box-shadow:var(--shadow);
        cursor:pointer;
        transition:.3s ease;
        border:1px solid #f1f5f9;
        position:relative;
    }

    .lesson-card:hover{
        transform:translateY(-7px);
    }

    .thumb{
        position:relative;
        height:190px;
        background:#111;
        overflow:hidden;
background-size: cover;
    background-position: center;
    background-image: url(https://aramis-co.ir/Learning/map-learn/0-1.jpg);
    }

    .thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transition:.4s ease;
    }

    .lesson-card:hover .thumb img{
        transform:scale(1.04);
    }

    .play{
        position:absolute;
        inset:auto 16px 16px auto;
        width:58px;
        height:58px;
        border-radius:18px;
        background:rgba(255,255,255,.92);
        color:var(--primary);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:22px;
        font-weight:900;
        box-shadow:0 12px 22px rgba(0,0,0,.22);
        border:1px solid rgba(255,255,255,.65);
    }

    .card-body{
        padding:20px;
    }

    .card-top{
        display:flex;
        justify-content:space-between;
        gap:10px;
        align-items:center;
        margin-bottom:10px;
    }

    .tag{
        display:inline-flex;
        align-items:center;
        gap:8px;
        border-radius:999px;
        padding:8px 12px;
        font-size:12px;
        font-weight:700;
        background:#f3f4f6;
        color:#374151;
    }

    .tag.red{
        background:rgba(255,45,85,.1);
        color:var(--primary);
    }

    .tag.green{
        background:rgba(34,197,94,.12);
        color:#16a34a;
    }

    .card-title{
        font-size:16px;
        font-weight:800;
        margin-bottom:10px;
        color:#111827;
        line-height:1.5;
    }

    .card-desc{
        color:var(--muted);
        line-height:2;
        font-size:14px;
        margin-bottom:16px;
        min-height:60px;
    }

    .card-meta{
        display:flex;
        justify-content:space-between;
        gap:10px;
        align-items:center;
        flex-wrap:wrap;
        border-top:1px solid var(--line);
        padding-top:14px;
    }

    .meta{
        font-size:13px;
        color:#4b5563;
        display:flex;
        gap:8px;
        align-items:center;
    }

    /* modalwd */
    .modalwd{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.78);
        display:none;
        align-items:center;
        justify-content:center;
        padding:20px;
        z-index:9999;
    }

    .modalwd.active{
        display:flex;
    }

    .modalwd-content{
        width:80%;
        max-width:750px;
        background:#fff;
        border-radius:28px;
        overflow:hidden;
        box-shadow:0 25px 60px rgba(0,0,0,.3);
        animation:pop .25s ease;
    }

    @keyframes pop{
        from{transform:scale(.96); opacity:0;}
        to{transform:scale(1); opacity:1;}
    }

    .modalwd-head{
        position:relative;
        background:#0f172a;
        color:#fff;
        padding:20px 22px;
    }

    .close-btn{
        position:absolute;
        left:16px;
        top:16px;
        width:42px;
        height:42px;
        border:none;
        border-radius:14px;
        background:rgba(255,255,255,.12);
        color:#fff;
        cursor:pointer;
        font-size:20px;
    }

    .modalwd-head h3{
        font-size:22px;
        margin-bottom:8px;
        padding-left:54px;
color:white;
    }

    .modalwd-head p{
        color:rgba(255,255,255,.8);
        line-height:1.9;
        padding-left:54px;
    }

    .video-wrap{
        background:#000;
    }

    .video-wrap video{
        width:100%;
        display:block;
        max-height:520px;
    }

    .modalwd-body{
        padding:22px;
        color:var(--text);
    }

    .modalwd-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:12px;
        margin-top:16px;
    }

    .modalwd-item{
        background:#f8fafc;
        border:1px solid #e5e7eb;
        border-radius:16px;
        padding:14px 16px;
        color:#374151;
        line-height:1.9;
    }

    .note{
        margin-top:16px;
        background:linear-gradient(135deg, rgba(255,45,85,.08), rgba(37,99,235,.08));
        border:1px solid #eef2ff;
        padding:16px;
        border-radius:18px;
        line-height:2;
        color:#374151;
    }

    .footerwd{
        text-align:center;
        color:rgba(255,255,255,.6);
        font-size:14px;
        margin:28px 0 8px;
        line-height:1.9;
    }

    @media (max-width: 900px){
        .herowd-inner{
            grid-template-columns:1fr;
        }
        .herowd{
            min-height:auto;
        }
        .herowd-title{
            font-size:38px;
color:white;
        }
    }

    @media (max-width: 600px){
        .wrapperwd{
            padding:14px;
        }
        .herowd{
            padding:20px 18px;
            border-radius:24px;
        }
        .herowd-subtitle{
            font-size:15px;
        }
        .sectionwd-header h2{
            font-size:23px;
        }
        .card-title{
            font-size:18px;
        }
    }
</style>

<div class="wrapperwd">

    <!-- herowd -->
    <section class="herowd">
        <div class="herowd-inner">
            <div>
                <div class="herowd-badge">✨ نقشه راه طراحی با وودمارت پلاس</div>
                <h1 class="herowd-title">نقشه راه  <span>طراحی </span></h1>
                <p class="herowd-subtitle">
                    این آموزش فقط یک <strong>مینی‌دوره ساده</strong> برای آشنایی سریع با بخش‌های اصلی قالب است.
                    اگر قصد یادگیری کامل، نصب، تنظیمات، هدرساز، فروشگاه‌ساز و شخصی‌سازی حرفه‌ای را داری،
                    می‌توانی از لینک آموزش کامل قالب استفاده کنی.
                </p>

                <div class="herowd-actions">
                    <a href="#lessons" class="btn btn-primary">مشاهده جلسات مینی‌دوره</a>
                    <a href="https://www.rtl-theme.com/blog/woodmart-tutorial/" target="_blank" class="btn btn-dark">
                        رفتن به آموزش کامل قالب
                    </a>
                </div>
            </div>

            <aside class="herowd-panel">
                <h3>آموزش سریع سفارشی سازی وودمارت</h3>
                <p>
                   این بخش برای افراد مبتدی طراحی شده تا چنانچه هیچ پیشنیازی در استفاده از قالب ندارند بتوانند در کمترین زمان به نتیجه برسند 
                </p>
                <div class="panel-list">
                    <div class="panel-item">• معرفی سریع ساختار قالب</div>
                    <div class="panel-item">• سوالات متداول کاربران در رابطه با قالب </div>
                    <div class="panel-item">•آموزش نکات کلیدی و مهم </div>
                    <div class="panel-item">• آشنایی با مفهوم های پایه و مختصر</div>
                </div>
            </aside>
        </div>
    </section>

    <!-- MINI COURSE INFO -->
    

    <!-- LESSONS -->
    <section class="sectionwd" id="lessons">
        <div class="sectionwd-header">
            <div>
                <h2>جلسات مینی‌دوره</h2>
                <p>برای دیدن هر جلسه روی کارت آن کلیک کن تا ویدیو و توضیحاتش باز شود.</p>
            </div>
        </div>

        <div class="grid">

           <!-- 1 -->
<article class="lesson-card"
    data-title="معرفی نقشه راه طراحی"
    data-description="در این جلسه با مسیر کامل طراحی سایت فروشگاهی با قالب وودمارت آشنا می‌شوید و نقشه راه دوره بررسی می‌شود."
    data-duration="12 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/introduction/introduction.mp4"
    data-full-course="در آموزش کامل، تمامی مراحل طراحی فروشگاه اینترنتی، انتخاب ساختار مناسب و تکنیک‌های حرفه‌ای بازار کار آموزش داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="نقشه راه طراحی" />
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 1</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">معرفی نقشه راه طراحی</h3>

        <p class="card-desc">
            آشنایی با مسیر طراحی فروشگاه اینترنتی حرفه‌ای با قالب وودمارت.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 2 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 2 -->
<article class="lesson-card"
    data-title="آموزش نصب قالب وودمارت"
    data-description="آموزش نصب قالب وودمارت، افزونه‌ها و درون‌ریزی دمو به صورت اصولی."
    data-duration="13 دقیقه"
    data-level="مقدماتی"
    data-video="https://doc.aramis-co.ir/wp-content/uploads/2025/05/install-theme-woodmart.mp4"
    data-full-course="در دوره کامل، نصب حرفه‌ای قالب، رفع خطاها، نصب دموهای مختلف و بهینه‌سازی اولیه وردپرس توضیح داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="نصب قالب وودمارت">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 2</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">آموزش نصب قالب وودمارت</h3>

        <p class="card-desc">
            نصب اصولی قالب وودمارت و راه‌اندازی اولیه فروشگاه.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 13 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>



<article class="lesson-card"
    data-title="افزایش سرعت قالب در نت ملی"
    data-description="در این آموزش یاد میگیرید که در زمان نت ملی چطور سرعت سایت را حفظ نمایید."
    data-duration="2 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Mellinet/Mellinet.mp4"
    data-full-course="در این آموزش یاد میگیرید که در زمان نت ملی چطور سرعت سایت را حفظ نمایید">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="نصب قالب وودمارت">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 3</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">افزایش سرعت قالب در نت ملی</h3>

        <p class="card-desc">
در این آموزش یاد میگیرید که در زمان نت ملی چطور سرعت سایت را حفظ نمایید
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 2 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>


<!-- 3 -->
<article class="lesson-card"
    data-title="آموزش هدر ساز در وودمارت"
    data-description="در این جلسه با Header Builder قالب وودمارت و ساخت هدرهای حرفه‌ای آشنا می‌شوید."
    data-duration="3 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Header-Builder/Header-Builder.mp4"
    data-full-course="در آموزش کامل، طراحی هدر حرفه‌ای، نسخه موبایل، منوهای پیشرفته و شخصی‌سازی کامل آموزش داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="هدر ساز وودمارت">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 4</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">آموزش هدر ساز در وودمارت</h3>

        <p class="card-desc">
            ساخت هدر حرفه‌ای و واکنش‌گرا با Header Builder.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 3 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 4 -->
<article class="lesson-card"
    data-title="آموزش ساخت انواع منو در وودمارت"
    data-description="آموزش طراحی منوهای حرفه‌ای، مگامنو و منوی موبایل در قالب وودمارت."
    data-duration="3 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Menu-Design/Menu-Design.mp4"
    data-full-course="در دوره کامل، ساخت مگامنوهای فروشگاهی حرفه‌ای، آیکون‌ها، دسته‌بندی‌ها و منوهای پیشرفته توضیح داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="منو در وودمارت">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 5</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">آموزش ساخت انواع منو در وودمارت</h3>

        <p class="card-desc">
            طراحی منوهای حرفه‌ای و فروشگاهی در وودمارت.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 3 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 5 -->
<article class="lesson-card"
    data-title="طراحی و سفارشی سازی برگه ها در وودمارت"
    data-description="در این جلسه طراحی برگه‌ها و سفارشی سازی صفحات مختلف فروشگاه آموزش داده می‌شود."
    data-duration="10 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Design-Page/Elemetor-Design-Page.mp4"
    data-full-course="در آموزش کامل، طراحی صفحات حرفه‌ای با المنتور، سکشن‌بندی و طراحی UI فروشگاهی بررسی شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="طراحی برگه ها">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 6</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">طراحی و سفارشی سازی برگه ها در وودمارت</h3>

        <p class="card-desc">
            طراحی صفحات حرفه‌ای و سفارشی سازی برگه‌ها.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 10 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 6 -->
<article class="lesson-card"
    data-title="افزودن محصولات در وودمارت"
    data-description="آموزش افزودن محصولات ساده، متغیر و حرفه‌ای در فروشگاه اینترنتی."
    data-duration="10 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Add-Product/Add-Product.mp4"
    data-full-course="در آموزش کامل، مدیریت محصولات، ویژگی‌ها، متغیرها، موجودی و صفحات محصول توضیح داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="افزودن محصولات">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 7</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">افزودن محصولات در وودمارت</h3>

        <p class="card-desc">
            ساخت و مدیریت محصولات فروشگاهی در وودمارت.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 10 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 7 -->
<article class="lesson-card"
    data-title="طراحی فروشگاه در وودمارت"
    data-description="در این جلسه صفحه فروشگاه، فیلترها و ساختار دسته‌بندی‌ها طراحی می‌شود."
    data-duration="22 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Shop-Design/Shop-Design.mp4"
    data-full-course="در آموزش کامل، طراحی Shop حرفه‌ای، فیلترها، آرشیوها و صفحات دسته‌بندی کاملاً آموزش داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="طراحی فروشگاه">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 8</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">طراحی فروشگاه در وودمارت</h3>

        <p class="card-desc">
            ساخت فروشگاه حرفه‌ای با طراحی مدرن و کاربردی.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 5 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 8 -->
<article class="lesson-card"
    data-title="اسلایدر ساز در وودمارت"
    data-description="آموزش طراحی اسلایدرهای حرفه‌ای و تبلیغاتی در صفحات فروشگاهی."
    data-duration="4 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Slider-Woodmart/Slider-Woodmart.mp4"
    data-full-course="در دوره کامل، طراحی اسلایدرهای حرفه‌ای، انیمیشن‌ها و ساخت بنرهای تبلیغاتی آموزش داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="اسلایدر ساز">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 9</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">اسلایدر ساز در وودمارت</h3>

        <p class="card-desc">
            ساخت اسلایدرهای جذاب برای صفحات فروشگاهی.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 4 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 9 -->
<article class="lesson-card"
    data-title="تنظیمات قالب وودمارت"
    data-description="بررسی تنظیمات حرفه‌ای قالب وودمارت برای بهینه سازی ظاهر و عملکرد سایت."
    data-duration="4 دقیقه"
    data-level="مقدماتی"
    data-video="https://aramis-co.ir/Learning/map-learn/Theme-Options/Theme-Options.mp4"
    data-full-course="در آموزش کامل، تنظیمات حرفه‌ای قالب، فونت‌ها، رنگ‌ها، استایل‌ها و تنظیمات پیشرفته آموزش داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="تنظیمات قالب">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 10</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">تنظیمات قالب وودمارت</h3>

        <p class="card-desc">
            شخصی سازی تنظیمات اصلی و حرفه‌ای قالب.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 4 دقیقه</span>
            <span class="meta">📚 سطح: مقدماتی</span>
        </div>
    </div>
</article>

<!-- 10 -->
<article class="lesson-card"
    data-title="امکانات بزرگ و اختصاصی در وودمارت"
    data-description="معرفی قابلیت‌ها و امکانات حرفه‌ای و اختصاصی قالب محبوب وودمارت."
    data-duration="4 دقیقه"
    data-level="پیشرفته"
    data-video="https://aramis-co.ir/Learning/map-learn/Woodmart-Pluss/Woodmart-Pluss.mp4"
    data-full-course="در آموزش کامل، تمامی قابلیت‌های حرفه‌ای، تکنیک‌های پیشرفته و امکانات اختصاصی وودمارت آموزش داده شده است.">

    <div class="thumb">
        <img src="https://aramis-co.ir/Learning/map-learn/0-1.jpg" alt="امکانات وودمارت">
        <div class="play">▶</div>
    </div>

    <div class="card-body">
        <div class="card-top">
            <span class="tag red">جلسه 11</span>
            <span class="tag green">ویدیو</span>
        </div>

        <h3 class="card-title">امکانات بزرگ و اختصاصی در وودمارت</h3>

        <p class="card-desc">
            بررسی ویژگی‌ها و امکانات حرفه‌ای قالب Woodmart.
        </p>

        <div class="card-meta">
            <span class="meta">⏱ مدت: 4 دقیقه</span>
            <span class="meta">📚 سطح: پیشرفته</span>
        </div>
    </div>
</article>



        </div>
    </section>


    <section class="info-box">
        <h2>مینی‌دوره آموزشی</h2>
        <p>
            این بخش <strong>نسخه کامل آموزش قالب نیست</strong> و فقط برای نمایش چند جلسه مهم و کوتاه طراحی شده است.
            برای دیدن آموزش کامل، نصب، تنظیمات پیشرفته، هدر بیلدر، فروشگاه‌ساز، المنتور و سایر بخش‌ها،
            از لینک زیر استفاده کن.
        </p>

        <div class="info-list">
            <div class="info-item">✅ فقط چند جلسه منتخب و کوتاه در این بخش نمایش داده شده‌اند</div>
            <div class="info-item">✅ این صفحه برای پیش‌نمایش و آشنایی اولیه طراحی شده است</div>
            <div class="info-item">✅ آموزش کامل قالب در لینک رسمی قرار داده شده است</div>
        </div>

        <div class="full-course-box">
            <div>
                <h3>آموزش کامل قالب وودمارت</h3>
                <p>
                    برای مشاهده نسخه کامل آموزش، می‌توانی وارد مقاله اصلی شوی. در آن صفحه تمام بخش‌های لازم
                    برای آموزش و سفارش‌سازی قالب به‌صورت کامل قرار گرفته است.
                </p>
            </div>

            <div class="full-course-actions">
                <a class="btn btn-primary" href="https://www.rtl-theme.com/blog/woodmart-tutorial/" target="_blank">
                    مشاهده آموزش کامل
                </a>
            </div>
        </div>
    </section>

    <div class="footerwd">
        این صفحه به‌صورت مینی‌دوره طراحی شده است و برای مشاهده آموزش کامل قالب، از لینک مشخص‌شده استفاده کنید.
    </div>
</div>

<!-- modalwd -->
<div class="modalwd" id="lessonmodalwd">
    <div class="modalwd-content">
        <div class="modalwd-head">
            <button class="close-btn" id="closemodalwd">✕</button>
            <h3 id="modalwdTitle">عنوان جلسه</h3>
            <p id="modalwdDescription">توضیحات جلسه</p>
        </div>

        <div class="video-wrap">
            <video id="lessonVideo" controls playsinline>
                <source src="" type="video/mp4">
            </video>
        </div>

        <div class="modalwd-body">
            <div class="modalwd-grid">
                <div class="modalwd-item" id="modalwdDuration">⏱ مدت زمان</div>
                <div class="modalwd-item" id="modalwdLevel">📚 سطح</div>
                <div class="modalwd-item">
                    🔗 <a href="https://www.rtl-theme.com/blog/woodmart-tutorial/" target="_blank" style="color:#ff5879;font-weight:700;">مشاهده آموزش کامل قالب</a>
                </div>
            </div>

            <div class="note" id="modalwdNote">
                این جلسه بخشی از یک مینی‌دوره است. اگر قصد داری آموزش کامل قالب را ببینی، از لینک آموزش اصلی استفاده کن.
            </div>
        </div>
    </div>
</div>

<script>
    const cards = document.querySelectorAll('.lesson-card');
    const modalwd = document.getElementById('lessonmodalwd');
    const closemodalwd = document.getElementById('closemodalwd');

    const modalwdTitle = document.getElementById('modalwdTitle');
    const modalwdDescription = document.getElementById('modalwdDescription');
    const modalwdDuration = document.getElementById('modalwdDuration');
    const modalwdLevel = document.getElementById('modalwdLevel');
    const modalwdNote = document.getElementById('modalwdNote');
    const lessonVideo = document.getElementById('lessonVideo');

    cards.forEach(card => {
        card.addEventListener('click', () => {
            modalwdTitle.textContent = card.dataset.title;
            modalwdDescription.textContent = card.dataset.description;
            modalwdDuration.textContent = '⏱ مدت زمان: ' + card.dataset.duration;
            modalwdLevel.textContent = '📚 سطح: ' + card.dataset.level;
            modalwdNote.textContent = card.dataset.fullCourse;

            const source = card.dataset.video;
            lessonVideo.querySelector('source').src = source;
            lessonVideo.load();

            modalwd.classList.add('active');
        });
    });

    function closeLessonmodalwd(){
        modalwd.classList.remove('active');
        lessonVideo.pause();
        lessonVideo.currentTime = 0;
    }

    closemodalwd.addEventListener('click', closeLessonmodalwd);

    modalwd.addEventListener('click', (e) => {
        if(e.target === modalwd){
            closeLessonmodalwd();
        }
    });

    document.addEventListener('keydown', (e) => {
        if(e.key === 'Escape'){
            closeLessonmodalwd();
        }
    });
</script>


        <?php   
    }
}

new Custom_Cods_Wdplus;