/* Bi'S MART palette supplied on 2026-10-04. Keep Roboto for body/form text. */
@font-face {
  font-family: "iCiel VAG Rounded Next";
  src: url("assets/fonts/iciel-vag-rounded-next-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "iCiel VAG Rounded Next";
  src: url("assets/fonts/iciel-vag-rounded-next-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 1000;
  font-display: swap;
}
:root {
  --brand-green: #198764;       /* R25 G135 B100 */
  --brand-green-light: #289678; /* R40 G150 B120 */
  --brand-orange: #d75500;      /* R215 G85 B0 */
  --brand-orange-light: #eb8c0a;/* R235 G140 B10 */
  --brand-cream: #fffac3;       /* R255 G250 B195 */
  --orange: var(--brand-orange);
  --orange-deep: var(--brand-orange);
  --orange-light: var(--brand-orange-light);
  --mint: var(--brand-green-light);
  --mint-deep: var(--brand-green);
  --mint-light: var(--brand-green-light);
  --cream: var(--brand-cream);
  --yellow: var(--brand-orange-light);
  --display: "iCiel VAG Rounded Next", "Roboto", sans-serif;
  --body: "Roboto", system-ui, sans-serif;
}
/* Replace remaining hard-coded green/orange accents in the legacy stylesheet. */
.primary-button, .form-next, .form-submit { background:var(--brand-orange); box-shadow:0 12px 26px rgba(215,85,0,.20); }
.primary-button:hover { background:var(--brand-orange); box-shadow:0 16px 30px rgba(215,85,0,.27); }
.primary-button { animation:none; }
.primary-button:hover { box-shadow:0 14px 30px rgba(215,85,0,.25); }
.card-mint { background:linear-gradient(145deg,var(--brand-green-light),var(--brand-green)); }
.card-orange, .connect-panel { background:linear-gradient(145deg,var(--brand-orange-light),var(--brand-orange)); }
.card-cream { background:var(--brand-cream); }
.section-kicker.light { color:var(--brand-cream); }
.progress-track span { background:linear-gradient(90deg,var(--brand-orange),var(--brand-orange-light)); }
.hero-visual { background:radial-gradient(circle at 50% 20%,#fff 0,rgba(40,150,120,.04) 42%,rgba(25,135,100,.10) 100%); }
.hero-visual:before { background-image:radial-gradient(circle at center,rgba(25,135,100,.2) 1px,transparent 1px); }
.chip-dot.orange { box-shadow:0 0 0 5px rgba(215,85,0,.12); }
.chip-dot.mint { box-shadow:0 0 0 5px rgba(25,135,100,.12); }
.orbit-one { background:rgba(235,140,10,.15); }
.orbit-two { background:rgba(40,150,120,.12); }
.pulse-dot { box-shadow:0 0 0 0 rgba(40,150,120,.45); }
@keyframes pulse { 70%{box-shadow:0 0 0 10px rgba(40,150,120,0)} 100%{box-shadow:0 0 0 0 rgba(40,150,120,0)} }
.journey-section:before { background:radial-gradient(circle,rgba(40,150,120,.18),transparent 68%); }
.journey-icon { background:rgba(40,150,120,.12); border-color:rgba(40,150,120,.3); }
.journey-step:not(:last-child):after { background:linear-gradient(to bottom,rgba(40,150,120,.8),rgba(40,150,120,.05)); }
.inline-assurance, .choice-icon, .review-edit { background:rgba(40,150,120,.07); }
.premise-fields, .choice-card:has(input:checked), .consent-box:has(input:checked) { background:#f5fbf8; }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus,
.choice-card:has(input:checked), .input-box input:focus, .input-box select:focus, .input-box textarea:focus {
  border-color:var(--brand-green); box-shadow:0 0 0 3px rgba(25,135,100,.13);
}
.submission-note { background:var(--brand-cream); }
.success-ring { border-color:rgba(40,150,120,.3); }
.success-check { background:var(--brand-green); box-shadow:0 16px 36px rgba(25,135,100,.22); }
.mini-window { background:linear-gradient(135deg,#fff,var(--brand-green-light)); }
.mini-door { background:linear-gradient(135deg,#fff,var(--brand-green)); }
h1, h2, h3 { letter-spacing:-.015em; }
h1 { line-height:1.08; }
.step-heading h3, .form-aside h2, .success-copy h2 { line-height:1.18; }

/* The visible generated QR is ONE SVG. Library canvas/image nodes stay off-DOM. */
.success-zalo-qr {
  width:min(500px,100%);
  max-width:100%;
  margin:0 auto 22px;
  padding:16px;
  display:grid;
  grid-template-columns:208px minmax(0,1fr);
  align-items:center;
  gap:20px;
  border:1px solid rgba(25,135,100,.22);
  border-radius:24px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  box-shadow:0 8px 28px rgba(25,135,100,.07);
  transform:none;
  animation:none;
  transition:border-color .2s ease;
}
.success-zalo-qr:hover, .success-zalo-qr.zalo-attention {
  transform:none; animation:none;
  border-color:var(--brand-green);
  box-shadow:0 8px 28px rgba(25,135,100,.07);
}
.success-zalo-qr__visual {
  width:208px; height:208px;
  min-width:0; max-width:100%;
  display:grid; place-items:center;
  flex:none; padding:0; border-radius:0; overflow:visible; background:#fff;
}
#affiliateQrGenerated {
  width:100%; height:100%; min-width:0; max-width:100%;
  display:grid; place-items:center; padding:0; box-sizing:border-box; background:#fff;
}
#affiliateQrGenerated > svg {
  display:block; width:100%; height:auto; max-width:100%; aspect-ratio:1;
  border-radius:0; shape-rendering:crispEdges;
}
/* Defensive: never reveal fallback draw nodes even if an old cached script runs. */
#affiliateQrGenerated > canvas { display:block !important; max-width:100%; }
#affiliateQrGenerated > img { display:none !important; }
#affiliateQrImage {
  display:block; width:100%; height:100%; max-width:100%;
  object-fit:contain; border-radius:0; opacity:1;
}
#affiliateQrImage[hidden], #affiliateQrGenerated[hidden], #affiliateQrCard[hidden] { display:none !important; }
.success-zalo-qr__copy { min-width:0; display:flex; flex-direction:column; gap:8px; overflow-wrap:anywhere; }
.success-zalo-qr__copy strong { color:var(--brand-green); font-size:17px; line-height:1.35; }
.success-zalo-qr__copy small { color:var(--muted); font-size:13px; line-height:1.5; }
.success-zalo-qr__copy .success-zalo-qr__mode { color:var(--muted); font-size:12px; font-weight:400; }
#affiliateQrPhone { color:var(--ink); font-size:14px; font-weight:700; }
.success-zalo-qr.qr-loading img { opacity:1; }

.success-contact-buttons { gap:12px; }
.contact-btn { min-height:54px; line-height:1.4; text-align:center; }
.contact-btn--call { background:var(--brand-green); box-shadow:0 8px 22px rgba(25,135,100,.18); }
.contact-btn--call:hover { background:var(--brand-green-light); box-shadow:0 10px 25px rgba(25,135,100,.2); }
.contact-btn--zalo { background:#fff; color:var(--brand-green); border-color:var(--brand-green); }
.contact-btn--zalo:hover { background:var(--brand-green); color:#fff; box-shadow:0 8px 22px rgba(25,135,100,.16); }
.contact-btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.contact-btn:focus-visible, .contact-secondary button:focus-visible, .contact-secondary a:focus-visible {
  outline:3px solid var(--brand-orange-light); outline-offset:4px;
}
.contact-secondary { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 18px; margin:0 auto 16px; }
.contact-secondary button, .contact-secondary a {
  border:0; background:transparent; color:var(--brand-green); padding:8px 2px;
  font:500 13px/1.5 var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.zalo-open-hint { background:#f5fbf8; border-color:rgba(25,135,100,.22); color:var(--ink); }
.success-copy { width:min(620px,100%); min-width:0; }
.success-screen { grid-template-columns:minmax(0,1fr); align-content:start; min-width:0; min-height:0; padding-bottom:max(32px,env(safe-area-inset-bottom)); }
.privacy-hero { background:var(--brand-orange); }
.privacy-hero span, .privacy-note { background-color:var(--brand-cream); color:var(--ink); }
.privacy-hero span { background:transparent; color:var(--brand-cream); }
@media (min-width:1024px) {
  .journey-step:not(:last-child):after { background:linear-gradient(to right,rgba(40,150,120,.8),rgba(40,150,120,.06)); }
}
@media (max-width:600px) {
  .success-zalo-qr { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; width:min(360px,100%); padding:16px; gap:12px; }
  .success-zalo-qr__visual { width:min(224px,100%); height:auto; aspect-ratio:1; flex:none; }
  #affiliateQrGenerated { width:100%; height:100%; padding:0; }
  #affiliateQrImage { width:100%; height:100%; }
  .success-zalo-qr__copy { width:100%; }
  .success-contact-buttons { display:grid; grid-template-columns:minmax(0,1fr); width:min(360px,100%); margin-inline:auto; }
  .contact-btn { width:100%; justify-content:center; padding:14px 16px; }
  .success-message-card { padding:22px 20px; }
  .success-actions { width:100%; }
  .success-actions > * { min-width:0; }
}
/* Decorative orbits must not widen the mobile layout viewport. */
html { overflow-x:clip; }
.form-experience { width:100vw; max-width:100vw; }
@media (max-width:1023px) {
  .hero.section-shell { display:grid; grid-template-columns:minmax(0,1fr); }
  .hero-copy, .hero-visual { min-width:0; width:100%; }
}