/* =====================================================================
   Hlove – Hen ho Web3 luong tu (dung chung phong cach voi HGO/HBanks/Hbar)
   - Theme TIM / MAGENTA tren nen vu tru toi
   - Toan trang BI KHOA truot ngang+doc, chi .screen cuon doc ben trong
   - Anh trong /public deu la PNG XAM placeholder, chi can thay file
   - Banner: chi code KHUNG + NUT, anh that scale theo ty le file ban thay vao
   ===================================================================== */

:root {
  --maxw: 440px;            /* be ngang khung mobile */
  --line: #a44bf0;          /* vien tim cho tat ca thanh phan */
  --line2: #ff4fd8;         /* magenta nhan */
  --glow: rgba(150, 80, 240, .45);
  --txt: #f3edff;
  --muted: #b9a8e0;
  --banner-ratio: 920 / 560;  /* doi cho khop ty le anh banner that */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  color: var(--txt);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  touch-action: none;
  /* anh nen PNG cho toan bo web (thay public/bg-app.png de doi nen) */
  background: #0a0420 url("public/bg-app.png") center top / cover no-repeat;
}

a { text-decoration: none; color: inherit; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; background: none; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }

/* khung dien thoai can giua tren desktop */
.app {
  position: relative;
  width: min(100vw, var(--maxw));
  height: 100%;
  margin: 0 auto;
}

/* ====== Vung cuon duy nhat ====== */
.screen {
  height: 100%;
  padding: 12px 14px calc(96px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.screen::-webkit-scrollbar { width: 0; height: 0; }

/* ======================= Header ======================= */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 8px;
}
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--line); box-shadow: 0 0 10px var(--glow); }
.greet { display: grid; gap: 2px; min-width: 0; }
.greet > strong { font-size: 15px; font-weight: 800; }
.uid { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.copy-btn { display: grid; place-items: center; width: 18px; height: 18px; }
.copy-btn svg { width: 13px; height: 13px; color: var(--muted); }

.bell-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; justify-self: end; }
.bell-ic { width: 22px; height: 22px; color: #f0f0f0; filter: drop-shadow(0 0 7px rgba(180,140,255,.65)); }
.bell-badge {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 99px; background: var(--line2);
  box-shadow: 0 0 8px rgba(255,79,216,.9);
}

/* HCOIN pill */
.hcoin {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 99px;
  border: 1.5px solid var(--line);
  background: linear-gradient(120deg, rgba(150,80,240,.25), rgba(80,30,160,.12));
  box-shadow: 0 0 12px var(--glow);
}
.hcoin img { width: 26px; height: 26px; border-radius: 50%; }
.hcoin-text { display: grid; gap: 1px; line-height: 1; }
.hcoin-text span { font-size: 9px; font-weight: 800; letter-spacing: .4px; color: #ffd479; }
.hcoin-text strong { font-size: 13px; font-weight: 900; }

/* ===================== HIEU UNG NEON CHAY + CHOP tren vien tim =====================
   (lay tu HGame) - 1 vet sang magenta/trang CHAY vong quanh vien (conic xoay)
   + nhip "chop" nhe o glow vien, lech pha cho lung linh.
   Luu y: .avatar la <img> nen khong tao duoc ::after -> chi ap nhip chop. */
@property --neon-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* cac khoi co vien tim (tru avatar la img) */
.hcoin, .qmatch, .quick, .quick-ic, .person-photo, .uni { position: relative; }

/* vet neon chay doc theo vien (ring tao bang mask) */
.hcoin::after, .qmatch::after, .quick::after,
.quick-ic::after, .person-photo::after, .uni::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;                 /* do day vet neon = do day vien */
  background: conic-gradient(from var(--neon-a),
    transparent 0deg 55deg,
    rgba(255,79,216,.35) 80deg,
    var(--line2) 104deg,
    #ffffff 118deg,
    var(--line2) 132deg,
    rgba(255,79,216,.35) 156deg,
    transparent 185deg 360deg);
  /* chi giu phan vien, khoet rong ben trong */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: neon-run 2.6s linear infinite;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 4px var(--line2));
}

