/* ==========================================================================
   SYNCE – TRANG GIỚI THIỆU DOANH NGHIỆP
   Thiết kế dạng content page tiêu chuẩn, không phải landing page
   ========================================================================== */

.synce-company-about{
  --sca-blue:#0000ff;
  --sca-red:#ff0000;
  --sca-ink:#101d36;
  --sca-muted:#647189;
  --sca-line:#dce4ef;
  --sca-light:#f5f7fb;
  color:var(--sca-ink);
  line-height:1.7;
}

.synce-company-about,
.synce-company-about *,
.synce-company-about *::before,
.synce-company-about *::after{
  box-sizing:border-box;
  font-family:inherit!important;
}

.synce-company-about img{display:block;max-width:100%;height:auto}
.synce-company-about a{text-decoration:none}
.synce-company-about h1,
.synce-company-about h2,
.synce-company-about h3,
.synce-company-about p{margin-top:0}

.synce-company-about__container{
  width:min(1120px,calc(100% - 40px));
  margin-inline:auto;
}

.synce-company-about__title{
  padding:58px 0 54px;
  border-bottom:1px solid rgba(0,0,255,.12);
  background:
    linear-gradient(90deg,rgba(0,0,255,.04),transparent 55%),
    #fff;
}

.synce-company-about__breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:17px;
  color:#7c8798;
  font-size:13px;
}

.synce-company-about__breadcrumb a{color:var(--sca-blue)}
.synce-company-about__breadcrumb strong{color:#4d596d}

.synce-company-about__title h1{
  max-width:900px;
  margin:0 0 10px;
  color:var(--sca-ink);
  font-size:clamp(34px,4vw,50px);
  line-height:1.18;
  letter-spacing:-.035em;
}

.synce-company-about__title p{
  max-width:780px;
  margin:0;
  color:var(--sca-muted);
  font-size:16px;
}

.synce-company-about__section{
  padding:72px 0;
}

.synce-company-about__section--light{
  background:var(--sca-light);
}

.synce-company-about__label{
  display:inline-block;
  margin-bottom:13px;
  color:var(--sca-blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
}

.synce-company-about__heading{
  max-width:800px;
  margin:0 0 34px;
}

.synce-company-about__heading h2,
.synce-company-about__content h2,
.synce-company-about__mission-grid h2{
  margin:0 0 15px;
  color:var(--sca-ink);
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.2;
  letter-spacing:-.035em;
}

.synce-company-about__heading p,
.synce-company-about__content p,
.synce-company-about__mission-grid p{
  color:var(--sca-muted);
}

.synce-company-about__intro{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:55px;
  align-items:center;
}

.synce-company-about__photo{
  position:relative;
  aspect-ratio:4/3;
  margin:0;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(20,40,80,.12);
}

.synce-company-about__photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.synce-company-about blockquote{
  margin:24px 0 0;
  padding:18px 20px;
  border-left:4px solid var(--sca-red);
  background:#f4f6ff;
}

.synce-company-about blockquote strong{
  display:block;
  color:var(--sca-blue);
  font-size:17px;
}

.synce-company-about blockquote span{
  display:block;
  margin-top:4px;
  color:#59667a;
  font-size:14px;
}

.synce-company-about__timeline{
  position:relative;
  display:grid;
  gap:0;
  max-width:900px;
}

.synce-company-about__timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:105px;
  width:1px;
  background:var(--sca-line);
}

.synce-company-about__timeline article{
  position:relative;
  display:grid;
  grid-template-columns:105px 1fr;
  gap:30px;
  padding:0 0 34px;
}

.synce-company-about__timeline article:last-child{padding-bottom:0}

.synce-company-about__timeline article::before{
  content:"";
  position:absolute;
  top:5px;
  left:99px;
  width:13px;
  height:13px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--sca-red);
  box-shadow:0 0 0 1px var(--sca-red);
}

.synce-company-about__timeline time{
  padding-right:18px;
  color:var(--sca-blue);
  font-weight:900;
  text-align:right;
}

