---
version: alpha
name: "CMS quản lý trung tâm"
description: "Giao diện quản trị tiếng Việt, thống nhất với hệ thống CSS global hiện có."
colors:
  primary: "#52b8ff"
typography:
  inherited: "Runtime typography in frontend base styles"
omitted:
  - section: spacing
    reason: "Canonical runtime CSS variables own spacing."
  - section: rounded
    reason: "Canonical runtime component CSS owns radius."
components:
  table: {}
  filter: {}
  pagination: {}
---

# CMS Design System

## Overview

Product/admin register for Vietnamese-speaking centre staff. Existing class-list screens and the user's explicit system rules are the visual reference, not a new redesign. Maintain the blue primary identity and quiet white data surfaces.

## Colors

Runtime tokens in `public_html/template/frontend/src/css/g-4_ht-base.css` remain canonical; primary mirrors `--Light-Primary-50`. This document does not generate independent tokens.

## Typography

Inherit global frontend typography; do not introduce per-page font families for lists.

## Layout

List content uses `layout-box`, filters use `layout-filter`, tables use `table-container` wrapping `table-1`, and range/pagination use `table-footer` with `table-page-count`. Preserve table horizontal scrolling on narrow screens.

## Elevation & Depth

Reuse existing global surfaces and borders, without additional page-local card layers.

## Shapes

Inherit global table, field and button geometry.

## Components

Notification presets reuse the configuration field styles, canonical `c-modal` framework, default close button and global buttons. Two Zalo template groups (reminder and receipt) each offer friendly, playful, concise and formal wording. Preview does not mutate settings; apply edits the draft; apply-and-save commits via the existing CSRF-protected configuration form. Preserve inherited typography and existing saved templates. The legacy receipt-body database column remains the persistence owner to avoid requiring another migration.

Canonical structure and pagination styles live in `src/css/g-5_style.css`, mirrored in `dist/css/g-5_style.css`. Pagination markup uses `block/pagination`. Page styles may define content-specific avatars, contact cells, class tags and note truncation, but must not duplicate structural table/footer/pagination CSS. Preserve page-specific IDs used by AJAX.

Simple management lists may opt into shared compact density with `table-1` and `data-density="compact"`. Teacher tables use this variant; numerical and action cells align centrally in both initial and AJAX markup.

## Do's and Don'ts

- Reuse the shared list classes on student, teacher and class-list screens.
- Keep existing permissions and save/search behaviour unchanged during layout migrations.
- Do not reintroduce unsaved-change warnings on the student drawer; the user explicitly removed this feature.
- Do not create per-page equivalents of global pagination or table structure.