@import url(https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);
.h-des-search ul li{float:left;list-style:none;width:33.333%;position:relative}
.h-des-search ul li div{width:24px;height:26px;overflow:hidden;margin-right:6px}
.h-des-search ul li:nth-child(2) img{-webkit-transform:translateY(1px)}

.number-heart {width:40px;height:24px;display:inline-block;overflow:hidden;color:#d86666;}
.number-heart img{width:24px;margin-right:4px;-webkit-transform:translateY(0px);float:left}
.btn-more-search:hover{text-decoration:underline;}
.btn-padding {
    padding: 12px 0px;
}

/* Style from Tungld */
#navWrap .search-result .pc24 > p,#navWrap .search-result .pc24 > a, 
#navWrap-no-ads .search-result .pc24 > p,#navWrap-no-ads .search-result .pc24 > a {
    background: #f1f1f19c;
    padding: 10px;
    min-height: 73px;
    max-height: 120px;
    overflow: hidden;
    position:relative;
    border-radius: 5px;
    display:block
}
#navWrap .search-result .pc24 > p::after,#navWrap .search-result .pc24 > a::after,
#navWrap-no-ads .search-result .pc24 > p::after,#navWrap-no-ads .search-result .pc24 > a::after {
    content:"";
    height: 30px;
    width: 100%;
    background-image: linear-gradient(#ffffff29,#ffffff 99%);
    position: absolute;
    bottom:0;
    left:0;
}
#navWrap .search-result .pc24 > div.pt24, #navWrap-no-ads .search-result .pc24 > div.pt24 {
    padding-top:0;
}
.img-search-wrapper{height: 500px;}

.lgh_debai, .lgh_loigiai{
    font-weight: 600;
    text-decoration: underline;
    margin: 10px 0;
    font-size: 18px;
}
/* End style Tungld */

@media screen and (max-width: 960px){.btn-more-search{padding:6px 8px;box-shadow:0px 0px 2px 1px #2626262b;border-radius:5px;}}
@media screen and (max-width: 640px){.h-des-search ul li{width:50%;} .img-search-wrapper{height: 400px;}}
@media screen and (max-width: 420px){.h-des-search ul li:nth-child(3){width:100%;} .form-vote{width:100%;margin-top:24px;} .img-search-wrapper{height: 250px;}}

.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-book-img {
  width: 100%;
  /* height: 190px; */
  aspect-ratio: 3/4;
}

.item-book-img .icon-edit {
  display: none;
}

.item-book-img:hover .icon-edit {
  display: block;
}

@media screen and (max-width: 768px) {
  .item-book-img {
    width: 100%;
    /* height: 145px; */
    aspect-ratio: 3/4;
  }
}

.div-body {
  background-color: #fff4e9;
  border-radius: 12;
  box-shadow: 4px 4px 10px #999;
  padding: 0 22px;
}

.div-img-show {
  /* background-color: #ccc; */
  display: inline-block;
  border-radius: 15px;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 5px 5px 10px #ccc;
  width: 145px;
  height: 205px;
}

.btn-add-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.opt-ask.modal-opt-ask a {
  padding: 1px;
  width: 13px;
  height: 13px;
}

.icon-close-img {
  border: 1px solid red;
  color: red;
  background-color: #fff;
  border-radius: 45px;
  padding: 1px 4px;
  padding: 0 7px;
  position: absolute;
  top: -4px;
  right: -4px;
  font-weight: 600;
}

.icon-close-img:hover {
  color: #fff;
  background-color: red;
  font-weight: 600;
}

.icon-report {
  color: #4298e0;
  font-weight: 600;
}

.review-images {
  width: 100px;
  height: 135px;
  margin-right: 12px;
}

.btn-show-more {
  padding: 6px 24px;
  background-color: #fff;
  color: #458ea7;
  text-align: center;
  margin-bottom: 22px;
  cursor: pointer;
  border-radius: 5px;
}

.btn-show-more:hover {
  background-color: #ffe0c0;
}

.div-head-star {
  font-size: 18px;
}

.book-heart {
  font-weight: 600 !important;
}

.thank-button {
  background-image: url("/static/img/icon-heart3.png");
  background-repeat: no-repeat;
  background-size: 18px;
  padding-left: 22px !important;
  color: #d86666 !important;
  background-position-y: 2px;
}

.thank-button:hover {
  background-image: url("/static/img/redhead.png");
}

.thank-button.active {
  background-image: url("/static/img/redhead.png");
}

@media screen and (max-width: 480px) {
  .div-body {
    padding: 0 8px;
  }
}

@media screen and (max-width: 508px) {
  .div-head-star {
    font-size: 14px;
  }
  .review-images {
    width: 54px;
    height: 76px;
    margin-right: 6px;
  }

  .div-list-image-url {
    margin-top: 20px;
    width: 100%;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 960px) {
  .div-body {
    width: 96% !important;
  }
}

.essay img {
  height: auto !important;
}

.item-essay {
  border: 2px dotted #458ea7;
  border-radius: 18px;
  padding: 8px;
  margin-bottom: 24px;
  position: relative;
}

.item-essay-content {
  margin-top: 8px;
}

.task-item-essay {
  font-weight: 600;
  background-color: #4f97b0;
  position: absolute;
  right: -4px;
  top: -15px;
  width: 48px;
  height: 48px;
  padding-top: 12px;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
  font-size: 18px;
  border-radius: 45px;
}

.icon-heart-essay {
  width: 16px;
  -webkit-transform: translateY(4px);
  transition: -webkit-transform 0.5s ease;
}

.heart-essay {
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 8px;
  cursor: pointer;
}

.text-heart-essay {
  font-weight: 600;
  color: #d86666;
  user-select: none;
}

.heart-essay:hover {
  background-color: #e78888;
}

.heart-essay:hover .icon-heart-essay {
  -webkit-transform: translateY(-16px);
}

.heart-essay:hover .text-heart-essay {
  color: #fff;
}

.heart-essay.action {
  background-color: #d86666;
}

.heart-essay.action .icon-heart-essay {
  -webkit-transform: translateY(-16px);
}

.heart-essay.action .text-heart-essay {
  color: #fff;
}

.list-essay-show-more {
  position: absolute;
  bottom: -10px;
  width: 100%;
  background-color: #fff;
  mask-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  cursor: pointer;
}

.avatar-user-essay {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
  margin-right: 16px;
}

.btn-submit-content {
  position: absolute;
  bottom: 8px;
  right: 6px;
  padding: 5px;
  background-color: #eee;
  border-radius: 6px;
}

.btn-submit-content:hover {
  background-color: #ccc;
}

textarea.textarea-essay {
  font-size: 16px;
  padding: 8px 42px 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

textarea.textarea-essay:focus {
  border: 1px solid #666;
  outline: none;
}

.user-avatar-comment {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.content-comment {
  padding: 6px 12px;
  border-radius: 4px;
}

.content-comment.le {
  background-color: #e3efcc;
}

.content-comment.chan {
  background-color: #cce0ef;
}

.username-content-comment {
  font-weight: 600;
  margin-right: 12px;
  cursor: pointer;
}

.date-content-comment {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
}

.icon-empale {
  width: 12px;
  height: 18px;
  overflow: hidden;
  margin-right: 4px;
}

.icon-empale img {
  max-width: 100%;
  -webkit-transform: translateY(-2px);
}

.avatar-user-essay-comm {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
  margin-right: 16px;
}

.btn-submit-content-comm {
  position: absolute;
  bottom: 4px;
  right: 10px;
  padding: 5px;
  background-color: #eee;
  border-radius: 6px;
}

.btn-submit-content-comm:hover {
  background-color: #ccc;
}

.related-articles-essay {
  display: flex;
  flex-wrap: wrap;
}

.related-item {
  border-radius: 4px;
  width: 50%;
  padding: 4px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.related-item-contain {
  display: flex;
  border-radius: 4px;
  width: 100%;
  padding: 8px;
  cursor: pointer;
  box-sizing: border-box;
}

.related-item-contain:hover {
  box-shadow: 3px 3px 12px #ccc;
}

.related-item img {
  width: 40%;
  object-fit: contain;
  object-position: top;
  margin-right: 8px;
}

.related-item-title {
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-item-content {
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.essay table tr td {
  padding: 8px;
}

@media screen and (max-width: 768px) {
  .related-item {
    width: 100%;
    margin-right: 0;
  }
}

.btn-pagination {
  margin: 0 3px;
  padding: 5px 9px;
  font-size: 14px;
  border: 0;
  border-radius: 4px;
}

.btn-pagination.action {
  border: 1px solid #1677ff;
  color: #1677ff;
}

.btn-pagination:hover {
  background-color: #fff;
}

#phongTruyenThong {
  background-color: transparent !important;
  padding-bottom: 50px !important;
}

@font-face {
  font-family: "Iciel Nabila";
  src: url('/static/font/nabila_1-webfont.woff2') format('woff2')
       url('/static/font/nabila_1-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 1;
    transform: scale(1.09);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dnone {
  0% {
    display: block;
  }

  100% {
    display: none;
    top: -100%;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes loading {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

@keyframes light {
  0% {
    transform: rotate(45deg) translate(-140px, 0);
  }

  100% {
    transform: rotate(45deg) translate(140px, 0);
  }
}

@keyframes starRotate {
  0% {
    transform: scale(0) rotate(0deg);
  }

  50% {
    transform: scale(1) rotate(90deg);
  }

  100% {
    transform: scale(0) rotate(180deg);
  }
}

@keyframes light2 {
  0% {
    transform: rotate(45deg) translate(-140px, 0);
  }

  100% {
    transform: rotate(45deg) translate(140px, 0);
  }
}

@keyframes starRotate2 {
  0% {
    transform: scale(0) rotate(0deg);
  }

  50% {
    transform: scale(1) rotate(90deg);
  }

  100% {
    transform: scale(0) rotate(180deg);
  }
}

@keyframes rotateInfinity {
  0% {
    transform: scale(2) rotate(0deg);
  }

  100% {
    transform: scale(1.6) rotate(360deg);
  }
}

#phongTruyenThong .img {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

#phongTruyenThong .curtain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 50;
  animation: fadeout 1s 3s forwards, dnone 0.1s forwards 4s;
}

#phongTruyenThong .curtain .gridCurtan {
  width: 100%;
  max-width: 828px;
  margin: 0 auto;
  padding: 0 12px;
}

#phongTruyenThong .curtain .gridCurtan .titleHeader {
  opacity: 0;
  animation: loading 2s linear;
  animation-iteration-count: 2;
}

#phongTruyenThong .curtain .gridCurtan .titleHeader img {
  width: 194px;
}

#phongTruyenThong .wrapBtnNext {
  text-align: right;
}

#phongTruyenThong .wrapBtnNext button {
  background: #e5e5e5;
  border: 1px solid #e1e1e1;
  padding: 4px 10px;
  color: #458ea7;
  border-radius: 4px;
  transition: all 0.4s;
}

#phongTruyenThong .wrapBtnNext button:hover {
  cursor: pointer;
  transform: scale(1.08);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#phongTruyenThong .animationNew .light {
  width: 50px;
  height: calc(100% + 100px);
  background: linear-gradient(to right, transparent 0%, #fff 25%, transparent 25%, #fff 50% 50%, transparent 100%);
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -37px;
  margin-left: -15px;
  transform: rotate(45deg) translate(140px, 0);
  animation: light2 1.4s 3.6s forwards ease-out;
}

#phongTruyenThong .animationNew .star {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0%;
  top: 0%;
  background: no-repeat 100%/contain url(/static/img/achievement/starLight.png);
  animation: starRotate2 1s 4.4s forwards;
  transform: scale(0);
}

#phongTruyenThong .wrap-achievement .titleHeader {
  text-align: center;
  margin-bottom: 24px;
}

#phongTruyenThong .wrap-achievement .titleHeader h1 {
  font-size: 30px;
}

#phongTruyenThong .wrap-achievement .titleHeader img {
  width: 194px;
}

#phongTruyenThong .wrap-achievement .title {
  margin-bottom: 12px;
  text-align: center;
  font-size: 20px;
}

#phongTruyenThong .wrap-achievement .content .intro {
  margin-bottom: 36px;
}

#phongTruyenThong .wrap-achievement .content .intro p {
  text-align: center;
}

#phongTruyenThong .wrap-achievement .content .list-icon-cup {
  text-align: center;
}

#phongTruyenThong .wrap-achievement .content .list-icon-cup img {
  margin: 10px;
  width: 85px;
}

#phongTruyenThong .wrap-achievement .content .list-icon-cup img.disable {
  opacity: 0.5;
}

#phongTruyenThong .wrap-achievement .content .list-special-rank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid #e0e0e0;
  margin-bottom: 30px;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item {
  text-align: center;
  border-radius: 5px;
  width: calc(50% - 40px);
  padding: 20px;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item:hover .animationNew .light {
  animation: light 1.4s forwards ease-out;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item:hover .animationNew .star {
  animation: starRotate 1s 1s forwards;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .medal {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  vertical-align: middle;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .personName {
  margin-top: 10px;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .personName a {
  color: #d25d80;
}

#phongTruyenThong .wrap-achievement .content .aboutMedal {
  font-style: italic;
  text-align: center;
  margin-bottom: 10px;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc {
  border: 1px solid #e0e0e0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 20px;
  column-gap: 12px;
  padding: 12px;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .ItemDanhHieuMonHoc {
  text-align: center;
  position: relative;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .ItemDanhHieuMonHoc img {
  width: 110px;
  height: 110px;
  position: relative;
  z-index: 2;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .ItemDanhHieuMonHoc .scholar {
  position: relative;
  z-index: 2;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .ItemDanhHieuMonHoc .scholar:hover {
  cursor: pointer;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .ItemDanhHieuMonHoc .topSubject {
  color: #ee8790;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .ItemDanhHieuMonHoc .topSubject:hover {
  color: #1a73e8;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .avatarPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.6s;
  z-index: 50;
  background: #ffffffc9;
  animation: fadeIn 0.6s forwards;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .avatarPopup .aboutScholar {
  width: 100%;
  max-width: 400px;
  margin: 0px 12px;
  background: #f5ecd5;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 0px 23px 5px #28282840;
  opacity: 0;
  animation: zoomIn 0.4s 0.2s ease forwards;
  text-align: center;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .avatarPopup .aboutScholar h4,
#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .avatarPopup .aboutScholar p {
  display: block;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .avatarPopup .aboutScholar img {
  width: 110px;
  height: 110px;
}

#phongTruyenThong .wrap-achievement .content .danhHieuMonHoc .avatarPopup.active {
  display: flex;
}

#phongTruyenThong .wrap-achievement .content .thanks {
  text-align: center;
  margin-top: 60px;
  font-size: 20px;
  font-family: "Dancing Script", cursive;
}

#phongTruyenThong .wrap-achievement .content .thanks::before {
  content: "";
  width: 100%;
  height: 100px;
  background: no-repeat bottom center url(/static/img/achievement/hoaNguyetQue.png);
  background-size: 50%;
  display: block;
}

#phongTruyenThong .wrap-achievement .specialUser {
  margin-bottom: 30px;
}

#phongTruyenThong .wrap-achievement .specialUser .timeLineCup {
  display: flex;
  flex-direction: column;
  background-color: #f5ecd5;
  border-radius: 10px;
  overflow: hidden;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container {
  padding: 20px;
  width: 70%;
  background-color: #f0dfb4;
  position: relative;
  transition: all 400ms ease-in-out;
  box-sizing: border-box;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container:hover .circle-date {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container:hover .circle-date .starLight {
  z-index: 2;
  opacity: 0.5;
  transform: scale(2);
  animation: rotateInfinity 3s forwards infinite linear;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container.left {
  padding: 20px;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container.left .circle-date {
  right: -165px;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container.right {
  padding: 20px;
  margin-left: auto;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container.right .circle-date {
  left: -165px;
}

#phongTruyenThong .wrap-achievement .specialUser .event-description {
  background-color: #f5ecd5;
  padding: 20px;
  color: dimgray;
  box-shadow: 0px 8px 15px -9px #00000029;
  transition: all 0.6s;
  border-radius: 10px;
}

#phongTruyenThong .wrap-achievement .specialUser .event-description:hover {
  box-shadow: 0px 0px 0px -9px #000;
  transform: scale(0.98);
}

#phongTruyenThong .wrap-achievement .specialUser .event-description .listUser {
  margin-top: 6px;
}

#phongTruyenThong .wrap-achievement .specialUser .event-description .listUser a {
  font-weight: bold;
  background: #d25d80;
  padding: 0 10px;
  margin-right: 10px;
  border-radius: 99px;
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 10px;
  transition: all 0.4s;
}

#phongTruyenThong .wrap-achievement .specialUser .event-description .listUser a:hover {
  transform: scale(1.03);
}

#phongTruyenThong .wrap-achievement .specialUser .event-description h2 {
  margin-bottom: 15px;
  color: darkslategray;
  font-size: 15px;
}

#phongTruyenThong .wrap-achievement .specialUser .event-description p {
  font-size: 15px;
}

#phongTruyenThong .wrap-achievement .specialUser .border {
  width: 4px;
  height: 100%;
  position: absolute;
  background-color: #a19883;
  top: 0;
  right: -2px;
}

#phongTruyenThong .wrap-achievement .specialUser .single-event-container.right .border {
  left: -2px;
}

#phongTruyenThong .wrap-achievement .specialUser .circle-date {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #fde1eb2e;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
  transition: all 1s;
}

#phongTruyenThong .wrap-achievement .specialUser .circle-date .starLight {
  position: absolute;
  z-index: 2;
  transform: scale(1);
  top: 0;
  left: 0;
  transition: all 1s;
  opacity: 0;
}

@media all and (max-width: 800px) {
  #phongTruyenThong .wrap-achievement .specialUser .single-event-container {
    margin: 0;
    width: 100%;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.left,
  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.right {
    padding: 20px 20px 20px 120px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container .border,
  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.right .border {
    left: 55px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container .circle-date,
  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.right .circle-date {
    left: 12px;
  }
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background: #ffffffc9;
  animation: fadeIn 0.6s forwards;
  width: 100%;
  height: 100%;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser {
  width: 100%;
  max-width: 470px;
  margin: 0px 12px;
  background: #d25d80;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 0px 23px 5px #28282840;
  animation: zoomIn 0.4s 0.2s ease forwards;
  opacity: 0;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser .avatarUser {
  height: 120px;
  width: 120px;
  display: block;
  margin: 0 auto;
  border-radius: 99px;
  overflow: hidden;
  border: 4px solid #a84966;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser .avatarUser img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser .info {
  max-height: 350px;
  overflow-y: auto;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser .info div {
  margin-bottom: 10px;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser .info div:last-child {
  margin-bottom: 0;
}

#phongTruyenThong .wrap-achievement .specialUser .userInfoPopup.active {
  display: flex;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .personName:hover {
  cursor: pointer;
}

#phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .personName:hover a {
  color: #1a73e8;
}

#phongTruyenThong .fbChat {
  border-radius: 10px;
  background: wheat;
  margin-top: 60px;
  font-size: 15px;
  padding: 20px;
}

@media all and (max-width: 800px) {
  #phongTruyenThong .pt52 {
    padding-top: 30px !important;
  }

  #phongTruyenThong .mt24 {
    margin-top: 0 !important;
  }
}

@media all and (max-width: 640px) {
  #phongTruyenThong .wrap-achievement .content .danhHieuMonHoc {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width: 425px) {
  #phongTruyenThong .wrap-achievement .content .special-rank-user-detail .info-rank img {
    height: 50px;
    width: 50px;
  }

  #phongTruyenThong .wrap-achievement .content .list-icon-cup img {
    width: 50px;
  }

  #phongTruyenThong .wrap-achievement .content .list-user .user-item .icon-achiment {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #phongTruyenThong .wrap-achievement .content .list-user .user-item .icon-achiment img {
    width: 50px;
  }

  #phongTruyenThong .wrap-achievement .content .list-special-rank .special-rank-item {
    width: calc(100% - 40px);
    padding: 12px;
  }

  #phongTruyenThong .wrap-achievement .content .wrap-achievement .content .intro {
    font-size: 15px;
  }

  #phongTruyenThong .wrap-achievement .titleHeader {
    font-size: 22px;
    line-height: 28px;
  }

  #phongTruyenThong .wrap-achievement .content .list-special-rank {
    border: none;
    margin-bottom: 20px;
  }

  #phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .personName {
    margin-top: 0;
    padding: 5px 10px;
  }

  #phongTruyenThong .wrap-achievement .content .danhHieuTieuBieu .special-rank-item .medal {
    height: 100px;
    width: 100px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .circle-date {
    width: 65px;
    height: 65px;
    margin-top: -32px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container .border,
  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.right .border {
    left: 43px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.left,
  #phongTruyenThong .wrap-achievement .specialUser .single-event-container.right {
    padding: 10px 10px 10px 95px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .event-description {
    padding: 12px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container:first-child {
    padding-top: 20px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .single-event-container:last-child {
    padding-bottom: 20px;
  }

  #phongTruyenThong .wrap-achievement .content .danhHieuMonHoc {
    grid-template-columns: repeat(2, 1fr);
  }

  #phongTruyenThong .wrap-achievement .specialUser .event-description h2 {
    margin-bottom: 7px;
    font-size: 14px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .event-description p {
    font-size: 14px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .event-description .listUser a {
    font-size: 14px;
  }

  #phongTruyenThong .wrap-achievement .content .thanks {
    margin-top: 0px;
  }

  #phongTruyenThong .wrap-achievement .specialUser .userInfoPopup .contentUser .info {
    max-height: 250px;
    overflow-y: auto;
  }

  #phongTruyenThong .fbChat {
    border-radius: 10px;
    padding: 5px;
    background: wheat;
    margin-top: 30px;
    font-size: 15px;
  }
}

.guestbookFilterDropdown {
  background-color: #fff;
  position: absolute;
  z-index: 10;
  border-radius: 4px;
  left: 10px;
  padding: 12px;
  box-shadow: 1px 1px 4px #00000029;
}

.guestbookEmotionDropdown {
  background-color: #fff;
  position: absolute;
  z-index: 10;
  border-radius: 4px;
  box-shadow: 1px 1px 4px #00000029;
  display: flex;
  flex-wrap: wrap;
}

textarea {
  resize: none;
}

.guestbookContent::placeholder {
  color: #1d535f
}

.pagination {
  display: flex;
  flex-direction: row;
  margin-top: 26px;
  justify-content: center;
  list-style: none;
}

.page-link {
  color: #1d535f;
  font-size: 12px;
}

.page-item {
  margin: 0px 8px;
}

body {
  overflow-x: hidden;
}

.guestbook {
  background-image: url(/static/img/achievement/bg.png);
  background-size: cover;
  align-items: center;
  flex-direction: column;
  background-attachment: fixed;
  display: flex;
}

.podcast {
  background-image: url(/static/img/achievement/podcast/bg.png);
}

.des-podcast {
  white-space: initial;
}

.guestbook .active {
  background-color: #acacac;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 12px;
  color: #fff;
}

.audio-player {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
}

.background {
  width: 100%;
  height: auto;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 62px;
  display: flex;
  gap: 10px;
}

.controls .pause-bt {
  width: 45px;
}

.controls .play-bt {
  width: 45px;
}

.cmt-user {
  position: relative;
}
.cmt-user::before {
  width: 0px;
  height: 0px;
  border-left: 10px solid #0f47eb00;
  border-right: 10px solid #e3efce;
  border-top: 13px solid #e3efce;
  border-bottom: 13px solid #f000;
  position: absolute;
  left: -15px;
  top: 14px;
  content: "";
}

.cmtContainerP .cmtBoxP .form-textarea {
  position: relative;
}
.cmtContainerP .cmtBoxP .form-textarea::before {
  width: 0px;
  height: 0px;
  border-left: 10px solid #0f47eb00;
  border-right: 10px solid #e8f3f6;
  border-top: 13px solid #e8f3f6;
  border-bottom: 13px solid #f000;
  position: absolute;
  left: -15px;
  top: 14px;
  content: "";
}

.cmtContainerP .cmtBoxP #bg-change {
  background: #e8f3f6 !important;
}

.cmtContainerP .cmtBoxP #bg-change::before {
  width: 0px;
  height: 0px;
  border-left: 10px solid #0f47eb00;
  border-right: 10px solid #e8f3f6;
  border-top: 13px solid #e8f3f6;
  border-bottom: 13px solid #f000;
  position: absolute;
  left: -15px;
  top: 14px;
  content: "";
}

.like-button, .play-pause-button {
  background-color: white;
  border: none;
  padding: 10px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  bottom: 75px;
  left: 20px;
  right: 20px;
  height: 7px;
  background-color: #e1e1e1;
  border-radius: 5px;
  overflow: hidden;
  width: 76%;
  justify-self: center;
  cursor: pointer;
}

.progress {
  height: 100%;
  background-color: purple;
}

