{include file="header" /}
<link rel="stylesheet" href="/assets/xtu/support.css?v=20260410-1922">
<link rel="stylesheet" href="/assets/xtu/support-detail.css?v=20260518-legal-4">

<main class="support-page support-detail-page support-course-page xtu-subnav-page">
  <section class="xtu-subnav-strip support-course-subnav-strip" aria-label="栏目名称">
    <div class="support-container">
      <div class="xtu-subnav-strip-title support-course-strip-title">
        {$category.catname|default=$title|default='用户服务协议'}
      </div>
    </div>
  </section>

  <section class="support-detail-main support-container support-course-main">
    <article class="support-course-article">
      <header class="support-course-header">
        <h2>{if !empty($title)}{$title}{else /}{:cms_t('support_course_default_title','产品教程')}{/if}</h2>
      </header>
      <div class="support-course-content entry-content">
        {if !empty($content)}
          {$content|raw}
        {else /}
          <div class="support-empty-state">{:cms_t('support_course_empty_content','当前暂无教程内容')}</div>
        {/if}
      </div>
    </article>
  </section>

  {include file="footer-links" /}
</main>

<script>
(function () {
  var siteHeader = document.getElementById('siteHeader');
  var syncTopbarPosition = function () {
    if (!siteHeader) return;
    var headerRect = siteHeader.getBoundingClientRect();
    document.documentElement.style.setProperty('--xtu-header-height', Math.max(0, Math.ceil(headerRect.bottom)) + 'px');
  };
  syncTopbarPosition();
  window.addEventListener('load', syncTopbarPosition);
  window.addEventListener('resize', syncTopbarPosition);
  window.addEventListener('scroll', syncTopbarPosition, { passive: true });
  if (window.ResizeObserver && siteHeader) { new ResizeObserver(syncTopbarPosition).observe(siteHeader); }
})();
</script>

{include file="footer" /}