/* =========================================================
 * MUSK ABOUT - ĐỐI TÁC & CHỨNG NHẬN
 *
 * Không clone logo bằng JavaScript.
 * Mỗi track gồm 4 nhóm giống nhau do PHP render.
 * ========================================================= */

.musk-about-partners-cert {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 88px 0 78px;
  background: #fff;
  color: #080b12;
}

.musk-about-partners-cert,
.musk-about-partners-cert *,
.musk-about-partners-cert *::before,
.musk-about-partners-cert *::after {
  box-sizing: border-box;
}

/* =========================================================
 * HEADER
 * ========================================================= */

.musk-about-partners-cert__header {
  position: relative;
  z-index: 2;
  margin-bottom: 44px;
  text-align: center;
}

.musk-about-partners-cert__intro {
  max-width: 720px;
  margin: 10px auto 0;
  color: #273b55;
  font-weight: 400;
  line-height: 1.65;
}

/* =========================================================
 * DẢI LOGO KHÁCH HÀNG
 *
 * Một dòng duy nhất, chạy từ phải sang trái.
 * ========================================================= */

.musk-about-partners-cert__marquees {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 50px;
}

.musk-about-partners-cert__marquees-title {
  margin: 0 0 16px;
  color: #0b1b3b;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.musk-about-partners-cert__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  contain: layout paint;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
    );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
    );
}

/* =========================================================
 * TRACK
 * ========================================================= */

.musk-about-partners-cert__track {
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Dòng trên chạy từ phải sang trái */

.musk-about-partners-cert__marquee--left .musk-about-partners-cert__track {
  animation: musk-about-partners-left 46s linear
    infinite;
}

/*
 * Track có 4 nhóm giống nhau.
 * Di chuyển đúng 1 nhóm = 25% tổng chiều rộng.
 */

@keyframes musk-about-partners-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-25%, 0, 0);
  }
}

/* =========================================================
 * NHÓM LOGO
 * ========================================================= */

.musk-about-partners-cert__logo-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: max-content;
  padding-right: 20px;
  gap: 20px;
}

/* Bọc mỗi logo trong một thẻ trắng bo tròn.
   Nhiều logo là PNG nền trong suốt, đặt thẳng lên nền xanh
   nhạt của section thì chữ đen mờ tịt và viền lem nhem. */

.musk-about-partners-cert__logo-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 68px;
  padding: 10px 16px;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  margin: 0;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(8, 20, 46, 0.05);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.musk-about-partners-cert__logo-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 !important;
  padding: 0;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.musk-about-partners-cert__logo-item:hover {
  border-color: #c9d6ee;
  transform: translateY(-2px);
}

/* =========================================================
 * HÀNG ĐỐI TÁC
 *
 * Ba đơn vị, đứng yên. Nằm trên dải logo khách hàng.
 * ========================================================= */

.musk-about-partners-cert__partners {
  position: relative;
  z-index: 2;
  margin-bottom: 34px;
}

.musk-about-partners-cert__partners-title {
  margin: 0 0 18px;
  color: #0b1b3b;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.musk-about-partners-cert__partners-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}

.musk-about-partners-cert__partner {
  display: flex;
  min-width: 0;
  height: 130px;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  border: 1px solid #e3e9f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(8, 20, 46, 0.05);
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.musk-about-partners-cert__partner:hover {
  border-color: #c9d6ee;
  box-shadow: 0 14px 30px rgba(8, 20, 46, 0.1);
  transform: translateY(-3px);
}

.musk-about-partners-cert__partner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Dừng khi rê chuột */

.musk-about-partners-cert__marquee:hover .musk-about-partners-cert__track {
  animation-play-state: paused;
}

/* Dừng khi JS xác định section ngoài màn hình */

.musk-about-partners-cert.is-paused .musk-about-partners-cert__track {
  animation-play-state: paused;
}

/* =========================================================
 * THỐNG KÊ VÀ ẢNH
 * ========================================================= */

.musk-about-partners-cert__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(270px, 2fr);
  align-items: stretch;
  width: 100%;
  gap: 20px;
}

/* =========================================================
 * GRID THỐNG KÊ
 * ========================================================= */

.musk-about-partners-cert__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 20px;
}

.musk-about-partners-cert__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 205px;
  margin: 0;
  padding: 30px 31px;
  border: 1px solid #e5eaf1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(10, 29, 67, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.musk-about-partners-cert__stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 19px 40px rgba(10, 29, 67, 0.1);
}