.cmtContainerP {
  padding: 10px;
  width: 50%;
  border-radius: 5px;
  background: #ffffff;
  margin-top: 30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.guestbook .title {
  font-family: UTM_Guanine;
  color: #1d535f;
  margin-top: 22px
}

.guestbook .description .highlighT {
  color: #1f535e;
  font-weight: bold;
}

.guestbook .headerImage {
  width: 27%
}

.guestbook .description {
  width: 50%;
  margin-top: 12px;
  color: #262626 !important;
}

.guestbook .menuContainer {
  width: 50%
}

.guestbook .menuButton {
  height: 32px;
  width: 112px
}

.guestbook .menuButtonContainer {
  margin: 0px 10px;
  height: 30px;
  width: 110px
}

.guestbook .item {
  width: 50%;
  height: 120px
}

.guestbook .avatarContainer {
  height: 50px;
  width: 50px
}

.guestbook .avatar {
  height: 52px;
  width: 52px
}

.guestbook .fullname {
  width: 62px;
  font-size: 10px;
}

.guestbook .userInfo {
  align-items: center;
}

.guestbook .fullPost {
  width: 50%;
}

.guestbook .footerImage {
  width: 35%;
}

.guestbook .postContentContainer {
  width: 50%;
}

.guestbook .postBgImageMobi {
  display: none;
}

.guestbook .postBgImagePC {
  width: 100%;
  display: block;
}

.guestbook .postTitle {
  margin-top: 5%;
}

@media all and (max-width:768px) {
  .guestbook .title {
    font-family: UTM_Guanine;
    color: #1d535f;
    margin-top: 22px;
    font-size: 13px;
  }

  .guestbook .headerImage {
    width: 50%
  }

  .guestbook .description {
    width: 90%;
    margin-top: 12px;
    color: #262626 !important;
  }

  .guestbook .menuContainer {
    width: 90%
  }

  .guestbook .menuButtonContainer {
    margin: 0px;
    height: 30px;
    width: 110px
  }

  .guestbook .menuButton {
    height: 32px;
    width: 112px
  }

  .guestbook .item {
    width: 90%;
    flex-direction: column;
    height: 230px
  }

  .guestbook .avatarContainer {
    height: 30px;
    width: 30px
  }

  .guestbook .avatar {
    height: 32px;
    width: 32px
  }

  .guestbook .fullname {
    width: 42px;
    font-size: 8px;
  }

  .guestbook .userInfo {
    align-items: center;
    align-self: flex-start;
  }

  .guestbook .fullPost {
    width: 80%;
  }

  .guestbook .footerImage {
    width: 75%;
  }

  .guestbook .postContentContainer {
    width: 90%;
  }

  .guestbook .postBgImagePC {
    display: none;
  }

  .guestbook .postBgImageMobi {
    width: 100%;
    display: block;
  }

  .guestbook .postTitle {
    font-size: 10px;
    margin: 0px 10px;
    margin-top: 8%;
  }
  .cmtContainerP {
    width: 90%;
  }
}

@media all and (max-width:550px) {
  .audio-player .icon-like {
    width: 20px !important;
  }
  .audio-player .text-like {
    font-size: 11px !important;
  }
  .audio-player .icon-control {
    width: 33px;
  }
  .controls {
    bottom: 3px;
  }
  .like-button {
    margin-right: 80px !important;
  }
  .progress-bar {
    bottom: 60px;
  }
  .cmtContainerP .cmtBoxP .my-avatar {
    display: none;
  }
  .cmtContainerP .cmtBoxP .form-textarea {
    width: 100%;
    margin-left: 0 !important;
  }
}

@media all and (max-width:450px) {
  .audio-player .icon-like {
    width: 15px !important;
  }
  .audio-player .text-like {
    font-size: 10px !important;
  }

  .audio-player .icon-control {
    width: 30px;
  }
  .controls {
    left: 12%;
  }
  .like-button {
    padding: 0;
  }
  .progress-bar {
    bottom: 54px;
  }

  .guestbook {
    padding-top: 70px !important;
  }

  .tab-guestbook {
    display: block !important;
    width: 200px;
  }

  .tab-guestbook .item-tab-guestbook {
    justify-content: center;
  }

  .guestbook .title {
    text-align: center;
    line-height: 30px;
  }

  @supports (-webkit-touch-callout: none) {
    .progress-bar {
      left: 46px;
    }
  }
}

@media all and (max-width:425px) {
  .guestbook .headerImage {
    width: 90%
  }

  .guestbook .fullPost {
    width: 90%;
  }

  .guestbook .footerImage {
    width: 90%;
  }
}

@media all and (max-width:375px) {
  .audio-player .icon-like {
    width: 15px !important;
  }
  .audio-player .text-like {
    font-size: 10px !important;
  }

  .audio-player .icon-control {
    width: 30px;
  }
  .controls {
    left: 12%;
  }
  .like-button {
    margin-right: 66px !important;
  }
  .text-like {
    margin-top: 0 !important;
  }
  .progress-bar {
    bottom: 48px;
  }
}

/* ul {
  list-style: none;
} */
.class-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.class-list .item {
    padding: 5px 16px;
    border-radius: 5px;
    background-color: #ecf4e9;
    margin: 5px;
    text-align: center;
    color: #000;
}
.class-list .item:hover {
    background-color: #e7b712;
}
.class-list .active {
    background-color: #e7b712;
}
.topic-week-wrapper {
    margin: 20px;
}
.topic-week-wrapper .title-week {
    font-weight: bold;
    color: #e7b712;
    font-size: 16px;
    display: flex;
    align-content: center;
}
.topic-week-wrapper .title-week img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
.topic-week-wrapper .item {
    list-style: none;
    margin: 5px;
    /* font-weight: bold; */
}
.topic-week-wrapper .item a {
    display: flex;
    align-items: baseline;
    color: #000;
}
.topic-week-wrapper .item a:hover {
    color: rgb(69, 142, 167);
}
.topic-week-wrapper .item a img {
    width: 3px;
    margin-right: 8px;
    padding: 3px 0;
}
.form-writing {
    margin: 5px 20px;
    text-align: center;
}
.form-writing .textarea-wrapper {
    border: 5px solid #d0e3e9;
    background: #d0e3e9;
    border-radius: 10px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
/* .form-writing .textarea-wrapper textarea {
    width: calc(100% - 30px);
    border: none;
    border-radius: 10px 10px 0 0;
    outline: none;
    min-height: 75px;
    padding: 10px 15px;
    resize: vertical;
    font-family: "Open Sans", sans-serif;
} */
.form-writing .submit-button {
    background: #458ea7;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
.form-writing .submit-button img {
    width: 20px;
    margin-right: 10px;
}
.form-writing .attachment-button {
    text-align: left;
    padding: 10px;
}
.form-writing .attachment-button label {
    width: 25px;
    height: 25px;
    padding: 5px;
    cursor: pointer;
}
.form-writing .attachment-button label:hover {
    background: #fff;
    border-radius: 5px;
}
.form-writing .attachment-button label img {
    margin-left: 5px;
}
.form-writing .list-img-upload {
    display: flex;
    margin-bottom: 20px;
}
.form-writing .list-img-upload .item-upload {
    width: 20%;
    margin: 5px;
    position: relative;
}
.form-writing .list-img-upload .item-upload img {
    border-radius: 10px;
}
.form-writing .list-img-upload .item-upload .close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    text-align: center;
    background: #fff;
    color: red;
    font-weight: bold;
    border: 1px solid;
    font-size: 20px;
    line-height: 16px;
    border-radius: 50%;
}
.list-writing-wrapper {
    margin: 20px;
}
.list-writing-wrapper .item-writing {
    position: relative;
    padding: 5px;
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    min-height: 50px;
    margin-top: 15px;
    border-bottom: 1px #ddd dashed;
}
.list-writing-wrapper .item-writing:last-child {
    border-bottom: none;
}
/* .list-writing-wrapper .is-best {
    border: 1px solid #e7b712;
} */
.list-writing-wrapper .item-writing .avt-user {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    top: 5px;
    left: 5px;
    border: 1px solid #ddd;
}
.list-writing-wrapper .item-writing .avt-user a{
    text-align: center;
}
.list-writing-wrapper .item-writing .avt-user:hover .box-info{visibility:visible}
.list-writing-wrapper .item-writing .avt-user a{
    text-align: center;
}
.list-writing-wrapper .item-writing .avt-user img{
    height: 100%;
    border-radius: 5px;
}
.list-writing-wrapper .item-writing .content-item-writing {
    margin-left: 40px;
}
.list-writing-wrapper .item-writing .content-item-writing .time-update{
    color: #999;
}
.list-writing-wrapper .item-writing .content-item-writing .content-writing {
    margin-top: 10px;
    white-space: normal;
    line-height: 26px;
}
.breadcrumb {
    padding: 0 20px;
    font-style: italic;
}
.breadcrumb a {
    color: #458ea7;
    font-weight: bold;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.timeUpdate {
    font-style: italic;
    padding: 10px 20px 0;
    font-size: 12px;
    color: #999;
}
.title-topic {
    padding: 10px 20px 0px;
    line-height: 30px;
    text-align: left !important;
}
.thank-button {
    background-image: url("/static/img/icon-heart2.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 25px !important;
    color: #d86666 !important;
    background-position-y: 5px;
}
.thank-button:hover {
    background-image: url("/static/img/redhead.png");
}
.thank-button.active {
    background-image: url("/static/img/redhead.png");
}
.custom-thank {
    font-weight: unset !important;
    min-height: 22px;
}
.custom-thank:hover {
    text-decoration: unset !important;
}
.flag-new {
    transform: skewX(-20deg);
    display: inline-block;
    line-height: 14px;
    background: rgb(220, 2, 2);
    color: rgb(255, 255, 255);
    font-size: 10px;
    font-weight: 400;
    padding: 2px 3px;
    vertical-align: bottom;
    border-radius: 2px;
    margin-right: 4px;
    margin-left: 10px;
}
.flag-new span{
    transform: skewX(20deg);
    display: inline-block;
}
.titleFilter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.titleFilter .selectBox {
    position: relative;
    width: 123px;
}
.titleFilter .selectBox li{
    list-style: none;
}
.titleFilter .selectBox .titleSelect{
    padding: 3px 0;
    background: #303535;
    border-radius: 3px;
    text-align: center;
    color: #fff;
}
.titleFilter .selectBox .titleSelect:hover ~ .option{
    visibility:visible;
    transform: translateY(0px);
    opacity: 1;
}
.titleFilter .selectBox .option{
    width: 100%;
    position: absolute;
    top: 27px;
    box-sizing: border-box;
    left: 0;
    background: #e9e9e9;
    padding: 6px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    z-index: 10;
    visibility:hidden;
    transform: translateY(-10px);
    opacity: 0;
    transition: all 0.4s;
}
.titleFilter .selectBox .option:hover{
    visibility: visible;
    transform: translateY(0px);
    opacity: 1;
}
.titleFilter .selectBox .option a{
    display: block;
    text-align: center;
    border-radius: 4px;
    padding: 2px 0;
}
.titleFilter .selectBox .option a.active{
    background: #d9d6d6;
}
.titleFilter .selectBox .option a:hover{
    background: #d9d6d6;
    transition: all 0.3s;
}
.btnLoadMore{
    text-align: center;
}
.btnLoadMore a{
    color:#262626;
    display:inline-block;
    margin:12px auto;
    text-align: center;
    padding:4px 12px;
}
.btnLoadMore a:hover{
    color: #438ba3;
}
@media screen and (max-width: 420px) {
    .list-writing-wrapper .item-writing .content-item-writing {
        margin-left: 0px;
    }
    .list-writing-wrapper .item-writing .avt-user {
        visibility: hidden;
    }
}
@media screen and (max-width: 426px) {
    .class-list .item {
        padding: 5px 10px;
        min-width: 15%;
    }
}

@charset "utf-8";
/* CSS Document */

.h-sub-menu {
    padding-right: 24px;
}
.changeStatusComment .overlay{width:100%;height:100%;position:fixed;top:0;left:0;background:#00000066;z-index:10000000}
.changeStatusComment .wrapPupup{position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:10000001;width:100%;height:100%}
.changeStatusComment .popUpCreateGuild{width:515px;padding:28px 24px 24px;background:#fff;position:relative;border-radius:7px}
.changeStatusComment .popUpCreateGuild .title{margin-bottom:18px;font-weight:normal;text-align:center;margin-bottom: 30px;}
.changeStatusComment .popUpCreateGuild .txtInput{margin-bottom:20px}
.changeStatusComment .popUpCreateGuild .txtInput label{display:block;margin-bottom:12px}
.changeStatusComment .popUpCreateGuild .txtInput input{border:1px solid #eee;border-radius:5px;padding:12px 14px;outline:0;width:100%}
.changeStatusComment .popUpCreateGuild .txtInput input::placeholder{columns:#999}
.changeStatusComment .popUpCreateGuild .selectInput{height: 30px;padding: 2px;border-radius: 4px;}
.changeStatusComment .popUpCreateGuild .checkConfirm{margin-bottom:21px}
.changeStatusComment .popUpCreateGuild .checkConfirm label a{color:#8dc354;text-decoration:underline}
.changeStatusComment .popUpCreateGuild .checkConfirm input{border:1px solid #e1e1e1;padding:3px}
.changeStatusComment .popUpCreateGuild .btnPopup{display:block;width:104px;margin:0 auto;color:#262626;background:#f2ba08}
.changeStatusComment .popUpCreateGuild .btnPopupConfirm{display:inline-block;width:104px;margin:0 10px;color:#262626;padding: 6px 0;border-radius: 6px;}
.changeStatusComment .popUpCreateGuild .btnAccept{background:#f2ba08}
.changeStatusComment .popUpCreateGuild .btnCancle{background:#ddd}
.changeStatusComment .popUpConfirm{text-align: center;}

.icon-sub {
    width: 18px;
    height: 18px;
    overflow: hidden;
    -webkit-transform: translateY(3px);
    margin-right: 6px;
}

.h-sub-menu ul li {
    padding-bottom: 12px;
    list-style: none;
}

.h-sub-menu ul li a {
    color: #262626;
    font-weight: 700;
    padding: 4px 8px;
    display: block;
    border-radius: 5px;
}

.h-sub-menu ul li a:hover {
    background-color: #e7b712
}

.h-sub-menu ul li a img {
    max-width: 18px;
}

.h-sub-menu ul li a:hover img {}

/* tuenv disable style for :first li */

/* .h-sub-menu ul li:nth-child(1) a{background-color:#e7b712} */

.h-sub-menu ul li:nth-child(1) img {
    -webkit-transform: translateY(-1px)
}

.h-sub-menu ul li:nth-child(2) img {
    -webkit-transform: translateY(-36px)
}

.h-sub-menu ul li:nth-child(3) img {
    -webkit-transform: translateY(-71px)
}

.h-sub-menu ul li:nth-child(4) img {
    -webkit-transform: translateY(-107px)
}

.h-sub-menu ul li:nth-child(5) img {
    -webkit-transform: translateY(-143px)
}

.h-sub-menu ul li:nth-child(6) img {
    -webkit-transform: translateY(-176px)
}

.h-sub-menu ul li:nth-child(7) img {
    -webkit-transform: translateY(-214px)
}

.h-sub-menu ul li:nth-child(8) img {
    -webkit-transform: translateY(-247px)
}

.h-sub-menu ul li:nth-child(9) img {
    -webkit-transform: translateY(-282px)
}

.h-sub-menu ul li:nth-child(10) img {
    -webkit-transform: translateY(-317px)
}

.h-sub-menu ul li:nth-child(11) img {
    -webkit-transform: translateY(-352px)
}

.btn {
    padding: 4px 12px;
    background-color: #fff;
    border-radius: 5px;
}

.btn-showsub {
    display: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    bottom: 10px;
}

.scroll-sub {
    position: relative
}

.line4 {
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    background-color: #458ea7;
    display: none
}

.box-question {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1
}

.h-question {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e1;
}

.img-userq {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden
}

.form-question {
    width: calc(100% - 4.4rem)
}

.form-question a {
    color: #262626;
}

.form-question a:hover {
    text-decoration: underline;
}

.info-question1 {
    width: 100%;
    height: auto;
}

.info-question1 ul li:not(:last-child) {
    list-style: none;
    padding-right: 8px
}

.info-question1 ul li span {
    font-weight: 700;
    color: #458ea7;
}

.info-question1 ul li:nth-child(6) img {
    margin-right: 4px;
    -webkit-transform: translateY(-2px)
}

.info-question1 ul li:nth-child(6) span {
    color: #262626;
    font-weight: 400;
}

.user-check {
    width: 32px;
    height: 32px;
    position: relative
}

.check-u {
    position: absolute;
    bottom: -5px;
    right: -5px;
}

.btn-answer {
    padding: 4px 30px;
    display: inline-block;
    border: 1px solid #458ea7;
    color: #458ea7;
    border-radius: 5px;
}

.btn-answer:hover {
    background-image: linear-gradient(#6ab5cf, #468fa8);
    color: #fff;
    text-decoration: none!important;
}

.btn-showmore {
    padding: 6px 24px;
    display: block;
    border-radius: 5px;
    text-align: center;
    color: #458ea7;
}

.btn-showmore:hover {
    background-color: #f1f1f1;
}

.btn-showmore span {
    padding-right: 6px;
}

.btn-padding {
    padding: 12px 0px;
}

.col-right {
    padding-left: 24px;
    overflow: hidden
}

.col-right h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    color: #458ea7;
    font-weight: 800;
}

.h-select {
    position: relative;
    width: 100%;
    height: 35px;
}

.dropdown-el {
    width: 150px;
    position: absolute;
    top: 0;
    display: inline-block;
    min-height: 2em;
    max-height: 2em;
    overflow: hidden;
    top: .5em;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    color: #444;
    outline: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
    border: .06em solid transparent;
    border-radius: 1em;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    transition: 0.3s all ease-in-out;
    z-index: 998;
}

.dropdown-el input {
    display: none;
}

.dropdown-el label {
    border-top: .06em solid #d9d9d9;
    display: block;
    height: 2em;
    line-height: 2em;
    padding-left: 1em;
    padding-right: 3em;
    cursor: pointer;
    position: relative;
    transition: 0.3s color ease-in-out;
}

.dropdown-el label:nth-child(2) {
    margin-top: 2em;
    border-top: .06em solid #d9d9d9;
}

.dropdown-el input:checked+label {
    display: block;
    border-top: none;
    position: absolute;
    top: 0;
}

.dropdown-el input:checked+label:nth-child(2) {
    margin-top: 0;
    position: relative;
}

.dropdown-el::after {
    content: "";
    position: absolute;
    right: 0.8em;
    top: 0.9em;
    border: 0.3em solid #458ea7;
    border-color: #262626 transparent transparent transparent;
    transition: .4s all ease-in-out;
}

.dropdown-el.expanded {
    border: 0.06em solid #458ea7;
    background: #fff;
    border-radius: .25em;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
    max-height: 15em;
}

.dropdown-el.expanded label {
    border-top: .06em solid #d9d9d9;
}

.dropdown-el.expanded label:hover {
    color: #458ea7;
}

.dropdown-el.expanded input:checked+label {
    color: #458ea7;
}

.dropdown-el.expanded::after {
    transform: rotate(-180deg);
    top: .55em;
}

.list-ardor ul li {
    list-style: none;
    padding-top: 12px;
}

.ardor-child {
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ardor-child strong {
    text-align: right;
    flex: 1;
}

.btn-showmore2 {
    color: #458ea7;
}

.btn-showmore2 span {
    padding-right: 6px;
}

.btn-showmore2:hover {
    font-weight: 700;
    text-decoration: underline
}

.box-banner2 {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
}

.box-banner2 h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 42px!important;
}

.add-question {
    padding-left: 24px;
}

.add-question h3 {
    text-align: center;
}

.btn-add-ques {
    padding: 12px;
    display: block;
    background-color: #e7b712;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
}

.btn-add-ques:hover {
    background-color: #db9b00;
    -webkit-transition: all ease 0.3s;
}

.btn-add-ques img {
    margin-right: 6px;
}

.user-general ul li {
    list-style: none;
    display: table-row
}

.user-general ul li span {
    margin-bottom: 4px;
    display: inline-block
}

.user-general ul li strong {
    font-weight: 800;
}

.list-gage {
    max-height: 360px;
    overflow: auto
}

.list-gage ul li {
    list-style: none;
    padding: 12px 0px;
    border-bottom: 1px dotted #e1e1e1;
}

.list-gage ul li p {
    display: table-row;
}

.list-gage ul li a {
    display: inline-block;
    color: #262626;
}

.list-gage ul li a:hover {
    text-decoration: underline
}

.list-gage ul li strong {
    padding: 4px 0px;
    padding-right: 12px;
    display: inline-block
}

.icon-gage {
    width: 12px;
    padding-right: 8px;
}

.more-gage {
    padding: 4px 24px;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    color: #e7b712!important;
    font-weight: 700;
    margin-right: 8px;
}

.more-gage:hover {
    background-color: #e7b712;
    color: #fff!important;
}

.btn-select {
    padding: 6px 20px;
    display: inline-block;
    border-radius: 5px;
    color: #262626;
}

.btn-select img {
    width: 10px;
}

.opt-select li {
    position: relative;
    list-style: none;
}

.opt-select-child {
    position: absolute;
    top: 0;
    width: 180px;
    background-color: #fff;
    border: 1px solid #458ea7;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
    visibility: hidden;
    transition: .4s all ease-in-out;
    overflow: hidden;
    z-index: 1000;
    transform: scaleY(0);
    max-height: 300px;
    overflow: auto
}

.opt-select-child li {
    list-style: none;
}

.opt-select-child li a {
    padding: 6px 20px;
    display: block;
    border-bottom: 1px solid #e1e1e1;
    color: #262626;
}

.opt-select-child li a:hover {
    color: #458ea7;
}

.opt-select-child li img {
    width: 10px;
}

.opt-select-child-show {
    transition: .4s all ease-in-out;
    visibility: visible;
    transform: scaleY(1);
    transform-origin: top;
}

.opt-select-child li:nth-child(1) a {
    /*background-color: #f1f1f1;*/
    /*height: 24px;*/
    /*color: #458ea7;*/
    /*font-weight: 700;*/
    /*border-top: 1px solid #e1e1e1;*/
    /*display: none*/
}

.select-style {
    font-size: 18px;
    font-weight: 700;
}

.form-signin {
    border-radius: 5px;
    border: 2px solid #d0e3e9;
    text-align: center;
    box-shadow: 0px 0px 5px 1px #2626262b;
}

.form-signin h1 {
    line-height: 32px!important;
    font-size: 24px;
    font-weight: 800
}

.box-signin-center {
    width: 79%;
    height: auto;
    margin: auto;
}

.box-signin-center p {
    text-align: left
}

.box-signin-center a {
    font-weight: 700;
    text-decoration: underline;
}

.btn-signin {
    padding: 18px 24px;
    display: block;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    border-radius: 5px;
    text-align: center;
    text-decoration: none!important;
    position: relative
}

.btn-signin img {
    width: 36px;
    margin-right: 12px;
    position: absolute;
    left: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%)
}

.btn-signin strong {
    color: #262626;
    font-weight: 800;
    font-size: 24px;
}

.bg-face:hover {
    background-color: #2b458b;
}

.bg-gmail:hover {
    background-color: #cc3e31;
}

.box-signin-center input {
    width: 97%;
    height: 52px;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    padding-left: 3%;
    font-size: 16px;
}

.check-mark {
    width: 24px!important;
    height: 24px!important;
    float: left;
    margin-right: 6px;
}

.opt-select3 {
    width: 100%
}

.opt-select3 .btn-select {
    display: block;
    text-align: left;
    text-decoration: none;
    font-weight: 400;
    padding: 16px 20px;
}

.reCAPTCHA {
    width: 100%;
    height: 100px;
    background-color: #f1f1f1;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
}

/* .box-answer {
    width: 100%;
    height: auto;
    position: relative;
    border: 2px solid #d0e3e9;
    border-radius: 5px;
} */

.box-image1 {
    width: calc(100% - 0.15rem);
}

.box-image2 {
    width: calc(100% - 5.9rem);
}

.box-image {
    height: 160px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
}

.zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%)
}

.rotate {
    position: absolute;
    top: 5%;
    right: 5%;
}

.select-img {
    width: 86px;
}

.btn-select-img {
    width: 73px;
    height: 73px;
    display: block;
    border: 1px solid #bed6de;
    overflow: hidden;
    border-radius: 5px;
}

.bd-img {
    border: 2px solid #a3bfc6;
}

.action-empale ul li {
    text-align: right;
    list-style: none;
    float: left;
    display: block;
}

.action-empale ul li a {
    padding: 4px 12px;
    display: inline-block;
    border-radius: 5px;
    color: #2c8fe2;
}

.action-empale ul li a:hover {
    /*background-color: #fff;*/
    /*box-shadow: 0px 0px 5px 1px #2626262b;*/
    text-decoration: underline;
}
.action-empale ul li a.icon-thanks:hover {
    text-decoration: none;
}
.icon-empale {
    width: 12px;
    height: 18px;
    overflow: hidden;
    margin-right: 4px;
}

.icon-empale img {
    max-width: 100%;
    -webkit-transform: translateY(-2px)
}

.icon-report img {
    -webkit-transform: translateY(4px)
}

.icon-report:hover {
    color: #d86666;
}

.icon-report:hover img {
    -webkit-transform: translateY(-13px)
}

.comment-ques {
    border-radius: 10px;
    overflow: hidden
}

.form-textarea {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.4em;
    padding: 12px;
    transition: background-color 0.2s ease 0s;
    float: left;
    border: 0px;
}

.form-textarea:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    outline-width: 0;
}

.comment {
    width: calc(100% - 5rem);
    height: 42px;
    background: #d8e7eb;
    border-radius: 6px 6px 6px 6px;
    color: #262626;
}

.list-comment ul li {
    list-style: none;
    padding: 12px 0px;
    /* overflow: hidden; */
    /* border-top: 1px dotted #a3bfc6; */
}

/*.list-comment ul li span {*/
    /*display: table-row*/
/*}*/

.more-comment {
    text-align: center;
    display: block;
    padding: 8px 0px;
    border-top: 1px dotted #a3bfc6;
    color: #458ea7!important;
}

.click-answer {
    display: block;
    border: 2px solid #91c1d2;
    border-radius: 5px;
}

.answer {
    width: calc(100% - 1.7rem);
    height: 100px;
    display: block;
    color: #262626;
    background: #d8e7eb;
    border-radius: 6px;
    padding: 12px;
}

.answer strong {
    color: #458ea7;
    text-decoration: underline;
}

.click-answer:hover {
    background-color: #d8e7eb;
    -webkit-transition: all ease 0.3s;
}

.click-answer:hover .answer {
    background-color: #fff;
    -webkit-transition: all ease 0.3s;
}

.box-next {
    position: absolute;
    top: 24px;
    right: 24px;
}

.btn-next {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    margin-left: 6px;
}

.btn-next img {
    width: 7px;
    -webkit-transform: translate(5px, -3px)
}

.btn-next:hover {
    background-color: #f1f1f1;
}

.box-answer .info-question2 {
    overflow: hidden
}

.icon-thanks img {
    width: 16px;
}

.icon-thanks {
    color: #d86666!important;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px #2626262b;
}

.icon-thanks:hover {
    background-color: #d86666!important;
    color: #fff!important;
}

.box-thank {
    width: 16px;
    height: 20px;
    overflow: hidden
}

.box-thank img {
    -webkit-transform: translateY(4px)
}

.icon-thanks:hover .box-thank img {
    -webkit-transform: translateY(-16px)
}

.box-question-bottom .btn-add-ques {
    max-width: 280px;
    margin: 12px auto;
}

.has-tooltip {
    /*position: relative;*/
    display: inline;
}

.tooltip-wrapper {
    position: absolute;
    visibility: hidden;
}

.has-tooltip:hover .tooltip-wrapper {
    visibility: visible;
    /*top: 30px;*/
    /*left: 50%;*/
    /*margin-left: -76px;*/
    /* z-index: 999; defined above with value of 5 */
}

.tooltip {
    display: block;
    position: relative;
    top: -46px;
    right: 20%;
    height: auto;
    padding: 8px 12px;
    /*margin-left: -76px;*/
    color: #d86666!important;
    font-weight: 400 !important;
    background: #fff;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #d86666;
}

.tooltip:after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 25%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #d86666;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    -webkit-transform: rotate(180deg);
}

.ques-approved {
    width: 100%;
    height: auto;
    display: block
}

.ques-approved > span {
    padding-left: 12px;
    border-left: 2px solid #20a28e;
    display: inline-block;
    width: calc(100% - 4rem);
    margin-left: 12px;
    position: relative
}

.ques-approved span img {
    position: absolute;
    top: 0;
    left: -12px;
    width: 12px;
}

.ques-approved span ol {
    padding-left: 30px;
}

.ques-approved img {
    width: 20px;
}
.img-current > img {
    max-height:98%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}
.img-current {
    border: 1px solid #e1e1e1;
    text-align: center;
    height: 300px;
    /* justify-content: center; */
    /* -webkit-box-flex: 1; */
    /* display: flex; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow: hidden;
    -webkit-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.list-img .img_item {
    display: inline-flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: inline-flex;
    margin-right: 10px;
    width: 6rem;
    padding: 10px;
    height: 6rem;
    background-color: #fff;
    border-radius: 6px;
    vertical-align: middle;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #e1e1e1;
    opacity: 0.6;
    margin-bottom: 10px;
}
.list-img .img_item:hover {
    opacity: 1;
}
.list-img .img_item.active {
    border: 2px solid #a3bfc6;
    opacity: 1;
}
.list-img a img {
    max-height:100%;
}
.list-img a{
    height: 100%;
}
.img-current {
    position: relative;
}
.img-current .zoom_image {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    text-align: center;
    visibility: hidden;
}
.img-current .zoom_image img {
    width: 26px;
    padding-top: 8px;
}
.img-current:hover .zoom_image{
    visibility: visible;
}
.img-current .rotate_image {
    text-align: center;
    position: absolute;
    right: 20px;
    top: 20px;

}
.img-current .rotate_image img {
    width: 26px;
}
.content-ques .img-current {
    height: 200px;
}
.opacity2 {
    left: 0;
}
.form-report .radio {
    font-size: 16px;
    margin-bottom: 8px;
}
.form-report .radio label {
    cursor: pointer;
}
.form-report .radio label:hover {
    color: #458ea7;
}
.form-report .radio label input{
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
}
.form-report textarea {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
}
.form-report textarea:focus {
    outline: none;
}
.form-report{
    width: auto !important;
}
.add-image ul li{list-style:none;float:left;margin-right:6px;}
.add-image img{width:86px;height:86px;border-radius:5px;border:1px solid #d0e3e9;overflow:hidden}
.after_upload > div {
    position: relative;
    display: inline-block;
    margin:2px;
}
.content-ques {
    word-break: break-word;
}
.after_upload > div a.close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    text-align: center;
    background: #666;
    color: #fff;
    font-weight: bold;
    border: 1px solid #666;
    font-size: 16px;
    line-height: 17px;
    border-radius: 50%;
}
#ratt{
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.ratings {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: fit-content;
    direction: rtl;
    text-align: left;
}
.star {
    width: 29px;
    height: 30px;
    position: relative;
    line-height: 23px;
    display: inline-block;
    transition: color 0.2s ease;
    color: #ebebeb;
}
.starChild svg{
    width: 100% !important;
}
.starChild{
    display: block;
    color:#e7b711 !important;
    position: absolute;
    margin: 0;
    bottom: 28px;
    left: 4px;
    opacity: 0;
    width: 20px;
}
.star.selected .starChild{
    -webkit-animation: showhide 0.75s steps(1) ;
    -moz-animation: showhide 0.75s  steps(1) ;
    -o-animation: showhide 0.75s steps(1)  ;
    animation: showhide 0.75s steps(1)  ;
    animation-timing-function: ease;
    animation-iteration-count:1;
}
@keyframes showhide {
    0%   {opacity: 0;}
    25%  {opacity: 0.5;}
    75%  {opacity: 1;}
    100% {opacity: 0;}
}
.ad-mobile-768-only{
    display: none;
}
@media screen and (max-width: 960px) {
    .h-sub-menu ul li {
        float: left
    }
    .icon-sub {
        float: none;
        margin: auto;
    }
    .h-sub-menu ul li {
        width: 100px;
        text-align: center;
        position: relative
    }
    .h-sub-menu {
        width: 1500px;
        overflow: hidden
    }
    .box-sub, .box-sub-no-ads {
        overflow: auto
    }
    .h-sub-menu ul li:nth-child(1) a {
        background: none
    }
    .btn-showsub {
        display: inline-block
    }
    .line4 {
        display: block
    }
    .box-sub, .box-sub-no-ads {
        height: auto;
        border-bottom: 1px solid #e1e1e1;
        margin-bottom: 24px;
        padding-bottom: 12px;
    }
    .btn-padding {
        padding: 12px 12px;
    }
    .col-right {
        padding: 12px;
    }
    .add-question {
        padding: 0px 12px;
    }
    .box-banner2 {
        display: none
    }
    .list-gage ul li p {
        display: block;
    }
    .info-gage {
        display: block!important;
    }
    .opt-select-child {
        position: fixed;
        bottom: 0;
        height: auto;
        width: 100%;
        top: auto;
        left: 0;
        border: 0px;
        border-radius: 0;
        text-align: center;
        min-height: 140px;
        max-height: 140px;
        overflow: auto
    }
    .opt-select-child li:nth-child(1) a {
        display: block
    }
    .pc-info-user {
        display: none
    }
    .pc-gage {
        display: none
    }
    .form-signin {
        border: 0px;
        box-shadow: 0px 0px 0px 0px;
    }
    .box-next {
        display: none;
    }
    .box-answer {
        width: 100%;
        border: 0px;
        box-shadow: 0px 0px 0px 0px #2626262b!important
    }
    .action-empale {
        width: 100%;
    }
    .action-empale ul {
        width: 100%;
    }
    .action-empale ul li {
        width: auto;
        margin-bottom: 12px;
        margin-right: 3%;
    }
    .box-question-bottom {
        display: none;
    }
    .action-empale ul li a {
        background-color: #fff;
        /*box-shadow: 0px 0px 5px 1px #2626262b;*/
        display: block;
        text-align: left;
        padding: 6px 12px;
    }
}

@media screen and (max-width: 768px) {
    .ad-mobile-768-only{
        display: block;
    }
}

@media screen and (max-width: 640px) {
    .box-banner h1 {
        font-size: 34px;
        padding-bottom: 20px;
        line-height: 34px
    }
    .box-signin-center {
        width: 90%;
    }
    #list-action td {
        width: 100%;
        display: block;
        clear: both
    }
}

@media screen and (max-width: 480px) {
    .form-question {
        width: 100%
    }
    .btn-select {
        padding: 6px 12px;
    }
}

@media screen and (max-width: 420px) {
    .box-signin-center ul li a {
        font-size: 14px;
        padding: 12px 12px;
    }
    .box-signin-center {
        width: 100%;
    }
    .action-empale ul li {
        width: auto;
        margin-bottom: 12px;
        margin-right: 2%;
    }
}

@media screen and (max-width: 360px) {
    .box-banner {
        height: 163px
    }
}

.star-rating__checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.star-rating__star {
    display: inline-block;
    padding: 3px;
    vertical-align: middle;
    line-height: 1;
    font-size: 2.0em;
    color: #ABABAB;
    transition: color .2s ease-out;
}

.star-rating__star:hover {
    cursor: pointer;
}

.star-rating__star.is-selected {
    color: #e7b711;
}

.star-rating__star.is-disabled:hover {
    cursor: default;
}

.style-link-video {
    align-items: center;
    background: #e8e8ef;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    color: #2c8fe2;
    margin-top: 6px;
}

.style-link-video:hover img, .add-link-youtube:hover img, .edit-link-youtube:hover img{
    transform: scale(1.1);
    transition: all 0.4s;
}

.add-link-youtube {
    padding: 2px 6px;
    background: #e8e8ef;
    border-radius: 6px;
    margin-top: 6px;
    display: inline-block;
    color: #2c8fe2
}

.edit-link-youtube {
    padding: 2px 6px;
}
.paging-item{
    text-align: right;
    margin-top: 30px;
}
.questionFloatingAds {
    position: fixed;
    right: 20px;
    z-index: 999;
    top: 40%;
}
.paging-item a{
    display: inline-block;
    width: 30px;
    text-align: center;
    height: 30px;
    border: 1px solid #e0e0e0;
    line-height: 30px;
    margin-right: 10px;
    margin-top: 10px;
}
.paging-item a:hover, .paging-item a.active{
    background: #e6b715;
    border: 1px solid #e7b712;
    color: #fff;
}

/* Popup add link video */
/* .edit-select input {
    width: 186px;
    padding: 8px 12px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
} */
.input-link-youtube {
    text-align: center;
    padding: 20px;
}

.input-link-youtube >input{
    padding-top: 20px;
    width: 90%;
    padding: 8px 12px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}
#popupSaveQuestion{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background: #ffffffb0;
    width: 100%;
    height: 100%;
    z-index: 50;
}
@keyframes showPop {
    0%{
        box-shadow:none;
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    100%{
        box-shadow: 0 12px 28px 0 #00000033,0 2px 4px 0 #0000001a,inset 0 0 0 1px #ffffff80;
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}
#popupSaveQuestion .btnClosePop{
    transform: rotate(45deg);
    color: red;
    font-weight: bold;
    position: absolute;
    right: 12px;
    top: 12px;
    border-radius: 99px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    align-items: center;
    font-size: 25px;
    background: #e1e1e1;
}
#popupSaveQuestion .btnClosePop:hover{
    background: #ccc;
}

#popupSaveQuestion .contentPopup{
    max-width:548px;
    width: calc(100% - 24px);
    padding:12px;
    margin: 0 12px;
    background:#fff;
    border-radius: 6px;
    position: relative;
    box-shadow: unset;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    animation: showPop 0.4s forwards;
}
@media all and (max-width:500px) {
    #popupSaveQuestion .contentPopup{
        padding: 6px;
    }
}
#popupSaveQuestion .contentPopup h3.title{
    text-align: center;
    padding:5px;
}
#popupSaveQuestion .contentPopup ul{
    list-style: none;
    max-height:300px;
    overflow: auto;
}
#popupSaveQuestion .contentPopup ul li a{
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.4s ease-in;
}
#popupSaveQuestion .contentPopup ul li a:hover, #popupSaveQuestion .contentPopup ul.saved li a.active{
    background: #ececec;
}
#popupSaveQuestion .contentPopup ul.saved li a.active:hover{
    background: #ececec;
}
#popupSaveQuestion .contentPopup ul.saved li a{
    pointer-events: none;
    cursor: default;
}
#popupSaveQuestion .contentPopup ul.saved li a:hover{
    background: #fff;
}
#popupSaveQuestion .contentPopup ul li .avatarText{
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    text-transform: uppercase;
    background: #ccc;
    margin-right: 12px;
    font-weight: bold;
    border-radius: 6px;
}
#popupSaveQuestion .contentPopup ul li .titleCate{
    font-weight: bold;
}
#popupSaveQuestion .contentPopup ul li .btnAddCate{
    font-weight: bold;
    font-size: 18px;
    margin:6px 12px 6px 48px;
    padding:12px
}
#popupSaveQuestion .contentPopup ul li a input{
    width: calc(100% - 100px);
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 12px;
    outline: none;
    font-weight: bold;
}
#popupSaveQuestion .contentPopup .footerPopup{
    text-align: right;
    margin-top: 12px;
}
#popupSaveQuestion .contentPopup .footerPopup a{
    display: inline-block;
    padding:8px 20px;
    color: #262626;
    border-radius:6px;
}
#popupSaveQuestion .contentPopup .footerPopup a.createCateBtn{
    color: #fff;
    background: #262626;
}
.btnSaveQuestion{
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    background:#2c8fe2;
    transition: all .4s;
    padding: 0 4px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    border-radius:0 6px;
    transition: all 0.4s;
}
.btnSaveQuestion:hover{
    box-shadow: 0px 0px 0px 2px #ccc;
}
@charset "utf-8";
/* CSS Document */
.Write-question{width: calc(100% - 1.75rem);height: 100px;background:#fff;border-radius:6px;}

	.opt-ask{width:100%;height:35px;background-color:#d0e3e9;padding-top:6px;}

	.form-ask-ques .btn-add-ques{max-width:280px;margin:auto;margin-top:12px;}

	.ask-select{width:100%;height:36px;}

	.opt-ask ul li{float:left;list-style:none;padding:0px 8px;position:relative;}

	.bdr2{width:2px;height:12px;position:absolute;right:0;background-color:#aaaaaa;top:12px;}

	.gt-exam img{margin-right:6px;}

	.opt-ask a{width:24px;height:24px;padding:4px 8px;display:inline-block;border-radius:5px;text-align:center; margin: 0 5px;}    .opt-ask a:hover{background-color:#fff;}
    .opt-ask div.bdr2{
        position: relative;
        display: inline-block;
        top: 3px;
    }
	.btn-send-answer{max-width:278px;padding:12px 24px;display:block;color:#fff;font-size:18px;text-transform:uppercase;border-radius:5px;text-align:center;text-decoration:none!important;position:relative;margin:auto;margin-top:12px;}

	.btn-send-answer img{margin-right:12px;}

	.content-ques  .box-image{border:4px solid #d0e3e9;height:auto;max-width:400px}
	.form-answer {border:6px solid #d0e3e9;height:auto;border-radius:5px;max-height:600px;overflow:auto}
	.add-image ul li{list-style:none;float:left;margin-right:6px;}
    .add-image img{width:86px;height:86px;border-radius:5px;border:1px solid #d0e3e9;overflow:hidden}
    .after_upload > div {
        position: relative;
        display: inline-block;
        margin:2px;
    }
    .content-ques {
        word-break: break-word;
    }
    .after_upload > div a.close {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 16px;
        height: 16px;
        text-align: center;
        background: #fff;
        color: red;
        font-weight: bold;
        border: 1px solid;
        font-size: 20px;
        line-height: 17px;
    }

    #popup227 button {
        padding: 6px 12px;
        margin-right: 12px;
        margin-top: 12px;
        cursor: pointer;
        border-radius: 5px;
        border: unset;
        font-weight: 700;
    }
    .darkMode .popup-warning, .darkMode .popup-warning .cl-26{
        color: #262626 !important;
    }
    .darkMode .guild-answer{
        color: #f76868 !important;
    }
	@media screen and (max-width: 960px){.btn-tooltip{padding:6px 12px;display:inline-block}   .btn-tooltip strong{display:none} .btn-send-answer{max-width:278px;padding:12px 24px;}}

.tag-categories {
  user-select: none;
  background-color: #fff;
  padding: 2px 6px;
  margin-right: 8px;
  border-radius: 4px;
  border: 1px solid #458ea7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tag-categories.action {
  transform: scale(1.01);
  background-color: bisque;
  box-shadow: 3px 3px 8px #ccc;
}

.tag-categories:hover {
  transform: scale(1.02);
  background-color: bisque;
  box-shadow: 3px 1px 8px #ccc;
  cursor: pointer;
}

.item-topic {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: box-shadow 0.5s ease;
  cursor: pointer;
}

.item-topic:hover {
  background-color: rgb(252, 252, 252);
  box-shadow: 5px 5px 8px #ccc;
}

.show-more-topics {
  color: #458ea7;
  border-radius: 4px;
  border: 1px solid #458ea7;
  padding: 5px 12px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.show-more-topics:hover {
  color: #fff;
  background-color: #458ea7;
}

.item-topic-content {
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-essays-topic {
  /* display: flex;
  justify-content: space-between; */
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.item-essays-topic > div {
  justify-content: end;
}

@keyframes fadeIn {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes upAndDown {
    0%{
        transform:scale(0);
    }
    70%{
        transform:scale(1.1);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes bedevilClick {
    0%{
        transform: translate(0,0);
        box-shadow: 2px 3px 0 1px #922f78;

    }
    50%{
        transform: translate(4px,6px);
        box-shadow: none;
    }
    100%{
        transform: translate(0,0);
        box-shadow: 2px 3px 0 1px #922f78;
    }
}
html{
    scroll-behavior: smooth;
}
.landingPage4 *{margin:0;padding:0;box-sizing:border-box;font-size:18px}
.landingPage4 .clear{clear:both}
.landingPage4 .fl{float:left}
.landingPage4 .fr{float:right}
.landingPage4 .bold{font-weight:700}
.landingPage4 .bgPinkBold{background:#b54698}
.landingPage4 .container{width:calc(100% - 24px);max-width:760px;margin:0 auto}
.landingPage4 .title{padding:0 40px;color:#415cb5;font-size:24px;font-weight:900;text-align:center;text-transform:uppercase;margin-bottom:12px;line-height:35px}
.landingPage4 .header{
    min-height: 303px;
}
.landingPage4 .header img{width:100%}
.landingPage4 .bannerPc{display:block}
.landingPage4 .bannerMobi{display:none}
.landingPage4 .body{padding-bottom: 30px}
.landingPage4 .body .titleIntro{margin:30px 0 23px;text-align: justify}
.landingPage4 .body .blockInfoProblem{
    display:flex;
    align-items:center;
    margin-bottom:15px
}
.landingPage4 .body .blockInfoProblem img{
    width:226px;
    margin-left:10px;
    display:inline-block;
    object-fit:contain;
    animation: upAndDown 0.6s;
}
.landingPage4 .body .blockInfoProblem div{
    width:calc(100% - 236px);
    padding-left:7px;
    margin-left:58px
}
.landingPage4 .body .blockInfoProblem div p:nth-child(1){
    margin-bottom:24px
}
.landingPage4 .body .blockInfoProblem div p{
    border-left:3.4px solid #415cb5;
    padding-left: 18px;
    position:relative
}
.landingPage4 .body .blockInfoProblem div p:after,.landingPage4 .body .blockInfoProblem div p:before{
    width:10px;
    height:12px;
    display:block;
    content:"";
    position:absolute;
    left:-4px;
    background: no-repeat center url(/static/img/cap_tai_khoan_phhs/arrow.png);
}
.landingPage4 .body .blockInfoProblem div p .muiDauNgoac{
    width: 12px;
    height: 12px;
    background:no-repeat center url(/static/img/cap_tai_khoan_phhs/muiNhon.png);;
    display: block;
    position: absolute;
    top: 50%;
    left: -9px;
    margin-top: -6px;
}
.landingPage4 .body .blockInfoProblem div p:after{
    bottom:0;
    transform:rotateX(180deg);
}
.landingPage4 .body .blockInfoProblem div p:before{top:0}

.landingPage4 .body .prCompany{text-align:center}
.landingPage4 .body .prCompany a{display:inline-block;color:#fff;padding:14px;border-radius:13px;box-shadow: 2px 3px 0 1px #922f78;cursor:pointer}
.landingPage4 .body .prCompany a:active{
    animation: bedevilClick 0.4s;   
}
.landingPage4 .body .listItems{margin:20px 0 37px}
.landingPage4 .body .item{background:#fff;border-radius:7px;width:calc(100% - 18px);margin-left:18px;margin-bottom:24px;position:relative}
.landingPage4 .body .item p{padding:23px 17px 23px 25px;background:#efe1de;border-radius:14px;}
.landingPage4 .body .item .indexCicle{
    width: 43px;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background:#415cb5;
    font-size: 24px;
    position: absolute;
    left: -30px;
    clip-path: polygon(100% 0%, 83% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
    top: 50%;
    margin-top: -21.5px;
}
.landingPage4 .body .item:last-child{margin-bottom:0}

.landingPage4 .footer {text-align:center;margin-bottom:18px}
.landingPage4 .footer .formRegister{
    display: grid;
    grid-template-columns: auto;
    row-gap:15px;
    text-align: center;
    margin-bottom: 24px;
}
.landingPage4 .footer .formRegister .err-text{
    width: 416px;
    margin: -10px auto 0;
    text-align: left;
    color: red;
    font-size: smaller;
}
.landingPage4 .footer .formRegister .titleForm{
    font-size: 24px;
    margin-bottom: 9px;
    color:#415cb5;
    font-weight: 900;
}
.landingPage4 .footer .formRegister input{
    font-size: 22px;
    width: 416px;
    margin: 0 auto;
    padding:12px 22px;
    outline: none;
    border-radius:6px;
    border: 1px solid #ccc;
}
.landingPage4 .footer .formRegister input::placeholder{
    color:#999999;
    transition: all 0.4s;
}
.landingPage4 .footer .hotline{
    font-weight: 900;
    color:#415cb5;
    margin-bottom: 10px;
}
.landingPage4 .footer .formRegister input:focus::placeholder{
    font-size:18px;
    transition: all 0.2s;
}
.landingPage4 .footer .formRegister .otp-group input{
    width: 302px;
}
.landingPage4 .footer .otp-group a.sendOTP{display:inline-block;color:#fff;font-weight:700;padding:13px 21px 12px;border-radius:8px;font-size:18px;box-shadow: 2px 3px 0 1px #922f78;margin-left: 10px;min-width: 101px;}
.landingPage4 .footer .otp-group a.disble-button{box-shadow: 2px 3px 0 1px #555;background-color: #888;}
.landingPage4 .footer .hotline a{
    color:#415cb5;
}
.landingPage4 .footer a.btnRegister{display:inline-block;color:#fff;font-weight:700;padding:13px 21px 12px;border-radius:8px;font-size:18px;box-shadow: 2px 3px 0 1px #922f78;margin-bottom: 24px;}
.landingPage4 .footer a.btnRegister:active{animation: bedevilClick 0.2s}
.landingPage4 .footer .handRight{background:url(data:image/png;base64,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) no-repeat center;width:25px;height:22px;margin-right:4px;display:inline-block}
.landingPage4 .footer .labelBottom{font-weight: 900}
.fbChat {background: #fff}
.fbChat .h1-body{
    width: 100% !important;
}
.popup-info{display: flex;align-items: baseline;}
.popup-info img{margin-right: 5px;}
.landingPage4 .blue-text{color: #415cb5;font-weight: bold;}
.landingPage4 .pink-text{color: #bd5ba1;font-weight: bold;}
.submitLoading{display:inline-block;color:#fff;font-weight:700;padding:13px 21px 12px;border-radius:8px;font-size:18px;box-shadow: 2px 3px 0 1px #555;background-color: #888;;margin-left: 10px;min-width: 101px;}


@media all and (max-width:768px){.landingPage4 .bannerPc{display:none}
    .landingPage4 *{
        font-size: 16px;
    }
    .landingPage4 .bannerMobi{display:block}
    .landingPage4 .body .titleIntro {
        margin: 20px 0 0;
    }
    .landingPage4 .body .prCompany a {
        padding: 7px 14px;
        box-shadow: 1px 2px 0 1px #922f78;
    }
    .landingPage4 .body .blockInfoProblem {
        flex-wrap: wrap;
    }
    .landingPage4 .body .blockInfoProblem img {
        margin: 0 auto 12px auto;
    }
    .landingPage4 .body .blockInfoProblem div {
        width: 100%;
        padding-left: 7px;
        text-align: justify;
        margin-left: 0;
    }
    .landingPage4 .footer .formRegister input {
        width: 100%;
    }
    .landingPage4 .title,.landingPage4 .footer .formRegister .titleForm{
        font-size: 16px;
        line-height: 23px;
        padding: 0;
    }
    .landingPage4 .body .item span {
        width: 33px;
        height: 38px;
        font-size: 24px;
        left: -18px;
    }
    .landingPage4 .body .item p {
        padding: 12px 12px 12px 24px;
        background: #efe1de;
        border-radius: 14px;

    }
    .landingPage4 .body .item {
        margin-bottom: 12px;
    }
    .landingPage4 .body .listItems {
        margin: 20px 0 15px;
    }
    .landingPage4 .footer .formRegister .titleForm {
        margin-bottom: 0;
    }
    .landingPage4 .footer .formRegister{
        row-gap: 12px;
        margin-bottom: 12px;
    }
    .landingPage4 .footer .formRegister input{
        font-size: 16px;
        padding: 10px 12px;
    }
    .landingPage4 .footer .formRegister input:focus::placeholder{
        font-size:18px;
    }
    .landingPage4 .footer a.btnRegister{font-size: 16px;padding:8px 21px 8px}
    .landingPage4 .footer{margin-bottom: 0}
    .landingPage4 .body {
        padding-bottom: 10px;
    }
    .landingPage4 .footer .formRegister .otp-group input{
        width: calc(100% - 112px);
    }
    .landingPage4 .footer .otp-group a.sendOTP {
        font-size: 16px;padding:8px 21px 8px
    }

}
#checkToken {
    padding-top: 20px;
}

#checkToken table {
    width:100%;
}

#checkToken th {
    background-color: azure;
}

#checkToken table, #checkToken th, #checkToken td {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
#checkToken th, #checkToken td {
    padding: 15px;
    text-align: left;
}

.bg-image-honors {
  font-family: "Roboto Slab", serif;
  background-image: url("/static/img/answerEvent/textureAnswerEvent.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.bg-image-honors .rightContent {
  background-color: #fff;
  padding: 20px;
  position: relative;
  margin-bottom: 100px;
}
.bg-image-honors .description-form-signin {
  text-align: justify;
  color: #2d768f;
  position: relative;
  display: block;
}

.bg-image-honors .description-form-signin::after {
  background-image: url("/static/img/update_user_100k/pen-form-mobi.png");
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 29px;
  right: 5px;
  bottom: -32px;
}

.form-signin-100K .title-form {
  text-transform: uppercase;
  font-size: 28px !important;
  font-weight: bold;
  color: #2d768f;
  margin-top: 20px !important;
  line-height: 2rem;
}

.form-info-user-100K {
  margin-top: 10px;
  font-family: "Roboto Slab", serif;
  display: flex;
  flex-direction: column;
}

.form-info-user-100K input,
.form-info-user-100K select,
.form-info-user-100K textarea {
  margin-bottom: 16px;
  margin-top: 8px;
  border: none;
  background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4));
  height: 35px;
  font-size: 13px !important;
  font-family: "Roboto Slab", serif;
  padding-left: 10px;
  border-radius: 5px;
  color: #656565;
}

.fs-17{
  font-size: 17px;
}

.form-info-user-100K textarea::placeholder {
  color: #65656580;
}

#change-save-info input:checked + .slider {
  background-color: #458ea7 !important;
}

.form-info-user-100K input::placeholder {
  color: #65656580;
}

.form-info-user-100K .mes-error {
  float: left;
  padding: 0 10px;
  color: red;
}

.form-signin-100K .btn-submit-info {
  background-color: #176efb;
  color: #fff;
  text-align: center;
  box-shadow: none !important;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 20px;
  border: none;
  padding: 8px;
  width: 150px;
  font-family: "Roboto Slab", serif;
  margin: 40px auto 0;
  cursor: pointer;
  display: block;
}

.form-signin-100K .input-file {
  margin-top: 15px;
  cursor: pointer;
}

.bg-image-honors .rightContent::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  background-image: url("/static/img/update_user_100k/background-footer-form.png");
  height: 112px;
  left: 0;
  bottom: -100px;
}

.bg-image-honors .description-share {
  display: block;
  text-align: justify;
  margin-top: 12px;
  color: #262626;
}

.bg-image-honors .form-info-user-100K textarea {
  padding-top: 10px;
  padding-bottom: 55px;
}

.form-info-user-100K select {
  cursor: pointer;
}

select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: none;
}

.form-info-user-100K .btn-close {
  cursor: pointer;
  position: relative;
  top: 0;
  right: 0;
  /* background-color: #fff; */
  /* border-radius: 50px; */
  /* width: 15px;
  height: 15px; */
}

.text-info-receive {
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
  font-size: 20px;
}

@media (max-width: 425px) {
  .rps-popup {
    left: 10% !important;
    transform: translateX(-6%) !important;
  }
}

/* Tablet - PC */
@media screen and (min-width: 640px) {
  .bg-image-honors .rightContent {
    padding: 45px;
  }
  .bg-image-honors .block-form-signin-100k {
    padding: 0 0px;
  }
  .bg-image-honors .form-signin-100K {
    padding: 0 0px;
  }

  .bg-image-honors .description-form-signin::after {
    background-image: url("/static/img/update_user_100k/pen-form.png");
    width: 82px;
    height: 70px;
    right: -62px;
    bottom: 0px;
  }
}

@media (max-width: 880px) {
  .bg-image-honors .rps-note {
    min-width: auto !important;
  }
}

@media (max-width: 640px) {
  .bg-image-honors .rightContent {
    width: 87% !important;
  }
}

/* Darkmode */

.darkMode .bg-image-honors {
  background-image: url("/static/img/update_user_100k/background-form-darkmode.png");
  border-radius: none;
}

.darkMode .bg-image-honors .rightContent {
  background-color: #272c2d;
}

.darkMode .bg-image-honors .rightContent::after {
  background-image: url("/static/img/update_user_100k/background-footer-form-darkmode.png");
}

.darkMode .form-info-user-100K input,
.darkMode .form-info-user-100K select,
.darkMode .form-info-user-100K textarea {
  background-color: #293437;
  border: none;
}

.darkMode .form-info-user-100K input,
.darkMode .form-info-user-100K input::placeholder,
.darkMode .form-info-user-100K textarea::placeholder,
.darkMode .form-info-user-100K select {
  color: #7cc6cf;
  font-size: 16px;
}

.darkMode .description-form-signin,
.darkMode .bg-image-honors .description-share {
  color: #fff;
}

.darkMode .form-signin-100K .title-form {
  color: #fff799;
}

.darkMode .form-info-user-100K input,
.darkMode .form-info-user-100K select,
.darkMode .form-info-user-100K textarea {
  color: #91ebf5;
}

.item-topic {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: box-shadow 0.5s ease;
}

.item-topic:hover {
  background-color: rgb(252, 252, 252);
  box-shadow: 5px 5px 8px #ccc;
}

.dark-essays {
  color: #f1f1f1;
}

.dark-link-essay {
  color: #4f97b0;
}

@keyframes bedevilClick {
    0%{
        transform: translate(0,0);
        box-shadow: 2px 3px 0 1px #922f78;

    }
    50%{
        transform: translate(4px,6px);
        box-shadow: none;
    }
    100%{
        transform: translate(0,0);
        box-shadow: 2px 3px 0 1px #922f78;
    }
}
@keyframes rotate {
    0%{
        transform:rotate(15deg);
    }
    100%{
        transform:rotate(-15deg);
    }
}
html{
    scroll-behavior: smooth;
}
.feedback *{margin:0;padding:0;box-sizing:border-box;font-size:18px}
.feedback{overflow: hidden}
.feedback .container{width:calc(100% - 24px);max-width:850px;margin:0 auto;position: relative;z-index: 5;min-height: 10vh;transition: all 1s;}
.feedback .title{padding:0 40px;color:#415cb5;font-size:24px;font-weight:1000;text-align:center;text-transform:uppercase;margin-bottom:12px;line-height:35px;}
.feedback .header img{width:100%}
.feedback .bannerPc{display:block}
.feedback .bannerMobi{display:none}
.feedback .body{
    background: linear-gradient(180deg, #f8f2d8, #fff);
    padding: 30px -0;
}
.feedback .container.hideForm{
    min-height: 90vh;
    transition: all 1s;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
.feedback .txtInteract{
    transition: all 0.5s;
}
.feedback .header{
    position: relative;
}
.feedback .header .leftTitle .redBold{
    font-size: 37px;
    font-weight: bold;
    color: #b54698;
}
.feedback .header .timeDay{
    width: 90px;
    position: absolute;
    right: 24px;
    top: 12px;
    animation: rotate 2s infinite linear;
    animation-direction: alternate;
}

.feedback .header .leftTitle a{
    display: inline-block;
    margin: 0px 0px;
    margin-bottom: 14px;
}
.feedback .header .leftTitle .logo{
    max-width: 315px;
    width: 100%;
}
.feedback .header .leftTitle .bottomTitle{
    font-weight: bold;
    font-size: 25px;
    line-height: initial;
}
.feedback .body{
    position: relative;
    min-height: 100vh;
}
.feedback .body .cloud{
    position: absolute;
    z-index: 0;
}
.feedback .body .c1{
    top: -122px;
    left: 5%;
    opacity: 0.9;
}
.feedback .body .c2{
    right: 5%;
    width: 200px;
    opacity: 0.8;
}

.feedback .body .titleIntro{margin: 25px 0;text-align: justify}
.feedback .cardForm{
    padding: 20px;
    background: #efe1de;
    border-radius: 10px;
    background-size: 200px;
}
.feedback .cardForm input:not(input[type="file"]),.feedback .cardForm textarea{
    padding:7px 12px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    border:none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    transition: all 0.4s;
}
.feedback .cardForm input:not(input[type="file"]):focus,.feedback .cardForm textarea:focus{
    transform: scale(1.01);
    box-shadow: 1px 1px 5px 0px #bcb6b6;
}
.feedback .cardForm textarea{
    font-family: 'Open Sans', sans-serif;
}
.feedback .cardForm textarea{
    resize: vertical;
}
.feedback .cardForm .txtInput{
    margin-bottom: 18px;
}
.feedback .cardForm .txtInput p{
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 16px;
}
.feedback .cardForm input[type="file"]{
    padding:0;
    border-radius: none;
}
.feedback .btnSubmit{
    text-align: center;
}
.feedback .btnSubmit button{
    display: inline-block;
    color: #fff;
    padding: 14px;
    border-radius: 13px;
    box-shadow: 2px 3px 0 1px #922f78;
    cursor: pointer;
    background: #b54698;
    font-weight: bold;
    border: none;
}
.feedback .btnSubmit button:active{
    animation: bedevilClick 0.4s;   
}
.feedback .previewImg{
    width: 100px;
    height: 100px;
    object-fit: contain;
    overflow: hidden;
    margin-top: 12px;
    display: block;
    background: #f6e4e0;
}
@keyframes bedevilClick {
    0%{
        transform: translate(0,0);
        box-shadow: 2px 3px 0 1px #922f78;
    }
    50%{
        transform: translate(4px,6px);
        box-shadow: none;
    }
    100%{
        transform: translate(0,0);
        box-shadow: 2px 3px 0 1px #922f78;
    }
}

.feedback .header .theMoon{
    display: none;
}
.feedback .header .theSun{
    filter: drop-shadow(2px 4px 19px orange);
}
@media all and (max-width:1024px){.feedback .bannerPc{display:none}
    .feedback *{
        font-size: 16px;
    }
    .feedback .body .c1 {
        opacity: 0.4;
    }
    .feedback .body .c2 {
        opacity: 0.5;
    }
}
@media all and (max-width:640px){.feedback .bannerPc{display:none}
    .feedback *{
        font-size: 16px;
    }
    .feedback .header .leftTitle {
        position: relative;
        z-index: 2;
    }
    .feedback .header .timeDay{
        opacity: 0.6;
        z-index: 0;
    }
    .feedback .body .c1 {
        top: -25px;
        width: 100px;
    }
    .feedback .body .c2 {
        width: 130px;
        right: -5%;
    }
}
@media all and (max-width:500px){
    .feedback .header .timeDay{
        width: 70px;
    }
    .feedback .header .leftTitle .logo {
        max-width: 183px;
    }
    .feedback .header .leftTitle .redBold {
        font-size: 28px;
    }
    .feedback .header .leftTitle .bottomTitle {
        font-size: 17px;
        width: 70%;
    }
    
    .feedback .cardForm {
        padding: 8px;
        background: #efe1de;
        border-radius: 10px;
        background-size: 200px;
    }
    .feedback .body .titleIntro, .feedback .cardForm .txtInput p {
        font-size: 14px;
    }
    .feedback .cardForm .txtInput p {
        margin-bottom: 5px;
    }
    .feedback .cardForm input[type="file"] {
        font-size: 14px;
    }
    .feedback .cardForm .txtInput {
        margin-bottom: 12px;
    }
    .feedback .btnSubmit a {
        padding: 5px 10px;
        border-radius: 4px;
    }
    .feedback .cardForm {
        padding: 8px 8px 16px 8px;
    }
}
@keyframes upAndDown {
        0%{
            transform:scale(0.5);
        }
        70%{
            transform:scale(1.1);
        }
        100%{
            transform:scale(1);
        }
    }
.landingPage3 *{margin:0;padding:0;box-sizing:border-box;font-size:18px}
.landingPage3 .clear{clear:both}
.landingPage3 .fl{float:left}
.landingPage3 .fr{float:right}
.landingPage3 .bgPinkBold{background:#d25d80}
.landingPage3 .container{width:100%;max-width:950px;margin:0 auto}
.landingPage3 .title{font-size:24px;font-weight:900;text-align:center;text-transform:uppercase;margin-bottom:12px;line-height:35px}
.landingPage3 .header img{width:100%}
.landingPage3 .bannerPc{display:block}
.landingPage3 .bannerMobi{display:none}
.landingPage3 .topIntro{background:#f0dfb4;padding:35px 0}
.landingPage3 .topIntro .content{padding-left:135px;font-weight:700;background:url(data:image/png;base64,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) no-repeat left;height:111px;display:flex;align-items:center;line-height:30px}
.landingPage3 .body{background:#f5ecd5;padding-bottom: 30px}
.landingPage3 .body .container{max-width:818px}
.landingPage3 .body .topImg{margin:0 auto;display:block;padding:30px}
.landingPage3 .body .prCompany{text-align:center}
.landingPage3 .body .prCompany P{display:inline-block;color:#fff;padding:7px 15px;border-radius:50px}
.landingPage3 .body .listItems{margin:20px 0 37px}
.landingPage3 .body .item{background:#fff;border-radius:7px;width:calc(100% - 18px);margin-left:18px;margin-bottom:24px;position:relative}
.landingPage3 .body .item p{padding:10px 15px 10px 38px}
.landingPage3 .body .item span{width:43px;height:43px;display:flex;justify-content:center;align-items:center;font-weight:900;color:#fff;background:#26347a;font-size:24px;border-radius:50px;position:absolute;left:-18px;top:10px}
.landingPage3 .body .item:nth-child(3) span{top:21px}
.landingPage3 .body .item:last-child{margin-bottom:0}
.landingPage3 .footer .btnGuiBaitap{text-align:center;margin-bottom:18px}
.landingPage3 .footer .btnGuiBaitap a{display:inline-block;color:#fff;font-weight:900;text-transform:uppercase;padding:13px 21px 12px;border-radius:50px;font-size:24px}
.landingPage3 .footer .btnGuiBaitap .handRight{background:url(data:image/png;base64,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) no-repeat center;width:25px;height:22px;margin-right:4px;display:inline-block}
.landingPage3 .footer .title{padding-bottom:30px;margin-bottom:0}
.fbChat {background: #fff}
.fbChat .h1-body{
    width: 100% !important;
}
@media all and (max-width:960px){.landingPage3 .container{width:100%;max-width:950px;margin:0 auto;padding:0 12px}}
@media all and (max-width:768px){.landingPage3 .bannerPc{display:none}
.landingPage3 .bannerMobi{display:block}
.landingPage3 .topIntro .content{height:auto}}
@media all and (max-width:450px){.landingPage3 .topIntro .content{padding:120px 0 0;background:url(data:image/png;base64,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) 50% 0 no-repeat;text-align:center}
.landingPage3 .body .topImg,.landingPage3 .topIntro{padding:20px 0}}
/*Giai de thi hoc ky mien phi*/
#scroll::-webkit-scrollbar-track
{
    background-color: #fff;
}

#scroll::-webkit-scrollbar
{
    width: 5px;
    background-color: #fff;
}

#scroll::-webkit-scrollbar-thumb
{
    background-color: #afc5d2;
}

.m-ctv{display:none}

.h1-col1{position:absolute;top:50%;transform:translateY(-50%);}

/*body{background-color:#f1f5ff;}*/
body
.h1-body{width:calc(100% - 48px);max-width:1200px;height:auto;overflow:hidden;position:relative;padding:24px;margin:auto;font-size:20px;line-height:25px;text-align: justify ;}
.h1-clred1{color:#cc315d}
.h1-clred2{color:#de4030}
.h1-w3{width:30%;}
.h1-w7{width:70%;}
.h1-col ul{width:calc(100% - 24px);padding-left:24px;}
.h1-col ul li{display:block;padding:12px;background-color:#fff;border-radius:6px;border:4px solid #8ea0d5;position:relative;}
.h1-col ul li img{position:absolute;top:50%;left:-19px;}
.h1-col ul li strong{text-transform:uppercase}

.h1-body h3{text-align:center;text-transform:uppercase;color:#264073;font-weight:900;}

.h1-number{position:absolute;top:-12px;left:-17px;width:30px;height:30px;border-radius:50%;background-color:#cc315d;text-align:center;color:#fff;display: flex;
    align-items: center;
    justify-content: center;}

.h1-full{width:calc(100% - 48px);padding:24px;background-color:#b8ccff;text-align:center;font-size:20px;}
.h1-full h3{color:#264073;font-weight:900;}
.h1-full a{padding:12px 24px;display:inline-block;margin:24px 12px;background-color:#cc315d;font-weight:900;text-transform:uppercase;color:#fff;border-radius:6px;}

@media screen and (max-width: 960px) {.m-ctv{display:block} .pc-ctv{display:none}
    .h1-body{width:calc(100% - 24px);padding:12px;font-size:16px;}
}

@media screen and (max-width: 768px){
    .h1-col{width:100%;}
    .h1-col1{position:relative;top:0%;transform:translateY(0%);}
}

@media screen and (max-width: 768px){}

@media screen and (max-width: 480px) {
    .h1-col ul li{border:2px solid #8ea0d5;}
    .h1-full{width:calc(100% - 24px);padding:12px;font-size:16px;line-height:25px;}
}

.header-text {
    margin: 20px 0 5px 0;
    padding-left: 0px !important
}
.content-report {
    width: 100%;
    max-width: 350px;
    outline: none;
    padding: 5px;
    border: 1px #999 solid;
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
}
.short-input {
    max-width: 280px;
}
.group-button {
    text-align: center;
}
.group-button button {
    margin: 10px;
    padding: 5px 10px;
    background: none;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}
.group-button .btn-submit {
    border: 1px#e7b712 solid;
}
.group-button .btn-submit:hover {
    background-color: #e7b712;
    color: white;
}
.group-button .btn-cancel {
    border: 1px #999 solid;
}
.group-button .btn-cancel:hover {
    background-color: #999;
    color: white;
}
.btn-check {
    margin:  0 10px;
    padding: 5px 10px;
    background: none;
    outline: none;
    border-radius: 5px;
    border: 1px#458ea7 solid;
    cursor: pointer;
    color: #458ea7 !important;
    font-weight: bold;
}
.btn-check:hover{
    background-color: #458ea7;
    color: white !important;
}
.files_upload_item_wrapper{
    display: flex;
}
.files_upload_item{
    width: 100px;
    height: 100px;
    border: 1px #999 solid;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
    position: relative;
}
.files_upload_item_wrapper a.close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    text-align: center;
    background: #fff;
    color: red;
    font-weight: bold;
    border: 1px solid;
    font-size: 20px;
    line-height: 16px;
    border-radius: 50%;
}
.form-question2 p {
    padding-left: 0 !important;
}
@media all and (max-width:375px) {
    .short-input {
        max-width: 245px;
    }
}
#navWrap .anInput, #navWrap-no-ads .anInput {
  width: 10px;
  height: 10px;
  position: relative;
}
#navWrap .anInput p, #navWrap-no-ads .anInput p {
  position: absolute;
  display: block;
  z-index: 2;
  width: 15px;
  height: 21px;
  background: #fff;
  position: absolute;
}
#navWrap .anInput #blackedOut, #navWrap-no-ads .anInput #blackedOut {
  width: 10px;
  height: 10px;
}
#navWrap .latexUserManual, #navWrap-no-ads .latexUserManual {
  min-height: 90vh;
}
#navWrap .latexUserManual .h247-box-guide, #navWrap-no-ads .latexUserManual .h247-box-guide {
  width: calc(100% - 24px);
  max-width: 850px;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}
#navWrap .latexUserManual .h247-box-guide .fw800, #navWrap-no-ads .latexUserManual .h247-box-guide .fw800 {
  margin-bottom: 24px;
}
#navWrap .latexUserManual .h247-box-guide .titleList, #navWrap-no-ads .latexUserManual .h247-box-guide .titleList {
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 18px;
}
#navWrap .latexUserManual .h247-box-guide .author, #navWrap-no-ads .latexUserManual .h247-box-guide .author {
  text-align: right;
  color: #585858;
  font-size: 14px;
  margin-bottom: 36px;
  font-style: italic;
}
#navWrap .latexUserManual .h247-box-guide .author a, #navWrap-no-ads .latexUserManual .h247-box-guide .author a {
  color: #585858;
}
#navWrap .latexUserManual .h247-box-guide .author a:hover, #navWrap-no-ads .latexUserManual .h247-box-guide .author a:hover {
  color: #000;
}
#navWrap .latexUserManual .h247-box-guide .author p:last-child, #navWrap .latexUserManual .h247-box-guide .author p:first-child,
#navWrap-no-ads .latexUserManual .h247-box-guide .author p:last-child, #navWrap-no-ads .latexUserManual .h247-box-guide .author p:first-child {
  color: #24a390;
}
#navWrap .latexUserManual .h247-box-guide .author p:last-child a, #navWrap .latexUserManual .h247-box-guide .author p:first-child a,
#navWrap-no-ads .latexUserManual .h247-box-guide .author p:last-child a, #navWrap-no-ads .latexUserManual .h247-box-guide .author p:first-child a {
  color: #24a390;
  text-decoration: underline;
}
#navWrap .latexUserManual .h247-box-guide .inputSearch, #navWrap-no-ads .latexUserManual .h247-box-guide .inputSearch {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  border: none;
  padding: 8px 15px;
  font-size: 18px;
  font-weight: bold;
  outline: none;
  border-radius: 6px;
  margin-bottom: 12px;
  transform: scale(0.95);
  transition: all 0.3s;
  background: #e5e5e5;
  box-sizing: border-box;
}
#navWrap .latexUserManual .h247-box-guide .inputSearch:focus, #navWrap-no-ads .latexUserManual .h247-box-guide .inputSearch:focus {
  transform: scale(1);
}
#navWrap .latexUserManual .h247-box-guide .introComman, #navWrap-no-ads .latexUserManual .h247-box-guide .introComman {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
#navWrap .latexUserManual .h247-box-guide .introComman p, #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p {
  margin-right: 17px;
}
#navWrap .latexUserManual .h247-box-guide .introComman p span, #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p span {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 12px;
  vertical-align: middle;
  border-radius: 4px;
}
#navWrap .latexUserManual .h247-box-guide .introComman p:nth-child(1) span, #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p:nth-child(1) span {
  background: #00EAD3;
}
#navWrap .latexUserManual .h247-box-guide .introComman p:nth-child(2), #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p:nth-child(2) {
  margin-right: 0;
}
#navWrap .latexUserManual .h247-box-guide .introComman p:nth-child(2) span, #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p:nth-child(2) span {
  background: #4F8A8B;
}
#navWrap .latexUserManual .h247-box-guide .listLatex, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex {
  max-width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li {
  width: 25%;
  padding: 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px dashed #fff;
  box-sizing: border-box;
  transition: all 0.1s;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li:nth-child(odd), #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li:nth-child(odd) {
  background: #e1e1e1;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li:nth-child(even), #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li:nth-child(even) {
  background: bisque;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li h4, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li h4 {
  font-size: 18px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li div > span, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li div > span {
  font-size: 14px;
  color: #262626;
  font-weight: 600;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li .latex, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li .latex {
  color: #00EAD3;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  display: block;
  cursor: pointer;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li .latex:hover, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li .latex:hover {
  color: #07ddc8;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li .acii, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li .acii {
  color: #4F8A8B;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  display: block;
  cursor: pointer;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li .acii:hover , #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li .acii:hover {
  color: #68bebf;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li .btnAutoFocus, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li .btnAutoFocus {
  width: 0px;
  height: 0px;
  border: none;
  overflow: hidden;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li p, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li p {
  font-weight: 700;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li div, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li div {
  width: 100%;
}
#navWrap .latexUserManual .h247-box-guide .listLatex li:hover, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li:hover {
  transform: scale(1.4);
}

@media all and (max-width: 768px) {
  #navWrap .latexUserManual .h247-box-guide .listLatex li,#navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li {
    width: 33.33%;
  }
}
@media all and (max-width: 650px) {
  #navWrap .latexUserManual .h247-box-guide .listLatex li, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li {
    width: 50%;
  }
}
@media all and (max-width: 425px) {
  #navWrap .latexUserManual .h247-box-guide .listLatex li:hover, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li:hover {
    transform: scale(1.2);
  }

  .h247-box-guide h1 {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }

  #navWrap .latexUserManual .h247-box-guide .titleList, #navWrap-no-ads .latexUserManual .h247-box-guide .titleList {
    font-size: 16px;
  }
}
@media all and (max-width: 375px) {
  #navWrap .latexUserManual .h247-box-guide .listLatex li, #navWrap .latexUserManual .h247-box-guide .listLatex li div > span,
  #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li, #navWrap-no-ads .latexUserManual .h247-box-guide .listLatex li div > span {
    font-size: 12px;
    padding: 18px 0;
  }

  #navWrap .latexUserManual .h247-box-guide .introComman p,  #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p {
    margin-right: 12px;
    font-size: 14px;
  }

  #navWrap .latexUserManual .h247-box-guide .introComman p span, #navWrap-no-ads .latexUserManual .h247-box-guide .introComman p span {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}

#mainListQuestion * {
  box-sizing: border-box;
}
@keyframes loadItem {
  0% {
    transform: perspective(12px) rotateX(-1deg) translateX(10px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: perspective(100px) rotateX(0deg) translateX(0px) scale(1);
    opacity: 1;
  }
}
@keyframes troiXuong {
  0% {
    transform: translateY(-17px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  0% {
    transform: scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
  }
}
#mainListQuestion .card {
  width: 80%;
  margin: 24px auto;
  border-radius: 6px;
  display: flex;
  min-height: 100px;
}
#mainListQuestion .card ul {
  list-style: none;
}
#mainListQuestion .card ul li {
  position: relative;
}
#mainListQuestion .card ul li .questionBox {
  display: flex;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.4s;
}
#mainListQuestion .card ul li .questionBox .textAvatar {
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-transform: uppercase;
}
#mainListQuestion .card ul li .questionBox h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#mainListQuestion .card ul li:last-child {
  margin-bottom: 0;
}
#mainListQuestion .card .questionSaveCate {
  width: 30%;
  padding: 6px;
  background: #fff;
}
#mainListQuestion .card .questionSaveCate .questionBox {
  display: flex;
  align-items: center;
  animation: fadeIn 0.3s;
}
#mainListQuestion .card .questionSaveCate .questionBox .textAvatar {
  width: 36px;
  height: 36px;
  background: #de7f7f;
  font-size: 22px;
  margin-right: 12px;
  color: #fff;
  transition: ease-out 0.2s;
}
#mainListQuestion .card .questionSaveCate .questionBox:hover {
  background: #f3f3f3;
}
#mainListQuestion .card .questionSaveCate .questionBox h3 {
  font-size: 14px;
  font-weight: bold;
  width: calc(100% - 48px);
}
#mainListQuestion .card .questionSaveCate .questionBox.active {
  background: #f3f3f3;
}
#mainListQuestion .card .questionSaveCate .questionBox.active .textAvatar {
  font-size: 30px;
  color: #795548;
}
#mainListQuestion .card .questionSaveCate .questionBox.active h3 {
  font-size: 14px;
  font-weight: bold;
  width: calc(100% - 48px);
}
#mainListQuestion .card .listQuestion {
  width: 70%;
  padding: 12px;
  background: #ffe4b5;
}
#mainListQuestion .card .listQuestion .title {
  width: 100%;
  padding-left: 6px;
  font-size: 14px;
  font-weight: bold;
  margin: 0 6px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  border-radius: 6px;
  background: #f5f5dc;
  position: relative;
  animation: troiXuong 0.4s;
}
#mainListQuestion .card .listQuestion .title .cate_name {
  width: 100%;
  max-width: calc(100% - 46px);
}
#mainListQuestion .card .listQuestion .title .groupBtnTitle {
  display: flex;
  width: 100%;
  max-width: 46px;
}
#mainListQuestion .card .listQuestion .title .txtEditCateName {
  border: 1px solid #e1e1e1;
  outline: none;
  font-weight: bold;
  padding: 2px 5px;
  width: calc(100% - 87px);
}
#mainListQuestion .card .listQuestion .title .btnFrameTitle {
  width: 17px;
  height: 17px;
  color: #fff;
  font-weight: bold;
  display: flex;
  border-radius: 99px;
  transition: all 0.2s;
  position: relative;
}
#mainListQuestion .card .listQuestion .title .btnFrameTitle span {
  line-height: 15px;
  padding-left: 1px;
}
#mainListQuestion .card .listQuestion .title .btnFrameTitle:hover {
  box-shadow: 0 0 3px 2px #0000005e;
}
#mainListQuestion .card .listQuestion .title .btnDel {
  background: red;
  transform: rotate(45deg);
  font-size: 25px;
}
#mainListQuestion .card .listQuestion .title .btnEdit {
  background: green;
  margin-right: 12px;
}
#mainListQuestion .card .listQuestion .title .popConfirm {
  position: absolute;
  top: 30px;
  right: 0;
  transform: unset;
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  box-shadow: 1px 1px 5px 0px #00000054;
  display: inline-block;
  z-index: 5;
}
#mainListQuestion .card .listQuestion .title .popConfirm a {
  padding: 2px 3px;
  border-radius: 3px;
}
#mainListQuestion .card .listQuestion .title .popConfirm a:first-child {
  color: #fa3d3d;
}
#mainListQuestion .card .listQuestion .title .popConfirm a:hover {
  background: #f4cda4;
}
#mainListQuestion .card .listQuestion li {
  margin-bottom: 12px;
}
#mainListQuestion .card .listQuestion .questionBox {
  width: 100%;
  opacity: 0;
  transform: perspective(12px) rotateX(-1deg) translateX(10px) scale(0.95);
  animation: loadItem 0.4s forwards;
}
#mainListQuestion .card .listQuestion .questionBox .textAvatar {
  width: 90px;
  height: 90px;
  font-size: 50px;
  background: #faebd7;
  margin-right: 12px;
  color: #262626;
  transition: all 0.2s;
}
#mainListQuestion .card .listQuestion .questionBox .textAvatar:hover {
  text-shadow: 12px 12px 2px #448ea7bd, -10px -12px 2px #e7b712b8;
  font-size: 52px;
  background: #fff6e9;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion {
  width: calc(100% - 88px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .titleQuestion {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  font-weight: bold;
  color: #262626;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .titleQuestion:hover {
  color: #b26a6a;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .savedTo {
  font-size: 12px;
  color: #5a5d77;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: crimson;
  font-size: 13px;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave span {
  width: calc(100% - 53px);
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave .btnDelete {
  display: block;
  padding: 2px 5px;
  border-radius: 3px;
  background: #faebd7;
  color: #262626;
  font-size: 14px;
  line-height: 18px;
  width: 32px;
  text-align: center;
  position: relative;
  cursor: pointer;
  z-index: 15;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave .btnDelete:hover .PopDel {
  animation: fadeIn2 0.2s forwards;
  animation-delay: 0.2s;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave .btnDelete .PopDel {
  position: absolute;
  padding: 3px 0;
  background: #ffe4b5;
  color: #262626;
  top: 20px;
  right: 0;
  width: 74px;
  border-radius: 3px;
  box-shadow: 0px 1px 3px 0px #00000063;
  visibility: hidden;
}
#mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave .btnDelete .PopDel:hover {
  background: #ffebc7;
}
#mainListQuestion .card .listQuestion li:nth-child(odd) .questionBox {
  background: #ffffff5c;
}

@media all and (max-width: 768px) {
  #mainListQuestion .card {
    flex-wrap: wrap;
    width: calc(100% - 24px);
  }

  #mainListQuestion .card .questionSaveCate, #mainListQuestion .card .listQuestion {
    width: 100%;
  }
  #mainListQuestion .card .listQuestion {
    padding: 12px 6px 6px;
  }
  #mainListQuestion .card .questionSaveCate {
    display: flex;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    overflow: scroll;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #mainListQuestion .card .questionSaveCate li {
    margin-bottom: 0;
    max-width: 300px;
    min-width: 170px;
  }
  #mainListQuestion .card .questionSaveCate li:first-child {
    min-width: 105px;
  }

  #mainListQuestion .card ul li .questionBox h3 {
    -webkit-line-clamp: 1;
  }

  #mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave .btnDelete .PopDel {
    top: 0;
    right: 0;
  }
}
@media all and (max-width: 500px) {
  #mainListQuestion .card {
    margin: 0 auto;
  }

  #mainListQuestion .card .listQuestion .questionBox .textAvatar {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }

  #mainListQuestion .card .listQuestion .questionBox .contentQuestion h3 {
    font-size: 14px;
  }

  #mainListQuestion .card .listQuestion .questionBox .contentQuestion {
    width: calc(100% - 62px);
  }

  #mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave {
    margin-top: 6px;
  }

  #mainListQuestion .card .listQuestion .questionBox .contentQuestion .titleQuestion {
    font-size: 14px;
  }

  #mainListQuestion .card .listQuestion .title .groupBtnTitle {
    max-width: 100%;
    justify-content: flex-end;
  }

  #mainListQuestion .card .listQuestion .title .cate_name {
    max-width: 100%;
    margin-bottom: 12px;
  }

  #mainListQuestion .card .listQuestion .title .txtEditCateName {
    width: calc(100% - 79px);
  }
}
.darkMode #mainListQuestion .card .questionSaveCate {
  background: #3b484c;
}

