@import url('/lead-form-shared.css?v=1');
/* The one lead form of the site (scripts/lead-form.mjs). Prefix lf-.
   Works on the corporate pages (body.pw) and on the service pages: only shared tokens are used (--surface, --text, --edge, --btn …),
   the accent comes from --lf-a, which follows the chosen service. */
.lf-wrap,.lf-chip,.lf-ch-card{--lf-a:#88e4ff}
.lf-wrap[data-accent=ads],.lf-chip[data-accent=ads]{--lf-a:#88e4ff}
.lf-wrap[data-accent=commerce],.lf-chip[data-accent=commerce]{--lf-a:#ffbd80}
.lf-wrap[data-accent=web],.lf-chip[data-accent=web]{--lf-a:#c0a2ff}
.lf-wrap[data-accent=social],.lf-chip[data-accent=social]{--lf-a:#ff9bc1}
.lf-wrap[data-accent=ai],.lf-chip[data-accent=ai]{--lf-a:#85e1c1}
.lf-wrap[data-accent=data],.lf-chip[data-accent=data]{--lf-a:#e0cd9b}
.lf-wrap[data-accent=seo],.lf-chip[data-accent=seo]{--lf-a:#9db8ff}
.lf-wrap[data-accent=strategy],.lf-chip[data-accent=strategy]{--lf-a:#ffa98a}
.lf-wrap[data-accent=training],.lf-chip[data-accent=training]{--lf-a:#b6e36f}
.lf-wrap[data-accent=crm],.lf-chip[data-accent=crm]{--lf-a:#f5a3c0}

/* ---------- card ---------- */
.lf-wrap{--lf-r:24px;position:relative;isolation:isolate;border-radius:var(--lf-r);color:var(--text);font-family:inherit}
.lf-wrap::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:calc(var(--lf-r) + 1px);padding:1px;pointer-events:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--lf-a) 90%,transparent),transparent 32%,transparent 60%,color-mix(in srgb,var(--lf-a) 50%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lf-wrap::after{content:"";position:absolute;inset:-34px -26px;z-index:-2;border-radius:60px;pointer-events:none;opacity:.85;filter:blur(26px);
  background:radial-gradient(55% 46% at 50% 0,color-mix(in srgb,var(--lf-a) 26%,transparent),transparent 72%),radial-gradient(40% 36% at 90% 100%,color-mix(in srgb,var(--lf-a) 14%,transparent),transparent 70%)}
.lf,.lf-done{position:relative;border-radius:var(--lf-r);padding:clamp(20px,3.4vw,34px);
  background:linear-gradient(165deg,color-mix(in srgb,var(--lf-a) 7%,var(--surface)),var(--surface-3) 70%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent),0 30px 70px -30px rgba(0,0,0,.6)}
.lf{display:grid;gap:20px}
.lf[hidden]{display:none}
.lf-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lf-a)}

/* ---------- fields ---------- */
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lf-f{display:grid;gap:8px;min-width:0;align-content:start}
.lf-f label,.lf-set legend{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--text-2)}
.lf-f label i{font-style:normal;color:var(--lf-a);margin-left:2px}
.lf-f label em,.lf-set legend em{margin-left:8px;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lf-box{position:relative;display:block}
.lf-box input,.lf-box textarea{display:block;width:100%;box-sizing:border-box;margin:0;font:inherit;font-size:16px;line-height:1.4;color:var(--text);
  background:color-mix(in srgb,var(--text) 5%,transparent);border-style:solid;border-width:1px;border-color:var(--edge);border-radius:15px;padding:0 44px 0 16px;height:54px;
  transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.lf-box textarea{height:auto;min-height:96px;padding:14px 16px;resize:vertical;line-height:1.55}
.lf-box input::placeholder,.lf-box textarea::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)}
.lf-box input:hover,.lf-box textarea:hover{border-color:color-mix(in srgb,var(--lf-a) 45%,var(--edge))}
.lf-box input:focus,.lf-box textarea:focus{outline:none;background:color-mix(in srgb,var(--text) 7%,transparent);border-color:var(--lf-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--lf-a) 22%,transparent),0 10px 34px -12px color-mix(in srgb,var(--lf-a) 55%,transparent)}
.lf-box input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 60px var(--surface) inset}
.lf-tick{position:absolute;right:15px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--good,#8ce0b4);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--ease,ease);pointer-events:none}
.lf-f.is-ok .lf-tick{opacity:1;transform:none}
.lf-f.is-bad .lf-box input{border-color:var(--bad,#ff9b9b);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad,#ff9b9b) 18%,transparent)}
.lf-err{font-size:12.5px;line-height:1.4;color:var(--bad,#ff9b9b)}
.lf-err:empty{display:none}

.lf-set{margin:0;padding:0;min-width:0;border-style:none;border-width:0;display:grid;gap:11px}
.lf-set legend{padding:0;float:left;width:100%;margin-bottom:11px}
.lf-set legend+*{clear:both}
.lf-chips{display:flex;flex-wrap:wrap;gap:9px}
.lf-chip{position:relative;display:block;cursor:pointer}
.lf-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lf-chip span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--text-2);
  background:color-mix(in srgb,var(--text) 4%,transparent);border-style:solid;border-width:1px;border-color:var(--edge);transition:background .2s,border-color .2s,color .2s,box-shadow .25s,transform .2s var(--ease,ease)}
.lf-chip svg{width:17px;height:17px;flex:none;color:var(--lf-a)}
.lf-chip b{font-weight:inherit}
.lf-chip:hover span{border-color:color-mix(in srgb,var(--lf-a) 60%,var(--edge));color:var(--text)}
.lf-chip input:checked+span{color:var(--text);background:color-mix(in srgb,var(--lf-a) 20%,transparent);border-color:var(--lf-a);box-shadow:0 0 0 1px color-mix(in srgb,var(--lf-a) 45%,transparent),0 8px 24px -10px var(--lf-a)}
.lf-chip input:focus-visible+span{outline:2px solid var(--lf-a);outline-offset:3px}
.lf-chips.is-budget .lf-chip{flex:1 1 auto}
.lf-chips.is-budget .lf-chip span{display:flex;justify-content:center;padding:9px 16px}
.lf-chips[data-lf-services] .lf-chip{flex:1 1 auto}
.lf-chips[data-lf-services]::after{content:"";flex:999 1 0;min-width:0}
.lf-chips[data-lf-services] .lf-chip span{display:flex}

/* ---------- submit ---------- */
.lf-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;height:60px;margin:2px 0 0;padding:0 22px;border-radius:17px;cursor:pointer;
  font:inherit;font-size:16.5px;font-weight:700;letter-spacing:.01em;color:var(--btn-text);border-style:solid;border-width:1px;border-color:var(--btn-border);
  background:linear-gradient(115deg,var(--btn),color-mix(in srgb,var(--btn) 55%,var(--lf-a)));
  box-shadow:0 16px 44px -14px color-mix(in srgb,var(--lf-a) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .2s var(--ease,ease),box-shadow .25s,filter .2s}
.lf-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease,ease)}
.lf-go:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 22px 52px -14px color-mix(in srgb,var(--lf-a) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.6)}
.lf-go:hover svg{transform:translateX(5px)}
.lf-go:active{transform:none}
.lf-go:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.lf-go::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-130%)}
@media (prefers-reduced-motion:no-preference){.lf-go::after{animation:lf-sheen 5s ease-in-out 1.2s infinite}}
@keyframes lf-sheen{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.lf-fine{margin:-4px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted)}
.lf-status{margin:0;text-align:center;font-size:13.5px;color:var(--text-2)}
.lf-status:empty{display:none}

/* ---------- ready step ---------- */
.lf-done{display:grid;gap:16px;justify-items:start}
.lf-done[hidden]{display:none}
.lf-done:focus{outline:none}
.lf-done-ico{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;color:var(--lf-a);background:color-mix(in srgb,var(--lf-a) 16%,transparent);box-shadow:0 0 0 8px color-mix(in srgb,var(--lf-a) 8%,transparent)}
.lf-done-ico svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lf-done-ico circle{opacity:.35}
.lf-done-ico path{stroke-dasharray:40;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.lf-done:not([hidden]) .lf-done-ico path{animation:lf-draw .6s .15s ease-out both}}
@keyframes lf-draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.lf-done h3{margin:0;font-size:clamp(22px,3vw,28px);line-height:1.2;font-weight:600;color:var(--text)}
.lf-done-lead{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2);max-width:56ch}
.lf-sum{margin:0;width:100%;display:grid;border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--text) 4%,transparent);border-style:solid;border-width:1px;border-color:var(--edge)}
.lf-sum div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:11px 16px;border-top-style:solid;border-top-width:1px;border-top-color:var(--edge)}
.lf-sum div:first-child{border-top-width:0}
.lf-sum dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.lf-sum dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;white-space:pre-line}
.lf-done-acts{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.lf-copy,.lf-open{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:14px;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;text-decoration:none;transition:transform .2s var(--ease,ease),border-color .2s,background .2s}
.lf-copy{color:var(--btn-text);background:var(--btn);border-style:solid;border-width:1px;border-color:var(--btn-border)}
.lf-open{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);border-style:solid;border-width:1px;border-color:var(--edge)}
.lf-copy svg,.lf-open svg{width:19px;height:19px;flex:none}
.lf-open svg{color:var(--lf-a)}
.lf-copy:hover,.lf-open:hover{transform:translateY(-2px)}
.lf-open:hover{border-color:var(--lf-a)}
.lf-copy:focus-visible,.lf-open:focus-visible,.lf-back:focus-visible{outline:2px solid var(--lf-a);outline-offset:3px}
.lf-back{padding:6px 2px;background:none;border-style:none;border-width:0;font:inherit;font-size:13.5px;color:var(--text-2);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.lf-back:hover{color:var(--text)}

/* ---------- slim channel line (service pages, article) ---------- */
.lf-row-ch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.lf-row-ch>span:first-child{font-size:13px;color:var(--muted);margin-right:4px}
.lf-row-ch a,.lf-row-ch .is-off{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;font-size:13.5px;font-weight:500;text-decoration:none;color:var(--text-2);
  background:color-mix(in srgb,var(--text) 4%,transparent);border-style:solid;border-width:1px;border-color:var(--edge);transition:border-color .2s,color .2s,transform .2s var(--ease,ease)}
.lf-row-ch svg{width:17px;height:17px;flex:none;color:#88e4ff}
.lf-row-ch [data-ch=messenger] svg{color:#c79bff}
.lf-row-ch [data-ch=zalo] svg{color:#6fd0ff}
.lf-row-ch b{font-weight:inherit}
.lf-row-ch i{font-style:normal;font-size:11px;color:var(--muted)}
.lf-row-ch a:hover{color:var(--text);border-color:var(--lf-a);transform:translateY(-2px)}
.lf-row-ch a:focus-visible{outline:2px solid var(--lf-a);outline-offset:3px}
.lf-row-ch .is-off{opacity:.75;border-style:dashed}

/* ---------- big channel cards (/lien-he/) ---------- */
.lf-ch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lf-ch li{display:block}
.lf-ch-card{position:relative;display:flex;align-items:center;gap:16px;height:100%;box-sizing:border-box;padding:20px;border-radius:22px;text-decoration:none;color:var(--text);overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--lf-a) 9%,var(--surface)),var(--surface-3));border-style:solid;border-width:1px;border-color:var(--edge);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent);transition:transform .3s var(--ease,ease),border-color .3s,box-shadow .3s}
.lf-ch-card[data-ch=fanpage]{--lf-a:#7fa8ff}
.lf-ch-card[data-ch=messenger]{--lf-a:#c79bff}
.lf-ch-card[data-ch=zalo]{--lf-a:#5cc8ff}
.lf-ch-card::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--lf-a) 30%,transparent),transparent);opacity:.6;transition:opacity .3s,transform .4s var(--ease,ease)}
a.lf-ch-card:hover{transform:translateY(-5px);border-color:var(--lf-a);box-shadow:0 26px 50px -24px color-mix(in srgb,var(--lf-a) 70%,transparent),inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)}
a.lf-ch-card:hover::before{opacity:1;transform:scale(1.4)}
a.lf-ch-card:focus-visible{outline:2px solid var(--lf-a);outline-offset:3px}
.lf-ch-ico{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;color:var(--lf-a);background:color-mix(in srgb,var(--lf-a) 16%,transparent);border-style:solid;border-width:1px;border-color:color-mix(in srgb,var(--lf-a) 40%,transparent)}
.lf-ch-ico svg{width:30px;height:30px;--lf-ink:var(--surface-3)}
.lf-ch-txt{position:relative;display:grid;gap:3px;min-width:0}
.lf-ch-txt small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lf-a)}
.lf-ch-txt b{font-size:18px;font-weight:600;line-height:1.25}
.lf-ch-txt em{font-style:normal;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.lf-ch-go{position:relative;margin-left:auto;flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:16px;color:var(--lf-a);border-style:solid;border-width:1px;border-color:color-mix(in srgb,var(--lf-a) 40%,transparent);transition:background .25s,color .25s,transform .3s var(--ease,ease)}
a.lf-ch-card:hover .lf-ch-go{background:var(--lf-a);color:var(--btn-text);transform:rotate(45deg)}
.lf-ch-card.is-off{border-style:dashed;cursor:default;opacity:.82}
.lf-ch-card.is-off .lf-ch-go{opacity:.4}

@media (max-width:640px){
  .lf-row{grid-template-columns:1fr}
  .lf-sum div{grid-template-columns:1fr;gap:2px}
  .lf-go{height:58px}
  .lf-done-acts>*{flex:1 1 100%;justify-content:center}
  .lf-ch-card{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .lf-wrap *,.lf-wrap{transition:none!important}
  .lf-ch-card,.lf-ch-card *{transition:none!important}
}

/* service pages: the form sits in the middle of a chapter */
.lf-lp{width:min(820px,100%);margin:clamp(22px,3vw,38px) auto 0}
.lf-lp .lf-row-ch{margin-top:30px}

/* narrow screens: keep the glow inside the page gutter so it never widens the page */
@media (max-width:700px){.lf-wrap::after{inset:-30px -10px}}

/* ---------- "Dịch vụ quan tâm" drop-down (full form): a combobox button + a listbox of the same radios ---------- */
.lf-wrap.has-menu{z-index:30}
.lf-select{position:relative;min-width:0}
.lf-select.is-open{z-index:40}
.lf-sel{position:relative;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;height:54px;margin:0;padding:0 14px 0 10px;cursor:pointer;text-align:left;font:inherit;font-size:16px;line-height:1.3;color:var(--text);
  background:color-mix(in srgb,var(--text) 5%,transparent);border-style:solid;border-width:1px;border-color:var(--edge);border-radius:15px;
  transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.lf-sel:hover{border-color:color-mix(in srgb,var(--lf-a) 45%,var(--edge))}
.lf-sel:focus-visible,.lf-select.is-open .lf-sel{outline:none;background:color-mix(in srgb,var(--text) 7%,transparent);border-color:var(--lf-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--lf-a) 22%,transparent),0 10px 34px -12px color-mix(in srgb,var(--lf-a) 55%,transparent)}
.lf-sel-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--lf-a);background:color-mix(in srgb,var(--lf-a) 16%,transparent)}
.lf-sel-ico svg{width:19px;height:19px}
.lf-sel-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.lf-sel-caret{flex:none;width:20px;height:20px;fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease,ease),stroke .2s}
.lf-select.is-open .lf-sel-caret{transform:rotate(180deg);stroke:var(--lf-a)}

