/* Assets from the approved menu B handover. Small controls keep monochrome state colours. */
.ico-goi { --m: url("/icons/menu-b/outline/phone.svg?v=1"); --tile: url("/icons/menu-b/tiles/phone.svg?v=1"); }
.ico-video { --m: url("/icons/menu-b/outline/video.svg?v=1"); --tile: url("/icons/menu-b/tiles/video.svg?v=1"); }
.ico-mic { --m: url("/icons/menu-b/outline/mic.svg?v=1"); --tile: url("/icons/menu-b/tiles/mic.svg?v=1"); }
.ico-loa { --m: url("/icons/menu-b/outline/speaker.svg?v=1"); --tile: url("/icons/menu-b/tiles/speaker.svg?v=1"); }
.ico-gac { --m: url("/icons/menu-b/outline/hangup.svg?v=1"); --tile: url("/icons/menu-b/tiles/hangup.svg?v=1"); }
.ico-kep { --m: url("/icons/menu-b/outline/attachment.svg?v=1"); --tile: url("/icons/menu-b/tiles/attachment.svg?v=1"); }
.ico-canh { --m: url("/icons/menu-b/outline/report.svg?v=1"); --tile: url("/icons/menu-b/tiles/report.svg?v=1"); }
.ico-nhom { --m: url("/icons/menu-b/outline/group.svg?v=1"); --tile: url("/icons/menu-b/tiles/group.svg?v=1"); }
.ico-congdong { --m: url("/icons/menu-b/outline/community.svg?v=1"); --tile: url("/icons/menu-b/tiles/community.svg?v=1"); } /* Cộng đồng · Kênh công khai (GPT 28.10.2026, anh duyệt) – quả cầu + bong bóng, không nhầm Tạo nhóm */
.ico-chat { --m: url("/icons/menu-b/outline/chat.svg?v=1"); --tile: url("/icons/menu-b/tiles/chat.svg?v=1"); }
.ico-ban { --m: url("/icons/menu-b/outline/friends.svg?v=1"); --tile: url("/icons/menu-b/tiles/friends.svg?v=1"); }
.ico-nguoi { --m: url("/icons/menu-b/outline/profile.svg?v=1"); --tile: url("/icons/menu-b/tiles/profile.svg?v=1"); }
.ico-thu { --m: url("/icons/menu-b/outline/email.svg?v=1"); --tile: url("/icons/menu-b/tiles/email.svg?v=1"); }
.ico-khoa { --m: url("/icons/menu-b/outline/lock.svg?v=1"); --tile: url("/icons/menu-b/tiles/lock.svg?v=1"); }
.ico-chuong { --m: url("/icons/menu-b/outline/bell.svg?v=1"); --tile: url("/icons/menu-b/tiles/bell.svg?v=1"); }
.ico-chu { --m: url("/icons/menu-b/outline/font.svg?v=1"); --tile: url("/icons/menu-b/tiles/font.svg?v=1"); }
.ico-chia { --m: url("/icons/menu-b/outline/key.svg?v=1"); --tile: url("/icons/menu-b/tiles/key.svg?v=1"); }
.ico-khien { --m: url("/icons/menu-b/outline/shield.svg?v=1"); --tile: url("/icons/menu-b/tiles/shield.svg?v=1"); }
.ico-doi { --m: url("/icons/menu-b/outline/sync.svg?v=1"); --tile: url("/icons/menu-b/tiles/sync.svg?v=1"); }
.ico-tai { --m: url("/icons/menu-b/outline/storage.svg?v=1"); --tile: url("/icons/menu-b/tiles/storage.svg?v=1"); }
.ico-mat-tat { --m: url("/icons/menu-b/outline/eye-off.svg?v=1"); --tile: url("/icons/menu-b/tiles/eye-off.svg?v=1"); }
.ico-tt { --m: url("/icons/menu-b/outline/info.svg?v=1"); --tile: url("/icons/menu-b/tiles/info.svg?v=1"); }
.ico-thoat { --m: url("/icons/menu-b/outline/logout.svg?v=1"); --tile: url("/icons/menu-b/tiles/logout.svg?v=1"); }
.ico-gui { --m: url("/icons/menu-b/outline/send.svg?v=1"); --tile: url("/icons/menu-b/tiles/send.svg?v=1"); }
.ico-tim { --m: url("/icons/menu-b/outline/search.svg?v=1"); --tile: url("/icons/menu-b/tiles/search.svg?v=1"); }
.ico-anh { --m: url("/icons/menu-b/outline/image.svg?v=1"); --tile: url("/icons/menu-b/tiles/image.svg?v=1"); }
.ico-mic-tat { --m: url("/icons/menu-b/outline/mic-off.svg?v=1"); --tile: url("/icons/menu-b/tiles/mic-off.svg?v=1"); }
.ico-them { --m: url("/icons/menu-b/outline/plus.svg?v=1"); --tile: url("/icons/menu-b/tiles/plus.svg?v=1"); }
.ico-dong { --m: url("/icons/menu-b/outline/close.svg?v=1"); --tile: url("/icons/menu-b/tiles/close.svg?v=1"); }
.ico-viet { --m: url("/icons/menu-b/outline/edit.svg?v=1"); --tile: url("/icons/menu-b/tiles/edit.svg?v=1"); }
.ico-ngon-ngu { --m: url("/icons/menu-b/outline/language.svg?v=1"); --tile: url("/icons/menu-b/tiles/language.svg?v=1"); }
.ico-chuong-thu { --m: url("/icons/menu-b/outline/bell-test.svg?v=1"); --tile: url("/icons/menu-b/tiles/bell-test.svg?v=1"); }
.ico-may { --m: url("/icons/menu-b/outline/may.svg?v=1"); --tile: url("/icons/menu-b/tiles/may.svg?v=1"); }
.ico-chan { --m: url("/icons/menu-b/outline/chan.svg?v=1"); --tile: url("/icons/menu-b/tiles/chan.svg?v=1"); }
.ico-rac { --m: url("/icons/menu-b/outline/rac.svg?v=1"); --tile: url("/icons/menu-b/tiles/rac.svg?v=1"); }
.ico-qr { --m: url("/icons/menu-b/outline/qr.svg?v=1"); --tile: url("/icons/menu-b/tiles/qr.svg?v=1"); }
.goi .ico-doi { --m: url("/icons/menu-b/outline/switch-camera.svg?v=1"); }

