/* market.css — style dùng chung của chợ NFT TCC.
 *
 * Rút NGUYÊN khối <style> của trang chợ ra, không chọn lọc: trang hồ sơ dùng
 * lại hơn 25 lớp trong này (.nft .grid .badge .pstat .drow .cp .selbtn .cd …)
 * cùng toàn bộ 164 biến màu. Chọn lọc từng luật là cách chắc chắn nhất để bỏ
 * sót một cái và hai trang trông lệch nhau — thứ rẻ hơn nhiều là tải thừa vài
 * KB CSS đã nằm sẵn trong cache.
 *
 * ?v= phải tăng mỗi lần sửa, và deploy cùng lúc với các trang dùng nó.
 */
  :root{
    --bg:#070b16; --surface:#111726; --surface-2:#171e30; --surface-3:#222b45;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
    --text:#eef2ff; --dim:#a4aecd; --mute:#5c6890;
    --accent:#ff9a3d; --accent-2:#ff771a; --grad:linear-gradient(135deg,#ff9a3d,#ff771a);
    --green:#38e0a6; --auc:#8b7dff; --rent:#00d4ff; --amber:#ffb454; --red:#ff5d73;
    --r:20px; --r-sm:14px; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
    --shadow:0 18px 44px -20px rgba(0,0,0,.75);
    --bar:rgba(17,23,38,.82); --bar-blur:16px; --bar-sh:24px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  /* `overflow-x:hidden` biến html/body thành VÙNG CUỘN riêng -> position:sticky
     của .nav im lặng ngừng hoạt động (thanh trên trôi mất khi cuộn, dù đã khai
     sticky). `clip` chặn cuộn ngang y hệt nhưng KHÔNG tạo vùng cuộn -> sticky chạy. */
  html,body{overflow-x:clip}
  body{margin:0;background:radial-gradient(1100px 560px at 50% -220px,rgba(255,154,61,.12),transparent 70%),var(--bg);color:var(--text);font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:var(--accent-2);text-decoration:none}
  ::selection{background:rgba(255,154,61,.35)}
  /* top nav */
  /* backdrop-filter ĐẶT TRÊN .nav sẽ biến .nav thành containing block cho mọi con
   position:fixed -> #segNav (thanh đáy mobile) bị dán vào đáy NAV thay vì đáy màn hình,
   che mất logo/ví/chuông. Chuyển hiệu ứng mờ sang ::before để giữ giao diện mà hết lỗi. */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);box-shadow:0 8px var(--bar-sh)}
