@font-face {
  font-family: 'UTM HelvetIns';
  src: url('../fonts/UTMHelvetIns.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
}

:root {
  --section-gap: clamp(10px, 2vh, 24px);
  /* Gauge size from Figma: 301px at 1920px viewport */
  --gauge: clamp(140px, 15.7vw, 301px);
  --gauge-lg: var(--gauge);
}

/* ─────────────────────────────────────────────
   HERO TITLE — gradient gold, UTM HelvetIns
───────────────────────────────────────────── */
.hero-title {
  margin: 0;
  font-family: 'UTM HelvetIns', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(36px, 5.7vw, 110px);
  line-height: 1.3;
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 0.1em 0 0.18em;

  background: linear-gradient(180deg, #FFFFFF 0%, #D6ECFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  filter:
    drop-shadow(0 4.3px 4.3px rgba(0, 50, 120, 0.3)) drop-shadow(0 0 4.3px rgba(0, 80, 180, 0.4)) drop-shadow(0 0 8.6px rgba(255, 255, 255, 0.6));

  transform: skewX(-5.14deg);
  transform-origin: center;
}

.hero-title br {
  display: block;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  height: auto;
  background: url("../images/banner-kim66.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  font-family: Inter, sans-serif;
  overflow: auto;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1685px;
  box-sizing: border-box;
  padding-top: clamp(8px, 10vw, 65px);
  min-height: 100vh;
  height: auto;
  padding-left: 15px;
  padding-right: 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 40px);

  width: 100%;
  max-width: clamp(300px, 50vw, 955px);
}

/* .logo-wrapper .ic-logo {
  width: 100%;
  height: 100%;
  max-width: clamp(200px, 24vw, 465px);
  max-height: clamp(50px, 5.2vw, 100px);
} */

.logo-wrapper .ic-logo .logo {
  width: 100%;
  height: 100%;
  max-width: clamp(280px, 18vw, 500px);
  max-height: clamp(55px, 4.5vw, 112px);
  object-fit: contain;
}

/* Shine wrapper cho slogan (img không dùng ::after được) */
.ic-slogan-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: clamp(300px, 80vw, 955px);
  animation: logo-scale 3s ease-in-out infinite;
}

.ic-slogan-wrap .ic-slogan {
  width: 100%;
  height: 100%;
  max-width: clamp(300px, 80vw, 955px);
  max-height: clamp(80px, 50vw, 156px);
  object-fit: contain;
}

/* Shine chạy qua logo — scale trên wrapper để overflow:hidden không clip ảnh */
.logo-wrapper .ic-logo {
  display: block;
  position: relative;
  overflow: hidden;
  animation: logo-scale 3s ease-in-out infinite;
}

.logo-wrapper-mobile {
  display: none;
}

.ic-text-play {
  display: block;
  width: 100%;
  max-width: clamp(100px, 11vw, 215px);
  max-height: clamp(38px, 5vw, 75px);
  object-fit: contain;
  height: 38px;
}

/* QR box — Figma kim66: blue gradient fill + thin white→light-blue border */
.ic-qr-wrap {
  display: inline-flex;
  padding: 1.28px;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #BDE6FF 100%);
  animation: logo-scale 2.5s ease-in-out infinite;
  width: clamp(76px, 10vw, 195px);
}

.ic-qr-wrap .ic-qr-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(8px, 1.25vw, 18px);
  border-radius: 7px;
  background: linear-gradient(180deg, #33A7EB 0%, #3161D6 100%);
  display: inline-flex;
  width: 100%;
}

.ic-qr-wrap .ic-qr-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 35%,
      rgba(255, 255, 255, 0.75) 50%,
      transparent 65%);
  background-size: 300% 100%;
  background-position: 200% center;
  animation: shine-sweep-fast 2s linear infinite;
  pointer-events: none;
  filter: blur(2px);
}

.ic-qr-wrap .ic-qr {
  display: block;
  border-radius: 7px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Shine phủ toàn wrapper, mask-image giới hạn chỉ hiện trên pixel chữ */
.logo-wrapper .ic-logo::after,
.ic-slogan-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 35%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 65%);
  background-size: 300% 100%;
  background-position: 200% center;
  animation: shine-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

