/* NTYDAY – tính năng mới (anh Thanh 27.10.2026). Claude làm bản chạy được; GPT chỉnh hình thức sau – GIỮ tên lớp / id (app.js dùng).
   Tệp riêng, nạp sau like-tay.css: không sửa app.css / menu-b*.css / thuong-hieu-song.css / logo-moi.css.
   Màu tối viết trong @media (prefers-color-scheme: dark) như mọi tệp khác – giao-dien.js tự bật / tắt khi chọn Sáng / Vừa / Tối. */

/* ======================= A. Ô soạn tin + kiểu chữ ======================= */

/* Ô soạn (app.js veGo / capNhatGo đặt data-co): trống → đính kèm | ô chữ ☺ | Thích | micro; đang gõ (kể cả đang sửa tin) → đính kèm | ô chữ ☺ | Aa | Gửi.
   Thanh đang ghi âm (.go-ghi) giữ nguyên: nút Gửi tin thoại luôn hiện. */
.go.go-chat:not(.go-ghi)[data-co="1"] > .nut-thich,
.go.go-chat:not(.go-ghi)[data-co="1"] > .nut-thoai,
.go.go-chat:not(.go-ghi):not([data-co="1"]) > .nut-chinh,
.go.go-chat:not(.go-ghi):not([data-co="1"]) > .nut-kieu { display: none; }

/* Nút kiểu chữ (Aa): tròn 44 px nền bạc như nút đính kèm / Thích, nằm cạnh nút Gửi. Chữ "Aa" hiện đúng kiểu đang chọn */
.go .nut-kieu { display: grid; place-items: center; border: 0; background: var(--mat-2); color: var(--bieu, var(--chinh-2)); box-shadow: none; }
.go .nut-kieu[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--chinh-2); }
.nut-kieu-chu { font-size: 1.05rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.nut-kieu-chu[class*="kc-"] { font-weight: 400; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .go .nut-kieu:hover { transform: scale(1.12); } }

/* Khay chọn kiểu chữ (#khay-kieu, cùng khung .khay-bc của app.css): hàng phông + hàng màu, cuộn ngang trên điện thoại hẹp */
.khay-kieu { padding: 8px 10px 4px; }
.kieu-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 2px 4px; font-size: .875rem; }
.kieu-dau .nhat { font-size: .8125rem; }
.kieu-hang { display: flex; gap: 6px; overflow-x: auto; padding: 4px 1px 6px; scrollbar-width: thin; }
.kieu-o {
  flex: none; width: 76px; min-height: 60px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--vien); border-radius: 14px; background: var(--mat-2); color: var(--chu); font: inherit; cursor: pointer;
}
.kieu-o > span { font-size: 1.35rem; line-height: 1.2; max-width: 100%; }
.kieu-o > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: var(--chu-nhat); }
.kieu-o[aria-pressed="true"] { border-color: var(--chinh-2); box-shadow: inset 0 0 0 1px var(--chinh-2); background: var(--mat); }
.kieu-o:focus-visible { outline: 2px solid var(--chinh-2); outline-offset: 1px; }
@media (hover: hover) { .kieu-o:hover { background: var(--mat); } }

/* ---- Phông (kc-N). Tệp + giấy phép OFL ở public/fonts/<tên>/; font-display: swap – trình duyệt chỉ tải khi có chữ dùng phông đó.
   Số kc CỐ ĐỊNH (tin cũ mang số – crypto.js KC_SO): chỉ thêm phông mới ở cuối. ---- */
