<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ company.name }} - {% block title %}{{ t('help') if t('help') else '帮助中心' }}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 20px;
        }

        @media (max-width: 1024px) {
            .container {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .sticky-nav {
                position: relative;
                top: 0;
                margin-bottom: 20px;
            }

            .nav-container {
                border-radius: 8px;
            }

            .help-content {
                margin-top: 0;
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
                gap: 10px;
            }

            .nav-main-link {
                padding: 10px 15px;
                font-size: 0.9rem;
            }

            .sub-menu a {
                padding: 8px 15px 8px 35px;
                font-size: 0.85rem;
            }

            .sub-menu a:before {
                left: 25px;
            }

            .help-content {
                padding: 15px;
                border-radius: 8px;
            }

            .help-header h1 {
                font-size: 1.5rem;
                gap: 10px;
            }

            .help-header p {
                font-size: 1rem;
            }

            .article-content h2 {
                font-size: 1.3rem;
                margin: 20px 0 12px;
            }

            .article-content p {
                font-size: 0.95rem;
            }

            .step {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .step-number {
                margin-right: 0;
                margin-bottom: 10px;
            }

            .info-box {
                padding: 15px;
            }

            .contact-support {
                padding: 20px;
            }

            .btn-support {
                padding: 10px 20px;
            }

            /* Mobile menu toggle for navigation */
            .nav-menu-toggle {
                display: block;
                background: none;
                border: none;
                cursor: pointer;
                padding: 10px;
                margin: 10px 0;
                width: 100%;
                text-align: left;
                font-weight: 600;
                color: #4a6bdf;
                border-bottom: 1px solid #eee;
            }

            .nav-menu-toggle .arrow {
                float: right;
                transition: transform 0.3s ease;
            }

            .nav-menu-toggle.expanded .arrow {
                transform: rotate(180deg);
            }

            /* Initially hide nav menu on mobile */
            .nav-container {
                max-height: 60px;
                overflow: hidden;
                transition: max-height 0.3s ease;
            }

            .nav-container.expanded {
                max-height: 1000px;
            }
        }

        /* Very small devices */
        @media (max-width: 480px) {
            .container {
                padding: 0 5px;
            }

            .help-content {
                padding: 12px;
            }

            .nav-main-link {
                padding: 8px 12px;
                font-size: 0.85rem;
            }

            .sub-menu a {
                padding: 7px 12px 7px 30px;
            }

            .sub-menu a:before {
                left: 20px;
            }

            .help-header h1 {
                font-size: 1.3rem;
            }

            .article-content h2 {
                font-size: 1.2rem;
            }
        }

        /* 导航菜单样式 */
        .sticky-nav {
            position: sticky;
            top: 220px;
            height: fit-content;
        }

        .nav-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .search-box {
            padding: 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
        }

        .search-box input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
        }

        .nav-menu {
            list-style: none;
            max-height: 70vh;
            overflow-y: auto;
            padding: 10px 0;
        }

        .nav-item {
            margin-bottom: 5px;
        }

        .nav-main-link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
            cursor: pointer;
            border-left: 4px solid transparent;
        }

        .nav-main-link:hover {
            background: #f0f7ff;
            color: #4a6bdf;
            border-left-color: #4a6bdf;
        }

        .nav-main-link.active {
            background: #e6f0ff;
            color: #4a6bdf;
            border-left-color: #4a6bdf;
        }

        .nav-main-link .arrow {
            transition: transform 0.3s ease;
        }

        .sub-menu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            background: #f8f9fa;
        }

        .sub-menu.expanded {
            max-height: 1000px;
        }

        .sub-menu li {
            margin: 5px 0;
        }

        .sub-menu a {
            display: block;
            padding: 10px 20px 10px 40px;
            color: #555;
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
            cursor: pointer;
        }

        .sub-menu a:before {
            content: "";
            position: absolute;
            left: 30px;
            top: 50%;
            width: 5px;
            height: 5px;
            background: #4a6bdf;
            border-radius: 50%;
            transform: translateY(-50%);
        }

        .sub-menu a:hover {
            background: #e6e9f0;
            color: #4a6bdf;
        }

        .sub-menu a.active {
            background: #e6e9f0;
            color: #4a6bdf;
            font-weight: 500;
        }

        /* 帮助内容区域样式 - 修改位置 */
        .help-content {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            min-height: 600px;
            margin-top: 20px;
        }

        .help-header {
            margin-bottom: 30px;
        }

        .help-header h1 {
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .help-header p {
            color: #666;
            line-height: 1.6;
            font-size: 1.1rem;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: #666;
            font-size: 0.9rem;
        }

        .breadcrumb a {
            color: #4a6bdf;
            text-decoration: none;
            cursor: pointer;
        }

        .breadcrumb span {
            margin: 0 8px;
        }

        .article-content {
            margin-top: 30px;
        }

        .article-content h2 {
            color: #4a6bdf;
            margin: 25px 0 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .article-content p {
            color: #444;
            line-height: 1.7;
            margin-bottom: 15px;
        }

        .article-content ul,
        .article-content ol {
            margin: 15px 0;
            padding-left: 25px;
        }

        .article-content li {
            margin-bottom: 10px;
            color: #444;
            line-height: 1.6;
        }

        .info-box {
            background: #f0f7ff;
            border-left: 4px solid #4a6bdf;
            padding: 20px;
            border-radius: 6px;
            margin: 20px 0;
        }

        .info-box h3 {
            color: #4a6bdf;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .steps {
            margin: 25px 0;
        }

        .step {
            display: flex;
            margin-bottom: 20px;
        }

        .step-number {
            background: #4a6bdf;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .step-content {
            flex-grow: 1;
        }

        .step-content h4 {
            margin-bottom: 8px;
            color: #333;
        }

        .contact-support {
            background: #4a6bdf;
            color: white;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            margin-top: 40px;
        }

        .contact-support h2 {
            margin-bottom: 15px;
        }

        .contact-support p {
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .btn-support {
            display: inline-block;
            background: white;
            color: #4a6bdf;
            padding: 12px 25px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-support:hover {
            background: #f5f5f5;
            transform: translateY(-2px);
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <h1>
                <a href="{{ url_for('index') }}" class="logo">
                    <img src="{{ url_for('static', filename='images/logo_hk.svg') }}" alt="{{ t('company_name') }}"
                        class="logo-img">
                    <!-- {{ t('company_name') }} -->
                </a>
            </h1>
            <button class="mobile-menu-toggle" aria-label="Toggle menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <nav class="nav-menu">
                <ul>
                    <li><a href="{{ url_for('index') }}">{{ t('home') }}</a></li>
                    <li><a href="{{ url_for('services') }}">{{ t('services') }}</a></li>
                    <li><a href="{{ url_for('pricing') }}">{{ t('pricing') if t('pricing') else '收费' }}</a></li>
                    <li><a href="{{ url_for('download') }}">{{ t('download') if t('download') else '下载' }}</a></li>
                    <li><a href="{{ url_for('help') }}" class="active">{{ t('help') if t('help') else '帮助' }}</a></li>
                    <li><a href="{{ url_for('contact') }}">{{ t('contact') }}</a></li>
                    <li><a href="{{ url_for('about') }}">{{ t('about') }}</a></li>
                    <li><a href="https://bayizhinengjf.vip.cpolar.cn/" target="_blank">{{ t('online') }}</a></li>
                </ul>
                <div class="language-switcher">
                    <select id="language-dropdown" onchange="changeLanguage(this.value)">
                        <option value="" disabled selected>{{ t('language') if t('language') else 'Language' }}</option>
                        {% for lang_code, lang_name in languages.items() %}
                        <option value="{{ lang_code }}" {% if lang==lang_code %}selected{% endif %}>{{ lang_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h2>{{ t('help') if t('help') else '帮助中心' }}</h2>
                <p>{{ t('help_description') if t('help_description') else '获取使用指南和常见问题解答' }}</p>
            </div>
        </section>
    </main>
    <!-- 主内容区域 -->
    <div class="container">
        <!-- 导航菜单 -->
        <div class="sticky-nav">
            <div class="nav-container">
                <!-- 手机版显示有点问题暂时不使用 -->
                <!-- <div class="search-box">
                    <input type="text" placeholder="搜索帮助内容...">
                </div> -->

                <ul class="nav-menu">
                    <li class="nav-item">
                        <a class="nav-main-link active" onclick="toggleMenu(event, this)">
                            <span>开户指南</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu expanded">

                            <li><a class="nav-link active" data-content="online-transfers"
                                    onclick="loadContent(this)">中国香港地区用户如何开户？ - 入金见证</a></li>
                            <li><a class="nav-link" data-content="check-account"
                                    onclick="loadContent(this)">中国香港地区用户如何开户？ - 邮寄支票</a></li>
                            <li><a class="nav-link" data-content="third-party" onclick="loadContent(this)">中国香港地区用户如何开户？
                                    - 第三方见证</a></li>
                            <li><a class="nav-link" data-content="crs" onclick="loadContent(this)">共同汇报标准 (CRS)</a></li>
                            <li><a class="nav-link" data-content="fatca" onclick="loadContent(this)">海外账户税收合规法案
                                    (FATCA)</a></li>
                            <li><a class="nav-link" data-content="agreement" onclick="loadContent(this)">客户协议</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>存入资金</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">入金指引（通用）</a></li>
                            <li><a class="nav-link" data-content="credit-card"
                                    onclick="loadContent(this)">网银转账通用说明（香港地区银行）</a></li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">如何完成
                                    ATM/柜台转账入金？</a></li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">如何完成 Cheque
                                    支票转账入金？</a></li>
                            <li><a class="nav-link" data-content="credit-card" onclick="loadContent(this)">eDDA
                                    授权及入金指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">电汇转账入金指引（非香港银行卡）</a></li>

                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">汇丰银行网银转账指引</a></li>
                            <li><a class="nav-link" data-content="credit-card" onclick="loadContent(this)">汇丰银行 FPS
                                    入金指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">香港汇丰银行 eDDA
                                    银行端授权指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">恒生银行网银转账入金指引</a></li>
                            <li><a class="nav-link" data-content="credit-card"
                                    onclick="loadContent(this)">e中国银行香港网银转账入金指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">香港渣打银行入金指引</a></li>

                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">民生银行「银证转账」开通指引</a></li>
                            <li><a class="nav-link" data-content="credit-card"
                                    onclick="loadContent(this)">民生银行「银证转帐」转账指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">民生香港网银转账入金指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">众安银行 FPS
                                    入金指引</a></li>
                            <li><a class="nav-link" data-content="credit-card"
                                    onclick="loadContent(this)">众安银行网银转账说明</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">招行香港一卡通入金指引</a></li>

                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">招行香港一卡通 FPS
                                    入金指引</a></li>
                            <li><a class="nav-link" data-content="credit-card" onclick="loadContent(this)">招商银行香港 eDDA
                                    授权指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">花旗银行网银转账入金指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">工银亚洲 FPS
                                    入金指引
                                    国家外汇政策</a></li>
                            <li><a class="nav-link" data-content="credit-card" onclick="loadContent(this)">银行卡指引（通用）</a>
                            </li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">中银（香港）eDDA
                                    授权指引</a></li>

                            <li><a class="nav-link" data-content="credit-card" onclick="loadContent(this)">恒生银行 eDDA
                                    授权指引</a></li>
                            <li><a class="nav-link" data-content="bank-transfer" onclick="loadContent(this)">工银亚洲 eDDA
                                    授权指引</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>股票转移</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">

                            <li><a class="nav-link" data-content="credit-card"
                                    onclick="loadContent(this)">从华盛证券转仓到富泽国际</a></li>
                            <li><a class="nav-link" data-content="bank-transfer"
                                    onclick="loadContent(this)">从恒星证券转入股票指引</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>账户安全</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">什么是休眠账户？</a></li>
                            <li><a class="nav-link" data-content="password-mgmt" onclick="loadContent(this)">防诈骗提示 -
                                    提防诈骗链接</a></li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">如何完成账号注销？</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>美股市场</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">美股卖空（融券）常见问题</a></li>
                            <li><a class="nav-link" data-content="password-mgmt" onclick="loadContent(this)">场外交易 /
                                    粉单常见问题</a></li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">市价单注意事项</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>港股市场</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">港股牛熊证回收及结算时间</a></li>
                            <li><a class="nav-link" data-content="password-mgmt" onclick="loadContent(this)">市价单注意事项</a>
                            </li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">碎股交易常见问题</a></li>
                        </ul>
                    </li>


                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>企业行动</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">什么是派息/特殊派息及处理时间</a>
                            </li>
                            <li><a class="nav-link" data-content="password-mgmt"
                                    onclick="loadContent(this)">什么是送股及处理时间</a>
                            </li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">什么是选股选息及处理时间</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>融资相关</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">富泽综合账户</a>
                            </li>
                            <li><a class="nav-link" data-content="password-mgmt"
                                    onclick="loadContent(this)">什么情况下会要求追缴保证金？</a>
                            </li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">什么是货币保证金</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>其他</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">结单相关说明</a>
                            </li>
                            <li><a class="nav-link" data-content="password-mgmt"
                                    onclick="loadContent(this)">结单字段解释说明</a>
                            </li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">什么是附加订单</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>提取资金</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">通用出金指引</a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>货币兑换</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">货币兑换操作指南</a>
                            </li>
                            <li><a class="nav-link" data-content="password-mgmt" onclick="loadContent(this)">客户确认函
                                    -自动换汇还款服务</a>
                            </li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">自动还款常见问题解答</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-main-link" onclick="toggleMenu(event, this)">
                            <span>行情与交易</span>
                            <span class="arrow"><i class="fas fa-chevron-down"></i></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a class="nav-link" data-content="2fa" onclick="loadContent(this)">什么是美股夜盘</a>
                            </li>
                            <li><a class="nav-link" data-content="password-mgmt"
                                    onclick="loadContent(this)">美股深度摆盘介绍</a>
                            </li>
                            <li><a class="nav-link" data-content="security-notifications"
                                    onclick="loadContent(this)">行情权限单设备使用说明</a></li>
                        </ul>
                    </li>


                </ul>
            </div>
        </div>

        <!-- 帮助内容区域 -->
        <div class="help-content">
            <div class="breadcrumb">
                <a onclick="loadDefaultContent()">帮助中心</a>
                <span>/</span>
                <a onclick="loadCategoryContent('account-opening')">Account Opening Guide</a>
                <span>/</span>
                <span>How can users in Hong Kong open an account using online transfers?</span>
            </div>

            <div class="help-header">
                <h1><i class="fas fa-question-circle"></i> How can users in Hong Kong open an account using online
                    transfers?</h1>
                <p>了解如何通过在线转账方式在香港开设账户的详细步骤和注意事项。</p>
            </div>

            <div class="article-content">
                <div class="info-box">
                    <h3><i class="fas fa-lightbulb"></i> 重要提示</h3>
                    <p>在线开户过程通常需要10-15分钟完成。请确保您准备好身份证明文件和地址证明。</p>
                </div>

                <h2>在线开户要求</h2>
                <p>在香港通过在线转账方式开设账户，您需要满足以下基本要求：</p>

                <ul>
                    <li>年满18周岁</li>
                    <li>有效的身份证明文件（香港身份证或护照）</li>
                    <li>最近三个月内的地址证明（水电费账单、银行对账单等）</li>
                    <li>香港银行账户</li>
                    <li>稳定的互联网连接和设备（电脑或智能手机）</li>
                </ul>

                <h2>开户步骤</h2>

                <div class="steps">
                    <div class="step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h4>访问开户页面</h4>
                            <p>登录我们的官方网站，点击"立即开户"按钮开始申请流程。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h4>填写个人信息</h4>
                            <p>准确填写您的个人信息，包括姓名、出生日期、联系方式等。确保所有信息与您的身份证件一致。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h4>上传证明文件</h4>
                            <p>上传您的身份证明文件和地址证明的清晰照片或扫描件。文件格式可以是JPG、PNG或PDF，大小不超过5MB。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h4>进行在线验证</h4>
                            <p>完成身份验证过程，这可能包括面部识别或回答安全问题。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">5</div>
                        <div class="step-content">
                            <h4>进行初始存款</h4>
                            <p>通过在线转账方式完成初始存款。最低存款要求为1,000港元。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">6</div>
                        <div class="step-content">
                            <h4>等待审核</h4>
                            <p>提交申请后，我们将在1-2个工作日内完成审核。审核通过后，您将收到确认电子邮件。</p>
                        </div>
                    </div>
                </div>

                <h2>常见问题</h2>

                <div class="info-box">
                    <h3><i class="fas fa-question"></i> 开户需要多长时间?</h3>
                    <p>在线申请过程通常需要10-15分钟。审核过程需要1-2个工作日。一旦审核通过，您的账户将立即激活。</p>
                </div>

                <div class="info-box">
                    <h3><i class="fas fa-question"></i> 是否需要最低存款?</h3>
                    <p>是的，开户需要最低1,000港元的初始存款。您可以通过多种方式完成存款，包括银行转账和电子支付。</p>
                </div>

                <div class="info-box">
                    <h3><i class="fas fa-question"></i> 如果我的申请被拒绝怎么办?</h3>
                    <p>如果您的申请未被批准，我们将通过电子邮件说明具体原因。您可以纠正问题后重新申请，或联系客户支持获取帮助。</p>
                </div>
            </div>

            <div class="contact-support">
                <h2><i class="fas fa-headset"></i> 需要更多帮助?</h2>
                <p>我们的客户支持团队随时为您提供帮助。</p>
                <a href="#" class="btn-support">联系支持</a>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="container">
            <div class="footer-brand">
                <h3>{{ t('company_name') }}</h3>
                <p>{{ t('slogan') }}</p>
            </div>
            <div class="footer-links">
                <h4>{{ t('quick_links') if t('quick_links') else '快速链接' }}</h4>
                <ul>
                    <li><a href="{{ url_for('index') }}">{{ t('home') }}</a></li>
                    <li><a href="{{ url_for('about') }}">{{ t('about') }}</a></li>
                    <li><a href="{{ url_for('services') }}">{{ t('services') }}</a></li>
                    <li><a href="{{ url_for('contact') }}">{{ t('contact') }}</a></li>
                    <li><a href="https://bayizhinengjf.vip.cpolar.cn/" target="_blank">{{ t('online') }}</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4>{{ t('services') }}</h4>
                <ul>
                    {% for service in company.services %}
                    <li><a href="{{ url_for('services') }}">{{ service.name }}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="footer-links">
                <h4>{{ t('contact_us') if t('contact_us') else '联系我们' }}</h4>
                <ul>
                    <li>{{ company.contact.address }}</li>
                    <li>{{ t('tel') }}: {{ company.contact.Tel }}</li>
                    <li>{{ t('fax') }}: {{ company.contact.Fax }}</li>
                    <li>{{ t('email') }}: {{ company.contact.Email }}</li>
                </ul>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 {{ company.name }}. {{ t('all_rights_reserved') }}</p>
                <div class="footer-links">
                    <a href="#">{{ t('privacy_policy') }}</a>
                    <a href="#">{{ t('terms_of_use') }}</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/mobile-menu.js') }}"></script>
    <script src="{{ url_for('static', filename='js/tabs.js') }}"></script>
    <script src="{{ url_for('static', filename='js/market-ticker.js') }}"></script>
    <script src="{{ url_for('static', filename='js/help-navigation.js') }}"></script>

    <script>
        // 帮助菜单展开/收起功能
        function toggleMenu(event, element) {
            event.preventDefault();
            event.stopPropagation();

            const menuItem = element.parentElement;
            const subMenu = menuItem.querySelector('.sub-menu');
            const arrow = menuItem.querySelector('.arrow i');
            const isExpanding = !subMenu.classList.contains('expanded');

            // 收起所有其他菜单
            document.querySelectorAll('.nav-item').forEach(item => {
                if (item !== menuItem) {
                    const otherSubMenu = item.querySelector('.sub-menu');
                    const otherArrow = item.querySelector('.arrow i');
                    otherSubMenu.classList.remove('expanded');
                    otherArrow.style.transform = 'rotate(0deg)';
                    item.querySelector('.nav-main-link').classList.remove('active');
                }
            });

            // 切换当前菜单的展开状态
            if (isExpanding) {
                subMenu.classList.add('expanded');
                arrow.style.transform = 'rotate(180deg)';
                element.classList.add('active');
            } else {
                subMenu.classList.remove('expanded');
                arrow.style.transform = 'rotate(0deg)';
                element.classList.remove('active');
            }
        }

        // 内容加载功能
        function loadContent(element) {
            const contentId = element.getAttribute('data-content');

            // 移除所有活动类
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });

            // 添加活动类到当前点击的链接
            element.classList.add('active');

            // 根据内容ID加载不同的内容
            switch (contentId) {
                case 'online-transfers':
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="online-transfers"]').innerHTML;
                    break;
                case 'check-account':
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="check-account"]').innerHTML;
                    break;
                case 'third-party':
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="third-party"]').innerHTML;
                    break;
                case 'bank-transfer':
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="bank-transfer"]').innerHTML;
                    break;
                case 'credit-card':
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="credit-card"]').innerHTML;
                    break;
                case '2fa':
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="2fa"]').innerHTML;
                    break;
                default:
                    document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="default"]').innerHTML;
            }
        }

        // 加载默认内容
        function loadDefaultContent() {
            document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="default"]').innerHTML;

            // 重置所有活动链接
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
        }

        // 加载分类内容
        function loadCategoryContent(category) {
            document.querySelector('.help-content').innerHTML = document.querySelector('[data-template="category"]').innerHTML;
        }

        // 初始加载时设置第一个菜单为活动状态
        document.addEventListener('DOMContentLoaded', function () {
            const firstMenu = document.querySelector('.nav-item');
            if (firstMenu) {
                const arrow = firstMenu.querySelector('.arrow i');
                arrow.style.transform = 'rotate(180deg)';
            }

            // 移动端初始化：隐藏导航菜单
            if (window.innerWidth <= 768) {
                const navContainer = document.querySelector('.nav-container');
                if (navContainer) {
                    navContainer.style.maxHeight = '60px';
                }
            }
        });

        // 移动端导航菜单切换
        function toggleMobileNav() {
            const navContainer = document.querySelector('.nav-container');
            const toggleButton = document.querySelector('.nav-menu-toggle');

            if (navContainer && toggleButton) {
                if (navContainer.classList.contains('expanded')) {
                    navContainer.classList.remove('expanded');
                    toggleButton.classList.remove('expanded');
                } else {
                    navContainer.classList.add('expanded');
                    toggleButton.classList.add('expanded');
                }
            }
        }

        // 监听窗口大小变化，调整导航菜单状态
        window.addEventListener('resize', function () {
            const navContainer = document.querySelector('.nav-container');
            const toggleButton = document.querySelector('.nav-menu-toggle');

            if (window.innerWidth > 768) {
                // 桌面端：显示完整导航
                if (navContainer) {
                    navContainer.style.maxHeight = 'none';
                    navContainer.classList.remove('expanded');
                }
                if (toggleButton) {
                    toggleButton.classList.remove('expanded');
                }
            } else {
                // 移动端：默认收起导航
                if (navContainer && !navContainer.classList.contains('expanded')) {
                    navContainer.style.maxHeight = '60px';
                }
            }
        });
    </script>

    <!-- 内容模板 -->
    <div style="display: none;">
        <!-- 默认内容模板 -->
        <div data-template="default">
            <div class="breadcrumb">
                <a onclick="loadDefaultContent()">帮助中心</a>
            </div>

            <div class="help-header">
                <h1><i class="fas fa-home"></i> 帮助中心首页</h1>
                <p>欢迎使用帮助中心，请选择左侧菜单查看详细帮助内容</p>
            </div>

            <div class="article-content">
                <div class="info-box">
                    <h3><i class="fas fa-info-circle"></i> 使用提示</h3>
                    <p>您可以通过左侧导航菜单浏览不同的帮助主题，或使用搜索框快速查找您需要的内容。</p>
                </div>

                <h2>常见问题分类</h2>

                <div class="steps">
                    <div class="step">
                        <div class="step-number"><i class="fas fa-user-plus"></i></div>
                        <div class="step-content">
                            <h4>账户开户指南</h4>
                            <p>了解如何开设账户的不同方式和要求</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number"><i class="fas fa-money-bill-wave"></i></div>
                        <div class="step-content">
                            <h4>存款方式</h4>
                            <p>了解各种存款方式及操作流程</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number"><i class="fas fa-shield-alt"></i></div>
                        <div class="step-content">
                            <h4>账户安全</h4>
                            <p>了解如何保护您的账户安全</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 在线转账内容模板 -->
        <div data-template="online-transfers">
            <div class="breadcrumb">
                <a onclick="loadDefaultContent()">帮助中心</a>
                <span>/</span>
                <a onclick="loadCategoryContent('account-opening')">Account Opening Guide</a>
                <span>/</span>
                <span>How can users in Hong Kong open an account using online transfers?</span>
            </div>

            <div class="help-header">
                <h1><i class="fas fa-question-circle"></i> How can users in Hong Kong open an account using online
                    transfers?</h1>
                <p>了解如何通过在线转账方式在香港开设账户的详细步骤和注意事项。</p>
            </div>

            <div class="article-content">
                <div class="info-box">
                    <h3><i class="fas fa-lightbulb"></i> 重要提示</h3>
                    <p>在线开户过程通常需要10-15分钟完成。请确保您准备好身份证明文件和地址证明。</p>
                </div>

                <h2>在线开户要求</h2>
                <p>在香港通过在线转账方式开设账户，您需要满足以下基本要求:</p>

                <ul>
                    <li>年满18周岁</li>
                    <li>有效的身份证明文件（香港身份证或护照）</li>
                    <li>最近三个月内的地址证明（水电费账单、银行对账单等）</li>
                    <li>香港银行账户</li>
                    <li>稳定的互联网连接和设备（电脑或智能手机）</li>
                </ul>

                <h2>开户步骤</h2>

                <div class="steps">
                    <div class="step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h4>访问开户页面</h4>
                            <p>登录我们的官方网站，点击"立即开户"按钮开始申请流程。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h4>填写个人信息</h4>
                            <p>准确填写您的个人信息，包括姓名、出生日期、联系方式等。确保所有信息与您的身份证件一致。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h4>上传证明文件</h4>
                            <p>上传您的身份证明文件和地址证明的清晰照片或扫描件。文件格式可以是JPG、PNG或PDF，大小不超过5MB。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h4>进行在线验证</h4>
                            <p>完成身份验证过程，这可能包括面部识别或回答安全问题。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">5</div>
                        <div class="step-content">
                            <h4>进行初始存款</h4>
                            <p>通过在线转账方式完成初始存款。最低存款要求为1,000港元。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">6</div>
                        <div class="step-content">
                            <h4>等待审核</h4>
                            <p>提交申请后，我们将在1-2个工作日内完成审核。审核通过后，您将收到确认电子邮件。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 在线转账内容模板 -->
        <div data-template="check-account">
            <div class="breadcrumb">
                <a onclick="loadDefaultContent()">帮助中心</a>
                <span>/</span>
                <a onclick="loadCategoryContent('check-account')">Account Opening Guide</a>
                <span>/</span>
                <span>How can users in Hong Kong open an account using online transfers?</span>
            </div>

            <div class="help-header">
                <h1><i class="fas fa-question-circle"></i> How can users in Hong Kong open an account using online
                    transfers?</h1>
                <p>了解如何通过在线转账方式在香港开设账户的详细步骤和注意事项。</p>
            </div>

            <div class="article-content">
                <div class="info-box">
                    <h3><i class="fas fa-lightbulb"></i> 重要提示</h3>
                    <p>在线开户过程通常需要10-15分钟完成。请确保您准备好身份证明文件和地址证明。</p>
                </div>

                <h2>在线开户要求</h2>
                <p>在香港通过在线转账方式开设账户，您需要满足以下基本要求:</p>

                <ul>
                    <li>年满18周岁</li>
                    <li>有效的身份证明文件（香港身份证或护照）</li>
                    <li>最近三个月内的地址证明（水电费账单、银行对账单等）</li>
                    <li>香港银行账户</li>
                    <li>稳定的互联网连接和设备（电脑或智能手机）</li>
                </ul>

                <h2>开户步骤</h2>

                <div class="steps">
                    <div class="step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h4>访问开户页面</h4>
                            <p>登录我们的官方网站，点击"立即开户"按钮开始申请流程。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h4>填写个人信息</h4>
                            <p>准确填写您的个人信息，包括姓名、出生日期、联系方式等。确保所有信息与您的身份证件一致。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h4>上传证明文件</h4>
                            <p>上传您的身份证明文件和地址证明的清晰照片或扫描件。文件格式可以是JPG、PNG或PDF，大小不超过5MB。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h4>进行在线验证</h4>
                            <p>完成身份验证过程，这可能包括面部识别或回答安全问题。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">5</div>
                        <div class="step-content">
                            <h4>进行初始存款</h4>
                            <p>通过在线转账方式完成初始存款。最低存款要求为1,000港元。</p>
                        </div>
                    </div>

                    <div class="step">
                        <div class="step-number">6</div>
                        <div class="step-content">
                            <h4>等待审核</h4>
                            <p>提交申请后，我们将在1-2个工作日内完成审核。审核通过后，您将收到确认电子邮件。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>