/* 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;
    --do: #ef5350; /* đỏ sáng hơn cho nền tối: chữ đỏ đọc được (≈ 4,8 : 1), số trắng trên nền đỏ vẫn rõ */
    --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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* dòng dài: "…" cuối, ổ khoá đầu dòng luôn thấy */
.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; }

/* 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; }
/* Xem ảnh to (24.10.2026 – anh Thanh: "có quá nhiều viền trắng thừa"): nền đen kín màn hình, ảnh vừa khít, thanh mảnh nổi trên ảnh */
#hop[data-loai="anh"] {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0;
  background: #000; color: #fff; box-shadow: none; overflow: hidden;
}
#hop[data-loai="anh"]::backdrop { background: #000; }
.xem-anh { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.xem-anh > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.xem-anh-thanh {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 10px 22px 16px; background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
}
.xem-anh-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; opacity: .85; }
.xem-anh .nut-tron { flex: none; background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.xem-anh-duoi {
  position: absolute; left: 0; right: 0; bottom: 0; justify-content: center;
  padding: 22px 10px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .65)); color: #fff;
}
.xem-anh-duoi .nhat { color: #fff; opacity: .85; }

#bao {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 1100; /* nổi trên màn gọi (1000): lỗi giữa cuộc gọi vẫn thấy */
  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;
}
.goi-gan.guong { transform: scaleX(-1); } /* chỉ camera trước (như nhìn gương); camera sau giữ nguyên chiều */
.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; } }
/* Vòng sóng toả ra quanh ảnh khi đang gọi / đổ chuông / đang nối (24.10.2026) */
.goi-anh.goi-song::before, .goi-anh.goi-song::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .6);
  animation: goi-song 2s ease-out infinite; pointer-events: none;
}
.goi-anh.goi-song::after { animation-delay: 1s; }
@keyframes goi-song { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .goi-anh.goi-song::before, .goi-anh.goi-song::after { animation: none; transform: scale(1.15); opacity: .5; } }
/* Thu nhỏ cuộc gọi (24.10.2026): nút "Thu nhỏ" góc trên trái màn gọi (Back cũng thu nhỏ) → thanh xanh trên cùng, cuộc gọi vẫn chạy,
   nhắn tin bình thường; gọi video thì thêm ô hình nhỏ góc trên phải (không che ô soạn tin / khay biểu cảm). Bấm thanh / ô hình = quay lại màn gọi. */