/* Mask theo đúng hình ảnh — shine chỉ lộ qua các pixel có chữ/logo */
.logo-wrapper .ic-logo::after {
  mask-image: url("../icons/ic-logo-kim66.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../icons/ic-logo-kim66.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.ic-slogan-wrap::after {
  mask-image: url("../icons/ic-slogan.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}


/* ─────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────── */
@keyframes shine-sweep {
  0% {
    background-position: 200% center;
  }

  45% {
    background-position: -100% center;
  }

  100% {
    background-position: -100% center;
  }
}

@keyframes shine-sweep-fast {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -100% center;
  }
}

@keyframes logo-scale {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes btn-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes bell-ring {

  0%,
  100% {
    transform: rotate(0deg);
  }

  8% {
    transform: rotate(18deg);
  }

  18% {
    transform: rotate(-16deg);
  }

  28% {
    transform: rotate(13deg);
  }

  38% {
    transform: rotate(-10deg);
  }

  48% {
    transform: rotate(7deg);
  }

  58% {
    transform: rotate(-4deg);
  }

  68% {
    transform: rotate(2deg);
  }

  78% {
    transform: rotate(-1deg);
  }

  88% {
    transform: rotate(0deg);
  }
}

@keyframes enter-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes enter-fade-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes enter-fade-right {
  from {
    opacity: 0;
    transform: translateX(32px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─────────────────────────────────────────────
   ENTRANCE ANIMATIONS
───────────────────────────────────────────── */
.logo-wrapper {
  animation: enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}

.logo-wrapper-mobile {
  animation: enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}

.lineCtrl-wrap {
  animation: enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.brand-logos-wrap {
  animation: enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.left-action-mobile {
  animation: enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

.left-action {
  animation: enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.40s both;
}

/* ─────────────────────────────────────────────
   BUTTON / CTA — placed BELOW the gauge, centered
───────────────────────────────────────────── */
.ic-btn-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: clamp(180px, 22vw, 288px);
  margin: clamp(16px, 2.5vw, 40px) auto 0;
  align-self: center;
  /* Match gauge horizontal offset so the button stays directly beneath it.
     Uses `left` instead of `transform` to avoid conflict with btn-pulse scale animation. */
  left: clamp(-313px, -16.3vw, -80px);
  animation: btn-pulse 2s ease-in-out infinite, enter-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both;
}

.ic-btn-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.18) 47%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.18) 53%,
      transparent 58%);
  background-size: 300% 100%;
  background-position: 200% center;
  animation: shine-sweep-fast 2s linear infinite;
  pointer-events: none;
  filter: blur(3px);
  mask-image: url("../icons/ic-btn.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.ic-btn {
  width: 100%;
  max-width: clamp(180px, 30vw, 405px);
  max-height: clamp(45px, 10vw, 95px);
  object-fit: contain;
  display: block;
}

.left-action {
  position: fixed;
  left: clamp(10px, 3.5vw, 50px);
  bottom: clamp(40px, 7vw, 100px);
  z-index: 999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 14px);
}

.left-action .ic-support-wrap {
  align-self: center;
}

.download-app-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.4vw, 6px);

  width: 100%;
}

.download-app-wrap .ic-logo {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  border-radius: 6px;
}

.download-app-wrap .ic-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.18) 47%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.18) 53%,
      transparent 58%);
  background-size: 300% 100%;
  background-position: 200% center;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0;
}

.download-app-wrap .ic-logo:hover {
  animation: btn-pulse 0.8s ease-in-out infinite;
}

.download-app-wrap .ic-logo:hover::after {
  opacity: 1;
  animation: shine-sweep-fast 1.4s linear infinite;
}

#ic-fake-ip-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  border-radius: 6px;
}

#ic-fake-ip-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.18) 47%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.18) 53%,
      transparent 58%);
  background-size: 300% 100%;
  background-position: 200% center;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0;
}

#ic-fake-ip-link:hover {
  animation: btn-pulse 0.8s ease-in-out infinite;
}

#ic-fake-ip-link:hover::after {
  opacity: 1;
  animation: shine-sweep-fast 1.4s linear infinite;
}

