/* TIGGO 7 – scoped vendor styles */
.tiggo7-int-page {
  --t7r: calc(100vw / 19.2);
  color: #fff;
}

.tiggo7-int-page .pc-pad { display: block !important; }
.tiggo7-int-page .mb-only { display: none !important; }

.tiggo7-int-page section {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.tiggo7-int-page img,
.tiggo7-int-page video { display: block; }

/* ───── Section 1 – Hero ───── */
.tiggo7-int-page .section1 { width: 100%; height: 100vh; }
.tiggo7-int-page .section1 .hero-box { width: 100%; height: 100%; }
.tiggo7-int-page .section1 .hero-box img { width: 100%; height: 100%; object-fit: cover; }
.tiggo7-int-page .section1 .logo-box {
  position: absolute; left: 50%; transform: translateX(-50%); top: 20vh;
  display: flex; flex-direction: column; align-items: center; z-index: 2;
}
.tiggo7-int-page .section1 .logo-box img { width: calc(5 * var(--t7r)); }
.tiggo7-int-page .section1 .logo-box .t {
  color: #fff; font-size: calc(0.24 * var(--t7r));
  margin-top: calc(0.2 * var(--t7r)); letter-spacing: calc(0.03 * var(--t7r));
}
.tiggo7-int-page .section1 .sec-btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(0.64 * var(--t7r)); display: flex; align-items: center; z-index: 2;
}
.tiggo7-int-page .section1 .sec-btn .btn {
  width: calc(2.5 * var(--t7r)); height: calc(0.5 * var(--t7r));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: calc(0.13 * var(--t7r)); cursor: pointer;
  border: 1px solid #fff; transition: all 0.5s; text-decoration: none;
}
.tiggo7-int-page .section1 .sec-btn .btn:hover { background-color: rgba(255,255,255,0.2); }
.tiggo7-int-page .section1::after {
  position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.3);
  content: ""; width: 100%; height: 100%;
}

