.superiority-bg {
  position: relative;
  z-index: 1;
}
/* .superiority-1 {
  background: url("../img/superiority/superiority_bg.png") no-repeat center, url('../img/superiority/superiority2-bg.png') no-repeat center;
  height: 2136px;
} */
.superiority-layout {
  padding: 0 96px;
}
.superiority-bg-2 {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1440px; /* đúng bề rộng ảnh; canh giữa -> mép element trùng mép ảnh */
  margin-inline: auto;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 1160px;
  z-index: 0;
  pointer-events: none;
  /* Làm mờ dần các mép trái/phải VÀ cạnh dưới để ẩn viền ảnh nền; 2 mask giao nhau */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 18%,
      #000 82%,
      transparent 100%
    ),
    linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 18%,
      #000 82%,
      transparent 100%
    ),
    linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.superiority-bg-2 > * {
  position: relative;
  z-index: 1;
}
.superiority-2 {
  margin-top: 130px;
}


.superiority-info .box-3d {
  width: 180px;
}

.superiority-info {
  gap: 24px;
  margin-bottom: 48px;
}
.superiority-info-title {
  gap: 8px;
}
.superiority-content {
  gap: 16px;
  align-self: stretch;
  padding: 0 36px;
}
.superiority-box-title {
  display: flex;
  height: 54px;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
  margin: 0 69px;
}
.superiority-monitor-box {
  display: flex;
  width: 100%;
 justify-content: space-between;
}
/* Swiper điều khiển hiển thị: mỗi panel là 1 slide, luôn hiển thị,
   Swiper tự translate để chỉ slide active nằm trong khung */
.superiority-box-slide.swiper {
  width: 1137px;
  max-width: 100%;
  overflow: hidden;
}
.superiority-box-slide .swiper-wrapper {
  /* Ghi đè .flex-column-center-base (flex-direction:column) trên markup widget:
     Swiper cần xếp slide NGANG. Mobile (<=768px) đã trả về column qua media query bên dưới. */
  flex-direction: row;
  align-items: flex-start;
}
.superiority-box-slide .swiper-slide {
  height: auto;
}
.superiority-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Desktop: các slide bằng chiều cao nhau (= slide cao nhất) để card không
   nhảy chiều cao khi cuộn đổi tab -> canh giữa ổn định, không khựng */
@media (min-width: 1025px) {
  .superiority-box-slide .swiper-wrapper {
    align-items: stretch;
  }
}

/* ===== Hiệu ứng "Cover" khi chuyển tab (panel mới trượt phủ đè panel cũ) ===== */
/* Khi đang cover: cắt phần slide thò ra ngoài khung (chống vệt sliver bên phải) */
.superiority-box-content.is-covering {
  overflow: hidden;
}
/* Slide cũ thành "lớp trống": ẩn nội dung + cùng màu đệm với slide mới
   -> cả khung đồng đều 1 màu khi trượt, không lộ vệt nối, chỉ chữ mới di chuyển vào */
.superiority-panel.is-cover-out {
  background:  linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.04) 100%);

}
.superiority-panel.is-cover-out .superiority-monitor-box,
.superiority-panel.is-cover-out .superiority-btn {
  opacity: 0;
  transition: opacity 0.18s ease;
}
/* Panel mới: lớp phủ đặt chồng, CANH GIỮA khớp panel nghỉ (tránh lòi mép),
   bắt đầu nằm ngoài khung theo hướng --cover-from */
.superiority-panel.is-cover-enter {
  opacity: 1;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  pointer-events: none;
  transform: translateX(-50%) translateX(var(--cover-from, 100%));
  /* Lớp đệm TẠM THỜI: nền đặc đồng đều che chữ slide cũ trong lúc trượt;
     khi xong transition class bị gỡ -> card trở lại nền trong suốt như cũ */
  background:  linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.04) 100%);

}
/* Trượt vào vị trí 0 -> hiệu ứng cover, làm chậm bằng --cover-dur */
.superiority-panel.is-cover-go {
  transform: translateX(-50%) translateX(0);
  transition: transform var(--cover-dur, 1s) cubic-bezier(0.65, 0, 0.35, 1);
}

/* Giảm chuyển động: bỏ trượt, chỉ fade phủ lên (vẫn giữ canh giữa) */
@media (prefers-reduced-motion: reduce) {
  .superiority-panel.is-cover-enter {
    transform: translateX(-50%);
    opacity: 0;
  }
  .superiority-panel.is-cover-go {
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity 0.4s ease;
  }
}

.superiority-item {
  display: flex;
  padding: 0 5px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #7494a433;
  border-radius: 0 12px 0 0;
  background: rgba(116, 148, 164, 0.2);
  flex: 1;
  cursor: pointer;
}