/* =========================================================
 * ICON THỐNG KÊ
 * ========================================================= */

.musk-about-partners-cert__stat-icon {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 19px;
  color: #07156e;
}

/* SVG nhiều màu, màu nằm sẵn trong từng path.
   KHÔNG ép fill hay stroke ở đây - ép vào là mất hết màu,
   icon thành một khối đặc một màu. */

.musk-about-partners-cert__stat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.musk-about-partners-cert__stat-number {
  display: block;
  margin: 0;
  color: #05070b;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.musk-about-partners-cert__stat-label {
  margin: 18px 0 0 !important;
  color: #303640;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* =========================================================
 * ẢNH DỊCH VỤ TOÀN CẦU
 * ========================================================= */

.musk-about-partners-cert__feature {
  position: relative;
  min-width: 0;
  min-height: 430px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #9eddf5 0%, #0757ef 100%);
  box-shadow: 0 16px 38px rgba(8, 44, 122, 0.12);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.musk-about-partners-cert__feature img,
.musk-about-partners-cert__feature-placeholder,
.musk-about-partners-cert__feature-placeholder svg {
  display: block;
  width: 100%;
  height: 100%;
}

.musk-about-partners-cert__feature img {
  position: absolute;
  inset: 0;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  transform: translateZ(0) scale(1.001);
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.musk-about-partners-cert__feature:hover img {
  transform: translateZ(0) scale(1.025);
}

.musk-about-partners-cert__feature-placeholder {
  position: absolute;
  inset: 0;
}

.musk-about-partners-cert__feature-placeholder svg {
  object-fit: cover;
}

.musk-about-partners-cert__feature-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 44%,
    rgba(5, 44, 173, 0.12) 65%,
    rgba(1, 48, 205, 0.78) 100%
    );
  pointer-events: none;
}

.musk-about-partners-cert__feature-title {
  position: absolute;
  right: 22px;
  bottom: 24px;
  left: 22px;
  z-index: 3;
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 767px) {
  .musk-about-partners-cert {
    padding: 64px 0 54px;
  }

  .musk-about-partners-cert__header {
    margin-bottom: 30px;
  }

  .musk-about-partners-cert__marquees {
    margin-bottom: 34px;
  }

  .musk-about-partners-cert__logo-group {
    padding-right: 14px;
    gap: 14px;
  }

  .musk-about-partners-cert__logo-item {
    width: 124px;
    height: 58px;
    padding: 9px 12px;
    border-radius: 10px;
  }

  /* Hàng đối tác về một cột: ba logo cạnh nhau trên màn hẹp
     thì mỗi cái chỉ còn hơn 100px, đọc không ra. */

  .musk-about-partners-cert__partners {
    margin-bottom: 26px;
  }

  .musk-about-partners-cert__partners-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .musk-about-partners-cert__partner {
    height: 104px;
    padding: 18px 22px;
    border-radius: 14px;
  }

  .musk-about-partners-cert__content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .musk-about-partners-cert__stat {
    min-height: 145px;
    padding: 20px;
    border-radius: 17px;
  }

  .musk-about-partners-cert__stat-icon {
    width: 39px;
    height: 39px;
    margin-bottom: 15px;
  }

  .musk-about-partners-cert__stat-label {
    margin-top: 10px;
    font-size: 12px;
  }

  .musk-about-partners-cert__feature {
    min-height: 350px;
    border-radius: 18px;
  }

  .musk-about-partners-cert__intro {
    margin-top: 7px;
    line-height: 1.55;
  }


  .musk-about-partners-cert__stats {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .musk-about-partners-cert__stat-number {
    font-size: 32px;
  }

  .musk-about-partners-cert__feature-title {
    right: 20px;
    bottom: 21px;
    left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .musk-about-partners-cert__marquee {
    overflow-x: auto;
    contain: none;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }

  .musk-about-partners-cert__marquee::-webkit-scrollbar {
    display: none;
  }

  .musk-about-partners-cert__track {
    transform: none !important;
    animation: none !important;
  }

  .musk-about-partners-cert__logo-group[aria-hidden="true"] {
    display: none;
  }

  .musk-about-partners-cert__logo-item img,
  .musk-about-partners-cert__stat,
  .musk-about-partners-cert__feature img {
    transition: none !important;
  }
}