/* Match the logo blue and keep small text readable on the gold surfaces. */
body.page-id-476 .elementor {
  --e-global-color-primary: #2c3f8e;
  --dgp-about-brand-blue: #2c3f8e;
  --dgp-about-brand-blue-on-gold: #1b2f73;
  --dgp-about-gold-on-brand-blue: var(--dgp-gold);
}

body.page-id-476 .dgp-about-v3 {
  --navy: var(--dgp-about-brand-blue);
}

body.page-id-476 .dgp-about-vision,
body.page-id-476 .dgp-about-quality {
  color: var(--cream);
}

body.page-id-476 .dgp-about-vision .dgp-eyebrow,
body.page-id-476 .dgp-about-quality .dgp-eyebrow {
  color: var(--dgp-about-gold-on-brand-blue) !important;
}

body.page-id-476 .dgp-about-vision .dgp-eyebrow::before,
body.page-id-476 .dgp-about-quality .dgp-eyebrow::before {
  background-color: var(--dgp-about-gold-on-brand-blue);
}

body.page-id-476 .dgp-about-quality .elementor-icon-list-text,
body.page-id-476 .dgp-about-quality .elementor-icon-list-icon {
  color: var(--cream) !important;
}

body.page-id-476 .dgp-btn-primary .elementor-button,
body.page-id-476 .dgp-about-numbers,
body.page-id-476 .dgp-about-numbers .elementor-counter-number-wrapper,
body.page-id-476 .dgp-about-counter .elementor-counter-title {
  color: var(--dgp-about-brand-blue-on-gold) !important;
}

body.page-id-476 .wpcf7-response-output {
  border-color: var(--dgp-about-brand-blue) !important;
  color: var(--dgp-about-brand-blue) !important;
}

