@font-face {

  font-family: "DFVN Caligna";

  src: url(../fonts/DFVNCalignaRegular.otf), url(../fonts/DFVNCalignaRegular.otf) format("woff");

  font-style: normal;

  font-display: wrap
}



:root {

  --clr-base: #66462F;

  --bg-primary-200: #f9edda;

  --clr-primary-200: #ffde00;

  --clr-white: hsl(0, 0%, 100%);

  --clr-black: hsl(0, 0%, 0%);

  --second-family: "DFVN Caligna";

  --third-family: "Lovers Quarrel", sans-serif;

  --font3: "Poltawski Nowy", sans-serif;

  --font4: Montserrat, sans-serif;

  --ff-base: Quicksand, sans-serif;

  --ff-roboto: Roboto, sans-serif;

  --fw-light: 300;

  --fw-regular: 400;

  --fw-semi-bold: 600;

  --fw-bold: 700;

  --fs-14: .875rem;

  --size-10: .625rem;

  --size-45: 2.813rem;

  --size-50: 3.125rem;

  --size-60: 3.75rem;

  --size-70: 4.375rem;

  --size-80: 5rem
}



html {

  -webkit-scroll-behavior: smooth;

  -moz-scroll-behavior: smooth;

  -ms-scroll-behavior: smooth;

  scroll-behavior: smooth;

  overflow-x: hidden;

}



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

    transition: none
  }

}



@keyframes spin {

  to {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg)
  }

}



@-webkit-keyframes spin {

  to {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg)
  }

}



@keyframes blink {

  0% {

    opacity: 1
  }



  50% {

    opacity: 0
  }



  100% {

    opacity: 1
  }

}



@-webkit-keyframes blink {

  0% {

    opacity: 1
  }



  50% {

    opacity: 0
  }



  100% {

    opacity: 1
  }

}



@keyframes shake-anim {

  0% {

    -webkit-transform: rotate(0) scale(1) skew(1deg);

    transform: rotate(0) scale(1) skew(1deg)
  }



  10%,

  30% {

    -moz-transform: rotate(-25deg) scale(1) skew(1deg)
  }



  20%,

  40% {

    -moz-transform: rotate(25deg) scale(1) skew(1deg)
  }



  100%,

  50% {

    -moz-transform: rotate(0) scale(1) skew(1deg)
  }

}



@-webkit-keyframes shake-anim {



  0%,

  100%,

  50% {

    -webkit-transform: rotate(0) scale(1) skew(1deg)
  }



  10%,

  30% {

    -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
  }



  20%,

  40% {

    -webkit-transform: rotate(25deg) scale(1) skew(1deg)
  }

}



ul[role="list"],

ol[role="list"] {

  list-style: none
}



input,

button,

select {

  appearance: none;

  box-shadow: none !important
}



body {

  font-family: var(--ff-base);

  font-size: var(--fs-14);

  font-weight: var(--fw-regular)
}



img {

  max-width: 100%;

  height: auto;

  vertical-align: top
}



a,

input,

textarea {

  outline: none;

  padding: 0
}



a {

  text-decoration: none !important
}



input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0
}



.w-clear:after {

  display: block;

  content: "";

  clear: both
}



.hidden {

  display: none
}



.clear {

  clear: both
}



.none {

  display: none
}



.hidden-seoh {

  visibility: hidden;

  height: 0;

  margin: 0;

  overflow: hidden
}



.wap_1200 {

  max-width: 1200px;

  margin: auto;

  position: relative
}



.wrap-main,

.wrap-content {

  max-width: 1200px;

  margin: 40px auto;

  padding: 0
}



.wrap-home {

  max-width: 100%;

  padding: 0;

  margin: 0
}



.wrap-content {

  margin: auto
}



.text-split {

  overflow: hidden;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 3
}



.title-main {

  margin-bottom: 1.5rem;

  text-align: center
}



.title-main h2 {

  font-family: var(--second-family);

  font-weight: 400;

  font-size: 40px;

  text-transform: uppercase;

  color: #66462f;

  margin-bottom: 0
}



.time-main {

  margin-bottom: .75rem;

  color: #999
}



.time-main i {

  vertical-align: top;

  margin: 3px 7px 0 0
}



.time-main span {

  vertical-align: top;

  display: inline-block
}



.share {

  padding: 17px 15px 10px;

  line-height: normal;

  background: rgba(128, 128, 128, 0.15);

  margin-top: 15px;

  border-radius: 5px
}



.share b {

  display: block;

  margin-bottom: 5px
}



.control-owl {

  position: absolute;

  width: 100%;

  z-index: 2;

  left: 0;

  top: calc(50% - 45px / 2)
}



.control-owl button {

  opacity: .5;

  top: 0;

  position: absolute;

  outline: none;

  border: 0;

  padding: 0;

  margin: 0;

  display: block;

  cursor: pointer;

  color: #fff;

  width: 45px;

  height: 45px;

  text-align: center;

  font-size: 25px;

  margin: 0;

  background-color: #000;

  border-radius: 3px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center
}



.control-owl button:hover {

  opacity: 1
}



.control-owl button.owl-prev {

  left: 20px
}



.control-owl button.owl-next {

  right: 20px
}



.form-control,

.form-control-plaintext:not(textarea),

.custom-select {

  height: calc(1em + 1.25rem + 8px)
}



.custom-form-row {

  margin-right: -10px;

  margin-left: -10px
}



.custom-form-row>.col,

.custom-form-row>[class*="col-"] {

  padding-right: 10px;

  padding-left: 10px
}



.text-sm {

  font-size: .875rem !important
}



img.lazy {

  opacity: 0
}



img:not(.initial) {

  -webkit-transition: opacity 1s;

  transition: opacity 1s
}



img.initial,

img.loaded,

img.error {

  opacity: 1
}



img:not([src]) {

  visibility: hidden
}



.user-header a {

  color: #fff;

  padding-right: 9px;

  margin-right: 7px;

  position: relative;

  display: inline-block;

  vertical-align: top;

  text-decoration: none
}



.user-header a:after {

  content: "";

  position: absolute;

  width: 1px;

  height: 8px;

  background-color: #fff;

  top: calc(50% - 7px / 2);

  right: 0;

  opacity: .7
}



.user-header a:last-child {

  padding-right: 0;

  margin-right: 0
}



.user-header a:last-child:after {

  display: none
}



.menu_mobi_add,

.menu_mobi {

  display: none
}



.menu {

  position: fixed;

  z-index: 1030;

  top: 0;

  width: 100%;

  padding-block: 15px
}



.menu-wrap {

  position: relative;

  display: flex;

  flex-flow: column wrap;

  padding-block: 8px
}



.main-navigation {

  display: flex;

  justify-content: space-between
}



.main-navigation ul {

  padding: 0;

  margin: auto;

  list-style: none
}



.main-navigation>ul {

  display: -webkit-box;

  display: flex;

  -webkit-box-align: center;

  align-items: center
}



.main-navigation ul li {

  position: relative;

  z-index: 1
}



.main-navigation ul li.li-home a {

  padding-left: 0
}



.main-navigation ul li.li-end a {

  padding-right: 0
}



