/* ve-chung-toi.css — Về chúng tôi (comp: canvas boards "16 · Về chúng tôi bản 2") */
.ab-hero__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:center; }
.ab-hero__copy{ display:flex; flex-direction:column; gap:20px; }
.ab-hero__copy .btn-row{ margin-top:8px; }
.ab-hero__ph{ position:relative; }
.ab-hero__ph > img{ width:100%; height:520px; object-fit:cover; border-radius:var(--r-card); }
.ab-promise{ position:absolute; left:-44px; bottom:40px; padding:22px 26px; border-radius:var(--r-card); background:var(--navy); color:var(--white); box-shadow:0 30px 60px -24px rgba(11,10,42,.6); }
.ab-promise span{ font-size:13px; font-weight:600; color:var(--amber-dark); }
.ab-promise b{ display:block; margin-top:6px; font-size:28px; font-weight:600; letter-spacing:-0.02em; }
.ab-ins{ position:relative; overflow:hidden; text-align:center; }
.ab-ins__map{ position:absolute; left:50%; top:50%; width:1100px; max-width:none; transform:translate(-50%, -50%); opacity:.5; }
.ab-ins__in{ position:relative; max-width:1040px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.ab-ins blockquote{ margin:0; font-size:clamp(27px, 3.2vw, 46px); line-height:1.18; font-weight:600; letter-spacing:-0.025em; max-inline-size:none; }
.ab-ins .lead{ max-width:640px; }
.ab-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.ab-cmp > div{ padding:32px 34px; border-radius:var(--r-card); }
.ab-cmp__old{ background:var(--neutral-bg); border:1px solid var(--line-soft); }
.ab-cmp__new{ background:var(--navy); color:var(--white); box-shadow:0 30px 60px -30px rgba(11,10,42,.6); }
.ab-cmp .mono{ font-size:12.5px; color:var(--text-muted); }
.ab-cmp__new .mono{ color:var(--amber-dark); }
.ab-cmp ul{ list-style:none; margin:10px 0 0; padding:0; }
.ab-cmp li{ display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--line); }
.ab-cmp__new li{ border-color:rgba(255,255,255,.14); }
.ab-cmp li:first-child{ border-top:0; }
.ab-cmp b{ display:block; font-size:18px; font-weight:600; }
.ab-cmp__old b{ color:var(--text-muted); }
.ab-cmp p{ font-size:15.5px; line-height:1.5; margin-top:4px; color:var(--disabled-ink); }
.ab-cmp__new p{ color:var(--indigo-haze); }
.mk-x, .mk-v{ width:26px; height:26px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; flex:none; }
.mk-x{ background:var(--line-soft); color:var(--disabled-ink); } .mk-v{ background:var(--amber-dark); color:var(--navy); }
.mk-x svg, .mk-v svg{ width:12px; height:12px; }
.ab-coms{ padding-top:0; }
.ab-coms__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.ab-com{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; }
.ab-com > img{ width:100%; height:220px; object-fit:cover; }
.ab-com > div{ padding:26px; display:flex; flex-direction:column; gap:10px; }
.ab-com .ico{ margin-top:-48px; border:3px solid var(--white); }
.ab-com h3{ font-size:21px; font-weight:600; letter-spacing:-0.01em; }
.ab-com p{ font-size:16px; line-height:1.6; color:var(--text-dim); }
@media (max-width:1023px){
  .ab-hero__in{ grid-template-columns:1fr; gap:28px; }
  .ab-hero__ph > img{ height:216px; }
  .ab-promise{ left:12px; bottom:-22px; padding:14px 18px; } .ab-promise span{ display:none; } .ab-promise b{ font-size:20px; margin:0; }
  .ab-ins{ text-align:left; } .ab-ins__in{ align-items:flex-start; } .ab-ins__map{ display:none; }
  .ab-cmp{ grid-template-columns:1fr; gap:12px; margin-top:24px; } .ab-cmp > div{ padding:20px; }
  .ab-cmp b{ font-size:16px; } .ab-cmp p{ font-size:14.5px; }
  .ab-coms__list{ grid-template-columns:1fr; gap:12px; }
  .ab-com > img{ height:160px; } .ab-com > div{ padding:18px; gap:6px; } .ab-com .ico{ display:none; } .ab-com h3{ font-size:18px; } .ab-com p{ font-size:15px; }
}
/* commitment cards without photos (each people photo used once site-wide) */
.ab-com .ico{ margin-top:0; border:0; }
.ab-com > div{ padding:28px; }
@media (max-width:1023px){ .ab-com .ico{ display:flex; } }
@media (max-width:767px){ .ab-coms__list .ab-com > div{ padding:16px; } }
.ab-hero__ph > img{ object-position:50% 64%; }   /* portrait photo: keep the faces and the laptop in the landscape frame */
@media (max-width:767px){ .ab-hero__ph > img{ object-position:50% 54%; } }