/* TIN NHẮN NỘI BỘ (cht-) — 25/09/2026. Theo Stitch "Ca sáng hôm nay": một màu tím (--nhan), không viền, mảng trắng trên nền dịu,
   bong bóng của tôi tím chữ trắng, của người khác trắng. KHÔNG gradient, KHÔNG cam (chủ dự án 25/09: "màu cam và gradient hơi
   nhiều, không đồng bộ nhận diện thương hiệu"). Màu trạng thái chỉ cho chấm/chữ nhỏ. Mobile 390px: một cột, lần lượt từng màn. */

.cht-khung{display:grid;grid-template-columns:340px minmax(0,1fr) 0;gap:0;height:calc(100vh - 32px);height:calc(100dvh - 32px);min-height:480px;
  background:var(--the);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(30,20,70,.05);transition:grid-template-columns .18s}
.cht-khung.mo-phu{grid-template-columns:320px minmax(0,1fr) 320px}
.cht-ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cht-cho,.cht-mo{color:var(--chu3);font-size:13px;padding:24px 16px;text-align:center}
.cht-trong-lon{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--chu3);text-align:center;padding:24px}
.cht-trong-lon b{color:var(--chu);font-size:15px} .cht-trong-lon p{margin:0;font-size:13px;max-width:280px}
.cht-trong-lon.nho{height:auto;padding:48px 16px}
.cht-nut-tron{width:38px;height:38px;border-radius:50%;border:0;background:var(--nen);color:var(--chu2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.cht-nut-tron:hover{background:var(--nhan-nhat);color:var(--nhan)} .cht-nut-tron.bat{background:var(--nhan-nhat);color:var(--nhan)}
.cht-nut-tron.nhat{color:var(--nhan)}
.cht-nut-nho{border:0;border-radius:999px;background:var(--nhan);color:#fff;font-weight:600;font-size:12px;padding:6px 12px;cursor:pointer;flex:none}
.cht-link{border:0;background:none;color:var(--nhan);font-weight:600;font-size:12px;cursor:pointer;padding:0}
.cht-mat{position:relative;display:inline-flex;width:40px;height:40px;border-radius:50%;flex:none}
.cht-mat>*{width:100%!important;height:100%!important;border-radius:50%;overflow:hidden}
.cht-mat.nho{width:30px;height:30px}
.cht-cham{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--tot);box-shadow:0 0 0 2px var(--the)}
.cht-hang-nguoi .cht-cham{position:absolute}

/* ---- danh sách ---- */
.cht-ds{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--the);box-shadow:1px 0 0 var(--nen)}
.cht-ds-dau{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}
.cht-ds-dau h2{flex:1;margin:0;font-size:20px;font-weight:700;color:var(--chu)}
.cht-trong-ca{display:flex;gap:12px;overflow-x:auto;padding:8px 16px 10px;scrollbar-width:none}
.cht-trong-ca::-webkit-scrollbar{display:none}
.cht-nguoi-ca{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;min-width:52px;padding:0}
.cht-nguoi-ca .cht-mat{width:48px;height:48px}
.cht-nguoi-ca small{font-size:11px;color:var(--chu2);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-nguoi-ca em{font-style:normal;font-size:10px;color:var(--chu3);margin-top:-2px}
.cht-gap-ds{display:flex;align-items:center;gap:10px;margin:4px 12px 6px;padding:10px 12px;border-radius:14px;background:var(--nhan-nhat)}
.cht-gap-ds>div{flex:1;min-width:0;cursor:pointer} .cht-gap-ds b{display:block;font-size:13px;color:var(--nhan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-gap-ds small{font-size:11.5px;color:var(--chu3)}
.cht-gap-ic{width:32px;height:32px;border-radius:50%;background:var(--nhan);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-loc{display:flex;gap:6px;padding:6px 16px 10px;overflow-x:auto;scrollbar-width:none}
.cht-loc::-webkit-scrollbar{display:none}
.cht-loc button{border:0;border-radius:999px;background:var(--nen);color:var(--chu2);font-size:12.5px;font-weight:600;padding:7px 12px;cursor:pointer;white-space:nowrap}
.cht-loc button.chon{background:var(--nhan);color:#fff}
.cht-ds-cuon{flex:1;overflow-y:auto;padding:0 8px 12px}
.cht-dong{width:100%;display:flex;align-items:center;gap:12px;padding:10px 8px;border:0;background:none;border-radius:14px;cursor:pointer;text-align:left;color:var(--chu)}
.cht-dong:hover{background:var(--nen)} .cht-dong.chon{background:var(--nhan-nhat)}
.cht-anh-hoi{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:none}
.cht-anh-hoi>*:not(svg){width:100%!important;height:100%!important;border-radius:50%}
.cht-anh-hoi.ic{background:var(--nhan-nhat);color:var(--nhan)}
.cht-anh-hoi.ic.l-toan_phong_kham{background:var(--nhan);color:#fff}
.cht-dong-chu{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cht-dong-ten{display:flex;align-items:center;gap:5px;color:var(--chu3)}
.cht-dong-ten b{font-size:14px;color:var(--chu);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-dong.moi .cht-dong-ten b{font-weight:700}
.cht-dong-chu small{font-size:12.5px;color:var(--chu3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-dong.moi .cht-dong-chu small{color:var(--chu2)}
.cht-dong-phai{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.cht-dong-phai small{font-size:11px;color:var(--chu3)}
.cht-so{font-style:normal;min-width:20px;height:20px;border-radius:999px;background:var(--nhan);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cht-so.im{background:var(--chim);color:var(--chu2)} .cht-so.nhac{background:var(--nhan)}

/* ---- hội thoại ---- */
.cht-hoi{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--nen)}
.cht-hoi-dau{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--the)}
.cht-lui{display:none}
.cht-chong{display:inline-flex;padding-left:8px}
.cht-chong .cht-mat{margin-left:-10px;box-shadow:0 0 0 2px var(--the);border-radius:50%}
.cht-hoi-ten{flex:1;min-width:0;display:flex;flex-direction:column}
.cht-hoi-ten b{font-size:15px;color:var(--chu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-hoi-ten small{font-size:12px;color:var(--chu3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-ghim-dai{display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:9px 12px;border-radius:12px;background:var(--the);font-size:12.5px;color:var(--chu2);cursor:pointer}
.cht-ghim-dai[hidden]{display:none}
.cht-ghim-dai .cht-ic{color:var(--nhan)} .cht-ghim-dai span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-ghim-dai small{color:var(--chu3)}
.cht-cuon{flex:1;overflow-y:auto;padding:10px 14px 6px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.cht-cu{align-self:center;font-size:11.5px;color:var(--chu3);padding:6px}
.cht-ngay{align-self:center;margin:12px 0 8px}
.cht-ngay span{font-size:11.5px;color:var(--chu3);background:var(--the);border-radius:999px;padding:4px 10px}
.cht-he-thong{align-self:center;font-size:11.5px;color:var(--chu3);padding:4px 10px;text-align:center}
.cht-tin{display:flex;align-items:flex-end;gap:8px;margin-top:8px;position:relative;max-width:100%}
.cht-tin.lien{margin-top:2px}
.cht-mat-tin{width:32px;height:32px;flex:none;display:inline-flex}
.cht-mat-tin>*{width:32px!important;height:32px!important;border-radius:50%;overflow:hidden}
.cht-tin-than{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:min(78%,560px)}
.cht-tin-ten{display:flex;gap:6px;align-items:baseline;padding-left:4px}
.cht-tin-ten b{font-size:12.5px;color:var(--chu2);font-weight:600} .cht-tin-ten small{font-size:11px;color:var(--chu3)}
.cht-bong{background:var(--the);color:var(--chu);border-radius:18px 18px 18px 6px;padding:9px 13px;font-size:14px;line-height:1.45;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 1px rgba(30,20,70,.04)}
.cht-tin.lien .cht-bong{border-radius:18px}
.cht-tin.cua-toi{justify-content:flex-end}
.cht-tin.cua-toi .cht-tin-than{align-items:flex-end}
.cht-tin.cua-toi .cht-bong{background:var(--nhan);color:#fff;border-radius:18px 18px 6px 18px}
.cht-tin.cua-toi .cht-bong a{color:#fff}
.cht-bong a{color:var(--nhan);text-decoration:underline;text-underline-offset:2px}
.cht-bong.thu-hoi{background:transparent!important;color:var(--chu3)!important;box-shadow:inset 0 0 0 1px var(--chim)}
.cht-bong em{font-size:13px}
.cht-da-sua{font-size:10.5px;opacity:.7;align-self:flex-end}
.cht-nhac{font-weight:700;color:var(--nhan)} .cht-tin.cua-toi .cht-nhac{color:#fff;text-decoration:underline}
.cht-trich{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:10px;background:var(--nen);box-shadow:inset 3px 0 0 var(--nhan);font-size:12.5px}
.cht-trich b{font-size:12px;color:var(--nhan)} .cht-trich span{color:var(--chu2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cht-tin.cua-toi .cht-trich{background:rgba(255,255,255,.16);box-shadow:inset 3px 0 0 #fff}
.cht-tin.cua-toi .cht-trich b,.cht-tin.cua-toi .cht-trich span{color:#fff}
.cht-tin-duoi{font-size:11px;color:var(--chu3);padding-right:4px}
.cht-tin-nut{opacity:0;border:0;background:none;color:var(--chu3);font-size:18px;cursor:pointer;padding:0 4px;align-self:center}
.cht-tin:hover .cht-tin-nut{opacity:1}
.cht-tin.cua-toi .cht-tin-nut{order:-1}
.cht-cx{display:flex;gap:4px;flex-wrap:wrap}
.cht-cx button{border:0;border-radius:999px;background:var(--the);font-size:13px;padding:2px 8px;cursor:pointer;display:inline-flex;gap:4px;align-items:center;box-shadow:0 1px 1px rgba(30,20,70,.05)}
.cht-cx button small{font-size:11px;color:var(--chu2)} .cht-cx button.cua-toi{background:var(--nhan-nhat)} .cht-cx button.cua-toi small{color:var(--nhan)}
.cht-luong-chi{border:0;background:none;color:var(--nhan);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:2px 4px}

/* thẻ sống */
.cht-the{display:flex;align-items:center;gap:10px;background:var(--the);color:var(--chu);border-radius:14px;padding:10px 12px;cursor:pointer;min-width:220px;box-shadow:0 1px 3px rgba(30,20,70,.08)}
.cht-bong .cht-the{box-shadow:none;background:var(--nen)}
.cht-tin.cua-toi .cht-the{background:var(--the)}
.cht-the{flex-wrap:wrap}
.cht-the>div{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:2px}
.cht-the b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cht-the small{font-size:11.5px;color:var(--chu3)}
.cht-the-ic{width:36px;height:36px;border-radius:50%;background:var(--nhan-nhat);color:var(--nhan);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-the-mo{font-size:12px;font-weight:600;color:var(--nhan);flex:none}
.cht-the-tt{font-style:normal;font-size:11px;font-weight:600;color:var(--chu2);background:var(--nen);border-radius:999px;padding:3px 8px;flex:none}
.cht-the-tt.tt-arrived,.cht-the-tt.tt-checked_in,.cht-the-tt.tt-completed,.cht-the-tt.tt-confirmed{color:var(--tot)}
.cht-the-tt.tt-cancelled,.cht-the-tt.tt-no_show{color:var(--loi)}
.cht-the.an{cursor:default;color:var(--chu3);font-size:12.5px;gap:8px}
.cht-the-nhan{font-style:normal;font-size:10.5px;font-weight:700;color:var(--nhan);background:var(--nhan-nhat);border-radius:999px;padding:2px 8px}
.cht-anh-tin{border:0;padding:0;background:none;border-radius:14px;overflow:hidden;cursor:zoom-in;max-width:260px;width:100%}
.cht-anh-tin .o-anh{width:100%!important;border-radius:14px}
.cht-tep{border:0;display:flex;align-items:center;gap:10px;background:var(--nen);color:var(--chu);border-radius:12px;padding:9px 12px;cursor:pointer;text-align:left;min-width:0}
.cht-tin.cua-toi .cht-tep{background:rgba(255,255,255,.16);color:#fff}
.cht-tep span{display:flex;flex-direction:column;min-width:0} .cht-tep b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cht-tep small{font-size:11px;opacity:.75}
.cht-tep.nho{padding:7px 10px}

/* gọi gấp & thông báo — tím nhạt, không cam/đỏ */
.cht-gap{display:flex;align-items:center;gap:12px;margin:10px 0;padding:12px 14px;border-radius:18px;background:var(--nhan-nhat);color:var(--chu)}
.cht-gap-chu{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cht-gap-chu b{font-size:13.5px;color:var(--nhan)} .cht-gap-chu span{font-size:14px;font-weight:600} .cht-gap-chu small{font-size:11.5px;color:var(--chu3)}
.cht-gap-phai{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.cht-gap-phai small{font-size:11px;color:var(--chu3)}
.cht-gap-xong{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--tot)}
.cht-tb{margin:10px 0;padding:14px;border-radius:18px;background:var(--the);display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 3px rgba(30,20,70,.06);max-width:640px}
.cht-tb-dau{display:flex;align-items:center;gap:8px} .cht-tb-dau b{font-size:13.5px} .cht-tb-dau small{margin-left:auto;font-size:11px;color:var(--chu3)}
.cht-tb-than{font-size:14.5px;line-height:1.5;color:var(--chu);display:flex;flex-direction:column;gap:6px}
.cht-tb-duoi{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cht-tb-duoi small{font-size:12px;color:var(--chu2)}
.cht-tb-tien{flex:1 1 100%;height:5px;border-radius:5px;background:var(--nen);overflow:hidden}
.cht-tb-tien i{display:block;height:100%;background:var(--nhan);border-radius:5px}
.cht-tb .nut.nho{margin-left:auto}

.cht-go{min-height:18px;padding:0 18px 2px;font-size:12px;color:var(--chu3);display:flex;align-items:center;gap:6px}
.cht-cham-go{display:inline-flex;gap:3px}
.cht-cham-go i{width:5px;height:5px;border-radius:50%;background:var(--chu3);animation:cht-nhay 1.2s infinite}
.cht-cham-go i:nth-child(2){animation-delay:.2s} .cht-cham-go i:nth-child(3){animation-delay:.4s}
@keyframes cht-nhay{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ---- soạn tin ---- */
.cht-soan-khung{padding:6px 12px 12px;background:var(--nen);position:relative}
.cht-soan{display:flex;align-items:flex-end;gap:6px;background:var(--the);border-radius:24px;padding:6px;box-shadow:0 1px 3px rgba(30,20,70,.06)}
.cht-soan textarea{flex:1;min-width:0;border:0!important;outline:0;background:transparent!important;resize:none;font:inherit;font-size:14.5px;line-height:1.4;padding:9px 6px;max-height:140px;color:var(--chu);box-shadow:none!important}
.cht-gui{width:40px;height:40px;border-radius:50%;border:0;background:var(--nhan);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.cht-soan .cht-nut-tron{width:36px;height:36px;background:transparent}
.cht-soan .cht-nut-tron:hover{background:var(--nen)}
.cht-soan-khoa{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--chu3);background:var(--the);border-radius:16px;padding:12px 14px}
.cht-chen{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 6px}
.cht-chen:empty{display:none}
.cht-chen-o{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--the);border-radius:999px;padding:5px 6px 5px 10px;font-size:12px;color:var(--chu2)}
.cht-chen-o span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.cht-chen-o .cht-ic{color:var(--nhan)}
.cht-chen-o button{border:0;background:var(--nen);border-radius:50%;width:20px;height:20px;cursor:pointer;color:var(--chu2);line-height:1}
.cht-goi-y{position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);display:flex;flex-direction:column;background:var(--the);border-radius:16px;box-shadow:0 10px 30px rgba(30,20,70,.16);overflow:hidden;z-index:5}
.cht-goi-y:empty{display:none}
.cht-goi-y button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:9px 14px;cursor:pointer;font-size:13.5px;color:var(--chu);text-align:left;position:relative}
.cht-goi-y button:hover{background:var(--nen)}

/* ---- cột phải: thông tin / luồng ---- */
.cht-phu{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--the);box-shadow:-1px 0 0 var(--nen);overflow:hidden}
.cht-phu:empty{display:none}
.cht-phu-dau{display:flex;align-items:center;gap:10px;padding:12px 14px}
.cht-phu-dau b{font-size:15px} .cht-phu-dau small{font-size:12px;color:var(--chu3);margin-left:auto}
.cht-phu .cht-cuon{background:var(--nen)}
.cht-phu-cuon{flex:1;overflow-y:auto;padding:0 16px 20px;display:flex;flex-direction:column;gap:18px}
.cht-tt-dau{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-top:6px}
.cht-tt-dau b{font-size:16px} .cht-tt-dau small{font-size:12px;color:var(--chu3)}
.cht-tt-nut{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cht-tt-nut button{border:0;background:var(--nen);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--chu2);cursor:pointer}
.cht-tt-nut button .cht-ic{color:var(--nhan)}
.cht-phu section h4{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--chu3);text-transform:uppercase;letter-spacing:.04em}
.cht-tt-ghim{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:12px;background:var(--nen);margin-bottom:6px;font-size:12.5px}
.cht-tt-ghim b{font-size:12px;color:var(--nhan)} .cht-tt-ghim span{color:var(--chu2)}
.cht-tt-tep{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cht-tt-anh{border:0;padding:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--nen)}
.cht-tt-anh .o-anh{width:100%!important}
.cht-tt-tep .cht-tep{grid-column:1/-1}
.cht-hang-nguoi{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px;cursor:pointer;border:0;background:none;width:100%;text-align:left;color:var(--chu)}
.cht-hang-nguoi:hover{background:var(--nen)}
.cht-hang-nguoi>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.cht-hang-nguoi b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-hang-nguoi small{font-size:11.5px;color:var(--chu3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-hang-nguoi.chon{background:var(--nhan-nhat)}
.cht-tich{width:22px;height:22px;border-radius:50%;background:var(--nen);display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.cht-hang-nguoi.chon .cht-tich{background:var(--nhan)}
.cht-them-tv,.cht-roi{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--nhan);font-weight:600;font-size:13.5px;padding:8px 6px;cursor:pointer;width:100%;border-radius:12px}
.cht-them-tv:hover,.cht-roi:hover{background:var(--nen)}
.cht-roi{color:var(--loi)}

/* ---- menu thao tác & hộp ---- */
.cht-menu{position:fixed;z-index:140;background:var(--the);border-radius:18px;box-shadow:0 16px 40px rgba(30,20,70,.2);padding:8px;display:flex;flex-direction:column}
.cht-menu-cx{display:flex;justify-content:space-between;padding:4px 4px 8px}
.cht-menu-cx button{border:0;background:var(--nen);border-radius:50%;width:30px;height:30px;font-size:16px;cursor:pointer}
.cht-menu>button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:9px 10px;border-radius:10px;font-size:13.5px;color:var(--chu);cursor:pointer;text-align:left}
.cht-menu>button:hover{background:var(--nen)} .cht-menu>button .cht-ic{color:var(--chu3)}
.cht-menu>button.nguy{color:var(--loi)} .cht-menu>button.nguy .cht-ic{color:var(--loi)}
.cht-hop-moi,.cht-hop-tim,.cht-hop-the,.cht-hop-gap,.cht-hop-xn{display:flex;flex-direction:column;gap:10px;min-width:min(420px,84vw)}
.cht-chon-nguoi,.cht-kq-tim,.cht-kq-the{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.cht-kq-tim-o,.cht-kq-the-o{border:0;background:none;text-align:left;padding:10px;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;color:var(--chu)}
.cht-kq-the-o{flex-direction:row;align-items:center;gap:10px}
.cht-kq-the-o .cht-ic{color:var(--nhan)}
.cht-kq-tim-o:hover,.cht-kq-the-o:hover{background:var(--nen)}
.cht-kq-tim-o span,.cht-kq-the-o span{display:flex;flex-direction:column}
.cht-kq-tim-o b,.cht-kq-the-o b{font-size:13.5px} .cht-kq-tim-o small,.cht-kq-the-o small{font-size:11.5px;color:var(--chu3)}
.cht-kq-tim-o p{margin:0;font-size:13px;color:var(--chu2)}
.cht-hop-gap p{margin:0;font-size:13px;color:var(--chu2)}
.cht-goi-y-gap{display:flex;flex-wrap:wrap;gap:6px}
.cht-goi-y-gap button{border:0;border-radius:999px;background:var(--nen);font-size:12px;padding:6px 10px;cursor:pointer;color:var(--chu2)}
.cht-hop-xn h4{margin:6px 0 2px;font-size:12px;color:var(--chu3);text-transform:uppercase;letter-spacing:.04em}
.cht-ai ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45}
.cht-ai small{display:block;margin-top:12px;text-align:left;padding:0}

/* ---- dải GỌI GẤP trên mọi màn ---- */
.cht-dai-gap{position:fixed;z-index:150;left:50%;transform:translateX(-50%);top:12px;width:min(560px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px}
/* điện thoại: dải nằm DƯỚI (vùng ngón cái), không che tiêu đề / nút mở thanh bên */
@media (max-width: 760px){.cht-dai-gap{top:auto;bottom:calc(12px + env(safe-area-inset-bottom))}}
.cht-dai-gap-o{display:flex;align-items:center;gap:12px;background:var(--the);border-radius:18px;padding:12px 14px;box-shadow:0 14px 40px rgba(108,66,236,.28),0 0 0 2px var(--nhan);animation:cht-vao .25s ease-out}
.cht-dai-gap-ic{width:38px;height:38px;border-radius:50%;background:var(--nhan);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;animation:cht-rung 1.4s infinite}
.cht-dai-gap-chu{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer}
.cht-dai-gap-chu b{font-size:14px;color:var(--chu)} .cht-dai-gap-chu small{font-size:11.5px;color:var(--chu3)}
@keyframes cht-vao{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
@keyframes cht-rung{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.cht-dai-gap-ic,.cht-cham-go i,.cht-dai-gap-o{animation:none}}

/* nút AI nổi của Chuyển đổi dữ liệu không đè ô soạn tin */
body:has(.cht-khung) .cdx-noi-nut{display:none}
.cht-menu-them>button{padding:12px 10px}
.cht-menu-them>button .cht-ic{color:var(--nhan)}

/* ---- huy hiệu thanh bên ---- */
.cht-dem-ben{margin-left:auto}

/* ---- MOBILE 390: một cột, lần lượt danh sách → hội thoại → luồng ---- */
@media (max-width: 760px){
  .cht-khung,.cht-khung.mo-phu{grid-template-columns:100%;height:calc(100vh - 64px);height:calc(100dvh - 64px);border-radius:0;margin:0 -12px}
  .cht-khung>section,.cht-khung>aside{grid-row:1;grid-column:1}
  .cht-hoi,.cht-phu{display:none}
  .cht-khung.mo-hoi .cht-ds{display:none} .cht-khung.mo-hoi .cht-hoi{display:flex}
  .cht-khung.mo-luong .cht-hoi{display:none} .cht-khung.mo-luong .cht-phu{display:flex}
  .cht-khung{position:relative}
  /* khung thông tin phủ ĐÚNG vùng chat (không phủ cả màn: thanh trên của app có nút menu nổi đè lên nút đóng) */
  .cht-khung.mo-hoi.mo-phu:not(.mo-luong) .cht-phu:not(:empty){display:flex;position:absolute;inset:0;z-index:60}
  .cht-lui{display:inline-flex}
  .cht-tin-than{max-width:82%}
  .cht-tin-nut{display:none}
  .cht-ds-dau{padding:12px 16px 6px}
  .cht-gap{flex-wrap:wrap}
  .cht-soan .chi-rong{display:none}
  .cht-the{min-width:0}
}
@media (min-width: 761px) and (max-width: 1100px){
  .cht-khung{grid-template-columns:290px minmax(0,1fr) 0}
  .cht-khung.mo-phu{grid-template-columns:0 minmax(0,1fr) 320px}
  .cht-khung.mo-phu .cht-ds{display:none}
}

/* ---- VIỆC SINH TỪ TIN (giao việc) ---- */
.cht-the-viec{cursor:default;padding:8px 10px}
.cht-viec{display:flex;align-items:center;gap:10px;flex:1 1 100%;min-width:0}
.cht-viec>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cht-viec b{font-size:13px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.cht-viec small{font-size:11.5px;color:var(--chu3)}
.cht-viec.xong b{text-decoration:line-through;color:var(--chu3)}
.cht-viec.huy{opacity:.55}
.cht-viec-o{width:24px;height:24px;border-radius:50%;border:0;background:var(--the);box-shadow:inset 0 0 0 2px var(--nhan);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.cht-viec-o.xong{background:var(--nhan);box-shadow:none}
.cht-viec-o:disabled{cursor:default;box-shadow:inset 0 0 0 2px var(--chim)}
.cht-viec-o.xong:disabled{background:var(--chu3)}
.cht-viec-tre{font-style:normal;color:var(--loi);font-weight:600}
.cht-viec-nut{border:0;border-radius:999px;background:var(--nhan);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;flex:none}
.cht-viec-huy{border:0;background:none;color:var(--chu3);cursor:pointer;padding:4px;border-radius:50%;display:inline-flex;flex:none}
.cht-viec-huy:hover{background:var(--nen)}
.cht-viec.nho{padding:8px 10px;border-radius:12px;background:var(--nen);margin-bottom:6px}
.cht-viec.nho .cht-viec-o{background:var(--the)}
.cht-viec.nho .cht-viec-o.xong{background:var(--nhan)}
.cht-hop-viec{display:flex;flex-direction:column;gap:10px;min-width:min(440px,86vw)}
.cht-hop-viec p{margin:0;font-size:13px;color:var(--chu2)}
.cht-hop-viec h5{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--chu2);text-transform:uppercase;letter-spacing:.04em}
.cht-hop-viec textarea{resize:vertical;font:inherit;font-size:14px}
.cht-chon-nhan{max-height:30vh}
.cht-goi-y-gap button.chon{background:var(--nhan);color:#fff}
.cht-viec-gap{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--chu2)}
.cht-hop-viec>*{min-width:0;max-width:100%}
.cht-hop-viec textarea,.cht-hop-viec input[type=datetime-local]{width:100%;box-sizing:border-box;border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;color:var(--chu)}
.cht-hop-viec input[type=datetime-local]:focus,.cht-hop-viec textarea:focus{outline:2px solid var(--nhan);outline-offset:0}
@media (max-width:760px){.cht-hop-viec{min-width:0;width:100%}}
/* `.cht-the>div` (thẻ khách/lịch hẹn) là cột — dòng việc nằm trong thẻ phải là HÀNG */
.cht-the>.cht-viec{flex-direction:row;align-items:center;gap:10px;flex:1 1 100%}

/* ---- TIN NHẮN THOẠI ---- */
.cht-mic[hidden],.cht-gui[hidden]{display:none}
.cht-thoai{display:flex;align-items:center;gap:10px;min-width:210px;max-width:280px}
.cht-thoai-nut{width:36px;height:36px;border-radius:50%;border:0;background:var(--nhan);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.cht-thoai-nut .cht-ic{fill:currentColor;stroke:none}
.cht-tin.cua-toi .cht-thoai-nut{background:#fff;color:var(--nhan)}
.cht-thoai-vach{flex:1;display:flex;align-items:center;gap:2px;height:28px;cursor:pointer}
.cht-thoai-vach i{flex:1;min-width:2px;border-radius:2px;background:var(--chim);transition:background .15s}
.cht-thoai-vach i.da{background:var(--nhan)}
.cht-tin.cua-toi .cht-thoai-vach i{background:rgba(255,255,255,.4)}
.cht-tin.cua-toi .cht-thoai-vach i.da{background:#fff}
.cht-thoai small{font-size:12px;font-variant-numeric:tabular-nums;color:var(--chu3);flex:none;min-width:30px;text-align:right}
.cht-tin.cua-toi .cht-thoai small{color:rgba(255,255,255,.85)}
.cht-dang-ghi{align-items:center}
.cht-dang-ghi b{font-variant-numeric:tabular-nums;font-size:15px;color:var(--chu)}
.cht-dang-ghi small{flex:1;color:var(--chu3);font-size:13px}
.cht-ghi-cham{width:10px;height:10px;border-radius:50%;background:var(--nhan);animation:cht-nhap 1s ease-in-out infinite;flex:none}
@keyframes cht-nhap{50%{opacity:.25}}

/* ---- CHUYỂN TIẾP · AI ĐÃ XEM ---- */
.cht-chuyen-nhan{display:flex;align-items:center;gap:5px;font-size:11.5px;font-style:italic;color:var(--chu3)}
.cht-tin.cua-toi .cht-chuyen-nhan{color:rgba(255,255,255,.8)}
.cht-da-xem{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.cht-da-xem:hover{color:var(--nhan);text-decoration:underline}
.cht-hop-xn h4{margin:6px 0 2px;font-size:12px;font-weight:700;color:var(--chu2);text-transform:uppercase;letter-spacing:.04em}
.cht-hop-moi input[type=text]{width:100%;box-sizing:border-box}
/* mọi hộp của chat trên điện thoại: bề rộng theo hộp chứa, ô nhập không đẩy tràn ngang */
@media (max-width:760px){
  .cht-hop-moi,.cht-hop-tim,.cht-hop-the,.cht-hop-gap,.cht-hop-xn,.cht-hop-viec{min-width:0;width:100%}
  .cht-hop-moi input,.cht-hop-tim input,.cht-hop-the input,.cht-hop-gap input{width:100%;box-sizing:border-box;min-width:0}
}

/* ---- HỒ SƠ KHÁCH → TRAO ĐỔI NỘI BỘ ---- */
.cht-nut-khach[hidden]{display:none}
.cht-nut-khach{display:inline-flex;align-items:center;gap:6px}
.cht-hop-khach{max-height:70vh;overflow-y:auto}
.cht-kq-dong{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:var(--nen);border-radius:12px;padding:9px 12px;text-align:left;cursor:pointer;font:inherit;color:var(--chu);width:100%}
.cht-kq-dong:hover{background:var(--nhan-nhat)}
.cht-kq-dong b{font-size:13px} .cht-kq-dong b small{font-weight:400;color:var(--chu3)}
.cht-kq-dong span,.cht-kq-dong>small{font-size:12.5px;color:var(--chu2)}

/* ================= ẢNH & VIDEO TRONG TIN (album) — 25/09/2026 ================= */
.cht-bong.chi-media{background:transparent!important;box-shadow:none!important;padding:0!important}
.cht-album{display:grid;gap:3px;border-radius:16px;overflow:hidden;width:min(260px,64vw)}
.cht-album.n1{display:block;width:auto}
.cht-album.n2{grid-template-columns:1fr 1fr}
.cht-album.n3,.cht-album.n4{grid-template-columns:1fr 1fr}
.cht-album.n3 .cht-media:first-child{grid-column:1/3;aspect-ratio:2/1}
.cht-media{position:relative;border:0;padding:0;margin:0;background:var(--nen);cursor:zoom-in;display:block;aspect-ratio:1/1;overflow:hidden;width:100%}
.cht-media img{width:100%;height:100%;object-fit:cover;display:block}
.cht-media.mot{aspect-ratio:auto;min-width:120px;min-height:90px;border-radius:16px;background:var(--nen)}
.cht-media.mot img{width:auto;height:auto;max-width:min(260px,64vw);max-height:320px;object-fit:contain;border-radius:16px}
.cht-media.mot.dang-tai{width:min(220px,58vw);height:160px}
.cht-media.dang-tai::after{content:'';position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:3px solid var(--chim);border-top-color:var(--nhan);animation:cht-quay .8s linear infinite}
.cht-media.hong{display:flex;align-items:center;justify-content:center;color:var(--chu3);font-size:12px;cursor:default;min-height:90px}
.cht-media.video{background:#1d1733;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.cht-media.video.mot{width:min(220px,58vw);height:150px}
.cht-media.video small{font-size:11px;opacity:.8}
.cht-media-phat{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center}
.cht-media-phat .cht-ic,.cht-kho-o.video .cht-ic,.cht-chen-vid .cht-ic{fill:currentColor;stroke:none}
.cht-media-them{position:absolute;inset:0;background:rgba(20,14,40,.55);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center}
@keyframes cht-quay{to{transform:rotate(360deg)}}
.cht-cx-ai{padding:2px 7px!important;color:var(--chu3);font-weight:700}

/* ================= TRÌNH XEM TOÀN MÀN HÌNH ================= */
.cht-xem{position:fixed;inset:0;z-index:200;background:rgba(12,8,24,.94);display:flex;flex-direction:column;color:#fff}
.cht-xem-dau{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px}
.cht-xem-dau>div{flex:1;min-width:0;display:flex;flex-direction:column}
.cht-xem-dau b{font-size:14px} .cht-xem-dau small{font-size:12px;opacity:.7}
.cht-xem-nut{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cht-xem-than{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 8px calc(env(safe-area-inset-bottom) + 16px)}
.cht-xem-than img,.cht-xem-than video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.cht-xem-cho{opacity:.7;font-size:14px}
.cht-xem-lui,.cht-xem-toi{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cht-xem-lui{left:12px} .cht-xem-toi{right:12px}
@media (max-width:760px){.cht-xem-lui,.cht-xem-toi{display:none}}

/* ================= Ô SOẠN: XEM TRƯỚC ẢNH · KÉO-THẢ ================= */
.cht-chen-media{display:flex;gap:8px;overflow-x:auto;padding:4px 2px}
.cht-chen-anh{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--nen);flex:none}
.cht-chen-anh img{width:100%;height:100%;object-fit:cover}
.cht-chen-anh.dang img{opacity:.45}
.cht-chen-anh>button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(20,14,40,.65);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.cht-chen-vid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1d1733;color:#fff}
.cht-quay{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.6);border-top-color:var(--nhan);animation:cht-quay .8s linear infinite}
.keo-tha{outline:3px dashed var(--nhan);outline-offset:-8px}
.cht-soan textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= KHO CỦA HỘI THOẠI ================= */
.cht-kho-tab{display:flex;gap:6px;padding:0 14px 8px}
.cht-kho-tab button{border:0;background:var(--nen);color:var(--chu2);border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.cht-kho-tab button.chon{background:var(--nhan);color:#fff}
.cht-kho-noi{display:flex;flex-direction:column;gap:4px}
.cht-kho-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.cht-kho-luoi.nho{margin-bottom:8px;border-radius:12px;overflow:hidden}
.cht-kho-o{border:0;padding:0;aspect-ratio:1/1;background:var(--nen);overflow:hidden;cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.cht-kho-o img{width:100%;height:100%;object-fit:cover}
.cht-kho-o.video{background:#1d1733;color:#fff;cursor:pointer}
.cht-kho-dong{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:9px 6px;border-radius:12px;cursor:pointer;font:inherit;color:var(--chu);text-decoration:none;width:100%}
.cht-kho-dong:hover{background:var(--nen)}
.cht-kho-dong>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cht-kho-dong b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-kho-dong small{font-size:11.5px;color:var(--chu3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-kho-ic{width:36px;height:36px;border-radius:10px;background:var(--nhan-nhat);color:var(--nhan);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-kho-them{border:0;background:var(--nen);border-radius:12px;padding:10px;font:inherit;font-weight:600;color:var(--nhan);cursor:pointer;margin-top:8px;width:100%}
.cht-kho-them[hidden]{display:none}
.cht-kho-loi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cht-kho-loi button{border:0;background:var(--nen);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;font-size:12px;font-weight:600;color:var(--chu2);cursor:pointer}
.cht-kho-loi button .cht-ic{color:var(--nhan)}

/* ================= TƯƠNG TÁC VỚI TÔI ================= */
.cht-nut-tt{position:relative}
.cht-nut-tt .cht-so{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;font-size:10px;padding:0 4px}
.cht-hop-tt{display:flex;flex-direction:column;gap:10px;min-width:min(460px,86vw)}
.cht-tt-ds{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow-y:auto}
.cht-tt-dong{display:flex;align-items:flex-start;gap:10px;border:0;background:none;text-align:left;padding:10px 8px;border-radius:12px;cursor:pointer;font:inherit;color:var(--chu);width:100%}
.cht-tt-dong:hover{background:var(--nen)}
.cht-tt-dong.moi{background:var(--nhan-nhat)}
.cht-tt-dong .cht-mat{position:relative}
.cht-tt-loai{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;border-radius:50%;background:var(--the);font-style:normal;font-size:11px;font-weight:700;color:var(--nhan);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cht-tt-dong>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cht-tt-cau{font-size:13.5px;line-height:1.35} .cht-tt-cau small{color:var(--chu3)}
.cht-tt-trich{font-size:12.5px;color:var(--chu2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-tt-luc{font-size:11px;color:var(--chu3);flex:none}
@media (max-width:760px){.cht-hop-tt{min-width:0;width:100%}}

/* ================= ĐẦU MÀN CHAT TRÊN ĐIỆN THOẠI (25/09/2026) =================
   Chủ dự án (ảnh iPhone): "phần đầu thiết kế kém chuyên nghiệp" — nút menu nổi của app chiếm một dải 46px trống phía trên đầu
   hội thoại, đầu có ba nút tròn. Nay: màn chat chiếm trọn chiều cao, nút menu nằm TRONG đầu danh sách, đầu hội thoại sát mép trên
   (chừa vùng tai thỏ), tách khỏi phần tin bằng bóng mờ chứ không viền; chỉ còn nút lùi + tên + một nút Thông tin. */
.cht-mo-menu{display:none}
@media (max-width:760px){
  body:has(.cht-khung) .nut-mo-ben{display:none}
  .chinh:has(.cht-khung){padding-top:0!important}
  .cht-khung,.cht-khung.mo-phu{height:100vh;height:100dvh}
  .cht-mo-menu{display:inline-flex;align-items:center;justify-content:center}
  .cht-ds-dau{padding:calc(env(safe-area-inset-top) + 10px) 14px 6px}
  .cht-ds-dau h2{font-size:22px}
  .cht-hoi-dau{padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;gap:8px;box-shadow:0 1px 0 rgba(30,20,70,.06),0 4px 14px -8px rgba(30,20,70,.18);position:relative;z-index:2}
  .cht-hoi-dau .cht-nut-tron{width:38px;height:38px;background:transparent}
  .cht-hoi-dau .cht-lui{margin-left:-4px}
  .cht-hoi-ten b{font-size:16px;font-weight:700}
  .cht-hoi-ten small{font-size:12.5px}
  .cht-chong .cht-mat{width:32px!important;height:32px!important}
  .cht-phu-dau{padding-top:calc(env(safe-area-inset-top) + 10px)}
  .cht-soan{margin-bottom:env(safe-area-inset-bottom)}
}

/* ---- # gợi ý tại chỗ + cửa sổ tìm theo loại ---- */
.cht-goi-y .cht-goi-y-loai{background:var(--nen);font-size:13px}
.cht-goi-y .cht-goi-y-loai>span{flex:1;min-width:0}
.cht-goi-y .cht-goi-y-loai small{color:var(--chu3)}
.cht-goi-y .cht-goi-y-loai .cht-ic{color:var(--nhan)}
.cht-goi-y-cho{padding:9px 14px;font-size:12.5px;color:var(--chu3)}
.cht-goi-y-ic{width:28px;height:28px;border-radius:8px;background:var(--nhan-nhat);color:var(--nhan);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-goi-y button>span:nth-child(2) small{color:var(--chu3);font-size:12px}
.cht-hop-the-tim{display:flex;gap:8px}
.cht-hop-the-tim input[type=search]{flex:1;min-width:0}
.cht-hop-the-tim input[type=date]{border:0;background:var(--nen);border-radius:12px;padding:8px 10px;font:inherit}
.cht-hop-the-tim input[hidden]{display:none}
.cht-goi-y-gap button.chon{background:var(--nhan);color:#fff}

/* ẢNH ĐẠI DIỆN NGANG HÀNG TÊN (chủ dự án 25/09/2026: "hình đại diện lệch với tên user") — trước đây ảnh bám đáy bong bóng,
   tin dài thì ảnh trôi xuống xa khỏi tên. Nay ảnh đứng đầu hàng, cùng dòng tên; các tin liền sau của cùng người để trống cột ảnh. */
.cht-tin:not(.cua-toi){align-items:flex-start}
.cht-tin:not(.cua-toi) .cht-mat-tin{align-self:flex-start;margin-top:1px}
.cht-tin-ten{min-height:18px;align-items:center}
.cht-tin-nut{align-self:center}

/* ================= DANH SÁCH: NHẮN NHANH + KÊNH CÔNG VIỆC LƯỚT NGANG (25/09/2026) ================= */
.cht-nhanh-nut{display:flex;align-items:center;gap:8px;margin:2px 14px 8px;padding:10px 14px;border:0;border-radius:14px;background:var(--nen);color:var(--chu3);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.cht-nhanh-nut>span{flex:1}
.cht-nhanh-nut .cht-ic{color:var(--nhan)}
.cht-nhanh-nut.mo{background:var(--nhan-nhat);color:var(--nhan)}
.cht-nhanh-mui{font-style:normal;transition:transform .2s}
.cht-nhanh-nut.mo .cht-nhanh-mui{transform:rotate(180deg)}
.cht-nhanh{margin:0 14px 10px;background:var(--the);border-radius:16px;box-shadow:0 12px 30px -12px rgba(30,20,70,.28);padding:10px;display:flex;flex-direction:column;gap:6px;animation:cht-sa .18s ease-out}
.cht-nhanh input{border:0;background:var(--nen);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px}
.cht-nhanh-ds{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:1px;overscroll-behavior:contain}
.cht-nhanh-ds h5{margin:8px 6px 2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--chu3)}
@keyframes cht-sa{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.cht-kenh{padding:2px 0 6px}
.cht-kenh-dau{display:flex;align-items:baseline;gap:8px;padding:0 16px 6px}
.cht-kenh-dau b{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--chu2)}
.cht-kenh-dau small{font-size:11.5px;color:var(--chu3)}
.cht-kenh-luot{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cht-kenh-luot::-webkit-scrollbar{display:none}
.cht-kenh-the{flex:0 0 min(62vw,196px);scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;border:0;border-radius:18px;padding:12px;background:var(--the);text-align:left;cursor:pointer;font:inherit;color:var(--chu);box-shadow:0 1px 2px rgba(30,20,70,.06);transition:transform .12s ease}
.cht-kenh-the:active{transform:scale(.97)}
.cht-kenh-the.moi{background:var(--nhan-nhat)}
.cht-kenh-the.chon{box-shadow:inset 0 0 0 2px var(--nhan)}
.cht-kenh-the.l-toan_phong_kham{background:var(--nhan);color:#fff}
.cht-kenh-the.l-toan_phong_kham small,.cht-kenh-the.l-toan_phong_kham em{color:rgba(255,255,255,.8)}
.cht-kenh-the.l-toan_phong_kham .cht-anh-hoi{background:rgba(255,255,255,.2)!important;color:#fff}
.cht-kenh-tren{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.cht-kenh-the b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-kenh-the small{font-size:12px;color:var(--chu3);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.cht-kenh-the em{font-style:normal;font-size:11px;color:var(--chu3)}
.cht-ds-trong{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px}
.cht-dong{transition:background .12s ease,transform .12s ease}
.cht-dong:active{transform:scale(.985)}
@media (min-width:761px){.cht-kenh-the{flex-basis:176px}}

/* ================= CẢM ỨNG: tim bay · vuốt trả lời · tin mới trượt vào ================= */
.cht-bong{position:relative}
.cht-tim-bay{position:absolute;left:50%;top:50%;font-size:34px;pointer-events:none;transform:translate(-50%,-50%) scale(.3);animation:cht-tim-bay .85s cubic-bezier(.2,.9,.3,1.2) forwards;z-index:3;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
@keyframes cht-tim-bay{35%{transform:translate(-50%,-60%) scale(1.25);opacity:1}100%{transform:translate(-50%,-150%) scale(.9);opacity:0}}
.cht-tin{transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.cht-tin.dang-keo{transition:none}
.cht-tin::before{content:'↩';position:absolute;left:-30px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--nhan-nhat);color:var(--nhan);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;pointer-events:none}
.cht-tin.dang-keo::before{opacity:.5;transform:scale(.8)}
.cht-tin.keo-du::before{opacity:1;transform:scale(1);background:var(--nhan);color:#fff}
.cht-tin.vua-toi,.cht-gap.vua-toi{animation:cht-vao .28s cubic-bezier(.2,.9,.3,1)}
@keyframes cht-vao{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.cht-cx button{transition:transform .12s ease}
.cht-cx button:active{transform:scale(1.18)}
.cht-bong{-webkit-touch-callout:none}
.cht-nut-tron,.cht-gui{transition:transform .1s ease}
.cht-nut-tron:active,.cht-gui:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.cht-tim-bay,.cht-tin.vua-toi,.cht-nhanh{animation:none}.cht-tin{transition:none}}

/* ================= BÌNH CHỌN ================= */
.cht-bong.cht-bong-bc{padding:12px;min-width:min(300px,72vw)}
.cht-tin.cua-toi .cht-bong.cht-bong-bc{background:var(--the);color:var(--chu);box-shadow:inset 0 0 0 2px var(--nhan-nhat)}
.cht-bc{display:flex;flex-direction:column;gap:8px}
.cht-bc-dau{display:flex;gap:10px;align-items:flex-start}
.cht-bc-dau>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cht-bc-dau b{font-size:14.5px;line-height:1.35}
.cht-bc-dau small{font-size:11.5px;color:var(--chu3)}
.cht-bc-ic,.cht-nhac-ic{width:30px;height:30px;border-radius:10px;background:var(--nhan-nhat);color:var(--nhan);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-bc-cai{border:0;background:var(--nen);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;color:var(--chu2)}
.cht-bc-ds{display:flex;flex-direction:column;gap:6px}
.cht-bc-o{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:12px;background:var(--nen);padding:10px 12px;font:inherit;font-size:13.5px;color:var(--chu);cursor:pointer;overflow:hidden;text-align:left;transition:transform .1s ease}
.cht-bc-o:active:not(:disabled){transform:scale(.98)}
.cht-bc-o:disabled{cursor:default}
.cht-bc-thanh{position:absolute;left:0;top:0;bottom:0;background:var(--nhan-nhat);transition:width .35s ease;z-index:0}
.cht-bc-o.chon .cht-bc-thanh{background:color-mix(in srgb,var(--nhan) 24%,transparent)}
.cht-bc-o>span{position:relative;z-index:1;display:flex;align-items:center;gap:8px;min-width:0}
.cht-bc-o-dau>span{overflow:hidden;text-overflow:ellipsis}
.cht-bc-o-phai b{font-size:12.5px;color:var(--nhan)} .cht-bc-o-phai small{font-size:11px;color:var(--chu3);min-width:14px;text-align:right}
.cht-bc-tron,.cht-bc-hop{width:18px;height:18px;flex:none;box-shadow:inset 0 0 0 2px var(--chim);display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--the)}
.cht-bc-tron{border-radius:50%} .cht-bc-hop{border-radius:5px}
.cht-bc-o.chon .cht-bc-tron,.cht-bc-o.chon .cht-bc-hop{background:var(--nhan);box-shadow:none}
.cht-bc-mat{display:inline-flex}
.cht-bc-mat>*{width:18px!important;height:18px!important;margin-left:-5px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--nen);font-size:8px!important}
.cht-bc-chan{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cht-bc-chan small{flex:1;font-size:12px;color:var(--chu3)}
.cht-bc-chan button{border:0;background:none;color:var(--nhan);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0}
.cht-bc.dong .cht-bc-o{opacity:.85}
.cht-bc-nhap{display:flex;flex-direction:column;gap:6px}
.cht-bc-nhap-dong{display:flex;gap:6px}
.cht-bc-nhap-dong input,.cht-hop-viec>input[type=text],.cht-hop-viec select{flex:1;border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;min-width:0}
.cht-bc-nhap-dong button{border:0;background:var(--nen);width:36px;border-radius:10px;cursor:pointer;font-size:16px;color:var(--chu3)}
.cht-bc-them{border:0;background:none;color:var(--nhan);font:inherit;font-weight:600;font-size:13px;cursor:pointer;text-align:left;padding:4px 2px}
.cht-bc-cong{display:flex;gap:10px;align-items:flex-start;padding:6px 2px;cursor:pointer}
.cht-bc-cong input{margin-top:3px;accent-color:var(--nhan)}
.cht-bc-cong span{display:flex;flex-direction:column}
.cht-bc-cong b{font-size:13.5px;font-weight:600} .cht-bc-cong small{font-size:12px;color:var(--chu3)}
.cht-bc-cong.khoa{opacity:.55;cursor:default}
.cht-chon-han{display:flex;flex-direction:column;gap:8px}
.cht-chon-han input{border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;width:100%;box-sizing:border-box}

/* ================= NHẮC HẸN ================= */
.cht-bong.cht-bong-nhac{background:var(--nhan-nhat)!important;color:var(--chu)!important}
.cht-nhac-tin{display:flex;gap:10px;align-items:flex-start}
.cht-nhac-tin>div{display:flex;flex-direction:column;gap:2px}
.cht-nhac-tin small{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nhan)}
.cht-nhac-tin .cht-nhac-ic{background:var(--the)}
.cht-nhac-dong{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--nen);margin-bottom:6px}
.cht-nhac-dong>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.cht-nhac-dong b{font-size:13px} .cht-nhac-dong small{font-size:11.5px;color:var(--chu3)}
.cht-nhac-dong.xong{opacity:.6}
.cht-nhac-dong button{border:0;background:none;color:var(--chu3);cursor:pointer;padding:4px}
.cht-nhac-dong .cht-nhac-ic{width:26px;height:26px;border-radius:8px;background:var(--the)}
.cht-kenh-luot{scroll-padding-inline:14px}

/* ---- BIỂU TƯỢNG KÊNH HỆ THỐNG: sắc độ của một màu tím ---- */
.cht-bieu{display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-bieu .cht-ic{stroke-width:1.9}
.cht-bieu.b-dac{background:var(--nhan);color:#fff}
.cht-bieu.b-ca{background:color-mix(in srgb,var(--nhan) 12%,var(--the));color:var(--nhan);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--nhan) 35%,transparent)}
.cht-bieu.b-s1{background:color-mix(in srgb,var(--nhan) 10%,var(--the));color:var(--nhan)}
.cht-bieu.b-s2{background:color-mix(in srgb,var(--nhan) 20%,var(--the));color:color-mix(in srgb,var(--nhan) 85%,#000)}
.cht-bieu.b-s3{background:color-mix(in srgb,var(--nhan) 34%,var(--the));color:color-mix(in srgb,var(--nhan) 70%,#000)}
.cht-bieu.b-s4{background:color-mix(in srgb,var(--nhan) 70%,var(--the));color:#fff}

/* ================= DẢI LƯỚT NGANG GỌN (25/09/2026 — "thiết kế gọn khi xem trên điện thoại") =================
   Kênh công việc và "Đang diễn ra" là VIÊN một hàng cao 44–48px thay cho thẻ 140px; nhãn dải là chữ nhỏ 10.5px. */
.cht-dai-nhan{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chu3);padding:0 16px 4px}
.cht-kenh,.cht-ddr{padding:0 0 4px}
.cht-kenh-luot{gap:8px;padding:0 14px 6px}
.cht-kenh-the{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;max-width:210px;min-width:0;padding:6px 10px 6px 6px;border-radius:14px;height:46px;box-sizing:border-box}
.cht-kenh-the .cht-anh-hoi{flex:none}
.cht-kenh-chu{display:flex;flex-direction:column;min-width:0;gap:1px}
.cht-kenh-the b,.cht-ddr-vien b{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;display:block}
.cht-kenh-the small,.cht-ddr-vien small{font-size:11px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;display:block;min-height:0;-webkit-line-clamp:unset}
.cht-kenh-the .cht-so{flex:none;margin-left:2px}
.cht-kenh-the.moi b{color:var(--nhan)}
.cht-ddr-vien{flex:0 0 auto;display:flex;align-items:center;gap:8px;max-width:250px;height:46px;box-sizing:border-box;padding:6px 8px 6px 6px;border-radius:14px;background:var(--the);cursor:pointer;scroll-snap-align:start;box-shadow:0 1px 2px rgba(30,20,70,.06);transition:transform .12s ease}
.cht-ddr-vien:active{transform:scale(.97)}
.cht-ddr-ic{width:32px;height:32px;border-radius:10px;background:var(--nhan-nhat);color:var(--nhan);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cht-ddr-vien.l-goi_gap{background:var(--nhan);color:#fff}
.cht-ddr-vien.l-goi_gap small{color:rgba(255,255,255,.8)}
.cht-ddr-vien.l-goi_gap .cht-ddr-ic{background:rgba(255,255,255,.2);color:#fff;animation:cht-nhip 1.4s ease-in-out infinite}
.cht-ddr-vien.l-thong_bao .cht-ddr-ic{background:var(--nhan);color:#fff}
.cht-ddr-vien.tre small{color:var(--loi)}
.cht-ddr-nut{border:0;border-radius:999px;background:#fff;color:var(--nhan);font:inherit;font-size:12px;font-weight:700;padding:6px 10px;cursor:pointer;flex:none}
@keyframes cht-nhip{50%{transform:scale(1.08)}}
.cht-ds-dau{padding-bottom:4px}
.cht-nhanh-nut{margin:0 14px 8px;padding:8px 12px;font-size:13.5px}
@media (min-width:761px){
  .cht-kenh-the{height:52px;max-width:230px}
  .cht-kenh-the b,.cht-ddr-vien b{max-width:170px}
  .cht-kenh-the small,.cht-ddr-vien small{max-width:170px}
}
@media (max-width:760px){
  /* điện thoại: viên kênh chỉ tên (xem trước nằm trong tooltip / khi mở kênh) — dải thấp 44px */
  .cht-kenh-the{height:42px;padding:5px 10px 5px 5px}
  .cht-kenh-the small{display:none}
  .cht-kenh-the .cht-anh-hoi{width:32px!important;height:32px!important}
  .cht-ddr-vien{height:44px;max-width:78vw}
  .cht-loc{padding-top:2px;padding-bottom:6px}
  .cht-loc button{padding:6px 12px;font-size:12.5px}
}

/* ================= DẢI KÊNH CÔNG VIỆC NỔI HƠN (25/09/2026 — chủ dự án: "gọn quá bị chìm so với các nhóm chat riêng") =================
   Mảng nền tím nhạt riêng cho cả dải · thẻ trắng cao 60px có một dòng xem trước · kênh chưa đọc viền tím + chữ đậm.
   Vẫn giữ trong ~100px chiều cao trên điện thoại (thẻ cũ 140px, bản quá gọn 72px). */
.cht-kenh{margin:2px 12px 10px;padding:10px 0 4px;border-radius:18px;background:color-mix(in srgb,var(--nhan) 7%,var(--nen))}
.cht-kenh .cht-kenh-luot{padding:0 10px 6px;scroll-padding-inline:10px}
.cht-kenh-nhan{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--nhan);padding:0 12px 8px}
.cht-kenh-nhan .cht-ic{color:var(--nhan)}
.cht-kenh-nhan .cht-so{min-width:18px;height:18px;font-size:10px;margin-left:2px}
.cht-kenh .cht-kenh-the{height:60px;padding:8px 12px 8px 8px;gap:10px;background:var(--the);border-radius:16px;box-shadow:0 1px 3px rgba(30,20,70,.08);max-width:230px}
.cht-kenh .cht-kenh-the b{font-size:14px;font-weight:700;color:var(--chu);max-width:150px}
.cht-kenh .cht-kenh-the small{display:block;font-size:11.5px;max-width:150px}
.cht-kenh .cht-kenh-the.moi{background:var(--the);box-shadow:inset 0 0 0 2px var(--nhan),0 2px 8px -2px color-mix(in srgb,var(--nhan) 40%,transparent)}
.cht-kenh .cht-kenh-the.moi b{color:var(--nhan)}
.cht-kenh .cht-kenh-the.moi small{color:var(--chu2);font-weight:600}
.cht-kenh .cht-kenh-the.chon{box-shadow:inset 0 0 0 2px var(--nhan)}
@media (max-width:760px){
  .cht-kenh .cht-kenh-the{height:58px;max-width:72vw;padding:7px 10px 7px 7px}
  .cht-kenh .cht-kenh-the small{display:block;max-width:44vw}
  .cht-kenh .cht-kenh-the b{max-width:44vw}
  .cht-kenh .cht-kenh-the .cht-anh-hoi{width:38px!important;height:38px!important}
}

/* ================= TRỰC TUYẾN ================= */
.cht-mat{position:relative}
.cht-onl{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--chim);box-shadow:0 0 0 2px var(--the)}
.cht-onl.bat{background:#22a55b}
.cht-onl.lon{width:16px;height:16px;right:1px;bottom:1px;box-shadow:0 0 0 3px var(--the)}
.cht-mat-bam{border:0;padding:0;background:none;cursor:pointer;border-radius:50%;flex:none}
.cht-mat-bam:active{transform:scale(.94)}
.cht-hang-nguoi[role=button]{cursor:pointer}
.cht-hs{display:flex;flex-direction:column;gap:12px;min-width:min(380px,84vw)}
.cht-hs-dau{display:flex;gap:14px;align-items:center}
.cht-hs-dau>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cht-hs-dau b{font-size:17px}
.cht-hs-dau small{font-size:12.5px;color:var(--chu3)}
.cht-hs-mat{position:relative;flex:none}
.cht-hs-mat>*:first-child{width:64px!important;height:64px!important;border-radius:50%;overflow:hidden;font-size:22px!important}
.cht-hs-tt{font-size:12.5px;font-weight:600;color:var(--chu3)}
.cht-hs-tt.bat{color:#1a8a4b}
.cht-hs-dong{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--chu2);background:var(--nen);border-radius:12px;padding:9px 12px}
.cht-hs-dong .cht-ic{color:var(--nhan)} .cht-hs-dong.mo{color:var(--chu3)}
.cht-hs-so{display:flex;flex-direction:column;gap:10px}
.cht-hs-ca{background:var(--nhan-nhat);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.cht-hs-ca-dau{display:flex;align-items:baseline;gap:8px}
.cht-hs-ca-dau b{font-size:24px;color:var(--nhan)} .cht-hs-ca-dau small{font-size:12.5px;color:var(--chu2)}
.cht-hs-thanh{height:8px;border-radius:999px;background:var(--the);overflow:hidden}
.cht-hs-thanh i{display:block;height:100%;background:var(--nhan);border-radius:999px}
.cht-hs-ca>small{font-size:12px;color:var(--chu3)}
.cht-hs-canh{margin:4px 0 0;font-size:12.5px;font-weight:600;color:var(--nhan)}
.cht-hs-luoi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cht-hs-luoi>div{background:var(--nen);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.cht-hs-luoi b{font-size:16px} .cht-hs-luoi small{font-size:11.5px;color:var(--chu3)}
.cht-hs-rieng{font-size:11px;color:var(--chu3)}
.cht-goi-y-chip{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;scrollbar-width:none;border-bottom:1px solid transparent;background:var(--nen)}
.cht-goi-y-chip::-webkit-scrollbar{display:none}
.cht-goi-y .cht-goi-y-chip button{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:var(--the);font-size:12.5px;font-weight:600;color:var(--chu2);white-space:nowrap}
.cht-goi-y .cht-goi-y-chip button .cht-ic{color:var(--nhan)}
@media (max-width:760px){.cht-hs{min-width:0;width:100%}}
/* chấm trực tuyến là CON của khung ảnh — `.cht-mat.nho>*` / `.cht-mat>*` ép mọi con về 30–44px phủ kín ảnh; giữ chấm đúng cỡ */
.cht-mat>.cht-onl,.cht-mat.nho>.cht-onl,.cht-hs-mat>.cht-onl{width:11px!important;height:11px!important;border-radius:50%!important;overflow:visible}
.cht-hs-mat>.cht-onl.lon{width:16px!important;height:16px!important}

/* ---- BÌNH CHỌN CÓ ĐÍNH KÈM (25/09/2026): mô tả + link, ảnh / tệp / thẻ # của cả bình chọn và của từng lựa chọn ---- */
.cht-bc-mo-ta{font-size:13px;color:var(--chu2);margin:-2px 0 8px;line-height:1.45}
.cht-bc-muc{display:flex;flex-direction:column;gap:4px}
.cht-bc-hang{display:flex;gap:6px;align-items:stretch}
.cht-bc-hang>.cht-bc-o{flex:1;min-width:0}
.cht-bc-anh{position:relative;flex:0 0 52px;width:52px;min-height:44px;border:0;border-radius:12px;background:var(--nhan-nhat);padding:0;overflow:hidden;cursor:zoom-in;display:grid;place-items:center;color:var(--nhan)}
.cht-bc-anh.tep{cursor:pointer}
.cht-bc-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cht-bc-anh.dang-tai{animation:cht-nhap-nhay 1.2s ease-in-out infinite}
@keyframes cht-nhap-nhay{50%{opacity:.55}}
.cht-bc-the{display:flex;align-items:center;gap:6px;min-width:0;background:var(--nen);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--nhan);cursor:pointer}
.cht-bc-muc .cht-bc-the{align-self:stretch;margin-left:12px}
.cht-bc-muc.co-anh .cht-bc-the{margin-left:58px}
.cht-bc-the>span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cht-bc-the small{color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cht-bc-the.an{color:var(--chu3);cursor:default}
.cht-bc-bo{margin-left:auto;border:0;background:none;color:var(--chu3);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
/* hộp tạo */
.cht-hop-bc>textarea{border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical;min-height:44px}
.cht-bc-dinh{display:flex;flex-direction:column;gap:6px}
.cht-bc-dinh-nut{display:flex;gap:6px;flex-wrap:wrap}
.cht-bc-dinh-nut .nut{min-height:34px;padding:0 12px;font-size:12.5px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;background:var(--nhan-nhat);color:var(--nhan)}
.cht-bc-dinh-ds{display:flex;flex-wrap:wrap;gap:6px}
.cht-bc-tep-o{display:flex;align-items:center;gap:6px;max-width:100%;background:var(--nen);border-radius:10px;padding:4px 8px 4px 4px;font-size:12px;color:var(--chu2)}
.cht-bc-tep-o img{width:32px;height:32px;border-radius:7px;object-fit:cover}
.cht-bc-tep-o>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.cht-bc-tep-o.dang-tai{opacity:.6}
.cht-bc-tep-o.hong{color:var(--do,#c0392b)}
.cht-bc-nhap-muc{display:flex;flex-direction:column;gap:4px}
.cht-bc-nhap-muc .cht-bc-dinh-ds{padding-left:4px}
.cht-bc-nhap-dong .cht-bc-gan{width:34px;font-size:14px;font-weight:700;display:grid;place-items:center}
.cht-bc-nhap-dong .cht-bc-gan.co{background:var(--nhan-nhat);color:var(--nhan)}
.cht-bc-o-phai{flex-shrink:0} .cht-bc-o-phai b{white-space:nowrap}

/* ============ TICKET HỆ THỐNG trong Tin nhắn (25/09/2026 — web/chat-ticket.js) ============ */
.cht-bieu.b-tk{background:var(--nhan);color:#fff}
.cht-bieu.b-ai{background:color-mix(in srgb,var(--nhan) 16%,var(--the));color:var(--nhan)}
.cht-bong.cht-bong-ai{background:color-mix(in srgb,var(--nhan) 7%,var(--the))}
.cht-nhan-ai{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--nhan);background:var(--nhan-nhat);border-radius:6px;padding:1px 5px;margin:0 2px}
.cht-kenh-the.tk-kenh .cht-kenh-chu b{color:var(--nhan)}
/* trạng thái — một màu tím; chờ người (duyệt / phạm vi) nhuộm cảnh báo, xong nhuộm tốt, đóng xám */
.tk-tt{font-style:normal;font-size:11px;font-weight:600;white-space:nowrap;border-radius:8px;padding:3px 8px;background:var(--nhan-nhat);color:var(--nhan);flex-shrink:0}
.tk-tt.t-cho_duyet,.tk-tt.t-cho_pham_vi,.tk-tt.t-cho,.tk-tt.t-tu_choi,.tk-tt.t-cho_quyet_dinh{background:var(--canh-nhat);color:var(--canh)}
.tk-tt.t-da_giai_quyet,.tk-tt.t-dong_y,.tk-tt.t-mo_rong{background:var(--tot-nhat);color:var(--tot)}
.tk-tt.t-dong,.tk-tt.t-dung,.tk-tt.t-khong_mo_rong,.tk-tt.t-cho_nha_phat_hanh{background:var(--nen);color:var(--chu2)}
.tk-ma{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--nhan);background:var(--nhan-nhat);border-radius:7px;padding:4px 7px;flex-shrink:0}
/* thang cấp */
.tk-thang{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0 2px}
.tk-bac{display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-bac i{display:block;height:4px;border-radius:3px;background:var(--nen)}
.tk-bac.qua i{background:color-mix(in srgb,var(--nhan) 45%,transparent)}
.tk-bac.dang i{background:var(--nhan)}
.tk-bac small{font-size:10px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-bac.dang small{color:var(--nhan);font-weight:600}
/* trung tâm */
.tk-tt-khung{display:flex;flex-direction:column;gap:10px;min-width:min(520px,78vw)}
.tk-gioi-thieu{display:flex;gap:8px;align-items:flex-start;margin:0;background:var(--nhan-nhat);color:var(--chu2);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.45}
.tk-gioi-thieu .cht-ic{color:var(--nhan);flex-shrink:0;margin-top:1px}
.tk-ds{display:flex;flex-direction:column;gap:6px;max-height:min(56vh,520px);overflow:auto}
.tk-dong{display:flex;align-items:center;gap:10px;border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;text-align:left;cursor:pointer;color:var(--chu)}
.tk-dong:hover{background:var(--nhan-nhat)}
.tk-dong.xong{opacity:.72}
.tk-dong-than{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tk-dong-than b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-dong-than small{font-size:11.5px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-rong{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0}
.tk-ghi{display:block;text-align:left}
/* chi tiết */
.tk-ct{display:flex;flex-direction:column;gap:10px;min-width:min(520px,78vw)}
.tk-ct-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk-vai{font-style:normal;font-size:11.5px;color:var(--chu3);margin-left:auto}
.tk-ct-ten{margin:0;font-size:16px;line-height:1.35}
.tk-ct-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.tk-ct-luoi>div{background:var(--nen);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-ct-luoi small{font-size:11px;color:var(--chu3)} .tk-ct-luoi b{font-size:13px}
.tk-mo-ta,.tk-rieng,.tk-kq{border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5}
.tk-mo-ta{background:var(--nen)}
.tk-rieng{background:color-mix(in srgb,var(--nhan) 8%,var(--the))}
.tk-kq{background:var(--tot-nhat)}
.tk-mo-ta small,.tk-rieng small,.tk-kq small{display:block;font-size:11px;font-weight:600;color:var(--chu3);margin-bottom:4px}
.tk-rieng small{color:var(--nhan)} .tk-kq small{color:var(--tot)}
.tk-rieng p,.tk-kq p{margin:0;white-space:pre-wrap}
.tk-ct h5{margin:4px 0 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--chu3)}
.tk-pv{display:flex;flex-direction:column;gap:6px}
.tk-pv-dong{display:flex;flex-direction:column;gap:2px;background:var(--nen);border-radius:10px;padding:8px 10px}
.tk-pv-dong b{font-size:13px} .tk-pv-dong small{font-size:12px;color:var(--chu2)}
.tk-dien{display:flex;flex-direction:column;gap:0;max-height:min(40vh,360px);overflow:auto;padding-left:4px}
.tk-dien-dong{display:grid;grid-template-columns:14px 1fr;gap:8px;position:relative;padding-bottom:10px}
.tk-dien-dong>i{width:8px;height:8px;border-radius:50%;background:var(--nhan);margin-top:4px;position:relative}
.tk-dien-dong:not(:last-child)>i::after{content:'';position:absolute;left:3px;top:10px;width:2px;height:calc(100% + 6px);background:var(--nhan-nhat)}
.tk-dien-dong.rieng>i{background:var(--chu3)}
.tk-dien-dong small{font-size:11px;color:var(--chu3)}
.tk-dien-dong p{margin:2px 0 0;font-size:12.5px;color:var(--chu2);white-space:pre-wrap;word-break:break-word}
.tk-dien-dong.rieng p{color:var(--chu3)}
.tk-nut{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tk-nut .nut,.tk-the-nut .nut{min-height:34px;padding:0 12px;font-size:12.5px;border-radius:10px;display:inline-flex;align-items:center;gap:6px}
.tk-nut .nut.phu,.tk-the-nut .nut.phu{background:var(--nhan-nhat);color:var(--nhan)}
/* thẻ trong tin */
.tk-the{display:flex;flex-direction:column;gap:4px;background:var(--the);border-radius:14px;padding:10px 12px;margin-top:6px;cursor:pointer;min-width:min(280px,100%);max-width:360px;box-shadow:0 1px 2px rgba(20,16,50,.06)}
.tk-the-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tk-the-ten{font-size:13.5px;line-height:1.35}
.tk-the>small{font-size:12px;color:var(--chu3)}
.tk-the .tk-tu-choi{color:var(--canh)}
.tk-the-nut{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tk-the.pv{cursor:default}
@media (max-width:640px){
  .tk-tt-khung,.tk-ct{min-width:0}
  .tk-dong{padding:9px 10px;gap:8px}
  .tk-dong .tk-tt{max-width:40%;overflow:hidden;text-overflow:ellipsis}
}

/* ---- iPhone: MẤT THANH ĐẦU SAU KHI THU PHÓNG (chủ dự án 25/09/2026, ảnh iPhone) ----
   Gốc: ô soạn 14,5px → Safari iOS TỰ PHÓNG TO khi chạm ô nhập chữ < 16px; thu về thì trang vẫn giữ độ cuộn nên đầu hội thoại bị đẩy
   khuất lên trên. (1) ô nhập ≥ 16px trên iOS → không còn tự phóng; (2) màn chat không cho cả trang cuộn; (3) chat.js kéo trang về đầu khi
   thu phóng trở về 1× và bàn phím đã đóng. */
@supports (-webkit-touch-callout:none){
  @media (max-width:820px){
    input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:max(16px,1em)!important}
  }
}
@media (max-width:760px){
  html:has(.cht-khung),body:has(.cht-khung){overflow:hidden;overscroll-behavior:none;height:100%}
}

/* ---- LINH VẬT 3D "NHA" (web/linh-vat.js) ---- */
.cht-hoi{position:relative}
.nha-cv{display:block;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nha-noi{position:absolute;right:10px;top:74px;z-index:5;pointer-events:auto;filter:drop-shadow(0 6px 14px rgba(70,40,170,.18))}
.nha-hop{flex-shrink:0;margin:-6px -2px -8px -6px}
.tk-gioi-thieu .nha-hop+span{align-self:center}
.cht-anh-hoi.nha-anh{background:color-mix(in srgb,var(--nhan) 10%,var(--the));border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.cht-anh-hoi.nha-anh img{width:118%;height:118%;object-fit:cover;object-position:50% 40%}
@media (max-width:760px){ .nha-noi{top:calc(env(safe-area-inset-top) + 64px);right:6px} }
.tk-dong-duoi{display:flex;align-items:center;gap:6px;min-width:0}
.tk-dong-duoi .tk-tt{max-width:55%;overflow:hidden;text-overflow:ellipsis;padding:2px 7px;font-size:10.5px}
.tk-dong-duoi small{min-width:0}
/* bong bóng cảm nghĩ của Nha */
.nha-hop{position:relative}
.nha-loi{position:absolute;right:calc(100% - 4px);top:6px;width:max-content;max-width:230px;background:var(--the);color:var(--chu);border-radius:14px 14px 4px 14px;
  padding:8px 11px;font-size:12.5px;line-height:1.4;box-shadow:0 6px 22px -6px rgba(60,35,160,.35),0 1px 2px rgba(20,16,50,.08);
  opacity:0;transform:translateY(6px) scale(.94);transform-origin:100% 100%;transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.4,.6,1);pointer-events:none;z-index:6}
.nha-loi.hien{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.nha-loi>span{display:block}
.nha-loi button{display:inline-flex;margin-top:6px;border:0;background:var(--nhan);color:#fff;border-radius:9px;padding:5px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.nha-loi.trong{right:auto;left:calc(100% + 2px);top:2px;border-radius:14px 14px 14px 4px;transform-origin:0 100%;max-width:min(240px,52vw)}
@media (max-width:760px){ .nha-loi{max-width:200px;font-size:12px} }
@media (prefers-reduced-motion:reduce){ .nha-loi{transition:opacity .2s} }
/* khoá thu phóng ở màn chat trên máy cảm ứng (chat.js chtKhoaZoom): không chụm, không chạm-đúp phóng; vuốt cuộn giữ nguyên */
html.cht-khoa-zoom,html.cht-khoa-zoom body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.cht-khoa-zoom .cht-khung{-webkit-touch-callout:none}
html.cht-khoa-zoom .cht-khung input,html.cht-khoa-zoom .cht-khung textarea,html.cht-khoa-zoom .cht-khung .cht-chu{-webkit-touch-callout:default}
.tk-the .tk-tiep-nhan{color:var(--chu2)} .tk-the .tk-tiep-nhan b{color:var(--nhan);font-weight:600}

/* ============ BẠN ĐỒNG HÀNH NỔI + CHỌN LINH VẬT (web/linh-vat.js, 25/09/2026) ============ */
.lv-dh{position:fixed;z-index:45;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;
  filter:drop-shadow(0 8px 18px rgba(60,35,160,.22))}
.lv-dh.dang-keo{cursor:grabbing;filter:drop-shadow(0 16px 26px rgba(60,35,160,.3))}
.lv-dh.tro-ve{transition:left .3s cubic-bezier(.3,1.3,.6,1),top .3s cubic-bezier(.3,1.3,.6,1)}
.lv-dh.ne{transition:left .45s cubic-bezier(.3,1.6,.5,1)}
.lv-dh .nha-cv{cursor:inherit}
.lv-dh .nha-loi{right:calc(100% - var(--lv-w,100px) * .2);left:auto;top:calc(var(--lv-w,100px) * .06);max-width:min(230px,var(--lv-cho,230px))}
.lv-dh .nha-loi.ben-phai{left:calc(100% - var(--lv-w,100px) * .2);right:auto;border-radius:14px 14px 14px 4px;transform-origin:0 100%}
.lv-dh .nha-loi.duoi{top:calc(100% - var(--lv-w,100px) * .12)}
@media print{.lv-dh{display:none}}
.cht-nut-lv{overflow:hidden;padding:0}
.cht-nut-lv img{width:124%;height:124%;object-fit:cover;object-position:50% 38%}
/* menu giữ lâu */
.lv-menu{display:flex;flex-direction:column;gap:6px;min-width:min(340px,78vw)}
.lv-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;text-align:left;cursor:pointer;color:var(--chu)}
.lv-menu button:hover{background:var(--nhan-nhat)}
.lv-menu b{font-size:14px} .lv-menu small{font-size:12px;color:var(--chu3)}
/* chọn linh vật */
.lv-chon{display:flex;flex-direction:column;gap:10px;min-width:min(560px,82vw)}
.lv-gioi-thieu{margin:0;text-align:left;font-size:12.5px;line-height:1.45}
.lv-chip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.lv-chip::-webkit-scrollbar{display:none}
.lv-chip-o{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:var(--nen);border-radius:12px;padding:7px 12px;font:inherit;cursor:pointer;color:var(--chu)}
.lv-chip-o b{font-size:13px} .lv-chip-o small{font-size:10.5px;color:var(--chu3)}
.lv-chip-o i{position:absolute;top:-6px;right:-4px;font-style:normal;font-size:9.5px;font-weight:700;background:var(--nhan);color:#fff;border-radius:8px;padding:1px 6px}
.lv-chip-o.chon{background:var(--nhan);color:#fff} .lv-chip-o.chon small{color:color-mix(in srgb,#fff 80%,transparent)}
.lv-khung{display:flex;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 55%,var(--nhan-nhat),transparent 70%);border-radius:18px;padding:4px 0}
.lv-san{position:relative;min-height:180px;display:grid;place-items:center}
.lv-san .nha-loi.trong{left:calc(100% - 20px);max-width:min(200px,40vw)}
.lv-mui{border:0;background:var(--the);width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--nhan);cursor:pointer;box-shadow:0 1px 3px rgba(20,16,50,.1)}
.lv-nghe{display:flex;justify-content:center;margin-top:-6px}
.lv-nghe .nut{min-height:32px;padding:0 12px;font-size:12.5px;border-radius:10px;background:var(--nhan-nhat);color:var(--nhan)}
.lv-the{display:flex;flex-direction:column;gap:6px;background:var(--nen);border-radius:14px;padding:12px 14px}
.lv-the-dau{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lv-the-dau h4{margin:0;font-size:20px;color:var(--nhan);letter-spacing:.01em}
.lv-the-he{font-size:12px;font-weight:600;color:var(--chu2);background:var(--the);border-radius:8px;padding:2px 8px}
.lv-vai{margin:0;font-size:12.5px;color:var(--chu3)}
.lv-tc{display:flex;flex-wrap:wrap;gap:5px}
.lv-tc span{font-size:11.5px;font-weight:600;color:var(--nhan);background:var(--nhan-nhat);border-radius:8px;padding:3px 8px}
.lv-chuyen{margin:2px 0;font-size:13px;line-height:1.55;color:var(--chu)}
.lv-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:12.5px}
.lv-dl dt{color:var(--chu3)} .lv-dl dd{margin:0;color:var(--chu)}
@media (max-width:760px){ .lv-chon{min-width:0} .lv-san{min-height:190px} .lv-san .nha-loi.trong{left:auto;right:-8px;top:-4px} }
.lv-loi{align-self:center;max-width:min(420px,100%);background:var(--the);border-radius:14px;padding:8px 12px;font-size:13px;line-height:1.45;text-align:center;
  box-shadow:0 4px 16px -6px rgba(60,35,160,.3);margin-top:-8px;opacity:.35;transform:translateY(4px);transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.6,1)}
.lv-loi.hien{opacity:1;transform:none}
.lv-loi:empty{display:none}
.lv-dh{transform-origin:50% 55%}
.lv-dh.dang-chum{transition:none;filter:drop-shadow(0 18px 30px rgba(60,35,160,.3))}
.lv-co{display:flex;flex-direction:column;gap:4px;background:var(--nen);border-radius:12px;padding:10px 12px}
.lv-co b{font-size:14px} .lv-co small{font-size:12px;color:var(--chu3)}
.lv-co input[type=range]{width:100%;accent-color:var(--nhan)}

/* ============ TRAU CHUỐT UX CHAT (25/09/2026) ============ */
/* nút xuống tin mới nhất */
.cht-xuong{position:absolute;right:14px;bottom:86px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:38px;min-width:38px;justify-content:center;border:0;border-radius:19px;
  background:var(--the);color:var(--nhan);box-shadow:0 6px 18px -6px rgba(40,25,110,.35);padding:0 10px;font:inherit;cursor:pointer;
  opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.6,1)}
.cht-xuong.hien{opacity:1;transform:none;pointer-events:auto}
.cht-xuong.co-moi{background:var(--nhan);color:#fff}
.cht-xuong b{font-size:12.5px;font-weight:600}
/* tấm thao tác tin — điện thoại */
.cht-menu-nen{position:fixed;inset:0;z-index:139;background:color-mix(in srgb,var(--navy,#1e1a3a) 38%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cht-mo-nen .18s ease}
.cht-menu-nen.ra{opacity:0;transition:opacity .18s}
@keyframes cht-mo-nen{from{opacity:0}}
.cht-menu.tam{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;border-radius:22px 22px 0 0;padding:6px 10px calc(10px + env(safe-area-inset-bottom));
  max-height:78vh;overflow:auto;animation:cht-tam-len .24s cubic-bezier(.2,.9,.3,1);transition:transform .18s ease}
.cht-menu.tam.ra{transform:translateY(100%)!important}
@keyframes cht-tam-len{from{transform:translateY(100%)}}
.cht-menu-keo{width:38px;height:4px;border-radius:2px;background:var(--nen);margin:4px auto 8px}
.cht-menu-trich{display:flex;flex-direction:column;gap:2px;background:var(--nen);border-radius:14px;padding:9px 12px;margin-bottom:8px}
.cht-menu-trich b{font-size:12px;color:var(--nhan)} .cht-menu-trich span{font-size:13px;color:var(--chu2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cht-menu.tam .cht-menu-cx{padding:2px 2px 10px;gap:4px}
.cht-menu.tam .cht-menu-cx button{width:40px;height:40px;font-size:21px;transition:transform .12s}
.cht-menu.tam .cht-menu-cx button:active{transform:scale(1.25)}
.cht-menu.tam>button{min-height:48px;font-size:15px;border-radius:12px}
/* linh vật nép mép khi đọc / gõ */
.lv-dh{transition:transform .38s cubic-bezier(.3,1.2,.5,1),opacity .3s}
.lv-dh.nep-trai{transform:translateX(-58%) rotate(10deg);opacity:.92}
.lv-dh.nep-phai{transform:translateX(58%) rotate(-10deg);opacity:.92}
.lv-dh.nep .nha-loi{opacity:0!important;pointer-events:none}
.lv-dh.dang-keo,.lv-dh.dang-chum{transition:none}
/* dải lướt ngang: mép phải mờ dần để biết còn nội dung */
.cht-loc,.cht-kenh-luot,.cht-ddr-luot{-webkit-mask-image:linear-gradient(to right,black calc(100% - 26px),transparent);mask-image:linear-gradient(to right,black calc(100% - 26px),transparent);padding-right:22px}
.lv-dh.nep-trai{transform:translateX(var(--nep-x,-58%)) rotate(12deg)}
.lv-dh.nep-phai{transform:translateX(var(--nep-x,58%)) rotate(-12deg)}
/* tin ghim trong khung thông tin: bấm được, gọn 3 dòng */
button.cht-tt-ghim{width:100%;border:0;text-align:left;font:inherit;cursor:pointer;color:inherit}
button.cht-tt-ghim:hover{background:var(--nhan-nhat)}
.cht-tt-ghim .cht-chu{font-size:12.5px;color:var(--chu2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
/* nháy sáng tin được nhảy tới */
.cht-tin.nhay-sang .cht-bong,.nhay-sang .cht-bong{animation:cht-nhay-sang 1.6s ease}
@keyframes cht-nhay-sang{0%,40%{box-shadow:0 0 0 3px color-mix(in srgb,var(--nhan) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
/* gợi ý # / @: tên một dòng, mô tả xuống dòng dưới */
.cht-goi-y button>span:not(.cht-goi-y-ic):not(.cht-mat){display:flex;flex-direction:column;min-width:0;gap:1px}
.cht-goi-y button>span>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cht-goi-y button>span>small{font-size:11.5px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* hộp Tương tác: nhãn loại (@ ↩ biểu cảm) nhỏ ở góc ảnh — trước đây bị quy tắc `.cht-mat>*` ép to bằng cả ảnh, che mất người */
.cht-mat>.cht-tt-loai{width:18px!important;height:18px!important;border-radius:50%!important;overflow:visible}
.cht-tt-dong .cht-mat{width:38px;height:38px;flex:none}
.cht-tt-tab{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cht-tt-tab::-webkit-scrollbar{display:none}
.cht-tt-tab button{flex:none}
/* kết quả tìm tin */
.cht-kq-tim-o .cht-kq-tim-dau{flex-direction:row!important;align-items:baseline;justify-content:space-between;gap:8px}
.cht-kq-tim-o .cht-kq-tim-dau b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cht-kq-tim-o .cht-kq-tim-dau small{flex:none}
.cht-kq-tim-o p{line-height:1.45}
.cht-kq-tim-o .cht-kq-tim-ai{font-size:13px;font-weight:600;color:var(--chu)}
.cht-kq-tim-o mark{background:color-mix(in srgb,var(--nhan) 18%,transparent);color:var(--chu);border-radius:4px;padding:0 2px}
/* ô soạn: ẩn thanh cuộn (hiện thành một vạch dọc cạnh nút #) — vẫn cuộn được khi nhiều dòng */
.cht-soan textarea{scrollbar-width:none}
.cht-soan textarea::-webkit-scrollbar{display:none}
.cht-goi-y button>span>b{font-weight:600}
/* khung chat bám vùng nhìn thấy trên điện thoại (chat.js chtKhopManHinh) + hàng thẻ / tệp đang chèn một dòng lướt ngang */
@media (max-width:760px){
  .cht-khung,.cht-khung.mo-phu{position:fixed;left:0;right:0;top:var(--cht-vt,0px);height:var(--cht-vh,100dvh);min-height:0;margin:0;width:auto}
  /* bàn phím đang mở: vùng nhìn thấy < 480px → bỏ sàn chiều cao; thanh home đã bị bàn phím che nên bỏ đệm an toàn đáy */
  html.cht-ban-phim .cht-soan{margin-bottom:0}
  html.cht-ban-phim .cht-soan-khung{padding-bottom:6px}
  .cht-chen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cht-chen::-webkit-scrollbar{display:none}
  .cht-chen-o{flex:none;max-width:78%}
  .cht-chen-o>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}

/* ============ CHIA SẺ VÀO CHAT TỪ CÁC MÀN KHÁC (chat.js chiaSeVaoChat) ============ */
.nut-chia-se-chat{display:inline-flex;align-items:center;gap:5px}
td .nut-chia-se-chat{margin-top:4px;min-height:26px;padding:0 8px;font-size:11.5px;border-radius:8px;background:var(--nhan-nhat);color:var(--nhan)}
.cs-hop{display:flex;flex-direction:column;gap:10px;min-width:min(460px,86vw)}
.cs-the .cht-the{margin:0;max-width:none}
.cs-pham-vi{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--chu2);background:var(--nen);border-radius:10px;padding:7px 10px}
.cs-pham-vi .cht-ic{color:var(--nhan);flex:none}
.cs-hop>input[type=search],.cs-hop>textarea{border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;color:var(--chu);resize:vertical}
.cs-ds{display:flex;flex-direction:column;gap:2px;max-height:min(42vh,340px);overflow-y:auto}
.cs-hang{display:flex;align-items:center;gap:10px;border:0;background:none;border-radius:12px;padding:7px 8px;font:inherit;text-align:left;cursor:pointer;color:var(--chu)}
.cs-hang:hover{background:var(--nen)}
.cs-hang.chon{background:var(--nhan-nhat)}
.cs-hang.khoa{opacity:.55;cursor:not-allowed}
.cs-hang-chu{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cs-hang-chu b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-hang-chu small{font-size:11.5px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-tich{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--nen);color:#fff;font-style:normal}
.cs-hang.chon .cs-tich{background:var(--nhan);box-shadow:none}
.cs-chan-nut{border:0;background:none;text-align:left;font:inherit;font-size:12px;color:var(--chu3);padding:8px 8px 4px;cursor:pointer}
@media (max-width:760px){ .cs-hop{min-width:0} }

/* ============ NÚT VỀ NỔI (web/chung.js veNutVe) — vùng ngón cái, không ở góc trên ============ */
.nut-ve-noi{position:fixed;z-index:46;left:14px;bottom:calc(86px + env(safe-area-inset-bottom));animation:nut-ve-vao .3s cubic-bezier(.3,1.4,.6,1)}
@keyframes nut-ve-vao{from{opacity:0;transform:translateY(10px) scale(.85)}}
.nut-ve-chinh{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;padding:0;
  background:var(--nhan);color:#fff;box-shadow:0 8px 20px -6px rgba(40,25,110,.45),0 1px 3px rgba(20,16,50,.12);transition:transform .15s}
.nut-ve-chinh:active{transform:scale(.92)}
.ve-lui .nut-ve-chinh{background:var(--the);color:var(--nhan)}
.nut-ve-chinh .cht-ic{stroke-width:2.2}
@media (min-width:821px){ .nut-ve-noi{left:calc(50% + 126px);transform:translateX(-50%);bottom:24px} @keyframes nut-ve-vao{from{opacity:0}} }
@media (max-width:820px){ html.co-nut-ve-noi .ve-tren{display:none} }
@media print{ .nut-ve-noi{display:none} }

/* ============ TRÒ CHƠI NHÓM: VÒNG QUAY MAY MẮN · QUIZ TRỰC TIẾP (chat-tro-choi.js, 25/09/2026) ============ */
:root{--vq-0:#6C42EC;--vq-1:#E0457B;--vq-2:#F08A24;--vq-3:#14A38B;--vq-4:#2F7FE0;--vq-5:#E8B21C;--vq-6:#9B5CF6;--vq-7:#D8455C;
  --qz-0:#E5484D;--qz-1:#2F7FE0;--qz-2:#D99A0B;--qz-3:#1C9A62;--tc-vanh:#2A1C5E}
.cht-bong.cht-bong-tc{padding:12px;width:min(360px,80vw);max-width:100%}
.tcn-vq,.tcn-qz{display:flex;flex-direction:column;gap:10px;position:relative}
.tcn-dau{display:flex;align-items:center;gap:10px}
.tcn-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--nhan-nhat)}
.tcn-dau-chu{display:flex;flex-direction:column;min-width:0;flex:1}
.tcn-dau-chu b{font-size:14.5px;line-height:1.3}
.tcn-dau-chu small{font-size:11.5px;color:var(--chu3)}
.tcn-nut-ic{border:0;background:var(--nen);color:var(--chu2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:15px;flex:none;display:grid;place-items:center}
.tcn-nut-ic:hover{background:var(--nhan-nhat);color:var(--nhan)}
.tcn-nut{border:0;background:var(--nhan);color:#fff;border-radius:12px;padding:10px 16px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:transform .12s}
.tcn-nut:active{transform:scale(.96)}
.tcn-nut.phu{background:var(--nhan-nhat);color:var(--nhan)}
.tcn-nut.nho{padding:6px 11px;font-size:12.5px;border-radius:10px}
.tcn-nut:disabled{opacity:.5;cursor:default}
.tcn-hang-nut{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tcn-ghi{color:var(--chu3);font-size:12px;line-height:1.45;display:flex;align-items:center;flex-wrap:wrap;gap:8px}

/* ---- bánh xe ---- */
.vq-san{display:grid;place-items:center;padding:4px 0 2px}
.vq-banh{--co:236px;width:var(--co);height:var(--co);position:relative;filter:drop-shadow(0 10px 18px rgba(40,25,110,.25))}
.vq-xoay{position:absolute;inset:0;will-change:transform}
.vq-svg{width:100%;height:100%;display:block}
.vq-vanh{fill:var(--tc-vanh)}
.vq-o{stroke:none}
.vq-o.m0{fill:var(--vq-0)} .vq-o.m1{fill:var(--vq-1)} .vq-o.m2{fill:var(--vq-2)} .vq-o.m3{fill:var(--vq-3)}
.vq-o.m4{fill:var(--vq-4)} .vq-o.m5{fill:var(--vq-5)} .vq-o.m6{fill:var(--vq-6)} .vq-o.m7{fill:var(--vq-7)}
.vq-vach{stroke:#fff;stroke-opacity:.55;stroke-width:.8}
.vq-den{fill:#FFE9A8}
.vq-banh.dang-quay .vq-den{animation:vq-nhay .5s steps(2) infinite}
@keyframes vq-nhay{50%{fill:#fff}}
.vq-chu{fill:#fff;font-weight:700;font-family:inherit;paint-order:stroke;stroke:rgba(0,0,0,.18);stroke-width:1.4px;letter-spacing:.1px}
.vq-kim{position:absolute;left:50%;top:-6px;width:26px;height:30px;transform:translateX(-50%);z-index:2;
  background:linear-gradient(#fff,#F1ECFF);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.vq-kim::after{content:'';position:absolute;inset:4px 6px 9px;background:var(--vq-7);clip-path:polygon(50% 100%,0 0,100% 0)}
.vq-banh.dang-quay .vq-kim{animation:vq-kim .12s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes vq-kim{from{transform:translateX(-50%) rotate(-9deg)}to{transform:translateX(-50%) rotate(7deg)}}
.vq-tam,.vq-tam-tron{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:30%;height:30%;border-radius:50%;
  border:4px solid #fff;background:var(--tc-vanh);color:#fff;font:inherit;font-weight:800;font-size:calc(var(--co) * .06);letter-spacing:.5px;display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25)}
.vq-tam.duoc{cursor:pointer;background:radial-gradient(circle at 35% 30%,#8C68FF,var(--nhan) 60%,#4A25C7)}
.vq-tam.duoc:hover{transform:translate(-50%,-50%) scale(1.05)}
.vq-tam.duoc:active{transform:translate(-50%,-50%) scale(.95)}
.vq-tam:disabled{cursor:default}
.vq-banh.het{opacity:.45;filter:grayscale(.5)}
.vq-banh.vua-trung{animation:vq-trung .6s ease-out}
@keyframes vq-trung{40%{transform:scale(1.04)}}
.vq-chan{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.vq-kq{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:var(--nen);border-radius:14px;padding:9px 12px}
.vq-kq-nhan{grid-row:span 2;font-size:11px;font-weight:700;color:var(--nhan);background:var(--nhan-nhat);border-radius:8px;padding:4px 7px;text-transform:uppercase;letter-spacing:.4px}
.vq-kq b{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.vq-kq small{font-size:11.5px;color:var(--chu3)}
.vq-kq.dang b{animation:vq-cho 1s ease-in-out infinite}
@keyframes vq-cho{50%{opacity:.35}}
.vq-kq.trung{background:linear-gradient(120deg,var(--nhan-nhat),color-mix(in srgb,var(--vq-5) 22%,var(--the)));animation:vq-kq-vao .45s cubic-bezier(.3,1.5,.6,1)}
.vq-kq.trung b{font-size:19px}
@keyframes vq-kq-vao{from{transform:scale(.85);opacity:0}}
.vq-nut-quay{width:100%}
.vq-da-trung{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:12px;color:var(--chu3)}
.vq-da-trung s{color:var(--chu3);text-decoration-thickness:1.5px}
.vq-ls{font-size:12.5px}
.vq-ls summary{cursor:pointer;color:var(--chu2);font-weight:600;padding:2px 0}
.vq-ls ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}
.vq-ls li b{font-weight:600} .vq-ls li small{color:var(--chu3);margin-left:6px}

/* ---- pháo giấy ---- */
.tcn-giay-lop{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:5}
.tcn-giay{position:absolute;top:-12px;left:var(--x);width:8px;height:12px;border-radius:2px;opacity:0;animation:tcn-roi var(--t) cubic-bezier(.2,.6,.4,1) var(--d) forwards}
.tcn-giay.m0{background:var(--vq-0)} .tcn-giay.m1{background:var(--vq-1)} .tcn-giay.m2{background:var(--vq-2)}
.tcn-giay.m3{background:var(--vq-3)} .tcn-giay.m4{background:var(--vq-4)} .tcn-giay.m5{background:var(--vq-5)}
@keyframes tcn-roi{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),340px) rotate(var(--r))}}

/* ---- hộp tạo ---- */
.tcn-hop{display:flex;flex-direction:column;gap:10px;min-width:min(480px,86vw)}
.tcn-hop>input[type=text],.tcn-hop textarea,.qz-soan input[type=text]{border:0;background:var(--nen);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;color:var(--chu);width:100%;box-sizing:border-box}
.tcn-hop h5{margin:4px 0 0;font-size:12px;color:var(--chu3);text-transform:uppercase;letter-spacing:.4px}
.tcn-o-nhap{resize:vertical;min-height:120px;line-height:1.5}
.tcn-goi-y button{font-size:12.5px}
.tcn-tab{display:flex;background:var(--nen);border-radius:12px;padding:3px;gap:3px}
.tcn-tab button{flex:1;border:0;background:none;border-radius:9px;padding:7px 8px;font:inherit;font-size:13px;color:var(--chu2);cursor:pointer}
.tcn-tab button.chon{background:var(--the);color:var(--nhan);font-weight:650;box-shadow:0 1px 3px rgba(20,16,50,.08)}
.vq-tao-luoi{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;align-items:start}
.vq-xem-truoc{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}
.vq-xem-truoc small{font-size:11.5px;color:var(--chu3)}
.vq-xem-rong{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;font-size:40px;background:var(--nen)}
.tcn-ds-tv{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}
.tcn-tv{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;cursor:pointer;font-size:13.5px}
.tcn-tv.chon{background:var(--nhan-nhat)}
.tcn-tv input{accent-color:var(--nhan)}
.tcn-chon-het{align-self:flex-start;border:0;background:none;color:var(--nhan);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 8px}
@media (max-width:560px){ .vq-tao-luoi{grid-template-columns:1fr} .vq-xem-truoc{order:-1} }
.tcn-menu{min-width:270px}
.tcn-menu>button{padding:10px}
.tcn-menu>button>span:last-child{display:flex;flex-direction:column}
.tcn-menu>button small{font-size:11.5px;color:var(--chu3)}
.tcn-menu-ic{width:36px;height:36px;border-radius:11px;background:var(--nhan-nhat);display:grid;place-items:center;font-size:19px;flex:none}
.tcn-menu-ic.nho{width:22px;height:22px;background:none;font-size:17px}

/* ---- quiz: phòng chờ ---- */
.qz-cho{display:flex;flex-direction:column;gap:10px}
.qz-cho-dem{display:flex;align-items:baseline;gap:8px}
.qz-cho-dem b{font-size:30px;line-height:1;color:var(--nhan);font-variant-numeric:tabular-nums}
.qz-cho-dem span{font-size:13px;color:var(--chu2)}
.qz-mat{display:flex;flex-wrap:wrap;gap:4px}
.qz-mat .cht-mat.nho{width:30px!important;height:30px!important;box-shadow:0 0 0 2px var(--the)}
.qz-mat-them{height:30px;min-width:30px;border-radius:15px;background:var(--nen);display:grid;place-items:center;font-size:11.5px;color:var(--chu2);padding:0 6px}
.qz-da-vao{display:inline-flex;align-items:center;gap:8px;color:var(--tot);font-weight:650;font-size:13.5px}
.qz-xem-truoc{font-size:12.5px}
.qz-xem-truoc summary{cursor:pointer;color:var(--chu2);font-weight:600}
.qz-xem-truoc ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.qz-xem-truoc small{color:var(--chu3)}
.qz-huy{justify-content:center;padding:10px 0}

/* ---- quiz: đếm ngược · câu hỏi ---- */
.qz-dem{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0 10px}
.qz-dem small{font-size:12px;color:var(--chu3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.qz-dem b{font-size:64px;line-height:1;color:var(--nhan);font-variant-numeric:tabular-nums;animation:qz-nay 1s ease-out infinite}
.qz-dem span{font-size:13px;color:var(--chu2)}
@keyframes qz-nay{0%{transform:scale(1.25);opacity:.4}25%{transform:scale(1);opacity:1}}
.qz-cau{display:flex;flex-direction:column;gap:10px}
.qz-cau-dau{display:flex;align-items:center;gap:8px}
.qz-so{font-size:11.5px;font-weight:700;color:var(--nhan);background:var(--nhan-nhat);border-radius:8px;padding:3px 8px}
.qz-dem-tl{margin-left:auto;font-size:11.5px;color:var(--chu3)}
.qz-giay{min-width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--nhan);color:#fff;font-variant-numeric:tabular-nums;order:3}
.qz-giay.gap{background:var(--qz-0);animation:qz-giay .5s ease-in-out infinite alternate}
.qz-giay.xong{background:var(--nen);color:var(--chu3);font-size:14px}
@keyframes qz-giay{to{transform:scale(1.1)}}
.qz-thanh{height:6px;border-radius:3px;background:var(--nen);overflow:hidden}
.qz-thanh i{display:block;height:100%;background:linear-gradient(90deg,var(--nhan),var(--vq-1));transform-origin:0 50%;transform:scaleX(var(--con));animation:qz-chay var(--ms) linear forwards}
@keyframes qz-chay{to{transform:scaleX(0)}}
.qz-hoi{font-size:16px;font-weight:650;line-height:1.4;color:var(--chu)}
.qz-anh{border-radius:12px;overflow:hidden;background:var(--nen);min-height:60px;max-height:220px;display:grid;place-items:center}
.qz-anh img{width:100%;max-height:220px;object-fit:contain;display:block}
.qz-o{display:grid;grid-template-columns:1fr;gap:8px}
.qz-o.bon{grid-template-columns:1fr 1fr}
.qz-dap{position:relative;overflow:hidden;border:0;border-radius:14px;padding:12px 12px 12px 42px;min-height:54px;color:#fff;font:inherit;font-size:14px;font-weight:650;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:transform .12s,opacity .25s,filter .25s;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.qz-dap.m0{background:var(--qz-0)} .qz-dap.m1{background:var(--qz-1)} .qz-dap.m2{background:var(--qz-2)} .qz-dap.m3{background:var(--qz-3)}
.qz-dap:not(:disabled):active{transform:scale(.97)}
.qz-dap:disabled{cursor:default}
.qz-dap>span{position:relative;z-index:1;overflow-wrap:anywhere;line-height:1.3}
.qz-hinh{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:17px;opacity:.9;z-index:1}
.qz-dap.cua-toi{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--nhan)}
.qz-dap.mo{opacity:.38;filter:saturate(.6)}
.qz-dap.dung{opacity:1;filter:none;box-shadow:inset 0 0 0 3px #fff,0 6px 16px -6px rgba(0,0,0,.4);animation:qz-dung .5s ease-out}
@keyframes qz-dung{40%{transform:scale(1.04)}}
.qz-tick{margin-left:auto;position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--tot);display:grid;place-items:center;font-size:14px;flex:none}
.qz-dap-thanh{position:absolute;inset:0 auto 0 0;width:calc(var(--pt) * 100%);background:rgba(255,255,255,.22);transition:width .6s ease-out}
.qz-dap-dem{position:relative;z-index:1;margin-left:auto;font-size:12px;font-weight:700;opacity:.95;white-space:nowrap}
.qz-dap-dem+.qz-tick{margin-left:6px}
.qz-tt{font-size:13px;color:var(--chu2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qz-tt>span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.qz-dung{color:var(--tot);font-weight:700} .qz-sai{color:var(--loi);font-weight:650}
.qz-giai{font-size:13px;line-height:1.45;background:var(--canh-nhat);color:var(--chu);border-radius:12px;padding:8px 11px}
.qz-bang{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.qz-bang li{display:grid;grid-template-columns:26px 26px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;font-size:13px}
.qz-bang li.toi{background:var(--nhan-nhat)}
.qz-bang li.xa{margin-top:4px;border-top:1px dashed var(--vien);border-radius:0 0 10px 10px}
.qz-bang .cht-mat.nho{width:26px!important;height:26px!important}
.qz-hang{text-align:center;font-weight:700;color:var(--chu3)}
.qz-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-bang small{color:var(--chu3);font-size:11.5px}
.qz-bang b{font-variant-numeric:tabular-nums;min-width:40px;text-align:right}

/* ---- quiz: bục vinh danh ---- */
.qz-ket{display:flex;flex-direction:column;gap:10px}
.qz-buc{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:6px;padding-top:6px}
.qz-buc-o{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.qz-buc-o .cht-mat{width:44px!important;height:44px!important;box-shadow:0 0 0 3px var(--the),0 0 0 5px var(--vq-5)}
.qz-buc-o.h2 .cht-mat{box-shadow:0 0 0 3px var(--the),0 0 0 5px #B8BCC8} .qz-buc-o.h3 .cht-mat{box-shadow:0 0 0 3px var(--the),0 0 0 5px #C98A56}
.qz-buc-o b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-buc-o small{font-size:11px;color:var(--chu3)}
.qz-buc-cot{width:100%;border-radius:10px 10px 4px 4px;display:grid;place-items:start center;padding-top:6px;font-size:20px;background:var(--nhan-nhat)}
.qz-buc-o.h1 .qz-buc-cot{height:74px;background:linear-gradient(var(--vq-5),color-mix(in srgb,var(--vq-5) 40%,var(--the)))}
.qz-buc-o.h2 .qz-buc-cot{height:52px} .qz-buc-o.h3 .qz-buc-cot{height:38px}
.qz-buc-o.h1{animation:qz-len .6s cubic-bezier(.3,1.4,.6,1)}
@keyframes qz-len{from{transform:translateY(20px);opacity:0}}
.qz-cua-toi{font-size:13px;font-weight:600;color:var(--nhan);background:var(--nhan-nhat);border-radius:12px;padding:8px 11px;text-align:center}
.qz-ds-het{font-size:12.5px}
.qz-ds-het summary{cursor:pointer;color:var(--chu2);font-weight:600;padding:2px 0}
.qz-ds-het .qz-bang{margin-top:6px}
.qz-tk{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.qz-tk li{display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.qz-tk li small{grid-column:1;color:var(--chu3)}
.qz-tk li b{grid-row:1 / span 2;grid-column:2;align-self:center}

/* ---- quiz: soạn ---- */
.qz-hop{min-width:min(560px,90vw)}
.qz-cai{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--chu2)}
.qz-soan-ds{display:flex;flex-direction:column;gap:10px}
.qz-soan{background:var(--nen);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px}
.qz-soan.thieu{box-shadow:inset 0 0 0 2px var(--canh)}
.qz-soan textarea,.qz-soan input[type=text]{background:var(--the)!important}
.qz-soan textarea{border:0;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical;color:var(--chu)}
.qz-soan-dau{display:flex;align-items:center;gap:8px}
.qz-soan-dau b{font-size:13px;margin-right:auto}
.qz-soan-dau select{border:0;background:var(--the);border-radius:9px;padding:5px 8px;font:inherit;font-size:12px;color:var(--chu2)}
.qz-soan-ic{border:0;background:var(--the);border-radius:9px;width:30px;height:30px;cursor:pointer;font-size:14px;color:var(--chu2)}
.qz-soan-lc{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qz-soan-o{display:flex;align-items:center;gap:4px;background:var(--the);border-radius:12px;padding:3px 4px 3px 3px}
.qz-soan-o input[type=text]{padding:8px 6px!important;min-width:0}
.qz-soan-dung{flex:none;width:30px;height:30px;border-radius:9px;border:0;color:#fff;cursor:pointer;font-size:14px;opacity:.55}
.qz-soan-o.m0 .qz-soan-dung{background:var(--qz-0)} .qz-soan-o.m1 .qz-soan-dung{background:var(--qz-1)}
.qz-soan-o.m2 .qz-soan-dung{background:var(--qz-2)} .qz-soan-o.m3 .qz-soan-dung{background:var(--qz-3)}
.qz-soan-o.dung{box-shadow:inset 0 0 0 2px var(--tot)} .qz-soan-o.dung .qz-soan-dung{opacity:1;font-weight:800}
.qz-soan-them-o{border:0;background:none;color:var(--nhan);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;justify-self:start;padding:6px 4px}
.qz-soan-canh{color:var(--canh);font-size:12px}
@media (max-width:560px){ .qz-soan-lc{grid-template-columns:1fr} }

/* ---- xem lớn (chiếu cả phòng / chơi toàn màn hình) — dưới linh vật (z 45) để bạn đồng hành cổ vũ được ---- */
.tcn-lon{position:fixed;inset:0;z-index:44;background:color-mix(in srgb,var(--nen) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:16px;overflow-y:auto;animation:tcn-lon-vao .25s ease-out}
@keyframes tcn-lon-vao{from{opacity:0}}
.tcn-lon-trong{width:min(760px,100%);background:var(--the);border-radius:24px;padding:18px;box-shadow:0 30px 80px -30px rgba(30,20,80,.45);position:relative}
.tcn-lon-dong{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:var(--the);color:var(--chu);font-size:24px;cursor:pointer;box-shadow:0 4px 14px rgba(20,16,50,.15)}
.tcn-lon .tcn-dau-chu b{font-size:19px}
.tcn-lon .vq-kq b{font-size:22px}
.tcn-lon .vq-kq.trung b{font-size:28px}
.tcn-lon .vq-nut-quay{font-size:16px;padding:14px}
.tcn-lon .qz-hoi{font-size:clamp(18px,3.2vw,26px)}
.tcn-lon .qz-dap{min-height:clamp(64px,11vh,96px);font-size:clamp(15px,2.2vw,19px);padding-left:48px}
.tcn-lon .qz-hinh{font-size:22px}
.tcn-lon .qz-dem b{font-size:120px}
.tcn-lon .qz-giay{min-width:48px;height:48px;font-size:20px}
.tcn-lon .qz-buc-o .cht-mat{width:64px!important;height:64px!important}
.tcn-lon .qz-buc-o b{font-size:15px}
@media (max-width:560px){ .tcn-lon{padding:0;place-items:stretch} .tcn-lon-trong{border-radius:0;min-height:100%;padding:calc(58px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom))} }
@media (prefers-reduced-motion:reduce){ .qz-dem b,.qz-giay.gap,.vq-banh.dang-quay .vq-kim,.vq-banh.dang-quay .vq-den{animation:none} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--tc-vanh:#0E0A24} }
:root[data-theme="dark"]{--tc-vanh:#0E0A24}
.cht-tin.cua-toi .cht-bong.cht-bong-tc{background:var(--the);color:var(--chu)}
@media (max-width:760px){ .tcn-hop,.qz-hop{min-width:0;width:100%} .tcn-hop>.tcn-ghi{display:block} }
.tcn-hop>small.tcn-ghi{display:block}
.tcn-hang-nut>.tcn-nut{flex:none;width:auto}
.tcn-hang-nut>small.tcn-ghi{display:block;flex:1 1 150px;min-width:0}
/* bình chọn có thẻ # tên dài: bong bóng không được rộng quá cột tin (trước đây đẩy cả khung tin trượt ngang) */
.cht-bong.cht-bong-bc{max-width:100%;box-sizing:border-box}
.cht-bc,.cht-bc-ds,.cht-bc-muc,.cht-bc-hang{min-width:0;max-width:100%}
.cht-bc-muc .cht-bc-the{max-width:calc(100% - 12px);box-sizing:border-box}
.cht-bc-muc.co-anh .cht-bc-the{max-width:calc(100% - 58px)}
/* lựa chọn có ảnh trên điện thoại: bớt ảnh người bầu (bấm "Xem ai chọn" vẫn đủ) để chữ lựa chọn không bị bóp dọc; ảnh thu nhỏ không kéo quá cao */
@media (max-width:760px){ .cht-bc-muc.co-anh .cht-bc-mat{display:none} }
.cht-bc-muc.co-anh .cht-bc-anh{max-height:88px;align-self:center;height:64px}
.cht-bc-o-dau{min-width:0}
.cht-bc-o-dau>span{overflow-wrap:break-word;min-width:0}
.vq-chan>.tcn-ghi,.vq-chan>.vq-ghi{display:block;text-align:center}
.vq-chan>div.tcn-ghi:not(.vq-ghi){display:flex;justify-content:center}
small.tcn-ghi{display:block}
.vq-banh.dang-quay .vq-tam{color:transparent}
.vq-banh.dang-quay .vq-tam::after{content:'';position:absolute;width:30%;height:30%;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vq-xoay-tam .8s linear infinite}
@keyframes vq-xoay-tam{to{transform:rotate(360deg)}}
.qz-xem-truoc .tcn-nut{margin-top:8px}
.qz-soan-dau b{white-space:nowrap}
.qz-soan-dau select{flex:0 1 auto;width:auto;min-width:0}
.qz-soan>.qz-soan-them-o{align-self:flex-start}
/* ---- âm thanh trò chơi (chat-am-thanh.js): nút loa · cột sóng nhạc khi thẻ đang phát · ô sai rung ---- */
.tcn-am{font-size:14px}
.tcn-am-menu{min-width:280px;max-width:min(320px,calc(100vw - 16px));gap:4px;padding:10px}
.tcn-am-menu .cht-bc-cong{padding:6px 4px}
.tcn-am-menu .tcn-ghi{padding:2px 6px}
.tcn-vq.dang-phat .tcn-ic,.tcn-qz.dang-phat .tcn-ic{position:relative}
.tcn-vq.dang-phat .tcn-ic::after,.tcn-qz.dang-phat .tcn-ic::after{content:'';position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--nhan) radial-gradient(circle,#fff 0 2px,transparent 2.5px);box-shadow:0 0 0 2px var(--the);animation:tcn-song 1s ease-in-out infinite}
@keyframes tcn-song{50%{transform:scale(1.25)}}
.qz-dap.sai-toi{animation:qz-lac .45s ease-in-out;box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--loi);opacity:.85;filter:none}
@keyframes qz-lac{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){ .qz-dap.sai-toi,.tcn-vq.dang-phat .tcn-ic::after,.tcn-qz.dang-phat .tcn-ic::after{animation:none} }
/* linh vật tự bước ra cạnh trò chơi để dẫn (chat-am-thanh.js amDan · linh-vat.js lvBayToi) */
.lv-dh.lv-bay{transition:left .62s cubic-bezier(.3,1.25,.5,1),top .62s cubic-bezier(.3,1.25,.5,1)}
@media (prefers-reduced-motion:reduce){ .lv-dh.lv-bay{transition:left .2s,top .2s} }

/* ============ Ô SOẠN GỌN TRÊN ĐIỆN THOẠI (27/09/2026) ============
   Chủ dự án: "box nhắn tin xấu và chiếm diện tích". Trước: viên trắng cao ~50px nằm trên nền xám, dưới còn lề 12px + cả vùng an toàn
   thanh home (34px) → gần 100px cho một ô gõ. Nay: thanh trắng liền đáy; [+] ngoài · ô gõ là viên nhạt có # nằm trong · nút gửi/mic
   tròn 36px; chữ 16px (iOS không tự phóng khi chạm vào ô); đáy chỉ chừa phần thanh home thật sự cần. */
@media (max-width:760px){
  .cht-soan-khung{background:var(--the);padding:6px 8px max(6px,calc(env(safe-area-inset-bottom) - 14px));box-shadow:0 -1px 0 rgba(30,20,70,.05),0 -6px 16px -12px rgba(30,20,70,.16)}
  .cht-soan{margin-bottom:0;background:transparent;box-shadow:none;padding:0;gap:4px;align-items:flex-end}
  .cht-soan textarea{font-size:16px;line-height:20px;min-height:38px;padding:9px 40px 9px 14px;border-radius:19px;background:var(--nen)!important}
  .cht-soan .cht-nut-tron{width:36px;height:38px;border-radius:19px}
  .cht-soan .cht-nut-tron:hover{background:transparent}
  /* nút # nằm TRONG viên gõ, ở mép phải */
  .cht-soan textarea+.cht-nut-tron,.cht-soan input[type=file]+textarea+.cht-nut-tron{margin-left:-40px;position:relative;z-index:1}
  .cht-gui{width:38px;height:38px}
  html.cht-ban-phim .cht-soan-khung{padding-bottom:6px}
  /* đang ở trong khung chat: trang KHÔNG được cuộn — bàn phím iOS mở thì trình duyệt chỉ dịch vùng nhìn, khung chat bám theo (chtKhopManHinh) */
  html:has(.cht-khung),html:has(.cht-khung) body{overflow:hidden;overscroll-behavior:none}
}
/* bảng đo bàn phím — bật bằng địa chỉ ?soi-ban-phim (chỉ để chẩn đoán trên máy thật) */
.soi-bp{position:fixed;left:6px;top:calc(env(safe-area-inset-top) + 4px);z-index:99999;background:rgba(20,12,40,.82);color:#fff;font:11px/1.35 ui-monospace,monospace;padding:6px 8px;border-radius:8px;pointer-events:none;white-space:pre}