/* Restore the original desktop hero carousel: previous, active and next cards
 * stay visible together. Mobile retains the compact single-card experience. */
body.home #main .xg-hero-v13[data-xg-hero] .xg-slider {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (min-width: 1101px) {
  .home #main .xg-hero-v13 {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
  }

  .home #main .xg-hero-v13 .xg-wrap {
    width: min(100%, 1240px) !important;
    max-width: 1240px !important;
    grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr) !important;
    gap: clamp(28px, 3vw, 46px) !important;
  }

  .home #main .xg-hero-v13 .xg-slider {
    width: 100% !important;
    max-width: 650px !important;
    overflow: visible !important;
    filter: none !important;
  }

  .home #main .xg-hero-v13 .xg-stage {
    display: flex !important;
    width: 100% !important;
    height: 450px !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .home #main .xg-hero-v13 .xg-slide,
  .home #main .xg-hero-v13 .xg-slide.is-prev,
  .home #main .xg-hero-v13 .xg-slide.is-next,
  .home #main .xg-hero-v13 .xg-slide.is-hidden {
    position: absolute !important;
    inset: auto !important;
    width: 300px !important;
    height: 414px !important;
    border: 7px solid rgba(255, 255, 255, .82) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 46px rgba(66, 39, 25, .14) !important;
    transition: transform 520ms cubic-bezier(.2, .8, .2, 1), opacity 520ms cubic-bezier(.2, .8, .2, 1), box-shadow 520ms !important;
  }

  .home #main .xg-hero-v13 .xg-slide.is-active {
    z-index: 3 !important;
    opacity: 1 !important;
    transform: translateX(0) scale(1) rotateY(0deg) !important;
    pointer-events: auto !important;
    box-shadow: 0 26px 58px rgba(139, 90, 60, .2) !important;
  }

  .home #main .xg-hero-v13 .xg-slide.is-prev {
    z-index: 2 !important;
    opacity: .76 !important;
    transform: translateX(-68%) scale(.82) rotateY(10deg) !important;
    pointer-events: auto !important;
  }

  .home #main .xg-hero-v13 .xg-slide.is-next {
    z-index: 2 !important;
    opacity: .76 !important;
    transform: translateX(68%) scale(.82) rotateY(-10deg) !important;
    pointer-events: auto !important;
  }

  .home #main .xg-hero-v13 .xg-slide.is-hidden {
    z-index: 1 !important;
    opacity: 0 !important;
    transform: scale(.68) !important;
    pointer-events: none !important;
  }

  .home #main .xg-hero-v13 .xg-slide img { border-radius: 17px !important; }
  .home #main .xg-hero-v13 .xg-nav.xg-prev { left: 4px !important; }
  .home #main .xg-hero-v13 .xg-nav.xg-next { right: 4px !important; }
}

/* Fluid wide-screen rhythm. The cap prevents oversized layouts on ultrawide
 * monitors, while the viewport gap keeps comfortable breathing room. */
@media (min-width: 1440px) {
  body.home .header-main .header-inner,
  body.home .header-bottom .flex-row {
    width: min(92vw, 1500px) !important;
    max-width: 1500px !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .xg-wrap {
    width: min(92vw, 1500px) !important;
    max-width: 1500px !important;
    grid-template-columns: minmax(520px, .84fr) minmax(700px, 1.16fr) !important;
    gap: clamp(42px, 4vw, 72px) !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .hero-content {
    width: 100% !important;
    max-width: 650px !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .xg-slider {
    width: 100% !important;
    max-width: 760px !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .xg-stage {
    width: 100% !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .xg-slide,
  body.home #main .xg-hero-v13[data-xg-hero] .xg-slide.is-prev,
  body.home #main .xg-hero-v13[data-xg-hero] .xg-slide.is-next,
  body.home #main .xg-hero-v13[data-xg-hero] .xg-slide.is-hidden {
    width: 330px !important;
    height: 414px !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .xg-slide.is-prev {
    transform: translateX(-64%) scale(.82) rotateY(10deg) !important;
  }

  body.home #main .xg-hero-v13[data-xg-hero] .xg-slide.is-next {
    transform: translateX(64%) scale(.82) rotateY(-10deg) !important;
  }

  body.home #main .section-content > .row:not(.row-full-width),
  body.home #main .xgbt8-shell {
    width: min(92vw, 1500px) !important;
    max-width: 1500px !important;
  }

  body.home #main .san-pham-home > .section-content {
    width: min(92vw, 1500px) !important;
    max-width: 1500px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.home #main .san-pham-home > .section-content > .row {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.home #main .san-pham-home .col-inner > .row.row-small {
    width: auto !important;
    max-width: none !important;
  }

  body.home #main .san-pham-home .tille-home {
    width: 100% !important;
    max-width: none !important;
  }
}