.main-navigation ul li a:hover,

.main-navigation ul li a.active {

  color: var(--clr-base)
}



.main-navigation ul li.menu-line {

  width: 1px;

  height: 15px;

  background-color: rgba(0, 0, 0, 0.1)
}



.main-navigation ul li a {

  display: inline-block;

  position: relative;

  line-height: 35px;

  padding: 3px 20px;

  font-weight: 700;

  font-size: 18px;

  color: #1e1e1e;

  text-transform: uppercase;

  white-space: nowrap
}



.main-navigation ul li a.has-child {

  padding-right: 16px;

  margin-right: 8px
}



.main-navigation ul li a.has-child:after {

  content: "";

  position: absolute;

  bottom: calc(50% - 4px / 2);

  right: 5px;

  width: 5px;

  height: 5px;

  border: 1px solid #1e1e1e;

  border-top: 0;

  border-left: 0;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg)
}



.main-navigation ul li ul:before {

  content: "";

  position: absolute;

  height: 10px;

  width: 100%;

  top: -8px;

  left: 0
}



.main-navigation ul li ul {

  position: absolute;

  top: calc(100% + 10px);

  min-width: 250px;

  background-color: #fafafa;

  border-radius: .25rem;

  -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);

  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);

  -webkit-transform: perspective(600px) rotateX(-90deg);

  transform: perspective(600px) rotateX(-90deg);

  -webkit-transform-origin: 0 0 0;

  transform-origin: 0 0 0;

  opacity: 0;

  visibility: hidden;

  -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15);

  -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15);

  box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15)
}



.main-navigation ul li:hover>ul {

  -webkit-transform: perspective(600px) rotateX(0);

  transform: perspective(600px) rotateX(0);

  transform-origin: 0 0 0;

  -webkit-transform-origin: 0 0 0;

  opacity: 1;

  visibility: visible
}



.main-navigation ul li ul li {

  padding-left: .75rem;

  padding-right: .75rem
}



.main-navigation ul li ul li a {

  font-size: 14px;

  color: #313131;

  border-bottom: 1px solid #ececec;

  padding: 10px 0;

  text-transform: capitalize;

  width: 100%
}



.main-navigation ul li ul li a.has-child {

  margin-right: 0
}



.main-navigation ul li ul li a.has-child:after {

  border-color: #313131;

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg)
}



.main-navigation ul li ul li a.active {

  color: #ec2d3f
}



.main-navigation ul li ul li a.active.has-child:after {

  border-color: #ec2d3f
}



.main-navigation ul li ul li:last-child>a {

  border-bottom: 0
}



.main-navigation ul li ul li:hover>a {

  color: var(--clr-base)
}



.main-navigation ul li ul li:hover>a.has-child:after {

  border-color: var(--clr-base)
}



.main-navigation ul li ul li ul {

  top: 0 !important;

  left: 100%;

  margin-top: 0
}



.search {

  --_h-search: 35px;

  width: 230px;

  background: #fff;

  position: relative
}



.search p {

  float: left;

  width: var(--_h-search);

  height: var(--_h-search);

  line-height: var(--_h-search);

  cursor: pointer;

  text-align: center;

  margin: 0;

  color: #6c757d;

  font-size: 16px
}



.search input {

  width: calc(100% - var(--_h-search));

  height: var(--_h-search);

  float: left;

  outline: none;

  padding: 0;

  border: 0;

  background: transparent;

  text-indent: 10px;

  font-size: 12px;

  caret-color: #313131
}



.search input::-webkit-input-placeholder {

  color: #313131
}



.search input:-moz-placeholder {

  color: #313131
}



.search input:-ms-input-placeholder {

  color: #313131
}



.search input::placeholder {

  color: #313131
}



.menu-res {

  height: 55px;

  z-index: 997;

  background: var(--clr-base);

  position: sticky;

  display: none;

  position: -webkit-sticky;

  top: 0
}



.menu-bar-res {

  height: 55px;

  padding: 0 15px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between
}



#menu {

  display: none
}



.slideshow {

  position: relative;

  overflow: hidden
}



.slideshow-item {

  display: block;

  cursor: pointer
}



.slideshow:hover .control-slideshow {

  opacity: 1
}



.control-slideshow {

  opacity: 0
}



.wrap-partner {

  padding: 0 15px
}



.wrap-partner .wrap-content {

  position: relative
}



.partner {

  display: block;

  border: 1px solid #eee;

  max-width: 175px;

  margin: 0 auto
}



.hover_sang1 {

  position: relative;

  overflow: hidden
}



.hover_sang1:before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.5);

  content: "";

  z-index: 10;

  -webkit-transition: -webkit-transform .6s;

  transition: transform .6s;

  -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);

  transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0)
}



.hover_sang1:hover:before {

  -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);

  transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0)
}



.hover_sang2 {

  position: relative;

  overflow: hidden
}



.hover_sang2:before {

  position: absolute;

  top: 0;

  left: -85%;

  z-index: 10;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);

  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);

  -webkit-transform: skewX(-25deg);

  transform: skewX(-25deg)
}



.hover_sang2:hover:before {

  transition: 1s;

  left: 100%
}



.wrap-intro {

  background-color: #eeeadd
}



.news-intro:before {

  content: "";

  position: absolute;

  width: 1px;

  height: calc(100% - 50px);

  top: 10px;

  left: 90px;

  background-color: #cacaca
}



.news-scroll:before,

.news-scroll:after {

  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  left: 85px;

  border-radius: 100%;

  background-color: #cacaca
}



.news-scroll:before {

  top: 10px
}



.news-scroll:after {

  bottom: 40px
}



.news-control {

  left: 85px;

  font-size: 13px;

  opacity: .5;

  z-index: 1;

  cursor: pointer
}



.news-control:hover {

  opacity: 1;

  color: #ec2d3f
}



.news-control#up {

  top: -10px
}



.news-control#down {

  bottom: 20px
}



.album {

  cursor: pointer;

  width: calc(25% - 20px);

  margin: 10px;

  text-align: center;

  cursor: pointer
}



.album-image {

  margin-bottom: .75rem
}



.pic-album {

  position: relative
}



.pic-album img {

  width: 100%
}



.name-album {

  font-size: 16px;

  color: #000;

  margin-bottom: 0
}



.album-name {

  margin-bottom: 0;

  text-align: center
}



.album-name a {

  display: block;

  font-size: 16px;

  color: #212529;

  margin-bottom: 0
}



.thuvien_chitiet figure {

  margin: 0;

  display: grid;

  grid-template-rows: 1fr auto;

  margin-bottom: 10px;

  break-inside: avoid
}



.thuvien_chitiet figure>img {

  grid-row: 1 / -1;

  grid-column: 1
}



.thuvien_chitiet figure a {

  color: #000;

  text-decoration: none
}



.thuvien_chitiet figcaption {

  grid-row: 2;

  grid-column: 1;

  background-color: rgba(255, 255, 255, 0.5);

  padding: .2em .5em;

  justify-self: start
}



.thuvien_chitiet {

  margin-bottom: 20px
}



.thuvien_chitiet .thuvien_trong {

  column-count: 4;

  column-gap: 10px
}



