body.detail-edition {
  --detail-surface: #101d32;
  --detail-raised: #15243c;
  --detail-border: #3b5275;
  --detail-active: #7897d5;
  color-scheme: dark;
}

body.detail-edition .info-grid > article {
  position: relative;
  background: var(--detail-surface);
  border-color: var(--detail-border);
}

body.detail-edition .info-grid > article::before {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 15px;
  inline-size: 31px;
  block-size: 2px;
  background: var(--detail-active);
  content: "";
  pointer-events: none;
  transform-origin: left;
}

body.detail-edition #goi-trien-khai .info-grid > article:nth-child(2)::before {
  background: var(--lime, #e9f779);
}

body.detail-edition .info-grid > article:focus-within {
  background: var(--detail-raised);
  border-color: var(--detail-active);
}

body.detail-edition .info-grid > article:focus-within::before {
  transform: scaleX(1.55);
}

body.detail-edition .content-section a:not(.button) {
  color: #b5c6ff;
  text-decoration-color: #7890d0;
  text-underline-offset: .19em;
}

body.detail-edition .content-section a:not(.button):focus-visible {
  color: #e4ebff;
  text-decoration-color: currentColor;
  text-underline-offset: .28em;
}

body.detail-edition .content-section:target > h2 {
  color: #dce6ff;
}

body.detail-edition .table-scroll {
  border-color: var(--detail-border);
}

body.detail-edition .content-section table {
  background: var(--detail-surface);
}

body.detail-edition .content-section th {
  background: #1b2b48;
}

body.detail-edition .content-section tbody th {
  background: var(--detail-surface);
}

body.detail-edition .faq > details {
  background: var(--detail-surface);
  border-color: var(--detail-border);
}

body.detail-edition .faq > details:focus-within,
body.detail-edition .faq > details[open] {
  border-color: var(--detail-active);
}

body.detail-edition .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 48px;
  list-style: none;
}

body.detail-edition .faq summary::-webkit-details-marker {
  display: none;
}

body.detail-edition .faq summary::after {
  flex: none;
  inline-size: .48rem;
  block-size: .48rem;
  margin-inline-end: .2rem;
  border: solid #a7b7ff;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  content: "";
}

body.detail-edition .faq details[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

body.detail-edition .nav-group summary > span {
  display: inline-block;
}

body.detail-edition .nav-group[open] summary > span {
  transform: rotate(180deg);
}

body.detail-edition :is(.product-screen, .motion) {
  background: var(--detail-surface);
  border-color: var(--detail-border);
}

body.detail-edition :is(.product-screen, .motion) figcaption {
  color: #bdcce7;
  border-top: 1px solid var(--detail-border);
}

body.detail-edition .product-screen [data-image]:focus-visible {
  outline-offset: -3px;
}

body.detail-edition .product-screen [data-image]:focus-visible .zoom {
  color: #182135;
  background: var(--lime, #e9f779);
  border-color: var(--lime, #e9f779);
}

body.detail-edition .motion button {
  color: #e3ecff;
  background: #152641;
  border-color: #526b98;
}

body.detail-edition .motion button:is(:hover, :focus-visible) {
  color: #fff;
  background: #273b60;
  border-color: #8fa6e0;
}

body.detail-edition .image-dialog [data-close-image] {
  color: #e3ecff;
  background: #1d3152;
}

body.detail-edition .consult-form {
  background: var(--detail-surface);
  border-color: var(--detail-border);
}

body.detail-edition .consult-choice:has(:checked) {
  background: var(--detail-raised);
  border-color: var(--detail-active);
  box-shadow: inset 3px 0 0 #a7b7ff;
}

body.detail-edition .consult-field :is(input, select, textarea):focus {
  background: #11213a;
  border-color: var(--detail-active);
}

body.detail-edition .consult-submit {
  color: #fff;
  background: #3549c9;
  border-color: #5268e2;
}

body.detail-edition .consult-submit:enabled:is(:hover, :focus-visible) {
  color: #fff;
  background: #4459e0;
}

@media (hover: hover) {
  body.detail-edition .info-grid > article:hover {
    background: var(--detail-raised);
    border-color: var(--detail-active);
  }

  body.detail-edition .info-grid > article:hover::before {
    transform: scaleX(1.55);
  }

  body.detail-edition .content-section a:not(.button):hover {
    color: #e4ebff;
    text-decoration-color: currentColor;
    text-underline-offset: .28em;
  }

  body.detail-edition .content-section tbody tr:hover > :is(th, td),
  body.detail-edition .faq summary:hover,
  body.detail-edition .consult-choice:hover {
    background: var(--detail-raised);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.detail-edition :is(
    .info-grid > article,
    .faq > details,
    .faq summary,
    .content-section tbody :is(th, td),
    .consult-choice,
    .consult-field :is(input, select, textarea),
    .consult-submit,
    .motion button,
    .product-screen .zoom
  ) {
    transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease;
  }

  body.detail-edition .info-grid > article::before,
  body.detail-edition .nav-group summary > span,
  body.detail-edition .faq summary::after {
    transition: transform 170ms ease;
  }

  body.detail-edition .content-section a:not(.button) {
    transition: color 170ms ease, text-decoration-color 170ms ease, text-underline-offset 170ms ease;
  }

  body.detail-edition .product-screen [data-image] img {
    transition: transform 260ms ease-out;
  }

  body.detail-edition .product-screen [data-image]:focus-visible img {
    transform: scale(1.018);
  }

  body.detail-edition .consult-form :is([data-intent-fields], [data-product-fields]):not([hidden]),
  body.detail-edition .consult-result:not([hidden]) {
    animation: detail-control-in 180ms ease-out;
  }

  @keyframes detail-control-in {
    from { opacity: .78; }
    to { opacity: 1; }
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.detail-edition .product-screen [data-image]:hover img {
    transform: scale(1.018);
  }
}