/* ==========================================================================
   SGCo 2026 — Trang Giới thiệu (page-gioi-thieu.php)
   Bám sát bản thiết kế Gioi Thieu.dc.html. Nạp sau main.css + home.css.
   ========================================================================== */

/* ---------- BREADCRUMB TRONG HERO ---------- */
/* Trang Giới thiệu không nạp pages.css nên khai báo lại ở đây. */
.hero-crumb{position:relative}
.hero-crumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:13px;font-weight:500;color:#7C8FA0;
}
.hero-crumb li{display:inline-flex;align-items:center;gap:9px}
.hero-crumb a{color:#7C8FA0}
.hero-crumb a:hover{color:var(--blue-600)}
.hero-crumb span[aria-current]{color:var(--ink-900);font-weight:600}
.hero-crumb svg{color:#B4C4D0}

/* ---------- ①  HERO ---------- */
.about-hero{
  position:relative;overflow:hidden;border-bottom:1px solid #E4EEF6;
  background:linear-gradient(155deg,#DCF0FD 0%,#EEF8FF 44%,#FFFFFF 100%);
}
.about-hero::before{
  content:"";position:absolute;top:-190px;right:-120px;width:620px;height:620px;
  border-radius:var(--radius-pill);pointer-events:none;
  background:radial-gradient(circle,rgba(13,152,229,.16),transparent 66%);
}
/* Breadcrumb chiếm trọn hàng đầu, phần còn lại chia 2 cột như thiết kế. */
.about-hero__inner{
  position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:0 60px;align-items:end;padding-top:60px;padding-bottom:64px;
}
.about-hero__inner > .hero-crumb{grid-column:1/-1;margin-bottom:26px}
.about-hero__title{
  margin-top:14px;font-size:clamp(34px,4.6vw,56px);font-weight:700;line-height:1.12;
  letter-spacing:-.02em;color:var(--ink-900);max-width:20ch;text-wrap:pretty;
}
.about-hero__desc{
  margin-top:20px;font-size:17.5px;line-height:1.8;color:var(--ink-500);
  max-width:58ch;text-wrap:pretty;
}
.about-hero__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:13px}

.about-hero__media{position:relative;height:400px}
.about-hero__pic{overflow:hidden;background:#DCE9F3}
.about-hero__pic img{width:100%;height:100%;object-fit:cover}
.about-hero__pic--main{
  position:absolute;right:0;top:0;width:78%;height:100%;
  border-radius:22px;box-shadow:0 44px 90px -36px rgba(10,40,70,.5);
}
.about-hero__pic--inset{
  position:absolute;left:0;bottom:44px;width:56%;aspect-ratio:4/3;
  border-radius:18px;border:5px solid #fff;box-shadow:0 30px 60px -28px rgba(10,40,70,.5);
}

/* Thanh số liệu dưới hero */
.about-statbar{position:relative;border-top:1px solid #DCEAF4;background:rgba(255,255,255,.68)}
.about-statbar__inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  padding-top:34px;padding-bottom:34px;
}
.about-stat{display:flex;flex-direction:column;gap:6px}
.about-stat__num{
  font-size:clamp(26px,2.6vw,34px);font-weight:800;color:var(--blue-600);line-height:1;
}
.about-stat__label{
  font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#7C8FA0;
}

/* ---------- ②  CÔNG TY ---------- */
.about-company{padding-top:100px}
.about-company__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center}
.about-company__media{position:relative}
.about-company__pic{
  border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;background:#DCE9F3;
  border:1px solid #DCE6EE;box-shadow:0 34px 70px -34px rgba(10,40,70,.4);
}
.about-company__pic img{width:100%;height:100%;object-fit:cover}
.about-company__badge{
  position:absolute;right:-16px;bottom:-22px;background:var(--blue-600);color:#fff;
  border-radius:16px;padding:18px 24px;box-shadow:0 22px 46px -16px rgba(13,152,229,.6);
}
.about-company__badge b{display:block;font-size:26px;font-weight:800;line-height:1}
.about-company__badge span{
  display:block;margin-top:4px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.about-company__body{
  margin-top:18px;display:flex;flex-direction:column;gap:15px;
  font-size:16.5px;line-height:1.88;color:var(--ink-500);max-width:54ch;text-wrap:pretty;
}
.about-company__link{margin-top:24px;font-size:15px}

/* ---------- ③  TUYÊN BỐ + KHÁCH HÀNG ---------- */
.about-statement{padding-top:100px}
.about-statement__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:start}
.about-statement .h-display{margin-top:0;max-width:26ch;line-height:1.24;font-weight:700}
.about-statement__body{
  margin-top:24px;display:flex;flex-direction:column;gap:16px;
  font-size:16.5px;line-height:1.9;color:var(--ink-500);max-width:62ch;
}
.about-clients{
  background:linear-gradient(160deg,var(--blue-600) 0%,var(--blue-700) 100%);
  border-radius:var(--radius-lg);padding:34px;color:#fff;
  box-shadow:0 30px 66px -30px rgba(11,111,168,.6);
}
.about-clients__head{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#CFEBFF;
}
.about-clients__list{margin-top:20px;list-style:none;display:flex;flex-direction:column;gap:14px}
.about-clients__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:15.5px;font-weight:600;line-height:1.5;color:#fff;
}
.about-clients__list svg{color:#BFE7FF;flex-shrink:0;margin-top:3px}

/* ---------- ⑤  SỨ MỆNH · TẦM NHÌN · GIÁ TRỊ ---------- */
.about-pillars{padding-top:88px;padding-bottom:100px}
.about-pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:34px 32px;overflow:hidden;
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow),border-color var(--dur);
}
.pillar:hover{
  transform:translateY(-6px);box-shadow:0 26px 54px -22px rgba(10,40,70,.28);
  border-color:var(--border-strong);
}
.pillar__n{
  position:absolute;top:20px;right:26px;font-size:56px;font-weight:800;
  color:#B7DCF4;line-height:1;letter-spacing:-.03em;
}
.pillar__icon{
  position:relative;width:48px;height:48px;border-radius:14px;background:#EAF6FD;
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.pillar__title{position:relative;margin-top:20px;font-size:20px;font-weight:700;color:var(--ink-900)}
.pillar__desc{position:relative;margin-top:12px;font-size:15.5px;line-height:1.8;color:#5A6E7C}

/* ---------- ⑥  NĂNG LỰC ---------- */
.about-cap{
  background:linear-gradient(172deg,#FFFFFF 0%,#EAF6FF 46%,#F8FCFF 100%);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.about-cap__grid{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:68px;align-items:center;
  padding-top:100px;padding-bottom:100px;
}
.about-cap__media{position:relative}
.about-cap__pic{
  border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#DCE9F3;
  box-shadow:0 40px 84px -36px rgba(10,40,70,.48);
}
.about-cap__pic img{width:100%;height:100%;object-fit:cover}
.about-cap__badge{
  position:absolute;right:-16px;bottom:34px;background:var(--surface);
  border:1px solid #E2EDF5;border-radius:16px;padding:17px 21px;
  box-shadow:0 26px 52px -24px rgba(10,40,70,.4);
}
.about-cap__badge b{display:block;font-size:24px;font-weight:800;color:var(--blue-600);line-height:1}
.about-cap__badge span{
  display:block;margin-top:4px;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:#7C8FA0;
}
.about-cap__list{margin-top:30px;display:flex;flex-direction:column}
.about-cap__item{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px 0;border-bottom:1px solid #E1EBF3;
}
.about-cap__icon{
  flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--surface);
  border:1px solid #DCEAF4;display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.about-cap__item h3{font-size:17px;font-weight:700;color:var(--ink-900)}
.about-cap__item p{margin-top:7px;font-size:15.5px;line-height:1.78;color:#5A6E7C}

/* ---------- ⑦  VĂN PHÒNG ---------- */
.about-offices{padding-top:100px;padding-bottom:100px}
.about-offices__head{max-width:56ch}
.about-offices__grid{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.office{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:28px;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur);
}
.office:hover{
  transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(10,30,44,.22);
  border-color:var(--border-strong);
}
.office__icon{
  width:42px;height:42px;border-radius:12px;background:#EAF6FD;
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.office__label{
  margin-top:18px;font-size:12.5px;font-weight:700;color:var(--blue-600);
  text-transform:uppercase;letter-spacing:.08em;
}
.office__addr{margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-700);flex:1}
.office__map{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--blue-600);
}

/* ---------- ⑧  CTA ---------- */
.about-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#DCF0FD 0%,#F1F9FF 55%,#FFFFFF 100%);
}
.about-cta::before{
  content:"";position:absolute;top:-170px;right:-90px;width:520px;height:520px;
  border-radius:var(--radius-pill);pointer-events:none;
  background:radial-gradient(circle,rgba(13,152,229,.14),transparent 66%);
}
.about-cta__inner{
  position:relative;display:flex;flex-wrap:wrap;gap:32px;
  align-items:center;justify-content:space-between;
  padding-top:84px;padding-bottom:84px;
}
.about-cta__text{max-width:54ch}
.about-cta__text h2{
  font-size:clamp(24px,2.9vw,36px);font-weight:700;line-height:1.24;
  color:var(--ink-900);letter-spacing:-.01em;text-wrap:pretty;
}
.about-cta__text p{margin-top:12px;font-size:16px;line-height:1.8;color:var(--ink-500)}
.about-cta__actions{display:flex;flex-wrap:wrap;gap:13px}
.about-cta__actions .btn svg{color:var(--blue-600)}
.about-cta__actions .btn--primary svg{color:#fff}

/* ---------- ④ CHỨNG NHẬN NĂNG LỰC ---------- */
.about-certs{padding-top:96px}
.about-certs__head{max-width:56ch}
.about-certs__grid,
.certslider{
  margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}

/*
 * Sân khấu ảnh xếp chồng như bộ bài: thẻ đang xem ở giữa, các thẻ bên cạnh
 * thò ra phía sau — nhỏ dần, mờ dần, lệch ngang. transform/opacity/z-index
 * do JS gán theo từng thẻ (initCertSlider), CSS chỉ giữ phần tĩnh + transition.
 */
.certslider__stage{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.certcard{
  position:absolute;width:min(340px,72%);aspect-ratio:3/4.05;border-radius:12px;overflow:hidden;
  background:#fff;border:1px solid var(--border);
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease,box-shadow .6s ease;
}
.certcard::before{
  content:"";position:absolute;left:0;top:22%;width:9px;height:34%;
  background:var(--blue-600);z-index:2;border-radius:0 3px 3px 0;
}
.certcard img{width:100%;height:100%;object-fit:contain;background:#F4F8FC}
.certcard__placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:linear-gradient(160deg,var(--blue-50) 0%,#fff 100%);color:var(--blue-600);text-align:center;padding:20px;
}
.certcard__placeholder svg{opacity:.85}
.certcard__placeholder b{font-size:15px;color:var(--blue-800)}
.certcard__placeholder span{font-size:13px;color:var(--ink-500)}

/* Nút điều hướng tròn. */
.certslider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
  background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px -10px rgba(13,152,229,.7);transition:background var(--dur-fast),transform var(--dur-fast);
}
.certslider__nav:hover{background:var(--blue-700)}
.certslider__nav:active{transform:translateY(-50%) scale(.94)}
.certslider__nav--prev{left:-6px}
.certslider__nav--next{right:-6px}

/* Panel thông tin. */
.certslider__panel{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:44px 46px;box-shadow:0 34px 70px -34px rgba(10,40,70,.34);min-height:300px;
  display:flex;flex-direction:column;justify-content:center;
}
.certinfo{display:none;animation:certFade .5s ease}
.certinfo.is-active{display:block}
@keyframes certFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.certinfo__issuer{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400,#7C8FA0)}
.certinfo__title{margin-top:14px;font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.24;color:var(--blue-700);letter-spacing:-.01em}
.certinfo__desc{margin-top:16px;font-size:16px;line-height:1.8;color:var(--ink-500);max-width:44ch}
.certslider__dots{margin-top:30px;display:flex;gap:9px}
.certslider__dot{
  width:9px;height:9px;border-radius:999px;border:0;cursor:pointer;padding:0;background:#CFE0EC;
  transition:width .4s cubic-bezier(.16,1,.3,1),background var(--dur-fast);
}
.certslider__dot.is-active{width:26px;background:var(--blue-600)}

/* Trạng thái chưa có chứng nhận. */
.about-certs__empty{
  margin-top:40px;display:flex;align-items:center;gap:18px;
  background:var(--blue-50);border:1px solid var(--border);border-radius:16px;padding:28px 32px;
}
.about-certs__empty-icon{
  flex-shrink:0;width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);
}
.about-certs__empty p{margin:0;font-size:16px;line-height:1.75;color:var(--ink-600,#5A6E7C)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1150px){
  .about-hero__inner{grid-template-columns:1fr;gap:36px;align-items:start}
  .about-hero__media{height:340px}
  .about-company__grid,
  .about-statement__grid,
  .about-cap__grid{grid-template-columns:1fr;gap:44px}
  .about-company{padding-top:64px}
  .about-statement{padding-top:64px}
  .about-cap__grid{padding-top:64px;padding-bottom:64px}
  .about-offices{padding-top:64px;padding-bottom:64px}
  .about-pillars{padding-top:64px;padding-bottom:64px}
  .about-offices__grid{grid-template-columns:repeat(2,1fr)}
  .about-pillars__grid{grid-template-columns:repeat(2,1fr)}
  /* Badge tràn mép ở màn hình hẹp — kéo vào trong. */
  .about-company__badge{right:16px}
  .about-cap__badge{right:16px}
  /* Slider chứng nhận về 1 cột: ảnh trên, thông tin dưới. */
  .about-certs{padding-top:64px}
  .certslider{grid-template-columns:1fr;gap:32px}
  .certslider__stage{height:420px}
}
@media (max-width:768px){
  .about-statbar__inner{grid-template-columns:repeat(2,1fr);gap:22px 30px}
  .about-hero__media{height:300px}
  .about-clients{padding:26px}
  .about-cta__inner{padding-top:56px;padding-bottom:56px}
  .certslider__panel{padding:32px 28px}
  .certslider__stage{height:360px}
}
@media (max-width:640px){
  .about-offices__grid,
  .about-pillars__grid{grid-template-columns:1fr}
  .about-hero__actions .btn,
  .about-cta__actions .btn{flex:1 1 100%}
}