.lf-sel-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:41;box-sizing:border-box;max-height:min(468px,62vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 30%,transparent) transparent;padding:8px;border-radius:18px;
  background:var(--chrome-bg-deep,#16185a);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-style:solid;border-width:1px;border-color:var(--chrome-edge,rgb(150 165 255/.26));
  box-shadow:var(--chrome-shadow,0 24px 56px rgb(18 10 70/.55)),inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent);
  visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s,transform .2s var(--ease,ease),visibility 0s .2s}
.lf-select.is-open .lf-sel-list{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.lf-select.is-up .lf-sel-list{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.lf-select.is-up.is-open .lf-sel-list{transform:none}

.lf-sel-list .lf-opt{display:block}
.lf-sel-list .lf-opt input{pointer-events:none}
.lf-sel-list .lf-opt span{display:flex;align-items:center;gap:12px;min-height:46px;padding:7px 12px 7px 8px;border-radius:12px;font-size:15px;font-weight:500;line-height:1.3;color:var(--text-2);
  background:transparent;border-color:transparent;box-shadow:none;transform:none;transition:background .14s,color .14s}
.lf-sel-list .lf-opt svg.ico{width:32px;height:32px;padding:6px;box-sizing:border-box;border-radius:10px;background:color-mix(in srgb,var(--lf-a) 16%,transparent)}
.lf-sel-list .lf-opt b{flex:1 1 auto;min-width:0}
.lf-sel-list .lf-opt-ck{flex:none;width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--lf-a);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--ease,ease)}
.lf-sel-list .lf-opt:hover span,.lf-sel-list .lf-opt.is-active span{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent);border-color:transparent}
.lf-sel-list .lf-opt input:checked+span{color:var(--text);background:color-mix(in srgb,var(--lf-a) 15%,transparent);border-color:transparent;box-shadow:inset 3px 0 0 var(--lf-a)}
.lf-sel-list .lf-opt input:checked+span .lf-opt-ck{opacity:1;transform:none}
.lf-sel-list .lf-opt.is-active input:checked+span{background:color-mix(in srgb,var(--lf-a) 22%,transparent)}
.lf-sel-list .lf-opt input:focus-visible+span{outline:none}

@media (max-width:640px){
  .lf-sel-list{max-height:min(468px,62vh);padding:6px}
  .lf-sel-list .lf-opt span{min-height:48px;font-size:15.5px}
}