/* Pro Nails – Hero slideshow (Trang chủ). Máy tính: chữ trái, ảnh khung vòm phải. Điện thoại: ảnh vuông trên, chữ dưới, không phủ tối. */
:where(.pnb-hero){background:radial-gradient(120% 60% at 80% 0%,var(--hero-glow) 0%,var(--surface) 55%)}
:where(.pnb-hero) .pnb-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,7vw,88px)}
:where(.pnb-hero) .pnb-hero-text{min-width:0}
:where(.pnb-hero) .pnb-hero-title{font-size:clamp(2.3rem,5.4vw,4.1rem);margin:14px 0 18px}
:where(.pnb-hero) .pnb-hero-title em{font-style:italic;color:var(--brick-hi);white-space:nowrap}
:where(.pnb-hero) .pnb-lead{font-size:1.1rem;color:var(--muted);max-width:30em}
:where(.pnb-hero) .pnb-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
:where(.pnb-hero) .pnb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}

/* ảnh */
.pnb-hero .pnb-hero-art{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:220px 220px var(--r) var(--r);overflow:hidden;background:radial-gradient(120% 80% at 70% 20%,var(--surface) 0%,var(--blush) 55%,var(--orchid) 130%);isolation:isolate}
.pnb-hero .pnb-hs{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.1s ease;will-change:opacity,transform}
.pnb-hero .pnb-hs.is-on{opacity:1}
body.pn-speed-slow .pnb-hero .pnb-hs{transition-duration:1.6s}
body.pn-speed-fast .pnb-hero .pnb-hs{transition-duration:.6s}
@keyframes pnb-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
/* zoom chậm: chỉ khi máy không bật "giảm chuyển động" (sửa P2b) */
@media (prefers-reduced-motion:no-preference){body:not(.pn-fx-off) .pnb-hero-art:is([data-mode="zoom"],[data-mode="slide"]) .pnb-hs.is-on{animation:pnb-kb var(--kb,9s) ease-out forwards}}
.pnb-hero .pnb-hero-art .pnb-empty{position:absolute;left:16px;right:16px;top:40%;margin:0;z-index:3}

/* huy hiệu tròn */
.pnb-hero .pnb-hero-badge{position:absolute;z-index:2;right:14px;top:22%;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;padding:12px;transform:rotate(-8deg);background:linear-gradient(180deg,var(--btn-top) 0%,var(--btn-mid) 55%,var(--btn-bot) 100%);color:var(--on-wine);border:1.5px solid var(--btn-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 5px 14px -8px rgba(var(--shade),.45)}
.pnb-hero .pnb-hero-badge b{display:block;font-family:var(--f-script);text-transform:none;letter-spacing:0;font-weight:400;font-size:1.7rem;line-height:1}

@media (max-width:860px){
  :where(.pnb-hero) .pnb-wrap{grid-template-columns:1fr;padding-block:16px 36px;gap:22px}
  .pnb-hero .pnb-hero-art{order:-1;width:100%;aspect-ratio:1/1;max-height:440px;border-radius:var(--r)}
  .pnb-hero .pnb-hs{object-position:var(--pos,50% 50%)}
  .pnb-hero .pnb-hero-badge{top:auto;right:auto;left:12px;bottom:12px;width:auto;height:auto;border-radius:8px;padding:8px 14px;transform:none;font-size:.8rem;letter-spacing:.06em;box-shadow:0 6px 18px -8px rgba(var(--shade),.6)}
  .pnb-hero .pnb-hero-badge b{display:inline;font-family:var(--f-sans);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-right:2px}
}
@media (max-width:760px){
  body:is(.pn-fxm-light,.pn-fxm-off) .pnb-hero-art:is([data-mode="zoom"],[data-mode="slide"]) .pnb-hs.is-on{animation:none}
}
@media (prefers-reduced-motion:reduce){.pnb-hero .pnb-hs{transition:none}.pnb-hero .pnb-hs.is-on{animation:none}}