/**
 * ATP Lead Form — self-contained design system for the atp-lead-form widget.
 *
 * Every selector is scoped under the unique root wrapper `.aalfc-root` and uses
 * the unique class prefix `aalfc-`. This guarantees NO collision with Elementor
 * defaults or the home landing styles (atp-landing.css .hero/.btn/.container/
 * .eyebrow/.section-head, theme input reset). Values ported 1:1 from the inline
 * <style> of static/Lien-He-standalone.html (hero header + .contact-console +
 * .form-panel). Enqueued only when the atp-lead-form widget is present
 * (get_style_depends()).
 */

/* ── Root + reset (isolated) ─────────────────────────────────────────── */
.aalfc-root{
  --aalfc-brand:#00a889;
  --aalfc-brand-dark:#007966;
  --aalfc-yellow:#ffd34d;
  --aalfc-coral:#ff6b5f;
  --aalfc-ink:#071322;
  --aalfc-ink-soft:#26384d;
  --aalfc-muted:#65768a;
  --aalfc-line:#dce8ef;
  --aalfc-line-strong:#c5d8e4;
  --aalfc-radius:8px;
  --aalfc-shadow:0 26px 70px -50px rgba(7,19,34,.52);
  --aalfc-shadow-soft:0 18px 44px -34px rgba(7,19,34,.35);
  font-family:"Inter","Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--aalfc-ink);
  letter-spacing:0;
}
.aalfc-root *{box-sizing:border-box;margin:0;padding:0}
.aalfc-root a{color:inherit;text-decoration:none}
.aalfc-root button,.aalfc-root input,.aalfc-root textarea,.aalfc-root select{font:inherit}
.aalfc-root button{cursor:pointer}
.aalfc-root img{display:block;max-width:100%}

/* ── Hero (left intro + console grid) ────────────────────────────────── */
.aalfc-hero{padding:48px 0 64px;overflow:hidden}
.aalfc-grid{width:min(1180px,calc(100% - 40px));margin-inline:auto;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:42px;align-items:center}
.aalfc-intro{min-width:0}

