@font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); }
/* csgroup.vn - dark-first, single column, utility over decoration */
:root{
  --bg:#FFFFFF; --bg-2:#F4F6FB; --surface:#FFFFFF; --line:#E3E7F0; --line-2:#C9D1E3;
  --fg:#0B1437; --fg-2:#3B4466; --fg-3:#4B5577;
  --navy:#020066; --brand:#0457BD; --accent:#0457BD; --accent-2:#020066;
  --ok:#146C2E; --warn:#8A5A00;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1080px; --gutter:20px; --section:72px; --radius:6px;
  color-scheme:light;
}
@media (min-width:768px){ :root{ --gutter:32px; --section:96px; } }
@media (min-width:1024px){ :root{ --gutter:40px; --section:112px; --wrap:1200px; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
p,ul,ol{ margin:0; }
h1,h2,h3{ margin:0; color:var(--navy); font-weight:600; letter-spacing:-0.02em; line-height:1.15; }
h3{ text-wrap:balance; }
h1{ font-size:clamp(2rem,5.2vw,3.5rem); line-height:1.08; max-width:100%; overflow-wrap:anywhere; }
h2{ font-size:clamp(1.5rem,3.2vw,2.25rem); max-width:100%; }
h3{ font-size:1.125rem; letter-spacing:-0.01em; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip-link{ position:absolute; left:8px; top:-60px; z-index:1000; background:var(--navy); color:#fff; padding:10px 14px; border-radius:var(--radius); font-weight:600; }
.skip-link:focus{ top:8px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-left:max(var(--gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--gutter),env(safe-area-inset-right,0px)); }
.section{ padding-block:var(--section); border-top:1px solid var(--line); }
.section--first{ border-top:0; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.stack--lg{ gap:44px; }
.label{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.lead{ font-size:clamp(1.0625rem,1.8vw,1.25rem); color:var(--fg-2); max-width:100%; }
.muted{ color:var(--fg-2); }
.small{ font-size:14px; }
.max-62{ max-width:100%; }
.prose{ max-width:100%; color:var(--fg-2); }
.prose p+p{ margin-top:18px; }
.prose h2{ margin-top:40px; margin-bottom:12px; font-size:1.5rem; scroll-margin-top:90px; }
.prose h3{ margin-top:26px; margin-bottom:8px; color:var(--fg); }
.prose ul,.prose ol{ padding-left:22px; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.prose strong{ color:var(--fg); font-weight:600; }
.prose table{ border-collapse:collapse; width:100%; margin-top:12px; font-size:15px; }
.prose th,.prose td{ text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ color:var(--navy); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; width:34%; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:var(--radius); font-size:16px; font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s,color .15s,border-color .15s; }
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:#0A6BE3; color:#fff; }
.btn--white{ background:#fff; color:var(--navy); }
.btn--white:hover{ background:var(--bg-2); color:var(--navy); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--ghost:hover{ background:var(--bg-2); color:var(--navy); }
.btn--sm{ min-height:40px; padding:0 16px; font-size:15px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.arrow{ font-weight:600; display:inline-flex; align-items:center; gap:6px; padding:6px 0; }

/* header */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
.brand img{ height:34px; width:auto; }
.nav{ display:none; }
.nav a{ color:var(--fg-2); font-size:15px; font-weight:500; padding:10px 0; }
.nav a:hover{ color:var(--brand); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--brand); box-shadow:inset 0 -2px 0 var(--brand); }
.header-right{ display:flex; align-items:center; gap:10px; }
.header-cta{ display:none; }
.menu-toggle{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid var(--line-2); border-radius:var(--radius); background:#fff; color:var(--navy); cursor:pointer; font-size:14px; font-weight:600; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }
.mobile-nav{ display:none; border-top:1px solid var(--line); background:var(--bg); }
.mobile-nav.is-open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:8px var(--gutter) 20px; display:flex; flex-direction:column; }
.mobile-nav a{ display:block; padding:14px 0; font-size:17px; font-weight:500; color:var(--fg-2); border-bottom:1px solid var(--line); }
.mobile-nav a[aria-current="page"]{ color:var(--brand); }
.mobile-nav .btn{ margin-top:16px; width:100%; border-bottom:0; }
@media (min-width:900px){ .site-header .wrap{ min-height:76px; } .brand img{ height:38px; } .nav{ display:flex; gap:28px; } .header-cta{ display:inline-flex; } .menu-toggle,.mobile-nav{ display:none !important; } }

/* hero */
.hero{ padding-block:calc(var(--section) * .9) var(--section); }
.hero .stack{ gap:22px; }

/* cards / grids */
.cards{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:768px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
.card{ border-top:1px solid var(--line-2); padding-top:20px; display:flex; flex-direction:column; gap:12px; }
.card p{ color:var(--fg-2); }
.card .arrow{ margin-top:auto; }
.steps{ list-style:none; padding:0; margin:0; }
.step{ display:grid; grid-template-columns:52px 1fr; gap:14px; padding:22px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step__num{ font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--brand); padding-top:5px; font-variant-numeric:tabular-nums; }
.step h3{ margin-bottom:6px; }
.step p{ color:var(--fg-2); max-width:100%; }
@media (min-width:768px){ .step{ grid-template-columns:72px 1fr; } }
.svc{ display:grid; gap:24px; grid-template-columns:1fr; padding-block:var(--section); border-top:1px solid var(--line); scroll-margin-top:90px; }
.svc:first-child{ border-top:0; padding-top:0; }
.svc__cols{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:768px){ .svc__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .svc{ grid-template-columns:260px 1fr; gap:48px; } }
.svc h2{ margin-top:8px; font-size:clamp(1.375rem,2.6vw,1.75rem); }
.svc__col h3{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:10px; }
.svc__col ul{ padding-left:20px; display:flex; flex-direction:column; gap:8px; color:var(--fg-2); }
.svc__col p{ color:var(--fg-2); }
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-weight:600; color:var(--fg); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brand); width:20px; text-align:center; flex-shrink:0; }
.faq details[open] summary::after{ content:"\2013"; }
.faq .a{ padding:0 0 20px; color:var(--fg-2); max-width:100%; }
.contact-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:768px){ .contact-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.contact-grid h3{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
.contact-grid .big{ font-size:1.25rem; font-weight:600; color:var(--fg); word-break:break-all; }
.contact-grid p{ color:var(--fg-2); }
.form{ display:flex; flex-direction:column; gap:16px; max-width:100%; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:14px; font-weight:600; color:var(--fg); }
.input{ width:100%; min-height:48px; padding:0 14px; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); color:var(--fg); font:inherit; font-size:16px; }
textarea.input{ min-height:150px; padding:12px 14px; resize:vertical; }
.input:focus{ border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.input[aria-invalid="true"]{ border-color:#E5484D; }
.field__error{ display:none; font-size:13px; color:#B3261E; }
.field.is-invalid .field__error{ display:block; }
.alert{ display:none; padding:12px 14px; border-radius:var(--radius); font-size:14px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--fg-2); }
.alert.is-visible{ display:block; }
.alert--ok{ border-color:var(--ok); color:var(--ok); background:#E6F4EA; }
.note{ font-size:14px; color:var(--fg-3); }
.draft{ display:inline-block; border:1px solid #E8A33D; background:#FFF4E5; color:var(--warn); border-radius:var(--radius); padding:6px 10px; font-size:13px; }
.cta-close{ border-top:1px solid var(--line); padding-block:var(--section); }

/* footer */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-2); padding-block:56px 32px; color:var(--fg-2); font-size:15px; }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:640px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.footer-brand img{ height:34px; width:auto; margin-bottom:16px; }
.footer-brand p+p{ margin-top:10px; }
.footer-col h3{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); margin-bottom:10px; }
.footer-col a{ display:block; color:var(--fg-2); padding:6px 0; }
.footer-col a:hover{ color:var(--brand); }
.footer-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

/* careers */
.roles{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.role{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:22px 0; border-bottom:1px solid var(--line); }
.role h3{ font-size:1.25rem; }
.role .meta{ color:var(--fg-2); font-size:15px; margin-top:4px; }
.role .arrow{ white-space:nowrap; }
.crumbs{ font-size:14px; color:var(--fg-3); display:flex; flex-wrap:wrap; gap:6px; }
.crumbs a{ color:var(--fg-3); }
.crumbs a:hover{ color:var(--brand); }
.meta-list{ display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--fg-2); font-size:15px; }
.meta-list span::before{ content:"·"; margin-right:10px; color:var(--fg-3); }
.meta-list span:first-child::before{ content:none; margin:0; }
.jd h2{ font-size:1.5rem; margin-top:0; }
.jd{ display:grid; gap:40px; }
.jd .prose ul{ margin-top:0; }
.jd .block{ display:grid; gap:18px; grid-template-columns:1fr; padding-top:var(--section); border-top:1px solid var(--line); }
.jd .block:first-child{ border-top:0; padding-top:0; }
@media (min-width:900px){ .jd .block{ grid-template-columns:260px 1fr; gap:48px; } }
.apply-box{ border:1px solid var(--line-2); background:var(--bg-2); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px; max-width:100%; }
.apply-box code{ font-family:inherit; background:var(--bg-2); padding:2px 8px; border-radius:4px; color:var(--navy); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.gallery{ display:grid; gap:16px; grid-template-columns:1fr; }
.gallery__item{ margin:0; display:flex; flex-direction:column; gap:8px; }
.gallery__item img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); }
.gallery__item figcaption{ font-size:14px; color:var(--fg-3); }
@media (min-width:640px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}
@media (min-width:900px){ .gallery{ gap:24px; } }

/* Team photo (About) */
.photo{ margin:0; display:flex; flex-direction:column; gap:10px; }
.photo img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:center 70%; border-radius:14px; background:var(--bg-2); }
.photo figcaption{ font-size:14px; color:var(--fg-3); }
@media (min-width:900px){
  .photo img{ aspect-ratio:21/10; }
}
.section--photo{ padding-top:0; border-top:0; }
.hero--photo{ padding-bottom:calc(var(--section) * .45); }
@media (max-width:639px){ .photo img{ border-radius:10px; } }
ul.plain{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:4px; }