.wrap-brand {

  margin-bottom: 50px;

  padding: 0 15px
}



.wrap-brand .wrap-content {

  position: relative
}



.brand {

  display: block;

  border: 1px solid #eee;

  max-width: 160px;

  margin: 0 auto
}



.card--item {

  width: calc(25% - 20px);

  margin: 10px;

  display: flex;

  flex-direction: column
}



.price-product {

  color: #1a1918;

}



.card-link {

  position: relative;

  display: block;

  border: 1px solid #66462f;

  -webkit-border-radius: 20px;

  border-radius: 20px;

  background-color: #fff;

  text-align: center;

  display: flex;

  flex-direction: column;

  -webkit-box-pack: justify;

  justify-content: space-between;

  align-self: normal;

  word-wrap: break-word;

  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  padding: 9px
}



.card-poster {

  background: #fff;

  border-radius: 5px
}



.card-poster img {

  width: 100%;

  border-radius: 3px
}



.card-link .card-body {

  padding: 0;

  margin-block-start: 1rem;

  min-height: 64px
}



.card-title {

  font-weight: 600;

  font-size: 14px;

  text-transform: capitalize;

  text-align: center;

  color: #1e1e1e;

  -webkit-line-clamp: 2
}



.card-title:hover {

  color: var(--clr-base)
}



.card-price {

  text-transform: uppercase;

  margin-bottom: 0;

  display: none
}



.card-price--new b {

  color: #000
}



.card-price--new {

  font-size: 15px;

  font-weight: 500;

  color: red
}



.card-price--old {

  padding-left: 10px;

  font-size: 15px;

  color: #6c757d;

  text-decoration: line-through
}



.card-price--per {

  position: absolute;

  top: -1px;

  right: -1px;

  color: #fff;

  background: var(--clr-base);

  font-size: 11px;

  border-radius: 2px;

  width: 45px;

  height: 25px;

  text-align: center;

  line-height: 25px;

}



.service-restyle .card-price--per {

  top: -15px;

  right: 15px;

}



.othernews b {

  margin-bottom: 10px
}



.list-news-other {

  padding-left: 17px;

  list-style: square
}



.list-news-other li {

  margin-bottom: 2px
}



.list-news-other li a {

  text-transform: none;

  color: #333
}



.list-news-other li a:hover {

  color: var(--clr-base)
}



.contact-article {

  margin-bottom: 3rem
}



.contact-input {

  position: relative;

  margin-bottom: 15px
}



.contact-input textarea {

  resize: none;

  height: 150px
}



.contact-input .custom-file-label::after {

  content: attr(title)
}



.contact-map {

  position: relative;

  height: 500px
}



.contact-map iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100% !important;

  height: 100% !important
}



.footer-article {

  color: #fff;

  background-color: #66462f;

  padding: 35px 0
}



.footer-nav ul {

  padding: 0;

  margin: 0
}



.footer-nav a {

  color: #232323;

  transition: all .3s ease
}



.footer-nav a:hover {

  color: var(--clr-base)
}



.footer-tags {

  background: #eee
}



.footer-tags {

  padding: 30px 15px
}



.footer-tags-lists {

  list-style: none;

  padding: 0;

  margin: 0
}



.footer-tags-lists li {

  float: left
}



.footer-tags-lists li a {

  padding-bottom: .375rem
}



#footer-map {

  position: relative;

  height: 500px
}



#footer-map iframe {

  position: absolute !important;

  width: 100% !important;

  height: 100% !important;

  top: 0 !important;

  left: 0 !important
}



.pagination-home .pagination .page-item .page-link {

  color: #555;

  font-size: .875rem
}



.pagination-home .pagination .page-item.active .page-link {

  color: #fff;

  background-color: var(--clr-base) !important;

  border-color: var(--clr-base) !important
}



.pagination-ajax {

  text-align: center
}



.pagination-ajax a {

  display: inline-block;

  vertical-align: top;

  margin: 0 3px 3px;

  width: 35px;

  height: 35px;

  line-height: 33px;

  color: #666 !important;

  border: 1px solid #e6e6e6;

  font-size: 13px;

  cursor: pointer;

  text-decoration: none !important;

  background-color: #fff
}



.pagination-ajax a.current,

.pagination-ajax a:hover {

  color: #fff !important;

  border-color: #ec2d3f;

  background-color: #ec2d3f
}



.pagination-ajax a.first,

.pagination-ajax a.last,

.pagination-ajax a.prev,

.pagination-ajax a.next {

  text-indent: -9999px;

  position: relative;

  background-color: #fff !important
}



.pagination-ajax a.first:before,

.pagination-ajax a.last:before,

.pagination-ajax a.prev:before,

.pagination-ajax a.next:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  background-color: transparent;

  background-repeat: no-repeat;

  background-position: center
}



.pagination-ajax a.first:before {

  background-image: url(../images/page-first.png)
}



.pagination-ajax a.last:before {

  background-image: url(../images/page-last.png)
}



.pagination-ajax a.prev:before {

  background-image: url(../images/page-prev.png)
}



.pagination-ajax a.next:before {

  background-image: url(../images/page-next.png)
}



#popup .modal-body {

  padding: 0
}



#popup-map iframe {

  width: 100%
}



#popup button.close span,

#popup-map button.close span,

#popup-baogia button.close span {

  display: inline-block;

  vertical-align: top;

  line-height: 32px
}



#popup button.close,

#popup-map button.close,

#popup-baogia button.close {

  width: 40px;

  height: 40px;

  display: block;

  position: absolute;

  right: 10px;

  top: 10px;

  z-index: 5;

  text-align: center;

  line-height: 40px;

  border-radius: 50%;

  box-shadow: 0 0 10px #000 !important;

  background: red;

  opacity: 1;

  color: #fff
}



.grecaptcha-badge {

  display: none !important;

  width: 0 !important;

  height: 0 !important;

  visibility: hidden !important;

  overflow: hidden
}



.coccocgrammar,

.corom-element {

  display: none !important
}



.scrollToTop {

  width: 41px;

  height: 41px;

  text-align: center;

  font-weight: 700;

  color: #444;

  text-decoration: none;

  position: fixed;

  bottom: 65px;

  right: 25px;

  display: none;

  z-index: 10;

  cursor: pointer
}



.transition,

.control-owl button,

.carousel-comment-media .carousel-control a span,

.menu ul li a.has-child:after,

.menu ul li ul,

.menu ul li:hover>ul,

.scale-img img,

.btn-frame .kenit-alo-circle-fill,

.support-online .kenit-alo-circle-fill {

  -webkit-transition: all .2s ease-out;

  transition: all .2s ease-out
}



.scale-img {

  overflow: hidden;

  display: block
}



.scale-img img {

  -webkit-transform: scale(1, 1);

  transform: scale(1, 1)
}



.scale-img:hover img {

  -webkit-transform: scale(1.1, 1.1);

  transform: scale(1.1, 1.1)
}



.blink {

  -webkit-animation-name: blink;

  -webkit-animation-duration: 1s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blink;

  -moz-animation-duration: 1s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  animation-name: blink;

  animation-duration: 1s;

  animation-timing-function: linear;

  animation-iteration-count: infinite
}