/* ───── Section 2 – Color picker ───── */
.tiggo7-int-page .section2 {
  background: #1a1a1a; height: 100vh;
  padding: calc(0.55 * var(--t7r)) calc(0.52 * var(--t7r));
}
.tiggo7-int-page .section2 .bg-box {
  width: 100%; border-radius: 12px; height: 100%; display: flex; background-color: #222;
}
.tiggo7-int-page .section2 .bg-box .left-box {
  width: 48%; padding: calc(0.46 * var(--t7r)) calc(0.39 * var(--t7r)) calc(0.9 * var(--t7r)) calc(0.45 * var(--t7r));
}
.tiggo7-int-page .section2 .bg-box .left-box .car-box {
  width: 100%; height: 68%; position: relative;
}
.tiggo7-int-page .section2 .bg-box .left-box .car-box .img-box {
  position: absolute; width: 100%; top: 0; height: 100%; left: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.3s ease; border-radius: 12px;
}
.tiggo7-int-page .section2 .bg-box .left-box .car-box img {
  width: 100%; margin-top: calc(0.8 * var(--t7r));
}
.tiggo7-int-page .section2 .bg-box .left-box .car-box .clr-red { background: #5a2a2a; }
.tiggo7-int-page .section2 .bg-box .left-box .car-box .clr-black { background: #2a2a2a; }
.tiggo7-int-page .section2 .bg-box .left-box .car-box .clr-grey { background: #4a4a4a; }
.tiggo7-int-page .section2 .bg-box .left-box .car-box .clr-white { background: #c8c8c8; }
.tiggo7-int-page .section2 .bg-box .left-box .car-box .img-box.active { opacity: 1; }
.tiggo7-int-page .section2 .bg-box .left-box .tit {
  font-size: calc(0.24 * var(--t7r)); color: #fff; margin-top: calc(0.42 * var(--t7r));
}
.tiggo7-int-page .section2 .bg-box .left-box .color-box {
  display: flex; margin-top: calc(0.65 * var(--t7r)); align-items: center;
}
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box {
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  margin-right: calc(0.5 * var(--t7r));
}
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .c {
  width: calc(0.48 * var(--t7r)); height: calc(0.48 * var(--t7r)); border-radius: 50%;
}
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .clr-red { background: linear-gradient(180deg, #7a1a1a 0%, #c44 50%, #7a1a1a 100%); }
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .clr-black { background: linear-gradient(180deg, #1a1a1a 0%, #444 50%, #1a1a1a 100%); }
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .clr-grey { background: linear-gradient(180deg, #555 0%, #999 50%, #555 100%); }
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .clr-white { background: linear-gradient(180deg, #d0d0d0 0%, #fff 50%, #d0d0d0 100%); }
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .t {
  color: #fff; font-size: calc(0.14 * var(--t7r)); font-weight: 500;
  margin-top: calc(0.25 * var(--t7r)); text-align: center;
}
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box:nth-last-of-type(1) { margin-right: 0; }
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box.active .c { position: relative; }
.tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box.active .c::after {
  width: calc(0.64 * var(--t7r)); height: calc(0.64 * var(--t7r));
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid #fff; content: ""; border-radius: 50%;
}
.tiggo7-int-page .section2 .bg-box .right-box { width: 52%; position: relative; }
.tiggo7-int-page .section2 .bg-box .right-box .picList img {
  border-radius: 12px; position: absolute; width: 100%; height: 100%;
  object-fit: contain; left: 0; top: 0; opacity: 0; transition: all 0.3s ease;
}
.tiggo7-int-page .section2 .bg-box .right-box .picList img.active { opacity: 1; }
.tiggo7-int-page .section2 .bg-box .right-box .wordList p {
  position: absolute; width: 100%; left: 0; top: 0; opacity: 0;
  padding: calc(0.6 * var(--t7r)) calc(0.4 * var(--t7r));
  font-size: calc(0.16 * var(--t7r)); transition: all 0.3s ease; color: #aaa;
}
.tiggo7-int-page .section2 .bg-box .right-box .wordList p.active { opacity: 1; }

/* ───── bg-section (3, 5, 7) ───── */
.tiggo7-int-page .bg-section {
  background-color: #111;
  padding: calc(0.7 * var(--t7r)) calc(1.05 * var(--t7r)) calc(1 * var(--t7r));
  display: flex; flex-direction: column; align-items: center;
}
.tiggo7-int-page .bg-section .car-logo { width: calc(3.33 * var(--t7r)); }
.tiggo7-int-page .bg-section .car-logo img { width: 100%; }
.tiggo7-int-page .bg-section .car-tit {
  text-transform: uppercase; color: rgba(225,225,225,0.7);
  font-size: calc(0.26 * var(--t7r)); margin-top: calc(0.3 * var(--t7r));
}
.tiggo7-int-page .bg-section .car-desc {
  color: rgba(255,255,255,0.6); font-size: calc(0.16 * var(--t7r));
  margin-top: calc(0.15 * var(--t7r)); text-align: center; max-width: calc(8 * var(--t7r));
}
.tiggo7-int-page .bg-section .bg {
  width: 100%; position: relative; margin-top: calc(0.4 * var(--t7r));
  -webkit-clip-path: inset(10% 20%); clip-path: inset(10% 20%);
}
.tiggo7-int-page .bg-section .bg img {
  border-radius: 20px; width: 100%; height: 100%; object-fit: cover;
}
.tiggo7-int-page .bg-section .bg .bg-detail {
  position: absolute; bottom: calc(1.06 * var(--t7r));
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 calc(1.2 * var(--t7r));
}
.tiggo7-int-page .bg-section .bg .bg-detail .detail-box { flex: 1; }
.tiggo7-int-page .bg-section .bg .bg-detail .detail-box .top {
  display: flex; align-items: flex-end;
  border-bottom: 1px solid #fff; padding-bottom: calc(0.16 * var(--t7r));
}
.tiggo7-int-page .bg-section .bg .bg-detail .detail-box .top .num {
  font-size: calc(0.52 * var(--t7r)); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 700; display: flex;
}
.tiggo7-int-page .bg-section .bg .bg-detail .detail-box .top .unit {
  color: #fff; font-size: calc(0.22 * var(--t7r)); margin-left: calc(0.1 * var(--t7r));
}
.tiggo7-int-page .bg-section .bg .bg-detail .detail-box .bottom {
  font-size: calc(0.22 * var(--t7r)); color: #fff;
  text-align: right; padding-top: calc(0.16 * var(--t7r));
}
.tiggo7-int-page .bg-section .bg .bg-detail .detail-box:nth-of-type(2) {
  margin: 0 calc(1 * var(--t7r));
}

/* ───── swiper-section (4, 6) ───── */
.tiggo7-int-page .swiper-section {
  background-color: #111; height: 90vh; width: 100%; display: flex;
  padding: calc(1.1 * var(--t7r)) calc(1.05 * var(--t7r));
}
.tiggo7-int-page .swiper-section .left-box {
  width: 40%; display: flex; flex-direction: column; justify-content: space-between;
}
.tiggo7-int-page .swiper-section .left-box .top { position: relative; }
.tiggo7-int-page .swiper-section .left-box .top .title-box {
  position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.3s ease;
}
.tiggo7-int-page .swiper-section .left-box .top .title-box .t {
  color: #fff; font-size: calc(0.36 * var(--t7r)); width: 80%;
}
.tiggo7-int-page .swiper-section .left-box .top .title-box .d {
  color: rgba(225,225,225,0.7); font-size: calc(0.16 * var(--t7r));
  margin-top: calc(0.5 * var(--t7r)); width: 90%;
}
.tiggo7-int-page .swiper-section .left-box .top .title-box.active { opacity: 1; }
.tiggo7-int-page .swiper-section .left-box .bottom { display: flex; align-items: center; flex-wrap: wrap; gap: calc(0.15 * var(--t7r)) 0; }
.tiggo7-int-page .swiper-section .left-box .bottom .nav-ar {
  font-size: calc(0.2 * var(--t7r)); margin-right: calc(0.4 * var(--t7r));
  cursor: pointer; transition: all 0.3s ease; color: rgba(255,255,255,0.3);
  padding-bottom: calc(0.1 * var(--t7r));
  border-bottom: calc(0.04 * var(--t7r)) solid rgba(255,255,255,0.3);
}
.tiggo7-int-page .swiper-section .left-box .bottom .nav-ar.active {
  color: #fff; border-color: #fff;
}
.tiggo7-int-page .swiper-section .right-box { width: 60%; position: relative; }
.tiggo7-int-page .swiper-section .right-box .img-box {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; transition: all 0.3s ease;
}
.tiggo7-int-page .swiper-section .right-box .img-box img {
  border-radius: 10px; width: 100%; height: 100%; object-fit: cover;
}
.tiggo7-int-page .swiper-section .right-box .img-box.active { opacity: 1; }

/* ───── Spec boxes ───── */
.tiggo7-int-page .spec-row {
  background-color: #111; display: flex; align-items: center; justify-content: center;
  padding: 0 calc(1.05 * var(--t7r)) calc(1 * var(--t7r));
  gap: calc(0.3 * var(--t7r));
}
.tiggo7-int-page .spec-row .spec-box {
  flex: 1; text-align: center; padding: calc(0.4 * var(--t7r)) calc(0.2 * var(--t7r));
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
}
.tiggo7-int-page .spec-row .spec-box .spec-num {
  font-size: calc(0.42 * var(--t7r)); font-weight: 700; color: #fff;
}
.tiggo7-int-page .spec-row .spec-box .spec-label {
  font-size: calc(0.14 * var(--t7r)); color: rgba(255,255,255,0.6);
  margin-top: calc(0.1 * var(--t7r));
}

/* ───── Section 7 content cards ───── */
.tiggo7-int-page .section7-content {
  display: flex; align-items: stretch; background-color: #111;
  padding: calc(1.1 * var(--t7r)) calc(1.05 * var(--t7r)); justify-content: space-between;
  gap: calc(0.15 * var(--t7r));
}
.tiggo7-int-page .section7-content .box { flex: 1; }
.tiggo7-int-page .section7-content .box .img-box { width: 100%; }
.tiggo7-int-page .section7-content .box .img-box img { width: 100%; border-radius: 8px; }
.tiggo7-int-page .section7-content .box .t {
  background-color: rgba(255,255,255,0.08); margin-top: calc(0.05 * var(--t7r));
  min-height: calc(1.29 * var(--t7r)); padding: calc(0.15 * var(--t7r)) calc(0.2 * var(--t7r));
  display: flex; flex-wrap: wrap; align-content: center;
  color: #fff; font-size: calc(0.22 * var(--t7r)); border-radius: 6px;
}
.tiggo7-int-page .section7-content .box .t .title {
  width: 100%; font-size: calc(0.22 * var(--t7r)); font-weight: 600;
}
.tiggo7-int-page .section7-content .box .t .suTitle {
  font-size: calc(0.14 * var(--t7r)); color: rgba(255,255,255,0.6); width: 100%; line-height: 1.4;
  margin-top: calc(0.05 * var(--t7r));
}

/* ───── Gallery section ───── */
.tiggo7-int-page .section-pic {
  background-color: #111; display: flex; flex-direction: column; align-items: center;
  padding: calc(0.88 * var(--t7r)) 0; position: relative;
}
.tiggo7-int-page .section-pic .t-box { display: flex; flex-direction: column; align-items: center; }
.tiggo7-int-page .section-pic .t-box .car-logo { width: calc(3.33 * var(--t7r)); }
.tiggo7-int-page .section-pic .t-box .car-logo img { width: 100%; }
.tiggo7-int-page .section-pic .t-box .car-tit {
  text-transform: uppercase; color: rgba(225,225,225,0.7);
  font-size: calc(0.26 * var(--t7r)); margin-top: calc(0.3 * var(--t7r)); text-align: center;
}
.tiggo7-int-page .section-pic .pic-box {
  display: flex; align-items: center; width: 100vw;
  height: calc(7 * var(--t7r)); padding: 0 calc(0.7 * var(--t7r));
  overflow-x: auto; margin-top: calc(0.8 * var(--t7r)); flex: 1;
}
.tiggo7-int-page .section-pic .pic-box .img-box {
  flex: none; width: calc(7 * var(--t7r)); height: 100%;
  margin-right: calc(0.24 * var(--t7r)); scale: 0;
}
.tiggo7-int-page .section-pic .pic-box .img-box img {
  width: 100%; height: 100%; border-radius: calc(0.2 * var(--t7r)); object-fit: cover;
}
.tiggo7-int-page .section-pic .pic-box::-webkit-scrollbar { display: none; }
.tiggo7-int-page .section-pic .move {
  cursor: move; height: 100%; position: absolute; top: 0; width: 2%; z-index: 5;
}
.tiggo7-int-page .section-pic .arrow-left { left: 0; }
.tiggo7-int-page .section-pic .arrow-right { right: 0; }

/* ───── CTA Banner ───── */
.tiggo7-int-page .content_us_jump { width: 100%; position: relative; }
.tiggo7-int-page .content_us_jump a {
  display: block; width: 20%; height: 7%; position: absolute; top: 30%; left: 6%;
}
.tiggo7-int-page .content_us_jump img { width: 100%; }

/* ───── Mobile ───── */
@media (max-width: 768px) {
  .tiggo7-int-page .pc-pad { display: none !important; }
  .tiggo7-int-page .mb-only { display: block !important; }

  .tiggo7-int-page .section1 .logo-box img { width: calc(4.35 * var(--t7r)); }
  .tiggo7-int-page .section1 .logo-box .t { font-size: calc(0.24 * var(--t7r)); }
  .tiggo7-int-page .section1 .sec-btn { width: 100%; padding: 0 calc(0.5 * var(--t7r)); justify-content: center; }
  .tiggo7-int-page .section1 .sec-btn .btn { flex: 1; height: calc(0.8 * var(--t7r)); font-size: calc(0.18 * var(--t7r)); max-width: calc(4 * var(--t7r)); }

  .tiggo7-int-page .section2 {
    padding: calc(1.75 * var(--t7r)) calc(0.36 * var(--t7r)) calc(0.37 * var(--t7r)); height: auto;
  }
  .tiggo7-int-page .section2 .bg-box { flex-direction: column-reverse; border-radius: 10px; }
  .tiggo7-int-page .section2 .bg-box .left-box { width: 100%; padding: calc(0.5 * var(--t7r)) calc(0.27 * var(--t7r)) calc(0.96 * var(--t7r)); }
  .tiggo7-int-page .section2 .bg-box .left-box .tit {
    position: absolute; top: calc(0.65 * var(--t7r)); margin-top: 0;
    font-size: calc(0.3 * var(--t7r)); left: calc(0.36 * var(--t7r));
  }
  .tiggo7-int-page .section2 .bg-box .left-box .car-box { height: calc(4.2 * var(--t7r)); }
  .tiggo7-int-page .section2 .bg-box .left-box .car-box .img-box { border-radius: 10px; }
  .tiggo7-int-page .section2 .bg-box .left-box .color-box { margin-top: calc(1.46 * var(--t7r)); justify-content: space-between; }
  .tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box { margin-right: 0; }
  .tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .c { width: calc(0.54 * var(--t7r)); height: calc(0.54 * var(--t7r)); }
  .tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .c::after { width: calc(0.69 * var(--t7r)); height: calc(0.69 * var(--t7r)); }
  .tiggo7-int-page .section2 .bg-box .left-box .color-box .c-box .t { font-size: calc(0.18 * var(--t7r)); }
  .tiggo7-int-page .section2 .bg-box .right-box { width: 100%; height: calc(5.8 * var(--t7r)); }
  .tiggo7-int-page .section2 .bg-box .right-box .picList img { border-radius: 10px; }
  .tiggo7-int-page .section2 .bg-box .right-box .wordList p { font-size: calc(0.22 * var(--t7r)); padding: calc(0.2 * var(--t7r)); }

  .tiggo7-int-page .bg-section { padding: calc(0.98 * var(--t7r)) calc(0.36 * var(--t7r)); }
  .tiggo7-int-page .bg-section .car-logo { width: calc(3.77 * var(--t7r)); }
  .tiggo7-int-page .bg-section .car-tit { font-size: calc(0.35 * var(--t7r)); }
  .tiggo7-int-page .bg-section .bg .bg-detail { width: 100%; padding: 0 calc(0.3 * var(--t7r)); bottom: calc(1.06 * var(--t7r)); flex-wrap: wrap; }
  .tiggo7-int-page .bg-section .bg img { border-radius: 10px; }
  .tiggo7-int-page .bg-section .bg .bg-detail .detail-box { flex: none; width: 48%; }
  .tiggo7-int-page .bg-section .bg .bg-detail .detail-box:nth-of-type(2) { margin: 0; }
  .tiggo7-int-page .bg-section .bg .bg-detail .detail-box:nth-of-type(3) { width: 100%; margin-top: calc(0.3 * var(--t7r)); }
  .tiggo7-int-page .bg-section .bg .bg-detail .detail-box .top .unit { font-size: calc(0.23 * var(--t7r)); padding-left: calc(0.19 * var(--t7r)); padding-top: calc(0.15 * var(--t7r)); }
  .tiggo7-int-page .bg-section .bg .bg-detail .detail-box .bottom { font-size: calc(0.23 * var(--t7r)); }

  .tiggo7-int-page .swiper-section {
    flex-direction: column-reverse; height: auto;
    padding: calc(1 * var(--t7r)) calc(0.36 * var(--t7r)) calc(1.5 * var(--t7r));
  }
  .tiggo7-int-page .swiper-section .left-box { width: 100%; flex: 1; padding: calc(0.96 * var(--t7r)) 0 0; }
  .tiggo7-int-page .swiper-section .left-box .top .title-box .t { font-size: calc(0.42 * var(--t7r)); }
  .tiggo7-int-page .swiper-section .left-box .top .title-box .d { font-size: calc(0.27 * var(--t7r)); }
  .tiggo7-int-page .swiper-section .left-box .bottom .nav-ar { font-size: calc(0.28 * var(--t7r)); margin-right: calc(0.4 * var(--t7r)); }
  .tiggo7-int-page .swiper-section .right-box { width: 100%; height: calc(5.75 * var(--t7r)); }
  .tiggo7-int-page .swiper-section .right-box .img-box img { border-radius: 10px; }

  .tiggo7-int-page .spec-row { padding: 0 calc(0.36 * var(--t7r)) calc(0.8 * var(--t7r)); flex-wrap: wrap; gap: calc(0.2 * var(--t7r)); }
  .tiggo7-int-page .spec-row .spec-box { flex: none; width: 47%; }

  .tiggo7-int-page .section7-content {
    padding: calc(1 * var(--t7r)) calc(0.36 * var(--t7r)) calc(1.3 * var(--t7r)); flex-direction: column;
    gap: calc(0.3 * var(--t7r));
  }
  .tiggo7-int-page .section7-content .box .t { font-size: calc(0.27 * var(--t7r)); padding: calc(0.15 * var(--t7r)) calc(0.33 * var(--t7r)); min-height: calc(1.4 * var(--t7r)); }
  .tiggo7-int-page .section7-content .box .t .suTitle { font-size: calc(0.22 * var(--t7r)); }

  .tiggo7-int-page .content_us_jump a { width: 54%; height: 7%; top: 30.5%; left: 10.5%; }
}