/* =============================================================================
   NIKE899 landing page: static port of LANDING-NIKE-3 (Nuxt 2 + Tailwind CSS 3.4)

   Hand-written, no build step. Every rule reproduces the computed result of the
   Tailwind utilities that the original element carried, in the same cascade
   order (base, then the .container component, then the component rules, then
   their responsive overrides). Units stay in rem: the root font-size is 14px,
   so 1rem = 14px.

   Breakpoints from tailwind.config.js that the page uses:
     sm = (min-width: 768px)        md = (min-width: 820px)
   .container steps: 428px, 768px, 1024px, 1280px, 1536px
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Design tokens
   ----------------------------------------------------------------------------- */

:root {
  --color-black: #000;
  --color-white: #fff;      /* text-info-main (--info-main-color of .dark-theme) */
  --color-navy: #1e3a8a;    /* blue-900 */
  --color-gold: #fc0;       /* #ffcc00 highlights */
  --color-yellow: #facc15;  /* yellow-400 */
  --color-cream: #fef9c3;   /* yellow-100 */
  --color-red: #b91c1c;     /* red-700 */

  /* bg-gradient-to-b from-… via-… to-… */
  --gradient-login: linear-gradient(to bottom, #ef4444, #dc2626, #b91c1c);
  --gradient-register: linear-gradient(to bottom, #eab308, #f97316, #ea580c);
  --gradient-play: linear-gradient(to bottom, #dc2626, #b91c1c, #991b1b);
  --gradient-night: linear-gradient(to bottom, #000, #1e3a8a);

  /* global.css .text-header / .text-p, with the values Nuxt's build shipped */
  --shadow-title: 0 0 5px hsla(0, 0%, 87%, .71);
  --shadow-gold: 0 0 5px rgba(255, 255, 125, .706);
}


/* -----------------------------------------------------------------------------
   Font (global.css). It only contains Thai glyphs and the space; Latin letters
   and digits fall back to the system sans-serif, exactly like the original.
   No font-weight on purpose: bold Thai text is synthesised.
   ----------------------------------------------------------------------------- */

@font-face {
  font-family: "Noto Sans";
  src: local("Noto Sans"), url("../fonts/NotoSansThai-Medium.ttf") format("truetype");
  font-display: swap;
}


/* -----------------------------------------------------------------------------
   Base: the parts of Tailwind Preflight that touch this page, then global.css
   ----------------------------------------------------------------------------- */

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  /* global.css */
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  word-spacing: 1px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: inherit;
}

h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

strong {
  font-weight: bolder;
}

img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

button {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}


/* -----------------------------------------------------------------------------
   Layout (layouts/default.vue, pages/index.vue)
   ----------------------------------------------------------------------------- */

.layout {
  background-color: var(--color-black);
}

/* global.css .nuxt-layout on the page root */
.page {
  width: 100%;
  min-height: 100vh;
}

/* Tailwind's .container as generated from tailwind.config.js:
   center: true, padding 2rem / md 8rem / lg 12rem / xl and 2xl 14rem.
   The config's DEFAULT screen "100%" produced "@media (min-width:100%)",
   which is not a valid length query and never matches, so it is left out. */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 428px) {
  .container {
    max-width: 428px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-left: 12rem;
    padding-right: 12rem;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-left: 14rem;
    padding-right: 14rem;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Centered column used by most sections (flex flex-col gap-2 justify-start items-center) */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
}

.stack--padded {
  padding-top: 1rem;
}

/* global.css .bg-div: section background images */
.hero,
.intro__bg,
.steps__bg,
.rewards__bg,
.mobile-slot__bg,
.faq__bg {
  background-position: 50%;
  background-size: cover;
}


/* -----------------------------------------------------------------------------
   Shared pieces
   ----------------------------------------------------------------------------- */

/* Headings painted with background-clip: text
   (mx-auto text-2xl font-semibold text-header bg-clip-text text-transparent bg-white) */
.title {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: transparent;
  background-color: var(--color-white);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: var(--shadow-title);
}

/* Gold words in the copy (style="color:#ffcc00" / text-[#ffcc00]) */
.highlight {
  color: var(--color-gold);
}

/* global.css .text-p */
.highlight--glow {
  text-shadow: var(--shadow-gold);
}

/* Logo above a carousel (Section03, Section05) */
.section-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.333333%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Pill buttons (NavbarTop and PicSection) */
.btn {
  display: inline-flex;
  align-items: center;
  margin-left: .25rem;
  margin-right: .25rem;
  padding: .625rem .75rem;
  border-radius: 9999px;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  color: var(--color-white);
  cursor: pointer;
}

.btn--login {
  background-image: var(--gradient-login);
}

.btn--register {
  background-image: var(--gradient-register);
}

.btn--play {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: .5rem;
  background-image: var(--gradient-play);
}

@media (min-width: 820px) {
  .section-logo {
    width: 25%;
  }

  .btn {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .btn--play {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
   NavbarTop (components/layouts/navbar/NavbarTop.vue)
   ----------------------------------------------------------------------------- */

.navbar {
  width: 100%;
}

/* Mobile bar, below 768px */
.navbar__mobile {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--color-navy);
}

.navbar__brand {
  display: flex;
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
}

.navbar__logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  padding: .5rem;
}

.navbar__home {
  display: flex;
}

.navbar__logo-img {
  width: 100%;
}

.navbar__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.navbar__actions--mobile {
  margin-left: .5rem;
  margin-right: .5rem;
}

/* Desktop bar, from 768px (shadow-lg shadow-white) */
.navbar__desktop {
  display: none;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--color-navy);
  box-shadow: 0 10px 15px -3px var(--color-white), 0 4px 6px -4px var(--color-white);
}

/* Combined with .container: the 0.5rem side padding wins at every breakpoint */
.navbar__inner {
  display: flex;
  width: 100%;
  padding-left: .5rem;
  padding-right: .5rem;
}

@media (min-width: 768px) {
  .navbar__mobile {
    display: none;
  }

  .navbar__desktop {
    display: flex;
  }
}

@media (min-width: 820px) {
  .navbar__logo {
    width: 20%;
  }
}


/* -----------------------------------------------------------------------------
   PicSection (components/logosetion/PicSection.vue)
   ----------------------------------------------------------------------------- */

.hero {
  width: 100%;
  padding-top: 1rem;
  background-image: url("../images/bg/bg-banner-desktop.webp");
}

.hero__banner,
.hero__img {
  width: 100%;
}

.hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 2rem;
}


/* -----------------------------------------------------------------------------
   Section02 (components/logosetion/Section02.vue)
   ----------------------------------------------------------------------------- */

.intro {
  width: 100%;
  background-color: var(--color-black);
}

.intro__bg {
  width: 100%;
  background-image: url("../images/bg/bg-banner-2.webp");
}

.intro__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  margin-left: auto;
  margin-right: auto;
}

.intro__logo-img,
.intro__visual-img {
  width: 100%;
}

.intro__visual {
  position: relative;
}

/* The register badge hangs 4.5rem past the right edge of the picture. Below
   768px that makes the page about 35px wider than the screen; the original
   does the same, so it is kept. */
.intro__register {
  position: absolute;
  right: -4.5rem;
  bottom: -4rem;
}

.intro__register-img {
  width: 40%;
}

.intro__content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-top: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.intro__figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro__figure-img {
  width: 80%;
}

.intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
}