.darkMode #mainListQuestion .card .questionSaveCate .questionBox.active {
  background: #545e60;
}

.darkMode #mainListQuestion .card .questionSaveCate .questionBox:hover {
  background: #545e6061;
}

.darkMode #mainListQuestion .card .listQuestion .title {
  background: #738c93;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .textAvatar {
  background: #4c3f3b;
  color: #de7f7f;
}

.darkMode #mainListQuestion .card .listQuestion {
  background: #5c7770;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .contentQuestion .titleQuestion {
  color: #DDD;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .contentQuestion .savedTo {
  color: #adacac;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave .btnDelete {
  color: #DDD;
  background: #775c71;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .contentQuestion .dateSave {
  color: #a9d8cc;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .textAvatar:hover {
  background: #67544e;
}

.darkMode #mainListQuestion .card .listQuestion .questionBox .contentQuestion .titleQuestion:hover {
  color: #fff;
}

.darkMode #mainListQuestion .card .listQuestion .title .popConfirm {
  background: #3b484c;
}

.darkMode #mainListQuestion .card .listQuestion .title .popConfirm a:hover {
  background: #63858f;
}

.content-answer-1 a.user-name{
    font-weight: bold;
    margin-right: 5px;
    color: inherit;
}
.content-answer-1 a.user-name img{
    margin: 0 5px;
    width: 20px !important;
}
.footer-box{
    margin-top: 10px;
}
.footer-box .time{
    color: #999;
    font-style: italic;
    font-size: 14px;
}