.superiority-item h2 {
  padding: 10px 15px;
  font-size: 20px;
  color: #c9dee3;
  font-weight: 400;
  margin: 0 auto;
}
.superiority-box-title .active {
  background: linear-gradient(
    181deg,
    rgba(0, 198, 239, 0.72) -120.31%,
    rgba(255, 255, 255, 0.9) 122.41%
  ) !important;
}
.superiority-box-title .active h2 {
  color: #000b12;
  font-family: "Inter";
  font-size: 20px;
  font-weight: 500;
}
.superiority-box-content {
  gap: 0;
  align-self: stretch;
  position: relative;
  width: 100%;
}
.superiority-monitor {
  display: flex;
  width: 100%;
  padding: 56px 64px;
  justify-content: space-between;
  align-items: center;
  border-radius: 48px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
}

.superiority-monitor-text {
  align-items: flex-start;
  gap: 36px;
}
.superiority-monitor-title {
  width: 545px;
  padding: 0 4px 8px 4px;
  gap: 8px;
}

.superiority-monitor-title h3 {
  color: #05b6da;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.superiority-monitor-title-2 {
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  width: 537px;
}
.superiority-monitor-title-2 h4 {
  text-align: center;
  font-family: "Saira";
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
	margin: 0;
}
.superiority-monitor-title-2 p {
  color: #c9dee3;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.28px;
}
.superiority-monitor-img {
  width: 392px;
  height: auto;
}

.superiority-monitor-content {
  width: 100%;
  justify-content: center;
  gap: 24px;
  align-self: stretch;
}

.superiority-monitor-list {
  display: flex;
  gap: 24px;
  position: relative;
}