.nav::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--bar);backdrop-filter:blur(var(--bar-blur));-webkit-backdrop-filter:blur(var(--bar-blur));pointer-events:none}
  .nav-in{max-width:1180px;margin:0 auto;padding:36px 20px 20px 12px;display:flex;align-items:center;gap:14px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.4px}
  .brand img{width:30px;height:30px;object-fit:contain}
  .brand .mk{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand .btxt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
  .brand .bsub{font-size:.5em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
               color:var(--mute);margin-top:3px;letter-spacing:.2em}
  .seg{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 auto}
  .seg .tab .ti,.seg .tab .ts{display:none}
  .seg .tab{padding:8px 18px;border-radius:999px;cursor:pointer;color:var(--dim);font-weight:600;font-size:13.5px;white-space:nowrap;transition:.15s;user-select:none}
  .seg .tab.on{background:var(--grad);color:#fff;box-shadow:0 5px 16px -5px rgba(255,154,61,.65)}
  .seg .tabhome{text-decoration:none;color:var(--dim);display:flex;align-items:center}
  /* Trang hồ sơ đứng riêng nên MỌI mục trong thanh tab của nó là thẻ <a>, không
     phải <div> chuyển bảng như ở trang chợ. */
  .seg a.tab{text-decoration:none;color:var(--dim);display:flex;align-items:center}
  .seg a.tab.on{color:#fff}
  .seg .tabhome:hover{color:var(--text)}
  /* Hồ sơ MỞ LỚP PHỦ chứ không đổi bảng -> không phải tab thật, phải loại khỏi
     handler .tab:not(.tabhome) bên dưới, nếu không nó ẩn sạch mọi bảng. */
  .seg .tabme{display:flex;align-items:center;gap:6px}
  .seg .tabme:hover{color:var(--text)}
  .bell{position:relative;flex:none}
  .bellBtn{background:var(--surface);border:1px solid var(--line);color:var(--dim);border-radius:999px;
           width:38px;height:38px;padding:0;font-size:16px;box-shadow:none;display:grid;place-items:center;position:relative}
  .bellBtn:hover:not(:disabled){background:var(--surface-2);color:var(--text);transform:none;filter:none}
  .bellBtn .dot{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
                background:var(--red);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;
                border:2px solid var(--bg);font-variant-numeric:tabular-nums}
  .bellPanel{position:absolute;right:0;top:46px;width:360px;max-width:calc(100vw - 24px);z-index:60;
             background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  .bellHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
  .bellAll{background:transparent;border:0;color:var(--accent-2);font-size:11.5px;padding:2px 4px;box-shadow:none;font-weight:600}
  .bellAll:hover:not(:disabled){transform:none;filter:none;text-decoration:underline}
  .bellList-empty{padding:26px 14px;text-align:center;color:var(--mute);font-size:13px}
  .nrow{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s}
  .nrow:hover{background:var(--surface-2)}
  .nrow.unread{background:rgba(255,154,61,.07)}
  .nrow .ni{font-size:16px;line-height:1.2;flex:none;width:22px;text-align:center}
  .nrow .nb{flex:1;min-width:0}
  .nrow .nt{font-size:13px;font-weight:600}
  .nrow .nm{font-size:11.5px;color:var(--mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bellFoot{padding:10px 14px;font-size:11.5px;color:var(--mute);border-top:1px solid var(--line)}
  .bellFoot a{cursor:pointer}
  @media(max-width:600px){.bellPanel{position:fixed;left:12px;right:12px;top:92px;width:auto}}
  .navlinks{display:flex;gap:6px;flex:none}
  /* Nút tìm kiếm trên thanh đầu — CHỈ hiện ở mobile, thay cho nút "Search & filters"
     to đùng chiếm nguyên một hàng dưới tiêu đề. */
  .pstats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .pstat{flex:1 1 auto;min-width:96px;background:var(--surface-2);border:1px solid var(--line);
         border-radius:var(--r-sm);padding:10px 12px}
  .pstat b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px;
           font-variant-numeric:tabular-nums;color:var(--text)}
  .pstat span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .navic.navsrch{display:none;position:relative;flex:none;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;padding:0}
  .navsrch:hover:not(:disabled){background:var(--surface-3);color:var(--text);transform:none;filter:none}
  .navsrch .nsdot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
                  background:var(--accent-2);border:2px solid var(--surface)}
  .navic{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;text-decoration:none;color:var(--dim);
         background:var(--surface);border:1px solid var(--line);transition:.12s}
  .navic:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--text);transform:translateY(-1px)}
  /* stroke geometry copied from tcc-theme.css so the glyphs weigh the same as the app's */
  .navic.wpill{width:auto;padding:0 11px 0 9px;gap:7px;grid-auto-flow:column}
  .navic .bal{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px;color:var(--text)}
  .navic .bal small{font-weight:600;color:var(--mute);font-size:10.5px;margin-left:2px}
  .navic .bal.stale{opacity:.45}
  .nav-i{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .wrap{max-width:1180px;margin:0 auto;padding:26px 20px 90px}
  .hcap{margin-bottom:18px}
  .hcap h1{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0}
  .hcap p{color:var(--mute);font-size:14px;margin:5px 0 0}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
  .panel+.panel{margin-top:16px}
  .panel h2{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.2px}
  label{display:block;font-size:11px;font-weight:700;color:var(--dim);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.6px}
  /* Duration picker: people think in days/hours, the chain counts blocks. Take the
     human unit and do the arithmetic here rather than making the seller do it. */
  .dur-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .dur-pick>div{position:relative}
  .dur-pick input{padding-right:52px}
  .dur-pick span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--mute);pointer-events:none}
  input,select{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);padding:12px 13px;font-size:14px;font-family:inherit;transition:.15s}
  input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,154,61,.18)}
  .row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:150px}
  button{background:var(--grad);color:#fff;border:none;border-radius:var(--r-sm);padding:12px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;box-shadow:0 7px 20px -9px rgba(255,154,61,.7)}
  button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
  button:disabled{opacity:.45;cursor:default;box-shadow:none}
  button.sec{background:var(--surface-3);color:var(--text);box-shadow:none}
  button.dng{background:linear-gradient(135deg,#ff5d73,#ff7d54)}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
  /* ── Khung xương lúc chờ ──────────────────────────────────────────────
     Đo 2026-09-04: vỏ trang xong ở 0,5s nhưng thẻ NFT đầu tiên mãi 5,5s mới
     hiện (12s ở lần vào đầu) — suốt quãng đó màn hình trắng trơn với đúng một
     dòng chữ "Loading the market…".
     Khung xương KHÔNG làm dữ liệu về sớm hơn một mili-giây nào. Nó chỉ thôi
     bắt người ta nhìn vào chỗ trống, và cho biết trước lưới sẽ trông ra sao. */
  .sk{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .sk .img{aspect-ratio:1;background:var(--surface-3)}
  .sk .cap{padding:11px 13px}
  .sk .ln{height:11px;border-radius:6px;background:var(--surface-3)}
  .sk .ln.w70{width:70%}
  .sk .ln.w45{width:45%;margin-top:9px}
  .sk .img,.sk .ln{position:relative;overflow:hidden}
  .sk .img::after,.sk .ln::after{content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
    transform:translateX(-100%);animation:skshine 1.4s ease-in-out infinite}
  @keyframes skshine{to{transform:translateX(100%)}}
  @media (prefers-reduced-motion:reduce){ .sk .img::after,.sk .ln::after{animation:none} }

  .nft{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
  .nft:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(255,154,61,.5)}
  .nft.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,154,61,.35)}
  .nft.listed{opacity:.62} .nft.listed:hover{opacity:1}
  .nft .img{aspect-ratio:1;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden;position:relative}
  .nft .img img,.nft .img video{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
  .nft:hover .img img,.nft:hover .img video{transform:scale(1.06)}
  .nft .cap{padding:11px 13px}
  .nft .cap .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nft .cap .id{color:var(--mute);font-family:var(--mono);font-size:10.5px;margin-top:3px}
  .nft .img .mc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px}
  .nft .cardbar{position:absolute;left:0;right:0;bottom:0;padding:10px;text-align:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(0deg,rgba(10,11,16,.92),rgba(10,11,16,.35));transform:translateY(101%);transition:transform .22s ease;pointer-events:none}
  .nft:hover .cardbar{transform:translateY(0)}
  .nft .nfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;min-width:0}
  .nft .np{font-weight:800;font-size:14.5px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .nft .np small{color:var(--dim);font-weight:600;font-size:11px}
  /* MỌI luật bài đăng phải gói trong .post. Bài học: `.phead` để trần đã tràn
     sang khung đầu của profile.html (cũng dùng class đó) và bẻ nát trang đó. */
  /* ── Kiểu BÀI ĐĂNG (feed) ───────────────────────────────────────────────
     Một cột, ảnh lớn, tác giả ở đầu, hàng nút ở chân. Hàng nút dựng sẵn từ bây
     giờ để sau này nối like/comment/share vào mà không phải xếp lại bố cục.
     Giữ nguyên khung .img > .mc của thẻ lưới -> dùng lại được lazyImage(). */
  .feed{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
  .post{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;
        cursor:pointer;transition:border-color .2s,box-shadow .2s}
  .post:hover{border-color:rgba(255,154,61,.45);box-shadow:var(--shadow)}
  .post .phead{display:flex;align-items:center;gap:10px;padding:12px 14px 10px}
  .post .pav{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
       font-size:12.5px;font-weight:800;color:#fff;letter-spacing:.4px;border:0;padding:0;box-shadow:none;cursor:pointer}
  .post .pav:hover:not(:disabled){transform:none;filter:brightness(1.14)}
  .post .pwho{min-width:0;flex:1}
  .post .pname{display:block;max-width:100%;background:none;border:0;padding:0;box-shadow:none;text-align:left;
         color:var(--text);font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .post .pname:hover:not(:disabled){color:var(--accent-2);transform:none;filter:none}
  .post .pmeta{color:var(--mute);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .post .img{aspect-ratio:1;background:var(--surface-3);position:relative;overflow:hidden;
             display:flex;align-items:center;justify-content:center;font-size:34px}
  .post .img img,.post .img video{width:100%;height:100%;object-fit:cover}
  .post .img .mc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px}
  .post .pbody{padding:12px 14px}
  .post .pnm{font-weight:700;font-size:15px;letter-spacing:-.2px}
  /* Caption. Hidden until `lazyImage` finds a description — 76% of live listings
     have none, and reserving two empty lines in three posts out of four reads as a
     broken card. It appears in the SAME tick as the picture (one metadata fetch
     feeds both), so the post settles once rather than twitching twice.
     Clamped to 3 lines: the median description is 287 characters and the longest
     live one is 1,561 — unclamped, a single post would push everything else off
     screen. `white-space:pre-line` keeps the author's paragraph breaks (13 of 19
     descriptions have them) without letting any markup through: the text is set
     with textContent, never innerHTML. */
  .post .pdesc{display:none}
  .post .pdesc.on{
    display:block; margin-top:6px; white-space:pre-line;
    font-size:13.5px; line-height:1.45; color:var(--dim); overflow-wrap:anywhere;
  }
  /* Mặc định hiện TRỌN mô tả. Chỉ mô tả thật dài mới gấp lại kèm nút mở, vì trần
     cho phép là 20.000 ký tự — không chặn thì MỘT bài có thể dài hơn cả phần còn
     lại của dòng tin cộng lại. Trung vị đo được là 287 ký tự, nên gần như mọi bài
     hiện đầy đủ ngay, không phải bấm gì. */
  .pdesc.clip2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .post .pdesc.clip{
    display:-webkit-box; -webkit-line-clamp:12; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* Nút dịch — dùng ở CẢ ô mô tả trong bài đăng và popup chi tiết, nên để mức
     gốc chứ không gói trong .post. Hai tên lớp này đã kiểm không đụng gì. */
  /* Mô tả trên THẺ LƯỚI: nhỏ, cắt cứng 2 dòng, chữ mờ hơn — ảnh và giá vẫn là chính. */
  .nft .pdesc{display:none}
  .nft .pdesc.on{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--mute);overflow-wrap:anywhere}
  .nft .ptrow{margin-top:5px}
  .nft .ptsel{padding:4px 7px;font-size:11px;border-radius:8px}
  .nft .ptst{font-size:11px}
  .ptrow{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .ptsel{width:auto;min-width:0;padding:6px 10px;border-radius:9px;font-size:12.5px;font-weight:650;
         background:var(--surface-3);color:var(--text);border:1px solid var(--line-2);box-shadow:none;cursor:pointer}
  .ptsel:disabled{opacity:.6;cursor:default}
  .ptst{font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;min-width:0}
  .ptst.busy{color:var(--dim)}
  .ptst.bad{color:var(--red)}
  /* Con quay: dịch lần đầu mất ~8 giây, không có gì động thì người dùng tưởng treo. */
  .ptst.busy::before{content:'';width:13px;height:13px;flex:none;border-radius:50%;
    border:2px solid var(--line-2);border-top-color:var(--accent);animation:ptspin .7s linear infinite}
  @keyframes ptspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ .ptst.busy::before{animation:none} }
  .ptr{background:none;border:0;box-shadow:none;padding:3px 0 0;margin:0;
       color:var(--accent-2);font-size:12.5px;font-weight:700;cursor:pointer}
  .ptr:hover:not(:disabled){transform:none;filter:none;text-decoration:underline}
  .ptr:disabled{opacity:.6;cursor:default}
  /* Nút của đường dịch NGẦM: người dùng không yêu cầu dịch, nên lối quay về bản
     gốc là lối phụ — để nó cùng màu nhấn với nút chính thì mọi thẻ đều gào lên
     một hành động mà hầu như không ai cần. */
  .ptauto{color:var(--dim);font-weight:600;font-size:12px}
  .ptauto:hover:not(:disabled){color:var(--accent-2)}
  .nft .ptauto{font-size:11px}
  .post .pmore{
    background:none;border:0;box-shadow:none;padding:3px 0 0;margin:0;
    color:var(--accent-2);font-size:12.5px;font-weight:700;cursor:pointer;
  }
  .post .pmore:hover:not(:disabled){transform:none;filter:none;text-decoration:underline}
  .post .prow2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;min-width:0}
  .post .np{font-weight:800;font-size:17px;letter-spacing:-.3px}
  .post .np small{color:var(--dim);font-weight:600;font-size:11.5px}
  /* Khối nút đứng CÙNG hàng với giá; hết chỗ thì xuống dòng nguyên khối và
     chiếm trọn bề ngang, chứ không bóp hai nút thành hai cột chữ vụn. */
  .post .pbuy{display:flex;gap:8px;flex:1 1 220px;justify-content:flex-end;min-width:0}
  .post .pbtn{flex:0 1 auto;min-width:0;border-radius:11px;padding:10px 14px;font-size:13.5px;font-weight:700;
    background:var(--surface-3);color:var(--text);border:1px solid var(--line-2);box-shadow:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .post .pbtn.go{background:var(--grad);color:#fff;border-color:transparent}
  .post .pbtn:hover:not(:disabled){filter:brightness(1.08);transform:none}
  .post .plog{margin-top:8px;max-height:none}
  .post .plog:empty{display:none}
  .post .pacts{display:flex;border-top:1px solid var(--line)}
  .post .pact{flex:1 1 0;min-width:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--dim);
        font-size:12.5px;font-weight:650;padding:11px 6px;display:flex;align-items:center;justify-content:center;gap:6px}
  .post .pact+.pact{border-left:1px solid var(--line)}
  .post .pact[disabled]{opacity:.5;cursor:not-allowed}
  .post .pact svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .post .pact em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
           color:var(--accent-2);background:rgba(255,154,61,.14);border-radius:6px;padding:2px 5px}
  .post .pact:not([disabled]){cursor:pointer}
  .post .pact:not([disabled]):hover{color:var(--fg);background:var(--surface-2)}
  /* Đã like: tô ĐẶC trái tim, không chỉ đổi màu — trạng thái bật/tắt phải đọc được
     mà không cần so sánh với thẻ bên cạnh, kể cả với người mù màu. */
  .post .pact.on{color:#ff4d6d}
  .post .pact.on svg{fill:currentColor}
  /* Số đếm rỗng thì KHÔNG chiếm chỗ, để nhãn không bị lệch giữa các thẻ. */
  .post .pact .pn{font-size:11.5px;font-weight:700;color:var(--dim)}
  /* Chỉ icon và con số, giấu chữ. Bốn nút kèm chữ làm hàng này chật trên điện thoại.
     `title` + `aria-label` vẫn giữ tên nút: display:none xoá chữ khỏi CẢ trình đọc
     màn hình, nên không có aria-label thì nút thành vô danh với người khiếm thị. */
  .post .pact .pl{display:none}
  .post .pact{gap:5px}
  .post .pact svg{width:17px;height:17px}
  .post .pact .pn:empty{display:none}
  .post .pact.on .pn{color:inherit}

  /* Khung bình luận — mở ra ngay dưới thẻ */
  /* Xem trước bình luận ngay trên feed — không có ô nhập, muốn viết thì bấm mở. */
  .post .pcmprev{border-top:1px solid var(--line);padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px}
  .post .pcmall{align-self:flex-start;background:none;border:0;box-shadow:none;padding:0 0 2px;
    color:var(--dim);font-size:12px;font-weight:700;cursor:pointer}
  .post .pcmall:hover{color:var(--accent-2);text-decoration:underline;transform:none;filter:none}
  .post .pcmprev .pcm{font-size:12.5px;line-height:1.45;color:var(--fg);word-break:break-word}
  .post .pcmprev .pcm b{color:var(--accent);font-weight:700;margin-right:4px}
  .post .pcmts{border-top:1px solid var(--line);padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px}
  .post .pcmlist{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
  .post .pcm{font-size:12.5px;line-height:1.45;color:var(--fg);word-break:break-word}
  .post .pcm b{color:var(--accent);font-weight:700;margin-right:4px}
  .post .pcmnone{color:var(--dim)}
  .post .pcmbar{display:flex;gap:6px}
  .post .pcmin{flex:1 1 auto;min-width:0;background:var(--surface-2);border:1px solid var(--line);
           border-radius:8px;padding:7px 9px;color:var(--fg);font-size:12.5px}
  .post .pcmin:disabled{opacity:.6}
  .post .pcmsend{flex:none;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:650;cursor:pointer}
  /* Nút chuyển lưới <-> bài đăng */
  .vsw{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);
       border-radius:10px;padding:2px;flex:none}
  .vb{background:transparent;border:0;box-shadow:none;color:var(--dim);border-radius:8px;padding:6px 9px;display:grid;place-items:center}
  .vb:hover:not(:disabled){color:var(--text);transform:none;filter:none}
  .vb.on{background:var(--grad);color:#fff}
  .vb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .cstat{color:var(--dim);font-size:11.5px;font-weight:600;white-space:nowrap}
  button.sm{padding:7px 13px;font-size:12.5px;border-radius:9px;box-shadow:none}
  .tag{position:absolute;top:9px;right:9px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
  .tag.tl{left:9px;right:auto}
  /* The type badge sits on top of ARTWORK — any artwork. A tinted-transparent chip
     (green on 14% green) vanished over the light backgrounds people actually mint.
     So: dark glass + white type for guaranteed contrast, and the colour moves to a
     small glowing dot that still says sale / auction / rental at a glance. */
  .badge{position:absolute;top:10px;left:10px;z-index:2;--dot:var(--green);
    display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:10px;
    font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#fff;
    background:rgba(8,9,14,.58);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
    border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 14px -5px rgba(0,0,0,.75)}
  .badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dot);box-shadow:0 0 7px var(--dot);flex:none}
  .badge.sale{--dot:var(--green)} .badge.auc{--dot:var(--auc)} .badge.rent{--dot:var(--rent)}
  .badge.ok{--dot:var(--green)} .badge.bad{--dot:var(--red)}
  .flag{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-2);color:var(--mute);
        border-radius:9px;padding:6px 11px;font-size:12px;font-weight:600;box-shadow:none;cursor:pointer;transition:.12s}
  .flag:hover:not(:disabled){border-color:var(--red);color:var(--red);background:rgba(255,93,115,.07);transform:none;filter:none}
  .cd{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.2px}
  .cd.cd-soon{color:var(--amber)} .cd.cd-done{color:var(--red)}
  /* Two peer actions belong side by side; inline-block buttons wrapped the second
     one onto its own line on a phone, which reads as "Buy" being the only real
     option and "Make an offer" an afterthought. */
  .md{font-size:14px;line-height:1.65;color:var(--dim);overflow-wrap:anywhere}
  .md h3,.md h4,.md h5{color:var(--text);margin:14px 0 6px;line-height:1.3}
  .md h3{font-size:17px} .md h4{font-size:15px} .md h5{font-size:13.5px}
  .md p{margin:0 0 9px}
  .md b{color:var(--text)}
  .md ul,.md ol{margin:0 0 9px;padding-left:20px}
  .md li{margin:3px 0}
  .md a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid rgba(255,154,61,.3)}
  .md a:hover{border-bottom-color:var(--accent-2)}
  .md code{background:var(--surface-3);border-radius:5px;padding:1px 5px;font-family:var(--mono);font-size:12.5px;color:var(--text)}
  .md pre{background:#0b0d13;border:1px solid var(--line-2);border-radius:10px;padding:12px;overflow:auto;margin:0 0 10px}
  .md pre code{background:none;padding:0;font-size:12px;line-height:1.5}
  .md blockquote{margin:0 0 10px;padding:6px 0 6px 14px;border-left:3px solid var(--accent);color:var(--mute)}
  .md blockquote p{margin:0}
  .md hr{border:0;border-top:1px solid var(--line);margin:14px 0}
  .md .md-img{max-width:100%;border-radius:10px;margin:6px 0;display:block}
  .gstrip{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .gthumb{width:52px;height:52px;padding:0;border-radius:9px;overflow:hidden;background:var(--surface-3);
          border:2px solid transparent;box-shadow:none;cursor:pointer;flex:none}
  .gthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .gthumb.on{border-color:var(--accent)}
  .gthumb:hover:not(:disabled){transform:none;filter:brightness(1.12)}
  .btnrow{display:flex;gap:8px;flex-wrap:nowrap;align-items:stretch}
  .btnrow button{flex:0 1 auto;min-width:0;white-space:nowrap}
  @media(max-width:600px){ .btnrow button{padding:11px 12px;font-size:13px} }
  @media(max-width:380px){ .btnrow button{padding:10px 9px;font-size:12px} }
  .repwarn{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;border-radius:10px;font-size:12.5px;
           background:rgba(255,180,84,.10);border:1px solid rgba(255,180,84,.32);color:var(--amber)}
  .rsn{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;margin:0 -4px 2px;border-radius:10px;cursor:pointer;
       font-size:13.5px;font-weight:400;color:var(--text);text-transform:none;letter-spacing:0;line-height:1.45}
  .rsn:hover{background:var(--surface-2)}
  .rsn input{margin:2px 0 0;accent-color:var(--red);flex:none;
             width:16px;height:16px;min-width:16px;padding:0;border:0;background:none;border-radius:0}
  .rsn>span{flex:1;min-width:0}   /* min-width:0 để chữ dài xuống dòng bình thường, không đẩy tràn */
  .rsn .rd{font-size:11.5px;font-weight:400;color:var(--mute);margin-top:3px;line-height:1.4}
  .modrow{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin-bottom:8px}
  .modrow .mt{width:52px;height:52px;border-radius:10px;background:var(--surface-3);display:grid;place-items:center;overflow:hidden;flex:none}
  .modrow .mt img,.modrow .mt video{width:100%;height:100%;object-fit:cover}
  .modrow .mi{flex:1;min-width:0}
  .pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
  .pill.sale{background:rgba(47,217,122,.14);color:var(--green)} .pill.auc{background:rgba(139,125,255,.16);color:var(--auc)} .pill.rent{background:rgba(0,212,255,.14);color:var(--rent)}
  .pill.ok{background:rgba(47,217,122,.14);color:var(--green)} .pill.bad{background:rgba(255,93,115,.14);color:var(--red)}
  .listing{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;transition:border-color .15s}
  .listing:hover{border-color:var(--line-2)}
  .lrow{display:flex;gap:14px;align-items:flex-start}
  .lthumb{width:76px;height:76px;flex:none;border-radius:12px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;cursor:pointer}
  .lthumb img,.lthumb video{width:100%;height:100%;object-fit:cover}
  .lbody{flex:1;min-width:0}
  .buycard{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:0;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
  .bmcol{display:flex;flex-direction:column;min-width:0}
  .bmcol .gstrip{padding:10px 10px 0;margin-top:0}
  .bmedia{aspect-ratio:1;position:relative;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:46px}
  .bmedia .mc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .bmedia img,.bmedia video{width:100%;height:100%;object-fit:cover}
  .binfo{padding:26px;display:flex;flex-direction:column}
  .bname{font-size:22px;font-weight:800;letter-spacing:-.4px}
  /* Desktop has the width for it: put "pick an NFT" and the listing form on ONE row,
     so the form stays in view while you click through the grid instead of scrolling
     past it. Below 980px they fall back to stacking. */
  /* Desktop gets the real estate: 1180px was sized for a one-column page. With a
     filter rail on the left the grid needs the room, and the nav widens with it so
     the logo stays aligned with the content edge. */
  @media(min-width:1280px){
    .wrap,.nav-in{max-width:1560px}
  }

  /* ── EXPLORE: filter rail + results ──────────────────────────────────────── */
  .mkt-layout{display:block}
  .rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 15px}
  .rail .fs{padding:14px 0;border-top:1px solid var(--line)}
  .rail .fs:first-of-type{border-top:0;padding-top:4px}
  .rail .ft{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--mute);margin:0 0 9px}
  .srch{position:relative}
  .srch input{width:100%;padding-right:74px}
  .srch .sx{position:absolute;right:42px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--mute);font-size:15px;padding:2px 5px;border-radius:6px}
  .srch .sx:hover{background:var(--surface-3);color:var(--text)}
  .srch .sgo{position:absolute;right:6px;top:50%;transform:translateY(-50%);
             display:inline-flex;align-items:center;justify-content:center;
             width:30px;height:30px;padding:0;border-radius:9px;cursor:pointer;
             background:var(--grad);border:0;color:#fff;box-shadow:none}
  .srch .sgo:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-50%)}
  .srch .sgo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
                 stroke-linecap:round;stroke-linejoin:round}
  .fopt{display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;border-radius:9px;cursor:pointer;font-size:13.5px;user-select:none;transition:.12s}
  .fopt:hover{background:var(--surface-2)}
  .fopt input{margin:0;accent-color:var(--accent);width:15px;height:15px;flex:none}
  .fopt .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fopt .ct{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;background:var(--surface-3);border-radius:999px;padding:1px 7px;flex:none}
  .fopt.off{opacity:.42}
  .flist{max-height:194px;overflow:auto;margin:0 -4px;padding:0 4px}
  .prow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px}
  .prow span{color:var(--mute);font-size:12px}
  .prow input{padding:8px 10px;font-size:13px}
  .fhint{font-size:11px;color:var(--mute);margin-top:8px;line-height:1.45}
  .fclear{width:100%;margin-top:6px;background:transparent;border:1px solid var(--line-2);color:var(--dim);font-size:12.5px;padding:9px}
  .fclear:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
  .fclear:disabled{opacity:.35}
  .railtog{display:none;width:100%;justify-content:center;gap:8px;align-items:center;
           background:var(--surface);border:1px solid var(--line-2);color:var(--dim);box-shadow:none;font-size:13.5px}
  .railtog:hover:not(:disabled){background:var(--surface-2);color:var(--text);transform:none}
  .resbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .rescount{font-size:13.5px;color:var(--dim);font-variant-numeric:tabular-nums}
  .rescount b{color:var(--text)}
  .chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
  /* max-width + min-width:0 để chip KHÔNG đẩy rộng hơn màn hình khi nội dung dài
     (tìm theo token id là chuỗi hex 66 ký tự). Nhãn tự cắt bằng ba chấm, còn
     nút × và nút chia sẻ luôn giữ nguyên chỗ. */
  .chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:4px 8px 4px 11px;font-size:12px;color:var(--dim);white-space:nowrap;max-width:100%;min-width:0}
  .chip b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .chip i{cursor:pointer;font-style:normal;opacity:.6;padding:0 3px;border-radius:50%}
  .chip i:hover{opacity:1;color:var(--red)}
  /* Nút CHIA SẺ đứng riêng cạnh chip. Trước đây là biểu tượng 🔗 nhét trong chip —
     hình mắt xích đọc ra "sao chép liên kết", trong khi hành động thật là mở bảng
     chia sẻ của hệ điều hành (navigator.share), chỉ khi không có mới rơi về copy. */
  .chipsh{display:inline-flex;align-items:center;justify-content:center;flex:none;
          width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;
          background:var(--surface-2);border:1px solid var(--line-2);color:var(--dim)}
  .chipsh:hover:not(:disabled){background:var(--surface-3);color:var(--accent-2);transform:none;filter:none}
  /* Nút ⋮ gom sao chép + chia sẻ. CỐ Ý không dùng class .cp — có một listener
     capture-phase bắt mọi .cp để xử lý sao chép, dính vào là bấm ⋮ sẽ copy luôn. */
  /* Hạng 1-2-3: huy chương vàng/bạc/đồng. Dùng gradient kim loại + số bên trong
     thay vì emoji 🥇 — emoji mỗi hệ điều hành vẽ một kiểu và lạc tông với bộ
     icon SVG của trang. Giữ đúng 22px như ô số để các hàng vẫn thẳng cột. */
  .rk{width:26px;display:inline-block;text-align:center;color:var(--dim);font-variant-numeric:tabular-nums}
  .mdl{width:26px;height:26px;flex:none;display:block}
  .mdl.g1{--mm:url(#mg1)} .mdl.g2{--mm:url(#mg2)} .mdl.g3{--mm:url(#mg3)}
  .kbb{display:inline-flex;align-items:center;justify-content:center;flex:none;
       width:20px;height:20px;padding:0;margin-left:6px;border-radius:50%;
       background:transparent;border:1px solid var(--line);color:var(--dim);
       cursor:pointer;font-size:15px;line-height:1;box-shadow:none}
  .kbb:hover:not(:disabled){background:var(--surface-2);color:var(--text);transform:none;filter:none}
  .kbmenu{position:fixed;z-index:95;display:none;min-width:190px;padding:6px;
          border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow)}
  .kbmenu.show{display:block}
  .kbmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;
                 border-radius:9px;background:transparent;color:var(--text);font-size:13px;
                 text-align:left;cursor:pointer;box-shadow:none}
  .kbmenu button:hover:not(:disabled){background:var(--surface-3);transform:none;filter:none}
  .kbmenu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
              stroke-linecap:round;stroke-linejoin:round;flex:none}
  .chipsh svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
              stroke-linecap:round;stroke-linejoin:round}
  button.cp.csh:hover{color:var(--acc)}
  button.cp.csh svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;
                    stroke-linecap:round;stroke-linejoin:round}
  .sortsel{width:auto;min-width:172px;padding:8px 12px;font-size:13px;margin-left:auto;flex:none}
  .nstat{font-size:10.5px;color:var(--mute);margin-top:3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nstat.live{color:var(--green)} .nstat.warn{color:var(--amber)}
  .cp{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin-left:6px;
      vertical-align:middle;background:var(--surface-3);border:1px solid var(--line);border-radius:6px;color:var(--dim);
      font-size:11px;line-height:1;box-shadow:none;font-weight:600;cursor:pointer;transition:.12s;flex:none}
  .cp:hover:not(:disabled){background:var(--surface-2);color:var(--text);transform:none;filter:none}
  .cp.done{color:var(--green);border-color:var(--green);background:transparent}
  .pick{display:flex;align-items:center;gap:9px;padding:7px 8px;margin:0 -6px 2px;border-radius:10px;cursor:pointer;transition:.12s;border:1px solid transparent}
  .pick:hover{background:var(--surface-2)}
  .pick.on{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}
  .pick .tb{width:34px;height:34px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;font-size:14px;flex:none;overflow:hidden}
  .pick .tb img,.pick .tb video{width:100%;height:100%;object-fit:cover}
  .pick .pm{flex:1;min-width:0}
  .pick .pm .t{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick .pm .s{font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick .pp{font-size:11.5px;font-weight:700;white-space:nowrap;text-align:right}
  .pick .pp small{display:block;font-weight:500;color:var(--mute);font-size:10px}
  @media(min-width:980px){ .rail.hide-sm{display:block} }
  @media(min-width:980px){
    .mkt-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:22px;align-items:start}
    .rail{position:sticky;top:88px;max-height:calc(100vh - 108px);overflow:auto}
  }
  @media(max-width:979px){
    .railtog{display:flex;margin-bottom:12px}
    .rail{margin-bottom:14px}
    .rail.hide-sm{display:none}
    /* count and sort share the row; the filter chips are the part that wraps */
    .resbar{flex-wrap:wrap;gap:8px}
    .rescount{flex:none}
    .sortsel{margin-left:auto;width:auto;min-width:150px;flex:none}
    .chips{order:3;flex-basis:100%}
  }
  @media(min-width:980px){
    #tab-sell .panel-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
    /* Leaderboard: 2 bảng ngang nhau, chia đôi. Xếp dọc thì phải cuộn mới
       thấy bảng thứ hai, mất hẳn ý nghĩa đối chiếu mua/bán. */
    #tab-top .panel-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
    #tab-top .panel-row .panel+.panel{margin-top:0}
    #tab-sell .panel-row .panel+.panel{margin-top:0}
    #tab-sell .panel-row #listPanel{position:sticky;top:88px}
  }
  @media(max-width:600px){.buycard{grid-template-columns:1fr}.bmedia{aspect-ratio:16/10}}
  .listing .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
  .price{font-size:19px;font-weight:800;letter-spacing:-.3px} .price small{font-size:12px;font-weight:600;color:var(--dim);margin-left:2px}
  .kv{font-size:13.5px;color:var(--dim)} .kv b{color:var(--text);font-weight:700}
  .mono{font-family:var(--mono);font-size:12px;word-break:break-all}
  .muted{color:var(--mute);font-size:13px}
  .sub{color:var(--mute);font-size:13.5px;margin-bottom:10px}
  .note{background:linear-gradient(90deg,rgba(255,154,61,.09),transparent);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:11px 14px;font-size:13px;color:var(--dim);margin-bottom:18px}
  .log{font-family:var(--mono);font-size:12px;white-space:pre-wrap;color:var(--dim);margin-top:12px;max-height:170px;overflow:auto}
  .ok{color:var(--green)} .err{color:var(--red)} .info{color:var(--accent-2)}
  .empty{text-align:center;padding:44px 20px;color:var(--mute)} .empty .ico{font-size:38px;margin-bottom:10px}
  .ov{position:fixed;inset:0;background:rgba(4,5,9,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
  .ov.show{display:flex}
  .modal.item{max-width:min(1180px, 94vw);max-height:calc(100vh - 72px);max-height:calc(100svh - 72px);overflow:auto;position:relative;padding:22px}
  .iclose{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;padding:0;border-radius:50%;
          background:var(--surface-3);border:1px solid var(--line);color:var(--dim);font-size:19px;line-height:1;box-shadow:none}
  .iclose:hover:not(:disabled){background:var(--surface-2);color:var(--text);transform:none;filter:none}
  @media(max-width:600px){
    .navic.navsrch{display:grid}
    .railtog{display:none!important}          /* đã có icon trên thanh đầu, bỏ nút to */
    #tab-explore .hcap{display:none}          /* tiêu đề + mô tả: thừa, tab bar đã nói rõ đang ở đâu */
    /* Khung CHI TIẾT NFT: full chiều ngang màn hình, chừa đúng 36px trên và 36px
       dưới (cộng vùng an toàn của máy có thanh home). Chỉ nhắm #itemOv nên các
       modal khác (Report / Offer / PIN) giữ nguyên bề rộng 380px như cũ. */
    #itemOv, #profOv{padding:36px 0 calc(36px + env(safe-area-inset-bottom))}
    #itemOv .modal.item, #profOv .modal.item{max-width:none;width:100%;padding:16px;border-radius:16px;
      max-height:calc(100vh - 72px);
      max-height:calc(100svh - 72px - env(safe-area-inset-bottom))}
    .ov{padding:10px} .modal{max-height:calc(100vh - 20px);max-height:calc(100svh - 24px - env(safe-area-inset-bottom))} .modal.item{padding:16px;max-height:calc(100vh - 150px);max-height:calc(100svh - 150px - env(safe-area-inset-bottom))} }
  .modal{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:20px;max-width:380px;width:100%;box-shadow:var(--shadow);max-height:calc(100vh - 40px);max-height:calc(100svh - 40px);overflow:auto;-webkit-overflow-scrolling:touch}
  .modal h3{margin:0 0 14px;font-size:17px}
  .detail{max-width:840px;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:auto}
  /* Thanh đầu DÍNH: tên NFT + nút đóng luôn thấy dù cuộn tới đâu */
  .dhead{grid-column:1/-1;position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;
         padding:11px 12px 11px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
  .dhead .dht{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.2px;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dhx{flex:none;width:32px;height:32px;padding:0;border-radius:50%;background:var(--surface-3);
              border:1px solid var(--line);color:var(--dim);font-size:19px;line-height:1;box-shadow:none}
  .dhx:hover:not(:disabled){background:var(--surface-2);color:var(--text);transform:none;filter:none}
  /* Xem ảnh full — nổi TRÊN popup chi tiết (.ov z-index 90) */
  /* Modal report: 6 lý do + đoạn giải thích khá dài trên điện thoại -> cho thân cuộn,
     tiêu đề và 2 nút DÍNH lại, khỏi phải cuộn xuống đáy mới bấm được "Send report". */
  .modal.rep{padding:0}
  .modal.rep .rhead{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
                    padding:14px 12px 12px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
  .modal.rep .rhead h3{flex:1;min-width:0;margin:0}
  .modal.rep .rbody{padding:14px 20px 4px}
  .modal.rep .rfoot{position:sticky;bottom:0;z-index:2;background:var(--surface);border-top:1px solid var(--line);
                    padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .modal.rep .rfoot .row>*{min-width:0}   /* min-width:150px mặc định làm 2 nút xuống dòng trên máy hẹp */
  .modal.rep .rfoot .log{margin:0 0 10px}
  /* Trên mobile chỉ có chấm radio nhỏ báo lựa chọn, :hover không tồn tại -> tô nền dòng đang chọn */
  .rsn:has(input:checked){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
  /* Chân trang pháp lý */
  .lgl{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);color:var(--mute);font-size:12px}
  .lgl .lnk{display:flex;flex-wrap:wrap;gap:9px 18px;margin-bottom:11px}
  .lgl a{color:var(--dim);text-decoration:none}
  .lgl a:hover{color:var(--text);text-decoration:underline}
  .lgl p{margin:0;line-height:1.6;max-width:74ch}
  .dmedia.zoomable{cursor:zoom-in}
  .zoomov{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;
          background:rgba(0,0,0,.94);cursor:zoom-out;-webkit-tap-highlight-color:transparent}
  .zoomov.show{display:flex}
  .zoomov img{max-width:100vw;max-height:100vh;max-height:100svh;object-fit:contain;display:block}
  .zoomnav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;cursor:pointer;border:0;
    width:52px;height:52px;border-radius:50%;background:rgba(20,22,30,.72);color:#fff;font-size:30px;
    line-height:1;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
  .zoomov.multi .zoomnav{display:flex}
  .zoomnav:hover{background:rgba(40,44,56,.95);transform:translateY(-50%);filter:none}
  .zprev{left:12px} .znext{right:12px}
  .zcount{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
    z-index:2;padding:5px 12px;border-radius:999px;background:rgba(20,22,30,.72);color:#fff;
    font-size:13px;font-family:var(--mono);display:none;backdrop-filter:blur(6px)}
  .zoomov.multi .zcount{display:block}
  /* Nút phóng to — đặt đối diện nút đóng cho cân */
  .zzoom{position:fixed;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:2;cursor:pointer;
         height:38px;min-width:46px;padding:0 12px;border-radius:999px;background:rgba(22,24,32,.92);
         border:1px solid var(--line-2);color:#fff;font-size:12px;font-weight:800;letter-spacing:.6px;
         font-family:var(--mono);line-height:1;box-shadow:none}
  .zzoom:hover:not(:disabled){background:rgba(40,44,56,.95);transform:none;filter:none}
  /* Đã phóng to: ảnh về kích thước gốc, lớp phủ cuộn được để kéo xem chi tiết.
     Trang này đặt user-scalable=0 nên KHÔNG pinch-zoom được — nút này thay thế. */
  /* Phóng to bằng transform: chụm 2 ngón để zoom MƯỢT TỪNG NẤC, 1 ngón để kéo.
     Trang đặt user-scalable=0 nên trình duyệt KHÔNG tự pinch được -> tự xử lý
     bằng touch event, và touch-action:none để trình duyệt không giành cử chỉ. */
  .zoomov{touch-action:none}
  .zoomov img{transform-origin:center center;will-change:transform}
  .zoomov img.zsnap{transition:transform .22s ease-out}
  .zoomov.zoomed{cursor:grab}
  .zoomov.zoomed .zoomnav,.zoomov.zoomed .zcount{display:none}
  @media (prefers-reduced-motion: reduce){ .zoomov img.zsnap{transition:none} }

  @media(max-width:640px){
    .zoomnav{width:44px;height:44px;font-size:26px}
    /* Đưa 2 nút chuyển ảnh XUỐNG ĐÁY, đứng hai bên bộ đếm — ngón cái với tới được,
       và không còn che mất hai mép ảnh như khi nằm giữa hai bên. */
    .zoomov.multi .zoomnav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}
    .zoomnav:hover{transform:none}
    .zprev{left:calc(50% - 86px)}  .znext{right:calc(50% - 86px)}
    .zcount{bottom:calc(23px + env(safe-area-inset-bottom))}
  }
  .zoomx{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2;cursor:pointer;
         width:38px;height:38px;padding:0;border-radius:50%;background:rgba(22,24,32,.92);
         border:1px solid var(--line-2);color:#fff;font-size:21px;line-height:1;box-shadow:none}
  .zoomx:hover:not(:disabled){background:rgba(40,44,56,.95);transform:none;filter:none}
  .dmedia{aspect-ratio:1;background:#000;display:flex;align-items:center;justify-content:center;font-size:60px;overflow:hidden}
  .dmedia img,.dmedia video{width:100%;height:100%;object-fit:contain}
  .dside{padding:24px;display:flex;flex-direction:column}
  #dInfo .dname{font-size:22px;font-weight:800;letter-spacing:-.4px}
  .drow{color:var(--dim);font-size:13px;margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  @media(max-width:720px){.detail{grid-template-columns:1fr;max-width:420px}.dmedia{aspect-ratio:16/10}}
  @media(max-width:420px){
    .brand .mk{display:none}                 /* "NFTs" + logo is enough this narrow */
    .brand{font-size:15px} .brand img{width:22px;height:22px}
    .navic{width:30px;height:30px} .nav-i{width:17px;height:17px}
    .navic.wpill{width:auto;padding:0 8px 0 7px;gap:5px} .navic .bal{font-size:11px} .bellBtn{width:30px;height:30px;font-size:13px}
    .navlinks{gap:4px}
    .cp{width:18px;height:18px;margin-left:4px}
  }
  @media(max-width:600px){
    /* 36px CỐ ĐỊNH không đủ cho máy có Dynamic Island (~59px) -> nội dung chui
       vào thanh trạng thái. Bám theo vùng an toàn thật, tối thiểu 14px. */
    .nav-in{flex-wrap:wrap;gap:8px;
            padding:max(4px, calc(env(safe-area-inset-top) - 2px)) 14px 12px 10px}
    .seg{order:3;flex-basis:100%;overflow-x:auto}
    .brand{font-size:16px;gap:7px} .brand img{width:24px;height:24px}
    .navic{width:32px;height:32px} .nav-i{width:18px;height:18px}
    .navic.wpill{width:auto;padding:0 9px 0 8px;gap:6px} .navic .bal{font-size:11.5px} .bellBtn{width:32px;height:32px;font-size:14px}
    .nav-in{flex-wrap:nowrap;position:relative}
    .brand{flex:none;margin-right:auto}
    /* Navigation belongs where the thumb is. A dropdown hid the current section
       behind a tap; a scrolling strip hid whatever was off-screen. A fixed bottom
       bar shows all five at once and never moves. */
    .seg{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;z-index:70;transform:translateZ(0);
         gap:0;padding:8px 4px max(0px, calc(env(safe-area-inset-bottom) - 10px));border:0;border-top:1px solid var(--line);
         border-radius:0;background:var(--bar);backdrop-filter:blur(var(--bar-blur));-webkit-backdrop-filter:blur(var(--bar-blur));box-shadow:0 -8px var(--bar-sh)}
    .seg .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
              gap:3px;padding:3px 2px;border-radius:12px;font-size:10.5px;font-weight:600;letter-spacing:.1px}
    .seg .tab .ti{display:block;width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
                  stroke-linecap:round;stroke-linejoin:round}
    .seg .tab .tl{display:none}
    .seg .tab .ts{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    /* the pill background would look wrong stretched over a tab-bar cell */
    .seg .tab.on{background:transparent;color:var(--accent-2);box-shadow:none}
    .seg .tab.on .ti{stroke-width:2.1}
    /* Chừa chỗ cho thanh tab CỐ ĐỊNH ở đáy. Trước đây có 2 luật .wrap liền nhau:
   luật sau dùng shorthand 'padding' nên GHI ĐÈ padding-bottom:96px xuống 80px,
   trong khi thanh cao ~63px + safe-area (iPhone tới 34px) = tới ~97px
   -> mục CUỐI trong danh sách (My Listings) bị thanh che mất nút thao tác. */
    .wrap{padding:18px 14px calc(100px + env(safe-area-inset-bottom))}.hcap h1{font-size:22px}.grid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:12px}}
  /* Thanh tiến trình giao dịch, nổi ở đáy màn hình. Trên mobile thanh tab đã dán
     đáy (cao ~63px + vùng an toàn iPhone tới 34px) nên phải nâng lên khỏi nó, không
     thì che mất Home/Explore. */
  .txbar{position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
    bottom:18px;z-index:120;max-width:min(560px,calc(100vw - 24px));
    display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;
    background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow);
    font-size:13px;font-weight:600;color:var(--text);opacity:0;
    transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s;pointer-events:none}
  .txbar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
  .txbar .txtx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .txbar.ok{border-color:rgba(56,224,166,.5)} .txbar.ok .txok{color:var(--green);font-weight:900}
  .txbar.bad{border-color:rgba(255,93,115,.5)} .txbar.bad .txbad{color:var(--red);font-weight:900}
  .txbar .txx{background:none;border:0;box-shadow:none;color:var(--dim);padding:0 0 0 4px;
    font-size:14px;cursor:pointer;flex:none}
  .txbar .txsp{width:14px;height:14px;flex:none;border-radius:50%;
    border:2px solid var(--line-2);border-top-color:var(--accent);animation:txspin .7s linear infinite}
  @keyframes txspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ .txbar .txsp{animation:none} .txbar{transition:none} }
  @media(max-width:600px){ .txbar{bottom:calc(76px + env(safe-area-inset-bottom))} }
  .hide{display:none!important}
  /* Seller address as an affordance, not a label — it filters the grid. */
  .selbtn{background:none;border:0;padding:0;font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
          color:var(--accent,#ff9a3d);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .selbtn:hover{opacity:.8}
  .selbtn:focus-visible{outline:2px solid var(--accent,#ff9a3d);outline-offset:2px;border-radius:3px}
  .nstat.legacy{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}