/* Ghiền — mobile-first */
:root{
  --pink:#e5486f; --pink-d:#c93357; --bg:#fff7f9; --ink:#2b2b2b;
  --muted:#8a8a8a; --card:#ffffff; --chip:#ffe3ea; --line:#f3d9e0; --radius:14px;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  display:grid;grid-template-rows:auto 1fr auto;min-height:100%;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;
  align-items:center;padding:.7rem 1rem;background:#fff;border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:1.5rem;color:var(--pink);text-decoration:none}
.topbar nav{display:flex;gap:.1rem;align-items:center}
.topbar nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.wrap{max-width:720px;width:100%;margin:0 auto;padding:1rem .9rem 3rem;box-sizing:border-box}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:.8rem .5rem 0}
.foot a{color:var(--muted)}
h1{font-size:1.7rem;margin:.5rem 0} h2{font-size:1.3rem}
.btn{display:inline-block;background:var(--pink);color:#fff;border:0;border-radius:999px;
  padding:.65rem 1.4rem;font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--pink-d)}
.btn.ghost{background:#fff;color:var(--pink);border:2px solid var(--pink)}
.btn.small{padding:.4rem .9rem;font-size:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;margin:.8rem 0}
.flash{background:#fff3f6;border:1px solid var(--pink);border-radius:10px;
  padding:.5rem .9rem;margin:.6rem 0;color:var(--pink-d)}
.err{background:#fdecea;border:1px solid #e89aa8;color:#a12040;border-radius:10px;
  padding:.5rem .9rem;margin:.6rem 0}
label{display:block;margin:.55rem 0 .2rem;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],select,textarea{width:100%;padding:.6rem .7rem;border:1px solid #ddd;
  border-radius:10px;font-size:1rem;background:#fff}
textarea{min-height:90px;resize:vertical}
.hero{text-align:center;padding:2.5rem .5rem}
.hero p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-align:center;padding-bottom:.7rem}
.person img{width:100%;height:190px;object-fit:cover;background:#fbeef2}
.person .noimg{width:100%;height:190px;background:#fbeef2;display:flex;align-items:center;
  justify-content:center;font-size:3rem}
.person h3{margin:.4rem 0 .1rem;font-size:1.05rem}
.person .meta{color:var(--muted);font-size:.85rem;margin:0 .5rem .5rem}
.rowbtns{display:flex;gap:.4rem;justify-content:center;padding:0 .4rem}
.rowbtns>form{flex:1 1 0;min-width:0}
.rowbtns .btn{padding:.45rem .8rem;font-size:.9rem;width:100%;white-space:nowrap}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem;margin-bottom:.8rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:end}
.filters label{margin:0;font-size:.85rem;font-weight:600}
.filters input,.filters select{width:auto;padding:.45rem .5rem;font-size:.9rem}
.chatbox{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  height:52vh;overflow-y:auto;padding:.8rem;margin-bottom:.6rem}
.msg{max-width:80%;padding:.5rem .8rem;border-radius:14px;margin:.3rem 0;word-wrap:break-word}
.msg.mine{background:var(--pink);color:#fff;margin-left:auto}
.msg.theirs{background:var(--chip)}
.msg small{display:block;font-size:.7rem;opacity:.7}
.sendrow{display:flex;gap:.5rem}
.sendrow[hidden]{display:none}
.sendrow input{flex:1}
.photos{display:flex;flex-wrap:wrap;gap:.6rem}
.photos figure{margin:0;position:relative;width:110px}
.photos img{width:110px;height:130px;object-fit:cover;border-radius:10px}
.photos button{position:absolute;top:2px;right:2px}
table.admin{width:100%;border-collapse:collapse;font-size:.85rem}
table.admin th,table.admin td{border:1px solid var(--line);padding:.35rem;text-align:left}
.badge{display:inline-block;background:var(--chip);color:var(--pink-d);border-radius:999px;
  padding:.1rem .6rem;font-size:.8rem;font-weight:700}
.muted{color:var(--muted);font-size:.9rem}
.center{text-align:center}
@media(min-width:640px){ .wrap{padding:1.5rem} }

/* ===== Landing page (Ghiền) — chỉ dùng cho trang chủ ===== */
body{overflow-x:hidden}
.lp-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:1rem;padding-right:1rem}
.lp-hero{background:linear-gradient(135deg,#e5486f 0%,#b81e4e 60%,#8f1239 100%);color:#fff;text-align:center;padding:3.5rem 1rem 3rem}
.lp-hero h1{font-size:2rem;margin:0 0 .9rem;line-height:1.3;color:#fff}
.lp-hero .lead{font-size:1.05rem;opacity:.95;max-width:36rem;margin:0 auto 1.6rem;color:#fff}
.lp-hero .btn{background:#fff;color:#c93357;font-size:1.05rem;padding:.8rem 2rem}
.lp-hero .btn:hover{background:#ffe9ef}
.lp-hero .btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)}
.lp-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;margin-top:1.8rem;font-size:.92rem;opacity:.93}
.lp-section{padding:2.6rem 0 .4rem;text-align:center}
.lp-section h2{font-size:1.55rem;margin-bottom:.3rem}
.lp-section .sub{color:var(--muted);max-width:36rem;margin:0 auto 1.5rem}
.lp-steps{display:grid;grid-template-columns:1fr;gap:1rem;text-align:left}
.lp-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.4rem;box-shadow:0 6px 18px rgba(229,72,111,.08)}
.lp-step .num{display:inline-flex;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pink);color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.7rem}
.lp-step h3{margin:.2rem 0 .4rem;font-size:1.1rem}
.lp-step p{margin:0;color:var(--muted);font-size:.95rem}
.lp-feats{display:grid;grid-template-columns:1fr;gap:1rem;text-align:left}
.lp-feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.3rem;display:flex;gap:.9rem;align-items:flex-start}
.lp-feat .ic{font-size:1.7rem;line-height:1.2}
.lp-feat h3{margin:0 0 .3rem;font-size:1.05rem}
.lp-feat p{margin:0;color:var(--muted);font-size:.93rem}
.lp-cta{background:linear-gradient(135deg,#e5486f,#8f1239);border-radius:20px;color:#fff;text-align:center;padding:2.6rem 1.5rem;margin:2.4rem 0 1rem}
.lp-cta h2{color:#fff;margin:0 0 .6rem}
.lp-cta p{opacity:.92;margin:0 0 1.4rem}
.lp-cta .btn{background:#fff;color:#c93357}
.lp-cta .btn:hover{background:#ffe9ef}
@media(min-width:640px){
  .lp-hero{padding:4.5rem 1rem 4rem}
  .lp-hero h1{font-size:2.7rem}
  .lp-steps{grid-template-columns:repeat(3,1fr)}
  .lp-feats{grid-template-columns:repeat(2,1fr)}
}

/* Hero có ảnh */
.lp-hero-grid{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.lp-hero-photos{position:relative;max-width:520px;width:100%;margin:0 auto 1rem}
.lp-hero-photos .ph-main{width:100%;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.28);display:block}
.lp-hero-photos .ph-a,.lp-hero-photos .ph-b{position:absolute;width:26%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 10px 25px rgba(0,0,0,.28)}
.lp-hero-photos .ph-a{left:-3%;bottom:-7%}
.lp-hero-photos .ph-b{right:-2%;top:-7%}
@media(min-width:900px){
  .lp-hero-grid{grid-template-columns:1.05fr .95fr;text-align:left}
  .lp-hero-text{text-align:left}
  .lp-hero .lead{margin:0 0 1.6rem}
  .lp-trust{justify-content:flex-start}
}

/* Logo xếp 2 dòng: Ghiền to + tagline nhỏ bên dưới */
.logo{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;align-items:center}
.logo .brand{font-weight:800;font-size:1.75rem;color:var(--pink)}
.logo .tagline{font-size:.72rem;font-weight:500;color:var(--muted);white-space:nowrap}
.logo .tagline-short{display:none;font-size:.65rem;font-weight:500;color:var(--muted);white-space:nowrap}

/* Hồ sơ v2: hàng ft/in + slogan trên thẻ khám phá */
.heightrow{display:flex;gap:.6rem;align-items:center}
.heightrow input{flex:1;min-width:0}
.heightrow .unit{font-weight:700;color:var(--muted);flex:none;margin-left:-.3rem}
.slogan{font-style:italic;color:var(--muted);font-size:.88rem;margin:.15rem .6rem .3rem;line-height:1.4}

/* Mục xếp gọn (accordion) trang hồ sơ */
details.card{padding:0;overflow:hidden}
details.card > summary{list-style:none;cursor:pointer;padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary h2{margin:0;font-size:1.15rem}
details.card > summary::after{content:"▾";color:var(--pink);font-size:1.3rem;font-weight:700;flex:none}
details.card[open] > summary::after{content:"▴"}
details.card .sec-body{padding:.2rem 1rem 1rem;border-top:1px solid var(--line)}

/* ===== Trang xem hồ sơ công khai (/u/<id>) ===== */
.pv-head{display:flex;gap:1rem;align-items:center;margin:.4rem 0 .2rem}
.pv-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;background:#fbeef2}
.pv-avatar.noimg{display:flex;align-items:center;justify-content:center;font-size:2.6rem}
.pv-avatar.clickable{cursor:pointer}
.photos img.clickable{cursor:pointer}
.photo-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.photo-preview img{width:90px;height:90px;object-fit:cover;border-radius:10px;border:1px solid #e5c9d4}
.pp-item{position:relative}
.pp-x{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
.pv-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center}
.pv-lb-wrap{position:relative;max-width:92%;max-height:92%}
.pv-lb-wrap img{max-width:100%;max-height:92vh;border-radius:8px;object-fit:contain;display:block}
.pv-lb-close{position:absolute;top:8px;right:10px;color:#fff;font-size:2rem;cursor:pointer;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.8);background:rgba(0,0,0,.4);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;z-index:2}
.pv-lb-prev,.pv-lb-next{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.2rem;cursor:pointer;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.8);background:rgba(0,0,0,.45);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;user-select:none;z-index:2}
.pv-lb-prev{left:10px}
.pv-lb-next{right:10px}
.lb-single .pv-lb-prev,.lb-single .pv-lb-next{display:none}
#pv-lightbox-img{position:relative;z-index:1;transition:opacity .22s ease;touch-action:none}
#pv-lightbox-img2{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none}
.pv-head h1{margin:0;font-size:1.5rem}
.pv-loc{color:var(--muted);font-size:.95rem;margin:.2rem 0 0}
.pv-slogan{font-style:italic;color:var(--pink-d);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:10px;padding:.6rem .9rem;margin:.9rem 0}
.pv-sec{margin:1.5rem 0 .6rem;font-size:1.15rem}
.pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media(max-width:380px){.pv-grid{gap:.4rem}.pv-cell{padding:.5rem .6rem}}
.pv-cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem}
.pv-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pv-val{display:block;margin-top:.15rem;font-weight:600}
.pv-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.pv-chip{background:var(--chip);color:var(--pink-d);border-radius:999px;padding:.28rem .85rem;font-size:.88rem;font-weight:600}
.pv-bio{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem;white-space:pre-wrap}
.pv-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 .8rem;justify-content:center;align-items:center}
.pv-actions form{margin:0}
.pv-head-main{flex:1;display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-width:0}
.pv-head-actions{display:flex;gap:.5rem;align-items:center;flex:none}
.pv-head-actions form{margin:0}
.pv-note{text-align:center}
/* link tên/avatar trong card khám phá */
.person a.plink{color:inherit;text-decoration:none;display:block}

/* Form 2 cột trang hồ sơ */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .9rem}
.field{min-width:0}
.field label{margin:.45rem 0 .15rem}
.field.full{grid-column:1/-1}
@media(max-width:380px){
  .fg{gap:.1rem .5rem}
}

/* Avatar trên thanh menu */
.nav-avatar img{width:34px;height:34px;border-radius:50%;object-fit:cover;vertical-align:middle;border:2px solid var(--line)}
.nav-avatar .noavatar{display:inline-flex;width:34px;height:34px;border-radius:50%;background:#fbeef2;align-items:center;justify-content:center;font-size:1.2rem;vertical-align:middle}
.topbar nav{align-items:center}

/* Nút đặt avatar trên ảnh */
.photos .avbtn{position:absolute;top:2px;left:2px;right:auto}
.avatar-badge{position:absolute;top:2px;left:2px;background:rgba(229,72,111,.92);color:#fff;
  font-size:.65rem;font-weight:700;border-radius:999px;padding:.1rem .45rem}

/* Thanh tiêu đề trang Hồ sơ của bạn */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.req{color:#ef4444;font-weight:700}
.typing-ind{padding:.4rem .8rem;color:#6b7280;font-size:.85rem;font-style:italic;display:flex;align-items:center;gap:.2rem}
.typing-ind span{width:.4rem;height:.4rem;border-radius:50%;background:#9ca3af;animation:tblink 1.2s infinite}
.typing-ind span:nth-child(2){animation-delay:.2s}
.typing-ind span:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.typing-ind[hidden]{display:none}
.emojipicker{position:absolute;bottom:100%;right:0;margin-bottom:.4rem;width:300px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:.6rem;display:grid;grid-template-columns:repeat(8,1fr);gap:.15rem;z-index:50;overflow:hidden}
.sendrow{position:relative}
.emojipicker[hidden]{display:none}
.emojipicker button{font-size:1.4rem;background:none;border:none;cursor:pointer;padding:.25rem;border-radius:8px;line-height:1}
.emojipicker button:hover{background:#f3f4f6}
.topbar{position:relative}
.topbar .avwrap{position:relative;display:inline-block}
#avatarmenu[hidden]{display:none}
#avatarmenu a:hover{background:var(--chip);border-radius:6px}
.topbar nav>a{padding:.15rem .2rem;border-radius:8px}
.topbar nav>a:hover{background:var(--chip)}
.nav-avatar img{width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle}
.seen-st{font-size:.6rem;color:rgba(255,255,255,.65);text-align:right;margin-top:.1rem}
.seen-st.seen{color:#fff;font-weight:600}
.checklist{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.ck-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid #e5e7eb;border-radius:10px;text-decoration:none;color:#374151}
.ck-item:hover{border-color:#a78bfa;background:#faf5ff}
.ck-box{width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}
.ck-item.done .ck-box{background:#22c55e;border-color:#22c55e}
.ck-item.done{color:#6b7280}
.ds-grid{display:flex;gap:.8rem;margin-top:.8rem;justify-content:flex-start;flex-wrap:wrap}
.ds-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;width:200px;flex-shrink:0;position:relative}
.ds-card img{width:200px;height:200px;object-fit:cover;display:block}
.ds-card .online-dot{right:6px;top:6px;bottom:auto}
.ds-card .noimg{width:200px;height:200px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:#f3f4f6}
.ds-info{padding:.6rem}
.ds-info b{font-size:.9rem}
.ds-btns{display:flex;gap:.5rem;margin-top:.5rem}
.ds-btns .btn{flex:1 1 0;padding:.45rem .3rem;font-size:.8rem;white-space:nowrap;min-width:0;text-align:center}
.ds-btns form{flex:1 1 0;min-width:0;display:flex}
@media (max-width:480px){.ds-grid{gap:.5rem}.ds-card{width:165px}.ds-card img{width:165px;height:165px}.ds-card .noimg{width:165px;height:165px}.ds-btns .btn{font-size:.75rem;padding:.4rem .15rem}}
#pbar{position:relative;height:1.4rem;background:#e5e7eb;border-radius:999px;margin:.5rem 0;overflow:hidden}
#pfill{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:999px;transition:width .3s}
#ptxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:#374151}
.pv-mebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;gap:.6rem;flex-wrap:wrap}
.pv-mebar h1{margin:0}
@media (max-width:480px){
  .pv-mebar h1{font-size:1.35rem}
}

/* 2 nút Lưu/Hủy cạnh nhau */
.formbtns{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* Theme màu trang hồ sơ */
.pv{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1rem 1.2rem}
.theme-hong{--card:#ffeef4;--chip:#ffd9e5}
.theme-xanh{--pink:#2563eb;--pink-d:#1d4ed8;--bg:#f2f7ff;--line:#d3e3fa;--card:#e9f2fe;--chip:#d2e4fd}
.theme-tim{--pink:#8b5cf6;--pink-d:#7c3aed;--bg:#f8f5ff;--line:#e2d6fa;--card:#f0e9fd;--chip:#ddcdfb}
.theme-caphe{--pink:#9c6b30;--pink-d:#7d5522;--bg:#faf6ee;--line:#e7d5b8;--card:#f4ead6;--chip:#e6d3ae}
.theme-la{--pink:#16a34a;--pink-d:#15803d;--bg:#f2fbf4;--line:#cdebd4;--card:#e4f5e9;--chip:#cdebd5}

/* Bộ chọn theme */
.themes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.theme-opt{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);
  border-radius:999px;padding:.35rem .8rem .35rem .5rem;cursor:pointer;background:#fff;font-size:.92rem}
.theme-opt input{accent-color:var(--pink);margin:0}
.theme-opt .swatch{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}

/* Badge thông báo trên menu */
.nbadge{display:inline-block;min-width:1.35rem;text-align:center;background:#e11d48;color:#fff;
  font-size:.75rem;font-weight:800;border-radius:999px;padding:.05rem .35rem;margin-left:.25rem;
  vertical-align:.1rem}
.nbadge[hidden]{display:none}

/* Ảnh trong chat */
.msg img{max-width:220px;width:100%;border-radius:10px;display:block;margin:.15rem 0}
.msg:has(img){padding:.35rem}
.sendrow{display:flex;gap:.5rem;align-items:center}
.sendrow #msgtext{flex:1}

/* Trang Home */
.hm-wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;padding:.5rem 0 2rem}
.hm-card{background:#fff;border-radius:14px;padding:1.2rem 1.3rem;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.hm-card h1{font-size:1.4rem;margin:0 0 .5rem}
.hm-card h2{font-size:1.1rem;margin:0 0 .8rem}
.hm-welcome{background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;text-align:center}
.hm-welcome h1{color:#fff}
.hm-welcome p{margin:.4rem 0 1rem;opacity:.95}
.hm-welcome .btn{background:#fff;color:var(--pink-d)}
.hm-steps{display:flex;flex-direction:column;gap:.8rem}
.hm-step{display:flex;gap:.8rem;align-items:flex-start}
.hm-step .num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--pink-d);font-weight:700;display:flex;align-items:center;justify-content:center}
.hm-step b{font-size:.98rem}
.hm-step p{margin:.2rem 0 0;color:#555;font-size:.9rem}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;text-align:center}
.hm-stat .big{display:block;font-size:1.5rem;font-weight:800;color:var(--pink-d)}
.hm-stat .lbl{font-size:.78rem;color:#777}
.hm-list{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.hm-list li{font-size:.92rem;color:#444;line-height:1.5}
@media(max-width:480px){.hm-stats{grid-template-columns:repeat(2,1fr)}}
.crop-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.78);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}
.crop-box{background:#fff;border-radius:14px;padding:1rem;max-width:560px;width:100%;max-height:92vh;overflow:auto}
.crop-box h3{margin:0 0 .6rem}
.crop-img-wrap{max-height:58vh;overflow:hidden}
.crop-img-wrap img{max-width:100%;display:block}
.crop-btns{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.crop-btns button:disabled{opacity:.45;cursor:wait}

/* --- Mobile fix 2026-10-14: topbar + nút Bỏ qua/Thích trang xem hồ sơ --- */
.topbar nav a{white-space:nowrap}
@media(max-width:640px){
  .topbar{padding:.55rem .7rem;gap:.5rem}
  .logo .brand{font-size:1.3rem}
  .logo .tagline{display:none}
  .logo .tagline-short{display:block}
  .foot{font-size:.55rem!important;white-space:nowrap;padding:.8rem .2rem 0}
  .topbar nav{gap:.55rem}
  .topbar nav a{font-size:.82rem}
  .nav-avatar img,.nav-avatar .noavatar{width:30px;height:30px}
  /* tên + địa chỉ không gãy dòng */
  .pv-head-main{flex-wrap:wrap}
  .pv-head h1{font-size:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-loc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* nút Bỏ qua/Thích xuống hàng riêng, chia đều full width */
  .pv-head-actions{flex:1 1 100%;margin-top:.35rem}
  .pv-head-actions form{flex:1;display:flex}
  .pv-head-actions .btn{flex:1;padding:.55rem .5rem;font-size:.9rem;text-align:center;white-space:nowrap}
  /* popup ảnh trên mobile: ẩn nút mũi tên, chỉ vuốt */
  .pv-lb-prev,.pv-lb-next{display:none}
}

/* chấm xanh "Đang online" trên avatar */
.avwrap{position:relative;display:block}
.online-dot{position:absolute;right:10px;bottom:10px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 2px rgba(34,197,94,.3);z-index:2}
.online-dot.sm{width:12px;height:12px;right:3px;bottom:3px}

/* Stepbar 4 buoc: grid, chong bug bold text */
#stepbar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.2rem;
  margin:.8rem 0;
  padding:0;
  box-sizing:border-box;
}
@media (max-width:480px){
  .wrap{padding:1rem .25rem 3rem}
}
.stepdot{
  min-width:0;
  text-align:center;
  padding:.4rem .1rem;
  border-radius:8px;
  background:var(--chip);
  color:var(--pink-d);
  font-weight:600;
  font-size:.9rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:480px){
  .stepdot{font-size:.72rem}
}