/*  */
.wrapContent{
    display: flex;
    justify-content: center;
    align-items: center;
    position:fixed;
    width: 100%;
    height: 100%;
}
.wrapContent.done{
    background:repeat-x top left url(/static/img/spinLucky/giphy5.gif?v2);
}
.wrapContent .dnone{
    display: none !important;
}
.wrapContent .spin{
    display: block;
    cursor: pointer;
    width: 300px;
    filter: drop-shadow(2px 4px 6px #837171);
}
.wrapContent .spin:hover{
    animation: upAndDown 0.4s;
}
.wrapContent .resuilt{
    width: 1000px;
    position: relative;
    animation: upAndDown 0.4s;
}
.wrapContent .resuilt .person{
    position: absolute;
    flex-wrap: wrap;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.wrapContent .resuilt .person .idUser{
    margin-bottom:24px

}
.wrapContent .resuilt .person p{
    display: block;
    text-align: center;
    margin-top: 45px;
}
.wrapContent .resuilt p span{
    display: block;
    font-size: 36px;
    font-weight: bold;
}
.wrapContent .resuilt p span.bounch{
    animation: upAndDown2 0.8s;
    font-size: 70px;
    font-weight: bold;
}
.wrapContent .resuilt p span:nth-child(1){
    font-size: 60px;
    color: #9c380b;
    font-weight: bold;
    line-height: 55px;
    margin-bottom: 20px;
}
.wrapContent img{
    width: 100%;
} 
@keyframes upAndDown{
    0%{
       transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes upAndDown2{
    0%{
       transform: scale(1);
    }
    25%{
        transform: scale(1.2) rotate(-20deg);
    }
    50%{
        transform: scale(1.2) rotate(20deg);
    }
    75%{
        transform: scale(1.2) rotate(0deg);
    }
    100%{
        transform: scale(1);
    }
}


.user-Mod a{padding:16px 12px;display:inline-block;color:#458ea7;}
.icon-mod{width:27px;height:27px;overflow:hidden;}

.list-action-mod li{list-style:none;border-top:1px dotted #e1e1e1;}
.list-action-mod li a{padding:12px 24px;display:block;color:#262626;}
.icon-mod img{max-width:51px!important}
.list-action-mod li a:hover{background-color:#458ea7;color:#fff;font-weight:700;}
.list-action-mod li:nth-child(1) a:hover img{-webkit-transform:translate(-28px,0px);-webkit-transition:all ease 0.3s;}
.list-action-mod li:nth-child(2) a:hover img{-webkit-transform:translate(-28px,-46px);-webkit-transition:all ease 0.3s;}
.list-action-mod li:nth-child(3) a:hover img{-webkit-transform:translate(-28px,-92px);-webkit-transition:all ease 0.3s;}
.list-action-mod li:nth-child(4) a:hover img{-webkit-transform:translate(-28px,-138px);-webkit-transition:all ease 0.3s;}
.list-action-mod li:nth-child(5) a:hover img{-webkit-transform:translate(-28px,-184px);-webkit-transition:all ease 0.3s;}
.list-action-mod li:nth-child(2) img{-webkit-transform:translateY(-46px)}
.list-action-mod li:nth-child(3) img{-webkit-transform:translateY(-92px)}
.list-action-mod li:nth-child(4) img{-webkit-transform:translateY(-138px)}
.list-action-mod li:nth-child(5) img{-webkit-transform:translateY(-184px)}

.form-editor{width:100%;}

.list-edit > li{float:left;width:33.3333%;height:auto;position:relative;float:left;list-style:none;}
.list-edit li a.question_item{margin-left:24px;display:inline-block;border:1px solid #e1e1e1;height:332px;border-radius:5px;background-color:#f5f5f5;}

.list-edit li a.processing{border:1px solid #d86666;background-color:#f9eeee;}

.list-edit li a.processing .top-edit{background-color:#d86666;}

.top-edit{width:100%;height:auto;overflow:hidden;padding:12px 0px;background-color:#d0e3e9;font-size:18px;}
.top-edit > ul > li{float:left;width:auto;margin-left:12px;color:#262626;list-style:none}
.top-edit ul li:nth-child(4){float:right;margin-right:12px;}
.top-edit ul li span{width:30px;height:30px;border-radius:5px;display:inline-block;text-align:center;overflow:hidden}
.top-edit ul li strong{padding-top:3px;display:block}
.top-edit ul li .icon-math img{width:22px;}
.icon-math img{-webkit-transform:translateY(-38px)}
.icon-mod2 img{-webkit-transform:translateY(3px)}
.content-edit{padding:12px;height:148px;overflow:hidden;}  .content-edit p{color:#262626;}
.end-edit{padding:0px 12px;position:absolute;bottom:12px;width:calc(100% - 3.3rem);}
.end-edit ul li{display:block;clear:both;width:100%;color:#262626}


@media screen and (max-width: 1148px) {.list-edit li{width:50%;}}

@media screen and (max-width: 960px) {.list-edit li{width:33.33%;} .list-edit li a{margin:0px 12px;}
    .menu-contol-mod{position:fixed;top:0;right:-278px;width:278px;height:100%;z-index:1000000;background-color:#fff;visibility:hidden;-webkit-transition:all ease 0.3s;border-radius:0px;margin-top:0;}
    .menu-contol-mod-show{right:0;visibility:visible;-webkit-transition:all ease 0.3s;}

    .list-action-mod li{border:0px !important;padding:0px 12px;padding-bottom:12px;}

    .list-action-mod li a{padding:6px 12px!important;border:1px solid #e1e1e1;border-radius:5px}}
@media screen and (max-width: 790px) {.list-edit li{width:50%;} .list-edit li a{margin:0px 12px;}}
@media screen and (max-width: 480px) {.list-edit li{width:100%;}}

.classSpecialEvent {
  background: no-repeat center top 30px url("/static/img/answerEvent/textureAnswerEvent.png") #f4efe4;
  background-size: 100%;
}
.classSpecialEvent * {
  box-sizing: border-box;
}
.classSpecialEvent .bgBlue1 {
  background: #e8f3f6;
}
.classSpecialEvent .bgGreen1 {
  background: #e3efcc;
}
.classSpecialEvent .bgBlue2 {
  background: #cce0ef;
}
.classSpecialEvent .related-post {
  display: none;
}
.classSpecialEvent .wrapSelect {
  margin: 0 -24px 18px;
  padding: 0 24px 18px;
  border-bottom: 1px dashed #e1e1e1;
}
.classSpecialEvent .wrapSelect .selectBox {
  width: 114px;
  padding: 5px 11px;
  border-radius: 3px;
  outline: none;
  border-color: #e1e1e1;
}
.classSpecialEvent .news-detail {
  margin: 24px auto;
  float: none;
  background: #fff;
  border-radius: 10px;
  width: calc(100% - 24px);
  max-width: 760px;
}
.classSpecialEvent .news-detail .bg-f > h2 {
  font-size: 24px;
  font-weight: 900;
}
@keyframes upAndDown {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.classSpecialEvent .listComment .frameMsg:last-child .contentRight {
  margin-bottom: 0;
}
.classSpecialEvent .listComment .edit {
  color: #385898;
  display: inline-block;
  cursor: pointer;
  margin-top: 7px;
  font-size: 12px;
}
.classSpecialEvent .listComment .edit:hover {
  text-decoration: underline;
}
.classSpecialEvent .listComment .list_img {
  overflow-x: auto;
}
.classSpecialEvent .listComment .list_img .list_img_wrapper {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}
.classSpecialEvent .listComment .list_img .list_img_wrapper .attachment_item {
  display: inline-block;
  width: 300px;
  padding: 5px;
}
.classSpecialEvent .listComment .list_img .list_img_wrapper .attachment_item img {
  border-radius: 10px;
}
.classSpecialEvent .frameMsg {
  display: flex;
}
.classSpecialEvent .frameMsg .avatar {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  object-fit: cover;
}
.classSpecialEvent .frameMsg .contentRight {
  width: calc(100% - 35px);
  margin-left: 15px;
  position: relative;
  padding: 14px 24px;
  text-align: justify;
  margin-bottom: 17px;
  border-radius: 15px;
}
.classSpecialEvent .frameMsg .contentRight .list_img_wrapper {
  margin-top: 12px !important;
}
.classSpecialEvent .frameMsg .contentRight:after {
  content: "";
  display: block;
  width: 17px;
  height: 19px;
  position: absolute;
  top: 11px;
  left: -13px;
  z-index: 3;
}
.classSpecialEvent .frameMsg .contentRight p:first-child {
  margin-bottom: 5px;
}
.classSpecialEvent .frameMsg .contentRight p:first-child span:first-child {
  font-weight: bold;
}
.classSpecialEvent .frameMsg .contentRight p:first-child span:last-child {
  color: #999999;
  font-style: italic;
  font-size: 11px;
  display: inline-block;
}
.classSpecialEvent .frameMsg .contentRight.bgGreen1:after {
  background: no-repeat center url("data:image/png;base64,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");
}
.classSpecialEvent .frameMsg .contentRight.bgBlue2:after {
  background: no-repeat center url("data:image/png;base64,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");
}
.classSpecialEvent .frameMsg .contentRight.boxRep {
  margin-left: 0;
  padding: 0 0 0 15px;
}
.classSpecialEvent .frameMsg .contentRight.boxRep textarea {
  width: 100%;
  border: none;
  border-radius: 0 15px 15px;
  outline: none;
  min-height: 100px;
  padding: 14px 85px 14px 24px;
  resize: vertical;
  font-family: "Open Sans", sans-serif;
}
.classSpecialEvent .frameMsg .contentRight.boxRep:after {
  left: 0;
  background: no-repeat center url("data:image/png;base64,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");
}
.classSpecialEvent .frameMsg .contentRight.boxRep .rep {
  width: 42px;
  outline: none;
  border: none;
  position: absolute;
  z-index: 4;
  height: 42px;
  border-radius: 99px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: no-repeat center url("/static/img/answerEvent/mayBay.png"), #fff;
  bottom: 24px;
  right: 18px;
  cursor: pointer;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .rep:hover {
  animation: upAndDown 0.4s;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .rep_img {
  width: 42px;
  outline: none;
  border: none;
  position: absolute;
  z-index: 4;
  height: 42px;
  border-radius: 99px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: no-repeat center url("/static/img/answerEvent/iconUploadImage.png"), #fff;
  bottom: 24px;
  right: 65px;
  cursor: pointer;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .rep_img:hover {
  animation: upAndDown 0.4s;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .files_upload {
  background: #e8f3f6;
  margin-top: -15px;
  padding: 15px;
  border-radius: 0 0px 15px 15px;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .files_upload .files_upload_item_wrapper {
  border-top: 1px #999999 solid;
  padding-top: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .files_upload .files_upload_item_wrapper .files_upload_item {
  padding: 5px;
  background: white;
  width: 75px;
  height: 75px;
  margin: 0 5px 5px;
  border-radius: 5px;
  text-align: center;
  position: relative;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .files_upload .files_upload_item_wrapper .files_upload_item a.close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  text-align: center;
  background: #fff;
  color: red;
  font-weight: bold;
  border: 1px solid;
  font-size: 20px;
  line-height: 16px;
  border-radius: 50%;
}
.classSpecialEvent .frameMsg .contentRight.boxRep .files_upload .files_upload_item_wrapper .next_upload {
  line-height: 60px;
  cursor: pointer;
}

#scroll2::-webkit-scrollbar-track {
  background-color: #fff;
}

#scroll2::-webkit-scrollbar {
  height: 8px;
  background-color: #fff;
}

#scroll2::-webkit-scrollbar-thumb {
  background-color: #afc5d2;
}

@media all and (max-width: 500px) {
  .classSpecialEvent .hiddenMobi {
    display: none;
  }

  .classSpecialEvent .news-detail {
    padding: 0;
  }

  .classSpecialEvent .frameMsg {
    position: relative;
  }

  .classSpecialEvent .frameMsg .contentRight:after {
    display: none;
  }

  .classSpecialEvent .frameMsg .avatar {
    position: absolute;
    z-index: 4;
    left: 12px;
    top: 22px;
  }

  .classSpecialEvent .frameMsg .contentRight {
    margin: 5px 0 12px 0;
    width: 100%;
    padding: 12px 12px 12px;
  }

  .classSpecialEvent .frameMsg .contentRight p:first-child {
    margin-bottom: 15px;
    padding-left: 42px;
    text-align: left;
  }

  .classSpecialEvent .frameMsg .contentRight.boxRep {
    padding: 0;
  }

  .classSpecialEvent .frameMsg .contentRight.boxRep .rep {
    width: 40px;
    height: 40px;
    background: no-repeat left 8px center/22px url(data:image/png;base64,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), #fff;
    bottom: 12px;
    right: 12px;
  }

  .classSpecialEvent .frameMsg .contentRight.boxRep textarea {
    padding: 12px 56px 12px 12px;
  }

  .classSpecialEvent .frameMsg .contentRight p:first-child span:last-child {
    display: block;
  }

  .classSpecialEvent .mainContentPost {
    padding: 0 !important;
  }

  .classSpecialEvent .news-detail h2 {
    font-size: 20px;
    text-align: left;
  }

  .classSpecialEvent .frameMsg .contentRight.boxRep .rep_img {
    width: 40px;
    height: 40px;
    background: no-repeat center url("/static/img/answerEvent/iconUploadImage.png"), #fff;
    bottom: 12px;
    right: 60px;
    cursor: pointer;
  }

  .classSpecialEvent .listComment .list_img .list_img_wrapper .attachment_item {
    width: 250px;
  }
}

#detailPost {
  background: no-repeat center top 30px url(/static/img/answerEvent/textureAnswerEvent.png) #f4efe4;
  background-size: 100%;
  padding-bottom: 12px;
}
#detailPost .mainContentPost {
  padding: 12px;
}
#detailPost .cardPost > h2 {
  display: inline-block;
  font-size: 18px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
}
#detailPost .cardPost .item {
  line-height: 12px;
  margin-bottom: 15px !important;
}
#detailPost .cardPost .item .iconCategory {
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 5px;
  background: #438ba3;
  color: #fff;
  border-radius: 4px;
  width: 11px;
  height: 13px;
  text-align: center;
  margin-right: 6px;
  transform: rotate(45deg);
}
#detailPost .cardPost .item a {
  margin-left: 0;
  width: auto;
  display: inline-block;
}
#detailPost .cardPost .item a:hover .iconCategory {
  background: #db9b00 !important;
  color: #262626;
}
#detailPost .danhMuc .item a {
  font-weight: bold;
}
#detailPost .danhMuc .item a a {
  margin-right: 7px;
}
#detailPost .relatedNews .item {
  line-height: inherit;
}
#detailPost .relatedNews .item img {
  margin-right: 7px;
}
#detailPost .relatedNews .item a {
  width: calc(100% - 87px);
}

#contentPost {
  text-align: justify;
}

#related_news .introPost {
  margin-bottom: 20px;
}
#related_news .introPost span {
  font-weight: bold;
}
#related_news ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 30px;
  column-gap: 15px;
  list-style: none;
  box-sizing: border-box;
}
#related_news ul li {
  display: flex;
}
#related_news ul li .thumbnailPost {
  width: 128px;
  height: 67px;
  position: relative;
}
#related_news ul li .thumbnailPost img {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: relative;
  transition: all 0.4s;
  cursor: pointer;
}
#related_news ul li .thumbnailPost .avatarText {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: relative;
  transition: all 0.4s;
  cursor: pointer;
  color: #fff;
  background: #438ba3;
  font-weight: bold;
}
#related_news ul li .thumbnailPost::before, #related_news ul li .thumbnailPost::after {
  content: "";
  width: 128px;
  height: 67px;
  display: block;
  top: 0;
  transition: all 0.4s;
}
#related_news ul li .thumbnailPost::before {
  transform: rotate(-3deg);
  z-index: 1;
  position: absolute;
  background: #e1e1e1;
}
#related_news ul li .thumbnailPost::after {
  transform: rotate(8deg);
  z-index: 0;
  position: absolute;
  background: #bbb7b7;
}
#related_news ul li .detailPost {
  width: calc(100% - 128px);
  padding-left: 15px;
}
#related_news ul li .detailPost .titlePost {
  font-weight: bold;
  transition: all 0.2s;
  cursor: pointer;
  overflow: hidden;
}
#related_news ul li .detailPost .titlePost:hover {
  color: #458da5;
}
#related_news ul li .detailPost .sortDetail {
  color: #aaaaaa;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#related_news ul li:hover .thumbnailPost img, #related_news ul li:hover .thumbnailPost .avatarText {
  transform: rotate(4deg) scale(1.1);
}
#related_news ul li:hover .thumbnailPost::after {
  transform: rotate(5deg);
}
#related_news ul li:hover .thumbnailPost::after {
  transform: rotate(-7deg);
}

@media all and (max-width: 700px) {
  #related_news ul {
    grid-template-columns: 1fr;
  }
}