.intro__title {
  padding-bottom: .5rem;
  background-color: var(--color-cream);
}

.intro__copy {
  color: var(--color-white);
}

.intro__copy--last {
  margin-bottom: 1rem;
}

/* "สมัครสมาชิก ตอนนี้!" bar */
.cta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: .625rem .75rem;
  border-radius: 9999px;
  background-image: var(--gradient-register);
  font-weight: 600;
  text-align: center;
  color: var(--color-white);
  cursor: pointer;
}

/* Spacer that held a Font Awesome icon in the original (it never rendered) */
.cta__icon {
  justify-content: flex-start; /* inert on a block box, kept for parity */
  width: 25%;
}

.cta__link {
  display: inline-flex;
  align-items: center;
  margin-left: .25rem;
  margin-right: .25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  white-space: nowrap;
}

@media (min-width: 820px) {
  .intro__register {
    right: 17rem;
  }

  .intro__register-img {
    width: 75%;
  }

  .intro__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .cta__link {
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
}


/* -----------------------------------------------------------------------------
   Section03 (components/logosetion/Section03.vue)
   ----------------------------------------------------------------------------- */

.steps {
  width: 100%;
}

.steps__bg {
  width: 100%;
  background-image: url("../images/bg/bg-banner-3.webp");
}

.steps__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.steps__title {
  padding: 1rem;
}

.steps__lead {
  padding-left: 2rem;
  padding-right: 2rem;
  color: var(--color-white);
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-white);
}

.step__title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.step__text {
  padding-left: .5rem;
  padding-right: .5rem;
  text-align: center;
}


/* -----------------------------------------------------------------------------
   Carousel and CarouselReward (components/common/carousel/*.vue,
   vue-slick-carousel 1.0.6). Same boxes as slick:
   root > list > track > slide > div > item (inline-block) > frame > img
   js/carousel.js adds the clones, the px widths, the transform and the dots.
   ----------------------------------------------------------------------------- */

