/* ⛔⛔ ĐỔI TÊN LỚP 03/09/2026 — TÔI ĐẶT TRÙNG TÊN VỚI chat.css. `.tk-o` bên chat.css là **Ô TÌM KIẾM** (`position: sticky; display: flex`), `.tk-hang` cũng đã có ở đó. Cả hai tệp CÙNG được nạp trên một trang ⇒ lớp của họ ăn vào biểu mẫu của tôi: nhãn nằm NGANG HÀNG với ô nhập thay vì ở trên, và ô bị dính `sticky`. ⛔ Tôi đã quét trùng NHƯNG CHỈ QUÉT hop.css — đúng lớp thước hỏng 'khoanh sai phạm vi'. Phải quét CẢ HAI tệp vì trang nạp cả hai. ⇒ Lớp của tôi đổi thành `.dk-*` và `.tk-dong`. ⛔ ĐỪNG đặt lớp mới bắt đầu bằng `.tk-` nữa nếu chưa quét chat.css. */ /* ═══════════════════════════════════════════════════════════════════════════ STARVIEW · TRANG HỌP — BẢNG MÀU & BỐ CỤC ─────────────────────────────────────────────────────────────────────────── Token màu chép ĐÚNG từ nguồn chân lý của app StarMeet (lib/design/themes.dart — 6 chủ đề: office · game · relax · holiday · kitty · highContrast). §2.1 quy ước icon: màu LẤY TỪ TOKEN, cấm chép hex vào chỗ dùng. Đổi chủ đề = đổi lớp trên , không sửa tay chỗ nào. §4.2 handoff — điều bắt buộc, không thương lượng: · chế độ tối là MẶC ĐỊNH (họp thường trong phòng thiếu sáng) · KHÔNG trượt ngang ở 360 · 768 · 1280 · 1920 px · tương phản đạt WCAG AA · chạy được Safari/iPhone ⇒ dùng 100dvh + safe-area-inset ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────── chủ đề (mặc định: office) ────────────────────── */ :root, :root.sv-office { --navy: #1F3050; --navy-dark: #16233B; --navy-deep: #0E1728; --gold: #C9A227; --gold-soft: #E3C766; --surface: #1F3050; --surface-raised: #29405F; /* ⭐⭐ 16/09 anh Triệu: *"bất cứ nút nào đang màu hồng nhạt thì phải đổi hết sang màu vàng, thống nhất cho cả nền tảng"*. ⭐ ĐO TRƯỚC KHI ĐỔI (đúng cảnh báo phiên Mobile). Kết quả trên WEB: chỉ 4 nút mang màu ấy — `cMic`/`cCam` khi TẮT · `cLeave2` (rời phòng) · `hGiaiTan` (giải tán phòng). CẢ BỐN đều là *thiết bị đang tắt* hoặc *việc ⛔ không hồi lại được*. ⇒ Web ⛔ KHÔNG có nút chỉ báo nào hồng như nhánh Mobile, nên ⛔ KHÔNG có nút nào để tô vàng. ⛔⛔ VÀ TÔ VÀNG BỐN NÚT ẤY LÀ SAI: vàng là màu nút THƯỜNG của hệ thống; tô vàng nút Rời phòng / Giải tán phòng là **xoá mất dấu hiệu cảnh báo duy nhất** trước một thao tác ⛔ không rút lại được. ⭐ Bệnh THẬT là màu ấy **quá ngả hồng** — và đo ra nó còn **RỚT TƯƠNG PHẢN**: chữ trắng trên `#E05A4E` chỉ đạt **3,66** (chuẩn đòi 4,5). ⇒ Đổi sang ĐỎ GẠCH `#C62828`: sắc trung tính (lục = lam, hết ngả hồng) và tương phản chữ trắng lên **5,62**. ⛔⛔ PHẢI TÁCH HAI VAI, nếu không là hỏng: `--danger` còn được dùng làm **MÀU CHỮ** trên nền tối (hộp lỗi, chip, biểu tượng). Nền đậm hơn thì chữ càng tối ⇒ càng khó đọc (đo: `#E05A4E` trên `--surface-raised` chỉ **2,88**). ⇒ `--danger-chu` riêng cho vai CHỮ: `#FF9A8F`, thấp nhất **5,15** trên cả bốn nền tối. ⛔ Các chủ đề khác ⛔ KHÔNG khai `--danger-chu` ⇒ tự rơi về `--danger`, tức GIỮ NGUYÊN hành vi cũ. ⛔ Đừng "dọn cho gọn" bằng cách bỏ bản lùi ấy. */ --success: #3DBE7B; --warning: #E0A93E; --danger: #C62828; --info: #4A86E8; --danger-chu: #FF9A8F; --ink: #F2F4F8; --ink-2: rgba(242,244,248,.72); --ink-3: rgba(242,244,248,.62); --line: rgba(242,244,248,.12); --on-accent: #101724; /* ═══ THANG CHỮ — 02/09/2026 ═══ Anh Triệu chê "font ⛔ không đều". Đo được: web rải **19 cỡ rời rạc** trong khi app có **7 kiểu token hoá một chỗ** (`SVType`). ⛔ Không có thang thì mỗi lần thêm giao diện là thêm một cỡ mới, và ⛔ không ai biết cỡ nào là "đúng" — đó là gốc của cảm giác lộn xộn, ⛔ không phải do một chỗ nào sai. ⇒ Khai thang theo ĐÚNG app. Đêm nay mới bỏ được hai cỡ nhỏ nhất và các nấc nửa pixel; phần còn lại phải đổi dần và NHÌN từng màn, ⛔ không snap hàng loạt lúc ⛔ không ai xem — snap 160 chỗ trong đêm là cách làm vỡ bố cục. ⛔ MÃ MỚI DÙNG TOKEN, ⛔ đừng viết số. */ --fs-caption: 12px; /* app SVType.caption */ --fs-body: 15px; /* app SVType.body */ --fs-button: 16px; /* app SVType.button */ --fs-h2: 18px; /* app SVType.h2 */ --fs-h1: 20px; /* app SVType.h1 */ --fs-brand: 28px; /* app SVType.brand */ --fs-display: 34px; /* app SVType.display */ } /* ═══════════════ CHỦ ĐỀ "SÁNG" — 02/09/2026 ═══════════════ App mobile ĐÃ có chủ đề sáng; web thì ⛔ chưa. Nhưng ⛔ KHÔNG chép nguyên bảng màu của app sang: đo lại bản app thì **icon vàng thương hiệu trên nền sáng chỉ được 2,17:1** — dưới xa ngưỡng 3:1 của WCAG cho đồ hoạ, tức là trên máy để ngoài sáng gần như ⛔ KHÔNG nhìn thấy. Đo lại chính con vàng ấy (#C9A227) trên nền sáng của web: **2,28:1** — cùng một cái bẫy, và nó bẫy được vì màu thương hiệu vốn được chọn cho nền TỐI. ⇒ Ở chủ đề sáng, sắc vàng phải ĐẬM lại. Mọi con số dưới đây đã đo bằng công thức WCAG 2.1 trên nền KHẮC NGHIỆT NHẤT (nền trang #E9EDF3): --ink 13,36:1 · --gold 5,04:1 · --gold-soft 5,11:1 · --success 4,54:1 --warning 5,00:1 · --danger 5,59:1 · --info 5,20:1 · chữ trên vàng 5,92:1 ⇒ mọi cặp đều ĐẠT 4,5:1 (ngưỡng CHỮ), ⛔ không chỉ 3:1 (ngưỡng icon). ⚠ BẪY NGƯỢC ĐỜI ĐÃ TRÁNH: trên nền tối, "soft" nghĩa là SÁNG HƠN. Bê nguyên nghĩa đó sang nền sáng thì "soft" thành NHẠT HƠN ⇒ tụt thẳng xuống dưới ngưỡng. Nên ở đây `--gold-soft` phân biệt bằng **độ bão hoà** (#75603C, ám nâu, dịu mắt) chứ ⛔ KHÔNG bằng độ sáng. Đây đúng là chỗ app trượt. */ :root.sv-light { --navy: #FFFFFF; --navy-dark: #F2F5F9; --navy-deep: #E9EDF3; --gold: #7A6110; --gold-soft: #75603C; --surface: #FBFCFE; --surface-raised: #FFFFFF; --success: #1D7A4A; --warning: #8A5B00; --danger: #B02A20; --info: #1B5FBF; --ink: #16233B; --ink-2: rgba(22,35,59,.72); --ink-3: rgba(22,35,59,.66); --line: rgba(22,35,59,.16); --on-accent: #FFFFFF; } /* ⛔ LOGO TRẮNG TRÊN NỀN SÁNG = TÀNG HÌNH — bắt được lúc chụp màn 02/09. `logo-white.png` là ảnh **trắng**; nền sáng nuốt sạch nó. ⛔ ⛔ ĐỪNG chữa bằng `filter: invert()` hay `brightness(0)`: đọc từng điểm ảnh của tệp thì logo ⛔ KHÔNG đơn sắc — **5% số điểm là ĐỎ (~#A02020) và XANH (~#204080)**, tức là có dấu hiệu nhận diện có màu. `invert` biến đỏ thành lơ, `brightness(0)` bôi đen sạch cả hai ⇒ **làm hỏng nhãn hiệu** để đổi lấy chút tiện tay. ⛔ Đó là cái giá ⛔ không được phép trả. ⇒ Giữ NGUYÊN tệp ảnh, đặt nó lên **tấm nền navy của chính thương hiệu**. Cách này an toàn với mọi màu trong logo, kể cả màu thêm vào sau này. */ :root.sv-light .top .brand img { background: #1F3050; padding: 4px 9px; border-radius: 7px; box-sizing: content-box; } :root.sv-game { --navy: #121826; --navy-dark: #0A0E18; --navy-deep: #05060A; --gold: #22E5D6; --gold-soft: #6BF0E6; --surface: #121826; --surface-raised: #1B2436; --success: #2BE07B; --warning: #FFB020; --danger: #FF4D5E; --info: #3AA0FF; --ink: #EAF6FF; --ink-2: rgba(234,246,255,.72); --ink-3: rgba(234,246,255,.62); --line: rgba(234,246,255,.14); --on-accent: #05060A; } :root.sv-relax { --navy: #2A3A4D; --navy-dark: #223041; --navy-deep: #1A2230; --gold: #7FD1C0; --gold-soft: #A8E6D8; --surface: #2A3A4D; --surface-raised: #35485E; --success: #7FD1A6; --warning: #E6C67F; --danger: #E39A9A; --info: #8FB8E8; /* ⛔ relax có nền sáng nhất trong 6 chủ đề (#35485E) nên alpha .62 chỉ đạt 4.33:1 — DƯỚI ngưỡng WCAG AA. Riêng chủ đề này nâng lên .72 (tự đo: 5.0:1). Bắt được ở vòng rà cuối, khi đo tương phản trên CẢ 6 chủ đề chứ không chỉ chủ đề mặc định — bài học: đo một chủ đề là chưa đủ. */ --ink: #EEF2F5; --ink-2: rgba(238,242,245,.80); --ink-3: rgba(238,242,245,.72); --line: rgba(238,242,245,.14); --on-accent: #1A2230; } :root.sv-holiday { --navy: #143020; --navy-dark: #10271A; --navy-deep: #0B1E14; --gold: #E5B93B; --gold-soft: #F2D375; --surface: #143020; --surface-raised: #1C3E2A; --success: #3DBE7B; --warning: #E0A93E; --danger: #D8382F; --info: #4A86E8; --ink: #F3F6EF; --ink-2: rgba(243,246,239,.74); --ink-3: rgba(243,246,239,.62); --line: rgba(243,246,239,.14); --on-accent: #0B1E14; } :root.sv-kitty { --navy: #3A1E2E; --navy-dark: #331726; --navy-deep: #241019; --gold: #FF7EB6; --gold-soft: #FFA9CE; --surface: #3A1E2E; --surface-raised: #4E2A3D; --success: #5BD6A0; --warning: #F0B84E; --danger: #FF5D7A; --info: #7FA9F0; --ink: #FDF0F6; --ink-2: rgba(253,240,246,.74); --ink-3: rgba(253,240,246,.62); --line: rgba(253,240,246,.14); --on-accent: #241019; } :root.sv-high_contrast { --navy: #0A0A0A; --navy-dark: #000000; --navy-deep: #000000; --gold: #FFD400; --gold-soft: #FFE85C; --surface: #0A0A0A; --surface-raised: #1A1A1A; --success: #00E676; --warning: #FFC400; --danger: #FF3B30; --info: #40C4FF; --ink: #FFFFFF; --ink-2: #E0E0E0; --ink-3: #9E9E9E; --line: rgba(255,255,255,.35); --on-accent: #000000; } /* ⚠ SAI LỆCH CÓ CHỦ Ý so với tokens.dart của app: app đặt textDisabled ở alpha 0x66 (=.40). Trang này dùng --ink-3 cho CHỮ PHỤ/GỢI Ý (không phải chữ bị vô hiệu), và tự đo trên trình duyệt thấy alpha .46 chỉ đạt 3.79:1 trên nền surface — KHÔNG đủ WCAG AA (4.5:1) mà §4.3 handoff bắt buộc. Nâng lên .62 thì đạt ≥4.78:1 trên cả nền sáng nhất (surface-raised). Tên token giữ nguyên. ⇒ ĐỀ NGHỊ CHỈ HUY: app điện thoại có thể đang mắc đúng lỗi tương phản này. */ :root { --r: 12px; --r-s: 8px; --bar-h: 78px; --panel-w: 340px; --shadow: 0 10px 30px rgba(0,0,0,.45); --fast: 150ms cubic-bezier(.33,1,.68,1); --normal: 250ms cubic-bezier(.33,1,.68,1); /* Safari/iPhone: vùng an toàn tai thỏ + thanh gạt dưới */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } /* ───────────────────────────── nền tảng ───────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; /* ⛔ chốt chặn "không trượt ngang" ở MỌI bề rộng (cổng §7 mục 7) */ overflow-x: hidden; max-width: 100%; } body { background: var(--navy-deep); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } #app { /* 100dvh: Safari/iOS thanh địa chỉ co giãn làm 100vh sai → dvh mới đúng. Có fallback vh cho trình duyệt cũ. */ height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-height: 0; padding-left: var(--sal); padding-right: var(--sar); } /* ⛔ LỖI TỰ ĐO BẮT ĐƯỢC 05/08: thuộc tính `hidden` của HTML chỉ là display:none trong bảng kiểu của TRÌNH DUYỆT, nên khai báo display:flex của .mid/.bar/.center ở đây ĐÈ NÓ — khung họp và thanh dưới vẫn chiếm chỗ khi đang ở tiền sảnh (thấy rõ dải trống dưới màn). Chốt một dòng cho cả trang. */ [hidden] { display: none !important; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } button:disabled { cursor: not-allowed; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ─────────────────────────── icon dùng chung ──────────────────────────── */ /* SVG nội tuyến tô bằng currentColor (⛔ H9: var() không dùng được trong fill=) */ .ibtn svg, .ic svg { width: 100%; height: 100%; display: block; } .ic { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: inherit; flex: none; } .ic.s18 { width: 18px; height: 18px; } .ic.s28 { width: 28px; height: 28px; } /* ⛔⛔ 03/09 — BA cỡ icon dưới đây được JS dùng mà ⛔ CHƯA BAO GIỜ ĐƯỢC KHAI: `.s14` (2 chỗ: nút xoá phòng gần đây, dấu ✓ xác thực), `.s20` (1), `.s12` (1). Thiếu luật thì icon giữ nguyên 20px mặc định — ⛔ không lỗi, ⛔ không cảnh báo, chỉ SAI CỠ. Đúng họ bẫy `currentColor` 01/09: nạp được, ⛔ không báo gì, mà nhìn vẫn sai. */ .ic.s12 { width: 12px; height: 12px; } .ic.s14 { width: 14px; height: 14px; } .ic.s20 { width: 20px; height: 20px; } /* ⛔ `.flip` dùng ở nút TRANG TRƯỚC (hop-app.js) để lật mũi tên `chev` 180°. ⛔ Chưa khai ⇒ HAI mũi tên phân trang cùng chỉ MỘT HƯỚNG. */ .flip { transform: scaleX(-1); } /* ⛔ `.hourglass-anim` ở màn "đang chờ chủ họp duyệt" — ⛔ chưa khai nên đồng hồ cát ĐỨNG IM, người dùng tưởng máy treo. Lật chậm, ⛔ không quay tít. */ @keyframes sv-lat-cat { 0%,45% { transform: rotate(0) } 55%,100% { transform: rotate(180deg) } } .hourglass-anim { animation: sv-lat-cat 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hourglass-anim { animation: none; } } /* ⛔ `.hang-chon`: hàng có ô tick + +
+ dòng gợi ý. ⛔ Chưa khai nên dòng gợi ý TRÀN XUỐNG DƯỚI Ô TICK thay vì thẳng hàng với chữ. */ .hang-chon { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start; line-height: 1.45; } .hang-chon > input { margin-top: 3px; } /* ⛔ `.qr-phai`: cột phải hộp QR. `.tx-chu`: nhãn chữ của tin tự xoá. */ .qr-phai { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .tx-chu { opacity: .75; font-size: 12px; } .ibtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 9px; border-radius: 50%; color: var(--ink-2); transition: background var(--fast), color var(--fast); } .ibtn:hover:not(:disabled) { background: rgba(255,255,255,.09); color: var(--ink); } .ibtn:disabled { color: var(--ink-3); } /* ⛔ VÁ 14/09 — NÚT MỜ MÀ VẪN BẤM ĐƯỢC (luật §9 + bài học `chat.css:888`). `disabled` của HTML nuốt sạch sự kiện chuột ⇒ trên máy CẢM ỨNG tooltip KHÔNG BAO GIỜ hiện, người dùng bấm mãi một nút câm. Nút PTZ của máy SIP vì vậy dùng `aria-disabled` để VẪN NHẬN được cú bấm rồi NÓI RÕ LÝ DO. ⇒ Kiểu dáng phải GIỐNG HỆT `:disabled` ngay trên, kẻo nút mờ trông như nút thường — tức là nút giả về mặt THỊ GIÁC vẫn còn. ⛔ Dòng hover thứ hai là BẮT BUỘC: `[aria-disabled]` ⛔ KHÔNG khớp `:disabled` nên `.ibtn:hover:not(:disabled)` ở trên VẪN làm nó sáng lên khi rê chuột. */ .ibtn[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; } .ibtn[aria-disabled="true"]:hover { background: none; color: var(--ink-3); } .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn.sec[aria-disabled="true"]:hover { border-color: var(--line); color: var(--ink); } /* Nhãn lý do trong bảng chọn camera — `.sub` của trang chỉ có `.row .sub` và `.card .sub`, ⛔ không có `.sub` trần ⇒ phải khai riêng, kẻo chữ ⛔ không tô. */ .ptz-chon .ptz-ai .sub { font-size: 11.5px; color: var(--ink-3); } .ibtn[aria-pressed="true"] { color: var(--gold); } /* Nút tròn thanh họp: 46px theo §2.3 quy ước icon */ .cbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--surface-raised); color: var(--ink); transition: background var(--fast), color var(--fast), transform var(--fast); } .cbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-raised) 80%, var(--ink) 20%); } /* phản hồi tức thì khi bấm — §4.3 "nút bấm có phản hồi tức thì, không chờ mạng" */ .cbtn:active:not(:disabled) { transform: scale(.93); } .cbtn.on { background: var(--gold); color: var(--on-accent); } .cbtn.off { background: var(--danger); color: #fff; } .cbtn.danger { background: var(--danger); color: #fff; } .cbtn.rec { background: var(--danger); color: #fff; } .cbtn:disabled { background: var(--surface); color: var(--ink-3); } .cbtn .badge-dot { position: absolute; top: -1px; right: -1px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 17px; text-align: center; padding: 0 4px; display: none; } .cbtn .badge-dot.on { display: block; } .cbtn.wide { width: auto; border-radius: 23px; padding: 11px 18px; gap: 8px; } .cbtn.wide .ic { width: 22px; height: 22px; } /* nhóm nút có nhãn chữ (đỡ cho người mới, vẫn có tooltip) */ /* ⛔⛔ 16/09 — THẺ BỊ GẠCH CHÂN NHƯ LIÊN KẾT. Đo trên trang thật: `` cho `text-decoration-line: underline`, còn `