@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  font-family: "Inter", sans-serif;
}

a {
  text-decoration-line: none;
}

#title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#title a {
  display: flex;
  align-items: center;
}
#title a i {
  font-size: 1rem;
  margin-left: 0.3rem;
}
#title h6 {
  font-size: 1.4rem;
  font-weight: 600;
}

@media only screen and (max-width: 1024px) {
  .blog {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 1024px) {
  .blog-topic {
    margin-bottom: 1rem;
  }
}
.blog-topic-content {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
  .blog-topic-content {
    flex-wrap: wrap;
  }
}
.blog-topic-content .post {
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  width: 24%;
  border-radius: 0.75rem;
}
@media only screen and (max-width: 1024px) {
  .blog-topic-content .post {
    width: 49%;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 768px) {
  .blog-topic-content .post {
    width: 100%;
    margin-top: 1rem;
  }
}
.blog-topic-content .post-content {
  padding: 1rem 1rem;
}
.blog-topic-content .post-content-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 13px;
}
.blog-topic-content .post-content-title {
  font-weight: 600;
  font-size: 1.1rem;
}
.blog-topic-content .post-image {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.blog-topic-content .post-image img {
  height: 10rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .blog-topic-content .post-image img {
    height: 12rem;
  }
}
.blog-content {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2rem;
}
@media only screen and (max-width: 1024px) {
  .blog-content {
    flex-wrap: wrap;
  }
}
.blog-content-post {
  width: 100%;
}
.blog-content-post .desc {
  display: flex;
  font-size: 13px;
  margin: 0.5rem 0;
}
.blog-content-post .desc .author {
  margin-left: 1rem;
}
.blog-content-post .headpost .banner-post {
  height: 25rem;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .blog-content-post .headpost .banner-post {
    height: 10rem;
  }
}
.blog-content-post .headpost .banner-post img {
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  width: 100%;
}
.blog-content-post .headpost h2 {
  font-size: 1.4rem;
  font-weight: 700;
}
.blog-content-post .content {
  margin-top: 2rem;
}
.blog-content .service-relate {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  padding: 1rem 1rem;
  border-radius: 0.7rem;
}
@media only screen and (max-width: 1024px) {
  .blog-content .service-relate {
    margin-top: 2rem;
  }
}
.blog-content .service-relate .relate-content {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(14, 23, 38, 0.1647058824);
}
@media only screen and (max-width: 1024px) {
  .blog-content .service-relate .relate-content {
    flex-wrap: wrap;
  }
}
.blog-content .service-relate .relate-content-acc {
  margin-left: 1rem;
}
@media only screen and (max-width: 1024px) {
  .blog-content .service-relate .relate-content-acc {
    margin-top: 1rem;
  }
}
.blog-content .service-relate .relate-content-acc h5 {
  font-weight: 600;
  font-size: 1.2rem;
}
.blog-content .service-relate .relate-content-acc .acc-desc {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
}
.blog-content .service-relate .relate-content-acc .acc-desc i {
  margin-right: 0.25rem;
}
.blog-content .service-relate .relate-content-image {
  border-radius: 0.75rem;
  width: 30%;
  height: 6rem;
}
@media only screen and (max-width: 1024px) {
  .blog-content .service-relate .relate-content-image {
    height: 4rem;
    width: 4rem;
  }
}
.blog-content .service-relate .relate-content-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
}
.blog-content-post {
  width: 63%;
  padding: 1rem 1rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 0.75rem;
}
@media only screen and (max-width: 1024px) {
  .blog-content-post {
    width: 100%;
  }
}
.blog-content-service {
  width: 33%;
}
@media only screen and (max-width: 1024px) {
  .blog-content-service {
    width: 100%;
  }
}

.shop-card {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 0.75rem;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .shop-card {
    box-shadow: none;
  }
}

.banner-new {
  height: 500rem;
  background: red;
}
.banner-new img {
  height: 100%;
}

.game-new {
  position: relative;
  width: 40%;
}

.relative {
  position: relative;
}

.news-home {
  margin-bottom: 2rem;
}
.news-home-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .news-home-content {
    grid-template-columns: repeat(1, 1fr);
  }
}
.news-home-content .post {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  width: 100%;
  border-radius: 0.75rem;
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post {
    margin-bottom: 1rem;
    width: 100%;
  }
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post:hover img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.news-home-content .post-content {
  margin-top: 0.5rem;
  padding: 0 1rem;
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post-content {
    padding: 0.5rem 0.5rem;
  }
}
.news-home-content .post-content-title {
  font-size: 1.2rem;
  font-weight: 700;
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post-content-title {
    font-size: 1rem;
  }
}
.news-home-content .post-content-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1rem 0;
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post-content-footer {
    margin-top: 0;
  }
}
.news-home-content .post .ic {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  margin-right: 0.5rem;
}
.news-home-content .post .ic i {
  margin-right: 0.2rem;
}
.news-home-content .post-image {
  overflow: hidden;
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post-image {
    padding: 0;
  }
}
.news-home-content .post img {
  height: 11rem;
  max-height: 11rem;
  transition: transform 0.3s ease;
  width: 100%;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  min-height: 10rem;
}
@media only screen and (max-width: 1024px) {
  .news-home-content .post img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.game-banner {
  width: 100%;
  padding: 5rem 2rem;
  min-height: 25rem;
  background: rgba(255, 92, 92, 0.159);
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  display: flex;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  align-items: center;
  position: relative;
  max-height: 25rems;
  overflow: hidden;
}
@media only screen and (max-width: 1024px) {
  .game-banner {
    padding: 2rem 1rem;
  }
}
.game-banner .top-background {
  width: 100%;
  position: absolute;
  height: 100%;
  background-size: cover;
  width: 100%;
  z-index: 0;
  left: 0;
  bottom: 0;
  border-radius: 0.75rem;
  background-position: bottom;
  background-image: url("/uploads/images/effect.png");
}
.game-banner-logo {
  z-index: 1;
}
@media only screen and (max-width: 1024px) {
  .game-banner-logo {
    display: none;
  }
}
.game-banner-logo img {
  border-radius: 0.75rem;
  height: 4.5rem;
  width: 4.5rem;
}
.game-banner-desc {
  z-index: 1;
  margin-left: 1rem;
}
.game-banner-desc h2 {
  font-size: 1.2rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
}
.game-banner-desc p {
  margin-top: 0.5rem;
  font-weight: 500;
}

.new {
  background: #f9fcff;
}

.fdsfas {
  color: #ac9ef1;
  font-size: 1rem;
  font-style: italic;
}

.ta-efc3 {
  background: #0a6aff;
}

.shadow-acc {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.dht-padding {
  padding: 1rem 2.25rem;
}

.ta-search {
  width: 100%;
  display: flex;
}

select {
  width: 20rem;
  background: #fff;
  border: 1px solid #0a6aff;
  padding: 0.5rem 1rem;
  color: #0a6aff;
  border-radius: 3px;
}
@media only screen and (max-width: 1024px) {
  select {
    width: 100%;
    margin-bottom: 1rem;
  }
}

.devhungtran-search {
  display: flex;
  width: 100%;
  margin: 1rem 0;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .devhungtran-search {
    flex-wrap: wrap;
  }
}
.devhungtran-search div {
  margin-right: 1rem;
}
@media only screen and (max-width: 1024px) {
  .devhungtran-search div {
    margin-right: 0;
  }
}
.devhungtran-search .fter {
  padding: 0.55rem 2rem;
  background: #0a6aff;
  border: 1px solid #0a6aff;
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
}
@media only screen and (max-width: 1024px) {
  .devhungtran-search .fter {
    width: 100%;
  }
}

@media only screen and (max-width: 1024px) {
  .ftw {
    width: 100%;
  }
}

.dht13 {
  color: blue;
  font-weight: 600;
}
@media only screen and (max-width: 1024px) {
  .dht13 {
    display: none;
  }
}

.dev-s {
  width: 100%;
  display: flex;
  align-items: center;
}

.filter {
  width: 100%;
  display: flex;
}
@media only screen and (max-width: 1024px) {
  .filter {
    flex-wrap: wrap;
  }
}

.list-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 20;
}

.serc {
  color: #13e99a;
  font-weight: 600;
}
@media only screen and (max-width: 1024px) {
  .serc {
    display: none;
  }
}

.desc-note {
  width: 100%;
}
.desc-note .note {
  display: flex;
  justify-content: space-between;
}
.desc-note .note-vl {
  font-weight: 500;
}
.desc-note .note-vl {
  font-weight: 600;
}

.account {
  margin-bottom: 1rem;
  position: relative;
  width: 22%;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  background: #fff;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 0;
  border-radius: 0.75rem;
}
.account-game {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  background: rgba(9, 108, 255, 0.7882352941);
  color: #fff;
  padding: 0.2rem;
  font-size: 12px;
  border-radius: 0.5rem;
  font-weight: 600;
}
.account .note {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.account .note-vl {
  font-weight: 700;
}
@media only screen and (max-width: 1024px) {
  .account .note {
    padding: 0.24rem 0;
  }
}
@media only screen and (max-width: 1024px) {
  .account {
    width: 100%;
    margin-bottom: 1rem;
  }
}
.account .account-description-pr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: 0rem 1rem;
}
@media only screen and (max-width: 1024px) {
  .account .account-description-pr {
    padding: 0.5rem 0rem;
  }
}
.account .prices {
  justify-content: space-between;
  margin: 1rem 0;
  align-content: center;
}
.account .prices i {
  color: #f5d41a;
}
@media only screen and (max-width: 1024px) {
  .account-description {
    padding: 0 0;
  }
}
.account-description .accounts-info {
  display: flex;
}
@media only screen and (max-width: 1024px) {
  .account-description .accounts-info {
    display: none;
  }
}
.account-description .accounts-info span {
  background: rgba(215, 207, 255, 0.2352941176);
  margin-right: 0.2rem;
  padding: 0.5rem 0.7rem;
  color: #0a6aff;
  border-radius: 0.5rem;
  font-size: 10px;
  font-weight: 600;
}
.account-footer {
  justify-content: space-between;
  display: flex;
  align-items: center;
  border-top: 2px solid rgba(215, 207, 255, 0.2352941176);
  background: #0a6aff;
  justify-content: center;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  padding: 0.5rem 0;
}
.account-footer-avt {
  display: flex;
  align-items: center;
}
.account-head {
  display: block;
  align-items: center;
}
.account-head img {
  object-fit: cover;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .account-head {
    display: block;
  }
}
.account-head-title {
  font-weight: 700;
  margin-left: 1rem;
  font-style: 1.3rem;
}
@media only screen and (max-width: 1024px) {
  .account-head-title {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}
.account:nth-child(1) {
  margin-left: 0;
}
.account:nth-child(1) {
  margin-left: 0;
}
@media only screen and (max-width: 1024px) {
  .account {
    padding: 0.5rem 0.5rem;
  }
}

.asssx {
  font-size: 11px;
  color: blue;
}

.sdass {
  border-radius: 0.75rem;
}

.account-heads {
  font-weight: 500;
}

.footer {
  color: #0e1726;
}

.dev-container {
  padding-left: 5rem;
  padding-right: 5rem;
}
@media only screen and (max-width: 1024px) {
  .dev-container {
    padding-left: 0;
    padding-right: 0;
  }
}

.dev-head {
  padding-left: 6rem;
  padding-right: 6rem;
}
@media only screen and (max-width: 1280px) {
  .dev-head {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media only screen and (max-width: 1024px) {
  .dev-head {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.test {
  background: red;
}

.ta-76a6 {
  color: #0e1726;
}

.gg02s {
  border-radius: 0.75rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.accounts {
  position: relative;
}

.accounts-list {
  flex-wrap: wrap;
  display: flex;
}
.accounts-list .account-card {
  border-radius: 0.75rem;
  aspect-ratio: 16/9;
}
.accounts-list .account-card img {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  height: 10rem;
  width: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 1024px) {
  .accounts-list .account-card img {
    height: 12rem;
  }
}
@media only screen and (max-width: 600px) {
  .accounts-list .account-card img {
    height: 7rem;
  }
}
@media only screen and (max-width: 400px) {
  .accounts-list .account-card img {
    height: 5rem;
  }
}
@media only screen and (max-width: 1024px) {
  .accounts-list .account-card {
    width: 50%;
  }
}

.footer-bar {
  font-size: 11px;
  z-index: 1030;
}
.footer-bar i {
  font-size: 15px;
}

.devads {
  position: relative;
}

.swiper-pagination {
  position: absolute;
  left: 0;
  bottom: -5rem;
}

.arrow-ass {
  margin-top: 2rem;
}
.arrow-ass a {
  padding: 1rem 0;
  font-weight: 700;
  color: #6537ff;
}

#toggleSearchButton {
  background: #0a6aff;
  border: 1px solid #0a6aff;
}

.btn-auth {
  width: 100%;
  display: block;
  padding: 0.5rem 2rem;
  background: #0a6aff;
  font-weight: 700;
  border-radius: 5px;
  color: #fff;
}

.acc-card {
  padding: 0.5rem;
  color: #0e1726;
}

.wasas {
  width: 100%;
}

.fdsfjds .swiper {
  width: 100%;
  height: 30rem;
  margin-left: auto;
  margin-right: auto;
}
.fdsfjds .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2) !important;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.test {
  background: Red;
}

@media only screen and (max-width: 1024px) {
  .fdsfdsd {
    margin-top: 1rem;
    border-radius: 0.75rem;
  }
}

.dxasa {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 0.75rem;
}
@media only screen and (max-width: 1024px) {
  .dxasa .ta-account-info {
    margin-top: 1rem;
  }
}

.seller-profile {
  padding: 1rem 0;
  width: 100%;
  border: 1rem;
}
.seller-profile .username {
  padding: 0.5rem 0;
  margin: 0.5rem 0;
  font-weight: 600;
  color: #0a6aff;
}
.seller-profile .avatar img {
  object-fit: cover;
  border-radius: 50%;
}

.sacs {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
@media only screen and (max-width: 1024px) {
  .sacs {
    text-align: center;
  }
}

.stats {
  color: #6537ff;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .stats {
    display: none;
  }
}
.stats a {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .stats a {
    display: none;
  }
}
.stats a i {
  margin-left: 0.5rem;
}

.dev-sa {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.btn-buyacc {
  background: #0a6aff;
  font-display: 600;
  color: #fff;
}

.swal2-confirm .swal2-styled {
  background: #0a6aff;
}

.imagesda {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  height: auto;
  object-fit: cover;
}
@media only screen and (max-width: 1024px) {
  .imagesda {
    border-radius: 0.75rem;
    height: 12rem;
  }
}

.account-train {
  margin-top: 2rem;
}
.account-train-acc {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: wrap;
}
.account-train-acc .account-desc {
  padding: 0.5rem 0;
  display: flex;
  justify-content: space-between;
}
.account-train-acc .account-desc span {
  color: blue;
  font-weight: 700;
  font-size: 13px;
}
.account-train-acc .shop-user {
  padding: 0.5rem 0;
}
.account-train-acc .accounts {
  width: 24%;
  margin-left: 1%;
}
@media only screen and (max-width: 900px) {
  .account-train-acc .accounts {
    width: 49%;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 600px) {
  .account-train-acc .accounts {
    width: 100%;
    margin-top: 1rem;
  }
}

.sldg {
  width: 100%;
  overflow: hidden;
}

.game-card {
  width: 100%;
  position: relative;
}
.game-card .swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.game-card .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2) !important;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-inbox {
  background: rgba(215, 207, 255, 0.7254901961);
}

.profile {
  width: 100%;
  margin-top: 2rem;
}
.profile-left {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .profile-left {
    flex-direction: column;
  }
}
.profile-info {
  margin-left: 1rem;
}
@media only screen and (max-width: 1024px) {
  .profile-info {
    text-align: center;
    margin-left: 0;
    margin-top: 1rem;
  }
}
.profile-head {
  width: 100%;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  position: relative;
}
.profile-head .avt {
  height: 6rem;
  width: 6rem;
}
.profile-head .avt img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab-item {
  width: 30%;
}
@media only screen and (max-width: 1024px) {
  .tab-item {
    width: 31%;
  }
}
.tab-item .nav-link {
  display: flex;
  align-items: center;
}
.tab-item a {
  padding: 0.8rem 2rem;
  border-radius: 1rem;
  text-align: center;
  background: rgba(215, 207, 255, 0.7254901961);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-item a i {
  font-size: 1.2rem;
  margin-right: 0.3rem;
}
@media only screen and (max-width: 1024px) {
  .tab-item a i {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1024px) {
  .tab-item a {
    padding: 0.5rem 0.5rem;
    border-radius: 0.75rem;
  }
}
.tab .active {
  background: #0a6aff;
  font-weight: 600;
  color: #fff;
}

.ntf-user {
  display: flex;
  align-content: center;
}
.ntf-user-author {
  display: flex;
  align-content: center;
  margin: 0 0.5rem;
}
.ntf-user-author .msg {
  margin-left: 0.5rem;
  display: flex;
  align-content: center;
}
.ntf-user-author .msg-acc {
  font-weight: 600;
}
.ntf-user-author .author {
  font-weight: 700;
}
.ntf-user-avt {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.ntf-user-avt .author {
  display: flex;
  align-items: center;
}
.ntf-user-avt img {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
}

.tab-content {
  padding: 1rem 0;
}
.tab-content-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.marquee {
  padding: 1rem 2rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 6rem;
  flex-direction: column;
  /* Thay đổi hướng của flex thành cột */
}

.marquee-text {
  animation: marquee 10s linear infinite;
  white-space: nowrap;
  /* Đảm bảo nội dung không bị ngắt dòng */
}

@keyframes marquee {
  0% {
    transform: translateY(100%);
    /* Thay đổi hướng của transform thành dọc */
  }
  100% {
    transform: translateY(-100%);
    /* Thay đổi hướng của transform thành dọc */
  }
}
.marquee-text-wrap {
  overflow: hidden;
}
.marquee-text-wrap .marquee-text-content {
  width: 100000px;
  display: flex;
}
.marquee-text-wrap .marquee-text-content .marquee-text-text {
  -webkit-animation-name: marquee-text-animation;
  animation-name: marquee-text-animation;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  float: left;
}

.review {
  margin-top: 1rem;
}
.review-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(14, 23, 38, 0.1647058824);
  padding-top: 1rem;
}
.review-footer i {
  cursor: pointer;
}
.review-content {
  padding: 1rem 0;
  margin-top: 1rem;
}
.review-head {
  display: flex;
  align-content: center;
}
.review-head-info {
  margin-left: 1rem;
}
.review-head-info #name {
  font-weight: 700;
}
.review-head-info #rate {
  color: #f5e31a;
  margin-top: 0.5rem;
}
.review-head img {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.tab-content-title {
  padding: 1rem 0;
}

.rate-star {
  color: #f5d41a;
  border-right: 2px solid rgba(14, 23, 38, 0.3137254902);
  padding-right: 1rem;
  margin-left: 0.25rem;
}

.rate {
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.shop-rt {
  margin-top: 1rem;
  display: flex;
  font-size: 11px;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .shop-rt {
    justify-content: center;
  }
}
.shop-rt .like {
  padding-left: 1rem;
}

.tab-content-more {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
  .tab-content-more {
    flex-wrap: wrap;
  }
}
.tab-content-more .tab-content-info {
  width: 50%;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  padding: 2rem 2rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 1024px) {
  .tab-content-more .tab-content-info {
    width: 100%;
    padding: 2rem 1rem;
  }
}

.elms {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.elms-ic {
  margin-right: 0.5rem;
  color: #636d7e;
}
.elms .more-op {
  color: #636d7e;
  margin-right: 0.5rem;
  font-weight: 600;
}

.tab-content-sale {
  display: flex;
  justify-content: space-between;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1024px) {
  .tab-content-sale {
    flex-wrap: wrap;
  }
}
.tab-content-sale .tls {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 4rem;
  width: 48%;
}
@media only screen and (max-width: 1024px) {
  .tab-content-sale .tls {
    width: 100%;
    padding: 1rem 1rem;
    justify-content: center;
    align-items: center;
  }
}
.tab-content-sale .tl {
  color: #0a6aff;
  font-size: 2rem;
  padding: 1rem 0;
}
@media only screen and (max-width: 1024px) {
  .tab-content-sale {
    width: 100%;
    padding: 1rem 1rem;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (max-width: 1024px) {
  .shop-desc {
    display: flex;
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 1024px) {
  .descs {
    display: block;
    margin-top: 0.5rem;
  }
}

.accs {
  width: 100%;
}
.accs .list-acc {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1rem 0;
  gap: 20px;
}
@media only screen and (max-width: 1024px) {
  .accs .list-acc {
    grid-template-columns: repeat(2, 2fr);
  }
}
@media (max-width: 600px) {
  .accs .list-acc {
    grid-template-columns: repeat(1, 1fr);
  }
}
.accs .list-acc .account {
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .accs .list-acc {
    justify-content: space-between;
    width: 100%;
  }
}
@media only screen and (max-width: 1024px) {
  .accs .list-acc a {
    width: 100%;
    display: block;
    margin-right: 0.5%;
  }
}

.dev-as {
  background: #0a6aff;
}

.shopacs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem 0rem;
  width: 100%;
}
@media (max-width: 1024px) {
  .shopacs {
    grid-template-columns: repeat(1, 1fr);
    justify-content: space-between;
  }
}
.shopacs .avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.shopacs .avatar img {
  height: 5rem;
  width: 5rem;
}
@media (max-width: 1024px) {
  .shopacs .avatar img {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
  }
}
.shopacs .accouas {
  padding: 0 0;
  background: #fff;
  border-radius: 0.75rem;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.shopacs .accouas-as {
  display: block;
}
.shopacs .accouas-as h4 {
  font-size: 15px;
}
@media (max-width: 1024px) {
  .shopacs .ta-90f6 {
    padding: 0 0.5rem;
  }
}
@media (max-width: 1024px) {
  .shopacs .mbhide {
    display: none;
  }
}

@media only screen and (max-width: 1024px) {
  .sdd {
    justify-content: flex-start;
  }
}

.sdsadassas {
  background: hsla(0, 0%, 100%, 0.32);
  border: 1px solid hsla(0, 0%, 100%, 0.32);
}

.daxas {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  object-fit: contain;
}
@media only screen and (max-width: 1024px) {
  .daxas {
    height: 6rem;
  }
}

.sdga {
  position: absolute;
  left: 2rem;
  top: 1rem;
  display: none;
  align-items: center;
  font-weight: 700;
}
@media only screen and (max-width: 1024px) {
  .sdga {
    display: flex;
  }
}
.sdga i {
  margin-right: 0.3rem;
}

a {
  color: #0e1726;
}

.dsdasd .sdsd {
  width: 100%;
}

.form-auth {
  min-height: 30rem;
  background: #fff;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.form-auth .footer-bar {
  display: none;
}
.form-auth label {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.form-auth .or {
  text-align: center;
  padding: 0.5rem 0;
}
@media only screen and (max-width: 1024px) {
  .form-auth .or {
    margin: 1rem 0;
  }
}
.form-auth .social-auth {
  display: flex;
  align-content: center;
  justify-content: center;
}
.form-auth .social-auth-item {
  margin: 0 1rem;
}
.form-auth .social-auth img {
  height: 2.6rem;
  width: 2.6rem;
}
.form-auth .form-title {
  text-align: center;
  margin: 2rem 0;
}
.form-auth .form-title h5 {
  font-size: 1.2rem;
  color: #0a6aff;
  font-weight: 700;
}
.form-auth .form-title p {
  padding: 0.25rem 0;
}
.form-auth .btn-auth {
  margin-top: 1rem;
}
.form-auth form {
  width: 60%;
  padding: 2rem 3rem;
}
@media only screen and (max-width: 1024px) {
  .form-auth form {
    width: 100%;
    padding: 1rem 1rem;
  }
}
@media only screen and (max-width: 800px) {
  .form-auth form {
    width: 100%;
    padding: 1rem 0;
  }
}
.form-auth .decor {
  background-image: url("../../assets/image/bg-login.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  background-position: top center;
  position: relative;
  align-content: center;
  padding: 2rem 3rem;
  justify-content: center;
  width: 40%;
}
@media only screen and (max-width: 1024px) {
  .form-auth .decor {
    display: none;
  }
}
.form-auth .decor button {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.form-auth .decor .arrrow-auth {
  width: 100%;
  display: block;
  padding: 0.5rem 2rem;
  background: #0a6aff;
  font-weight: 700;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  margin-top: 1.5rem;
}
.form-auth .decor-top {
  padding: 2rem 0;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.form-auth .decor-top span {
  font-weight: 600;
  padding: 0.2rem 0;
}
.form-auth .decor-top div {
  line-height: 3rem;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0a6aff;
}

.audds {
  min-width: 50rem;
}
@media only screen and (max-width: 1024px) {
  .audds {
    width: 100%;
    padding: 0 0;
    min-width: 10rem;
  }
}

.dsdas {
  width: 60%;
  padding: 2rem 3rem;
}
@media only screen and (max-width: 1024px) {
  .dsdas {
    width: 100%;
    padding: 1rem 2rem;
    height: 100%;
  }
}

.arr-aw {
  text-align: center;
  margin-bottom: 2rem;
}

.arr-aw {
  padding: 1rem 0;
  font-weight: 600;
  display: none;
}
@media only screen and (max-width: 1024px) {
  .arr-aw {
    display: flex;
  }
}
.arr-aw a {
  color: #0a6aff;
  font-weight: 800;
  margin-left: 0.3rem;
}

.logo-sas {
  display: none;
  justify-content: center;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .logo-sas {
    display: flex;
  }
}

.sdad-reg {
  position: absolute;
  right: 3rem;
  top: 3rem;
}
@media only screen and (max-width: 1024px) {
  .sdad-reg {
    display: none;
  }
}

.vffeqw {
  display: flex;
}
.vffeqw .swiper {
  display: flex;
}

.accsdsa {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.accsdsa-ddd {
  width: 14%;
}
@media only screen and (max-width: 1024px) {
  .accsdsa-ddd {
    width: 48%;
  }
}

.name-game {
  font-size: 21px;
  font-weight: 700;
}

.name-games-title {
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

@media only screen and (max-width: 1024px) {
  .sdsdsd {
    width: 100%;
  }
}

.more-game {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 50%;
  background: #0a6aff;
  margin-left: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.box-game {
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  padding: 1.5rem 2rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 1024px) {
  .box-game {
    padding: 1rem 1rem;
    border-radius: 0.75rem;
  }
}

.view-all-text {
  font-size: 1rem;
  font-weight: 600;
}
.view-all-text i {
  color: #0a6aff;
  display: block;
  font-size: 1.5rem;
}

.footer {
  background: #0d56c8;
  color: #fff;
}

.footer-content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.ta-76a6 {
  color: #fff;
}
.ta-76a6:hover {
  background: #032761;
  color: #fff;
}

.pddeafult-def {
  color: #0a6aff;
}
@media only screen and (max-width: 1024px) {
  .pddeafult {
    padding: 0.5rem 1rem;
  }
}

.breadcrumb {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  font-weight: 600;
}
.breadcrumb i {
  margin: 0 1rem;
}

.accouas-as {
  padding: 2rem 0;
}
.accouas-as .username {
  text-align: center;
}

.adsaDSsa {
  padding: 1.5rem 0;
}

.dsfds {
  text-align: center;
}

.fname {
  font-size: 1.2rem;
}

.fdsfdsf {
  padding: 1rem 1rem;
  border-radius: 0.75rem;
}

.cxzc {
  margin: 1rem 0;
  color: #ffbd42;
}

.dsdsadsa {
  padding: 1rem 1rem;
  border-radius: 1rem;
}

@media only screen and (max-width: 1024px) {
  .fdsdsa {
    display: none;
  }
}

.cdfsad {
  margin-bottom: 2rem;
  width: 100%;
}
.cdfsad form-group input {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.cdfsad-head {
  width: 100%;
  height: 20rem;
  background-size: cover;
  background-image: url("../../assets/image/gaming.jpg");
  background-position: top center;
  display: flex;
  border-radius: 0.75rem;
  position: relative;
  justify-content: center;
  justify-content: center;
}
.cdfsad-head .change-icon {
  position: absolute;
  z-index: 1;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
  width: 100%;
  font-size: 15px;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 600;
}
.cdfsad-head .change-icon i {
  margin-left: 0.5rem;
  font-style: 1.2rem;
}
@media only screen and (max-width: 1024px) {
  .cdfsad-head {
    height: 10rem;
  }
}
.cdfsad-head-avt {
  position: absolute;
  bottom: -4rem;
  border: 0.2rem solid #fff;
  border-radius: 50%;
}
.cdfsad-head-avt img {
  border-radius: 50%;
  height: 8rem;
  width: 8rem;
  object-fit: cover;
}
.cdfsad-head-content {
  display: flex;
  justify-content: space-between;
  width: 60%;
}
.cdfsad-head-content-data {
  width: 60%;
}
.cdfsad-head-content-data template {
  width: 100%;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  padding: 1rem 2rem;
}

.cdfdsad-head-avt {
  height: 8rem;
  width: 8rem;
  position: absolute;
  z-index: 1111;
  bottom: -4rem;
  border: 1px solid #fff;
  border-radius: 50%;
}

.cdfsad-content {
  display: flex;
  align-items: center;
  margin-top: 7rem;
  justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
  .cdfsad-content {
    flex-wrap: wrap;
  }
}

.btn-waring {
  background: #e7515a;
}

.profie-content-data {
  display: flex;
  width: 66%;
}
.profie-content-data .ct {
  width: 100%;
}
.profie-content-data .bio {
  width: 100%;
  margin: 1rem 0;
}
.profie-content-data .bio textarea {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  width: 100%;
  border-radius: 0.75rem;
  height: 6rem;
}
@media only screen and (max-width: 1024px) {
  .profie-content-data {
    width: 100%;
  }
}
.profie-content-data .foots {
  display: flex;
  justify-items: flex-end;
}
.profie-content-data .foots button {
  background: #0a6aff;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-weight: 700;
  color: #fff;
  margin-left: auto;
}
.profie-content-data .datas {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
  .profie-content-data .datas {
    flex-wrap: wrap;
  }
}
.profie-content-data .datas input {
  padding: 0.65rem 2rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.profie-content-data .datas .form-group {
  width: 48%;
}
@media only screen and (max-width: 1024px) {
  .profie-content-data .datas .form-group {
    width: 100%;
  }
}

.fdsxcZ {
  display: flex;
  align-content: center;
}

.fdsafsad {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  width: 100%;
  padding: 0.75rem 2rem;
  border-radius: 1rem;
}

.bg-thuhd {
  background: rgba(14, 23, 38, 0.5333333333);
}

.fdsfsfsde {
  height: 7rem;
  width: 13rem;
}

.arr-sfsad {
  padding: 0.5rem 0;
  color: #0a6aff;
  font-weight: 600;
}

.fdsadsad3 {
  min-height: 100vh;
  background-color: #fff;
}
.fdsadsad3 .form-auth {
  height: 100vh;
  display: flex;
}

.fdsfs3ewa {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.dsadq {
  font-size: 3rem;
}

.dsadsa2A {
  display: flex;
  align-content: center;
  flex-direction: column;
}

.sad3sa {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .sad3sa {
    display: block;
  }
}

.cdfsadc-nav {
  width: 32%;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  background: #fff;
  color: #0e1726;
  padding: 1rem 2rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 1024px) {
  .cdfsadc-nav {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.cdfsadc-nav li {
  padding: 1rem 2rem;
}
@media only screen and (max-width: 1024px) {
  .cdfsadc-nav li {
    padding: 1rem 0;
  }
}
.cdfsadc-nav a {
  color: #0e1726;
  font-weight: 700;
}
.cdfsadc-nav a i {
  margin-right: 0.5rem;
  font-size: 15px;
}

.fdfdsf .swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.fdfdsf .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2) !important;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-account {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .auth-account .time {
    display: none;
  }
}
.auth-account-content {
  display: flex;
  align-items: center;
}
.auth-account-content span {
  margin-left: 0.5rem;
  font-size: medium;
}
.auth-account-avt {
  height: 2rem;
  width: 2rem;
}

.desc-note {
  padding: 1rem 1rem;
}
@media only screen and (max-width: 1024px) {
  .desc-note {
    padding: 1rem 0;
  }
}
@media only screen and (max-width: 500px) {
  .desc-note {
    font-weight: 600;
  }
}

.desc-notes {
  padding: 0 0.5rem;
}
.desc-notes .note {
  display: flex;
  justify-content: space-between;
}
.desc-notes .note-vl {
  font-weight: 700;
}
@media only screen and (max-width: 500px) {
  .desc-notes {
    font-weight: 600;
  }
}

.btn-primary {
  background: #0a6aff;
}

.avt-change {
  position: absolute;
  z-index: -10;
  left: -10rem;
}

.tssd {
  padding: 1rem 2rem;
}

.swiper-slide-thumb-active {
  border: 3px solid #0a6aff;
}

.dxasadxasa {
  border-radius: 0.75rem;
}
@media only screen and (max-width: 1024px) {
  .dxasadxasa {
    margin-top: 1rem;
  }
}

.account-hot {
  background: #ff6171;
}

a {
  color: #0e1726;
}

.shadoww {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 1rem;
}

.fgsdf {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.box-rc {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 1rem;
  padding: 2rem 1rem;
}

.box-comp {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 1rem;
  padding: 2rem 2rem;
}
@media only screen and (max-width: 1024px) {
  .box-comp {
    padding: 2rem 1rem;
  }
}
@media only screen and (max-width: 1024px) {
  .box-comp .view-all-text {
    margin-top: 1.5rem;
  }
}

.primary-cl {
  background: #0a6aff;
}

.sedd .dsada {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
}
.sedd .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2) !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-daes {
  width: 100%;
}

.fdsf {
  position: fixed;
  right: 0;
}

.desa ul {
  position: fixed;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  left: 0;
  bottom: 3.9rem;
  background: #fff;
  width: 100%;
  display: flex;
  z-index: 999;
  flex-wrap: wrap;
}
.desa ul .srd2 {
  width: 25%;
}

#cis {
  background: red;
}

.arrow-chatsg {
  position: fixed;
  height: 3.5rem;
  width: 3.5rem;
  z-index: 9999;
  background: #0a6aff;
  bottom: 2rem;
  border-radius: 50%;
  right: 1.5rem;
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .arrow-chatsg {
    display: none;
  }
}

.bg-succas {
  background: #13e99a;
}

.swiper-shop {
  display: flex;
  justify-content: space-between;
}

.containersas {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.chats {
  padding: 0 0.5rem;
  height: 9rem;
  width: 4rem;
  background: #0a6aff;
  position: fixed;
  right: 3rem;
  border-radius: 1rem;
  bottom: 3rem;
  text-align: center;
  overflow: hidden;
  z-index: 100;
}
.chats-text {
  font-size: 12px;
  font-weight: 600;
}
@media only screen and (max-width: 600px) {
  .chats-text {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .chats {
    bottom: 6rem;
    right: 2rem;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.chats .fs {
  border-bottom: 1px solid #fff;
}
@media only screen and (max-width: 600px) {
  .chats .fs {
    display: none;
  }
}
.chats-content {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  flex-direction: column;
  color: #fff;
}
.chats-content-ic {
  padding: 0.5rem;
  font-size: 1.5rem;
}

.clos {
  position: fixed;
  height: 80vh;
  width: 100%;
  background: hsla(0, 0%, 18%, 0.641);
  top: 0;
  left: 0;
  z-index: -100;
}

.promotions {
  background: #0a6aff;
  padding: 0.75rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

.master {
  z-index: 999999;
}

.bg-master {
  background: #e6eeff;
}
@media only screen and (max-width: 1024px) {
  .bg-master {
    background: transparent;
  }
}

.accimg {
  height: 11rem;
}
@media only screen and (max-width: 1024px) {
  .accimg {
    height: 11rem;
  }
}

@media only screen and (max-width: 1024px) {
  .panel-payment {
    margin-bottom: 2rem;
  }
}

@media only screen and (max-width: 1024px) {
  .se-mobile {
    font-size: 11px;
  }
}
.se-mobile .badge {
  font-size: 11px;
}

.badge-testx {
  padding: 1rem 0;
  background: #0a6aff;
}
.badge-testx .text-left {
  padding: 1rem 1rem;
  background: #0a6aff;
  border-radius: 0.5rem;
  color: white;
  line-height: 1.7rem;
  margin-top: 1rem;
  font-weight: 500;
}

.btn-login {
  background: #0a6aff;
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 700;
  transition: 0.3s linear;
  border-radius: 0.5rem;
  margin-left: 1rem;
}

.ta-cc21 .mobile-nav .menu-mb {
  color: var(--bs-dark) !important;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.ta-cc21 .mobile-nav {
  width: 22%;
  text-align: center;
}

.ta-cc21 .mobile-navc {
  width: 8%;
  text-align: center;
}

.ta-cc21 .mobile-nav .menu-v {
  color: var(--bs-dark) !important;
  width: 100%;
}

.bottom-navication {
  justify-content: space-between;
}

.menu-vip {
  background: #0a6aff;
  color: #fff;
  height: 3.9rem;
  width: 3.9rem;
  position: absolute;
  min-width: 50%;
  top: -3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid #fff;
  z-index: 9999;
  border-radius: 50%;
  left: -4rem;
}

.coin-sg {
  height: 1.4rem;
  width: 1.4rem;
  margin-right: 0.5rem;
}

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

#text-active {
  color: #0a6aff;
}

#icon-active {
  color: #0a6aff;
}

.btn-backk {
  background: flex;
  align-items: center;
  color: #0a6aff;
  font-weight: 600;
  cursor: pointer;
}
.btn-backk span {
  margin-left: 0.5rem;
}

.bg-chat {
  background: rgb(235, 237, 255);
  background: linear-gradient(
    18deg,
    rgb(235, 237, 255) 0%,
    rgb(255, 255, 255) 80%,
    rgb(71, 130, 255) 100%
  );
}

.input-chat {
  border: 1px solid #fff;
}

#message-inputss {
  background: #fff;
  width: 100%;
  padding: 1rem 2rem;
  left: 0;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

#message-inputsss {
  background: #fff;
  width: 100%;
  padding: 1rem 3rem;
  left: 0;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.chat-conversation-box {
  padding-bottom: 5rem;
}

.chat-send {
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
  left: 0;
  width: 100%;
  bottom: 0;
}

#goBackBtn {
  display: none;
}

.texses {
  font-weight: 600;
}

.custom-logo img {
  height: 40px;
  width: 180px;
}

.position-load {
  z-index: 99999;
}

.auth-page {
  background: #f9fcff;
  background-position: center;
  background-image: url("https://socialmedia.vn/assets/svg/bg.svg");
}
.text-title {
  font-weight: 600;
  text-align: center;
}

.form-title {
  text-align: center;
}

.form-title h5 {
  font-size: 1.2rem;
  color: #0a6aff;
  font-weight: 700;
}

.accounts-code {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  background: rgba(9, 108, 255, 0.7882352941);
  color: #fff;
  padding: 0.2rem;
  font-size: 12px;
  border-radius: 0.5rem;
  font-weight: 600;
  z-index: 1;
}

.account-default {
  min-height: 400px;
  position: relative;
}
@media only screen and (max-width: 1024px) {
  .account-default {
    min-height: 460px;
  }
}
.account-default .account-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-top: 1rem;
}

.feautues {
  margin: 4rem 0;
}
.feautues .menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 3rem;
}
@media only screen and (max-width: 1024px) {
  .feautues .menu {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 600px) {
  .feautues .menu {
    grid-template-columns: repeat(1, 1fr);
  }
}
.feautues .menu .item {
  position: relative;
  background: url("../image/footer_frame.png") no-repeat;
  background-size: 100% 100%;
  height: 135px;
}
@media only screen and (max-width: 1024px) {
  .feautues .menu .item {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 600px) {
  .feautues .menu .item {
    margin-bottom: 2rem;
  }
}
.feautues .menu .image {
  position: absolute;
  top: -30px;
  right: 30px;
  background-color: #0d56c8;
  border: 2px solid #103d82;
  width: 60px;
  height: 60px;
  border-radius: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feautues .menu .image img {
  height: 100%;
}
.feautues .menu .text {
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  padding: 0 15px;
  color: #fff;
}
.feautues .menu .title {
  font-weight: 700;
  color: #fff;
  font-size: 17px;
  font-style: italic;
  margin-bottom: 8px;
  margin-top: 20px;
  padding: 0 25px;
}

.marquee .wrapper {
  width: 450px;
  height: 50px;
  position: relative;
  margin: auto;
  background: #ccc;
  overflow: hidden;
}
.marquee .wrapper::after {
  width: 448px;
  height: 48px;
  content: "";
  position: absolute;
  border: solid 1px white;
}
.marquee .box {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  color: var(--color-just-black);
}
.marquee .boxes {
  position: relative;
  left: -50px;
}
.marquee .nav {
  position: relative;
  text-align: center;
}

.b--marque-a {
  display: flex;
  overflow: hidden;
  width: 100%;
  column-gap: 0rem;
  text-decoration: none;
}
.b--marque-a__content {
  display: flex;
  min-width: 100%;
  flex: 0 0 auto;
  column-gap: 0rem;
  justify-content: space-around;
  text-decoration: none;
}

.marquee-text-wrap {
  overflow: hidden;
}
.marquee-text-wrap .marquee-text-content {
  width: 100000px;
}
.marquee-text-wrap img {
  height: 25px;
}
.marquee-text-wrap .ta-7bd5 {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  margin: 0 0.7rem;
  padding: 0.4rem 0.5rem;
}
.marquee-text-wrap .marquee-text-text {
  -webkit-animation-name: marquee-text-animation;
  animation-name: marquee-text-animation;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
}
.marquee-text-wrap .marquee-text-text:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@keyframes marquee-text-animation {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
.hide-pc {
  display: none !important;
}
@media only screen and (max-width: 1024px) {
  .hide-pc {
    display: flex !important;
  }
}

.banner {
  width: 100%;
  max-height: 35rem;
}
.banner img {
  width: 100%;
  max-height: 35rem;
  min-height: 12rem;
  object-fit: cover;
}

.swiper-pagination-custom {
  bottom: -2rem;
}

.swiper-pagination-bullet-active {
  width: 1rem;
  border-radius: 0.5rem;
}

.profile-bio {
  border-radius: 1rem;
  padding: 1rem 1rem;
}
@media only screen and (max-width: 1024px) {
  .profile-bio {
    text-align: center;
  }
}

.devsa img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/*# sourceMappingURL=new.css.map */