/* =============================================================
iAi Lắng Nghe — NỀN THIẾT KẾ DÙNG CHUNG
Nguồn phong cách: IAI Inspires Design System v3.1
(D:\DienBT\IAI Website\iai-website\src\app\globals.css)
Bản v2 — sửa GỐC RỄ của bản cũ:
1. Bề mặt nông: --color-bg-warm cũ gần như TRẮNG (oklch 99%) nên mọi
tấm thẻ chìm vào nền, không có chiều sâu. Nay tách 3 tầng bề mặt rõ.
2. Không có thang khoảng cách: số lẻ 18/22/26/28px rải rác. Nay 1 thang 4px.
3. Không có khung portal: portal thiếu thanh bên + thanh trên + vùng cuộn.
4. Không có công cụ vận hành: thiếu ô lọc, sắp xếp, chọn nhiều, trạng thái rỗng.
5. Thiếu .an — lớp ẩn mà trang portal ĐANG dùng nhưng chưa từng định nghĩa.
QUY ƯỚC ĐẶT TÊN: giữ tên tiếng Việt không dấu như bản cũ (the, bang, truong…)
để không phải sửa lại hai trang đang dùng.
============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,600;1,700&display=swap');
/* ═══════════════════════════════════════════════════════════
1. TOKEN
═══════════════════════════════════════════════════════════ */
:root {
/* — Màu: lấy từ IAI Inspires Design System v3.1, không tự bịa — */
--color-bg: #f3f1fa; /* nền trang — đủ sâu để thẻ trắng NỔI lên */
--color-surface: #ffffff; /* tầng 1: thẻ, bảng */
--color-surface-2: #faf9fe; /* tầng 2: đầu bảng, dải phụ */
--color-surface-3: #f0edf9; /* tầng 3: vùng lõm, ô chờ */
--color-bg-warm: #f6f4fc; /* dải ấm — nay có màu thật, không phải trắng */
--color-border: #e5e0f2; /* viền tầng 1 */
--color-border-strong: #d5cdec; /* viền tầng 2 — cho ô nhập, nút */
--color-fg: #1b183a;
--color-fg-soft: #2f2b52;
--color-muted: #5c5685;
/* Chữ phụ nhạt nhất. SỐ ĐO WCAG THẬT (tự tính bằng công thức, KHÔNG chép báo cáo):
mã cũ #7d78a3 chỉ đạt 4.13:1 trên trắng và 3.69:1 trên nền trang ⇒ KHÔNG ĐẠT AA.
Mã nay #6b6690: 5.35:1 trên trắng · 5.10:1 trên #faf9fe · 4.78:1 trên nền trang
· 4.63:1 trên vùng lõm #f0edf9 ⇒ ĐẠT AA ở cả 4 tầng bề mặt. */
--color-muted-2: #6b6690;
--color-accent: #4c1d95;
--color-accent-hover: #642894;
--color-accent-soft: rgba(76, 29, 149, 0.08);
--color-accent-line: rgba(76, 29, 149, 0.16);
--color-green: #10b981;
--color-green-soft: rgba(16, 185, 129, 0.08);
--color-gold: #d9a73d;
--color-gold-soft: rgba(217, 167, 61, 0.08);
--color-cyan: #0ea5e9;
--color-cyan-soft: rgba(14, 165, 233, 0.08);
--color-yellow: #eab308;
--color-yellow-soft: rgba(234, 179, 8, 0.08);
--color-success: #10b981;
--color-success-soft: #f0fdf4;
--color-warning: #f59e0b;
--color-warning-soft: #fffbeb;
--color-danger: #dc2626;
--color-danger-soft: #fef2f2;
--color-info: #2563eb;
--color-info-soft: #eff6ff;
/* — Chữ — */
--font-primary: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Playfair Display', Georgia, serif;
--font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
/* — Thang cỡ chữ (thay số lẻ rải rác) — */
--fs-xs: 11.5px; /* nhãn bảng, chữ phụ rất nhỏ */
--fs-sm: 12.5px; /* chú thích */
--fs-base: 14px; /* thân */
--fs-md: 15px; /* thân lớn, mô tả */
--fs-lg: 16px; /* tiêu đề thẻ */
--fs-xl: 20px; /* tiêu đề trang */
--fs-2xl: 26px; /* số liệu lớn */
--fs-3xl: 34px; /* số liệu anh hùng */
/* — THANG KHOẢNG CÁCH 4px (mới — chống số lẻ tuỳ hứng) — */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
/* — Bóng: 3 cấp, đủ khác biệt để đọc được tầng — */
--shadow-sm: 0 1px 2px rgba(27, 24, 58, 0.05);
--shadow-md: 0 2px 8px rgba(27, 24, 58, 0.06), 0 1px 2px rgba(27, 24, 58, 0.04);
--shadow-lg: 0 8px 28px rgba(27, 24, 58, 0.09), 0 2px 6px rgba(27, 24, 58, 0.04);
--shadow-xl: 0 20px 50px -12px rgba(18, 12, 44, 0.16), 0 8px 16px rgba(18, 12, 44, 0.05);
--shadow-glow: 0 0 0 3px rgba(76, 29, 149, 0.18);
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius: 12px;
--radius-lg: 16px;
--radius-full: 999px;
/* — Khung — */
--cao-top: 58px; /* thanh trên */
--rong-side: 258px; /* thanh bên portal */
--chuyen: 0.18s cubic-bezier(0.4, 0, 0.2, 1); /* 180ms — trong khoảng 150–300ms */
}
/* ═══════════════════════════════════════════════════════════
2. NỀN TẢNG
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden], .an { display: none !important; } /* .an: lớp ẩn trang portal đang dùng */
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--color-bg); color: var(--color-fg);
font-family: var(--font-primary); font-size: var(--fs-base); line-height: 1.6;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden; word-break: break-word;
}
a { color: inherit; text-decoration: none; transition: color var(--chuyen); }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
:focus-visible {
outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-xs);
}
[role="button"], [data-clickable], summary { cursor: pointer; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.so-lieu { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* ═══════════════════════════════════════════════════════════
3. BỐ CỤC TRANG (dùng cho landing công khai)
═══════════════════════════════════════════════════════════ */
/* ─── TRẦN BỀ NGANG VÙNG NỘI DUNG (Đợt 1 — 15/10/2026, lỗi L1) ─────────────────────────
Trước: đóng băng 1240px ở MỌI màn ⇒ 1920 hở 332px mỗi bên (35% bề ngang chết), 2560 hở
gần một nửa; 1366 và 1920 cho ra bố cục Y HỆT nhau (cao trang 3943px giống hệt).
Nay: dùng ĐÚNG công thức đã có ở `.portal-than` (:570) — lề thở theo bề ngang, có TRẦN
để dòng chữ không dài quá mức đọc được. Đo lại: 1920 → khung 1760 (lề 72/bên).
Vì sao `100vw` an toàn ở đây: `max-width` chỉ CHẶN trên, `width: 100%` vẫn là trần thật
⇒ không sinh thanh cuộn ngang (đã đo 7 cỡ màn: tràn ngang = 0).
Vì sao gom thành 1 biến: 3 nơi cùng một trần (khung nội dung · thanh trên · chân trang)
— khai 3 lần là mầm lệch trần về sau. */
:root { --rong-trang: min(1760px, max(1240px, calc(100vw - 2 * max(var(--sp-5), 4vw)))); }
.container { width: 100%; max-width: var(--rong-trang); margin-inline: auto; padding-inline: var(--sp-5); }
@media (max-width: 768px) { .container { padding-inline: var(--sp-4); } }
.section { padding-block: var(--sp-8); }
@media (min-width: 769px) {
/* Đợt 1 (15/10/2026) — lỗi L5: trước đây MỌI khối đều `--sp-10` (64px) và mục nào cũng
như mục nào ⇒ trang phẳng, không có nhịp. Nay nhịp theo BỀ NGANG: 769px → 48px,
1366px → 68px, 1920px → 80px. Đổi LUẬT của `.section` (KHÔNG đổi token), nên
`.hero` vẫn theo `--sp-10` — tức công tắc mật độ của miền vẫn còn tác dụng.
Màn ≤768px giữ nguyên (đã đúng ở bản trước, xem `:1093-1104`). */
.section { padding-block: clamp(48px, 5vw, 80px); }
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) {
.grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1024px) {
.grid-2 { gap: var(--sp-7); } .grid-3 { gap: var(--sp-5); } .grid-4 { gap: var(--sp-5); }
}
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ═══════════════════════════════════════════════════════════
MÀN 3 NGĂN (đợt C 06/10/2026) — bảng ở trái, chi tiết đối tượng ở phải.
Vì sao thêm lớp riêng thay vì dùng `.grid-2`: `.grid-2` chia ĐÔI đều ⇒ bảng bị bóp hẹp
trong khi ngăn chi tiết chỉ cần ~360px. Lớp này giữ bảng rộng và CỐ ĐỊNH bề rộng ngăn phải.
Dưới 1100px thì xếp DỌC (bảng trước, chi tiết sau) — màn hẹp mà ép 2 cột là bảng không đọc được.
═══════════════════════════════════════════════════════════ */
.man-3-ngan { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* Dòng đang mở ở ngăn phải — người dùng phải thấy NGAY mình đang xem dòng nào. */
.bang tr.dang-xem td { background: var(--color-accent-soft); }
@media (min-width: 1100px) {
.man-3-ngan.co-phai { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.man-3-ngan.co-phai > .the { position: sticky; top: var(--sp-4); }
/* CẦN THÊM (D5 Pha 1 · 07/10/2026): khuôn 3 NGĂN THẬT cây · bảng · chi tiết.
`.co-phai` chỉ có 2 cột nên không đội lốt được; lớp mới KHÔNG sửa `.co-phai`.
Dùng lại điểm gãy 1100 đang có — KHÔNG thêm điểm gãy mới. Hẹp hơn ⇒ thoái hoá về 1 cột
(`minmax(0,1fr)` của `.man-3-ngan` nền): cây đưa vào `.loc-drawer` đã có, chi tiết rơi xuống dưới bảng. */
.man-3-ngan.co-trai { grid-template-columns: 240px minmax(0, 1fr) minmax(520px, 45vw); align-items: start; }
.man-3-ngan.co-trai > .the:last-child { position: sticky; top: var(--sp-4); }
}
/* CẦN THÊM (D5 2.4): ngăn cây phân nhánh — `.cay` khung · `.cay-nut` 1 mục · `.cay-nut.dang` mục đang chọn.
Cùng ngôn ngữ thị giác với `.muc-nav` (thanh bên) để cây và menu đọc như một hệ. */
.cay { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cay-nut {
display: flex; align-items: center; gap: var(--sp-2); width: 100%;
padding: 8px var(--sp-3); min-height: 36px; border-radius: var(--radius-sm);
font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
text-align: left; transition: background var(--chuyen), color var(--chuyen);
}
.cay-nut:hover { background: var(--color-surface-2); color: var(--color-fg); }
.cay-nut.dang { background: var(--color-accent-soft); color: var(--color-accent); }
/* ═══════════════════════════════════════════════════════════
4. CHỮ
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { color: var(--color-fg); }
h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; margin: 0 0 var(--sp-2); }
h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.2px; line-height: 1.35; margin: 0 0 var(--sp-3); }
h3 { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--sp-1); }
h4 { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 var(--sp-1); }
.hero h1 { font-size: clamp(28px, 4.4vw, 50px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.12; }
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--color-accent-ink, var(--color-accent)); }
.phu { color: var(--color-muted); font-size: var(--fs-md); line-height: 1.7; margin: 0 0 var(--sp-5); max-width: 70ch; }
/* NHẤN ĐOẠN QUAN TRỌNG trong lời giới thiệu (Sếp chốt 17/10/2026): người đọc quét 3 giây phải
thấy ngay "bí mật", "ai đọc", "ai trả lời". Cấu hình đánh dấu bằng **…** trong chuỗi `phu`. */
.phu .nhan-manh {
/* Nhấn bằng ĐẬM + MÀU THƯƠNG HIỆU, KHÔNG đóng hộp: cụm dài rớt dòng thì hộp bị vụn thành
2 viên thuốc rời (đo thật 17/10/2026). Chữ đậm + màu accent-ink đạt 6,15:1 trên trắng. */
font-weight: 700; color: var(--color-accent-ink, var(--color-accent));
}
.de { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6; }
.de-nhat { color: var(--color-muted-2); font-size: var(--fs-xs); }
.nhan-nhom {
font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.09em; color: var(--color-muted-2); margin: 0 0 var(--sp-2);
}
/* ═══════════════════════════════════════════════════════════
5. TẤM THẺ — 3 tầng bề mặt
═══════════════════════════════════════════════════════════ */
.the {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius); box-shadow: var(--shadow-sm);
overflow: hidden; position: relative;
}
.the + .the { margin-top: var(--sp-5); }
.the > .dau {
padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
background: var(--color-surface); display: flex; align-items: center; gap: var(--sp-3);
flex-wrap: wrap; min-height: 56px;
}
.the > .dau h2, .the > .dau h3 { margin: 0; }
.the > .than { padding: var(--sp-5); }
.the > .chan { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); background: var(--color-surface-2); }
.the.nen { background: var(--color-surface-2); }
/* Đợt 2 (15/10/2026) — thẻ BIỂU MẪU. Bản cũ: `style="max-width:840px"` mà KHÔNG căn giữa ⇒
thẻ nằm SÁT LỀ TRÁI khung 1760px, hở 920px bên phải, lệch trục so với mọi khối khác (lỗi
"canh lề" Sếp thấy). Nay: căn giữa + trần đọc được 1120px. Bên trong xếp 2–3 cột cho các
nhóm ô ngắn (loại phản hồi, thông tin liên hệ) nên trang ngắn lại mà dòng không quá dài. */
.the-doc { max-width: 1120px; margin-inline: auto; }
/* Đợt 2b (15/10/2026) — TỐI ƯU 2 CỘT. Trước: thẻ hở 2 bên 320px ở màn 1920, thân biểu mẫu
cao 1638px vì mọi thứ xếp dọc. Nay ≥1100px chia 2 cột (trái = phần người gửi viết, phải =
liên hệ + minh chứng; trái = hai câu hỏi, phải = cách điền), trang ngắn đi ~1/3 mà dòng
trong mỗi cột vẫn trong ngưỡng đọc được. Dưới 1100px tự về 1 cột như cũ. */
.luoi-2 { display: block; }
@media (min-width: 1100px) {
.luoi-2 { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
gap: var(--sp-7); align-items: start; }
.luoi-2 > .cot-2 { min-width: 0; }
.luoi-2 > .cot-2 > * + * { margin-top: var(--sp-5); }
}
.the.lom { background: var(--color-surface-3); box-shadow: none; }
.the-cach { margin-left: auto; }
@media (max-width: 768px) {
.the > .dau { padding: var(--sp-3) var(--sp-4); }
.the > .than { padding: var(--sp-4); }
.the + .the { margin-top: var(--sp-4); }
}
/* Đầu mục trang (dùng cho portal) */
.dau-trang {
display: flex; align-items: flex-start; gap: var(--sp-4);
flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.dau-trang .trai { min-width: 0; flex: 1 1 auto; }
.dau-trang .phai { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.dau-trang h1 { margin: 0 0 var(--sp-1); }
.dau-trang .duoi-td { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
/* ═══════════════════════════════════════════════════════════
6. NÚT
═══════════════════════════════════════════════════════════ */
/* VÙNG CHẠM: luật dự án đòi ≥44×44px; Design System v3.1 chỉ nâng tới 36px từ 769px.
Lấy 44px làm gốc, CHỈ hạ về 40px từ 769px (con trỏ chuột chính xác hơn ngón tay) —
vẫn cao hơn v3.1. Đây là CHỦ Ý: tiếp cận thắng mật độ hiển thị. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
font-weight: 600; font-size: var(--fs-sm); height: 44px; padding: 0 var(--sp-4);
border-radius: var(--radius-sm); border: 1px solid transparent;
transition: background var(--chuyen), border-color var(--chuyen), color var(--chuyen), box-shadow var(--chuyen);
white-space: nowrap; flex-shrink: 0; line-height: 1;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary { background: var(--color-accent); color: var(--color-on-primary, #fff); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-success { background: var(--color-green); color: #fff; }
.btn-success:hover:not(:disabled) { opacity: 0.92; }
.btn-nguy { background: var(--color-danger); color: #fff; }
.btn-nguy:hover:not(:disabled) { opacity: 0.92; }
.btn-outline { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-fg-soft); }
.btn-outline:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.btn-mem { background: var(--color-surface-3); color: var(--color-fg-soft); }
.btn-mem:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
/* Nút chữ: màu accent thường (2,88:1 trên nền trắng) KHÔNG đạt WCAG AA ⇒ dùng accent-ink (6,15:1). */
.btn-chu { color: var(--color-accent-ink, var(--color-accent)); padding: 0 var(--sp-2); height: 44px; }
.btn-chu:hover:not(:disabled) { background: var(--color-accent-soft); }
.btn-lg { height: 48px; font-size: var(--fs-base); padding: 0 var(--sp-6); }
.btn-sm { height: 40px; font-size: var(--fs-sm); padding: 0 var(--sp-3); border-radius: var(--radius-sm); }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 40px; }
/* Thanh công cụ chuẩn (D5 Pha 2): trong thanh, ô tìm/ô lọc cao ĐÚNG bằng nút (40px)
— trước đây 44px so với nút 40px nên hàng lệch nhau 2px trên mọi màn. */
@media (min-width: 769px) {
.btn { height: 40px; } .btn-chu { height: 40px; }
.thanh-cu input[type=search], .thanh-cu input[type=text], .thanh-cu select, .thanh-cu .loc-chon select { height: 40px; min-height: 40px; }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.hang { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.hang-cach { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: space-between; }
@media (max-width: 560px) { .hang .btn { flex: 1 1 auto; } }
/* ═══════════════════════════════════════════════════════════
7. NHÃN TRẠNG THÁI
═══════════════════════════════════════════════════════════ */
.badge {
display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs);
font-weight: 600; padding: 3px var(--sp-2); border-radius: var(--radius-full);
line-height: 1.35; white-space: nowrap; border: 1px solid transparent;
}
.badge .cham { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-purple { background: var(--color-accent-soft); color: var(--color-accent); }
.badge-green { background: var(--color-success-soft); color: #047857; }
.badge-gold { background: var(--color-gold-soft); color: #8a6a1f; }
.badge-cyan { background: var(--color-cyan-soft); color: #0369a1; }
.badge-yellow { background: var(--color-warning-soft); color: #92400e; }
.badge-info { background: var(--color-info-soft); color: #1d4ed8; }
.badge-danger { background: var(--color-danger-soft); color: #b91c1c; }
.badge-grey { background: var(--color-surface-3); color: var(--color-muted); }
.badge-vien { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-fg-soft); }
/* ═══════════════════════════════════════════════════════════
8. Ô SỐ LIỆU
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
8b. NGĂN KÉO CHI TIẾT MỘT DÒNG (18/10/2026)
Vì sao cần: ô trong bảng phải vắn tắt mới đọc được, nhưng người dùng vẫn cần xem ĐẦY ĐỦ
một hạng mục (email đã gửi cho ai, mã thiết bị đầy đủ, giá trị trước/sau của một thay đổi).
Trước đây mỗi màn tự dựng một kiểu — 3 kiểu lệch nhau. Nay MỘT khuôn: nhãn bên trái,
giá trị bên phải, xuống dòng khi dài. Dùng trong ngăn kéo `moNganKeo`.
═══════════════════════════════════════════════════════════ */
.ct-ds { display: flex; flex-direction: column; gap: 0; margin: 0 0 var(--sp-3); }
.ct-dong {
display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--sp-3);
padding: 9px 0; border-bottom: 1px solid var(--color-border);
font-size: var(--fs-sm); align-items: start;
}
.ct-dong:last-child { border-bottom: 0; }
.ct-nhan { color: var(--color-muted); font-weight: 600; line-height: 1.4; }
.ct-gia { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.ct-gia code { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
.ct-dong { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.ct-nhan { font-size: var(--fs-xs); }
}
.ct-khoi {
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface-2); padding: var(--sp-3); margin-bottom: var(--sp-3);
font-size: var(--fs-sm); line-height: 1.55; overflow-wrap: anywhere;
}
.ct-khoi > h3 { font-size: var(--fs-sm); margin: 0 0 6px; }
.o_cam {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
}
.o_cam .ten { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 500; order: -1; }
.o_cam .so {
font-size: var(--fs-2xl); font-weight: 800; color: var(--color-fg);
line-height: 1.1; letter-spacing: -0.8px;
}
.o_cam .so.nhan-manh { color: var(--color-accent); }
.o_cam .so.canh-bao { color: var(--color-danger); }
.o_cam .so.tot { color: #047857; }
.o_cam .xu-huong { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; }
/* Tên lớp "hướng" có TIỀN TỐ `xh-`: `.len`/`.xuong` trần trùng lớp bố cục của
iai-ds.css (`.xuong` = khung lưới `min-height:100dvh`) ⇒ thẻ KPI bị kéo cao 860px,
cả màn Báo cáo dãn 3.618px (đo thật 19/10/2026). Đổi tên là hết, không đụng iai-ds.css. */
.xu-huong.xh-len { color: #047857; } .xu-huong.xh-xuong { color: #b91c1c; }
.xu-huong.xh-phang { color: var(--color-muted-2); }
/* 🔴 MOBILE (≤560px): 4 thẻ số liệu xếp 1 cột thành 4 khối cao nối nhau, mỗi thẻ chỉ có
1 nhãn + 1 số + 1 dòng xu hướng ⇒ phải cuộn gần hết màn mới thấy đủ 4 con số.
Đo 17/10/2026 (390px): 4 thẻ ăn 470px chiều cao. Chia 2 cột, thu padding, giảm cỡ số 1 bậc
để vẫn đọc rõ mà không cắt chữ. `.grid-2` GIỮ 1 cột: nó bọc biểu đồ/bảng lớn, chia đôi là hỏng.
⚠️ Khối này PHẢI nằm SAU các luật `.o_cam` ở trên: cùng độ ưu tiên nên luật sau thắng
(bài học 17/10/2026: khai media trước luật gốc ⇒ media bị vô hiệu, không báo lỗi gì). */
@media (max-width: 560px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.o_cam { padding: var(--sp-3) var(--sp-3); }
.o_cam .ten { font-size: var(--fs-xs); line-height: 1.25; }
.o_cam .so { font-size: var(--fs-xl); letter-spacing: -0.4px; }
.o_cam .xu-huong { font-size: 11px; line-height: 1.3; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════
9. BẢNG — kèm công cụ vận hành thật
═══════════════════════════════════════════════════════════ */
.thanh-cu {
display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
padding: var(--sp-3) var(--sp-4); background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.o-tim { position: relative; flex: 1 1 220px; min-width: 0; max-width: 320px; }
.o-tim input { padding-left: 36px; height: 44px; }
/* 🔴 Cùng luật nhưng ĐỘ ƯU TIÊN CAO HƠN (0,1,2) so với luật chung `input[type=search]` khai ở
DƯỚI trong tệp: trước 17/10/2026 luật chung thắng ⇒ padding-left về 12px ⇒ kính lúp ĐÈ chữ
đầu tiên của ô tìm (đo DOM thật trên mobile: kính hết x=76, chữ bắt đầu x=61). */
.o-tim input[type=search], .o-tim input[type=text] { padding-left: 36px; }
.o-tim .kinh {
position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
width: 15px; height: 15px; color: var(--color-muted-2); pointer-events: none;
}
.loc-chon { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; min-width: 0; }
.loc-chon select { height: 44px; padding: 0 30px 0 var(--sp-3); font-size: var(--fs-sm); width: auto; min-width: 130px; }
.thanh-cu .dem { margin-left: auto; color: var(--color-muted); font-size: var(--fs-sm); white-space: nowrap; }
/* ── THANH CÔNG CỤ CHUẨN DÙNG CHUNG (D5 Pha 2 · 07/10/2026) ────────────────
KHUÔN DUY NHẤT cho tầng 2 của MỌI màn danh sách — CẤM đặt tên lớp mới:
…ô tìm…
…ô lọc…
…chip lọc đang bật…12 kết quả
Luật đẩy nút "+" sang phải là CẦN: `.o-tim` có `flex: 1 1 220px` nhưng kèm trần
`max-width` nên KHÔNG nở hết chỗ trống — đo DOM thật 1920/1366, khuôn có ô tìm
+ lọc + nút mà KHÔNG có `.dem`: khe hở phải 1065.6px / 512px nếu thiếu luật;
có luật ⇒ 0px. `.dem` vẫn giữ `margin-left: auto` (dòng 331) nên khuôn CÓ `.dem`
cũng ra 0px, không cần luật riêng.
Kiểm hồi quy màn "Sản phẩm & khoá" (tự chèn `
` giữa các
nút, web/portal/index.html:1411): cao thanh 160.8px ở CẢ hai trạng thái có/không
luật ⇒ luật này TRUNG TÍNH về số hàng, không đẩy thêm hàng.
Sàn chiều cao CHỈ áp cho thanh CÓ ô tìm: hàng chip thuần cũng dùng chung lớp
.thanh-cu (web/portal/index.html:547,940) nên không được kéo cao theo.
Không lặp lại `row-gap`: `.thanh-cu` đã có `gap: var(--sp-2)` (đo thật: 8px). */
.thanh-cu:has(.o-tim) { min-height: calc(var(--sp-3) * 2 + 40px); }
.thanh-cu > .btn:last-child, .thanh-cu > .hang:last-child { margin-left: auto; }
.thanh-cu .dem ~ .btn:last-child, .thanh-cu .dem ~ .hang:last-child { margin-left: 0; }
@media (max-width: 768px) {
.thanh-cu { padding: var(--sp-3); }
/* Vùng chạm ≤768 luật hệ là 44px: nút .btn-sm trong thanh phải cao bằng ô tìm
(nền .btn-sm = 40px ⇒ lệch 4px). Chỉ áp TRONG thanh, không đổi nghĩa .btn-sm. */
.thanh-cu .btn-sm { height: 44px; }
.o-tim { max-width: none; flex: 1 1 100%; }
.loc-chon { width: 100%; }
.loc-chon select { flex: 1 1 auto; min-width: 0; }
.thanh-cu .dem { margin-left: 0; }
}
/* Thanh thao tác hàng loạt — chỉ hiện khi có dòng được chọn */
.thanh-hang-loat {
display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
padding: var(--sp-2) var(--sp-4); background: var(--color-accent-soft);
border-bottom: 1px solid var(--color-accent-line); font-size: var(--fs-sm); font-weight: 600;
color: var(--color-accent);
}
.thanh-hang-loat .hang { margin-left: auto; }
.khung_bang { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bang { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.bang th, .bang td {
text-align: left; padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--color-border); vertical-align: middle;
}
.bang th {
background: var(--color-surface-2); color: var(--color-muted);
font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
letter-spacing: 0.06em; white-space: nowrap; position: sticky; top: 0; z-index: 2;
border-bottom: 1px solid var(--color-border-strong);
}
.bang th.sap-xep { cursor: pointer; user-select: none; }
.bang th.sap-xep:hover { color: var(--color-accent); }
.bang th .mui {
display: inline-block; margin-left: var(--sp-1); opacity: 0.35;
font-size: 9px; vertical-align: middle;
}
.bang th[aria-sort="ascending"] .mui, .bang th[aria-sort="descending"] .mui { opacity: 1; color: var(--color-accent); }
.bang tbody tr { height: 56px; }
.bang tbody tr:last-child td { border-bottom: none; }
.bang tbody tr:hover td { background: var(--color-accent-soft); }
.bang tbody tr[data-ma],
/* Bảng Báo cáo: dòng bấm mở phiếu. Thiếu 2 selector này thì bấm được mà không có dấu hiệu
(con trỏ + nền), người dùng không biết bấm được — Sếp soi 18/10/2026. */
.bang tbody tr[data-bc-mo],
.bang tbody tr[data-bcld-mo] { cursor: pointer; }
.bang tbody tr[data-bc-mo]:hover td,
.bang tbody tr[data-bcld-mo]:hover td { background: var(--color-surface-2); }
.bang tbody tr[data-ma]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.bang tbody tr.dang-chon td { background: var(--color-accent-soft); }
.bang .cot-chon { width: 44px; padding-right: 0; }
.bang .cot-so { text-align: right; white-space: nowrap; }
.bang .o-chinh { font-weight: 600; color: var(--color-fg); }
.bang .phu-trong-o { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bang td .de { display: block; }
/* Mốc bề rộng theo ĐÚNG 3 tầng của Design System v3.1: <769px · 769–1099px · ≥1100px.
Bản trước thu thanh bên ở 1024px ⇒ dải 1024–1099px (máy tính bảng theo chuẩn) hiện
layout máy tính để bàn với thanh bên 258px — lệch chuẩn. Nay khớp 1100. */
@media (max-width: 1099px) { .bang thead th { position: static; } }
@media (max-width: 768px) {
.bang { font-size: var(--fs-sm); }
.bang th, .bang td { padding: var(--sp-3); }
.bang tbody tr { height: 48px; }
}
/* ĐIỆN THOẠI (≤640px): cột phụ ẩn khỏi hàng, giá trị vẫn còn trong nút "Chi tiết".
Nguyên nhân gốc: 7 cột nằm trong khung 348px ⇒ hàng cao 227px, mỗi chữ xuống 1 dòng.
Ẩn cột chỉ là XẾP LẠI — dữ liệu đầy đủ vẫn ở ngăn kéo Chi tiết, không mất thông tin. */
@media (max-width: 640px) {
.bang .an-hep { display: none; }
.chi-hep { display: inline; }
/* Nút thao tác trong ô: cấm gãy hàng dọc (chữ "Người nhận" từng vỡ thành 2 dòng). */
.hang-nut { white-space: nowrap; }
.hang-nut .btn { white-space: nowrap; }
.bang th.an-hep, .bang td.an-hep { display: none; }
/* Nút trong ô cuối ("Chi tiết") từng vỡ thành "Chi / tiết" ở 390px. */
.bang td.cot .btn, .bang .cot .btn { white-space: nowrap; }
/* Ô chứa mốc thời gian: cấm bẻ giữa số ("20/10/202" + "6 09:12"). */
.bang .ngay-dong, .bang .de.ngay-dong { white-space: nowrap; }
/* Giờ xuống dòng dưới ngày — xuống ĐÚNG chỗ thay vì bẻ giữa số năm. */
.bang .gio { display: block; }
/* Cấm bẻ GIỮA TỪ ("Nguy/ễn") — chỉ ngắt ở khoảng trắng; từ dài hơn ô mới được bẻ. */
.bang th, .bang td { word-break: normal; overflow-wrap: break-word; }
}
/* Màn rộng: `.chi-hep` đã nằm trong cột thật ⇒ giấu bản chép trong ô Nội dung. */
@media (min-width: 641px) { .chi-hep { display: none; } }
/* ═══════════════════════════════════════════════════════════
10. Ô NHẬP
═══════════════════════════════════════════════════════════ */
.truong { margin-bottom: var(--sp-5); }
.truong:last-child { margin-bottom: 0; }
label { display: block; font-weight: 600; margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--color-fg-soft); }
label .bb { color: var(--color-danger); margin-left: 2px; }
label .de { font-weight: 400; display: inline; }
/* 🔴 Thứ tự trong tệp này: luật `.o-tim input` ở TRÊN, luật chung `input[type=search]` ở DƯỚI
⇒ cùng độ ưu tiên (0,1,1) nên luật DƯỚI thắng, `padding-left:36px` bị ghi đè thành 12px.
Đo DOM thật 17/10/2026 (390px): kính lúp kết thúc ở x=76, chữ bắt đầu ở x=61 ⇒ icon ĐÈ chữ
đầu tiên của ô tìm trên mobile. Vá bằng ĐỘ ƯU TIÊN (0,1,2) để không phụ thuộc thứ tự khai. */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=url], select, textarea {
width: 100%; padding: 10px var(--sp-3); border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-base);
background: var(--color-surface); color: var(--color-fg); min-height: 44px;
transition: border-color var(--chuyen), box-shadow var(--chuyen);
}
input::placeholder, textarea::placeholder { color: var(--color-muted-2); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-glow);
}
input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-3); color: var(--color-muted-2); cursor: not-allowed; }
select {
cursor: pointer; padding-right: 34px; appearance: none; -webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
textarea { min-height: 118px; resize: vertical; line-height: 1.65; }
input[type=file] { padding: var(--sp-3); border-style: dashed; background: var(--color-surface-2); cursor: pointer; font-size: var(--fs-sm); width: 100%; max-width: 100%; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0; }
/* Ô tích/ô chọn nằm trong nhãn bấm được: nới vùng chạm của NHÃN lên ≥44px mà không đổi hình. */
.o-kiem { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); min-height: 44px; cursor: pointer; }
.goi_y { font-size: var(--fs-xs); color: var(--color-muted); margin: var(--sp-2) 0 0; line-height: 1.6; }
/* Khối LỢI ÍCH ở câu hỏi định danh (MỤC 6, 15/10/2026): hộp nhấn NHẸ — nội dung là lợi ích của
việc để lại thông tin, nên dùng tông dịu của hệ, KHÔNG dùng tông đỏ của `.loi` (tông đỏ là
dành cho việc chưa làm được, dùng ở đây là hù dọa người gửi). */
.the-loi-ich {
background: var(--color-accent-soft); border: 1px solid var(--color-accent-line);
border-radius: var(--radius-sm); padding: var(--sp-4); margin-top: var(--sp-3);
font-size: var(--fs-sm); line-height: 1.65;
}
.the-loi-ich .nhan-manh { display: block; margin-bottom: var(--sp-1); }
/* BA Ô THÔNG TIN LIÊN HỆ xếp 3 cột (Sếp 17/10/2026): nhãn mỗi ô dài ngắn khác nhau nên ô nhập
bị so le. Dùng SUBGRID: mỗi ô là lưới con 3 hàng (nhãn · ô nhập · phần dưới), cả 3 ô dùng chung
hàng của lưới cha ⇒ nhãn cao bao nhiêu thì ô nhập vẫn nằm CHUNG một đường kẻ ngang.
Trình duyệt không có subgrid thì rơi về bố cục cũ (không vỡ gì, chỉ là không thẳng). */
@media (min-width: 900px) {
/* Cột: KHÔNG ép 3 cột khi vùng chứa hẹp (khối này nằm trong cột phải ~430px ⇒ 3 cột chỉ còn
139px, nhãn gãy 3 dòng, placeholder bị cắt). auto-fit + sàn 190px ⇒ hẹp ra 2 cột, rộng ra 3. */
.grid-3.nhom-tt { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
grid-template-rows: auto auto auto; row-gap: 0; align-items: start; }
.nhom-tt > .truong { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-bottom: 0; }
.nhom-tt > .truong > label { align-self: end; }
/* Email xuống hàng riêng và chiếm TRỌN bề ngang: địa chỉ dài cần chỗ, và 3 ô lẻ hàng 2 cột
thì ô thứ ba đứng trơ một mình trông như lỗi. */
.nhom-tt > .truong:nth-child(3) { grid-column: 1 / -1; }
}
.cot-nhap { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 769px) { .cot-nhap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ═══════════════════════════════════════════════════════════
11. TRẠNG THÁI RỖNG / CHỜ / LỖI (thay vì hiện lỗi hệ thống ra UI)
═══════════════════════════════════════════════════════════ */
.trong {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--sp-2); padding: var(--sp-9) var(--sp-5); text-align: center;
}
.trong .bieu {
width: 40px; height: 40px; color: var(--color-muted-2); opacity: 0.6; margin-bottom: var(--sp-1);
}
.trong .td { font-weight: 700; font-size: var(--fs-md); color: var(--color-fg-soft); }
.trong .mt { color: var(--color-muted); font-size: var(--fs-sm); max-width: 46ch; }
.trong .hang { margin-top: var(--sp-3); }
@media (max-width: 768px) { .trong { padding: var(--sp-7) var(--sp-4); } }
.cho { border-radius: var(--radius-sm); background: var(--color-surface-3); position: relative; overflow: hidden; }
.cho::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
animation: truot 1.4s infinite;
}
@keyframes truot { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cho-dong { height: 14px; margin-bottom: var(--sp-2); }
.loi {
background: var(--color-danger-soft); border: 1px solid #fecaca; border-left: 3px solid var(--color-danger);
border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); color: #991b1b;
margin: var(--sp-4) 0; font-size: var(--fs-sm); line-height: 1.6;
}
.loi ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.loi strong { display: block; margin-bottom: var(--sp-1); }
.loi-truong { color: var(--color-danger); font-size: var(--fs-xs); font-weight: 600; margin: var(--sp-1) 0 0; }
.lech {
background: var(--color-warning-soft); border: 1px solid #fde68a; border-left: 3px solid var(--color-warning);
border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
}
.lech .vi { font-weight: 600; color: #92400e; margin: 0 0 var(--sp-1); font-size: var(--fs-sm); line-height: 1.6; }
.lech .dl { font-size: var(--fs-xs); color: #92400e; margin: 0; }
.hop_ket { background: var(--color-success-soft); border: 1px solid #a7f3d0; border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-4) 0 0; }
/* Băng báo trạng thái phiên (chỉ dùng cho điều hướng gọn, KHÔNG hiện lỗi kỹ thuật) */
.bang-nhac {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
background: var(--color-surface-3); color: var(--color-fg-soft);
font-size: var(--fs-sm); border: 1px solid var(--color-border);
}
.bang-nhac.cam { background: var(--color-warning-soft); border-color: #fde68a; color: #92400e; }
.bang-nhac b, .bang-nhac .nhan-manh { font-weight: 700; }
/* ═══════════════════════════════════════════════════════════
12. KHUNG PORTAL (thanh bên · thanh trên · vùng cuộn)
═══════════════════════════════════════════════════════════ */
.portal { display: grid; grid-template-columns: var(--rong-side) minmax(0, 1fr); min-height: 100vh; min-width: 0; }
.portal-side {
background: var(--color-surface); border-right: 1px solid var(--color-border);
display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
overflow-y: auto; z-index: 40;
}
.portal-side .dau-side {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
min-height: var(--cao-top); flex-shrink: 0;
}
.portal-side .nhom { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
.portal-side .nhan-nhom { padding-inline: var(--sp-2); }
.muc-nav {
display: flex; align-items: center; gap: var(--sp-3); width: 100%;
padding: 9px var(--sp-3); min-height: 44px; border-radius: var(--radius-sm); margin-bottom: 2px;
font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
position: relative; transition: background var(--chuyen), color var(--chuyen);
text-align: left;
}
.muc-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.muc-nav .dem-so {
margin-left: auto; font-size: var(--fs-xs); font-weight: 700;
background: var(--color-surface-3); color: var(--color-muted);
border-radius: var(--radius-full); padding: 1px 7px; min-width: 20px; text-align: center;
}
.muc-nav:hover { background: var(--color-surface-2); color: var(--color-fg); }
.muc-nav.dang { background: var(--color-accent-soft); color: var(--color-accent); }
.muc-nav.dang::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--color-accent);
}
.muc-nav.dang .dem-so { background: var(--color-surface); color: var(--color-accent); }
.portal-side .cuoi-side { margin-top: auto; padding: var(--sp-4) var(--sp-3); border-top: 1px solid var(--color-border); }
.portal-main { min-width: 0; display: flex; flex-direction: column; }
.portal-top {
position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border);
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-6); min-height: var(--cao-top);
}
.portal-top .duong-dan { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-muted); min-width: 0; }
.portal-top .duong-dan .tach { opacity: 0.5; }
.portal-top .duong-dan .hien-tai { color: var(--color-fg); font-weight: 600; }
.portal-top .phai { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* VÁ (26/09/2026): thiếu `width: 100%` ⇒ trên `.portal-main` (flex-direction: column)
`margin-inline: auto` khiến khối CO THEO NỘI DUNG (auto margin ở trục ngang chặn giãn),
ở 1920px chỉ còn 687px và bỏ trống 2 bên. Thêm `width: 100%` để giãn hết rồi `max-width` mới cắt trần. */
/* VÁ (07/10/2026 · D5 Pha 1): trần cứng 1560px làm màn 1920/2560 PHÍ bề rộng.
Nới trần theo bề rộng khả dụng bằng `max()` — thuần CSS, KHÔNG JS đo rồi gán style,
KHÔNG thêm điểm gãy (dưới 1818px thì `100vw − 258` < 1560 nên trần vẫn là 1560px). */
.portal-than { padding: var(--sp-6); flex: 1 1 auto; width: 100%; max-width: max(1560px, calc(100vw - var(--rong-side))); margin-inline: auto; }
@media (max-width: 1099px) { .portal-than { padding: var(--sp-5); } }
@media (max-width: 768px) { .portal-than { padding: var(--sp-4); } .portal-top { padding: var(--sp-3) var(--sp-4); } }
/* ── THANH BÊN ĐIỀU HƯỚNG THEO 3 CẤP MÀN HÌNH (Sếp duyệt 21/10/2026) ──
1. Màn rộng (≥1100px): thanh bên 258px đầy đủ chữ + nhóm, thường trực bên trái.
2. Tablet ngang (900px–1099px): thu gọn thành dải icon 68px thường trực (1 chạm đổi màn thay vì 2, không cần hamburger).
3. Mobile & tablet dọc (<900px): thanh bên thành ngăn kéo trượt, ẩn sau nút mở thanh bên. */
.nut-mo-side { display: none; }
@media (min-width: 900px) and (max-width: 1099px) {
.portal { grid-template-columns: 68px minmax(0, 1fr); }
.nut-mo-side { display: none !important; }
.portal-side {
position: sticky; top: 0; left: 0; height: 100vh; width: 68px;
transform: none !important; box-shadow: none; z-index: 40;
overflow-x: hidden; padding: 0;
}
.portal-side .dau-side {
padding: var(--sp-3) var(--sp-2); justify-content: center;
}
.portal-side .dau-side > div > div:nth-child(2),
.portal-side #nut-dong-side { display: none !important; }
.portal-side .nhan-nhom { display: none !important; }
.portal-side .muc-nav {
justify-content: center; padding: 10px 0; width: 44px; margin: 4px auto;
position: relative;
}
.portal-side .muc-nav span:not(.dem-so) { display: none !important; }
.portal-side .muc-nav .dem-so {
position: absolute; top: 2px; right: 2px; padding: 1px 4px;
font-size: 10px; line-height: 1; min-width: 14px;
}
.portal-side .cuoi-side { padding: var(--sp-2); border-top: 1px solid var(--color-border); }
.portal-side .o_nguoi { justify-content: center; padding: 4px 0; }
.portal-side .o_nguoi > div { display: none !important; }
.scrim { display: none !important; }
}
@media (max-width: 899px) {
.portal { grid-template-columns: minmax(0, 1fr); }
.nut-mo-side { display: inline-flex; }
.portal-side {
position: fixed; top: 0; left: 0; height: 100vh; width: min(300px, 84vw);
transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-xl); z-index: 60;
}
.portal-side.mo { transform: translateX(0); }
.scrim {
position: fixed; inset: 0; background: rgba(27, 24, 58, 0.4); z-index: 55;
opacity: 0; pointer-events: none; transition: opacity 0.24s;
}
.scrim.mo { opacity: 1; pointer-events: auto; }
}
@media (min-width: 900px) { .scrim { display: none; } }
/* ═══════════════════════════════════════════════════════════
13. ĐIỀU HƯỚNG CÔNG KHAI (thanh trên landing)
═══════════════════════════════════════════════════════════ */
.topnav {
position: sticky; top: 0; z-index: 50; width: 100%;
background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
}
/* Đợt 1 — cùng trần với khung nội dung (lỗi L7 phần a): thanh trên hở 600px giữa ở màn rộng. */
.topnav-inner {
max-width: var(--rong-trang); margin-inline: auto; padding: var(--sp-3) var(--sp-5);
display: flex; align-items: center; gap: var(--sp-5); min-height: var(--cao-top);
}
.logo-wrapper { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.logo-dot {
width: 30px; height: 30px; border-radius: 9px; background: var(--color-accent);
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px;
box-shadow: 0 2px 8px rgba(76, 29, 149, 0.3); flex-shrink: 0;
}
/* Logo THẬT (ảnh của trường): BỎ KHUNG — nền, bo góc, bóng đều về 0 để logo đứng trơn,
thanh thoát. Khung chỉ dành cho logo chữ 1–2 ký tự. tien-ich.js gắn lớp .logo-anh. */
.logo-dot.logo-anh { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.logo-dot.logo-anh img { height: 34px; width: auto; }
.logo-text { font-weight: 800; color: var(--color-fg); font-size: var(--fs-md); letter-spacing: -0.3px; white-space: nowrap; }
/* Màn hẹp: tên trường dài + cụm nút ⇒ chữ bị bóp còn 1 ký tự mỗi dòng (đo thật 390px). Cho phép
co lại nhưng KHÔNG bẻ từng chữ; hết chỗ thì cắt bằng dấu ba chấm. */
.logo-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.logo-text em { font-family: var(--font-serif); font-style: italic; color: var(--color-accent-ink, var(--color-accent)); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); white-space: nowrap;
/* W4.8: đo 19/10 thấy 38px — dưới chuẩn chạm 44px. */
min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.nav-links a.dang { color: var(--color-accent); background: var(--color-accent-soft); }
.topnav .phai { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 768px) {
.topnav-inner { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); flex-wrap: wrap; }
/* W4.8 (D-06): TRƯỚC ĐÂY ẨN HẲN ⇒ điện thoại không có lối vào kênh nào, phải gõ tham số tay.
Nay thành DẢI CUỘN NGANG dưới thanh trên: vẫn 1 hàng, không đẩy logo/nút xuống, chạm được. */
.nav-links {
display: flex; order: 10; width: 100%; overflow-x: auto;
-webkit-overflow-scrolling: touch; padding-block: 2px;
border-top: 1px solid var(--color-line); margin-top: 2px;
}
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* ── ĐIỆN THOẠI: THANH TRÊN GỌN 1 HÀNG + Ô CHỌN GỌN + NEO KHÔNG BỊ CHE (Sếp 15/10/2026) ──
Đo TRƯỚC khi sửa (390px): thanh trên cao **155px / 3 HÀNG** — (1) logo + tên trường,
(2) ô chọn ngôn ngữ chiếm TRỌN một hàng (rộng 358px), (3) nút "Gửi phản hồi".
Gốc: `.loc-chon select` có `min-width: 130px`, nhãn "Tiếng Việt" dài ⇒ không chen được
vào hàng logo, `.phai` buộc phải xuống dòng (bản vá sáng nay chữa ca ĐÈ NHAU ở 240–430px
bằng cách cho xuống dòng: hết đè nhưng thành 3 hàng).
Chữa ở GỐC LẦN NÀY: màn ≤768px BỎ `