/* Optional Nhiều màu tiles. Unset/other values retain the original default.
   Only --tile changes: monochrome controls and state colours keep --m. */
html[data-bieu-tuong="nhieu-mau"] .ico-goi { --tile: url("/icons/menu-b/tiles-color/phone.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-video { --tile: url("/icons/menu-b/tiles-color/video.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-mic { --tile: url("/icons/menu-b/tiles-color/mic.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-loa { --tile: url("/icons/menu-b/tiles-color/speaker.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-gac { --tile: url("/icons/menu-b/tiles-color/hangup.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-kep { --tile: url("/icons/menu-b/tiles-color/attachment.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-canh { --tile: url("/icons/menu-b/tiles-color/report.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-nhom { --tile: url("/icons/menu-b/tiles-color/group.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-congdong { --tile: url("/icons/menu-b/tiles-color/community.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-chat { --tile: url("/icons/menu-b/tiles-color/chat.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-ban { --tile: url("/icons/menu-b/tiles-color/friends.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-nguoi { --tile: url("/icons/menu-b/tiles-color/profile.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-thu { --tile: url("/icons/menu-b/tiles-color/email.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-khoa { --tile: url("/icons/menu-b/tiles-color/lock.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-chuong { --tile: url("/icons/menu-b/tiles-color/bell.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-chu { --tile: url("/icons/menu-b/tiles-color/font.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-chia { --tile: url("/icons/menu-b/tiles-color/key.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-khien { --tile: url("/icons/menu-b/tiles-color/shield.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-doi { --tile: url("/icons/menu-b/tiles-color/sync.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-tai { --tile: url("/icons/menu-b/tiles-color/storage.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-mat-tat { --tile: url("/icons/menu-b/tiles-color/eye-off.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-tt { --tile: url("/icons/menu-b/tiles-color/info.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-thoat { --tile: url("/icons/menu-b/tiles-color/logout.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-gui { --tile: url("/icons/menu-b/tiles-color/send.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-tim { --tile: url("/icons/menu-b/tiles-color/search.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-anh { --tile: url("/icons/menu-b/tiles-color/image.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-mic-tat { --tile: url("/icons/menu-b/tiles-color/mic-off.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-them { --tile: url("/icons/menu-b/tiles-color/plus.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-dong { --tile: url("/icons/menu-b/tiles-color/close.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-viet { --tile: url("/icons/menu-b/tiles-color/edit.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-ngon-ngu { --tile: url("/icons/menu-b/tiles-color/language.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-chuong-thu { --tile: url("/icons/menu-b/tiles-color/bell-test.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-may { --tile: url("/icons/menu-b/tiles-color/may.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-chan { --tile: url("/icons/menu-b/tiles-color/chan.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-rac { --tile: url("/icons/menu-b/tiles-color/rac.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-qr { --tile: url("/icons/menu-b/tiles-color/qr.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-laptop { --tile: url("/icons/menu-b/tiles-color/laptop.svg?v=1"); }
html[data-bieu-tuong="nhieu-mau"] .ico-vitri { --tile: url("/icons/menu-b/tiles-color/location.svg?v=1"); }

/* Góp ý có hình riêng; mask dùng cho nút nhỏ, tile dùng cho hàng Cá nhân. */
.ico-gop-y { --m: url('/icons/menu-b/outline/feedback.svg?v=1'); --tile: url('/icons/menu-b/tiles/feedback.svg?v=1'); }
html[data-bieu-tuong="nhieu-mau"] .ico-gop-y { --tile: url('/icons/menu-b/tiles-color/feedback.svg?v=1'); }

/* Hook do HỖ TRỢ gắn theo ID, không phụ thuộc vị trí hàng hay tên hiển thị.
   Chỉ nền avatar; ảnh thật và chấm trạng thái giữ nguyên. Chữ trắng ≥ 4.5:1. */
.anh-dai[data-mau-dai] {
  color: #fff;
  background: linear-gradient(145deg, var(--dai-sang), var(--dai-dam));
}
.anh-dai[data-mau-dai="0"] { --dai-sang: #1676b8; --dai-dam: #124e8c; }
.anh-dai[data-mau-dai="1"] { --dai-sang: #087f7b; --dai-dam: #075b61; }
.anh-dai[data-mau-dai="2"] { --dai-sang: #7953b9; --dai-dam: #513687; }
.anh-dai[data-mau-dai="3"] { --dai-sang: #b94675; --dai-dam: #8c2d60; }
.anh-dai[data-mau-dai="4"] { --dai-sang: #a76518; --dai-dam: #79420b; }
.anh-dai[data-mau-dai="5"] { --dai-sang: #ba4b31; --dai-dam: #8e3424; }
.anh-dai[data-mau-dai="6"] { --dai-sang: #4e62ba; --dai-dam: #35438e; }
.anh-dai[data-mau-dai="7"] { --dai-sang: #39804a; --dai-dam: #246139; }
@media (forced-colors: active) {
  .anh-dai[data-mau-dai] { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
}