/* =========================================================================
   X-DMAIC contact.css — Liên hệ (canvas "Liên hệ – brief kể chuyện + Kè X") + Đăng ký.
   Có phần dựng lại form CRM (plugin wa-agency-crm) theo DESIGN.md: ô 52px bo 12, nhãn trên ô, nút lime.
   ========================================================================= */

/* ---------- Hero ---------- */
.xd-chero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center;padding-top:56px}
.xd-chero__copy{display:flex;flex-direction:column;gap:24px}
.xd-chero__h{font-size:var(--xd-t-h1);font-weight:800;line-height:1.08;letter-spacing:-.04em;max-width:900px}
.xd-chero__h .xd-eyebrow{display:block;margin-bottom:16px;font-size:13px;letter-spacing:.16em;line-height:1.4}
.xd-chero__h em{font-style:normal;color:var(--xd-lime)}
.xd-chero .xd-lead{color:rgba(255,255,255,.92);max-width:560px}
.xd-chero .xb-line{color:#fff}
.xd-chero__kex img{width:100%;max-width:380px;height:auto;margin:0 auto}
.xd-live{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(11,18,32,.35);font-size:14px;font-weight:600}
.xd-live i{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.6)}
.xd-live.is-open i{background:var(--xd-lime)}
@media (prefers-reduced-motion:no-preference){.xd-live.is-open i{animation:xd-live 2s var(--xd-ease) infinite}}
@keyframes xd-live{0%{box-shadow:0 0 0 0 rgba(213,242,91,.6)}100%{box-shadow:0 0 0 12px rgba(213,242,91,0)}}

/* ---------- Khung chung ---------- */
.xd-contact{padding-bottom:var(--xd-section-y)}
.xd-csec{padding-top:var(--xd-section-y)}
.xd-csec__head{align-items:end;margin-bottom:40px}
.xd-contact .xd-h2{max-width:760px}

