/* Ghiền — mobile-first */
:root{
  --pink:#e5486f; --pink-d:#c93357; --bg:#fff7f9; --ink:#2b2b2b;
  --muted:#8a8a8a; --card:#ffffff; --line:#f3d9e0; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55}
.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:.8rem;align-items:center}
.topbar nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.wrap{max-width:720px;margin:0 auto;padding:1rem .9rem 3rem}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:1.5rem .5rem}
.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 .btn{padding:.45rem .8rem;font-size:.9rem}
.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:#fff;
  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:#f1f1f1}
.msg small{display:block;font-size:.7rem;opacity:.7}
.sendrow{display:flex;gap:.5rem}
.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:#ffe3ea;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}

/* 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}