@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap');
html,
body {
  background-color: #f5f5f5;
  font-family:'Noto Sans Thai', sans-serif !important;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family:'Noto Sans Thai', sans-serif !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
    body{
      padding: 0px;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

.ohon {
text-align: center;
font-size: 40px;
}
.ohono {
text-align: center;
font-size: 20px;
color: red;
}
a {
text-decoration: none;
color: #575757;
}

.wrapper{

height: 100%;
width: 98%;
margin: 0 auto!important;
background: #fff;
border-radius: 7px;
padding: 20px 25px 0;
transition: height 1s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 430px){
  .wrapper{
    max-width: 360px;
    width: 97%;
    padding: 10px 10px 0;
    }
}
@media (min-width: 430px){
  .wrapper{
    margin: 0 auto!important;
    padding: 20px 20px 0;
    }
}
.wrap{
height: 700px;
width: 130px;
background: #fff;
border-radius: 7px;
font-size: 20px;
padding: 20px 25px 0;
transition: height 0.2s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
height: 100%;
}
header h1{
font-size: 21px;
font-weight: 500;
}
header p{
margin-top: 5px;
color: #575757;
font-size: 16px;
}
.wrapper .form{
margin: 20px 0 25px;

}

.form button{
color: rgb(0, 0, 0);
cursor: pointer;
margin-top: 20px;
font-size: 17px;
background-image: linear-gradient(to right, #84ff92, #7effff);
width: 99%;
height: 55px;
border: none;
outline: none;
border-radius: 5px;
transition: 0.5s ease;
}
.form button:hover {
  scale: 1.03;
}
.form .butn_copy, .form .butn_qr {
  background-image: linear-gradient(to right, #d7ffd4, #ceeeff);
  display: inline-block;
  border: none;
  color: rgb(0, 0, 0);
  height: 35px;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  margin-right: 10px; /* Add margin between the buttons */
  margin: 9px 0 37px 0;
}

.form .butn_copy:hover, .form .butn_qr:hover {
  background-image: linear-gradient(to right, #cfffd3, #6abeff);
}

.form .butn_copy {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 5px;
}

.form .butn_qr {
  width: auto; /* Set width to auto */
  padding-left: 10px; /* Add padding for better appearance */
  padding-right: 10px; /* Add padding for better appearance */
}

  .custom-swal-container {
    z-index: 9999999 !important;
  }

  .swal2-popup {
    border-radius: 20px;
  }

  
.qr-code{
opacity: 0;
display: flex;
padding: 33px 0;
border-radius: 5px;
align-items: center;
pointer-events: none;
justify-content: center;
border: 1px solid #ccc;
}
.wrapper.active .qr-code{
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
width: 200px;
}

a {
  text-decoration: none!important;
}
.wrapper button{
  color: rgb(0, 0, 0);
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background-image: linear-gradient(to right, #84ff92, #7effff);
  width: 99%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.5s ease;
  }