.btn-frame {

  display: block;

  width: 50px;

  height: 50px;

  position: fixed;

  right: 20px;

  z-index: 997;

  cursor: pointer
}



.btn-frame i {

  width: 50px;

  height: 50px;

  color: #fff;

  font-size: 18px;

  border-radius: 50%;

  background: var(--clr-base);

  position: relative;

  z-index: 1;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center
}



.btn-frame i img {

  vertical-align: middle;

  width: 70%
}



.btn-frame .animated.infinite {

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite
}



.btn-frame .kenit-alo-circle {

  width: 60px;

  height: 60px;

  top: -5px;

  right: -5px;

  position: absolute;

  background-color: transparent;

  border-radius: 100%;

  border: 2px solid rgba(7, 41, 103, 0.8);

  opacity: .1;

  border-color: var(--clr-base);

  opacity: .5
}



.btn-frame .zoomIn {

  -webkit-animation-name: zoomIn;

  animation-name: zoomIn
}



.btn-frame .animated {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both
}



.btn-frame .kenit-alo-circle-fill {

  width: 70px;

  height: 70px;

  top: -10px;

  right: -10px;

  position: absolute;

  border-radius: 100%;

  border: 2px solid transparent;

  background-color: rgba(7, 41, 103, 0.35);

  opacity: .4
}



.btn-frame .pulse {

  -webkit-animation-name: pulse;

  animation-name: pulse
}



.datlich {

  bottom: 315px
}



.btn-zalo {

  bottom: 315px
}



.btn-phone {

  bottom: 230px
}



.js-facebook-messenger-container.closed {

  display: none !important
}



.js-facebook-messenger-tooltip {

  bottom: 97px;

  right: 97px;

  color: #404040;

  background: #fff
}



.js-facebook-messenger-tooltip.closed {

  display: none !important
}



.js-facebook-messenger-box,

.js-facebook-messenger-button {

  z-index: 999
}



.js-facebook-messenger-tooltip {

  z-index: 999;

  display: none;

  position: fixed;

  text-align: center;

  border-radius: 10px;

  overflow: hidden;

  font-size: 12px;

  line-height: 1;

  padding: 10px;

  border: 1px solid rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;

  box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;

  z-index: 1.0E+30
}



.js-facebook-messenger-close-tooltip {

  width: 10px;

  height: 10px;

  display: inline-block;

  cursor: pointer;

  margin-left: 10px
}



.js-facebook-messenger-box {

  z-index: 999
}



.js-facebook-messenger-box.rubberBand {

  -webkit-animation-name: rubberBand;

  animation-name: rubberBand
}



.js-facebook-messenger-box.animated {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both
}



.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

  z-index: 999
}



.js-facebook-messenger-box {

  display: block;

  position: fixed;

  cursor: pointer;

  bottom: 150px;

  right: 17px;

  width: 56px;

  height: 56px;

  text-align: center;

  background: var(--clr-base);

  border-radius: 100%;

  overflow: hidden;

  z-index: 99;

  -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);

  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3)
}



.js-facebook-messenger-box.rotate svg#fb-msng-icon {

  -webkit-transform: rotate(0deg);

  transform: rotate(0deg)
}



.js-facebook-messenger-box svg#fb-msng-icon {

  width: 32px;

  height: 33px;

  position: absolute;

  top: 13px;

  left: 12px;

  opacity: 1;

  overflow: hidden;

  -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

  -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out
}



.js-facebook-messenger-box.rotate svg#close-icon {

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg)
}



.js-facebook-messenger-box svg#close-icon {

  opacity: 0;

  width: 19px;

  height: 20px;

  position: absolute;

  top: 19px;

  left: 19px;

  -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

  -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out
}



.js-facebook-messenger-container,

.js-facebook-messenger-container-button {

  z-index: 1000
}



.js-facebook-messenger-container {

  position: fixed;

  opacity: 0;

  -webkit-transform: translateY(50px);

  transform: translateY(50px);

  bottom: 110px;

  right: 90px;

  border-radius: 10px;

  pointer-events: none;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);

  -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;

  -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

  transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

  transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;

  transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out
}



.js-facebook-messenger-top-header {

  width: 220px;

  color: #fff;

  background: #1182fc;

  display: block;

  position: relative;

  width: 220px;

  background: #1182fc;

  color: #fff;

  text-align: center;

  line-height: 1;

  padding: 10px;

  font-size: 14px;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px
}



.js-facebook-messenger-container iframe,

.js-facebook-messenger-container-button iframe {

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px
}



.js-facebook-messenger-box,

.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

  z-index: 999
}



.js-facebook-messenger-container,

.js-facebook-messenger-container-button {

  z-index: 1000
}



.js-facebook-messenger-top-header {

  color: #fff;

  background: #1182fc;

  width: 220px
}



.js-facebook-messenger-tooltip {

  color: #404040;

  background: #fff
}



.js-facebook-messenger-container.open {

  -webkit-transform: translateY(0px);

  transform: translateY(0px);

  opacity: 1;

  pointer-events: all
}



.js-facebook-messenger-tooltip {

  bottom: 97px;

  right: 97px
}



.js-facebook-messenger-box.open svg#fb-msng-icon {

  opacity: 0
}



.js-facebook-messenger-box.rotate.open svg#close-icon {

  -webkit-transform: rotate(0deg);

  transform: rotate(0deg)
}



.js-facebook-messenger-box.open svg#close-icon {

  opacity: 1
}



.pagination {

  margin-top: 20px !important
}



.pagination li {

  margin: 0 5px
}



.pagination li .page-link {

  border-radius: 50% !important;

  padding: 0 5px;

  min-width: 42px;

  height: 42px;

  text-align: center;

  line-height: 40px;

  font-weight: 700;

  font-size: 18px;

  color: #66462f;

  background: #fff;

  border-color: transparent
}



.page-link.active,

.page-link.bg-primary {

  background: var(--clr-base) !important
}



.page-link.active:hover,

.page-link.bg-primary:hover {

  background: var(--clr-base) !important
}



.page-link {

  cursor: pointer
}



.boxProduct {

  --_column-count: 4;

  --_gap: 15px;

  display: grid;

  grid-template-columns: repeat(var(--_column-count), 1fr);

  gap: var(--_gap)
}



.boxProduct>.card--item {

  margin: 0 !important;

  width: 100%;

  min-width: 100%
}



.keyword-autocomplete {

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  width: 100%;

  background: #fff;

  border: 1px solid var(--clr-base);

  font-size: 13px;

  max-height: calc(80px * 4);

  overflow-x: hidden;

  overflow-y: auto
}



.autocomplete_item {

  display: block
}



.autocomplete_item a {

  padding: .2rem !important;

  display: flex !important;

  align-items: center;

  gap: .5rem
}



.autocomplete_item a picture {

  min-width: 30%;

  max-width: 30%
}



.autocomplete_item a section {

  flex-grow: 1;

  position: relative
}



.autocomplete_item a h3 {

  font-size: 12px;

  color: #222;

  margin: 0
}



