/* Hòa Phát About reference. Copy .875×Body; section headings .7×H2,
   card headings .65×H3, long-form heading .75×H3. Shared AZ settings remain active. */
.az-child-about { background: var(--az-color-surface,#fff); color: var(--az-color-text,#424242); font-size: .875em; }
.az-child-about :is(h2,h3) { font-family: var(--az-font-heading); font-weight: var(--az-heading-weight); line-height: var(--az-heading-line-height); letter-spacing: var(--az-heading-letter-spacing); color: var(--az-color-heading); }
.az-child-about h2 { margin: 0 0 16px; font-size: calc(var(--az-h2-size,34px) * .7); }
.az-child-about h3 { margin: 0 0 12px; font-size: calc(var(--az-h3-size,26px) * .65); }
.az-child-about p { margin: 0 0 20px; }
.az-child-about :is(p,h3):empty { display: none; }
.az-child-about [id] { scroll-margin-top: 100px; }
.az-child-about__section { padding-block: 42px; }
.az-child-about__mission-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 34px; }
.az-child-about__mission-grid > header { text-align: center; }
.az-child-about__mission-grid > header h2 { font-size: calc(var(--az-h3-size,26px) * .72); }
.az-child-about__mission-grid blockquote { margin: 0; border-left: 2px solid var(--az-color-primary); padding: 5px 18px; color: var(--az-color-primary); font-size: 1.15em; font-weight: 600; font-style: italic; }
.az-child-about__copy p:last-child { margin-bottom: 0; }
.az-child-about__soft { background: var(--az-color-page,#f6f6f6); }
.az-child-about .az-child-about__benefits-title { text-align: center; margin-bottom: 38px; }
.az-child-about__benefits-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
.az-child-about__benefit { text-align: center; min-width: 0; }
.az-child-about__benefit > img { display: block; width: 76px; height: 76px; object-fit: contain; margin: 0 auto 22px; }
.az-child-about__benefit p { margin: 0; }
.az-child-about .az-child-about__story-title { font-size: calc(var(--az-h3-size,26px) * .75); }
.az-child-about__quality { width: min(100%,720px); margin: 26px auto 34px; background: var(--az-color-page); }
.az-child-about__quality > img { display: block; width: 100%; height: auto; }
.az-child-about__quality figcaption { padding: 8px 14px; font-size: .85em; font-style: italic; text-align: center; }
.az-child-about .az-child-about__phone { margin: 0 0 16px; }
.az-child-about__phone a { color: var(--az-color-error,#e53039); font-weight: 700; font-size: 1.1em; }
.az-child-about__phone a:hover { text-decoration: underline; }
.az-child-about__video { position: relative; width: min(100%,560px); aspect-ratio: 16/9; margin: 24px auto 0; background: #151515; }
.az-child-about__video :is(button,iframe) { display: block; width: 100%; height: 100%; border: 0; }
.az-child-about__video button { position: relative; padding: 0; background: #151515; cursor: pointer; }
.az-child-about__video button img { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.az-child-about__video button span { display: grid; place-items: center; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 64px; height: 44px; border-radius: 12px; background: #e21e2c; color: #fff; font-size: 22px; }
.az-child-about__video noscript a { position: absolute; bottom: 10px; left: 10px; color: #fff; }
.az-child-about__related { padding: 0 0 62px; }
.az-child-about__related p { margin: 0; }
.az-child-about__related :is(a,span) { color: var(--az-color-primary); font-weight: 600; }
.az-child-about :is(a,button):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 960px) {
  .az-child-about__mission-grid { grid-template-columns: 1fr 2.4fr; gap: 24px; }
  .az-child-about__benefits-grid { gap: 24px; }
}
@media (max-width: 782px) {
  .az-child-about__section { padding-block: 32px; }
  .az-child-about__mission-grid { grid-template-columns: 1fr; }
  .az-child-about__mission-grid > header { text-align: left; }
  .az-child-about__benefits-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 22px; }
  .az-child-about__related { padding-bottom: 38px; }
}
@media (max-width: 480px) {
  .az-child-about__benefit > img { width: 64px; height: 64px; }
  .az-child-about__benefit h3 { overflow-wrap: anywhere; }
  .az-child-about__quality { margin-block: 22px; }
}
@media (min-width: 783px) {
  #page.az-child-panda-site .az-child-about-overlay { position: absolute; inset: 0 0 auto; z-index: 50; background: transparent; }
}
.az-child-about .az-child-about__accent { color: var(--az-color-primary); }