/**
 * @file
 * Trang /esim: hero theo khung /car-rental + iframe cua hang BlueSIM.
 */

.vnat-app[data-page="esim"] {
  --vn-ink: #1e1e1e;
  --vn-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.vnat-app[data-page="esim"] *,
.vnat-app[data-page="esim"] *::before,
.vnat-app[data-page="esim"] *::after {
  box-sizing: border-box;
}

/* Theme dat font trang tri cho h1-h3; :where do uu tien 0 nen moi rule that deu thang */
.vnat-app[data-page="esim"] :where(h1, p, header, div) {
  font-family: inherit;
}

.vnat-app[data-page="esim"] {
  --esim-gutter: max(48px, calc((100% - 1280px) / 2 + 24px));
  --esim-deep: #6a0109;
  --esim-gold: #fed65b;
  --esim-serif-display: 'Noto Serif Display', Georgia, serif;
  --esim-serif: 'Noto Serif', Georgia, serif;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 60px;
  background: #fff;
  color: var(--vn-ink);
  font-family: var(--vn-font);
}

.vnat-app[data-page="esim"] .esim-hero {
  position: relative;
  overflow: hidden;
  padding: 48px var(--esim-gutter);
  background: var(--esim-deep);
}

.vnat-app[data-page="esim"] .esim-hero::before,
.vnat-app[data-page="esim"] .esim-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.vnat-app[data-page="esim"] .esim-hero::before {
  inset: 0;
  background: url('../images/travel-offers/hero-pattern.png') 0 0 / 77.25px 73.5px;
  opacity: .5;
}

.vnat-app[data-page="esim"] .esim-hero::after {
  top: 14.5%;
  left: 72.9%;
  width: 27.1%;
  height: 88.5%;
  background: url('../images/booking/car-rental-hero-accent.png') center / 100% 100% no-repeat;
  opacity: .5;
}

.vnat-app[data-page="esim"] .esim-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 325px;
}

.vnat-app[data-page="esim"] .esim-hero__title {
  margin: 0;
  color: var(--esim-gold);
  font-family: var(--esim-serif-display) !important;
  font-size: 48px;
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: -.48px !important;
  line-height: 56px;
}

.vnat-app[data-page="esim"] .esim-hero__sub {
  margin: 0;
  color: #fff;
  font-family: var(--esim-serif);
  font-size: 18px;
  line-height: 30px;
}

.vnat-app[data-page="esim"] .esim-store {
  padding: 24px var(--esim-gutter) 0;
}

/* Noi rong bang thanh cuon cua BlueSIM roi cat di; js/esim-store.js do do rong */
.vnat-app[data-page="esim"] .esim-store__frame {
  --esim-frame-scrollbar: 0px;
  --esim-frame-radius: 16px;
  display: block;
  width: calc(100% + var(--esim-frame-scrollbar));
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 800px;
  border: 0;
  clip-path: inset(0 var(--esim-frame-scrollbar) 0 0 round var(--esim-frame-radius));
}

/* Cung style thanh cuon voi BlueSIM: * { scrollbar-width: thin } + ::-webkit-scrollbar 6px */
.esim-scrollbar-probe {
  position: absolute;
  top: -9999px;
  width: 100px;
  height: 100px;
  overflow: scroll;
  scrollbar-width: thin;
}

.esim-scrollbar-probe::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

@media (max-width: 1279px) {
  .vnat-app[data-page="esim"] .esim-hero {
    padding: 32px 16px;
  }

  .vnat-app[data-page="esim"] .esim-hero__inner {
    padding-right: 0;
  }

  .vnat-app[data-page="esim"] .esim-hero__title {
    font-size: 36px;
    line-height: 44px;
  }

  .vnat-app[data-page="esim"] .esim-hero::after {
    display: none;
  }

  .vnat-app[data-page="esim"] .esim-store {
    padding: 16px 16px 0;
  }
}

@media (max-width: 1024px) {
  .vnat-app[data-page="esim"] .esim-store__frame {
    --esim-frame-radius: 12px;
    min-height: 0;
  }
}

/* Chua cho thanh dieu huong day mobile, cung muc 88px voi footer */
@media (max-width: 991.98px) {
  .vnat-app[data-page="esim"] .esim-store__frame {
    height: calc(100vh - 88px - env(safe-area-inset-bottom));
    height: calc(100dvh - 88px - env(safe-area-inset-bottom));
  }
}