.text-info1{display:flex;align-items: center;height:100%;padding-left:10px;}
.text-info1 a{font-weight:700;color:#458ea7;padding:0px 4px;}
.text-info1 a:hover{text-decoration:underline}
.mt24{margin-top:24px;}
.td-banner1{width:calc(100% - 48px);padding:24px;height:auto;overflow:hidden;background-image:url(/static/img/img_tdmode/bg-texture1.png) , linear-gradient(to right, #458ea7 , #265f8f);margin-top:52px;}
.td-center{width:100%;max-width:1152px;margin:auto;}
.td-banner1 .td-center{position:relative;overflow:hidden}
.td-info1{width:50%;position:absolute;left:0;top:50%;transform:translateY(-50%);color:#fff;text-align:center}
.td-info1 h1{font-size:46px;font-weight:800;line-height:normal}
.td-info1 p{font-size:24px;padding-top:12px;line-height:normal}
.td-box1{width:46%;position:relative}
.btn-register{padding:8px 34px;display:inline-block;text-align:center;border-radius:5px;background-color:#6ab24c;color:#fff;font-weight:700;text-transform:uppercase;border: none}
.btn-mobi{position:absolute;left:50%;transform:translateX(-50%);top:24px;display:none}

.td-body-content{width:calc(100% - 48px);padding:24px;height:auto;max-width:1152px;margin:auto;overflow:hidden}
.td-col-left{width:calc(67% - 24px);padding-right:24px;}
.td-title{text-align:center;font-size:24px;font-weight:800;text-transform:uppercase;line-height:normal;}
.td-content1 li{list-style:none;margin-top:12px;width:100%;overflow:hidden}
.td-content1 li span{width:calc(100% - 26px);float:right;display:inline-block;text-align: justify;}
.td-content1 li strong{text-transform:uppercase}

.td-content2{width:100%;height:auto;overflow:hidden;}
.td-content2 li{list-style:none;width:100%;overflow:hidden}
.td-content2 li span{padding:2px 12px;display:inline-block;font-weight:bold;text-transform:uppercase;position:relative;color:#fff;max-width:85%}
.td-yellow{background-color:#e6b713;}
.td-green{background-color:#7fa66f;}
.td-red{background-color:#e77e62;}
.td-green2{background-color:#20a28e;}
.td-blue{background-color:#385a97;}
.td-content2 li img{position:absolute;right:-12px;top:0;height:100%;width:12px;}
.td-content2 li p{text-align: justify;padding:6px 12px;}
.td-col50{width:50%;float:left;margin-top:12px;}

.td-col-right{width:calc(33% - 48px);padding:24px;height:auto;overflow:hidden;border-radius:5px;background-color:#e8eff3;text-align:center}
.td-title2{text-transform:uppercase;font-weight:800;margin-bottom:12px;text-align:center;}
.form-info{text-align:left;}
.form-info li{list-style:none;margin-bottom:12px;display:block}
.form-info input{width:calc(100% - 24px);padding:8px 12px;border:1px solid transparent;border-radius:5px;font-size: 15px;color:#828282}
.form-info p{margin-bottom:6px;}
.form-info input:focus {
    outline: none;
}
.more-face{width:78px;display:inline-block;color:#458ea7;}
.link-face{width:calc(100% - 16px);padding:6px;border:2px solid #C00;margin-bottom:12px;display:none;font-size:12px;text-overflow: ellipsis;overflow: hidden;}

.td-contact{text-transform:uppercase;font-weight:700;margin-top:12px;}
.td-contact strong{color:#458ea7;}

.td-opacity{position:fixed;width:100%;height:100%;background-color:#000000cf;top:0px;visibility:hidden;z-index:1000}
.opacity-show2{visibility:visible;}

.popup{position:fixed;width:calc(100% - 48px);padding:12px;max-width:600px;height:auto;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:9999;border-radius:10px;-webkit-transition:all ease 0.3s;background-color:#e8eff3;visibility:hidden;z-index:1001}
.popup-show{visibility:visible;transform:translate(-50%,-50%) scale(1);-transition:all ease 0.3s;}

#scroll::-webkit-scrollbar-track
{
    background-color: #fff;
}

#scroll::-webkit-scrollbar
{
    width: 5px;
    background-color: #fff;
}

#scroll::-webkit-scrollbar-thumb
{
    background-color: #afc5d2;
}
.popup {display: none}
#chooose_grade {
    font-size: 15px;
    outline: none;
    background: #fff;
    border: none;
    width: 100%;
    padding: 9px 0;
    border-radius: 4px;
    height: 35px;
    color: #333;
    font-size: 14px;
}
.focus-error-input {
    border: 1px solid #f8654e !important;
}
.popupMobile {
    display: none;
}
.form-add-question{
    display: flex !important;}




@media screen and (max-width: 960px) {.td-banner1{margin-top:46px;} .td-info1 h1{font-size:34px;} .td-col50{width:100%;}
    .td-col-left{width:100%}   .td-col-right{display:none;}
}

@media screen and (max-width: 768px){.td-info1{width:100%;position:relative;top:0;transform:translateY(0%)} .td-box1{width:100%} .btn-mobi{display:block}
    .popupMobile {
        display: block;
    }
    .td-col-right{display:none;}
    .form-info{width:100%;display:block}
    .popup {display: block}
}

@media screen and (max-width: 768px){.td-content2 li p{padding:6px 0px}}

@media screen and (max-width: 480px) {.td-info1 p{font-size:18px;} .td-banner1{width:calc(100% - 24px);padding:12px;} .td-info1 h1{font-size:24px;}
    .td-body-content{width:calc(100% - 24px);padding:12px;}
}

.aaa {color: red;}

.text-info1{display:flex;align-items: center;height:100%;padding-left:12px;}
.text-info1 a{font-weight:700;color:#458ea7;padding:0px 4px;}
.text-info1 a:hover{text-decoration:underline}
.mt24{margin-top:24px;}
.td-banner1-ctv{margin-top:52px;}
.td-center{width:100%;max-width:1152px;margin:auto;}
.td-banner1 .td-center{position:relative;overflow:hidden}
.td-info1{width:50%;position:absolute;left:0;top:50%;transform:translateY(-50%);color:#fff;text-align:center}
.td-info1 h1{font-size:46px;font-weight:800;line-height:normal}
.td-info1 p{font-size:24px;padding-top:12px;line-height:normal}
.td-box1{width:46%;position:relative}
.btn-register{border: none;padding:8px 34px;display:inline-block;text-align:center;border-radius:5px;background-color:#6ab24c;color:#fff;font-weight:700;text-transform:uppercase;}
.btn-mobi{position:absolute;left:50%;transform:translateX(-50%);top:24px;display:none}

.td-body-content{width:calc(100% - 48px);padding:24px;height:auto;max-width:1152px;margin:auto;overflow:hidden}
.td-col-left{width:calc(67% - 24px);padding-right:24px;}
.td-title{text-align:center;font-size:24px;font-weight:800;text-transform:uppercase;line-height:normal;}
.td-content1 li{list-style:none;margin-top:12px;width:100%;overflow:hidden}
.td-content1 li span{width:calc(100% - 26px);float:right;display:inline-block;text-align: justify;}
.td-content1 li strong{text-transform:uppercase}



.td-col-right{width:calc(33% - 48px);padding:24px;height:auto;overflow:hidden;border-radius:5px;background-color:#e8eff3;text-align:center}
.td-title2{text-transform:uppercase;font-weight:800;margin-bottom:12px;text-align:center;}
.form-info-ctv{text-align:left;}
.form-info-ctv li{list-style:none;margin-bottom:12px;display:block}
.form-info-ctv input{width:calc(100% - 24px);padding:10px 12px;border:0px;border-radius:5px;}
.form-info-ctv p{margin-bottom:6px;}

.more-face-ctv{display:inline-block !important;color:#458ea7;}
.link-face{width:calc(100% - 16px);padding:6px;border:2px solid #C00;margin-bottom:12px;display:none;font-size:12px;text-overflow: ellipsis;overflow: hidden;}

.td-contact{text-transform:uppercase;font-weight:700;margin-top:12px;}
.td-contact strong{color:#458ea7;}

.td-opacity{position:fixed;width:100%;height:100%;background-color:#000000cf;top:0px;visibility:hidden;z-index:1000}
.opacity-show2{visibility:visible;}



.popup{position:fixed;width:calc(100% - 48px);padding:12px;max-width:600px;height:auto;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:9999;border-radius:10px;-webkit-transition:all ease 0.3s;overflow:hidden;background-color:#e8eff3;visibility:hidden;z-index:1001}
.popup-show{visibility:visible;transform:translate(-50%,-50%) scale(1);-transition:all ease 0.3s;}

.popup {display: none}

#scroll::-webkit-scrollbar-track
{
    background-color: #fff;
}

#scroll::-webkit-scrollbar
{
    width: 5px;
    background-color: #fff;
}

#scroll::-webkit-scrollbar-thumb
{
    background-color: #afc5d2;
}

.m-ctv{display:none}

.popup {display: none}
.hidden-pc {
    display: none !important;
}

@media screen and (max-width: 960px) {.td-banner1-ctv{margin-top:46px;} .td-info1 h1{font-size:34px;} .td-col50{width:100%;}
    .td-col-left{width:100%}   .td-col-right{display:none;} .m-ctv{display:block} .pc-ctv{display:none}
    .hidden-pc {
        display: inline-block !important;
    }
    .td-contact{text-align:center}
}

@media screen and (max-width: 768px){.td-info1{width:100%;position:relative;top:0;transform:translateY(0%)} .td-box1{width:100%} .btn-mobi{display:block}
    .td-col-right{display:none;}
    .form-info-ctv{width:100%;max-height:none;overflow:auto;display:block}
    .mt24{margin-top:12px;}
    .popup {display: block;overflow: auto;  max-height: 90%;}
    .popupMobile {
        display: block;
    }
}

@media screen and (max-width: 768px){.td-content2 li p{padding:6px 0px}}

@media screen and (max-width: 480px) {.td-info1 p{font-size:18px;} .td-info1 h1{font-size:24px;}
    .td-body-content{width:calc(100% - 24px);padding:12px;}
}


.text-join-bdhh {
    text-align: center;
    color: #04556e;
    font-weight: bold;
    -webkit-text-stroke-width: thin;
    font-size: 28px;
    margin-top: 20px;
    line-height: 30px;
}

.btn-register-bdhh {
    background-color: #f8941c;
    outline: rgb(21, 117, 151) solid 1px;
    border-bottom: 2px solid rgb(21, 117, 151);
    border-radius: 7px;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 30px;
    font-weight: bold;
}

.tv-container {
    width: 760px;
    height: 490px;
    background-image: url('/static/bdhh_page/3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 20px;
}

.video-frame {
    position: absolute;
    top: 14px;
    width: 732px;
    height: 418px;
    border: none;
}

.container-rank-bdhh {
    width: 100%;
    height: 570px;
    background-image: url(/static/bdhh_page/2.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    align-self: center;
    margin-top: 40px;
}

.container-view-more {
    width: 820px;
    height: 160px;
    background-image: url(/static/bdhh_page/bg-pc-msteam.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    align-self: center;
    margin-top: 20px;
}

.container-view-more li::after {
    content: " >>";
    margin-left: 15px;
    color: #ffffff;
}

.lb-skype {
    color: #458ea7;
    font-weight: 700;
    font-size: 24px;
    margin-right: 26px;
    vertical-align: middle;
}

.ip-skype {
    padding: 10px;
    border: none;
    /* outline: none; */
    margin-right: 33px;
    width: 330px;
}

.darkMode.tr-change-color {
    color: black;
}

@media (max-width: 680px) {
    .container-input-skype {
        display: block !important;
    }

    .lb-skype {
        margin-right: 0 !important;
    }

    .ip-skype {
        margin: 12px 0 25px 0 !important;
        width: 90% !important;
    }
}

@media (max-width: 480px) {
    .text-join-bdhh {
        font-size: 24px;
        margin-top: 7px;
    }
    .tv-container {
        width: 95%;
        height: 28vh;
        background-image: url('/static/bdhh_page/9.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-self: center;
        margin-top: 20px;
    }
    .video-frame {
        position: absolute;
        top: 1px;
        width: 96%;
        height: 25vh;
        border: none;
    }

    .table-rank-bdhh {
        width: 95% !important;
        font-size: 11px;
    }
    .table-rank-bdhh th, .table-rank-bdhh td {
        padding: 5px; /* Giảm padding của các ô */
    }
    .container-view-more {
        /* width: 650px; */
        height: 210px;
        background-image: url(/static/bdhh_page/bg-mobi.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
        align-self: center;
        margin-top: 0px;
    }
    .ul-bdhh {
        margin-top: 15px !important;
        text-align: center;
        font-size: 16px !important;
        margin-right: 50px;
    }

    .content-notify-100k {
        width: 95% !important;
    }

    .content-notify-100k .header-content-popup {
        padding: 16px 15px !important;
    }

    .box-info-skype {
        width: 90% !important;
    }

    .text-copy {
        padding: 20px 15px 0px !important;
    }

    #rs-viewmore {
        font-size: 24px;
        margin-top: 24px;
    }

    .li-pc {
        margin: 10px 0 0 48px !important
    }

    .li-mobi {
        margin: 10px 0 0 57px !important
    }
}
  
.bg-image-honors {
  font-family: "Roboto Slab", serif;
  background-image: url("/static/img/update_user_100k/background-form.png");
}

.bg-image-honors .rightContent {
  background-color: #fff;
  padding: 20px;
  position: relative;
  margin-bottom: 100px;
}
.bg-image-honors .description-form-signin {
  text-align: justify;
  color: #2d768f;
  position: relative;
  display: block;
}

.bg-image-honors .description-form-signin::after {
  background-image: url("/static/img/update_user_100k/pen-form-mobi.png");
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 29px;
  right: 5px;
  bottom: -32px;
}

.form-signin-100K .title-form {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
  color: #2d768f;
  margin-top: 40px;
  line-height: 2rem;
}

.form-info-user-100K {
  margin-top: 10px;
  font-family: "Roboto Slab", serif;
  display: flex;
  flex-direction: column;
}

.form-info-user-100K input,
.form-info-user-100K select,
.form-info-user-100K textarea {
  margin-top: 16px;
  border: none;
  background-color: #91ebf5;
  height: 35px;
  font-size: 16px;
  font-family: "Roboto Slab", serif;
  padding-left: 10px;
  border-radius: 5px;
  color: #656565;
}

.form-info-user-100K textarea::placeholder {
  color: #656565;
}

.form-info-user-100K .mes-error {
  float: left;
  padding: 0 10px;
  color: red;
}

.form-signin-100K .btn-submit-info {
  background-color: #176efb;
  color: #fff;
  text-align: center;
  box-shadow: 6px 7px 3px -2px #fff568;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 20px;
  border: none;
  padding: 8px;
  width: 150px;
  font-family: "Roboto Slab", serif;
  margin: 40px auto 0;
  cursor: pointer;
  display: block;
}

.form-signin-100K .input-file {
  margin-top: 15px;
  cursor: pointer;
}

.bg-image-honors .rightContent::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  background-image: url("/static/img/update_user_100k/background-footer-form.png");
  height: 112px;
  left: 0;
  bottom: -100px;
}

.bg-image-honors .description-share {
  display: block;
  text-align: justify;
  margin-top: 12px;
  color: #262626;
}

.bg-image-honors .form-info-user-100K textarea {
  padding-top: 10px;
  padding-bottom: 55px;
}

.form-info-user-100K select {
  cursor: pointer;
}

select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: none;
}

.form-info-user-100K .btn-close {
  cursor: pointer;
  position: relative;
  top: 0;
  right: 0;
  /* background-color: #fff; */
  /* border-radius: 50px; */
  /* width: 15px;
  height: 15px; */
}

/* Tablet - PC */
@media screen and (min-width: 640px) {
  .bg-image-honors .rightContent {
    padding: 45px;
  }
  .bg-image-honors .block-form-signin-100k {
    padding: 0 65px;
  }
  .bg-image-honors .form-signin-100K {
    padding: 0 45px;
  }

  .bg-image-honors .description-form-signin::after {
    background-image: url("/static/img/update_user_100k/pen-form.png");
    width: 82px;
    height: 70px;
    right: -62px;
    bottom: 0px;
  }
}

/* Darkmode */

.darkMode .bg-image-honors {
  background-image: url("/static/img/update_user_100k/background-form-darkmode.png");
  border-radius: none;
}

.darkMode .bg-image-honors .rightContent {
  background-color: #272c2d;
}

.darkMode .bg-image-honors .rightContent::after {
  background-image: url("/static/img/update_user_100k/background-footer-form-darkmode.png");
}

.darkMode .form-info-user-100K input,
.darkMode .form-info-user-100K select,
.darkMode .form-info-user-100K textarea {
  background-color: #293437;
  border: none;
}

.darkMode .form-info-user-100K input,
.darkMode .form-info-user-100K input::placeholder,
.darkMode .form-info-user-100K textarea::placeholder,
.darkMode .form-info-user-100K select {
  color: #7cc6cf;
  font-size: 16px;
}

.darkMode .description-form-signin,
.darkMode .bg-image-honors .description-share {
  color: #fff;
}

.darkMode .form-signin-100K .title-form {
  color: #fff799;
}

.darkMode .form-info-user-100K input,
.darkMode .form-info-user-100K select,
.darkMode .form-info-user-100K textarea {
  color: #91ebf5;
}

.guildBody * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 15px;
}
.guildBody .fl {
  float: left;
}
.guildBody .fr {
  float: right;
}
.guildBody .clear {
  clear: both;
}
.guildBody .dnone {
  display: none !important;
}
.guildBody .bold {
  font-weight: 700;
}
.guildBody .bgYellow {
  background: #f2ba08 !important;
}
.guildBody .bgBlueBlur {
  background: #478fa8 !important;
}
.guildBody .bgSilver {
  background: #999 !important;
}
.guildBody {
  margin-top: 52px;
  background: #eceff1;
  padding: 24px 0;
  position: relative;
}
.guildBody .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.guildBody .card {
  background: #fff;
  border-radius: 7px;
  padding: 24px;
  margin-bottom: 22px !important;
}
.guildBody .btnViewMore,
.guildBody .card {
  width: 686px;
  margin: 0 auto;
}
.guildBody .btnCommon {
  padding: 5px 14px;
  border-radius: 5px;
  display: inline-block;
}
.guildBody .ownerName {
  color: #262626;
}
.guildBody .header {
  display: flex;
  margin-bottom: 24px;
}
.guildBody .header .btnCommon {
  color: #262626;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAATdJREFUeNrM1D1LHGEUBeBnxUJRLCI2VmLhEMEiTaooIogg4g8QFKsIglbGKoVFSgthUbSyEUERbCzERiGkshC0WpGwCEmpRSKIyI7NXVjZD1m08MCFlzPvPXPuncNk0jT1WjR4AzQWD0mSvHR3EQvRk8VSLpdLn4m8gGF8xRc84AAX2KtnnAFs4xJ5bAZXcyd9+I5pNOMq3LSgCaPBVRXpxzE6MIEj/EKCP/iLzzgsW2wJvmE+7GdwijOsReMjRrCDT9VE2vAvzin+YyZEi/gZ41Z1soFVdKMXndivJ2w9mA1+CB/RjsmSO1torRi2ePMJfmAdheC7oooYw4cYs8xJFsuxwEIJnw/xXdzEzs6jypwMYq7G6FORmXzE4HclJyvIxRcprfF4fo9bXEde7oqNmXfzK3gaANh/Rq08qlyMAAAAAElFTkSuQmCC)
      no-repeat 14px,
    #f2ba08;
  padding: 5px 14px 5px 35px;
}
.guildBody .header .searchBox {
  display: flex;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  width: 270px;
  padding: 5px 10px;
  margin-left: 10px;
}
.guildBody .header .searchBox .txtSearch {
  border: none;
  width: 100%;
  outline: 0;
  color: #262626;
  padding-right: 10px;
}
.guildBody .header .searchBox .txtSearch::placeholder {
  color: #999;
}
.guildBody .header .searchBox .btnSearch {
  width: 17px;
  height: 17px;
  background: url(data:image/png;base64,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)
    no-repeat center;
  margin-top: 2px;
}
.guildBody .listGuild .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 16px;
}
.guildBody .listGuild .item:last-child {
  margin-bottom: 0;
}
.guildBody .listGuild .leftContent {
  width: 75%;
  display: block;
  color: #262626;
}
.guildBody .listGuild .rightContent {
  margin-left: 16px;
  margin-top: -5px;
  width: calc(100% - 50px);
}
.guildBody .listGuild .rightContent .scoresAndMember span:not(.spaceLine) {
  color: #999;
  display: inline-block;
  position: relative;
  padding-right: 15px;
}
.guildBody .listGuild .rightContent .scoresAndMember span:last-child {
  margin-left: 15px;
}
.guildBody .listGuild .rightContent .spaceLine {
  display: block;
  width: 2px;
  height: 12px;
  background: #999;
  position: absolute;
  right: 0;
  top: 6px;
}
.guildBody .listGuild .avatar {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  position: relative;
}
.guildBody .listGuild .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.guildBody .listGuild .avatar .countMember {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2ba08;
  color: #262626;
  font-size: 10px;
  border-radius: 50px;
  position: absolute;
  border: 1px solid #fff;
  bottom: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  font-weight: 700;
}
.guildBody .listGuild .groupBtn {
  width: 25%;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.guildBody .listGuild .groupBtn a {
  color: #fff;
  background: #478fa8;
}
.guildBody .listGuild .groupBtn .disable {
  color: #fff;
  background: #999999;
}
.guildBody .btnViewMore {
  color: #468fa8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guildBody .btnViewMore i.arrowRight {
  width: 17px;
  height: 17px;
  display: block;
  background: url(data:image/png;base64,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)
    no-repeat center;
  margin-left: 6px;
}
.guildDesc .headAvatar {
  margin-bottom: 24px;
}
.guildDesc .headAvatar .avatar {
  width: 74px;
  height: 74px;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}
.guildDesc .headAvatar .listCount {
  width: calc(100% - 97px);
  margin-left: 23px;
}
.guildDesc .headAvatar .listCount li {
  list-style: none;
  margin-bottom: 12px;
}
.guildDesc .headAvatar .listCount li:not(.guildName) {
  padding-left: 15px;
  background: url(data:image/png;base64,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)
    left 8px no-repeat;
}
.guildDesc .headAvatar .listCount li:last-child {
  margin-bottom: 0;
}
.guildDesc .alertAndOption {
  margin-bottom: 24px;
}
.guildDesc .alert {
  padding: 8px 17px;
  background: #8dc354;
  color: #fff;
  border-radius: 7px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
}
.guildDesc .alert span {
  display: inline-block;
  width: calc(100% - 60px);
}
.guildDesc .alert a {
  display: block;
  width: 60px;
  text-align: center;
  color: #fff;
}
.guildDesc .confirm .btnCommon {
  background: #8dc354;
  color: #fff;
  margin-left: 12px;
}
.guildDesc .listGuild .rightContent .scoresAndMember span:last-child {
  margin-left: 0;
}
.guildDesc .tabs {
  margin-bottom: 12px;
}
.guildDesc .tabs .tab {
  display: inline-block;
  text-align: center;
  padding: 6px 3px;
  color: #262626;
  margin-right: 20px;
}
.guildDesc .tabs .active {
  border-bottom: 3px solid #f2ba08;
  color: #f2ba08;
  font-weight: 700;
}
.guildDesc .listGuild .groupBtn .btnCommon:last-child {
  margin-left: 8px;
}
.guildDesc .card {
  margin-bottom: 0 !important;
}
.guildBody .overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #00000066;
  z-index: 10000000;
}
.guildBody .wrapPupup {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000001;
  width: 100%;
  height: 100%;
}
.guildBody .popUpCreateGuild {
  width: 515px;
  padding: 28px 24px 24px;
  background: #fff;
  position: relative;
  border-radius: 7px;
}
.guildBody .popUpCreateGuild .title {
  font-size: 24px;
  color: #8dc354;
  margin-bottom: 18px;
  font-weight: 900;
  text-align: center;
}
.guildBody .popUpCreateGuild .txtInput {
  margin-bottom: 20px;
}
.guildBody .popUpCreateGuild .txtInput label {
  display: block;
  margin-bottom: 12px;
}
.guildBody .popUpCreateGuild .txtInput input {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 12px 14px;
  outline: 0;
  width: 100%;
}
.guildBody .popUpCreateGuild .txtInput input::placeholder {
  columns: #999;
}
.guildBody .popUpCreateGuild .selectInput {
  height: 30px;
  padding: 2px;
  border-radius: 4px;
}
.guildBody .popUpCreateGuild .checkConfirm {
  margin-bottom: 21px;
}
.guildBody .popUpCreateGuild .checkConfirm label a {
  color: #8dc354;
  text-decoration: underline;
}
.guildBody .popUpCreateGuild .checkConfirm input {
  border: 1px solid #e1e1e1;
  padding: 3px;
}
.guildBody .popUpCreateGuild .btnPopup {
  display: block;
  width: 104px;
  margin: 0 auto;
  color: #262626;
  background: #f2ba08;
}
.guildBody .popUpCreateGuild .btnPopupConfirm {
  display: inline-block;
  width: 104px;
  margin: 0 10px;
  color: #262626;
}
.guildBody .popUpCreateGuild .btnAccept {
  background: #f2ba08;
}
.guildBody .popUpCreateGuild .btnCancle {
  background: #ddd;
}
.guildBody .popUpConfirm {
  text-align: center;
}
.guildBody .wrapCheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.guildBody .listQuest .avatar .countMember {
  width: 24px;
  height: 24px;
  font-size: 13px;
  bottom: unset;
  right: unset;
}
.guildBody .listQuest .rightContent {
  margin-left: 12px;
  position: relative;
}

.board-container {
  /* width: 800px; */
  margin: 20px auto;
  background-color: #14573a;
  border: 5px solid #a55f20;
  /* border-radius: 5px; */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  border-top: 5px solid #db995c;
  border-bottom: 5px solid #db995c;
}

.board-body {
  position: relative;
  padding: 0px 10px 10px 15px;
  color: white;
  font-family: "Arial", sans-serif;

  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
}

.stt-owner-text {
  border-bottom: 1px solid;
  width: fit-content;
  padding: 0px 5px 0px 5px;
}

.board-header .board-top,
.board-footer .board-bottom {
  height: 20px;
  background-color: #b87333;
}

.board-body h2 {
  margin: 0 0 20px 0;
  font-size: 28px;
  text-align: center;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

.board-body p {
  font-size: 15px;
  line-height: 1.3;
  margin: 5px 0;
}

.board-content {
  text-align: left;
}
.guildBody .listQuest .rightContent .box-info-mission {
  position: absolute;
  top: 0;
  right: -10px;
  padding: 2px;
}
.guildBody
  .listQuest
  .rightContent
  .box-info-mission
  .special-rank
  .icon-g-type {
  opacity: 0.6 !important;
  box-sizing: content-box;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
}
.guildBody .listQuest .rightContent .box-info-mission .special-rank span {
  left: unset !important;
  right: 10px;
  top: -25px;
}
.guildBody .listQuest .avatar {
  width: 25px;
}
.guildBody .listQuest .leftContent {
  width: 100%;
}
.guildBody .wrapCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.guildBody .checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 25px;
  width: 25px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
}
.guildBody .wrapCheck:hover input ~ .checkmark {
  background-color: #ccc;
}
.guildBody .wrapCheck input:checked ~ .checkmark {
  background-color: #8dc354;
}
.guildBody .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.guildBody .wrapCheck input:checked ~ .checkmark:after {
  display: block;
}
.guildBody .wrapCheck .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.guildBody .close {
  width: 15px;
  height: 15px;
  display: block;
  background: url(data:image/png;base64,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)
    no-repeat center;
  position: absolute;
  right: 12px;
  top: 12px;
}
@media all and (max-width: 768px) {
  .guildBody {
    margin-top: 47px;
  }
  .guildBody .container {
    padding: 0 12px;
  }
  .guildBody .btnViewMore,
  .guildBody .card,
  .guildBody .listGuild .groupBtn,
  .guildBody .listGuild .leftContent {
    width: 100%;
  }
  .guildBody .card {
    padding: 12px;
  }
  .guildBody .listGuild .leftContent {
    margin-bottom: 9px;
  }
  .guildBody .header .btnCommon {
    width: 128px;
  }
  .guildDesc .listGuild .leftContent {
    width: 60%;
    margin-bottom: 0;
  }
  .guildDesc .listGuild .groupBtn {
    width: 40%;
  }
}
@media all and (max-width: 425px) {
  .h247-footer {
    margin-top: 0 !important;
  }
  .guildBody {
    padding: 12px 0;
    position: relative;
  }
  .guildBody .listGuild .rightContent .scoresAndMember span:not(.spaceLine) {
    padding-right: 9px;
  }
  .guildBody .listGuild .rightContent .scoresAndMember span:last-child {
    padding-right: 0;
  }
  .guildBody .card {
    margin-bottom: 12px !important;
  }
  .guildBody .header .searchBox {
    width: calc(100% - 128px);
    margin-top: 10px;
  }
  .guildBody .header {
    flex-wrap: wrap;
    justify-content: center;
  }
  .guildBody .btnViewMore {
    box-shadow: 0 0 4px 0 #ece0e0;
  }
  .guildDesc .alert span {
    width: 100%;
    margin-bottom: 3px;
  }
  .guildDesc .headAvatar .listCount {
    width: 100%;
    margin-left: 0;
  }
  .guildDesc .headAvatar .blockAvatar {
    width: 100%;
    margin-bottom: 12px;
  }
  .guildDesc .headAvatar .avatar {
    margin: 0 auto;
  }
  .guildDesc .headAvatar .listCount li.guildName {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
  }
  .guildDesc .alertAndOption .confirm {
    text-align: center;
  }
  .guildDesc .confirm .btnCommon {
    margin: 7px 0 0;
  }
  .guildDesc .alert {
    display: block;
  }
  .guildDesc .alert a {
    width: 33px;
    margin: 0 auto;
    border-bottom: 1px dashed;
  }
  .guildDesc .alertAndOption .confirm span {
    display: block;
  }
  .guildDesc .listGuild .groupBtn,
  .guildDesc .listGuild .leftContent {
    width: 100%;
  }
  .guildBody .popUpCreateGuild {
    width: calc(100% - 24px);
    padding: 30px 12px 12px;
    background: #fff;
    position: relative;
    border-radius: 7px;
  }
  .guildBody .popUpCreateGuild .title {
    font-size: 18px;
  }
  .close {
    right: 8px;
    top: 8px;
  }
}
@media all and (max-width: 375px) {
  .guildDesc .tabs .tab {
    margin-right: 10px;
  }
}
@media all and (max-width: 359px) {
  .guildBody .listGuild .rightContent .scoresAndMember span:not(.spaceLine) {
    font-size: 12px;
  }
  .guildBody .listGuild .rightContent .spaceLine {
    width: 1px;
    height: 10px;
  }
}
@media all and (max-width: 320px) {
  .guildBody .listGuild .rightContent .scoresAndMember span:last-child {
    margin-left: 9px;
  }
  .guildDesc .listGuild .rightContent .scoresAndMember span:last-child {
    margin-left: 0;
  }
  .guildDesc .tabs {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }
  .guildDesc .tabs .tab {
    margin-right: 0;
  }
}
.guildDesc .leaveGuild {
  text-align: right;
}
.guildDesc .leaveGuild a {
  color: #8dc354;
}
.guildDesc .franchiseOwner a {
  color: #8dc354;
}
.guildDesc .mission strong {
  font-size: 12px;
  font-weight: 500;
  padding-right: 12px;
}
.guildDesc .mission strong span {
  margin-bottom: 4px;
  display: inline-block;
  font-size: 12px;
}

.m-process {
  border: 1px solid #00c0ef !important;
  background-color: #edfdfd;
}

.listGuild .more-gage {
  margin-right: -8px;
}

.thanh-tich-div {
  display: flex;
  flex-direction: column;
  padding-right: 17px;
  align-items: center;
  width: 25%;
  margin-top: 12px;
}

.thanh-tich-img {
  height: 94px;
}

.thanh-tich-img img {
  width: 94px;
  opacity: 0.8;
}

.thanh-tich-img img:hover {
  width: 96px;
  opacity: 1;
  transition: all 500ms;
  transform: scale(1);
}

.thanh-tich-label {
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
}

.thanh-tich-content {
  font-size: 11px;
  overflow: 0.4;
  text-align: center;
  line-height: 1.8;
}

@media screen and (max-width: 480px) {
  .thanh-tich-div {
    width: 33%;
    padding-right: 8px;
  }

  .thanh-tich-img {
    height: 72px;
  }

  .thanh-tich-img img {
    width: 72px;
    opacity: 1;
  }

  .thanh-tich-label {
    font-size: 13px;
  }
}

/** Style list subject */
.s-active {
    background-color: #e7b712;
}
/* css qiuestion */
.icon-event {
    overflow: hidden;
    background-image: url(/static/img/icon-report.png);
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #ffddd9;
    border-radius: 50%;
    padding: 5px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: 4px -17px;
    background-size: 15px;
}
#flowerEffectCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
  }
.icon-event-spearker {
    overflow: hidden;
    /* background-image: url(/static/img/megaphone.png); */
    width: 25px;
    height: 25px;
    display: inline-block;
    /* background-color: #ffddd9; */
    /* border-radius: 50%; */
    /* padding: 5px; */
    margin-right: 10px;
    /* background-repeat: no-repeat; */
    /* background-position: 6px -15px; */
    /* background-size: 14px; */
}
.event-banner-mobile {
    margin: 0px 12px;
    padding: 12px;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    display: none;
    -webkit-text-size-adjust: none;
    /* text-size-adjust: unset; */
}
.box-question {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1
}

.notFoundQuestion{
    margin-top: 100px;
    border:none;
    text-align: center;
}
.notFoundQuestion h2{
    color:#ccc
}
.notFoundQuestion p{
    text-align:center;
    color:#458ea7;
    display:inline-block;
    margin-top:15px
}

.h-question {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e1;
}

.img-userq {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden
}

.form-question {
    width: calc(100% - 4.4rem)
}

.form-question a {
    color: #262626;
}

.form-question a:hover {
    text-decoration: underline;
}

.info-question1 {
    width: 100%;
    height: auto;
}

.info-question1 ul li:not(:last-child) {
    /* float: left; */
    list-style: none;
    padding-right: 8px
}

.info-question1 ul li span {
    font-weight: 700;
    color: #458ea7;
}

.info-question1 ul li:nth-child(6) img {
    margin-right: 4px;
    -webkit-transform: translateY(-2px)
}

.info-question1 ul li:nth-child(6) span {
    color: #262626;
    font-weight: 400;
}

.user-check {
    width: 32px;
    height: 32px;
    position: relative
}

.check-u {
    position: absolute;
    bottom: -5px;
    right: -5px;
}

.btn-answer {
    padding: 4px 30px;
    display: inline-block;
    border: 1px solid #458ea7;
    color: #458ea7;
    border-radius: 5px;
}

.btn-answer:hover {
    background-image: linear-gradient(#6ab5cf, #468fa8);
    color: #fff;
    text-decoration: none!important;
}

.btn-showmore {
    padding: 6px 24px;
    display: block;
    border-radius: 5px;
    text-align: center;
    color: #458ea7;
}

.btn-showmore:hover {
    background-color: #f1f1f1;
}

.btn-showmore span {
    padding-right: 6px;
}

.btn-padding {
    padding: 12px 0px;
}

/* css top user */

.col-right {
    padding-left: 24px;
    overflow: hidden
}

.col-right h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    color: #458ea7;
    font-weight: 800;
}

.h-select {
    position: relative;
    width: 100%;
    height: 35px;
}

.dropdown-el {
    width: 150px;
    position: absolute;
    top: 0;
    display: inline-block;
    min-height: 2em;
    max-height: 2em;
    overflow: hidden;
    top: .5em;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    color: #444;
    outline: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
    border: .06em solid transparent;
    border-radius: 1em;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    transition: 0.3s all ease-in-out;
    z-index: 998;
}

.dropdown-el input {
    display: none;
}

.dropdown-el label {
    border-top: .06em solid #d9d9d9;
    display: block;
    height: 2em;
    line-height: 2em;
    padding-left: 1em;
    padding-right: 3em;
    cursor: pointer;
    position: relative;
    transition: 0.3s color ease-in-out;
}

.select-filter-time {
    outline: none;
    font-size: 14px;
    display: block;
    margin: 6px auto;
    padding: 8px 30px 8px 10px;
    background: #fff;
    border-radius: 15px;
    border: 1px solid #e1e1e1;
}

.dropdown-el input:checked+label {
    display: block;
    border-top: none;
    position: absolute;
    top: 0;
}

.dropdown-el input:checked+label:nth-child(2) {
    margin-top: 0;
    position: relative;
}

.dropdown-el::after {
    content: "";
    position: absolute;
    right: 0.8em;
    top: 0.9em;
    border: 0.3em solid #458ea7;
    border-color: #262626 transparent transparent transparent;
    transition: .4s all ease-in-out;
}

.dropdown-el.expanded {
    border: 0.06em solid #458ea7;
    background: #fff;
    border-radius: .25em;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
    max-height: 15em;
}

.dropdown-el.expanded label {
    border-top: .06em solid #d9d9d9;
}

.dropdown-el.expanded label:hover {
    color: #458ea7;
}

.dropdown-el.expanded input:checked+label {
    color: #458ea7;
}

.dropdown-el.expanded::after {
    transform: rotate(-180deg);
    top: .55em;
}

.list-ardor ul li {
    list-style: none;
    padding-top: 12px;
}

.ardor-child {
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ardor-child strong {
    text-align: right;
    flex: 1;
}

.btn-showmore2 {
    color: #458ea7;
}

.btn-showmore2 span {
    padding-right: 6px;
}

.btn-showmore2:hover {
    font-weight: 700;
    text-decoration: underline
}

.box-banner2 {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
}

.box-banner2 h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 42px!important;
}

/* css button add question*/

.add-question {
    padding-left: 24px;
}

.add-question h3 {
    text-align: center;
}
.homeFloatingAds {
    position: fixed;
    right: 20px;
    z-index: 999;
    top: 40%;
}
.btn-add-ques {
    padding: 12px;
    display: block;
    background-color: #e7b712;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
}

.btn-add-ques:hover {
    background-color: #db9b00;
    -webkit-transition: all ease 0.3s;
}

.btn-add-ques img {
    margin-right: 6px;
}

.new-showmore {
    padding: 6px 24px;
    display: block;
    border-radius: 5px;
    text-align: center;
    color: #fff;
}

.new-showmore {
    padding: 6px 24px;
    display: block;
    border-radius: 5px;
    text-align: center;
    color: #fff;
}


.user-check #wave {
    position: relative;
    text-align: center;
    padding: 4px 0 6px 0;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    top: -32px;
    opacity: 0.7;
}
.user-check .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 2px;
    background: #0a3b84;
    animation: wave 1s linear infinite;
}
.user-check .dot:nth-child(2) {
     animation-delay: -0.9s;
}
.user-check .dot:nth-child(3) {
     animation-delay: -0.7s;
}
.crop-img {
    width: 100%;
    height: calc(100% - 120px);
}
.crop-img>div:first-child {
    height: 100%;
    background-color: #000000a1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.crop-img img {
    margin: 0 auto;
}
.crop-img .ReactCrop__crop-selection {
    border: 1px solid #2c8fe2;
    border-image: none;
}
.crop-img .ReactCrop__drag-handle::after {
    background: none;
    width: 20px;
    height: 20px;
    border: none;
}
.crop-img .ord-se {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    bottom: -15px !important;
    right: -15px !important;
    justify-content: center;
}
.crop-img .ord-s {
    width: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    bottom: -15px !important;
}
.crop-img .ord-sw {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    bottom: -15px !important;
    left: -15px !important;
    justify-content: center;
}
.crop-img .ord-w {
    width: 50px;
    height: 20px;
    display: flex;
    left: -15px !important;
    justify-content: center;
}
.crop-img .ord-nw {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    top: -15px !important;
    left: -15px !important;
    justify-content: center;
}
.crop-img .ord-n {
    width: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    top: -15px !important;
}
.crop-img .ord-ne {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    top: -15px !important;
    right: -15px !important;
    justify-content: center;
}
.crop-img .ord-e {
    width: 50px;
    height: 20px;
    display: flex;
    right: -15px !important;
    justify-content: center;
}
.crop-img .ord-nw::after {
    border-top: 5px solid #2c8fe2;
    border-left: 5px solid #2c8fe2;
    top: unset !important;
    left: unset !important;
}
.crop-img .ord-n::after {
    border-top: 5px solid #2c8fe2;
    top: unset !important;
}
.crop-img .ord-ne::after {
    border-top: 5px solid #2c8fe2;
    border-right: 5px solid #2c8fe2;
    top: unset !important;
    right: unset !important;
}
.crop-img .ord-e::after {
    border-right: 5px solid #2c8fe2;
    right: unset !important;
}
.crop-img .ord-se::after {
    border-right: 5px solid #2c8fe2;
    border-bottom: 5px solid #2c8fe2;
    bottom: unset !important;
    right: unset !important;
}
.crop-img .ord-s::after {
    border-bottom: 5px solid #2c8fe2;
    bottom: unset !important;
}
.crop-img .ord-sw::after {
    border-bottom: 5px solid #2c8fe2;
    border-left: 5px solid #2c8fe2;
    bottom: unset !important;
    left: unset !important;
}
.crop-img .ord-w::after {
    border-left: 5px solid #2c8fe2;
    left: unset !important;
}
/* Style from Tungld */
#result_search_img p > a:first-child{
    background: #f1f1f19c;
    padding: 10px;
    min-height: 73px;
    max-height: 120px;
    overflow: hidden;
    position:relative;
    border-radius: 5px;
    display:block;
    color: #262626!important;
}
#result_search_img p > a:first-child::after{
    content:"";
    height: 30px;
    width: 100%;
    background-image: linear-gradient(#ffffff29,#ffffff 99%);
    position: absolute;
    bottom:0;
    left:0;
}
/* #result_search_img .search-result .pc24 > div.pt24 {
    padding-top:0;
} */
@media (pointer: coarse) {
    .crop-img .ord-n {
        display: flex !important;
    }
    .crop-img .ord-e {
        display: flex !important;
    }
    .crop-img .ord-s {
        display: flex !important;
    }
    .crop-img .ord-w {
        display: flex !important;
    }
}
@keyframes wave {
    0%{
        opacity: 1
    }
    50%{opacity:1}
    0%, 60%, 100% {
        transform: initial;
    }
    30% {
        transform: translateY(-8px);
    }
    100%{opacity: 1}
}
@media screen and (max-width: 960px) {
    .btn-showmore{
        margin: 12px;
    }
    .event-banner-mobile { display: block; }
    .notFoundQuestion{
        margin: 100px 0;
    }
    .notFoundQuestion h2{
        font-size: 16px;
    }
    .notFoundQuestion p{
        font-size: 14px;
        padding: 0 50px;
    }
    
}

.react-sweet-progress {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%; }

.react-sweet-progress-symbol {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: start;
      justify-content: flex-start;
  width: 35px;
  height: 20px;
  padding-left: 10px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 200; }

.react-sweet-progress-symbol-absolute {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  transform: translate3d(-50%, -50%, 0); }
  .react-sweet-progress-symbol-absolute .react-sweet-progress-symbol {
    padding: 0;
    width: 100%; }

.react-sweet-progress-circle-outer {
  position: relative;
  display: inline-block;
  vertical-align: middle; }
.react-sweet-progress-line {
  width: 100%;
  border-radius: 100px;
  background-color: #efefef;
  vertical-align: middle; }
  .react-sweet-progress-line-inner {
    position: relative;
    min-height: 10px;
    border-radius: 100px;
    transition: width 0.3s ease; }

.react-sweet-progress-line-inner-status-active:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  background: #fff;
  animation: active-anim 2s cubic-bezier(0.25, 1, 0.6, 1) infinite;
  content: "";
  opacity: 0; }

@keyframes active-anim {
  0% {
    width: 0;
    opacity: .1; }
  20% {
    width: 0;
    opacity: .5; }
  to {
    width: 100%;
    opacity: 0; } }
.react-sweet-progress-circle path {
  stroke-linecap: round; }

.wrapMessenger{position:fixed;width:100%;height:100%;z-index:2;background:#eceff1}
.meMessenger{width:100%;max-width:1119px;height:80%;margin:36px auto 0;background:#fff;border-radius:5px}
.meMessenger *{box-sizing:border-box}
.meMessenger .fl{float:left}
.meMessenger .fr{float:right}
.meMessenger .bold{font-weight:700}
.meMessenger .clear{clear:both}
.meMessenger .left{width:40%;height:100%;overflow-y:scroll}
.meMessenger .right{width:60%;height:100%;position:relative}
.meMessenger .left .item{position:relative;display:block;padding:12px;border-bottom:1px dotted #eee}
.meMessenger .bgGreenBlur,.meMessenger .left .item:hover{background:#e0eef3}
.meMessenger .avatar{width:45px;height:45px;background:#fff;border:1px solid #eee;padding:4px;border-radius:10px;position:relative}
.meMessenger .no-border {border: unset}
.meMessenger .avatar img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.meMessenger .left .item .info{margin-left:10px;font-size:15px;color:#262626;width:calc(100% - 55px)}
.meMessenger .left .item .timeChat{font-size:13px;color:#aaa;display:flex;align-items:center;margin-top:-4px}
.meMessenger .left .item .shortMsg{display:inline-block;width:calc(100% - 20px);white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis}
.meMessenger .left .item .timeChat .iconClock{margin-right:5px;width:12px;height:12px;display:inline-block;background:url(data:image/png;base64,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) no-repeat center}
.meMessenger .lightBlue{width:10px;height:10px;border-radius:50%;background:#09f;position:absolute;right:12px;top:40px}
.meMessenger .lightGreen{width:10px;height:10px;border-radius:50%;background:#8dc354;position:absolute;right:-1px;top:33px;z-index:10}
.meMessenger .right .topIntro{display:flex;align-items:center;border-bottom:1px solid #eee;padding:12px 0 7px 12px;height:65px;position:absolute;width:100%;background:#fff;z-index:3}
.meMessenger .right .topIntro .accountName{margin-left:8px}
.meMessenger .right .boxChat{padding:12px;overflow:auto;height:calc(100% - 186px);margin-top:65px}
.meMessenger .right .boxChat .item{margin-bottom:2px}
.meMessenger .right .boxChat .last {margin-bottom:20px !important;}
.meMessenger .right .boxChat .item .avatar{width:30px;height:30px;padding:0;border-radius:50%;overflow:hidden}
.meMessenger .right .boxChat .item .avatar img{border-radius:0;width:30px;height:30px}
.meMessenger .right .boxChat .item .messeger{max-width:calc(80% - 32px)}
/*.meMessenger .right .boxChat .msgYou .messeger{margin-left:12px;padding:8px 10px;border-radius:0 15px 15px;background:#e0eef3;float:left}*/
/*.meMessenger .right .boxChat .msgMe .messeger{padding:10px;border-radius:15px 0 15px 15px;background:#ececec;float:right}*/
.meMessenger .right .boxChat .item .messeger img{margin:5px 0;border-radius:7px}
.meMessenger .right .boxChat .item .messeger a{text-decoration:underline}
.meMessenger .inputMsgBox{padding:12px 12px 9px;height:121px;width:100%;background:#fff}
.meMessenger .inputMsgBox textarea{width:100%;padding:12px;font-size:15px;font-family:'Open Sans',sans-serif;border:none;background:#e8f3f6;resize:none;outline:0;height:95px;border-radius:15px}
::-webkit-scrollbar{width:6px;cursor:move}
::-webkit-scrollbar-track{background:#dfdfdf;cursor:move}
::-webkit-scrollbar-thumb{background:#a7a7a7;cursor:move}
::-webkit-scrollbar-thumb:hover{background:#555;cursor:move}
.meMessenger .btnBack{display:none}

.msgYou .msgHeader {margin-left:12px;padding:8px 10px;border-radius:20px 20px 20px 5px;background:#e0eef3;float:left}
.msgYou .msgBody {margin-left:12px;padding:8px 10px;border-radius:5px 20px 20px 5px;background:#e0eef3;float:left}
.msgYou .msgBottom {margin-left:12px;padding:8px 10px;border-radius:5px 20px 20px 20px;background:#e0eef3;float:left}
.msgYou .msgOnlyOne {margin-left:12px;padding:8px 10px;border-radius:20px 20px 20px 20px;background:#e0eef3;float:left}

.msgMe .msgHeader {padding:8px 10px;border-radius:20px 20px 5px 20px;background:#ececec;float:right}
.msgMe .msgBody {padding:8px 10px;border-radius:20px 5px 5px 20px;background:#ececec;float:right}
.msgMe .msgBottom {padding:8px 10px;border-radius:20px 5px 20px 20px;background:#ececec;float:right}
.msgMe .msgOnlyOne {padding:8px 10px;border-radius:20px 20px 20px 20px;background:#ececec;float:right}

.quickChat {
    display: flex;
    align-items: center;
    position: relative;
}
.quickChat .iconMsg{
    background:no-repeat center url('data:image/png;base64,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');
    width: 25px;
    height: 25px;
    display: block;
    position: relative;
}
.quickChat .iconMsg .countMsg{
    width:17px;
    height: 17px;
    background: #ff5c03;
    border-radius: 50px;
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    position: absolute;
    right:-6px;
    top:-6px;

}
.quickChat .meMessenger{
    background:transparent;
    width: 395px;
    height: auto;
    position: absolute;
    top: 17px;
    left: -139px;
    border: 1px solid #468fa8;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
}
.quickChat .meMessenger .left{
    width: 100% !important;
    height: auto;
    max-height: 368px;
    background: #fff;
}
.quickChat .meMessenger .btnShowAll{
    background: #fff;
    text-align: center;
    width: 100%;
    padding: 12px 0;
}
.quickChat .meMessenger .btnShowAll a{
    background: #468fa8;
    text-align: center;
    color:#fff;
    padding:6px 20px;
    border-radius: 7px;
    display: inline-block;
}
.quickChat .arrow{
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid #448da6;
    position: absolute;
    bottom: 0;
    left: 6px;
}


/* Tooltip container */
.msg-tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black; !* If you want dots under the hoverable text *!*/
}

/* Tooltip text */
.msg-tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

.tooltip-top{
    bottom: 125%;
    left: 50%;
    /*margin-left: -60px;*/
}
.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.disableChat {
    right: 25px;
    width: 16px;
    cursor: pointer;
    margin-left: 6px;
}

.showTime {
    display: block;
    font-weight: 500;
    margin: 12px 0 12px 20px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .40);
    text-align: center;
    font-size: 12px
}

.inputMsgBox .tox .tox-edit-area {
    border-top: unset;
    border-radius: 10px;
}
.inputMsgBox .tox .tox-edit-area__iframe {
    background-color: #e8f3f6;
}

/* Show the tooltip text when you mouse over the tooltip container */
.msg-tooltip:hover .tooltiptext {
    visibility: visible;
}

.msgMe .msg-tooltip .tooltip-top:after {
    left: auto;
    right: 10px;
}

.msgMe .tooltip-top {
    left: auto;
    right: -2px;
}

.msgYou .msg-tooltip .tooltip-top:after {
    right: auto;
    left: 10px;
}

.msgYou .tooltip-top {
    right: auto;
    left: -2px;
}

@media all and (max-width:1024px){
    .meMessenger{width:calc(100% - 24px)}
    .quickChat .listUserMsg {
        left:unset;
        right: 0;
        position: fixed;
        width: 310px;
    }
}
@media all and (max-width:768px){
    .quickChat *{
        font-size: 14px;
    }
    .meMessenger .left .item .timeChat{
        font-size: 12px;
    }
    .meMessenger .left .item {
        position: relative;
        display: block;
        padding: 6px 12px;
    }
}
@media all and (max-width:450px){.meMessenger{width:100%;height:100%;margin:0 auto}
.meMessenger .right{width:100%;position:relative}
.meMessenger .left{width:100%;height:93%}
.meMessenger .btnBack{display:block;width:24px;z-index:2;margin:10px 10px 10px 1px}
.meMessenger .dnone{display:none}
.meMessenger .right{height:100%;min-height:auto}
.meMessenger .inputMsgBox textarea{height:100%}
.meMessenger .inputMsgBox{height:89px;width:100%;position:fixed;bottom:0}
.meMessenger .right .boxChat{height:calc(100% - 216px)}

.meMessenger .right .boxChat .name-card-invited {
    bottom: 29.5% !important;
}
.meMessenger .right .boxChat .date-join-card-invited {
    bottom: 40.5% !important;
    right: 45% !important;
    font-size: 12px;
}
.quickChat .listUserMsg.meMessenger .dnone{
    display: block;
}
.quickChat .listUserMsg {
    top: 50px;
}
.quickChat .arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #448da6;
    bottom: 4px;
    left: 8px;
}
}
@media all and (max-width:320px){
    .quickChat .listUserMsg {
        width: 294px;
    }
    
}
.ReactCrop {
  position: relative;
  display: inline-block;
  cursor: crosshair;
  overflow: hidden;
  max-width: 100%;
}
.ReactCrop:focus {
  outline: none;
}
.ReactCrop--disabled, .ReactCrop--locked {
  cursor: inherit;
}
.ReactCrop__image {
  display: block;
  max-width: 100%;
  touch-action: none;
}
.ReactCrop__crop-selection {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  box-sizing: border-box;
  cursor: move;
  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
  touch-action: none;
  border: 1px solid;
  border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
  border-image-slice: 1;
  border-image-repeat: repeat;
}
.ReactCrop--disabled .ReactCrop__crop-selection {
  cursor: inherit;
}
.ReactCrop--circular-crop .ReactCrop__crop-selection {
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px white, 0 0 0 9999em rgba(0, 0, 0, 0.5);
}
.ReactCrop--invisible-crop .ReactCrop__crop-selection {
  display: none;
}
.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}
.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after {
  width: 1px;
  height: 100%;
}
.ReactCrop__rule-of-thirds-vt::before {
  left: 33.3333%;
  left: calc(100% / 3);
}
.ReactCrop__rule-of-thirds-vt::after {
  left: 66.6666%;
  left: calc(100% / 3 * 2);
}
.ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
  width: 100%;
  height: 1px;
}
.ReactCrop__rule-of-thirds-hz::before {
  top: 33.3333%;
  top: calc(100% / 3);
}
.ReactCrop__rule-of-thirds-hz::after {
  top: 66.6666%;
  top: calc(100% / 3 * 2);
}
.ReactCrop__drag-handle {
  position: absolute;
}
.ReactCrop__drag-handle::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  outline: 1px solid transparent;
}
.ReactCrop .ord-nw {
  top: 0;
  left: 0;
  margin-top: -5px;
  margin-left: -5px;
  cursor: nw-resize;
}
.ReactCrop .ord-nw::after {
  top: 0;
  left: 0;
}
.ReactCrop .ord-n {
  top: 0;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  cursor: n-resize;
}
.ReactCrop .ord-n::after {
  top: 0;
}
.ReactCrop .ord-ne {
  top: 0;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  cursor: ne-resize;
}
.ReactCrop .ord-ne::after {
  top: 0;
  right: 0;
}
.ReactCrop .ord-e {
  top: 50%;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  cursor: e-resize;
}
.ReactCrop .ord-e::after {
  right: 0;
}
.ReactCrop .ord-se {
  bottom: 0;
  right: 0;
  margin-bottom: -5px;
  margin-right: -5px;
  cursor: se-resize;
}
.ReactCrop .ord-se::after {
  bottom: 0;
  right: 0;
}
.ReactCrop .ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -5px;
  margin-left: -5px;
  cursor: s-resize;
}
.ReactCrop .ord-s::after {
  bottom: 0;
}
.ReactCrop .ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -5px;
  margin-left: -5px;
  cursor: sw-resize;
}
.ReactCrop .ord-sw::after {
  bottom: 0;
  left: 0;
}
.ReactCrop .ord-w {
  top: 50%;
  left: 0;
  margin-top: -5px;
  margin-left: -5px;
  cursor: w-resize;
}
.ReactCrop .ord-w::after {
  left: 0;
}
.ReactCrop__disabled .ReactCrop__drag-handle {
  cursor: inherit;
}
.ReactCrop__drag-bar {
  position: absolute;
}
.ReactCrop__drag-bar.ord-n {
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  margin-top: -3px;
}
.ReactCrop__drag-bar.ord-e {
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  margin-right: -3px;
}
.ReactCrop__drag-bar.ord-s {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  margin-bottom: -3px;
}
.ReactCrop__drag-bar.ord-w {
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  margin-left: -3px;
}
.ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
  display: none;
}
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
  display: none;
}
@media (pointer: coarse) {
  .ReactCrop .ord-n,
.ReactCrop .ord-e,
.ReactCrop .ord-s,
.ReactCrop .ord-w {
    display: none;
  }
  .ReactCrop__drag-handle {
    width: 24px;
    height: 24px;
  }
}

.popup-search {
    position: absolute;
    width: calc(100% - 10px);
    background: rgb(255, 255, 255);
    height: 36px;
    z-index: 9;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    visibility: hidden;
    left: -410px;
}
.popup-search.active {
    /* visibility: visible; */
    left: 0px;
    transition: 0.5s;
}
.popup-search input{
    background-color: rgb(226, 226, 226);
    padding: 0px 35px 0px 10px;
    border-radius: 25px;
    width: 100%;
    height: 30px;
    outline: none;
    border: 1px solid rgb(255, 255, 255);
}
.searchQuestionBox {
    width: 75%;
    margin-top: 5px;
    left: 32px;
    height: 40px;
}
@media screen and (max-width: 425px){
    .popup-search{
        visibility: visible;
    }
}

@media screen and (max-width: 767px){
    .searchQuestionBox {
        margin-top: 35px;
        width: calc(100% + 60px);
        left: 0px;
        height: 32px
    }
}
.no-background:hover {
    background: unset !important
}
.open-gift-container {
    width: 300px;
    height: 300px;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: 15px;
    position: relative;
}
.cau-hoi-kho-result-container {
    width: 300px;
    height: 300px;
    /* align-items: center; */
    /* display: flex; */
    /* justify-content: center; */
    background: #fff;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}
.open-gift-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.open-gift-container .close-button {
    position: absolute;
    background: #999;
    z-index: 9;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
}

.pVideo >.popup-video {
    position: fixed;
    top: 10%;
    border-radius: 5px;
    background-color: #fff;
    height: auto;
    width: 70%;
    /* max-width: 780px; */
    z-index: 1000000;
    visibility: hidden;
    left: 50%;
    -webkit-transform: translateX(-50%);
}

.pVideo {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #000000a1;
    z-index: 999999;
    transition: .3s all ease-in-out;
    visibility: hidden;
    opacity: 0;
    top: 0;
    display: none;
}

.pVideo.active {
    display: block;
    transition: .3s all ease-in-out;
    visibility: visible;
    opacity: 1;
}

.pVideo.active >.popup-video {
    visibility: visible;
}

.popup-video {
	position: relative;
	padding-bottom: 39%; /* 16:9 */
	height: 0;
}
.popup-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
    .pVideo >.popup-video {
        width: 100%;
    }

    .popup-video {
        padding-bottom: 56.25%; /* 16:9 */
    }
}

.dailyLoginGridWrapper {
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  row-gap: 12px;
  column-gap: 12px;
}
.dailyLoginWrapper {
  box-sizing: border-box;
  position: relative;
}
.dailyLoginWrapper:hover .giftDailyLogin {
  animation: boundUp 0.4s;
}
.dailyLoginWrapper .itemDaily {
  background: #e7edf7;
  padding: 5px;
  height: 115px;
  border-radius: 5px;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.dailyLoginWrapper .itemActive {
  cursor: pointer;
  border: 1px dashed orange;
}
.dailyLoginWrapper .itemChecked {
  background: #8dc354;
  animation-name: changeBackgroundItem;
  animation-duration: 0.5s;
  color: white;
}

.dailyLoginWrapper .img-cake {
  position: absolute;
  top: -5px;
  width: 80px;
}

.giftContainer {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 12px;
  column-gap: 12px;
}
.giftContainer .itemWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.giftContainer .itemWrapper .numberGift {
  background: #edc914;
  padding: 5px;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 20%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 3px solid;
}
.showHistoryButton {
  text-align: right;
  font-weight: bold;
  margin: 15px 0;
}
.historyWrapper {
  height: 175px;
  overflow-y: scroll;
}
.historyItem {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
.historyItem span {
  font-weight: bold;
}
.answerBox:hover {
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.3);
}
@keyframes changeBackgroundItem {
  0% {
    background-color: #e7edf7;
    color: black;
  }
  100% {
    background-color: #8dc354;
    color: white;
  }
}
.dailyLoginWrapper .giftDailyLogin {
  width: 40px;
  height: 40px;
  background: #edc914;
  text-align: center;
  border-radius: 50%;
  border: 3px solid white;
  position: absolute;
  bottom: -10px;
  right: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes boundUp {
  0% {
    transform: scale(0.6);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Hiển thị mờ dần */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ẩn mờ dần */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.modal-overlay-cake {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.5s ease forwards;
}

.modal-overlay-cake.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

.modal-overlay-cake .modal-content {
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  min-width: 100px !important;
  width: 210px;
  height: 210px;
  border-radius: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.dailyLoginGridWrapper .gift-item {
  position: absolute;
  color: #fff;
  background-color: #438ba3;
}

.dailyLoginGridWrapper .modal-overlay .modal-content {
  background-color: #438ba3;
  border-radius: 20px;
  padding: 0 12px 15px 8px;
}

.dailyLoginGridWrapper .modal-overlay .modal-content h3 {
  color: #fff;
  font-size: 28px;
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  line-height: 1.1;
}

.dailyLoginGridWrapper .modal-overlay {
  width: 100%;
  height: 100%;
}

.dailyLoginGridWrapper .modal-title {
  background-color: #438ba3;
}

.dailyLoginGridWrapper .modal-content .modal-icon-close {
  background-color: #438ba3;
  color: #eee;
  font-weight: 500;
  top: 3px;
}

.dailyLoginGridWrapper .modal-overlay .modal-icon-close2 {
  display: none !important;
}

.dailyLoginGridWrapper .ribbon {
  color: #fff;
  font-size: 11px;
  position: absolute;
  top: 10px;
  left: -40px;
  width: 120px;
  transform: rotate(-30deg);
  background: #3385a3;
  text-align: center;
}

.btn-save-dau-vet {
  background-color: #f3b504;
  color: #fff;
  padding: 5px 22px;
  border-radius: 4px;
  font-weight: 600;
}

.btn-save-dau-vet:hover {
  box-shadow: 3px 3px 10px #555;
}

@media all and (max-width: 425px) {
  .dailyLoginWrapper .img-cake {
    position: absolute;
    top: -2px;
    width: 40px;
  }
  .dailyLoginWrapper .itemDaily {
    height: 55px;
  }
  .dailyLoginWrapper .giftDailyLogin {
    width: 33px;
    height: 33px;
    border: 2px solid white;
  }
  .giftContainer .itemWrapper .numberGift {
    right: 0;
  }
  .dailyLoginGridWrapper .ribbon {
    line-height: 12px;
    font-size: 9px;
    top: 6px;
    left: -44px;
  }
}
@media all and (max-width: 375px) {
  .dailyLoginWrapper .itemDaily {
    height: 45px;
  }
  .dailyLoginWrapper .giftDailyLogin {
    width: 30px;
    height: 30px;
    border: 1px solid white;
  }
  .giftContainer .itemWrapper .numberGift {
    right: 0;
  }
}
@media all and (max-width: 320px) {
  .dailyLoginWrapper .itemDaily {
    height: 35px;
  }
  .dailyLoginWrapper .giftDailyLogin {
    width: 25px;
    height: 25px;
    border: 1px solid white;
  }
  .giftContainer .itemWrapper .numberGift {
    right: 0;
  }
}

*{
    margin: 0;
    padding: 0;
}
@keyframes bounchIn {
    0%{
        transform: scale(0.04);
        margin-bottom: 56px;
    }
    50%{
        margin-bottom: 200px;
    }
    100%{
        transform: scale(1);
        margin-bottom: 0;
    }
}
.popupGift{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
}
.gift{
    width:115px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}
.gift:hover{
    filter: drop-shadow(2px 4px 6px black);
    transition: all 0.2s;
}
.gift.active .nap{
    transform: rotate(27deg);
    left: 45px;
    top: -70px;
    transition: all 0.4s;
}
.gift .nap{
    /* background: no-repeat center url(/static/img/dailyLogin/nap.png); */
    position: absolute;
    height: 89px;
    width: 115px;
    z-index: 2;
    top: -40px;
    left: 0;
}
.gift .nap1{
    background: no-repeat center url(/static/img/dailyLogin/nap3.png);
}
.gift .nap2{
    background: no-repeat center url(/static/img/dailyLogin/nap2.png);
}
.gift .nap3{
    background: no-repeat center url(/static/img/dailyLogin/nap1.png);
}
.letter{
    display: none;
    position: absolute;
    z-index: 3;
    width: 300px;
    height: 300px;
    border-radius: 15px;
    background: #fff;
}
.text-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-wrap: wrap;
}
.letter.active{
    display: block;
    animation: bounchIn 1s;
}
.gift .hop{
    /* background:no-repeat center url(/static/img/dailyLogin/hop12.png); */
    position: relative;
    height: 102px;
    z-index: 1;
}
.gift .hop1{
    background:no-repeat center url(/static/img/dailyLogin/hop3.png);
}
.gift .hop2{
    background:no-repeat center url(/static/img/dailyLogin/hop2.png);
}
.gift .hop3{
    background:no-repeat center url(/static/img/dailyLogin/hop1.png);
}
.wrapper-block-subject{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.wrapper-block-subject .block-subject{
    width: 30%;
    text-align: center;
    margin: 0 1%;
    background: #FFF;
    border-radius: 5px;
    height: 400px;
    margin-bottom: 25px;
    overflow: hidden;
}
.block-subject .bg-title-block-subject{
    height: 100px;
    /* background: beige; */
}
.block-subject .title-block-subject{
    padding: 5px 10px;
    position: relative;
}
.block-subject .title-block-subject .status-text{
    position: absolute;
    bottom: -5px;
    width: calc(100% - 20px);
    font-size: 12px;
    font-style: italic;
    color: red;
}
.block-subject .title-block-subject>h2{
    display: flex;
    justify-content: center;
    align-items: center;
}
.block-subject .join-button{
    margin: 10px;
}
.block-subject .join-button>button{
    border: 1px solid #fff;
    background-color: #e7b712;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}
.block-subject .block-list-user{
    border-top: 1px #2c8fe2 dashed;
    position: relative;
}
.block-list-user .block-user-item{
    display: flex;
    margin: 5px 10px;
    border-radius: 5px;
    width: calc(100% - 20px);
    position: absolute;
}
.block-list-user .user-info{
    width: 80%;
    text-align: left;
    padding: 10px 5px;
    color: #000;
}
.block-list-user .user-info .username{
    height: 22px;
    overflow: hidden;
}
.block-list-user .icon-rank{
    width: 20%;
    padding: 10px;
    overflow: hidden;
}
.block-list-user .icon-rank img{
    max-width: 40px;
}
.page-danh-sach-cau-hoi-kho .block-user-info-ranking{
    display: flex;
    border-bottom: 1px #ccc dashed;
    padding: 5px 0px;
}
.block-user-info-ranking .avatar{
    width: 45px;
}
.block-user-info-ranking .avatar>img{
    padding: 3px;
    border: 1px solid #db9b00;
    width: calc(100% - 8px);
    border-radius: 5%;
    max-height: 37px
}
.block-user-info-ranking .userinfo{
    margin-left: 5px;
}
.your-rank-mobile{
    margin: 12px;
    padding: 10px 5px;
    border-radius: 5px;
    display: none;
}
.menu-special-mobile{
    position: fixed;
    width: 80%;
    max-width: 300px;
    height: 100%;
    top: 0px;
    z-index: 999999;
}
.menu-special-mobile .block-ranking-mobile{
    padding: 10px;
}
.menu-special-mobile .block-ranking-mobile>h3{
    margin: 10px 0;
}
.menu-special-mobile .block-ranking-mobile .list-user{
    margin-bottom: 25px;
}
.menu-special-mobile .block-ranking-mobile .list-user>li{
    padding: 10px 5px;
    border-bottom: 1px #CCC dashed;
    list-style: none;
}
.menu-special-mobile .block-ranking-mobile .list-user>li:first-child{
    background-color: #2c8fe233;
}
.menu-special-mobile .block-ranking-mobile .back-button{
    float: right;
    font-size: 37px;
    position: absolute;
    top: 15px;
    right: 20px;
}
.menu-special-mobile .block-ranking-mobile .back-button>img{
    padding: 5px 10px;
    border: 1px solid rgb(174, 174, 174);
    border-radius: 5px;
    transform: rotate(180deg);
}
.cau-hoi-kho-result-container .title{
    text-align: center;
    margin: 10px 0;
}
.cau-hoi-kho-result-container .border-title{
    height: 2px;
    background: #e4b522;
}
.cau-hoi-kho-result-container .content-block{
    height: 160px;
    position: relative;
}
.cau-hoi-kho-result-container .content-block .bg-content{
    /* background: #039be5; */
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skewX(17deg);
}
.cau-hoi-kho-result-container .content-block .text{
    position: absolute;
    width: 80%;
    color: #FFF;
    margin-top: 5px;
    z-index: 3;
}
.btnPopup{
    padding: 10px 20px;
    margin: 10px;
    border-radius: 5px;
    border-style: none;
    color: #FFF;
}
@media all and (max-width:960px){
    .your-rank-mobile{
        display: block;
    }
}
@media all and (max-width:425px){
    .wrapper-block-subject .block-subject{
        width: 100%;
    }
}
.modal-content {
  min-width: 600px;
  min-height: 150px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  z-index: 40;
  background-color: #fff;
  border-radius: 5px;
  padding: 0 18px 15px 18px;
  max-height: 75%;
  overflow-y: auto;
}

.modal-content .modal-icon-close {
  position: absolute;
  top: 6px;
  right: 0;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
  background-color: #fff;
  font-weight: 600;
  color: #999;
}

.modal-content .modal-icon-close:hover {
  color: rgb(204, 31, 0);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-content.show {
  opacity: 1;
  transform: translateY(0);
}

.modal-overlay .modal-icon-close2 {
  display: none;
}

.modal-title {
  position: sticky;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: rgb(71, 143, 168);
  background-color: #fff;
  padding: 12px 0 3px 0;
  z-index: 50;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@media screen and (max-width: 660px) {
  .modal-content {
    min-width: 85vw;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0) !important;
  }

  /* .modal-content .modal-icon-close {
    display: none !important;
  }
  .modal-overlay > .modal-icon-close2 {
    position: fixed;
    top: 90px;
    right: 6px;
    z-index: 50;
    cursor: pointer;
    padding: 0 6px 5px 6px !important;
    border-radius: 5px;
    font-size: 22px;
    user-select: none;
    background-color: #999;
    font-weight: 600;
    color: #fff;
    align-self: center;
  } */
}

.popupLoaPhuong{
    width: 100%;
    position: fixed;
    top: 92px;
    left: 0;
    text-align: center;
    box-sizing: border-box;
    padding-right: 10%;
}
.popupLoaPhuong .contentText_LP{
    max-width: 742px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 12px 0px 55px;
    box-sizing: border-box;
    position: relative;
    border-radius: 6px;
    background: linear-gradient(to right, #efce5ede 0% 22%,#ffffffe6);
    font-size: 16px;
    height: 34px;
    color: #2a2525;
    transform: scale(0.90);
    animation: bounch .4s 1s forwards;
    opacity: 0;
    /* font-family: 'Roboto', sans-serif; */
}

.popupLoaPhuong .contentText_LP a {
    color: #2a2525
}

@keyframes bounch {
    0%{
        opacity: 0;
        transform: scale(0.90);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

.popupLoaPhuong .contentText_LP img{
    position: absolute;
    left: -7px;
    top: -9px;
    width: 52px;
}

@media all and (max-width:960px){
    .popupLoaPhuong {
        padding-right:unset;
    }
    .popupLoaPhuong .contentText_LP {
        max-width: 742px;
        width: calc(100% - 24px);
    }
}
@media all and (max-width:500px){
    

}


#popupUpdateUserInfo {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background: #ffffff7d;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#popupUpdateUserInfo .content_21092021 {
  background: #fff;
  box-shadow: 0px 0px 24px 0px #e1e1e1;
  padding: 20px 24px 20px 20px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  background: #458ea7;
  position: relative;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  margin: 0 12px;
  transition: all 0.4s;
  max-width: 405px;
  width: 100%;
}
#popupUpdateUserInfo .content_21092021 a {
  color: inherit;
}
#popupUpdateUserInfo .content_21092021:hover {
  transform: scale(1.022);
  background: #4895af;
}
#popupUpdateUserInfo .content_21092021 .titlePopup {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #f3da85;
}
#popupUpdateUserInfo .content_21092021 .hint {
  font-size: 14px;
}
#popupUpdateUserInfo .content_21092021 .hint b {
  color: #e7b712;
  background: #485458;
  padding: 1px 5px;
  border-radius: 5px;
  display: inline-block;
}
#popupUpdateUserInfo .content_21092021 .bntClose {
  font-weight: bold;
  width: 15px;
  height: 15px;
  border-radius: 99px;
  color: #f60606;
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);
  font-size: 37px;
  transition: all 0.4s;
}
#popupUpdateUserInfo .content_21092021 .bntClose:hover {
  color: #fff;
}

#popupUpdateUserInfo.dnone {
  display: none;
}

@font-face {
  font-family: "UTM_Guanine";
  src: url(/static/font/UTM_Guanine.eot);
  src: url(/static/font/UTM_Guanine.eot?#iefix) format("embedded-opentype"), url(/static/font/UTM_Guanine.otf) format("otf"), url(/static/font/UTM_Guanine.svg#UTM%20Guanine) format("svg"), url(/static/font/UTM_Guanine.ttf) format("truetype"), url(/static/font/UTM_Guanine.woff) format("woff"), url(/static/font/UTM_Guanine.woff2) format("woff2");
}
@font-face {
  font-family: "iCielPacifico";
  src: url(/static/font/iCielPacifico.ttf) format('ttf');
}
#lookBackyear {
  overflow: auto;
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 36.25em;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.507);
  font-size: 12px;
}
#lookBackyear .card {
  margin: 24px auto;
  position: relative;
}
#lookBackyear .card .logoHoidap {
  width: 300px;
  align-self: center;
  margin-bottom: 14px;
}
#lookBackyear .card .rank11 .content .username .avatar {
  width: 104px;
  height: 102px;
  top: 10px;
  left: 13px;
}
#lookBackyear .card .rank12 .content .username .avatar {
  width: 112px;
  height: 113px;
  top: 8px;
  left: 9px;
}
#lookBackyear .card .rank25 .content .username .avatar {
  width: 105px;
  height: 104px;
  top: 7px;
  left: 12px;
}
#lookBackyear .card .rank36 .content .username .avatar {
  width: 105px;
  height: 104px;
  top: 20px;
  left: 13px;
}
#lookBackyear .card .rank37 .content .username .avatar {
  width: 92px;
  height: 94px;
  top: 17px;
  left: 19px;
}

#lookBackyear .card .rank13 .content .report_view {
  margin-left: 22px;
  font-size: 13px;
  margin-top: -17px !important;
}

#lookBackyear .card .rank11 .logoHoidap {
  width: 350px;
}
#lookBackyear .card .rank12 .logoHoidap {
  width: 408px;
}
#lookBackyear .card .rank13 .logoHoidap {
  width: 350px;
}
#lookBackyear .card .rank24 .logoHoidap {
  width: 290px;
}
#lookBackyear .card .rank25 .logoHoidap {
  width: 422px;
}
#lookBackyear .card .rank36 .logoHoidap {
  width: 330px;
}
#lookBackyear .card .rank37 .logoHoidap {
  width: 245px;
}
#lookBackyear .card .rank11 .content .profile-card {
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
#lookBackyear .card .rank11 .content .detail-item {
  font-size: 13px;
}
#lookBackyear .card .rank11 .content .profile-details {
  gap: 100px;
}
#lookBackyear .card .rank13 .content .profile-card {
  padding: 18px;
}
#lookBackyear .card .rank13 .content .detail-item {
  font-size: 13px;
}
#lookBackyear .card .rank13 .content .profile-details {
  gap: 14px;
}
#lookBackyear .card .rank24 .content .profile-card {
  padding: 18px;
}
#lookBackyear .card .rank24 .content .detail-item {
  font-size: 13px;
}
#lookBackyear .card .rank24 .content .profile-details {
  gap: 14px;
}
#lookBackyear .card .rank36 .content .profile-card {
  padding: 21px;
}
#lookBackyear .card .rank36 .content .detail-item {
  font-size: 13px;
}
#lookBackyear .card .rank36 .content .profile-details {
  gap: 14px;
}
#lookBackyear .card .rank37 .content .profile-card {
  padding: 19px;
}
#lookBackyear .card .rank37 .content .detail-item {
  font-size: 13px;
}
#lookBackyear .card .rank37 .content .profile-details {
  gap: 14px;
}
#lookBackyear .card .titleCard {
  font-size: 2em;
  color: #fff;
  background: #e36041;
  text-align: center;
  text-transform: uppercase;
  width: calc(100% + 1em);
  margin: 0 0 0.7em -0.5em;
  position: relative;
  font-family: "UTM_Guanine";
  display: flex;
  align-items: center;
  justify-content: center;
}
#lookBackyear .card .titleCard span {
  margin: 0 0.6em;
  line-height: normal;
  padding: 0px 0 7px;
}
#lookBackyear .card .titleCard::before, #lookBackyear .card .titleCard:after {
  position: absolute;
  bottom: -1em;
  content: "";
}
#lookBackyear .card .titleCard::before {
  left: 0;
  border-right: 0em solid #bf3f25;
  border-left: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-top: 0.5em solid #bf3f25;
}
#lookBackyear .card .titleCard::after {
  right: 0;
  border-left: 0em solid #bf3f25;
  border-right: 0.5em solid transparent;
  border-top: 0.5em solid #bf3f25;
  border-bottom: 0.5em solid transparent;
}
#lookBackyear .card .titleCard img {
  width: 0.5em;
  height: 0.5em;
}
#lookBackyear .card .content {
  padding: 0 1em 1em 1em;
  line-height: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 85%;
}
#lookBackyear .card .year2023 {
  color: #da0b2e;
  -webkit-text-stroke: 1px #F8F8F8;
  text-shadow: 0px 1px 4px #333;
  font-size: 30px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  width: 100%;
}
#lookBackyear .card .withHoidap {
  color: #458ea7;
  font-size: 26px;
  text-align: center;
  width: 100%;
}
#lookBackyear .card .content .titleCourseHelp {
  font-size: 16px;
  line-height: 20px;
  color: #2f2f2f;
  width: 385px;
  text-align: center;
}
#lookBackyear .card .content .username {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6em 0 0;
  width: 385px;
  flex-direction: column;
}
#lookBackyear .card .content .username .avatar {
  width: 102px;
  height: 101px;
  top: 14px;
  left: 14px;
}
#lookBackyear .card .rank11 .username .avatar {
  width: 104px;
  height: 102px;
  top: 10px;
  left: 13px;
}
#lookBackyear .card .rank11 .username .avatar {
  width: 104px;
  height: 102px;
  top: 10px;
  left: 13px;
}
#lookBackyear .card .content .username span {
  padding: 0 0.25em;
  font-weight: bold;
  /* color: #ffdd48; */
  color: black;
  font-size: 25px;
}
#lookBackyear .card .content .username .resizeUserName {
  font-size: 15px;
}
#lookBackyear .card .content .username .badge {
  width: 1.2em;
  height: 1.2em;
}
#lookBackyear .card .content .titleAchieved {
  width: 24.5em;
  height: 2em;
  /* margin: 2px auto; */
  text-align: center;
  background-size: contain;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: center;
  /* padding-top: 10px; */
}

