/* ============================================================================
   SOLI AI · CSS scoped cho section Hướng dẫn thanh toán (.spg-root)
   COPY NGUYÊN VĂN (byte-for-byte) từ: src/components/PaymentGuideSection.tsx → const SPG_CSS
   KHÔNG sửa nội dung bên dưới khi migrate — đây là bản gốc production.
   ========================================================================== */
.spg-root{
  --spg-primary:#2CF589;
  --spg-primary-tint:#D6FCE7;
  --spg-secondary:#0F766E;
  --spg-secondary-soft:#5EEAD4;
  --spg-accent-sand:#FDE68A;
  --spg-text:#0F172A;
  --spg-text-muted:#475569;
  --spg-border:#E2E8F0;
  --spg-bg:#F8FAFC;
  --spg-white:#FFFFFF;
  --spg-s1:4px; --spg-s2:8px; --spg-s3:12px; --spg-s4:16px;
  --spg-s5:24px; --spg-s6:32px; --spg-s8:48px;
  --spg-r-sm:6px; --spg-r-md:10px; --spg-r-lg:16px; --spg-r-full:9999px;
  --spg-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --spg-shadow-md:0 4px 12px rgba(15,23,42,.10);
  --spg-focus:0 0 0 3px var(--spg-primary-tint);

  position:relative;
  padding: clamp(64px,8vw,110px) clamp(24px,5vw,80px);
  background: radial-gradient(130% 120% at 12% 0%, #f4fbf7 0%, #e7f4ec 42%, #dcefe4 100%);
  color: var(--spg-text);
  font-family: 'Zalando Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:24px;
  scroll-margin-top:100px;
  -webkit-font-smoothing:antialiased;
}
.spg-root *,.spg-root *::before,.spg-root *::after{ box-sizing:border-box; }

.spg-wrap{ max-width:880px; margin:0 auto; }

.spg-t-sm{ font-size:13px; line-height:22px; font-weight:400; }
.spg-text-muted{ color:var(--spg-text-muted); }
.spg-mt2{ margin:var(--spg-s2) 0 0; }
.spg-mb4{ margin:0 0 var(--spg-s4); }
.spg-code{ font-family:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace; font-weight:700; color:var(--spg-secondary); background:var(--spg-secondary-soft); padding:1px 6px; border-radius:5px; }
.spg-accent-b{ color:var(--spg-secondary); }

.spg-page-head{ text-align:center; margin-bottom:var(--spg-s6); }
.spg-page-head .spg-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--spg-secondary); background:var(--spg-secondary-soft);
  border:1px solid rgba(15,118,110,.3); border-radius:var(--spg-r-full);
  padding:4px var(--spg-s3); margin-bottom:var(--spg-s3);
}
.spg-page-head .spg-h1{ font-size:30px; line-height:40px; font-weight:800; margin:0 0 var(--spg-s2); letter-spacing:-.01em; text-wrap:balance; color:var(--spg-text); }
.spg-page-head p{ color:var(--spg-text-muted); font-size:15px; max-width:620px; margin:0 auto; }

.spg-panel{
  background:var(--spg-white); border:1px solid var(--spg-border);
  border-radius:var(--spg-r-lg); box-shadow:var(--spg-shadow-md);
  overflow:hidden; margin-bottom:var(--spg-s5);
}
.spg-panel-pad{ padding:var(--spg-s6); }
.spg-section-title{ display:flex; align-items:center; gap:var(--spg-s3); margin:0 0 var(--spg-s4); }
.spg-section-title .spg-st-num{
  width:30px; height:30px; border-radius:var(--spg-r-full); flex-shrink:0;
  background:var(--spg-primary); color:var(--spg-text);
  display:grid; place-items:center; font-size:14px; font-weight:800;
}
.spg-section-title h3{ font-size:19px; line-height:26px; font-weight:800; margin:0; color:var(--spg-text); }

.spg-steps{ display:grid; gap:var(--spg-s4); }
.spg-step{ display:flex; gap:var(--spg-s4); align-items:flex-start; }
.spg-step .spg-step-ico{
  width:44px; height:44px; border-radius:var(--spg-r-md); flex-shrink:0;
  background:var(--spg-primary-tint); color:var(--spg-secondary);
  display:grid; place-items:center;
}
.spg-step h4{ font-size:15px; font-weight:800; margin:0 0 2px; color:var(--spg-text); }
.spg-step p{ font-size:14px; line-height:21px; color:var(--spg-text-muted); margin:0; }