/* grid grid-cols-1 py-4 px-8 w-full shadow-xl */
.carousel-frame {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  width: 100%;
  padding: 1rem 2rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.carousel {
  --carousel-show: 1; /* slides in view, same value as data-slides-to-show */
  position: relative;
  justify-content: center; /* inert on a block box, kept for parity */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.carousel--reward {
  --carousel-show: 3;
}

.carousel__list {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.carousel__track {
  position: relative;
  top: 0;
  left: 0;
  /* Without JavaScript the five slides sit side by side with the first one(s)
     in view; carousel.js replaces this with exact px widths and translate3d. */
  width: calc(500% / var(--carousel-show));
  transform: translateZ(0);
}

.carousel__track::before,
.carousel__track::after {
  content: "";
  display: table;
}

.carousel__track::after {
  clear: both;
}

.carousel__slide {
  float: left;
  width: 20%; /* without JavaScript: one fifth of the track */
  height: 100%;
  min-height: 1px;
  outline: none;
}

/* The inline-block sits on the text baseline of its line box, which leaves the
   small gap under every image that the original shows. */
.carousel__item {
  display: inline-block;
  width: 100%;
}

.carousel__frame {
  width: 100%;
}

.carousel__img {
  margin-left: auto;
  margin-right: auto;
}

.carousel--reward .carousel__img {
  border-radius: 1.5rem;
}

.carousel.is-dragging .carousel__img {
  pointer-events: none;
}

/* Dots: 20px buttons whose ::before draws an 8px white disc at the top left */
.carousel__dots {
  position: absolute;
  bottom: -25px;
  width: 100%;
  text-align: center;
}

.carousel__dot {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 25px 1px;
  cursor: pointer;
}

.carousel__dot-btn {
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}

.carousel__dot-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-white);
  border-radius: 100%;
  background: var(--color-white);
  opacity: .25;
}

.carousel__dot-btn:hover::before,
.carousel__dot-btn:focus::before {
  opacity: 1;
}

.carousel__dot.is-active .carousel__dot-btn::before {
  opacity: .75;
}


/* -----------------------------------------------------------------------------
   Section04 (components/logosetion/Section04.vue)
   ----------------------------------------------------------------------------- */

.providers {
  width: 100%;
  padding: 1rem;
  background-image: var(--gradient-night);
}

.providers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-content: center;
  gap: 1rem;
  padding: 1rem;
  border-width: 2px;
  border-color: var(--color-yellow);
  border-radius: .5rem;
}

@media (min-width: 820px) {
  .providers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* -----------------------------------------------------------------------------
   Section05 (components/logosetion/Section05.vue)
   ----------------------------------------------------------------------------- */

.rewards {
  width: 100%;
}

.rewards__bg {
  width: 100%;
  background-image: url("../images/bg/bg-banner-3.webp");
}


/* -----------------------------------------------------------------------------
   Section06 (components/logosetion/Section06.vue)
   ----------------------------------------------------------------------------- */

.mobile-slot {
  width: 100%;
}

.mobile-slot__bg {
  width: 100%;
  background-image: url("../images/bg/bg-4.webp");
}

.mobile-slot__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.mobile-slot__lead {
  padding: 2rem;
  color: var(--color-white);
}

.mobile-slot__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.mobile-slot__img {
  width: 100%;
}

.mobile-slot__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  color: var(--color-white);
}

.mobile-slot__copy {
  color: var(--color-white);
}

.mobile-slot__list {
  list-style-type: disc;
}

@media (min-width: 820px) {
  .mobile-slot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* -----------------------------------------------------------------------------
   Qestion (components/logosetion/Qestion.vue)
   ----------------------------------------------------------------------------- */

.faq {
  width: 100%;
  background-image: var(--gradient-night);
}

.faq__bg {
  width: 100%;
}

.faq__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: var(--color-white);
}

.faq__lead {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: var(--color-white);
}

.faq__question {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-decoration-line: underline;
}

.faq__link {
  font-weight: 600;
  color: var(--color-yellow);
  text-decoration-line: underline;
}


/* -----------------------------------------------------------------------------
   Footer (components/layouts/footer/Footer.vue)
   ----------------------------------------------------------------------------- */

.footer {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-image: linear-gradient(to top, #000, #1e3a8a);
}

.footer__inner {
  width: 100%;
  padding: 1rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  color: var(--color-white);
}

.footer__about {
  width: 100%;
  text-align: center;
}

.footer__logo {
  padding-bottom: .5rem;
}

.footer__logo-img {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.footer__tagline {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 700;
}

.footer__col {
  width: 100%;
}

.footer__stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.footer__heading {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
}

.footer__link {
  width: 33.333333%;
  margin-left: .5rem;
  margin-right: .5rem;
  padding: .5rem;
  border-radius: 9999px;
  background-color: var(--color-red);
  text-align: center;
}

.footer__banks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  padding-left: 4rem;
  padding-right: 4rem;
}

.footer__bank {
  width: 3rem;
  height: 3rem;
  margin: .375rem;
  border-radius: 9999px;
}

@media (min-width: 820px) {
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: 13rem;
    margin-right: 13rem;
  }

  .footer__about {
    text-align: left;
  }

  .footer__logo-img {
    margin-left: 0;
  }

  .footer__banks {
    padding-left: 0;
    padding-right: 0;
  }
}