.ic-text-downloadapp {
  width: clamp(45px, 4.5vw, 87px);
  height: clamp(15px, 1.6vw, 30px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.ic-logo-kim99 {
  width: clamp(50px, 5vw, 98px);
  height: clamp(10px, 1.1vw, 21px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.ic-android,
.ic-ios {
  width: clamp(60px, 5vw, 90px);
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.ic-fake-ip {
  width: clamp(60px, 10vw, 200px);
  height: 60px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.ic-support {
  width: clamp(36px, 8vw, 133px);
  max-width: clamp(36px, 8vw, 133px);
  max-height: clamp(32px, 7vw, 115px);
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: top center;
  animation: bell-ring 1.6s ease-in-out infinite;

  margin-bottom: clamp(8px, 1.4vw, 20px);
}

.lineCtrl-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: clamp(3px, 10vw, 156px);
  /* Offset left per Figma: gauge centered at ~647px of 1920px viewport, i.e. ~-313px from center.
     Uses `left` instead of `transform` so the enter-fade-up animation can still control transform. */
  position: relative;
  left: clamp(-313px, -16.3vw, -80px);
}

#lineCtrl {
  min-height: clamp(160px, 16.7vw, 241px);
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: clamp(5px, 4vw, 75px);
  position: relative;
  z-index: 2;
}

#lineCtrl .speed-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lineCtrl .speed-item .progress-content {
  display: block;
  position: relative;
  width: var(--gauge);
  height: var(--gauge);
  margin: 0 auto;
  background: url(../icons/ic-border-circle.svg) no-repeat center/100% 100%;
  opacity: 0.95;
  text-decoration: none;
}

#lineCtrl .speed-item .progress-content:hover {
  opacity: 1;
}

#lineCtrl .speed-item .progress-content .svg-list-bg {
  position: absolute;
  top: calc(var(--gauge) * 0.1583);
  left: 50%;
  width: calc(var(--gauge) * 0.6833);
  height: calc(var(--gauge) * 0.6833);
  transform: translate3d(-50%, 0, 0);
  border-radius: 50%;
}

#lineCtrl .speed-item .progress-content .svg-list-bg .svg-item {
  display: block;
  position: absolute;
  top: calc(var(--gauge) * -0.0944);
  left: calc(50% - var(--gauge) * 0.0139);
  transform-origin: calc(var(--gauge) * 0.0139) calc(var(--gauge) * 0.4389);
}

#lineCtrl .speed-item .progress-content .svg-list-bg .svg-item img {
  display: block;
  width: calc(var(--gauge) * 0.0333);
  height: calc(var(--gauge) * 0.1444);
}

#lineCtrl .speed-item .progress-content .big-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: var(--gauge);
  height: var(--gauge);
  border-radius: 50%;
}

#lineCtrl .speed-item .progress-content .big-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url('../icons/ic-bg-circle.svg') no-repeat center / 100% 100%;
  max-width: calc(var(--gauge) * 0.5611);
  max-height: calc(var(--gauge) * 0.5611);
}

#lineCtrl .speed-item .progress-content .pointer {
  position: absolute;
  top: calc(var(--gauge) * 0.2444);
  left: calc(var(--gauge) * 0.4611);
  width: calc(var(--gauge) * 0.0556);
  height: calc(var(--gauge) * 0.0667);
  transform-origin: center calc(var(--gauge) * 0.2556);
  background: url(../images/navigation/speed-vector.svg) no-repeat center/100% 100%;
  z-index: 2;
}

#lineCtrl .speed-item .progress-content .circle-p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--gauge) * 0.8556);
  height: calc(var(--gauge) * 0.8556);
  transform: translate3d(-50%, -50%, 0);
}

/* Hide LINK label below gauge (Figma shows no label) */
#lineCtrl .speed-item .address {
  display: none;
}

#lineCtrl .speed-item .progress-content .number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

#lineCtrl .speed-item .progress-content .number .val {
  font-weight: 600;
  font-size: clamp(16px, 2.14vw, 30.77px);
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #FFFFFF;
  margin: 0px;
}

#lineCtrl .speed-item .progress-content .number .text {
  font-weight: 600;
  font-size: clamp(10px, 1.15vw, 16.61px);
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #FFFFFF;
  margin: 0px;
}

#lineCtrl .speed-item .address {
  margin-top: clamp(4px, 1.5vw, 22px);
}

