/* NBT Chat – giao diện. Màu theo NBT (xanh nước biển #0b3d6e). Sáng / tối theo máy. */
:root {
  --nen: #f3f5f8;
  --mat: #ffffff;
  --mat-2: #eef1f5;
  --chu: #111827;
  --chu-nhat: #5b6472;
  --vien: #dde2e9;
  --chinh: #0b3d6e;
  --chinh-2: #155a9e;
  --chu-tren-chinh: #ffffff;
  --tin-toi: #155a9e;
  --chu-tin-toi: #ffffff;
  --tin-ban: #ffffff;
  --do: #c62828;
  --xanh: #1b8a3c;
  --bong: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .06);
  --bo: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0d1117;
    --mat: #161b22;
    --mat-2: #1f2630;
    --chu: #e8edf3;
    --chu-nhat: #9aa5b4;
    --vien: #2b3440;
    --chinh: #3b82c4;
    --chinh-2: #5a9ad6;
    --tin-toi: #1f5f9e;
    --tin-ban: #1f2630;
    --bong: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--nen);
  color: var(--chu);
  font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--chinh-2); outline-offset: 2px; }
.an { display: none !important; }
.nhat { color: var(--chu-nhat); font-size: .9em; }
.dang-tai { padding: 40px 16px; text-align: center; color: var(--chu-nhat); }

/* Nút: mọi thứ bấm được to lên nhẹ khi chỉ chuột */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--vien);
  background: var(--mat); font-weight: 600; transition: transform .12s ease, background .12s;
}
.nut-chinh { background: var(--chinh); border-color: var(--chinh); color: var(--chu-tren-chinh); }
.nut-do { color: var(--do); }
.nut-tron { width: 44px; padding: 0; border-radius: 50%; font-size: 1.2rem; }
.nut-rong { width: 100%; }
.nut:disabled { opacity: .55; cursor: default; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nut:not(:disabled):hover, .muc:hover { transform: scale(1.04); }
  .muc:hover { transform: scale(1.015); }
}

/* Ô nhập */
.o { display: block; margin: 0 0 14px; }
.o > span:not(.o-mat-khau) { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.o input, .o textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--mat);
}
.o small { display: block; margin-top: 4px; color: var(--chu-nhat); }

.loi { color: var(--do); min-height: 1.4em; margin: 0 0 10px; }
.ma-lon {
  font: 700 1.25rem/1.6 ui-monospace, Consolas, monospace; letter-spacing: .04em;
  background: var(--mat-2); border-radius: 12px; padding: 14px; text-align: center; word-break: break-word; user-select: all;
}
.chon { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; }
.chon input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* Khung chính: danh sách bên trái, cuộc trò chuyện bên phải */
/* minmax(0, …): dòng xem trước tin dài không được đẩy cột rộng hơn màn hình (tự cắt "…") */
.khung-chinh { display: grid; grid-template-columns: minmax(0, 1fr); height: 100dvh; }
@media (min-width: 860px) { .khung-chinh { grid-template-columns: 340px minmax(0, 1fr); } }
.cot-ds, .cot-chat { min-height: 0; display: flex; flex-direction: column; background: var(--mat); }
.cot-ds { border-right: 1px solid var(--vien); }
.cot-chat { background: var(--nen); }
@media (max-width: 859px) {
  .khung-chinh.dang-chat .cot-ds { display: none; }
  .khung-chinh:not(.dang-chat) .cot-chat { display: none; }
}
.dau {
  display: flex; align-items: center; gap: 8px; min-height: 60px;
  padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--chinh); color: var(--chu-tren-chinh);
}
.dau .nut { background: transparent; border-color: transparent; color: inherit; }
.dau h2 { flex: 1; margin: 0; font-size: 1.15rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dau .phu { display: block; font-size: .8rem; font-weight: 400; opacity: .85; }
.cham { width: 10px; height: 10px; border-radius: 50%; background: var(--xanh); flex: none; }
.cham.mat { background: var(--do); animation: nhay 1.2s infinite; }
@keyframes nhay { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cham.mat { animation: none; } }

.ds { flex: 1; overflow-y: auto; }
.muc {
  display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px; border: 0;
  border-bottom: 1px solid var(--vien); background: transparent; text-align: left; transition: transform .12s;
}
.muc[aria-current="true"] { background: var(--mat-2); }
.anh-dai {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; color: #fff; background: var(--chinh-2);
}
.muc-giua { flex: 1; min-width: 0; }
.muc-ten { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muc-xem { color: var(--chu-nhat); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muc-ben { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .8rem; color: var(--chu-nhat); }
.so-chua-doc {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--do); color: #fff;
  font-weight: 700; display: grid; place-items: center; animation: nhay 1.6s 3;
}
.trong { padding: 32px 20px; text-align: center; color: var(--chu-nhat); }
.nhac-cai { margin: 8px 12px; width: auto; font-weight: 700; }

/* Logo Naloo ở đầu cột trái */
.logo-dau { width: 38px; height: 38px; flex: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }

/* Tab Trò chuyện / Bạn bè */
.the-tab { display: flex; border-bottom: 1px solid var(--vien); background: var(--mat); }
.tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  min-height: 48px; padding: 6px 8px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--chu-nhat); font: inherit; font-weight: 600; transition: transform .12s;
}
.tab[aria-selected="true"] { color: var(--chinh-2); border-bottom-color: var(--chinh-2); }
.tab .so-chua-doc { min-width: 20px; height: 20px; font-size: .75rem; }
.phu-tab { font-size: .75rem; font-weight: 600; color: var(--xanh); }
.ds > .nut-rong { display: block; width: calc(100% - 24px); margin: 10px 12px 0; }
.ds > .nut-rong + .muc, .ds > .nut-rong + .trong { margin-top: 10px; }
.nhac-moi { font-weight: 700; border-color: var(--do); color: var(--do); }