.aalfc-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--aalfc-line);border-radius:999px;background:rgba(255,255,255,.82);color:#12493d;font-size:12.5px;font-weight:850}
.aalfc-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aalfc-brand);box-shadow:0 0 0 5px rgba(0,168,137,.12)}
.aalfc-title{margin-top:18px;font-size:74px;line-height:.94;font-weight:950;color:var(--aalfc-ink)}
.aalfc-title span{color:var(--aalfc-brand)}
.aalfc-sub{max-width:640px;margin-top:22px;color:var(--aalfc-ink-soft);font-size:18px;line-height:1.7}
.aalfc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── Buttons (gradient green primary + ghost) ────────────────────────── */
.aalfc-btn{
  min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 17px;border:1px solid transparent;border-radius:999px;
  font-size:14px;font-weight:850;line-height:1;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.aalfc-btn:hover{transform:translateY(-1px)}
.aalfc-btn:active{transform:translateY(0)}
.aalfc-btn-primary{color:#fff;background:linear-gradient(135deg,#00d4af,#c5f55f);box-shadow:0 18px 46px -30px rgba(0,168,137,.95)}
.aalfc-btn-ghost{color:var(--aalfc-ink);background:#fff;border-color:var(--aalfc-line)}
.aalfc-btn-lg{min-height:54px;padding:0 22px;font-size:15px}

/* ── Response strip ──────────────────────────────────────────────────── */
.aalfc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px;max-width:650px}
.aalfc-card{border:1px solid var(--aalfc-line);border-radius:var(--aalfc-radius);background:rgba(255,255,255,.88);padding:16px;box-shadow:var(--aalfc-shadow-soft)}
.aalfc-card b{display:block;font-size:24px;line-height:1;font-weight:950}
.aalfc-card span{display:block;margin-top:8px;color:var(--aalfc-muted);font-size:12.5px;font-weight:720;line-height:1.35}

/* ── Console (browser chrome + body) ─────────────────────────────────── */
.aalfc-console{min-width:0;border:1px solid var(--aalfc-line-strong);border-radius:var(--aalfc-radius);background:#fff;box-shadow:var(--aalfc-shadow);overflow:hidden}
.aalfc-console-head{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;border-bottom:1px solid var(--aalfc-line);background:linear-gradient(180deg,#fff,#f6fffc)}
.aalfc-dots{display:flex;gap:7px}
.aalfc-dots span{width:10px;height:10px;border-radius:50%;background:var(--aalfc-coral)}
.aalfc-dots span:nth-child(2){background:var(--aalfc-yellow)}
.aalfc-dots span:nth-child(3){background:var(--aalfc-brand)}
.aalfc-console-head b{font-size:13px;color:#26384d}
.aalfc-console-body{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:16px;padding:16px;background:#fbfffd}

/* ── Visual column (photo + mini channels) ───────────────────────────── */
.aalfc-visual{min-width:0;display:flex;flex-direction:column;gap:12px}
.aalfc-photo{position:relative;min-height:342px;border-radius:var(--aalfc-radius);overflow:hidden;background:#dfe8ea}
.aalfc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.aalfc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,19,34,.74))}
.aalfc-caption{position:absolute;left:18px;right:18px;bottom:18px;color:#fff;z-index:1}
.aalfc-caption b{display:block;font-size:24px;line-height:1.14}
.aalfc-caption span{display:block;margin-top:7px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.45}
.aalfc-channel-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.aalfc-mini{border:1px solid var(--aalfc-line);border-radius:var(--aalfc-radius);background:#fff;padding:14px}
.aalfc-mini small{display:block;color:var(--aalfc-brand-dark);font-size:11px;font-weight:900;text-transform:uppercase}
.aalfc-mini b{display:block;margin-top:6px;font-size:14px;line-height:1.25;overflow-wrap:anywhere}

/* ── Form panel (the design consultation form) ───────────────────────── */
.aalfc-form-panel{min-width:0;border:1px solid var(--aalfc-line);border-radius:var(--aalfc-radius);background:#fff;padding:20px}
.aalfc-form-title{font-size:28px;line-height:1.12;font-weight:930;color:var(--aalfc-ink)}
.aalfc-form-sub{margin-top:9px;color:var(--aalfc-muted);font-size:14px;line-height:1.55}
.aalfc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.aalfc-field{display:flex;flex-direction:column;gap:7px}
.aalfc-field-full{grid-column:1/-1}
.aalfc-label{color:#2d4056;font-size:12px;font-weight:850}
.aalfc-input,.aalfc-select,.aalfc-textarea{
  width:100%;min-width:0;border:1px solid var(--aalfc-line);border-radius:8px;
  background:#fafffd;color:var(--aalfc-ink);outline:0;padding:0 13px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.aalfc-input,.aalfc-select{height:46px}
.aalfc-textarea{min-height:96px;padding-top:12px;padding-bottom:12px;resize:vertical}
.aalfc-input:focus,.aalfc-select:focus,.aalfc-textarea:focus{border-color:rgba(0,168,137,.62);box-shadow:0 0 0 4px rgba(0,168,137,.12);background:#fff}
.aalfc-submit{width:100%;margin-top:14px}
.aalfc-privacy{margin-top:10px;color:var(--aalfc-muted);font-size:12px;line-height:1.45}
.aalfc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aalfc-msg{margin-top:8px;font-size:14px;font-weight:700;display:none}
.aalfc-msg.ok{display:block;color:#16a34a}
.aalfc-msg.err{display:block;color:#dc2626}

/* ── Simple skin: render_form is self-styled; just center it. ────────── */
.aalfc-simple{width:100%}
.aalfc-simple .aalfc-card-simple{max-width:560px;margin:0 auto}

/* ── Responsive (ported from static breakpoints) ─────────────────────── */
@media (max-width:1080px){
  .aalfc-title{font-size:60px}
  .aalfc-grid,.aalfc-console-body{grid-template-columns:1fr}
}
@media (max-width:860px){
  .aalfc-hero{padding:36px 0 48px}
  .aalfc-title{font-size:48px}
  .aalfc-strip{grid-template-columns:1fr}
  .aalfc-form-grid{grid-template-columns:1fr}
  .aalfc-field-full{grid-column:auto}
}
@media (max-width:560px){
  .aalfc-title{font-size:40px;line-height:1}
  .aalfc-sub{font-size:16px}
  .aalfc-photo{min-height:292px}
  .aalfc-channel-mini{grid-template-columns:1fr}
  .aalfc-grid{width:min(100% - 28px,1180px)}
}

/* === AA FIX (lien-he): override Elementor kit red a:hover + restore submit weight === */
/* Elementor Global Kit (.elementor-kit-1316) applies `a:hover{color:#FF0000}` site-wide.
   Re-assert design colours inside the scope. This file loads AFTER the kit CSS so an
   equal-specificity rule wins by source order (no !important needed). */
.aalfc-root a:hover{color:inherit}
.aalfc-root .aalfc-btn-primary:hover{color:#fff}
.aalfc-root .aalfc-btn-ghost:hover{color:var(--aalfc-ink)}
/* `.aalfc-root button{font:inherit}` (0,1,1) was overriding `.aalfc-btn{font-weight:850}` (0,1,0)
   for the submit <button>, leaving it un-bold while the <a> hero buttons stayed 850.
   Re-assert with higher specificity (0,2,0) to match the static design (.btn = 850). */
.aalfc-root .aalfc-submit{font-weight:850}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT SKIN — dark CTA banner, 2 columns (intro text + 2 buttons LEFT,
   lead form RIGHT). Scoped under the unique root `.aalfa-root`, prefix
   `aalfa-`. Self-contained, ported 1:1 from the inline <style> of
   static/Gioi-Thieu-standalone.html (.cta / .cta-box / .mini-form / .btn).
   Loaded both on frontend and Elementor editor preview (atp-leadform handle).
   ═══════════════════════════════════════════════════════════════════════ */
.aalfa-root{
  --aalfa-brand:#00a889;
  --aalfa-brand-dark:#007966;
  --aalfa-dark:#071322;
  --aalfa-ink:#071322;
  --aalfa-line:#dce8ef;
  --aalfa-radius:8px;
  font-family:"Inter","Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--aalfa-ink);
  letter-spacing:0;
  text-align:left;
}
.aalfa-root *{box-sizing:border-box;margin:0;padding:0}
.aalfa-root a{color:inherit;text-decoration:none}
.aalfa-root button,.aalfa-root input,.aalfa-root textarea{font:inherit}
.aalfa-root button{cursor:pointer}
.aalfa-root img{display:block;max-width:100%}

.aalfa-cta{padding:48px 0 34px}
.aalfa-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.aalfa-box{
  display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:stretch;
  border-radius:var(--aalfa-radius);background:var(--aalfa-dark);color:#fff;
  padding:34px;overflow:hidden;text-align:left;
}
.aalfa-intro{min-width:0}
.aalfa-kicker{display:inline-flex;margin-bottom:12px;color:#2fd8b4;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.aalfa-title{color:#fff;font-size:52px;line-height:1.04;font-weight:930}
.aalfa-lead{max-width:700px;margin-top:16px;color:rgba(255,255,255,.78);font-size:17px;line-height:1.65}
.aalfa-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Buttons (gradient green primary + light ghost on dark) */
.aalfa-btn{
  min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 17px;border:1px solid transparent;border-radius:999px;
  font-size:14px;font-weight:850;line-height:1;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.aalfa-btn:hover{transform:translateY(-1px)}
.aalfa-btn:active{transform:translateY(0)}
.aalfa-btn-primary{color:#fff;background:linear-gradient(135deg,#00d4af,#c5f55f);box-shadow:0 18px 46px -30px rgba(0,168,137,.95)}
.aalfa-btn-ghost{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.aalfa-btn-lg{min-height:54px;padding:0 22px;font-size:15px}

/* Form column (mini-form on the dark banner) */
.aalfa-form-col{min-width:0;display:flex}
.aalfa-form{flex:1;border:1px solid rgba(255,255,255,.16);border-radius:var(--aalfa-radius);background:rgba(255,255,255,.08);padding:18px}
.aalfa-form-title{color:#fff;font-size:20px;font-weight:900;line-height:1.2;margin-bottom:12px}
.aalfa-label{display:block;color:rgba(255,255,255,.72);font-size:12px;font-weight:800;margin-bottom:7px}
.aalfa-input{
  width:100%;height:46px;margin-bottom:10px;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;background:rgba(255,255,255,.1);color:#fff;padding:0 12px;outline:0;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.aalfa-input::placeholder{color:rgba(255,255,255,.46)}
.aalfa-input:focus{border-color:rgba(0,212,175,.6);box-shadow:0 0 0 4px rgba(0,212,175,.14);background:rgba(255,255,255,.14)}
.aalfa-form .aalfa-btn,.aalfa-submit{width:100%;margin-top:4px}
.aalfa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aalfa-privacy{margin-top:10px;color:rgba(255,255,255,.6);font-size:12px;line-height:1.45}
.aalfa-msg{margin-top:10px;font-size:13px;font-weight:700;display:none}
.aalfa-msg.ok{display:block;color:#7ef0c8}
.aalfa-msg.err{display:block;color:#ff9b91}

/* Elementor kit overrides (same source-order trick as the console skin) */
.aalfa-root a:hover{color:inherit}
.aalfa-root .aalfa-btn-primary:hover{color:#fff}
.aalfa-root .aalfa-btn-ghost:hover{color:#fff}
.aalfa-root .aalfa-submit{font-weight:850;color:#fff}

@media (max-width:860px){
  .aalfa-box{grid-template-columns:1fr;padding:24px}
  .aalfa-title{font-size:34px}
}
@media (max-width:560px){
  .aalfa-wrap{width:min(100% - 28px,1180px)}
  .aalfa-title{font-size:30px}
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICE SKIN — dark CTA section, 2 columns (chip + heading + lead + cta-box
   LEFT, white lead form RIGHT). Scoped under the unique root `.aalfs-root`,
   prefix `aalfs-`. Self-contained, ported 1:1 from the inline <style> of
   static/Facebook-Ads-standalone.html (.cta / .cta-box / .form / .budget-row).
   Shared by all 8 service landing pages. Frontend + editor preview.
   ═══════════════════════════════════════════════════════════════════════ */
.aalfs-root{
  --aalfs-meta:#0866ff;--aalfs-meta-2:#1877f2;--aalfs-yellow:#ffd23f;
  --aalfs-ink:#071017;--aalfs-ink-2:#344450;--aalfs-ink-3:#6d7b86;--aalfs-line:#dce6ee;
  --aalfs-radius:8px;
  font-family:"Inter","Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--aalfs-ink);letter-spacing:0;text-align:left;
}
.aalfs-root *{box-sizing:border-box;margin:0;padding:0}
.aalfs-root a{color:inherit;text-decoration:none}
.aalfs-root button,.aalfs-root input,.aalfs-root textarea{font:inherit}
.aalfs-root button{cursor:pointer}

.aalfs-cta{background:#071017;color:#fff;position:relative;overflow:hidden;padding:86px 0}
.aalfs-cta::before{content:"";position:absolute;right:-170px;top:-170px;width:520px;height:520px;border-radius:50%;background:rgba(8,102,255,.45);filter:blur(70px);pointer-events:none}
.aalfs-cta::after{content:"";position:absolute;left:-100px;bottom:-180px;width:420px;height:420px;border-radius:50%;background:rgba(0,128,128,.36);filter:blur(65px);pointer-events:none}
.aalfs-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.aalfs-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .92fr;gap:38px;align-items:start}
.aalfs-intro{min-width:0}
.aalfs-chip{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:7px 12px;border-radius:999px;border:1px solid rgba(8,102,255,.3);background:rgba(8,102,255,.16);color:#9cc2ff;font-weight:760;font-size:12.5px}
.aalfs-chip::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--aalfs-meta);box-shadow:0 0 0 4px rgba(8,102,255,.2)}
.aalfs-title{font-size:clamp(34px,4.5vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:900;margin:18px 0 18px;color:#fff}
.aalfs-title span{color:var(--aalfs-yellow)}
.aalfs-lead{color:rgba(255,255,255,.74);font-size:17px;line-height:1.65;max-width:620px}
.aalfs-box{display:grid;gap:13px;margin-top:28px;max-width:620px}
.aalfs-box div{padding:15px 16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.78);font-size:14px}
.aalfs-box b{color:#fff}

/* Form card (white on dark) */
.aalfs-form-col{min-width:0;display:flex}
.aalfs-form{flex:1;background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:28px;color:var(--aalfs-ink);box-shadow:0 22px 70px -38px rgba(8,33,62,.45)}
.aalfs-form-chip{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:7px 12px;border-radius:999px;border:1px solid rgba(0,128,128,.18);background:rgba(0,128,128,.08);color:#006b6b;font-weight:760;font-size:12.5px}
.aalfs-form-chip::before{content:"";width:7px;height:7px;border-radius:99px;background:#008080}
.aalfs-form-title{font-size:26px;letter-spacing:-.03em;margin:12px 0 6px;font-weight:900}
.aalfs-form-sub{font-size:14px;color:var(--aalfs-ink-2);line-height:1.55;margin-bottom:20px}
.aalfs-fields{display:grid;gap:12px}
.aalfs-field{display:block}
.aalfs-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--aalfs-ink-3);font-weight:850;margin:0 0 7px}
.aalfs-input,.aalfs-textarea{width:100%;height:48px;border:1px solid var(--aalfs-line);background:#fff;border-radius:14px;padding:0 14px;color:var(--aalfs-ink);outline:none;transition:border-color .18s,box-shadow .18s}
.aalfs-textarea{height:92px;padding-top:13px;resize:vertical}
.aalfs-input:focus,.aalfs-textarea:focus{border-color:var(--aalfs-meta);box-shadow:0 0 0 4px rgba(8,102,255,.1)}
.aalfs-budget{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.aalfs-budget label{height:40px;border:1px solid var(--aalfs-line);border-radius:12px;display:grid;place-items:center;font-size:12.5px;font-weight:780;cursor:pointer;color:var(--aalfs-ink-2)}
.aalfs-budget input{display:none}
.aalfs-budget label:has(input:checked){background:rgba(8,102,255,.1);border-color:rgba(8,102,255,.3);color:var(--aalfs-meta)}
.aalfs-submit{width:100%;height:54px;margin-top:14px;border:1px solid transparent;border-radius:16px;font-weight:780;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--aalfs-meta) 0%,var(--aalfs-meta-2) 100%);box-shadow:0 14px 34px -18px rgba(8,102,255,.7);transition:transform .18s,box-shadow .18s}
.aalfs-submit:hover{transform:translateY(-1px);box-shadow:0 16px 42px -18px rgba(8,102,255,.85);color:#fff}
.aalfs-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--aalfs-line);font-size:12px;color:var(--aalfs-ink-3);font-weight:720}
.aalfs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aalfs-msg{margin-top:10px;font-size:14px;font-weight:700;display:none}
.aalfs-msg.ok{display:block;color:#16a34a}
.aalfs-msg.err{display:block;color:#dc2626}

/* Elementor kit overrides (source-order trick) */
.aalfs-root a:hover{color:inherit}
.aalfs-root .aalfs-submit:hover{color:#fff}

@media(max-width:1040px){.aalfs-grid{grid-template-columns:1fr}}
@media(max-width:820px){.aalfs-cta{padding:64px 0}.aalfs-budget{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.aalfs-wrap{width:min(100% - 28px,1180px)}.aalfs-form{padding:22px}}