.superiority-monitor-rs {
  display: flex;
  padding: 56px 64px;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 24px 24px 24px;
  border: 1px solid #103c5e;
  background: linear-gradient(180deg, #012e40 0%, rgba(1, 46, 64, 0) 140.35%);
  backdrop-filter: blur(50px);
}

.superiority-monitor-list:nth-child(n + 2)::before {
  display: none;
}

.superiority-monitor-list::before {
  content: "";
  position: absolute;
  left: 290px;
  width: 1px;
  height: 130px;
  background: linear-gradient(
    180deg,
    rgba(0, 198, 239, 0.24) -137%,
    rgba(255, 255, 255, 0.3) 100%
  );
}

.superiority-monitor-item {
  gap: 12px;
  width: 266px;
}

.superiority-monitor-list .superiority-monitor-item:last-child{
	width: 210px;
}

.superiority-monitor-item-title {
  align-items: flex-start;
  gap: 12px;
}
.superiority-monitor-item-box {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.superiority-monitor-item-icon {
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
}
.superiority-monitor-item-box h3 {
  color: #05b6da;
  font-size: 16px;
  font-weight: 400;
  height: 16px;
  margin: 0;
  white-space: nowrap;
}
.superiority-monitor-item p {
  width: 100%;
  color: #c9dee3;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.28px;
}
.superiority-line-row {
  width: 542px;
  height: 1px;
  background: linear-gradient(
    180deg,
    rgba(0, 198, 239, 0.24) -137%,
    rgba(255, 255, 255, 0.3) 100%
  );
}
.superiority-box-content .right {
  flex-direction: row-reverse;
}
.right .superiority-monitor-img {
  width: 100%;
  height: 393.235px;
}
.superiority-monitor-text {
  flex: 1;
}
.superiority-editor .superiority-panel {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

.superiority-box-slide .swiper-wrapper.superiority-editor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  transform: none !important;
  height: auto !important;
}
.superiority-box-slide .swiper-wrapper.superiority-editor .swiper-slide {
  width: 100% !important;
  margin: 0 !important;
}

.superiority-monitor {
  perspective: 1000px;
}
.superiority-monitor-img,
.superiority-monitor-text {
  transition: transform 0.35s ease;
  will-change: transform;
}

@media (max-width: 768px) {
  .superiority-layout {
    padding: 0;
  }
  .superiority-info .corner {
    display: none;
  }

 .superiority-bg-2 {
     max-width: 343px;
     background-position: center 540px;
  }
  .superiority-2 {
    position: relative;
    Margin-top: 80px;
  }
  
  .superiority-2 > * {
    position: relative;
    z-index: 1;
  }
	
  .superiority-info .box-3d {
    width: auto;
    border: none;
  }
  .superiority-info {
    margin-bottom: 32px;
  }
  .superiority-content {
    padding: 0;
    margin: 0;
  }

  /* Hàng tab cuộn ngang nếu không vừa */
  .superiority-box-title {
    height: auto;
    margin: 0;
    gap: 4px;
    flex-wrap: wrap;
  }
  .superiority-item {
    padding: 0;
    min-width: 0;
  }
  .superiority-item h2 {
    padding: 9px 2px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    width: 100%;
  }
  .superiority-box-title .active h2 {
    font-size: 12px;
  }

  .superiority-box-content {
    gap: 40px;
	width: 100%;
  }

  /* Mobile: Swiper bị tắt -> trả khung slide về xếp dọc bình thường,
     vô hiệu hóa display:flex ngang của .swiper-wrapper từ bundle */
  .superiority-box-slide.swiper {
    width: 100%;
    overflow: visible;
  }
  .superiority-box-content.swiper-wrapper {
    display: flex;
    flex-direction: column;
    transform: none !important;
  }
  .superiority-box-slide .swiper-slide {
    width: 100% !important;
  }

  .superiority-btn {
    width: fit-content;
  }

  .superiority-box-title {
    display: none;
  }
  .superiority-panel {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    pointer-events: auto !important;
  }

  /* Mỗi khối tính năng xếp dọc: nội dung trên, ảnh dưới */
  .superiority-monitor,
  .superiority-box-content .right {
    width: 100%;
    flex-direction: column;
    padding: 24px;
    border-radius: 24px;
    gap: 32px;
    align-items: flex-start;
  }

  .superiority-monitor-box {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }

	.right .superiority-monitor-box{
		flex-direction: column;
	}
	
  .superiority-monitor-text {
    gap: 24px;
  }
  .superiority-monitor-title,
  .superiority-monitor-title-2 {
    width: 100%;
  }
  .superiority-monitor-title-2 h4 {
    font-size: 24px;
    line-height: 32px;
    text-align: left;
  }

  /* Danh sách item xếp dọc, bỏ đường kẻ dọc */
  .superiority-monitor-list {
    flex-direction: column;
    gap: 16px;
  }
  .superiority-monitor-list::before {
    display: none;
  }
  .superiority-monitor-item {
    width: 100%;
  }
  .superiority-line-row {
    width: 100%;
  }

  .superiority-monitor-rs {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 0 24px 24px 24px;
    border: 1px solid #103c5e;
    background: linear-gradient(180deg, #012e40 0%, rgba(1, 46, 64, 0) 140.35%);
    backdrop-filter: blur(50px);
  }

  .superiority-monitor-img,
  .right .superiority-monitor-img {
    width: 100%;
	 height: 210px;
  }
  .row-mobile {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      180deg,
      rgba(0, 198, 239, 0.24) -137%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }
	.superiority-monitor-list .superiority-monitor-item:first-child, .superiority-monitor-list .superiority-monitor-item:last-child{
		width: 100%;
	}
}

@media (max-width: 576px) {
	.superiority-bg-2{
	    background-position: center 580px;
  }
}

@media (max-width: 376px) {
	.superiority-bg-2{
	    background-position: center 600px;
  }
}


/* ===== TABLET (769–1024px): bỏ các width cố định, xếp khối tính năng dọc ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .superiority-layout {
    padding: 0 40px;
  }
  .superiority-content {
    padding: 0;
    margin: 0;
  }
	.superiority-box-content {
		width: 100%;
	}
  /* Hàng tab vừa khổ */
  .superiority-box-title {
    margin: 0;
    gap: 6px;
    flex-wrap: wrap;
  }
	
  .superiority-item h2,
  .superiority-box-title .active h2 {
    font-size: 15px;
    padding: 10px 6px;
  }
	
  .row-mobile {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      180deg,
      rgba(0, 198, 239, 0.24) -137%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }
	
	.superiority-monitor-list .superiority-monitor-item:first-child, .superiority-monitor-list .superiority-monitor-item:last-child{
		width: 100%;
	}
	
  .superiority-monitor,
  .superiority-box-content .right {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch; /* để các con kéo giãn full-width, không co/cắt */
    padding: 40px;
    border-radius: 32px;
    gap: 32px;
  }
  .superiority-monitor-box {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 28px;
  }
  .right .superiority-monitor-box{
    flex-direction: column;
  }
  .superiority-monitor-text {
    width: 100%;
    gap: 24px;
  }
  .superiority-monitor-title,
  .superiority-monitor-title-2 {
    width: 100%;
  }
  .superiority-monitor-title-2 h4 {
    text-align: left;
  }

  /* Danh sách item xếp dọc, bỏ đường kẻ dọc */
  .superiority-monitor-list {
    flex-direction: column;
    gap: 16px;
  }
  .superiority-monitor-list::before {
    display: none;
  }
  .superiority-monitor-item {
    width: 100%;
  }
  .superiority-line-row {
    width: 100%;
  }

  /* Ảnh minh hoạ căn giữa, không phình quá to */
  .superiority-monitor-img,
  .right .superiority-monitor-img {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
	display: flex;
    justify-content: center;
  }
  .superiority-bg-2{
	    background-position: center 800px;
  }
}