/* ===== VBM Service Center — refined, scoped .pm-vbm (gốc: StaticVBM/vbm.css) ===== */

/* ---------- hero ---------- */
.pm-vbm .vbm-hero{position:relative;text-align:center;padding:52px 0 0;overflow:hidden}
.pm-vbm .vbm-hero-glow{position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:820px;height:420px;background:radial-gradient(58% 58% at 50% 0%,rgba(255,184,20,.18),transparent 72%);pointer-events:none}
.pm-vbm .vbm-hero .shell{position:relative}
.pm-vbm .vbm-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border:1px solid var(--brand-border);border-radius:999px;padding:7px 15px;margin-bottom:18px}
.pm-vbm .vbm-hero .eyebrow .tick{width:7px;height:7px;border-radius:50%;background:var(--grad)}
.pm-vbm .vbm-hero h1{font-size:44px;font-weight:700;letter-spacing:-.035em;margin:0;color:var(--ink);line-height:1.05}
.pm-vbm .vbm-hero h1 .hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-vbm .vbm-hero p{max-width:540px;margin:14px auto 0;font-size:16px;line-height:1.6;color:var(--muted)}

/* steps — connected progress tracker */
.pm-vbm .vbm-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:600px;margin:34px auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md);padding:26px 24px 22px}
.pm-vbm .vbm-steps::before{content:'';position:absolute;top:47px;left:calc(100%/6);right:calc(100%/6);height:2px;background:repeating-linear-gradient(90deg,var(--neutral-2) 0 6px,transparent 6px 12px);z-index:0}
.pm-vbm .vstep{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pm-vbm .vstep-n{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;border:4px solid #fff;box-shadow:0 2px 8px rgba(28,25,23,.12)}
.pm-vbm .vstep-n.s1{background:var(--blue)}
.pm-vbm .vstep-n.s2{background:var(--grad);color:var(--btn-ink)}
.pm-vbm .vstep-n.s3{background:var(--green)}
.pm-vbm .vstep-tx b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pm-vbm .vstep-tx span{font-size:11.5px;color:var(--muted);margin-top:2px;display:block}
.pm-vbm .vstep-sep{display:none}

/* ---------- main ---------- */
.pm-vbm .vbm-main{padding:48px 28px 64px;display:flex;flex-direction:column;gap:14px}

/* section */
.pm-vbm .vsec{position:relative;padding-top:30px}
.pm-vbm .vsec.cream{background:linear-gradient(180deg,#FFFBF2,#FFF8EC);border:1px solid var(--brand-border);border-radius:24px;padding:28px 26px 30px;margin-top:18px}
.pm-vbm .vsec-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.pm-vbm .vsec-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.pm-vbm .vsec-ic.tone-ink{background:var(--ink);color:#fff}
.pm-vbm .vsec-ic.tone-gold{background:var(--grad);color:var(--btn-ink);box-shadow:var(--shadow-brand)}
.pm-vbm .vsec-ic.tone-red{background:var(--red-soft);color:var(--red)}
.pm-vbm .vsec-tx{min-width:0}
.pm-vbm .vsec-tx h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink)}
.pm-vbm .vsec-tx p{font-size:13.5px;color:var(--muted);margin:3px 0 0}
.pm-vbm .vsec-flag{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--brand-deep);background:#fff;border:1.5px solid var(--brand-border);border-radius:999px;padding:8px 15px;box-shadow:var(--shadow-sm)}

/* grid */
.pm-vbm .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* card */
.pm-vbm .vc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:22px 20px 18px;transition:transform .16s,box-shadow .16s,border-color .16s}
.pm-vbm .vc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-border)}
.pm-vbm .vc.feat{border-color:var(--brand);background:linear-gradient(165deg,#FFFCF5,#fff 46%)}
.pm-vbm .vc.feat::after{content:'';position:absolute;inset:0;border-radius:18px;box-shadow:0 0 0 3px var(--brand-soft-2);pointer-events:none}
.pm-vbm .vc-link{position:absolute;inset:0;z-index:2;border-radius:18px;background:none;border:none;padding:0;cursor:pointer}
/* Icon TRÊN giữ nguyên khi hover (không đổi sang đen) — chỉ .vc-go bên dưới đổi màu */
.pm-vbm .vc-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--neutral);color:var(--ink);margin-bottom:16px}
.pm-vbm .vc.feat .vc-ic{background:var(--grad);color:var(--btn-ink);box-shadow:var(--shadow-brand)}
.pm-vbm .vc-badge{position:absolute;top:18px;right:18px;z-index:3;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--btn-ink);background:var(--grad);padding:5px 10px;border-radius:999px;box-shadow:var(--shadow-brand)}
.pm-vbm .vc-t{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 9px;line-height:1.28}
.pm-vbm .vc-d{font-size:13px;line-height:1.58;color:var(--muted);margin:0 0 18px}
.pm-vbm .vc-foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line-soft)}
.pm-vbm .vc-fee{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:999px}
.pm-vbm .vc-fee.free{color:var(--green-deep);background:var(--green-soft)}
.pm-vbm .vc-fee.paid{color:var(--brand-deep);background:var(--brand-soft)}
.pm-vbm .vc-promo{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#C23B22;background:var(--red-soft);padding:4px 8px;border-radius:999px}
.pm-vbm .vc-go{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--neutral);color:var(--ink-2);flex-shrink:0;transition:background .16s,color .16s,transform .16s}
.pm-vbm .vc:hover .vc-go{background:var(--grad);color:var(--btn-ink);transform:translateX(2px)}
.pm-vbm .vc.feat .vc-go{background:var(--neutral);color:var(--ink-2)}
.pm-vbm .vc.feat:hover .vc-go{background:var(--grad);color:var(--btn-ink);transform:translateX(2px)}

