/* Form "Nhận tư vấn" (src/contactForm.mjs) — dùng chung trang chủ, landing, /lien-he. */
.ct { scroll-margin-top: 80px; }
.ct-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; padding: 44px; border-radius: 32px; background: linear-gradient(155deg, #1b1a24 0%, #121118 100%); color: #fff; box-shadow: 0 40px 80px -40px rgba(20,12,40,.55); }
.ct-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ct-glow::before, .ct-glow::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.ct-glow::before { width: 380px; height: 380px; left: -120px; top: -140px; background: rgba(255,92,64,.55); }
.ct-glow::after { width: 300px; height: 300px; right: 20%; bottom: -160px; background: rgba(255,154,92,.35); }
.ct-intro, .ct-panel { position: relative; min-width: 0; }
.ct-kicker { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 600; color: #ffd2c6; letter-spacing: .02em; }
.ct-intro h2 { margin: 14px 0 12px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.18; color: #fff; }
.ct-intro h2 em { font-style: normal; color: #ff9a7f; }
.ct-intro > p { margin: 0; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.6; }
.ct-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ct-points li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.5; }
.ct-points svg, .ct-done-ico svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-points svg { margin-top: 2px; color: #6ee7b7; }
.ct-intro .ct-direct { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,.6); }
.ct-direct a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.ct-direct a:hover { border-color: #ff9a7f; }
.ct-panel { background: #fff; color: var(--ink); border-radius: 24px; padding: 26px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.ct-f em { color: #dc2626; font-style: normal; }
.ct-f input, .ct-f select, .ct-f textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: #fcfcfd; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.ct-f textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.ct-f input:focus, .ct-f select:focus, .ct-f textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,92,64,.18); background: #fff; }
.ct-f [aria-invalid=true] { border-color: #dc2626; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-submit { width: 100%; justify-content: center; margin-top: 4px; }
.ct-submit[aria-busy=true] { opacity: .7; pointer-events: none; }
.ct-msg { min-height: 20px; margin: 10px 0 0; font-size: 14px; color: #b91c1c; }
.ct-msg:empty { min-height: 0; margin: 0; }
.ct-consent { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ct-consent a { color: var(--ink-2); }
.ct-done { text-align: center; padding: 28px 8px; outline: none; }
.ct-done-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #ecfdf5; color: #059669; }
.ct-done-ico svg { width: 28px; height: 28px; }
.ct-done h3 { margin: 14px 0 6px; font-size: 22px; }
.ct-done p { margin: 0 0 18px; color: var(--muted); }
.ct-page-head { padding-top: 24px; }
.ct-page .ct { padding-top: 16px; }
.ct-flash { animation: ct-flash 1.2s ease; }
@keyframes ct-flash { 0%, 100% { box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); } 35% { box-shadow: 0 0 0 4px rgba(255,92,64,.45), 0 30px 60px -24px rgba(0,0,0,.55); } }
@media (prefers-reduced-motion: reduce) { .ct-flash { animation: none; } .ct-f input, .ct-f select, .ct-f textarea { transition: none; } }
@media (max-width: 900px) {
  .ct-card { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; border-radius: 26px; }
}
@media (max-width: 560px) {
  .ct-card { padding: 22px 16px; margin: 0 -4px; }
  .ct-row { grid-template-columns: 1fr; gap: 0; }
  .ct-panel { padding: 20px 16px; border-radius: 20px; }
  .ct-intro h2 { font-size: 25px; }
  .ct-points { display: none; }
  .ct-intro .ct-direct { margin-top: 14px; }
}