/* Keep the About story's brand surfaces distinct from the shared white catalog. */
body.page-id-476 #main .dgp-about-v3 {
  --navy: #293992;
  --gold: var(--dgp-gold);
  --cream: #f7f5f0;
  --ink: #182a54;
  --body: #343c48;
}
body.page-id-476 #main .dgp-about-v3 h2 {
  font-size: clamp(2.7rem, 4.6vw, 4.8rem) !important;
  line-height: 1.09 !important;
  max-width: 18ch;
}
body.page-id-476 #main .dgp-about-v3 h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important; }
body.page-id-476 #main .dgp-about-v3 p { font-size: clamp(1rem, 1.15vw, 1.12rem); }
body.page-id-476 #main nav.dgp-about-nav { background: #f7f5f0 !important; }
body.page-id-476 #main section.dgp-about-history { background: #f7f5f0 !important; }
body.page-id-476 #main .dgp-about-history .dgp-year {
  color: #a47c58 !important;
}
body.page-id-476 #main section.dgp-about-vision,
body.page-id-476 #main section.dgp-about-quality { background: #293992 !important; }
body.page-id-476 #main section.dgp-about-values { background: #ede4d7 !important; }
body.page-id-476 #main section.dgp-about-numbers { background-image: var(--dgp-gold-gradient) !important; }
body.page-id-476 #main section.dgp-about-capability { background: #f7f5f0 !important; }
body.page-id-476 #main section.dgp-about-process { background: #fff !important; }
body.page-id-476 #main section.dgp-about-profile { background: #e8dac7 !important; }
body.page-id-476 #main section.dgp-about-consult { background: #f7f5f0 !important; }
body.page-id-476 #main :is(.dgp-about-vision, .dgp-about-quality) :is(h2, h3, p, li, small, strong, span) {
  color: #f7f5f0 !important;
}
body.page-id-476 #main section.dgp-about-vision .elementor-heading-title,
body.page-id-476 #main section.dgp-about-quality .elementor-heading-title {
  color: #fff !important;
}
body.page-id-476 #main .dgp-about-quality h2.elementor-heading-title,
body.page-id-476 #main .dgp-about-vision h2.elementor-heading-title {
  color: #fff !important;
}
body.page-id-476 #main section.dgp-about-quality.elementor-section .elementor-widget-heading h2,
body.page-id-476 #main section.dgp-about-vision.elementor-section .elementor-widget-heading h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.page-id-476 #main section.dgp-about-quality.elementor-section .elementor-widget-heading h2 em,
body.page-id-476 #main section.dgp-about-vision.elementor-section .elementor-widget-heading h2 em {
  color: var(--dgp-gold) !important;
  -webkit-text-fill-color: var(--dgp-gold) !important;
}
body.page-id-476 #main section.dgp-about-vision .elementor-heading-title em,
body.page-id-476 #main section.dgp-about-quality .elementor-heading-title em {
  color: var(--dgp-gold) !important;
}
body.page-id-476 #main :is(.dgp-about-vision, .dgp-about-quality) :is(.dgp-eyebrow, em, .elementor-icon, .elementor-icon-list-icon) {
  color: var(--dgp-gold) !important;
}
body.page-id-476 #main :is(.dgp-about-vision, .dgp-about-quality) :is(.elementor-icon i, .elementor-icon-list-icon i, .elementor-icon svg) {
  color: var(--dgp-gold) !important;
  fill: currentColor;
}
body.page-id-476 #main .dgp-about-vision .dgp-about-icon-card {
  background: #34469d !important;
  border-color: color-mix(in srgb, var(--dgp-gold) 55%, transparent);
}
body.page-id-476 #main .dgp-about-values .dgp-about-value-card,
body.page-id-476 #main .dgp-about-capability .dgp-about-cap-card {
  background: #fffdfa !important;
  border-color: #cdbb9f;
}
/* Năng lực: each specialty reads as a distinct, rounded frame. */
body.page-id-476 #main .dgp-about-capability .dgp-about-card-grid > .elementor-container {
  gap: clamp(20px, 2.4vw, 32px);
}
body.page-id-476 #main .dgp-about-capability .dgp-about-cap-card {
  min-height: 278px;
  padding: clamp(30px, 3.1vw, 46px) clamp(24px, 2.6vw, 40px);
  border: 2px solid var(--dgp-gold) !important;
  border-radius: 28px;
  background: #fffdfa !important;
}
body.page-id-476 #main .dgp-about-capability .dgp-about-cap-card .elementor-icon {
  color: #a47c58 !important;
}
body.page-id-476 #main .dgp-about-capability .dgp-about-cap-card h3 {
  margin-top: 18px !important;
  color: #293992 !important;
}
body.page-id-476 #main .dgp-about-capability .dgp-about-cap-card p {
  max-width: 28ch;
  margin-inline: auto;
  color: #4d5360 !important;
}
body.page-id-476 #main .dgp-about-profile .dgp-about-proof-card {
  background: #f8f3ea !important;
  border-color: #cfb998;
}
body.page-id-476 #main .dgp-about-cap-card .elementor-icon,
body.page-id-476 #main .dgp-about-proof-card .elementor-icon,
body.page-id-476 #main .dgp-about-value-card .elementor-icon { color: #293992 !important; }
body.page-id-476 #main .dgp-about-numbers :is(.elementor-counter-number-wrapper, .elementor-counter-title) { color: #182a54 !important; }
body.page-id-476 #main .dgp-about-numbers .elementor-column + .elementor-column { border-left-color: rgba(24, 42, 84, .3); }
body.page-id-476 #main .dgp-about-nav .elementor-button:hover,
body.page-id-476 #main .dgp-about-nav .elementor-button[aria-current="true"] {
  background: #293992 !important;
  color: #fff !important;
}
body.page-id-476 #main .dgp-about-nav { --about-progress: 0; }
body.page-id-476 #main .dgp-about-nav::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto auto -1px 0;
  width: 100%;
  height: 3px;
  background: #a47c58;
  transform: scaleX(var(--about-progress));
  transform-origin: left center;
  transition: transform .15s linear;
}
body.page-id-476 #main .dgp-about-hero-lead p { color: #f7f5f0 !important; }
body.page-id-476 #main .dgp-about-hero .dgp-btn-outline .elementor-button { color: #fff !important; }
body.page-id-476 #main .dgp-about-v3 a:focus-visible { outline: 3px solid var(--dgp-gold) !important; outline-offset: 4px; }
body.page-id-476 #main .dgp-about-process-intro { max-width: 680px; margin-bottom: 44px; }
body.page-id-476 #main .dgp-about-process-track > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 42px);
}
body.page-id-476 #main .dgp-about-process-track .elementor-column {
  width: auto !important;
  min-width: 0;
  padding-top: 20px;
  border-top: 2px solid #a47c58;
}
body.page-id-476 #main .dgp-about-process-number h3 {
  margin: 0 0 25px !important;
  color: #a47c58 !important;
  font: 600 clamp(3.5rem, 6vw, 5.5rem)/.9 ""Be Vietnam Pro", Arial, sans-serif !important;
  letter-spacing: -.055em;
}
body.page-id-476 #main .dgp-about-process-title h3 {
  min-height: 2.4em;
  margin: 0 0 16px !important;
  color: #182a54 !important;
  line-height: 1.2 !important;
}
body.page-id-476 #main .dgp-about-process-copy p { max-width: 32ch; margin: 0; color: #343c48; line-height: 1.7; }

