/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ===== HERO (only #heromoi) — gọn + chống vỡ grid do <p> ===== */
#heromoi, #heromoi *{box-sizing:border-box}
#heromoi a{text-decoration:none}
#heromoi h1,#heromoi p{margin:0}
#heromoi .heromoi__wrap>p{display:none!important;margin:0!important} /* FIX wpautop */

#heromoi{
  padding:74px 0;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(255,182,193,.55), rgba(255,182,193,0) 60%),
    radial-gradient(820px 520px at 85% 55%, rgba(220,255,235,.65), rgba(220,255,235,0) 62%),
    linear-gradient(135deg,#fff 0%,#fff6f8 55%,#fff 100%);
  color:#111827;
}

#heromoi .heromoi__wrap{
  width:100%;max-width:1400px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,34vw,520px);
  gap:28px;align-items:center;
}
#heromoi .heromoi__left,#heromoi .heromoi__right{min-width:0}

#heromoi .hm-badge{
  display:inline-flex;align-self:flex-start;
  padding:8px 16px;border-radius:999px;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  color:#16a34a;font-weight:800;font-size:13px
}
#heromoi .hm-title{
  font-weight:900;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(40px,3.8vw + 10px,72px);color:#0b1220;
  overflow-wrap:anywhere
}
#heromoi .t-green{color:#16a34a}
#heromoi .t-yellow{color:#eab308}
#heromoi .hm-desc{max-width:560px;line-height:1.7;font-size:16px;color:#374151;overflow-wrap:anywhere}

#heromoi .hm-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
#heromoi .hm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:14px;font-weight:900;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease
}
#heromoi .hm-primary{
  background:linear-gradient(135deg,#16a34a,#eab308);color:#fff;
  box-shadow:0 14px 28px rgba(22,163,74,.22)
}
#heromoi .hm-primary:hover{transform:translateY(-2px)}
#heromoi .hm-ghost{
  background:#fff;border:1px solid rgba(0,0,0,.12);color:#111827
}
#heromoi .hm-ghost:hover{transform:translateY(-2px);background:#fff7ed}

#heromoi .hm-metrics{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:8px
}
#heromoi .hm-metric{
  padding:16px 18px;border-radius:18px;background:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px rgba(0,0,0,.08)
}
#heromoi .hm-metric strong{display:block;font-size:22px;font-weight:900;color:#2563eb;margin-bottom:4px}
#heromoi .hm-metric span{font-size:13px;color:#4b5563}
#heromoi .hm-wide{grid-column:1/-1}
#heromoi .hm-wide strong{color:#16a34a}

#heromoi .hm-card{
  background:linear-gradient(155deg,#fff,#fff1f3);
  border:1px solid rgba(0,0,0,.10);
  border-radius:26px;padding:22px;
  box-shadow:0 26px 60px rgba(0,0,0,.18);max-width:100%
}
#heromoi .hm-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-radius:20px;background:#fff;border:1px solid rgba(0,0,0,.08);
  margin-bottom:14px
}
#heromoi .hm-device{font-weight:900;font-size:18px;color:#111827}
#heromoi .hm-sub{margin-top:6px;font-size:13px;color:#6b7280}
#heromoi .hm-pill{
  padding:8px 12px;border-radius:999px;background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);color:#2563eb;font-weight:900;font-size:13px;white-space:nowrap
}
#heromoi .hm-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 6px;border-top:1px solid rgba(0,0,0,.08);
  font-size:13px;color:#6b7280
}
#heromoi .hm-row:first-of-type{border-top:0}
#heromoi .hm-val{color:#111827;font-weight:800;overflow-wrap:anywhere}
#heromoi .hm-track{
  width:100%;margin-top:16px;background:#fff;border:1px solid rgba(0,0,0,.12);color:#111827
}
#heromoi .hm-track:hover{transform:translateY(-2px);border-color:rgba(22,163,74,.30)}

@media (max-width:980px){
  #heromoi{padding:58px 0}
  #heromoi .heromoi__wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  #heromoi .hm-metrics{grid-template-columns:1fr}
  #heromoi .hm-wide{grid-column:auto}
}