#lineCtrl .speed-item .address a {
  color: #fff;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 14px rgba(185, 1, 1, 0.4);
  border-radius: clamp(15px, 2.1vw, 30px);
  display: flex;
  text-decoration: none;
  background: transparent;
  border: 1.12px solid #FFFFFF;
  padding: clamp(3px, 0.35vw, 5px) clamp(16px, 2.2vw, 32px);

  font-weight: 600;
  font-size: clamp(12px, 1.4vw, 20px);
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: capitalize;

  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease;
}

#lineCtrl .speed-item .address a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.18) 47%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.18) 53%,
      transparent 58%);
  background-size: 300% 100%;
  background-position: 200% center;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0;
}

#lineCtrl .speed-item .address a:hover {
  background: linear-gradient(180deg, #e84d4d 0%, #b90101 50%, #8b0101 100%);
  animation: btn-pulse 0.8s ease-in-out infinite;
}

#lineCtrl .speed-item .address a:hover::after {
  opacity: 1;
  animation: shine-sweep-fast 1.4s linear infinite;
}

.brand-logos-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(6px, 5vw, 85px);
  padding: 0 clamp(8px, 2vw, 20px);
  width: 100%;
  box-sizing: border-box;
}

.brand-logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(3px, 1vw, 12px);
  width: fit-content;
  max-width: none;
  background: #39333350;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: clamp(6px, 0.8vw, 8px) clamp(10px, 2vw, 36px);
  box-sizing: border-box;
  border-radius: 50px;
}

.brand-logos .brand-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 0.6vw, 10px) clamp(10px, 1.4vw, 22px);
  border-radius: 50px;
  background: transparent padding-box, transparent border-box;
  transition: background 0.35s ease, filter 0.35s ease;
}