.goi-thu {
  position: absolute; z-index: 3; left: 12px; top: max(12px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; transition: transform .15s;
}
.goi-thu .ico { width: 26px; height: 26px; }
.goi.co-hinh .goi-dau { padding-left: 52px; } /* gọi video: tên + giờ nằm góc trên trái → chừa chỗ nút Thu nhỏ */
/* Gọi video, tên dài (24.10.2026): 1 dòng cắt "…" và chừa chỗ ô hình của mình góc trên phải – trước kia tên xuống dòng chui dưới ô hình */
.goi.co-hinh .goi-dau { width: 100%; padding-right: calc(min(28vw, 180px) + 20px); }
.goi.co-hinh .goi-ten { max-width: 100%; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goi-thu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.goi.goi-nho {
  inset: auto; right: 10px; top: calc(var(--cao-thanh-goi) + 72px); width: 1px; height: 1px; padding: 0;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.goi.goi-nho > :not(.goi-xa) { display: none; }
.goi.goi-nho.co-hinh { width: 104px; height: 140px; opacity: 1; pointer-events: auto; cursor: pointer; border-radius: 14px; border: 2px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
:root { --cao-thanh-goi: calc(48px + env(safe-area-inset-top)); }
.goi-thanh {
  position: fixed; z-index: 900; top: 0; left: 0; right: 0; height: var(--cao-thanh-goi); box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: env(safe-area-inset-top) 8px 0 4px;
  background: linear-gradient(135deg, #1b8a3c, #12a39a); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.goi-thanh.goi-thanh-den { background: linear-gradient(135deg, #1565d8, #35c7f0); } /* có người gọi đến (chưa nghe) */
.goi-thanh-ve {
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 22px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.goi-thanh-ve, .goi-thanh-chu { overflow: hidden; }
.goi-thanh-chu { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.goi-thanh-chu b { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goi-thanh-chu span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .9; font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.goi-thanh-cham { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: nhay 1.2s infinite; }
.goi-thanh-b {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer; transition: transform .15s;
}
.goi-thanh-b .ico { width: 20px; height: 20px; }
.goi-thanh-b.goi-bat { background: #fff; color: #0b1a2c; }
.goi-thanh-b.goi-do { background: #d32f2f; }
.goi-thanh-ve:focus-visible, .goi-thanh-b:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (hover: hover) {
  .goi-thu:hover, .goi-thanh-b:hover { transform: scale(1.1); }
  .goi-thanh-ve:hover { background: rgba(255, 255, 255, .14); }
}
body.goi-thu-nho #app { padding-top: var(--cao-thanh-goi); } /* padding (không dùng margin: margin dồn ra body → trang dài hơn màn hình) */
body.goi-thu-nho .khung-chinh { height: calc(100dvh - var(--cao-thanh-goi)); }
body.goi-thu-nho .dau { padding-top: 8px; } /* thanh gọi đã chừa phần tai thỏ / camera */
body.goi-thu-nho .bao-tin { top: calc(var(--cao-thanh-goi) + 8px); } /* dải "Tin mới từ …" hiện dưới thanh gọi */
@media (prefers-reduced-motion: reduce) { .goi-thanh-cham { animation: none; } .goi-thu, .goi-thanh-b { transition: none; } }
/* Mật khẩu không bắt buộc (đăng nhập bằng mã): ô gập lại, bấm mới mở */
.mk-tuy-chon { margin: 4px 0 10px; }
.mk-tuy-chon > summary { cursor: pointer; color: var(--chinh-2); font-weight: 600; padding: 6px 0; }
.chon-o { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.chon-o input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.huong-dan { padding-left: 22px; display: grid; gap: 6px; margin: 4px 0 12px; }
.ico-loa { --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='M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); }

/* 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-thu-nho { --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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%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-thich { --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 20.5s-7.5-4.6-9.3-9.2C1.5 8 3.6 4.5 7.1 4.5c2 0 3.5 1.1 4.9 2.9 1.4-1.8 2.9-2.9 4.9-2.9 3.5 0 5.6 3.5 4.4 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%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: 100%; max-width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .25)); }
/* Naloo: full-width hero brand on authentication screens */
.man-xanh-giua { max-width: 520px; padding-left: 12px; padding-right: 12px; }
.man-xanh .ten-app { margin: 8px 0 18px; }
.man-xanh .khau-hieu { text-align: center; }
.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; } }

/* ---- Bộ biểu cảm Naloo (public/bieu-cam.js) ---- */
.kho-bc { position: absolute; width: 0; height: 0; overflow: hidden; } /* kho hình ẩn – không dùng display:none (mất màu chuyển sắc) */
svg.bc { overflow: visible; }
.bc-o svg.bc { width: 1.3em; height: 1.3em; vertical-align: -.3em; margin: 0 .04em; }
.bc-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ký tự gốc: ẩn nhưng vẫn chép được */
.bc-o { position: relative; }
/* Tin chỉ có biểu cảm: to, không bong bóng */
.tin-hop:has(> .bc-chi:only-child), .tin.toi .tin-hop:has(> .bc-chi:only-child) { /* trả lời tin khác thì giữ bong bóng */ background: transparent; box-shadow: none; padding: 2px 0; }
/* Tin chỉ có ảnh / album / video đã tải: không bong bóng (bỏ khung màu quanh ảnh), ảnh tự bo góc.
   Trả lời tin khác (có khung trích), ảnh tải lỗi, nút "Xem video" chưa tải thì giữ bong bóng */
.tin-hop:has(> .tin-anh:only-child > img), .tin.toi .tin-hop:has(> .tin-anh:only-child > img),
.tin-hop:has(> .album:only-child), .tin.toi .tin-hop:has(> .album:only-child),
.tin-hop:has(> .tin-video:only-child > video), .tin.toi .tin-hop:has(> .tin-video:only-child > video) { background: transparent; box-shadow: none; padding: 0; }
.tin-hop > .tin-anh:only-child img, .tin-hop > .tin-video:only-child video { border-radius: 16px; }
.tin-hop > .album:only-child { border-radius: 16px; overflow: hidden; }
/* Ảnh chưa tải (chưa cuộn tới / đang tải): ô xám giữ chỗ, đỡ nhảy khi ảnh hiện */
.tin-hop > .tin-anh:only-child img:not([src]) { width: 180px; height: 135px; background: var(--mat-2); color: transparent; }
.bc-chi { display: inline-flex; gap: .25rem; align-items: flex-end; }
.bc-chi svg.bc-to { width: 3rem; height: 3rem; }
.bc-chi.bc-1 svg.bc-to { width: 4.25rem; height: 4.25rem; }
.bc-may { font-size: 2.6rem; line-height: 1.1; }
.bc-chi.bc-1 .bc-may { font-size: 3.6rem; }
/* Cảm xúc: hình màu thay nét vẽ cũ */
.cx-nut svg.bc.cx-hinh { width: 32px; height: 32px; }
.cx-chip svg.bc.cx-hinh { width: 18px; height: 18px; }
/* Ô soạn: nút biểu cảm nằm trong ô chữ */
.go-o { flex: 1; min-width: 0; position: relative; display: flex; }
.go-o textarea { flex: 1; min-width: 0; padding-right: 46px; }
.nut-bc {
  position: absolute; right: 4px; bottom: 4px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--chu-nhat); cursor: pointer;
}
.nut-bc .cx-hinh { width: 24px; height: 24px; }
.nut-bc .cx-hinh circle[r="0.6"] { fill: currentColor; }
.nut-bc[aria-expanded="true"] { color: var(--chinh-2); background: var(--mat); }
/* Khay chọn biểu cảm (trên ô soạn) */
.khay-bc:empty { display: none; }
.khay-bc { border-top: 1px solid var(--vien); background: var(--mat); padding: 8px 10px 4px; }
.bc-dau { display: flex; }
.bc-tim { flex: 1; min-width: 0; min-height: 40px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--vien); background: var(--mat-2); color: var(--chu); font: inherit; }
.bc-the { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0; scrollbar-width: none; }
.bc-tab { flex: none; min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--vien); background: transparent; color: var(--chu-nhat); font: inherit; font-size: .875rem; cursor: pointer; }
.bc-tab[aria-selected="true"] { background: var(--chinh-2); border-color: var(--chinh-2); color: #fff; }
@media (max-width: 420px) { .bc-tab { padding: 0 8px; font-size: .8125rem; } } /* 6 nhóm (có Lễ Tết) vừa 1 hàng trên điện thoại, cả tiếng Séc / Anh */
.bc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: min(232px, 32dvh); overflow-y: auto; padding-bottom: 4px; }
.bc-nut { height: 46px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.bc-nut svg.bc { width: 32px; height: 32px; }
.bc-nut:focus-visible, .bc-tab:focus-visible, .nut-bc:focus-visible { outline: 2px solid var(--chinh-2); outline-offset: 1px; }
.bc-trong { grid-column: 1 / -1; text-align: center; padding: 12px 0; }
@media (hover: hover) { .bc-nut:hover { background: var(--mat-2); } .nut-bc:hover { color: var(--chinh-2); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bc-nut, .bc-tab, .nut-bc { transition: transform .12s; }
  .bc-nut:hover { transform: scale(1.18); }
  .bc-tab:hover, .nut-bc:hover { transform: scale(1.06); }
}

/* ---- 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="rat-nho"] { font-size: 81.25%; }   /* anh Thanh 26.10.2026: chữ nhỏ hơn nữa */
html[data-cochu="nho"] { font-size: 90%; }
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); }
}

/* ---- Bước 1 App Store (22.10.2026): báo cáo vi phạm, xoá tài khoản, liên kết Điều khoản / Bảo mật ---- */
.nut-nguy { background: var(--do); border-color: var(--do); color: #fff; }
.bc-ly-do { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.bc-ly-do legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.bc-ly-do .chon { margin: 0; min-height: 44px; align-items: center; cursor: pointer; }
.bc-moi { color: var(--do); font-weight: 700; font-size: .9em; }
.bc-chung { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--do); border-radius: 8px; background: var(--mat-2); font-size: .9rem; overflow-wrap: anywhere; }
.bc-chung div { margin-top: 4px; }
.xoa-tk { margin: 0 0 16px; padding-left: 20px; }
.xoa-tk li + li { margin-top: 6px; }
.chan-trang { margin: 14px 0 0; text-align: center; font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.chan-trang a { display: inline-block; padding: 6px 2px; color: #bfe3ff; font-weight: 600; }

/* ---------- Mẫu 2 – làm gọn danh sách (anh Thanh chọn 23.10.2026) ---------- */
/* Ô "Tìm" dưới 2 tab: lọc tên ngay trên máy */
.tim-ds { display: flex; align-items: center; gap: 8px; margin: 8px 12px 4px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--mat-2); color: var(--chu-nhat); }
.tim-ds > .ico { width: 18px; height: 18px; }
.tim-ds input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--chu); font: inherit; outline: none; }
.tim-ds input::-webkit-search-cancel-button { display: none; }
.tim-ds:focus-within { box-shadow: 0 0 0 2px var(--chinh-2); }
.tim-ds .tim-xoa { width: 36px; height: 36px; min-height: 36px; border: 0; background: transparent; color: var(--chu-nhat); }
.tim-ds .tim-xoa .ico { width: 18px; height: 18px; }
.tim-ds .tim-xoa[hidden] { display: none; }
.nut-ve-cn[hidden] { display: none; }   /* nút ‹ Quay lại Cá nhân: chỉ khi mở từ ô vuông ở Cá nhân (.nut đặt inline-flex đè [hidden]) */
#nut-them-nhom[hidden], #tao-nhom-duoi[hidden], #the-tab[hidden] { display: none; }   /* Nhóm: bỏ dấu + ở đầu trang, hiện nút Tạo nhóm dưới danh sách (.nut / .hang-nut / .the-tab đặt display đè [hidden]; hàng Trò chuyện / Bạn bè ở Nhóm trước đây vẫn hiện vì thiếu dòng này) */
/* Menu nhỏ khi giữ lâu 1 cuộc: nút xếp dọc, rộng hết hộp */
.hang-nut.cot { flex-direction: column; align-items: stretch; }
.hang-nut.cot .nut { justify-content: flex-start; }
/* Cỡ chữ của 3 nút Vừa / To / Rất to (trước kia viết thẳng style="" → CSP chặn) */
/* hàng chọn Giao diện / Cỡ chữ: cỡ chữ nút cố định (px, không phình theo cỡ đã chọn); chật (tiếng Séc / Anh, máy hẹp) thì xuống hàng, không bị cắt */
.cd-doan.cd-doan-gd, .cd-doan.cd-doan-chu { flex-wrap: wrap; }
.cd-doan.cd-doan-gd > button, .cd-doan.cd-doan-chu > button { flex: 1 1 auto; min-width: 0; font-size: 15px; padding: 0 8px; white-space: nowrap; }
.cd-doan.cd-doan-chu > button:nth-child(1) { font-size: 12.5px; }
.cd-doan.cd-doan-chu > button:nth-child(2) { font-size: 14px; }
.cd-doan.cd-doan-chu > button:nth-child(3) { font-size: 15.5px; }
.cd-doan.cd-doan-chu > button:nth-child(4) { font-size: 17px; }
.cd-doan.cd-doan-chu > button:nth-child(5) { font-size: 18.5px; }
/* chữ nhỏ: ô nhập vẫn 16px – iPhone tự phóng to trang khi chạm ô nhập chữ dưới 16px */
html[data-cochu="rat-nho"] :is(input, textarea, select), html[data-cochu="nho"] :is(input, textarea, select) { font-size: 16px; }
.cd-doan > :nth-child(1) { font-size: .95rem; }
.cd-doan > :nth-child(2) { font-size: 1.1rem; }
.cd-doan > :nth-child(3) { font-size: 1.3rem; }
/* Ô tạm để chép chữ kiểu cũ (không hiện ra) */
.an-chep { position: fixed; top: 0; left: -9999px; opacity: 0; }
/* Dải "Tin mới từ …" khi đang ở cuộc khác */
.bao-tin {
  position: fixed; z-index: 20; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 24px)); min-height: 52px; padding: 8px 14px;
  border: 0; border-radius: 14px; background: var(--chinh); color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); animation: bao-tin-vao .25s ease-out;
}
.bao-tin:hover { transform: translateX(-50%) scale(1.02); }
.bao-tin > .ico { width: 22px; height: 22px; }
.bao-tin-chu { display: flex; flex-direction: column; min-width: 0; }
.bao-tin-chu span { font-size: .9em; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes bao-tin-vao { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-color-scheme: dark) { .bao-tin { background: #1f5f9e; } }
/* ---------- Tính năng đợt 1: sửa tin, chuyển tiếp, link, mã QR, lịch sử cuộc gọi (23.10.2026) ---------- */
.ico-qr { --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='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h2v2h-2zM18 18h2v2h-2zM14 19v1M19 14h1'/%3E%3C/svg%3E"); }
.ico-goi-di { --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 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); }
.ico-goi-den { --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='M17 7L7 17M15 17H7V9'/%3E%3C/svg%3E"); }
/* Link + số điện thoại trong tin */
.link-tin { color: var(--chinh-2); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tin.toi .link-tin { color: inherit; }
.link-host { overflow-wrap: anywhere; color: var(--do); }
.link-canh { margin: 6px 0 10px; padding-left: 20px; color: var(--do); font-weight: 600; }
.link-canh li { margin: 4px 0; }
/* Nhãn "Đã chuyển tiếp" + "đã sửa" */
.tin-ct { display: flex; align-items: center; gap: 4px; font-size: .75rem; font-style: italic; color: var(--chu-nhat); margin: 0 8px 2px; }
.tin.toi .tin-ct { justify-content: flex-end; }
.tin-ct .ico { width: 12px; height: 12px; }
.sua-nhan { border: 0; background: none; padding: 0 6px 0 0; font: inherit; font-style: italic; color: var(--chu-nhat); text-decoration: underline; cursor: pointer; min-height: 24px; }
.sua-nhan:hover { color: var(--chinh-2); }
.sua-noi { border-left-color: #f59e0b; }
.lich-sua { display: flex; flex-direction: column; gap: 8px; }
.lich-sua-ban { padding: 8px 12px; border-radius: 12px; background: var(--mat-2); overflow-wrap: anywhere; }
.lich-sua-ban b { display: block; font-size: .8rem; color: var(--chu-nhat); margin-bottom: 2px; }
.lich-sua-ban.hien-tai { background: color-mix(in srgb, var(--chinh-2) 14%, var(--mat)); }
/* Chọn cuộc để chuyển tiếp */
.o-tim-chuyen { width: 100%; min-height: 44px; padding: 0 12px; margin-bottom: 8px; border: 1px solid var(--vien); border-radius: 12px; background: var(--mat-2); color: var(--chu); font: inherit; }
.ds-chuyen { max-height: min(60dvh, 480px); overflow-y: auto; }
/* Dòng lịch sử cuộc gọi trong cuộc trò chuyện */
.tin-goi { align-self: center; display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 6px 8px 6px 12px; border: 1px solid var(--vien); border-radius: 14px; background: var(--mat); max-width: 100%; }
.tin-goi > .ico { width: 18px; height: 18px; color: var(--xanh); flex: none; }
.tin-goi.nho > .ico, .tin-goi.nho b { color: var(--do); }
.tin-goi-chu { display: flex; flex-direction: column; min-width: 0; font-size: .875rem; }
.tin-goi-chu small { color: var(--chu-nhat); font-size: .75rem; }
.tin-goi .nut { min-height: 36px; padding: 0 12px; }
/* Mã QR kết bạn */
.qr-khung { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 8px; }
.qr-anh { width: min(260px, 70vw); height: auto; aspect-ratio: 1; border-radius: 16px; box-shadow: var(--bong); image-rendering: pixelated; background: #fff; }
.qr-chu { text-align: center; }
.qr-ma { text-align: center; font-size: .95rem; }
.qr-ma b { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; user-select: all; }
/* Quét mã QR trong app: khung máy ảnh vuông, ô ngắm ở giữa */
.quet-khung { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto 8px; border-radius: 16px; overflow: hidden; background: #000; }
.quet-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.quet-o { position: absolute; inset: 16%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); pointer-events: none; }
.nick-toi .muc-ten { font-size: 1.05rem; }
.qr-link { font-size: .85rem; color: var(--chu-nhat); background: var(--mat-2); border-radius: 10px; padding: 6px 10px; overflow-wrap: anywhere; text-align: center; user-select: all; }
.ket-nguoi { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ket-nguoi .anh-dai { width: 56px; height: 56px; font-size: 1.4rem; }
.ket-nguoi b, .ket-nguoi small { display: block; overflow-wrap: anywhere; }
.ket-nguoi small { color: var(--chu-nhat); }
/* ---------- Gửi chắc: bản nháp + tin chờ gửi (23.10.2026) ---------- */
.muc-xem.nhap { color: var(--do); font-style: italic; }
.tin-bo { border: 0; background: none; font: inherit; color: var(--chu-nhat); text-decoration: underline; cursor: pointer; padding: 0 0 0 10px; min-height: 32px; }
.tin-bo:hover { color: var(--do); }
/* Video trong tin (bấm mới tải) – 23.10.2026 */
.tin-video video { display: block; max-width: min(320px, 70vw); max-height: 60dvh; border-radius: 12px; background: #000; }
.nut-cai { text-decoration: none; } /* nút "Tải app Naloo cho Android" là đường link tới /tai-app.html (24.10.2026) */
/* Chọn ngôn ngữ (lần đầu mở app + Cài đặt → Ngôn ngữ, 24.10.2026) */
.chon-nn { display: grid; gap: 10px; margin: 8px 0 12px; }
/* Thanh trên cùng: chữ "aloo" vẽ như logo, sát biểu tượng N mũi tên (24.10.2026) */
/* Mẫu 3 (anh chọn): N mũi tên + "aloo" to như logo, tên nhỏ bên phải sau vạch mảnh */
.dau .dau-logo { display: flex; align-items: center; gap: 8px; }
.dau .logo-chu { display: block; flex: none; height: 40px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.dau .vach-dau { flex: none; width: 1px; height: 22px; background: currentColor; opacity: .45; }
.dau .dau-logo .phu { flex: 1; min-width: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }

/* Thanh dưới (anh Thanh 24.10.2026, kiểu A): điện thoại = thanh dưới cùng (vào cuộc trò chuyện thì ẩn); máy tính = cột hẹp bên trái */
.khung-chinh { grid-template-rows: minmax(0, 1fr) auto; }
.cot-ds { grid-row: 1; grid-column: 1; }
.cot-ds[hidden] { display: none; }
.cot-chat { grid-row: 1 / -1; grid-column: 1; }
.thanh-duoi { grid-row: 2; grid-column: 1; display: flex; background: var(--mat); border-top: 1px solid var(--vien); padding: 4px 4px max(6px, env(safe-area-inset-bottom)); }
@media (max-width: 859px) { .khung-chinh.dang-chat .thanh-duoi { display: none; } }
.muc-duoi { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 0;
  background: transparent; color: var(--chu-nhat); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; transition: transform .12s; }
.muc-duoi:hover { transform: scale(1.06); }
.muc-duoi .vien-ico { width: 56px; height: 32px; border-radius: 999px; display: grid; place-items: center; }
.muc-duoi .ico { width: 24px; height: 24px; }
.muc-duoi .anh-dai { width: 28px; height: 28px; font-size: .8rem; }
.muc-duoi .anh-dai .cham-tt { display: none; }
.muc-duoi[aria-current="page"] { color: var(--chinh-2); }
.muc-duoi[aria-current="page"] .vien-ico { background: color-mix(in srgb, var(--chinh-2) 16%, transparent); }
.muc-duoi-chu { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muc-duoi .so-chua-doc { position: absolute; top: 0; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; font-size: .7rem; }
.muc-duoi .cham-do { position: absolute; top: 3px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%; background: var(--do); border: 2px solid var(--mat); }
@media (min-width: 860px) {
  .khung-chinh { grid-template-columns: 84px 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .thanh-duoi { grid-row: 1; grid-column: 1; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 12px 4px; border-top: 0; border-right: 1px solid var(--vien); background: var(--mat-2); }
  .thanh-duoi .cham-do { border-color: var(--mat-2); }
  .muc-duoi { flex: none; padding: 6px 2px; }
  .cot-ds { grid-column: 2; }
  .cot-chat { grid-column: 3; grid-row: 1; }
}
/* Trang Cuộc gọi: mỗi dòng = người + loại cuộc gọi + giờ, 2 nút gọi lại (thoại / video) */
.hang-goi { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-bottom: 1px solid var(--vien); }
.hang-goi > .muc { flex: 1; min-width: 0; border-bottom: 0; }
.hang-goi .muc-xem .ico { width: 15px; height: 15px; vertical-align: -3px; }
.nut-goi-lai { flex: none; width: 40px; min-height: 40px; height: 40px; border: 0; color: #fff; background: linear-gradient(135deg, #34e3b0, #12b5a6 50%, #0b8f8a); }
.nut-goi-lai.video { background: linear-gradient(135deg, #5fb2ff, #3b6cff 50%, #6a4bff); }
.nut-goi-lai .ico { width: 20px; height: 20px; }
/* Trang Cá nhân = Cài đặt cũ, nằm trong cột */
.ca-nhan { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 24px; }

/* ==========================================================================================
   GIAO DIỆN CHỐT NALOO (anh Thanh 25.10.2026, theo áp phích làm cùng ChatGPT): logo sóng + mũi tên, màu biển.
   Thay khối "Ocean sunrise" cũ. CHỈ đổi giao diện – không đụng logic, máy chủ, mã hoá.
   Màu chủ đạo: xanh đại dương #007BFF · xanh cyan #00C8FF · xanh ngọc #00D4FF · trắng #FFFFFF · bạc #E6F4FF.
   Chữ nhỏ luôn đọc rõ (≥ 4,5 : 1): chữ xanh / nền có chữ trắng dùng xanh đậm #0066D6 (5,4 : 1);
   #007BFF chỉ cho biểu tượng và chữ to (nút đăng nhập); #00C8FF / #00D4FF chỉ để pha màu chuyển, không làm chữ trên nền trắng.
   Sáng / tối theo máy (tối = xanh đêm #061a3a / #0b2a55). Phông chữ có sẵn trong máy (không tải phông).
   Bộ ảnh chốt (public/anh/): logo-naloo.png (chữ "al" trắng – CHỈ đặt trên nền xanh / tối), nen-song-doc.webp (màn chào / đăng nhập).
   Màu theo mệnh Thuỷ (anh Thanh 25.10.2026): chỉ xanh dương / xanh đêm / đen / trắng / bạc – không vàng, cam, vàng kim, nâu
   (cả xanh lá thay bằng xanh ngọc); đỏ chỉ để báo lỗi, kết thúc cuộc gọi, gọi nhỡ.
   ========================================================================================== */
:root {
  --xanh-bien: #007bff; --xanh-cyan: #00c8ff; --xanh-ngoc: #00d4ff; --bac: #e6f4ff;
  --nen: #eef6ff; --mat: #ffffff; --mat-2: #e6f4ff; --chu: #0b1f3a; --chu-nhat: #4f6580; --vien: #d5e6f7;
  --chinh: #0066d6; --chinh-2: #0066d6; --tin-toi: #0068e0; --chu-tin-toi: #ffffff; --tin-ban: #ffffff;
  --xanh: #0067a8; --do: #c62828; /* --xanh = trạng thái online / đã nối: xanh biển đậm (không xanh lá) */
  --bieu: var(--xanh-bien);   /* màu biểu tượng nét (.ico) ở thanh trên, thanh dưới, ô tìm… */
  --bieu-nhat: #5d7ea3;       /* biểu tượng mục chưa chọn ở thanh dưới */
  --nen-nut-chinh: linear-gradient(135deg, #0058cc 0%, #0068e0 55%, #0a72ea 100%); /* chữ trắng ≥ 4,5 : 1 ở mọi điểm */
  --nen-tin-toi: linear-gradient(135deg, #0058cc 0%, #0068e0 50%, #0a72ea 100%);
  --nen-tron-xanh: linear-gradient(145deg, #2f9bff 0%, #007bff 48%, #0058cc 100%); /* nút tròn biểu tượng trắng */
  --bong: 0 1px 3px rgba(0, 60, 140, .07), 0 8px 24px rgba(0, 60, 140, .07);
  --bo: 18px;
  --phong: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #061a3a; --mat: #0b2a55; --mat-2: #12376a; --chu: #eaf4ff; --chu-nhat: #a9c3e0; --vien: #1d4378;
    --chinh: #0a6fe0; --chinh-2: #5cc8ff; --tin-toi: #0a6fe0; --tin-ban: #12376a;
    --xanh: #5cd6ff; --do: #ff6b6b; --bieu: #3aa8ff; --bieu-nhat: #7fa6d6;
    --nen-nut-chinh: linear-gradient(135deg, #0058cc 0%, #0a6fe0 100%);
    --nen-tin-toi: linear-gradient(135deg, #0058cc 0%, #0a6fe0 100%);
    --bong: 0 2px 10px rgba(0, 0, 0, .32);
  }
}
body { font-family: var(--phong); }
dialog { border-radius: 22px; }
#bao { background: #0b1f3a; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

/* Nút chung: bo tròn, nút chính xanh đại dương chuyển màu */
.nut { border-radius: 14px; }
.nut-tron { border-radius: 50%; } /* giữ nút tròn (quay lại, gọi, tạo nhóm…) không bị .nut ở trên đè */
.nut-chinh { background: var(--nen-nut-chinh); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(0, 102, 214, .22); }
.nut-nguy { background: #d32f2f; border-color: #d32f2f; }
.o input, .o textarea { border-radius: 14px; }
.o input:focus, .o textarea:focus { border-color: var(--xanh-bien); }

/* Thanh trên cùng (danh sách, cuộc trò chuyện, Cuộc gọi, Cá nhân): xanh đại dương chuyển màu như áp phích, logo chữ trắng,
   chữ + biểu tượng trắng (chữ trắng trên #0a3fb8 … #0b6cf0 ≥ 4,7 : 1); tối: xanh đêm sâu hơn */
.dau {
  background: linear-gradient(120deg, #0a3fb8 0%, #0b56d8 55%, #0b6cf0 100%); color: #fff; border-bottom: 0;
  box-shadow: 0 4px 16px rgba(10, 63, 184, .22); position: relative; z-index: 1;
}
.dau .nut { color: #fff; }
.dau .nut-tron { width: 40px; height: 40px; min-height: 40px; flex: none; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24); }
.dau .nut-tron .ico { width: 21px; height: 21px; }
.dau .nut-nbt, .dau .nut-nbt:has(.ico-goi), .dau .nut-nbt:has(.ico-video) { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
@media (hover: hover) { .dau .nut-tron:hover { background: rgba(255, 255, 255, .26); } }
.dau h2 { color: #fff; font-size: 1.08rem; font-weight: 700; }
.dau .phu, .dau .dang-soan { color: #fff; opacity: 1; }
.dau > .anh-dai { width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.dau .anh-dai .cham-tt { border-color: #0b56d8; width: 12px; height: 12px; }
.dau .cham { background: #5ee7ff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } /* đã nối máy chủ (đỏ nhấp nháy = mất nối) */
.dau .cham.mat { background: #ff6b6b; }
.dau .dau-logo { gap: 10px; }
.dau .logo-chu { display: block; flex: none; height: 36px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 20, 80, .35)); }
.dau .vach-dau { background: #fff; opacity: .45; height: 24px; }
.dau .dau-logo .phu { font-size: .9rem; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .dau { background: linear-gradient(120deg, #06184a 0%, #0a2a6e 55%, #0b3d99 100%); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
  .dau .anh-dai .cham-tt { border-color: #0a2a6e; }
}

/* Tab Trò chuyện / Bạn bè (và Tất cả / Gọi nhỡ): viên thuốc tròn như áp phích */
.the-tab { gap: 8px; padding: 8px 12px 6px; border-bottom: 0; background: var(--mat); overflow-x: auto; scrollbar-width: none; }
.the-tab::-webkit-scrollbar { display: none; }
.tab {
  flex: none; flex-wrap: nowrap; min-height: 38px; padding: 0 16px; gap: 6px; border: 0; border-radius: 999px;
  background: var(--mat-2); color: var(--chu); font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--nen-nut-chinh); color: #fff; box-shadow: 0 4px 12px rgba(0, 102, 214, .28); }
.tab .ico-tron { display: none; }
.tab .phu-tab { color: var(--xanh); font-weight: 700; }
.tab[aria-selected="true"] .phu-tab { color: #fff; }
.tab[aria-selected="true"] .so-chua-doc { background: #fff; color: #0058cc; }

/* Ô tìm: tròn, nền bạc */
.tim-ds { margin: 6px 12px 8px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--mat-2); }
.tim-ds > .ico { color: var(--bieu); }
.tim-ds input::placeholder { color: var(--chu-nhat); opacity: 1; }

/* Danh sách: dòng thoáng, ảnh to, không kẻ vạch; số chưa đọc trong chấm xanh */
.ds { background: var(--mat); }
.muc { padding: 10px 14px; gap: 12px; border-bottom: 0; }
.muc > .anh-dai { width: 52px; height: 52px; font-size: 1.15rem; }
.muc-ten { font-size: 1.02rem; color: var(--chu); }
.muc-xem { font-size: .9rem; }
.muc-ben { font-size: .78rem; gap: 6px; }
.muc[aria-current="true"] { background: var(--mat-2); }
@media (hover: hover) { .muc:hover { background: color-mix(in srgb, var(--mat-2) 65%, transparent); } }
.hang-goi { border-bottom: 0; }
.anh-dai { background: linear-gradient(145deg, #00b4f0 0%, #007bff 45%, #0058cc 100%); color: #fff; box-shadow: 0 3px 10px rgba(0, 102, 214, .2); }
.so-chua-doc { background: var(--chinh); color: #fff; }
.ds > .nut { border-radius: 999px; }
.ds > .nut-rong { display: flex; } /* biểu tượng + chữ thẳng hàng (trước là block: dấu + bị lệch lên) */
.ds > .nut:not(.nhac-moi):not(.nhac-gap) .ico, .hop-dau .nut .ico, .hang-nut .nut:not(.nut-chinh):not(.nut-do):not(.nut-nguy) .ico,
.ghim-bar > .ico, .tim-hang .nut .ico, .muc-nhan { color: var(--bieu); }
.nut-goi-lai, .nut-goi-lai.video { background: var(--mat-2); color: var(--bieu); box-shadow: none; }
.bc-tab[aria-selected="true"] { background: var(--chinh); border-color: var(--chinh); }

/* Cuộc trò chuyện: nền xanh rất nhạt, tin của mình xanh chuyển màu chữ trắng, tin bạn nền trắng */
.cot-chat { background: var(--nen); }
.tin-ds { padding: 14px 12px 6px; gap: 6px; }
.tin-hop { padding: 9px 14px; border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 60, 140, .08), 0 4px 14px rgba(0, 60, 140, .06); }
.tin:not(.toi) .tin-hop { border-bottom-left-radius: 6px; }
.tin.toi .tin-hop { background: var(--nen-tin-toi); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 4px 14px rgba(0, 102, 214, .25); }
.tin-he-thong { background: var(--mat); box-shadow: var(--bong); }
.tin-goi { border-color: transparent; box-shadow: var(--bong); }
.tin:not(.toi) .tin-thoai .nut-chinh { background: var(--nen-tron-xanh); box-shadow: 0 3px 10px rgba(0, 102, 214, .3); }
/* Ô soạn: tròn nền bạc; nút kẹp tệp ô tròn bạc, nút ghi âm + gửi tròn xanh */
.go { gap: 8px; padding: 8px 10px; background: var(--mat); border-top: 1px solid var(--vien); }
.go textarea { padding: 11px 16px; border-radius: 24px; border-color: transparent; background: var(--mat-2); }
.go .nut-mic:has(.ico-kep) { background: var(--mat-2); color: var(--bieu); box-shadow: none; }
.go .nut-mic:has(.ico-mic), .go .nut-chinh { background: var(--nen-tron-xanh); color: #fff; box-shadow: 0 4px 12px rgba(0, 102, 214, .32); }
.nut-bc { color: var(--bieu); }

/* Thanh dưới (Trò chuyện · Cuộc gọi · Cá nhân): nền trắng, mục đang mở biểu tượng xanh + chữ xanh đậm */
.thanh-duoi { padding-top: 6px; background: var(--mat); border-top: 1px solid var(--vien); box-shadow: 0 -4px 16px rgba(0, 60, 140, .06); }
.muc-duoi { gap: 3px; color: var(--chu-nhat); }
.muc-duoi .vien-ico { width: 60px; height: 32px; color: var(--bieu-nhat); }
.muc-duoi[aria-current="page"] { color: var(--chinh-2); font-weight: 700; }
.muc-duoi[aria-current="page"] .vien-ico { color: var(--bieu); background: var(--mat-2); }
@media (min-width: 860px) {
  .thanh-duoi { background: var(--mat); border-right: 1px solid var(--vien); box-shadow: none; }
  .thanh-duoi .cham-do { border-color: var(--mat); }
}

/* Màn gọi: nền xanh đêm, nút tròn bóng kính (kết thúc đỏ) */
.goi { background: radial-gradient(120% 80% at 50% 0%, #0b3b7a 0%, #0b2a55 45%, #061a3a 100%); }
.goi-anh { box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 12px 32px rgba(0, 0, 0, .4); }
.goi-b-icon {
  background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .10) 55%, rgba(255, 255, 255, .18) 100%);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -8px 14px rgba(0, 0, 0, .14), 0 8px 20px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.goi-do .goi-b-icon { background: linear-gradient(180deg, #ff6b6b 0%, #e53935 55%, #c62828 100%); border-color: rgba(255, 255, 255, .45); }
.goi-xanh .goi-b-icon { background: linear-gradient(180deg, #5ee7ff 0%, #00a8f0 55%, #0070d8 100%); border-color: rgba(255, 255, 255, .45); } /* nút Nghe: xanh ngọc (không xanh lá) */
.goi-bat .goi-b-icon { background: #fff; color: #0b2a55; }
.goi-b-chu { font-size: .8rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.goi-thu { border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Màn chào + đăng nhập / đăng ký / quên mật khẩu / mở khoá / chọn ngôn ngữ (bộ ảnh chốt): nền sóng ánh sáng xanh
   (trên xanh đêm để logo, sóng sáng ở đáy – ảnh đã tối nên chỉ phủ rất nhẹ), logo chữ trắng to, khẩu hiệu, nút viên thuốc.
   Màn rộng: nền xanh đêm cùng màu ảnh, ảnh dọc cao bằng màn đặt giữa, hai mép mờ dần (không lộ đường nối). */
.man-xanh { position: relative; isolation: isolate; background: linear-gradient(180deg, #011652 0%, #011247 22%, #010f3e 55%, #01123e 80%, #010d32 100%); }
.man-xanh::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 16, 66, 0) 60%, rgba(1, 16, 66, .3) 100%), url("/anh/nen-song-doc.webp?v=1") center bottom / cover no-repeat;
}
@media (min-aspect-ratio: 3/4) {
  .man-xanh::before {
    left: 50%; right: auto; width: calc(100vh * 941 / 1672); transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  }
}
.man-xanh-giua { padding-top: max(24px, env(safe-area-inset-top)); }
.man-xanh-giua::before { content: ""; flex: 1 0 0; max-height: 12vh; } /* màn cao: đẩy logo xuống một chút */
.man-xanh .ten-app { margin: 0; line-height: 0; }
.man-xanh .logo-naloo { width: min(250px, 68vw); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0, 10, 50, .5)); }
.khau-hieu { margin: 6px 0 14px; text-align: center; font-size: 1.32rem; font-weight: 700; line-height: 1.3; color: #fff; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
/* màn chào: logo to ở khoảng 1/3 màn, 2 nút ngay dưới, link nhỏ trên nền tối; sóng sáng ở đáy để trống như áp phích */
.man-chao .man-xanh-giua::before { max-height: 22vh; }
.man-chao .logo-naloo { width: min(320px, 84vw); }
.man-chao .khau-hieu { font-size: 1.45rem; margin-bottom: 30px; }
.chao-nut { display: grid; gap: 14px; }
.man-chao .day { margin-top: 10px; padding-top: 6px; }
.man-xanh .tieu-de { margin: 0 0 12px; }
.man-xanh .o > span:not(.o-mat-khau) { margin-left: 14px; font-size: .88rem; }
.man-xanh .o input, .man-xanh .o-so-email .ma-nuoc { min-height: 52px; border-radius: 26px; background: #fff; color: #0b1f3a; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.man-xanh .o input { padding: 12px 20px; }
.man-xanh .o-mat-khau input { padding-right: 56px; }
.man-xanh .o-so-email .ma-nuoc { padding: 0 10px 0 14px; }
.man-xanh .nut-mat { right: 6px; color: #0066d6; }
.man-xanh .nut { min-height: 54px; border-radius: 27px; font-size: 1.2rem; font-weight: 700; } /* chữ to (≥ 18,7 px đậm) */
.man-xanh .nut-chinh {
  border: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 100, .35);
  background: linear-gradient(90deg, #0062e6 0%, #007bff 45%, #00c8ff 100%);
  box-shadow: 0 8px 22px rgba(0, 123, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.man-xanh .nut-phu { background: rgba(1, 16, 66, .35); color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.man-xanh .chon-nn .nut:not(.nut-chinh) { background: rgba(255, 255, 255, .95); color: #0b1f3a; border: 0; }
.man-xanh .day { padding-top: 16px; text-align: center; }
/* chữ nhỏ cuối màn (Tải app, Điều khoản · Bảo mật) có thể nằm trên dải sóng sáng: đặt trên viên nền xanh đêm cho đủ tương phản */
.man-xanh .nut-cai, .man-xanh .chan-trang {
  display: inline-flex; width: auto; min-height: 40px; margin: 6px auto 0; padding: 4px 16px; border: 0; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: #fff; background: rgba(1, 14, 56, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.man-xanh .chan-trang { align-items: center; gap: 4px; }
.man-xanh .chan-trang a { color: #fff; }
.man-xanh .lien-ket, .man-xanh .ngan { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
@media (max-height: 700px) {
  .man-xanh .logo-naloo { width: min(220px, 62vw); }
  .man-chao .logo-naloo { width: min(260px, 72vw); }
}

/* Màu theo mệnh Thuỷ (anh Thanh 25.10.2026): ghi đè màu cũ ở phần trên – ô Cá nhân, biểu tượng cảm xúc nét, viền sửa tin,
   thanh cuộc gọi thu nhỏ, chấm online … chỉ còn họ xanh dương / xanh ngọc; đỏ giữ cho lỗi, kết thúc, gọi nhỡ */
.cd-o:nth-child(1), .cd-hang:nth-child(6n+1) { --mau-bieu: #0066d6; }
.cd-o:nth-child(2), .cd-hang:nth-child(6n+2) { --mau-bieu: #0a3fb8; }
.cd-o:nth-child(3), .cd-hang:nth-child(6n+3) { --mau-bieu: #0284c7; }
.cd-o:nth-child(4), .cd-hang:nth-child(6n+4) { --mau-bieu: #1d4ed8; }
.cd-hang:nth-child(6n+5) { --mau-bieu: #0b6cf0; }
.cd-hang:nth-child(6n+6) { --mau-bieu: #06246e; }
.cx-thich, .cx-yeu, .cx-cuoi, .cx-ngac, .cx-buon, .cx-gian { color: var(--bieu); }
.nut-bc .cx-hinh { color: inherit; }
.sua-noi { border-left-color: var(--xanh-bien); }
.man-xanh .canh-bao .ico { color: #7cd8ff; }
.goi-thanh { background: linear-gradient(135deg, #0a3fb8, #0b6cf0); }
.cham-nho, .cham-tt.bat { background: #00c8ff; }
.tin-goi > .ico { color: var(--bieu); }
.ico-tron-ban { background: var(--nen-tron-xanh); }
@media (prefers-reduced-motion: reduce) { .nut, .muc { transition: none !important; } }

/* ========== Đợt 2 – Trạng thái 24 giờ, mục Nhật ký (25.10.2026) ==========
   Khối riêng ở cuối tệp (không đụng màn đăng nhập / thanh trên). Màu chỉ bằng class (CSP chặn style viết thẳng).
   Theo giao diện chốt + màu mệnh Thuỷ: chỉ xanh dương / xanh đêm / xanh ngọc / đen / trắng / bạc (không vàng, cam, vàng kim, nâu, xanh lá). */
.ico-nhatky { --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 7v5l3.2 2'/%3E%3C/svg%3E"); }
.ico-viet { --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 20h4L18.5 9.5a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E"); }
.ico-chuong-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='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%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
/* Chấm "bạn bè có trạng thái mới" trên mục Nhật ký (xanh – không phải việc gấp như chấm đỏ) */
.muc-duoi .cham-moi { position: absolute; top: 3px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%; background: var(--chinh-2); border: 2px solid var(--mat); }
@media (prefers-reduced-motion: no-preference) { .muc-duoi .cham-moi { animation: nhay 1.6s 3; } }

/* Trang Nhật ký: hàng vòng tròn (của tôi + bạn bè), rồi trạng thái của tôi */
.nhat-ky { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; }
.tt-hang { display: flex; gap: 2px; overflow-x: auto; padding: 12px 6px 10px; border-bottom: 1px solid var(--vien); scrollbar-width: none; }
.tt-hang::-webkit-scrollbar { display: none; }
@media (min-width: 860px) { .tt-hang { flex-wrap: wrap; overflow-x: visible; } }
.tt-o { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; border: 0; border-radius: 14px;
  background: transparent; color: var(--chu); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: transform .12s; }
.tt-o:hover { transform: scale(1.06); }
.tt-vong { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: var(--vien); }
.tt-vong.moi { background: conic-gradient(from 200deg, #00d4ff, #007bff, #0a3fb8, #00c8ff, #00d4ff); }
.tt-vong.cua-toi { background: linear-gradient(135deg, #00c8ff, #0058cc); }
.tt-vong.trong { background: transparent; padding: 0; }
.tt-vong.tat { opacity: .45; }
.tt-vong > .anh-dai { width: 100%; height: 100%; border: 3px solid var(--mat); font-size: 1.3rem; box-shadow: none; }
.tt-vong.trong > .anh-dai { border: 0; }
.tt-cong { position: absolute; right: -1px; bottom: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chinh); color: #fff; border: 2px solid var(--mat); } /* --chinh: dấu + trắng rõ cả nền tối (--chinh-2 tối là xanh nhạt) */
.tt-cong .ico { width: 14px; height: 14px; }
.tt-ten { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-goi-y { margin: 12px 16px; color: var(--chu-nhat); font-size: .9rem; }
.tt-tieu-de { margin: 16px 16px 4px; font-size: .95rem; }
.tt-dong { display: flex; align-items: center; gap: 4px; padding-right: 8px; border-bottom: 1px solid var(--vien); }
.tt-dong-xem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 4px 8px 14px; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tt-dong-xem .muc-giua { display: flex; flex-direction: column; }
.tt-nho { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--mat-2); color: var(--chu-nhat); }
.tt-nho img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-nho > span { max-width: 100%; padding: 3px; font-size: .55rem; font-weight: 700; line-height: 1.15; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tt-so-xem { flex: none; min-height: 40px; padding: 0 10px; gap: 4px; border-color: transparent; background: var(--mat-2); color: var(--chu); }
.tt-so-xem .ico { width: 18px; height: 18px; }
.tt-nut-duoi { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 16px 0; }
.tt-nut-duoi .nut-chinh { flex: 1 1 180px; }
.tt-nut-duoi .ico, .tt-ai-xem > .ico, .tt-chon-nguoi .ico { width: 20px; height: 20px; }

/* Xem trạng thái: nền đen kín màn hình (máy tính: 1 cột dọc tỉ lệ 9:16 ở giữa), thanh tiến trình trên cùng */
#hop[data-loai="tt"] {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0;
  background: #000; color: #fff; box-shadow: none; overflow: hidden;
}
#hop[data-loai="tt"]::backdrop { background: #000; }
.tt-xem { position: relative; width: 100%; max-width: min(100%, 56.25dvh); height: 100%; margin: 0 auto; display: flex; flex-direction: column; outline: none; }
.tt-thanh { display: flex; gap: 4px; padding: max(8px, env(safe-area-inset-top)) 10px 0; }
.tt-doan { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.tt-doan.xong { background: #fff; }
.tt-day { display: block; height: 100%; background: #fff; transform-origin: left center; animation: tt-chay 5s linear forwards; }
.tt-day.tt-lau { animation-duration: 6s; }
.tt-xem.dung .tt-day { animation-play-state: paused; }
@keyframes tt-chay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tt-dau { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; }
.tt-dau .anh-dai { width: 40px; height: 40px; font-size: 1rem; }
.tt-ai { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-ai b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-ai small { font-size: .8rem; opacity: .8; }
.tt-xem .nut-tron, .tt-nut-xem { flex: none; background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.tt-xem .nut-chinh.nut-tron { background: var(--nen-tron-xanh); }
.tt-than { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: center; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.tt-anh { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tt-anh img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.tt-chu-anh { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 32px 16px 14px; text-align: center; font-size: 1rem;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72)); overflow-wrap: anywhere; white-space: pre-wrap; }
.tt-chu-to { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 4px 8px; padding: 24px 20px; border-radius: 18px; }
.tt-chu-to p { margin: 0; max-height: 100%; overflow-y: auto; text-align: center; font-size: clamp(1.25rem, 5.5vw, 1.8rem); font-weight: 700; line-height: 1.35;
  overflow-wrap: anywhere; white-space: pre-wrap; }
.tt-chu-to .link-tin { color: #fff; }
.tt-loi { text-align: center; opacity: .8; }
.tt-chan { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
.tt-form { flex: 1; min-width: 0; display: flex; gap: 8px; }
.tt-tra-loi { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .1); color: #fff; }
.tt-tra-loi::placeholder { color: rgba(255, 255, 255, .78); }
.tt-nut-xem { min-height: 44px; }
.tt-lop { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; display: flex; flex-direction: column; background: var(--mat); color: var(--chu);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .45); }
.tt-lop[hidden] { display: none; }
.tt-lop-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--vien); }
.tt-xem .tt-lop .nut-tron { background: var(--mat-2); color: var(--chu); }
.tt-lop-ds { overflow-y: auto; padding: 4px 16px max(16px, env(safe-area-inset-bottom)); }

/* Màn đăng trạng thái */
.tt-soan .the-tab { margin: -4px 0 12px; }
.tt-soan-chu { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 16px; border-radius: 18px; }
.tt-go { width: 100%; min-height: 150px; resize: none; border: 0; outline: none; background: transparent; color: #fff; text-align: center;
  font-size: 1.35rem; font-weight: 700; line-height: 1.35; }
.tt-go::placeholder { color: rgba(255, 255, 255, .8); }
.tt-soan-chu:focus-within { outline: 3px solid var(--chinh-2); outline-offset: 2px; }
.tt-soan-duoi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.tt-mau-chon { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-o-mau { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 3px solid var(--mat); box-shadow: 0 0 0 1px var(--vien); cursor: pointer; transition: transform .12s; }
.tt-o-mau:hover { transform: scale(1.1); }
.tt-o-mau[aria-checked="true"] { box-shadow: 0 0 0 3px var(--chinh-2); }
.tt-dem { flex: none; color: var(--chu-nhat); }
.tt-soan-anh { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 220px; margin-bottom: 10px; border-radius: 18px; overflow: hidden; background: #000; }
.tt-soan-anh img { display: block; max-width: 100%; max-height: 45dvh; object-fit: contain; }
.tt-soan-anh.trong { flex-direction: column; gap: 8px; border: 2px dashed var(--vien); background: var(--mat-2); color: var(--chinh-2); font: inherit; font-weight: 700; cursor: pointer; }
.tt-soan-anh.trong .ico { width: 40px; height: 40px; }
.tt-soan > .nut-rong:not(.nut-chinh) { margin-bottom: 10px; }
.tt-ai-xem { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--mat-2); }
.tt-ai-xem .muc-giua { min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.tt-ai-xem .nut { flex: none; min-height: 40px; }
.tt-ghi-chu { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.tt-ghi-chu .ico { width: 16px; height: 16px; }
/* Ai xem trạng thái của tôi */
.tt-chon { margin: 10px 0; cursor: pointer; }
.tt-chon b, .tt-chon small { display: block; }
.tt-chon small { color: var(--chu-nhat); }
.tt-chon-nguoi { width: calc(100% - 32px); margin: 0 0 8px 32px; justify-content: flex-start; text-align: left; padding: 8px 14px; }
.tt-dong-chon { cursor: pointer; }
.tt-dong-chon[hidden] { display: none; }
.tt-dong-chon input { flex: none; width: 22px; height: 22px; }
.tt-dong-chon .muc-giua { min-width: 0; display: flex; flex-direction: column; }
/* Tin trả lời trạng thái: trích nhỏ có biểu tượng Nhật ký (không bấm được – trạng thái có thể đã hết hạn) */
.tin-trich-tt { cursor: default; }
.tin-trich-tt b { display: flex; align-items: center; gap: 4px; }
.tin-trich-tt .ico { width: 14px; height: 14px; }
/* 6 nền màu của trạng thái chữ (chữ đậm, cỡ lớn) – màu mệnh Thuỷ: xanh đại dương, xanh đêm, xanh ngọc, đen, bạc (chữ xanh đêm), xanh hoàng gia.
   Để cuối khối: đè nền / màu chữ mặc định của ô nhỏ (.tt-nho) */
.tt-mau-0 { background: linear-gradient(135deg, #0058cc, #0a72ea); color: #fff; }
.tt-mau-1 { background: linear-gradient(135deg, #0a3fb8, #06184a); color: #fff; }
.tt-mau-2 { background: linear-gradient(135deg, #0284c7, #075985); color: #fff; }
.tt-mau-3 { background: linear-gradient(135deg, #1b2433, #05080d); color: #fff; }
.tt-mau-4 { background: linear-gradient(135deg, #e6f4ff, #b9cde3); color: #0b1f3a; }
.tt-mau-5 { background: linear-gradient(135deg, #1d4ed8, #0a2a6e); color: #fff; }
.tt-mau-4 .tt-go, .tt-chu-to.tt-mau-4 .link-tin { color: #0b1f3a; }
.tt-mau-4 .tt-go::placeholder { color: rgba(11, 31, 58, .7); }

/* ---------- Bảng tin – Đợt 3, mục Nhật ký (25.10.2026): thẻ bài trắng bo tròn trên nền xanh nhạt, ảnh vừa khung,
   nút Thích / Bình luận; đã thích = trái tim đặc xanh (màu mệnh Thuỷ – không đỏ) ---------- */
.bang-tin { margin-top: 18px; padding-top: 4px; border-top: 8px solid var(--mat-2); }
.bt-viet { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 8px 12px 12px; padding: 10px 14px; border: 1px solid var(--vien);
  border-radius: 18px; background: var(--mat); color: var(--chu-nhat); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--bong); transition: transform .12s; }
.bt-viet:hover { transform: scale(1.02); }
.bt-viet .anh-dai { width: 40px; height: 40px; flex: none; }
.bt-viet-chu { flex: 1; min-width: 0; }
.bt-viet > .ico { width: 24px; height: 24px; color: var(--bieu); }
.bai { margin: 0 12px 12px; padding: 12px 0 4px; border: 1px solid var(--vien); border-radius: 18px; background: var(--mat); box-shadow: var(--bong); overflow: hidden; }
.bai-dau { display: flex; align-items: center; gap: 10px; padding: 0 8px 8px 14px; }
.bai-dau .anh-dai { width: 42px; height: 42px; flex: none; }
.bai-dau .muc-giua { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bai-dau .nut-tron, .bl-dong .nut-tron { width: 40px; height: 40px; min-height: 40px; flex: none; border-color: transparent; background: transparent; color: var(--chu-nhat); }
.bai-dau .nut-tron .ico, .bl-dong .nut-tron .ico { width: 20px; height: 20px; }
.bai-chu { margin: 0 14px 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.bai-chu.gon { display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.bai-chu.gon + .link-nho { margin: -6px 14px 8px; }
.bai-anh { display: block; width: 100%; padding: 0; border: 0; background: var(--mat-2); color: var(--chu-nhat); font: inherit; cursor: zoom-in; }
.bai-anh img { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: cover; }
.bai-anh > .ico { display: block; width: 32px; height: 32px; margin: 24px auto 6px; }
.bai-anh > span:not(.ico) { display: block; padding-bottom: 20px; text-align: center; }
.bai-dem { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 14px 0; color: var(--chu-nhat); font-size: .875rem; }
.bai-dem[hidden] { display: none; }
.bai-so-thich, .bai-dem .link-nho { display: inline-flex; align-items: center; gap: 4px; }
.bai-so-bl { margin-left: auto; } /* chỉ có bình luận (chưa ai thích): số bình luận vẫn nằm bên phải */
.bai-dem .ico { width: 16px; height: 16px; color: var(--chinh-2); }
.bai-nut-hang { display: flex; gap: 4px; margin: 6px 8px 0; padding-top: 4px; border-top: 1px solid var(--vien); }
.bai-nut { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px;
  background: transparent; color: var(--chu-nhat); font: inherit; font-weight: 600; cursor: pointer; transition: transform .12s, background-color .12s; }
.bai-nut:hover { background: var(--mat-2); transform: scale(1.03); }
.bai-nut .ico { width: 20px; height: 20px; }
.bai-nut.bat { color: var(--chinh-2); }
.link-nho { min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: var(--chinh-2); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.link-nho:hover { text-decoration: underline; }
.bt-them { width: calc(100% - 24px); margin: 4px 12px 0; }
.bt-go { width: 100%; min-height: 140px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--vien); background: var(--mat); color: var(--chu);
  font: inherit; line-height: 1.45; resize: vertical; }
.bt-go:focus { outline: 3px solid var(--chinh-2); outline-offset: 1px; }
.bt-dem { justify-content: flex-end; }
.bt-hang-anh { margin: 0 0 4px; }
.bt-hang-anh .ico { width: 20px; height: 20px; }
/* Bình luận */
.bl-ds { max-height: 55dvh; overflow-y: auto; margin: -4px 0 8px; }
.bl-dong { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.bl-dong > .anh-dai { width: 34px; height: 34px; flex: none; font-size: .85rem; }
.bl-bong { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 16px; background: var(--mat-2); }
.bl-ten { display: block; font-size: .875rem; }
.bl-chu { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bl-bong .muc-xem { font-size: .75rem; }
.bl-viet { display: flex; align-items: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--vien); }
.bl-go { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; padding: 10px 14px; border-radius: 22px; border: 1px solid var(--vien);
  background: var(--mat-2); color: var(--chu); font: inherit; resize: none; }
.bl-go:focus { outline: 3px solid var(--chinh-2); outline-offset: 1px; }
.bl-viet .nut-tron { flex: none; }
.bl-viet .nut-tron .ico { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .bt-viet:hover, .bai-nut:hover { transform: none; } }
.bai-nut.bat .ico-thich, .bai-dem .ico-thich { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.5 8 3.6 4.5 7.1 4.5c2 0 3.5 1.1 4.9 2.9 1.4-1.8 2.9-2.9 4.9-2.9 3.5 0 5.6 3.5 4.4 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); }

/* ---- Chuẩn bị cho Claude: cho-gpt-naloo.md, 25.10.2026 ----
   Chỉ kiểu hiển thị. Claude điều khiển mở/đóng, disabled, đồng ý và lọc nội dung.
   Không tạo menu điều hướng mới; không tự mở nội dung ẩn khi hover/focus. */
.hop-than .lien-ket { color: var(--chinh-2); }
.lien-ket:disabled, .lien-ket[aria-disabled="true"] { opacity: .55; cursor: default; text-decoration: none; }
.lien-ket:disabled:hover, .lien-ket[aria-disabled="true"]:hover { transform: none; }
.lien-ket.nguy { color: var(--do); text-decoration: underline; text-underline-offset: 3px; }
.man-xanh .lien-ket.nguy { color: #ffb7bf; }

/* A5/A6: nhắc mã hoá và cảnh báo; icon nằm cùng dòng, chữ dài xuống dòng. */
.bao-e2e {
  display: flex; align-items: flex-start; gap: 8px; margin: 8px 12px; padding: 10px 12px;
  border: 1px solid var(--vien); border-radius: 14px; background: var(--mat-2);
  color: var(--chu); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere;
}
.bao-e2e > .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--chinh-2); }
.bao-e2e > :not(.ico) { min-width: 0; }
.bao-e2e p { margin: 0; }
.bao-e2e.canh-bao {
  border-color: color-mix(in srgb, var(--do) 45%, var(--mat)); border-inline-start: 4px solid var(--do);
  background: color-mix(in srgb, var(--do) 8%, var(--mat)); color: var(--do); font-weight: 650;
}
.bao-e2e.canh-bao > .ico { color: inherit; }

/* A7: chỉ giảm sắc độ thẻ; không làm mờ nút Xoá hoặc chữ giải thích. */
.the-bai.khoa-cu, .bai.khoa-cu {
  margin: 0 12px 12px; padding: 12px 0 4px; border: 1px dashed var(--vien); border-radius: 18px;
  background: color-mix(in srgb, var(--mat-2) 55%, var(--mat)); color: var(--chu-nhat); box-shadow: none;
}
.the-bai.khoa-cu .bai-chu, .bai.khoa-cu .bai-chu { color: var(--chu-nhat); }
.the-bai.khoa-cu .nut:has(.ico-rac), .bai.khoa-cu .nut:has(.ico-rac) { color: var(--do); }

/* B1/B3: menu hành động. Parent của bản không-popover phải định vị relative.
   Bản popover nằm trên cùng; Claude tính tọa độ theo nút và giữ trong viewport. */
.nut-them {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--chu-nhat); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.nut-them .ico { width: 22px; height: 22px; }
.nut-them[aria-expanded="true"] { background: var(--mat-2); color: var(--chinh-2); border-color: var(--vien); }
.menu-nho {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 1100;
  display: grid; gap: 2px; width: max-content; min-width: min(190px, calc(100vw - 32px));
  max-width: min(300px, calc(100vw - 32px)); max-height: min(360px, calc(100dvh - 32px)); overflow-y: auto;
  margin: 0; padding: 6px; border: 1px solid var(--vien); border-radius: 16px;
  background: var(--mat); color: var(--chu); box-shadow: 0 10px 30px rgba(7,44,73,.18), inset 0 1px var(--vien-sang,rgba(255,255,255,.4));
}
.menu-nho[hidden], .menu-nho[popover]:not(:popover-open) { display: none; }
.menu-nho[popover] { position: fixed; inset: auto; }
.menu-nho-muc {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 0; border-radius: 11px; background: transparent; color: inherit; text-align: start;
  font: inherit; font-size: .9375rem; font-weight: 650; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
}
.menu-nho-muc .ico { flex: none; width: 20px; height: 20px; color: var(--chinh-2); }
.menu-nho-muc > :not(.ico) { min-width: 0; }
.menu-nho-muc.nguy, .menu-nho-muc.nguy .ico { color: var(--do); }
.menu-nho-muc:focus-visible, .nut-them:focus-visible { outline: 3px solid var(--chinh-2); outline-offset: -3px; }
.menu-nho-muc:disabled, .nut-them:disabled { opacity: .55; cursor: default; }
.tt-xem .nut-them { color: #fff; background: rgba(255,255,255,.16); }
.tt-xem .menu-nho .nut-them { color: var(--chu-nhat); }
@media (hover: hover) {
  .nut-them:not(:disabled):hover, .menu-nho-muc:not(:disabled):hover { background: var(--mat-2); }
  .menu-nho-muc.nguy:not(:disabled):hover { background: color-mix(in srgb, var(--do) 9%, var(--mat)); }
}

/* B2/B6: thao tác chặn và bong bóng đang thu gọn. Không quyết định quyền gửi/xem. */
.nut-chan {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--do) 30%, var(--mat)); border-radius: 14px;
  background: var(--mat); color: var(--do); font: inherit; font-weight: 650; line-height: 1.4; cursor: pointer;
}
.nut-chan:disabled { opacity: .55; cursor: default; }
.tin-an-chan {
  display: flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 10px 12px;
  border: 1px dashed var(--vien); border-radius: 16px; background: var(--mat-2); color: var(--chu-nhat);
  font: inherit; font-size: .875rem; line-height: 1.5; text-align: start; overflow-wrap: anywhere; cursor: pointer;
}
.tin-an-chan .ico { flex: none; width: 18px; height: 18px; }

/* B7: label chứa checkbox + span chữ/link; checkbox vẫn là input native. */
.o-tich {
  display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 10px;
  min-height: 44px; margin: 10px 0; padding: 10px 0; color: var(--chu);
  font: inherit; font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; cursor: pointer;
}
.o-tich > input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--chinh); cursor: pointer; }
.o-tich > span { min-width: 0; }
.o-tich a { color: var(--chinh-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.o-tich:has(> input:disabled) { opacity: .55; cursor: default; }
.man-xanh .o-tich {
  padding: 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px;
  background: rgba(7,44,73,.7); color: #fff;
}
.man-xanh .o-tich a { color: #c4efff; }
.man-xanh .o-tich > input[type="checkbox"] { accent-color: #1683b1; }

/* B8: chỉ dialog này phủ màn hình; nút Đồng ý và cách đóng do Claude quản lý. */
html:has(dialog.hop-dieu-khoan[open]) { overflow: hidden; }
dialog.hop-dieu-khoan {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--nen); color: var(--chu); overflow: hidden;
}
dialog.hop-dieu-khoan[open] { display: flex; flex-direction: column; }
.hop-dieu-khoan .hop-dau { flex: none; padding-top: max(16px,env(safe-area-inset-top)); background: var(--mat); }
.hop-dieu-khoan .hop-than {
  flex: 1; min-height: 0; max-height: none; width: min(760px,100%); margin: 0 auto;
  padding: 20px; overflow-y: auto; overflow-wrap: anywhere; line-height: 1.6;
}
.hop-dieu-khoan .hop-than a { color: var(--chinh-2); text-underline-offset: 3px; }
.hop-dieu-khoan > .hang-nut {
  flex: none; justify-content: center; margin: 0; padding: 14px 20px max(14px,env(safe-area-inset-bottom));
  background: var(--mat); border-top: 1px solid var(--vien);
}
.hop-dieu-khoan > .hang-nut .nut { width: min(440px,100%); }

/* B9/B10: che hình/chữ là trình bày, không phải cơ chế phân quyền.
   .anh-mo gắn vào khung ảnh; .chu-mo chỉ gắn vào nội dung, nút giải thích/xem nằm ngoài. */
.anh-mo { position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; background: var(--mat-2); }
.anh-mo > img, .anh-mo > picture, .anh-mo > video { display: block; max-width: 100%; filter: blur(18px); opacity: .32; pointer-events: none; user-select: none; }
.anh-mo-nut {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; width: 100%; padding: 16px; border: 0; border-radius: inherit;
  background: color-mix(in srgb, var(--mat) 72%, transparent); color: var(--chu);
  font: inherit; font-weight: 750; line-height: 1.5; text-align: center; cursor: pointer;
}
.anh-mo-nut .ico { width: 22px; height: 22px; color: var(--chinh-2); }
.anh-mo-nut:focus-visible { outline: 3px solid var(--chinh-2); outline-offset: -4px; }
.chu-mo:not(button) { filter: blur(5px); opacity: .42; user-select: none; pointer-events: none; }
.nhan-loai {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px;
  border: 1px solid var(--vien); border-radius: 999px; background: var(--mat-2); color: var(--chinh-2);
  font-size: .75rem; font-weight: 750; line-height: 1.4; vertical-align: middle; overflow-wrap: anywhere;
}
@media (prefers-color-scheme: dark) {
  .menu-nho { box-shadow: 0 12px 32px rgba(0,0,0,.4), inset 0 1px rgba(173,219,244,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .lien-ket, .nut-them, .menu-nho, .menu-nho-muc, .nut-chan, .anh-mo-nut { transition: none; animation: none; }
}

/* Nhóm Đợt 4a (PR #57): giữ DOM/thứ tự thao tác của Claude.
   Hộp thông tin có .tat-tb; chỉ các dòng có nhiều nút cần xuống dòng,
   tránh nút quản trị ép tên người về 0px hoặc tràn khỏi hộp điện thoại. */
.hop-than:has(> .tat-tb) > .dong:has(> button:nth-of-type(2)),
.hop-than > .ds-tv > .dong:has(> button:nth-of-type(2)) {
  flex-wrap: wrap; align-items: center; row-gap: 8px;
}
.hop-than:has(> .tat-tb) > .dong:has(> button:nth-of-type(2)) > .muc-giua,
.hop-than > .ds-tv > .dong:has(> button:nth-of-type(2)) > .muc-giua {
  flex: 1 1 calc(100% - 56px); min-width: 0; /* avatar 46px + khoảng cách 10px */
}
.hop-than:has(> .tat-tb) > .dong:has(> button:nth-of-type(2)) .muc-ten,
.hop-than:has(> .tat-tb) > .dong:has(> button:nth-of-type(2)) .nhat,
.hop-than > .ds-tv > .dong:has(> button:nth-of-type(2)) .muc-ten,
.hop-than > .ds-tv > .dong:has(> button:nth-of-type(2)) .nhat {
  white-space: normal; overflow-wrap: anywhere;
}
.hop-than:has(> .tat-tb) > .dong:has(> button:nth-of-type(2)) > button,
.hop-than > .ds-tv > .dong:has(> button:nth-of-type(2)) > button {
  flex: 1 1 calc(50% - 5px); min-width: 0; max-width: 100%;
  padding: 8px 12px; line-height: 1.4; overflow-wrap: anywhere;
}
/* QR giữ nguyên bitmap và viền trắng để quét; chỉ giới hạn khung hiển thị. */
.hop-than > .qr-anh { display: block; max-width: 100%; margin: 12px auto; }
.hop-than > .qr-anh + input[readonly],
.hop-than:has(> .tat-tb) > .hang-nut > input {
  min-width: 0; max-width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--vien); border-radius: 14px;
  background: var(--mat-2); color: var(--chu); font: inherit;
}
.hop-than > .qr-anh + input[readonly] { display: block; width: 100%; color: var(--chinh-2); }
.hop-than:has(> .tat-tb) > .hang-nut > input { flex: 1 1 180px; }

/* Kênh cộng đồng Đợt 4b: kiểu cho DOM đã có trong snapshot Claude 73ae6e4.
   Không thêm điều hướng, không thay quy tắc tham gia/gửi tin/kiểm duyệt. */
dialog[open]:has(> .hop-than > .ds-tv) { display: flex; flex-direction: column; overflow: hidden; }
dialog:has(> .hop-than > .ds-tv) > .hop-dau { flex: none; }
dialog:has(> .hop-than > .ds-tv) > .hop-than { min-height: 0; max-height: none; }
.cong-dong { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 24px; }
.cong-dong > .nhat:first-child {
  margin: 0 0 14px; padding: 12px; border: 1px solid var(--vien); border-inline-start: 3px solid var(--chinh-2);
  border-radius: 14px; background: var(--mat-2); color: var(--chu); line-height: 1.55; overflow-wrap: anywhere;
}
.cong-dong > input[type="search"],
.hop-than > input:not([type="checkbox"]):not([type="radio"]),
.hop-than > textarea, .hop-than > select {
  display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 46px;
  padding: 10px 12px; border: 1px solid var(--vien); border-radius: 14px;
  background: var(--mat-2); color: var(--chu); font: inherit;
}
.hop-than > input + textarea { margin-top: 10px; }
.hop-than > textarea { resize: vertical; line-height: 1.5; }
.cong-dong > input::placeholder, .hop-than > input::placeholder, .hop-than > textarea::placeholder { color: var(--chu-nhat); opacity: 1; }
.cong-dong > .ds { overflow: visible; background: transparent; }
.cong-dong > .ds > .nhat { margin: 4px 2px 12px; line-height: 1.5; }   /* chữ "chưa vào kênh nào" không dính mép */
.cong-dong h4 { margin: 20px 2px 10px; color: var(--chu); font-size: .9375rem; }
.cong-dong .muc { margin-bottom: 8px; border: 1px solid var(--vien); border-radius: 16px; background: var(--mat); text-align: start; }
.cong-dong .muc-ten { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.cong-dong .muc .nhat { margin-top: 4px; overflow-wrap: anywhere; line-height: 1.5; }
.cong-dong .cham-moi { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--chinh-2); }
#dau-kenh h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dau-kenh .phu { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; font-weight: 500; }
#kenh-go { flex: none; }
#kenh-go > .hang-nut { margin: 0; padding: 12px 14px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--vien); background: var(--mat); }
#kenh-go > .hang-nut .nut { flex: 1; }

/* DOM chính thức của PR #61: menu trong hộp, nút thay nội dung bị lọc,
   khung ảnh chưa tải. Giữ nội dung che ở JS, không làm mờ/vô hiệu hoá nút xem. */
.hop-than > .menu-nho { position: static; width: 100%; min-width: 0; max-width: none; max-height: none; box-shadow: none; }
button.chu-mo {
  display: block; min-height: 44px; max-width: 100%; margin: 8px 14px; padding: 12px;
  border: 1px dashed var(--vien); border-radius: 14px; background: var(--mat-2); color: var(--chu);
  font: inherit; font-size: .9375rem; line-height: 1.5; text-align: start; overflow-wrap: anywhere; cursor: pointer;
}
.bl-bong > button.chu-mo { margin: 8px 0; }
.anh-mo:has(> .anh-mo-nut:only-child) { min-height: 140px; }
.hop-than > .hop-dieu-khoan { line-height: 1.6; overflow-wrap: anywhere; }
.hop-than > .hop-dieu-khoan a { color: var(--chinh-2); text-underline-offset: 3px; }
.hang-goi:has(> .nut-goi-kin) { flex-wrap: wrap; padding-bottom: 10px; }
.hang-goi > .nut-goi-kin { flex: 1 1 100%; margin-left: 12px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Giao diện "Vừa" (anh Thanh 26.10.2026): tối dịu – nền xanh xám sáng hơn "Tối", chữ vẫn sáng. Khối tối của mọi tệp đã bật (dungGiaoDien),
   ở đây chỉ đổi bảng màu cho nhẹ mắt hơn */
:root[data-giaodien="vua"] {
  --nen: #1d3347; --mat: #284460; --mat-2: #32506d;
  --chu: #f1f7fb; --chu-nhat: #c3d6e3; --vien: #44627c;
  --tin-ban: #32506d; --tin-toi: #2a6aa3; --chinh-2: #9ad9f7; --bieu: #9ad9f7;   /* màu nhấn sáng hơn cho đủ tương phản trên nền dịu */
  --nen-the: linear-gradient(145deg, #2c4a66, #23405a);
}

/* Ảnh nền cuộc trò chuyện (anh Thanh 26.10.2026) – app.js hopAnhNen / apNenChat */
.tin-ds.nen-chat { background-size: cover; background-position: center; background-repeat: no-repeat; }
.nen-chat-bien { background-image: linear-gradient(160deg, #e3f3ff 0%, #b9def8 55%, #8fc8ef 100%); }
.nen-chat-binh-minh { background-image: linear-gradient(160deg, #ffffff 0%, #e4ecfb 45%, #c2d3f2 100%); } /* bình minh trên biển: trắng → bạc → xanh nhạt (mệnh Thuỷ: không kem / cam) */
.nen-chat-rung { background-image: linear-gradient(160deg, #e3f8fc 0%, #b8ecf5 55%, #86dcec 100%); } /* khoá "rung" giữ để lựa chọn đã lưu trên máy vẫn dùng được; màu nay là xanh ngọc (không xanh lá) */
.nen-chat-dem { background-image: linear-gradient(160deg, #0b1d33 0%, #14365a 60%, #1d4f7d 100%); }
.nen-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 12px 0; }
.nen-o { min-height: 96px; border-radius: 14px; border: 2px solid var(--vien); background-color: var(--mat-2); background-size: cover; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding: 6px; font: inherit; }
.nen-o span { background: rgba(255, 255, 255, .85); color: #0e3552; border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 600; }
.nen-o[aria-pressed="true"] { border-color: var(--chinh-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chinh-2) 35%, transparent); }

/* Két riêng (anh Thanh 26.10.2026) – ô mã PIN trong hộp mở / đặt mã (app.js oPinKet) */
.o-pin-ket {
  display: block; width: 100%; min-height: 50px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 14px;
  background: var(--mat-2); color: var(--chu); font: inherit; font-size: 1.25rem; letter-spacing: .3em; text-align: center;
}
.o-pin-ket::placeholder { color: var(--chu-nhat); opacity: 1; font-size: 1rem; letter-spacing: normal; }

/* Bước 1 - Cá nhân trên máy tính: dùng vùng nội dung thay cột danh sách hẹp.
   Chỉ mở rộng khi cột chat là lời nhắc trống; chat đang mở vẫn giữ cạnh Cá nhân.
   Từ 860px mới áp dụng, cùng mốc chuyển thanh điều hướng sang bên trái. */
@media (min-width: 860px) {
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) > #chat { display: none; }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) > #cot-canhan {
    min-width: 0; border-right: 0; background: var(--nen);
  }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan > .ca-nhan { padding: 24px clamp(20px, 3vw, 40px) 40px; }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan .cd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    align-items: start; gap: 24px;
    width: 100%; max-width: 1120px; margin-inline: auto;
  }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan .cd > .cd-ho-so,
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan .cd > .cd-o-luoi,
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan .cd > .cd-nhom:last-child { grid-column: 1 / -1; }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan .cd > .cd-o-luoi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px; margin-top: 0;
  }
  .khung-chinh[data-trang="canhan"]:has(> #chat > .trong:only-child) #cot-canhan .cd > .cd-nhom { min-width: 0; margin-top: 0; }
}