/* le pha cho vet chay -> lech nhau, sinh dong hon */
.hcoin::after        { animation-delay: -.3s; }
.quick::after        { animation-delay: -.9s; }
.qmatch::after       { animation-delay: -1.2s; }
.quick .quick-item:nth-child(2) .quick-ic::after { animation-delay: -.8s; }
.quick .quick-item:nth-child(3) .quick-ic::after { animation-delay: -1.2s; }
.quick .quick-item:nth-child(4) .quick-ic::after { animation-delay: -1.6s; }
.quick .quick-item:nth-child(5) .quick-ic::after { animation-delay: -2s; }
.person:nth-child(2) .person-photo::after { animation-delay: -.7s; }
.person:nth-child(3) .person-photo::after { animation-delay: -1.3s; }
.person:nth-child(4) .person-photo::after { animation-delay: -1.9s; }
.universe .uni:nth-child(2)::after { animation-delay: -.5s; }
.universe .uni:nth-child(3)::after { animation-delay: -1s; }
.universe .uni:nth-child(4)::after { animation-delay: -1.5s; }
.universe .uni:nth-child(5)::after { animation-delay: -2s; }

/* nhip "chop" nhe cho glow vien (ap ca cho avatar img) */
.hcoin, .avatar, .qmatch, .quick, .quick-ic, .person-photo, .uni {
  animation: neon-blink 2.6s ease-in-out infinite;
  will-change: box-shadow, border-color;
}
.hcoin       { animation-delay: -.3s; }
.avatar      { animation-delay: -.6s; }
.quick       { animation-delay: -.9s; }
.qmatch      { animation-delay: -1.2s; }
.quick .quick-item:nth-child(2) .quick-ic { animation-delay: -.8s; }
.quick .quick-item:nth-child(3) .quick-ic { animation-delay: -1.2s; }
.quick .quick-item:nth-child(4) .quick-ic { animation-delay: -1.6s; }
.quick .quick-item:nth-child(5) .quick-ic { animation-delay: -2s; }
.person:nth-child(2) .person-photo { animation-delay: -.7s; }
.person:nth-child(3) .person-photo { animation-delay: -1.3s; }
.person:nth-child(4) .person-photo { animation-delay: -1.9s; }
.universe .uni:nth-child(2) { animation-delay: -.5s; }
.universe .uni:nth-child(3) { animation-delay: -1s; }
.universe .uni:nth-child(4) { animation-delay: -1.5s; }
.universe .uni:nth-child(5) { animation-delay: -2s; }

@keyframes neon-run { to { --neon-a: 360deg; } }