.autocomplete_item a p {

  float: none;

  width: 100%;

  text-align: left;

  line-height: unset;

  height: unset
}



.autocomplete_item a p span {

  font-size: 12px
}



.autocomplete_item a p span.card__price--per {

  top: 0;

  right: 0;

  z-index: 2;

  width: auto;

  height: auto;

  padding: 2.5px 5px;

  font-size: 10px;

  line-height: unset
}



.contact-form .btn-primary {

  background: var(--clr-base) !important;

  border-color: var(--clr-base) !important
}



.save-listing,

.save-listing-already {

  position: absolute;

  top: 10px;

  left: 10px;

  z-index: 2;

  font-size: 1rem;

  background: var(--clr-base);

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff !important
}



.save-listing:hover i:before,

.save-listing-already i:before {

  font-weight: 700
}



.liked-fixed {

  bottom: 455px;

  display: none
}



div.box-sanpham-tc {

  padding: 30px 0
}



div.css_flex_baiviet {

  --gap: 10px;

  display: flex;

  flex-wrap: wrap;

  margin: calc(-1 * var(--gap))
}



div.css_flex_video {

  display: flex;

  flex-wrap: wrap;

  margin: 0 -10px
}



div.css_flex_album {

  display: flex;

  flex-wrap: wrap;

  margin: 0 -10px
}



div.css_flex_product {

  display: flex;

  flex-wrap: wrap;

  margin: 0 -10px;

  padding: 0
}



div.css_flex_ajax .pro-in {

  display: flex;

  flex-wrap: wrap;

  margin: 0 -10px;

  padding: 0
}



div.css_baiviet_ngang .article {

  width: calc(25% - 20px)
}



div.css_baiviet_ngang .article-poster {

  width: 100%;

  margin-right: 0;

  margin-bottom: 10px
}



div.css_baiviet_ngang .article-body {

  width: 100%
}



.article {

  margin: calc(var(--gap));

  width: calc(25% - var(--gap) * 2);

  padding-bottom: 25px
}



.article--inner {

  display: flex;

  flex-direction: column
}



.article-news .article-poster {

  margin-bottom: 0
}



.article-news .article-poster img {

  width: 100%
}



.article-news .article-title {

  font-weight: 700;

  font-size: 16px;

  line-height: 24px;

  margin-bottom: 0;

  margin-block-start: 15px
}



.article-news .article-title a {

  color: #1e1e1e;

  -webkit-line-clamp: 2
}



.article-news .article-title a:hover {

  color: var(--clr-base)
}



.article-news .article-date {

  color: #666;

  margin-bottom: .25rem;

  display: none
}



.article-news .article-desc {

  color: #333;

  margin-top: 5px;

  line-height: 22px;

  display: none
}



.article-news .article-view {

  color: #c00;

  display: none
}



.video {

  width: calc(25% - 20px);

  text-align: center;

  cursor: pointer;

  margin: 10px
}



.pic-video {

  position: relative
}



.pic-video:before {

  content: "";

  position: absolute;

  width: 50px;

  height: 35px;

  top: calc(50% - 50px / 2);

  left: calc(50% - 35px / 2);

  z-index: 1;

  background: url(../images/play.png) no-repeat
}



.pic-video img {

  width: 100%
}



.name-video {

  font-size: 16px;

  color: #000;

  margin-bottom: 0
}



.load-video-tc .h-r-v {

  width: 48%;

  position: absolute;

  right: 20px;

  bottom: 26px;

  display: none
}



.load-video-tc .h-l-v iframe {

  height: 333px
}



.load-video-tc div.item-duoi {

  margin: 0 5px;

  border: 1px solid #fff;

  position: relative
}



.load-video-tc div.item-duoi:before {

  content: "";

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  background: url(../images/icon-video.png) no-repeat center;

  background-size: 30px;

  cursor: pointer
}



.load-video-tc div.item-duoi iframe {

  width: 100%;

  height: 100%
}



.load-video-tc div.item-duoi span {

  display: block;

  text-align: left
}



.load-video-tc div.item-duoi span.ten {

  font-size: 14px
}



.load-video-tc div.item-duoi span.ngay {

  font-size: 14px
}



.load-video-tc div.item-video {

  position: relative
}



.load-video-tc div.item-video a {

  position: relative;

  display: block;

  line-height: 0;

  cursor: pointer;

  padding-top: 43.90625%
}



.load-video-tc div.item-video a img {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  object-fit: cover
}



.load-video-tc div.item-video a:before {

  content: "";

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../images/icon-video.png) no-repeat center
}



.load-video-tc {

  position: relative
}



div#main_footer ul {

  list-style: none;

  padding: 0;

  margin: 0
}



div#main_footer ul li {

  margin: 9px 0;

  font-size: 14px
}



div#main_footer ul li i {

  width: 30px;

  height: 30px;

  border: 1px solid #f9f9f9;

  text-align: center;

  border-radius: 3px;

  line-height: 30px;

  margin-right: 8px;

  font-size: 18px;

  color: #525252
}



.bg-footer-top {

  margin-bottom: -2px;

  width: 100%;

  height: 80px;

  background: url(../images/bg-footer-top.svg) no-repeat top center/cover
}



.footer-wrap {

  margin-bottom: -53px
}



.footer-item:nth-child(1) {

  width: 246px
}



.footer-item:nth-child(2) {

  width: 40.67%;

  margin-bottom: 40px
}



.footer-item:nth-child(3) {

  width: 27%
}



.policy-btn {

  display: inline-block;

  font-weight: 400;

  font-size: 14px;

  text-transform: uppercase;

  color: #1e1e1e;

  background: url(../images/icon-chinh-sach.svg) no-repeat left center;

  padding-left: 25px;

  line-height: 45px;

  cursor: pointer;

  transition: all .3s ease
}



.policy-btn:hover {

  color: #fff
}



.maps-btn {

  display: inline-block;

  font-family: var(--font-family);

  font-weight: 400;

  font-size: 14px;

  color: #fff;

  padding: 12px 32px 12px 49px;

  -webkit-border-radius: 100vmax;

  border-radius: 100vmax;

  background: url(../images/icon-maps.svg) no-repeat left 21px center;

  background-color: #66462f;

  cursor: pointer;

  transition: all .3s ease;

  margin-left: 59px
}



.maps-btn:hover {

  color: #fff;

  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2)
}



.footer-title {

  text-transform: uppercase;

  font-size: 14px;

  margin-bottom: 20px
}



#fanpage-facebook {

  width: 312px;

  aspect-ratio: 1/1;

  background-color: #cba365;

  padding: 10px;

  -webkit-border-radius: 50%;

  border-radius: 50%
}



#fanpage-facebook iframe {

  -webkit-border-radius: 50%;

  border-radius: 50%;

  height: 100% !important;

  width: 100% !important;

  overflow: hidden;

}



.social {

  margin-bottom: 0;

  padding: 0;

  list-style: none
}



.social li {

  display: inline-block;

  -webkit-transition: all .3s linear;

  -o-transition: all .3s linear;

  transition: all .3s linear
}



.social li:hover {

  -webkit-transform: translateY(-5px);

  -ms-transform: translateY(-5px);

  transform: translateY(-5px)
}