#lookBackyear .card .content .profile-card {
  border-radius: 12px;
  padding: 26px;
  text-align: center;
}

#lookBackyear .card .content .profile-header {
  background-color: #ffd700;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 15px;
}

#lookBackyear .card .content .top-rank {
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  width: 95%;
  line-height: 20px;
  justify-self: right;
}

#lookBackyear .card .content .profile-details {
  display: flex;
  gap: 17px;
}

#lookBackyear .card .content .detail-item {
  display: flex;
  font-size: 14px;
  color: #333;
  margin-left: 30px;
  margin-bottom: 4px;
}

#lookBackyear .card .content .detail-item strong {
  font-weight: bold;
  /* color: #ff5722; */
}

#lookBackyear .card .content .titleAchieved span {
  font-size: 32px;
  display: inline-block;
  color: #fef16a;
  -webkit-text-stroke: 2px #8f3030;
  font-weight: 900;
  text-shadow: 3px 3px 2px #939191;
}
#lookBackyear .card .content ul {
  width: 100%;
  max-width: 18.3em;
  list-style: none;
  box-sizing: border-box;
  margin: -10px auto;
  padding: 0em 0 1em 1em;
  font-size: 15px;
}
#lookBackyear .card .content ul li {
  padding-left: 1.4em;
  background: left no-repeat url(/static/img/popup_lookBackYear/iconhigh.png);
  background-size: 1em 1em;
  font-size: 1em;
  color: black;
}
#lookBackyear .card .content ul li:last-child {
  margin-bottom: 0;
}
#lookBackyear .card .content .aboutMeLastYear {
  width: 46%;
  /* padding: 0.5em 2.2em; */
  font-style: italic;
  line-height: 1.45em;
  font-size: 1.1em;
  text-align: center;
  /* font-weight: bold; */
  height: 60px;
  color: #2f2f2f;
  align-self: center;
  -webkit-text-stroke-width: thin;
}
#lookBackyear .card .content .flexAchive {
  width: 35%;
  margin-top: 20px;
  text-align: center;
  font-size: 1.1em;
  color: #458ea7;
  display: flex;
  line-height: 22px;
  font-weight: bold;
  font-style: italic;
  align-self: center;
}
#lookBackyear .groupBtn {
  margin: 2.2em auto;
  text-align: center;
}
#lookBackyear .groupBtn button {
  padding: 0.6em 1.55em;
  border: 1px solid #458ea7;
  color: #458ea7;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.11em;
  font-weight: bold;
  background: #fff;
}
#lookBackyear .groupBtn .saveImg {
  margin-right: 1.2em;
}
#lookBackyear .share img {
  width: 1em;
}
#lookBackyear .card .rank{
  width: 720px;
  height: 790px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#lookBackyear .card .rank11 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_11.png);
}
#lookBackyear .card .rank12 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_12.png);
}
#lookBackyear .card .rank13 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_13.png);
}
#lookBackyear .card .rank24 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_24.png);
}
#lookBackyear .card .rank25 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_25.png);
}
#lookBackyear .card .rank36 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_36.png);
}
#lookBackyear .card .rank37 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_37.png);
}
#lookBackyear .card .rank38 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/rank_2024_38.png);
}
/* #lookBackyear .card .rank4 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-ansi.png);
}
#lookBackyear .card .rank5 {
  background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-vodanh.png);
} */
#lookBackyear .card .rank1 .groupBtn{
  height: 30px;
  position: absolute;
  bottom: calc(70vh * 55 / 1024 - 0px);
  width: 100%;
}
#lookBackyear .card .rank2 .groupBtn{
  height: 30px;
  position: absolute;
  bottom: calc(70vh * 55 / 1024 - 0px);
  width: 100%;
}
#lookBackyear .card .rank3 .groupBtn{
  height: 30px;
  position: absolute;
  bottom: calc(70vh * 55 / 1024 - 0px);
  width: 100%;
}
#lookBackyear .card .rank4 .groupBtn{
  height: 30px;
  position: absolute;
  bottom: calc(70vh * 55 / 1024 - 0px);
  width: 100%;
}
#lookBackyear .card .rank5 .groupBtn{
  height: 30px;
  position: absolute;
  bottom: calc(70vh * 55 / 1024 - 0px);
  width: 100%;
}
#lookBackyear .card .groupBtn .downloadButton {
  height: 45px;
  /* margin-left: 20px; */
  margin-right: 20px;
  cursor: pointer;
}
/* safary */
_::-webkit-full-page-media, _:future, :root #lookBackyear .card .titleCard span {
  margin-top: 5px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}
