Upload 13 files

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

chatbox.js

@@ -0,0 +1,176 @@
+(function () {
+  'use strict';
+
+  var API_DEFAULT = 'https://chatbox.npgia-himlam.workers.dev/';
+  var ID_PREFIX = 'avchat';
+  var MODELS = { nivip: 'nivip', zerta: 'zerta' };
+  var MODEL_LABELS = { nivip: 'Nivip', zerta: 'Zerta' };
+
+  function baseUrl() {
+    try {
+      var v = localStorage.getItem('anivietdb-chat-api');
+      if (v) return v;
+    } catch (e) {}
+    return API_DEFAULT;
+  }
+
+  function injectCss() {
+    if (document.getElementById(ID_PREFIX + '-style')) return;
+    var st = document.createElement('style');
+    st.id = ID_PREFIX + '-style';
+    st.textContent = [
+      '.' + ID_PREFIX + '-fab {',
+      '  position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px;',
+      '  border-radius: 50%; border: none; cursor: pointer; font-size: 24px; z-index: 9998;',
+      '  background: linear-gradient(135deg, #e84393, #a29bfe); color: #fff;',
+      '  box-shadow: 0 8px 24px rgba(232,67,147,.5); display: flex; align-items: center; justify-content: center;',
+      '  transition: transform .2s;',
+      '}',
+      '.' + ID_PREFIX + '-fab:hover { transform: scale(1.08); }',
+      '.' + ID_PREFIX + '-box {',
+      '  position: fixed; right: 16px; bottom: 16px; width: 340px; max-width: calc(100vw - 32px);',
+      '  background: #14141f; color: #fff; border-radius: 12px; overflow: hidden;',
+      '  box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 9999;',
+      '  font-family: Roboto, Arial, sans-serif; display: none;',
+      '}',
+      '.' + ID_PREFIX + '-head { background: #1d1d2e; padding: 12px 16px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }',
+      '.' + ID_PREFIX + '-head h3 { margin: 0; font-size: 15px; color: #fff; }',
+      '.' + ID_PREFIX + '-model { background: #14141f; color: #fff; border: 1px solid #444; border-radius: 6px; font-size: 12.5px; padding: 4px 6px; outline: none; cursor: pointer; }',
+      '.' + ID_PREFIX + '-close { background: none; border: none; color: #aaa; font-size: 15px; cursor: pointer; padding: 0 4px; }',
+      '.' + ID_PREFIX + '-close:hover { color: #fff; }',
+      '.' + ID_PREFIX + '-msgs { padding: 14px; max-height: 340px; overflow-y: auto; font-size: 14px; line-height: 1.5; background: #fff; color: #222; }',
+      '.' + ID_PREFIX + '-msgs .' + ID_PREFIX + '-user { text-align: right; margin: 6px 0; }',
+      '.' + ID_PREFIX + '-msgs .' + ID_PREFIX + '-user::before { content: "Bạn: "; color: #007aff; font-weight: 700; }',
+      '.' + ID_PREFIX + '-msgs .' + ID_PREFIX + '-ai { margin: 6px 0; white-space: pre-wrap; word-break: break-word; }',
+      '.' + ID_PREFIX + '-msgs .' + ID_PREFIX + '-ai::before { content: "AI: "; color: #e84393; font-weight: 700; }',
+      '.' + ID_PREFIX + '-msgs .' + ID_PREFIX + '-err { margin: 6px 0; color: #c0392b; white-space: pre-wrap; word-break: break-word; }',
+      '.' + ID_PREFIX + '-input { display: flex; border-top: 1px solid #333; background: #1d1d2e; }',
+      '.' + ID_PREFIX + '-input input { flex: 1; padding: 10px 12px; border: none; outline: none; background: #1d1d2e; color: #fff; font-size: 14px; }',
+      '.' + ID_PREFIX + '-input button { background: #e84393; color: #fff; border: none; padding: 0 16px; cursor: pointer; font-size: 14px; }',
+      '.' + ID_PREFIX + '-input button:disabled { opacity: .5; cursor: wait; }',
+      '.' + ID_PREFIX + '-input button:hover:not(:disabled) { background: #d63384; }'
+    ].join('\n');
+    document.head.appendChild(st);
+  }
+
+  function el(tag, className, html) {
+    var n = document.createElement(tag);
+    if (className) n.className = className;
+    if (html !== undefined) n.innerHTML = html;
+    return n;
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  function build() {
+    injectCss();
+
+    var fab = el('button', ID_PREFIX + '-fab', '&#128172;');
+    fab.title = 'Chat với trợ lý gợi ý anime/manga';
+
+    var box = el('div', ID_PREFIX + '-box');
+    box.innerHTML =
+      '<div class="' + ID_PREFIX + '-head">' +
+      '<h3>Chatbox ANIVIETDB</h3>' +
+      '<select class="' + ID_PREFIX + '-model" id="' + ID_PREFIX + '-model" aria-label="Chọn mô hình">' +
+      Object.keys(MODELS).map(function (k) {
+        return '<option value="' + k + '">' + MODEL_LABELS[k] + '</option>';
+      }).join('') +
+      '</select>' +
+      '<button class="' + ID_PREFIX + '-close" id="' + ID_PREFIX + '-close" aria-label="Đóng">&#10005;</button>' +
+      '</div>';
+    var msgs = el('div', ID_PREFIX + '-msgs');
+    msgs.innerHTML = '<div class="' + ID_PREFIX + '-ai">Chào bạn! Mình là trợ lý gợi ý anime, manga và light novel của ANIVIETDB. Bạn muốn xem gì hôm nay?</div>';
+    box.appendChild(msgs);
+    var inputRow = el('div', ID_PREFIX + '-input');
+    var inp = el('input');
+    inp.type = 'text';
+    inp.placeholder = 'Nhập tin nhắn...';
+    inp.autocomplete = 'off';
+    var sendBtn = el('button', null, 'Gửi');
+    inputRow.appendChild(inp);
+    inputRow.appendChild(sendBtn);
+    box.appendChild(inputRow);
+    document.body.appendChild(box);
+    document.body.appendChild(fab);
+
+    var closeBtn = box.querySelector('#' + ID_PREFIX + '-close');
+    var modelSel = box.querySelector('#' + ID_PREFIX + '-model');
+
+    function currentModel() {
+      var saved = null;
+      try { saved = localStorage.getItem('anivietdb-chat-model'); } catch (e) {}
+      return MODELS[saved] ? saved : 'nivip';
+    }
+
+    modelSel.value = currentModel();
+    modelSel.addEventListener('change', function () {
+      try { localStorage.setItem('anivietdb-chat-model', modelSel.value); } catch (e) {}
+    });
+
+    function toggle(show) {
+      box.style.display = show ? 'block' : 'none';
+      fab.style.display = show ? 'none' : 'block';
+      if (show) inp.focus();
+    }
+
+    function send() {
+      var msg = inp.value.trim();
+      if (!msg) return;
+      inp.value = '';
+      msgs.innerHTML += '<div class="' + ID_PREFIX + '-user">' + escapeHtml(msg) + '</div>';
+      msgs.scrollTop = msgs.scrollHeight;
+      var p = el('div', ID_PREFIX + '-ai', '...');
+      msgs.appendChild(p);
+      msgs.scrollTop = msgs.scrollHeight;
+      sendBtn.disabled = true;
+      inp.disabled = true;
+      fetch(baseUrl().replace(/\/+$/, '') + '/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: msg, model: modelSel.value })
+      }).then(function (r) {
+        return r.json().catch(function () { return {}; }).then(function (d) {
+          if (!r.ok) {
+            var e = new Error((d && d.error) || ('HTTP ' + r.status));
+            e.status = r.status;
+            throw e;
+          }
+          return d;
+        });
+      }).then(function (d) {
+        p.className = ID_PREFIX + '-ai';
+        p.textContent = d.reply || '...';
+        msgs.scrollTop = msgs.scrollHeight;
+      }).catch(function (e) {
+        p.className = ID_PREFIX + '-err';
+        p.textContent = 'Lỗi: ' + (e.message || 'không rõ');
+        msgs.scrollTop = msgs.scrollHeight;
+      }).finally(function () {
+        sendBtn.disabled = false;
+        inp.disabled = false;
+        inp.focus();
+      });
+    }
+
+    fab.addEventListener('click', function () { toggle(true); });
+    closeBtn.addEventListener('click', function () { toggle(false); });
+    sendBtn.addEventListener('click', send);
+    inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') send(); });
+  }
+
+  function init() {
+    if (document.getElementById(ID_PREFIX + '-fab')) return;
+    build();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

control-panel.html

@@ -0,0 +1,1348 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23151515'/><text x='50' y='68' font-size='52' font-family='Arial' font-weight='bold' fill='%23ff5e00' text-anchor='middle'>A</text></svg>">
+<title>Control Panel - ANIVIETDB</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <style>
+    :root {
+      --cp-bg: #101216;
+      --cp-panel: #16181f;
+      --cp-panel-2: #1d2029;
+      --cp-border: #262a35;
+      --cp-ink: #e8eaf2;
+      --cp-muted: #8b90a2;
+      --cp-accent: #ff5e00;
+      --cp-accent-2: #2abdbb;
+      --cp-purple: #a3419f;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; }
+    body {
+      font-family: 'Inter', 'Roboto', sans-serif;
+background: var(--cp-bg);
+      min-height: 100vh; color: var(--cp-ink);
+      display: flex;
+      flex-direction: row;
+      padding: 0;
+    }
+    ::-webkit-scrollbar { width: 10px; height: 10px; }
+    ::-webkit-scrollbar-thumb { background: #2e3342; border-radius: 8px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+
+    /* ---------- Sidebar ---------- */
+    .cp-side {
+      width: 248px; min-width: 248px;
+      background: var(--cp-panel);
+      border-right: 1px solid var(--cp-border);
+      display: flex; flex-direction: column;
+      position: sticky; top: 0; height: 100vh;
+      z-index: 40;
+    }
+    .cp-logo {
+      display: flex; align-items: center; gap: 10px;
+      padding: 18px 20px; border-bottom: 1px solid var(--cp-border);
+    }
+    .cp-logo-mark {
+      width: 38px; height: 38px; border-radius: 10px;
+      background: linear-gradient(135deg, #ff5e00, #a3419f);
+      display: grid; place-items: center;
+      font-weight: 800; font-size: 18px; color: #fff;
+      box-shadow: 0 4px 14px rgba(255,94,0,.35);
+    }
+    .cp-logo-name { font-weight: 700; font-size: 14px; line-height: 1.15; }
+    .cp-logo-sub { font-size: 11px; color: var(--cp-muted); }
+    .cp-nav { padding: 12px 12px; flex: 1; overflow-y: auto; }
+    .cp-nav-label {
+      font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
+      color: #5d6275; padding: 12px 12px 6px;
+    }
+    .cp-nav-item {
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 12px; margin: 2px 0;
+      border-radius: 10px; color: var(--cp-muted);
+      font-size: 13.5px; font-weight: 500;
+      cursor: pointer; text-decoration: none; transition: all .15s;
+      border: 1px solid transparent;
+    }
+    .cp-nav-item .ico { width: 18px; text-align: center; font-size: 15px; }
+    .cp-nav-item:hover { background: var(--cp-panel-2); color: var(--cp-ink); }
+    .cp-nav-item.active {
+      background: linear-gradient(135deg, rgba(255,94,0,.16), rgba(163,65,159,.14));
+      border-color: rgba(255,94,0,.35);
+      color: #fff;
+    }
+    .cp-nav-foot {
+      padding: 14px 16px; border-top: 1px solid var(--cp-border);
+      display: flex; align-items: center; gap: 10px;
+    }
+    .cp-avatar {
+      width: 36px; height: 36px; border-radius: 50%;
+      background: linear-gradient(135deg, #2abdbb, #2b1d54);
+      display: grid; place-items: center; font-weight: 700; color: #fff;
+      flex-shrink: 0;
+    }
+    .cp-nav-foot-info { min-width: 0; flex: 1; }
+    .cp-nav-foot-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cp-nav-foot-sub { font-size: 11px; color: var(--cp-muted); }
+    .cp-auth-btn {
+      background: none; border: 1px solid var(--cp-border); color: var(--cp-muted);
+      border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600;
+      cursor: pointer; text-decoration: none; font-family: inherit; transition: all .15s;
+    }
+    .cp-auth-btn:hover { color: var(--cp-accent); border-color: rgba(255,94,0,.5); }
+
+    /* ---------- Main ---------- */
+    .cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    .cp-topbar {
+      display: flex; align-items: center; justify-content: space-between; gap: 16px;
+      padding: 14px 24px;
+      background: rgba(16,18,22,.86);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--cp-border);
+      position: sticky; top: 0; z-index: 30;
+    }
+    .cp-topbar-title { font-size: 16px; font-weight: 700; }
+    .cp-topbar-title small { display: block; font-size: 11.5px; color: var(--cp-muted); font-weight: 500; }
+    .cp-topbar-links { display: flex; align-items: center; gap: 8px; }
+    .cp-btn {
+      padding: 8px 14px; border-radius: 10px; border: 1px solid var(--cp-border);
+      background: var(--cp-panel-2); color: var(--cp-ink); font-size: 12.5px; font-weight: 600;
+      cursor: pointer; text-decoration: none; display: inline-block; font-family: inherit;
+      transition: all .15s;
+    }
+    .cp-btn:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
+    .cp-btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 8px; }
+    .cp-btn-danger { border-color: rgba(255,138,138,.4); color: #ff8a8a; }
+    .cp-btn-danger:hover { background: rgba(255,138,138,.08); border-color: #ff8a8a; }
+    .cp-burger { display: none; background: none; border: 1px solid var(--cp-border); color: var(--cp-ink); border-radius: 10px; padding: 8px 12px; font-size: 16px; }
+
+    .cp-content { padding: 24px; flex: 1; }
+/* ---------- Cards / stats / tables ---------- */
+    .card {
+      background: var(--cp-panel);
+      border: 1px solid var(--cp-border);
+      border-radius: 16px; padding: 22px; margin-bottom: 24px;
+    }
+    .card h2 { font-size: 16px; margin-bottom: 4px; }
+    .card .sub { font-size: 12px; color: var(--cp-muted); margin-bottom: 16px; }
+    table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(120,100,230,0.15); }
+    th { color: #9a9ab0; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
+    tr:hover td { background: rgba(120,100,230,0.06); }
+    .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
+    .badge-admin { background: rgba(126,231,135,0.15); color: #7ee787; }
+    .badge-user { background: rgba(120,100,230,0.15); color: #b9adff; }
+    .btn-del {
+      padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255,138,138,0.5);
+      background: transparent; color: #ff8a8a; font-size: 12px; font-weight: 600; cursor: pointer;
+    }
+    .btn-del:hover { background: rgba(255,138,138,0.15); }
+    .btn-del[disabled] { opacity: .4; cursor: not-allowed; }
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 14px;
+      margin-bottom: 24px;
+    }
+    .stat-card {
+      background: var(--cp-panel);
+      border: 1px solid var(--cp-border);
+      border-radius: 14px;
+      padding: 16px 18px;
+      display: flex; flex-direction: column; gap: 6px;
+      transition: border-color .2s;
+    }
+    .stat-card:hover { border-color: rgba(255,94,0,.4); }
+    .stat-label { font-size: 12px; color: var(--cp-muted); display: flex; align-items: center; gap: 8px; }
+    .stat-label .dot { width: 8px; height: 8px; border-radius: 50%; }
+    .stat-value { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
+    .stat-value small { font-size: 12px; color: var(--cp-muted); font-weight: 500; }
+    .stat-delta { font-size: 11.5px; font-weight: 600; }
+    .stat-delta.up { color: #2abdbb; }
+    .stat-delta.down { color: #ff5e00; }
+    .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+    @media (max-width: 720px) { .content-grid { grid-template-columns: 1fr; } }
+    .content-box {
+      border: 1px solid rgba(120,100,230,0.2); border-radius: 12px; padding: 14px;
+      background: rgba(255,255,255,0.02);
+    }
+    .content-box h3 { font-size: 14px; margin-bottom: 10px; color: #b9adff; }
+    .content-box ul { list-style: none; max-height: 320px; overflow-y: auto; }
+    .content-box li {
+      padding: 7px 10px; border-radius: 8px; font-size: 12.5px;
+      display: flex; justify-content: space-between; gap: 10px;
+    }
+    .content-box li:nth-child(odd) { background: rgba(120,100,230,0.07); }
+    .content-box li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .content-box li .s { color: #9a9ab0; flex-shrink: 0; font-size: 11px; }
+    .nsfw-tag { color: #ff8a8a; font-weight: 700; }
+    .sfw-tag { color: #7ee787; font-weight: 700; }
+    .cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
+    .cat-tab {
+      padding: 7px 16px; border-radius: 20px; border: 1px solid rgba(120,100,230,0.3);
+      background: transparent; color: #9a9ab0; font-size: 13px; font-weight: 600; cursor: pointer;
+      transition: all .2s; font-family: inherit;
+    }
+    .cat-tab:hover { color: #fff; border-color: #8b7bff; }
+    .cat-tab.active { background: linear-gradient(135deg, #7c5cff, #5a3bd6); color: #fff; border-color: transparent; }
+    .btn-go {
+      display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
+      border: 1px solid rgba(126,231,135,0.45); color: #7ee787; text-decoration: none; text-align: center;
+    }
+    .btn-go:hover { background: rgba(126,231,135,0.15); }
+    .table-wrap { max-height: 420px; overflow-y: auto; border: 1px solid rgba(120,100,230,0.15); border-radius: 12px; }
+    .msg { color: #9a9ab0; font-size: 13px; padding: 8px 0; }
+    .ok { color: #7ee787; }
+    .err { color: #ff8a8a; }
+
+    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
+    .chip {
+      background: var(--cp-panel);
+      border: 1px solid var(--cp-border);
+      color: var(--cp-muted);
+      border-radius: 999px;
+      padding: 7px 16px;
+      font-size: 12.5px; font-weight: 600;
+      cursor: pointer; transition: all .15s;
+      font-family: inherit;
+    }
+    .chip:hover { color: var(--cp-ink); border-color: #3a4052; }
+    .chip.active { background: linear-gradient(135deg, #ff5e00, #e04a00); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(255,94,0,.3); }
+
+    .product-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+      gap: 14px;
+    }
+    .product-card {
+      background: var(--cp-panel);
+      border: 1px solid var(--cp-border);
+      border-radius: 14px;
+      overflow: hidden;
+      display: flex; flex-direction: column;
+      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
+    }
+    .product-card:hover { transform: translateY(-6px); border-color: rgba(255,94,0,.45); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
+    .product-thumb { position: relative; aspect-ratio: 3/3.6; overflow: hidden; background: #0d0f14; }
+    .product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .product-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,15,20,.55), transparent 40%); pointer-events: none; }
+    .product-tag {
+      position: absolute; top: 10px; left: 10px; z-index: 2;
+      background: rgba(13,15,20,.8); backdrop-filter: blur(4px);
+      color: #ffb48a; font-size: 10px; font-weight: 700; letter-spacing: .03em;
+      border-radius: 999px; padding: 4px 10px;
+      border: 1px solid rgba(255,94,0,.4);
+    }
+    .product-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
+    .product-anime { font-size: 10px; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
+    .product-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--cp-ink); }
+.product-stock { font-size: 11px; font-weight: 700; }
+    .product-stock.low { color: #ff8a8a; }
+    .product-stock.ok { color: #2abdbb; }
+    .product-price { display: flex; align-items: baseline; gap: 8px; }
+    .price-now { font-size: 15px; font-weight: 800; color: #e84393; }
+    .price-old { font-size: 12px; color: var(--cp-muted); text-decoration: line-through; }
+
+    .empty-shop { text-align: center; padding: 50px 20px; color: var(--cp-muted); }
+    .empty-shop .big { font-size: 34px; margin-bottom: 10px; }
+/* ---------- Confirm modal ---------- */
+    .confirm-overlay {
+      position: fixed; inset: 0; z-index: 1000; display: none;
+      align-items: center; justify-content: center; padding: 20px;
+      background: rgba(8, 9, 18, 0.72); backdrop-filter: blur(4px);
+    }
+    .confirm-overlay.active { display: flex; }
+    .confirm-box {
+      width: 100%; max-width: 380px; background: #16182b;
+      border: 1px solid rgba(255,138,138,0.35); border-radius: 16px;
+      padding: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
+      animation: confirmPop .22s ease;
+    }
+    @keyframes confirmPop {
+      from { transform: scale(.92); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+    .confirm-icon {
+      width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 24px; color: #ff8a8a; background: rgba(255,138,138,0.12);
+      border: 1px solid rgba(255,138,138,0.3);
+    }
+    .confirm-title { font-size: 17px; font-weight: 700; text-align: center; color: #fff; margin-bottom: 8px; }
+    .confirm-text { font-size: 13px; text-align: center; color: #9a9ab0; margin-bottom: 22px; line-height: 1.6; }
+    .confirm-text b { color: #ff8a8a; }
+    .confirm-actions { display: flex; gap: 10px; }
+    .confirm-btn {
+      flex: 1; padding: 11px 0; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
+      border: 1px solid transparent; transition: all .2s; font-family: inherit;
+    }
+    .confirm-cancel { background: transparent; border-color: rgba(120,100,230,0.4); color: #b9adff; }
+    .confirm-cancel:hover { background: rgba(120,100,230,0.1); }
+.confirm-ok { background: linear-gradient(135deg, #ff6b81, #f0334a); color: #fff; }
+    .confirm-ok:hover { filter: brightness(1.1); }
+    .cp-reason {
+      width: 100%; margin: 0 0 18px; padding: 11px 13px;
+      background: #0f1122; border: 1px solid rgba(255,138,138,0.35);
+      border-radius: 10px; color: #e8eaf2; font-size: 13px; font-family: inherit;
+      resize: vertical; outline: none;
+    }
+    .cp-reason:focus { border-color: #ff8a8a; }
+    .cp-reason-err { display: none; font-size: 12px; color: #ff8a8a; margin: -10px 0 14px; }
+    .cp-reason-err.show { display: block; }
+    #orderModal .confirm-ok.ok-ship { background: linear-gradient(135deg, #2abdbb, #1d9a99); }
+    #orderModal .confirm-ok.ok-ship:hover { filter: brightness(1.1); }
+
+    /* ---------- Mobile ---------- */
+    @media (max-width: 992px) {
+      .cp-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s; }
+      .cp-side.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.6); }
+      .cp-burger { display: block; }
+      .cp-content { padding: 16px; }
+      .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
+    }
+  </style>
+</head>
+<body>
+<!-- Sidebar -->
+  <aside class="cp-side" id="cpSide">
+    <div class="cp-logo">
+      <div class="cp-logo-mark">A</div>
+      <div>
+        <div class="cp-logo-name">ANIVIETDB Control</div>
+        <div class="cp-logo-sub">Panel · Quản trị</div>
+      </div>
+    </div>
+    <nav class="cp-nav">
+      <div class="cp-nav-label">Tổng quan</div>
+      <a class="cp-nav-item active" data-panel="overview"><span class="ico">&#128200;</span> Thống kê</a>
+      <div class="cp-nav-label">Quản trị</div>
+      <a class="cp-nav-item" data-panel="users"><span class="ico">&#128101;</span> Người dùng</a>
+      <a class="cp-nav-item" data-panel="content"><span class="ico">&#128230;</span> Nội dung</a>
+<div class="cp-nav-label">Cửa hàng</div>
+      <a class="cp-nav-item" data-panel="products"><span class="ico">&#127891;</span> Sản phẩm</a>
+      <a class="cp-nav-item" data-panel="orders"><span class="ico">&#128722;</span> Đơn hàng</a>
+      <a class="cp-nav-item" data-panel="customers"><span class="ico">&#128101;</span> Khách hàng</a>
+<a class="cp-nav-item" data-panel="reports"><span class="ico">&#128200;</span> Báo cáo</a>
+      <div class="cp-nav-label">Hệ thống</div>
+      <a class="cp-nav-item" data-panel="updates"><span class="ico">&#128260;</span> Cập nhật</a>
+      <div class="cp-nav-label">Liên kết</div>
+      <a class="cp-nav-item" href="index.html"><span class="ico">&#127968;</span> Trang chủ</a>
+      <a class="cp-nav-item" href="sfw/index.html"><span class="ico">&#127916;</span> Xem Anime</a>
+      <a class="cp-nav-item" href="shop/"><span class="ico">&#128722;</span> Cửa hàng</a>
+    </nav>
+    <div class="cp-nav-foot">
+      <div class="cp-avatar" id="userAvatar">A</div>
+      <div class="cp-nav-foot-info">
+        <div class="cp-nav-foot-name" id="who">—</div>
+        <div class="cp-nav-foot-sub" id="userRole">Chưa xác thực</div>
+      </div>
+      <button class="cp-auth-btn" id="logoutBtn">Thoát</button>
+    </div>
+  </aside>
+
+  <!-- Main -->
+  <main class="cp-main">
+    <div class="cp-topbar">
+      <div style="display:flex;align-items:center;gap:12px;">
+        <button class="cp-burger" id="cpBurger">&#9776;</button>
+        <div class="cp-topbar-title">
+          Thống kê
+          <small>ANIVIETDB Control Panel</small>
+        </div>
+      </div>
+      <div class="cp-topbar-links">
+        <a class="cp-btn" href="shop/">&#128722; Cửa hàng</a>
+        <a class="cp-btn" href="index.html">&#127968; Trang chủ</a>
+        <a class="cp-btn" href="sfw/index.html">&#127916; Xem Anime</a>
+      </div>
+    </div>
+
+    <div class="cp-content">
+      <div id="accessDenied" style="display:none;">
+        <div class="card">
+          <div class="msg" id="deniedMsg">Bạn không có quyền truy cập.</div>
+        </div>
+      </div>
+
+      <div id="panel">
+<!-- Panel: Thống kê -->
+        <div id="panel-overview">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
+            <span style="color:var(--cp-muted);font-size:13px;" id="overviewInfo"></span>
+            <button class="cp-btn" id="refreshOverview">&#128260; Làm mới</button>
+          </div>
+          <div class="stat-grid" id="overviewStats"></div>
+          <div class="card">
+            <h2>Nội dung trang web</h2>
+            <p class="sub">Số lượng theo từng phân loại (anime / manga / light novel / gallery)</p>
+            <div class="stat-grid" id="contentStats"></div>
+          </div>
+        </div>
+
+        <!-- Panel: Người dùng -->
+        <div id="panel-users" style="display:none;">
+          <div class="card">
+            <h2>Người dùng</h2>
+            <p class="sub">Tất cả tài khoản và lần đăng nhập gần nhất</p>
+            <div class="msg" id="usersMsg"></div>
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Tên đăng nhập</th>
+                  <th>Email</th>
+                  <th>Vai trò</th>
+                  <th>Số lần tham gia</th>
+                  <th>Đăng nhập gần nhất</th>
+                  <th>Ngày tạo</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody id="usersBody"></tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Panel: Nội dung -->
+        <div id="panel-content" style="display:none;">
+          <div class="card">
+            <h2>Quản lý trang web</h2>
+            <p class="sub">Nội dung đã upload (anime / manga)</p>
+            <div class="cat-tabs" id="catTabs"></div>
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th style="width:50px;">#</th>
+                    <th>Tên</th>
+                    <th style="width:90px;">Phân loại</th>
+                    <th style="width:140px;">Trạng thái</th>
+                    <th style="width:70px;"></th>
+                  </tr>
+                </thead>
+                <tbody id="contentBody"></tbody>
+              </table>
+            </div>
+            <div class="msg" id="contentMsg"></div>
+          </div>
+        </div>
+<!-- Panel: Sản phẩm -->
+        <div id="panel-products" style="display:none;">
+          <div class="card">
+            <h2>Quản lý sản phẩm</h2>
+            <p class="sub">Figure, đồ lưu niệm, manga & Blu-ray đang bán trên ANIVIETDB Shop</p>
+            <div style="display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;">
+              <span style="color:var(--cp-muted);font-size:13px;" id="cpProductsInfo">Đang tải...</span>
+              <button class="cp-btn" id="refreshProducts">&#128260; Làm mới</button>
+            </div>
+            <div class="chip-row" id="cpCatChips">
+              <button class="chip active" data-cat="all">Tất cả</button>
+            </div>
+            <div class="product-grid" id="cpProductGrid"></div>
+            <div class="empty-shop" id="cpEmptyProducts" style="display:none;">
+              <div class="big">&#128517;</div>
+              Không có sản phẩm phù hợp.
+            </div>
+          </div>
+        </div>
+
+        <!-- Panel: Đơn hàng -->
+        <div id="panel-orders" style="display:none;">
+          <div class="card">
+            <h2>Đơn hàng</h2>
+            <p class="sub">Đơn hàng từ khách hàng (từ DB shop-system)</p>
+            <div style="display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;">
+              <span style="color:var(--cp-muted);font-size:13px;" id="ordersInfo">Đang tải...</span>
+              <button class="cp-btn" id="refreshOrders">&#128260; Làm mới</button>
+            </div>
+            <div class="table-wrap">
+              <table>
+                  <thead>
+                    <tr>
+                      <th>Mã đơn</th>
+                      <th>Khách hàng</th>
+                      <th>Sản phẩm</th>
+                      <th style="width:90px;">Số món</th>
+                      <th style="width:110px;">Tổng tiền</th>
+                      <th style="width:90px;">Trạng thái</th>
+                      <th style="width:150px;">Thời gian</th>
+                      <th style="width:110px;">Thao tác</th>
+                    </tr>
+                  </thead>
+                  <tbody id="ordersBody"></tbody>
+              </table>
+            </div>
+            <div class="msg" id="ordersMsg"></div>
+          </div>
+        </div>
+
+        <!-- Panel: Khách hàng -->
+        <div id="panel-customers" style="display:none;">
+          <div class="card">
+            <h2>Khách hàng</h2>
+            <p class="sub">Mỗi tài khoản là 1 khách hàng — số đơn / món / chi tiêu lấy từ DB shop-system</p>
+<div class="stat-grid" id="customerStats"></div>
+            <div style="display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;">
+              <span style="color:var(--cp-muted);font-size:13px;">Danh sách từ máy chủ <code>shop-system</code></span>
+              <button class="cp-btn" id="refreshCustomers">&#128260; Làm mới</button>
+            </div>
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Khách hàng</th>
+                  <th>Đơn hàng</th>
+                  <th>Món đã mua</th>
+                  <th>Tổng chi tiêu</th>
+                  <th>Điểm</th>
+                  <th>Ngày tạo</th>
+                </tr>
+              </thead>
+              <tbody id="customersBody"></tbody>
+            </table>
+          </div>
+        </div>
+
+<!-- Panel: Báo cáo -->
+        <div id="panel-reports" style="display:none;">
+          <div class="card">
+            <div style="display:flex;align-items:center;justify-content:space-between;">
+              <div>
+                <h2>Báo cáo doanh thu</h2>
+                <p class="sub">Tổng hợp doanh thu cửa hàng</p>
+              </div>
+              <button class="cp-btn" id="refreshReports">&#128260; Làm mới</button>
+            </div>
+            <div class="stat-grid" id="reportStats"></div>
+            <div class="content-box">
+              <h3>Doanh thu 7 ngày gần nhất</h3>
+              <canvas id="revenueChart" width="800" height="260" style="width:100%;height:auto;display:block;background:#0d0f14;border-radius:10px;"></canvas>
+              <div class="msg" style="margin-top:10px;">Biểu đồ cập nhật khi mở panel Báo cáo.</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Panel: Cập nhật -->
+        <div id="panel-updates" style="display:none;">
+          <div class="card">
+            <h2>Cập nhật hệ thống</h2>
+            <p class="sub">Lịch sử cập nhật phiên bản ANIVIETDB</p>
+            <div class="content-box" style="line-height:1.7;">
+              <div class="update-item">
+                <h3 style="margin:0 0 4px;">v2.4 &#8212; Lu&#7891;ng thanh to&#225;n &amp; h&#7911;y &#273;&#417;n</h3>
+                <p class="update-date">17/08/2026</p>
+                <ul>
+                  <li>&#272;&#417;n h&#224;ng c&#243; th&#234;m tr&#7841;ng th&#225;i <code>Ch&#7901; thanh to&#225;n</code> &#8212; kh&#225;ch ph&#7843;i b&#7845;m &#8220;T&#244;i &#273;&#227; chuy&#7875;n kho&#7843;n&#8221; &#273;&#7875; &#273;&#417;n v&#224;o <code>Ch&#7901; x&#225;c nh&#7853;n</code>; n&#7871;u kh&#244;ng thanh to&#225;n trong 5 ph&#250;t, &#273;&#417;n t&#7921; &#273;&#7897;ng h&#7911;y.</li>
+                  <li>Trang thanh to&#225;n m&#7899;i: QR + th&#244;ng tin &#273;&#417;n (m&#227; &#273;&#417;n, ng&#432;&#7901;i mua, s&#7843;n ph&#7849;m, t&#7893;ng ti&#7873;n), n&#250;t &#8220;T&#244;i &#273;&#227; chuy&#7875;n kho&#7843;n&#8221; ch&#7901; 5 gi&#226;y r&#7891;i quay v&#7873;.</li>
+                  <li>Kh&#225;ch c&#243; th&#7875; h&#7911;y &#273;&#417;n (<code>Ch&#7901; thanh to&#225;n</code> / <code>Ch&#7901; x&#225;c nh&#7853;n</code>) k&#232;m l&#237; do b&#7857;ng popup; admin h&#7911;y b&#7845;t k&#7923; &#273;&#417;n n&#224;o k&#232;m l&#237; do.</li>
+                  <li>&#272;&#417;n <code>&#272;&#227; h&#7911;y</code> hi&#7875;n l&#237; do h&#7911;y; stock &#273;&#432;&#7907;c ho&#224;n l&#7841;i.</li>
+                  <li>Pop-up thay cho alert tr&#236;nh duy&#7879;t khi x&#225;c nh&#7853;n / h&#7911;y &#273;&#417;n; &#273;&#417;n h&#224;ng trong shop ch&#7881; hi&#7875;n &#273;&#417;n c&#7911;a ch&#237;nh m&#236;nh.</li>
+                  <li>S&#7917;a l&#7895;i hi&#7875;n th&#7883; &#8220;s&#7843;n ph&#7849;m&#8221; trong gi&#7887; h&#224;ng.</li>
+                </ul>
+              </div>
+              <hr style="border:none;border-top:1px solid var(--cp-border);margin:16px 0;">
+              <div class="update-item">
+                <h3 style="margin:0 0 4px;">v2.3 &#8212; Thanh to&#225;n &amp; x&#225;c nh&#7853;n &#273;&#417;n h&#224;ng</h3>
+                <p class="update-date">17/08/2026</p>
+                <ul>
+                  <li>Sau khi &#273;&#7863;t h&#224;ng, kh&#225;ch chuy&#7875;n qua trang thanh to&#225;n (QR &#7911;ng h&#7897; + m&#227; &#273;&#417;n + &#273;&#7871;m ng&#432;&#7907;c th&#7901;i gian thanh to&#225;n).</li>
+                  <li>Admin b&#7845;m &#8220;X&#225;c nh&#7853;n&#8221; tr&#234;n &#273;&#417;n &#7903; tr&#7841;ng th&#225;i <code>Ch&#7901; x&#225;c nh&#7853;n</code> &#8594; &#273;&#417;n chuy&#7875;n sang <code>&#272;ang giao h&#224;ng</code>, t&#7921; &#273;&#7897;ng th&#224;nh <code>&#272;&#227; giao</code> sau 5 ph&#250;t.</li>
+                  <li>Trang shop t&#7921; c&#7853;p nh&#7853;t tr&#7841;ng th&#225;i &#273;&#417;n h&#224;ng theo th&#7901;i gian th&#7921;c.</li>
+                </ul>
+              </div>
+              <hr style="border:none;border-top:1px solid var(--cp-border);margin:16px 0;">
+              <div class="update-item">
+                <h3 style="margin:0 0 4px;">v2.2 &#8212; Shop d&#7915; li&#7879;u th&#7921;c</h3>
+                <p class="update-date">17/08/2026</p>
+                <ul>
+                  <li>S&#7843;n ph&#7849;m v&#224; &#273;&#417;n h&#224;ng l&#432;u tr&#432; tr&#234;n DB (worker <code>shop-system</code> + D1): danh m&#7909;c s&#7843;n ph&#7849;m c&#243; t&#7891;n kho (stock), mua h&#224;ng tr&#7915; stock.</li>
+                  <li>Kh&#225;ch h&#224;ng = t&#224;i kho&#7843;n: m&#7895;i user l&#224; 1 kh&#225;ch h&#224;ng, th&#7889;ng k&#234; &#273;&#417;n h&#224;ng / m&#243;n / t&#7893;ng chi ti&#234;u t&#237;nh t&#7915; DB.</li>
+                  <li>T&#7893;ng quan &amp; B&#225;o c&#225;o: doanh thu, &#273;&#417;n h&#224;ng, m&#243;n &#273;&#227; b&#225;n l&#7845;y s&#7889; li&#7879;u th&#7921;c t&#7915; DB (kh&#244;ng c&#242;n s&#7889; d&#7921; ki&#7871;n).</li>
+                  <li>Control Panel: panel &#272;&#417;n h&#224;ng m&#7899;i + qu&#7843;n l&#253; t&#7891;n kho s&#7843;n ph&#7849;m (t&#259;ng/gi&#7843;m stock).</li>
+                </ul>
+              </div>
+              <hr style="border:none;border-top:1px solid var(--cp-border);margin:16px 0;">
+              <div class="update-item">
+                <h3 style="margin:0 0 4px;">v2.1 &#8212; Shop &amp; Control Panel</h3>
+                <p class="update-date">16/08/2026</p>
+                <ul>
+                  <li>Thêm cửa hàng figure, đồ lưu niệm, manga &amp; Blu-ray (shop/index.html) — giỏ hàng, đặt hàng.</li>
+                  <li>Control Panel: sidebar điều hướng, thống kê, quản lý sản phẩm, khách hàng, báo cáo, cài đặt.</li>
+                  <li>Trang chủ thêm stage 3 giới thiệu shop với 4 sản phẩm tiêu biểu.</li>
+                  <li>Đồng bộ khách hàng vào DB D1 riêng <b>shop-system</b> qua worker <code>shop-system</code>.</li>
+                </ul>
+              </div>
+              <hr style="border:none;border-top:1px solid var(--cp-border);margin:16px 0;">
+              <div class="update-item">
+                <h3 style="margin:0 0 4px;">v2.0 &#8212; Giao diện mới</h3>
+                <p class="update-date">15/08/2026</p>
+                <ul>
+                  <li>Trang chủ Crunchyroll-style với hero 3D + poster grid + phim nổi bật.</li>
+                  <li>Nền poster-grid stage 1 áp dụng toàn bộ trang (style.css).</li>
+                  <li>Đổi tên nút &quot;Xem feature&quot; thành &quot;Xem phim nổi bật&quot;.</li>
+                </ul>
+              </div>
+              <hr style="border:none;border-top:1px solid var(--cp-border);margin:16px 0;">
+              <div class="update-item">
+                <h3 style="margin:0 0 4px;">v1.x &#8212; Nền tảng</h3>
+                <p class="update-date">Trước 15/08/2026</p>
+                <ul>
+                  <li>Đăng ký / đăng nhập qua worker auth (sginup-loginsystem).</li>
+                  <li>Sưu tầm anime, manga, manhwa, manhua, light novel &amp; gallery (SFW + NSFW).</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+<div class="confirm-overlay" id="confirmOverlay">
+    <div class="confirm-box">
+      <div class="confirm-icon">&#9888;</div>
+      <div class="confirm-title">Xóa người dùng?</div>
+      <div class="confirm-text">Bạn có chắc muốn xóa tài khoản <b id="confirmTarget"></b>? Hành động này không thể hoàn tác.</div>
+      <div class="confirm-actions">
+        <button class="confirm-btn confirm-cancel" id="confirmCancel">Hủy</button>
+        <button class="confirm-btn confirm-ok" id="confirmOk">Xóa</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Popup xác nhận / hủy đơn -->
+  <div class="confirm-overlay" id="orderModal">
+    <div class="confirm-box">
+      <div class="confirm-icon">&#128722;</div>
+      <div class="confirm-title" id="orderModalTitle">Xác nhận đơn</div>
+      <div class="confirm-text" id="orderModalText"></div>
+      <textarea id="orderModalReason" class="cp-reason" placeholder="Nhập lí do hủy (bắt buộc)..." rows="3" style="display:none;"></textarea>
+      <div class="cp-reason-err" id="orderModalReasonErr">⚠️ Vui lòng nhập lí do hủy đơn</div>
+      <div class="confirm-actions">
+        <button class="confirm-btn confirm-cancel" id="orderModalCancel">Đóng</button>
+        <button class="confirm-btn confirm-ok" id="orderModalOk">Xác nhận</button>
+      </div>
+    </div>
+  </div>
+<script src="signup-loginsystem.js?v=9"></script>
+  <script>
+    var whoEl = document.getElementById('who');
+    var roleEl = document.getElementById('userRole');
+    var avatarEl = document.getElementById('userAvatar');
+    var panel = document.getElementById('panel');
+    var denied = document.getElementById('accessDenied');
+
+var confirmOverlay = document.getElementById('confirmOverlay');
+    var confirmCancel = document.getElementById('confirmCancel');
+    var confirmOk = document.getElementById('confirmOk');
+
+var PANELS = ['overview', 'users', 'content', 'products', 'orders', 'customers', 'reports', 'updates'];
+    var currentCat = 'anime';
+
+    var IMG = "https://phim.nguonc.com/public/images/";
+    var PRODUCTS = [];
+    var SHOP_API = localStorage.getItem("anivietdb-shop-api") || "https://shop-system.npgia-himlam.workers.dev/";
+    var shopCustomers = [];
+    var shopOrders = [];
+    var cpStats = null;
+
+    function api(url, init) {
+      var base = SHOP_API.replace(/\/$/, "");
+      var token = AuthSystem.getToken();
+      init = init || {};
+      init.headers = init.headers || {};
+      if (token) init.headers["Authorization"] = "Bearer " + token;
+      return fetch(base + url, init).then(function (r) {
+        return r.json().then(function (data) {
+          if (!r.ok) { var e = new Error(data.error || ("HTTP " + r.status)); e.status = r.status; e.data = data; throw e; }
+          return data;
+        });
+      });
+    }
+
+    function fmt(n) { return n.toLocaleString("vi-VN") + "&#273;"; }
+    function $(s) { return document.querySelector(s); }
+    function $$(s) { return document.querySelectorAll(s); }
+
+    function closeConfirm() {
+      confirmOverlay.classList.remove('active');
+      confirmOk.onclick = null;
+    }
+    confirmCancel.addEventListener('click', closeConfirm);
+    confirmOverlay.addEventListener('click', function (e) { if (e.target === confirmOverlay) closeConfirm(); });
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeConfirm(); });
+
+    function switchPanel(name) {
+      $$(".cp-nav-item[data-panel]").forEach(function (a) { a.classList.toggle('active', a.dataset.panel === name); });
+      PANELS.forEach(function (n) {
+        var el = $('#panel-' + n);
+        if (el) el.style.display = n === name ? 'block' : 'none';
+      });
+      var t = document.querySelector('.cp-topbar-title');
+      if (t) {
+var map = { overview: 'Thống kê', users: 'Người dùng', content: 'Nội dung', products: 'Sản phẩm', orders: 'Đơn hàng', customers: 'Khách hàng', reports: 'Báo cáo', updates: 'Cập nhật' };
+        t.childNodes[0].textContent = map[name] || 'Thống kê';
+      }
+      if (name === 'overview') renderOverview();
+      if (name === 'products') loadShopProducts();
+      if (name === 'orders') loadShopOrders();
+      if (name === 'customers') loadShopCustomers();
+      if (name === 'reports') renderReports();
+if (name === 'updates') renderUpdates();
+    }
+
+    function fmtTime(iso) {
+      if (!iso) return '—';
+      try {
+        var d = new Date(iso);
+        return d.toLocaleString('vi-VN', { hour12: false });
+      } catch (e) { return iso; }
+    }
+
+    function esc(s) {
+      return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+      });
+    }
+function renderUsers(users) {
+      var body = document.getElementById('usersBody');
+      body.innerHTML = users.map(function (u) {
+        var isSelf = u.id === (AuthSystem.getUser() || {}).id;
+        var badge = u.role === 'admin' ? '<span class="badge badge-admin">ADMIN</span>' : '<span class="badge badge-user">USER</span>';
+        var del = u.role === 'admin'
+          ? '<button class="btn-del" disabled title="Không thể xóa Admin">—</button>'
+          : '<button class="btn-del" data-id="' + u.id + '">Xóa</button>';
+        return '<tr>' +
+          '<td>' + u.id + '</td>' +
+          '<td>' + esc(u.username) + (isSelf ? ' <span style="color:#7ee787;font-size:11px">(bạn)</span>' : '') + '</td>' +
+          '<td>' + esc(u.email) + '</td>' +
+          '<td>' + badge + '</td>' +
+          '<td>' + (u.login_count || 0) + '</td>' +
+          '<td>' + fmtTime(u.last_login_at) + '</td>' +
+          '<td>' + fmtTime(u.created_at) + '</td>' +
+          '<td>' + del + '</td>' +
+          '</tr>';
+      }).join('');
+      body.querySelectorAll('.btn-del[data-id]').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          var id = btn.getAttribute('data-id');
+          var row = btn.closest('tr');
+          var name = row ? row.cells[1].textContent.trim() : '';
+          confirmDelete(id, name);
+        });
+      });
+    }
+
+    function confirmDelete(id, name) {
+      var u = AuthSystem.getUser();
+      if (u && String(u.id) === String(id)) { return; }
+      document.getElementById('confirmTarget').textContent = name || 'ID ' + id;
+      confirmOverlay.classList.add('active');
+      confirmOk.onclick = function () {
+        confirmOverlay.classList.remove('active');
+        deleteUser(id);
+      };
+    }
+
+    function deleteUser(id) {
+      AuthSystem.adminDeleteUser(id).then(function () {
+        loadUsers();
+      }).catch(function (e) {
+        if (!handleAuthFail(e)) document.getElementById('usersMsg').textContent = 'Lỗi: ' + e.message;
+      });
+    }
+
+    function handleAuthFail(e) {
+      console.log('[control-panel] FAIL status=', e && e.status, 'msg=', e && e.message, 'data=', e && e.data, 'base=', AuthSystem.baseUrl);
+      if (e && e.status === 401) {
+        AuthSystem.clearSession();
+        return false;
+      }
+      return false;
+    }
+
+    function loadUsers() {
+      var msg = document.getElementById('usersMsg');
+      msg.textContent = 'Đang tải...';
+      AuthSystem.adminUsers().then(function (data) {
+        msg.textContent = 'Tổng cộng ' + data.users.length + ' tài khoản.';
+        renderUsers(data.users);
+      }).catch(function (e) {
+        msg.textContent = 'Lỗi tải danh sách: ' + e.message +
+          ' (base=' + AuthSystem.baseUrl + ', token=' + (AuthSystem.getToken() ? 'có' : 'KHÔNG') + ')';
+        handleAuthFail(e);
+      });
+    }
+
+    function loadContent() {
+      var CATS = [
+        { key: 'anime', label: 'Anime' },
+        { key: 'manga', label: 'Manga' },
+        { key: 'manhwa', label: 'Manhwa' },
+        { key: 'manhua', label: 'Manhua' },
+        { key: 'light-novel', label: 'Light Novel' },
+        { key: 'gallery', label: 'Galleries' }
+      ];
+      var byCat = {};
+      CATS.forEach(function (c) { byCat[c.key] = []; });
+      var animeErr = null;
+      var mangaErr = null;
+      var metaErr = null;
+      var metaById = {};
+
+      function push(cat, name, nsfw, status, slug, animePages, id) {
+        byCat[cat].push({
+          id: id || '',
+          name: name || '(không tên)',
+          nsfw: !!nsfw,
+          status: status || '',
+          slug: slug || '',
+          animePages: animePages || []
+        });
+      }
+
+      var p1 = fetch('data/manga_map.json').then(function (r) {
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.json();
+      })
+        .then(function (arr) {
+          (Array.isArray(arr) ? arr : []).forEach(function (a) {
+            push('anime', a.titleVN || a.titleEN || a.slug, a.nsfw, a.status, a.slug, a.animePages);
+          });
+        })
+        .catch(function (e) { animeErr = e; });
+      var p2 = fetch('data/manga-sources.json').then(function (r) {
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.json();
+      })
+        .then(function (arr) {
+          (Array.isArray(arr) ? arr : []).forEach(function (m) {
+            var cat = m.type === 'gallery' ? 'gallery' : 'manga';
+            push(cat, m.titleVN || m.titleEN || m.slug, m.nsfw, m.status, m.slug, [], m.id);
+          });
+        })
+        .catch(function (e) { mangaErr = e; });
+      var p3 = fetch('data/manga-metadata.json').then(function (r) {
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.json();
+      })
+        .then(function (arr) {
+          (Array.isArray(arr) ? arr : []).forEach(function (e) {
+            if (e && e.metadata && e.metadata.status) metaById[e.id] = e.metadata.status;
+          });
+        })
+        .catch(function (e) { metaErr = e; });
+
+      Promise.all([p1, p2, p3]).then(function () {
+        Object.keys(byCat).forEach(function (cat) {
+          byCat[cat].forEach(function (it) {
+            if (!it.status && metaById[it.id]) it.status = metaById[it.id];
+          });
+        });
+        var msg = document.getElementById('contentMsg');
+        if (animeErr || mangaErr || metaErr) {
+          msg.textContent = 'Lỗi tải nội dung: ' +
+            (animeErr ? ('manga_map.json → ' + animeErr.message) : '') +
+            (animeErr && (mangaErr || metaErr) ? ' | ' : '') +
+            (mangaErr ? ('manga-sources.json → ' + mangaErr.message) : '') +
+            (mangaErr && metaErr ? ' | ' : '') +
+            (metaErr ? ('manga-metadata.json → ' + metaErr.message) : '') +
+            '. Nếu mở file trực tiếp (file://), hãy dùng Live Server.';
+          msg.style.color = '#f85149';
+        } else {
+          msg.textContent = '';
+          msg.style.color = '';
+        }
+
+        var statsEl = document.getElementById('contentStats');
+        if (statsEl) {
+          statsEl.innerHTML = CATS.map(function (c) {
+            return '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#a3419f;"></span> ' + c.label + '</span><span class="stat-value">' + byCat[c.key].length + '</span></div>';
+          }).join('');
+        }
+
+        var tabsWrap = document.getElementById('catTabs');
+        tabsWrap.innerHTML = CATS.map(function (c, i) {
+          return '<button class="cat-tab' + (i === 0 ? ' active' : '') + '" data-cat="' + c.key + '">' + c.label + '</button>';
+        }).join('');
+
+        var body = document.getElementById('contentBody');
+
+        function itemLink(cat, item) {
+          if (cat === 'anime') {
+            var p = item.animePages && item.animePages[0];
+            if (p) return (p.indexOf('nsfw/') === 0 ? '' : 'sfw/') + p;
+            return (item.nsfw ? 'nsfw/' : 'sfw/') + 'anime/' + item.slug + '/';
+          }
+          if (cat === 'gallery') return 'sfw/galleries/' + item.slug + '/index.html';
+          return 'sfw/manga/' + item.slug + '/index.html';
+        }
+
+        function renderTable() {
+          var STATUS_VN = { ongoing: 'Đang ra', completed: 'Hoàn thành', hiatus: 'Tạm ngưng', cancelled: 'Bị hủy' };
+          var items = byCat[currentCat];
+          body.innerHTML = items.length ? items.map(function (it, i) {
+            var tag = it.nsfw
+              ? '<span class="nsfw-tag">NSFW</span>'
+              : '<span class="sfw-tag">SFW</span>';
+            var status = it.status ? (STATUS_VN[it.status] || it.status) : '—';
+            return '<tr>' +
+              '<td>' + (i + 1) + '</td>' +
+              '<td>' + esc(it.name) + '</td>' +
+              '<td>' + tag + '</td>' +
+              '<td>' + esc(status) + '</td>' +
+              '<td style="width:70px;"><a class="btn-go" href="' + esc(itemLink(currentCat, it)) + '" target="_blank">Xem</a></td>' +
+              '</tr>';
+          }).join('') : '<tr><td colspan="5" class="msg">Chưa có dữ liệu</td></tr>';
+        }
+
+        tabsWrap.addEventListener('click', function (e) {
+          var btn = e.target.closest('.cat-tab');
+          if (!btn) return;
+          tabsWrap.querySelectorAll('.cat-tab').forEach(function (t) { t.classList.remove('active'); });
+          btn.classList.add('active');
+          currentCat = btn.getAttribute('data-cat');
+          renderTable();
+        });
+
+        renderTable();
+      });
+    }
+// ---------- Shop: Sản phẩm ----------
+    var cpCurrentCat = 'all';
+    var CATS = [];
+
+    function cpCardHTML(p) {
+      var stockCls = p.stock <= 3 ? 'low' : 'ok';
+      var stockTxt = p.stock <= 3 ? 'Sắp hết (' + p.stock + ')' : 'Còn ' + p.stock;
+      var tag = '<span class="product-tag">' + p.cat + '</span>';
+      var sale = p.old ? ' <span class="price-old">' + fmt(p.old) + '</span>' : '';
+      return '<div class="product-card" data-id="' + p.id + '">' +
+        '<div class="product-thumb">' + tag +
+        '<img src="' + p.img + '" alt="' + p.name + '" loading="lazy">' +
+        '</div>' +
+        '<div class="product-body">' +
+        '<div class="product-anime">' + p.anime + '</div>' +
+        '<div class="product-name">' + p.name + '</div>' +
+        '<div class="product-price"><span class="price-now">' + fmt(p.price) + '</span>' + sale + '</div>' +
+        '<div class="product-stock ' + stockCls + '" id="cpStock-' + p.id + '">' + stockTxt + '</div>' +
+        '<div class="product-stock" style="display:flex;gap:8px;align-items:center;margin-top:2px;">' +
+        '<button class="cp-btn" data-stock="' + p.id + '" data-delta="-1" style="padding:3px 10px;font-size:12px;">-1</button>' +
+        '<button class="cp-btn" data-stock="' + p.id + '" data-delta="1" style="padding:3px 10px;font-size:12px;">+1</button>' +
+        '<button class="cp-btn" data-stock="' + p.id + '" data-delta="5" style="padding:3px 10px;font-size:12px;">+5</button>' +
+        '</div>' +
+        '</div></div>';
+    }
+
+    function renderCpProducts(filterCat, query) {
+      filterCat = filterCat || 'all';
+      query = (query || '').toLowerCase();
+      var list = PRODUCTS.filter(function (p) {
+        return (filterCat === 'all' || p.cat === filterCat) &&
+          (!query || p.name.toLowerCase().indexOf(query) !== -1 || p.anime.toLowerCase().indexOf(query) !== -1);
+      });
+      $('#cpProductGrid').innerHTML = list.map(cpCardHTML).join('');
+      $('#cpEmptyProducts').style.display = list.length ? 'none' : 'block';
+    }
+
+    function loadShopProducts() {
+      var info = $('#cpProductsInfo');
+      if (info) info.textContent = 'Đang tải...';
+      api('/api/shop/products').then(function (d) {
+        PRODUCTS = Array.isArray(d.products) ? d.products : [];
+        var seen = [];
+        PRODUCTS.forEach(function (p) { if (seen.indexOf(p.cat) === -1) seen.push(p.cat); });
+        CATS = seen;
+        if (info) info.textContent = PRODUCTS.length + ' sản phẩm';
+        var wrap = $('#cpCatChips');
+        wrap.innerHTML = '<button class="chip active" data-cat="all">Tất cả <span style="opacity:.7">(' + PRODUCTS.length + ')</span></button>';
+        CATS.forEach(function (c) {
+          var n = PRODUCTS.filter(function (p) { return p.cat === c; }).length;
+          var b = document.createElement('button');
+          b.className = 'chip';
+          b.dataset.cat = c;
+          b.innerHTML = c + " <span style='opacity:.7'>(" + n + ")</span>";
+          wrap.appendChild(b);
+        });
+        renderCpProducts('all', '');
+      }).catch(function (e) {
+        $('#cpEmptyProducts').style.display = 'block';
+        $('#cpEmptyProducts').innerHTML = '<div class="big">&#128517;</div>Lỗi tải sản phẩm: ' + esc(e.message);
+      });
+    }
+
+    function setStock(id, delta) {
+      var btn = $('#cpProductGrid').querySelector('[data-stock="' + id + '"][data-delta="' + delta + '"]');
+      if (btn) { btn.disabled = true; }
+      api('/api/shop/products/' + id, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ delta: delta })
+      }).then(function (d) {
+        var p = PRODUCTS.find(function (x) { return x.id === d.product.id; });
+        if (p) { p.stock = d.product.stock; }
+        var el = $('#cpStock-' + id);
+        if (el) {
+          var cls = d.product.stock <= 3 ? 'low' : 'ok';
+          var txt = d.product.stock <= 3 ? 'Sắp hết (' + d.product.stock + ')' : 'Còn ' + d.product.stock;
+          el.className = 'product-stock ' + cls;
+          el.textContent = txt;
+        }
+      }).catch(function (e) {
+        alert('Lỗi cập nhật stock: ' + e.message);
+      }).finally(function () {
+        if (btn) { btn.disabled = false; }
+      });
+    }
+
+    $('#cpProductGrid').addEventListener('click', function (e) {
+      var b = e.target.closest('[data-stock]');
+      if (!b) return;
+      setStock(Number(b.dataset.stock), Number(b.dataset.delta));
+    });
+
+    // ---------- Shop: Khách hàng ----------
+    function renderCustomers() {
+      var bought = shopCustomers.length ? shopCustomers.filter(function (c) { return (c.orders_count || 0) > 0; }).length : 0;
+      var totalSpent = shopCustomers.reduce(function (s, c) { return s + (c.total_spent || 0); }, 0);
+      $('#customerStats').innerHTML =
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#2abdbb;"></span> Tổng khách hàng (user)</span><span class="stat-value">' + (shopCustomers.length || 0) + '</span></div>' +
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#ff5e00;"></span> Đã mua hàng</span><span class="stat-value">' + bought + '</span></div>' +
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#a3419f;"></span> Tổng chi tiêu</span><span class="stat-value">' + fmt(totalSpent) + '</span></div>';
+
+      if (!shopCustomers.length) {
+        $('#customersBody').innerHTML = '<tr><td colspan="7" style="text-align:center;color:var(--cp-muted);padding:24px;">Chưa có dữ liệu khách hàng từ máy chủ shop-system. Bấm nút đồng bộ phía dưới.</td></tr>';
+        return;
+      }
+      $('#customersBody').innerHTML = shopCustomers.map(function (c, i) {
+        var name = esc(c.name || 'Khách');
+        var badge = c.role === 'admin' ? '<span class="badge badge-admin">ADMIN</span>' : '<span class="badge badge-user">USER</span>';
+        var spent = (c.total_spent || 0) > 0 ? fmt(c.total_spent) : '<span style="color:var(--cp-muted);">N/A</span>';
+        var items = c.items_count || 0;
+        return '<tr>' +
+          '<td>' + c.id + '</td>' +
+          '<td>' + name + badge + (c.email ? '<div style="font-size:11px;color:var(--cp-muted);">' + esc(c.email) + '</div>' : '') + '</td>' +
+          '<td>' + (c.orders_count || 0) + '</td>' +
+          '<td>' + items + '</td>' +
+          '<td>' + spent + '</td>' +
+          '<td>&#11088; ' + Number(c.points || 0).toLocaleString('vi-VN') + '</td>' +
+          '<td>' + fmtTime(c.created_at) + '</td>' +
+          '</tr>';
+      }).join('');
+    }
+
+    function loadShopCustomers() {
+      if (!AuthSystem.getToken()) return;
+      api('/api/shop/customers').then(function (d) {
+        shopCustomers = Array.isArray(d.customers) ? d.customers : [];
+        renderCustomers();
+      }).catch(function () { renderCustomers(); });
+    }
+
+    $('#refreshCustomers').addEventListener('click', function () {
+      var btn = this;
+      btn.innerHTML = '&#8987; Đang đồng bộ…';
+      loadShopCustomers();
+      setTimeout(function () { btn.innerHTML = '&#128260; Làm mới'; }, 1200);
+    });
+
+    // ---------- Shop: Đơn hàng ----------
+    function renderShopOrders() {
+      $('#ordersInfo').textContent = shopOrders.length ? 'Tổng cộng ' + shopOrders.length + ' đơn hàng.' : 'Chưa có đơn hàng nào.';
+      if (!shopOrders.length) {
+        $('#ordersBody').innerHTML = '<tr><td colspan="8" style="text-align:center;color:var(--cp-muted);padding:24px;">Chưa có đơn hàng.</td></tr>';
+        return;
+      }
+      $('#ordersBody').innerHTML = shopOrders.map(function (o) {
+        var items = (o.items || []).map(function (it) { return it.name + ' x' + it.q; }).join(', ');
+        var action = '';
+        if (o.status === 'Chờ xác nhận') {
+          action = '<div style="display:flex;gap:6px;flex-wrap:wrap;">' +
+            '<button class="cp-btn cp-btn-sm" data-ship="' + o.id + '" title="Xác nhận và chuyển sang giao hàng">&#128666; Xác nhận</button>' +
+            '<button class="cp-btn cp-btn-sm cp-btn-danger" data-cancel="' + o.id + '" title="Hủy đơn (kèm lí do)">&#10060; Hủy</button>' +
+            '</div>';
+        } else if (o.status === 'Chờ thanh toán') {
+          action = '<button class="cp-btn cp-btn-sm cp-btn-danger" data-cancel="' + o.id + '" title="Hủy đơn (kèm lí do)">&#10060; Hủy</button>';
+        } else if (o.status === 'Đang giao hàng') {
+          action = '<div style="display:flex;gap:6px;flex-wrap:wrap;">' +
+            '<span style="font-size:11px;color:var(--cp-muted);align-self:center;">&#128666; Đang giao&hellip;</span>' +
+            '<button class="cp-btn cp-btn-sm cp-btn-danger" data-cancel="' + o.id + '" title="Hủy đơn (kèm lí do)">&#10060; Hủy</button>' +
+            '</div>';
+        } else if (o.status === 'Đã giao') {
+          action = '<span style="font-size:11px;color:#2abdbb;">&#9989; Đã giao</span>';
+        } else if (o.status === 'Đã hủy') {
+          action = '<span style="font-size:11px;color:#ff8a8a;">&#10060; Đã hủy</span>';
+        }
+        var reasonRow = (o.status === 'Đã hủy' && o.cancel_reason)
+          ? '<div style="font-size:11px;color:#ff8a8a;margin-top:3px;">Lí do: ' + esc(o.cancel_reason) + '</div>'
+          : '';
+        return '<tr>' +
+          '<td>' + o.code + '</td>' +
+          '<td>' + esc(o.customer_name) + (o.customer_email ? '<div style="font-size:11px;color:var(--cp-muted);">' + esc(o.customer_email) + '</div>' : '') + '</td>' +
+          '<td>' + esc(items) + '</td>' +
+          '<td>' + o.item_count + '</td>' +
+          '<td>' + fmt(o.total) + '</td>' +
+          '<td>' + esc(o.status) + reasonRow + '</td>' +
+          '<td>' + fmtTime(o.created_at) + '</td>' +
+          '<td>' + action + '</td>' +
+          '</tr>';
+      }).join('');
+    }
+
+    function loadShopOrders() {
+      if (!AuthSystem.getToken()) return;
+      $('#ordersMsg').textContent = 'Đang tải...';
+      api('/api/shop/orders/all').then(function (d) {
+        shopOrders = Array.isArray(d.orders) ? d.orders : [];
+        renderShopOrders();
+        $('#ordersMsg').textContent = '';
+      }).catch(function (e) {
+        $('#ordersMsg').textContent = 'Lỗi tải đơn hàng: ' + e.message;
+      });
+    }
+
+    $('#refreshOrders').addEventListener('click', loadShopOrders);
+    $('#refreshProducts').addEventListener('click', loadShopProducts);
+    $('#refreshOverview').addEventListener('click', renderOverview);
+    $('#refreshReports').addEventListener('click', function () {
+      api('/api/shop/stats').then(function (d) {
+        cpStats = d.stats;
+        renderReports();
+      }).catch(function (e) {
+        $('#reportStats').innerHTML = '<div class="msg err">Lỗi tải lại: ' + esc(e.message) + '</div>';
+      });
+    });
+
+    // ---------- Popup xác nhận / hủy đơn ----------
+    function openOrderModal(type, id) {
+      var order = shopOrders.filter(function (o) { return o.id === id; })[0];
+      var label = order ? order.code : ('#' + id);
+      var modal = document.getElementById('orderModal');
+      document.getElementById('orderModalTitle').textContent =
+        type === 'ship' ? 'Xác nhận đơn ' + label : 'Hủy đơn ' + label;
+      document.getElementById('orderModalText').textContent =
+        type === 'ship'
+          ? 'Xác nhận đơn ' + label + ' đã thanh toán và chuyển sang giao hàng?'
+          : 'Đơn ' + label + ' sẽ bị hủy và trả lại số lượng sản phẩm vào kho. Nhập lí do hủy:';
+      document.getElementById('orderModalOk').innerHTML =
+        type === 'ship' ? '&#128666; Xác nhận' : '&#10060; Xác nhận hủy';
+      document.getElementById('orderModalOk').className =
+        'confirm-btn confirm-ok' + (type === 'ship' ? ' ok-ship' : '');
+      document.getElementById('orderModalReason').style.display =
+        type === 'ship' ? 'none' : 'block';
+      document.getElementById('orderModalReason').value = '';
+      document.getElementById('orderModalReasonErr').classList.remove('show');
+      modal.classList.add('active');
+      modal.dataset.type = type;
+      modal.dataset.id = id;
+      setTimeout(function () {
+        if (type === 'cancel') document.getElementById('orderModalReason').focus();
+      }, 120);
+    }
+    function closeOrderModal() {
+      document.getElementById('orderModal').classList.remove('active');
+    }
+
+    document.getElementById('orderModalCancel').addEventListener('click', closeOrderModal);
+    document.getElementById('orderModalReason').addEventListener('input', function () {
+      if (this.value.trim()) document.getElementById('orderModalReasonErr').classList.remove('show');
+    });
+    document.getElementById('orderModal').addEventListener('click', function (e) {
+      if (e.target === this) closeOrderModal();
+    });
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeOrderModal(); });
+    document.getElementById('orderModalOk').addEventListener('click', function () {
+      var modal = document.getElementById('orderModal');
+      var type = modal.dataset.type;
+      var id = Number(modal.dataset.id);
+      var order = shopOrders.filter(function (o) { return o.id === id; })[0];
+      var label = order ? order.code : ('#' + id);
+      var btn = this;
+      btn.disabled = true;
+      var url = type === 'ship'
+        ? '/api/shop/orders/' + id + '/ship'
+        : '/api/shop/orders/' + id + '/admin-cancel';
+      var init = { method: 'PATCH' };
+      if (type === 'cancel') {
+        var reason = document.getElementById('orderModalReason').value.trim();
+        if (!reason) {
+          document.getElementById('orderModalReasonErr').classList.add('show');
+          document.getElementById('orderModalReason').focus();
+          btn.disabled = false;
+          return;
+        }
+        init.headers = { 'Content-Type': 'application/json' };
+        init.body = JSON.stringify({ reason: reason });
+      }
+      api(url, init).then(function (d) {
+        closeOrderModal();
+        $('#ordersMsg').textContent = type === 'ship'
+          ? 'Đã xác nhận ' + label + ' → Đang giao hàng.'
+          : 'Đã hủy ' + label + '.';
+        setTimeout(function () { $('#ordersMsg').textContent = ''; }, 3000);
+        loadShopOrders();
+      }).catch(function (e2) {
+        $('#ordersMsg').textContent = 'Lỗi: ' + e2.message;
+      }).finally(function () { btn.disabled = false; });
+    });
+
+    $('#ordersBody').addEventListener('click', function (e) {
+      var ship = e.target.closest('[data-ship]');
+      var cancel = e.target.closest('[data-cancel]');
+      if (ship) openOrderModal('ship', Number(ship.dataset.ship));
+      if (cancel) openOrderModal('cancel', Number(cancel.dataset.cancel));
+    });
+
+    // ---------- Shop: Cập nhật ----------
+    function renderUpdates() {}
+
+    // ---------- Shop: Báo cáo ----------
+    function renderReports() {
+      if (!cpStats) { $('#reportStats').innerHTML = '<div class="msg">Đang tải... (bấm "Thống kê" để tải lại)</div>'; return; }
+      var avg = cpStats.orders > 0 ? Math.round(cpStats.revenue / cpStats.orders) : 0;
+      $('#reportStats').innerHTML =
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#ff5e00;"></span> Doanh thu (tổng)</span><span class="stat-value">' + fmt(cpStats.revenue) + '</span></div>' +
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#2abdbb;"></span> Đơn hàng</span><span class="stat-value">' + cpStats.orders + '</span></div>' +
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#f5c518;"></span> Món đã bán</span><span class="stat-value">' + cpStats.items_sold + '</span></div>' +
+        '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#ff8a8a;"></span> Giá trị đơn TB</span><span class="stat-value">' + avg + '<small>đ</small></span></div>';
+      api('/api/shop/reports').then(function (d) {
+        drawRevenueChart(d.series || []);
+      }).catch(function () {
+        var cv = $('#revenueChart');
+        if (cv) { cv.style.display = 'none'; }
+      });
+    }
+
+    function drawRevenueChart(series) {
+      var cv = $('#revenueChart');
+      if (!cv || !series.length) return;
+      cv.style.display = 'block';
+      var ctx = cv.getContext('2d');
+      var W = cv.width, H = cv.height;
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = '#0d0f14';
+      ctx.fillRect(0, 0, W, H);
+
+      var max = 1;
+      series.forEach(function (s) { if (s.revenue > max) max = s.revenue; });
+      var padL = 64, padR = 12, padT = 18, padB = 34;
+      var bw = (W - padL - padR) / series.length;
+      var barW = Math.min(44, bw * 0.6);
+      ctx.font = '11px Segoe UI, sans-serif';
+      series.forEach(function (s, i) {
+        var x = padL + i * bw + (bw - barW) / 2;
+        var h = max > 0 ? (s.revenue / max) * (H - padT - padB) : 2;
+        var y = H - padB - h;
+        ctx.fillStyle = s.revenue > 0 ? 'rgba(255,94,0,.85)' : 'rgba(255,255,255,.08)';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(x, y, barW, h, 5); else ctx.rect(x, y, barW, h);
+        ctx.fill();
+        if (s.revenue > 0) {
+          ctx.fillStyle = '#fff';
+          ctx.textAlign = 'center';
+          ctx.fillText((s.revenue / 1000).toFixed(0) + 'K', x + barW / 2, y - 5);
+        }
+        ctx.fillStyle = '#8b90a5';
+        ctx.fillText(s.day.slice(5), x + barW / 2, H - 12);
+      });
+      ctx.strokeStyle = 'rgba(255,255,255,.08)';
+      ctx.beginPath();
+      ctx.moveTo(padL - 6, padT);
+      ctx.lineTo(padL - 6, H - padB);
+      ctx.stroke();
+    }
+
+// ---------- Overview ----------
+    function renderOverview() {
+      $('#overviewStats').innerHTML = '<div class="msg">Đang tải thống kê...</div>';
+      if (!AuthSystem.getToken()) { $('#overviewStats').innerHTML = '<div class="msg">Cần đăng nhập để xem thống kê.</div>'; return; }
+      api('/api/shop/stats').then(function (d) {
+        cpStats = d.stats;
+        var s = d.stats;
+        var lowCls = s.low_stock > 0 ? 'down' : 'up';
+        var lowTxt = s.low_stock > 0 ? '▼ ' + s.low_stock + ' sắp hết' : '▲ đủ hàng';
+        $('#overviewInfo').textContent = 'Cập nhật: ' + new Date().toLocaleTimeString('vi-VN');
+        $('#overviewStats').innerHTML =
+          '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#ff5e00;"></span> Doanh thu (tổng)</span><span class="stat-value">' + fmt(s.revenue) + '</span></div>' +
+          '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#2abdbb;"></span> Đơn hàng</span><span class="stat-value">' + s.orders + '</span></div>' +
+          '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#a3419f;"></span> Sản phẩm trong kho</span><span class="stat-value">' + s.products + '</span><span class="stat-delta ' + lowCls + '">' + lowTxt + '</span></div>' +
+          '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#f5c518;"></span> Khách hàng (user)</span><span class="stat-value">' + s.customers + '</span></div>' +
+          '<div class="stat-card"><span class="stat-label"><span class="dot" style="background:#f9d423;"></span> Tổng điểm đã tích</span><span class="stat-value">' + Number(s.total_points || 0).toLocaleString('vi-VN') + '</span></div>';
+      }).catch(function (e) {
+        $('#overviewStats').innerHTML = '<div class="msg err">Lỗi tải thống kê: ' + esc(e.message) + '</div>';
+      });
+    }
+
+    // ---------- Boot ----------
+    function boot() {
+      var hasToken = !!AuthSystem.getToken();
+      console.log('[control-panel] boot, hasToken=', hasToken);
+      AuthSystem.me().then(function (user) {
+        console.log('[control-panel] me() ->', user ? user.username + '/' + user.role : null);
+        if (!user) {
+          panel.style.display = 'none';
+          denied.style.display = 'block';
+          var msg = hasToken
+            ? 'Phiên đã hết hạn hoặc không thể kết nối máy chủ. <a href="login.html">Đăng nhập lại</a> hoặc <a href="#" id="retryLink">thử lại</a>.'
+            : 'Bạn chưa đăng nhập. <a href="login.html">Đăng nhập bằng tài khoản Admin</a>.';
+          document.getElementById('deniedMsg').innerHTML = msg;
+          var retry = document.getElementById('retryLink');
+          if (retry) retry.addEventListener('click', function (e) { e.preventDefault(); boot(); });
+          return;
+        }
+        whoEl.textContent = user.username || user.email || '';
+        roleEl.textContent = user.role === 'admin' ? 'Admin' : 'Thành viên';
+        avatarEl.textContent = (user.username || 'A').charAt(0).toUpperCase();
+        if (user.role !== 'admin') {
+          denied.style.display = 'block';
+          return;
+        }
+panel.style.display = 'block';
+        renderOverview();
+        loadUsers();
+        loadContent();
+        loadShopCustomers();
+        loadShopOrders();
+      });
+    }
+
+    boot();
+    window.addEventListener('pageshow', function (e) {
+      if (e.persisted) boot();
+    });
+
+    document.getElementById('logoutBtn').addEventListener('click', function () {
+      AuthSystem.logout().then(function () { window.location.href = 'login.html'; });
+    });
+
+    // Panel switching
+    $$('.cp-nav-item[data-panel]').forEach(function (a) {
+      a.addEventListener('click', function () {
+        switchPanel(a.dataset.panel);
+        $('#cpSide').classList.remove('open');
+      });
+    });
+    $('#cpBurger').addEventListener('click', function () { $('#cpSide').classList.toggle('open'); });
+
+    // Products filter (chips are built in loadShopProducts; wire up clicks here)
+    (function () {
+      $('#cpCatChips').addEventListener('click', function (e) {
+        var chip = e.target.closest('.chip');
+        if (!chip) return;
+        $('#cpCatChips .chip').forEach(function (c) { c.classList.remove('active'); });
+        chip.classList.add('active');
+        cpCurrentCat = chip.dataset.cat;
+        renderCpProducts(cpCurrentCat, '');
+      });
+    })();
+  </script>
+</body>
+</html>

endpoint_API_sercret

@@ -0,0 +1,2 @@
+Client ID:"personal-client-ff37a307-28e2-4a7c-9472-d21ae7d95918-fd5e22d2"
+Client Secret:"v41E0aYeKyl8CQiSKqK8014c5URiYM58"

index.html

@@ -1,19 +1,1110 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="ANIVIETDB — Vương Tầm Thế Giới. Một trang web, vô vàn thế giới nội dung anime, manga, light novel."
+    />
+    <meta name="theme-color" content="#151515" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23151515'/><text x='50' y='68' font-size='52' font-family='Arial' font-weight='bold' fill='%23ff5e00' text-anchor='middle'>A</text></svg>"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <title>ANIVIETDB · Vươn Tầm Thế Giới</title>
+    <style>
+      :root {
+        --cr-bg: #151515;
+        --cr-ink: #ffffff;
+        --cr-muted: #8c8c8c;
+        --cr-subtle: #bbbbbb;
+        --cr-border: #2a2a2a;
+        --cr-orange: #ff5e00;
+        --cr-orange-hover: #ff7a2a;
+        --cr-accent: #2abdbb;
+      }
+      html,
+      body {
+        height: 100%;
+        overflow-x: hidden;
+      }
+      body {
+        background: var(--cr-bg);
+        color: var(--cr-ink);
+        font-family: "Inter", system-ui, -apple-system, sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+      #bg3d {
+        position: fixed;
+        inset: 0;
+        z-index: 0;
+        pointer-events: none;
+      }
+
+      /* ----- Crunchyroll-style hero (stage 1) ----- */
+      .cr-hero {
+        position: relative;
+        z-index: 1;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 6.5rem 0 8rem;
+        background: var(--cr-bg);
+      }
+
+      .cr-wall {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        overflow: hidden;
+        will-change: transform;
+      }
+      .cr-grid {
+        position: absolute;
+        inset: -8px;
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        gap: 2px;
+      }
+      .cr-cell {
+        overflow: hidden;
+      }
+      .cr-cell img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: brightness(0.42) saturate(0.65);
+        opacity: 0.9;
+      }
+      .cr-wall::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(180deg, rgba(21, 21, 21, 0.2), rgba(21, 21, 21, 0.72) 68%, #151515 100%),
+          radial-gradient(120% 90% at 50% 0%, rgba(21, 21, 21, 0) 42%, rgba(21, 21, 21, 0.55) 100%);
+      }
+
+      .cr-hero-inner {
+        position: relative;
+        z-index: 2;
+      }
+
+      .cr-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        border-radius: 999px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(8px);
+        padding: 0.4rem 0.95rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        letter-spacing: 0.03em;
+        color: var(--cr-subtle);
+      }
+      .cr-badge .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--cr-orange);
+        animation: cr-pulse 1.6s ease-in-out infinite;
+      }
+      @keyframes cr-pulse {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.45;
+          transform: scale(0.75);
+        }
+      }
+
+      .cr-title {
+        font-family: "Space Grotesk", "Inter", sans-serif;
+        font-weight: 700;
+        letter-spacing: -0.025em;
+        font-size: clamp(2.7rem, 9vw, 6rem);
+        line-height: 1.02;
+        color: var(--cr-ink);
+      }
+      .cr-title .hero-letter {
+        display: inline-block;
+        will-change: transform;
+      }
+      .cr-title .grad {
+        background: linear-gradient(92deg, var(--cr-orange) 0%, #ff9a5a 45%, #f0abfc 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+
+      .cr-sub {
+        margin-top: 1.25rem;
+        max-width: 42rem;
+        font-size: 1.05rem;
+        line-height: 1.7;
+        color: var(--cr-muted);
+      }
+
+      .cr-cta-row {
+        margin-top: 2.25rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.9rem;
+      }
+
+      .cr-marquee {
+        position: absolute;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 3;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+        background: rgba(21, 21, 21, 0.55);
+        backdrop-filter: blur(12px);
+        padding: 0.95rem 0;
+        overflow: hidden;
+      }
+      .cr-marquee-track {
+        display: flex;
+        gap: 2.5rem;
+        white-space: nowrap;
+        animation: cr-marquee 30s linear infinite;
+        will-change: transform;
+      }
+      .cr-marquee-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 2.5rem;
+        font-size: 0.85rem;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+        color: var(--cr-muted);
+      }
+      .cr-marquee-item .sep {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--cr-orange);
+        opacity: 0.75;
+      }
+      @keyframes cr-marquee {
+        to {
+          transform: translateX(-50%);
+        }
+      }
+
+      /* ----- shadcn-style Button (primary / outline) ----- */
+      .btn-cr {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 999px;
+        font-weight: 600;
+        font-size: 0.9375rem;
+        line-height: 1.5;
+        padding: 0.625rem 1.5rem;
+        border: 1px solid transparent;
+        cursor: pointer;
+        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
+          box-shadow 0.2s ease, transform 0.2s ease;
+        text-decoration: none;
+        white-space: nowrap;
+        user-select: none;
+      }
+      .btn-cr:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--cr-bg), 0 0 0 4px var(--cr-orange);
+      }
+      .btn-cr:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      .btn-cr:hover {
+        transform: translateY(-1px);
+      }
+      .btn-cr-default {
+        background: var(--cr-orange);
+        color: #000;
+        box-shadow: 0 10px 28px rgba(255, 94, 0, 0.32);
+      }
+      .btn-cr-default:hover {
+        background: var(--cr-orange-hover);
+        color: #000;
+        box-shadow: 0 12px 32px rgba(255, 94, 0, 0.42);
+      }
+      .btn-cr-outline {
+        border-color: rgba(255, 255, 255, 0.32);
+        color: var(--cr-ink);
+        background: transparent;
+      }
+      .btn-cr-outline:hover {
+        border-color: rgba(255, 255, 255, 0.9);
+        background: rgba(255, 255, 255, 0.07);
+        color: var(--cr-ink);
+      }
+      .btn-cr-lg {
+        height: 3rem;
+        padding-inline: 2.1rem;
+        font-size: 1rem;
+        border-radius: 999px;
+      }
+
+      /* ----- Feature stage ----- */
+      .cr-features {
+        position: relative;
+        z-index: 1;
+        background: var(--cr-bg);
+        padding: 5.5rem 0 6rem;
+      }
+      .cr-features-head {
+        text-align: left;
+        margin-bottom: 2.5rem;
+      }
+      .cr-features-head h2 {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: clamp(1.8rem, 4vw, 2.8rem);
+        letter-spacing: -0.02em;
+        color: var(--cr-ink);
+      }
+      .cr-features-head h2 .grad {
+        background: linear-gradient(92deg, var(--cr-orange) 0%, #ff9a5a 60%, #f0abfc 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+      .cr-features-head p {
+        margin-top: 0.6rem;
+        color: var(--cr-muted);
+        font-size: 0.95rem;
+      }
+      .cr-feature-row {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        gap: 1.25rem;
+      }
+      .cr-feature-box {
+        position: relative;
+        border-radius: 16px;
+        overflow: hidden;
+        aspect-ratio: 2 / 3;
+        background: #1e1e1e;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        cursor: pointer;
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        will-change: transform;
+        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+      }
+      .cr-feature-box:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 18px 40px rgba(255, 94, 0, 0.2);
+        border-color: rgba(255, 94, 0, 0.45);
+      }
+      .cr-feature-box img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.35s ease;
+      }
+      .cr-feature-box:hover img {
+        transform: scale(1.06);
+      }
+      .cr-feature-box .shade {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to top, rgba(21, 21, 21, 0.95) 8%, rgba(21, 21, 21, 0.25) 55%, transparent);
+      }
+      .cr-feature-box .info {
+        position: relative;
+        padding: 1rem 0.9rem;
+        color: #fff;
+      }
+      .cr-feature-box .tag {
+        display: inline-block;
+        border-radius: 999px;
+        background: var(--cr-orange);
+        color: #000;
+        font-size: 0.6rem;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        padding: 0.18rem 0.55rem;
+        margin-bottom: 0.4rem;
+      }
+      .cr-feature-box .t {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 600;
+        font-size: 1rem;
+        line-height: 1.25;
+        margin: 0;
+      }
+      .cr-feature-box .s {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 0.72rem;
+        margin-top: 0.2rem;
+      }
+      .cr-feature-box.fade-in {
+        opacity: 0;
+        transform: translateY(28px);
+      }
+      .cr-feature-box.fade-in.visible {
+        opacity: 1;
+        transform: translateY(0);
+        transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease,
+          border-color 0.25s ease;
+      }
+
+      /* ----- Shop stage (stage 3) ----- */
+      .cr-shop {
+        position: relative;
+        z-index: 1;
+        background: linear-gradient(180deg, var(--cr-bg) 0%, #171719 100%);
+        padding: 5.5rem 0 6rem;
+      }
+      .cr-shop-head {
+        text-align: center;
+        margin-bottom: 2.5rem;
+      }
+      .cr-shop-head h2 {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: clamp(1.8rem, 4vw, 2.8rem);
+        letter-spacing: -0.02em;
+        color: var(--cr-ink);
+      }
+      .cr-shop-head h2 .grad {
+        background: linear-gradient(92deg, var(--cr-orange) 0%, #ff9a5a 60%, #f0abfc 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+      .cr-shop-head p {
+        margin-top: 0.6rem;
+        color: var(--cr-muted);
+        font-size: 0.95rem;
+      }
+      .cr-shop-row {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 1.25rem;
+      }
+      .cr-shop-card {
+        border-radius: 16px;
+        overflow: hidden;
+        background: #1d1d1f;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+        cursor: pointer;
+      }
+      .cr-shop-card:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 18px 40px rgba(255, 94, 0, 0.18);
+        border-color: rgba(255, 94, 0, 0.45);
+      }
+      .cr-shop-card .pic {
+        position: relative;
+        aspect-ratio: 1 / 1;
+        background: #141416;
+        overflow: hidden;
+      }
+      .cr-shop-card .pic img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.35s ease;
+      }
+      .cr-shop-card:hover .pic img {
+        transform: scale(1.07);
+      }
+      .cr-shop-card .pic .cat {
+        position: absolute;
+        top: 0.6rem;
+        left: 0.6rem;
+        border-radius: 999px;
+        background: rgba(21, 21, 21, 0.75);
+        color: var(--cr-orange);
+        font-size: 0.62rem;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        padding: 0.2rem 0.6rem;
+        backdrop-filter: blur(4px);
+      }
+      .cr-shop-card .pic .price {
+        position: absolute;
+        bottom: 0.6rem;
+        right: 0.6rem;
+        border-radius: 10px;
+        background: var(--cr-orange);
+        color: #000;
+        font-weight: 800;
+        font-size: 0.8rem;
+        padding: 0.3rem 0.65rem;
+      }
+      .cr-shop-card .meta {
+        padding: 0.9rem 1rem 1.1rem;
+      }
+      .cr-shop-card .meta .t {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 600;
+        font-size: 0.95rem;
+        color: #fff;
+        margin: 0 0 0.15rem;
+      }
+      .cr-shop-card .meta .s {
+        color: var(--cr-muted);
+        font-size: 0.75rem;
+      }
+      .cr-shop-card.fade-in {
+        opacity: 0;
+        transform: translateY(28px);
+      }
+      .cr-shop-card.fade-in.visible {
+        opacity: 1;
+        transform: translateY(0);
+        transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease,
+          border-color 0.25s ease;
+      }
+      .cr-shop-cta {
+        margin-top: 2.75rem;
+        text-align: center;
+      }
+
+      /* ----- Footer ----- */
+      .cr-footer {
+        position: relative;
+        z-index: 1;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+        background: var(--cr-bg);
+        padding: 3.25rem 1.5rem 3rem;
+        text-align: center;
+      }
+      .cr-footer p {
+        max-width: 46rem;
+        margin-inline: auto;
+        color: var(--cr-muted);
+        font-size: 0.85rem;
+        line-height: 1.7;
+      }
+      .cr-footer p + p {
+        margin-top: 0.35rem;
+        color: var(--cr-subtle);
+        font-size: 0.8rem;
+      }
+      .cr-footer .brand {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 1rem;
+        letter-spacing: 0.06em;
+        color: var(--cr-ink);
+        margin-bottom: 0.9rem;
+      }
+      .cr-footer .brand span {
+        color: var(--cr-orange);
+      }
+
+      @media (max-width: 767.98px) {
+        .cr-hero {
+          padding-top: 5rem;
+        }
+        .cr-grid {
+          grid-template-columns: repeat(4, 1fr);
+          grid-template-rows: repeat(6, 1fr);
+        }
+        .cr-feature-row {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: 0.9rem;
+        }
+        .cr-shop-row {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: 0.9rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+
+    <script>
+      (function () {
+        var React = window.React;
+        var ReactDOM = window.ReactDOM;
+        var e = React.createElement;
+        var useRef = React.useRef;
+        var useEffect = React.useEffect;
+
+        var POSTERS = [
+          "https://phim.nguonc.com/public/images/Film/76.jpg",
+          "https://phim.nguonc.com/public/images/Film/666.jpg",
+          "https://phim.nguonc.com/public/images/Film/77.jpg",
+          "https://phim.nguonc.com/public/images/Film/667.jpg",
+          "https://phim.nguonc.com/public/images/Film/259.jpg",
+          "https://phim.nguonc.com/public/images/Film/2738.jpg",
+          "https://phim.nguonc.com/public/images/Film/3485.jpg",
+          "https://phim.nguonc.com/public/images/Film/141438.jpg",
+          "https://phim.nguonc.com/public/images/Film/date-a-bullet-thumb.jpg",
+          "https://phim.nguonc.com/public/images/Film/3103.jpg",
+          "https://phim.nguonc.com/public/images/Post/5/aishiteru-game-wo-owarasetai.jpg",
+          "https://phim.nguonc.com/public/images/Film/541.jpg",
+          "https://phim.nguonc.com/public/images/Film/536.jpg",
+          "https://phim.nguonc.com/public/images/Film/56167.jpg",
+          "https://phim.nguonc.com/public/images/Film/56643.jpg",
+          "https://phim.nguonc.com/public/images/Film/538.jpg",
+          "https://phim.nguonc.com/public/images/Film/540.jpg",
+          "https://phim.nguonc.com/public/images/Film/60351.jpg",
+          "https://phim.nguonc.com/public/images/Film/2607.jpg",
+          "https://phim.nguonc.com/public/images/Film/2661.jpg",
+          "https://phim.nguonc.com/public/images/Film/5MgMCnslrxQfOfaq6T5ndkLlcCk.jpg",
+          "https://phim.nguonc.com/public/images/Film/134808.jpg",
+          "https://phim.nguonc.com/public/images/Film/138379.jpg",
+          "https://phim.nguonc.com/public/images/Post/9/seishun-buta-yarou-wa-santa-claus-no-yume-wo-minai-1.jpg"
+        ];
+
+        var MARQUEE = [
+          "Anime",
+          "Manga",
+          "Manhwa",
+          "Manhua",
+          "Light Novel",
+          "Sưu tầm",
+          "Vô vàn thế giới"
+        ];
+
+        var FEATURES = [
+          { name: "Death Note", sub: "37 tập", tag: "Anime", page: "sfw/anime/universal/death-note/", img: "https://phim.nguonc.com/public/images/Film/244.jpg" },
+          { name: "Tensei Slime", sub: "24 tập", tag: "Anime", page: "sfw/anime/universal/tensei-slime/phan-1/", img: "https://phim.nguonc.com/public/images/Film/2658.jpg" },
+          { name: "JoJo Phần 1", sub: "26 tập", tag: "Anime", page: "sfw/anime/universal/jojo/phan-1/", img: "https://phim.nguonc.com/public/images/Film/40409.jpg" },
+          { name: "Fate/Zero", sub: "13 tập", tag: "Anime", page: "sfw/anime/multiversal/fate/fate-zero/phan-1/", img: "https://phim.nguonc.com/public/images/Film/117644.jpg" },
+          { name: "Bocchi the Rock!", sub: "12 tập", tag: "Anime", page: "sfw/anime/universal/bocchi-the-rock/phan-1/", img: "https://phim.nguonc.com/public/images/Film/127956.jpg" }
+        ];
+
+        var SHOP_PRODUCTS = [
+          { name: "Figure Gojo Satoru", anime: "Jujutsu Kaisen", cat: "Figure", price: "1.290.000đ", img: "https://phim.nguonc.com/public/images/Film/76.jpg" },
+          { name: "Figure Luffy Gear 5", anime: "One Piece", cat: "Figure", price: "1.450.000đ", img: "https://phim.nguonc.com/public/images/Film/666.jpg" },
+          { name: "Plushie Anya Forger", anime: "Spy x Family", cat: "Plushie", price: "350.000đ", img: "https://phim.nguonc.com/public/images/Film/3485.jpg" },
+          { name: "Mug Steins;Gate", anime: "Steins;Gate", cat: "Mug", price: "185.000đ", img: "https://phim.nguonc.com/public/images/Film/536.jpg" }
+        ];
+
+        function cx() {
+          return Array.prototype.filter.call(arguments, Boolean).join(" ");
+        }
+
+        function Button(props) {
+          var className = cx(
+            "btn-cr",
+            "btn-cr-" + (props.variant || "default"),
+            (props.size || "default") === "lg" ? "btn-cr-lg" : "",
+            props.className
+          );
+          var p = {};
+          for (var k in props) {
+            if (k === "variant" || k === "size" || k === "className" || k === "children") continue;
+            p[k] = props[k];
+          }
+          return e("button", Object.assign({}, p, { className: className }), props.children);
+        }
+
+        function ThreeBackground() {
+          var ref = useRef(null);
+          useEffect(function () {
+            var canvas = ref.current;
+            var renderer = new THREE.WebGLRenderer({
+              canvas: canvas,
+              alpha: true,
+              antialias: true
+            });
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+            var w = window.innerWidth;
+            var h = window.innerHeight;
+            var scene = new THREE.Scene();
+            var camera = new THREE.PerspectiveCamera(70, w / h, 0.1, 40);
+            camera.position.z = 1;
+
+            function onResize() {
+              w = window.innerWidth;
+              h = window.innerHeight;
+              renderer.setSize(w, h);
+              camera.aspect = w / h;
+              camera.updateProjectionMatrix();
+            }
+            onResize();
+            window.addEventListener("resize", onResize);
+
+            var COUNT = 1400;
+            var positions = new Float32Array(COUNT * 3);
+            for (var i = 0; i < COUNT * 3; i++) positions[i] = (Math.random() - 0.5) * 4;
+            var geo = new THREE.BufferGeometry();
+            geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+            var mat = new THREE.PointsMaterial({
+              color: 0xffffff,
+              size: 0.004,
+              transparent: true,
+              opacity: 0.65,
+              sizeAttenuation: true
+            });
+            var stars = new THREE.Points(geo, mat);
+            scene.add(stars);
+
+            var glow = new THREE.Mesh(
+              new THREE.SphereGeometry(0.16, 32, 32),
+              new THREE.MeshBasicMaterial({
+                color: 0xff5e00,
+                transparent: true,
+                opacity: 0.16
+              })
+            );
+            glow.position.set(0.9, 0.55, -0.6);
+            scene.add(glow);
+
+            var raf;
+            var mx = 0;
+            var my = 0;
+            function onMouse(e2) {
+              mx = (e2.clientX / w - 0.5) * 2;
+              my = (e2.clientY / h - 0.5) * 2;
+            }
+            window.addEventListener("mousemove", onMouse);
+
+            function tick() {
+              stars.rotation.y += 0.00022;
+              stars.rotation.x += 0.00008;
+              camera.position.x += (mx * 0.05 - camera.position.x) * 0.04;
+              camera.position.y += (-my * 0.05 - camera.position.y) * 0.04;
+              camera.lookAt(0, 0, 0);
+              renderer.render(scene, camera);
+              raf = requestAnimationFrame(tick);
+            }
+            tick();
+
+            return function () {
+              cancelAnimationFrame(raf);
+              window.removeEventListener("resize", onResize);
+              window.removeEventListener("mousemove", onMouse);
+              renderer.dispose();
+            };
+          }, []);
+          return e("canvas", { id: "bg3d", ref: ref });
+        }
+
+        function Hero() {
+          var wallRef = useRef(null);
+          useEffect(function () {
+            var letters = gsap.utils.toArray(".hero-letter");
+            var reveals = gsap.utils.toArray(".cr-reveal");
+            gsap.set(letters, { yPercent: 115, opacity: 0 });
+            gsap.set(reveals, { y: 26, opacity: 0 });
+            var tl = gsap.timeline({ defaults: { ease: "power3.out" } });
+            tl.to(letters, { yPercent: 0, opacity: 1, stagger: 0.05, duration: 0.85 }, 0.2)
+              .to(reveals, { y: 0, opacity: 1, stagger: 0.1, duration: 0.6 }, 0.6)
+              .fromTo(
+                wallRef.current,
+                { scale: 1.22 },
+                { scale: 1.02, duration: 2.4, ease: "power2.out" },
+                0
+              );
+            return function () {
+              tl.kill();
+            };
+          }, []);
+
+          var brand = "ANIVIETDB".split("");
+          var heroLetters = brand.map(function (c, i) {
+            return e("span", { className: "hero-letter", key: i }, c);
+          });
+
+          return e(
+            "section",
+            { className: "cr-hero" },
+            e(
+              "div",
+              { className: "cr-wall", ref: wallRef },
+              e(
+                "div",
+                { className: "cr-grid" },
+                POSTERS.map(function (u, i) {
+                  return e(
+                    "div",
+                    { className: "cr-cell", key: i },
+                    e("img", { src: u, alt: "", loading: "lazy" })
+                  );
+                })
+              )
+            ),
+            e(
+              "div",
+              { className: "cr-hero-inner container" },
+              e(
+                "div",
+                { className: "row" },
+                e(
+                  "div",
+                  { className: "col-12 col-lg-9 col-xl-8" },
+                  e(
+                    "span",
+                    { className: "cr-badge cr-reveal" },
+                    e("span", { className: "dot" }),
+                    " Giới thiệu · Vươn Tầm Thế Giới"
+                  ),
+                  e(
+                    "h1",
+                    { className: "cr-title" },
+                    heroLetters,
+                    e(
+                      "span",
+                      { className: "d-block" },
+                      e("span", { className: "grad" }, "Vươn Tầm Thế Giới")
+                    )
+                  ),
+                  e(
+                    "p",
+                    { className: "cr-sub cr-reveal" },
+                    "Nơi hội tụ anime, manga, webtoon và light novel — một trang web, vô vàn thế giới."
+                  ),
+                  e(
+                    "div",
+                    { className: "cr-cta-row cr-reveal" },
+                    e(
+                      Button,
+                      { size: "lg", onClick: function () { openSfwWithLoginCheck(); } },
+                      "Bắt đầu"
+                    ),
+                    e(
+                      Button,
+                      {
+                        size: "lg",
+                        variant: "outline",
+                        onClick: function () {
+                          var el = document.getElementById("featureStage");
+                          if (el) el.scrollIntoView({ behavior: "smooth" });
+                        }
+                      },
+                      "Xem phim nổi bật"
+                    )
+                  )
+                )
+              )
+            ),
+            e(
+              "div",
+              { className: "cr-marquee" },
+              e(
+                "div",
+                { className: "cr-marquee-track" },
+                MARQUEE.concat(MARQUEE).map(function (w, i) {
+                  return e(
+                    "span",
+                    { className: "cr-marquee-item", key: i },
+                    w,
+                    e("span", { className: "sep" })
+                  );
+                })
+              )
+            )
+          );
+        }
+
+        function FeatureStage() {
+          var secRef = useRef(null);
+          useEffect(function () {
+            var boxes = secRef.current ? secRef.current.querySelectorAll(".cr-feature-box.fade-in") : [];
+            if (!("IntersectionObserver" in window)) {
+              Array.prototype.forEach.call(boxes, function (b) { b.classList.add("visible"); });
+              return;
+            }
+            var io = new IntersectionObserver(
+              function (entries) {
+                entries.forEach(function (en) {
+                  if (en.isIntersecting) {
+                    en.target.classList.add("visible");
+                    io.unobserve(en.target);
+                  }
+                });
+              },
+              { threshold: 0.15 }
+            );
+            Array.prototype.forEach.call(boxes, function (b) { io.observe(b); });
+            return function () { io.disconnect(); };
+          }, []);
+
+          return e(
+            "section",
+            { id: "featureStage", className: "cr-features", ref: secRef },
+            e(
+              "div",
+              { className: "container" },
+              e(
+                "div",
+                { className: "cr-features-head" },
+                e("h2", null, "Phim nổi bật ", e("span", { className: "grad" }, "Feature")),
+                e(
+                  "p",
+                  null,
+                  "Những tựa anime đáng xem nhất, cập nhật liên tục từ ANIVIETDB."
+                )
+              ),
+              e(
+                "div",
+                { className: "cr-feature-row" },
+                FEATURES.map(function (f, i) {
+                  return e(
+                    "a",
+                    {
+                      key: i,
+                      href: f.page,
+                      className: "cr-feature-box fade-in",
+                      style: { transitionDelay: i * 0.08 + "s" }
+                    },
+                    e("img", { src: f.img, alt: f.name, loading: "lazy" }),
+                    e("div", { className: "shade" }),
+                    e(
+                      "div",
+                      { className: "info" },
+                      e("span", { className: "tag" }, f.tag),
+                      e("p", { className: "t" }, f.name),
+                      e("p", { className: "s" }, f.sub)
+                    )
+                  );
+                })
+              )
+            )
+          );
+        }
+
+        function openWithLoginCheck(url) {
+          function go() { window.location.href = url; }
+          function showPopup() {
+            var m = document.getElementById("loginReqPopup");
+            m.classList.add("active");
+          }
+          if (window.AuthSystem) {
+            window.AuthSystem.me().then(function (user) {
+              if (user) { go(); } else { showPopup(); }
+            }).catch(function () { showPopup(); });
+            return;
+          }
+          var s = document.createElement("script");
+          s.src = "signup-loginsystem.js";
+          s.onload = function () {
+            if (window.AuthSystem) {
+              window.AuthSystem.me().then(function (user) {
+                if (user) { go(); } else { showPopup(); }
+              }).catch(function () { showPopup(); });
+            } else {
+              showPopup();
+            }
+          };
+          s.onerror = function () { showPopup(); };
+          document.head.appendChild(s);
+        }
+        function openShopWithLoginCheck() { openWithLoginCheck("shop/index.html"); }
+        function openSfwWithLoginCheck() {
+          function go() { window.location.href = "sfw/index.html"; }
+          function goLogin() { window.location.href = "login.html"; }
+          function check() {
+            window.AuthSystem.me().then(function (user) {
+              if (user) { go(); } else { goLogin(); }
+            }).catch(function () { goLogin(); });
+          }
+          if (window.AuthSystem) { check(); return; }
+          var s = document.createElement("script");
+          s.src = "signup-loginsystem.js";
+          s.onload = function () { if (window.AuthSystem) { check(); } else { goLogin(); } };
+          s.onerror = function () { goLogin(); };
+          document.head.appendChild(s);
+        }
+
+        function ShopStage() {
+          var secRef = useRef(null);
+          useEffect(function () {
+            var cards = secRef.current ? secRef.current.querySelectorAll(".cr-shop-card.fade-in") : [];
+            if (!("IntersectionObserver" in window)) {
+              Array.prototype.forEach.call(cards, function (b) { b.classList.add("visible"); });
+              return;
+            }
+            var io = new IntersectionObserver(
+              function (entries) {
+                entries.forEach(function (en) {
+                  if (en.isIntersecting) {
+                    en.target.classList.add("visible");
+                    io.unobserve(en.target);
+                  }
+                });
+              },
+              { threshold: 0.15 }
+            );
+            Array.prototype.forEach.call(cards, function (b) { io.observe(b); });
+            return function () { io.disconnect(); };
+          }, []);
+
+          return e(
+            "section",
+            { id: "shopStage", className: "cr-shop", ref: secRef },
+            e(
+              "div",
+              { className: "container" },
+              e(
+                "div",
+                { className: "cr-shop-head" },
+                e("h2", null, "Figure Shop ", e("span", { className: "grad" }, "ANIVIETDB")),
+                e(
+                  "p",
+                  null,
+                  "Figure, plushie, manga, Blu-ray và đồ lưu niệm sưu tầm — khám phá ngay, đặt mua tại cửa hàng."
+                )
+              ),
+              e(
+                "div",
+                { className: "cr-shop-row" },
+                SHOP_PRODUCTS.map(function (f, i) {
+                  return e(
+                    "a",
+                    {
+                      key: i,
+                      href: "shop/index.html",
+                      className: "cr-shop-card fade-in",
+                      style: { transitionDelay: i * 0.08 + "s" }
+                    },
+                    e(
+                      "div",
+                      { className: "pic" },
+                      e("span", { className: "cat" }, f.cat),
+                      e("img", { src: f.img, alt: f.name, loading: "lazy" }),
+                      e("span", { className: "price" }, f.price)
+                    ),
+                    e(
+                      "div",
+                      { className: "meta" },
+                      e("p", { className: "t" }, f.name),
+                      e("p", { className: "s" }, f.anime)
+                    )
+                  );
+                })
+              ),
+              e(
+                "div",
+                { className: "cr-shop-cta" },
+                e(
+                  Button,
+                  {
+                    size: "lg",
+                    onClick: function () { openShopWithLoginCheck(); }
+                  },
+                  "Khám phá shop"
+                )
+              )
+            )
+          );
+        }
+
+        function Footer() {
+          return e(
+            "footer",
+            { className: "cr-footer" },
+            e(
+              "p",
+              { className: "brand" },
+              "ANIVIETDB ",
+              e("span", null, "·"),
+              " Vươn Tầm Thế Giới"
+            ),
+            e(
+              "p",
+              null,
+              "© 2026 ANIVIETDB. Tất cả nội dung Anime, Manga, Manhwa, Manhua và Light Novel được sưu tầm và thuộc bản quyền của chủ sở hữu tương ứng."
+            ),
+            e(
+              "p",
+              null,
+              "Trang web sưu tầm cá nhân - Phi thương mại. Mọi quyền được bảo lưu."
+            )
+          );
+        }
+
+        function App() {
+          return e(
+            "main",
+            { className: "position-relative" },
+            e(ThreeBackground),
+            e(Hero),
+            e(FeatureStage),
+            e(ShopStage),
+            e(Footer)
+          );
+        }
+
+        ReactDOM.createRoot(document.getElementById("root")).render(e(App));
+      })();
+    </script>
+
+    <div class="login-req-overlay" id="loginReqPopup">
+      <div class="login-req-popup">
+        <h3>&#128274; Bạn chưa đăng nhập</h3>
+        <p>Hãy đăng nhập để khám phá cửa hàng ANIVIETDB và đặt mua sản phẩm.</p>
+        <div class="login-req-actions">
+          <button class="login-req-btn" id="loginReqGo">Bắt đầu đăng nhập</button>
+          <button class="login-req-btn login-req-ghost" id="loginReqClose">Để sau</button>
+        </div>
+      </div>
+    </div>
+
+    <style>
+      .login-req-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(4px); }
+      .login-req-overlay.active { display: flex; }
+      .login-req-popup { background: #1d1d1d; border: 1px solid var(--cr-border); border-radius: 16px; padding: 30px 36px; text-align: center; color: var(--cr-ink); font-family: "Inter", system-ui, sans-serif; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
+      .login-req-popup h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
+      .login-req-popup p { margin: 0 0 22px; color: var(--cr-muted); font-size: 14px; line-height: 1.6; }
+      .login-req-actions { display: flex; flex-direction: column; gap: 10px; }
+      .login-req-btn { background: var(--cr-orange); color: #fff; border: none; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .15s; }
+      .login-req-btn:hover { background: var(--cr-orange-hover); }
+      .login-req-btn.login-req-ghost { background: none; color: var(--cr-muted); border: 1px solid var(--cr-border); }
+      .login-req-btn.login-req-ghost:hover { color: #fff; border-color: #555; }
+    </style>
+
+    <script>
+      (function () {
+        var overlay = document.getElementById("loginReqPopup");
+        var goBtn = document.getElementById("loginReqGo");
+        var closeBtn = document.getElementById("loginReqClose");
+        if (goBtn) goBtn.addEventListener("click", function () {
+          window.location.href = "login.html";
+        });
+        if (closeBtn) closeBtn.addEventListener("click", function () {
+          overlay.classList.remove("active");
+        });
+        if (overlay) overlay.addEventListener("click", function (e) {
+          if (e.target === overlay) overlay.classList.remove("active");
+        });
+      })();
+    </script>
+  </body>
+  </html>

login.html

@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23151515'/><text x='50' y='68' font-size='52' font-family='Arial' font-weight='bold' fill='%23ff5e00' text-anchor='middle'>A</text></svg>">
+<title>Đăng nhập - ANIVIETDB</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background: linear-gradient(135deg, #0b0d16 0%, #1a1033 50%, #2d1b4e 100%);
+      min-height: 100vh;
+      display: flex; align-items: center; justify-content: center;
+      padding: 20px; color: #e8e8f0;
+    }
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      z-index: -2;
+      pointer-events: none;
+      background-color: #151515;
+      background-image:
+        url("https://phim.nguonc.com/public/images/Film/76.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/666.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/77.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/667.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/259.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/2738.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/3485.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/141438.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/date-a-bullet-thumb.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/3103.jpg"),
+        url("https://phim.nguonc.com/public/images/Post/5/aishiteru-game-wo-owarasetai.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/541.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/536.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/56167.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/56643.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/538.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/540.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/60351.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/2607.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/2661.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/5MgMCnslrxQfOfaq6T5ndkLlcCk.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/134808.jpg"),
+        url("https://phim.nguonc.com/public/images/Film/138379.jpg"),
+        url("https://phim.nguonc.com/public/images/Post/9/seishun-buta-yarou-wa-santa-claus-no-yume-wo-minai-1.jpg");
+      background-size: 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%;
+      background-position: 0% 0%, 14.2857% 0%, 28.5714% 0%, 42.8571% 0%, 57.1429% 0%, 71.4286% 0%, 85.7143% 0%, 100% 0%, 0% 50%, 14.2857% 50%, 28.5714% 50%, 42.8571% 50%, 57.1429% 50%, 71.4286% 50%, 85.7143% 50%, 100% 50%, 0% 100%, 14.2857% 100%, 28.5714% 100%, 42.8571% 100%, 57.1429% 100%, 71.4286% 100%, 85.7143% 100%, 100% 100%;
+      background-repeat: no-repeat;
+      filter: brightness(0.42) saturate(0.65);
+    }
+    body::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      pointer-events: none;
+      background: linear-gradient(180deg, rgba(21,21,21,0.55), rgba(21,21,21,0.78) 68%, #151515 100%),
+        radial-gradient(120% 90% at 50% 0%, rgba(21,21,21,0) 42%, rgba(21,21,21,0.5) 100%);
+    }
+    .auth-card {
+      width: 100%; max-width: 400px;
+      background: rgba(20, 22, 38, 0.92);
+      border: 1px solid rgba(120, 100, 230, 0.35);
+      border-radius: 16px;
+      padding: 32px 28px;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
+    }
+    .auth-logo {
+      text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0.5px;
+      margin-bottom: 6px;
+    }
+    .auth-logo span { color: #8b7bff; }
+    .auth-sub { text-align: center; color: #9a9ab0; font-size: 13px; margin-bottom: 22px; }
+    .auth-tabs { display: flex; margin-bottom: 22px; border-bottom: 1px solid rgba(120,100,230,0.25); }
+    .auth-tab {
+      flex: 1; text-align: center; padding: 10px 0; cursor: pointer;
+      color: #9a9ab0; font-weight: 500; border-bottom: 2px solid transparent; transition: all .2s;
+    }
+    .auth-tab.active { color: #fff; border-bottom-color: #8b7bff; }
+    .field { margin-bottom: 16px; }
+    .field label { display: block; font-size: 12px; color: #a9a9c4; margin-bottom: 6px; }
+    .field input {
+      width: 100%; padding: 12px 14px; border-radius: 10px;
+      border: 1px solid rgba(120,100,230,0.3); background: #10121f;
+      color: #fff; font-size: 14px; outline: none; transition: border .2s;
+    }
+    .field input:focus { border-color: #8b7bff; }
+    .auth-btn {
+      width: 100%; padding: 13px; border: none; border-radius: 10px;
+      background: linear-gradient(135deg, #7c5cff, #5a3bd6);
+      color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
+      transition: transform .15s, filter .15s;
+    }
+    .auth-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
+    .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+    .auth-error {
+      min-height: 20px; color: #ff8a8a; font-size: 13px; margin-top: 12px; text-align: center;
+    }
+    .auth-ok {
+      color: #7ee787; font-size: 13px; text-align: center; margin-top: 12px; min-height: 20px;
+    }
+    .logout-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }    .logged-in { text-align: center; padding: 10px 0; }
+    .logged-in .name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
+    .logged-in .email { font-size: 13px; color: #9a9ab0; margin-bottom: 18px; }
+    .logged-title {
+      text-align: center; font-size: 13px; color: #7ee787; font-weight: 500; margin-bottom: 18px;
+    }
+    .btn-ghost {
+      width: 100%; padding: 12px; border-radius: 10px;
+      border: 1px solid rgba(255,138,138,0.4); background: transparent;
+      color: #ff8a8a; font-size: 14px; font-weight: 600; cursor: pointer;
+    }
+    .btn-ghost:hover { background: rgba(255,138,138,0.08); }
+    .btn-admin {
+      display: block; width: 100%; padding: 12px; border-radius: 10px;
+      border: 1px solid rgba(126,231,135,0.45); background: rgba(126,231,135,0.08);
+      color: #7ee787; font-size: 14px; font-weight: 700; cursor: pointer;
+      text-align: center; text-decoration: none;
+    }
+    .btn-admin:hover { background: rgba(126,231,135,0.18); }
+    .btn-home {
+      display: block; width: 100%; padding: 12px; border-radius: 10px;
+      border: 1px solid rgba(139,123,255,0.45); background: rgba(139,123,255,0.1);
+      color: #b7abff; font-size: 14px; font-weight: 700; cursor: pointer;
+      text-align: center; text-decoration: none; margin-bottom: 10px;
+    }
+    .btn-home:hover { background: rgba(139,123,255,0.2); }
+    .btn-shop {
+      display: block; width: 100%; padding: 12px; border-radius: 10px;
+      border: 1px solid rgba(255,94,0,0.5); background: rgba(255,94,0,0.1);
+      color: #ff9a5a; font-size: 14px; font-weight: 700; cursor: pointer;
+      text-align: center; text-decoration: none; margin-bottom: 10px;
+    }
+    .btn-shop:hover { background: rgba(255,94,0,0.2); }
+    .auth-back {
+      display: block; text-align: center; margin-top: 18px;
+      color: #9a9ab0; font-size: 13px; text-decoration: none;
+    }
+    .auth-back:hover { color: #fff; text-decoration: underline; }
+    .auth-copyright {
+      text-align: center; margin-top: 20px; padding-top: 14px;
+      border-top: 1px solid rgba(120,100,230,0.15);
+      color: #6d6d85; font-size: 12px;
+    }
+    .terms-row {
+      display: flex; align-items: flex-start; gap: 8px;
+      font-size: 12px; color: #a9a9c4; line-height: 1.5; margin-bottom: 16px;
+    }
+    .terms-row input { margin-top: 2px; accent-color: #8b7bff; }
+    .turnstile-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
+    .terms-row a { color: #8b7bff; text-decoration: none; }
+    .terms-row a:hover { text-decoration: underline; }
+    .terms-modal {
+      position: fixed; inset: 0; z-index: 1000;
+      display: none; align-items: center; justify-content: center;
+      background: rgba(0,0,0,0.6); padding: 20px;
+    }
+    .terms-modal.open { display: flex; }
+    .terms-modal-card {
+      width: 100%; max-width: 520px; max-height: 80vh;
+      background: #141622; border: 1px solid rgba(120,100,230,0.35);
+      border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
+    }
+    .terms-modal-head {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px 18px; border-bottom: 1px solid rgba(120,100,230,0.25);
+    }
+    .terms-modal-head h3 { font-size: 16px; color: #fff; }
+    .terms-modal-close {
+      background: none; border: none; color: #9a9ab0; font-size: 20px;
+      cursor: pointer; line-height: 1;
+    }
+    .terms-modal-close:hover { color: #fff; }
+    .terms-modal-body { padding: 16px 18px; overflow-y: auto; font-size: 13px; line-height: 1.7; color: #c6c6da; }
+    .terms-modal-body h4 { color: #fff; font-size: 14px; margin: 14px 0 6px; }
+    .terms-modal-body h4:first-child { margin-top: 0; }
+    .terms-modal-foot {
+      padding: 12px 18px; border-top: 1px solid rgba(120,100,230,0.25); text-align: right;
+    }
+    .terms-modal-foot button {
+      padding: 9px 18px; border: none; border-radius: 8px;
+      background: linear-gradient(135deg, #7c5cff, #5a3bd6); color: #fff;
+      font-size: 13px; font-weight: 700; cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="auth-card">
+    <div class="auth-logo">ANIVIET<span>DB</span></div>
+    <p class="auth-sub">Đăng nhập hoặc tạo tài khoản</p>
+
+    <div class="auth-tabs" id="authTabs">
+      <div class="auth-tab active" data-mode="login">Đăng nhập</div>
+      <div class="auth-tab" data-mode="register">Đăng ký</div>
+    </div>
+
+    <div id="authForms">
+      <div class="field">
+        <label id="loginLabel">Email hoặc tên đăng nhập</label>
+        <input type="text" id="email" placeholder="Email hoặc tên đăng nhập" autocomplete="username">
+      </div>
+      <div class="field register-only" style="display:none;">
+        <label>Tên đăng nhập</label>
+        <input type="text" id="name" placeholder="Tên của bạn" autocomplete="name">
+      </div>
+      <div class="field">
+        <label>Mật khẩu</label>
+        <input type="password" id="password" placeholder="••••••••" autocomplete="current-password">
+      </div>
+      <div class="field register-only" style="display:none;">
+        <label>Nhập lại mật khẩu</label>
+        <input type="password" id="password2" placeholder="••••••••" autocomplete="new-password">
+      </div>
+      <label class="terms-row register-only" style="display:none;">
+        <input type="checkbox" id="termsCheck">
+        <span>Tôi đã đọc và đồng ý với <a href="javascript:void(0)" id="termsLink">Điều khoản sử dụng</a></span>
+      </label>
+      <div class="turnstile-wrap">
+        <div id="turnstile-login" class="cf-turnstile login-only"
+             data-sitekey="0x4AAAAAAEQz9I-TXTQoVuii"
+             data-action="login"
+             data-callback="onTurnstileSuccess"
+             data-expired-callback="onTurnstileExpired"
+             data-error-callback="onTurnstileError"></div>
+        <div id="turnstile-register" class="cf-turnstile register-only" style="display:none;"
+             data-sitekey="0x4AAAAAAEQz9I-TXTQoVuii"
+             data-action="register"
+             data-callback="onTurnstileSuccess"
+             data-expired-callback="onTurnstileExpired"
+             data-error-callback="onTurnstileError"></div>
+      </div>
+      <button class="auth-btn" id="submitBtn">Đăng nhập</button>
+    </div>
+
+    <div id="loggedIn" style="display:none;">
+      <div class="logged-in">
+        <div class="name" id="userName"></div>
+        <div class="email" id="userEmail"></div>
+        <div class="logged-title">Bạn đã đăng nhập</div>
+      </div>
+      <div style="display:none; margin-bottom:10px;" id="adminPanelWrap">
+        <a href="control-panel.html" class="btn-admin">Control Panel</a>
+      </div>
+      <a href="sfw/index.html" class="btn-home">Trang chủ</a>
+      <a href="shop/index.html" class="btn-shop">&#128722; Cửa hàng</a>
+      <button class="btn-ghost" id="logoutBtn">Đăng xuất</button>
+    </div>
+
+    <div class="auth-error" id="error"></div>
+    <div class="auth-ok" id="ok"></div>
+    <a href="index.html" class="auth-back" id="authBack">&larr; Về trang chủ</a>
+    <div class="auth-copyright">© 2026 ANIVIETDB. All rights reserved.</div>
+  </div>
+
+  <div class="terms-modal" id="termsModal">
+    <div class="terms-modal-card">
+      <div class="terms-modal-head">
+        <h3>Điều khoản sử dụng</h3>
+        <button class="terms-modal-close" id="termsClose" aria-label="Đóng">&times;</button>
+      </div>
+      <div class="terms-modal-body">
+        <h4>1. Chấp nhận điều khoản</h4>
+        <p>Bằng việc truy cập và sử dụng ANIVIETDB, bạn xác nhận đã đọc, hiểu và đồng ý tuân thủ các điều khoản dưới đây. Nếu không đồng ý, vui lòng ngừng sử dụng dịch vụ.</p>
+        <h4>2. Mục đích sử dụng</h4>
+        <p>ANIVIETDB là nền tảng tổng hợp thông tin anime, manga, manhwa, manhua và light novel phục vụ nhu cầu tìm kiếm, theo dõi và giải trí cá nhân của người dùng. Không được dùng thông tin tại đây cho mục đích thương mại hoặc trái pháp luật.</p>
+        <h4>3. Tài khoản người dùng</h4>
+        <p>Bạn chịu trách nhiệm bảo mật mật khẩu và mọi hoạt động diễn ra trên tài khoản của mình. Không được tạo tài khoản giả mạo, mạo danh người khác, hoặc lợi dụng tài khoản để gây ảnh hưởng tiêu cực tới cộng đồng.</p>
+        <h4>4. Nội dung và bản quyền</h4>
+        <p>Toàn bộ thông tin trên ANIVIETDB chỉ mang tính tham khảo. Quyền sở hữu trí tuệ của các tác phẩm thuộc về tác giả và đơn vị phát hành. Nếu bạn là chủ sở hữu và muốn yêu cầu gỡ nội dung, vui lòng liên hệ ban quản trị.</p>
+        <h4>5. Hành vi bị cấm</h4>
+        <p>Cấm spam, phát tán thông tin sai lệch, phần mềm độc hại, hoặc thực hiện hành vi xâm phạm hệ thống và tài khoản người dùng khác trên nền tảng.</p>
+        <h4>6. Từ chối trách nhiệm</h4>
+        <p>ANIVIETDB nỗ lực cập nhật thông tin chính xác nhưng không đảm bảo tính đầy đủ, kịp thời của dữ liệu. Website không chịu trách nhiệm về bất kỳ thiệt hại phát sinh từ việc sử dụng dịch vụ.</p>
+        <h4>7. Thay đổi điều khoản</h4>
+        <p>ANIVIETDB có quyền cập nhật điều khoản bất cứ lúc nào. Việc tiếp tục sử dụng website sau khi có thay đổi đồng nghĩa với việc bạn chấp nhận điều khoản mới.</p>
+      </div>
+      <div class="terms-modal-foot">
+        <button id="termsAgree">Tôi đồng ý</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+  <script src="signup-loginsystem.js?v=8"></script>
+  <script>
+    var mode = 'login';
+    var emailEl = document.getElementById('email');
+    var nameEl = document.getElementById('name');
+    var passEl = document.getElementById('password');
+    var pass2El = document.getElementById('password2');
+    var submitBtn = document.getElementById('submitBtn');
+    var errorEl = document.getElementById('error');
+    var okEl = document.getElementById('ok');
+    var authForms = document.getElementById('authForms');
+    var loggedIn = document.getElementById('loggedIn');
+
+    var cooldownTimer = null;
+    function updateCooldown() {
+      var wait = window.AuthSystem.cooldownRemaining();
+      if (wait <= 0) {
+        if (cooldownTimer) { clearInterval(cooldownTimer); cooldownTimer = null; }
+        errorEl.textContent = '';
+        submitBtn.disabled = false;
+        return;
+      }
+      errorEl.textContent = 'Vui lòng đợi ' + Math.ceil(wait / 1000) + ' giây trước khi đăng nhập hoặc tạo tài khoản.';
+      submitBtn.disabled = true;
+    }
+    function startCooldown() {
+      if (cooldownTimer) { clearInterval(cooldownTimer); }
+      cooldownTimer = setInterval(updateCooldown, 200);
+      updateCooldown();
+    }
+
+    function showSession(user) {
+      authForms.style.display = 'none';
+      document.getElementById('authTabs').style.display = 'none';
+      document.querySelector('.auth-sub').style.display = 'none';
+      document.getElementById('authBack').style.display = 'none';
+      loggedIn.style.display = 'block';
+      document.getElementById('userName').textContent = user.username || user.name || '';
+      document.getElementById('userEmail').textContent = user.email || '';
+      errorEl.textContent = '';
+      okEl.textContent = 'Đã đăng nhập.';
+      var isAdmin = user.role === 'admin';
+      document.getElementById('adminPanelWrap').style.display = isAdmin ? 'block' : 'none';
+    }
+
+    function resetWidget() {
+      var el = activeWidget();
+      if (el && window.turnstile && typeof window.turnstile.reset === 'function') {
+        try { window.turnstile.reset(el); } catch (e) { /* ignore */ }
+      }
+      submitBtn.disabled = true;
+    }
+
+    function showError(msg) {
+      okEl.textContent = '';
+      errorEl.textContent = msg;
+      if (window.turnstile && !turnstileSolved()) submitBtn.disabled = true;
+      else submitBtn.disabled = false;
+    }
+
+    function setMode(m) {
+      mode = m;
+      document.querySelectorAll('.auth-tab').forEach(function (t) {
+        t.classList.toggle('active', t.getAttribute('data-mode') === m);
+      });
+      document.querySelectorAll('.register-only').forEach(function (el) {
+        el.style.display = (m === 'register') ? '' : 'none';
+      });
+      document.querySelectorAll('.login-only').forEach(function (el) {
+        el.style.display = (m === 'login') ? '' : 'none';
+      });
+      submitBtn.textContent = (m === 'register') ? 'Tạo tài khoản' : 'Đăng nhập';
+      errorEl.textContent = '';
+      okEl.textContent = '';
+      if (window.turnstile && !turnstileSolved()) submitBtn.disabled = true;
+    }
+
+    function activeWidget() {
+      return mode === 'register'
+        ? document.getElementById('turnstile-register')
+        : document.getElementById('turnstile-login');
+    }
+
+    function turnstileSolved() {
+      var el = activeWidget();
+      return !!(window.turnstile && el && window.turnstile.getResponse(el));
+    }
+
+    function onTurnstileSuccess() { submitBtn.disabled = false; }
+    function onTurnstileExpired() { submitBtn.disabled = true; }
+    function onTurnstileError() { submitBtn.disabled = true; }
+
+    var termsModal = document.getElementById('termsModal');
+    var termsCheck = document.getElementById('termsCheck');
+    document.getElementById('termsLink').addEventListener('click', function () {
+      termsModal.classList.add('open');
+    });
+    document.getElementById('termsClose').addEventListener('click', function () {
+      termsModal.classList.remove('open');
+    });
+    document.getElementById('termsAgree').addEventListener('click', function () {
+      termsCheck.checked = true;
+      termsModal.classList.remove('open');
+    });
+    termsModal.addEventListener('click', function (e) {
+      if (e.target === termsModal) termsModal.classList.remove('open');
+    });
+
+    document.querySelectorAll('.auth-tab').forEach(function (t) {
+      t.addEventListener('click', function () { setMode(t.getAttribute('data-mode')); });
+    });
+
+    function doSubmit() {
+      if (!window.AuthSystem || !window.AuthSystem.isConfigured()) {
+        showError('Backend chưa được cấu hình. Vui lòng dán URL API.');
+        return;
+      }
+      var wait = window.AuthSystem.cooldownRemaining();
+      if (wait > 0) {
+        showError('Vui lòng đợi ' + Math.ceil(wait / 1000) + ' giây trước khi đăng nhập hoặc tạo tài khoản.');
+        return;
+      }
+      var loginId = emailEl.value.trim();
+      var password = passEl.value;
+      if (!loginId || !password) { showError('Vui lòng nhập email/tên đăng nhập và mật khẩu.'); return; }
+      if (window.turnstile && !turnstileSolved()) {
+        showError('Vui lòng hoàn tất xác minh "Tôi không phải người máy".');
+        return;
+      }
+
+      if (mode === 'register') {
+        var name = nameEl.value.trim();
+        if (!name) { showError('Vui lòng nhập tên đăng nhập.'); return; }
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginId)) { showError('Email không hợp lệ.'); return; }
+        if (password.length < 6) { showError('Mật khẩu phải có ít nhất 6 ký tự.'); return; }
+        if (password !== pass2El.value) { showError('Mật khẩu nhập lại không khớp.'); return; }
+        if (!termsCheck.checked) { showError('Vui lòng đồng ý với Điều khoản sử dụng.'); return; }
+        submitBtn.disabled = true;
+        AuthSystem.register(loginId, name, password).then(function (data) {
+          showSession(data.user);
+          setTimeout(function () { window.location.href = 'sfw/'; }, 1200);
+        }).catch(function (e) { resetWidget(); showError(e.message); });
+      } else {
+        submitBtn.disabled = true;
+        AuthSystem.login(loginId, password).then(function (data) {
+          showSession(data.user);
+          setTimeout(function () {
+            window.location.href = (data.user && data.user.role === 'admin') ? 'control-panel.html' : 'sfw/';
+          }, 1200);
+        }).catch(function (e) { resetWidget(); showError(e.message); });
+      }
+    }
+
+    submitBtn.addEventListener('click', doSubmit);
+    document.addEventListener('keydown', function (e) { if (e.key === 'Enter') doSubmit(); });
+    document.getElementById('logoutBtn').addEventListener('click', function () {
+      AuthSystem.logout().then(function () {
+        loggedIn.style.display = 'none';
+        authForms.style.display = '';
+        document.getElementById('authTabs').style.display = '';
+        document.querySelector('.auth-sub').style.display = '';
+        document.getElementById('authBack').style.display = '';
+        setMode('login');
+        startCooldown();
+      });
+    });
+
+    if (window.AuthSystem.cooldownRemaining() > 0) startCooldown();
+    window.AuthSystem.me().then(function (user) { if (user) showSession(user); });
+  </script>
+</body>
+</html>

manga-api.js

@@ -0,0 +1,113 @@
+window.MANGA_API = (function () {
+  var RATE_MSG = 'MangaDex đang giới hạn yêu cầu. Vui lòng thử lại sau';
+
+  var RATING_SAFE = '&contentRating[]=safe&contentRating[]=suggestive';
+  var RATING_ALL = RATING_SAFE + '&contentRating[]=erotica&contentRating[]=pornographic';
+  var FEED_LIMIT = 100;
+
+  function api(url) {
+    function request() {
+      return fetch(window.MD_WORKER + url).then(function (r) {
+        if (r.status === 404) throw { notFound: true };
+        if (r.status === 429) throw { rateLimited: true };
+        if (r.status >= 500) throw { serverError: true };
+        if (!r.ok) return r.text().then(function (t) { throw new Error('HTTP ' + r.status + (t ? ': ' + t : '')); });
+        return r.json();
+      });
+    }
+    return request().catch(function (e) {
+      if (!(e && e.rateLimited)) throw e;
+      return new Promise(function (resolve) { setTimeout(resolve, 2000); }).then(request);
+    });
+  }
+
+  function contentRatingParam(nsfw) { return nsfw ? RATING_ALL : RATING_SAFE; }
+
+  function feedUrl(mangaId, lang, nsfw, offset) {
+    return '/manga/' + mangaId + '/feed?limit=' + FEED_LIMIT + '&offset=' + offset + '&order[chapter]=asc&includes[]=scanlation_group'
+      + (lang && lang !== 'all' ? '&translatedLanguage[]=' + lang : '')
+      + contentRatingParam(nsfw);
+  }
+
+  function fetchLang(mangaId, lang, nsfw) {
+    var all = [];
+    var offset = 0;
+    function page() {
+      return api(feedUrl(mangaId, lang, nsfw, offset)).then(function (j) {
+        all = all.concat(j.data || []);
+        offset += FEED_LIMIT;
+        if (j.data && j.data.length === FEED_LIMIT) return page();
+        return all;
+      });
+    }
+    return page();
+  }
+
+  function chooseChapters(mangaId, nsfw, want) {
+    var w = want || 'vi';
+    return fetchLang(mangaId, w, nsfw).then(function (chs) {
+      if (chs.length) return { lang: w, chapters: chs };
+      if (w === 'vi') {
+        return fetchLang(mangaId, 'en', nsfw).then(function (en) {
+          if (en.length) return { lang: 'en', chapters: en };
+          return fetchLang(mangaId, 'all', nsfw).then(function (all) { return { lang: 'all', chapters: all }; });
+        });
+      }
+      if (w === 'en') {
+        return fetchLang(mangaId, 'all', nsfw).then(function (all) { return { lang: 'all', chapters: all }; });
+      }
+      return { lang: w, chapters: chs };
+    });
+  }
+
+  function chapterPages(chapterId) {
+    return api('/at-home/server/' + chapterId).then(function (j) {
+      return {
+        base: j.baseUrl,
+        hash: j.chapter && j.chapter.hash,
+        files: (j.chapter && j.chapter.data) || [],
+        saver: (j.chapter && j.chapter.dataSaver) || []
+      };
+    });
+  }
+
+  function pageSrc(base, hash, file, saver) {
+    var direct = base + (saver ? '/data-saver/' : '/data/') + hash + '/' + file;
+    if (window.MD_WORKER) {
+      var workerBase = String(window.MD_WORKER).replace(/\/+$/, '');
+      return workerBase + '/img?u=' + encodeURIComponent(direct);
+    }
+    return direct;
+  }
+
+  function langName(l) { return l === 'vi' ? 'Vietsub' : l === 'en' ? 'English' : 'All'; }
+
+  function errorMessage(e) {
+    if (e && e.notFound) return 'Content not found.';
+    if (e && e.rateLimited) return RATE_MSG;
+    if (e && e.serverError) return 'MangaDex đang gặp lỗi tạm thời. Vui lòng thử lại sau.';
+    return null;
+  }
+
+  function qs(n) { var m = new RegExp('[?&]' + n + '=([^&]*)').exec(location.search); return m ? decodeURIComponent(m[1]) : null; }
+
+  function chapterLabel(ch) {
+    var a = ch.attributes || {};
+    var s = a.chapter ? 'Chương ' + a.chapter : 'Chương khác';
+    if (a.title) s += ': ' + a.title;
+    return s;
+  }
+
+  return {
+    RATE_MSG: RATE_MSG,
+    api: api,
+    fetchLang: fetchLang,
+    chooseChapters: chooseChapters,
+    chapterPages: chapterPages,
+    pageSrc: pageSrc,
+    langName: langName,
+    errorMessage: errorMessage,
+    qs: qs,
+    chapterLabel: chapterLabel
+  };
+})();

manga-config.js

@@ -0,0 +1 @@
+window.MD_WORKER = 'https://anivietdb.npgia-himlam.workers.dev/';

scan_anime_result.json

@@ -0,0 +1,1314 @@
+[
+  {
+    "name": "Date A Live (Phần 1)",
+    "page": "anime/universal/date-a-live/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Date A Live",
+    "diff": null
+  },
+  {
+    "name": "Date A Live: Date to Date (OVA)",
+    "page": "anime/universal/date-a-live/ova-date-to-date/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Date A Live: Date to Date",
+    "diff": null
+  },
+  {
+    "name": "Date A Live II (Phần 2)",
+    "page": "anime/universal/date-a-live/phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (10/10)",
+    "srcName": "Date A Live II",
+    "diff": null
+  },
+  {
+    "name": "Date A Live II: Kurumi Star Festival (OVA)",
+    "page": "anime/universal/date-a-live/ova-kurumi/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Date A Live II: Kurumi Star Festival",
+    "diff": null
+  },
+  {
+    "name": "Date A Live Movie: Mayuri Judgment",
+    "page": "anime/universal/date-a-live/movie-mayuri/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Date A Live Movie: Mayuri Judgment",
+    "diff": null
+  },
+  {
+    "name": "Date A Live III (Phần 3)",
+    "page": "anime/universal/date-a-live/phan-3/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Date A Live III",
+    "diff": null
+  },
+  {
+    "name": "Date A Live IV (Phần 4)",
+    "page": "anime/universal/date-a-live/phan-4/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Date A Live IV",
+    "diff": null
+  },
+  {
+    "name": "Date A Live V (Phần 5)",
+    "page": "anime/universal/date-a-live/phan-5/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Date A Live V",
+    "diff": null
+  },
+  {
+    "name": "Date A Bullet",
+    "page": "anime/universal/date-a-live/spin-off-date-a-bullet/",
+    "local": 0,
+    "src": "Hoàn tất (2/2)",
+    "srcName": "Date A Bullet",
+    "diff": null
+  },
+  {
+    "name": "Date A Bullet: Dead or Bullet",
+    "page": "anime/universal/date-a-live/spin-off-dead-or-bullet/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Date A Bullet: Dead or Bullet",
+    "diff": null
+  },
+  {
+    "name": "Aishiteru Game wo Owarasetai",
+    "page": "anime/universal/aishiteru-game/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Aishiteru Game wo Owarasetai",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou (Phần 1)",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Chuunibyou demo Koi ga Shitai!",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou: Slapstick Noel",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/slapstick-noel/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Chuunibyou demo Koi ga Shitai!: Kirameki no... Slapstick Noel",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou Movie: Rikka Kai",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/movie-rikka-kai/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Takanashi Rikka Kai: Chuunibyou demo Koi ga Shitai! Movie",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou Ren (Phần 2)",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (7/7)",
+    "srcName": "Chuunibyou demo Koi ga Shitai! Ren Specials",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou Ren Lite",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/ren-lite/",
+    "local": 0,
+    "src": "Hoàn tất (6/6)",
+    "srcName": "Chuunibyou demo Koi ga Shitai! Ren Lite",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou: The Rikka Wars",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/rikka-wars/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Chuunibyou demo Koi ga Shitai! Ren: The Rikka Wars",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou Ren Specials",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/ren-specials/",
+    "local": 0,
+    "src": "Hoàn tất (7/7)",
+    "srcName": "Chuunibyou demo Koi ga Shitai! Ren Specials",
+    "diff": null
+  },
+  {
+    "name": "Chuunibyou Movie: Take On Me",
+    "page": "anime/universal/chuunibyou-demo-koi-ga-shitai/movie-take-on-me/",
+    "local": 0,
+    "src": "Trailer",
+    "srcName": "Hội Chứng Chuunibyou: Chấp Nhận Tôi",
+    "diff": null
+  },
+  {
+    "name": "Seishun Buta Yarou (Phần 1)",
+    "page": "anime/universal/seishun-buta-yarou/phan-1/",
+    "local": 13,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Seishun Buta Yarou wa Bunny Girl Senpai no Yume wo Minai",
+    "diff": null
+  },
+  {
+    "name": "Hội Chứng Tuổi Thanh Xuân: Thiếu Nữ Mộng Mơ",
+    "page": "anime/universal/seishun-buta-yarou/movie-1/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Hội chứng tuổi thanh xuân: Thiếu nữ mộng mơ",
+    "diff": null
+  },
+  {
+    "name": "Hội Chứng Tuổi Thanh Xuân: Em Gái Xuất Hành",
+    "page": "anime/universal/seishun-buta-yarou/movie-2/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Hội Chứng Tuổi Thanh Xuân: Em Gái Xuất Hành",
+    "diff": null
+  },
+  {
+    "name": "Hội Chứng Tuổi Thanh Xuân: Cô Bé Đeo Cặp Sách",
+    "page": "anime/universal/seishun-buta-yarou/movie-3/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Seishun Buta Yarou (Phần 2)",
+    "page": "anime/universal/seishun-buta-yarou/phan-2/",
+    "local": 13,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Seishun Buta Yarou wa Santa Claus no Yume wo Minai",
+    "diff": null
+  },
+  {
+    "name": "Slime (Phần 1)",
+    "page": "anime/universal/tensei-slime/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (5/5)",
+    "srcName": "Tensei shitara Slime Datta Ken OVA",
+    "diff": null
+  },
+  {
+    "name": "Slime (Phần 2)",
+    "page": "anime/universal/tensei-slime/phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (24/24)",
+    "srcName": "Lúc Đó, Tôi Đã Chuyển Sinh Thành Slime (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "Slime (Phần 3)",
+    "page": "anime/universal/tensei-slime/phan-3/",
+    "local": 0,
+    "src": "Hoàn tất (26/26)",
+    "srcName": "Lúc Đó, Tôi Đã Chuyển Sinh Thành Slime (Phần 3)",
+    "diff": null
+  },
+  {
+    "name": "Slime (Phần 4)",
+    "page": "anime/universal/tensei-slime/phan-4/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Slime: Nhật Ký Của Rimuru",
+    "page": "anime/universal/tensei-slime/nhat-ky-rimuru/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Slime OVA",
+    "page": "anime/universal/tensei-slime/ova/",
+    "local": 0,
+    "src": "Hoàn tất (5/5)",
+    "srcName": "Tensei shitara Slime Datta Ken OVA",
+    "diff": null
+  },
+  {
+    "name": "Slime Movie: Mối Liên Kết Đỏ Thẫm",
+    "page": "anime/universal/tensei-slime/moi-lien-ket-do-tham/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Slime Movie: Nước Mắt Đại Dương",
+    "page": "anime/universal/tensei-slime/nuoc-mat-dai-duong/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Lúc Đó Tôi Chuyển Sinh Thành Slime: Nước Mắt Đại Dương",
+    "diff": null
+  },
+  {
+    "name": "Slime: Giấc Mộng Coleus",
+    "page": "anime/universal/tensei-slime/giac-mong-coleus/",
+    "local": 0,
+    "src": "Hoàn tất (3/3)",
+    "srcName": "Lúc đó tôi đã chuyển sinh thành Slime: Giấc mộng Coleus",
+    "diff": null
+  },
+  {
+    "name": "Arya Bàn Bên Thỉnh Thoảng Lại Trêu Ghẹo Tôi Bằng Tiếng Nga",
+    "page": "anime/universal/arya-ban-ben/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Arya Bàn Bên Thỉnh Thoảng Lại Trêu Ghẹo Tôi Bằng Tiếng Nga",
+    "diff": null
+  },
+  {
+    "name": "Thiên Sứ Nhà Bên (Phần 1)",
+    "page": "anime/universal/thien-su-nha-ben/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Thiên Sứ Nhà Bên (Phần 1)",
+    "diff": null
+  },
+  {
+    "name": "Thiên Sứ Nhà Bên (Phần 2)",
+    "page": "anime/universal/thien-su-nha-ben/phan-2/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Gundam 00 (Phần 1)",
+    "page": "anime/multiversal/gundam/gundam-00/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Mobile Suit Gundam 00",
+    "diff": null
+  },
+  {
+    "name": "Gundam 00 (Phần 2)",
+    "page": "anime/multiversal/gundam/gundam-00/phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Mobile Suit Gundam 00 Second Season",
+    "diff": null
+  },
+  {
+    "name": "Gundam 00 Movie: A Wakening of the Trailblazer",
+    "page": "anime/multiversal/gundam/gundam-00/movie/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Mobile Suit Gundam 00 The Movie: A Wakening of the Trailblazer",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Fighters",
+    "page": "anime/multiversal/gundam/gundam-build-fighters/phan-1/",
+    "local": 25,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Gundam Build Fighters",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Fighters Try",
+    "page": "anime/multiversal/gundam/gundam-build-fighters/try/",
+    "local": 25,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Gundam Build Fighters Try",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Fighters Try: Island Wars",
+    "page": "anime/multiversal/gundam/gundam-build-fighters/island-wars/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Gundam Build Fighters Try: Island Wars",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Fighters Specials",
+    "page": "anime/multiversal/gundam/gundam-build-fighters/specials/",
+    "local": 3,
+    "src": "Hoàn tất (3/3)",
+    "srcName": "Gundam Build Fighters Specials",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Fighters Battlogue",
+    "page": "anime/multiversal/gundam/gundam-build-fighters/battlogue/",
+    "local": 5,
+    "src": "Hoàn tất (5/5)",
+    "srcName": "Gundam Build Fighters: Battlogue",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Divers",
+    "page": "anime/multiversal/gundam/gundam-build-divers/phan-1/",
+    "local": 25,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Gundam Build Divers",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Divers Re:Rise",
+    "page": "anime/multiversal/gundam/gundam-build-divers/rerise/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Divers Re:Rise Season 2",
+    "page": "anime/multiversal/gundam/gundam-build-divers/rerise-s2/",
+    "local": 14,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Divers Re:Rise OVA",
+    "page": "anime/multiversal/gundam/gundam-build-divers/ova/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Zero (Phần 1)",
+    "page": "anime/multiversal/fate/fate-zero/phan-1/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Zero (Phần 2)",
+    "page": "anime/multiversal/fate/fate-zero/phan-2/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/stay night (2006)",
+    "page": "anime/multiversal/fate/fate-stay-night/fsn-2006/",
+    "local": 0,
+    "src": "Hoàn tất (24/24)",
+    "srcName": "Fate/stay night",
+    "diff": null
+  },
+  {
+    "name": "Fate/stay night: Unlimited Blade Works",
+    "page": "anime/multiversal/fate/fate-stay-night/ubw/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Fate/stay night: Unlimited Blade Works",
+    "diff": null
+  },
+  {
+    "name": "Fate/stay night: UBW (Phần 2)",
+    "page": "anime/multiversal/fate/fate-stay-night/ubw-s2/",
+    "local": 0,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Fate/stay night: Unlimited Blade Works 2nd Season",
+    "diff": null
+  },
+  {
+    "name": "Fate/stay night: UBW Sunny Day",
+    "page": "anime/multiversal/fate/fate-stay-night/sunny-day/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/stay night Movie: Unlimited Blade Works",
+    "page": "anime/multiversal/fate/fate-stay-night/movie-ubw/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Heaven\\",
+    "page": "anime/multiversal/fate/heavens-feel/movie-1/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Heaven\\",
+    "page": "anime/multiversal/fate/heavens-feel/movie-2/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Heaven\\",
+    "page": "anime/multiversal/fate/heavens-feel/movie-3/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/kaleid Prisma☆Illya (Phần 1)",
+    "page": "anime/multiversal/fate/fate-kaleid/phan-1/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/kaleid Prisma☆Illya 2wei!",
+    "page": "anime/multiversal/fate/fate-kaleid/phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (10/10)",
+    "srcName": "Fate/kaleid liner Prisma☆Illya 2wei!",
+    "diff": null
+  },
+  {
+    "name": "Fate/kaleid Prisma☆Illya 2wei Herz!",
+    "page": "anime/multiversal/fate/fate-kaleid/phan-3/",
+    "local": 0,
+    "src": "Hoàn tất (10/10)",
+    "srcName": "Fate/kaleid liner Prisma☆Illya 2wei Herz!",
+    "diff": null
+  },
+  {
+    "name": "Fate/kaleid Prisma☆Illya 3rei!!",
+    "page": "anime/multiversal/fate/fate-kaleid/phan-4/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/kaleid Prisma☆Illya Movie: Sekka no Chikai",
+    "page": "anime/multiversal/fate/fate-kaleid/movie-sekka/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/kaleid Prisma☆Illya Movie: Licht",
+    "page": "anime/multiversal/fate/fate-kaleid/movie-licht/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Cuộc Chiến Chén Thánh",
+    "page": "anime/multiversal/fate/fate-kaleid/cuoc-chien-chen-thanh/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Apocrypha",
+    "page": "anime/multiversal/fate/fate-apocrypha/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Extra: Last Encore",
+    "page": "anime/multiversal/fate/fate-extra/last-encore/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Extra: Last Encore - Illustrias Tendousetsu",
+    "page": "anime/multiversal/fate/fate-extra/illustrias/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: First Order",
+    "page": "anime/multiversal/fate/fate-grand-order/first-order/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: Moonlight/Lostroom",
+    "page": "anime/multiversal/fate/fate-grand-order/moonlight-lostroom/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Fate/Grand Order: Moonlight/Lostroom",
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: Babylonia",
+    "page": "anime/multiversal/fate/fate-grand-order/babylonia/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: Camelot 1 - Wandering; Agateram",
+    "page": "anime/multiversal/fate/fate-grand-order/camelot-1/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: Camelot 2 - Paladin; Agateram",
+    "page": "anime/multiversal/fate/fate-grand-order/camelot-2/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: Solomon",
+    "page": "anime/multiversal/fate/fate-grand-order/solomon/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Fate/Grand Order: Shuukyoku Tokuiten - Kani Jikan Shinden Solomon",
+    "diff": null
+  },
+  {
+    "name": "Fate/Grand Order: Himuro no Tenchi",
+    "page": "anime/multiversal/fate/fate-grand-order/himuro/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/strange Fake: Whispers of Dawn",
+    "page": "anime/multiversal/fate/fate-strange-fake/whispers-of-dawn/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Fate/strange Fake",
+    "page": "anime/multiversal/fate/fate-strange-fake/tv/",
+    "local": 0,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Fate/strange Fake",
+    "diff": null
+  },
+  {
+    "name": "Gundam Build Metaverse",
+    "page": "anime/multiversal/gundam/gundam-build-metaverse/",
+    "local": 0,
+    "src": "Tập 1",
+    "srcName": "Gundam Build Metaverse",
+    "diff": null
+  },
+  {
+    "name": "JoJo Phần 1",
+    "page": "anime/universal/jojo/phan-1/",
+    "local": 26,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "JoJo Phần 2",
+    "page": "anime/universal/jojo/phan-2/",
+    "local": 48,
+    "src": "Hoàn tất (48/48)",
+    "srcName": "Cuộc phiêu lưu kì lạ của JoJo (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "JoJo Phần 3",
+    "page": "anime/universal/jojo/phan-3/",
+    "local": 39,
+    "src": "FULL",
+    "srcName": "Cuộc Phiêu Lưu Kì Lạ Của Jojo: Kim Cương Bất Bại",
+    "diff": null
+  },
+  {
+    "name": "JoJo Phần 4",
+    "page": "anime/universal/jojo/phan-4/",
+    "local": 39,
+    "src": "Hoàn tất (39/39)",
+    "srcName": "Cuộc phiêu lưu kì lạ của JoJo (Phần 4)",
+    "diff": null
+  },
+  {
+    "name": "JoJo Phần 5",
+    "page": "anime/universal/jojo/phan-5/",
+    "local": 38,
+    "src": "Hoàn tất (38/38)",
+    "srcName": "Cuộc phiêu lưu kì lạ của JoJo (Phần 5)",
+    "diff": null
+  },
+  {
+    "name": "JoJo Steel Ball Run",
+    "page": "anime/universal/jojo/steel-ball-run/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "STEEL BALL RUN: Cuộc phiêu lưu kì lạ của JoJo",
+    "diff": null
+  },
+  {
+    "name": "Bocchi the Rock!",
+    "page": "anime/universal/bocchi-the-rock/phan-1/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Tay rock Bocchi!",
+    "diff": null
+  },
+  {
+    "name": "Bocchi the Rock! Movie",
+    "page": "anime/universal/bocchi-the-rock/movie/",
+    "local": 1,
+    "src": "Hoàn tất (2/2)",
+    "srcName": "Bocchi the Rock! Movie",
+    "diff": null
+  },
+  {
+    "name": "Death Note",
+    "page": "anime/universal/death-note/",
+    "local": 37,
+    "src": "Hoàn tất (37/37)",
+    "srcName": "Quyển Sổ Sinh Mệnh",
+    "diff": null
+  },
+  {
+    "name": "Kết Hôn Với Người Mình Ghét Nhất Lớp",
+    "page": "anime/universal/class-no-daikirai/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Class no Daikirai na Joshi to Kekkon suru Koto ni Natta.",
+    "diff": null
+  },
+  {
+    "name": "Công Chúa Ma Cà Rồng Tầm Thường",
+    "page": "anime/universal/cong-chua-ma-ca-rong/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Công Chúa Ma Cà Rồng Tầm Thường",
+    "diff": null
+  },
+  {
+    "name": "Vùng Đất Linh Hồn",
+    "page": "anime/universal/vung-dat-linh-hon/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Lời Thì Thầm Của Trái Tim",
+    "page": "anime/universal/loi-thi-tham-cua-trai-tim/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Lời Thì Thầm Của Trái Tim",
+    "diff": null
+  },
+  {
+    "name": "Lâu Đài Di Động Của Howl",
+    "page": "anime/universal/lau-dai-di-dong-cua-howl/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Lâu Đài Di Động Của Howl",
+    "diff": null
+  },
+  {
+    "name": "Shikimori-san",
+    "page": "anime/universal/shikimori-san/",
+    "local": 12,
+    "src": "Hoàn tất (14/14)",
+    "srcName": "Kawaii dake ja Nai Shikimori-san",
+    "diff": null
+  },
+  {
+    "name": "Dr. Stone (Phần 1)",
+    "page": "anime/universal/dr-stone/phan-1/",
+    "local": 24,
+    "src": "Hoàn tất (24/24)",
+    "srcName": "Tiến sĩ Đá (Phần 1)",
+    "diff": null
+  },
+  {
+    "name": "Dr. Stone (Phần 2)",
+    "page": "anime/universal/dr-stone/phan-2/",
+    "local": 11,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Dr. Stone (Phần 3)",
+    "page": "anime/universal/dr-stone/phan-3/",
+    "local": 22,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Dr. Stone (Phần 4)",
+    "page": "anime/universal/dr-stone/phan-4/",
+    "local": 37,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Kimi ga Shinu made Koi wo Shitai",
+    "page": "anime/universal/kimi-ga-shinu-made-koi-wo-shitai/",
+    "local": 6,
+    "src": "Tập 6",
+    "srcName": "Kimi ga Shinu made Koi wo Shitai",
+    "diff": null
+  },
+  {
+    "name": "Oregairu OVA",
+    "page": "anime/universal/oregairu/ova/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Yahari Ore no Seishun Love Comedy wa Machigatteiru. OVA",
+    "diff": null
+  },
+  {
+    "name": "Oregairu (Phần 1)",
+    "page": "anime/universal/oregairu/phan-1/",
+    "local": 13,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Yahari Ore no Seishun Love Comedy wa Machigatteiru. Zoku",
+    "diff": null
+  },
+  {
+    "name": "Oregairu (Phần 2) - Zoku",
+    "page": "anime/universal/oregairu/phan-2/",
+    "local": 13,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Yahari Ore no Seishun Love Comedy wa Machigatteiru. Zoku",
+    "diff": null
+  },
+  {
+    "name": "Oregairu Zoku OVA",
+    "page": "anime/universal/oregairu/zoku-ova/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Yahari Ore no Seishun Love Comedy wa Machigatteiru. Zoku OVA",
+    "diff": null
+  },
+  {
+    "name": "Oregairu (Phần 3) - Kan",
+    "page": "anime/universal/oregairu/phan-3/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Yahari Ore no Seishun Love Comedy wa Machigatteiru. Kan",
+    "diff": null
+  },
+  {
+    "name": "Oregairu Kan OVA",
+    "page": "anime/universal/oregairu/kan-ova/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Yahari Ore no Seishun Love Comedy wa Machigatteiru. Kan OVA",
+    "diff": null
+  },
+  {
+    "name": "Classroom of the Elite (Phần 1)",
+    "page": "anime/universal/classroom-of-the-elite/phan-1/",
+    "local": 12,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Chào Mừng Đến Lớp Học Đề Cao Thực Lực (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "Classroom of the Elite (Phần 2)",
+    "page": "anime/universal/classroom-of-the-elite/phan-2/",
+    "local": 13,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Chào Mừng Đến Lớp Học Đề Cao Thực Lực (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "Classroom of the Elite (Phần 3)",
+    "page": "anime/universal/classroom-of-the-elite/phan-3/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Classroom of the Elite (Phần 4)",
+    "page": "anime/universal/classroom-of-the-elite/phan-4/",
+    "local": 16,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Bukiyou na Senpai",
+    "page": "anime/universal/bukiyou-na-senpai/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Bukiyou na Senpai.",
+    "diff": null
+  },
+  {
+    "name": "Tomodachi no Imouto",
+    "page": "anime/universal/tomodachi-no-imouto/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Tomodachi no Imouto ga Ore ni dake Uzai",
+    "diff": null
+  },
+  {
+    "name": "Class de 2-banme ni Kawaii",
+    "page": "anime/universal/class-de-2-banme/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Class de 2-banme ni Kawaii Onnanoko to Tomodachi ni Natta",
+    "diff": null
+  },
+  {
+    "name": "Kẻ Ngây Thơ, Người Từng Trải",
+    "page": "anime/universal/ke-ngay-tho/",
+    "local": 12,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Kẻ Ngây Thơ, Người Từng Trải Và Câu Chuyện Tình Của Chúng Ta",
+    "diff": null
+  },
+  {
+    "name": "Cô Bạn Tôi Thầm Thích Lại Quên Mang Kính Rồi",
+    "page": "anime/universal/co-ban-toi-tham-thich/",
+    "local": 13,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Cô Bạn Tôi Thầm Thích Lại Quên Mang Kính Rồi",
+    "diff": null
+  },
+  {
+    "name": "Shigatsu wa Kimi no Uso",
+    "page": "anime/universal/shigatsu-wa-kimi-no-uso/",
+    "local": 22,
+    "src": "Hoàn tất (22/22)",
+    "srcName": "Shigatsu wa Kimi no Uso",
+    "diff": null
+  },
+  {
+    "name": "Kanojo mo Kanojo (Phần 1)",
+    "page": "anime/universal/kanojo-mo-kanojo/phan-1/",
+    "local": 12,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Kanojo mo Kanojo (Phần 2)",
+    "page": "anime/universal/kanojo-mo-kanojo/phan-2/",
+    "local": 12,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "BokuBen OVA",
+    "page": "anime/universal/bokutachi-wa-benkyou-ga-dekinai/ova/",
+    "local": 2,
+    "src": "Hoàn tất (2/2)",
+    "srcName": "Bokutachi wa Benkyou ga Dekinai OVA",
+    "diff": null
+  },
+  {
+    "name": "BokuBen (Phần 1)",
+    "page": "anime/universal/bokutachi-wa-benkyou-ga-dekinai/phan-1/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "BokuBen (Phần 2)",
+    "page": "anime/universal/bokutachi-wa-benkyou-ga-dekinai/phan-2/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Umayon (Spin-off)",
+    "page": "anime/universal/uma-musume/umayon/",
+    "local": 12,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Uma Musume (Phần 1)",
+    "page": "anime/universal/uma-musume/phan-1/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Uma Musume: BNW no Chikai",
+    "page": "anime/universal/uma-musume/bnw-no-chikai/",
+    "local": 3,
+    "src": "Hoàn tất (3/3)",
+    "srcName": "Uma Musume: Pretty Derby - BNW no Chikai",
+    "diff": null
+  },
+  {
+    "name": "Uma Musume (Phần 2)",
+    "page": "anime/universal/uma-musume/phan-2/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Uma Musume (Phần 3)",
+    "page": "anime/universal/uma-musume/phan-3/",
+    "local": 13,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Uma Musume Movie: Shin Jidai",
+    "page": "anime/universal/uma-musume/movie/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Uma Musume: Pretty Derby - Shin Jidai no Tobira",
+    "diff": null
+  },
+  {
+    "name": "Uma Musume: Road to the Top",
+    "page": "anime/universal/uma-musume/road-to-the-top/",
+    "local": 4,
+    "src": "Hoàn tất (4/4)",
+    "srcName": "Uma Musume: Pretty Derby - Road to the Top",
+    "diff": null
+  },
+  {
+    "name": "Uma Musume: Cinderella Gray",
+    "page": "anime/universal/uma-musume/cinderella-gray/",
+    "local": 23,
+    "src": "Hoàn tất (23/23)",
+    "srcName": "Uma Musume: Cinderella Gray",
+    "diff": null
+  },
+  {
+    "name": "Record of Ragnarok (P1)",
+    "page": "anime/universal/record-of-ragnarok/phan-1/",
+    "local": 12,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Record of Ragnarok (P2)",
+    "page": "anime/universal/record-of-ragnarok/phan-2/",
+    "local": 15,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Record of Ragnarok (P3)",
+    "page": "anime/universal/record-of-ragnarok/phan-3/",
+    "local": 15,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Eminence in Shadow (P1)",
+    "page": "anime/universal/emine-in-shadow/phan-1/",
+    "local": 20,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Eminence in Shadow (P2)",
+    "page": "anime/universal/emine-in-shadow/phan-2/",
+    "local": 12,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Bảo Mẫu Bí Mật Của Tiểu Thư",
+    "page": "anime/universal/bao-mau-bi-mat-cua-tieu-thu/",
+    "local": 0,
+    "src": "Tập 7",
+    "srcName": "Bảo Mẫu Bí Mật Của Tiểu Thư",
+    "diff": null
+  },
+  {
+    "name": "Thiếu Nữ Quái Vật Caramelise",
+    "page": "anime/universal/thieu-nu-quai-vat-caramelise/",
+    "local": 0,
+    "src": "Tập 7",
+    "srcName": "Thiếu Nữ Quái Vật Caramelise",
+    "diff": null
+  },
+  {
+    "name": "Nhật Ký Thường Ngày Của Tiên Vương (Phần 1)",
+    "page": "anime/universal/nhat-ky-tien-vuong/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Nhật Ký Thường Ngày Của Tiên Vương (Phần 3)",
+    "diff": null
+  },
+  {
+    "name": "Nhật Ký Thường Ngày Của Tiên Vương (Phần 2)",
+    "page": "anime/universal/nhat-ky-tien-vuong/phan-2/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Nhật Ký Thường Ngày Của Tiên Vương (Phần 3)",
+    "page": "anime/universal/nhat-ky-tien-vuong/phan-3/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Nhật Ký Thường Ngày Của Tiên Vương (Phần 4)",
+    "page": "anime/universal/nhat-ky-tien-vuong/phan-4/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Nhật Ký Thường Ngày Của Tiên Vương (Phần 5)",
+    "page": "anime/universal/nhat-ky-tien-vuong/phan-5/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Ore wo Suki nano wa Omae dake ka yo",
+    "page": "anime/universal/ore-wo-suki/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Ore wo Suki nano wa Omae dake ka yo",
+    "diff": null
+  },
+  {
+    "name": "Ore wo Suki Movie: Oretachi no Game Set",
+    "page": "anime/universal/ore-wo-suki/movie/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Boku no Kokoro no Yabai Yatsu (Phần 1)",
+    "page": "anime/universal/boku-yabai/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Boku no Kokoro no Yabai Yatsu",
+    "diff": null
+  },
+  {
+    "name": "Boku no Kokoro no Yabai Yatsu (Phần 2)",
+    "page": "anime/universal/boku-yabai/phan-2/",
+    "local": 0,
+    "src": null,
+    "srcName": null,
+    "diff": null
+  },
+  {
+    "name": "Thất Nghiệp Chuyển Sinh (Phần 1)",
+    "page": "anime/universal/that-nghiep-chuyen-sinh/phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (23/23)",
+    "srcName": "Thất Nghiệp Chuyển Sinh (Phần 1)",
+    "diff": null
+  },
+  {
+    "name": "Thất Nghiệp Chuyển Sinh (Phần 2)",
+    "page": "anime/universal/that-nghiep-chuyen-sinh/phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Thất Nghiệp Chuyển Sinh (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "Thất Nghiệp Chuyển Sinh (Phần 3)",
+    "page": "anime/universal/that-nghiep-chuyen-sinh/phan-3/",
+    "local": 0,
+    "src": "Tập 8",
+    "srcName": "Thất Nghiệp Chuyển Sinh (Phần 3)",
+    "diff": null
+  },
+  {
+    "name": "Dáng Hình Thanh Âm",
+    "page": "anime/universal/dang-hinh-thanh-am/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Dáng Hình Thanh Âm",
+    "diff": null
+  },
+  {
+    "name": "Sasayaku You ni Koi wo Utau",
+    "page": "anime/universal/sasayaku/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Sasayaku You ni Koi wo Utau",
+    "diff": null
+  },
+  {
+    "name": "Amagami-san Chi no Enmusubi",
+    "page": "anime/universal/amagami-san/",
+    "local": 0,
+    "src": "Hoàn tất (24/24)",
+    "srcName": "Amagami-san Chi no Enmusubi",
+    "diff": null
+  },
+  {
+    "name": "Senpai Của Tôi Thật Phiền Phức",
+    "page": "anime/universal/senpai-ga-uzai/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Senpai ga Uzai Kouhai no Hanashi",
+    "diff": null
+  },
+  {
+    "name": "Mirai Nikki",
+    "page": "anime/universal/mirai-nikki/",
+    "local": 0,
+    "src": "Hoàn tất (26/26)",
+    "srcName": "Mirai Nikki",
+    "diff": null
+  },
+  {
+    "name": "Mirai Nikki: Redial",
+    "page": "anime/universal/mirai-nikki-redial/",
+    "local": 0,
+    "src": "FULL",
+    "srcName": "Mirai Nikki: Redial",
+    "diff": null
+  },
+  {
+    "name": "Toumei na Yoru ni Kakeru Kimi to, Me ni Mienai Koi wo Shita.",
+    "page": "anime/universal/toumei-na-yoru-ni-kakeru-kimi-to-me-ni-mienai-koi-wo-shita/",
+    "local": 0,
+    "src": "Tập 7",
+    "srcName": "Toumei na Yoru ni Kakeru Kimi to, Me ni Mienai Koi wo Shita.",
+    "diff": null
+  },
+  {
+    "name": "Oh Boy, Was I Wrong About Her",
+    "page": "anime/universal/oh-boy-was-i-wrong-about-her/",
+    "local": 0,
+    "src": "Tập 7",
+    "srcName": "Oh Boy, Was I Wrong About Her",
+    "diff": null
+  },
+  {
+    "name": "Kiếm Cơm Bằng Trò Chơi Sinh Tử",
+    "page": "anime/universal/kiem-com-bang-tro-choi-sinh-tu/",
+    "local": 0,
+    "src": "Hoàn tất (11/11)",
+    "srcName": "Kiếm Cơm Bằng Trò Chơi Sinh Tử",
+    "diff": null
+  },
+  {
+    "name": "Hoa thơm kiêu hãnh",
+    "page": "anime/universal/hoa-thom-kieu-hanh/",
+    "local": 0,
+    "src": "Hoàn tất (13/13)",
+    "srcName": "Hoa thơm kiêu hãnh",
+    "diff": null
+  },
+  {
+    "name": "Tôi Sẽ Đỡ Hết Mọi Thứ: Người Mạnh Nhất Thế Giới Với Hiểu Lầm Ngược Đời Muốn Làm Mạo Hiểm Giả",
+    "page": "anime/universal/toi-se-do-het-moi-thu-nguoi-manh-nhat-the-gioi-voi-hieu-lam-nguoc-doi-muon-lam-mao-hiem-gia/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Tôi Sẽ Đỡ Hết Mọi Thứ: Người Mạnh Nhất Thế Giới Với Hiểu Lầm Ngược Đời Muốn Làm Mạo Hiểm Giả",
+    "diff": null
+  },
+  {
+    "name": "Tình Bạn Trai Gái Liệu Có Bền Lâu?",
+    "page": "anime/universal/tinh-ban-trai-gai-lieu-co-ben-lau/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Tình Bạn Trai Gái Liệu Có Bền Lâu?",
+    "diff": null
+  },
+  {
+    "name": "Chuyển Sinh Thành Đệ Thất Hoàng Tử, Tôi Quyết Định Trau Dồi Ma Thuật (Phần 1)",
+    "page": "anime/universal/chuyen-sinh-thanh-de-that-hoang-tu-toi-quyet-dinh-trau-doi-ma-thuat-phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Chuyển Sinh Thành Đệ Thất Hoàng Tử, Tôi Quyết Định Trau Dồi Ma Thuật (Phần 1)",
+    "diff": null
+  },
+  {
+    "name": "Chuyển Sinh Thành Đệ Thất Hoàng Tử, Tôi Quyết Định Trau Dồi Ma Thuật (Phần 2)",
+    "page": "anime/universal/chuyen-sinh-thanh-de-that-hoang-tu-toi-quyet-dinh-trau-doi-ma-thuat-phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Chuyển Sinh Thành Đệ Thất Hoàng Tử, Tôi Quyết Định Trau Dồi Ma Thuật (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "Nguyệt Đạo Dị Giới (Phần 1)",
+    "page": "anime/universal/nguyet-dao-di-gioi-phan-1/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Nguyệt Đạo Dị Giới (Phần 1)",
+    "diff": null
+  },
+  {
+    "name": "Nguyệt Đạo Dị Giới (Phần 2)",
+    "page": "anime/universal/nguyet-dao-di-gioi-phan-2/",
+    "local": 0,
+    "src": "Hoàn tất (25/25)",
+    "srcName": "Nguyệt Đạo Dị Giới (Phần 2)",
+    "diff": null
+  },
+  {
+    "name": "Mashle",
+    "page": "anime/universal/mashle/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Mashle",
+    "diff": null
+  },
+  {
+    "name": "Mashle 2nd Season",
+    "page": "anime/universal/mashle-2nd-season/",
+    "local": 0,
+    "src": "Hoàn tất (12/12)",
+    "srcName": "Mashle 2nd Season",
+    "diff": null
+  }
+]

scan_missing_episodes.json

@@ -0,0 +1,124 @@
+[
+  {
+    "name": "Lời Thì Thầm Của Trái Tim",
+    "page": "anime/universal/loi-thi-tham-cua-trai-tim/",
+    "local": 1,
+    "src": 2,
+    "missing": [
+      {
+        "name": "Full",
+        "slug": "tap-full",
+        "embed": "https://embed14.streamc.xyz/embed.php?hash=d1f64f6d09c52e3173de404da54103bf"
+      }
+    ]
+  },
+  {
+    "name": "Lâu Đài Di Động Của Howl",
+    "page": "anime/universal/lau-dai-di-dong-cua-howl/",
+    "local": 1,
+    "src": 2,
+    "missing": [
+      {
+        "name": "Full",
+        "slug": "tap-full",
+        "embed": "https://embed14.streamc.xyz/embed.php?hash=4c6515b6c3fbb1ddb17170807501dbc7"
+      }
+    ]
+  },
+  {
+    "name": "Classroom of the Elite (Phần 1)",
+    "page": "anime/universal/classroom-of-the-elite/phan-1/",
+    "local": 12,
+    "src": 13,
+    "missing": [
+      {
+        "name": "13",
+        "slug": "tap-13",
+        "embed": "https://embed13.streamc.xyz/embed.php?hash=581db20d7f51959c1bdaa933fb442cfa"
+      }
+    ]
+  },
+  {
+    "name": "Bảo Mẫu Bí Mật Của Tiểu Thư",
+    "page": "anime/universal/bao-mau-bi-mat-cua-tieu-thu/",
+    "local": 6,
+    "src": 7,
+    "missing": [
+      {
+        "name": "7",
+        "slug": "tap-7",
+        "embed": "https://embed14.streamc.xyz/embed.php?hash=60226eae761a770d80b248a4d13dd127"
+      }
+    ]
+  },
+  {
+    "name": "Thiếu Nữ Quái Vật Caramelise",
+    "page": "anime/universal/thieu-nu-quai-vat-caramelise/",
+    "local": 6,
+    "src": 7,
+    "missing": [
+      {
+        "name": "7",
+        "slug": "tap-7",
+        "embed": "https://embed18.streamc.xyz/embed.php?hash=092bb7e9d6b02aa4f8e8b4392e616339"
+      }
+    ]
+  },
+  {
+    "name": "Thất Nghiệp Chuyển Sinh (Phần 3)",
+    "page": "anime/universal/that-nghiep-chuyen-sinh/phan-3/",
+    "local": 7,
+    "src": 8,
+    "missing": [
+      {
+        "name": "8",
+        "slug": "tap-8",
+        "embed": "https://embed1.streamc.xyz/embed.php?hash=2498fe2437b0fd5bd0500bc22ff7b6b1"
+      }
+    ]
+  },
+  {
+    "name": "Toumei na Yoru ni Kakeru Kimi to, Me ni Mienai Koi wo Shita.",
+    "page": "anime/universal/toumei-na-yoru-ni-kakeru-kimi-to-me-ni-mienai-koi-wo-shita/",
+    "local": 6,
+    "src": 7,
+    "missing": [
+      {
+        "name": "7",
+        "slug": "tap-7",
+        "embed": "https://embed2.streamc.xyz/embed.php?hash=7bc1401d400ceefc0c01f0940fb95eb1"
+      }
+    ]
+  },
+  {
+    "name": "Oh Boy, Was I Wrong About Her",
+    "page": "anime/universal/oh-boy-was-i-wrong-about-her/",
+    "local": 6,
+    "src": 7,
+    "missing": [
+      {
+        "name": "7",
+        "slug": "tap-7",
+        "embed": "https://embed12.streamc.xyz/embed.php?hash=11cbc5514e2bdf1c4b5f7ecfc322033a"
+      }
+    ]
+  },
+  {
+    "name": "Chuyển Sinh Thành Đệ Thất Hoàng Tử, Tôi Quyết Định Trau Dồi Ma Thuật (Phần 2)",
+    "page": "anime/universal/chuyen-sinh-thanh-de-that-hoang-tu-toi-quyet-dinh-trau-doi-ma-thuat-phan-2/",
+    "local": 12,
+    "src": 14,
+    "missing": [
+      {
+        "name": "11",
+        "slug": "tap-11",
+        "embed": "https://embed13.streamc.xyz/embed.php?hash=ad8d259c7d0d55959461a92e51d5d224"
+      },
+      {
+        "name": "12",
+        "slug": "tap-12",
+        "embed": "https://embed11.streamc.xyz/embed.php?hash=879224235c38bd2fe533db3be3243b0f"
+      }
+    ]
+  }
+]

scan_multi_server.json

@@ -0,0 +1,54 @@
+[
+  {
+    "name": "Lời Thì Thầm Của Trái Tim",
+    "page": "anime/universal/loi-thi-tham-cua-trai-tim/",
+    "servers": [
+      {
+        "name": "Vietsub #1",
+        "count": 1,
+        "items": [
+          {
+            "name": "FULL",
+            "embed": "https://embed12.streamc.xyz/embed.php?hash=159da7b3838872aec76fe20e24148967"
+          }
+        ]
+      },
+      {
+        "name": "Lồng Tiếng #1",
+        "count": 1,
+        "items": [
+          {
+            "name": "Full",
+            "embed": "https://embed14.streamc.xyz/embed.php?hash=d1f64f6d09c52e3173de404da54103bf"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "Lâu Đài Di Động Của Howl",
+    "page": "anime/universal/lau-dai-di-dong-cua-howl/",
+    "servers": [
+      {
+        "name": "Vietsub #1",
+        "count": 1,
+        "items": [
+          {
+            "name": "Full",
+            "embed": "https://embed13.streamc.xyz/embed.php?hash=b6bd17a0e4c3fc30931c6f9bc4d2e64e"
+          }
+        ]
+      },
+      {
+        "name": "Lồng Tiếng #1",
+        "count": 1,
+        "items": [
+          {
+            "name": "Full",
+            "embed": "https://embed14.streamc.xyz/embed.php?hash=4c6515b6c3fbb1ddb17170807501dbc7"
+          }
+        ]
+      }
+    ]
+  }
+]

signup-loginsystem.js

@@ -0,0 +1,169 @@
+(function (window) {
+  'use strict';
+
+  var API_BASE = localStorage.getItem('anivietdb-auth-api') || 'https://sginup-loginsystem.npgia-himlam.workers.dev/';
+
+  var MEM = {};
+  var STORE = 'localStorage';
+  try {
+    if (localStorage.getItem('anivietdb-token')) MEM.token = localStorage.getItem('anivietdb-token');
+    if (localStorage.getItem('anivietdb-user')) MEM.user = JSON.parse(localStorage.getItem('anivietdb-user'));
+  } catch (e) { /* localStorage might be blocked */ }
+  if (!MEM.token) {
+    try {
+      if (sessionStorage.getItem('anivietdb-token')) MEM.token = sessionStorage.getItem('anivietdb-token');
+      if (sessionStorage.getItem('anivietdb-user')) MEM.user = JSON.parse(sessionStorage.getItem('anivietdb-user'));
+    } catch (e) { /* ignore */ }
+  }
+
+  function save() {
+    try {
+      if (MEM.token) localStorage.setItem('anivietdb-token', MEM.token);
+      else localStorage.removeItem('anivietdb-token');
+      if (MEM.user) localStorage.setItem('anivietdb-user', JSON.stringify(MEM.user));
+      else localStorage.removeItem('anivietdb-user');
+    } catch (e) {
+      try {
+        if (MEM.token) sessionStorage.setItem('anivietdb-token', MEM.token);
+        else sessionStorage.removeItem('anivietdb-token');
+        if (MEM.user) sessionStorage.setItem('anivietdb-user', JSON.stringify(MEM.user));
+        else sessionStorage.removeItem('anivietdb-user');
+      } catch (e2) { /* ignore */ }
+    }
+  }
+
+  function setSession(data) {
+    MEM.token = data && data.token ? data.token : null;
+    MEM.user = data && data.user ? data.user : null;
+    save();
+  }
+
+  function clearSession() {
+    MEM.token = null;
+    MEM.user = null;
+    save();
+  }
+
+  var COOLDOWN_MS = 10 * 1000;
+  var COOLDOWN_KEY = 'anivietdb-cooldown';
+
+  function setCooldown() {
+    try { sessionStorage.setItem(COOLDOWN_KEY, String(Date.now() + COOLDOWN_MS)); } catch (e) { /* ignore */ }
+  }
+
+  function cooldownRemaining() {
+    try {
+      var until = Number(sessionStorage.getItem(COOLDOWN_KEY));
+      var r = until - Date.now();
+      return r > 0 ? r : 0;
+    } catch (e) { return 0; }
+  }
+
+  function request(path, method, body) {
+    var headers = { 'Content-Type': 'application/json' };
+    if (MEM.token) headers['Authorization'] = 'Bearer ' + MEM.token;
+
+    var sep = path.indexOf('?') === -1 ? '?' : '&';
+    var url = API_BASE + path + sep + '_t=' + Date.now();
+    var init = { method: method || 'GET', headers: headers, cache: 'no-store' };
+    if (body) init.body = JSON.stringify(body);
+
+    return fetch(url, init).then(function (resp) {
+      return resp.json().catch(function () { return {}; }).then(function (data) {
+        if (!resp.ok) {
+          var err = new Error((data && data.error) || ('HTTP ' + resp.status));
+          err.status = resp.status;
+          err.data = data;
+          throw err;
+        }
+        return data;
+      });
+    });
+  }
+
+  function turnstileToken() {
+    try {
+      if (!window.turnstile || typeof window.turnstile.getResponse !== 'function') return '';
+      var widgets = document.querySelectorAll('.cf-turnstile');
+      for (var i = 0; i < widgets.length; i++) {
+        var el = widgets[i];
+        if (el.offsetParent === null) continue;
+        return window.turnstile.getResponse(el) || '';
+      }
+      return '';
+    } catch (e) { return ''; }
+  }
+
+  window.AuthSystem = {
+    baseUrl: API_BASE,
+
+    setBaseUrl: function (url) {
+      localStorage.setItem('anivietdb-auth-api', url);
+      API_BASE = url;
+    },
+
+    isConfigured: function () {
+      return !!API_BASE && API_BASE.indexOf('__PASTE') === -1;
+    },
+
+    isLoggedIn: function () {
+      return !!MEM.token;
+    },
+
+    getToken: function () {
+      return MEM.token;
+    },
+
+    getUser: function () {
+      return MEM.user;
+    },
+
+    register: function (email, username, password) {
+      return request('/api/auth/register', 'POST', { email: email, username: username, password: password, 'cf-turnstile-response': turnstileToken() })
+        .then(function (data) { setSession(data); return data; });
+    },
+
+    login: function (emailOrUsername, password) {
+      return request('/api/auth/login', 'POST', { email: emailOrUsername, password: password, 'cf-turnstile-response': turnstileToken() })
+        .then(function (data) { setSession(data); return data; });
+    },
+
+    logout: function () {
+      return request('/api/auth/logout', 'POST')
+        .then(function (data) { clearSession(); setCooldown(); return data; })
+        .catch(function () { clearSession(); setCooldown(); });
+    },
+
+    cooldownRemaining: cooldownRemaining,
+
+    isAdmin: function () {
+      return !!(MEM.user && MEM.user.role === 'admin');
+    },
+
+    adminUsers: function () {
+      return request('/api/auth/users', 'GET');
+    },
+
+    adminDeleteUser: function (id) {
+      return request('/api/auth/users/' + id, 'DELETE');
+    },
+
+    me: function () {
+      if (!MEM.token) return Promise.resolve(null);
+      return request('/api/auth/me', 'GET')
+        .then(function (data) {
+          if (data && data.user) {
+            MEM.user = data.user;
+            save();
+          }
+          return data.user || null;
+        })
+        .catch(function (err) {
+          if (err && err.status === 401) clearSession();
+          return null;
+        });
+    },
+
+    clearSession: clearSession
+  };
+})(window);

style.css

@@ -1,28 +1,1899 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --header-gradient: linear-gradient(135deg, #ff9a9e, #fad0c4);
+  --accent-color: #ff9a9e;
+  --ep-color: #ff4b5c;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Roboto', sans-serif;
+  background: #f5f7fa;
+  color: #333;
+  padding: 20px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.container {
+  max-width: 1000px;
+  margin: 40px auto;
+  background: rgba(255,255,255,0.88);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  overflow: hidden;
+  flex: 1;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.header {
+  display: flex;
+  background: var(--header-gradient);
+  padding: 20px;
+  align-items: center;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.poster-wrapper {
+  flex-shrink: 0;
+  width: 200px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.poster {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+  background: #222;
+}
+
+.info {
+  margin-left: 20px;
+  color: #222;
+}
+
+.info h1 { margin: 0; font-size: 28px; font-weight: 700; }
+.alt-title { margin: 8px 0; font-size: 15px; opacity: 0.75; font-style: italic; }
+.info-table td { padding: 3px 8px 3px 0; vertical-align: top; font-size: 14px; }
+.info-table .label { font-weight: 600; opacity: 0.75; white-space: nowrap; }
+
+.description {
+  padding: 20px;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.details {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 20px 20px;
+}
+
+.detail-item {
+  flex: 1 1 200px;
+  margin: 10px;
+  background: #f0f0f0;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.episodes {
+  padding: 20px;
+  background: #fafafa;
+}
+
+.episodes h2 {
+  margin-bottom: 15px;
+  font-size: 22px;
+  border-left: 4px solid var(--accent-color);
+  padding-left: 10px;
+}
+
+.lang-note {
+  display: inline-block;
+  margin: 0 0 12px;
+  padding: 6px 12px;
+  border-radius: 20px;
+  background: #fff3cd;
+  color: #856404;
+  border: 1px solid #ffd75e;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.episode-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 15px;
+}
+
+.episode-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  text-align: center;
+  padding: 10px;
+  cursor: pointer;
+  transition: transform 0.2s;
+  user-select: none;
+}
+
+.episode-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.ep-num {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--ep-color);
+}
+
+.modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.88);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.modal-overlay.active { display: flex; }
+
+.modal-content {
+  background: #111;
+  border-radius: 12px;
+  overflow: hidden;
+  width: 100%;
+  max-width: 960px;
+  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
+  animation: modalIn 0.2s ease-out;
+}
+
+@keyframes modalIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background: #1a1a1a;
+}
+
+.modal-title { font-weight: 700; font-size: 15px; color: #fff; }
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #999;
+  font-size: 28px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px;
+  transition: color 0.2s;
+}
+
+.close-btn:hover { color: #fff; }
+
+.modal-body {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+
+.modal-body iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.vi-popup-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.88);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.vi-popup-overlay.active { display: flex; }
+
+.vi-popup {
+  background: #15151a;
+  border: 1px solid #2a2a35;
+  border-radius: 14px;
+  max-width: 420px;
+  width: 100%;
+  padding: 26px 22px 22px;
+  text-align: center;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
+  animation: modalIn 0.2s ease-out;
+}
+
+.vi-popup .vi-popup-title { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 10px; }
+.vi-popup .vi-popup-msg { color: #aaa; font-size: 14px; line-height: 1.65; margin: 0 0 20px; }
+.vi-popup .vi-popup-actions { display: flex; flex-direction: column; gap: 10px; }
+.vi-popup .vi-popup-actions button {
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.2s, color 0.2s;
+}
+.vi-popup .vi-continue { background: #667eea; color: #fff; }
+.vi-popup .vi-continue:hover { background: #7a90f5; }
+.vi-popup .vi-cancel { background: #23232b; color: #ccc; }
+.vi-popup .vi-cancel:hover { color: #fff; }
+.vi-popup a.vi-cancel { display: block; text-decoration: none; text-align: center; }
+
+/* Home page */
+.home-header {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  padding: 40px 20px;
+  text-align: center;
+}
+.site-title {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  letter-spacing: 3px;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+  color: #fff;
+}
+.site-desc {
+  color: rgba(255,255,255,0.85);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.search-box {
+  display: flex;
+  max-width: 400px;
+  margin: 0 auto;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+.search-box input {
+  flex: 1;
+  padding: 12px 16px;
+  border: none;
+  outline: none;
+  font-size: 15px;
+  font-family: inherit;
+}
+.search-box button {
+  padding: 12px 18px;
+  border: none;
+  background: #222;
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+}
+.search-box button:hover { background: #000; }
+
+.home-nav {
+  display: flex;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+  flex-wrap: wrap;
+}
+.home-nav a {
+  text-decoration: none;
+  color: #555;
+  padding: 6px 14px;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+.home-nav a:hover,
+.home-nav a.active { background: #667eea; color: #fff; }
+
+.random-section {
+  text-align: center;
+  padding: 12px 20px;
+  border-bottom: 1px solid #eee;
+}
+.random-section button {
+  padding: 10px 24px;
+  font-size: 15px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  font-family: inherit;
+}
+.random-section button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
+}
+
+.stats-bar {
+  display: flex;
+  gap: 12px;
+  padding: 10px 20px;
+  background: #f9f9f9;
+  border-bottom: 1px solid #eee;
+  font-size: 13px;
+  color: #666;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.stats-bar .stat-item span { font-weight: 700; color: #333; }
+
+.category-section { margin: 0; }
+.category-title {
+  font-size: 16px;
+  font-weight: 700;
+  padding: 12px 0 8px 10px;
+  margin: 16px 20px 0;
+  border-left: 4px solid var(--accent-color);
+}
+
+.movie-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  padding: 20px;
+}
+.movie-card {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: transform 0.2s;
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+.movie-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
+.movie-thumb {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  background: #222;
+}
+.movie-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.movie-type {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+.movie-ep {
+  position: absolute;
+  bottom: 6px;
+  left: 6px;
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+.movie-info { padding: 10px 12px; }
+.movie-title {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.movie-original { font-size: 12px; color: #888; }
+
+/* Footer */
+.footer {
+  text-align: center;
+  padding: 20px;
+  font-size: 12px;
+  color: #888;
+  border-top: 1px solid #eee;
+  margin-top: 20px;
+  line-height: 1.8;
+}
+
+/* Back link */
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 12px 0 12px 20px;
+  padding: 8px 16px;
+  text-decoration: none;
+  color: #667eea;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 8px;
+  background: #f0f0ff;
+  border: 1px solid #e0e0ff;
+  transition: all 0.25s;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+.back-link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #667eea18, #764ba218);
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.25s;
+  border-radius: 8px;
+}
+.back-link:hover {
+  transform: translateX(-3px);
+  border-color: #667eea;
+  color: #764ba2;
+}
+.back-link:hover::before {
+  opacity: 1;
+}
+
+.next-link {
+  margin-left: 4px;
+}
+.next-link:hover {
+  transform: translateX(3px);
+}
+
+/* UI Toggle */
+.ui-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 14px;
+}
+.ui-btn {
+  padding: 6px 14px;
+  border: 1px solid rgba(255,255,255,0.3);
+  background: transparent;
+  color: rgba(255,255,255,0.7);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+  transition: all 0.2s;
+  line-height: 1.4;
+}
+.ui-btn.active {
+  background: rgba(255,255,255,0.2);
+  color: #fff;
+  border-color: rgba(255,255,255,0.6);
+  box-shadow: 0 0 12px rgba(255,255,255,0.1);
+}
+.ui-btn:hover {
+  background: rgba(255,255,255,0.1);
+}
+
+/* Mobile UI */
+body.ui-mobile {
+  padding: 0;
+  background: #fff;
+}
+body.ui-mobile .container {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+body.ui-mobile .home-header {
+  padding: 24px 12px 16px;
+}
+body.ui-mobile .site-title {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+body.ui-mobile .site-desc {
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+body.ui-mobile .search-box {
+  max-width: 100%;
+}
+body.ui-mobile .search-box input {
+  padding: 10px 12px;
+  font-size: 14px;
+}
+body.ui-mobile .search-box button {
+  padding: 10px 14px;
+}
+body.ui-mobile .ui-toggle {
+  margin-top: 10px;
+}
+body.ui-mobile .ui-btn {
+  padding: 5px 12px;
+  font-size: 12px;
+}
+body.ui-mobile .settings-link {
+  font-size: 17px;
+}
+body.ui-mobile .stats-bar {
+  font-size: 11px;
+  gap: 6px;
+  padding: 8px;
+}
+body.ui-mobile .random-section {
+  padding: 8px 12px;
+}
+body.ui-mobile .random-section button {
+  padding: 8px 18px;
+  font-size: 13px;
+  width: 100%;
+  max-width: 300px;
+}
+body.ui-mobile .home-nav {
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  padding: 10px 8px;
+  gap: 4px;
+  -webkit-overflow-scrolling: touch;
+}
+body.ui-mobile .home-nav a {
+  white-space: nowrap;
+  padding: 8px 14px;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+body.ui-mobile .movie-grid {
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding: 10px;
+}
+body.ui-mobile .movie-card {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 10px;
+}
+body.ui-mobile .movie-thumb {
+  border-radius: 10px 10px 0 0;
+}
+body.ui-mobile .movie-card:hover {
+  transform: none;
+}
+body.ui-mobile .movie-title {
+  font-size: 13px;
+}
+body.ui-mobile .movie-original {
+  font-size: 11px;
+}
+body.ui-mobile .movie-ep {
+  font-size: 10px;
+  bottom: 4px;
+  left: 4px;
+}
+body.ui-mobile .movie-type {
+  font-size: 9px;
+  top: 4px;
+  left: 4px;
+}
+body.ui-mobile .pagination {
+  gap: 4px;
+  padding: 12px 8px;
+}
+body.ui-mobile .pg-btn {
+  min-width: 32px;
+  height: 32px;
+  font-size: 13px;
+}
+body.ui-mobile .category-title {
+  margin: 8px 8px 0;
+  font-size: 14px;
+  padding: 8px 0 6px 8px;
+}
+body.ui-mobile .footer {
+  padding: 14px 12px;
+  font-size: 11px;
+}
+
+/* Mobile detail page */
+body.ui-mobile .header {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 16px;
+}
+body.ui-mobile .poster-wrapper {
+  width: 160px;
+  border-radius: 10px;
+}
+body.ui-mobile .info {
+  margin-left: 0;
+  margin-top: 12px;
+}
+body.ui-mobile .info h1 {
+  font-size: 20px;
+}
+body.ui-mobile .info-table td {
+  font-size: 13px;
+}
+body.ui-mobile .description {
+  padding: 16px;
+  font-size: 14px;
+}
+body.ui-mobile .details {
+  padding: 0 16px 16px;
+}
+body.ui-mobile .detail-item {
+  flex: 1 1 100%;
+  margin: 4px 0;
+  padding: 10px;
+  font-size: 13px;
+}
+body.ui-mobile .episodes {
+  padding: 16px;
+}
+body.ui-mobile .episodes h2 {
+  font-size: 18px;
+}
+body.ui-mobile .episode-list {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+body.ui-mobile .episode-card {
+  padding: 8px 4px;
+}
+body.ui-mobile .episode-card:hover {
+  transform: none;
+}
+body.ui-mobile .ep-num {
+  font-size: 12px;
+}
+body.ui-mobile .back-link {
+  margin: 8px 0 8px 12px;
+  padding: 6px 12px;
+  font-size: 12px;
+}
+body.ui-mobile .modal-overlay {
+  padding: 4px;
+}
+body.ui-mobile .modal-content {
+  border-radius: 8px;
+}
+body.ui-mobile .modal-header {
+  padding: 8px 12px;
+}
+body.ui-mobile .modal-title {
+  font-size: 13px;
+}
+
+/* Series hub */
+.series-header {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #667eea22, #764ba222);
+  align-items: center;
+}
+.series-poster {
+  width: 160px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+.series-poster img {
+  width: 100%;
+  display: block;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+}
+.series-info h1 {
+  font-size: 26px;
+  margin-bottom: 6px;
+}
+.series-desc {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #555;
+  line-height: 1.6;
+}
+.series-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+  padding: 20px;
+}
+.series-card {
+  text-decoration: none;
+  color: inherit;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  transition: transform 0.25s, box-shadow 0.25s;
+  border-bottom: 3px solid var(--card-color);
+  background: #fff;
+}
+.series-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+.series-card-thumb {
+  width: 100%;
+  aspect-ratio: 3/4;
+  overflow: hidden;
+  background: #222;
+}
+.series-card-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.series-card-body {
+  padding: 10px 12px;
+}
+.series-card-body h3 {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+.series-card-body p {
+  font-size: 12px;
+  color: #888;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 20px;
+  flex-wrap: wrap;
+}
+.pg-btn {
+  min-width: 36px;
+  height: 36px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+  color: #555;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.pg-btn:hover:not(.disabled):not(.active) {
+  border-color: #667eea;
+  color: #667eea;
+}
+.pg-btn.active {
+  background: #667eea;
+  border-color: #667eea;
+  color: #fff;
+}
+.pg-btn.disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+@media (max-width: 700px) {
+  body { padding: 10px; }
+  .container { margin: 16px auto; }
+  .header { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
+  .poster-wrapper { width: 160px; border-radius: 10px; }
+  .info { margin-left: 0; }
+  .episode-list { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
+  .modal-overlay { padding: 8px; }
+  .movie-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px; }
+  .movie-card { border-radius: 10px; }
+  .movie-thumb { border-radius: 10px 10px 0 0; }
+  .series-header { flex-direction: column; text-align: center; }
+  .series-poster { width: 140px; }
+  .series-info h1 { font-size: 20px; }
+  .series-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
+}
+
+@media (max-width: 480px) {
+  .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
+  .movie-card { border-radius: 10px; }
+  .movie-thumb { border-radius: 10px 10px 0 0; }
+}
+
+/* Settings link */
+.settings-link {
+  color: rgba(255,255,255,0.6);
+  text-decoration: none;
+  font-size: 20px;
+  line-height: 1;
+  transition: color 0.2s, transform 0.2s;
+  display: inline-flex;
+  align-items: center;
+}
+.settings-link:hover {
+  color: #fff;
+  transform: rotate(60deg);
+}
+
+/* Settings page */
+.settings-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  padding: 40px 20px;
+}
+.settings-box {
+  background: #f9f9f9;
+  border-radius: 12px;
+  padding: 40px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+.settings-title {
+  font-size: 22px;
+  margin-bottom: 24px;
+  color: #333;
+}
+.settings-field {
+  display: flex;
+  gap: 8px;
+}
+.settings-field input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  font-size: 15px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.settings-field input:focus {
+  border-color: #667eea;
+}
+.settings-field button {
+  padding: 12px 20px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: transform 0.2s;
+}
+.settings-field button:hover {
+  transform: translateY(-2px);
+}
+.settings-error {
+  color: #e74c3c;
+  font-size: 13px;
+  margin-top: 12px;
+  min-height: 20px;
+}
+body.ui-mobile .settings-box {
+  padding: 24px 16px;
+}
+body.ui-mobile .settings-field {
+  flex-direction: column;
+}
+body.ui-mobile .settings-title {
+  font-size: 18px;
+}
+
+/* Age confirmation modal */
+.age-modal-content {
+  max-width: 420px !important;
+}
+.age-modal-body {
+  padding: 30px 24px;
+  text-align: center;
+  background: #1a1a1a;
+}
+.age-warning-icon {
+  font-size: 48px;
+  color: #ff4444;
+  margin-bottom: 12px;
+}
+.age-warning-text {
+  font-size: 20px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 8px;
+}
+.age-warning-desc {
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+.age-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+.age-btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.age-btn:hover {
+  transform: translateY(-2px);
+}
+.age-btn-yes {
+  background: linear-gradient(135deg, #28a745, #20c997);
+  color: #fff;
+}
+.age-btn-yes:hover {
+  box-shadow: 0 4px 16px rgba(40,167,69,0.4);
+}
+.age-btn-no {
+  background: linear-gradient(135deg, #dc3545, #c82333);
+  color: #fff;
+}
+.age-btn-no:hover {
+  box-shadow: 0 4px 16px rgba(220,53,69,0.4);
+}
+body.ui-mobile .age-modal-body {
+  padding: 20px 16px;
+}
+body.ui-mobile .age-warning-text {
+  font-size: 17px;
+}
+body.ui-mobile .age-btn {
+  font-size: 13px;
+  padding: 10px 16px;
+}
+
+/* Adult card on homepage */
+.adult-card {
+  border-bottom: 3px solid #cc0000 !important;
+}
+.adult-badge-tag {
+  background: rgba(200,0,0,0.9) !important;
+}
+
+/* Adult mode page (legacy) */
+.adult-mode {
+  background: #0d0d0d;
+}
+.adult-container {
+  background: rgba(26,26,26,0.82);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 20px rgba(255,0,0,0.08);
+}
+.adult-header {
+  background: linear-gradient(135deg, #1a0000, #4a0000) !important;
+}
+.adult-title {
+  color: #ff4444 !important;
+  text-shadow: 0 0 20px rgba(255,0,0,0.3) !important;
+}
+.adult-badge {
+  display: inline-block;
+  background: #ff0000;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  vertical-align: super;
+  margin-left: 6px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.adult-desc {
+  color: rgba(255,100,100,0.7) !important;
+}
+.adult-stats {
+  background: #222 !important;
+  border-bottom-color: #333 !important;
+  color: #888 !important;
+}
+.adult-stats .stat-item span {
+  color: #ff6666 !important;
+}
+.adult-random {
+  border-bottom-color: #333 !important;
+}
+.adult-random button {
+  background: linear-gradient(135deg, #cc0000, #660000) !important;
+}
+.adult-random button:hover {
+  box-shadow: 0 6px 20px rgba(255,0,0,0.3) !important;
+}
+.adult-back-link {
+  background: #222 !important;
+  border-color: #440000 !important;
+  color: #ff6666 !important;
+}
+.adult-back-link:hover {
+  border-color: #ff0000 !important;
+  color: #ff4444 !important;
+}
+.adult-card {
+  border-bottom: 3px solid #cc0000 !important;
+}
+.adult-type-badge {
+  background: rgba(200,0,0,0.9) !important;
+}
+.adult-footer {
+  border-top-color: #333 !important;
+  color: #666 !important;
+}
+body.ui-mobile.adult-mode {
+  background: #0d0d0d;
+}
+
+/* Light Novel list view */
+.ln-list {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ln-list-item {
+  display: flex;
+  gap: 16px;
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: 1px solid #eee;
+}
+.ln-list-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
+}
+.ln-cover {
+  width: 100px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.ln-cover img {
+  width: 100%;
+  display: block;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+  background: #222;
+}
+.ln-info {
+  flex: 1;
+  min-width: 0;
+}
+.ln-title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  color: #222;
+}
+.ln-author {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 6px;
+}
+.ln-genres {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.ln-genre-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #667eea;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+}
+.ln-desc {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.ln-status {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 11px;
+  color: #28a745;
+  font-weight: 600;
+}
+body.ui-mobile .ln-list {
+  padding: 10px 12px;
+  gap: 10px;
+}
+body.ui-mobile .ln-list-item {
+  padding: 10px;
+}
+body.ui-mobile .ln-cover {
+  width: 80px;
+}
+body.ui-mobile .ln-title {
+  font-size: 14px;
+}
+body.ui-mobile .ln-desc {
+  font-size: 12px;
+  -webkit-line-clamp: 1;
+}
+
+/* LN Detail modal */
+.ln-detail-content {
+  max-width: 700px !important;
+}
+.ln-detail-body {
+  padding: 20px;
+  background: #1a1a1a;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.ln-detail-header {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+.ln-detail-cover {
+  width: 160px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+  background: #222;
+}
+.ln-detail-info {
+  flex: 1;
+  min-width: 0;
+}
+.ln-detail-info h2 {
+  font-size: 22px;
+  color: #fff;
+  margin-bottom: 6px;
+}
+.ln-detail-author {
+  font-size: 13px;
+  color: #aaa;
+  margin-bottom: 8px;
+}
+.ln-detail-genres {
+  margin-bottom: 10px;
+}
+.ln-detail-desc {
+  font-size: 14px;
+  color: #ccc;
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+.ln-detail-status {
+  font-size: 12px;
+  color: #28a745;
+  font-weight: 600;
+}
+.ln-detail-chapters h3 {
+  font-size: 18px;
+  color: #fff;
+  margin-bottom: 12px;
+  border-left: 4px solid #667eea;
+  padding-left: 10px;
+}
+.ln-chapter-item {
+  display: flex;
+  gap: 12px;
+  padding: 10px 14px;
+  background: #222;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  align-items: center;
+}
+.ln-chapter-item:hover {
+  background: #333;
+}
+.ln-ch-num {
+  font-size: 13px;
+  font-weight: 700;
+  color: #667eea;
+  white-space: nowrap;
+}
+.ln-ch-title {
+  font-size: 13px;
+  color: #ccc;
+}
+body.ui-mobile .ln-detail-body {
+  padding: 14px;
+}
+body.ui-mobile .ln-detail-header {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+body.ui-mobile .ln-detail-cover {
+  width: 130px;
+}
+body.ui-mobile .ln-detail-info h2 {
+  font-size: 18px;
+}
+
+/* LN Reader modal */
+.ln-reader-content {
+  max-width: 800px !important;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+.ln-reader-body {
+  padding: 24px 28px;
+  background: #f9f7f4;
+  color: #333;
+  line-height: 1.9;
+  font-size: 16px;
+  overflow-y: auto;
+  flex: 1;
+}
+.ln-reader-body p {
+  margin-bottom: 16px;
+  text-align: justify;
+}
+.ln-reader-body img {
+  max-width: 100%;
+  display: block;
+  margin: 16px auto;
+  border-radius: 4px;
+}
+.ln-reader-nav {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: #1a1a1a;
+  gap: 10px;
+}
+.ln-reader-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  background: #667eea;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.2s;
+}
+.ln-reader-btn:hover {
+  background: #5a6fd6;
+}
+body.ui-mobile .ln-reader-body {
+  padding: 16px 18px;
+  font-size: 15px;
+}
+body.ui-mobile .ln-reader-nav {
+  padding: 10px 12px;
+}
+body.ui-mobile .ln-reader-btn {
+  font-size: 12px;
+  padding: 8px 14px;
+}
+
+/* Manga list layout */
+.manga-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+}
+.manga-list-item {
+  display: flex;
+  gap: 16px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  transition: transform 0.2s, box-shadow 0.2s;
+  text-decoration: none;
+  color: inherit;
+}
+.manga-list-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+}
+.manga-list-thumb {
+  position: relative;
+  flex: 0 0 96px;
+  width: 96px;
+  aspect-ratio: 3 / 4;
+  background: #222;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.manga-list-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.manga-list-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+.manga-list-badge.vi {
+  background: rgba(102,126,234,0.95);
+}
+.manga-list-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.manga-list-name {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+.manga-list-orig {
+  font-size: 12px;
+  color: #888;
+  font-style: italic;
+}
+.manga-list-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.manga-list-chip {
+  font-size: 11px;
+  color: #555;
+  background: #f1f1f1;
+  padding: 2px 8px;
+  border-radius: 20px;
+}
+.ln-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ln-tag {
+  font-size: 11px;
+  color: #667eea;
+  background: #eef0fb;
+  padding: 2px 8px;
+  border-radius: 20px;
+}
+body.adult-mode .manga-list-item {
+  background: #2a2a2a;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+}
+body.adult-mode .manga-list-name { color: #eee; }
+body.adult-mode .manga-list-orig { color: #999; }
+body.adult-mode .manga-list-chip { color: #ccc; background: #3a3a3a; }
+body.adult-mode .ln-tag { color: #9aa8ff; background: #333a55; }
+body.ui-mobile .manga-list-thumb {
+  flex-basis: 80px;
+  width: 80px;
+}
+body.ui-mobile .manga-list-item {
+  gap: 12px;
+  padding: 10px;
+}
+
+/* ===== Home React (av-*) ===== */
+body:has(#root) {
+  padding: 0;
+}
+#root .container {
+  max-width: 1140px;
+  margin: 0 auto;
+  background: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
+/* Hero */
+.av-hero {
+  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
+  color: #2a1a1c;
+}
+.av-hero-adult {
+  background: linear-gradient(135deg, #1a0505, #4a0e0e);
+  color: #ffd9d9;
+}
+.av-hero-title {
+  font-size: 42px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  margin: 0;
+}
+.av-hero-badge {
+  font-size: 13px;
+  font-weight: 700;
+  padding: 4px 12px;
+  border-radius: 20px;
+}
+.av-hero-desc {
+  font-size: 16px;
+  opacity: 0.85;
+  margin-bottom: 0;
+}
+.av-search {
+  display: flex;
+  gap: 8px;
+  max-width: 480px;
+  margin: 22px auto 0;
+}
+.av-search .form-control {
+  border-radius: 24px;
+  padding: 12px 18px;
+  border: none;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
+}
+.av-search-btn {
+  border-radius: 24px;
+  padding: 0 18px;
+  background: #667eea;
+  color: #fff;
+  border: none;
+}
+.av-search-btn:hover { background: #5568d8; color: #fff; }
+.av-random-btn {
+  border-radius: 24px;
+  background: #fff;
+  color: #667eea;
+  border: 1px solid #e0e0ff;
+  font-weight: 600;
+}
+.av-random-btn:hover { background: #eef0fb; color: #5568d8; }
+
+/* Stats */
+.av-stats-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  justify-content: center;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  padding: 12px 20px;
+  font-size: 13px;
+  color: #555;
+  margin-top: -14px;
+  position: relative;
+  z-index: 2;
+}
+.av-stat strong { color: #667eea; }
+body.adult-mode .av-stats-inner { background: #222; color: #bbb; }
+body.adult-mode .av-stat strong { color: #9aa8ff; }
+
+/* Nav */
+.av-nav { gap: 6px; flex-wrap: wrap; }
+.av-nav .nav-link {
+  border-radius: 20px;
+  padding: 7px 16px;
+  color: #555;
+  font-weight: 600;
+  font-size: 14px;
+}
+.av-nav .nav-link.active {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+}
+body.adult-mode .av-nav .nav-link { color: #bbb; }
+body.adult-mode .av-nav .nav-link.active { background: #8a0e0e; }
+
+/* Movie card */
+.av-card { display: block; text-decoration: none; color: inherit; }
+.av-card:hover { color: inherit; }
+.av-card-thumb {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  background: #222;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  transition: transform 0.25s;
+}
+.av-card:hover .av-card-thumb { transform: translateY(-3px); }
+.av-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.av-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: 6px;
+  background: rgba(102,126,234,0.95);
+  color: #fff;
+}
+.av-badge-ep {
+  left: auto;
+  right: 6px;
+  background: rgba(0,0,0,0.7);
+  color: #fff;
+  max-width: calc(100% - 60px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.av-badge-adult { background: #e11; }
+.av-card-body { padding: 8px 2px 0; }
+.av-card-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: 2.7em;
+}
+.av-card-orig {
+  font-size: 11px;
+  color: #888;
+  margin: 3px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Manga row */
+.av-manga-list { display: flex; flex-direction: column; gap: 14px; }
+.av-manga-row {
+  display: flex;
+  gap: 16px;
+  text-decoration: none;
+  color: inherit;
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+  transition: all 0.2s;
+}
+.av-manga-row:hover {
+  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
+  transform: translateY(-2px);
+  color: inherit;
+}
+.av-manga-thumb {
+  position: relative;
+  flex-shrink: 0;
+  width: 72px;
+  border-radius: 8px;
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  background: #222;
+}
+.av-manga-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.av-manga-badge {
+  position: absolute;
+  left: 4px;
+  bottom: 4px;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 5px;
+  background: #e22;
+  color: #fff;
+}
+.av-manga-badge.vi { background: #28a745; }
+.av-manga-info { min-width: 0; flex: 1; }
+.av-manga-name { font-size: 15px; font-weight: 700; margin: 0; }
+.av-manga-orig { font-size: 12px; color: #888; margin: 2px 0 6px; }
+.av-manga-meta { display: flex; flex-wrap: wrap; gap: 6px; }
+.av-chip { font-size: 11px; color: #555; background: #f1f1f1; padding: 2px 9px; border-radius: 20px; }
+.av-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.av-tag { font-size: 10px; color: #667eea; background: #eef0fb; padding: 2px 8px; border-radius: 20px; }
+body.adult-mode .av-manga-row { background: #2a2a2a; }
+body.adult-mode .av-manga-name { color: #eee; }
+body.adult-mode .av-manga-orig { color: #999; }
+body.adult-mode .av-chip { color: #ccc; background: #3a3a3a; }
+body.adult-mode .av-tag { color: #9aa8ff; background: #333a55; }
+
+/* Light Novel */
+.av-ln-list { display: flex; flex-direction: column; gap: 12px; }
+.av-ln-row {
+  display: flex;
+  gap: 16px;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+  transition: all 0.2s;
+}
+.av-ln-row:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
+.av-ln-cover {
+  flex-shrink: 0;
+  width: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  background: #222;
+}
+.av-ln-cover img { width: 100%; height: 100%; object-fit: cover; }
+.av-ln-info { flex: 1; min-width: 0; }
+.av-ln-title { font-size: 15px; font-weight: 700; margin: 0; }
+.av-ln-author { font-size: 12px; color: #888; margin: 2px 0 6px; }
+.av-ln-desc { font-size: 12px; color: #666; line-height: 1.5; margin: 6px 0 0; }
+body.adult-mode .av-ln-row { background: #2a2a2a; }
+body.adult-mode .av-ln-title { color: #eee; }
+body.adult-mode .av-ln-author { color: #999; }
+body.adult-mode .av-ln-desc { color: #bbb; }
+
+/* LN modal */
+.av-ln-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 1050;
+  padding: 20px;
+  overflow-y: auto;
+}
+.av-ln-modal .modal-dialog { margin: 0 auto; max-width: 720px; }
+.av-ln-modal-content { border-radius: 14px; }
+.av-ln-cover-lg {
+  width: 150px;
+  border-radius: 10px;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+/* ============ Dark theme (site-wide, non-adult) ============ */
+body:not(.adult-mode):not(.reader-mode) {
+  background: #0f0f1a;
+  color: #cfd3e8;
+}
+
+body:not(.adult-mode):not(.reader-mode) .container {
+  background: rgba(22,24,43,0.82);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
+  border: 1px solid rgba(140,120,220,0.12);
+}
+
+body:not(.adult-mode):not(.reader-mode) .header {
+  background: linear-gradient(135deg, #2b1d54 0%, #6a2c91 60%, #a3419f 100%);
+  color: #fff;
+}
+
+body:not(.adult-mode):not(.reader-mode) .info { color: #e4e6f5; }
+body:not(.adult-mode):not(.reader-mode) .info h1 { color: #fff; }
+body:not(.adult-mode):not(.reader-mode) .alt-title { color: #b9bede; }
+body:not(.adult-mode):not(.reader-mode) .info-table td { color: #cfd3e8; }
+body:not(.adult-mode):not(.reader-mode) .info-table .label { color: #a9aed0; }
+
+body:not(.adult-mode):not(.reader-mode) .description { color: #cfd3e8; }
+
+body:not(.adult-mode):not(.reader-mode) .detail-item {
+  background: #1e2136;
+  color: #cfd3e8;
+}
+
+body:not(.adult-mode):not(.reader-mode) .episodes {
+  background: #14162a;
+}
+
+body:not(.adult-mode):not(.reader-mode) .episodes h2 { color: #e4e6f5; }
+
+body:not(.adult-mode):not(.reader-mode) .lang-note {
+  background: #2a2f4e;
+  color: #ffd75e;
+  border: 1px solid #4a4f75;
+}
+
+body:not(.adult-mode):not(.reader-mode) .episode-card {
+  background: #1e2136;
+  border: 1px solid #2a2e4a;
+  color: #cfd3e8;
+}
+body:not(.adult-mode):not(.reader-mode) .episode-card:hover {
+  background: #242850;
+  border-color: #6a2c91;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
+}
+body:not(.adult-mode):not(.reader-mode) .ep-num { color: #ff9aa9; }
+
+body:not(.adult-mode):not(.reader-mode) .back-link {
+  color: #a78bfa;
+  border-color: rgba(140,120,220,0.3);
+}
+body:not(.adult-mode):not(.reader-mode) .back-link:hover { color: #ff9aa9; border-color: #6a2c91; }
+
+body:not(.adult-mode):not(.reader-mode) .footer {
+  color: #9aa0bf;
+  border-top: 1px solid #232640;
+}
+
+body:not(.adult-mode):not(.reader-mode) .tag-chip {
+  background: #1e2136;
+  color: #b9bede;
+  border: 1px solid #2a2e4a;
+}
+body:not(.adult-mode):not(.reader-mode) .tags-row { border-top-color: #232640; }
+
+body:not(.adult-mode):not(.reader-mode) .series-header { background: linear-gradient(135deg, #2b1d54, #4a2a7a); }
+body:not(.adult-mode):not(.reader-mode) .series-info h1 { color: #fff; }
+body:not(.adult-mode):not(.reader-mode) .series-desc { color: #b9bede; }
+body:not(.adult-mode):not(.reader-mode) .series-card { background: #1e2136; border-color: #232640; }
+body:not(.adult-mode):not(.reader-mode) .series-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
+body:not(.adult-mode):not(.reader-mode) .series-card-body h3 { color: #e4e6f5; }
+body:not(.adult-mode):not(.reader-mode) .series-card-body p { color: #9aa0bf; }
+
+body:not(.adult-mode):not(.reader-mode) .movie-card {
+  background: #1e2136;
+  border: 1px solid #2a2e4a;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
+}
+body:not(.adult-mode):not(.reader-mode) .movie-card:hover {
+  border-color: #6a2c91;
+  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
+}
+body:not(.adult-mode):not(.reader-mode) .movie-title { color: #e4e6f5; }
+body:not(.adult-mode):not(.reader-mode) .movie-original { color: #9aa0bf; }
+
+body:not(.adult-mode):not(.reader-mode) .manga-list-item {
+  background: #1e2136;
+  border: 1px solid #2a2e4a;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
+}
+body:not(.adult-mode):not(.reader-mode) .manga-list-item:hover { border-color: #6a2c91; }
+body:not(.adult-mode):not(.reader-mode) .manga-list-name { color: #e4e6f5; }
+body:not(.adult-mode):not(.reader-mode) .manga-list-orig { color: #9aa0bf; }
+body:not(.adult-mode):not(.reader-mode) .manga-list-chip { background: #2a2f4e; color: #b9bede; }
+
+body:not(.adult-mode):not(.reader-mode) .ln-list-item { background: #1e2136; border-color: #2a2e4a; }
+body:not(.adult-mode):not(.reader-mode) .ln-list-name { color: #e4e6f5; }
+body:not(.adult-mode):not(.reader-mode) .ln-list-orig { color: #9aa0bf; }
+body:not(.adult-mode):not(.reader-mode) .ln-tag { background: #2a2f4e; color: #b9bede; }
+
+body:not(.adult-mode):not(.reader-mode) .pg-btn {
+  background: #1e2136;
+  border: 1px solid #2a2e4a;
+  color: #cfd3e8;
+}
+body:not(.adult-mode):not(.reader-mode) .pg-btn:hover:not(.disabled):not(.active) { background: #242850; border-color: #6a2c91; }
+body:not(.adult-mode):not(.reader-mode) .pg-btn.active { background: linear-gradient(135deg, #2b1d54, #6a2c91); color: #fff; }
+body:not(.adult-mode):not(.reader-mode) .pg-btn.disabled { color: #5a5f7e; background: #16182b; }
+
+body:not(.adult-mode):not(.reader-mode) .settings-box { background: #1e2136; }
+body:not(.adult-mode):not(.reader-mode) .settings-title { color: #e4e6f5; }
+body:not(.adult-mode):not(.reader-mode) .settings-field input { background: #16182b; color: #e4e6f5; border-color: #2a2e4a; }
+
+body:not(.adult-mode):not(.reader-mode) .donate-header,
+body:not(.adult-mode):not(.reader-mode) .donate-desc,
+body:not(.adult-mode):not(.reader-mode) .donate-content { color: #cfd3e8; }
+
+body:not(.adult-mode):not(.reader-mode) .gallery-section { background: #14162a; }
+
+body:not(.adult-mode):not(.reader-mode) .home-nav { background: #16182b; border-bottom-color: #232640; }
+body:not(.adult-mode):not(.reader-mode) .home-nav a { color: #b9bede; }
+body:not(.adult-mode):not(.reader-mode) .home-nav a:hover,
+body:not(.adult-mode):not(.reader-mode) .home-nav a.active { background: #6a2c91; color: #fff; }
+body:not(.adult-mode):not(.reader-mode) .stats-bar { background: #14162a; border-bottom-color: #232640; color: #9aa0bf; }
+body:not(.adult-mode):not(.reader-mode) .stats-bar .stat-item span { color: #ff9aa9; }
+body:not(.adult-mode):not(.reader-mode) .search-box input { background: #16182b; color: #e4e6f5; }
+
+/* ===== Stage-1 poster-grid wallpaper (site-wide) ===== */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  background-color: #151515;
+  background-image:
+      url("https://phim.nguonc.com/public/images/Film/76.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/666.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/77.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/667.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/259.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/2738.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/3485.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/141438.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/date-a-bullet-thumb.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/3103.jpg"),
+      url("https://phim.nguonc.com/public/images/Post/5/aishiteru-game-wo-owarasetai.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/541.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/536.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/56167.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/56643.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/538.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/540.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/60351.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/2607.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/2661.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/5MgMCnslrxQfOfaq6T5ndkLlcCk.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/134808.jpg"),
+      url("https://phim.nguonc.com/public/images/Film/138379.jpg"),
+      url("https://phim.nguonc.com/public/images/Post/9/seishun-buta-yarou-wa-santa-claus-no-yume-wo-minai-1.jpg");
+  background-size: 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%, 12.5% 33.333%;
+  background-position:
+      0% 0%,
+      14.2857% 0%,
+      28.5714% 0%,
+      42.8571% 0%,
+      57.1429% 0%,
+      71.4286% 0%,
+      85.7143% 0%,
+      100% 0%,
+      0% 50%,
+      14.2857% 50%,
+      28.5714% 50%,
+      42.8571% 50%,
+      57.1429% 50%,
+      71.4286% 50%,
+      85.7143% 50%,
+      100% 50%,
+      0% 100%,
+      14.2857% 100%,
+      28.5714% 100%,
+      42.8571% 100%,
+      57.1429% 100%,
+      71.4286% 100%,
+      85.7143% 100%,
+      100% 100%;
+  background-repeat: no-repeat;
+  filter: brightness(0.42) saturate(0.65);
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(21,21,21,0.55), rgba(21,21,21,0.78) 68%, #151515 100%),
+    radial-gradient(120% 90% at 50% 0%, rgba(21,21,21,0) 42%, rgba(21,21,21,0.5) 100%);
 }