.synce-company-about__timeline h3{
  margin:0 0 6px;
  color:var(--sca-ink);
  font-size:19px;
}

.synce-company-about__timeline p{
  margin:0;
  color:var(--sca-muted);
  font-size:14px;
}

.synce-company-about__mission-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.synce-company-about__mission-grid article{
  padding:30px;
  border:1px solid var(--sca-line);
  border-radius:15px;
  background:#fff;
}

.synce-company-about__values{
  display:grid;
  gap:13px;
  max-width:950px;
}

.synce-company-about__values article{
  display:grid;
  grid-template-columns:66px 1fr;
  gap:20px;
  align-items:start;
  padding:20px 22px;
  border:1px solid var(--sca-line);
  border-radius:13px;
  background:#fff;
}

.synce-company-about__value-number{
  display:grid;
  place-items:center;
  width:50px;
  height:40px;
  border-radius:9px;
  color:#fff;
  background:var(--sca-blue);
  font-size:12px;
  font-weight:900;
}

.synce-company-about__values h3{
  margin:0 0 5px;
  color:var(--sca-ink);
  font-size:20px;
}

.synce-company-about__values p{
  margin:0;
  color:var(--sca-muted);
  font-size:14px;
}



.synce-company-about__info{
  overflow:hidden;
  border:1px solid var(--sca-line);
  border-radius:14px;
  background:#fff;
}

.synce-company-about__info>div{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:25px;
  padding:17px 21px;
  border-bottom:1px solid var(--sca-line);
}

.synce-company-about__info>div:last-child{border-bottom:0}

.synce-company-about__info span{
  color:var(--sca-muted);
  font-size:13px;
  font-weight:700;
}

.synce-company-about__info strong{
  color:var(--sca-ink);
  font-size:14px;
}

.synce-company-about__info a{color:var(--sca-blue)}

@media(max-width:850px){
  .synce-company-about__intro,
  .synce-company-about__mission-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){
  .synce-company-about__container{
    width:min(100% - 26px,1120px);
  }

  .synce-company-about__title{
    padding:42px 0 38px;
  }

  .synce-company-about__section{
    padding:55px 0;
  }


  .synce-company-about__timeline::before{
    left:13px;
  }

  .synce-company-about__timeline article{
    grid-template-columns:1fr;
    gap:7px;
    padding-left:35px;
  }

  .synce-company-about__timeline article::before{
    left:7px;
  }

  .synce-company-about__timeline time{
    padding:0;
    text-align:left;
  }

  .synce-company-about__values article{
    grid-template-columns:1fr;
    gap:12px;
  }

  .synce-company-about__info>div{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* VIDEO GIỚI THIỆU */
.synce-company-about__video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--sca-line);
  border-radius:16px;
  background:#05052f;
  box-shadow:0 18px 45px rgba(20,40,80,.14);
}

.synce-company-about__video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* CHÂN DUNG NGUYỄN XUÂN TUYỂN */
.synce-company-about__person{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  gap:55px;
  align-items:center;
}

.synce-company-about__person-photo{
  margin:0;
}

.synce-company-about__person-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(20,40,80,.13);
}

.synce-company-about__person-photo figcaption{
  margin-top:10px;
  color:var(--sca-muted);
  font-size:12px;
  text-align:center;
}

.synce-company-about__person-content h2{
  margin:0 0 5px;
  color:var(--sca-ink);
  font-size:clamp(31px,3.8vw,45px);
  line-height:1.18;
  letter-spacing:-.035em;
}

.synce-company-about__person-role{
  margin:0 0 19px;
  color:var(--sca-blue)!important;
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
}

.synce-company-about__person-content p{
  color:var(--sca-muted);
}

@media(max-width:850px){
  .synce-company-about__person{
    grid-template-columns:1fr;
  }

  .synce-company-about__person-photo{
    max-width:520px;
    margin-inline:auto;
  }
}