/* Biểu tượng kiểu riêng NBT: nét mảnh tự vẽ, tô bằng màu chữ (tự đổi sáng / tối) */
.ico {
  display: inline-block; width: 22px; height: 22px; flex: none; background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ico-goi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3l2 5-2.5 1.5a11 11 0 0 0 7 7L16 14l5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.ico-video { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M15 10.5l6-3.5v10l-6-3.5'/%3E%3C/svg%3E"); }
.ico-mic { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6'/%3E%3C/svg%3E"); }
.nut-nbt { display: grid; place-items: center; }
.dau .nut-nbt { background: rgba(255, 255, 255, .16); }
.nut-mic { display: grid; place-items: center; color: var(--chinh-2); }

/* Đang ghi tin thoại */
.dang-ghi { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--do); }
.cham-ghi { width: 12px; height: 12px; border-radius: 50%; background: var(--do); animation: nhay 1s infinite; }
@media (prefers-reduced-motion: reduce) { .cham-ghi { animation: none; } }
.dong-ho { font-variant-numeric: tabular-nums; color: var(--chu); }

/* Tin thoại trong khung chat */
.tin-thoai { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.tin-thoai .nut-tron { width: 38px; height: 38px; min-height: 38px; flex: none; }
.song-am { flex: 1; height: 18px; min-width: 60px; opacity: .6;
  background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px);
  -webkit-mask: linear-gradient(0deg, transparent 20%, #000 20% 80%, transparent 80%); }
.tin-thoai audio { width: min(260px, 60vw); height: 40px; }

/* Chấm online trên ảnh chữ cái */
.anh-dai { position: relative; }
.cham-tt {
  position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #9aa5b4; border: 2px solid var(--mat);
}
.cham-tt.bat { background: var(--xanh); }
.xanh { color: var(--xanh); font-weight: 600; }
.muc-xem.xanh { color: var(--xanh); }
@media (prefers-color-scheme: dark) { :root { --xanh: #2ea44f; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .tab:hover { transform: scale(1.04); } }
.nut-cai { margin-top: 12px; }
.o-mat-khau, .o .o-mat-khau { position: relative; display: block; margin: 0; font-size: inherit; font-weight: normal; }
.o-mat-khau input { width: 100%; padding-right: 52px; }
.nut-mat {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 42px; height: 40px; border: 0; background: transparent; color: var(--chinh-2); cursor: pointer; border-radius: 50%;
}
.nut-mat:hover { background: rgba(21, 90, 158, .1); }

/* Tin nhắn */
.tin-ds { flex: 1; overflow-y: auto; padding: 12px 10px 4px; display: flex; flex-direction: column; gap: 4px; }
.tin { max-width: min(78%, 560px); align-self: flex-start; }
.tin.toi { align-self: flex-end; }
.tin-hop {
  padding: 8px 12px; border-radius: 16px; background: var(--tin-ban); box-shadow: var(--bong);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tin.toi .tin-hop { background: var(--tin-toi); color: var(--chu-tin-toi); }
.tin-ten { font-size: .8rem; font-weight: 700; color: var(--chinh-2); margin: 6px 0 2px 6px; }
.tin-gio { font-size: .72rem; color: var(--chu-nhat); margin: 2px 8px 6px; text-align: right; }
.tin:not(.toi) .tin-gio { text-align: left; }
.tin-gio .doc { color: var(--chinh-2); font-weight: 700; }
.tin-anh img { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; cursor: zoom-in; }
.tin-tep { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; padding: 0; text-align: left; text-decoration: underline; }
.tin-he-thong { align-self: center; font-size: .8rem; color: var(--chu-nhat); background: var(--mat-2); border-radius: 10px; padding: 4px 10px; margin: 6px 0; text-align: center; }
.tin-loi .tin-hop { font-style: italic; opacity: .8; }
.tin-cho .tin-hop { opacity: .6; }
.tin-cho.hong .tin-hop { outline: 2px solid var(--do); opacity: 1; }
.tai-cu { align-self: center; margin: 4px 0 10px; }

.go {
  display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--mat); border-top: 1px solid var(--vien);
}
.go textarea {
  flex: 1; resize: none; max-height: 140px; min-height: 44px; padding: 10px 12px;
  border-radius: 22px; border: 1px solid var(--vien); background: var(--mat-2);
}

/* Hộp nổi */
dialog {
  border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px); background: var(--mat); color: var(--chu); box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.hop-dau { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--vien); }
.hop-dau h3 { flex: 1; margin: 0; font-size: 1.15rem; }
.hop-than { padding: 16px 18px 20px; overflow-y: auto; max-height: calc(100dvh - 120px); }
.hop-than h4 { margin: 18px 0 8px; }
.hop-than h4:first-child { margin-top: 0; }
.dong { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vien); }
.dong .muc-giua { flex: 1; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.anh-to { max-width: 100%; max-height: 80dvh; display: block; margin: 0 auto; }

#bao {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 10;
  background: #222; color: #fff; padding: 10px 16px; border-radius: 12px; max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#bao.hien { opacity: 1; }

/* ---------- màn gọi thoại / video ---------- */
.goi {
  position: fixed; inset: 0; z-index: 1000; background: #0b1a2c; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.goi-xa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; pointer-events: none; }
.goi.co-hinh .goi-xa { opacity: 1; }
.goi-gan {
  position: absolute; right: 12px; top: max(12px, env(safe-area-inset-top)); width: 28vw; max-width: 180px; aspect-ratio: 3 / 4;
  object-fit: cover; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .7); background: #000; z-index: 2; transform: scaleX(-1);
}
.goi-dau { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8vh; text-align: center; }
.goi.co-hinh .goi-dau { margin-top: 0; align-self: flex-start; align-items: flex-start; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.goi-anh { width: 112px; height: 112px; font-size: 3rem; }
.goi-ten { font-size: 1.6rem; font-weight: 700; }
.goi-tt { opacity: .85; font-variant-numeric: tabular-nums; }
.goi-nut { position: relative; z-index: 1; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.goi-b {
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: #fff;
  font: inherit; font-size: .85rem; cursor: pointer; min-width: 72px;
}
.goi-b-icon {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem;
  background: rgba(255, 255, 255, .18); transition: transform .15s;
}
.goi-b:hover .goi-b-icon { transform: scale(1.08); }
.goi-b:focus-visible .goi-b-icon { outline: 3px solid #fff; outline-offset: 2px; }
.goi-bat .goi-b-icon { background: #fff; color: #0b1a2c; }
.goi-do .goi-b-icon { background: #d32f2f; }
.goi-xanh .goi-b-icon { background: #1b8a3c; animation: nhay 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .goi-xanh .goi-b-icon { animation: none; } }

/* Nhắc bật thông báo đẩy */
#nhac-tb:empty { display: none; }
.nhac-tb { display: flex; width: calc(100% - 24px); margin: 8px 12px; font-weight: 700; border-color: var(--chinh-2); color: var(--chinh-2); }
.tin.toi .tin-thoai .nut-chinh { background: #fff; color: var(--tin-toi); border-color: #fff; }
.tin.toi .tin-thoai .nhat { color: inherit; opacity: .85; }
.song-am { mask: linear-gradient(0deg, transparent 20%, #000 20% 80%, transparent 80%); }
.ico-kep { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7L9.7 17a1.7 1.7 0 0 1-2.4-2.4L15 7'/%3E%3C/svg%3E"); }

/* Nút màu mè kiểu NBT: tròn, nền chuyển màu họ xanh NBT, hình nét trắng, có bóng */
.nut-nbt, .nut-mic, .go .nut-chinh {
  border: 0; color: #fff; box-shadow: 0 3px 10px rgba(11, 61, 110, .35); transition: transform .12s, box-shadow .12s;
}
.dau .nut-nbt { box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.ico-goi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3l2 5-2.5 1.5a11 11 0 0 0 7 7L16 14l5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.dau .nut-nbt:has(.ico-goi) { background: linear-gradient(135deg, #34e3b0, #12b5a6 50%, #0b8f8a); }
.dau .nut-nbt:has(.ico-video) { background: linear-gradient(135deg, #5fb2ff, #3b6cff 50%, #6a4bff); }
.go .nut-mic:has(.ico-mic) { background: linear-gradient(135deg, #ffb35c, #ff7a45 50%, #f04e6e); }
.go .nut-mic:has(.ico-kep) { background: linear-gradient(135deg, #7fd8ff, #29a8f0 50%, #1877f2); }
.go .nut-chinh { background: linear-gradient(135deg, #3fd0ff, #1877f2 50%, #0b3d6e); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nut-nbt:hover, .nut-mic:hover, .go .nut-chinh:hover { transform: scale(1.12); box-shadow: 0 5px 16px rgba(11, 61, 110, .45); }
}
.tin:not(.toi) .tin-thoai .nut-chinh { border: 0; color: #fff; background: linear-gradient(135deg, #ffb35c, #ff7a45 50%, #f04e6e); box-shadow: 0 3px 10px rgba(240, 78, 110, .35); }

/* Biểu tượng Trò chuyện / Bạn bè cùng kiểu nút NBT */
.ico-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14a1.5 1.5 0 0 1 1.5 1.5v9.5a1.5 1.5 0 0 1-1.5 1.5H10l-5 4v-4a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 5 4.5z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E"); }
.ico-ban { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14.3a5 5 0 0 1 6 4.7'/%3E%3C/svg%3E"); }
.ico-tron { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: 0 2px 8px rgba(11, 61, 110, .3); transition: opacity .15s, filter .15s; }
.ico-tron .ico { width: 17px; height: 17px; }
.ico-tron-chat { background: linear-gradient(135deg, #3fd0ff, #1877f2 50%, #0b3d6e); }
.ico-tron-ban { background: linear-gradient(135deg, #ff7eb6, #c45cf2 50%, #7c3aed); }
.tab[aria-selected="false"] .ico-tron { opacity: .55; filter: saturate(.6); }
.tab { gap: 8px; }
.o-ma { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

/* Màn hình gọi: hình nét tự vẽ (bỏ emoji) */
.goi-b-icon .ico { width: 28px; height: 28px; }
.ico-mic-tat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6M3 3l18 18'/%3E%3C/svg%3E"); }
.ico-video-tat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M15 10.5l6-3.5v10l-6-3.5M3 3l18 18'/%3E%3C/svg%3E"); }
.ico-doi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8a8 8 0 0 0-14.5-2.5M4 16a8 8 0 0 0 14.5 2.5M20 3v5h-5M4 21v-5h5'/%3E%3C/svg%3E"); }

/* Biểu tượng nét tự vẽ thay toàn bộ emoji (anh Thanh dặn 21.10.2026: đồng bộ, không emoji) */
.ico-mat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); }
.ico-mat-tat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.ico-tai { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M12 7v7M9 11.5l3 3 3-3M10.5 18.5h3'/%3E%3C/svg%3E"); }
.ico-chuong { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ico-khoa { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5v-3a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ico-khien { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.5 3v5.7c0 4.6-3.2 8.3-7.5 9.7-4.3-1.4-7.5-5.1-7.5-9.7V5.8z'/%3E%3Cpath d='M8.8 12l2.3 2.3 4.2-4.6'/%3E%3C/svg%3E"); }
.ico-chia { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.2'/%3E%3Cpath d='M11 12l9-9M16.5 6.5l2.5 2.5M14 9l2 2'/%3E%3C/svg%3E"); }
.ico-rac { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16M9.5 6.5v-2h5v2M6.5 6.5l1 13.5h9l1-13.5M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E"); }
.ico-thu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6.5L20.5 7'/%3E%3C/svg%3E"); }
.ico-them { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ico-menu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-lui { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 5.5L4.5 12l6.5 6.5'/%3E%3C/svg%3E"); }
.ico-tt { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.6h.01'/%3E%3C/svg%3E"); }
.ico-gui { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10.5 13.5M21 3l-6.5 18-4-7.5-7.5-4z'/%3E%3C/svg%3E"); }
.ico-dong { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ico-phat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5v15l12-7.5z' fill='%23000'/%3E%3C/svg%3E"); }
.ico-canh { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.4h.01'/%3E%3C/svg%3E"); }
.ico-gac { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(135 12 12)' d='M5 3h3l2 5-2.5 1.5a11 11 0 0 0 7 7L16 14l5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.nut .ico { width: 20px; height: 20px; }
.nut-tron .ico, .nut-mat .ico { width: 22px; height: 22px; }
.phu .ico { width: 12px; height: 12px; vertical-align: -1px; }
.trong .ico, .nhat .ico, .tin-hop .ico, .tin-gio .ico { width: 16px; height: 16px; vertical-align: -3px; }
.tin-tep .ico { width: 18px; height: 18px; flex: none; }
.anh-dai .ico { width: 24px; height: 24px; }
.muc-nhan { color: var(--chinh-2); }
.muc-nhan .ico { width: 24px; height: 24px; }
.goi-do .goi-b-icon .ico-gac { width: 30px; height: 30px; }
.cham-nho { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; margin-right: 5px; vertical-align: 1px; }
/* Việc cần làm ngay (đặt mã khôi phục): viền đỏ, nhấp nháy vài lần */
.nhac-gap { border-color: var(--do); color: var(--do); animation: nhay 1.6s 3; }
@media (prefers-reduced-motion: reduce) { .nhac-gap { animation: none; } }

/* Màn đăng nhập / đăng ký / quên mật khẩu / mở khoá – kiểu 1 anh Thanh chọn: nền xanh NBT kín màn hình */
.man-xanh {
  min-height: 100dvh; color: #fff;
  background: radial-gradient(120% 70% at 50% 0%, #2a7cc9 0%, #155a9e 38%, #0b3d6e 72%, #08294b 100%) fixed;
}
@media (prefers-color-scheme: dark) {
  .man-xanh { background: radial-gradient(120% 70% at 50% 0%, #174d82 0%, #0f3a66 40%, #0a2340 75%, #070f1c 100%) fixed; }
}
.man-xanh-giua {
  width: 100%; max-width: 400px; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column;
  padding: max(36px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
}
.logo-to { display: block; width: 104px; height: 104px; margin: 0 auto; border-radius: 24px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3)); }
.ten-app { text-align: center; font-size: 1.7rem; font-weight: 800; margin: 12px 0 26px; }
.logo-naloo { display: block; width: min(250px, 68vw); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .25)); }
.man-xanh .tieu-de { margin: -10px 0 12px; font-size: 1.2rem; text-align: center; }
.man-xanh .loi-chao { margin: 0 0 16px; text-align: center; }
.man-xanh .canh-bao { display: flex; gap: 10px; text-align: left; background: rgba(255, 255, 255, .13); border-radius: 14px; padding: 12px 14px; }
.man-xanh .canh-bao .ico { width: 22px; height: 22px; color: #ffd166; }
.man-xanh .o > span:not(.o-mat-khau) { color: rgba(255, 255, 255, .92); margin-left: 4px; }
.man-xanh .o input {
  min-height: 52px; padding: 12px 16px; border-radius: 16px; border: 0;
  background: rgba(255, 255, 255, .96); color: #111827; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.man-xanh .o-mat-khau input { padding-right: 52px; }
/* ô "Số điện thoại hoặc email": mã nước bên trái (ẩn khi gõ email) */
.o-so-email { display: flex; gap: 8px; }
.o-so-email input { flex: 1; min-width: 0; }
.o-so-email .ma-nuoc { flex: 0 0 auto; min-height: 46px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--vien); background: var(--mat); }
.man-xanh .o-so-email .ma-nuoc { min-height: 52px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .96); color: #111827; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.o-so-email .ma-nuoc[hidden] { display: none; }
.man-xanh .nut-mat { color: #0b3d6e; }
.man-xanh .nut-mat:hover { background: rgba(11, 61, 110, .08); }
.man-xanh .chon { align-items: center; margin: 2px 0 16px 4px; }
.man-xanh .chon input { margin: 0; accent-color: #3fd0ff; }
.man-xanh .loi { background: #fff; color: var(--do); border-radius: 12px; padding: 8px 12px; font-weight: 600; min-height: 0; margin: 0 0 12px; }
.man-xanh .loi:empty { display: none; }
.man-xanh .nut { min-height: 52px; border-radius: 26px; font-size: 1.05rem; }
.man-xanh .nut-chinh { border: 0; color: #fff; background: linear-gradient(135deg, #3fd0ff, #1877f2 55%, #1458c7); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.man-xanh .nut-phu { background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.man-xanh .nut-cai { margin: 0; min-height: 44px; border: 0; background: transparent; color: #fff; font-size: .95rem; opacity: .9; }
.man-xanh .day { margin-top: auto; padding-top: 20px; }
.lien-ket {
  display: block; margin: 6px auto 0; padding: 10px; border: 0; background: none;
  color: #bfe3ff; font-weight: 600; cursor: pointer; transition: transform .12s;
}
.ngan { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: .85rem; color: rgba(255, 255, 255, .8); }
.ngan::before, .ngan::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lien-ket:hover, .nut-mat:hover { transform: translateY(-50%) scale(1.08); }
  .lien-ket:hover { transform: scale(1.06); }
}
.nut-quen { margin-top: 14px; border: 0; background: transparent; color: var(--chinh-2); }

/* Thanh cảnh báo: khoá bảo mật của bạn trong cuộc trò chuyện đã đổi, chưa được tin (dùng biến màu có sẵn → sáng + tối) */
.canh-bao-khoa:empty { display: none; }
.canh-bao-khoa { background: var(--mat); border-bottom: 3px solid var(--do); padding: 10px 14px; }
.canh-bao-dong + .canh-bao-dong { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vien); }
.canh-bao-dong p { margin: 0; color: var(--do); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }

/* Cuộc đã tắt thông báo: huy hiệu chưa đọc màu xám; ô chọn thời gian tắt trong hộp thông tin */
.so-chua-doc.tat { background: var(--chu-nhat); }
.tat-tb { margin: 8px 0; }
.tat-tb p { margin: 0 0 6px; }
.tat-tb select { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--vien); background: var(--mat); color: var(--chu); font: inherit; }

/* Tin đã thu hồi */
.tin-thu-hoi { font-style: italic; opacity: .75; }

/* Cụm 2A: trích tin, cảm xúc (bộ 6 vẽ nét riêng), đang soạn tin */
.tin-trich { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; margin: 0 0 6px; padding: 6px 10px; border: 0; border-left: 3px solid var(--chinh-2); border-radius: 8px; background: rgba(127, 127, 127, .16); color: inherit; }
.tin-trich b { display: block; font-size: .8125rem; }
.tin-trich span { display: block; font-size: .8125rem; opacity: .85; overflow-wrap: anywhere; }
.tra-loi-bar:empty { display: none; }
.tra-loi-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--vien); background: var(--mat); }
.tra-loi-noi { flex: 1; min-width: 0; border-left: 3px solid var(--chinh-2); padding-left: 8px; font-size: .875rem; }
.tra-loi-noi b, .tra-loi-noi span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tra-loi-noi span { color: var(--chu-nhat); }
.cx-hinh { width: 22px; height: 22px; flex: none; }
.cx-hinh circle[r="0.6"] { fill: currentColor; }
.cx-thich { color: #1f6fd1; } .cx-yeu { color: #d6336c; } .cx-cuoi { color: #d98e04; } .cx-ngac { color: #8a56d6; } .cx-buon { color: #3a86a8; } .cx-gian { color: #d9480f; }
.cx-hang { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.cx-nut { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--vien); background: var(--mat-2); cursor: pointer; }
.cx-nut.cua-toi { outline: 2px solid var(--chinh-2); }
.cx-nut:hover { transform: scale(1.08); }
.cx-nut .cx-hinh { width: 28px; height: 28px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.cx-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; min-height: 28px; border-radius: 14px; border: 1px solid var(--vien); background: var(--mat); color: var(--chu); font: inherit; font-size: .8125rem; cursor: pointer; }
.cx-chip.cua-toi { border-color: var(--chinh-2); }
.cx-chip .cx-hinh { width: 16px; height: 16px; }
.dang-soan { color: var(--xanh); font-style: italic; }
@media (prefers-reduced-motion: no-preference) { .cx-nut { transition: transform .12s; } }

/* ---- Cụm 2B: ghim tin, tìm trong cuộc, @nhắc ---- */
.ico-ghim { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l-1 6 3.5 3.5V14H6.5v-1.5L10 9z'/%3E%3Cpath d='M12 14v7'/%3E%3C/svg%3E"); }
.ico-tim { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E"); }
.ghim-bar:empty, .tim-bar:empty, .nhac-ds:empty { display: none; }
.ghim-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--vien); background: var(--mat); }
.ghim-bar > .ico { color: var(--chinh-2); flex: none; }
.ghim-noi { flex: 1; min-width: 0; text-align: left; border: 0; border-left: 3px solid var(--chinh-2); padding: 2px 0 2px 8px; background: transparent; color: var(--chu); font: inherit; font-size: .875rem; cursor: pointer; min-height: 40px; }
.ghim-noi b, .ghim-noi span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghim-noi span { color: var(--chu-nhat); }
.tim-bar { border-bottom: 1px solid var(--vien); background: var(--mat); }
.tim-hang { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.tim-hang input { flex: 1; min-width: 0; min-height: 44px; font-size: 1rem; padding: 0 12px; border: 1px solid var(--vien); border-radius: 22px; background: var(--mat-2); color: var(--chu); }
.tim-kq { max-height: 40vh; overflow-y: auto; }
.tim-muc { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; text-align: left; padding: 8px 14px; border: 0; border-top: 1px solid var(--vien); background: transparent; color: var(--chu); font: inherit; cursor: pointer; min-height: 48px; }
.tim-muc span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chu-nhat); font-size: .875rem; }
.tim-muc small { color: var(--chu-nhat); }
.tim-muc:hover { background: var(--mat-2); }
.tim-trang { margin: 0; padding: 8px 14px; font-size: .8125rem; color: var(--chu-nhat); }
.nhac-ds { display: flex; flex-direction: column; border-top: 1px solid var(--vien); background: var(--mat); max-height: 40vh; overflow-y: auto; }
.nhac-muc { display: flex; align-items: center; gap: 10px; padding: 6px 14px; min-height: 48px; border: 0; background: transparent; color: var(--chu); font: inherit; text-align: left; cursor: pointer; }
.nhac-muc:hover, .nhac-muc:focus-visible { background: var(--mat-2); }
.nhac { color: var(--chinh-2); font-weight: 600; }
.tin.toi .nhac { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.nhac-minh { background: rgba(21, 90, 158, .16); border-radius: 4px; padding: 0 2px; }
.nhac-so { background: var(--chinh-2); }
@keyframes chop { 0%, 60% { box-shadow: 0 0 0 3px var(--chinh-2); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tin.chop { animation: chop 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) { .tin.chop { animation: none; outline: 2px solid var(--chinh-2); } }

/* ---- Cụm 2C: ảnh đại diện, cỡ chữ, album ảnh ---- */
/* Cỡ chữ: mọi chữ trong app tính theo rem nên chỉ cần đổi cỡ gốc */
html[data-cochu="to"] { font-size: 118.75%; }
html[data-cochu="rat-to"] { font-size: 137.5%; }
.ico-anh { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='10.5' r='1.7'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E"); }
.ico-chu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19l5.5-14L14 19M5.2 14h6.6'/%3E%3Cpath d='M15.5 19l3-7.5 3 7.5M16.6 16.8h3.8'/%3E%3C/svg%3E"); }
.anh-dai > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.anh-dd-xem { display: flex; justify-content: center; margin: 6px 0 12px; }
.anh-dd-xem .anh-dai { width: 112px; height: 112px; font-size: 3rem; }
.album { display: grid; gap: 2px; width: min(280px, 64vw); }
.album.c1 { grid-template-columns: 1fr; }
.album.c2 { grid-template-columns: repeat(2, 1fr); }
.album.c3 { grid-template-columns: repeat(3, 1fr); }
.album-o { padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--mat-2); cursor: zoom-in; display: block; }
.album-o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-o.hong { outline: 1px dashed var(--do); }
.tin-hop:has(> .album) { padding: 4px; }
.album-dk { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.nut-toi .ico { transform: scaleX(-1); }

/* ---- Sửa lỗi "bạn không nhận tin": khoá đổi + bản giao diện cũ ---- */
.muc-xem.canh { color: var(--do); font-weight: 600; }
.ban-moi { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--mat-2); border-bottom: 1px solid var(--vien); font-size: .9rem; }
.ban-moi span { flex: 1; min-width: 0; }
.ban-moi .nut { min-height: 44px; }

/* ---- Cài đặt: bố cục mới (thẻ hồ sơ + nhóm có tiêu đề, mỗi dòng biểu tượng + chữ + mũi tên / công tắc) ---- */
.ico-nguoi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-3.9 3.1-6 7-6s7 2.1 7 6'/%3E%3C/svg%3E"); }
.ico-may { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.6'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.ico-chan { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); }
.ico-thoat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6.5A2.5 2.5 0 0 0 4 6.5v11A2.5 2.5 0 0 0 6.5 20H9M16 8l4 4-4 4M20 12H10'/%3E%3C/svg%3E"); }
.cd-ho-so { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--vien); border-radius: 18px; color: var(--chu); font: inherit;
  background: linear-gradient(135deg, var(--mat-2), var(--mat)); }
.cd-ho-so:hover, .cd-ho-so:focus-visible { border-color: var(--chinh-2); }
.cd-ho-so .anh-dai { width: 64px; height: 64px; font-size: 1.6rem; }
.cd-ho-so b { display: block; font-size: 1.15rem; overflow-wrap: anywhere; }
.cd-ho-so small { display: block; color: var(--chu-nhat); overflow-wrap: anywhere; }
.cd-ho-so .cd-goi-y { margin-top: 2px; color: var(--chinh-2); font-weight: 600; font-size: .8rem; }
.cd-ho-so .cd-goi-y .ico { width: 14px; height: 14px; vertical-align: -2px; }
.cd-nhom { margin-top: 20px; }
.cd-tieu-de { margin: 0 6px 6px; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--chu-nhat); }
.cd-the { border: 1px solid var(--vien); border-radius: 16px; background: var(--mat); overflow: hidden; }
.cd-hang { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; text-align: left;
  border: 0; border-bottom: 1px solid var(--vien); border-radius: 0; background: transparent; color: var(--chu); font: inherit; cursor: pointer; }
.cd-hang:last-child { border-bottom: 0; }
button.cd-hang:hover, button.cd-hang:focus-visible { background: var(--mat-2); }
.cd-tinh { cursor: default; border-bottom: 0; padding-bottom: 0; }
.cd-bieu { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--mat-2); color: var(--chinh-2); }
.cd-bieu .ico { width: 20px; height: 20px; }
.cd-chu { flex: 1; min-width: 0; }
.cd-chu b { display: block; font-weight: 600; }
.cd-chu small { display: block; color: var(--chu-nhat); font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.cd-gia { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chu-nhat); font-size: .88rem; }
.cd-mui { flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-top: 2px solid var(--chu-nhat); border-right: 2px solid var(--chu-nhat); transform: rotate(45deg); }
.cd-ct { flex: none; position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--vien); }
.cd-ct::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.cd-hang[aria-checked="true"] .cd-ct { background: var(--chinh-2); }
.cd-hang[aria-checked="true"] .cd-ct::after { transform: translateX(20px); }
@media (prefers-reduced-motion: no-preference) { .cd-ct, .cd-ct::after { transition: transform .15s, background .15s; } }
.cd-hang.canh .cd-bieu { background: rgba(198, 40, 40, .14); color: var(--do); }
.cd-hang.canh .cd-chu small { color: var(--do); }
.cd-hang.nhac .cd-bieu { background: var(--chinh-2); color: #fff; }
.cd-hang.nguy { justify-content: center; color: var(--do); font-weight: 700; }
.cd-hang.nguy .cd-bieu { background: rgba(198, 40, 40, .14); color: var(--do); }
.cd-hang.nguy .cd-chu { flex: none; }
.cd-doan { display: flex; gap: 4px; margin: 6px 14px 14px; padding: 4px; border-radius: 14px; background: var(--mat-2); }
.cd-doan button { flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--chu); font: inherit; cursor: pointer; }
.cd-doan button[aria-checked="true"] { background: var(--mat); box-shadow: var(--bong); color: var(--chinh-2); font-weight: 700; }
.hop-dau.co-lui { padding-left: 8px; }

/* ---- Vào app: 1 hộp nhỏ hỏi thông báo + chấm báo việc còn dở trên nút Cài đặt ---- */
.hop-ngan { padding: 22px 20px 18px; text-align: center; }
.hop-ngan-bieu { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--mat-2); color: var(--chinh-2); }
.hop-ngan-bieu .ico { width: 28px; height: 28px; }
.hop-ngan p { margin: 12px 0 16px; font-size: 1.05rem; font-weight: 600; }
.hop-ngan-nut { display: flex; gap: 10px; }
.hop-ngan-nut .nut { flex: 1; }
.nut.co-viec { position: relative; }
.nut.co-viec::after { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--do); border: 2px solid var(--chinh); }

/* ---- Đăng ký bằng số điện thoại (bản thử) + trang quản trị mã SMS ---- */
.sms-muc { padding: 12px 0; border-bottom: 1px solid var(--vien); }
.sms-muc b { display: block; }
.sms-nd { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--mat-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }

/* Cài đặt mẫu C (anh Thanh chọn 22.10.2026): thẻ tên nền trắng có bóng, 4 ô lớn bấm nhanh, mỗi dòng 1 ô biểu tượng màu riêng.
   Chỉ đổi giao diện; mọi việc vẫn gọi đúng hộp cũ. */
.cd { background: linear-gradient(180deg, color-mix(in srgb, var(--chinh-2) 10%, transparent) 0, transparent 200px); border-radius: 18px; }
.cd-ho-so { border: 0; box-shadow: var(--bong); }
.cd-ho-so .anh-dai { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chinh-2) 25%, transparent); }
.cd-o-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cd-o { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; padding: 12px; border: 0; border-radius: 16px;
  background: var(--mat); color: var(--chu); box-shadow: var(--bong); font: inherit; text-align: left; cursor: pointer; }
.cd-o .cd-bieu { margin-bottom: 8px; }
.cd-o:nth-child(1) { --mau-bieu: #2f7de1; }
.cd-o:nth-child(2) { --mau-bieu: #12a37f; }
.cd-o:nth-child(3) { --mau-bieu: #f08c00; }
.cd-o:nth-child(4) { --mau-bieu: #7c4ddb; }
.cd-o b { font-size: .95rem; }
.cd-o small { color: var(--chu-nhat); font-size: .78rem; }
.cd-o:hover, .cd-o:focus-visible { outline: 2px solid color-mix(in srgb, var(--chinh-2) 35%, transparent); outline-offset: 0; }
.cd-the { border-color: transparent; box-shadow: var(--bong); }
.cd-bieu { color: #fff; background: var(--mau-bieu, var(--chinh-2)); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.cd-hang:nth-child(6n+1) { --mau-bieu: #2f7de1; }
.cd-hang:nth-child(6n+2) { --mau-bieu: #12a37f; }
.cd-hang:nth-child(6n+3) { --mau-bieu: #f08c00; }
.cd-hang:nth-child(6n+4) { --mau-bieu: #7c4ddb; }
.cd-hang:nth-child(6n+5) { --mau-bieu: #e0457b; }
.cd-hang:nth-child(6n+6) { --mau-bieu: #0f9bb5; }
.cd-hang.canh .cd-bieu, .cd-hang.nguy .cd-bieu { background: var(--do); color: #fff; }
.cd-hang.nhac .cd-bieu { background: var(--chinh-2); }
@media (prefers-reduced-motion: no-preference) {
  .cd-o, .cd-bieu { transition: transform .15s; }
  .cd-o:hover { transform: translateY(-2px); }
  button.cd-hang:hover .cd-bieu, button.cd-hang:focus-visible .cd-bieu { transform: scale(1.1); }
}