/* Aladyn - toan bo CSS giao dien chinh. Tach khoi index.html ngay 08/09/2026 de trinh duyet
   cache lai 30 ngay (nginx: public, max-age=2592000) -> lan vao sau khong tai lai.
   !!! MOI LAN SUA FILE NAY PHAI TANG ?v= trong index.html, neu khong nguoi dung se ket ban cu. */

  :root{color-scheme:light;--primary:#6C3CE1;--primary-light:#8B5CF6;--primary-dark:#4C1D95;--accent:#F59E0B;--pink:#EC4899;--blue:#3B82F6;
    --bg:#ffffff;--soft:#F4F0FC;--soft2:#EEE7FB;--tx:#1E1533;--tx2:#6B6488;--bd:#E7DEF7;--green:#10B981}
  *{box-sizing:border-box;margin:0;padding:0}

  /* ===== HOA HOP VOI IPHONE / IPAD (WebKit) - bo sung 08/09/2026 =====
     May tinh va Android von chay tot; rieng WebKit co vai mac dinh khac han lam vo giao dien
     tren iPhone. Moi dong duoi day sua dung mot loi cu the:

     1) -webkit-text-size-adjust:100%
        iOS TU PHONG TO chu khi xoay ngang may -> chu to ra, tran khoi khung, vo bo cuc.
        Khoa lai de co chu giu nguyen o moi huong man hinh.

     2) -webkit-tap-highlight-color:transparent
        Bo o xam nhap nhay phu len moi nut/lien ket khi cham. Rat "web", khong giong app.

     3) font-family:inherit cho o nhap va nut
        Safari KHONG cho cac o form ke thua phong chu cua trang - no dung phong chu rieng
        cua he thong. Vi vay chu trong o nhap / tren nut o iPhone trong khac han Android.
        Dong nay bat chung dung dung mot phong chu voi phan con lai cua app.

     4) -webkit-appearance:none cho o nhap
        iOS tu ve them vien lom + bong mo ben trong o nhap, de len bo vien bo tron cua app.

     5) font-size:16px cho o nhap (xem .fld va .cinput textarea ben duoi)
        DUOI 16px thi iOS TU PHONG TO CA TRANG ngay khi cham vao o nhap. Do la nguyen nhan
        pho bien nhat khien nguoi dung iPhone thay man hinh "nhay len nhay xuong", lech khung
        luc go tin nhan - va sau khi go xong trang van ket o trang thai da phong to.

     6) overscroll-behavior
        Chan kieu keo dan (rubber-band) cua iOS: keo qua day danh sach tin nhan se khong keo
        theo ca trang, khong lo mang trang/vien tim o mep man hinh. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent}
  button,input,select,textarea{font-family:inherit}
  input,select,textarea{font-size:inherit}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea{-webkit-appearance:none;appearance:none}
  /* ROOT-FIX màn trắng PC/PWA: trên app đã cài (standalone) Chromium phân giải sai height:100% theo chuỗi %
     -> body co về ~18px -> cắt mất .wrap (846px) -> trắng. Ép chiều cao tối thiểu theo viewport bằng dvh
     (đơn vị này phân giải ĐÚNG trong PWA) để body/html KHÔNG BAO GIỜ co lại -> nội dung luôn hiển thị. */
  html,body{height:100%;min-height:100vh;min-height:100dvh;overflow-x:hidden;max-width:100%;background:#fff;overscroll-behavior-y:none}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:var(--tx);-webkit-font-smoothing:antialiased;background:#ffffff}
  /* ===== KHUNG APP FULL MAN HINH TREN MOI THIET BI (sua 09/09/2026) =====
     Ba lop chieu cao, trinh duyet nao hieu duoc lop nao thi dung lop do:
       height:100vh                  -> moi trinh duyet cu
       height:-webkit-fill-available -> iOS Safari duoi 15.4 (100vh o day tinh CA thanh dia chi
                                        nen khung bi cao qua man, day o soan tin xuong duoi mep)
       height:100dvh                 -> iOS 15.4+ / Chrome hien dai, dung nhat
     Phan dem theo vung an toan dat o DAY (chu khong o tung man hinh) de MOI man - trang chu,
     chon ngon ngu, ho so, chat - deu tranh duoc tai tho va notch nhu nhau. Nho box-sizing:
     border-box o dau tep, phan dem an vao chieu cao chu khong lam tran khung. */
  .wrap{width:100%;max-width:100%;margin:0 auto;
    height:100vh;height:-webkit-fill-available;height:100dvh;
    padding-top:env(safe-area-inset-top);
    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
    display:flex;flex-direction:column;position:relative;background:#fff;
    box-shadow:inset 0 0 0 2px rgba(108,60,225,.30), 0 12px 50px rgba(108,60,225,.14)}
  /* Tren dien thoai/tablet: bo vien tim inset 2px. Mot khung vien chay quanh mep man hinh
     thi khong con la "full man hinh" nua - va chinh hai vach tim doc nay tung bi nham la
     dau hieu loi khi bo cuc vo. Man hinh lon van giu vien de app trong nhu mot the noi. */
  @media (max-width:820px){ .wrap{box-shadow:none} }
  a{color:var(--primary);text-decoration:none}
  .screen{display:none;flex:1;min-height:0;flex-direction:column}
  .screen.active{display:flex}

  /* ===== HOME ===== */
  .home{overflow-y:auto;padding:22px 20px 30px;align-items:center}
  .home>*{width:100%;max-width:680px}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin-bottom:18px}
  .brand{display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0}
  /* Logo + chữ "Aladyn" phải NẰM ĐÚNG MỘT HÀNG.
     Lỗi cũ: cả hàng căn theo ĐÁY (flex-end). File logo-mark.png có sẵn ~16% lề trong suốt
     mỗi cạnh, nên đáy của khung 54px nằm thấp hơn đáy hình tròn nhìn thấy được ~9px ->
     logo bị treo lơ lửng cao hơn dòng chữ. Nay căn theo TÂM (center) để tâm hình tròn
     trùng tâm chữ, và phóng ảnh 118% để bù đúng phần lề trong suốt (chỉ cắt vào vùng
     rỗng, không hề cắt vào hình) -> logo cân xứng với cỡ chữ 20px. */
  .navicon{width:54px;height:54px;background:url('logo-mark.png?v=2') center/118% no-repeat;flex:0 0 auto;align-self:center;display:block}
  .navname{font-weight:800;font-size:20px;letter-spacing:.3px;color:var(--primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:1.15}
  .up{font-size:12.5px;font-weight:800;padding:9px 15px;border-radius:50px;background:linear-gradient(135deg,var(--accent),#f6b93b);color:#3a2600;box-shadow:0 4px 14px rgba(245,158,11,.3)}
  .navbtns{display:flex;gap:7px;align-items:center;flex-wrap:nowrap;justify-content:flex-end;flex:0 0 auto}
  .hicon{width:40px;height:40px;border-radius:50%;background:var(--soft2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--primary-dark);cursor:pointer;text-decoration:none;flex:0 0 auto}
  .hicon:hover{border-color:var(--primary-light)}
  .hicon svg{width:21px;height:21px}
  .iconbtn svg{width:18px;height:18px}
  .send svg{width:20px;height:20px}
  .attach svg{width:21px;height:21px}
  .chead .back svg{width:24px;height:24px;vertical-align:-5px}
  /* Thanh trạng thái VIP/hạn mức trong khung chat */
  .statusbar{display:none;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:var(--soft);border-bottom:1px solid var(--bd);font-size:12.5px;color:var(--tx2)}
  .statusbar.on{display:flex}
  .statusbar .vip{font-weight:800;color:var(--primary-dark)}
  .statusbar .vip.prem{color:#08805a}
  .statusbar a{font-weight:700}
  /* Chia sẻ phòng */
  .reflinkbox{background:#faf8ff;border:1px dashed var(--primary-light);border-radius:12px;padding:11px 13px;font-size:13px;color:var(--primary-dark);word-break:break-all;margin-bottom:12px}
  .sharebtns{display:flex;flex-wrap:wrap;gap:8px}
  .shb{border:none;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;background:var(--primary)}
  .shb.fb{background:#1877f2}.shb.za{background:#0068ff}.shb.wa{background:#25d366}.shb.tg{background:#0088cc}
  .shb.copy{background:var(--soft2);color:var(--primary-dark);border:1px solid var(--bd)}
  .shb.qr{background:linear-gradient(135deg,#5468FF,#6C3CE1);color:#fff}
  /* ===== GOC CUA LOI "QR DE LEN CHU" (15/09/2026) =====
     .sheet la flex COT co max-height. Trong flex cot, moi phan tu con MAC DINH
     duoc phep CO LAI (flex-shrink:1). Khi noi dung dai hon khung, trinh duyet
     bop o chua anh QR tu 343px xuong con 198px — nhung the <svg> ben trong van
     giu nguyen 315px, the la no LOI RA NGOAI o cua no va de len tieu de, len o
     link, len cac nut. Man hinh cang hep cang de dinh (320px dinh chac).
     Chan tan goc: KHONG cho phan tu nao trong khung nay co lai; ban than .sheet
     da co overflow:auto nen ca khung tu cuon. */
  #qrModal .sheet>*{flex:0 0 auto}
  #qrPreview svg{width:100%;max-width:260px;height:auto;display:block;margin:0 auto}
  .qrrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .qrnote{font-size:12.5px;color:var(--tx2);line-height:1.6;margin-top:8px}
  .qrchip{display:inline-flex;align-items:center;gap:6px;background:var(--soft2);border:1px solid var(--bd);color:var(--primary-dark);border-radius:50px;padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer;margin:4px 4px 0 0}
  /* Màn chọn ngôn ngữ đầu tiên */
  .pick{overflow-y:auto;padding:22px 20px 28px}
  .picklogo{width:min(280px,70vw);height:auto;display:block;margin:8px auto 10px;animation:float 5s ease-in-out infinite}
  .pickh{font-size:24px;font-weight:800;color:var(--primary-dark);margin:6px 2px 14px}
  .pickh span{display:block;font-size:14px;font-weight:600;color:var(--tx2);margin-top:2px}
  .picklbl{font-size:12px;font-weight:700;color:var(--tx2);letter-spacing:.5px;margin:16px 4px 8px}
  .pickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pcard{display:flex;align-items:center;gap:10px;background:#faf8ff;border:2px solid var(--bd);border-radius:14px;padding:12px;cursor:pointer;text-align:left}
  .pcard:hover{border-color:var(--primary-light)}
  .pcard.on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,60,225,.16)}
  .pcard .cc{font-weight:800;color:var(--primary);font-size:12.5px;background:#EEE7FB;border-radius:8px;padding:6px 4px;min-width:36px;text-align:center;flex:0 0 auto}
  .pcard .pn{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.3}
  #pickConfirm{margin-top:18px}
  .ps-ava{width:104px;height:104px;border-radius:50%;margin:6px auto 6px;background:linear-gradient(135deg,var(--blue),var(--primary),var(--pink));color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;cursor:pointer;overflow:hidden;position:relative;box-shadow:0 10px 26px rgba(108,60,225,.3)}
  .ps-ava img{width:100%;height:100%;object-fit:cover}
  .ps-ava .cam{position:absolute;right:2px;bottom:2px;width:30px;height:30px;border-radius:50%;background:var(--primary-dark);border:2px solid #fff;display:flex;align-items:center;justify-content:center}
  .ps-ava .cam svg{width:15px;height:15px;stroke:#fff}
  .ps-lbl{display:block;font-size:13px;font-weight:700;color:var(--tx);margin:14px 2px 6px}
  .ps-row2{display:flex;gap:8px}.ps-row2>*{flex:1;min-width:0}
  .ps-cpick{position:relative}
  .ps-cplist{display:none;position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(108,60,225,.18);max-height:210px;overflow-y:auto;z-index:20}
  .ps-cpi{padding:10px 13px;font-size:14px;cursor:pointer;border-bottom:1px solid #F4F0FC}.ps-cpi:hover{background:var(--soft)}
  .ps-needs{display:flex;flex-direction:column;gap:8px}
  .ps-need{display:flex;align-items:center;gap:11px;background:#faf8ff;border:2px solid var(--bd);border-radius:14px;padding:12px 13px;cursor:pointer}
  .ps-need.on{border-color:var(--primary);background:#f3eefe}
  .ps-need .ic{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--soft2)}
  .ps-need.on .ic{background:linear-gradient(135deg,var(--blue),var(--primary));}.ps-need.on .ic svg{stroke:#fff}
  .ps-need .ic svg{width:20px;height:20px;stroke:var(--primary-dark)}
  .ps-need .tx b{display:block;font-size:14px;color:var(--tx)}.ps-need .tx span{font-size:12px;color:var(--tx2)}
  .ps-need .chk{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--bd);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
  .ps-need.on .chk{background:var(--primary);border-color:var(--primary)}
  .ps-note{font-size:12.5px;color:var(--tx2);background:var(--soft);border:1px solid var(--bd);border-radius:12px;padding:11px 13px;line-height:1.55;margin-top:6px}
  #pickConfirm:disabled{opacity:.5;cursor:default}

  .hero{text-align:center;padding:6px 0 4px}
  .logohero{width:fit-content;max-width:92%;margin:2px auto 14px;animation:float 5s ease-in-out infinite}
  .logohero img{width:min(300px,74vw);height:auto;display:block}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .heroBanner{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;display:block;border-radius:20px;box-shadow:0 16px 40px rgba(108,60,225,.20);border:1px solid var(--bd)}
  /* Dự phòng nếu ảnh banner lỗi: hộp gradient hiển thị ĐỦ slogan, đúng tỉ lệ, không méo. */
  .heroBannerFb{width:100%;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border-radius:20px;background:linear-gradient(135deg,var(--blue),var(--primary),var(--pink));color:#fff;font-weight:800;font-size:clamp(17px,4.6vw,28px);line-height:1.3;box-shadow:0 16px 40px rgba(108,60,225,.20)}
  .feats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 4px}
  .feat{font-size:12.5px;color:var(--primary-dark);background:var(--soft);border:1px solid var(--bd);border-radius:50px;padding:7px 13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
  .feat svg{width:15px;height:15px;flex:0 0 auto}
  .join h3 svg{width:18px;height:18px;flex:0 0 auto}
  .chip svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px}

  .join{margin:22px 0 0;border-radius:22px;padding:2px;background:linear-gradient(135deg,var(--blue),var(--primary),var(--pink));box-shadow:0 16px 40px rgba(108,60,225,.22)}
  .join .in{background:#fff;border-radius:20px;padding:20px 18px}
  .join h3{font-size:15px;margin-bottom:12px;color:var(--primary-dark);display:flex;align-items:center;gap:8px}
  label{display:block;font-size:13.5px;font-weight:700;color:var(--tx);margin:0 0 6px}
  .fld{width:100%;background:#faf8ff;border:1px solid var(--bd);border-radius:12px;padding:13px 15px;color:var(--tx);font-size:16px;outline:none}   /* 16px: duoi muc nay iOS tu phong to ca trang khi cham vao o */
  .fld:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(139,92,246,.16)}
  .langbtn{width:100%;text-align:left;background:#faf8ff;border:1px solid var(--bd);border-radius:12px;padding:13px 15px;color:var(--tx);font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .langbtn:hover{border-color:var(--primary-light)}
  .row{display:flex;gap:10px}
  .btn{border:none;border-radius:50px;cursor:pointer;font-weight:700;font-size:15.5px;padding:15px 22px;transition:transform .12s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:8px}
  .btn:active{transform:scale(.98)}
  .btn.primary{background:linear-gradient(135deg,var(--blue),var(--primary),var(--primary-light));color:#fff;width:100%;box-shadow:0 10px 26px rgba(108,60,225,.4)}
  .btn.ghost{background:var(--soft2);color:var(--primary-dark);border:1px solid var(--bd)}
  .mt10{margin-top:12px}
  .hint{font-size:12px;color:var(--tx2);margin-top:10px;line-height:1.6;text-align:center}
  .premwrap{margin-top:12px;font-size:12.5px;text-align:center;color:var(--tx2)}
  .prembadge{display:inline-flex;align-items:center;gap:6px;background:#e7f9f0;border:1px solid var(--green);color:#08805a;border-radius:50px;padding:6px 12px;font-weight:700}
  .homefoot{text-align:center;color:var(--tx2);font-size:12px;margin-top:22px;line-height:2}

  /* lang modal */
  .modal{position:fixed;inset:0;background:rgba(30,21,51,.45);display:none;align-items:flex-end;justify-content:center;z-index:60;padding-bottom:var(--kb,0px)}
  .modal.on{display:flex}
  .sheet{width:100%;max-width:560px;background:#fff;border:1px solid var(--bd);border-radius:22px 22px 0 0;padding:16px;max-height:82vh;max-height:calc(var(--vvh,82vh) - 24px);display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(108,60,225,.18)}
  .sheet h3{font-size:15px;margin:2px 4px 12px;color:var(--primary-dark)}
  #langList{overflow:auto;margin-top:10px}
  .lrow{padding:12px;border-radius:12px;cursor:pointer;font-size:15px;display:flex;justify-content:space-between;color:var(--tx)}
  .lrow:hover,.lrow:active{background:var(--soft)}
  .lrow span{color:var(--tx2);font-size:12.5px}

  /* ===== CHAT ===== */
  .chead{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--bd);background:#fff;position:sticky;top:0;z-index:5}
  .chead .back{background:none;border:none;color:var(--tx);font-size:22px;cursor:pointer;padding:4px}
  .chead .ti{flex:1;min-width:0}.chead .ti b{font-size:15px;color:var(--tx)}.chead .ti div{font-size:11.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:var(--soft2);border:1px solid var(--bd);color:var(--primary-dark);border-radius:50px;min-width:40px;height:40px;padding:0 9px;font-size:13px;font-weight:800;cursor:pointer;flex:0 0 auto}
  .chead .navicon{display:none}
  .chip{display:inline-block;margin:10px auto;padding:6px 13px;background:var(--soft);border:1px solid var(--bd);border-radius:50px;font-size:12px;color:var(--primary-dark);text-align:center}
  .msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 14px 14px;display:flex;flex-direction:column;gap:3px}
  .center{text-align:center}
  .sys{align-self:center;font-size:11.5px;color:var(--tx2);background:var(--soft);padding:4px 12px;border-radius:50px;margin:6px 0}
  .m{max-width:min(82%,640px);margin-top:8px;display:flex;flex-direction:column}
  .m.me{align-self:flex-end;align-items:flex-end}.m.them{align-self:flex-start}
  .who{font-size:11px;color:var(--tx2);margin:0 6px 3px}
  .mb{padding:10px 14px;border-radius:16px;font-size:16px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}
  .them .mb{background:var(--soft);border:1px solid var(--bd);border-bottom-left-radius:5px;color:var(--tx)}
  .me .mb{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-bottom-right-radius:5px}
  .orig{font-size:13.5px;color:var(--tx2);margin:4px 6px 0;cursor:pointer;user-select:none}
  .orig .ot{display:none;margin-top:3px;color:var(--primary-dark);font-style:italic}.orig.open .ot{display:block}
  .warn{font-size:11px;color:#B45309;margin:2px 6px 0}
  /* Nhãn "đang dịch…": tin nhắn hiện NGAY bằng bản gốc, bản dịch tới sau vài
     trăm mili-giây và thay chữ tại chỗ. Nhờ vậy API dịch chậm/lỗi không bao giờ
     làm treo cuộc trò chuyện nữa. */
  .trwait{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--tx2);margin:3px 6px 0;opacity:.85}
  .trwait i{width:8px;height:8px;border:1.5px solid var(--bd);border-top-color:var(--primary);border-radius:50%;display:inline-block;animation:trspin .7s linear infinite}
  @keyframes trspin{to{transform:rotate(360deg)}}
  .m.trdone .mb{animation:trfade .28s ease}
  @keyframes trfade{from{opacity:.45}to{opacity:1}}
  /* ===== Hành động trên tin nhắn: trả lời/sửa/thu hồi/cảm xúc/ghim ===== */
  .replyq{border-left:3px solid rgba(255,255,255,.6);background:rgba(0,0,0,.10);border-radius:8px;padding:5px 9px;margin-bottom:6px;font-size:12.5px;line-height:1.35}
  .them .replyq{border-left-color:var(--primary);background:rgba(108,60,225,.08)}
  .replyq b{display:block;font-size:11.5px;opacity:.9}
  .replyq span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;opacity:.85}
  .edited{font-size:10.5px;color:var(--tx2);margin:2px 6px 0}
  .m.del .mb{font-style:italic;background:var(--soft);color:var(--tx2);border:1px dashed var(--bd)}
  .reactbar{display:none;gap:4px;flex-wrap:wrap;margin:4px 2px 0}
  .reactchip{background:#fff;border:1px solid var(--bd);border-radius:50px;padding:2px 8px;font-size:12.5px;box-shadow:0 2px 6px rgba(108,60,225,.12);cursor:pointer}
  .reactchip.mine{border-color:var(--primary);background:var(--soft)}
  .pinbar{display:none;align-items:center;gap:8px;padding:7px 14px;background:#FFF8E6;border-bottom:1px solid #F3E3B3;font-size:12.5px;color:#7A5B00;cursor:pointer}
  .pinbar.on{display:flex}
  .pinbar .pt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pinbar button{background:none;border:none;cursor:pointer;font-size:14px;color:#7A5B00;flex:0 0 auto}
  .replybar{display:none;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--bd);background:var(--soft)}
  .replybar.on{display:flex}
  .replybar .rb{flex:1;min-width:0}
  .replybar .rb b{display:block;font-size:12px;color:var(--primary-dark)}
  .replybar .rb span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2);font-size:12.5px}
  .replybar button{background:none;border:none;font-size:17px;color:var(--tx2);cursor:pointer;flex:0 0 auto}
  .msheet{position:fixed;inset:0;background:rgba(30,21,51,.45);display:none;align-items:flex-end;justify-content:center;z-index:80;padding-bottom:var(--kb,0px)}
  .msheet.on{display:flex}
  .msheet .ms{width:100%;max-width:560px;background:#fff;border-radius:22px 22px 0 0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(108,60,225,.18)}
  .emorow{display:flex;gap:6px;margin-bottom:10px}
  .emorow button{flex:1;background:var(--soft);border:1px solid var(--bd);border-radius:12px;font-size:22px;padding:8px 0;cursor:pointer}
  .emorow button:active{background:var(--soft2)}
  .mact{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;text-align:left;font-size:14.5px;color:var(--tx);padding:12px 8px;border-radius:10px;cursor:pointer;font-family:inherit}
  .mact:hover,.mact:active{background:var(--soft)}
  .mact.danger{color:#DC2626}
  .mact svg{width:19px;height:19px;flex:0 0 auto}
  .cinput{position:relative}
  .mentions{position:absolute;left:10px;right:10px;bottom:100%;margin-bottom:6px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 -8px 30px rgba(108,60,225,.20);max-height:216px;overflow-y:auto;display:none;z-index:30}
  .mentions.on{display:block}
  .mrow2{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-size:14px;color:var(--tx)}
  .mrow2.sel,.mrow2:active{background:var(--soft)}
  .mrow2 .mava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex:0 0 auto}
  .mention{color:var(--primary-dark);font-weight:700;background:rgba(139,92,246,.16);border-radius:6px;padding:0 3px}
  .me .mb .mention{color:#fff;background:rgba(255,255,255,.28)}
  /* Link trong tin nhắn: bấm được, mở bằng trình duyệt mặc định */
  .msglink{color:var(--primary-dark);font-weight:600;text-decoration:underline;word-break:break-all}
  .me .mb .msglink{color:#fff;text-decoration:underline}
  .m.tagme .mb{box-shadow:0 0 0 2px var(--accent)}
  /* ROOT-CAUSE FIX bàn phím ảo: MỌI màn hình đang mở (không chỉ chat) được ghim đúng vùng nhìn thấy
     phía trên bàn phím (theo visualViewport), tự cuộn nội dung bên trong — không còn khoảng trắng khi
     focus ô nhập ở trang chủ/đăng nhập/hồ sơ. Trước đây chỉ #chat được xử lý nên các màn khác bị trắng. */
  /* ===== BÀN PHÍM ẢO =====
     CÁCH CŨ (đã bỏ): khi bàn phím bật thì đổi .screen.active sang position:fixed rồi tự tính
     top/height. Cách đó KÉO MÀN HÌNH RA KHỎI KHUNG .wrap — trên iPhone để lại đúng cảnh:
     ô soạn tin trôi lên đầu màn, còn .wrap thành cái vỏ trắng rỗng (hai vạch tím dọc chính
     là viền inset của .wrap). Ngoài ra iOS đặt phần tử fixed theo LAYOUT viewport chứ không
     theo vùng nhìn thấy, nên mọi phép tính top đều lệch khi Safari tự cuộn trang lúc focus.

     CÁCH MỚI: không đụng gì tới .screen. Chỉ làm hai việc:
       1. KHOÁ trang lại để Safari không tự cuộn được nữa
       2. Ép khung app cao đúng bằng vùng còn nhìn thấy -> ô soạn tin tự nằm sát bàn phím
     Bố cục bên trong giữ nguyên (tiêu đề - danh sách tin - ô soạn), không có gì bị lệch. */
  /* LOI IPHONE DA SUA (08/09/2026): dong duoi day truoc kia la 'top:0'.
     Tren iOS, khi ban phim bat, Safari KHONG thu nho layout viewport ma CUON vung nhin thay
     xuong duoi trong long layout viewport (visualViewport.offsetTop > 0). Phan tu position:fixed
     lai duoc dat theo LAYOUT viewport -> 'top:0' dat khung app cao hon vung nhin thay dung
     offsetTop pixel => khung chat bi day len khoi man, chi con thay o soan tin o mep tren,
     phia duoi la mot mang trang lon. Bu lai bang --vvo (chinh la offsetTop) thi khung app
     luon dan khit vung nhin thay, tren moi thiet bi:
       - iOS  : vvo > 0 -> day khung xuong dung bang phan Safari da cuon
       - Android/desktop: vvo = 0 -> top:0 y het nhu truoc, khong doi gi
     KHONG duoc doi 'top' ve 0. */
  body.kb{position:fixed;left:0;right:0;top:var(--vvo,0px);width:100%;height:var(--vvh,100dvh);min-height:0;overflow:hidden}
  body.kb .wrap{height:var(--vvh,100dvh);min-height:0}
  /* Ban phim da che het vung home-indicator roi -> bo phan dem safe-area duoi o soan tin,
     neu khong se thua mot khoang trang ~34px giua o soan tin va ban phim. */
  body.kb .cinput{padding-bottom:10px}
  .m.hl{animation:hlm 1.6s ease}
  @keyframes hlm{0%{background:rgba(245,158,11,.28);border-radius:14px}100%{background:transparent}}
  .starb{font-size:11px;color:#B45309;margin:2px 6px 0}
  .rolechip{font-size:10.5px;font-weight:800;border-radius:50px;padding:2px 8px;margin-left:6px;vertical-align:1px;display:inline-block}
  .rolechip.ow{background:#FFF3D6;color:#8a5a00;border:1px solid #f3d387}
  .rolechip.dep{background:#EDE7FF;color:#4C1D95;border:1px solid #d8c8ff}
  .mbtn{border:none;border-radius:50px;padding:7px 11px;font-size:11.5px;font-weight:700;cursor:pointer;flex:0 0 auto}
  .mbtn.kick{background:#FEE2E2;color:#B91C1C;border:1px solid #fca5a5}
  .mbtn.dep{background:#EDE7FB;color:#4C1D95;border:1px solid var(--bd)}
  .fdlrow{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;font-weight:700;text-decoration:none;background:rgba(255,255,255,.9);border:1px solid var(--bd);color:var(--primary-dark);border-radius:50px;padding:5px 12px}
  .leavebtn{background:#FEE2E2 !important;border-color:#fca5a5 !important;color:#B91C1C !important}
  .typing{font-size:12px;color:var(--tx2);padding:2px 18px;height:18px}
  .cinput{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--bd);background:#fff}
  .cinput textarea{flex:1;background:#faf8ff;border:1px solid var(--bd);border-radius:22px;padding:12px 16px;color:var(--tx);font-size:16px;line-height:1.4;outline:none;resize:none;max-height:150px;min-height:46px;font-family:inherit}
  .cinput textarea:focus{border-color:var(--primary-light)}
  .send{width:46px;height:46px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:19px;cursor:pointer;flex-shrink:0}
  .attach{width:46px;height:46px;border-radius:50%;border:1px solid var(--bd);background:var(--soft2);color:var(--primary-dark);font-size:19px;cursor:pointer;flex-shrink:0}
  .attach:hover{border-color:var(--primary-light)}
  .fimg{max-width:240px;max-height:300px;border-radius:12px;cursor:pointer;display:block}
  .fvid{max-width:280px;max-height:340px;border-radius:12px;display:block;background:#000}
  .fchip{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:190px;max-width:280px}
  .fchip .fico{font-size:26px;flex:0 0 auto}
  .fchip .fmeta{display:flex;flex-direction:column;min-width:0}
  .fchip .fmeta b{font-size:13.5px;word-break:break-word;line-height:1.25}
  .fchip .fmeta span{font-size:11.5px;opacity:.7}
  .fchip .fdl{margin-left:auto;font-size:16px;opacity:.8}
  .mb .cap{margin-top:6px}
  .members{position:absolute;inset:0;background:rgba(30,21,51,.4);display:none;z-index:50}.members.on{display:block}
  .mpanel{position:absolute;right:0;top:0;bottom:0;width:82%;max-width:340px;background:#fff;border-left:1px solid var(--bd);padding:18px;overflow-y:auto}
  .mpanel h3{font-size:15px;margin-bottom:12px;color:var(--primary-dark)}
  .mitem{display:flex;align-items:center;gap:10px;padding:11px 8px;border-bottom:1px solid var(--bd)}
  .ava{width:38px;height:38px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary)}
  .mitem b{font-size:14px;color:var(--tx)}.mitem div{font-size:12px;color:var(--tx2)}
  .addfr{background:var(--primary);border:none;color:#fff;border-radius:50px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;flex:0 0 auto}
  .addfr:disabled{opacity:.6}
  .sech{display:flex;justify-content:space-between;align-items:center;margin:18px 4px 8px;font-size:12px;font-weight:800;letter-spacing:.5px;color:var(--tx2);text-transform:uppercase}
  .sech .secmore{font-size:12px;color:var(--primary);font-weight:700;text-transform:none}
  .inbox{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 8px 26px rgba(108,60,225,.08)}
  .conv{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bd);cursor:pointer}
  .conv:last-child{border-bottom:none}
  .conv:active{background:var(--soft)}
  .cava{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),var(--primary),var(--pink));overflow:hidden}
  .cava img{width:100%;height:100%;object-fit:cover}
  .cava.grp{border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--primary))}
  .cava svg{width:22px;height:22px;stroke:#fff}
  .cmeta{flex:1;min-width:0}
  .cmeta b{font-size:15px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .conv.un .cmeta b{font-weight:800}
  .cprev{font-size:12.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .conv.un .cprev{color:var(--primary-dark);font-weight:600}
  .undot{width:10px;height:10px;border-radius:50%;background:var(--pink);flex:0 0 auto}
  .instrow{display:flex;align-items:center;gap:12px}
  .instrow .btn{width:auto;padding:12px 16px;white-space:nowrap}
  img,svg,video{max-width:100%}
  /* ===== DESKTOP: trang chủ dùng FULL chiều rộng màn hình (bỏ giới hạn cột 680px) ===== */
  @media (min-width:820px){
    .home{padding-left:34px;padding-right:34px}
    .home>*{max-width:none}
    .hero{max-width:760px;margin-left:auto;margin-right:auto}   /* banner giữ cỡ đẹp, căn giữa, không giãn quá khổ */
  }
  @media (max-width:480px){
    .home{padding:16px 12px 26px}
    .pick{padding:18px 12px 24px}
    .navname{display:none}
    .navicon{width:44px;height:44px}
    .hicon{width:34px;height:34px}
    .hicon svg{width:18px;height:18px}
    .navbtns{gap:5px;flex:1;justify-content:space-between;max-width:264px;margin-left:auto}
    .topbar{gap:8px;margin-bottom:14px}
    .brand{gap:0}
    .pickgrid{grid-template-columns:1fr}
  }

/* ===== MAY CAM UNG: BO TRANG THAI ":hover" BI DINH =====
   Tren iPhone khong co con tro chuot. Khi cham vao mot the, WebKit van kich hoat :hover va
   GIU NGUYEN cho den khi cham cho khac -> the do cu sang len mai, trong nhu dang duoc chon.
   Khoi duoi day tra cac the ve trang thai binh thuong cho may khong co chuot; rieng :active
   (nhan xuong) van giu nguyen de nguoi dung van thay phan hoi khi cham. */
@media (hover: none) {
  .hicon:hover{border-color:var(--bd)}
  .pcard:hover{border-color:var(--bd)}
  .ps-cpi:hover{background:transparent}
  .langbtn:hover{border-color:var(--bd)}
  .lrow:hover{background:transparent}
  .mact:hover{background:transparent}
  .attach:hover{border-color:var(--bd)}
}