.brand-logos .brand-logo-link:has(.ic-log-99kim).is-active,
.brand-logos .brand-logo-link:has(.ic-log-99kim):hover {
  background:
    linear-gradient(#B41A23, #B41A23) padding-box,
    linear-gradient(90.55deg, #32B0EE 0.84%, #315FD5 99.16%) border-box;
}

.brand-logos .brand-logo-link:has(.ic-kim66).is-active,
.brand-logos .brand-logo-link:has(.ic-kim66):hover {
  background:
    linear-gradient(90.55deg, #32B0EE 0.84%, #315FD5 99.16%) padding-box,
    linear-gradient(90.55deg, #32B0EE 0.84%, #315FD5 99.16%) border-box;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.brand-logos .brand-logo-link:has(.ic-kim88).is-active,
.brand-logos .brand-logo-link:has(.ic-kim88):hover {
  background:
    linear-gradient(81.41deg, #FAECD1 1.49%, #FAEED4 98.51%) padding-box,
    linear-gradient(90.55deg, #32B0EE 0.84%, #315FD5 99.16%) border-box;
}

.brand-logos .brand-logo-link:has(.ic-kimtv).is-active,
.brand-logos .brand-logo-link:has(.ic-kimtv):hover {
  background:
    linear-gradient(240.94deg, #1E3690 20.59%, #000000 78.8%) padding-box,
    linear-gradient(90.55deg, #32B0EE 0.84%, #315FD5 99.16%) border-box;
}


.brand-logos .brand-logo-link.is-active img,
.brand-logos .brand-logo-link:hover img {
  transform: scale(1.1);
}

.brand-logos .brand-logo-link.is-active {
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.3));
}

@keyframes brand-slide-in {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.brand-logos .brand-logo-link img {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.25s ease;
}

.brand-logos .brand-logo-link img.fade-swap {
  animation: img-fade-swap 0.35s ease;
}

/* Fixed width+height per logo — prevents any layout shift when src swaps */
.brand-logos .brand-logo-link img.ic-log-99kim {
  width: clamp(70px, 9vw, 130px);
  height: clamp(20px, 2.7vw, 40px);
}

.brand-logos .brand-logo-link img.ic-kim66 {
  width: clamp(70px, 9vw, 130px);
  height: clamp(16px, 2.7vw, 40px);
}

.brand-logos .brand-logo-link img.ic-kim88 {
  width: clamp(70px, 9vw, 130px);
  height: clamp(16px, 2.7vw, 40px);
}

.brand-logos .brand-logo-link img.ic-kimtv {
  width: auto;
  height: clamp(20px, 5vw, 44px);
}

.brand-logo-kimtv-link {
  padding-top: 2px !important;
}

.left-action-mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  :root {
    /* Tablet Figma: gauge 380px at 1024px viewport */
    --gauge: clamp(180px, 37vw, 380px);
  }

  body {
    background: url("../images/banner-kim66-tablet.png");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .container {
    /* Tablet: logo + slogan pinned near top-left */
    max-width: 100%;
    padding-top: clamp(40px, 6vw, 64px);
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
  }

  /* Tablet: KIM99 logo + slogan both flush-left (Figma top-left corner) */
  .logo-wrapper {
    box-sizing: border-box;
    align-items: flex-start;
    padding-left: clamp(40px, 6vw, 84px);
    width: 100%;
    max-width: 100%;
    gap: 0;
  }

  .logo-wrapper .ic-logo {
    width: auto;
    align-self: flex-start;
  }

  .hero-title {
    text-align: left;
    /* Keep slogan at its original position so it doesn't cover the model's face */
    margin-top: clamp(100px, 19vw, 205px);
  }

  .ic-fake-ip {
    height: 30px;
  }

  /* Tablet (Figma 1024×1366): reset desktop left offset, gauge + button stay centered */
  .lineCtrl-wrap,
  .ic-btn-wrap {
    left: 0;
  }

  /* Hero title sized per Figma: 95px at 1024px viewport */
  .hero-title {
    font-size: clamp(40px, 9.2vw, 95px);
    white-space: nowrap;
    line-height: 1.3;
  }

  .lineCtrl-wrap {
    margin-top: clamp(12px, 3.5vw, 36px);
  }

  .ic-btn-wrap {
    margin-top: clamp(20px, 4.5vw, 46px);
    max-width: clamp(280px, 39vw, 403px);
  }

  /* Move app cluster (Tải App + QR + IOS/Android + 1.1.1.1) to the RIGHT on tablet, per Figma.
     Lifted above the brand-logos pill bar so it doesn't overlap the IOS/Android tiles. */
  .left-action {
    left: auto;
    right: clamp(15px, 2.5vw, 30px);
    bottom: clamp(120px, 14vw, 180px);
    gap: clamp(6px, 0.8vw, 10px);
  }

  /* Brand logos pill bar per Figma: w=651 (≈63% of 1024), centered, at y≈1272 */
  .brand-logos-wrap {
    margin-top: clamp(20px, 5vw, 68px);
  }

  .ic-btn-wrap {
    margin-top: clamp(14px, 3.5vw, 46px);
  }

  .brand-logos {
    padding: clamp(8px, 1vw, 12px) clamp(20px, 4vw, 50px);
    gap: clamp(8px, 2vw, 20px);
  }

  #lineCtrl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(8px, 3vw, 20px);
    min-height: unset;
    width: calc(var(--gauge) * 2 + var(--gauge-lg) + clamp(8px, 3vw, 20px) * 2);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content {
    width: var(--gauge);
    height: var(--gauge);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .big-circle {
    width: var(--gauge);
    height: var(--gauge);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .circle-p {
    width: calc(var(--gauge) * 0.8556);
    height: calc(var(--gauge) * 0.8556);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .svg-list-bg {
    top: calc(var(--gauge) * 0.1583);
    width: calc(var(--gauge) * 0.6833);
    height: calc(var(--gauge) * 0.6833);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .svg-list-bg .svg-item {
    top: calc(var(--gauge) * -0.0944);
    left: calc(50% - var(--gauge) * 0.0139);
    transform-origin: calc(var(--gauge) * 0.0139) calc(var(--gauge) * 0.4389);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .svg-list-bg .svg-item img {
    width: calc(var(--gauge) * 0.0333);
    height: calc(var(--gauge) * 0.1444);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .big-circle::before {
    max-width: calc(var(--gauge) * 0.5611);
    max-height: calc(var(--gauge) * 0.5611);
  }

  #lineCtrl .speed-item:nth-child(3) .progress-content .pointer {
    top: calc(var(--gauge) * 0.2444);
    left: calc(var(--gauge) * 0.4611);
    transform-origin: center calc(var(--gauge) * 0.2556);
  }

  #lineCtrl .speed-item:nth-child(3) .address a {
    font-size: clamp(12px, 1.4vw, 20px);
    padding: clamp(3px, 0.35vw, 5px) clamp(16px, 2.2vw, 32px);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content {
    width: var(--gauge-lg);
    height: var(--gauge-lg);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .big-circle {
    width: var(--gauge-lg);
    height: var(--gauge-lg);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .circle-p {
    width: calc(var(--gauge-lg) * 0.8545);
    height: calc(var(--gauge-lg) * 0.8545);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .svg-list-bg {
    top: calc(var(--gauge-lg) * 0.1591);
    width: calc(var(--gauge-lg) * 0.6818);
    height: calc(var(--gauge-lg) * 0.6818);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .svg-list-bg .svg-item {
    top: calc(var(--gauge-lg) * -0.0944);
    left: calc(50% - var(--gauge-lg) * 0.0205);
    transform-origin: calc(var(--gauge-lg) * 0.0205) calc(var(--gauge-lg) * 0.4182);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .svg-list-bg .svg-item img {
    width: calc(var(--gauge-lg) * 0.0318);
    height: calc(var(--gauge-lg) * 0.1182);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .big-circle::before {
    max-width: calc(var(--gauge-lg) * 0.5455);
    max-height: calc(var(--gauge-lg) * 0.5455);
  }

  #lineCtrl .speed-item:nth-child(2) .progress-content .pointer {
    top: calc(var(--gauge-lg) * 0.2636);
    left: calc(var(--gauge-lg) * 0.4727);
    transform-origin: center calc(var(--gauge-lg) * 0.2455);
  }

  #lineCtrl .speed-item:nth-child(2) .address a {
    font-size: clamp(14px, 1.65vw, 23.73px);
    padding: clamp(3px, 0.35vw, 5px) clamp(18px, 2.57vw, 37px);
  }

  .ic-btn-wrap,
  .ic-btn {
    max-width: clamp(200px, 50vw, 405px);
    max-height: clamp(50px, 9vw, 95px);
  }

  .logo-wrapper-mobile {
    display: none;
  }

  .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(20px, 5vw, 60px);
    gap: clamp(12px, 2.5vw, 30px);
    width: 100%;
    max-width: 100%;
  }

}

@media screen and (max-width: 640px) {
  :root {
    --gauge: clamp(170px, 46vw, 230px);
  }

  body {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background: url("../images/banner-kim66-mobile.png");
  }

  .container {
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: clamp(70px, 14vw, 110px);
    padding-bottom: clamp(20px, 5vw, 30px);
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
  }

  .hero-title {
    font-size: clamp(28px, 8.8vw, 42px);
  }

  .lineCtrl-wrap {
    margin-top: clamp(22px, 6vw, 36px);
  }

  .ic-btn-wrap {
    margin-top: clamp(18px, 5vw, 28px);
    max-width: clamp(230px, 70vw, 320px);
  }

  .brand-logos-wrap {
    margin-top: clamp(24px, 6.5vw, 38px);
  }

  /* Mobile: keep logo + slogan CENTERED (override tablet flush-left rule) */
  .logo-wrapper {
    width: 100%;
    max-width: 100%;
    align-items: center;
    padding-left: 0;
  }

  .logo-wrapper .ic-logo {
    align-self: center;
  }

  .hero-title {
    text-align: center;
  }

  /* On mobile keep the gauge + CTA centered (undo desktop left offset) */
  .lineCtrl-wrap,
  .ic-btn-wrap {
    left: 0;
  }

  /* Support icon → top-left pinned so it doesn't cover the model's face */
  .left-action {
    top: clamp(14px, 4vw, 22px);
    left: clamp(14px, 4vw, 22px);
    right: auto;
    bottom: auto;
    width: auto;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .left-action .ic-support-wrap {
    width: clamp(44px, 12vw, 56px);
    height: clamp(44px, 12vw, 56px);
  }

  .left-action .ic-support-wrap a,
  .left-action .ic-support {
    width: 100%;
    height: 100%;
  }

  .left-action .download-app-wrap,
  .left-action .ic-qr-wrap,
  .left-action .ic-text-play,
  .left-action .ic-text-downloadapp,
  .left-action .ic-logo-kim99,
  .left-action #ic-fake-ip-link {
    display: none !important;
  }

  /* Bottom icon cluster — cleaner row with consistent gaps */
  .left-action-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 4vw, 22px);
    margin-top: clamp(20px, 5.5vw, 32px);
    width: 100%;
  }

  .left-action-mobile .ic-qr-wrap {
    box-sizing: border-box;
    width: clamp(96px, 26vw, 124px);
    height: clamp(96px, 26vw, 124px);
    padding: 1.28px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  }

  .left-action-mobile .ic-qr-wrap .ic-qr-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: clamp(6px, 1.6vw, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .left-action-mobile .ic-qr-wrap .ic-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .left-action-mobile .action-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 18px);
    flex-wrap: wrap;
  }

  .left-action-mobile .download-app-wrap {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.5vw, 14px);
  }

  .left-action-mobile .download-app-wrap a,
  .left-action-mobile .download-app-wrap a img {
    width: clamp(44px, 12vw, 54px);
    height: clamp(44px, 12vw, 54px);
  }

  #ic-fake-ip-link-mobile,
  #ic-fake-ip-link-mobile img {
    width: clamp(96px, 26vw, 116px);
    height: clamp(30px, 8vw, 36px);
  }
}

@media screen and (max-width: 480px) {
  .logo-wrapper {
    max-width: 92vw;
    gap: clamp(10px, 3vw, 20px);
  }

  .logo-wrapper .ic-logo,
  .logo-wrapper .ic-logo .logo {
    max-width: 92vw;
    max-height: clamp(36px, 9vw, 70px);
  }

  .ic-slogan-wrap,
  .ic-slogan-wrap .ic-slogan {
    max-width: 92vw;
    max-height: clamp(50px, 12vw, 100px);
  }

  .ic-btn-wrap,
  .ic-btn {
    max-width: 68vw;
    max-height: clamp(30px, 13vw, 58px);
  }

  #lineCtrl .speed-item .address a {
    font-size: clamp(9px, 2.5vw, 14px);
    padding: 3px clamp(8px, 3vw, 16px);
    border-radius: 12px;
  }

  .brand-logos {
    max-width: 92vw;
    padding: clamp(6px, 2vw, 12px) clamp(8px, 3vw, 24px);
  }

  .brand-logos .brand-logo-link img {
    height: clamp(14px, 4vw, 24px);
  }
}

@media screen and (max-width: 490px) {
  .brand-logos {
    gap: clamp(1px, 0.8vw, 4px);
    padding: clamp(3px, 1vw, 6px) clamp(4px, 1.5vw, 10px);
  }

  .brand-logos .brand-logo-link {
    padding: clamp(2px, 2vw, 5px) clamp(3px, 3vw, 8px);
    border-radius: 20px;
  }

  .brand-logos .brand-logo-link img {
    height: clamp(9px, 2.8vw, 14px);
    width: auto !important;
  }

  .brand-logos .brand-logo-link img.ic-log-99kim {
    height: clamp(9px, 3.7vw, 20px);
  }

  .brand-logos .brand-logo-link img.ic-kim66 {
    height: clamp(9px, 2.7vw, 14px);
  }

  .brand-logos .brand-logo-link img.ic-kim88 {
    height: clamp(9px, 2.7vw, 14px);
  }

  .brand-logos .brand-logo-link img.ic-kimtv {
    height: clamp(12px, 4.6vw, 22px) !important;
  }
}

@media screen and (max-width: 991px) {
  .brand-logos .brand-logo-link img.ic-kimtv {
    width: auto;
    height: clamp(20px, 4vw, 29px);
  }
}


/* ─────────────────────────────────────────────
   RESPONSIVE — SHORT VIEWPORT (laptop 1280×800)
   max-height: 860px & desktop width
───────────────────────────────────────────── */
@media screen and (max-height: 860px) and (min-width: 1025px) {
  :root {
    --gauge: clamp(60px, min(11vw, 14.5vh), 150px);
  }

  .container {
    padding-top: clamp(4px, 1.5vh, 24px);
  }

  .hero-title {
    font-size: clamp(28px, min(4.5vw, 7vh), 80px);
    line-height: 1.2;
  }

  .lineCtrl-wrap {
    margin-top: clamp(2px, 1.5vh, 18px);
  }

  .brand-logos-wrap {
    margin-top: clamp(4px, 1.5vh, 20px);
  }

  .logo-wrapper {
    gap: clamp(4px, min(1.2vw, 1.8vh), 20px);
  }

  .logo-wrapper .ic-logo,
  .logo-wrapper .ic-logo .logo {
    max-height: clamp(36px, min(4vw, 6.5vh), 80px);
  }

  .ic-slogan-wrap,
  .ic-slogan-wrap .ic-slogan {
    max-height: clamp(60px, min(6vw, 9.5vh), 130px);
  }

  .ic-btn-wrap,
  .ic-btn {
    max-height: clamp(34px, min(4vw, 5.5vh), 80px);
  }

  #lineCtrl {
    min-height: clamp(100px, min(13vw, 18vh), 200px);
  }

  .brand-logos .brand-logo-link img {
    height: clamp(14px, min(2vw, 3vh), 30px);
  }

  .left-action {
    bottom: clamp(10px, 3vh, 40px);
    gap: clamp(3px, 0.8vh, 10px);
  }

  .ic-support {
    max-height: clamp(28px, 9vh, 90px);
    margin-bottom: clamp(4px, 1vh, 12px);
  }

  .ic-qr-wrap {
    width: clamp(60px, 8vw, 140px);
  }

  .ic-android,
  .ic-ios {
    width: clamp(48px, 4vw, 75px);
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MEDIUM-TALL VIEWPORT (e.g. 1599×975, 1920×1080)
   861px ≤ height ≤ 1100px & desktop width ≥ 1025px
───────────────────────────────────────────── */
@media screen and (max-height: 1100px) and (min-height: 861px) and (min-width: 1025px) {
  :root {
    --gauge: clamp(60px, min(11vw, 16.5vh), 200px);
  }

  .container {
    padding-top: clamp(6px, 2vh, 36px);
  }

  .hero-title {
    font-size: clamp(36px, min(4.8vw, 8vh), 88px);
    line-height: 1.25;
  }

  .brand-logos-wrap {
    margin-top: clamp(6px, 2.5vh, 40px);
  }

  .logo-wrapper {
    gap: clamp(6px, min(1.8vw, 2.8vh), 35px);
  }

  .logo-wrapper .ic-logo,
  .logo-wrapper .ic-logo .logo {
    max-height: clamp(40px, min(4.2vw, 7.5vh), 90px);
  }

  .ic-slogan-wrap,
  .ic-slogan-wrap .ic-slogan {
    max-height: clamp(65px, min(6.5vw, 11vh), 140px);
  }

  .ic-btn-wrap,
  .ic-btn {
    max-height: clamp(38px, min(4.5vw, 6.5vh), 88px);
  }

  .lineCtrl-wrap {
    margin-top: clamp(30px, min(5vw, 8vh), 90px);
  }

  #lineCtrl {
    min-height: clamp(120px, min(13vw, 20vh), 220px);
    column-gap: clamp(5px, min(3vw, 4vh), 50px);
  }

  .brand-logos .brand-logo-link img {
    height: clamp(16px, min(2.2vw, 3.5vh), 32px);
  }

  .left-action {
    bottom: clamp(15px, 4vh, 55px);
    gap: clamp(4px, 0.9vh, 12px);
  }

  .ic-support {
    max-height: clamp(34px, 10vh, 100px);
    margin-bottom: clamp(6px, 1.2vh, 14px);
  }

  .ic-qr-wrap {
    width: clamp(70px, 9vw, 155px);
  }

  .ic-android,
  .ic-ios {
    width: clamp(52px, 4.5vw, 80px);
  }
}

/* ─────────────────────────────────────────────
   DESKTOP — fit content into a single viewport, no scrollbars
   Distribute empty space so brand-logos hugs the bottom instead
   of all dead space collapsing under the brand bar.
───────────────────────────────────────────── */
@media screen and (min-width: 1025px) {
  html,
  body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .container {
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
    justify-content: flex-start;
    padding-top: clamp(30px, 6vh, 80px);
  }

  .lineCtrl-wrap {
    margin-top: auto;
  }

  .brand-logos-wrap {
    margin-top: auto;
    padding-bottom: clamp(8px, 2vh, 28px);
  }
}