_::-webkit-full-page-media, _:future, :root #lookBackyear .card .content .titleAchieved span {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}
_::-webkit-full-page-media, _:future, :root #lookBackyear .card .logoHoidap {
  align-self: center;
}
_::-webkit-full-page-media, _:future, :root #lookBackyear .card .content .aboutMeLastYear {
  align-self: center;
}
_::-webkit-full-page-media, _:future, :root #lookBackyear .card .content .flexAchive {
  align-self: center;
}
@media all and (max-width: 1440px) {
  #lookBackyear {
    font-size: 12px;
  }
}
@media all and (max-width: 768px), (max-height: 768px) {
  #lookBackyear .card .rank{
    height: 520px;
    max-width: 425px;
  }
  #lookBackyear .card .rank1 {
    background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-trangnguyen.png);
  }
  #lookBackyear .card .rank2 {
    background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-bangnhan.png);
  }
  #lookBackyear .card .rank3 {
    background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-thamhoa.png);
  }
  #lookBackyear .card .rank4 {
    background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-ansi.png);
  }
  #lookBackyear .card .rank5 {
    background: no-repeat center 100%/contain url(/static/img/popup_lookBackYear/bg-vodanh.png);
  }
  #lookBackyear .card .year2023 {
    color: #da0b2e;
    -webkit-text-stroke: 0.4px #F8F8F8;
    text-shadow: 0px 1px 4px #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 20px;
  }
  #lookBackyear .card .withHoidap {
    color: #458ea7;
    font-size: 18px;
    margin-top: -4px;
  }
  #lookBackyear .card .rank1 .logoHoidap {
    margin-top: 0;
    width: 55%;
  }
  #lookBackyear .card .rank2 .logoHoidap {
    margin-top: 0;
    width: 30%;
  }
  #lookBackyear .card .rank3 .logoHoidap {
    margin-top: 0;
    width: 24%;
  }
  #lookBackyear .card .rank4 .logoHoidap {
    margin-top: 0;
    width: 19%;
  }
  #lookBackyear .card .rank5 .logoHoidap {
    margin-top: 0;
    width: 30%;
  }
  #lookBackyear .card .rank5 .logoHoidap {
    margin-top: -5px;
    width: 30%;
  }
  #lookBackyear .card .content .username .resizeUserName {
    font-size: 11px;
  }
  /* GUI trên safari*/
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .logoHoidap {
    margin: 0 auto;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .content .aboutMeLastYear {
    margin: 4px auto;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .content .flexAchive {
    margin: 15px auto;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .rank5 .logoHoidap {
    margin-top: -10px;
    width: 25%;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .rank4 .logoHoidap {
    width: 17%;
    margin-top: -5px;
    margin-bottom: -8px;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .rank3 .logoHoidap {
    width: 20%;
    margin-top: -5px;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .rank2 .logoHoidap {
    width: 25%;
    margin-top: -5px;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .rank1 .logoHoidap {
    width: 30%;
  }
  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .content .flexAchive .textFlex {
    margin-top: 3px;
  }

  _::-webkit-full-page-media, _:future, :root #lookBackyear .card .logoHoidap{
    width: 62% !important;
    margin-bottom: 23px !important;
    -webkit-margin-bottom: 23px;
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .groupBtn .downloadButton {
    margin-right: 6px;
    cursor: pointer;
    width: 40%;
    height: 75%;
  }
  
  .lookBackyear .card .content .username {
    margin: 6px 0 -3px 0;
  }
  #lookBackyear .card .content .titleCourseHelp {
    font-size: 12px;
  }
  #lookBackyear .card .rank1 .groupBtn{
    height: 30px;
    position: absolute;
    bottom: calc(70vh * 55 / 1024 - 12px);
    width: 100%;
  }
  #lookBackyear .card .rank2 .groupBtn{
    height: 30px;
    position: absolute;
    bottom: calc(70vh * 55 / 1024 - 12px);
    width: 100%;
  }
  #lookBackyear .card .rank3 .groupBtn{
    height: 30px;
    position: absolute;
    bottom: calc(70vh * 55 / 1024 - 12px);
    width: 100%;
  }
  #lookBackyear .card .rank4 .groupBtn{
    height: 30px;
    position: absolute;
    bottom: calc(70vh * 55 / 1024 - 12px);
    width: 100%;
  }
  #lookBackyear .card .rank5 .groupBtn{
    height: 30px;
    position: absolute;
    bottom: calc(70vh * 55 / 1024 - 12px);
    width: 100%;
  }
  #lookBackyear .card .groupBtn .downloadButton {
    margin-right: 6px;
    cursor: pointer;
    width: 40%;
    height: 75%;
  }
  #lookBackyear .card {
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  #lookBackyear .card .logoHoidap{
    width: 62% !important;
    margin-bottom: 20px;
    -webkit-margin-bottom: 20px;
  }
  #lookBackyear .card .rank38 .logoHoidap{
    margin-bottom: 15px;
  }
  #lookBackyear .card .rank13 .logoHoidap{
    margin-bottom: 22px;
  }
  #lookBackyear .card .rank24 .logoHoidap {
    margin-bottom: 11px;
  }
  #lookBackyear .card .rank12 .logoHoidap{
    margin-bottom: 33px;
  }
  #lookBackyear .card .rank12 .logoHoidap{
    margin-bottom: 33px;
  }
  #lookBackyear .card .rank25 .logoHoidap {
    width: 71% !important;
    margin-bottom: 26px;
  }

  #lookBackyear .card .rank37 .logoHoidap {
    width: 45% !important;
    margin-bottom: 20px;
}


  #lookBackyear .card .rank .content .profile-card {
    padding: 6px;
  }
  #lookBackyear .card .rank .content .profile-details {
    gap: 11px !important;
  }

  #lookBackyear .card .rank13 .content .profile-details {
    gap: 11px !important;
  }
  #lookBackyear .card .rank12 .content .profile-details {
    gap: 15px !important;
  }
  #lookBackyear .card .rank25 .content .profile-details {
    gap: 15px !important;
  }
  #lookBackyear .card .content .username span{
    font-size: 15px;
  }
  #lookBackyear .card .content .titleCourseHelp {
    font-size: 10px;
  }
  #lookBackyear .card .content ul,#lookBackyear .card .content .aboutMeLastYear{
    font-size: 14px;
    padding:0
  }
  #lookBackyear .card .content .username .avatar {
    width: 46px !important;
    height: 46px !important;
    top: 7px !important;
    left: 7px !important;
  }

  #lookBackyear .card .rank37 .content .username .avatar {
    width: 43px !important;
    height: 43px !important;
    top: 8px !important;
    left: 8px !important;
  }
  #lookBackyear .card .content .titleAchieved {
    /* height: 3em; */
    padding-top: 0;
    line-height: 17px;
  }
  #lookBackyear .card .content .closeBt {
    right: 62px !important;
    width: 20px !important;
  }
  #lookBackyear .card .content .titleAchieved span {
    font-size: 22px;
    display: inline-block;
    color: #fef16a;
    -webkit-text-stroke: 2px #333;
    font-weight: 900;
    text-shadow: 0px 1px 4px #333;
  }
  #lookBackyear .card .content .report_view {
    margin-top: -5px !important;
    font-size: 9px !important;
  }

  #lookBackyear .card .rank12 .content .report_view {
    margin-top: -1px !important;
  }

  #lookBackyear .card .rank13 .content .report_view {
    margin-top: -5px !important;
  }
  #lookBackyear .card .content .achiveText {
    font-size: 10px !important;
    line-height: 10px;
  }
  #lookBackyear .card .rank38 .content .profile-card {
    border-radius: 12px;
    padding: 5px;
    text-align: center;
  }

  #lookBackyear .card .rank38 .content .profile-details {
    gap: 15px !important;
  }

  #lookBackyear .card .rank .content .detail-item {
    display: flex;
    font-size: 9px !important;
    color: #333;
    margin-left: 20px;
    margin-bottom: -10px;
  }

  #lookBackyear .card .rank38 .content .detail-item {
    display: flex;
    font-size: 9px !important;
    color: #333;
    margin-left: 20px;
    margin-bottom: -8px;
  }
  #lookBackyear .card .rank13 .content .detail-item {
    display: flex;
    font-size: 9px !important;
    color: #333;
    margin-left: 20px;
    margin-bottom: -10px;
  }

  #lookBackyear .card .content .titleAchieved {
    height: 16px;
  }

  #lookBackyear .card .rank .content #gapViewE {
    gap: 16px !important;
  }

  #lookBackyear .card .rank25 .content .detail-item {
    margin-bottom: -8px;
  }

  #lookBackyear .card .content .top-rank {
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    width: 95%;
    line-height: 13px;
    margin-top: 12px;
  }
  #lookBackyear .card .content ul {
    padding: 8px 29px;
  }
  #lookBackyear .card .content .aboutMeLastYear {
    font-size: 9px;
    width: 55%;
    padding: 0.5em 2.2em 4px 2.2em;
    height: 47px;
  }
  #lookBackyear .groupBtn {
    margin: 0.1em auto;
    text-align: center;
}
  #lookBackyear .card .content ul li {
    padding-left: 1.4em;
    background: left no-repeat url(/static/img/popup_lookBackYear/iconhigh.png);
    background-size: 1em 1em;
    font-size: 13px;
    color: black;
    line-height: 23px;
    font-family: sans-serif;
  }
  #lookBackyear .card .content .flexAchive {
    width: 50%;
    margin-top: 12px;
    text-align: center;
    font-size: 0.9em;
    color: #458ea7;
    display: flex;
    line-height: 15px;
    font-weight: bold;
    font-style: italic;
  }
  #lookBackyear .card .content .iconHand {
    width: 20%;
    height: 50%;
    align-self: flex-start;
  }
  #lookBackyear .card .content .username {
    margin: 45px 0 -3px 0;
  }

  #lookBackyear .card .content .username .bg_avatar_hd{
    width: 60px !important;
    height: 60px !important;
  }
  #lookBackyear .card .rank2 .groupBtn {
    bottom: calc(70vh * 55 / 1024 - 15px);
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .rank .content .profile-card {
    padding: 10px;
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .rank12 .content .report_view {
    margin-top: -5px !important;
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .rank38 .logoHoidap{
    margin-bottom: 5px !important;
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .rank11 .logoHoidap{
    margin-bottom: 14px !important;
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .rank36 .logoHoidap{
    margin-bottom: 9px !important;
  }

  _::-webkit-full-page-media, _:future, #lookBackyear .card .rank37 .logoHoidap{
    margin-bottom: 9px !important;
  }

  _::-webkit-full-page-media, _:future,#lookBackyear .card .rank11 .content .profile-card {
    padding: 6px;
  }

  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      #lookBackyear .card .logoHoidap{
        width: 62% !important;
        margin-bottom: 23px !important;
        -webkit-margin-bottom: 23px;
      }

      #lookBackyear .card .content .titleCourseHelp {
        font-size: 9px;
      }

      #lookBackyear .card .rank12 .content .report_view {
        margin-top: -5px !important;
      }

      #lookBackyear .card .groupBtn .downloadButton {
        margin-right: 6px;
        cursor: pointer;
        width: 35%;
        height: 75%;
      }

      #lookBackyear .card .rank .content .profile-card {
        padding: 12px;
      }
    }
  }
}
@media all and (max-width: 425px) {
  /* #lookBackyear .card .rank2{
    height: 367px;
    max-width: 360px;
  }
  #lookBackyear .card .logoHoidap {
    margin-top: 51px;
  }
  #lookBackyear .card .content ul, #lookBackyear .card .content .aboutMeLastYear {
    font-size: 11px;
  } */
}

@media all and (max-width: 414px) {
  /* #lookBackyear .card .rank{
    height: 367px;
    max-width: 356px;
  }

  #lookBackyear .card .rank .groupBtn {
    bottom: calc(70vh * 55 / 1024 - 35px);
  }

  #lookBackyear .card .rank .logoHoidap {
    margin-top: 10px;
  } */
}

@font-face {
    font-family: 'Updock';
    font-display: swap;
    src: url(/static/font/updock.ttf) format('ttf');
    src: url(/static/font/updock.woff) format('woff');
    src: url(/static/font/updock.woff2) format('woff2');
}
@font-face {
    font-family: 'CormorantUpright';
    font-display: swap;
    src: url(/static/font/CormorantUpright.ttf) format('ttf');
    src: url(/static/font/CormorantUpright-Regular.woff) format('woff');
    src: url(/static/font/CormorantUpright.woff2) format('woff2');
}

.font-nabila{
    font-family: 'Updock';
    font-size: 40px;
}
.font-iciel {
    font-family: 'CormorantUpright';
    font-size: 20px;
    line-height: 26px;
    color: #005872;
    font-weight: bold;
}
.anniversary_join_hd247 {
    position: relative;
}
 .anniversary_join_hd247 .popup-anniver{
    border: 3px solid #468da6;
    color: #122830f0;
    position: relative;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.anniversary_join_hd247 .popup-anniver.anni-for-0-year{
    background-position: center;
    height: auto !important;
}
.anniversary_join_hd247 .leaf-top-left{
    position: absolute;
    top: -1px;
    left: -1px;
}
.anniversary_join_hd247 .flag-top-right{
    position: absolute;
    right: -23px;
    top: -18px;
}
.anniversary_join_hd247 .bubble-bottom-left{
    position: absolute;
    bottom: -12px;
    left: -35px;
}
.anniversary_join_hd247 .intro{
    padding: 30px 15px 50px 15px;
    border-bottom: 3px solid #e0e0e0;
    margin-bottom: 35px;
    position: relative;
}
.anniversary_join_hd247 .intro img{
    vertical-align: bottom;
    margin-left: 20px;
}
.anniversary_join_hd247 .amount-year{
    font-size: 97px;
    font-weight: bold;
    color: #e7b712;
    text-shadow: 6px 4px 2px #333;
    position: absolute;
    bottom: 91px;
    line-height: 60px;
    left: 76px;
}
.anniversary_join_hd247 h2{
    line-height: 60px;
    color: #d52c51;
    font-size: 40px
}
.anniversary_join_hd247 .text-intro{
    display: inline-block;
    width: calc(100% - 180px);
    line-height: 26px;
    font-size: 18px;
    padding-left: 20px;
    text-align: justify;
}
.anniversary_join_hd247 .block-avt {
    width: 120px;
    height: 120px;
    display: inline-block;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    vertical-align: top;
    margin-bottom: 10px;
}
.anniversary_join_hd247 .block-avt img{
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}
.anniversary_join_hd247 .h247-info-person{
    font-size: 15px;
    border-bottom: 1px solid #f3f2f2;
    margin-bottom: 15px;
    padding-left: 0;
}
/* #lookBackyear .anniversary_join_hd247{
    max-width: unset;
    width: 800px;
    background: transparent;
    padding: 50px 0 30px 0;
    background-image: url(/static/img/frame.png);
    background-repeat: no-repeat;
    background-position: 1px -16px;
}
#lookBackyear .anniversary_join_hd247 .popup-anniver{
    background: #fff;
} */
.frame-anniver{
    position: fixed;
    width: 730px;
    top: 143px;
    left: 50%;
    margin-left: -329px;
    z-index: -1;
}
.landingpage {padding: 80px 0;}
.anniversary_join_hd247.landingpage .intro {
    padding: 30px 40px 50px 30px;
}
.anniversary_join_hd247.landingpage .amount-year{
    left: 38px;
    top: 6px;
}
.anniversary_join_hd247.landingpage .popup-anniver {
    border: unset;
}
.landingpage.anniversary_join_hd247 .popup-anniver{
    padding-bottom: 45px;
    margin-top: 20px;
}
.landingpage{background: #eceff1;}
.landingpage.anniversary_join_hd247 .text-intro{
    text-align: center;
    display: block;
    width: 100%;
}
.content-anni-ago{
    display: flex;
    justify-content: center;
    justify-items: center;
    margin-top: 25px;
    flex-wrap: wrap;
}
.content-anni-ago > span{
    position: relative;
    margin: 0 10px;
    border: 1px solid transparent;
    box-shadow: 3px 3px 6px transparent;
    opacity: 0.7;
    transition: all 0.4s
}
.landingpage.anniversary_join_hd247 .bubble-bottom-left {
    position: absolute;
    bottom: -12px;
    left: -20px;
    width: 50px;
}
.landingpage.anniversary_join_hd247 .leaf-top-left{width: 60px;}
.landingpage.anniversary_join_hd247 .flag-top-right {
    position: absolute;
    right: -16px;
    top: -12px;
    width: 111px;
}
.landingpage .popup_reason_block_account .cancel-btn{
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    width: auto;
    padding: 0 10px 3px 9px;
    color: #fff;
}
.landingpage .popup_reason_block_account{
    width: 800px;
    margin-left: -400px;
    height: 600px;
    overflow-y: scroll;
    top: 15%;
}
.landingpage .h-question {
    text-align: left;
    padding: 10px 15px;
    width: auto
}
.nothing-anniver{
    padding: 0 80px;
}
.content-anni-ago > span:hover, .content-anni-ago > span.active{
    border: 1px solid #e0e0e06b;
    box-shadow: 3px 3px 6px #ccc;
    opacity: 1;
}
.landingpage .action{ display: none;}
.landingpage.anniversary_join_hd247 .popup-anniver{
    width: 789px;
    height: 490px;
}
#lookBackyear .card.anniversary_join_hd247 .content, .landingpage.anniversary_join_hd247 .popup-anniver .content {
    width: 57%;
    margin-left: 40%;
    text-align: center;
    padding-top: 75px;
    padding-left: 15px;
    padding-right: 70px;
    box-sizing: border-box;
}
.landingpage.anniversary_join_hd247 .popup-anniver.anni-for-3-year .content{
    padding-right: 30px !important;
}
.anni-for-0-year{
    background: url(/static/img/event/pc_0nam.png?v=1);
}
.anni-for-1-year{
    background: url(/static/img/event/pc_1nam.png?v=1);
}
.anni-for-2-year{
    background: url(/static/img/event/pc_2nam.png?v=1);
}
.anni-for-3-year{
    background: url(/static/img/event/pc_3nam.png?v=1);
}
.anni-for-4-year{
    background: url(/static/img/event/pc-4nam.png?v=1);
}
.anni-for-5-year{
    background: url(/static/img/event/pc-5nam.png?v=1);
}
.anni-for-6-year{
    background: url(/static/img/event/pc-6nam.png?v=1);
}
.anni-for-7-year{
    background: url(/static/img/event/pc-7nam.png?v=1);
}
.anni-for-8-year{
    background: url(/static/img/event/pc-8nam.png?v=1);
}
.anni-for-9-year{
    background: url(/static/img/event/pc-9nam.png?v=1);
}
.info-anniversary > span{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px
}
.anni-for-0-year .content {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 40px 100px !important;
}
.anniversary_join_hd247 .anni-for-0-year h2 {
    line-height: 60px;
    color: #d52c51;
    font-size: 46px;
}
.anni-for-0-year .font-iciel{
    font-family: 'CormorantUpright';
    font-size: 24px;
    line-height: 30px;
    color: #005872;
    font-weight: bold;
    margin-top: 15px;
}
/* 111111111111111111111111111 */
.anni-for-1-year .info-anniversary .box-points{
    position: absolute;
    left: 192px;
    top: 184px;
    width: 52px;
}
.anni-for-1-year .info-anniversary .box-answers{
    position: absolute;
    top: 398px;
    left: 197px;
    width: 44px;
}
.anni-for-1-year .info-anniversary .box-thanks{
    position: absolute;
    left: 165px;
    top: 229px;
    width: 44px;
}
.anni-for-1-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 268px;
    left: 203px;
    width: 44px;
}
.anni-for-1-year .info-anniversary .box-questions{
    position: absolute;
    top: 351px;
    left: 191px;
    width: 36px;
}
.anni-for-1-year .info-anniversary .box-verifys{
    position: absolute;
    top: 310px;
    left: 197px;
    width: 36px;
}
/* 22222222222222222222222222 */
.anni-for-2-year .info-anniversary .box-points{
    position: absolute;
    left: 151px;
    top: 182px;
    width: 52px;
}
.anni-for-2-year .info-anniversary .box-answers{
    position: absolute;
    top: 332px;
    left: 255px;
    width: 41px;
}
.anni-for-2-year .info-anniversary .box-thanks{
    position: absolute;
    left: 224px;
    top: 172px;
    width: 41px;
}
.anni-for-2-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 224px;
    left: 230px;
    width: 41px;
}
.anni-for-2-year .info-anniversary .box-questions{
    position: absolute;
    top: 331px;
    left: 172px;
    width: 34px;
}
.anni-for-2-year .info-anniversary .box-verifys{
    position: absolute;
    top: 272px;
    left: 198px;
    width: 34px;
}
/* 333333333333333333333333333 */
.anni-for-3-year .info-anniversary .box-points{
    text-align: center;
    position: absolute;
    left: 123px;
    top: 202px;
    width: 52px;
}
.anni-for-3-year .info-anniversary .box-points img{
    display: block;
    margin: 0 auto;
}
.anni-for-3-year .info-anniversary .box-answers {
    position: absolute;
    left: 180px;
    top: 347px;
    width: 44px;
    text-align: center;
}
.anni-for-3-year .info-anniversary .box-thanks{
    position: absolute;
    left: 192px;
    top: 192px;
    width: 44px;
}
.anni-for-3-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 244px;
    left: 203px;
    width: 36px;
    text-align: center;
}
.anni-for-3-year .info-anniversary .box-questions{
    top: 320px;
    width: 36px;
    left: 127px;
    position: absolute;
}
.anni-for-3-year .info-anniversary .box-verifys{
    top: 300px;
    position: absolute;
    left: 215px;
    width: 36px;
    text-align: center;
}
.anni-for-4-year .info-anniversary .box-points{
    position: absolute;
    left: 155px;
    top: 236px;
    width: 52px;
}
.anni-for-4-year .info-anniversary .box-answers{
    position: absolute;
    top: 374px;
    left: 227px;
    width: 44px;
}
.anni-for-4-year .info-anniversary .box-thanks{
    position: absolute;
    left: 148px;
    top: 300px;
    width: 44px;
}
.anni-for-4-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 227px;
    left: 234px;
    width: 44px;
}
.anni-for-4-year .info-anniversary .box-questions{
    position: absolute;
    top: 322px;
    left: 225px;
    width: 36px;
}
.anni-for-4-year .info-anniversary .box-verifys{
    position: absolute;
    top: 273px;
    left: 238px;
    width: 36px;
}

.anni-for-5-year .info-anniversary .box-points{
    position: absolute;
    left: 155px;
    top: 236px;
    width: 52px;
}
.anni-for-5-year .info-anniversary .box-answers{
    position: absolute;
    top: 376px;
    left: 145px;
    width: 44px;
}
.anni-for-5-year .info-anniversary .box-thanks{
    position: absolute;
    left: 180px;
    top: 297px;
    width: 44px;
}
.anni-for-5-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 234px;
    left: 230px;
    width: 44px;
}
.anni-for-5-year .info-anniversary .box-questions{
    position: absolute;
    top: 395px;
    left: 208px;
    width: 36px;
}
.anni-for-5-year .info-anniversary .box-verifys{
    position: absolute;
    top: 348px;
    left: 238px;
    width: 36px;
}

.anni-for-6-year .info-anniversary .box-points{
    position: absolute;
    left: 159px;
    top: 259px;
    width: 52px;
}
.anni-for-6-year .info-anniversary .box-answers{
    position: absolute;
    top: 383px;
    left: 145px;
    width: 44px;
}
.anni-for-6-year .info-anniversary .box-thanks{
    position: absolute;
    left: 128px;
    top: 314px;
    width: 44px;
}
.anni-for-6-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 230px;
    left: 202px;
    width: 44px;
}
.anni-for-6-year .info-anniversary .box-questions{
    position: absolute;
    top: 386px;
    left: 213px;
    width: 36px;
}
.anni-for-6-year .info-anniversary .box-verifys{
    position: absolute;
    top: 334px;
    left: 234px;
    width: 36px;
}

.anni-for-7-year .info-anniversary .box-points{
    position: absolute;
    left: 175px;
    top: 245px;
    width: 52px;
}
.anni-for-7-year .info-anniversary .box-answers{
    position: absolute;
    top: 305px;
    left: 219px;
    width: 44px;
}
.anni-for-7-year .info-anniversary .box-thanks{
    position: absolute;
    left: 242px;
    top: 250px;
    width: 44px;
}
.anni-for-7-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 250px;
    left: 123px;
    width: 44px;
}
.anni-for-7-year .info-anniversary .box-questions{
    position: absolute;
    top: 350px;
    left: 196px;
    width: 36px;
}
.anni-for-7-year .info-anniversary .box-verifys{
    position: absolute;
    top: 402px;
    left: 163px;
    width: 36px;
}

.anni-for-8-year .info-anniversary .box-points{
    position: absolute;
    left: 148px;
    top: 276px;
    width: 52px;
}
.anni-for-8-year .info-anniversary .box-answers{
    position: absolute;
    top: 387px;
    left: 201px;
    width: 44px;
}
.anni-for-8-year .info-anniversary .box-thanks{
    position: absolute;
    left: 232px;
    top: 322px;
    width: 44px;
}
.anni-for-8-year .info-anniversary .box-best-answers{
    position: absolute;
    left: 158px;
    top: 203px;
    width: 44px;
}
.anni-for-8-year .info-anniversary .box-questions{
    position: absolute;
    top: 349px;
    left: 127px;
    width: 36px;
}
.anni-for-8-year .info-anniversary .box-verifys{
    position: absolute;
    top: 234px;
    left: 233px;
    width: 36px;
}

.anni-for-9-year .info-anniversary .box-points{
    position: absolute;
    left: 164px;
    top: 221px;
    width: 52px;
}
.anni-for-9-year .info-anniversary .box-answers{
    position: absolute;
    top: 287px;
    left: 229px;
    width: 44px;
}
.anni-for-9-year .info-anniversary .box-thanks{
    position: absolute;
    left: 223px;
    top: 238px;
    width: 44px;
}
.anni-for-9-year .info-anniversary .box-best-answers{
    position: absolute;
    top: 278px;
    left: 147px;
    width: 44px;
}
.anni-for-9-year .info-anniversary .box-questions{
    position: absolute;
    top: 323px;
    left: 206px;
    width: 36px;
}
.anni-for-9-year .info-anniversary .box-verifys{
    position: absolute;
    top: 357px;
    left: 172px;
    width: 36px;
}


.box-anni-year{
    width: 789px;
    margin: 0 auto;
    position: relative;
}
.info-anniversary .box-points img {
    padding: 1px 1px 1px 0;
    display: block;
    margin: 0 auto;
}
.info-anniversary .box-thanks img{
    width: 16px;
    height: 20px;
}
.info-anniversary .box-best-answers img{
    padding: 1px 3px 2px 3px;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
}
.info-anniversary .box-verifys img {
    padding: 2px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}
.info-anniversary .box-questions img{
    padding: 1px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}
.info-anniversary .box-answers img{
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    display: block;
    margin: 0 auto;
}
.box-anni-year  .mask-over{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;
}
#lookBackyear .card.anniversary_join_hd247{
    max-width: unset;
    width: unset;
    margin: unset;
    background: unset;
}
#lookBackyear .card.anniversary_join_hd247 > div:first-child {
    padding-top: 0px;
    padding-bottom: 0px;
    background: #fff;
}
.landingpage.anniversary_join_hd247 .popup-anniver.anni-for-3-year {
    padding-bottom: 10px;
    margin-top: 10px;
}
.landingpage.anniversary_join_hd247 .popup-anniver.anni-for-2-year {
    padding-bottom: 0;
    margin-top: 20px;
    height: 480px;
}
#lookBackyear{
    grid-template-columns: unset;
}
#lookBackyear .landingpage.anniversary_join_hd247 .popup-anniver{
    margin-top: 0;
}