div.wap_copy {

  max-width: 795px;

  align-items: center;

  gap: 10px
}



div.wap_copy .copyright,

div.wap_copy .statistic {

  margin-bottom: 0
}



.statistic span {

  margin-left: 8px
}



.footer-powered {

  color: #fff;

  background-color: #cba365;

  padding: 9px 50px;

  -webkit-border-radius: 100vmax;

  border-radius: 100vmax
}



.footer-powered b {

  font-weight: 400
}



.footer-statistic {

  text-align: right
}



.footer-statistic span {

  padding-right: 10px
}



.footer-statistic span:last-child {

  padding-right: 0
}



.list_monnb {

  display: block;

  text-align: center;

  margin-bottom: 20px
}



.list_monnb a {

  font-size: 16px;

  text-transform: uppercase;

  color: inherit;

  display: inline-block;

  vertical-align: top;

  margin: 0 9px;

  padding: 16px 20px;

  line-height: 0;

  cursor: pointer;

  transition: .2s;

  margin-bottom: 5px;

  border: 1px solid #1a1918
}



.list_monnb a:hover,

.list_monnb a.active {

  color: #fff !important;

  background: #1a1918
}



#video-select iframe {

  height: 281px
}



#video-select .listvideos {

  width: 100%;

  height: 40px;

  padding: 0 10px
}



div.run-slick .slick-prev:before,

div.run-slick .slick-next:before {

  font-size: 0
}



div.run-slick .slick-prev,

div.run-slick .slick-next {

  width: 32px;

  height: 44px;

  top: 50%;

  margin-top: -22px
}



div.run-slick .slick-prev {

  background: url(../images/sl-1.png) no-repeat center;

  left: 20px;

  right: auto
}



div.run-slick .slick-next {

  background: url(../images/sl-2.png) no-repeat center;

  right: 20px;

  left: auto
}



div.box-hethong {

  padding: 0;

  position: relative
}



div.box-hethong .ht-left {

  width: calc(100% - 10px);

  position: absolute;

  top: 19px;

  right: 10px;

  z-index: 4;

  text-align: right
}



div.box-hethong .ht-right {

  width: 100%
}



div.box-hethong .ht-left .item-ht {

  margin-bottom: 8px;

  font-size: 14px;

  cursor: pointer;

  background: hsl(0, 0%, 0%, 0.7);

  padding: 10px 20px;

  color: #fff;

  display: inline-block
}



div.box-hethong .ht-left .item-ht .ten {

  display: block
}



div.box-hethong .ht-left .act-item {

  background: hsl(6, 93%, 48%)
}



div.box-hethong .ht-right iframe {

  width: 100%
}



div.box-hethong .ht-left .item-ht p {

  margin-bottom: 2px
}



div.box-hethong .ht-left .item-ht p span {

  color: #fffc00
}



div.box-lienhe {

  padding: 50px 0;

  background-size: cover;

  background: #478b7b
}



div.box-lienhe .td-tc1,

div.box-lienhe .td-tc2 {

  color: #fff;

  text-align: center
}



div.box-lienhe .td-tc1 {

  text-transform: uppercase;

  font-size: 27px
}



div.css_lienhe .baogia-form {

  max-width: 750px;

  width: 100%;

  margin: auto;

  text-align: center;

  margin-top: 16px
}



div.css_lienhe .baogia-input input {

  background: none;

  border: 0;

  border-bottom: 1px solid #000;

  border-radius: 0;

  color: #000
}



div.css_lienhe .baogia-input textarea.form-control {

  background: none;

  border: 0;

  border-bottom: 1px solid #000;

  border-radius: 0;

  color: #000;

  height: 46px
}



div.css_lienhe .btn-primary {

  margin-top: 14px;

  background: #000;

  border-color: #000;

  text-transform: uppercase
}



div.css_lienhe ::-webkit-input-placeholder {

  color: #000
}



div.css_lienhe :-moz-placeholder {

  color: #000
}



div.css_lienhe ::-moz-placeholder {

  color: #000
}



div.css_lienhe :-ms-input-placeholder {

  color: #000
}



.box-readmore {

  padding: 8px 15px;

  border: 1px solid #dedede;

  margin-bottom: 2rem;

  border-radius: 5px;

  background-color: #eee
}



.box-readmore li ul>li {

  margin: 0;

  margin-bottom: 8px
}



.box-readmore li ul>li:before {

  content: counters(item, ".") " "

}



.box-readmore ul {

  list-style-type: none;

  counter-reset: item;

  margin-bottom: 0;

  padding-left: 0 !important;

  margin-top: 8px
}



.box-readmore ul li {

  display: table;

  counter-increment: item;

  margin-bottom: 5px
}



.box-readmore ul li:before {

  content: counters(item, ".") ". ";

  display: table-cell;

  padding-right: 5px
}



.box-readmore ul li a {

  color: #333;

  cursor: pointer;

  font-weight: 600
}



.box-readmore ul li a:hover {

  color: #767676
}



.menu-other {

  position: relative
}



.menu-fix {

  -webkit-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15);

  -moz-box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15);

  box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15);

  position: fixed !important;

  left: 0;

  right: 0;

  top: 0;

  -webkit-animation: fadeInDown 1.3s ease backwards;

  -moz-animation: fadeInDown 1.3s ease backwards;

  -o-animation: fadeInDown 1.3s ease backwards;

  -ms-animation: fadeInDown 1.3s ease backwards;

  animation: fadeInDown 1.3s ease backwards;

  background-color: #fff;

  padding-block: 0
}



.menu-fix .logo-header img {

  max-width: 100px
}



.home-section {

  padding-block: var(--size-50)
}



.isolation {

  position: relative;

  isolation: isolate
}



.slogan-main {

  font-family: var(--second-family);

  font-weight: 400;

  font-size: 24px;

  text-transform: capitalize;

  color: #66462f;

  margin-bottom: 0
}



.container--1200 {

  --_max-width: 1180px;

  --_padding: var(--size-10);

  max-width: var(--_max-width);

  width: min(var(--_max-width), 100% - (var(--_padding) * 2));

  margin-inline: auto
}



:where(.flow :not(:first-child)) {

  --flow-spacer: 10px;

  margin-top: var(--flow-spacer, 3em)
}



.rotatex {

  transition: transform .6s;

  transform-style: preserve-3d
}



.rotatex:hover img {

  transition: .9s;

  transform: rotateY(360deg)
}



.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 20px;

  border: none;

  -webkit-border-radius: 10px;

  border-radius: 10px;

  color: #333;

  background-color: var(--clr-base);

  font-size: 14px;

  cursor: pointer;

  transition: all .3s ease
}



.button:is(:hover, :focus) {

  background-color: var(--clr-base);

  color: var(--clr-white)
}



.tc-item {

  flex-direction: row
}



.bg-home-100 {

  background: linear-gradient(180deg, #e8e0cc 0%, #e8e0cc 0.01%, rgba(232, 224, 204, 0) 100%);

  padding-block-end: var(--size-80)
}



.bg-home-100::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background: url(../images/bg-top-right-100.png) no-repeat top right, url(../images/bg-bottom-left-100.png) no-repeat bottom left
}