.spg-pay-strip{
  display:flex; align-items:center; gap:var(--spg-s3);
  padding:var(--spg-s5) var(--spg-s6); color:#fff;
  background:linear-gradient(120deg,#0F766E,#14958B 65%,#1FBFA9);
}
.spg-pay-strip .spg-ps-ico{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0; }
.spg-pay-strip h3{ font-size:19px; line-height:26px; font-weight:800; margin:0; color:#fff; }
.spg-pay-strip p{ margin:2px 0 0; font-size:13px; color:rgba(255,255,255,.92); }

.spg-pay-grid{ display:grid; grid-template-columns:260px 1fr; gap:var(--spg-s6); padding:var(--spg-s6); }

.spg-qr-box{ text-align:center; }
.spg-qr-frame{
  width:100%; aspect-ratio:1; border-radius:var(--spg-r-lg);
  border:1px solid var(--spg-border); background:var(--spg-bg);
  display:grid; place-items:center; overflow:hidden; padding:var(--spg-s3);
}
.spg-qr-frame img{ width:100%; height:100%; object-fit:contain; }
.spg-qr-box .spg-qr-hint{ font-size:12px; color:var(--spg-text-muted); margin-top:var(--spg-s3); }
.spg-qr-box .spg-qr-apps{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:4px; font-size:11px; font-weight:700; color:var(--spg-secondary); }

.spg-bank-list{ display:flex; flex-direction:column; }
.spg-bank-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--spg-s3); padding:var(--spg-s3) 0; border-bottom:1px dashed var(--spg-border); }
.spg-bank-row:last-child{ border-bottom:0; }
.spg-bank-row .spg-br-label{ font-size:12px; font-weight:700; color:var(--spg-text-muted); text-transform:uppercase; letter-spacing:.03em; }
.spg-bank-row .spg-br-value{ font-size:16px; font-weight:800; text-align:right; color:var(--spg-text); }
.spg-bank-row .spg-br-value.spg-mono{ font-family:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.spg-bank-row .spg-br-value.spg-accent{ color:var(--spg-secondary); }
.spg-copy-btn{
  display:inline-flex; align-items:center; gap:5px; margin-left:var(--spg-s2);
  font-size:11px; font-weight:700; color:var(--spg-text-muted);
  background:none; border:1px solid var(--spg-border); border-radius:var(--spg-r-sm);
  padding:3px 8px; cursor:pointer; vertical-align:middle;
  font-family:inherit; transition:border-color .12s,color .12s;
}
.spg-copy-btn:hover{ border-color:var(--spg-secondary); color:var(--spg-secondary); }
.spg-copy-btn:focus-visible{ outline:none; box-shadow:var(--spg-focus); }
.spg-br-value-wrap{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }

.spg-ck-highlight{
  display:flex; gap:var(--spg-s3); align-items:flex-start;
  background:var(--spg-accent-sand); border:1px solid #E2B83C; color:#7c5b09;
  border-radius:var(--spg-r-md); padding:var(--spg-s4); margin:0 var(--spg-s6) var(--spg-s6);
}
.spg-ck-highlight svg{ flex-shrink:0; margin-top:2px; }
.spg-ck-highlight b{ color:#6b4e07; }
.spg-ck-highlight .spg-ck-sample{
  display:inline-block; font-family:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  font-weight:800; background:#fff; border:1px solid #E2B83C; border-radius:6px;
  padding:1px 8px; color:#92670A;
}

.spg-plan-recap{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--spg-s3); }
.spg-plan-cell{ border:1px solid var(--spg-border); border-radius:var(--spg-r-md); padding:var(--spg-s4); text-align:center; background:var(--spg-bg); }
.spg-plan-cell.spg-featured{ border-color:var(--spg-secondary); background:var(--spg-white); box-shadow:var(--spg-shadow-sm); position:relative; }
.spg-plan-cell.spg-featured::after{ content:"Phổ biến"; position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--spg-secondary); color:#fff; padding:2px 10px; border-radius:var(--spg-r-full); }
.spg-plan-cell .spg-pc-name{ font-size:13px; font-weight:800; color:var(--spg-secondary); }
.spg-plan-cell .spg-pc-price{ font-size:20px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; color:var(--spg-text); }
.spg-plan-cell .spg-pc-price small{ display:block; font-size:11px; font-weight:500; color:var(--spg-text-muted); }
.spg-vat-note{ margin:var(--spg-s4) 0 0; font-size:15px; font-weight:700; color:var(--spg-secondary); }

.spg-note-list{ display:grid; gap:var(--spg-s3); }
.spg-note-item{ display:flex; gap:var(--spg-s3); align-items:flex-start; font-size:14px; line-height:21px; }
.spg-note-item .spg-ni-ico{ width:22px; height:22px; border-radius:var(--spg-r-full); flex-shrink:0; display:grid; place-items:center; }
.spg-note-item.spg-ok .spg-ni-ico{ background:var(--spg-primary-tint); color:#0B7A45; }
.spg-note-item.spg-warn .spg-ni-ico{ background:#FFE4E4; color:#C2362F; }
.spg-note-item b{ color:var(--spg-text); }

.spg-contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--spg-s3); }
.spg-contact-card{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  border:1px solid var(--spg-border); border-radius:var(--spg-r-md);
  padding:var(--spg-s4) var(--spg-s3); text-decoration:none; color:var(--spg-text);
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.spg-contact-card:hover{ border-color:var(--spg-secondary); box-shadow:var(--spg-shadow-sm); transform:translateY(-2px); }
.spg-contact-card:focus-visible{ outline:none; box-shadow:var(--spg-focus); }
.spg-contact-card .spg-cc-ico{ width:40px; height:40px; border-radius:var(--spg-r-md); background:var(--spg-secondary-soft); color:var(--spg-secondary); display:grid; place-items:center; }
.spg-contact-card .spg-cc-title{ font-size:14px; font-weight:800; }
.spg-contact-card .spg-cc-sub{ font-size:12px; color:var(--spg-text-muted); }
.spg-invoice-note{ margin:0 0 var(--spg-s4); padding:var(--spg-s3) var(--spg-s4); background:var(--spg-primary-tint); border:1px solid rgba(15,118,110,.2); border-radius:var(--spg-r-md); font-size:13px; line-height:20px; color:var(--spg-text); }
.spg-invoice-note b{ color:var(--spg-secondary); }

.spg-faq-item{ border-bottom:1px solid var(--spg-border); }
.spg-faq-item:last-child{ border-bottom:0; }
.spg-faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--spg-s3); padding:var(--spg-s4) 0; font-size:15px; font-weight:700; color:var(--spg-text); }
.spg-faq-item summary::-webkit-details-marker{ display:none; }
.spg-faq-item summary:focus-visible{ outline:none; box-shadow:var(--spg-focus); border-radius:var(--spg-r-sm); }
.spg-faq-item summary .spg-chev{ transition:transform .18s; color:var(--spg-text-muted); flex-shrink:0; }
.spg-faq-item[open] summary .spg-chev{ transform:rotate(180deg); }
.spg-faq-item .spg-faq-body{ padding:0 0 var(--spg-s4); font-size:14px; line-height:22px; color:var(--spg-text-muted); }
.spg-faq-item .spg-faq-body b{ color:var(--spg-text); }

@media (prefers-reduced-motion: reduce){
  .spg-contact-card{ transition:none; }
  .spg-contact-card:hover{ transform:none; }
}

@media (max-width:720px){
  .spg-page-head .spg-h1{ font-size:26px; line-height:34px; }
  .spg-pay-grid{ grid-template-columns:1fr; }
  .spg-qr-box{ max-width:260px; margin:0 auto; }
  .spg-plan-recap{ grid-template-columns:1fr; }
  .spg-contact-grid{ grid-template-columns:1fr; }
  .spg-ck-highlight{ margin:0 var(--spg-s5) var(--spg-s5); }
  .spg-pay-grid,.spg-panel-pad{ padding:var(--spg-s5); }
}