@keyframes neon-blink {
  0%, 100% {
    border-color: var(--line);
    box-shadow: 0 0 6px var(--glow), inset 0 0 14px rgba(150,80,240,.10);
  }
  50% {
    border-color: var(--line2);
    box-shadow: 0 0 16px rgba(255,79,216,.7), inset 0 0 18px rgba(255,79,216,.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hcoin, .avatar, .qmatch, .quick, .quick-ic, .person-photo, .uni { animation: none; }
  .hcoin::after, .qmatch::after, .quick::after,
  .quick-ic::after, .person-photo::after, .uni::after { animation: none; }
}

/* ===================== HERO (chu code y chang, tren nen bg-app) ===================== */
.hero {
  text-align: center;
  margin-top: 10px;
  display: grid; justify-items: center; gap: 10px;
}
.hero-logo { width: 18%; height: auto; }
.hero-tagline {
  font-size: 8.25px; font-weight: 700; letter-spacing: 1.5px;
  color: #cdbff0; text-transform: uppercase;
  margin-top: -2px;
}
.hero-blockchain {
  font-size: 18.75px; font-weight: 800; letter-spacing: .75px;
  background: linear-gradient(90deg, #a78bfa, #7dd3fc, #f0abfc, #a78bfa);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hueShift 5s linear infinite;
}
.hero-web3 {
  font-size: 40.5px; font-weight: 900; letter-spacing: .75px; line-height: .92;
  background: linear-gradient(90deg, #dbe4ff, #a78bfa, #7dd3fc, #f0abfc, #dbe4ff);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(150,90,255,.55));
  animation: hueShift 5s linear infinite;
  margin-top: -6px;
}
@keyframes hueShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
.hero-cta {
  white-space: nowrap;
  padding: 7.5px 18px; border-radius: 99px;
  font-size: 9.75px; font-weight: 800; letter-spacing: .45px;
  color: #fff;
  border: 1.5px solid #e4b6ff;
  background: linear-gradient(120deg, rgba(164,75,240,.35), rgba(255,79,216,.28));
  box-shadow: 0 0 16px rgba(180,90,255,.6);
  margin-top: 2px;
}
.hero-features { font-size: 9.4px; font-weight: 600; color: #cfe0ff; letter-spacing: .3px; }

/* ===== khung chung: nen TRONG SUOT, vien TIM ===== */
.quick, .person-photo, .uni {
  border: 1.5px solid var(--line);
  box-shadow: 0 0 12px var(--glow), inset 0 0 16px rgba(150,80,240,.08);
}

/* ===================== QUANTUM LOVE MATCH (1 ANH banner phu kin) ===================== */
.qmatch {
  margin-top: 14px; border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--line);
  box-shadow: 0 0 12px var(--glow), inset 0 0 16px rgba(150,80,240,.08);
}
.qmatch-img { width: 100%; height: auto; display: block; }

/* ===================== 5 nut nhanh ===================== */
.quick {
  margin-top: 14px; border-radius: 14px; padding: 14px 4px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background-color: transparent;
}
.quick-item { display: grid; justify-items: center; gap: 7px; text-align: center; color: var(--muted); }
.quick-ic {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(150,80,240,.3), rgba(90,40,180,.15));
  border: 1.5px solid var(--line);
  box-shadow: 0 0 12px var(--glow), inset 0 0 8px rgba(180,140,255,.2);
}
.quick-ic svg { width: 24px; height: 24px; color: #d9bcff; filter: drop-shadow(0 0 5px rgba(160,90,255,.6)); }
.quick-item span { font-size: 10px; font-weight: 700; line-height: 1.1; }
.quick-item.active { color: #fff; }
.quick-item.active .quick-ic {
  border-color: var(--line2);
  background: linear-gradient(160deg, rgba(255,79,216,.4), rgba(164,75,240,.3));
  box-shadow: 0 0 16px rgba(255,79,216,.65);
}
.quick-item.active .quick-ic svg { color: #fff; }

/* ===================== Tieu de section ===================== */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 2px 10px;
}
.section-head h2 { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.see-all { font-size: 12px; color: var(--line2); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.see-all i { font-style: normal; font-size: 16px; }

/* ===== hang truot ngang ===== */
.hscroll {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hscroll::-webkit-scrollbar { height: 0; }

/* ===================== Ket noi noi bat ===================== */
.person { flex: 0 0 124px; display: grid; gap: 6px; }
.person-photo {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 4 / 5;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.online {
  position: absolute; top: 8px; right: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #2be07a; border: 2px solid #0a0420;
  box-shadow: 0 0 8px rgba(43,224,122,.9);
}
.person-name { display: flex; align-items: center; gap: 4px; padding: 0 2px; }
.person-name strong { font-size: 12.5px; font-weight: 800; }
.verified {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  background: #2aa7ff; position: relative;
  box-shadow: 0 0 6px rgba(42,167,255,.7);
}
.verified::after {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 5px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.person-match { display: flex; align-items: center; gap: 4px; padding: 0 2px; font-size: 12px; font-weight: 800; color: #ffd479; }
.person-match .star { font-style: normal; }

/* ===================== Hlove Universe ===================== */
.universe {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.uni {
  display: grid; justify-items: center; gap: 5px; text-align: center;
  border-radius: 12px; padding: 10px 4px;
  background-color: transparent;
}
.uni-ic { width: 42px; height: 42px; display: grid; place-items: center; }
.uni-ic img { width: 42px; height: 42px; object-fit: contain; }
.uni strong { font-size: 8.5px; font-weight: 800; letter-spacing: .2px; line-height: 1.05; }
.uni small { font-size: 7.5px; color: var(--muted); line-height: 1.1; }

/* ============== BOTTOM NAV (dung chung dang) ============== */
.bottom-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around; align-items: flex-end;
  background: linear-gradient(180deg, rgba(18,8,38,.92), rgba(8,3,18,.98));
  border-top: 1px solid #2a1850;
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #8a78b8; font-size: 11px;
}
.nav-item svg { width: 23px; height: 23px; color: currentColor; }
.nav-item.active { color: var(--line2); }
.nav-item.active svg { filter: drop-shadow(0 0 6px rgba(255,79,216,.7)); }
.nav-center { position: relative; }
/* Nut giua = 1 vong tron trai tim, nen la anh PNG trong /public */
.nav-center-circle {
  width: 62px; height: 62px;
  margin-top: -26px;
  border-radius: 50%;
  background-image: url("public/nav-center-btn.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 18px rgba(255,79,216,.6);
}