@media all and (max-width: 1440px) {
    /* #lookBackyear .anniversary_join_hd247 {
        margin-left: -168px;
    } */
}
@media all and (max-width: 1192px) {
    .content-anni-ago > span{opacity: 1;}
    .anniversary_join_hd247.landingpage .intro {
        padding: 5px 30px 30px 30px;
        margin-bottom: 20px;
    }
    .landingpage .text-intro p{
        font-size: 16px;
        line-height: 22px;
    }
    .anniversary_join_hd247.landingpage .amount-year {
        font-size: 97px;
    }
    .content-anni-ago{
        margin-top: 15px;
    }
    .anniversary_join_hd247 h2 {
        line-height: 50px;
        font-size: 34px;
    }
    .anniversary_join_hd247 .anni-for-0-year h2 {
        line-height: 60px;
        color: #d52c51;
        font-size: 34px;
    }
    .anni-for-0-year .font-iciel {
        font-family: 'CormorantUpright';
        font-size: 21px;
        line-height: 28px;
        margin-top: 5px;
    }
    .anniversary_join_hd247 .intro img {
        margin-left: 20px;
        width: 100px;
    }
    .anniversary_join_hd247 .amount-year {
        font-size: 70px;
        bottom: 52px;
        line-height: 60px;
        left: 64px;
    }
    .anniversary_join_hd247 .leaf-top-left {
        position: absolute;
        width: 58px;
    }
    .anniversary_join_hd247 .flag-top-right {
        position: absolute;
        right: -18px;
        top: -13px;
        width: 140px;
    }
    .anniversary_join_hd247 .intro {
        padding: 5px 15px 30px 15px;
    }
    .anniversary_join_hd247 .bubble-bottom-left {
        position: absolute;
        bottom: -6px;
        left: -29px;
        width: 80px;
    }
    .anniversary_join_hd247 .block-avt {
        width: 100px;
        height: 100px;
    }
    .anniversary_join_hd247 .h247-info-person{
        margin-bottom: 10px;
    }
    .anniversary_join_hd247 .popup-anniver{
        width: 650px;
    }
    /* #lookBackyear .anniversary_join_hd247 {
        max-width: unset;
        width: 736px;
        padding: 35px 0 30px 0;
        background-image: url(/static/img/frame.png);
        background-repeat: no-repeat;
        background-size: 708px;
        background-position: 25px -16px;
    } */
    .landingpage.anniversary_join_hd247 .popup-anniver {
        width: 766px;
        height: 490px;
    }
    .info-anniversary > span {
        font-size: 13px;
    }
    .anni-for-4-year .info-anniversary .box-points {
        left: 149px;
        top: 233px;
    }
    .anni-for-4-year .info-anniversary .box-thanks {
        position: absolute;
        left: 140px;
        top: 302px;
    }
    .anni-for-4-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 227px;
        left: 227px;
    }
    .anni-for-4-year .info-anniversary .box-verifys {
        position: absolute;
        top: 273px;
        left: 228px;
    }
    .anni-for-4-year .info-anniversary .box-questions {
        position: absolute;
        top: 320px;
        left: 217px;
    }
    .anni-for-4-year .info-anniversary .box-answers {
        position: absolute;
        left: 219px;
        top: 370px;
    }
    .anni-for-3-year .info-anniversary .box-points {
        left: 115px;
        top: 203px;
    }
    .anni-for-3-year .info-anniversary .box-thanks {
        position: absolute;
        left: 185px;
        top: 190px;
    }
    .anni-for-3-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 243px;
        left: 195px;
    }
    .anni-for-3-year .info-anniversary .box-verifys {
        position: absolute;
        top: 298px;
        left: 204px;
    }
    .anni-for-3-year .info-anniversary .box-questions {
        position: absolute;
        top: 310px;
        left: 117px;
    }
    .anni-for-3-year .info-anniversary .box-answers {
        position: absolute;
        left: 169px;
        top: 344px;
    }
    .anni-for-2-year .info-anniversary .box-points{
        position: absolute;
        left: 148px;
        top: 184px;
    }
    .anni-for-2-year .info-anniversary .box-answers{
        position: absolute;
        top: 330px;
        left: 243px;
    }
    .anni-for-2-year .info-anniversary .box-thanks{
        position: absolute;left: 219px;
        top: 173px;
    }
    .anni-for-2-year .info-anniversary .box-best-answers{
        position: absolute;
        top: 225px;
        left: 222px;
    }
    .anni-for-2-year .info-anniversary .box-questions{
        position: absolute;
        top: 330px;
        left: 168px;
    }
    .anni-for-2-year .info-anniversary .box-verifys{
        position: absolute;
        top: 271px;
        left: 190px;
    }
    .anni-for-1-year .info-anniversary .box-points{
        position: absolute;
        left: 180px;
        top: 186px;
    }
    .anni-for-1-year .info-anniversary .box-answers{
        position: absolute;
        top: 395px;
        left: 191px;
    }
    .anni-for-1-year .info-anniversary .box-thanks{
        position: absolute;
        left: 158px;
        top: 229px;
    }
    .anni-for-1-year .info-anniversary .box-best-answers{
        position: absolute;
        top: 269px;
        left: 194px;
    }
    .anni-for-1-year .info-anniversary .box-questions{
        position: absolute;
        top: 347px;
        left: 187px;
    }
    .anni-for-1-year .info-anniversary .box-verifys{
        position: absolute;
        top: 312px;
        left: 193px;
    }
}
@media all and (max-width: 767px) {
    .landingpage {
        padding: 50px 0;
    }
    .anniversary_join_hd247.landingpage .intro {
        padding: 5px 30px 20px 30px;
        margin-bottom: 20px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver {
        padding-bottom: 20px;
        width: 363px;
        overflow: hidden;
        border: none;
        margin-top: 20px;
        height: 654px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-3-year{
        width: 345px;
    }
    .box-anni-year {
        width: auto;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-2-year{
        height: 679px;
    }
    .landingpage.anniversary_join_hd247 .leaf-top-left, .landingpage.anniversary_join_hd247 .flag-top-right, .landingpage.anniversary_join_hd247 .bubble-bottom-left{display: none;}
    .anniversary_join_hd247.landingpage .block-avt {
        margin-left: 0px;
    }
    .anniversary_join_hd247 .text-intro {
        display: inline-block;
        width: calc(100% - 150px);
    }
    .landingpage .info-anniversary {
        display: block;
        width: auto;
    }
    /* #lookBackyear .anniversary_join_hd247 {
        background: unset;
        margin-left: -18px;
        width: 480px;
    }
    #lookBackyear .anniversary_join_hd247 .popup-anniver{
        width: auto;
    } */
    .anniversary_join_hd247 h2 {
        line-height: 40px;
        font-size: 36px;
        margin-bottom: 15px;
    }
    .anniversary_join_hd247 .anni-for-2-year h2 {
        font-size: 30px;
    }
    .anni-for-3-year .info-anniversary .box-points {
        text-align: center;
        position: absolute;
        left: 110px;
        top: 87px;
    }
    .anni-for-3-year .info-anniversary .box-thanks {
        position: absolute;
        left: 173px;
        top: 78px;
    }
    
    .info-anniversary > span {
        font-size: 12px;
        line-height: 14px;
    }
    .anniversary_join_hd247 .leaf-top-left {
        position: absolute;
        width: 50px;
    }
    .anniversary_join_hd247 .flag-top-right{width: 120px;}
    .anniversary_join_hd247 .bubble-bottom-left {
        position: absolute;
        bottom: -6px;
        left: -20px;
        width: 60px;
    }
    .anniversary_join_hd247 .intro {
        padding: 5px 10px 15px 10px;
        margin-bottom: 15px;
    }
    .landingpage.anniversary_join_hd247 .h247-info-person td{text-align: left;}
    .anniversary_join_hd247 .h247-info-person td {
        width: 33%;
        display: inline-block;
        margin-bottom: 10px;
    }
    .text-intro p{
        font-size: 15px;
        line-height: 20px;
    }
    .anniversary_join_hd247 .amount-year {
        font-size: 70px;
        bottom: 37px;
        line-height: 60px;
        left: 58px;
    }
    .info-anniversary .cl-blue{line-height: 14px;}
    .popup-anniver .h247-info-person tr{padding: 0;}
    .anniversary_join_hd247 .h247-info-person td > span{
        margin-bottom: -5px;
        display: inline-block;
        line-height: 14px;
    }
    .anniversary_join_hd247 .h247-info-person {
        margin-bottom: 6px;
    }
    .info-anniversary p:last-child{
        margin-top: 10px;
    }
    .info-anniversary {
        width: calc(100% - 140px);
    }
    .nothing-anniver {
        padding: 0 15px;
    }
    .anni-for-1-year{
        background: url(/static/img/event/mobi_1nam.png?v=1);
    }
    .anni-for-2-year{
        background: url(/static/img/event/mobi_2nam.png?v=1);
    }
    .anni-for-3-year{
        background: url(/static/img/event/mobi_3nam.png?v=1);
    }
    .anni-for-4-year{
        background: url(/static/img/event/mobi-4nam.png?v=1);
    }
    .anni-for-5-year{
        background: url(/static/img/event/mobi-5nam.png?v=1);
    }
    .anni-for-6-year{
        background: url(/static/img/event/mobi-6nam.png?v=1);
    }
    .anni-for-7-year{
        background: url(/static/img/event/mobi-7nam.png?v=1);
    }
    .anni-for-8-year{
        background: url(/static/img/event/mobi-8nam.png?v=1);
    }
    .anni-for-9-year{
        background: url(/static/img/event/mobi-9nam.png?v=1);
    }
    .anniversary_join_hd247{background: #fff;}
    .landingpage.anniversary_join_hd247 .popup-anniver .content {
        width: 100%;
        margin-left: 0;
        text-align: center;
        padding-top: 80px;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
        margin-top: 230px;
    }
    #lookBackyear .card.anniversary_join_hd247 .content, .landingpage.anniversary_join_hd247 .popup-anniver .content {
        width: 100%;
        margin-left: 0;
        text-align: center;
        padding-top: 75px;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-2-year .content, .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-1-year .content{
        padding-left: 35px !important;
        padding-right: 35px !important;
    }
    .anniversary_join_hd247.anni-for-2-year  h2{font-size: 23px;}

    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-9-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-9-year{padding-bottom: 0;}
    .anni-for-9-year .info-anniversary .box-points {
        position: absolute;
        left: 157px;
        top: 95px;
    }
    .anni-for-9-year .info-anniversary .box-thanks {
        position: absolute;
        left: 210px;
        top: 110px;
    }
    .anni-for-9-year .info-anniversary .box-best-answers {
        position: absolute;
        left: 142px;
        top: 147px;
    }
    .anni-for-9-year .info-anniversary .box-verifys {
        position: absolute;
        left: 163px;
        top: 217px;
    }
    .anni-for-9-year .info-anniversary .box-questions {
        position: absolute;
        left: 190px;
        top: 184px;
    }
    .anni-for-9-year .info-anniversary .box-answers {
        position: absolute;
        top: 155px;
        left: 215px;
    }

    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-8-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-8-year{padding-bottom: 0;}
    .anni-for-8-year .info-anniversary .box-points {
        position: absolute;
        left: 140px;
        top: 142px;
    }
    .anni-for-8-year .info-anniversary .box-thanks {
        position: absolute;
        left: 201px;
        top: 111px;
    }
    .anni-for-8-year .info-anniversary .box-best-answers {
        position: absolute;
        left: 148px;
        top: 90px;
    }
    .anni-for-8-year .info-anniversary .box-verifys {
        position: absolute;
        left: 183px;
        top: 228px;
    }
    .anni-for-8-year .info-anniversary .box-questions {
        position: absolute;
        left: 128px;
        top: 196px;
    }
    .anni-for-8-year .info-anniversary .box-answers {
        position: absolute;
        top: 177px;
        left: 203px;
    }

    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-7-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-7-year{padding-bottom: 0;}
    .anni-for-7-year .info-anniversary .box-points {
        position: absolute;
        left: 215px;
        top: 128px;
    }
    .anni-for-7-year .info-anniversary .box-thanks {
        position: absolute;
        left: 173px;
        top: 127px;
    }
    .anni-for-7-year .info-anniversary .box-best-answers {
        position: absolute;
        left: 133px;
        top: 127px;
    }
    .anni-for-7-year .info-anniversary .box-verifys {
        position: absolute;
        left: 167px;
        top: 244px;
    }
    .anni-for-7-year .info-anniversary .box-questions {
        position: absolute;
        left: 186px;
        top: 208px;
    }
    .anni-for-7-year .info-anniversary .box-answers {
        position: absolute;
        top: 173px;
        left: 203px;
    }

    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-6-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-6-year{padding-bottom: 0;}
    .anni-for-6-year .info-anniversary .box-points {
        position: absolute;
        left: 145px;
        top: 128px;
    }
    .anni-for-6-year .info-anniversary .box-thanks {
        position: absolute;
        left: 122px;
        top: 171px;
    }
    .anni-for-6-year .info-anniversary .box-best-answers {
        position: absolute;
        left: 179px;
        top: 103px;
    }
    .anni-for-6-year .info-anniversary .box-verifys {
        position: absolute;
        left: 203px;
        top: 185px;
    }
    .anni-for-6-year .info-anniversary .box-questions {
        position: absolute;
        left: 187px;
        top: 228px;
    }
    .anni-for-6-year .info-anniversary .box-answers {
        position: absolute;
        top: 226px;
        left: 135px;
    }

    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-5-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-5-year{padding-bottom: 0;}
    .anni-for-5-year .info-anniversary .box-points {
        position: absolute;
        left: 125px;
        top: 95px;
    }
    .anni-for-5-year .info-anniversary .box-thanks {
        position: absolute;
        left: 160px;
        top: 147px;
    }
    .anni-for-5-year .info-anniversary .box-best-answers {
        position: absolute;
        left: 192px;
        top: 91px;
    }
    .anni-for-5-year .info-anniversary .box-verifys {
        position: absolute;
        left: 200px;
        top: 190px;
    }
    .anni-for-5-year .info-anniversary .box-questions {
        position: absolute;
        left: 173px;
        top: 228px;
    }
    .anni-for-5-year .info-anniversary .box-answers {
        position: absolute;
        top: 216px;
        left: 116px;
    }

    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-4-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-4-year{padding-bottom: 0;}
    .anni-for-4-year .info-anniversary .box-points {
        position: absolute;
        left: 125px;
        top: 95px;
    }
    .anni-for-4-year .info-anniversary .box-thanks {
        position: absolute;
        left: 119px;
        top: 149px;
    }
    .anni-for-4-year .info-anniversary .box-best-answers {
        position: absolute;
        left: 190px;
        top: 87px;
    }
    .anni-for-4-year .info-anniversary .box-verifys {
        position: absolute;
        left: 191px;
        top: 124px;
    }
    .anni-for-4-year .info-anniversary .box-questions {
        position: absolute;
        left: 183px;
        top: 164px;
    }
    .anni-for-4-year .info-anniversary .box-answers {
        position: absolute;
        top: 207px;
        left: 185px;
    }
    .anni-for-3-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 124px;
        left: 183px;
    }
    .anni-for-3-year .info-anniversary .box-verifys {
        position: absolute;
        top: 173px;
        left: 192px;
    }
    .anni-for-3-year .info-anniversary .box-questions {
        position: absolute;
        top: 195px;
        left: 117px;
    }
    .anni-for-3-year .info-anniversary .box-answers {
        position: absolute;
        left: 159px;
        top: 215px;
    }
    
    .landingpage.anniversary_join_hd247 .popup-anniver .content p.text-semi{
        font-size: 18px !important;
    }
    .anni-for-2-year .info-anniversary .box-points {
        position: absolute;
        left: 115px;
        top: 122px;
    }
    .anni-for-2-year .info-anniversary .box-thanks {
        position: absolute;
        left: 173px;
        top: 113px;
    }
    .anni-for-2-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 156px;
        left: 177px;
    }
    .anni-for-2-year .info-anniversary .box-verifys {
        position: absolute;
        top: 192px;
        left: 153px;
    }
    .anni-for-2-year .info-anniversary .box-questions {
        position: absolute;
        top: 240px;
        left: 134px;
    }
    .font-iciel {
        font-family: 'CormorantUpright';
        font-size: 18px;
        line-height: 24px;
    }
    .anni-for-2-year .info-anniversary .box-answers {
        position: absolute;
        top: 241px;
        left: 199px;
    }
    .anniversary_join_hd247 .block-avt {
        display: block;
        width: 80px;
        height: 80px;
        margin: 0 auto;
        text-align: center;
        margin: 15px auto 5px;
    }
    .anniversary_join_hd247.landingpage .block-avt {
        text-align: center;
        margin: 15px auto 5px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-1-year .content{
        padding-left: 35px;
        padding-right: 35px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-1-year{padding-bottom: 0;}
    .anni-for-1-year .info-anniversary .box-points {
        position: absolute;
        left: 156px;
        top: 72px;
    }
    .anni-for-1-year .info-anniversary .box-thanks {
        position: absolute;
        left: 137px;
        top: 107px;
    }
    .anni-for-1-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 138px;
        left: 170px;
    }
    .anni-for-1-year .info-anniversary .box-verifys {
        position: absolute;
        top: 172px;
        left: 163px;
    }
    .anni-for-1-year .info-anniversary .box-questions {
        position: absolute;
        top: 202px;
        left: 154px;
    }
    .anni-for-1-year .info-anniversary .box-answers {
        position: absolute;
        top: 236px;
        left: 164px;
    }
    .box-anni-year{margin-top: 15px !important;}
    #lookBackyear .groupBtn button{font-size: 14px;}
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-0-year {
        width: 360px;
        height: 315px !important;
        margin-top: 30px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-0-year .content {
        margin: 0;
    }
    .anni-for-0-year .content {
        padding: 80px 40px 0px 40px !important
    }
    .anni-for-0-year .font-iciel {
        font-size: 18px;
        line-height: 24px;
        margin-top: 0;
    }
    .anniversary_join_hd247 .anni-for-0-year h2 {
        line-height: 36px;
        color: #d52c51;
        font-size: 34px;
        margin-bottom: 10px;
    }
    .anni-for-0-year {
        background: url(/static/img/event/mobi_0nam.png);
    }
}
@media all and (max-width: 500px) {
    .landingpage.anniversary_join_hd247 .intro img,.anniversary_join_hd247 .intro img{margin: 0 auto; display: block;}
    .anniversary_join_hd247 .intro, .landingpage.anniversary_join_hd247 .intro{
        text-align: center;
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .anniversary_join_hd247 .leaf-top-left, .anniversary_join_hd247 .flag-top-right {
        position: absolute;
        right: 0;
        top: 0;
    }
    .anniversary_join_hd247 .leaf-top-left {
        position: absolute;
        top: 0;
        right: 0;
    }
    .landingpage .info-anniversary {
        display: block;
        width: unset;
        padding: 0 10px;
    }
    .landingpage.anniversary_join_hd247 .h247-info-person td {
        text-align: center;
    }
    .landingpage.anniversary_join_hd247 .h247-info-person{
        margin-bottom: 10px;
    }
    
    .anniversary_join_hd247 .bubble-bottom-left{display: none;}
    .anniversary_join_hd247 .amount-year {
        font-size: 70px;
        bottom: unset;
        line-height: 60px;
        left: 50%;
        margin-left: -21px;
        top: 1px;
    }
    .anniversary_join_hd247 .text-intro {
        display: block;
        width: 100%;
        padding: 5px 0px;
        text-align: center;
        box-sizing: border-box;
    }
    /* #lookBackyear {
        grid-template-columns: unset;
    }
    #lookBackyear .anniversary_join_hd247 {
        background: unset;
        margin-left: 0;
        width: 320px;
    } */
    .anniversary_join_hd247 .leaf-top-left, .anniversary_join_hd247 .flag-top-right {
        position: absolute;
        right: -17px;
        top: -13px;
    }
    .anniversary_join_hd247 .block-avt {
        display: block;
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    .info-anniversary {
        width: 100%;
        padding-left: 0;
    }
    .info-anniversary .cl-blue {
        line-height: 14px;
        text-align: center;
        margin-top: 10px;
        font-size: 12px;
    }
    .anniversary_join_hd247 .h247-info-person{
        margin: 0;
    }
    .anniversary_join_hd247 .h247-info-person td{border-bottom: unset;}
    .landingpage .content-anni-ago img{width: 90px;}
    .anniversary_join_hd247.landingpage .amount-year {
        font-size: 66px;
        left: 44px;
        top: -7px;
    }
    
}
@media all and (max-width: 360px){
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-2-year {
        height: 603px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver {
        width: 320px;
    }
    .anni-for-1-year .info-anniversary .box-points {
        position: absolute;
        left: 133px;
        top: 60px;
    }
    .anni-for-1-year .info-anniversary .box-thanks {
        position: absolute;
        left: 126px;
        top: 94px;
    }
    .anni-for-1-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 119px;
        left: 153px;
    }
    .anni-for-1-year .info-anniversary .box-verifys {
        position: absolute;
        top: 149px;
        left: 143px;
    }
    .anni-for-1-year .info-anniversary .box-questions {
        position: absolute;
        top: 176px;
        left: 130px;
    }
    .anni-for-1-year .info-anniversary .box-answers {
        position: absolute;
        top: 213px;
        left: 138px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver .content{
        padding-top: 10px !important;
    }
    .anniversary_join_hd247 h2 {
        line-height: 40px;
        font-size: 20px;
        margin-bottom: 0;
    }
    .anniversary_join_hd247 h2 img{display: none;}
    .landingpage.anniversary_join_hd247 .popup-anniver .content p.text-semi {
        font-size: 14px !important;
    }
    .anni-for-2-year .info-anniversary .box-points {
        position: absolute;
        left: 100px;
        top: 108px;
    }
    .anni-for-2-year .info-anniversary .box-thanks {
        position: absolute;
        left: 154px;
        top: 101px;
    }
    .anni-for-2-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 139px;
        left: 157px;
    }
    .anni-for-2-year .info-anniversary .box-verifys {
        position: absolute;
        top: 172px;
        left: 134px;
    }
    .anni-for-2-year .info-anniversary .box-questions {
        position: absolute;
        top: 213px;
        left: 118px;
    }
    .anni-for-2-year .info-anniversary .box-answers {
        position: absolute;
        top: 212px;
        left: 171px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver{
        height: 575px;
    }
    .anni-for-3-year .info-anniversary .box-points {
        text-align: center;
        position: absolute;
        left: 115px;
        top: 79px;
    }
    .anni-for-3-year .info-anniversary .box-thanks {
        position: absolute;
        left: 167px;
        top: 66px;
    }
    .anni-for-3-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 109px;
        left: 180px;
    }
    .anni-for-3-year .info-anniversary .box-verifys {
        position: absolute;
        top: 150px;
        left: 184px;
    }
    .anni-for-3-year .info-anniversary .box-questions {
        position: absolute;
        top: 168px;
        left: 121px;
    }
    .anni-for-3-year .info-anniversary .box-answers {
        position: absolute;
        left: 160px;
        top: 188px
    }
    .anni-for-4-year .info-anniversary .box-points {
        position: absolute;
        left: 108px;
        top: 81px;
    }
    .anni-for-4-year .info-anniversary .box-thanks {
        position: absolute;
        left: 101px;
        top: 129px;
    }
    .anni-for-4-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 76px;
        left: 164px;
    }
    .anni-for-4-year .info-anniversary .box-verifys {
        position: absolute;
        top: 109px;
        left: 165px;
    }
    .anni-for-4-year .info-anniversary .box-questions {
        position: absolute;
        top: 143px;
        left: 159px;
    }
    .anni-for-4-year .info-anniversary .box-answers {
        position: absolute;
        top: 179px;
        left: 160px;
    }

    .anni-for-5-year .info-anniversary .box-points {
        position: absolute;
        left: 105px;
        top: 81px;
    }
    .anni-for-5-year .info-anniversary .box-thanks {
        position: absolute;
        left: 133px;
        top: 125px;
    }
    .anni-for-5-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 78px;
        left: 164px;
    }
    .anni-for-5-year .info-anniversary .box-verifys {
        position: absolute;
        top: 162px;
        left: 174px;
    }
    .anni-for-5-year .info-anniversary .box-questions {
        position: absolute;
        top: 201px;
        left: 148px;
    }
    .anni-for-5-year .info-anniversary .box-answers {
        position: absolute;
        top: 189px;
        left: 100px;
    }

    .anni-for-6-year .info-anniversary .box-points {
        position: absolute;
        left: 125px;
        top: 114px;
    }
    .anni-for-6-year .info-anniversary .box-thanks {
        position: absolute;
        left: 105px;
        top: 148px;
    }
    .anni-for-6-year .info-anniversary .box-best-answers {
        position: absolute;
        top: 90px;
        left: 156px;
    }
    .anni-for-6-year .info-anniversary .box-verifys {
        position: absolute;
        top: 162px;
        left: 176px;
    }
    .anni-for-6-year .info-anniversary .box-questions {
        position: absolute;
        top: 199px;
        left: 164px;
    }
    .anni-for-6-year .info-anniversary .box-answers {
        position: absolute;
        top: 196px;
        left: 116px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-0-year {
        width: 290px;
        height: 280px !important;
        margin-top: 10px;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-0-year .content {
        margin: 0;
    }
    .landingpage.anniversary_join_hd247 .popup-anniver.anni-for-0-year .content {
        padding-top: 65px !important;
    }
    
}

@font-face {
    font-family: "Lobster";
    src: url('/static/font/SVN-Lobster.woff2') format('woff2')
         url('/static/font/SVN-Lobster.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.contain-bg {
    background-image: url(/static/img/khai_but_dau_nam/giaycuon.png);
    background-repeat: no-repeat;
    width: 825px;
    height: 910px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Lobster";
}

.contain-bg .content .username_text {
    font-size: 25px;
    color: #ffffff;
    font-family: "Lobster";
    text-align: center;
}

.contain-bg .content .lixi_text {
    font-size: 34px;
    color: #f5e400;
    font-family: "Lobster";
}

#lookBackyear .card .groupBtn .downloadButton {
    margin-left: 20px;
}

.contain-bg .content .resizeUserName {
    font-size: 14px;
}


@media screen and (max-width: 480px) {
    .contain-bg {
        background-image: url(/static/img/khai_but_dau_nam/giaycuon.png);
        background-repeat: no-repeat;
        width: 100%;
        height: 452px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: "Lobster";
        background-size: contain;
    }

    #lookBackyear .card .content {
        padding: 0 1em 1em 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 59% !important;
    }

    .contain-bg .content .username_text {
        font-size: 14px;
        color: #ffffff;
        font-family: "Lobster";
        text-align: center;
        line-height: 16px;
        margin-bottom: 2px !important;
    }

    .contain-bg .content #usernameText {
        margin-bottom: 26px !important;
    }

    .contain-bg .content .lixi_text {
        font-size: 22px;
        color: #f5e400;
        font-family: "Lobster";
    }

    #lookBackyear .card .logoHoidap {
        width: 40% !important;
        margin-bottom: 0px !important;
        -webkit-margin-bottom: 20px;
    }

    #lookBackyear .card .groupBtn .downloadButton {
        margin-left: 0px;
    }
    
    _::-webkit-full-page-media, _:future, :root .contain-bg .content #textLogo {
        width: 33% !important;
        margin-bottom: 0px !important;
    }

    _::-webkit-full-page-media, _:future, :root .contain-bg .content .groupBtn #btDowload {
        width: 20%;
        height: 60%;
    }
}
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#countdown {
    font-family: Arial,Tahoma,Helvetica,Sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-size: 14px;
    margin-top: 0
}
.pc-countdown {
    width: 100%;
    height: auto;
    background-image: linear-gradient(to right,#ffc000,#ed7237,#ff950c);
    display: block;
    position: relative;
    text-align: center;
    padding: 10px 0;
    text-transform: uppercase;
}
.bg-countdown {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url(https://cdn.tuyensinh247.com/countdown/pc-v1/images/bg-countdown.png);
}

.pc-countdown .coundown_main_title {
    font-weight: bold;
    color: #fff;
    font-size: 28px;
}
.pc-countdown p {
    color: #fff;
    font-size: 16px;
    margin: 5px 0 8px;
    line-height: 22px;
}
.run-clock {
    /*margin: 15px auto;*/
    overflow: hidden;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0;
    zoom: 1;
    /**display: inline;*/
    position: relative;
}

.run-clock li {
    float: left;
    width: 90px;
    height: 76px;
    background-color: #b03611;
    margin-left: 20px;
    border-radius: 10px;
    border: 2px solid #a22a06;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top10 {
    margin-top: 4px;
}
.pc-countdown span {
    color: #fff;
    font-size: 16px;
}
.action-click {
    padding: 6px 16px;
    background-color: #f8bb18;
    border-radius: 5px;
    display: inline-block;
    -webkit-transition: all ease 0.3s;
    -webkit-transform: scale(0.9);
}
.action-click img{margin-top: -4px;}
.close-banner {
    position: absolute;
    top: 8px;
    right: 8px;
}

.run-clock li strong {
    font-size: 48px;
    line-height: 8px;
    padding-top: 24px;
    padding-bottom: 10px;
    display: block;
}

.run-clock li p {
    font-size: 14px;
}

.pc-countdown:hover .action-click {
    background-color: #ff9600;
    -webkit-transition: all ease 0.3s;
    -webkit-transform: scale(1);
}

.run-text {
    font-size: 30px!important;
    padding: 5px 30px;
    background-color: #b03611;
    border: 2px solid #a22a06;
    display: inline-block;
    border-radius: 200px;
}

.pc_banner_thpt {
    width: 100%;
    display: block;
    margin-top: 50px;
    margin-bottom: -52px
}
.mb_banner_thpt {
    width: 100%;
    display: none;
    margin-top: 47px;
    margin-bottom: -50px
}

@media screen and (max-width: 960px) {
    .pc_banner_thpt {
        display: none;
    }
    .mb_banner_thpt {
        display: block;
    }
}

@media screen and (max-width: 480px) {
    .pc_banner_thpt {
        display: none;
    }
    .mb_banner_thpt {
        display: block;
    }
    .run-clock li {
        width: 76px;
    }
    .pc-countdown span {
        color: #fff;
        font-size: 14px;
    }
    .run-text {
        font-size: 24px!important;
    }
}

@media screen and (max-width: 420px){
    .run-clock li {
        width: 64px;
        height: 64px;
    }
    .run-clock li strong {
        font-size: 36px;
    }
    .pc-countdown .coundown_main_title {
        font-size: 24px;
    }
    .pc-countdown p{
        font-size: 15px;
    }
}

@media screen and (max-width: 348px){
    .run-clock li {
        width: 54px;
        height: 54px;
        margin-left: 12px;
    }
    .run-clock li strong {
        font-size: 30px;
    }
    .pc-countdown .coundown_main_title {
        font-size: 24px;
    }
    .pc-countdown p{
        font-size: 15px;
    }
}

#countdown {
    font-family: Arial,Tahoma,Helvetica,Sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-size: 14px;
    margin-top: 0
}
.pc-countdown {
    width: 100%;
    height: auto;
    background-image: linear-gradient(to right,#ffc000,#ed7237,#ff950c);
    display: block;
    position: relative;
    text-align: center;
    padding: 10px 0;
    text-transform: uppercase;
}
.bg-countdown {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url(https://cdn.tuyensinh247.com/countdown/pc-v1/images/bg-countdown.png);
}

.pc-countdown .coundown_main_title {
    font-weight: bold;
    color: #fff;
    font-size: 28px;
}
.pc-countdown p {
    color: #fff;
    font-size: 16px;
    margin: 5px 0 8px;
    line-height: 22px;
}
.run-clock {
    /*margin: 15px auto;*/
    overflow: hidden;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0;
    zoom: 1;
    /**display: inline;*/
    position: relative;
}

.run-clock li {
    float: left;
    width: 90px;
    height: 76px;
    background-color: #b03611;
    margin-left: 20px;
    border-radius: 10px;
    border: 2px solid #a22a06;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top10 {
    margin-top: 4px;
}
.pc-countdown span {
    color: #fff;
    font-size: 16px;
}
.action-click {
    padding: 6px 16px;
    background-color: #f8bb18;
    border-radius: 5px;
    display: inline-block;
    -webkit-transition: all ease 0.3s;
    -webkit-transform: scale(0.9);
}
.action-click img{margin-top: -4px;}
.close-banner {
    position: absolute;
    top: 8px;
    right: 8px;
}

.run-clock li strong {
    font-size: 48px;
    line-height: 8px;
    padding-top: 24px;
    padding-bottom: 10px;
    display: block;
}

.run-clock li p {
    font-size: 14px;
}

.pc-countdown:hover .action-click {
    background-color: #ff9600;
    -webkit-transition: all ease 0.3s;
    -webkit-transform: scale(1);
}

.run-text {
    font-size: 30px!important;
    padding: 5px 30px;
    background-color: #b03611;
    border: 2px solid #a22a06;
    display: inline-block;
    border-radius: 200px;
}

.pc_banner_thpt {
    width: 100%;
    display: block;
    margin-top: 50px;
    margin-bottom: -52px
}
.mb_banner_thpt {
    width: 100%;
    display: none;
    margin-top: 47px;
    margin-bottom: -50px
}

@media screen and (max-width: 960px) {
    .pc_banner_thpt {
        display: none;
    }
    .mb_banner_thpt {
        display: block;
    }
}

@media screen and (max-width: 480px) {
    .pc_banner_thpt {
        display: none;
    }
    .mb_banner_thpt {
        display: block;
    }
    .run-clock li {
        width: 76px;
    }
    .pc-countdown span {
        color: #fff;
        font-size: 14px;
    }
    .run-text {
        font-size: 24px!important;
    }
}

@media screen and (max-width: 420px){
    .run-clock li {
        width: 64px;
        height: 64px;
    }
    .run-clock li strong {
        font-size: 36px;
    }
    .pc-countdown .coundown_main_title {
        font-size: 24px;
    }
    .pc-countdown p{
        font-size: 15px;
    }
}

@media screen and (max-width: 348px){
    .run-clock li {
        width: 54px;
        height: 54px;
        margin-left: 12px;
    }
    .run-clock li strong {
        font-size: 30px;
    }
    .pc-countdown .coundown_main_title {
        font-size: 24px;
    }
    .pc-countdown p{
        font-size: 15px;
    }
}

.AdAAnchor_Bot {
    bottom: 0;
    position: fixed;
    width: 100%;
    padding: 2px 0
}

.AdAAnchor_Bot #AdAAnchorBtn {
    top: -16px;
    position: absolute;
    padding: 1px 12px;
    font-family: sans-serif;
    font-size: 6px;
    border-radius: 3px 3px 0 0;
    display: none;
}

.AdAAnchor_Top {
    top: 0;
    position: fixed;
    width: 100%;
    padding: 2px 0
}

.AdAAnchor_Top #AdAAnchorBtn {
    bottom: -16px;
    position: absolute;
    padding: 1px 12px;
    font-family: sans-serif;
    font-size: 6px;
    border-radius: 0 0 3px 3px;
}

#AdAAnchor {
    padding-top: 10px !important
}

#AdAAnchor, #AdAAnchorBtn {
    z-index: 999;
    background: #eee;
    border: 0.24px solid #eee;
    left: 0;
}

#AdAAnchorAd {
    width: fit-content;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
}

#AdAAnchorBtn > i {
    border: solid #666;
    border-width: 0 2.5px 2.5px 0;
    display: inline-block;
    padding: 4px;
    position: relative;
    z-index: 999;
}

.AdA_bottomUp, .AdA_topDown {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    vertical-align: super;
    bottom: -6px;
}

.AdA_bottomDown, .AdA_topUp {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    vertical-align: super;
    bottom: 0px;
}

@media screen and (max-width: 470px) {
    .footer-ads-sticky {
        padding-bottom: 70px;
    }

    .form-add-question {
        bottom: 120px !important;
    }
}

.sticky-bottom {
    width: 100%;
    bottom: 0em;
    background: #f2f2f2;
    position: fixed;
    padding-top: 5px;
}

.adasia-ads {
    text-align: center;
    margin: 10px auto;
    padding: 10px 0;
}

.adasia-ads::before {
    content: "Advertisement";
    text-align: center;
    color: #b8b8b8;
    font-size: small;
}

.mashead-ad {
    padding: 20px 0;
}

#sticky-ad {
    border: 1px solid #b8b8b8;
    display: inline-block;
    position: sticky;
    top: 0;
}

.sticky-wrapper {
    position: relative;
    height: 3rem;
}

.sticky-wrapper.sticky {
    position: fixed;
    top: 70px;
    width: 336px;
}
.btn-sticky-bottom{
    background:#f2f2f2;text-align:center;
    position:absolute;top:-15px;padding:5px 10px 10px;border-radius:100%;z-index:888;left:50%;margin-left:-15px;
}
.adasia_bottom_sticky{
    position: relative;
    z-index: 999;
}
.div-input-name-book {
  display: flex;
}

.div-input-name-book input {
  width: 93%;
  padding: 8px 12px;
  background-color: #dae8ed;
  border-radius: 8px;
  border: 0;
  font-size: 17px;
}

.div-input-name-book input:focus {
  outline: none;
}

.div-input-name-book input::placeholder {
  font-weight: 600;
}

.input-required {
  color: red;
  margin-left: 3px;
}

.div-img-show {
  background-color: #ccc;
  display: inline-block;
  border-radius: 15px;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 5px 5px 10px #ccc;
  width: 145px;
  height: 205px;
}

.opt-ask.modal-opt-ask a {
  padding: 1px;
  width: 13px;
  height: 13px;
}

.btn-add-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.btn-loading {
  padding: 3px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.icon-close-img {
  border: 1px solid red;
  color: red;
  background-color: #fff;
  border-radius: 45px;
  padding: 1px 4px;
  padding: 0 7px;
  position: absolute;
  top: -4px;
  right: -4px;
  font-weight: 600;
}

.icon-close-img:hover {
  color: #fff;
  background-color: red;
  font-weight: 600;
}

.comment-avatar-book {
  width: 28px;
  height: 28px;
  border-radius: 45px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img-items-book {
  width: 95px;
  height: 125px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  box-shadow: 1px 1px 10px #666;
}

.btn-add-new-book {
  min-width: 95px;
}

.div-items-book {
  margin-right: 8px;
}

.submit-commt {
  right: 25px !important;
}

.form-textarea.comment.comment-book {
  width: 89% !important;
}

.icon-report {
  color: #4298e0;
  font-weight: 600;
}

.div-react-crops .ReactCrop {
  width: 100%;
  height: calc(100% - 120px);
}

.div-react-crops .ReactCrop img {
  margin-right: auto;
  margin-left: auto;
  max-height: 420px;
  height: 420px;
}

.modal-delete {
  text-align: center;
}

.modal-delete h2 {
  color: rgb(255, 77, 77);
  font-size: 24px;
}

.modal-delete p {
  margin-top: 30px;
  font-size: 18px;
}

.modal-delete > div {
  margin-top: 60px;
}

.modal-delete .btn-cancel-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-right: 12px;
}

.modal-delete .btn-delete-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #e7b712;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.modal-delete .btn-cancel-book:hover {
  background-color: #137ea1;
}

.modal-delete .btn-delete-book:hover {
  background-color: #d4a303;
}

@media screen and (max-width: 768px) {
  .div-input-name-book input {
    font-size: 20px !important;
  }

  .div-input-name-book input::placeholder {
    color: #555;
  }

  .btn-add-book {
    padding: 12px 32px !important;
    font-size: 18px;
    border: 0;
    border-radius: 10px;
    background-color: #458ea7;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }
}

.book-heart {
  font-weight: 600 !important;
}

.thank-button {
  background-image: url("/static/img/icon-heart3.png");
  background-repeat: no-repeat;
  background-size: 18px;
  padding-left: 22px !important;
  color: #d86666 !important;
  background-position-y: 2px;
}

.thank-button:hover {
  background-image: url("/static/img/redhead.png");
}

.thank-button.active {
  background-image: url("/static/img/redhead.png");
}

@media screen and (max-width: 560px) {
  .div-react-crops .ReactCrop img {
    margin-right: auto;
    margin-left: auto;
    max-height: 350px;
    height: 350px;
  }
}

@media screen and (max-width: 508px) {
  .img-items-book {
    width: 58px;
    height: 78px;
  }

  .img-icon-add-book {
    width: 28px;
  }

  .div-items-book {
    margin-right: 8px;
  }

  .text-add-new-book {
    display: none;
  }

  .btn-add-new-book {
    min-width: 58px;
  }

  .div-list-image-url {
    margin-top: 20px;
    width: 100%;
    flex-wrap: wrap;
  }

  .submit-commt {
    right: 8px !important;
  }

  .form-textarea.comment.comment-book {
    width: 85% !important;
  }
}

/* Áp dụng cho toàn bộ trang */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Màu nền track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #ccc; /* Màu thanh cuộn */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #888; /* Hover */
}

code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
.div-input-name-book {
  display: flex;
}

.div-input-name-book input {
  width: 93%;
  padding: 8px 12px;
  background-color: #dae8ed;
  border-radius: 8px;
  border: 0;
  font-size: 17px;
}

.div-input-name-book input:focus {
  outline: none;
}

.div-input-name-book input::placeholder {
  font-weight: 600;
}

.input-required {
  color: red;
  margin-left: 3px;
}

.icon-report {
  color: #4298e0;
  font-weight: 600;
}

.div-img-show {
  /* background-color: #ccc; */
  display: inline-block;
  border-radius: 15px;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 5px 5px 10px #ccc;
  width: 145px;
  height: 205px;
}

.opt-ask.modal-opt-ask a {
  padding: 1px;
  width: 13px;
  height: 13px;
}

.btn-add-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.btn-loading {
  padding: 3px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.icon-close-img {
  border: 1px solid red;
  color: red;
  background-color: #fff;
  border-radius: 45px;
  padding: 1px 4px;
  padding: 0 7px;
  position: absolute;
  top: -4px;
  right: -4px;
  font-weight: 600;
}

.icon-close-img:hover {
  color: #fff;
  background-color: red;
  font-weight: 600;
}

.comment-avatar-book {
  width: 28px;
  height: 28px;
  border-radius: 45px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-react-crops .ReactCrop {
  width: 100%;
  height: calc(100% - 120px);
}

.div-react-crops .ReactCrop img {
  margin-right: auto;
  margin-left: auto;
  height: 420px;
  max-height: 420px;
}

.modal-delete {
  text-align: center;
}

.modal-delete h2 {
  color: rgb(255, 77, 77);
  font-size: 24px;
}

.modal-delete p {
  margin-top: 30px;
  font-size: 18px;
}

.modal-delete > div {
  margin-top: 60px;
}

.modal-delete .btn-cancel-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #458ea7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-right: 12px;
}

.modal-delete .btn-delete-book {
  padding: 12px 32px !important;
  font-size: 18px;
  border: 0;
  border-radius: 10px;
  background-color: #e7b712;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.modal-delete .btn-cancel-book:hover {
  background-color: #137ea1;
}

.modal-delete .btn-delete-book:hover {
  background-color: #d4a303;
}

.book-heart {
  font-weight: 600 !important;
}

.thank-button {
  background-image: url("/static/img/icon-heart3.png");
  background-repeat: no-repeat;
  background-size: 18px;
  padding-left: 22px !important;
  color: #d86666 !important;
  background-position-y: 2px;
}

.thank-button:hover {
  background-image: url("/static/img/redhead.png");
}

.thank-button.active {
  background-image: url("/static/img/redhead.png");
}

@media screen and (max-width: 768px) {
  .div-input-name-book input {
    font-size: 20px !important;
  }

  .div-input-name-book input::placeholder {
    color: #555;
  }

  .btn-add-book {
    padding: 12px 32px !important;
    font-size: 18px;
    border: 0;
    border-radius: 10px;
    background-color: #458ea7;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }
}

@media screen and (max-width: 560px) {
  .div-react-crops .ReactCrop img {
    margin-right: auto;
    margin-left: auto;
    max-height: 350px;
    height: 350px;
  }
}

@media screen and (max-width: 508px) {
  .div-list-image-url {
    margin-top: 20px;
    width: 100%;
    flex-wrap: wrap;
  }
}

.div-pagination {
  display: flex;
  justify-content: end;
  padding: 0 12px;
}

.div-pagination > button {
  font-size: 18px;
  border: 0;
  background-color: rgba(255, 255, 255, 0);
  padding: 8px 10px;
  color: rgb(219, 151, 99);
  font-weight: 600;
  border-radius: 8px;
}

.div-pagination > button:hover {
  color: rgb(163 92 38);
  background-color: rgba(255, 255, 255, 0.5);
}

.btn-action {
  color: rgb(163 92 38) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}