@font-face { font-family: "NTYDAY Pacifico"; src: url("/fonts/pacifico/Pacifico-Regular.ttf?v=1") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Dancing Script"; src: url("/fonts/dancingscript/DancingScript-Variable.ttf?v=1") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Patrick Hand"; src: url("/fonts/patrickhand/PatrickHand-Regular.ttf?v=1") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Comfortaa"; src: url("/fonts/comfortaa/Comfortaa-Variable.ttf?v=1") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Paytone One"; src: url("/fonts/paytoneone/PaytoneOne-Regular.ttf?v=1") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Bungee"; src: url("/fonts/bungee/Bungee-Regular.ttf?v=1") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Bangers"; src: url("/fonts/bangers/Bangers-Regular.ttf?v=1") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NTYDAY Chakra Petch"; src: url("/fonts/chakrapetch/ChakraPetch-Regular.ttf?v=1") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
.kc-1 { font-family: "NTYDAY Pacifico", var(--phong-naloo, sans-serif); }
.kc-2 { font-family: "NTYDAY Dancing Script", var(--phong-naloo, sans-serif); }
.kc-3 { font-family: "NTYDAY Patrick Hand", var(--phong-naloo, sans-serif); }
.kc-4 { font-family: "NTYDAY Comfortaa", var(--phong-naloo, sans-serif); }
.kc-5 { font-family: "NTYDAY Paytone One", var(--phong-naloo, sans-serif); }
.kc-6 { font-family: "NTYDAY Bungee", var(--phong-naloo, sans-serif); }
.kc-7 { font-family: "NTYDAY Bangers", var(--phong-naloo, sans-serif); letter-spacing: .03em; }
.kc-8 { font-family: "NTYDAY Chakra Petch", var(--phong-naloo, sans-serif); }
/* Cỡ trong bong bóng cho đều mắt (phông thư pháp / viết tay chữ nhỏ, bảng hiệu chữ to). Ô soạn KHÔNG đổi cỡ (dưới 16 px iPhone tự phóng to trang) */
.tin-hop .kc-1 { line-height: 1.6; }
.tin-hop .kc-2 { font-size: 1.2em; line-height: 1.35; }
.tin-hop .kc-3, .tin-hop .kc-7 { font-size: 1.1em; }
.tin-hop .kc-6 { font-size: .92em; }

/* ---- Màu (mc-N): mỗi màu 3 bản – s: đậm trên nền sáng (≥ 5:1); t: tươi trên nền tối (≥ 4,8:1 cả giao diện "Vừa");
   x: rất nhạt trong tin của mình (nền xanh ~ #0877ad: 3,4–4,3:1 – mức chữ to của WCAG; thêm bóng chữ mờ cho dễ đọc).
   Số mc CỐ ĐỊNH (crypto.js MC_SO): chỉ thêm màu mới ở cuối. ---- */
.mc-1 { --mc-s: #b0124f; --mc-t: #ffadd6; --mc-x: #ffd3e8; }   /* hồng */
.mc-2 { --mc-s: #7b1fa2; --mc-t: #dcbcff; --mc-x: #ecd9ff; }   /* tím */
.mc-3 { --mc-s: #0b57d0; --mc-t: #8fd8ff; --mc-x: #ccefff; }   /* xanh biển */
.mc-4 { --mc-s: #a84000; --mc-t: #ffc285; --mc-x: #ffdcb3; }   /* cam */
.mc-5 { --mc-s: #7b1fa2; --mc-t: #dcbcff; --mc-x: #ead2ff;     /* cầu vồng: màu chuyển; trình duyệt không cắt nền theo chữ được thì hiện màu tím */
  --mc-cv-s: linear-gradient(90deg, #b71c1c, #a84000 25%, #1b6e20 50%, #0b57d0 75%, #7b1fa2);
  --mc-cv-t: linear-gradient(90deg, #ffabab, #ffc785 25%, #9af0a8 50%, #8fd3ff 75%, #dcbcff);
  --mc-cv-x: linear-gradient(90deg, #ffc7c7, #ffdcae 25%, #c4f5cb 50%, #bfe6ff 75%, #ead2ff); }
.mc-6 { --mc-s: #9c0079; --mc-t: #b5fdff; --mc-x: #b5fdff; --mc-sg-s: rgba(255, 0, 200, .35); --mc-sg-t: rgba(0, 229, 255, .8); } /* neon: chữ sáng có quầng */
:is(.mc-1, .mc-2, .mc-3, .mc-4, .mc-5, .mc-6) { --mc: var(--mc-s); --mc-cv: var(--mc-cv-s); --mc-sg: var(--mc-sg-s); color: var(--mc); }
.tin.toi :is(.mc-1, .mc-2, .mc-3, .mc-4, .mc-5, .mc-6) { --mc: var(--mc-x); --mc-cv: var(--mc-cv-x); --mc-sg: var(--mc-sg-t); }
@media (prefers-color-scheme: dark) {
  :is(.mc-1, .mc-2, .mc-3, .mc-4, .mc-5, .mc-6) { --mc: var(--mc-t); --mc-cv: var(--mc-cv-t); --mc-sg: var(--mc-sg-t); }
}
.tin.toi .tin-hop :is(.mc-1, .mc-2, .mc-3, .mc-4) { text-shadow: 0 1px 1px rgba(0, 30, 60, .35); }
.mc-6 { text-shadow: 0 0 3px var(--mc-sg), 0 0 10px var(--mc-sg); }
/* Link / @tên trong tin có màu: theo màu đã chọn (gạch chân vẫn còn) */
.tin-hop :is(.mc-1, .mc-2, .mc-3, .mc-4, .mc-5, .mc-6) :is(.link-tin, .nhac) { color: inherit; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mc-5:not(textarea) { background-image: var(--mc-cv); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .mc-5:not(textarea) .nhac-minh { background: none; } /* nền riêng của @tên mình sẽ che màu chuyển */
  .mc-5:not(textarea) .em-may { -webkit-text-fill-color: currentColor; } /* emoji của máy (app.js chuCoBc): chữ trong suốt làm emoji thành bóng màu chuyển – span này vẽ lại emoji màu thật, đè kín bóng ở dưới */
}

/* ======================= B. Vị trí (gửi 1 lần + chia sẻ trực tiếp) ======================= */

/* Biểu tượng ghim bản đồ (GPT 28.10.2026, anh duyệt; app.js dùng ico('vitri') = span.ico.ico-vitri). Để ở đây vì tệp này nạp sau menu-b-icons.css */
.ico-vitri { --m: url("/icons/menu-b/outline/location.svg?v=1"); --tile: url("/icons/menu-b/tiles/location.svg?v=1"); }

/* Nút vị trí trên thanh đầu cuộc trò chuyện (#dau-chat .nut-vitri, giữa ⓘ và nút gọi; chỉ có khi gửi tin được). Máy này đang chia sẻ trực tiếp: .dang-chia */
.dau .nut-vitri.dang-chia { background: rgba(94, 231, 255, .24); box-shadow: 0 0 0 2px #5ee7ff; }
/* Điện thoại hẹp: hình nút36px, vùng chạm44px; màn≤360px dùng hai hàng bên dưới. */
@media (max-width: 420px) {
  #dau-chat:has(.nut-vitri) { gap: 6px; padding-left: 8px; padding-right: 8px; }
  #dau-chat:has(.nut-vitri) .nut-tron { width: 36px; height: 36px; min-height: 36px; }
  #dau-chat:has(.nut-vitri) .nut-tron { min-width: 36px; }
  #dau-chat:has(.nut-vitri) .nut-tron .ico { width: 19px; height: 19px; }
  #dau-chat:has(.nut-vitri) > .anh-dai { width: 34px; height: 34px; }
}

/* Thẻ vị trí trong bong bóng (app.js theViTri): trạng thái, toạ độ, ±m · giờ, 2 nút mở Mapy.cz / Google Maps – KHÔNG nhúng bản đồ (CSP giữ nguyên).
   .song = đang chia sẻ trực tiếp (data-den: app đếm ngược); .xong = đã dừng / hết hạn */
.vt-the { display: grid; gap: 3px; min-width: min(230px, 60vw); }
.vt-dau { display: flex; align-items: center; gap: 6px; }
.vt-dau .ico { width: 20px; height: 20px; }
.vt-toa { font-variant-numeric: tabular-nums; }
.vt-phu { font-size: .8125rem; opacity: .8; }
.vt-the.xong .vt-toa, .vt-the.xong .vt-phu { opacity: .7; }
.vt-nut { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vt-nut .nut { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: .875rem; }
.tin.toi .vt-nut .nut { background: #fff; border-color: #fff; color: var(--tin-toi); }

/* Hộp "Vị trí" (app.js hopViTri) */
.vt-giai .ico { width: 16px; height: 16px; vertical-align: -2px; }
.vt-tieu-de { margin: 16px 0 2px; font-size: 1rem; }
.vt-dang { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--mat-2); }
.vt-dang p { margin: 0; font-weight: 600; }
.vt-dang .hang-nut { margin-top: 8px; }
.vt-bao { margin: 12px 0 0; font-weight: 600; color: var(--chinh-2); }
.vt-bao:empty { display: none; }

/* ======================= C. Thẻ Cá nhân + trạng thái truy cập ======================= */

/* Thẻ hồ sơ đầu trang Cá nhân (app.js theCaNhan). Khung .cd-ho-so của app.css trước là 1 nút lớn, giờ là thẻ chứa nhiều nút:
   .the-cn-anh (ảnh + tên → hộp Ảnh và tên) · .the-cn-ds: .the-cn-nick, .the-cn-email(.them = chưa có email), .the-cn-sdt(.dang-hien = đang hiện đủ số)
   + .the-cn-mat (con mắt), .the-cn-tt(.dang-an = đang ẩn trạng thái online) · .the-cn-nut: Mã QR của tôi, Quét mã QR của bạn bè */
.cd-ho-so.the-cn { display: block; cursor: default; }
.the-cn-anh { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; border-radius: 14px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.the-cn-anh .cd-chu { min-width: 0; }
.the-cn-anh:focus-visible { outline: 2px solid var(--chinh-2); outline-offset: 4px; }
.the-cn-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2px 8px; margin-top: 12px; }
.the-cn-dong { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--chu); font: inherit; text-align: left; }
button.the-cn-dong { cursor: pointer; }
button.the-cn-dong:hover, button.the-cn-dong:focus-visible { background: var(--mat-2); }
.the-cn-dong > .ico { width: 18px; height: 18px; color: var(--chinh-2); }
.the-cn-chu { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.the-cn-dong.them .the-cn-chu { color: var(--chinh-2); font-weight: 600; }
.the-cn-so { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.the-cn-mat { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -6px -6px 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--chu-nhat); cursor: pointer; }
.the-cn-mat:hover, .the-cn-mat:focus-visible, .the-cn-mat[aria-pressed="true"] { color: var(--chinh-2); }
.the-cn-mat:hover, .the-cn-mat:focus-visible { background: var(--mat-2); }
.the-cn-mat .ico { width: 20px; height: 20px; }
.the-cn-tt .cham-nho { flex: none; width: 10px; height: 10px; margin: 0 4px; }
.the-cn-tt:not(.dang-an) .the-cn-chu { color: var(--xanh); font-weight: 600; }
.the-cn-tt.dang-an .the-cn-chu { color: var(--chu-nhat); }
.cd-ho-so .the-cn-tt small { display: inline; flex: none; padding: 2px 10px; border-radius: 999px; background: var(--mat-2); color: var(--chinh-2); font-size: .75rem; font-weight: 700; }
.the-cn-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.the-cn-nut .nut { flex: 1 1 auto; padding: 0 12px; white-space: nowrap; }

/* Trạng thái bạn bè trong hộp Thông tin (app.js veTTBan, data-tt-id): cuộc 2 người = p.tt-ban; thành viên nhóm = span.tt-ban sau @nick / "Quản trị nhóm".
   Bạn ẩn trạng thái / không phải bạn bè: [hidden] – không chấm, không dòng trống */
.muc-giua .tt-ban::before { content: "·"; margin: 0 .4em; color: var(--chu-nhat); font-weight: 400; }


/* GPT, 28.10.2026. Giữ toàn bộ id/class và trạng thái JS đã có. */
/* Ô soạn hiện chỉ có ba nút ngoài ô chữ; màn 320 px vẫn đủ vùng chạm44px. */
@media (max-width: 340px) {
  .go.go-chat:not(.go-ghi) > .nut-tron { width: 44px; height: 44px; min-height: 44px; margin-bottom: 0; }
  .go.go-chat .nut-bc { width: 44px; height: 44px; }
  .go.go-chat .go-o textarea { padding-right: 48px; }
}
.go.go-chat .go-o { min-width: 0; }
.kieu-o > small { font-size: .75rem; }
.kieu-hang { scroll-padding-inline: 4px; }


/* Màn rộng dùng nút44px; màn hẹp mở vùng chạm quanh hình36px bên dưới. */
#dau-chat .nut-tron { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
#dau-chat .nut-tron::after { inset: 0; }
#tim-chu { height: 44px; min-height: 44px; }
.tim-hang > .nut-tron { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
@media (max-width: 420px) {
  #dau-chat:has(.nut-vitri) { gap: 8px; }
  #dau-chat:has(.nut-vitri) .nut-tron::after { inset: -4px; }
}
@media (max-width: 360px) {
  #dau-chat:has(.nut-vitri) { display: grid; grid-template-columns: 36px repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(36px, auto); gap: 8px; height: auto; }
  #dau-chat:has(.nut-vitri) > .anh-dai { display: none; }
  #dau-chat:has(.nut-vitri) > h2 { grid-column: 2 / -1; grid-row: 1; min-width: 0; margin: 0; }
  #dau-chat:has(.nut-vitri) > .nut-tron { justify-self: center; }
  #dau-chat:has(.nut-vitri) > .nut-tron:first-child { grid-column: 1; grid-row: 1; }
  #dau-chat:has(.nut-vitri) > .nut-tron:nth-child(4) { grid-column: 2; grid-row: 2; }
  #dau-chat:has(.nut-vitri) > .nut-tron:nth-child(5) { grid-column: 3; grid-row: 2; }
  #dau-chat:has(.nut-vitri) > .nut-tron:nth-child(6) { grid-column: 4; grid-row: 2; }
  #dau-chat:has(.nut-vitri) > .nut-tron:nth-child(7) { grid-column: 5; grid-row: 2; }
}

/* Thẻ vị trí: giữ chữ rõ khi đã dừng, hai nút bản đồ đủ cao và tự xuống hàng. */
.vt-the { min-width: 0; width: min(230px, 60vw); max-width: 100%; }
.vt-dau { align-items: flex-start; }
.vt-dau .ico { flex: none; margin-top: 2px; }
.vt-trang, .vt-toa { min-width: 0; overflow-wrap: anywhere; }
.vt-phu, .vt-the.xong .vt-toa, .vt-the.xong .vt-phu { opacity: 1; }
.vt-nut .nut { min-height: 44px; height: auto; padding: 8px 12px; white-space: normal; max-width: 100%; }
.vt-dang .hang-nut { flex-wrap: wrap; }

/* Thẻ Cá nhân: con mắt44px, nhãn dài và cỡ chữ lớn vẫn xuống dòng. */
.the-cn-mat { width: 44px; height: 44px; }
.the-cn-anh .cd-chu { flex: 1; }
.the-cn-nut .nut { min-height: 44px; height: auto; padding-block: 9px; white-space: normal; overflow-wrap: anywhere; }
.the-cn-mat:focus-visible, .the-cn-dong:focus-visible { outline: 2px solid var(--chinh-2); outline-offset: 2px; }
.tt-ban[hidden] { display: none; }