@charset "UTF-8";
/* ============================================================
HKD Admin — entry SCSS (Themes/Common)
Compile -> wwwroot/css/common-all.css (xem compilerconfig.json của Client).
Server chỉ host; toàn bộ giao diện (razor + scss) nằm ở project Client.
Quy tắc (theo CLAUDE.md):
- Token/framework: _variables.scss
- Component dùng chung: _components.scss
- App shell (sidebar): _app-shell.scss
- Page lớn: _page-[ten-page].scss — mỗi trang một file, import dưới đây
============================================================ */
/* ============================================================
Design tokens — shadcn / Linear / Vercel inspired
Zinc neutrals + single indigo accent. Light + Dark.
Cách chọn giao diện (theo thứ tự ưu tiên):
1. data-theme="light" | "dark" trên -> người dùng tự chọn
2. prefers-color-scheme của hệ điều hành -> khi chưa chọn
============================================================ */
/* ---- Token không phụ thuộc sáng/tối ---- */
:root {
/* Radius (minimal, rounded-lg) */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
/* Layout */
--sidebar-width: 256px;
--topnav-height: 56px;
--header-height: 60px;
--content-max-width: 1400px;
--transition: 0.15s ease;
/* Sidebar (app shell kiểu shadcn "sidebar-07") */
--sidebar-width-icon: 48px; /* bề rộng khi thu gọn còn icon */
--sidebar-inset-header: 64px; /* header vùng nội dung */
--sidebar-inset-header-sm: 48px; /* header khi sidebar thu gọn */
--sidebar-primary: var(--accent);
--sidebar-primary-foreground: var(--accent-foreground);
}
/* ---- 1. Mặc định: sáng ---- */
:root {
color-scheme: light;
/* Neutrals (zinc) */
--background: #fafafa; /* app canvas */
--surface: #ffffff; /* cards, header, sidebar */
--surface-2: #f4f4f5; /* subtle fills / hover (zinc-100) */
--border: #e4e4e7; /* zinc-200 */
--border-strong: #d4d4d8; /* zinc-300 */
--foreground: #18181b; /* zinc-900 */
--muted-foreground: #52525b; /* zinc-600 */
--muted-foreground-2: #a1a1aa; /* zinc-400 */
/* Accent — dark indigo */
--accent: #4f46e5; /* indigo-600 */
--accent-hover: #4338ca; /* indigo-700 */
--accent-foreground: #ffffff;
--accent-subtle: rgba(79, 70, 229, 0.10);
--accent-subtle-hover: rgba(79, 70, 229, 0.16);
--ring: rgba(79, 70, 229, 0.35);
/* Semantic */
--success: #059669; /* emerald-600 */
--success-subtle: rgba(5, 150, 105, 0.12);
--danger: #dc2626;
--danger-subtle: rgba(220, 38, 38, 0.12);
--warning: #d97706;
--warning-subtle: rgba(217, 119, 6, 0.14);
/* Shadows — subtle, borders do the heavy lifting */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
/* Bóng hắt NGƯỢC LÊN (offset âm) — cho thanh nút dính đáy (.form-page-footer).
Đậm hơn --shadow vì nhiệm vụ của nó là tách hẳn thanh nút khỏi nội dung đang
trượt qua bên dưới, không phải nhấn nhẹ một cái thẻ. */
--shadow-up: 0 -6px 16px -6px rgba(0, 0, 0, 0.12);
/* Sidebar */
--sidebar: #ffffff;
--sidebar-foreground: #18181b;
--sidebar-muted: #71717a; /* zinc-500 */
--sidebar-border: #e4e4e7;
--sidebar-accent: #f4f4f5; /* hover/active nền */
--sidebar-accent-foreground: #18181b;
}
/* ---- 2. Hệ điều hành đang tối và người dùng CHƯA chọn "sáng" ---- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
color-scheme: dark;
--background: #09090b; /* zinc-950 */
--surface: #18181b; /* zinc-900 */
--surface-2: #27272a; /* zinc-800 */
--border: #27272a; /* zinc-800 */
--border-strong: #3f3f46; /* zinc-700 */
--foreground: #fafafa;
--muted-foreground: #a1a1aa; /* zinc-400 */
--muted-foreground-2: #71717a; /* zinc-500 */
--accent: #6366f1; /* indigo-500 */
--accent-hover: #818cf8; /* indigo-400 */
--accent-foreground: #ffffff;
--accent-subtle: rgba(99, 102, 241, 0.16);
--accent-subtle-hover: rgba(99, 102, 241, 0.24);
--ring: rgba(99, 102, 241, 0.45);
--success: #10b981; /* emerald-500 — sáng hơn cho nền tối */
--success-subtle: rgba(16, 185, 129, 0.16);
--danger: #f87171; /* red-400 */
--danger-subtle: rgba(248, 113, 113, 0.16);
--warning: #f59e0b; /* amber-500 */
--warning-subtle: rgba(245, 158, 11, 0.18);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
/* Đục hơn hẳn bản sáng: nền tối gần đen thì bóng đen mờ 0.12 không nhìn thấy gì,
thanh nút sẽ trông như dính liền vào nội dung phía dưới. */
--shadow-up: 0 -8px 20px -6px rgba(0, 0, 0, 0.60);
--sidebar: #18181b; /* zinc-900 */
--sidebar-foreground: #fafafa;
--sidebar-muted: #a1a1aa; /* zinc-400 */
--sidebar-border: #27272a; /* zinc-800 */
--sidebar-accent: #27272a;
--sidebar-accent-foreground: #fafafa;
}
}
/* ---- 3. Người dùng chọn tường minh (thắng cả OS) ---- */
:root[data-theme=light] {
color-scheme: light;
/* Neutrals (zinc) */
--background: #fafafa; /* app canvas */
--surface: #ffffff; /* cards, header, sidebar */
--surface-2: #f4f4f5; /* subtle fills / hover (zinc-100) */
--border: #e4e4e7; /* zinc-200 */
--border-strong: #d4d4d8; /* zinc-300 */
--foreground: #18181b; /* zinc-900 */
--muted-foreground: #52525b; /* zinc-600 */
--muted-foreground-2: #a1a1aa; /* zinc-400 */
/* Accent — dark indigo */
--accent: #4f46e5; /* indigo-600 */
--accent-hover: #4338ca; /* indigo-700 */
--accent-foreground: #ffffff;
--accent-subtle: rgba(79, 70, 229, 0.10);
--accent-subtle-hover: rgba(79, 70, 229, 0.16);
--ring: rgba(79, 70, 229, 0.35);
/* Semantic */
--success: #059669; /* emerald-600 */
--success-subtle: rgba(5, 150, 105, 0.12);
--danger: #dc2626;
--danger-subtle: rgba(220, 38, 38, 0.12);
--warning: #d97706;
--warning-subtle: rgba(217, 119, 6, 0.14);
/* Shadows — subtle, borders do the heavy lifting */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
/* Bóng hắt NGƯỢC LÊN (offset âm) — cho thanh nút dính đáy (.form-page-footer).
Đậm hơn --shadow vì nhiệm vụ của nó là tách hẳn thanh nút khỏi nội dung đang
trượt qua bên dưới, không phải nhấn nhẹ một cái thẻ. */
--shadow-up: 0 -6px 16px -6px rgba(0, 0, 0, 0.12);
/* Sidebar */
--sidebar: #ffffff;
--sidebar-foreground: #18181b;
--sidebar-muted: #71717a; /* zinc-500 */
--sidebar-border: #e4e4e7;
--sidebar-accent: #f4f4f5; /* hover/active nền */
--sidebar-accent-foreground: #18181b;
}
:root[data-theme=dark] {
color-scheme: dark;
--background: #09090b; /* zinc-950 */
--surface: #18181b; /* zinc-900 */
--surface-2: #27272a; /* zinc-800 */
--border: #27272a; /* zinc-800 */
--border-strong: #3f3f46; /* zinc-700 */
--foreground: #fafafa;
--muted-foreground: #a1a1aa; /* zinc-400 */
--muted-foreground-2: #71717a; /* zinc-500 */
--accent: #6366f1; /* indigo-500 */
--accent-hover: #818cf8; /* indigo-400 */
--accent-foreground: #ffffff;
--accent-subtle: rgba(99, 102, 241, 0.16);
--accent-subtle-hover: rgba(99, 102, 241, 0.24);
--ring: rgba(99, 102, 241, 0.45);
--success: #10b981; /* emerald-500 — sáng hơn cho nền tối */
--success-subtle: rgba(16, 185, 129, 0.16);
--danger: #f87171; /* red-400 */
--danger-subtle: rgba(248, 113, 113, 0.16);
--warning: #f59e0b; /* amber-500 */
--warning-subtle: rgba(245, 158, 11, 0.18);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
/* Đục hơn hẳn bản sáng: nền tối gần đen thì bóng đen mờ 0.12 không nhìn thấy gì,
thanh nút sẽ trông như dính liền vào nội dung phía dưới. */
--shadow-up: 0 -8px 20px -6px rgba(0, 0, 0, 0.60);
--sidebar: #18181b; /* zinc-900 */
--sidebar-foreground: #fafafa;
--sidebar-muted: #a1a1aa; /* zinc-400 */
--sidebar-border: #27272a; /* zinc-800 */
--sidebar-accent: #27272a;
--sidebar-accent-foreground: #fafafa;
}
/* ============================================================
Base + component library (dùng chung) — shadcn look
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: var(--background);
color: var(--foreground);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
margin: 0;
font-weight: 600;
letter-spacing: -0.011em;
color: var(--foreground);
}
a {
color: inherit;
text-decoration: none;
}
::selection {
background: var(--accent-subtle);
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground-2);
background-clip: content-box;
}
::-webkit-scrollbar-track {
background: transparent;
}
/* ---- Page header ---- */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.page-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
}
.page-subtitle {
margin-top: 4px;
font-size: 13.5px;
color: var(--muted-foreground);
}
.header-actions-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
padding: 0 16px;
border-radius: var(--radius);
font-size: 13.5px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background var(--transition), border-color var(--transition), color var(--transition);
/* Nút đang xử lý hoặc chưa đủ điều kiện submit (VD: chưa tick điều khoản) */
}
.btn:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.btn i {
font-size: 13px;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: var(--accent);
color: var(--accent-foreground);
}
.btn-primary:hover {
background: var(--accent-hover);
}
.btn-outline {
background: var(--surface);
color: var(--foreground);
border-color: var(--border);
}
.btn-outline:hover {
background: var(--surface-2);
border-color: var(--border-strong);
}
.btn-ghost {
background: transparent;
color: var(--muted-foreground);
}
.btn-ghost:hover {
background: var(--surface-2);
color: var(--foreground);
}
/* Nút hành động nguy hiểm dạng viền (Xóa trong bảng...) */
.btn-outline-danger {
background: var(--surface);
color: var(--danger);
border-color: var(--border);
}
.btn-outline-danger:hover {
background: var(--danger-subtle);
border-color: var(--danger);
}
/* Nút nguy hiểm dạng đặc — nút hành động trong AlertDialog xác nhận xóa/gỡ */
.btn-danger {
background: var(--danger);
color: #fff;
}
.btn-danger:hover {
filter: brightness(0.92);
}
.btn-sm {
height: 32px;
padding: 0 12px;
font-size: 13px;
}
.btn-icon {
width: 38px;
padding: 0;
}
/* Nút icon cỡ nhỏ vuông 32px — hành động Sửa/Xóa trong bảng (kèm title làm tooltip) */
.btn-sm.btn-icon {
width: 32px;
}
/* ---- Card ---- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.card-pad {
padding: 20px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.card-title {
font-size: 14px;
font-weight: 600;
}
.card-body {
padding: 16px 20px;
}
.card-footer {
padding: 14px 20px;
border-top: 1px solid var(--border);
}
/* ---- Bento grid ---- */
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.bento > .col-3 {
grid-column: span 3;
}
.bento > .col-4 {
grid-column: span 4;
}
.bento > .col-6 {
grid-column: span 6;
}
.bento > .col-8 {
grid-column: span 8;
}
.bento > .col-12 {
grid-column: span 12;
}
/* Grid mặc định đã CĂNG CAO các ô .col-* bằng nhau trong 1 hàng (align-items: stretch),
nhưng .card bên trong không tự cao theo — card ngắn hơn (VD biểu đồ doanh thu cạnh danh
sách 5 sản phẩm) để hở khoảng trắng phía dưới. Ép .card cao 100% ô của nó + xếp flex-column
để phần thân co giãn lấp khoảng hở (xem .chart-placeholder ở _page-dashboard.scss). */
.bento > [class*=col-] > .card {
height: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 1080px) {
.bento > [class*=col-] {
grid-column: span 6;
}
}
@media (max-width: 640px) {
.bento {
gap: 12px;
}
.bento > [class*=col-] {
grid-column: span 12;
}
}
/* ---- Stat card ---- */
.stat {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
}
.stat-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.stat-label {
font-size: 12.5px;
font-weight: 500;
color: var(--muted-foreground);
}
.stat-icon {
width: 34px;
height: 34px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
color: var(--muted-foreground);
font-size: 14px;
}
.stat-value {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
}
.stat-meta {
font-size: 12.5px;
color: var(--muted-foreground);
display: flex;
align-items: center;
gap: 8px;
}
.stat-delta {
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
.stat-delta.up {
color: var(--success);
}
.stat-delta.down {
color: var(--danger);
}
/* ---- Badge ---- */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 500;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--muted-foreground);
white-space: nowrap;
}
.badge-accent {
background: var(--accent-subtle);
color: var(--accent);
border-color: transparent;
}
.badge-success {
background: var(--success-subtle);
color: var(--success);
border-color: transparent;
}
.badge-warning {
background: var(--warning-subtle);
color: var(--warning);
border-color: transparent;
}
.badge-danger {
background: var(--danger-subtle);
color: var(--danger);
border-color: transparent;
}
.badge-dot::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ---- Table ---- */
.table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.table th {
text-align: left;
padding: 10px 12px;
font-weight: 500;
font-size: 12px;
color: var(--muted-foreground);
border-bottom: 1px solid var(--border);
}
.table td {
padding: 13px 12px;
border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr {
transition: background var(--transition);
}
.table tbody tr:hover {
background: var(--surface-2);
}
.table .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.cell-strong {
font-weight: 500;
color: var(--foreground);
}
.cell-muted {
color: var(--muted-foreground);
}
/* ---- List rows ---- */
.list {
display: flex;
flex-direction: column;
}
.list-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.list-row:last-child {
border-bottom: none;
}
.avatar {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
color: var(--muted-foreground);
font-size: 15px;
}
.grow {
flex: 1;
min-width: 0;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Chặn truy cập ----
Razor: Pages/PageContent.razor (nhánh _isDeny) */
.deny-container {
display: flex;
justify-content: center;
padding: 48px 16px;
}
.deny-container .card {
max-width: 520px;
width: 100%;
}
.deny-container .card-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--danger);
}
.deny-box {
text-align: center;
font-size: 13.5px;
line-height: 1.7;
color: var(--muted-foreground);
}
/* ============================================================
FORM PRIMITIVES — dùng chung nhiều page (đăng nhập, đăng ký, thanh toán...)
Razor: Pages/Auth/Login.razor, Pages/Auth/Register.razor
============================================================ */
/* Nhóm các field xếp dọc */
.field-group {
display: flex;
flex-direction: column;
gap: 20px;
}
.field {
display: flex;
flex-direction: column;
gap: 7px;
}
/* Hai field nằm cạnh nhau trên một hàng (VD: giá bán | giá gốc) */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 520px) {
.field-row {
grid-template-columns: 1fr;
}
}
/* Hàng 3 ô — địa giới Tỉnh / Quận / Phường.
Razor: Pages/Config/Components/ModalCauHinhVanChuyen.razor */
.field-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
/* Trong modal hẹp, 3 select cạnh nhau thì tên tỉnh/huyện bị cắt gần hết */
}
@media (max-width: 720px) {
.field-row-3 {
grid-template-columns: 1fr;
}
}
/* Dòng label có thêm link phụ bên phải (VD: "Quên mật khẩu?") */
.field-label-row {
display: flex;
align-items: center;
gap: 8px;
}
.field-label {
font-size: 13.5px;
font-weight: 500;
color: var(--foreground);
}
/* ============================================================
BỐ CỤC TRANG FORM "TẠO / SỬA" — 2 cột + thanh nút dính đáy.
Dùng chung mọi trang tạo/sửa dạng trang riêng (song song với modal):
Pages/Product/PageTaoSanPham.razor, Pages/Order/PageTaoDonHang.razor.
============================================================ */
/* 2 cột: nội dung chính bên trái, thông tin phụ (giá, thanh toán...) bên phải */
.form-page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 540px;
gap: 16px;
align-items: start;
}
@media (max-width: 1100px) {
.form-page-layout {
grid-template-columns: 1fr;
}
}
.form-page-main,
.form-page-side {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
/* ============================================================
Ô ẢNH SẢN PHẨM TRONG BẢNG (11/08/2026)
Razor: Pages/Product/Components/ListSanPham.razor
Pages/Order/PageChiTietDonHang.razor
Chuyển từ _page-san-pham.scss lên đây khi trang thứ hai dùng tới.
============================================================ */
/* Đặt `width` trên | chứ không trên | : bảng dùng layout tự động, khai ở ô tiêu đề
là trình duyệt chốt bề rộng cột ngay từ đầu — khai ở | thì mỗi dòng đòi một kiểu và
cột co giãn theo dòng có ảnh rộng nhất. */
.th-thumb {
width: 64px;
}
.td-thumb {
/* Ô ảnh luôn cao 48px nên hàng cao hơn ô chữ; canh giữa cho ảnh thẳng hàng với tên. */
vertical-align: middle;
}
/* Khung bọc do NƠI GỌI quyết định — ProductThumb chỉ render thẻ ![]() trần
(xem chú thích trong Components/ProductThumb.razor). */
.product-row-thumb {
display: block;
width: 48px;
height: 48px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius);
/* Nền cho ảnh trong suốt (PNG) và cho khoảng trống lúc ảnh chưa tải xong —
dùng biến nên chế độ tối tự đúng. */
background: var(--surface-2);
/* Ảnh MẶC ĐỊNH (chưa có ảnh) — mờ nhẹ để nó lùi về sau tên sản phẩm.
Không cần đổi `object-fit` như bên storefront: khung ở đây VUÔNG 48×48 mà ảnh mặc
định cũng là glyph vuông nên `cover` chẳng xén gì. Bên kia khung 4:3 mới phải xử lý. */
}
.product-row-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-row-thumb img.is-placeholder {
opacity: 0.75;
}
/* ============================================================
HÀNG NHÃN — GIÁ TRỊ trong thẻ cột phụ (11/08/2026)
Razor: Pages/Order/PageChiTietDonHang.razor
Nhãn trái, giá trị phải — kiểu bảng thông tin, khác `.order-info-grid` (lưới nhiều ô).
============================================================ */
.order-info-stack {
display: flex;
flex-direction: column;
}
.order-info-line {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
font-size: 13.5px;
/* Nhãn không co, giá trị nhận hết phần còn lại và canh PHẢI — địa chỉ hay ghi chú dài
thì xuống dòng trong phần của nó chứ không đẩy nhãn vỡ. */
/* Dòng phụ (trạng thái vận đơn, "Thu lúc...") nằm dưới giá trị chính, không nối đuôi. */
}
.order-info-line:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.order-info-line .order-info-label {
flex-shrink: 0;
color: var(--muted-foreground);
}
.order-info-line .order-info-value {
min-width: 0;
text-align: right;
word-break: break-word;
}
.order-info-line .list-sub-line {
display: block;
margin-top: 3px;
}
/* Thanh nút dính đáy khung nội dung — form dài, khỏi phải cuộn xuống cuối để lưu.
11/08 — dựng lại cho tách bạch hẳn với nội dung cuộn phía dưới:
~~border: 1px solid; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);~~
Bản cũ là một thẻ card bo tròn trôi lơ lửng — nội dung trượt qua dưới nó nhìn như
lỗi hiển thị, và bóng đổ XUỐNG (shadow-sm) thì hắt vào đúng chỗ chẳng có gì.
Bản mới: dải chạy hết chiều ngang, chỉ kẻ viền TRÊN, bóng hắt LÊN (offset âm) —
mắt đọc ra ngay "nội dung đang chui xuống dưới thanh này". */
.form-page-footer {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
padding: 12px 16px;
/* Bo nhẹ hai góc DƯỚI thôi: hai góc trên phải vuông thì dải mới liền mạch với
mép nội dung bên trên. */
/* Bóng hắt LÊN. Đi qua biến `--shadow-up` (khai trong _variables.scss) chứ không
cắm mã màu ở đây: bóng đen nhạt trên nền tối gần như vô hình, nên bản tối cần
độ đục khác hẳn. Khai bằng biến thì cả hai cách bật chế độ tối (người dùng tự
chọn + theo hệ điều hành) đều đúng, viết `[data-theme="dark"] .x` thì chỉ trúng
cách thứ nhất. */
}
/* Dấu * đỏ đứng sau label của field BẮT BUỘC — quy ước dùng chung toàn app.
Dùng:
Chỉ gắn cho field mà bỏ trống/không chọn là KHÔNG hợp lệ (text/select/password
bắt buộc, checkbox-group cần chọn ≥1) — không gắn cho field số có giá trị mặc
định hợp lệ (VD phí ship = 0, số lượng = 1). */
.field-required {
color: var(--danger);
margin-left: 2px;
}
.field-hint {
font-size: 12.5px;
color: var(--muted-foreground);
}
.field-error {
font-size: 12.5px;
color: var(--danger);
}
/* Input / select / textarea */
.input {
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--foreground);
font-family: inherit;
font-size: 13.5px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder {
color: var(--muted-foreground-2);
}
.input:hover:not(:disabled) {
border-color: var(--border-strong);
}
.input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--ring);
}
.input:disabled {
background: var(--surface-2);
color: var(--muted-foreground-2);
cursor: not-allowed;
}
.input[aria-invalid=true] {
border-color: var(--danger);
}
.input[aria-invalid=true]:focus {
box-shadow: 0 0 0 3px var(--danger-subtle);
}
textarea.input {
height: auto;
min-height: 90px;
padding: 10px 12px;
line-height: 1.6;
resize: vertical;
}
/* Select: bỏ mũi tên mặc định của hệ điều hành, vẽ lại bằng SVG inline để
khớp màu token ở cả chế độ sáng và tối.
CHỈ áp cho select DẠNG DROPDOWN (không có thuộc tính size) — select[size]
(VD ô chọn khách hàng nhiều dòng ở ModalTaoDonHang/PageTaoDonHang) là danh
sách cuộn hiện sẵn, không phải dropdown nên mũi tên này vô nghĩa và làm nó
lệch khỏi design system (đã gặp lỗi hiển thị thật — xem HKD_NghiepVu_TaoDonHang.md).
Razor: Pages/Auth/PageDangKy.razor (ô chọn gói dịch vụ) */
select.input:not([size]) {
padding-right: 34px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
}
/* Danh sách bung ra do hệ điều hành vẽ (cả dropdown lẫn listbox), phải set màu
để không bị trắng trên nền tối. */
select.input option {
background: var(--surface);
color: var(--foreground);
}
/* Ô mật khẩu có nút hiện/ẩn */
.input-affix {
position: relative;
display: flex;
align-items: center;
}
.input-affix .input {
padding-right: 40px;
}
.input-affix-btn {
position: absolute;
right: 4px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted-foreground);
font-size: 13px;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.input-affix-btn:hover {
background: var(--surface-2);
color: var(--foreground);
}
/* Checkbox + nhãn nằm ngang */
.field-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--muted-foreground);
cursor: pointer;
}
.checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
accent-color: var(--accent);
cursor: pointer;
}
/* Đường kẻ ngăn có chữ ở giữa — "Hoặc tiếp tục với" */
.field-separator {
display: flex;
align-items: center;
gap: 12px;
font-size: 12.5px;
color: var(--muted-foreground);
}
.field-separator::before, .field-separator::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
/* Thông báo kết quả thao tác (lỗi đăng nhập, API lỗi...) — dùng chung nhiều page.
Razor: Pages/Auth/PageDangNhap.razor, Pages/Auth/PageDangKy.razor,
Pages/Subscription/PageGoiDichVu.razor
Class con theo _typeMessage: alert-danger | alert-success */
.alert {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: var(--radius);
font-size: 13px;
line-height: 1.5;
}
.alert i {
margin-top: 2px;
font-size: 13px;
}
.alert-danger {
background: var(--danger-subtle);
color: var(--danger);
}
.alert-success {
background: var(--success-subtle);
color: var(--success);
}
/* Dải NHẮC (không phải lỗi, không phải cảnh báo) — chỉ dẫn người dùng làm bước tiếp theo.
Razor: Pages/Inventory/PageKhoHang.razor (tab Tồn kho: nhắc chọn kho trước khi nhập/xuất) */
.alert-info {
background: var(--accent-subtle);
color: var(--accent);
}
/* Nút chiếm hết chiều ngang */
.btn-block {
width: 100%;
}
/* ============================================================
EMPTY STATE — trạng thái trống toàn trang, dùng chung
Razor: Pages/PageContent.razor (chưa có cửa hàng -> nhắc tạo trước)
============================================================ */
.empty-state-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: 48px 16px;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
max-width: 420px;
padding: 40px 32px;
text-align: center;
}
.empty-state .btn {
margin-top: 8px;
}
.empty-state-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--accent-subtle);
color: var(--accent);
font-size: 22px;
}
.empty-state-title {
font-size: 16px;
font-weight: 600;
}
.empty-state-desc {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--muted-foreground);
text-wrap: balance;
}
/* ============================================================
MODAL — hộp thoại dùng chung (form tạo/sửa nhanh trên mọi page)
Razor: Layout/CreateStoreModal.razor
============================================================ */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(0, 0, 0, 0.5);
}
.modal {
/* Căn giữa bằng inset:0 + margin:auto (KHÔNG dùng transform) — "height: fit-content" để
margin dọc auto thật sự chia đều (margin dọc auto chỉ centering khi height không phải
"auto" theo spec, fit-content thoả điều kiện này). Cố ý tránh `transform` ở đây: bất kỳ
phần tử có `transform` sẽ trở thành containing block mới cho MỌI con cháu `position:
fixed` bên trong nó — modal này lại có thể lồng modal khác bên trong (VD: AlbumPickerModal
mở từ trong modal "Ảnh banner" ở ThemeSectionsEditor.razor) nên modal con sẽ bị neo và
CẮT theo khung nhỏ của modal cha (kèm overflow:hidden) — đúng lỗi "modal bị lỗi" (ảnh
trôi nổi không khung/backdrop) người dùng gặp 20/08/2026. */
position: fixed;
inset: 0;
margin: auto;
z-index: 100;
display: flex;
flex-direction: column;
width: calc(100vw - 32px);
max-width: 480px;
height: fit-content;
max-height: calc(100vh - 48px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
/* form bên trong cũng phải co giãn để modal-body tự cuộn khi cao quá */
}
.modal > form {
display: flex;
flex-direction: column;
min-height: 0;
}
/* Modal rộng cho form nhiều nội dung (VD: chọn quyền theo module) */
.modal--wide {
max-width: 640px;
}
/* Modal RẤT rộng — lưới ảnh nhiều cột cần chỗ (Album ảnh) */
.modal--xl {
max-width: 960px;
}
/* ============================================================
ALBUM PICKER — lưới ảnh chọn lại từ Album cửa hàng + tab tải ảnh lên
Razor: Components/AlbumPickerModal.razor
============================================================ */
.album-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
margin-top: 14px;
margin-bottom: 14px;
}
.album-picker-item {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius);
overflow: hidden;
}
.album-picker-select {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
cursor: pointer;
transition: border-color var(--transition);
}
.album-picker-select:hover {
border-color: var(--accent);
}
.album-picker-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dấu xoá — góc trên phải, luôn hiện (không chỉ lúc hover) để dễ bấm trên cảm ứng. */
.album-picker-delete {
position: absolute;
top: 6px;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 11px;
cursor: pointer;
transition: background var(--transition);
}
.album-picker-delete:hover {
background: var(--danger);
}
.album-picker-delete:disabled {
cursor: default;
opacity: 0.7;
}
.album-upload-pane {
display: flex;
flex-direction: column;
gap: 12px;
}
.album-upload-dropzone {
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
background: var(--surface);
cursor: pointer;
transition: border-color var(--transition), background-color var(--transition);
}
.album-upload-dropzone:hover {
border-color: var(--accent);
background: var(--accent-subtle);
}
.album-upload-dropzone input[type=file] {
display: none;
}
.album-upload-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.album-upload-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 2px;
border-radius: 50%;
background: var(--accent-subtle);
color: var(--accent);
font-size: 18px;
}
.album-upload-text {
font-size: 13.5px;
font-weight: 500;
color: var(--foreground);
}
.album-upload-sub {
font-size: 12px;
color: var(--muted-foreground);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
}
.modal-title i {
color: var(--accent);
font-size: 14px;
}
.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted-foreground);
font-size: 13px;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.modal-close:hover {
background: var(--surface-2);
color: var(--foreground);
}
.modal-body {
padding: 20px;
overflow-y: auto;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
/* Modal rộng — dùng khi thân modal có bảng dữ liệu
Razor: Pages/Product/Components/ModalBienThe.razor */
.modal-lg {
max-width: 720px;
}
/* Modal mở CHỒNG lên một modal khác (sửa biến thể trên modal quản lý biến thể).
z-index cao hơn .modal (100) nhưng phải THẤP hơn .alert-dialog (110/120) để
hộp xác nhận xoá vẫn nổi lên trên cùng.
Razor: Pages/Product/Components/ModalSuaBienThe.razor */
.modal-backdrop-stacked {
z-index: 104;
}
.modal-stacked {
z-index: 105;
}
/* ============================================================
STOCK BADGE — số tồn kho, đỏ khi hết hàng
Razor: Pages/Inventory/PageKhoHang.razor,
Pages/Product/Components/ModalBienThe.razor
============================================================ */
.stock-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
}
.stock-badge.in {
background: var(--success-subtle);
color: var(--success);
}
.stock-badge.low {
background: var(--warning-subtle);
color: var(--warning);
}
.stock-badge.out {
background: var(--danger-subtle);
color: var(--danger);
}
/* Badge trung tính — loại giao dịch "Điều chỉnh" ở bảng lịch sử kho */
.badge-muted {
background: var(--surface-2);
color: var(--muted-foreground);
border-color: transparent;
}
/* Biến thể CHƯA KHAI khối lượng — cảnh báo ngay tại dòng vì thiếu là không tạo được
vận đơn. Màu cam (không phải đỏ): sản phẩm vẫn bán bình thường, chỉ vướng khi giao
bằng đơn vị vận chuyển.
Razor: Pages/Product/Components/ModalBienThe.razor */
.variant-no-weight {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--warning);
font-size: 12.5px;
white-space: nowrap;
}
/* Ô select/input thu nhỏ đặt trong thanh công cụ của card
Razor: Pages/Inventory/PageKhoHang.razor */
.input-sm {
height: 32px;
padding: 0 10px;
font-size: 13px;
width: auto;
min-width: 150px;
}
/* .input-sm truyền qua Class="input-sm" của SingleSelect: div wrapper không có
height riêng nên phải ghìm ở wrapper + truyền kích thước xuống trigger bên trong. */
.input-sm.single-select {
width: auto;
min-width: 150px;
flex: none;
}
.input-sm.single-select .single-select-trigger {
height: 32px;
padding: 0 10px;
font-size: 13px;
}
/* Phụ đề nhỏ cạnh tiêu đề card */
.card-subtitle {
font-size: 12.5px;
color: var(--muted-foreground);
}
/* Số thay đổi tồn kho: tăng xanh, giảm đỏ */
.qty-up {
color: var(--success);
font-weight: 600;
}
.qty-down {
color: var(--danger);
font-weight: 600;
}
.nowrap {
white-space: nowrap;
}
/* ============================================================
FORM THÊM BIẾN THỂ — trong ModalBienThe, dưới bảng biến thể
Razor: Pages/Product/Components/ModalBienThe.razor
============================================================ */
.variant-list {
margin-bottom: 20px;
}
.variant-form-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* Tiêu đề khối đầu tiên không cần vạch ngăn phía trên */
.variant-form-title-first {
padding-top: 0;
border-top: 0;
}
.variant-hint {
display: block;
margin: -4px 0 12px;
}
/* Một dòng khai báo tùy chọn: tên · giá trị · nút bỏ */
.variant-option-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
gap: 12px;
align-items: end;
margin-bottom: 10px;
}
.variant-option-row .variant-option-remove {
margin-bottom: 2px;
}
.variant-option-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
/* Ô nhập số trong bảng xem trước — canh phải cho dễ so giá */
.input-num {
text-align: right;
min-width: 110px;
}
/* Ô nhập kèm một nút hành động bên phải (VD nút sinh SKU, nút Thêm URL ảnh)
Razor: Pages/Product/PageTaoSanPham.razor
· Pages/Product/Components/ModalSuaPhienBan.razor */
.input-with-action {
display: flex;
align-items: center;
gap: 8px;
}
.input-with-action .input {
flex: 1;
min-width: 0;
}
.input-with-action .btn {
flex-shrink: 0;
}
.variant-removed {
margin-top: 12px;
}
@media (max-width: 640px) {
.variant-option-row {
grid-template-columns: 1fr auto;
}
}
/* ============================================================
TRIAL BANNER — thanh cảnh báo dùng thử, nổi dưới-giữa màn hình
Razor: Layout/TrialBanner.razor (gắn trong MainLayout, hiện khi IsTrial)
z-index dưới modal/alert-dialog để không đè hộp thoại.
============================================================ */
.trial-banner {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 80;
display: flex;
align-items: center;
gap: 12px;
max-width: calc(100vw - 32px);
padding: 10px 12px 10px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: var(--shadow);
}
.trial-banner-icon {
color: var(--warning);
font-size: 14px;
}
.trial-banner-text {
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
}
.trial-banner-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted-foreground);
font-size: 13px;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.trial-banner-close:hover {
background: var(--surface-2);
color: var(--foreground);
}
/* ============================================================
DATE INPUT — ô chọn ngày kiểu shadcn/ui "Date Picker — Input"
Razor: Components/DateInput.razor
z-index 106/107: trên .modal (100) và .modal-stacked (105), dưới
.alert-dialog (110/120) — chọn ngày trong modal vẫn nổi trên modal đó,
nhưng hộp xác nhận (nếu bật lên đồng thời) vẫn ở trên cùng.
============================================================ */
.date-input {
position: relative;
}
/* Nền TRONG SUỐT chỉ để bắt sự kiện bấm-ra-ngoài, không phải overlay tối màn
hình như .modal-backdrop — cùng kỹ thuật, khác mục đích. */
.date-picker-backdrop {
position: fixed;
inset: 0;
z-index: 106;
background: transparent;
}
.date-picker-popover {
position: absolute;
z-index: 107;
top: calc(100% + 6px);
right: 0;
width: 264px;
padding: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.date-picker-caption {
display: grid;
grid-template-columns: auto 1fr 1fr auto;
align-items: center;
gap: 4px;
margin-bottom: 10px;
}
.date-picker-nav {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--muted-foreground);
font-size: 11px;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.date-picker-nav:hover {
background: var(--surface-2);
color: var(--foreground);
}
.date-picker-select {
height: 28px;
padding: 0 6px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--foreground);
font-size: 12.5px;
cursor: pointer;
}
.date-picker-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.date-picker-weekdays span {
display: flex;
align-items: center;
justify-content: center;
height: 26px;
font-size: 11px;
font-weight: 600;
color: var(--muted-foreground-2);
}
.date-picker-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.date-picker-day {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--foreground);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background var(--transition), color var(--transition);
/* Ngày thuộc tháng trước/sau hiện mờ nhưng vẫn bấm chọn được */
}
.date-picker-day:hover {
background: var(--surface-2);
}
.date-picker-day.is-outside {
color: var(--muted-foreground-2);
}
.date-picker-day.is-today {
box-shadow: inset 0 0 0 1px var(--border-strong);
}
.date-picker-day.is-selected {
background: var(--accent);
color: var(--accent-foreground);
}
.date-picker-day.is-selected:hover {
background: var(--accent);
}
.date-picker-footer {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* ============================================================
SINGLE SELECT — ô chọn 1 giá trị kiểu shadcn Combobox, thay
|