# Giải phẫu một bài viết kỹ thuật hiện đại trên y7.hk

> Kiểm tra áp lực cho engine đọc y7: callout, khối diff, công thức KaTeX, video avatar tròn, gallery figure, spoiler và công tắc chuyển font.
>
> 2026-10-15 — y7.hk

import AvatarVideo from "@/components/AvatarVideo.astro";

Bài viết này tập hợp **toàn bộ** khả năng về mặt thị giác, kiểu chữ và media của engine render bài viết của chúng tôi.

---

## 1. Callout và ghi chú bên lề

Các callout theo phong cách đơn sắc chung của trang — các khối inset sạch sẽ, không có đèn giao thông đầy màu sắc:

  Ghi chú
  Sử dụng nền trong suốt nhẹ --muted và viền hệ thống. Hài hòa với typography mà không làm phân tán việc đọc bài.

  Mẹo cho developer
  Nút Aa Serif ở góc trên bên phải chuyển sang font chữ có chân Georgia dành cho bài dài. Cài đặt được lưu tự động trong trình duyệt.

## 2. Hình ảnh và media

  <img 
    src="/og.png" 
    alt="Kiến trúc hệ thiết kế y7" 
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
    class="w-full h-auto rounded-2xl border border-border shadow-md transition-all hover:scale-[1.01]" 
  />
  Hình 1. Tạo OpenGraph và hệ thống thị giác của y7.hk (Geist Sans + OKLCH)

### So sánh hai phương án (grid media)
Lưới hai hình để so sánh giao diện "Trước" và "Sau":

    Phương án A: Kiểu phẳng cũ
    Phương án B: Kiểu Linear mới

### Avatar video trực tiếp của tác giả
Component video hình tròn tích hợp trong giao diện card:

      Yakushev Hermann
      Product Engineer · Southeast Asia
    /me.mp4
---

## 3. Code, Diff patch và Terminal

### Diff patch refactoring
Các dòng được thêm vào được highlight bằng màu ngọc lục nhẹ, dòng bị xóa bằng màu đỏ trầm:

```diff
  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }
```

### Lệnh terminal (Bash)
Ký hiệu `$ ` không được sao chép vào clipboard nhờ selector `user-select: none`:

```bash
git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build
```

---

## 4. Toán học và công thức KaTeX

### Công thức display
Các công thức phức tạp được render với hỗ trợ cuộn ngang trên thiết bị di động:

$$
\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2
$$

Công thức Transformer Attention[^1]:

$$
\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V
$$

### Công thức inline
Ký hiệu toán học và phương trình ngay trong văn bản: $e^{i\pi} + 1 = 0$, phép nhân ma trận $A \times B \in \mathbb{R}^{m \times p}$, và chuẩn gradient $\|\nabla \theta\| \le \epsilon$.

---

## 5. Bảng hỗ trợ cuộn

Bảng được tự động bao bọc trong container cuộn responsive và giữ được độ đọc được trên smartphone:

| Phương pháp / Công nghệ | Tốc độ phản hồi | Độ phức tạp | Trạng thái 2026 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Thấp | Đang chạy production |
| **React 19 Islands** | Hydration một phần | Trung bình | Hoạt động |
| **OKLCH Tokens** | Tức thì (CSS) | Tối thiểu | Tiêu chuẩn |
| **Web Audio API** | Độ trễ bằng không | Thấp | Đã bật |

---

## 6. Spoiler có thể thu gọn (``)

Accordion tương tác để ẩn log hoặc các đoạn tùy chọn:

  Hiển thị JSON payload đầy đủ của phản hồi LLM
    Ví dụ output có cấu trúc của model:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Pattern đã được xác thực thành công."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Yêu cầu hệ thống và môi trường
    Node.js ≥ 22.0.0 hoặc Bun ≥ 1.1
    Trình duyệt hiện đại hỗ trợ màu OKLCH
    Bộ nhớ build: ~250 MB RAM

---

## 7. Checklist và phím tắt

Danh sách công việc định dạng Markdown:

- [x] Đã cấu hình hỗ trợ callout có màu
- [x] Đã triển khai highlight code diff
- [x] Đã tích hợp công thức toán KaTeX
- [x] Đã thêm công tắc Serif / Sans
- [x] Đã tạo kiểu `` cho file media
- [ ] Dự kiến thêm các scene 3D canvas tương tác

Phím tắt để điều khiển:
- Nhấn ⌘ + K để tìm kiếm toàn cục.
- Nhấn ~ để mở console.
- Nhấn Esc để đóng bất kỳ popup nào.

---

## 8. Trích dẫn có ghi nguồn

> Thiết kế không chỉ là trông như thế nào và cảm giác ra sao. Thiết kế là nó hoạt động như thế nào.
> Steve Jobs

---

## 9. Chú thích học thuật

Văn bản có tham chiếu đến bài báo gốc về transformer[^2]. Khi click vào số chú thích, bạn sẽ được chuyển ngay đến panel chú thích ở cuối trang, và nhấn vào biểu tượng mũi tên ↩ sẽ đưa bạn quay lại đúng vị trí đang đọc.

[^1]: Attention là thành phần then chốt trong kiến trúc của các mô hình ngôn ngữ lớn hiện đại (LLM).
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.