.home-about {

  padding-block-start: var(--size-70)
}



.home-about .title-main {

  margin-bottom: 8px
}



.about-wrap {

  text-align: center
}



p.about-name {

  font-family: var(--font3);

  font-weight: 400;

  font-size: 24px;

  color: #66462f;

  margin-bottom: 0
}



h2.about-title {

  font-family: var(--second-family);

  font-weight: 400;

  font-size: 54px;

  text-align: center;

  color: #66462f
}



.about-desc {

  font-weight: 400;

  font-size: 14px;

  line-height: 24px;

  text-align: center;

  color: #545454
}



.home-criteria {

  padding-block-start: var(--size-45);

  overflow: hidden
}



.home-criteria .slick-slide {

  margin: 0 25px
}



.home-criteria .slick-list {

  margin: 0 -25px
}



.criteria-item .tc-item {

  flex-direction: column;

  align-items: center;

  justify-content: center
}



.criteria-item .tc-photo {

  background: #66462f;

  width: 124px;

  height: 124px;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  justify-content: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-border-radius: 50%;

  border-radius: 50%
}



.criteria-item .tc-contents {

  margin-top: 1rem;

  max-width: 200px
}



.criteria-item .tc-name {

  font-weight: 700;

  font-size: 18px;

  line-height: 24px;

  text-transform: uppercase;

  text-align: center;

  color: #66462f
}



.criteria-item .tc-desc {

  font-weight: 400;

  font-size: 14px;

  line-height: 22px;

  text-align: center;

  color: #545454
}



.home-slider {

  padding-block-start: 40px;

  overflow: hidden
}



.home-slider .slick-slide {

  margin: 0 10px
}



.home-slider .slick-list {

  margin: 0 -10px
}



.home-slider img {

  -webkit-border-radius: 20px;

  border-radius: 20px
}



.home-service {

  background: linear-gradient(180deg, #cfb4a1 0%, #e8e0cc 25.52%, #e8e0cc 75%, #cfb4a1 100%);

  padding-block-start: var(--size-70);

  padding-block-end: calc(var(--size-80) + 5px);

  overflow: hidden
}



.home-service::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background: url(../images/bg-top-left-200.png) no-repeat top 25px left, url(../images/bg-top-right-200.png) no-repeat top right, url(../images/bg-bottom-right-200.png) no-repeat bottom right
}



.home-service .slick-slide {

  margin: 0 12.5px
}



.home-service .slick-list {

  margin: 0 -12.5px
}



.home-service .slick-prev:before,

.home-service .slick-next:before {

  font-size: 0
}



.home-service .slick-prev,

.home-service .slick-next {

  width: 32px;

  height: 45px;

  top: 46%
}



.home-service .slick-prev {

  background: url(../images/sl-1.png) no-repeat center;

  left: -50px
}



.home-service .slick-next {

  background: url(../images/sl-2.png) no-repeat center;

  right: -50px
}



.service-restyle .boxProduct {

  --_column-count: 3;

  --_gap: 30px
}



.service-restyle .card-link {

  -ms-flex-direction: column-reverse;

  flex-direction: column-reverse;

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);

  border: 0;

  -webkit-border-radius: 100vmax 100vmax 0 0;

  border-radius: 100vmax 100vmax 0 0
}



.service-restyle .card-link .card-body {

  padding: 70px 25px 5px
}



.service-restyle .card-poster {

  padding: 15px;

  position: relative
}



.service-restyle .card-poster::before {

  content: "";

  position: absolute;

  z-index: 1;

  width: 50px;

  height: 20px;

  background: url(../images/bg-service-img.png) no-repeat top center;

  left: 50%;

  bottom: 15px;

  transform: translateX(-50%)
}



.service-restyle .card-title {

  font-family: var(--second-family);

  font-weight: 400;

  font-size: 44px;

  text-transform: uppercase;

  text-align: center;

  color: #66462f
}



.service-restyle .card-price {

  display: block;

  position: relative;

  margin-bottom: 15px
}



.service-restyle .card-price--new {

  font-family: var(--second-family);

  font-weight: 400;

  font-size: 28px;

  color: #66462f
}



.service-restyle sub {

  font-family: var(--second-family);

  font-weight: 400;

  text-transform: lowercase;

  font-size: 18px;

  line-height: 20px;

  color: #66462f
}



.service-restyle .card-desc {

  height: 210px;

  font-family: var(--clr-base);

  text-align: left;

  font-weight: 600;

  font-size: 14px;

  color: #2e2e2e;

  overflow-x: hidden;

  overflow-y: auto
}



.service-restyle .card-desc::-webkit-scrollbar {

  width: 4px
}



.service-restyle .card-desc::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 6px #d9d9d9;

  border-radius: 4px
}



.service-restyle .card-desc::-webkit-scrollbar-thumb {

  border-radius: 4px;

  -webkit-box-shadow: inset 0 0 6px #afafaf
}



.service-restyle .card-desc>* {

  margin-bottom: 10px
}



.home-book {

  background: url(../images/bg-bang-gia.jpg) no-repeat center center/cover;

  padding-block-start: var(--size-70);

  padding-block-end: var(--size-80);

  overflow: hidden
}



.home-book .slick-slide {

  margin: 0 24px
}



.home-book .slick-list {

  margin: 0 -24px
}



.bg-book {

  position: relative;

  background: url(../images/bg-book-bia.png) no-repeat center center;

  max-width: 980px;

  margin: 0 auto;

  padding: 60px 40px
}



.bg-book::before {

  content: "";

  position: absolute;

  z-index: 1;

  width: 48px;

  height: calc(100% - 60px);

  background: url(../images/bg-book-gay.png) no-repeat center center;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%)
}



.bg-book picture,

.slider-pro-restyle picture {

  display: block;

  -webkit-border-radius: 20px;

  border-radius: 20px
}



.home-product {

  background: linear-gradient(180deg, #cfb4a1 0%, #e8e0cc 25.52%, #e8e0cc 75%, #cfb4a1 100%);

  padding-block-start: var(--size-70);

  padding-block-end: var(--size-80)
}



.home-product .boxProduct {

  --_column-count: 2;

  --_gap: 30px
}



.product-wrap {

  padding-bottom: 82px;

  position: relative
}



.product-wrap>:nth-child(1) {

  width: 480px
}



.product-wrap>:nth-child(2) {

  width: 670px
}



.home-ablum {

  background: linear-gradient(180deg, #cfb4a1 0%, #e8e0cc 25.52%, #e8e0cc 75%, #cfb4a1 100%);

  padding-block: var(--size-80)
}



.home-ablum::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background: url(../images/bg-ablum-top-left.svg) no-repeat top 88px left 17px
}



.album-wrap {

  position: relative;

  justify-content: flex-end;

  background: url(../images/bg-album-top-right.svg) no-repeat top right 84px
}



.icon-rotate {

  position: absolute;

  width: 179px;

  height: 180px;

  background: url(../images/vong-tron.png) no-repeat;

  top: 0;

  left: 182px
}



.dial {

  -webkit-animation-name: spin;

  -webkit-animation-duration: 4000ms;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: linear
}



@-webkit-keyframes spin {

  from {

    -webkit-transform: rotate(0deg)
  }



  to {

    -webkit-transform: rotate(360deg)
  }

}



.album-item {

  display: flex;

  justify-content: flex-end;

  align-items: flex-end;

  gap: 10px
}



.album-item:nth-child(n+3) {

  margin-top: 10px;

}



.album-item picture {

  display: block;

  border-radius: 30px;

  overflow: hidden
}



.album-item .pic-album {

  margin-bottom: 0
}



.album-item .name-album,

.album-bottom {

  display: none
}



.home-media {

  padding-block: var(--size-80);
  width: 100%;
  overflow: hidden;

}



.media-wrap::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background: url(../images/bg-feedback-top-left.png) no-repeat top right;

  top: -50px;

  left: -18px
}