/* ---------- Brief ---------- */
.xd-brief{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:start}
.xd-mad{padding:40px;border-radius:28px;background:#fff;border:1px solid var(--xd-line);font-size:clamp(20px,2vw,27px);line-height:2.05;font-weight:600;letter-spacing:-.01em;color:var(--xd-ink)}
.xd-mad p{margin:0}
.xd-fi{display:inline-block;width:12ch;max-width:100%;min-height:44px;padding:0 6px;border:0;border-bottom:2px dashed var(--xd-blue);background:var(--xd-blue-50);border-radius:6px 6px 0 0;font-weight:700;color:var(--xd-blue);vertical-align:baseline}
.xd-fi::placeholder{color:#5B7BD9;font-weight:500}
.xd-fi:focus{outline:3px solid var(--xd-blue);outline-offset:2px;border-bottom-style:solid}
.xd-fi[aria-invalid="true"]{border-bottom-color:var(--xd-error);background:#FEF2F2}
.xd-bchips{display:inline-flex;flex-wrap:wrap;gap:8px;vertical-align:middle;margin:4px 0}
.xd-mad .xd-chip{min-height:40px;font-size:15px;line-height:1;background:#fff}
.xd-mad--done{display:flex;flex-direction:column;gap:18px;font-size:16px;line-height:1.6;font-weight:400;outline:none}
.xd-mad--done[hidden]{display:none}
.xd-mad--done>b{font-size:clamp(22px,2.2vw,28px);line-height:1.3;font-weight:800}
.xd-mad--done ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.xd-mad--done li{display:flex;flex-direction:column;padding:16px 18px;border-radius:16px;background:var(--xd-paper)}
.xd-mad--done li b{font-size:15px;color:var(--xd-blue)}

.xd-bside{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
.xd-bkx{display:flex;align-items:flex-end;gap:12px}
.xd-bkx__img img{width:96px;height:auto}
.xd-bub{flex:1;margin:0 0 12px;padding:12px 16px;border-radius:16px 16px 16px 4px;background:var(--xd-ink);color:#fff;font-size:15px;font-weight:600;line-height:1.45}
.xd-ticket{padding:20px 22px;border-radius:20px;background:#fff;border:1px solid var(--xd-line);display:flex;flex-direction:column}
.xd-ticket__h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px dashed var(--xd-line)}
.xd-ticket__h span{font-size:13px;color:var(--xd-sub)}
.xd-ticket__r{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px dashed var(--xd-line);font-size:14px}
.xd-ticket__r span{color:var(--xd-sub)}
.xd-ticket__r b{font-weight:700;overflow-wrap:anywhere}
.xd-ticket__r b.is-empty{font-weight:400;color:var(--xd-sub);font-style:italic}
.xd-ticket__prog{margin-top:14px;height:6px;border-radius:6px;background:var(--xd-paper);overflow:hidden}
.xd-ticket__prog i{display:block;height:100%;width:0;background:var(--xd-blue);transition:width .4s var(--xd-ease)}

/* ---------- Form CRM (plugin) theo design system ---------- */
/* Plugin tự vẽ khung (kể cả theo html[data-theme]): bỏ hết, khung do trang lo */
.xd-crm .wa-crm-form-container,html .xd-crm .wa-crm-form-container,.xd-crm .wa-crm-form-container:hover{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;max-width:none!important;backdrop-filter:none!important}
.xd-crm .wa-crm-form-header{text-align:left;margin-bottom:8px}
.xd-crm .wa-crm-form-header h2,.xd-crm .wa-crm-form-header h3{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--xd-ink)}
/* Form 2 bước: chỉ hiện bước đang mở */
.xd-crm .wa-crm-form-step:not(.active){display:none!important}
.xd-crm form{display:flex;flex-direction:column;gap:16px;margin:0}
.xd-crm .wa-crm-form-header h6{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--xd-ink)}
.xd-crm .wa-crm-form-header p{margin:0;color:var(--xd-sub-2)}
.xd-crm .wa-crm-form-grid,.xd-crm .wa-crm-form-step.active{display:flex;flex-direction:column;gap:16px}
.xd-crm .wa-crm-form-group{display:flex;flex-direction:column;gap:8px;margin:0}
.xd-crm label{font-size:14px;font-weight:600;color:var(--xd-ink)}
.xd-crm .required{color:var(--xd-error)}
.xd-crm .wa-crm-optional{font-weight:400;color:var(--xd-sub)}
.xd-crm input[type="text"],.xd-crm input[type="tel"],.xd-crm input[type="email"],.xd-crm input[type="url"],.xd-crm select,.xd-crm textarea{width:100%;min-height:52px;padding:0 16px;border-radius:var(--xd-r-sm);border:1.5px solid var(--xd-line);background:#fff;font-size:16px;color:var(--xd-ink);box-shadow:none}
.xd-crm textarea{padding:14px 16px;min-height:120px}
.xd-crm input:focus,.xd-crm select:focus,.xd-crm textarea:focus{outline:3px solid var(--xd-blue);outline-offset:2px;border-color:var(--xd-blue)}
.xd-crm [aria-invalid="true"]{border-color:var(--xd-error)}
.xd-crm .wa-crm-field-error{margin:0;font-size:13px;font-weight:500;color:#B91C1C}
.xd-crm .wa-crm-privacy-label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:400;line-height:1.55;color:var(--xd-sub-2)}
.xd-crm .wa-crm-privacy-label input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--xd-blue)}
.xd-crm .wa-crm-privacy-label a{color:var(--xd-blue)}
.xd-crm .wa-crm-btn,.xd-crm button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 24px;border:0;border-radius:var(--xd-r-pill);background:var(--xd-lime);color:var(--xd-ink);font-size:16px;font-weight:700;cursor:pointer;box-shadow:none;transition:background var(--xd-fast)}
/* Plugin tô nút bằng selector mạnh hơn (kể cả theo html[data-theme]): ép về nút lime của design system */
.xd-crm .wa-crm-btn,.xd-crm .wa-crm-btn-finish,.xd-crm button[type="submit"]{background:var(--xd-lime)!important;background-image:none!important;color:var(--xd-ink)!important;border:0!important;box-shadow:none!important}
.xd-crm .wa-crm-btn:hover{background:var(--xd-lime-hover)!important}
.xd-crm .wa-crm-btn-skip{background:none!important;color:var(--xd-ink)!important;box-shadow:inset 0 0 0 1.5px currentColor!important}
.xd-crm .wa-crm-btn:disabled{opacity:.6;cursor:wait}
.xd-crm .wa-crm-message{padding:14px 16px;border-radius:var(--xd-r-sm);font-size:14.5px;line-height:1.55}
.xd-crm .wa-crm-message.success,.xd-crm .wa-crm-message[data-type="success"]{background:#F0FDF4;color:#166534}
.xd-crm .wa-crm-message.error,.xd-crm .wa-crm-message[data-type="error"]{background:#FEF2F2;color:#991B1B}
/* Trong brief: tên và nhu cầu đã có ở câu chuyện bên trái, chỉ hỏi số điện thoại + đồng ý */
.xd-crm .wa-crm-privacy-label input{accent-color:var(--xd-ink)}
/* Form 2 bước (trang Đăng ký): bước dạng chip theo DESIGN.md thay thanh gradient + vòng số của plugin; nút gửi rộng hết khung như brief Liên hệ */
.xd-crm .wa-crm-wizard-progress-bar{position:relative;margin:4px 0 4px!important;padding:0!important}
.xd-crm .wa-crm-wizard-progress-line{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;height:3px!important;margin:0!important;border-radius:999px!important;background:var(--xd-line)!important;transform:none!important}
.xd-crm .wa-crm-wizard-progress-fill{height:100%!important;border-radius:999px!important;background:var(--xd-ink)!important;background-image:none!important;transition:width .3s var(--xd-ease)}
.xd-crm .wa-crm-wizard-steps-indicator{display:flex!important;justify-content:flex-start!important;gap:8px!important;padding:0 0 14px!important;margin:0!important}
.xd-crm .wa-crm-wizard-step-node{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;width:auto!important;margin:0!important;padding:6px 14px 6px 6px!important;border-radius:999px!important;background:var(--xd-paper)!important;text-align:left!important}
.xd-crm .wa-crm-wizard-step-node .step-num{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;margin:0!important;border:0!important;border-radius:50%!important;background:#fff!important;color:var(--xd-sub)!important;box-shadow:none!important;font-size:13px!important;font-weight:800!important}
.xd-crm .wa-crm-wizard-step-node .step-label{margin:0!important;font-size:13px!important;font-weight:600!important;color:var(--xd-sub)!important}
.xd-crm .wa-crm-wizard-step-node.active{background:var(--xd-ink)!important}
.xd-crm .wa-crm-wizard-step-node.active .step-num{background:var(--xd-lime)!important;color:var(--xd-ink)!important}
.xd-crm .wa-crm-wizard-step-node.active .step-label,.xd-crm .wa-crm-wizard-step-node.active .wa-crm-step-opt{color:#fff!important}
.xd-crm .wa-crm-wizard-step-node.completed .step-num{background:var(--xd-ink)!important;color:var(--xd-lime)!important}
.xd-crm .wa-crm-step-opt{font-weight:400}
.xd-crm .wa-crm-wizard-navigation{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin:0!important}
.xd-crm .wa-crm-nav-btn{width:100%!important;max-width:none!important;min-height:52px!important;height:auto!important;margin:0!important;border-radius:var(--xd-r-pill)!important;font-weight:700!important}
.xd-crm .wa-crm-btn-finish{order:-1}
@media (max-width:480px){.xd-crm .wa-crm-wizard-step-node .wa-crm-step-opt{display:none}}
/* Trang Đăng ký: bỏ câu mô tả trong form (đã nói ở hero và khung bên trái); tên + số điện thoại chung một hàng trên màn rộng */
.xd-reg__form .wa-crm-form-header p{display:none}
@media (min-width:700px){
  .xd-reg__form .wa-crm-form-step[data-step="1"] .wa-crm-form-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:16px}
  .xd-reg__form .wa-crm-form-step[data-step="1"] .wa-crm-form-grid>*{grid-column:1/-1}
  .xd-reg__form .wa-crm-form-step[data-step="1"] .wa-crm-form-group:has(#wa_crm_full_name),.xd-reg__form .wa-crm-form-step[data-step="1"] .wa-crm-form-group:has(#wa_crm_phone){grid-column:auto}
}
.xd-crm--brief{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--xd-line)}
.xd-crm--brief .wa-crm-form-header,.xd-crm--brief .wa-crm-form-group:has(#wa_crm_full_name),.xd-crm--brief .wa-crm-form-group:has(#wa_crm_demand),.xd-crm--brief .wa-crm-form-group:has(#wa_crm_email){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Cách liên hệ ---------- */
.xd-ways{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.xd-way{height:100%;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:24px;background:#fff;border:1px solid var(--xd-line);text-decoration:none;transition:border-color var(--xd-fast),transform var(--xd-fast)}
.xd-way:hover{border-color:var(--xd-ink);transform:translateY(-3px)}
.xd-way__ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--xd-blue-50);color:var(--xd-blue);margin-bottom:6px}
.xd-way b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.xd-way .xd-sub{font-size:15px;line-height:1.6}
.xd-way__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--xd-line);display:flex;flex-direction:column;font-weight:700}
.xd-way__meta small{font-weight:400;font-size:13px;color:var(--xd-sub)}

/* ---------- Văn phòng + bản đồ ---------- */
.xd-office{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--xd-line)}
.xd-office__l{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding:44px}
.xd-office dl{margin:0;display:flex;flex-direction:column;gap:12px;width:100%}
.xd-office dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding-bottom:12px;border-bottom:1px solid var(--xd-line)}
.xd-office dt{font-size:14px;color:var(--xd-sub)}
.xd-office dd{margin:0;font-weight:600}
.xd-office dd a{text-decoration:none}
.xd-map{position:relative;min-height:380px;overflow:hidden;background:#E8EEF8;background-image:linear-gradient(rgba(1,87,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(1,87,255,.08) 1px,transparent 1px);background-size:40px 40px}
.xd-map__road{position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(11,18,32,.06)}
.xd-map__road:nth-child(1){left:-10%;right:-10%;top:42%;height:22px;transform:rotate(-8deg)}
.xd-map__road:nth-child(2){top:-10%;bottom:-10%;left:58%;width:18px;transform:rotate(12deg)}
.xd-map__road:nth-child(3){left:-10%;right:30%;top:72%;height:14px;transform:rotate(4deg)}
.xd-map__pin{position:absolute;left:56%;top:36%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%)}
.xd-map__pin b{padding:8px 14px;border-radius:999px;background:var(--xd-ink);color:var(--xd-lime);font-size:13px}
.xd-map__pin i{width:14px;height:14px;margin-top:6px;border-radius:99px;background:var(--xd-blue);box-shadow:0 0 0 6px rgba(1,87,255,.2)}
.xd-map__btn{position:absolute;left:50%;bottom:24px;transform:translateX(-50%)}
.xd-map.is-loaded iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- FAQ ---------- */
.xd-cfaq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.xd-cfaq__l{display:flex;flex-direction:column;gap:24px}
.xd-cfaq__l img{width:220px;height:auto}
.xd-faq{display:flex;flex-direction:column;gap:10px}
.xd-faq details{border-radius:16px;background:#fff;border:1px solid var(--xd-line)}
.xd-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 22px;font-size:17px;font-weight:700;cursor:pointer}
.xd-faq summary::-webkit-details-marker{display:none}
.xd-faq summary::after{content:"+";flex:none;font-size:24px;font-weight:400;color:var(--xd-blue);transition:transform var(--xd-fast)}
.xd-faq details[open] summary::after{transform:rotate(45deg)}
.xd-faq p{margin:0;padding:0 22px 18px;font-size:16px;line-height:1.7;color:var(--xd-sub-2)}

/* ---------- CTA cuối ---------- */
.xd-ccta{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.xd-ccta .xb-line{color:#fff}

/* ---------- Đăng ký /register/ ---------- */
.xd-reg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--xd-line);box-shadow:var(--xd-shadow-1)}
.xd-reg__aside{position:relative;display:flex;flex-direction:column;gap:18px;padding:40px;background:var(--xd-ink);color:#fff;overflow:hidden}
.xd-reg__k{align-self:flex-start;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(213,242,91,.14);color:var(--xd-lime)}
.xd-reg__t{font-size:clamp(26px,2.6vw,34px);font-weight:800;line-height:1.15;letter-spacing:-.03em}
.xd-reg__perks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.xd-reg__perks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.xd-reg__perks svg{flex:none;margin-top:3px;color:var(--xd-lime)}
.xd-reg__proof{color:#fff;font-size:14px}
.xd-reg__proof:hover{color:var(--xd-lime)}
.xd-reg__aside .xb-line{color:#fff;align-self:flex-start}
.xd-reg__hours{margin:0;font-size:13.5px;color:var(--xd-muted)}
.xd-reg__aside .xd-pic img,.xd-reg__aside>img{width:180px;height:auto;margin:auto 0 -64px auto}
.xd-reg__form{padding:40px}
.xd-steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.xd-steps3 li{counter-increment:s;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:20px;background:#fff;border:1px solid var(--xd-line)}
.xd-steps3 li::before{content:counter(s,decimal-leading-zero);font-size:28px;font-weight:800;color:var(--xd-blue);letter-spacing:-.03em}
.xd-steps3 b{font-size:18px}
.xd-steps3 span{font-size:15px;line-height:1.6;color:var(--xd-sub-2)}

@media (max-width:960px){
  .xd-chero,.xd-brief,.xd-office,.xd-cfaq,.xd-reg{grid-template-columns:minmax(0,1fr)}
  .xd-chero{padding-top:32px;gap:24px}
  .xd-chero__kex{display:none}
  .xd-mad{padding:24px;line-height:1.9}
  .xd-bside{position:static}
  .xd-ways,.xd-steps3{grid-template-columns:minmax(0,1fr)}
  .xd-office__l,.xd-reg__aside,.xd-reg__form{padding:28px}
  .xd-map{min-height:280px}
  .xd-reg__aside .xd-pic img,.xd-reg__aside>img{display:none}
}