/* Nút Like của Naloo (mẫu đã duyệt 27.10.2026: khối xanh bo tròn, tim trắng mềm, bóng nổi nhẹ) – hình do like-tay.js dựng. Tệp riêng để không đụng app.css */
.tay-like { width: 24px; height: 24px; display: block; flex: none; overflow: visible; filter: drop-shadow(0 2px 3px rgba(11, 61, 138, .35)); }
.bai-dem .tay-like { width: 16px; height: 16px; }
/* Chưa thích: vẫn xanh nhưng nhạt hơn; thích rồi: đủ màu */
.bai-nut:not(.bat) .tay-like { filter: drop-shadow(0 1px 2px rgba(11, 61, 138, .2)) opacity(.7); transition: filter .2s; }
.bai-nut.bat .tay-like { transition: filter .2s; }
/* Kéo Like ra khung tin rồi thả (anh Thanh 28.10.2026): tay đi theo ngón; chỗ thả giữ cố định trên khung tin, không che nút khác */
.tay-keo-duoc { touch-action: none; } /* chỉ nút Thích ô soạn (kéo được); nút Thích Bảng tin vẫn cuộn trang bình thường */
.tay-keo { position: fixed; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none; z-index: 1001; opacity: .92; }
/* Lớp phủ trùng đúng khung tin (app.js đặt left / top / width / height), cắt phần tràn; dưới các dải nổi của khung chat (vd "Tin mới từ…" z-index 20) */
.tha-lop { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.tha-dan { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; }
.tay-keo .tay-like, .tha-dan .tay-like { width: 100%; height: 100%; }
/* Thẻ vị trí (app.js theViTri): 👍 đã thả cố định trên khung, tin cuộn qua dưới nên từng che nút Mapy.cz (28.10.2026) → hàng nút bản đồ nổi trên .tha-lop (5), vẫn dưới dải "Tin mới từ…" (20) */
.vt-nut { position: relative; z-index: 6; }
/* Trong danh sách tin: 👍 đã thả chỉ là 1 dòng nhỏ (hình ở chỗ thả), vẫn giữ lâu để thu hồi */
.tin-tha-nho { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; opacity: .85; }
.tin-tha-nho .tay-like { width: 20px; height: 20px; }
/* Thích / gửi 👍: nhún nhẹ */
.tay-like.nod { animation: tay-nay .34s cubic-bezier(.34, 1.56, .64, 1) 2; }
@keyframes tay-nay { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* Nút Thích: không bôi chọn / không hiện menu giữ lâu của trình duyệt */
.tay-nut { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Giữ lâu: tay to ra phía trên ngón tay, nền mờ xanh đậm */
.tay-san { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 50% 40%, rgba(8, 60, 100, .5), rgba(6, 30, 52, .62)); }
.tay-san.on { opacity: 1; }
.tay-lon { position: absolute; width: 290px; height: 290px; margin: -145px 0 0 -145px; will-change: transform;
  transition-property: transform; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 18px 18px rgba(8, 121, 170, .45)); }
.tay-lon .tay-like { width: 100%; height: 100%; filter: none; }
@media (prefers-reduced-motion: reduce) { .tay-like.nod { animation: none !important; } .tay-san { transition: none; } }

/* Ô soạn tin 1 hàng (anh Thanh 26.10.2026): đính kèm | ô chữ + biểu cảm | Thích (tay) | micro | Gửi – 4 nút CÙNG cỡ, sát nhau.
   Anh dặn "cho theo chuẩn": vùng chạm 44 × 44 px (chuẩn Apple; Google 48 dp ≈ 48 px) – giảm khoảng cách / lề để ô chữ còn chỗ */
.go.go-chat { gap: 2px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); } /* app.css đặt lại padding của .go nên thanh cử chỉ / tai thỏ đè nút */
/* Ô chữ chừa chỗ cho nút biểu cảm nằm trong ô (app.css: .go textarea đè mất padding-right của .go-o textarea → chữ chạy vào dưới nút); nút biểu cảm cũng 44 px; chữ gợi ý không xuống dòng ở màn hẹp */
.go.go-chat .go-o textarea { padding-right: 48px; }
.go.go-chat .nut-bc { width: 44px; height: 44px; right: 0; bottom: 0; }
.go.go-chat textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go.go-chat:not(.go-ghi) > .nut-tron { width: 44px; height: 44px; min-height: 44px; margin-bottom: 0; } /* cao bằng ô chữ 1 dòng (44 px), bám đáy khi ô chữ cao thêm */
.go.go-chat:not(.go-ghi) > .nut-tron .ico { width: 20px; height: 20px; }
/* Nút Thích bo tròn như các nút khác của ô soạn (anh Thanh 27.10.2026): ô tròn 44 px nền bạc như nút đính kèm – tay xanh nằm gọn trong vòng */
.go.go-chat > .nut-thich { background: var(--mat-2); border: 0; border-radius: 50%; box-shadow: none; display: grid; place-items: center; overflow: visible; }
.go.go-chat > .nut-thich .tay-like { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(8, 121, 170, .3)); }
/* Màn rất hẹp (≤ 340 px, vd 320): 4 nút 44 px chỉ để ô chữ ~58 px (không đọc nổi chữ gợi ý) → 4 nút + nút biểu cảm xuống 40 px (ô chữ ~80 px); từ 341 px trở lên giữ 44 px */
@media (max-width: 340px) {
  .go.go-chat:not(.go-ghi) > .nut-tron { width: 40px; height: 40px; min-height: 40px; margin-bottom: 2px; }
  .go.go-chat > .nut-thich .tay-like { width: 26px; height: 26px; }
  .go.go-chat .nut-bc { width: 40px; height: 40px; }
  .go.go-chat .go-o textarea { padding-right: 44px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .go .nut-thich:hover { transform: scale(1.12); } }
/* Tin chỉ có 1 cái 👍 (tay Like Naloo) và 👍 trong 6 cảm xúc */
.tay-cx { filter: none; }

/* Ô số điện thoại / email (anh Thanh 26.10.2026): không còn ô chọn mã nước – nước tự nhận theo máy; dòng nhỏ dưới ô hiện số app hiểu (cờ + số) để thấy nếu nhầm nước */
.o-so-email { flex-direction: column; gap: 0; }
.o-so-email input { flex: 0 0 auto; width: 100%; }
.so-hieu { min-width: 0; overflow-wrap: anywhere; }
.so-hieu:not(:empty) { margin: 6px 4px 0; font-size: .86rem; line-height: 1.3; color: var(--chu-nhat, #5b6b7a); font-variant-numeric: tabular-nums; }
.man-xanh .so-hieu:not(:empty) { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }

/* Tay Like trong tin: giữ lâu thì to tới 3 lần (app.js đặt rộng / cao bằng CSSOM, tối đa 12,75rem – cỡ chữ "Rất to" thành ~280 px). Màn hẹp (320 px) chỉ chứa ~230 px
   nên giới hạn theo bề rộng màn hình, không để tin tràn ra ngoài / làm danh sách tin cuộn ngang */
.bc-chi svg.tay-like.bc-to { max-width: 62vw; max-height: 62vw; }

/* GPT N04 (26.10.2026): màn 320 px + cỡ chữ "Rất to" cắt nhãn thanh dưới thành "Trò chu…" (nhãn 83 px, chỗ 74 px) → nhãn thu theo bề rộng màn hình, chỉ khi không đủ chỗ
   (app.css: .muc-duoi-chu = .75rem; ≥ 360 px không đổi). Giữ nguyên cỡ chữ trợ năng ở mọi chỗ khác. */
.muc-duoi-chu { font-size: min(.75rem, 4.5vw); }
/* GPT N12: vùng chạm ≥ 44 px mà KHÔNG đổi cỡ nhìn thấy – mở rộng vùng bấm bằng phần tử ảo trong suốt (tab lọc 38 px, nút đầu trang 40 px, nút gọi lại 40 px) */
.tab, .dau .nut-tron, .nut-goi-lai { position: relative; }
.tab::after { content: ''; position: absolute; inset: -3px 0; }
.dau .nut-tron::after, .nut-goi-lai::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }

/* Nền chat (màu có sẵn hoặc ảnh từ máy): chữ nằm THẲNG trên nền – giờ, "đã sửa", tên người gửi trong nhóm, "Đã chuyển tiếp", dòng trống –
   có nhãn nền theo màu giao diện, nên đọc được ở mọi chế độ Sáng / Vừa / Tối và mọi nền (nền sáng ở chế độ Tối, nền "Đêm" ở
   chế độ Sáng, ảnh từ máy). Trước đây chữ đặt thẳng lên nền: Tối + nền Biển hay Sáng + nền Đêm thì gần như không đọc được. */
.tin-ds.nen-chat .tin-gio, .tin-ds.nen-chat .tin-ten, .tin-ds.nen-chat .tin-ct, .tin-ds.nen-chat > .trong {
  width: fit-content; max-width: 100%; padding: 1px 8px; border-radius: 10px; overflow-wrap: anywhere; /* tên rất dài viết liền không lấn ra ngoài khung */
  background: var(--nen); /* đặc, cùng màu nền giao diện → chữ rõ đúng như ở giao diện chính (bán trong suốt thì tên người gửi xanh trên nền Đêm chỉ ~3,9:1) */
}
.tin-ds.nen-chat .tin.toi .tin-gio, .tin-ds.nen-chat .tin.toi .tin-ct { margin-left: auto; }
.tin-ds.nen-chat > .trong { margin: 24px auto; padding: 8px 14px; }

/* Like chat B + ngón cái (anh Thanh, 31.10): chỉ UI; tin đã gửi / .tha-dan giữ màu và cỡ nội dung. */
.go.go-chat > .nut-thich { min-width: 44px; min-height: 44px; transform: none; }
.go.go-chat > .nut-thich .tay-like { width: 32px; height: 32px; filter: drop-shadow(0 1px 2px #00000026); transform-origin: center; }
.go.go-chat > .nut-thich:hover { transform: none; }
.go.go-chat > .nut-thich .tay-like stop,
.cx-nut .tay-like stop, .cx-chip .tay-like stop, .dai-cx-nut .tay-like stop,
.tay-lon .tay-like stop, .tay-keo.tay-like stop { stop-color: var(--pc-tile, #1258b4); }
.go.go-chat > .nut-thich .tay-like > path,
.cx-nut .tay-like > path, .cx-chip .tay-like > path, .dai-cx-nut .tay-like > path,
.tay-lon .tay-like > path, .tay-keo.tay-like > path {
  transform-box: view-box; transform-origin: 0 0; transform: translate(7px, 8px) scale(1.65);
}
.go.go-chat > .nut-thich .tay-like.nod { animation: like-chat-nay 160ms ease-out 1; }
@keyframes like-chat-nay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.cx-chip { min-width: 44px; min-height: 44px; gap: 5px; border-radius: 16px; }
.cx-chip .tay-like { width: 20px; height: 20px; }
.cx-chip[aria-pressed="true"] { border-color: var(--chinh-2); box-shadow: inset 0 0 0 1px var(--chinh-2); }

/* Dành sẵn khoảng bên cạnh tin, không đặt nút lên chữ / giờ / ảnh của tin.
   flex-shrink: 0 (Claude 31.10 v175, ảnh anh Thanh "đè lên nhau"): #tin-ds là flex cột – min-height: 44px thay min-height: auto nên tin dài / Like to bị ép còn 44 px và đè tin dưới */
.tin:has(> .nut-cx) { position: relative; max-width: min(78%, calc(100% - 52px), 560px); min-height: 44px; flex-shrink: 0; }
.tin > .nut-cx {
  position: absolute; inset-block-start: 0; inset-inline-start: calc(100% + 8px); inset-inline-end: auto;
  display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; margin: 0; border: 1px solid var(--vien); border-radius: 50%;
  background: var(--mat); color: var(--chu); box-shadow: 0 2px 6px #00000012; cursor: pointer;
}
.tin.toi > .nut-cx { inset-inline-start: auto; inset-inline-end: calc(100% + 8px); }
.nut-cx-ico { display: grid; place-items: center; line-height: 0; pointer-events: none; }
.nut-cx-ico > svg { width: 24px; height: 24px; }
.tin > .nut-cx[aria-expanded="true"] { border-color: var(--chinh-2); background: var(--mat-2); box-shadow: 0 0 0 1px var(--chinh-2); }

/* Claude đặt position/top/left/inset/margin; CSS không giành phần định vị popover. */
.dai-cx {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  box-sizing: border-box; inline-size: max-content; max-inline-size: calc(100vw - 16px);
  padding: 8px; border: 1px solid var(--vien); border-radius: 22px;
  background: var(--mat); color: var(--chu); box-shadow: 0 8px 26px #00000033; z-index: 1002;
}
.dai-cx[popover]:not(:popover-open) { display: none; }
.dai-cx[data-vi="tren"] { transform-origin: center bottom; }
.dai-cx[data-vi="duoi"] { transform-origin: center top; }
.dai-cx-nut {
  flex: 0 0 44px; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; margin: 0; border: 1px solid var(--vien); border-radius: 50%;
  background: var(--mat-2); color: var(--chu); cursor: pointer;
}
.dai-cx-nut .cx-hinh { width: 32px; height: 32px; }
.dai-cx-nut.cua-toi, .dai-cx-nut[aria-pressed="true"] { border-color: var(--chinh-2); box-shadow: inset 0 0 0 1px var(--chinh-2); }
.nut-cx:focus-visible, .dai-cx-nut:focus-visible, .cx-chip:focus-visible { outline: 3px solid var(--chinh-2); outline-offset: 2px; }
@media (hover: hover) {
  .tin > .nut-cx:hover, .dai-cx-nut:hover { border-color: var(--chinh-2); background: var(--mat-2); }
}
@media (max-width: 360px) {
  .dai-cx { inline-size: 162px; }
}
@media (prefers-reduced-motion: reduce) {
  .go.go-chat > .nut-thich .tay-like.nod { animation: none !important; }
  .nut-cx, .dai-cx, .dai-cx-nut { transition: none; }
}
@media (forced-colors: active) {
  .tin > .nut-cx, .dai-cx, .dai-cx-nut, .cx-chip { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .tin > .nut-cx[aria-expanded="true"], .dai-cx-nut[aria-pressed="true"], .cx-chip[aria-pressed="true"] { border-color: Highlight; }
  .nut-cx:focus-visible, .dai-cx-nut:focus-visible, .cx-chip:focus-visible { outline-color: Highlight; }
}