/* OneStack v375 — Trang Giới thiệu: bright corporate sections, premium navy hero.
   Scoped to this template; does not alter the shared header/footer or homepage. */
body.oneweb-template-about {
  background: #fff !important;
  color: #000730;
}
body.oneweb-template-about .os-about-v10 {
  --a10-text: #000730;
  --a10-muted: #536079;
  --a10-gold: #EFB000;
  --a10-gold-2: #f8cb51;
  --a10-border: rgba(0, 7, 48, .12);
  --a10-border-soft: #dce5f0;
  --a10-shadow: 0 12px 34px rgba(0, 7, 48, .06);
  color: #000730;
  background: #fff;
}
body.oneweb-template-about .os-about-v10__main { background: #fff; }
body.oneweb-template-about .os-about-v10__main > section {
  position: relative;
  border: 0 !important;
  padding: 66px 0 !important;
}
/* Hero — dark where the supplied brand mark and white typography belong. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__hero {
  background: radial-gradient(ellipse at 82% 48%, rgba(45,85,173,.28), transparent 47%),
              radial-gradient(circle at 17% 25%, rgba(40,80,159,.14), transparent 35%),
              linear-gradient(117deg, #000730 0%, #070f3e 54%, #111c52 100%) !important;
  padding: 74px 0 78px !important;
  overflow: hidden;
}
body.oneweb-template-about .os-about-v10__hero::before {
  background: radial-gradient(circle at 76% 47%, rgba(255,255,255,.085), transparent 35%),
              repeating-linear-gradient(120deg, transparent 0 130px, rgba(255,255,255,.018) 131px, transparent 132px) !important;
  opacity: .7;
}
body.oneweb-template-about .os-about-v10__hero-grid {
  grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr) !important;
  gap: 46px !important;
  align-items: center !important;
}
body.oneweb-template-about .os-about-v10__breadcrumbs,
body.oneweb-template-about .os-about-v10__breadcrumbs a,
body.oneweb-template-about .os-about-v10__breadcrumbs strong { color: rgba(231,238,255,.82) !important; }
body.oneweb-template-about .os-about-v10__breadcrumbs strong { color: #fff !important; }
body.oneweb-template-about .os-about-v10__breadcrumbs { font-size: 14px; margin: 0 0 22px; }
body.oneweb-template-about .os-about-v10__hero-content h1 {
  margin: 0 0 22px !important;
  max-width: none !important;
  color: #fff !important;
  font-size: clamp(32px, 3.55vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .015em !important;
  white-space: normal !important;
  text-shadow: none !important;
}
body.oneweb-template-about .os-about-v10__hero-content h1 span {
  display: inline !important;
  color: #EFB000 !important;
}
body.oneweb-template-about .os-about-v10__hero-content > p {
  max-width: 620px;
  margin: 0 !important;
  color: #dbe4f7 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}
body.oneweb-template-about .os-about-v10__hero-buttons { margin-top: 28px; gap: 14px; }
body.oneweb-template-about .os-about-v10__btn { font-size: 15px; min-height: 51px; }
body.oneweb-template-about .os-about-v10__btn--gold {
  background: linear-gradient(135deg, #ffda68, #EFB000) !important;
  color: #000730 !important;
  border-color: #e6aa00;
}
body.oneweb-template-about .os-about-v10__hero-buttons .os-about-v10__btn--outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.06) !important;
}
body.oneweb-template-about .os-about-v10__hero-buttons .os-about-v10__btn--outline:hover,
body.oneweb-template-about .os-about-v10__hero-buttons .os-about-v10__btn--outline:focus-visible {
  color: #ffda68 !important; border-color: #ffda68 !important;
  background: rgba(255,255,255,.11) !important;
}
body.oneweb-template-about .os-about-v10__hero-visual {
  justify-self: end;
  display: flex; justify-content: flex-end; align-items: center;
  min-width: 0;
  overflow: visible !important;
}
body.oneweb-template-about .os-about-v10__hero-visual img {
  width: 100% !important;
  max-width: 555px !important;
  max-height: 330px !important;
  height: auto !important;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 42px rgba(0,0,0,.16));
}
/* Section 2 — white copy / real people. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__company {
  background: #fff !important;
}
body.oneweb-template-about .os-about-v10__company-grid { align-items: center !important; gap: clamp(28px, 4vw, 66px); }
body.oneweb-template-about .os-about-v10__company-copy .os-about-v10__kicker {
  margin: 0 0 12px !important;
  color: #ad7a00 !important;
  font-size: 13px !important;
  letter-spacing: .13em;
  font-weight: 800;
}
body.oneweb-template-about .os-about-v10__company-copy h2 {
  max-width: 650px !important;
  color: #000730 !important;
  font-size: clamp(27px, 2.45vw, 39px) !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  margin: 0 0 22px !important;
}
body.oneweb-template-about .os-about-v10__company-copy h2 span { color: #a87800 !important; }
body.oneweb-template-about .os-about-v10__company-copy > p:not(.os-about-v10__kicker) {
  color: #4d5b72 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin: 14px 0 0 !important;
}
body.oneweb-template-about .os-about-v10__trust-card {
  margin-top: 24px; padding: 15px 18px;
  background: #f5f7fa !important;
  border: 1px solid #dce5f0 !important;
  box-shadow: none !important;
}
body.oneweb-template-about .os-about-v10__trust-card p { color: #233657 !important; font-size: 15px !important; }
body.oneweb-template-about .os-about-v10__trust-card span { flex-shrink: 0; background: #fff; }
body.oneweb-template-about .os-about-v10__company-image {
  border-radius: 22px; border: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,7,48,.10);
}
body.oneweb-template-about .os-about-v10__company-image img {
  border-radius: 22px; aspect-ratio: 1.56 / 1; object-fit: cover;
}
body.oneweb-template-about .os-about-v10__team-note { border: 0; background: rgba(0,7,48,.83); }
body.oneweb-template-about .os-about-v10__team-note span { color: #dfe7f5; }
/* Section 3 — bright numbers, gold pictograms. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__stats { background: #f5f7fa !important; }
body.oneweb-template-about .os-about-v10__stats-grid { gap: 18px; }
body.oneweb-template-about .os-about-v10__stat-card {
  background: #fff !important;
  border: 1px solid #e0e8f3 !important;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,7,48,.055) !important;
  padding: 27px 12px 25px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.oneweb-template-about .os-about-v10__stat-card:hover {
  transform: translateY(-4px); border-color: rgba(239,176,0,.65) !important;
  box-shadow: 0 16px 34px rgba(0,7,48,.10) !important;
}
body.oneweb-template-about .os-about-v10__stat-card strong { color: #000730 !important; font-size: clamp(32px,3vw,42px) !important; }
body.oneweb-template-about .os-about-v10__stat-card h3 { color: #000730 !important; font-size: 16px; }
body.oneweb-template-about .os-about-v10__stat-card p { color: #65718a !important; font-size: 14px; }
body.oneweb-template-about .os-about-v10__stat-icon { color: #d49600; }
/* Shared heading rule: all light backgrounds use readable navy. */
body.oneweb-template-about .os-about-v10__main .os-about-v10__section-title {
  color: #000730 !important;
  font-size: clamp(26px, 2.65vw, 38px) !important;
  line-height: 1.22 !important;
  letter-spacing: .02em !important;
  margin: 0 0 30px !important;
}
/* Values — meaningful dark accent blocks on a white section. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__values { background: #fff !important; }
body.oneweb-template-about .os-about-v10__value-card {
  min-height: 228px;
  background: linear-gradient(145deg,#111c52,#000730) !important;
  border: 1px solid rgba(239,176,0,.14) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(0,7,48,.11) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.oneweb-template-about .os-about-v10__value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 34px rgba(0,7,48,.16) !important; }
body.oneweb-template-about .os-about-v10__value-card h3 { color: #fff !important; }
body.oneweb-template-about .os-about-v10__value-card p,
body.oneweb-template-about .os-about-v10__value-card li { color: #dbe4f3 !important; }
body.oneweb-template-about .os-about-v10__value-card li::before { color: #EFB000; }
/* Why OneStack — pale backdrop, clean elevated cards. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__why { background: #f5f7fa !important; }
body.oneweb-template-about .os-about-v10__why-card {
  background: #fff !important; color: #000730 !important;
  border: 1px solid #e0e8f3 !important; box-shadow: 0 10px 27px rgba(0,7,48,.055) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.oneweb-template-about .os-about-v10__why-card:hover { transform: translateY(-4px); border-color: rgba(239,176,0,.6) !important; box-shadow: 0 16px 30px rgba(0,7,48,.09) !important; }
body.oneweb-template-about .os-about-v10__why-card h3 { color: #000730 !important; }
body.oneweb-template-about .os-about-v10__why-card p { color: #536079 !important; }
body.oneweb-template-about .os-about-v10__why-icon { color: #d49600; }
/* Workflow — white for clear editorial rhythm. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__process { background: #fff !important; }
body.oneweb-template-about .os-about-v10__process .os-about-v10__container { position: relative; }
body.oneweb-template-about .os-about-v10__process-grid {
  position: relative;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
  align-items: start;
}
body.oneweb-template-about .os-about-v10__process-grid::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
  height: 2px;
  background: linear-gradient(90deg, rgba(233,177,43,0), rgba(233,177,43,.95), rgba(233,177,43,0));
  z-index: 0;
}
body.oneweb-template-about .os-about-v10__process-line { display: none !important; }
body.oneweb-template-about .os-about-v10__process-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .28s ease;
}
body.oneweb-template-about .os-about-v10__process-badge {
  width: 76px; height: 76px; margin: 0 auto 15px;
  background: #000730 !important; color: #EFB000 !important;
  font-size: 29px; border-color: rgba(239,176,0,.86);
  box-shadow: 0 8px 20px rgba(0,7,48,.11);
  position: relative;
  z-index: 2;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
body.oneweb-template-about .os-about-v10__process-badge svg {
  transition: transform .28s ease, filter .28s ease;
}
body.oneweb-template-about .os-about-v10__process-card strong {
  color: #c48c00 !important;
  font-size: 29px;
  transition: color .28s ease, transform .28s ease;
}
body.oneweb-template-about .os-about-v10__process-card h3 { color: #000730 !important; font-size: 16px; transition: color .28s ease; }
body.oneweb-template-about .os-about-v10__process-card p { color: #57647b !important; font-size: 15px; transition: color .28s ease; }
body.oneweb-template-about .os-about-v10__process-card:hover { transform: translateY(-4px); }
body.oneweb-template-about .os-about-v10__process-card:hover .os-about-v10__process-badge {
  transform: translateY(-6px) scale(1.04);
  border-color: rgba(239,176,0,1);
  box-shadow: 0 16px 30px rgba(0,7,48,.18), 0 0 0 8px rgba(239,176,0,.08);
}
body.oneweb-template-about .os-about-v10__process-card:hover .os-about-v10__process-badge svg {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(239,176,0,.28));
}
body.oneweb-template-about .os-about-v10__process-card:hover strong { color: #e0a100 !important; transform: translateY(-2px); }
body.oneweb-template-about .os-about-v10__process-card:hover h3 { color: #06124f !important; }
body.oneweb-template-about .os-about-v10__process-card:hover p { color: #3e4a63 !important; }
/* People — pale backdrop and existing navy employee cards. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__team { background: #f5f7fa !important; }
body.oneweb-template-about .os-about-v10__team-subtitle {
  color: #536079 !important; font-size: 16px !important; line-height: 1.65 !important;
  margin: -12px auto 30px !important;
}
body.oneweb-template-about .os-about-v10__member-card { border-color: rgba(239,176,0,.24) !important; box-shadow: 0 13px 29px rgba(0,7,48,.13) !important; }
/* CTA sits on white with a distinct navy panel, common footer remains shared. */
body.oneweb-template-about .os-about-v10__main > .os-about-v10__cta { background: #fff !important; }
body.oneweb-template-about .os-about-v10__cta-box {
  background: linear-gradient(115deg,#000730,#111c52) !important;
  border: 1px solid rgba(239,176,0,.21) !important;
  box-shadow: 0 16px 34px rgba(0,7,48,.11) !important;
  color: #fff !important;
}
body.oneweb-template-about .os-about-v10__cta-copy h2 {
  color: #fff !important;
  font-size: clamp(23px,2.6vw,36px) !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  margin: 0 !important;
}
body.oneweb-template-about .os-about-v10__cta-copy p { color: #dbe4f3 !important; font-size: 16px; }
body.oneweb-template-about .os-about-v10__cta-icon { color: #EFB000 !important; border-color: rgba(239,176,0,.34); }
body.oneweb-template-about .os-about-v10__cta-btn { min-width: 210px; }
@media (max-width: 1199px) {
  body.oneweb-template-about .os-about-v10__hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  body.oneweb-template-about .os-about-v10__hero-visual { justify-self: center; justify-content: center; }
  body.oneweb-template-about .os-about-v10__hero-visual img { max-width: 480px !important; }
}
@media (max-width: 991px) {
  body.oneweb-template-about .os-about-v10__main > section { padding: 52px 0 !important; }
  body.oneweb-template-about .os-about-v10__main > .os-about-v10__hero { padding: 57px 0 !important; }
  body.oneweb-template-about .os-about-v10__stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.oneweb-template-about .os-about-v10__values-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.oneweb-template-about .os-about-v10__process-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 767px) {
  body.oneweb-template-about .os-about-v10__main > section { padding: 42px 0 !important; }
  body.oneweb-template-about .os-about-v10__main > .os-about-v10__hero { padding: 48px 0 !important; }
  body.oneweb-template-about .os-about-v10__container { width: min(100% - 32px, 1240px); }
  body.oneweb-template-about .os-about-v10__hero-grid { display: grid; grid-template-columns: 1fr !important; gap: 20px !important; }
  body.oneweb-template-about .os-about-v10__hero-content h1 {
    font-size: clamp(25px, 7.9vw, 36px) !important; white-space: normal !important; line-height: 1.22 !important;
  }
  body.oneweb-template-about .os-about-v10__hero-content > p { font-size: 15px !important; }
  body.oneweb-template-about .os-about-v10__hero-visual img { max-width: 350px !important; max-height: 215px !important; }
  body.oneweb-template-about .os-about-v10__hero-buttons { gap: 10px; }
  body.oneweb-template-about .os-about-v10__btn { min-height: 46px; padding: 0 15px; font-size: 13px; }
  body.oneweb-template-about .os-about-v10__company-grid { grid-template-columns: 1fr; gap: 24px; }
  body.oneweb-template-about .os-about-v10__company-copy h2 { font-size: clamp(24px,7vw,30px) !important; }
  body.oneweb-template-about .os-about-v10__company-copy > p:not(.os-about-v10__kicker) { font-size: 15px !important; }
  body.oneweb-template-about .os-about-v10__team-note { padding: 10px 13px; font-size: 13px; }
  body.oneweb-template-about .os-about-v10__stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  body.oneweb-template-about .os-about-v10__stat-card { padding: 20px 8px; }
  body.oneweb-template-about .os-about-v10__stat-card strong { font-size: 30px !important; }
  body.oneweb-template-about .os-about-v10__values-grid,
  body.oneweb-template-about .os-about-v10__why-grid { grid-template-columns: 1fr; gap: 14px; }
  body.oneweb-template-about .os-about-v10__value-card { min-height: unset; padding: 21px; }
  body.oneweb-template-about .os-about-v10__process-grid { grid-template-columns: 1fr; gap: 18px; }
  body.oneweb-template-about .os-about-v10__process-card { padding: 10px 12px 14px; background: #f5f7fa; border: 1px solid #e4ebf4; border-radius: 14px; }
  body.oneweb-template-about .os-about-v10__process-grid::before { display: none; }
  body.oneweb-template-about .os-about-v10__process-line { display: none; }
  body.oneweb-template-about .os-about-v10__process-badge { width: 61px; height: 61px; font-size: 25px; }
  body.oneweb-template-about .os-about-v10__process-card strong { font-size: 25px; }
  body.oneweb-template-about .os-about-v10__main .os-about-v10__section-title { font-size: 26px !important; }
  body.oneweb-template-about .os-about-v10__cta-box { padding: 22px; gap: 12px; }
  body.oneweb-template-about .os-about-v10__cta-copy h2 { font-size: 24px !important; }
  body.oneweb-template-about .os-about-v10__cta-copy p { font-size: 14px !important; }
  body.oneweb-template-about .os-about-v10__cta-btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.oneweb-template-about .os-about-v10__stat-card,
  body.oneweb-template-about .os-about-v10__value-card,
  body.oneweb-template-about .os-about-v10__why-card { transition: none; }
}


/* OneStack v376 — About hero uses the exact shared footer white/gold logo.
   Presentation-only: no edits to the global header, footer or other pages. */
body.oneweb-template-about .os-about-v10__hero-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
body.oneweb-template-about .os-about-v10__hero-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(94%, 540px);
  aspect-ratio: 2.45 / 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.075), rgba(239,176,0,.024) 42%, transparent 74%);
  filter: blur(25px);
}
body.oneweb-template-about .os-about-v10__hero-visual > img.os-about-v376__brand-logo {
  display: block !important;
  position: relative;
  z-index: 1;
  width: min(100%, 490px) !important;
  max-width: 490px !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.12)) !important;
  transform-origin: center;
  animation: os-about-v376-logo-enter 1.05s cubic-bezier(.18,.8,.22,1) .16s both;
}
@keyframes os-about-v376-logo-enter {
  from { opacity: 0; transform: translate3d(24px, 10px, 0) scale(.965); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (max-width: 1199px) {
  body.oneweb-template-about .os-about-v10__hero-visual { justify-content: center; }
  body.oneweb-template-about .os-about-v10__hero-visual::before { right: 50%; transform: translate(50%, -50%); }
  body.oneweb-template-about .os-about-v10__hero-visual > img.os-about-v376__brand-logo { width: min(100%, 450px) !important; max-width: 450px !important; }
}
@media (max-width: 767px) {
  body.oneweb-template-about .os-about-v10__hero-visual > img.os-about-v376__brand-logo { width: min(100%, 330px) !important; max-width: 330px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.oneweb-template-about .os-about-v10__hero-visual > img.os-about-v376__brand-logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}