@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@600&display=swap");

body {
  font-family: "Prompt", sans-serif !important;
  color: white !important;
  background-color: #052020 !important;
  background-attachment: fixed;
}

/* pc */
@media (max-width: 1199.98px) {
  .-box-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-box-pack: center;
  }
}

/* mb */
@media (max-width: 575.98px) {
  .-box-banner {
    display: flex !important;
    flex-wrap: nowrap !important;
    -webkit-box-pack: center !important;
    flex-direction: row !important;
    align-content: space-around !important;
    justify-content: flex-end !important;
  }
}

footer {
  background: #09764a;
  padding: 1rem 0rem 1rem 0rem;
}
.-bg-content {
  background: #052020;
}
.-bg-nav {
  background: #073128 !important;
}

.-btn-login {
  border: none !important;
  border-radius: 32px !important;
  background: linear-gradient(
    25deg,
    rgba(0, 89, 54, 1) 0%,
    rgba(0, 192, 130, 1) 90%
  );
  line-height: 2.1 !important;
  font-weight: bold;
  text-decoration: none !important;
  background-color: #005100;
  color: white;
  font-weight: bold;
}
.-btn-register {
  border: none !important;
  border-radius: 32px !important;
  border-radius: 32px;
  background-image: linear-gradient(253deg, #feea68, #f8b71f);
  line-height: 2.1 !important;
  font-weight: bold;
  text-decoration: none !important;
  background-color: #fed703;
  color: black;
  font-weight: bold;
}
ul {
  list-style: none;
  display: block;
}
.-nav-bar-pc {
  background: #0a764a !important;
  border-top: 1px solid #056f43 !important;
  padding: 1rem 0rem 1rem 0rem;
}
a {
  color: white !important;
  text-decoration: none !important;
}

hr {
  border: 0 !important;
  height: 0.2rem !important;
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  background-image: linear-gradient(
    90deg,
    transparent,
    #f10101 50%,
    transparent
  );
}
.-bg-banner {
  background: black;
}
.-box-banner img {
  width: 90px;
  height: 90px;
  margin: 20px;
  transition: transform 0.2s;
  filter: grayscale(100%);
}
.-box-banner img:hover {
  transform: scale(1.5);
  filter: grayscale(0%);
}

.contact-bar {
  position: fixed;
  right: 0;
  top: 70%;
  transform: translateY(-50%);
  -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 99;
  background: linear-gradient(140deg, #00ff08 10%, #191919 51%, #191919);
  background-size: 200% auto;
  transition: all 0.3s ease-in-out;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.contact-bar:hover {
  background-position: 100%;
}

.contact-bar-item {
  position: relative;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  border-right: 0.9rem solid #725638;
  width: 5rem;
  height: 4.7rem;
}

.contact-bar-item:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 1px;
  background-color: hsla(0, 0%, 100%, 0.2);
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.contact-bar-item:last-child:after {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .contact-bar-item {
    width: 6rem;
    height: 6rem;
  }
}

@media only screen and (max-width: 414px) {
  .contact-bar-item {
    width: 4rem;
    height: 4rem;
    border-width: 0.3rem;
  }
}

@media only screen and (max-width: 823px) and (orientation: landscape) {
  .contact-bar-item {
    width: 5rem;
    height: 5rem;
    border-width: 0.3rem;
  }
}

i.icon-line {
  background-image: url(/wp-content/themes/lyn99update/More/img/line-logo.png);
  width: 54%;
  height: 50%;
  background-size: contain;
}

a {
  text-decoration: none !important;
}

a:hover {
  color: #ffffff;
}


.title-content {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3{
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links > a {
  color: #0056b3 !important;
}

.nav-links > a:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
}

.post-content a {
  color: #ffd400 !important;
}

.post-content a:hover {
  color: #dbb703 !important;
}

.post-content ul {
  list-style-type: none !important;
}

.blog__meta {
  list-style-type: none;
}

.blog__meta a {
  color: #ff4052;
}

.blog__meta a:hover {
  color: #dc3545 !important;
  text-decoration: none;
}

.blog-item__content a {
  color: #ff4052 !important;
}

.blog-item__content a:hover {
  color: #dc3545 !important;
  text-decoration: none;
}

.blog-item__thumb img {
  width: 100%;
  height: 100%;
}

.blog-item__thumb:hover img {
  transform: scale(1.1);
}

.blog-item {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 39, 0.15);
  /* background: #092558; */
  background-image: linear-gradient(
    to bottom,
    #052020 0%,
    #0c3d3d 20%,
    #0c3d3d 80%,
    #052020 100%
  ) !important;
  padding: 20px;
  box-shadow: 0 0 12px 2px #00c08a;
}

.blog-item__content {
  padding: 5px;
  padding-top: 25px;
  padding-bottom: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: none;
  padding: 15px !important;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-pagination-bullet {
  background-color: #00c08a !important;
  width: 17px !important;
  height: 17px !important;
}
.swiper-pagination-bullet-active {
  background-color: #00c08a !important;
  width: 17px !important;
  height: 17px !important;
}

.swiper-button-prev {
  left: 35px !important;
  right: auto;
  color: #ffffff2e !important;
}

.swiper-button-next {
  right: 35px !important;
  left: auto;
  color: #ffffff2e !important;
}

.settext {
  display: -webkit-box;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 2.5rem !important;
}

.blog-item__content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.article-post {
  margin: 0 auto !important;
}

.nav-links a {
  color: #f8b71f !important;
}
.nav-links a:hover {
  color: white !important;
  text-decoration: none !important;
}



.cat_in_post ,.tag_in_post{
  text-align: start !important;
}

.cat_in_post span,.tag_in_post span{
  align-items: center;
  background-color: #00b177 !important;
  border-radius: 4px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 600;
  font-size: 0.85rem;
  height: 2em;
  justify-content: center;
  line-height: 1.5;
  padding-left: 0.75em;
  padding-right: 0.75em;
  white-space: nowrap;
  margin-bottom: 20px !important;
}


.cat_in_post a,.tag_in_post a{
  align-items: center;
  background-color: #525252 !important;
  border-radius: 4px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 600;
  font-size: 0.85rem;
  height: 2em;
  justify-content: center;
  line-height: 1.5;
  padding-left: 0.75em;
  padding-right: 0.75em;
  white-space: nowrap;
  margin-bottom: 20px !important;
}

.cat_in_post a:hover,.tag_in_post a:hover{
  background-color: #fff !important;
  color: #00b177 !important;
}

.article-page-title,
.article-page-des {
  font-size: 1.5rem !important;
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.archive-page-title,
.archive-page-des {
  font-size: 1.5rem !important;
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


@media screen and (min-width: 1024px) {
  .article-page .post-content {
    padding: 0 40px;
    text-align: start;
  }
}

@media screen and (min-width: 1200px) {
  .article-page .post-content {
    padding: 0 220px;
    text-align: start;
  }
}
.article-page .post-content {
  text-align: start;
}

.article-page .entry-content h1 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 0.5rem;
}

.article-page .entry-content h2 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 0.5rem;
}

.article-page .entry-content h3 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

.article-page .entry-content h4 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.15rem;
  margin-top: 0.5rem;
}

.content-post h1 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
  margin-top: 0.5rem;
  text-align: start !important;
}

.content-post h2 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.25rem;
  margin-top: 0.5rem;
  text-align: start !important;
}

.content-post h3 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.2rem;
  margin-top: 0.5rem;
  text-align: start !important;
}

.content-post h4 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.15rem;
  margin-top: 0.5rem;
  text-align: start !important;
}

.content-post h5 {
  background-image: linear-gradient(253deg, #fef4b6, #f8b71f) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.05rem;
  margin-top: 0.5rem;
  text-align: start !important;
}

.wp-element-caption {
  text-align: center !important;
}

.img-border {
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 8px 2px #00c08a;
  border: 2px solid #00a274;
}

.article-page .post-content figure{
  text-align: center !important;
}

.elementor ul li{
  list-style-type: disc;
}