html, body {
  height:100%;
}
body {
    /* background: #fcfcfc; */
    /* background-color: #272b30; */
    background-color: #0F172A;
    /* background: linear-gradient(264deg, rgba(215,186,186,1) 0%, rgb(67, 168, 226) 50%, rgba(99,117,177,1) 89%); */
    /* background: rgb(255, 255, 255); */

    /* background-image: linear-gradient(
    0deg,
    hsl(204deg 100% 50%) 0%,
    hsl(204deg 100% 45%) 0%,
    hsl(204deg 100% 40%) 0%,
    hsl(204deg 100% 35%) 0%,
    hsl(204deg 100% 30%) 1%,
    hsl(204deg 100% 25%) 3%,
    hsl(204deg 100% 20%) 5%,
    hsl(204deg 100% 15%) 10%,
    hsl(204deg 100% 10%) 18%,
    hsl(205deg 100% 5%) 32%,
    hsl(0deg 0% 0%) 75%
    );
     */
    /* background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgb(0, 0, 0)), url('/img/bg.jpg') no-repeat; */
    /* background: url('/img/bg2l.png'); */

    /* background-repeat: no-repeat; */
    /* background-size: 100% auto; */
    /* background-position: center top; */
    /* background-attachment: fixed; */
    /* background-image: url('/img/bg2l.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top; */

    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.page-img {
    /* background: url('/img/page.png') no-repeat; */
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgb(0, 0, 0)), url('/img/h2.jpg') no-repeat;
    background-size: 100%;
    height: 20em;
}

.logo-in-page {
    height: 20em;
    text-align: center;
}
@media (max-width: 600px) {
    .logo-in-page {
        height: 10em;
    }
    .page-img {
        height: 10em;
    }
}

.card-menu {
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none
}
.card-menu a{
    color: #000;
    text-decoration: none;
}

.nav_tung {
    background-image: linear-gradient(
        180deg,
        hsl(204deg 100% 50%) 0%,
        hsl(204deg 100% 45%) 0%,
        hsl(204deg 100% 40%) 0%,
        hsl(204deg 100% 35%) 0%,
        hsl(204deg 100% 20%) 5%,
        hsl(204deg 100% 15%) 10%,
        hsl(204deg 100% 10%) 18%,
        hsl(205deg 100% 5%) 32%,
        hsl(0deg 0% 0%) 75%
      );
}


#canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

.show-img {
    /* border-radius: 10px; */
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.show-img-sleep {
  /* border-radius: 10px; */
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  /* border-top-right-radius: 8px; */
}

.show-card {
    background: #000;
    /* border-radius: 10px; */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 1.2rem;
}
.show-cardc {
    /* border-style: 1; */
    border-style: solid;
    border-width: 2px;
    border-color:  rgba(0, 0, 0, 0.788);
    border-radius: 8px;
    cursor: pointer;
}
.show-cardc:hover {
    border-color:  rgba(75, 253, 21, 0.788);
    box-shadow: rgba(80, 250, 1, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.topup-cardc {
  border-radius: 8px;
  cursor: pointer;
}
.topup-cardc:hover {
  border-color:  rgba(21, 199, 253, 0.788);
  box-shadow: rgba(1, 171, 250, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.program-cardc {
  width: 100%;
  border-color:  #081b25;
  /* border-color:  rgba(255, 255, 255, 0.788); */
  /* box-shadow: rgba(255, 255, 255, 0.3) 0px 19px 38px, rgba(255, 255, 255, 0.22) 0px 15px 12px; */
  border-radius: 8px;
  cursor: pointer;
  background: #1A202C;
  color: #fff;
}
.program-cardc:hover {
  border-color:  rgba(21, 199, 253, 0.788);
  box-shadow: rgba(1, 171, 250, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.topups-cardc {
  border-radius: 8px;
  cursor: pointer;
}
.topups-cardc:hover {
  border-color:  rgba(21, 199, 253, 0.788);
  box-shadow: rgba(1, 171, 250, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.a-rm {
  text-decoration: none;
  color: black;
}

code{
    background: #fff;
    border: 1px solid #ddd;
    border-left: 3px solid #9c9c9c;
    color: #000;
    page-break-inside: avoid;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 1.0em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.0em;
    display: block;
    word-wrap: break-word;
}


#tupup1, #tupup2, #tupup3 {
  display: none;
}

#tupup1:target, #tupup2:target, #tupup3:target {
  display: block;
}

.show-aa {
  /* border-style: 1; */

  border-bottom: 2px solid rgba(2, 247, 255, 0.788);
}

.footer-tung {
  padding-top: 30px;
  padding-bottom: 30px;
  /* margin-bottom: 30px; */
  color: inherit;
  /* background-color: #ffffff; */
  background-color: #121C2F;
  
}

.img-tung-info{
  border-radius: 8px;
}



/* CSS */
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #0038a1;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@media only screen and (max-width: 500px) {
  .g-recaptcha {
      transform:scale(0.77);
      transform-origin:0 0;
  }
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.iframe-responsive {
  display: block;
  max-width: 100%;
  height: 315px;
}

.img-cover{
  object-fit: cover;
  object-position: center;
  border-style: solid;
  border-width: 3px;
  border-color:  rgba(0, 0, 0, 0.788);
  border-radius: 50%;
  background: #fcfcfc;
}

.zoom-img {
  transition: transform .2s; /* Animation */
}

.zoom-img:hover {
  transform: scale(1.08); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.zoom-img-container {
  overflow: hidden; /* Prevents image from going outside the card */
}


.bg-darks {
  background-color: #242D3E;
}


.owl-nav button {
  position: absolute;
  top: 50%;
  background-color: #000;
  color: #fff;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
.owl-nav button.owl-prev {
  left: 0;
}
.owl-nav button.owl-next {
  right: 0;
}

.owl-dots {
  text-align: center;
  padding-top: 15px;
  color: #ccc;
  display: none;
}
.owl-dots button.owl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
.owl-dots button.owl-dot.active {
  background-color: #000;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.38) !important;
}
.owl-nav span {
    font-size: 60px;    
    position: relative;
    top: -5px;
}
.owl-nav button:focus {
    outline: none;
}


.table-responsive img{
  cursor: zoom-in;
}