/* ==========================================================================
   Contact / Liên hệ page (design/lien-he.html).
   Scoped under `.sg`, reuses the sang design tokens & form styles
   (.formcard / .field / .row2 / .consent). Only the page-specific
   layout + sidebar cards + purpose selector live here.
   ========================================================================== */
.sg{--grad-green:linear-gradient(103deg,#22C07A,#12965B)}

/* ---- 2-column grid: form + sidebar ---- */
.sg .ct-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(26px,3vw,44px);align-items:start}

/* ---- form heading ---- */
.sg .ct-h{margin-bottom:20px}
.sg .ct-h h2{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:900;color:var(--navy);letter-spacing:-.02em;margin:0}
.sg .ct-h p{color:var(--slate);font-size:.96rem;margin:6px 0 0}

/* ---- "Bạn cần" purpose selector ---- */
.sg .ct-flabel{font-size:.84rem;font-weight:700;color:#2B3350;margin-bottom:9px}
.sg .ct-seg{display:flex;gap:9px;flex-wrap:wrap}
.sg .ct-opt{position:relative;flex:1 1 140px}
.sg .ct-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.sg .ct-opt span{display:flex;align-items:center;justify-content:center;gap:8px;padding:.85em .7em;border:1.6px solid var(--line2);border-radius:12px;font-weight:700;font-size:.92rem;color:#2B3350;transition:all .15s;pointer-events:none;text-align:center}
.sg .ct-opt span svg{width:17px;height:17px;color:var(--slate2);transition:color .15s;flex:0 0 auto}
.sg .ct-opt input:checked+span{border-color:var(--flame);background:var(--flame-tint);color:var(--flame-700);box-shadow:0 0 0 3px var(--flame-soft)}
.sg .ct-opt input:checked+span svg{color:var(--flame)}
.sg .ct-opt input:focus-visible+span{border-color:var(--flame)}

/* ---- demo scheduling box (revealed when "Đặt lịch demo" chosen) ---- */
.sg .ct-demo{display:none;background:var(--flame-tint);border:1px dashed var(--flame2);border-radius:14px;padding:16px}
.sg .ct-demo.on{display:block}
.sg .ct-demo__title{font-size:.84rem;font-weight:800;color:var(--flame-700);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sg .ct-demo__title svg{width:16px;height:16px}
.sg .ct-demo .row2{margin:0}

/* ---- submit button + note ---- */
.sg .btn.ct-block{width:100%;padding:1.1em 2em;font-size:1.04rem}
.sg .ct-note{font-size:.8rem;color:var(--slate);text-align:center;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px}
.sg .ct-note svg{width:15px;height:15px;color:#12965B}

/* ---- server-side success card ---- */
.sg .ct-success{display:none;text-align:center;padding:36px 12px}
.sg .ct-success.on{display:block}
.sg .ct-success .ok{width:70px;height:70px;border-radius:50%;background:var(--grad-green);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 14px 30px -12px rgba(18,150,91,.7)}
.sg .ct-success .ok svg{width:34px;height:34px;color:#fff}
.sg .ct-success h3{font-size:1.4rem;color:var(--navy);font-weight:900;margin:0}
.sg .ct-success p{color:var(--slate);margin:8px auto 0;font-size:.98rem;max-width:420px}
.sg .ct-success .btn{margin-top:20px}

/* ---- sidebar ---- */
.sg .ct-side{display:grid;gap:18px;position:sticky;top:92px}

/* direct-contact (navy) card */
.sg .ct-sidenav{background:var(--grad-navy);color:#EAF0FB;border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-lift);position:relative;overflow:hidden}
.sg .ct-sidenav::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,32,.22),transparent 66%)}
.sg .ct-sidenav h3{color:#fff;font-size:1.15rem;font-weight:900;position:relative;margin:0}
.sg .ct-sidenav .ct-crow{display:flex;gap:13px;align-items:flex-start;margin-top:18px;position:relative}
.sg .ct-sidenav .ci{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.sg .ct-sidenav .ci svg{width:20px;height:20px;color:var(--gold)}
.sg .ct-sidenav .ct-crow small{display:block;font-size:.74rem;color:#AFC0E2;font-weight:500}
.sg .ct-sidenav .ct-crow b{font-size:1rem;color:#fff;font-weight:700}
.sg .ct-sidenav .ct-crow a{color:#fff}
.sg .ct-sidenav .ct-crow a:hover{color:var(--gold)}
.sg .ct-ssoc{display:flex;gap:10px;margin-top:22px;position:relative}
.sg .ct-ssoc a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .18s}
.sg .ct-ssoc a:hover{background:var(--flame)}
.sg .ct-ssoc svg{width:18px;height:18px;color:#fff}

/* why-choose (white) card */
.sg .ct-why{background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-s)}
.sg .ct-why h3{color:var(--navy);font-size:1.05rem;font-weight:900;margin:0 0 14px}
.sg .ct-why .ct-wrow{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.sg .ct-why .ct-wrow:last-child{margin-bottom:0}
.sg .ct-why .wi{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--flame-soft);display:grid;place-items:center}
.sg .ct-why .ct-wrow:nth-child(3) .wi{background:#E7EEFA}
.sg .ct-why .ct-wrow:nth-child(4) .wi{background:#E6F6EE}
.sg .ct-why .ct-wrow:nth-child(5) .wi{background:var(--gold-soft)}
.sg .ct-why .wi svg{width:18px;height:18px;color:var(--flame)}
.sg .ct-why .ct-wrow:nth-child(3) .wi svg{color:var(--navy)}
.sg .ct-why .ct-wrow:nth-child(4) .wi svg{color:#12965B}
.sg .ct-why .ct-wrow:nth-child(5) .wi svg{color:#B8860B}
.sg .ct-why .ct-wrow b{display:block;font-size:.94rem;color:var(--navy);font-weight:800}
.sg .ct-why .ct-wrow span{font-size:.84rem;color:var(--slate);line-height:1.45}

/* ---- responsive ---- */
@media (max-width:1080px){
    .sg .ct-grid{grid-template-columns:1fr}
    .sg .ct-side{position:static}
}
@media (max-width:640px){
    .sg .ct-opt{flex:1 1 100%}
}