<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pageTitle || 'VUS Crocodile CMS' %></title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div class="app-frame">
    <aside class="sidebar">
      <a class="sidebar-brand" href="/admin/questions">
        <div class="brand-mark small">VUS</div>
        <div>
          <strong>Question CMS</strong>
          <span>Interactive Crocodile 2026</span>
        </div>
      </a>
      <div class="sidebar-section-label">QUẢN LÝ NỘI DUNG</div>
      <nav class="sidebar-nav" aria-label="Điều hướng chính">
        <a class="sidebar-link <%= activeTab === 'questions' ? 'active' : '' %>" href="/admin/questions"><span class="nav-icon">▤</span> Kho câu hỏi</a>
        <a class="sidebar-link <%= activeTab === 'challengelevel' ? 'active' : '' %>" href="/admin/challengelevel"><span class="nav-icon">◆</span> Cấp độ câu hỏi</a>
        <a class="sidebar-link <%= activeTab === 'playrecord' ? 'active' : '' %>" href="/admin/playrecord"><span class="nav-icon">◷</span> Kết quả trò chơi</a>
        <% if (typeof adminRole !== 'undefined' && adminRole === 'SUPER_ADMIN') { %><a class="sidebar-link <%= activeTab === 'account' ? 'active' : '' %>" href="/admin/account"><span class="nav-icon">◎</span> Tài khoản</a><% } %>
      </nav>
      <div class="sidebar-bottom">
        <div class="sidebar-note"><span class="status-dot"></span> Hệ thống đang hoạt động</div>
        <button id="logoutButton" class="sidebar-logout" type="button"><span>↪</span> Đăng xuất</button>
      </div>
    </aside>
    <section class="content-shell">
      <header class="topbar">
        <div>
          <div class="topbar-kicker">VUS ADMINISTRATION</div>
          <div class="topbar-title"><%= pageHeading || 'Question management' %></div>
        </div>
        <div class="topbar-user">
          <div class="avatar"><%= (typeof displayName !== 'undefined' && displayName ? displayName : 'A').slice(0, 1).toUpperCase() %></div>
          <div><strong><%= typeof displayName !== 'undefined' && displayName ? displayName : 'Administrator' %></strong><span>Administrator</span></div>
        </div>
      </header>
      <main class="main-content">
