/* ═══════════════════════════════════════════════════════════════════
   bobjarcoin.css — trang sản phẩm Bob JarCoin (bobjarcoin.html).
   Khung chung (thanh trên, chân trang, .sx-hero/.sx-card/.sx-steps…) nằm ở
   site.css; file này chỉ thêm phần RIÊNG: màn mở đầu có sân khấu ba chiếc
   hũ, dải kiểu hũ, và ô ghi chú.

   Màu nhấn của trang là VÀNG-CAM (logo con báo của JarCoin), không phải
   hồng của LiveDima’ — để khách không nhầm đây là trang tải LiveDima’.
   Ảnh hũ ở img/jars/ là SVG có hoạt cảnh (SMIL), chép từ bộ skin của app.
   ═══════════════════════════════════════════════════════════════════ */
body{background:#07070B}
body::before{
  background:
    radial-gradient(55% 45% at 78% 6%,rgba(255,176,46,.13),transparent 62%),
    radial-gradient(50% 40% at 12% 0%,rgba(255,45,143,.08),transparent 60%);
}

/* ---------- màn mở đầu ---------- */
.jc-hero{padding:clamp(28px,5vw,64px) 0 clamp(36px,5vw,64px)}
.jc-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.jc-copy .sx-h1{font-size:clamp(34px,4.8vw,56px)}
.jc-copy .sx-lead{max-width:52ch}

.jc-id{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.jc-id img{
  width:52px;height:52px;border-radius:14px;padding:6px;flex:0 0 auto;
  background:rgba(255,184,40,.08);border:1px solid rgba(255,184,40,.32);
  box-shadow:0 10px 28px rgba(255,150,30,.18);
}
.jc-id b{display:block;font:800 19px/1.2 var(--sx-font);color:#fff;letter-spacing:-.2px}
.jc-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.jc-tags i{
  font:600 10.5px var(--sx-mono);font-style:normal;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;border:1px solid var(--sx-line-2);color:var(--sx-soft);
}

.jc-dl{min-height:58px;padding:0 24px 0 20px}
.jc-dl .sx-btn-txt>span{font-size:15.5px;font-weight:800}
.jc-trust{display:flex;align-items:center;gap:9px;margin:20px 0 0;font:600 13.5px/1.5 var(--sx-font);color:var(--sx-dim)}
.jc-trust svg{width:17px;height:17px;flex:0 0 auto;color:#FFD66B}

/* sân khấu ba chiếc hũ */
.jc-stage{position:relative;aspect-ratio:1/1;max-width:540px;width:100%;justify-self:center}
.jc-glow{
  position:absolute;inset:8% 6% 14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,176,46,.30),rgba(255,92,176,.12) 55%,transparent 75%);
  filter:blur(8px);
}
.jc-ring{
  position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;translate:-50% -54%;border-radius:50%;
  border:1px dashed rgba(255,214,107,.20);
  animation:jcSpin 60s linear infinite;
}
.jc-floor{
  position:absolute;left:12%;right:12%;bottom:9%;height:7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);
}
.jc-jar{position:absolute;bottom:11%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));z-index:1}
.jc-jar-c{left:50%;width:46%;translate:-50% 0;z-index:2;animation:jcBob 5.5s ease-in-out infinite}
.jc-jar-l{left:2%;width:31%;bottom:13%;opacity:.95;rotate:-6deg;animation:jcBob 6.5s ease-in-out -1.5s infinite}
.jc-jar-r{right:2%;width:31%;bottom:13%;opacity:.95;rotate:6deg;animation:jcBob 6.2s ease-in-out -3s infinite}
/* đồng xu rơi: hình học thuần, không emoji (emoji mỗi máy một kiểu) */
.jc-coin{
  position:absolute;top:0;width:18px;height:18px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#FFF3C4 0 18%,#FFD66B 32%,#E8A21E 70%,#B9730C);
  box-shadow:0 0 0 1.5px rgba(120,70,0,.35) inset,0 4px 10px rgba(255,170,40,.35);
  opacity:0;animation:jcDrop 3.6s cubic-bezier(.45,0,.75,.6) infinite;
}
.jc-coin.c1{left:44%;animation-delay:.2s}
.jc-coin.c2{left:54%;width:14px;height:14px;animation-delay:1.1s}
.jc-coin.c3{left:49%;animation-delay:2s}
.jc-coin.c4{left:58%;width:12px;height:12px;animation-delay:2.8s}
@keyframes jcDrop{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  12%{opacity:1}
  70%{opacity:1}
  85%,100%{opacity:0;transform:translateY(clamp(150px,22vw,250px)) rotate(240deg)}
}
@keyframes jcBob{0%,100%{translate:var(--jc-x,0) 0}50%{translate:var(--jc-x,0) -8px}}
.jc-jar-c{--jc-x:-50%}
@keyframes jcSpin{to{rotate:360deg}}

.jc-stats{margin-top:clamp(30px,5vw,56px)}
.jc-stats .sx-stat b{color:#FFD66B}

/* ---------- dải kiểu hũ ---------- */
.jc-jars{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;
  padding:22px;border-radius:22px;border:1px solid var(--sx-line-2);
  background:radial-gradient(80% 120% at 50% 100%,rgba(255,176,46,.10),transparent 70%),rgba(255,255,255,.02);
}
.jc-jars img{width:100%;height:auto;display:block;transition:transform .3s var(--sx-ease)}
.jc-jars img:hover{transform:translateY(-6px) scale(1.04)}
@media(max-width:900px){ .jc-jars{grid-template-columns:repeat(5,minmax(0,1fr))} .jc-jars img:nth-child(n+6){display:none} }
@media(max-width:520px){ .jc-jars{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px} .jc-jars img:nth-child(n+5){display:none} }

/* ---------- ô ghi chú ---------- */
.jc-note{margin-top:22px}
.jc-note .tl-langnote{margin:10px 0 0;font:500 13px var(--sx-font);color:var(--sx-dim)}
html[lang="vi"] .jc-note .tl-langnote{display:none}

/* ---------- màn hẹp ---------- */
@media(max-width:900px){
  .jc-hero-in{grid-template-columns:1fr}
  .jc-stage{max-width:420px;order:-1;margin-bottom:-10px}
}
@media(max-width:560px){
  .jc-stage{max-width:330px}
  .sx-actions .sx-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .jc-jar,.jc-ring,.jc-coin{animation:none}
  .jc-coin{display:none}
}
/* Điện thoại: sân khấu hũ lên trên đầu nên dòng "Trang chủ › Sản phẩm" rơi vào
   giữa hình và tiêu đề — ở đó nó chỉ là nhiễu, thanh trên đã có đường về. */
@media(max-width:900px){ .jc-copy .sx-crumb{display:none} }