.page__title-right {position: relative; display: flex; align-items: center;}
.update-time{display:inline; font-size: 1.2rem; color: gray}
.rect-img-container {position: relative;}
.rect-img-container::after {content: "";display: block;padding-bottom: 100%;}
.rect-img {position: absolute;width: 100%;height: 100%;object-fit: cover;}
.button-stick {
  display: inline-block;
  font-size: 1.3rem;
  text-transform: uppercase;
  padding: 20px 40px;
  border-radius: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  border: none;
  cursor: pointer; }
  .button--small {
    font-size: 14px;
    padding: 15px; }
  .button--main {
    background-color: #30e391;
    color: #fff; }
/*===============================================*/
/* 16. CHAT */
/*===============================================*/
.conversations {
  padding: 0 0 5px 0;
  width: 100%;
  margin: 0px;
  list-style: none;
  float: left;
  clear: both; }
  .conversations__row {
    display: flex;
    width: calc(100% - 20px);
    color: #9b9b9b;
    background-color: #f6f9fa;
    border-radius: 15px;
    padding: 10px;
    margin: 0 0 10px 0; }
    .conversations__row a {
      color: #5c5c5c; }
    .conversations__row--undread a {
      color: #000;
      font-weight: 700; }
  .conversations__avatar {
    max-width: 50px;
	min-width: 50px;
    flex-grow: 1;
    position: relative; }
    .conversations__avatar img {
      display: block;
      max-width: 100%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%; }
  .conversations .active-user {
    display: block;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #55c709;
    border: 2px #fff solid;
    position: absolute;
    top: 40px;
    right: 5px;
    z-index: 555; }
  .conversations__details {
    padding: 0 10px 0 20px;
    flex-grow: 1; }
  .conversations__user {
    font-weight: 700;
    padding: 0 0 5px 0; }
    .conversations__user a {
      color: #5160eb; }
  .conversations__short-content {
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    line-height: 1.5; }
  .conversations__info {
    width:auto;
	max-width: 100px;
    text-align: right; }
  .conversations__time {
    font-size: 14px;
    font-weight: 700; }
  .conversations__new-messages-nr {
    width: 20px;
    height: 20px;
    float: right;
    background-color: #5160eb;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    margin: 10px 0 0 0;
    line-height: 20px;
    font-size: 1.1rem;
    font-weight: 700; }
.conversations__info img {
    width: 80px;
}
.chat {
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style: none;
  clear: both; }
  .chat__row {
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    width: 100%; }
  .chat__content {
    flex-grow: 1;
    width: 100%;
    border-radius: 15px;
    padding: 15px 20px; }
    .chat__content p {
      padding: 0px !important;
      font-size: 1.4rem; }
      .chat__content p a {
        color: #5160eb; }
  .chat__row--received .chat__content {
    margin-right: 5%;
    background-color: #f6f9fa;
    border-top-left-radius: 0;
    -webkit-border-top-left-radius: 0; }
  .chat__row--sent .chat__content {
    margin-left: 5%;
    background-color: #5160eb;
    color: #fff;
    border-bottom-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px; }
  .chat__row--unread .chat__content {
    font-weight: 700; }
  .chat__time {
    font-size: 1.1rem; }
  .chat__row--sent .chat__time {
    color: #fff; }
  .chat__avatar {
    max-width: 40px;
    position: relative;
    margin-right: 10px; }
    .chat__avatar img {
      display: block;
      max-width: 100%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%; }
  .chat .active-user {
    display: block;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #55c709;
    border: 2px #fff solid;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 555; }
  .chat__row--sent .chat__avatar {
    align-self: flex-end;
    position: relative;
    margin-left: 10px; }

.chat-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  width: calc(100% - 40px);
  margin: 0 10px;
  padding: 10px;
  border-radius: 10px; }
  .chat-form__textarea {
    width: 100%;
    flex-grow: 1;
    background: none;
    background-color: transparent;
    border: none;
    resize: none;
    height: 20px; }
  .chat-form__submit {
    box-shadow: none;
    -webkit-box-shadow: none;
    -webkit-appearance: none; }
    .chat-form__submit img {
      display: block;
      width: 30px; }

/*===============================================*/
/* 10. SLIDERS-------- */
/*===============================================*/
.slider-intro {
  width: 100%;
  height: 100%; }
  .slider-intro__slide {
    width: 100%; }
  .slider-intro .caption {
    width: calc(100% - 80px);
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff; }
    .slider-intro .caption__title {
      font-weight: 300;
      color: #fff; }
      .slider-intro .caption__title strong {
        font-weight: 700; }
    .slider-intro .caption__image {
      width: 100%;
      text-align: center;
      padding-bottom: 40px; }
      .slider-intro .caption__image img {
        display: block;
        max-width: 100%;
        margin: auto; }
  .slider-intro__skip {
    position: absolute;
    bottom: 50px;
    left: 0px;
    width: 100%;
    text-align: center;
    z-index: 888;
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 700; }
    .slider-intro__skip a {
      color: #fff; }
  .slider-intro__prev {
    right: 40px;
    left: auto;
    top: auto;
    bottom: 50px; }
    .slider-intro__prev::after {
      font-size: 2rem;
      color: #fff; }
  .slider-intro__next {
    right: 10px;
    left: auto;
    top: auto;
    bottom: 50px; }
    .slider-intro__next::after {
      font-size: 2rem;
      color: #fff; }
  .slider-intro__pagination.swiper-pagination-bullets {
    bottom: 10px; }
    .slider-intro__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
      width: 10px;
      height: 1px;
      margin: 0 2px;
      border-radius: 0;
      background: #fff;
      opacity: .4; }
      .slider-intro__pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
        background: #fff;
        opacity: 1; }

.slider-simple {
  width: 100%;
  height: 300px; }
  .slider-simple--heigher {
    height: 350px; }
  .slider-simple--vw-width {
    width: 100vw;
    margin-left: -20px; }
  .slider-simple--full-height {
    height: 100%; }
  .slider-simple--round-corners {
    border-radius: 15px; }
  .slider-simple__slide {
    width: 100%; }
  .slider-simple .caption {
    width: calc(100% - 40px);
    padding: 0 20px 10px 20px;
    height: calc(100% - 20px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    color: #fff; }
    .slider-simple .caption--centered {
      align-items: center;
      justify-content: center;
      text-align: center; }
    .slider-simple .caption__title {
      font-weight: 300;
      color: #fff;
      font-size: 3.2rem;
      line-height: 1; }
      .slider-simple .caption__title strong {
        font-weight: 900;
        display: block; }
      .slider-simple .caption__title span {
        font-weight: 700; }
      .slider-simple .caption__title--centered {
        font-size: 2.4rem;
        line-height: 1.5; }
  .slider-simple__prev {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px;
    margin-right: 10px; }
    .slider-simple__prev::after {
      font-size: 2rem;
      color: #000; }
  .slider-simple__next {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px; }
    .slider-simple__next::after {
      font-size: 2rem;
      color: #000; }
  .slider-simple__pagination.swiper-pagination-bullets {
    bottom: 10px; }
    .slider-simple__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
      width: 10px;
      height: 1px;
      margin: 0 2px;
      border-radius: 0;
      background: #fff;
      opacity: .4; }
      .slider-simple__pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
        background: #fff;
        opacity: 1; }

.slider-cover {
  width: 100%;
  padding-bottom: 20px; }
  .slider-cover--round-corners .slider-cover__slide {
    border-radius: 15px; }
  .slider-cover__slide {
    width: 100%;
    position: relative; }
    .slider-cover__slide--34 {
      width: 85%;
      height: 300px; }
    .slider-cover__slide--1h {
      width: 66%;
      height: 250px; }
    .slider-cover__slide--2 {
      width: calc(50% - 5px);
      height: 200px; }
    .slider-cover__slide--2h {
      width: 38%;
      height: 200px; }
    .slider-cover__slide--3 {
      width: calc(33.33% - 6.666px);
      height: 150px; }
    .slider-cover__slide--3h {
      width: 38%;
      height: 200px; }
    .slider-cover__gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 11;
    border-radius: 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)); }
    .slider-cover__play {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    z-index: 22; }
    .slider-cover__play img {
      display: block;
      width: 50px; }
  .slider-cover .caption {
    width: calc(100% - 30px);
    padding: 0 15px 0 15px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    color: #fff;
    position: relative;
    z-index: 22; }
    .slider-cover .caption-lantoa {
    width: calc(100% - 30px);
    padding: 0 15px 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: left;
    color: #fff;
    position: relative;
    z-index: 22; }
    .slider-cover .caption__title {
      font-weight: 300;
      color: #fff;
      font-size: 1.8rem;
      line-height: 1.1; }  
      .slider-cover .caption__title a {
        color: #fff; }    
      .slider-cover .caption__title strong {
        font-weight: 900;
        display: block; }
      .slider-cover .caption__title--smaller {
        font-size: 1.4rem;
        line-height: 1; }
      .slider-cover .caption__title--centered {
        text-align: center; }
      .slider-cover .caption__title--news {
        font-weight: 300;
        line-height: 1.3;
        padding: 0 0 10px 0;
        font-size: 1.8rem; }
        .slider-cover .caption__title--news a {
          color: #fff; }
    .slider-cover .caption__likes {
      background-image: url(../assets/images/icons/white/love.svg);
      background-position: 0 50%;
      background-repeat: no-repeat;
      background-size: 14px 14px;
      padding-left: 20px;
      font-size: 1.2rem; }
    .slider-cover__user {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 22; }
  .slider-cover__more {
    position: absolute;
    top: 10px;
    right: 10px; }
    .slider-cover__more a {
      display: block;
      width: 30px;
      height: 30px;
      background-color: #fff;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .slider-cover__more a img {
        display: block;
        width: 16px; }
  .slider-cover__prev {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px;
    margin-right: 10px; }
    .slider-cover__prev::after {
      font-size: 2rem;
      color: #000; }
  .slider-cover__next {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px; }
    .slider-cover__next::after {
      font-size: 2rem;
      color: #000; }
  .slider-cover__pagination.swiper-pagination-progressbar {
    width: 100%;
    height: 1px;
    left: 0;
    top: auto !important;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.1); }
    .slider-cover__pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
      background: rgba(0, 0, 0, 0.25); }

.slider-thumbs {
  width: 100%;
  padding-bottom: 20px; }
  .slider-thumbs__slide {
    width: 100%;
    height: auto !important;
    position: relative; }
    .slider-thumbs__slide--1h {
      width: 66%; }
    .slider-thumbs__slide--2 {
      width: calc(50% - 5px); }
    .slider-thumbs__slide--2h {
      width: 38%; }
    .slider-thumbs__slide--3 {
      width: calc(33.33% - 6.666px); }
    .slider-thumbs__slide--3h {
      width: 26%; }
    .slider-thumbs__slide--4 {
      width: calc(25% - 7.5px); }
    .slider-thumbs__slide--4h {
      width: 28%; max-width: 120px; }
  .slider-thumbs__image {
    position: relative;
    overflow: hidden; }
    .slider-thumbs__image img {
      display: block;
      max-width: 100%; }
    .slider-thumbs__image--round-corners img {
      border-radius: 15px; }
    .slider-thumbs__image--round-corners-top img {
      border-top-left-radius: 15px;
      border-top-right-radius: 15px; }
    .slider-thumbs__image--round-corners-full img {
      border-radius: 100%; }
    .slider-thumbs__image .active-user {
      display: block;
      width: 10px;
      height: 10px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #55c709;
      border: 2px #fff solid;
      position: absolute;
      top: 2px;
      right: 5px;
      z-index: 999; }
  .slider-thumbs__icon {
    background-color: #f6f9fa; }
    .slider-thumbs__icon--round-corners {
      border-radius: 15px; }
    .slider-thumbs__icon img {
      display: block;
      max-width: 40%;
      margin: auto;
      padding: 20px 0; }
  .slider-thumbs .caption {
    padding: 10px 0;
    text-align: left;
    color: #0d3567; }
    .slider-thumbs .caption--bg {
      background-color: #f6f9fa;
      width: calc(100% - 30px);
      padding: 15px; }
    .slider-thumbs .caption--round-corners-bottom {
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px; }
    .slider-thumbs .caption__title {
      font-weight: 500;
      font-size: 1.6rem;
      line-height: 1.1;
      padding-bottom: 0px; }
      .slider-thumbs .caption__title strong {
        font-weight: 700;
        display: block; }
      .slider-thumbs .caption__title--smaller {
        font-size: 1rem;
        line-height: 1.2; }
      .slider-thumbs .caption__title--centered {
        text-align: center; }
    .slider-thumbs .caption__category {
      display: inline-block;
      background-color: #83cbf8;
      color: #fff;
      font-size: 1rem;
      padding: 5px 10px;
      margin: 5px 0 0 0;
      border-radius: 10px;
      font-weight: 600;
      letter-spacing: 1px; }
  .slider-thumbs__more {
    position: absolute;
    top: 10px;
    right: 10px; }
    .slider-thumbs__more a {
      display: block;
      width: 30px;
      height: 30px;
      background-color: #fff;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .slider-thumbs__more a img {
        display: block;
        width: 16px; }
  .slider-thumbs__top-left-info {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 22;
    padding: 0 0 0 0; }
  .slider-thumbs__top-right-info {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 22;
    padding: 10px 10px 0 0; }
  .slider-thumbs__bottom-left-info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 22;
    padding: 0 0 0 0; }
  .slider-thumbs__bottom-right-info {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 0 10px 10px 0;
    z-index: 22; }
  .slider-thumbs__price {
    padding: 5px 10px;
    font-weight: 600;
    font-size: 1.6rem;
    background-color: #fff;
    color: #5160eb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .slider-thumbs__price span {
      text-decoration: line-through;
      opacity: 0.5;
      padding-left: 5px; }
  .slider-thumbs__addtocart a {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .slider-thumbs__addtocart a img {
      display: block;
      max-width: 50%;
      border-radius: 0px !important; }
  .slider-thumbs__badge {
    background-color: #30e391;
    height: 25px;
    line-height: 25px;
    left: -30px;
    position: absolute;
    top: 5px;
    width: 100px;
    text-align: center;
    -webkit-transform: rotate(-45deg); }
    .slider-thumbs__badge span {
      color: #fff;
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: 1px; }
  .slider-thumbs__prev {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px;
    margin-right: 10px; }
    .slider-thumbs__prev::after {
      font-size: 2rem;
      color: #000; }
  .slider-thumbs__next {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px; }
    .slider-thumbs__next::after {
      font-size: 2rem;
      color: #000; }
  .slider-thumbs__pagination.swiper-pagination-progressbar {
    width: 100%;
    height: 1px;
    left: 0;
    top: auto !important;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.1); }
    .slider-thumbs__pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
      background: rgba(0, 0, 0, 0.25); }

.slider-links {
  width: 100%;
  padding-bottom: 20px; }
  .slider-links__slide {
    width: auto;
    height: auto !important;
    position: relative; }
    .slider-links__slide .caption {
      padding: 10px 0;
      text-align: left;
      color: #0d3567; }
      .slider-links__slide .caption__link {
        font-weight: 900;
        font-size: 1.4rem;
        line-height: 1.1;
        padding-bottom: 0px; }
        .slider-links__slide .caption__link a {
          background-color: #f6f9fa;
          color: #5160eb;
          border-radius: 25px;
          padding: 10px 20px; }
  .slider-links.slider-init-top .swiper-slide-active .caption__link a {
    background-color: #5160eb;
    color: #f6f9fa; }
  .slider-links__prev {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px;
    margin-right: 10px; }
    .slider-links__prev::after {
      font-size: 2rem;
      color: #000; }
  .slider-links__next {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: 0px; }
    .slider-links__next::after {
      font-size: 2rem;
      color: #000; }
  .slider-links__pagination.swiper-pagination-progressbar {
    width: 100%;
    height: 1px;
    left: 0;
    top: auto !important;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.1); }
    .slider-links__pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
      background: rgba(0, 0, 0, 0.25); }
/*===============================================*/
/* 5. BOTTOM TOOLBAR */
/*===============================================*/
.bottom-navigation {
  width: calc(100% - 20px);
  position: absolute;
  bottom: 10px;
  left: 0px;/*left: 10px;*/
  z-index: 888;
  background-color: #f1f8fc;
  padding: 10px 0;
  border-radius: 15px;
  overflow: hidden; }
  .bottom-navigation--white {
    background-color: #ffffff; }
  .bottom-navigation__icons {
    width: calc(100% - 60px);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .bottom-navigation__icons li {
      text-align: center; }
      .bottom-navigation__icons li a {
        color: #707b8e; }
      .bottom-navigation__icons li img {
        display: block;
        max-width: 22px;
        margin: auto; }
      .bottom-navigation__icons li span {
        text-transform: uppercase;
        font-size: 0.9rem;
        display: block;
        padding-top: 5px; }
    .bottom-navigation__icons--centered {
      justify-content: center; }
      .bottom-navigation__icons--centered li {
        padding: 0 5px; }
        .bottom-navigation__icons--centered li img {
          max-width: 32px; }
  .bottom-navigation__pagination {
    position: absolute;
    width: 100%;
    bottom: 0px !important;
    top: auto !important;
    text-align: center; }
    .bottom-navigation__pagination .swiper-pagination-bullet {
      width: 10px;
      height: 1px;
      display: inline-block;
      border-radius: 0;
      background: #909db3;
      opacity: 0.2;
      margin: 0 2px; }
      .bottom-navigation__pagination .swiper-pagination-bullet-active {
        background: #909db3;
        opacity: 1; }
    .bottom-navigation__pagination .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 2px; }
  .bottom-navigation__more {
    position: absolute;
    top: 20px;
    right: 15px;
    cursor: pointer;
    z-index: 999999; }
    .bottom-navigation__more img {
      display: block;
      max-width: 4px; }
  .bottom-navigation__shop {
    width: 100%; /*calc(100% - 20px);*/
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .bottom-navigation__shop-cart {
      background-image: url(../assets/images/icons/white/cart.svg);
      background-repeat: no-repeat;
      background-position: 20px 50%;
      background-size: 18px;
      padding-left: 50px; }
    .bottom-navigation__dangkytrainghiem {
	  background:darkblue;box-shadow: rgb(0 0 0 / 20%) 0px -50px 36px -28px inset;
	  letter-spacing: 0px;
      background-image: url(../images/icons/free-100.png);
      background-repeat: no-repeat;
      background-position: 12px 50%;
      background-size: 22px;
      padding-left: 40px; }
	 .bottom-navigation__guiloilantoa {
	  /*background:darkorange;box-shadow: rgb(0 0 0 / 20%) 0px -50px 36px -28px inset;*/
	  letter-spacing: 0px;
      background-image: url(../images/icons/messenger.svg);
      background-repeat: no-repeat;
      background-position: 12px 50%;
      /*background-size: 50px;*/
	  padding: 25px 35px;}
/*===============================================*/