.media-wrap> :nth-child(1) {

  width: 460px;

  background: linear-gradient(180deg, #cfb4a1 0%, #e8e0cc 25.52%, #e8e0cc 75%, #cfb4a1 100%);

  border-radius: 20px;

  padding: 40px 25px 37px
}



.media-wrap> :nth-child(2) {

  width: 680px
}



.media-wrap> :nth-child(2) .title-main {

  text-align: left
}



.newsletter-slogan {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  text-align: center;

  color: #2e2e2e;

  margin-bottom: .5rem
}



.newsletter-input {

  position: relative;

  margin-bottom: 10px
}



.newsletter-input ::-webkit-input-placeholder {

  color: #545454
}



.newsletter-input :-moz-placeholder {

  color: #545454
}



.newsletter-input :-ms-input-placeholder {

  color: #545454
}



.newsletter-input ::placeholder {

  color: #545454
}



.newsletter-input select {

  background: url(../images/arrow-dich-vu.svg) no-repeat right 25px top 21px
}



.newsletter-input input,

.newsletter-input select {

  background-color: #fff;

  font-weight: 400;

  font-size: 13px;

  color: #545454;

  height: 48px;

  border-radius: 100vmax
}



div.chia2 .newsletter-input:nth-child(1) {

  width: calc(50% - 5px);

  float: left
}



div.chia2 .newsletter-input:nth-child(2) {

  width: calc(50% - 5px);

  float: right
}



.newsletter-button {

  margin-top: 5px
}



.newsletter-button input[type="submit"] {

  background: var(--clr-base) !important;

  border: 0 !important;

  border-radius: 100vmax;

  box-shadow: none !important;

  padding: 10px;

  height: 48px;

  width: 100%;

  font-weight: 700;

  font-size: 16px;

  text-transform: uppercase;

  text-align: center;

  color: #fff
}



.newsletter-button input[type="submit"]:hover {

  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2) !important
}



.feedback-item .tc-photo {

  position: relative;

  width: 272px;

  min-height: 310px;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  padding-block-start: 22px
}



.feedback-item .tc-photo::after {

  content: "";

  position: absolute;

  z-index: 1;

  inset: 0;

  background: url(../images/bg-feedback-img.png) no-repeat top center
}



.feedback-item .tc-photo picture {

  border-radius: 50%;

  overflow: hidden
}



.feedback-item .tc-contents {

  width: calc(100% - 272px)
}



.feedback-item .tc-name {

  font-weight: 700;

  font-size: 20px;

  line-height: 22px;

  text-transform: uppercase;

  color: #66462f;

  margin-bottom: 1rem
}



.feedback-item .tc-desc {

  font-weight: 400;

  font-size: 16px;

  line-height: 22px;

  color: #2e2e2e;

  margin-bottom: 1rem
}



.feedback-item .tc-content {

  font-weight: 400;

  font-size: 14px;

  line-height: 171%;

  color: #333;

  -webkit-line-clamp: 6
}



.feedback-restyle .slick-dots li {

  width: 14px;

  height: 14px
}



.feedback-restyle .slick-dots li button:before {

  width: 14px;

  height: 14px;

  font-size: 14px;

  color: rgba(85, 58, 39, 0.5);

  opacity: 1
}



.feedback-restyle .slick-dots li.slick-active button:before {

  color: #66462f
}



.home-news {

  background: linear-gradient(180deg, #cfb4a1 0%, #e8e0cc 25.52%, #e8e0cc 75%, #cfb4a1 100%);

  padding-block-start: var(--size-70);

  padding-block-end: 160px;

  margin-bottom: -80px;

  overflow: hidden
}



.news-wrap>:nth-child(1) {

  width: 50%;

  width: 449px
}



.news-wrap>:nth-child(2) {

  width: 50%;

  width: 690px
}



.news-features {

  position: relative;

  isolation: isolate;

  -webkit-border-radius: 100vmax 100vmax 0 0;

  border-radius: 100vmax 100vmax 0 0;

  overflow: hidden
}



.news-features-poster {

  position: relative
}



.news-features-poster::before {

  content: "";

  position: absolute;

  z-index: 0;

  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 72.4%, #000 100%)
}



.news-features-body {

  position: absolute;

  bottom: 0;

  left: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding: 32px
}



.news-features-body h3 {

  font-weight: 700;

  font-size: 22px;

  line-height: 32px;

  color: #fff;

  margin-bottom: 1rem
}



.news-features-body span {

  display: inline-block;

  border-radius: 20px;

  padding: 4px 16px 4px 37px;

  height: 26px;

  font-weight: 400;

  font-size: 14px;

  color: #fff;

  background: url(../images/icon-news.svg) no-repeat left 16px center;

  background-color: #66462f
}



.news-features-body h3:hover {

  color: #cfcfcf
}



.news-restyle .slick-slide {

  margin: 0 15px
}



.news-restyle .slick-list {

  margin: 0 -15px
}



.news-restyle .slick-slide>*+* {

  margin-top: 20px
}



.button-datlich {

  position: absolute;

  top: 0;

  right: 0;

  font-weight: 500;

  font-size: 14px;

  text-transform: capitalize;

  color: #fff;

  display: inline-flex;

  align-items: center;

  justify-content: flex-end;

  border-radius: 4px;

  padding: 6px 10px;

  width: 94px;

  height: 30px;

  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);

  background: url(../images/icon-dat-lich.svg) no-repeat left 10px center;

  background-color: #66462f;

  cursor: pointer;

  transition: all .3s ease
}



.button-datlich:hover {

  color: #fff;

  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2)
}



.menu-fix .button-datlich {

  display: none
}



.datlich-close {

  position: absolute;

  top: 5px;

  right: 10px;

  z-index: 1
}



.datlich-modal .modal-content {

  padding-block: 40px;

  background: linear-gradient(180deg, #cfb4a1 0%, #e8e0cc 25.52%, #e8e0cc 75%, #cfb4a1 100%);

  -webkit-border-radius: 20px;

  border-radius: 20px;

  overflow: hidden
}



.wowbook-left {

  background: url(../images/sl-1.png) no-repeat left 20px center
}



.wowbook-right {

  background: url(../images/sl-2.png) no-repeat right 20px center
}



.addshare-btn {

  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2), 0 8px 15px rgba(0, 0, 0, 0.15) !important;

}