@media (max-width: 1000px) {
  body.page-id-476 #main .dgp-about-process-track > .elementor-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  body.page-id-476 #main .dgp-about-v3 h2 { font-size: clamp(2.4rem, 10vw, 3.5rem) !important; }
  body.page-id-476 #main .dgp-about-numbers .elementor-column + .elementor-column { border-left: 0; border-top: 1px solid rgba(24, 42, 84, .3); }
  body.page-id-476 #main .dgp-about-process-track > .elementor-container { grid-template-columns: 1fr; gap: 32px; }
  body.page-id-476 #main .dgp-about-process-title h3 { min-height: 0; }
  body.page-id-476 #main .dgp-about-nav > .elementor-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-id-476 #main .dgp-about-nav .elementor-column { min-width: 0 !important; width: auto !important; }
  body.page-id-476 #main .dgp-about-nav .elementor-button { min-height: 52px; font-size: .7rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-476 #main .dgp-about-nav::after { transition: none; }
}

/* A clearly labelled conceptual comparison, independent of the showroom photo. */
body.page-id-476 #main section.dgp-about-concept { background: #f1ebe2 !important; }
body.page-id-476 #main .dgp-about-concept .dgp-eyebrow { color: #a47c58 !important; }
body.page-id-476 #main .dgp-about-concept-intro { max-width: 720px; margin-bottom: 28px; }
body.page-id-476 #main .dgp-about-compare { margin: 0; }
body.page-id-476 #main .dgp-about-compare__frame { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #dbd4ca; touch-action: pan-y; }
body.page-id-476 #main .dgp-about-compare__frame img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.page-id-476 #main .dgp-about-compare__after { clip-path: inset(0 0 0 var(--dgp-split)); }
body.page-id-476 #main .dgp-about-compare__line { position: absolute; z-index: 2; left: var(--dgp-split); top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgba(24,42,84,.24); pointer-events: none; }
body.page-id-476 #main .dgp-about-compare__line::after { content: '↔'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; transform: translate(-50%, -50%); background: #293992; color: #fff; font: 30px/1 Arial, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
body.page-id-476 #main .dgp-about-compare__tag { position: absolute; top: 18px; z-index: 3; padding: 7px 13px; border-radius: 2px; background: rgba(24,42,84,.9); color: #fff; font-size: 15px; font-weight: 600; pointer-events: none; }
body.page-id-476 #main .dgp-about-compare__tag--before { left: 18px; }
body.page-id-476 #main .dgp-about-compare__tag--after { right: 18px; }
body.page-id-476 #main .dgp-about-compare__range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
body.page-id-476 #main .dgp-about-compare__range:focus-visible { opacity: .01; outline: 4px solid var(--dgp-gold); outline-offset: -4px; }
body.page-id-476 #main .dgp-about-compare figcaption { margin-top: 14px; color: #4d5360; font-size: 14px; line-height: 1.5; text-align: center; }
@media (max-width: 650px) {
  body.page-id-476 #main .dgp-about-compare__frame { aspect-ratio: 4 / 3; }
  body.page-id-476 #main .dgp-about-compare__tag { top: 10px; padding: 6px 8px; font-size: 11px; }
  body.page-id-476 #main .dgp-about-compare__tag--before { left: 10px; }
  body.page-id-476 #main .dgp-about-compare__tag--after { right: 10px; }
  body.page-id-476 #main .dgp-about-compare__line::after { width: 46px; height: 46px; font-size: 24px; }
}