/* blue-accent card (Hỗ trợ VĐV) */
.pm-vbm .vc.acc-blue{border-color:var(--blue)}
.pm-vbm .vc.acc-blue::after{content:'';position:absolute;inset:0;border-radius:18px;box-shadow:0 0 0 3px var(--blue-soft);pointer-events:none}
.pm-vbm .vc.acc-blue .vc-ic{background:var(--blue-soft);color:var(--blue)}
.pm-vbm .vc.acc-blue:hover{border-color:var(--blue)}
.pm-vbm .vc.acc-blue .vc-go{background:var(--blue-soft);color:#1B6FCB}
.pm-vbm .vc.acc-blue:hover .vc-go{background:var(--blue);color:#fff}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1080px){
  .pm-vbm .vbm-hero h1{font-size:37px}
  .pm-vbm .vgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pm-vbm .vbm-hero{padding:30px 0 0}
  .pm-vbm .vbm-hero .eyebrow{font-size:10.5px;padding:6px 12px;margin-bottom:14px}
  .pm-vbm .vbm-hero h1{font-size:27px}
  .pm-vbm .vbm-hero p{font-size:14px;margin-top:11px;padding:0 10px}
  .pm-vbm .vbm-steps{width:100%;margin-top:24px;padding:20px 12px 16px;border-radius:16px}
  .pm-vbm .vbm-steps::before{top:40px}
  .pm-vbm .vstep-n{width:36px;height:36px;font-size:14px;border-width:3px}
  .pm-vbm .vstep-tx b{font-size:11.5px}
  .pm-vbm .vstep-tx span{display:none}

  .pm-vbm .vbm-main{padding:32px 16px 46px;gap:8px}
  .pm-vbm .vsec{padding-top:22px}
  .pm-vbm .vsec.cream{padding:22px 14px 24px;margin-top:12px}
  .pm-vbm .vsec-head{gap:12px;margin-bottom:16px}
  .pm-vbm .vsec-ic{width:40px;height:40px;border-radius:12px}
  .pm-vbm .vsec-ic svg{width:20px;height:20px}
  .pm-vbm .vsec-tx h2{font-size:18px}
  .pm-vbm .vsec-tx p{font-size:12px}
  .pm-vbm .vsec-flag{font-size:9.5px;padding:6px 10px;gap:4px}

  /* mobile: 2 columns */
  .pm-vbm .vgrid{grid-template-columns:repeat(2,1fr);gap:11px}
  .pm-vbm .vc{padding:15px 14px 13px;border-radius:15px}
  .pm-vbm .vc-ic{width:40px;height:40px;border-radius:12px;margin-bottom:12px}
  .pm-vbm .vc-ic svg{width:20px;height:20px}
  .pm-vbm .vc-badge{top:13px;right:13px;font-size:9px;padding:4px 8px}
  .pm-vbm .vc-t{font-size:12.5px;margin-bottom:7px;line-height:1.25}
  .pm-vbm .vc-d{font-size:11.5px;line-height:1.5;margin-bottom:13px}
  .pm-vbm .vc-foot{padding-top:12px;gap:7px;flex-wrap:wrap}
  .pm-vbm .vc-fee{font-size:10px;padding:4px 9px}
  .pm-vbm .vc-promo{font-size:9px;padding:3px 7px}
  .pm-vbm .vc-go{width:30px;height:30px;margin-left:auto}
  .pm-vbm .vc-go svg{width:14px;height:14px}
}
@media(max-width:380px){
  .pm-vbm .vbm-hero h1{font-size:23px}
  .pm-vbm .vgrid{gap:9px}
  .pm-vbm .vc{padding:13px 12px 11px}
  .pm-vbm .vc-t{font-size:12px}
  .pm-vbm .vc-foot .vc-go{display:none}
}
@supports(padding:max(0px)){
  @media(max-width:760px){.pm-vbm .vbm-main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
}