diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fb84a49..39f440b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
@@ -37,7 +37,10 @@ jobs:
         run: composer install --no-interaction --prefer-dist --no-progress
 
       - name: Lint PHP
-        run: php -l proxy.php
+        run: |
+          for file in ./*.php; do
+            php -l "$file"
+          done
 
       - name: Validate camera data
         run: |
@@ -62,8 +65,47 @@ jobs:
             echo "Validated " . count($data) . " cameras.\n";
           '
 
-      - name: Smoke-check UI anchors
+      - name: Validate sitemap
+        run: |
+          php sitemap.php > /tmp/camera-sitemap.xml
+          php -r '
+            $data = json_decode(file_get_contents("data-camera.json"), true, 512, JSON_THROW_ON_ERROR);
+            $xml = simplexml_load_file("/tmp/camera-sitemap.xml");
+            if ($xml === false) {
+                fwrite(STDERR, "Generated sitemap is invalid XML.\n");
+                exit(1);
+            }
+            $expected = count($data) + 1;
+            $actual = count($xml->url);
+            if ($actual !== $expected) {
+                fwrite(STDERR, "Expected {$expected} sitemap URLs, got {$actual}.\n");
+                exit(1);
+            }
+            echo "Validated {$actual} sitemap URLs.\n";
+          '
+          grep -q 'https://camera-hcm.eplus.dev/sitemap.php' sitemap.xml
+          grep -q 'Sitemap: https://camera-hcm.eplus.dev/sitemap.xml' robots.txt
+
+      - name: Smoke-check SEO anchors
         run: |
           grep -q 'id="cameraGrid"' index.html
           grep -q 'id="searchInput"' index.html
-          grep -q 'proxy.php?id=' index.html
+          grep -q 'rel="canonical" href="https://camera-hcm.eplus.dev/"' index.html
+          grep -q 'application/ld+json' index.html
+          grep -q 'camera.php?id=' index.html
+          grep -q 'max-image-preview:large' index.html
+          grep -q 'favicon.svg' index.html
+          grep -q 'manifest.webmanifest' index.html
+
+      - name: HTTP smoke test
+        run: |
+          FIRST_ID="$(php -r '$data=json_decode(file_get_contents("data-camera.json"), true, 512, JSON_THROW_ON_ERROR); echo $data[0]["CamId"];')"
+          php -S 127.0.0.1:8080 > /tmp/camera-php-server.log 2>&1 &
+          SERVER_PID=$!
+          trap 'kill "$SERVER_PID"' EXIT
+          sleep 1
+
+          curl -fsS "http://127.0.0.1:8080/" | grep -q 'Camera giao thông TP.HCM'
+          curl -fsS "http://127.0.0.1:8080/camera.php?id=$FIRST_ID" | grep -q 'https://camera-hcm.eplus.dev/camera.php?id='
+          curl -fsS "http://127.0.0.1:8080/camera.php?id=$FIRST_ID" | grep -q 'application/ld+json'
+          curl -fsS "http://127.0.0.1:8080/sitemap.php" | grep -q '<urlset'
diff --git a/README.md b/README.md
index cf2e51b..ae4bf31 100644
--- a/README.md
+++ b/README.md
@@ -57,3 +57,20 @@ Hình ảnh camera được lấy từ Cổng thông tin giao thông TP.HCM. Tì
 ---
 
 © ePlus.DEV
+
+
+## SEO & discovery
+
+Production URL: <https://camera-hcm.eplus.dev/>
+
+The project exposes crawlable resources in addition to the JavaScript camera directory:
+
+- `camera.php?id={CamId}` — server-rendered canonical page for each camera.
+- `sitemap.xml` — sitemap index.
+- `sitemap.php` — dynamic sitemap containing the homepage and all camera detail pages.
+- `robots.txt` — crawler directives and sitemap discovery.
+- `llms.txt` — concise AI/LLM discovery file.
+- `agents.md` — machine-agent guidance and data semantics.
+- `manifest.webmanifest` and `favicon.svg` — app/site identity metadata.
+
+The homepage and detail pages include canonical URLs, social metadata and Schema.org JSON-LD.
diff --git a/agents.md b/agents.md
new file mode 100644
index 0000000..5aa0119
--- /dev/null
+++ b/agents.md
@@ -0,0 +1,31 @@
+# Agent guidance — Camera giao thông TP.HCM
+
+Canonical origin: https://camera-hcm.eplus.dev/
+
+## Purpose
+
+This site helps users find and view public traffic cameras in Ho Chi Minh City by camera name and district/area.
+
+## Preferred discovery flow
+
+1. Use /sitemap.xml or /sitemap.php to discover canonical camera detail pages.
+2. Use /data-camera.json for the camera catalog.
+3. Use /camera.php?id={CamId} for a human-readable, server-rendered camera page.
+4. Treat /proxy.php?id={CamId} as a live image endpoint, not as a stable text document.
+
+## Data semantics
+
+- CamId: stable camera identifier used by this site.
+- CamName: human-readable camera/intersection name.
+- Disctrict: source field containing district/area information. The misspelling is retained for backward compatibility.
+- Snapshot images are time-sensitive and may fail temporarily.
+
+## Crawling
+
+- Respect robots.txt.
+- Prefer canonical URLs from sitemap and rel=canonical.
+- Avoid generating or indexing arbitrary pagination/search URL combinations when a canonical camera detail page is available.
+
+## Attribution
+
+Site maintained by ePlus.DEV. Camera imagery depends on the Ho Chi Minh City traffic information source.
diff --git a/camera.php b/camera.php
new file mode 100644
index 0000000..5b66527
--- /dev/null
+++ b/camera.php
@@ -0,0 +1,402 @@
+<?php
+
+declare(strict_types=1);
+
+const BASE_URL = 'https://camera-hcm.eplus.dev';
+
+function h(string $value): string
+{
+    return htmlspecialchars($value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+}
+
+function cameraDistrict(array $camera): string
+{
+    return trim((string) ($camera['Disctrict'] ?? $camera['District'] ?? 'TP.HCM'));
+}
+
+$cameraId = isset($_GET['id']) ? trim((string) $_GET['id']) : '';
+
+if (!preg_match('/^[a-f0-9]{24}$/i', $cameraId)) {
+    http_response_code(404);
+    header('X-Robots-Tag: noindex, nofollow');
+    $cameraId = '';
+}
+
+$dataFile = __DIR__ . '/data-camera.json';
+$data = [];
+
+try {
+    $decoded = json_decode((string) file_get_contents($dataFile), true, 512, JSON_THROW_ON_ERROR);
+    if (is_array($decoded)) {
+        $data = $decoded;
+    }
+} catch (Throwable $exception) {
+    error_log('Camera detail data error: ' . $exception->getMessage());
+}
+
+$camera = null;
+foreach ($data as $item) {
+    if (($item['CamId'] ?? null) === $cameraId) {
+        $camera = $item;
+        break;
+    }
+}
+
+if (!$camera) {
+    http_response_code(404);
+    header('X-Robots-Tag: noindex, nofollow');
+    $pageTitle = 'Không tìm thấy camera | ePlus.DEV';
+    $pageDescription = 'Camera giao thông bạn yêu cầu không tồn tại hoặc đã được gỡ.';
+    $canonical = BASE_URL . '/';
+    $cameraName = 'Không tìm thấy camera';
+    $district = 'TP.HCM';
+    $imageUrl = '';
+    $related = [];
+} else {
+    $cameraName = trim((string) $camera['CamName']);
+    $district = cameraDistrict($camera);
+    $pageTitle = 'Camera ' . $cameraName . ' – ' . $district . ' | TP.HCM';
+    $pageDescription = 'Xem camera giao thông ' . $cameraName . ' tại ' . $district . ', TP.HCM. Hình ảnh camera được cập nhật tự động để tiện theo dõi tình hình giao thông.';
+    $canonical = BASE_URL . '/camera.php?id=' . rawurlencode($cameraId);
+    $imageUrl = BASE_URL . '/proxy.php?id=' . rawurlencode($cameraId);
+
+    $related = array_values(array_filter($data, static function (array $item) use ($cameraId, $district): bool {
+        return ($item['CamId'] ?? '') !== $cameraId
+            && cameraDistrict($item) === $district
+            && !empty($item['CamName'])
+            && !empty($item['CamId']);
+    }));
+    $related = array_slice($related, 0, 6);
+}
+
+$schema = $camera ? [
+    '@context' => 'https://schema.org',
+    '@type' => 'WebPage',
+    'name' => $pageTitle,
+    'description' => $pageDescription,
+    'url' => $canonical,
+    'inLanguage' => 'vi-VN',
+    'isPartOf' => [
+        '@type' => 'WebSite',
+        'name' => 'Camera giao thông TP.HCM',
+        'url' => BASE_URL . '/',
+    ],
+    'about' => [
+        '@type' => 'Place',
+        'name' => $cameraName,
+        'address' => [
+            '@type' => 'PostalAddress',
+            'addressLocality' => 'Hồ Chí Minh',
+            'addressRegion' => $district,
+            'addressCountry' => 'VN',
+        ],
+    ],
+    'primaryImageOfPage' => [
+        '@type' => 'ImageObject',
+        'contentUrl' => $imageUrl,
+        'name' => 'Camera ' . $cameraName,
+    ],
+] : null;
+
+?><!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#0f172a">
+    <meta name="description" content="<?= h($pageDescription) ?>">
+    <meta name="robots" content="<?= $camera ? 'index,follow,max-image-preview:large,max-snippet:-1' : 'noindex,nofollow' ?>">
+    <link rel="canonical" href="<?= h($canonical) ?>">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
+    <link rel="manifest" href="/manifest.webmanifest">
+    <meta property="og:type" content="website">
+    <meta property="og:locale" content="vi_VN">
+    <meta property="og:site_name" content="Camera giao thông TP.HCM">
+    <meta property="og:title" content="<?= h($pageTitle) ?>">
+    <meta property="og:description" content="<?= h($pageDescription) ?>">
+    <meta property="og:url" content="<?= h($canonical) ?>">
+<?php if ($camera): ?>
+    <meta property="og:image" content="<?= h($imageUrl) ?>">
+    <meta property="og:image:alt" content="<?= h('Camera ' . $cameraName) ?>">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="<?= h($imageUrl) ?>">
+<?php else: ?>
+    <meta name="twitter:card" content="summary">
+<?php endif; ?>
+    <meta name="twitter:title" content="<?= h($pageTitle) ?>">
+    <meta name="twitter:description" content="<?= h($pageDescription) ?>">
+    <title><?= h($pageTitle) ?></title>
+<?php if ($schema): ?>
+    <script type="application/ld+json"><?= json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?></script>
+<?php endif; ?>
+    <style>
+        :root {
+            color-scheme: light;
+            --bg: #f8fafc;
+            --surface: #fff;
+            --surface-muted: #f1f5f9;
+            --text: #0f172a;
+            --muted: #64748b;
+            --border: #e2e8f0;
+            --primary: #2563eb;
+            --success: #16a34a;
+            --danger: #dc2626;
+            --shadow: 0 18px 42px rgba(15,23,42,.1);
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                color-scheme: dark;
+                --bg: #08111f;
+                --surface: #0f172a;
+                --surface-muted: #172033;
+                --text: #e5edf8;
+                --muted: #94a3b8;
+                --border: #243247;
+                --primary: #60a5fa;
+                --success: #4ade80;
+                --danger: #f87171;
+                --shadow: 0 18px 42px rgba(0,0,0,.28);
+            }
+        }
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            min-height: 100vh;
+            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            background: radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 30rem), var(--bg);
+            color: var(--text);
+        }
+        a { color: inherit; }
+        button { font: inherit; cursor: pointer; }
+        .shell { width: min(1100px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 42px; }
+        .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
+        .back {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--muted);
+            text-decoration: none;
+            font-weight: 700;
+            font-size: .9rem;
+        }
+        .back:hover { color: var(--primary); }
+        .share {
+            min-height: 40px;
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 0 14px;
+            background: var(--surface);
+            color: var(--text);
+            font-weight: 700;
+        }
+        .detail-card {
+            overflow: hidden;
+            border: 1px solid var(--border);
+            border-radius: 22px;
+            background: var(--surface);
+            box-shadow: var(--shadow);
+        }
+        .media {
+            position: relative;
+            aspect-ratio: 16 / 9;
+            background: #020617;
+            overflow: hidden;
+        }
+        .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
+        .status {
+            position: absolute;
+            top: 14px;
+            left: 14px;
+            display: inline-flex;
+            align-items: center;
+            gap: 7px;
+            padding: 7px 10px;
+            border-radius: 999px;
+            background: rgba(2,6,23,.72);
+            color: #fff;
+            font-size: .76rem;
+            font-weight: 800;
+            backdrop-filter: blur(8px);
+        }
+        .dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
+        .status.ready .dot { background: #4ade80; }
+        .status.error .dot { background: #f87171; }
+        .content { padding: clamp(18px, 4vw, 30px); }
+        .eyebrow { color: var(--primary); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
+        h1 { margin: 7px 0 10px; font-size: clamp(1.45rem, 4vw, 2.15rem); line-height: 1.25; }
+        .lead { margin: 0; color: var(--muted); line-height: 1.7; }
+        .meta {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            margin-top: 18px;
+            color: var(--muted);
+            font-size: .85rem;
+        }
+        .pill {
+            padding: 8px 11px;
+            border-radius: 999px;
+            background: var(--surface-muted);
+            border: 1px solid var(--border);
+        }
+        .notice {
+            margin-top: 18px;
+            padding: 13px 15px;
+            border-radius: 14px;
+            background: var(--surface-muted);
+            color: var(--muted);
+            font-size: .84rem;
+            line-height: 1.55;
+        }
+        .related { margin-top: 24px; }
+        .related h2 { margin: 0 0 12px; font-size: 1.08rem; }
+        .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+        .related-link {
+            display: block;
+            padding: 13px 14px;
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            background: var(--surface);
+            text-decoration: none;
+            color: var(--text);
+            font-size: .88rem;
+            line-height: 1.45;
+        }
+        .related-link:hover { border-color: var(--primary); color: var(--primary); }
+        .not-found { text-align: center; padding: 64px 24px; }
+        .not-found a { color: var(--primary); }
+        .sr-status { color: var(--muted); font-size: .8rem; }
+        @media (max-width: 680px) {
+            .shell { width: min(100% - 20px, 1100px); padding-top: 16px; }
+            .related-grid { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+<main class="shell">
+    <div class="topbar">
+        <a class="back" href="/" aria-label="Quay về danh sách camera">← Danh sách camera</a>
+<?php if ($camera): ?>
+        <button id="shareButton" class="share" type="button">Chia sẻ</button>
+<?php endif; ?>
+    </div>
+
+<?php if (!$camera): ?>
+    <section class="detail-card not-found">
+        <h1>Không tìm thấy camera</h1>
+        <p class="lead">Camera này không tồn tại hoặc đã được gỡ khỏi danh sách.</p>
+        <p><a href="/">Quay về danh sách camera giao thông TP.HCM</a></p>
+    </section>
+<?php else: ?>
+    <article class="detail-card">
+        <div id="media" class="media">
+            <img id="cameraImage" src="proxy.php?id=<?= h($cameraId) ?>&amp;t=<?= time() ?>" alt="<?= h('Camera giao thông ' . $cameraName . ', ' . $district) ?>" width="1280" height="720">
+            <div id="status" class="status"><span class="dot"></span><span id="statusText">Đang tải</span></div>
+        </div>
+        <div class="content">
+            <div class="eyebrow">Camera giao thông TP.HCM</div>
+            <h1><?= h($cameraName) ?></h1>
+            <p class="lead"><?= h($pageDescription) ?></p>
+            <div class="meta">
+                <span class="pill"><?= h($district) ?></span>
+                <span class="pill">Mã camera: <?= h(strtoupper(substr($cameraId, -6))) ?></span>
+                <span id="refreshInfo" class="pill">Tự làm mới sau 10 giây</span>
+            </div>
+            <div class="notice">
+                Hình ảnh phụ thuộc vào nguồn camera giao thông TP.HCM và có thể tạm thời không khả dụng.
+                Trang sẽ tự làm mới ảnh khi bạn đang mở tab này.
+            </div>
+        </div>
+    </article>
+
+<?php if ($related): ?>
+    <section class="related" aria-labelledby="relatedTitle">
+        <h2 id="relatedTitle">Camera khác tại <?= h($district) ?></h2>
+        <div class="related-grid">
+<?php foreach ($related as $item): ?>
+            <a class="related-link" href="/camera.php?id=<?= h((string) $item['CamId']) ?>">
+                <?= h((string) $item['CamName']) ?>
+            </a>
+<?php endforeach; ?>
+        </div>
+    </section>
+<?php endif; ?>
+
+    <script>
+        (() => {
+            const image = document.getElementById('cameraImage');
+            const status = document.getElementById('status');
+            const statusText = document.getElementById('statusText');
+            const refreshInfo = document.getElementById('refreshInfo');
+            const shareButton = document.getElementById('shareButton');
+            const cameraId = <?= json_encode($cameraId) ?>;
+            const refreshSeconds = 10;
+            let remaining = refreshSeconds;
+
+            function setReady() {
+                status.classList.remove('error');
+                status.classList.add('ready');
+                statusText.textContent = 'Trực tuyến';
+            }
+
+            function setError() {
+                status.classList.remove('ready');
+                status.classList.add('error');
+                statusText.textContent = 'Không tải được';
+            }
+
+            function refreshImage() {
+                if (document.hidden) return;
+                status.classList.remove('ready', 'error');
+                statusText.textContent = 'Đang tải';
+                image.src = 'proxy.php?id=' + encodeURIComponent(cameraId) + '&t=' + Date.now();
+                remaining = refreshSeconds;
+            }
+
+            image.addEventListener('load', setReady);
+            image.addEventListener('error', setError);
+
+            window.setInterval(() => {
+                if (document.hidden) {
+                    refreshInfo.textContent = 'Tạm dừng khi tab ẩn';
+                    return;
+                }
+                remaining -= 1;
+                if (remaining <= 0) {
+                    refreshImage();
+                }
+                refreshInfo.textContent = 'Tự làm mới sau ' + remaining + ' giây';
+            }, 1000);
+
+            document.addEventListener('visibilitychange', () => {
+                if (!document.hidden) refreshImage();
+            });
+
+            shareButton.addEventListener('click', async () => {
+                const shareData = {
+                    title: document.title,
+                    text: <?= json_encode('Camera giao thông ' . $cameraName . ' – ' . $district, JSON_UNESCAPED_UNICODE) ?>,
+                    url: window.location.href
+                };
+
+                try {
+                    if (navigator.share) {
+                        await navigator.share(shareData);
+                    } else {
+                        await navigator.clipboard.writeText(window.location.href);
+                        shareButton.textContent = 'Đã sao chép link';
+                        window.setTimeout(() => shareButton.textContent = 'Chia sẻ', 1800);
+                    }
+                } catch (error) {
+                    if (error && error.name !== 'AbortError') {
+                        shareButton.textContent = 'Không thể chia sẻ';
+                        window.setTimeout(() => shareButton.textContent = 'Chia sẻ', 1800);
+                    }
+                }
+            });
+        })();
+    </script>
+<?php endif; ?>
+</main>
+</body>
+</html>
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..896eeb7
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2563eb"/>
+      <stop offset="1" stop-color="#0ea5e9"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="url(#g)"/>
+  <rect x="13" y="19" width="31" height="26" rx="7" fill="none" stroke="#fff" stroke-width="4"/>
+  <circle cx="28.5" cy="32" r="6" fill="none" stroke="#fff" stroke-width="4"/>
+  <path d="M44 27l8-4v18l-8-4z" fill="#fff"/>
+</svg>
diff --git a/index.html b/index.html
index aa872ce..ddc5167 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,45 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#0f172a">
-    <meta name="description" content="Theo dõi camera giao thông TP.HCM theo thời gian thực.">
-    <title>Camera giao thông TP.HCM</title>
+    <meta name="description" content="Xem camera giao thông TP.HCM trực tuyến theo khu vực, tìm nhanh tuyến đường và theo dõi hình ảnh giao thông được cập nhật tự động.">
+    <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
+    <meta name="application-name" content="Camera giao thông TP.HCM">
+    <link rel="canonical" href="https://camera-hcm.eplus.dev/">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
+    <link rel="manifest" href="/manifest.webmanifest">
+    <meta property="og:type" content="website">
+    <meta property="og:locale" content="vi_VN">
+    <meta property="og:site_name" content="Camera giao thông TP.HCM">
+    <meta property="og:title" content="Camera giao thông TP.HCM trực tuyến">
+    <meta property="og:description" content="Tìm và xem camera giao thông TP.HCM theo khu vực, cập nhật hình ảnh tự động.">
+    <meta property="og:url" content="https://camera-hcm.eplus.dev/">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Camera giao thông TP.HCM trực tuyến">
+    <meta name="twitter:description" content="Tìm và xem camera giao thông TP.HCM theo khu vực, cập nhật hình ảnh tự động.">
+    <title>Camera giao thông TP.HCM trực tuyến | ePlus.DEV</title>
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "Camera giao thông TP.HCM",
+        "url": "https://camera-hcm.eplus.dev/",
+        "description": "Ứng dụng web tra cứu và theo dõi camera giao thông TP.HCM theo khu vực.",
+        "applicationCategory": "UtilitiesApplication",
+        "operatingSystem": "Any",
+        "inLanguage": "vi-VN",
+        "isAccessibleForFree": true,
+        "offers": {
+            "@type": "Offer",
+            "price": "0",
+            "priceCurrency": "VND"
+        },
+        "publisher": {
+            "@type": "Organization",
+            "name": "ePlus.DEV",
+            "url": "https://eplus.dev/"
+        }
+    }
+    </script>
     <style>
         :root {
             color-scheme: light;
@@ -357,6 +394,73 @@
         .district span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
         .camera-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .8; }
 
+        .card-actions {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid var(--border);
+        }
+
+        .detail-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 7px;
+            color: var(--primary);
+            font-size: .82rem;
+            font-weight: 800;
+            text-decoration: none;
+        }
+
+        .detail-link:hover { text-decoration: underline; }
+        .detail-link svg { width: 15px; height: 15px; }
+
+        .seo-content {
+            margin-top: 24px;
+            padding: 22px;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: var(--shadow);
+        }
+
+        .seo-content h2 {
+            margin: 0 0 10px;
+            font-size: clamp(1.15rem, 2vw, 1.45rem);
+        }
+
+        .seo-content p {
+            margin: 0;
+            color: var(--muted);
+            line-height: 1.75;
+        }
+
+        .seo-points {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 12px;
+            margin-top: 16px;
+        }
+
+        .seo-point {
+            padding: 14px;
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            background: var(--surface-solid);
+        }
+
+        .seo-point strong {
+            display: block;
+            margin-bottom: 5px;
+            font-size: .9rem;
+        }
+
+        .seo-point span {
+            color: var(--muted);
+            font-size: .82rem;
+            line-height: 1.55;
+        }
+
         .empty-state, .error-state, .initial-loader {
             grid-column: 1 / -1;
             min-height: 340px;
@@ -435,6 +539,8 @@
             .camera-grid { grid-template-columns: 1fr; gap: 12px; }
             .summary-row { align-items: flex-start; flex-direction: column; }
             .camera-title { min-height: auto; }
+            .seo-content { padding: 16px; }
+            .seo-points { grid-template-columns: 1fr; }
             .page-btn { min-width: 38px; height: 38px; }
             .hide-mobile { display: none; }
         }
@@ -534,6 +640,29 @@ <h1>Camera giao thông TP.HCM</h1>
         </section>
 
         <nav id="pagination" class="pagination-wrap" aria-label="Phân trang camera"></nav>
+
+        <section class="seo-content" aria-labelledby="aboutCameraViewer">
+            <h2 id="aboutCameraViewer">Camera giao thông TP.HCM trực tuyến</h2>
+            <p>
+                Công cụ giúp tra cứu nhanh camera giao thông tại TP.HCM theo tên đường, giao lộ và khu vực.
+                Mỗi camera có trang chi tiết riêng để bạn có thể mở, chia sẻ và quay lại đúng vị trí cần theo dõi.
+            </p>
+            <div class="seo-points">
+                <div class="seo-point">
+                    <strong>Tìm theo tuyến đường</strong>
+                    <span>Nhập tên đường hoặc giao lộ để lọc nhanh camera phù hợp.</span>
+                </div>
+                <div class="seo-point">
+                    <strong>Lọc theo khu vực</strong>
+                    <span>Thu hẹp danh sách theo quận hoặc khu vực để theo dõi thuận tiện hơn.</span>
+                </div>
+                <div class="seo-point">
+                    <strong>Cập nhật tự động</strong>
+                    <span>Hình ảnh camera có thể tự làm mới theo chu kỳ bạn lựa chọn.</span>
+                </div>
+            </div>
+        </section>
+
         <p class="footer-note">Nguồn hình ảnh: Cổng thông tin giao thông TP.HCM · ePlus.DEV</p>
     </main>
 
@@ -750,7 +879,17 @@ <h1>Camera giao thông TP.HCM</h1>
                 code.title = camera.CamId;
 
                 meta.append(district, code);
-                body.append(title, meta);
+
+                const actions = document.createElement('div');
+                actions.className = 'card-actions';
+                const detailLink = document.createElement('a');
+                detailLink.className = 'detail-link';
+                detailLink.href = 'camera.php?id=' + encodeURIComponent(camera.CamId);
+                detailLink.setAttribute('aria-label', 'Xem chi tiết camera ' + camera.CamName);
+                detailLink.innerHTML = 'Xem chi tiết <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>';
+                actions.appendChild(detailLink);
+
+                body.append(title, meta, actions);
                 card.append(media, body);
 
                 requestAnimationFrame(() => setCardImage(card, camera));
diff --git a/llms.txt b/llms.txt
new file mode 100644
index 0000000..1a8abf1
--- /dev/null
+++ b/llms.txt
@@ -0,0 +1,26 @@
+# Camera giao thông TP.HCM
+
+> Public traffic-camera viewer for Ho Chi Minh City, maintained by ePlus.DEV.
+
+Canonical site: https://camera-hcm.eplus.dev/
+Language: Vietnamese (vi-VN)
+
+## Primary resources
+
+- Homepage and searchable camera directory: https://camera-hcm.eplus.dev/
+- Sitemap index: https://camera-hcm.eplus.dev/sitemap.xml
+- Dynamic camera sitemap: https://camera-hcm.eplus.dev/sitemap.php
+- Machine-readable camera catalog: https://camera-hcm.eplus.dev/data-camera.json
+- Agent guidance: https://camera-hcm.eplus.dev/agents.md
+
+## Camera pages
+
+Each camera has a canonical server-rendered detail page:
+
+https://camera-hcm.eplus.dev/camera.php?id={CamId}
+
+Camera IDs are 24-character hexadecimal identifiers.
+
+## Data notes
+
+Camera availability and images depend on the public upstream traffic-camera source. Images may be temporarily unavailable. Do not interpret a missing image as proof that a road or camera no longer exists.
diff --git a/manifest.webmanifest b/manifest.webmanifest
new file mode 100644
index 0000000..59762d9
--- /dev/null
+++ b/manifest.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Camera giao thông TP.HCM",
+  "short_name": "Camera HCM",
+  "description": "Tra cứu và theo dõi camera giao thông TP.HCM theo khu vực.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "lang": "vi-VN",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 0000000..fe4e630
--- /dev/null
+++ b/robots.txt
@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+Disallow: /vendor/
+
+Sitemap: https://camera-hcm.eplus.dev/sitemap.xml
diff --git a/sitemap.php b/sitemap.php
new file mode 100644
index 0000000..88ebd64
--- /dev/null
+++ b/sitemap.php
@@ -0,0 +1,50 @@
+<?php
+
+declare(strict_types=1);
+
+const BASE_URL = 'https://camera-hcm.eplus.dev';
+
+header('Content-Type: application/xml; charset=UTF-8');
+header('Cache-Control: public, max-age=3600');
+
+function xml(string $value): string
+{
+    return htmlspecialchars($value, ENT_XML1 | ENT_QUOTES, 'UTF-8');
+}
+
+$dataFile = __DIR__ . '/data-camera.json';
+$indexFile = __DIR__ . '/index.html';
+$detailFile = __DIR__ . '/camera.php';
+
+try {
+    $data = json_decode((string) file_get_contents($dataFile), true, 512, JSON_THROW_ON_ERROR);
+} catch (Throwable $exception) {
+    http_response_code(500);
+    echo '<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"></urlset>';
+    exit;
+}
+
+$lastModified = max(
+    (int) @filemtime($dataFile),
+    (int) @filemtime($indexFile),
+    (int) @filemtime($detailFile)
+);
+$lastmod = gmdate('Y-m-d', $lastModified ?: time());
+
+echo '<?xml version="1.0" encoding="UTF-8"?>' . PHP_EOL;
+echo '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">' . PHP_EOL;
+echo '  <url><loc>' . xml(BASE_URL . '/') . '</loc><lastmod>' . $lastmod . '</lastmod></url>' . PHP_EOL;
+
+$seen = [];
+foreach ($data as $camera) {
+    $id = (string) ($camera['CamId'] ?? '');
+    if (!preg_match('/^[a-f0-9]{24}$/i', $id) || isset($seen[$id])) {
+        continue;
+    }
+
+    $seen[$id] = true;
+    $url = BASE_URL . '/camera.php?id=' . rawurlencode($id);
+    echo '  <url><loc>' . xml($url) . '</loc><lastmod>' . $lastmod . '</lastmod></url>' . PHP_EOL;
+}
+
+echo '</urlset>' . PHP_EOL;
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000..8195ce6
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <sitemap>
+    <loc>https://camera-hcm.eplus.dev/sitemap.php</loc>
+  </sitemap>
+</sitemapindex>