@charset "UTF-8";



@font-face {

  font-family: "Roboto-Regular";

  src: url("../fonts/Roboto-Regular.eot");

  src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype"), url("../fonts/Roboto-Regular.svg#Roboto-Regular") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Roboto-Bold";

  src: url("../fonts/Roboto-Bold.eot");

  src: url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype"), url("../fonts/Roboto-Bold.svg#Roboto-Bold") format("svg");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Mulish-Bold";

  src: url("../fonts/Mulish-Bold.eot");

  src: url("../fonts/Mulish-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Mulish-Bold.woff2") format("woff2"), url("../fonts/Mulish-Bold.woff") format("woff"), url("../fonts/Mulish-Bold.ttf") format("truetype"), url("../fonts/Mulish-Bold.svg#Mulish-Bold") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Mulish-Medium";

  src: url("../fonts/Mulish-Medium.eot");

  src: url("../fonts/Mulish-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Mulish-Medium.woff2") format("woff2"), url("../fonts/Mulish-Medium.woff") format("woff"), url("../fonts/Mulish-Medium.ttf") format("truetype"), url("../fonts/Mulish-Medium.svg#Mulish-Medium") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Mulish-SemiBold";

  src: url("../fonts/Mulish-SemiBold.eot");

  src: url("../fonts/Mulish-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Mulish-SemiBold.woff2") format("woff2"), url("../fonts/Mulish-SemiBold.woff") format("woff"), url("../fonts/Mulish-SemiBold.ttf") format("truetype"), url("../fonts/Mulish-SemiBold.svg#Mulish-SemiBold") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Mulish-Regular";

  src: url("../fonts/Mulish-Regular.eot");

  src: url("../fonts/Mulish-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Mulish-Regular.woff2") format("woff2"), url("../fonts/Mulish-Regular.woff") format("woff"), url("../fonts/Mulish-Regular.ttf") format("truetype"), url("../fonts/Mulish-Regular.svg#Mulish-Regular") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Mulish-Light";

  src: url("../fonts/Mulish-Light.eot");

  src: url("../fonts/Mulish-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Mulish-Light.woff2") format("woff2"), url("../fonts/Mulish-Light.woff") format("woff"), url("../fonts/Mulish-Light.ttf") format("truetype"), url("../fonts/Mulish-Light.svg#Mulish-Light") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Mulish-Black";

  src: url("../fonts/Mulish-Black.eot");

  src: url("../fonts/Mulish-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Mulish-Black.woff2") format("woff2"), url("../fonts/Mulish-Black.woff") format("woff"), url("../fonts/Mulish-Black.ttf") format("truetype"), url("../fonts/Mulish-Black.svg#Mulish-Black") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Quicksand-Bold";

  src: url("../fonts/Quicksand-Bold.eot");

  src: url("../fonts/Quicksand-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Quicksand-Bold.woff2") format("woff2"), url("../fonts/Quicksand-Bold.woff") format("woff"), url("../fonts/Quicksand-Bold.ttf") format("truetype"), url("../fonts/Quicksand-Bold.svg#Quicksand-Bold") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Quicksand-Medium";

  src: url("../fonts/Quicksand-Medium.eot");

  src: url("../fonts/Quicksand-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Quicksand-Medium.woff2") format("woff2"), url("../fonts/Quicksand-Medium.woff") format("woff"), url("../fonts/Quicksand-Medium.ttf") format("truetype"), url("../fonts/Quicksand-Medium.svg#Quicksand-Medium") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Quicksand-Regular";

  src: url("../fonts/Quicksand-Regular.eot");

  src: url("../fonts/Quicksand-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Quicksand-Regular.woff2") format("woff2"), url("../fonts/Quicksand-Regular.woff") format("woff"), url("../fonts/Quicksand-Regular.ttf") format("truetype"), url("../fonts/Quicksand-Regular.svg#Quicksand-Regular") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Quicksand-SemiBold";

  src: url("../fonts/Quicksand-SemiBold.eot");

  src: url("../fonts/Quicksand-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Quicksand-SemiBold.woff2") format("woff2"), url("../fonts/Quicksand-SemiBold.woff") format("woff"), url("../fonts/Quicksand-SemiBold.ttf") format("truetype"), url("../fonts/Quicksand-SemiBold.svg#Quicksand-SemiBold") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "SVN-Bango";

  src: url("../fonts/SVN-Bango.eot");

  src: url("../fonts/SVN-Bango.eot?#iefix") format("embedded-opentype"), url("../fonts/SVN-Bango.woff2") format("woff2"), url("../fonts/SVN-Bango.woff") format("woff"), url("../fonts/SVN-Bango.ttf") format("truetype"), url("../fonts/SVN-Bango.svg#SVN-Bango") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



/* Main */

:root {

  --main-color: #02a1c9;

  --hover-color: #f28e00;

}



body {

  font-family: Roboto-Regular;

  margin: 0;

  line-height: 1.5em;

  font-size: 14px;

  color: #333;

  margin-left: auto;

  margin-right: auto;

}



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

  body {

    font-size: 13px;

  }

}



body::-webkit-scrollbar {

  background: white;

  width: 8px;

  height: 0;

  -webkit-transition: all 9s;

  transition: all 9s;

}



body::-webkit-scrollbar-thumb {

  background: var(--main-color);

  -webkit-transition: all 9s;

  transition: all 9s;

  border-radius: 4px;

}



.full {

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  z-index: 9;

}



a {

  color: inherit;

}



a:hover {

  text-decoration: none;

}



p,

h2,

h3,

h4,

h5,

h6 {

  margin-bottom: 0;

}



figure {

  margin-bottom: 0;

}



input,

textarea,

button {

  outline: none;

  border: none;

}



input[type=number] {

  -moz-appearance: textfield;

}



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: 0px;

  margin: 0px;

  overflow: hidden;

}



.wrapper {

  margin: 0 auto;

  padding: 0 15px;

  position: relative;

}



@media screen and (min-width: 576px) {

  .wrapper {

    max-width: 570px;

  }

}



@media screen and (min-width: 767px) {

  .wrapper {

    max-width: 750px;

  }

}



@media screen and (min-width: 991px) {

  .wrapper {

    max-width: 1300px;

  }

}



img {

  max-width: 100%;

  height: auto;

}



img:not([src]) {

  visibility: hidden;

}



img.lazy {

  opacity: 0;

}



img:not(.initial) {

  transition: opacity 1s;

}



img.initial,

img.loaded,

img.error {

  opacity: 1;

}



img.img-full,

img.img-responsive,

img.img-fluid,

img.img100 {

  width: 100% !important;

  height: auto;

}



div[data-slick] {

  display: none;

}



div[data-slick].loaded {

  display: block;

}



/*menu*/

.block-menu {

  position: relative;

  width: 100%;

  left: 0;

  top: 0;

  z-index: 999;

}



.block-menu.sticky {

  position: fixed;

}



#fix {

  height: auto;

}



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

  #fix {

    height: 50px;

  }

}



.mega-menu {

  position: relative;

}



.mega-menu ul {

  margin: 0;

  padding: 0;

  list-style: none;

}



.mega-menu>ul {

  display: flex;

  -webkit-display: flex;

}



.mega-menu>ul>li>a {

  display: block;

  padding: 14px 22px 34px;

  text-align: center;

  font-family: Quicksand-SemiBold;

  color: #16303D;

  font-size: 18px;

  text-transform: capitalize;

}



.bottom_mn.mega-menu ul li:first-child a {

  padding-left: 0;

}



.left_mn {

  margin-right: 36px;

}



.box_time {

  background: url(../img/bg_time.png) no-repeat;

  background-size: 100% 100%;

  width: 238px;

  height: 130px;

}



.bottom_mn.mega-menu ul li:last-child a {

  padding-right: 0;

}



.mega-menu li {

  position: relative;

}



.mega-menu>ul>li a.active::after, .mega-menu>ul>li:hover>a::after {

    content: "";

    background: url(../img/bcsao1.png) no-repeat;

    width: 30px;

    background-size: 100% 100%;

    height: 25px;

    position: absolute;

    left: 0;

    right: 0;

    margin: 0 auto;

    bottom: 0;

    transition: 0.3s;

}



.mega-menu ul li .active {

  font-family: Quicksand-SemiBold;

  color: #02a1c9;

}



.mega-menu ul li a:hover {

  color: #02a1c9;

}



button.open-form-search {

  background: none;

  position: relative;

}



.mega-menu>ul>li.has-level1 .down_icon {

  -webkit-mask-image: url(data:image/webp;base64,UklGRnwAAABXRUJQVlA4TG8AAAAvH8AHEGDbtpEk9t/1fnfa6C6MYBrZtpP7fxepmUy0FIOjiaxQUOL77hpM2qaz226B7x/eL/SoPgbAgkStMWpoBqC9qJlb9AQ9FFzQ7T3lPol9ltqpe9+9tnhp89jqod3RjhC0z97Y/hs26+i/GAAA);

  width: 12px;

  height: 12px;

  background-color: #000;

  display: inline-block;

  position: relative;

  bottom: -1px;

  -webkit-mask-position: center;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-size: cover;

  margin-left: 5px;

}



.mega-menu .drop-menu {

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

  background: #ffffff;

  position: absolute;

  border: none;

  width: 220px;

  z-index: 1030;

  display: block;

  opacity: 0;

  visibility: hidden;

  border-radius: 0;

  transition: all 0.3s ease-in-out;

  padding: 0px;

  white-space: initial;

  transform: translateX(-10px);

  -webkit-transform: translateX(-10px);

  -ms-transform: translateX(-10px);

  text-align: left;

}



.mega-menu .drop-menu.drop-menu-level-1 {

  top: 100%;

  left: auto;

}



.mega-menu .drop-menu.drop-menu-level-child {

  top: 0;

  left: 100%;

}



.mega-menu .drop-menu>li {

  position: relative;

}



.mega-menu .drop-menu>li>a {

  padding: 6px 15px 6px 12px;

  display: block;

  position: relative;

  transition: all 0.2s;

  line-height: 25px;

  font-family: "Quicksand-Medium";

}



.mega-menu .drop-menu>li>a>.down_icon {

  transform: rotate(-90deg) !important;

  position: absolute !important;

  right: 8px;

  top: calc(50% - 6px);

  transition: all 0.4s;

}



.mega-menu>ul>li.has-level1:hover .drop-menu-level-1 {

  opacity: 1;

  visibility: visible;

  margin-top: 0px;

  display: block;

  transform: translateX(0);

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

}



.mega-menu .drop-menu>li.has-level:hover>ul.drop-menu-level-child {

  opacity: 1;

  visibility: visible;

  top: 0;

  margin-top: 0;

  transform: translateX(0);

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

}



.mega-menu .drop-menu li a::after {

  position: absolute;

  content: "";

  height: 100%;

  width: 2px;

  left: 0px;

  transition: 0.5s;

  opacity: 0;

  visibility: hidden;

  top: 0;

  transform: scale(0);

}



.mega-menu .drop-menu li a:hover::after {

  opacity: 1;

  visibility: visible;

  transform: scale(1);

  background-color: #59b1c9;

}



/* Search Responsive */

.search-res svg {

  width: 22px;

  height: 22px;

}



.search-res svg path {

  stroke: var(--main-color);

  stroke-width: 2;

}



.search-res .icon-search {

  width: 40px;

  height: 40px;

  cursor: pointer;

  text-align: center;

  line-height: 40px;

  color: var(--main-color);

  margin: 0px;

}



.search-res .icon-search svg:nth-child(2) {

  display: none;

}



.search-res .icon-search.active {

  color: var(--main-color);

  background: var(--main-color);

  border-radius: 100%;

}



.search-res .icon-search.active path {

  stroke: #fff;

}



.search-res .icon-search.active svg:nth-child(1) {

  display: none;

}



.search-res .icon-search.active svg:nth-child(2) {

  display: inline;

}



.search-res .search-grid {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

  z-index: 1000;

  opacity: 0;

  visibility: hidden;

  transition: 0.5s;

}



.search-res .search-grid.active {

  opacity: 1;

  visibility: visible;

}



.search-res .search-grid.active .wrap-search-res {

  transform: translateY(0);

  pointer-events: all;

}



.search-res .search-grid .wrap-search-res {

  display: flex;

  flex-wrap: wrap;

  position: relative;

  background: #fff;

  padding: 15px;

  z-index: 3;

  transition: 0.4s;

  transform: translateY(-20px);

  pointer-events: none;

}



.search-res .search-grid .bg-search-res {

  background: rgba(0, 0, 0, 0.2);

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 2;

}



.search-res .search-grid p {

  text-align: right;

  margin-bottom: 12px;

  width: 100%;

}



.search-res .search-grid input {

  width: calc(100% - 45px);

  line-height: 38px;

  outline: none;

  border: none;

  padding: 0 10px 0 15px;

  color: var(--main-color);

  background: rgba(88, 178, 199, 0.075);

}



.search-res .search-grid input::-moz-placeholder {

  color: var(--main-color);

  font-size: 12px;

}



.search-res .search-grid input::placeholder {

  color: var(--main-color);

  font-size: 12px;

}



.search-res .search-grid button {

  width: 45px;

  height: 38px;

  cursor: pointer;

  outline: none;

  border: none;

  margin: 0px;

  display: block;

  background: #fff;

  line-height: 36px;

  text-align: center;

}



.cart-res {

  position: relative;

  margin-right: 5px;

}



.cart-res svg path {

  stroke: var(--main-color);

}



.cart-res span {

  background: var(--main-color);

  color: #fff;

  font-size: 9px;

  text-align: center;

  position: absolute;

  top: 0;

  right: -5px;

  display: block;

  width: 15px;

  height: 15px;

  line-height: 15px;

  border-radius: 50%;

}



/*header-mobile*/

#menu {

  display: none;

}



#hamburger {

  display: block;

  width: 27px;

  height: 23px;

  position: relative;

}



#hamburger::before,

#hamburger::after,

#hamburger span {

  background: var(--main-color);

  content: "";

  display: block;

  width: 100%;

  height: 2px;

  position: absolute;

  left: 0px;

  transition: none 0.5s ease 0.5s;

  transition-property: transform, top, bottom, left, opacity;

}



#hamburger::before {

  top: 0px;

}



#hamburger span {

  top: 9px;

}



#hamburger::after {

  top: 18px;

}



.mm-wrapper_opening #hamburger::before,

.mm-wrapper_opening #hamburger::after {

  top: 10px;

}



.mm-wrapper_opening #hamburger span {

  left: -50px;

  opacity: 0;

}



.mm-wrapper_opening #hamburger::before {

  transform: rotate(45deg);

}



.mm-wrapper_opening #hamburger::after {

  transform: rotate(-45deg);

}



.mobile_menu_section {

  padding: 15px;

  display: block !important;

  text-align: left;

}



.mobile_menu_section p {

  text-transform: uppercase;

  margin-bottom: 5px;

  color: #333;

}



.mobile_menu_section .mobile_menu_help {

  color: #677279;

  display: flex;

  align-items: center;

}



.mobile_menu_section .mobile_menu_help svg {

  margin-right: 7px;

  width: 20px;

  height: 20px;

}



.mobile_menu_section .mobile_menu_help a {

  display: block;

  padding: 7px 7px 7px 0;

  margin-left: 7px;

  text-transform: uppercase;

  color: #333;

}



.mm-menu_opened {

  display: flex !important;

}



.menu-m {

  background: #fff;

}



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

  .menu-m {

    padding: 5px 0;

    position: relative;

  }

}



.menu-m-inside {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo-res {

  display: block;

}



.logo-res img {

  width: auto !important;

  max-height: 40px !important;

}



/*kim cương*/

.diamont_hover {

  position: relative;

  display: block;

}



.diamont_hover::before {

  content: "";

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

  bottom: 0;

  left: 0;

  position: absolute;

  transform: rotate(90deg);

  -khtml-opacity: 1;

  -o-opacity: 1;

  -ms-opacity: 1;

  -webkit-opacity: 1;

  -moz-opacity: 1;

  opacity: 1;

  width: 0;

  height: 0;

  z-index: 1;

}



.diamont_hover::after {

  content: "";

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

  top: 0;

  right: 0;

  position: absolute;

  transform: rotate(90deg);

  -khtml-opacity: 1;

  -o-opacity: 1;

  -ms-opacity: 1;

  -webkit-opacity: 1;

  -moz-opacity: 1;

  opacity: 1;

  width: 0;

  height: 0;

  z-index: 2;

}



.diamont_hover:hover::before,

.diamont_hover:hover::after {

  transform: rotateY(180deg);

  transition-duration: 1.3s;

  -khtml-opacity: 0;

  -o-opacity: 0;

  -ms-opacity: 0;

  -webkit-opacity: 0;

  -moz-opacity: 0;

  opacity: 0;

  height: 100%;

  width: 100%;

}



.diamont_hover:hover::before,

.diamont_hover:hover::after {

  transform: rotateY(180deg);

  transition-duration: 1.3s;

  -khtml-opacity: 0;

  -o-opacity: 0;

  -ms-opacity: 0;

  -webkit-opacity: 0;

  -moz-opacity: 0;

  opacity: 0;

  height: 100%;

  width: 100%;

}



/*tráng tròn*/

.hover-cirle {

  position: relative;

}



.hover-cirle::before {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 2;

  display: block;

  content: "";

  width: 0;

  height: 0;

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

  border-radius: 100%;

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

  opacity: 0;

}



.hover-cirle:hover::before {

  animation: circle 0.75s;

}



@keyframes circle {

  0% {

    opacity: 1;

  }



  40% {

    opacity: 1;

  }



  100% {

    width: 200%;

    height: 200%;

    opacity: 0;

  }

}



/*tráng gương*/

.hover-glass img {

  width: 100%;

  transition: ease 0.3s;

  display: block;

}



.box_images_album h3 {

  text-align: center;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

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

  font-family: "SVN-BerkshireSwash";

  color: #fff;

  line-height: 43px;

  font-size: 22px;

  transition: 0.4s;

  opacity: 0;

}



.row-photo {

  margin: 0 -8px;

}



.box_images_album:hover h3 {

  opacity: 1;

  transition: 0.4s;

}



.box_images_album {

  position: relative;

}



.col-photo {

  padding: 0 8px;

}



.hover-glass:hover:before {

  animation: shine 0.75s;

}



@keyframes shine {

  100% {

    left: 125%;

  }

}



.hover-glass {

  overflow: hidden;

  display: block;

  position: relative;

}



.hover-glass::before {

  content: "";

  position: absolute;

  top: 0;

  left: -83%;

  z-index: 2;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

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

  transform: skewX(-25deg);

}



.img100 {

  width: 100%;

  height: auto;

}



/*text_split*/

.text-split1 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 1;

}



.text-split2 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 2;

}



.text-split3 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 3;

}



.text-split4 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 4;

}



.text-split5 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 5;

}



.text-split6 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 6;

}



.text-split7 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 7;

}



.text-split8 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 8;

}



.text-split9 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 9;

}



.album_main {

  position: relative;

  margin-bottom: 18px;

}



.album_main h3 a:hover {

  color: #046e95;

}



.album_main h3 a {

  transition: all 0.3s;

}



.album_main h3 {

  position: absolute;

  bottom: 0;

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

  color: #fff;

  text-align: center;

  width: 100%;

  font-family: mulish-medium;

  font-size: 18px;

  padding: 12px 20px;

}



.scale-img {

  overflow: hidden;

  display: block;

}



.scale-img img {

  transition: 0.3s ease-out;

  transform: scale(1, 1);

}



.scale-img:hover>img {

  transition: 0.3s ease-out;

  transform: scale(1.1, 1.1);

}



.color {

  animation: changeColor 1s infinite alternate;

}



@keyframes changeColor {

  0% {

    color: #ce0404;

  }



  0% {

    color: #0000ff;

  }



  50% {

    color: #ce0404;

  }



  100% {

    color: #fed700;

  }

}



/*header-mobile*/

/*slide*/

@keyframes minus {

  from {

    transform: matrix(1.1, 0, 0, 1.1, 0, 0);

  }



  to {

    transform: matrix(1, 0, 0, 1, 0, 0);

  }

}



.owl-item.active .slideshow-item a img {

  transform: matrix(1.1, 0, 0, 1.1, 0, 0);

  -webkit-transform: matrix(1.1, 0, 0, 1.1, 0, 0);

  animation: minus 7s 0s ease both infinite;

  animation-iteration-count: 1;

  -webkit-animation-iteration-count: 1;

}



.header_rip h3 {

  font-size: 15px;

  color: #16303D;

  font-family: "Quicksand-Medium";

  text-transform: capitalize;

}



header#header:after {

    content: "";

    position: absolute;

    top: 0;

    height: 100px;

    background-image: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(185 225 234) 100%);

    left: 0;

    right: 0;

}



ul.drop-menu.drop-menu-level-1 li:first-child a {

  padding-left: 12px;

}



.header_rip {

    position: relative;

    z-index: 9;

    padding: 0px 0 20px;

    display: flex;

    align-items: center;

    max-width: 850px;

    color: #000;

    font-size: 16px;

    font-weight: 600;

    background: url(../img/line_hd.png) bottom no-repeat;

    background-repeat: repeat-x;

    margin: auto;

}





button.open-form-search img {

    background: #94dbec;

    background-size: 100% 100%;

    display: inline-block;

    padding: 10px;

    border-radius: 100%;

    transition: all .3s;

}

.headerBottom {

  position: relative;

  z-index: 10;

}

button.open-form-search img:hover {

    background: #3fbedc;

    box-shadow: 0 3px 6px #6aaebe;

}

button.open-form-search img {

  position: relative;

  top: 10px;

}



.box_time p {

  font-size: 14px;

  color: #FFFFFF;

  font-family: "Quicksand-Bold";

  text-transform: uppercase;

  margin-left: 18px;

  margin-bottom: -3px;

}



h3.time1 {

    font-family: 'SVN-Bango';

    color: #454545;

    font-size: 21px;

    margin: 4px 0;

    margin-left: 22px;

}



h3.time2 {

  font-size: 12px;

  margin-left: 7px;

  color: #FFFFFF;

  font-family: "Quicksand-Regular";

}



.box_relative {

  position: relative;

  top: 42px;

  left: 56px;

}



.left-slide {

  width: 76.7692307692%;

  position: relative;

}



.right-slide {

  width: 23.2307692308%;

  padding-left: 70px;

  padding-top: 50px;

}



.slideshow-image {

  border-radius: 40px;

  overflow: hidden;

  display: block;

}



.right-slide h2 {

  font-size: 18px;

  text-transform: uppercase;

  margin-bottom: 20px;

  font-family: "Quicksand-Bold";

  color: #16303D;

}



.social-slide {

  margin-bottom: 25px;

}



.hvr-bob {

  display: inline-block;

  vertical-align: middle;

  transform: perspective(1px) translateZ(0);

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

}



.hvr-bob:active,

.hvr-bob:focus,

.hvr-bob:hover {

  animation-name: hvr-bob-float, hvr-bob;

  animation-duration: 0.3s, 1.5s;

  animation-delay: 0s, 0.3s;

  animation-timing-function: ease-out, ease-in-out;

  animation-iteration-count: 1, infinite;

  animation-fill-mode: forwards;

  animation-direction: normal, alternate;

}



.address-slide {

  padding-left: 27px;

  background: url(../img/ic_address.png) no-repeat top left;

  font-size: 15px;

  font-family: "Quicksand-Regular";

  color: #16303D;

  margin-top: -10px;

}



.hvr-bob {

  display: inline-block;

  vertical-align: middle;

  transform: perspective(1px) translateZ(0);

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

}



.align-top a {

  display: inline-block;

  margin-right: 11px;

}



.slideshow button {

  background: #02a1c9 !important;

  width: 32px !important;

  height: 31px !important;

  border-radius: 100% !important;

}



.cats-slide {

    position: absolute;

    bottom: 42px;

    right: 40px;

    width: 182px;

}



.align-top a:hover img {

  transform: rotateY(180deg);

}



.align-top a img {

  transition: all 1s;

}



.slideshow .control-owl button.owl-next {

  right: -15px;

}



.slideshow .control-owl button.owl-prev {

  left: -15px;

}



.flex_relative {

  position: relative;

}

.flex_relative:after {

    position: absolute;

    background: url(../img/nam2.png);

    content: "";

    width: 380px;

    height: 380px;

    right: -10%;

    animation-name: blink;

    animation-duration: 1.5s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    z-index: -1;

    top: 5%;

}



.flex_relative:before {

  position: absolute;

  background: url(../img/xoay.png);

  content: "";

  left: -6%;

  top: 36%;

  width: 143px;

  height: 143px;

  animation: rotation 2s infinite linear;

}



.block-menu.sticky.animate__animated.animate__fadeInDown .top_mn {

  display: none;

}



.logo-box {

  transition: all 0.8s;

}



.left_mn {

  transition: all 0.8s;

}



.block-menu.sticky.animate__animated.animate__fadeInDown .logo-box {

  transform: scale(0.6);

  margin-top: -30px;

  margin-bottom: -30px;

}



.block-menu.sticky.animate__animated.animate__fadeInDown .box_time {

  display: none;

}



.block-menu.sticky.animate__animated.animate__fadeInDown .headerBottom {

  background: #e8fafe;

}



.block-menu.sticky.animate__animated.animate__fadeInDown .mega-menu>ul>li>a {

  display: block;

  padding: 26px 38px 31px;

}



.block-menu.sticky.animate__animated.animate__fadeInDown {

  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;

}



.rotate360 {

  animation: rotation 20s infinite linear;

}



@keyframes rotation {

  from {

    -webkit-transform: rotateY(0deg);

  }



  to {

    -webkit-transform: rotateY(359deg);

  }

}



/*slide*/

.control-owl {

  position: absolute;

  width: 100%;

  z-index: 2;

  left: 0px;

  top: calc(50% - 22.5px);

}



.control-owl button {

  opacity: 0.5;

  top: 0px;

  position: absolute;

  outline: none;

  border: 0px;

  padding: 0px;

  margin: 0px;

  display: block;

  cursor: pointer;

  color: #ffffff;

  width: 45px;

  height: 45px;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 25px;

  margin: 0px;

  background-color: #000000;

  border-radius: 3px;

  transition: 0.3s ease-out;

}



.control-owl button.owl-prev {

  left: 20px;

}



.control-owl button.owl-next {

  right: 20px;

}



.control-owl button:hover {

  opacity: 1;

}



.dots-slideshow {

  position: absolute;

  z-index: 9;

  left: 50%;

  transform: translateX(-50%);

  bottom: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.dots-slideshow .owl-dot {

  width: 10px;

  height: 10px;

  background: #f2f2f2;

  transition: 0.3s;

  border-radius: 50%;

  margin: 0 5px;

  cursor: pointer;

}



.dots-slideshow .owl-dot.active {

  background: #aaa;

}



.form-control,

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

.custom-select {

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

}



.text-sm {

  font-size: 0.875rem !important;

}

.eapps-social-share-buttons-item-zalo.eapps-social-share-buttons-item.on-show {

    display: none;

}

/*slide*/

/* Breadcrumb */

.breadCrumbs {

  background-color:#f2f2f2;

}



.breadCrumbs .wrapper {

  padding: 0.75rem 15px;

}



.breadCrumbs .wrapper .breadcrumb {

  padding: 0;

  margin-bottom: 0;

  background-color: transparent;

  border-radius: 0;

}



.breadCrumbs .wrapper .breadcrumb-item a {

  color: #212529;

}



.breadCrumbs .wrapper .breadcrumb-item.active a {

  color: #6c757d;

}



.criteria-main-box {

    background: url(../img/a.png) no-repeat;

    background-size: 100% 100%;

    height: 269px;

    padding: 35px 95px 30px;

}

.criteria-item__text h3 {

  font-size: 20px;

  color: #FFFFFF;

  font-family: "Quicksand-Bold";

  text-transform: capitalize;

  margin: 15px 0 0;

}



.criteria-item__text p {

  font-size: 15px;

  color: #FFFFFF;

  font-family: "Quicksand-Regular";

  line-height: 23px;

  margin-top: 5px;

}



.criteria-item:hover .criteria-item__image img {

  transform: translateY(-10px);

}



.criteria-item .criteria-item__image img {

  transition: all 0.9s;

}



.criteria-item {

  padding-top: 11px;

}



/* .criteria-item:hover .criteria-item__text h3 {

  color: #ffe600;

} */



.criteria-item .criteria-item__text h3 {

  transition: all 0.3s;

}

.header-container {

    position: relative;

    padding-bottom: 14px;

    margin-bottom: 40px !important;

}

.slideshow  .owl-stage-outer {

    border-radius: 40px;

    overflow: hidden;

}

.header-container:after {

    position: absolute;

    background: #3b98b0;

    width: 63px;

    height: 5px;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    content: '';

    border-radius: 50px;

}

.criteria-main {

  position: relative;

  padding: 60px 0;

}



.criteria-main-box {

  position: relative;

}





.why-item__text h3 {

  font-family: "Quicksand-Medium";

  color: #292d33;

  text-transform: capitalize;

  font-size: 16px;

  margin: 14px 0;

  line-height: 22px;

}



.why-item__text p {

  font-family: Quicksand-Regular;

  font-size: 15px;

  color: #9497a1;

  line-height: 20px;

  /* 133.333% */

  letter-spacing: 0.15px;

}



.why-item {

  flex: 0 0 50%;

  max-width: 50%;

  margin-bottom: 90px;

  position: relative;

  top: -65px;

}



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

  .why-item {

    padding: 0 10px !important;

  }

}







.why-item:nth-child(odd) .why-item-box .why-item__image {

  order: 2;

}



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

  .why-item:nth-child(odd) .why-item-box .why-item__image {

    order: 1;

  }

}



.why-item:nth-child(odd) .why-item-box .why-item__text {

  order: 1;

  padding-left: 0;

}







.why-item:nth-child(1),

.why-item:nth-child(5) {

  padding-right: 0;

  padding-left: 7%;

}



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



  .why-item:nth-child(1),

  .why-item:nth-child(5) {

    padding-right: 0;

  }

}



.why-item:nth-child(2),

.why-item:nth-child(6) {

  padding-left: 320px;

}



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



  .why-item:nth-child(2),

  .why-item:nth-child(6) {

    padding-left: 0;

  }

}



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

  padding-right: 290px;

}



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

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

    padding-right: 0;

  }

}



.why-item:nth-child(4) {

  padding-left: 444px;

}



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

  .why-item:nth-child(4) {

    padding-left: 0;

  }

}

.why-image {

    position: absolute;

    left: -14px;

    bottom: -14px;

    z-index: 9;

    pointer-events: none;

    right: 0;

    margin: auto;

    transform: scale(.9);

    text-align: center;

}



.why-main {

  margin-bottom: 40px;

}



section.owl_banner_link {

  position: relative;

}



.title_index img {

  margin-bottom: 3%;

  position: relative;

  display: inline-block;

}



.title_index {

  text-align: center;

}



.title_index span {

  position: relative;

}



.title_index span:after {

  position: absolute;

    background: url(../img/bcsao1.png);  width: 53px;

  height: 47px;

  bottom: -30px;

  left: -51px;

  content: "";

  animation-name: fa-beat;

  animation-delay: var(--fa-animation-delay, 0);

  animation-direction: var(--fa-animation-direction, normal);

  animation-duration: var(--fa-animation-duration, 1s);

  animation-iteration-count: var(--fa-animation-iteration-count, infinite);

  animation-timing-function: var(--fa-animation-timing, ease-in-out);

}



.title_index span:before {

    position: absolute;

    background: url(../img/bcsao2.png);

    width: 53px;

    height: 47px;

  top: -57px;

  right: -69px;

  content: "";

  animation-name: fa-beat;

  animation-delay: var(--fa-animation-delay, 0);

  animation-direction: var(--fa-animation-direction, normal);

  animation-duration: var(--fa-animation-duration, 1s);

  animation-iteration-count: var(--fa-animation-iteration-count, infinite);

  animation-timing-function: var(--fa-animation-timing, ease-in-out);

}



.why-item-box {

    text-align: center;

    width: 190px;

    height: 190px;

    background: #ffffff;

    border-radius: 100%;

    padding: 30px;

    animation: asdasd1 9s infinite;

    box-shadow: 0 0 50px #85dcee;

}

.why-main:after {

    position: absolute;

    content: "";

    top: -64%;

    right: 0;

    background: url(../img/xx.png);

    width: 785px;

    height: 785px;

    z-index: -1;

    animation: rotation 5s infinite linear;

}

.why-main {

  position: relative;

}



@keyframes asdasd1 {



  0%,

  90% {

    transform: translateY(0px);

  }



  45% {

    transform: translateY(25px);

  }

}



.why-item-box:hover h3 a {

  color: #ff6c00;

}



.why-item-box h3 a {

  transition: all 0.3s;

}



.why-item-box:hover {

  box-shadow: 0 0 50px #ff5e00;

}



.why-item-box {

  transition: all 0.4s;

}



.banner-link a {

  border-radius: 30px;

  border: 8px solid #02a1c9;

}



section.owl_banner_link:after {

    position: absolute;

    top: -42%;

    background: url(../img/top_banner.png) no-repeat;

    content: "";

    background-size: 100% 100%;

    width: 100%;

    height: 500px;

    pointer-events: none;

}

section.owl_banner_link {

  position: relative;

  padding: 25px 0px;

}



.why-main:before {

  position: absolute;

  background: url(../images/bui1.png);

  content: "";

  left: 12%;

  top: -34px;

  animation-name: blink;

  animation-duration: 1.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  width: 380px;

  height: 380px;

}



.row.r_fb {

  position: relative;

}



.row.r_fb:after {

  position: absolute;

  background: url(../img/title_feedback.png);

  content: "";

  width: 54px;

  pointer-events: none;

  height: 658px;

  left: 8%;

  right: 0;

  margin: auto;

  top: 0;

}



.items_newsllter {

  text-align: center;

  background: url(../img/bg_newsllter.png) no-repeat;

  background-size: 100% 100%;

  position: relative;

  padding: 193px 92px 44px 103px;

}



.title_newsllter p {

  color: #fff;

  font-size: 15px;

  font-family: "Quicksand-Bold";

  margin-bottom: 31px;

  margin-top: 5px;

}



section.feedback_block {

    position: relative;

    padding: 115px 0 17%;

    margin-bottom: 8%;

}



.items_newsllter:After {

  position: absolute;

  background: url(../img/meo_nhantin1.png);

  content: "";

  top: -42px;

  left: 0;

  right: 0;

  margin: auto;

  pointer-events: none;

  width: 222px;

  height: 250px;

}



.image-box {

  position: relative;

}



a.addcart.add-item:hover {

  background: #986400;

  cursor: pointer;

}



.product-item:hover a.addcart.add-item {

  opacity: 1;

}



a.addcart.add-item {

  width: 100%;

  background: #02a1c9;

  display: block;

  text-align: center;

  position: absolute;

  bottom: 0;

  transition: all .3s;

  opacity: 0;

  color: #fff;

  font-size: 14px;

  font-family: 'Quicksand-SemiBold';

  line-height: 31px;

  padding: 4px 0;

  transition: all .3s;

}



a.addcart.add-item img {

  position: relative;

  top: -1px;

}



section.feedback_block:before {

  position: absolute;

  content: '';

    background: url(../img/nam3.png);  width: 519px;

  height: 519px;

  left: 18%;

  animation-name: blink;

  animation-duration: 1.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  right: 0;

  margin: auto;

  top: 9%;

}



section.feedback_block:after {

    position: absolute;

    background: url(../img/line22.png);

    content: "";

    width: 100%;

    height: 205px;

    background-size: 100% 100%;

    bottom: 0;

    pointer-events: none;

    left: 0;

    right: 0;

}

.items_newsllter:before {

    position: absolute;

    background: url(../img/meo.png) no-repeat;

    background-size: 100% 100%;

    left: -165px;

    pointer-events: none;

    bottom: -27px;

    content: "";

    width: 300px;

    pointer-events: none;

    height: 191px;

    z-index: 99;
display: inline-block;
    transition: transform 0.3s ease;
    animation: soft-shake 3s infinite ease-in-out;
}



.row.r_fb {

  justify-content: space-between;

}



.newsletter-inputn input {

  border-radius: 20px;

  background: none;

}



.newsletter-input input {

  background: none;

  border-radius: 50px;

  border: 1px solid #fff;

  height: 50px;

  margin-bottom: 15px;

  font-family: "Quicksand-regular";

}



.newsletter-input input::-moz-placeholder {

  color: #fff;

}



.newsletter-input input::placeholder {

  color: #fff;

}



.newsletter-input textarea::-moz-placeholder {

  color: #fff;

}



.newsletter-input textarea::placeholder {

  color: #fff;

}



.newsletter-input textarea {

    background: none;

    border-radius: 20px;

    border: 1px solid #fff;

    height: 92px !important;

    margin-bottom: 15px;

    font-family: "Quicksand-regular";

    padding: 11px 20px;

    background: #6cb3c2;

    position: relative;

    z-index: 9;

}



button.readon-button:hover {

  background: #845802;

  color: #fff;

}



button.readon-button {

  width: 200px;

  background: #fff;

  height: 50px;

  border-radius: 50px;

  font-size: 16px;

  font-family: "Quicksand-Bold";

  text-transform: uppercase;

  transition: all 0.3s;

}



button.readon-button img {

  margin-right: 5px;

}



.product-main {

  padding: 80px 0 30px;

}



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

  .product-main {

    padding: 75px 0 0;

  }

}



.ul-tabs {

  list-style: none;

  padding: 0;

  margin: 0;

  text-align: center;

  margin-bottom: 40px;

}



.product-main-box {

  position: relative;

}



.product-main-box:after {

    position: absolute;

    background: url(../img/pppppppp.png) no-repeat;

    background-size: 100% 100%;

    content: "";

    width: 248px;

    height: 116px;

    animation-name: fa-bounce;

    animation-delay: var(--fa-animation-delay, 0);

    animation-direction: var(--fa-animation-direction, normal);

    animation-duration: var(--fa-animation-duration, 1s);

    animation-iteration-count: var(--fa-animation-iteration-count, infinite);

    animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));

    right: 0;

    top: 0;

}



.product-main-box:before {

    position: absolute;

    background: url(../img/nike.png);

    background-size: 100% 100%;

    content: "";

    width: 200px;

    height: 157px;

    left: 0;

    top: 35px !important;

    animation-name: fa-bounce;

    animation-delay: var(--fa-animation-delay, 0);

    animation-direction: var(--fa-animation-direction, normal);

    animation-duration: var(--fa-animation-duration, 1s);

    animation-iteration-count: var(--fa-animation-iteration-count, infinite);

    animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));

    top: 0;

}



.ul-tabs li {

  font-family: "Quicksand-Regular";

  font-size: 16px;

  line-height: 24px;

  color: #02a1c9;

  text-transform: capitalize;

  display: inline-block;

  padding: 10px 20px;

  margin: 0 6px 15px;

  border: 1px solid #02a1c9;

  background: #ffffff;

  cursor: pointer;

  transition: 0.3s;

  border-radius: 50px;

  overflow: hidden;

}



.ul-tabs li.active {

  background-color: #02a1c9;

  color: #fff;

  border: 1px solid #02a1c9;

}



.ul-tabs li:hover {

  background-color: #02a1c9;

  color: #fff;

  border: 1px solid #02a1c9;

}



.product-item__image {

  border-radius: 10px;

  border: 1px solid rgba(213, 52, 56, 0.1);

  background-color: #E3EAEE;

}



.product-item__text {

  margin-top: 14px;

}



.product-item__text h3 {

  font-family: Roboto-Medium;

  font-size: 16px;

  line-height: 24px;

  color: #495057;

  text-transform: capitalize;

  margin-bottom: 16px;

  height: 48px;

}



.product-item__text h3 a {

  color: #495057;

}



.product-item__text h3 a:hover {

  color: var(--hover-color);

}



.product-item__text .status-box .button {

  font-family: Roboto-Medium;

  font-size: 16px;

  line-height: 24px;

  padding: 10px 0;

  flex: 0 0 47%;

  max-width: 47%;

  border-radius: 5px;

  overflow: hidden;

  text-align: center;

}



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

  .product-item__text .status-box .button {

    font-size: 14px;

  }

}



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

  .product-item__text .status-box .button {

    padding: 5px 0;

  }

}



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

  .product-item__text .status-box .button {

    font-size: 12px;

  }

}



.product-item__text .status-box .button1 {

  display: inline-block;

  color: #fff;

  background-color: var(--main-color);

  border: 1px solid var(--main-color);

  transition: 0.3s;

}



.product-item__text .status-box .button1:hover {

  color: var(--main-color);

  background-color: #fff;

}



.product-item__text .status-box .button2 {

  display: inline-block;

  color: var(--hover-color);

  background-color: #fff;

  border: 1px solid rgba(213, 52, 56, 0.1);

  transition: 0.3s;

}



.product-item__text .status-box .button2:hover {

  color: #fff;

  background-color: var(--hover-color);

}



.col-20 {

  flex: 0 0 20%;

  max-width: 20%;

  padding: 0 10px;

}



.row.rowproduct {

  margin: 0 -10px;

}



.text-box p {

  font-size: 16px;

  color: #ffa900;

  text-transform: capitalize;

  margin: 10px 0;

}



.text-box h3 a {

  font-size: 16px;

  font-family: "Quicksand-Medium";

  text-transform: capitalize;

  line-height: 23px;

}



.text-box h3 {

  margin-bottom: 12px;

}



span.price-old {

  font-size: 16px;

  font-family: "Quicksand-Bold";

  color: #5e686c;

  text-decoration: line-through;

}



span.price-new {

  color: #02a1c9;

  font-size: 16px;

  font-family: "Quicksand-Bold";

}



span.price-per {

  position: absolute;

  top: 0;

  right: 0;

  background: #02a1c9;

  padding: 4px 10px;

  font-family: "Quicksand-bold";

  color: #ffffff;

  border-bottom-left-radius: 6px;

}



.product-item {

  margin-bottom: 50px;

}



.product-item:hover .text-box h3 a {

  color: #ffa803;

}



.product-item .text-box h3 a {

  transition: all 0.3s;

}



.infom_cus h3 {

  font-family: "Quicksand-bold";

  font-size: 18px;

  line-height: 27px;

  margin-bottom: 10px;

}



.desc_feedback {

  font-family: "Quicksand-Medium";

  color: #7c7c7c;

}



.infom_cus {

  margin-top: 10px;

}



.feedback-img a {

    border: 7px solid #fff;

    box-shadow: 0 0 6px #c7c7c7;

    position: relative;

    margin-top: 60px !important;

    margin: 10px;

}



.feedback-img {

  position: relative;

  padding-top: 1%;

}



.feedback-img:after {

  position: absolute;

  background: url(../img/ic_fb.png);

  width: 30px;

  height: 76px;

  top: 6px;

  left: 0;

  right: 0;

  margin: auto;

  content: "";

}



.content_feedbackmain {

  position: relative;

}



.content_feedbackmain:after {

  position: absolute;

  content: "";

  border-top: 5px dashed #feeac3;

  width: 100%;

  height: 10px;

  top: 32px;

}



section.feedback_block2 .title_index {

  text-align: center;

  margin-bottom: 25px;

}

.content_owl_blog:after {

    position: absolute;

    background: url(../img/ic_news.png);

    content: '';

    width: 516px;

    height: 162px;

    top: 0;

    right: 0;

}

.news-item__text h3 a {

  font-size: 18px;

  color: #16303D;

  font-family: "Quicksand-bold";

  text-transform: uppercase;

}



.news-item__text h3 {

  margin-bottom: 10px;

}



.desc_newsnb {

  font-family: "Quicksand-Regular";

  color: #16303D;

  font-size: 16px;

  line-height: 26px;

}



.news-item__text {

  text-align: center;

  position: relative;

  margin-top: 27px;

}



.news-item__image {

  border-radius: 30px;

  box-shadow: 0 3px 7px #9e9e9e;

  margin: 7px;

}



.news-item:hover .news-item__text a {

  color: #02a1c9;

}



.news-item .news-item__text a {

  transition: all 0.3s;

}



section.blog_main .title_index {

  text-align: left;

  margin-bottom: -11px;

}



.content_feedbackmain {

  position: relative;

  margin-bottom: 5%;

}



.content_owl_blog {

  position: relative;

}



section.feedback_block2:before {

    position: absolute;

    top: -59px;

    background: url(../img/xx.png) no-repeat;

    background-size: 100% 100%;

    content: "";

    width: 531px;

    height: 531px;

    animation: rotation 5s infinite linear;

    right: 0;

}



section.feedback_block2 {

  position: relative;

}



.feedback-img:hover .infom_cus {

  color: #02a1c9;

}



.feedback-img .infom_cus {

  transition: all 0.3s;

}



section.blog_main {

  position: relative;

  padding: 20px 0 80px;

}



section.blog_main:after {

    position: absolute;

    bottom: 0;

    background: url(../img/xx.png) no-repeat;

    background-size: 100% 100%;

    content: "";

    width: 531px;

    height: 531px;

    animation: rotation 5s infinite linear;

    left: 0;

}

.footerMap iframe {

  display: block;

  width: 100%;

  height: 450px;

}



.footerPowered {

  background-color: #02a1c9;

  padding: 22px 0;

  text-align: center;

}



footer#footer {

  position: relative;

}



footer#footer:after {

  position: absolute;

  bottom: 10%;

  left: 10%;

  background: url(../images/bottom_ft.png);

  content: '';

  width: 166px;

  animation: asdasd1 7s infinite;

  height: 166px;

}



.footerCopyright {

  color: #fff;

  font-family: Quicksand-Regular;

  font-size: 15px;

}



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

  .footerCopyright {

    text-align: center;

    flex: 0 0 100%;

    max-width: 100%;

    margin-bottom: 10px;

  }

}



.footerCopyright span {

  font-family: Quicksand-Bold;

  color: #fff;

}



.social-box2 a {

  display: inline-block;

  margin-left: 9px;

}



.social-box2 a:hover img {

  transform: rotate(359deg);

}



.social-box2 a img {

  transition: all 1s;

}



.footerCopyright a:hover {

  color: #ffe600;

}



.footerCopyright a {

  transition: all 0.3s;

}

.items_footer_center {

    border-left: 1px solid #2eb3d4;

    border-right: 1px solid #2eb3d4;

}



.footerArticle {

  background: #02a1c9;

  position: relative;

  padding: 60px 0 40px;

  margin-top: 6%;

}



.items_footer_center {

  text-align: center;

}



.footerArticle:before {

  position: absolute;

  background: url(../images/t_ft.png);

  content: "";

  animation: asdasd1 7s infinite;

  right: 12%;

  top: -25px;

  width: 166px;

  height: 166px;

}



.footerArticle:after {

    position: absolute;

    background: url(../img/ft.png) no-repeat;

    content: "";

    background-size: 100% 100%;

    width: 100%;

    height: 88px;

    top: -87px;

    left: 0;

    z-index: 99;

}



.items_footer_information h2 {

  color: #fff;

  font-size: 32px;

  font-family: "Quicksand-Bold";

  text-transform: uppercase;

  margin-bottom: 20px;

}



.footerMap iframe {

  display: block;

  width: 100%;

  height: 295px;

  border-radius: 52px;

}



.items_footer_information {

  text-align: right;

}



.desc_footer {

  color: #fff;

  font-family: "Quicksand-Regular";

  line-height: 28px;

  margin-bottom: 20px;

}



.footerStatic {

  color: #fff;

}



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

  .footerStatic {

    text-align: center;

    flex: 0 0 100%;

    max-width: 100%;

    margin-bottom: 10px;

  }

}



.footerStatic span {

  padding-right: 10px;

  margin-right: 10px;

}



.footerStatic span:last-child {

  padding-right: 0;

  margin-right: 0;

}



#show_popup {

  padding: 0 !important;

}



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

  #show_popup {

    transform: scale(0.8);

  }

}



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

  #show_popup {

    transform: scale(0.7);

  }

}



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

  #show_popup {

    transform: scale(0.6);

  }

}



@media screen and (min-width: 991px) {

  .d-lg-list {

    display: list-item !important;

  }

}



.fw-normal {

  font-weight: normal !important;

}



.text-main {

  color: var(--main-color);

}



.btn-main {

  color: #fff;

  background: var(--main-color);

  transition: 0.4s;

}



.btn-main:hover {

  background: #fff;

  color: var(--main-color);

  border: 1px solid var(--main-color);

}



.btn-outline-main {

  background: #fff;

  border: 1px solid var(--main-color);

  color: var(--main-color);

  transition: 0.4s;

}



.btn-outline-main:hover {

  background: var(--main-color);

  color: #fff;

}



.share-box {

  padding: 15px;

  background: #f2f2f2;

  border-radius: 10px;

}



.share-box p {

  margin-bottom: 3px;

}



.wow {

  visibility: hidden;

}



.article iframe,

.article object {

  max-width: 100% !important;

}



.article.content img {

  width: 100% !important;

  height: auto !important;

}



.article table {

  width: 100%;

}



.article *:not(iframe):not(object):not(img) {

  max-width: 100% !important;

  height: auto !important;

}



.flex-box {

  display: flex !important;

  flex-wrap: wrap;

}



.text-split1 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 1;

}



.text-split2 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 2;

}



.text-split {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 3;

}



.text-split4 {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 4;

}



/* Scale IMG */

.overflow-hidden {

  overflow: hidden;

}



.cursor-pointer {

  cursor: pointer;

}



.hover-scale img {

  transition: 0.7s !important;

}



.hover-scale:hover img {

  transform: scale(1.1);

}



.hover-rotateZ img {

  transition: 0.8s !important;

}



.hover-rotateZ:hover img {

  transform: rotateZ(30deg);

}



.hover-rotateY img {

  transition: 0.8s !important;

}



.hover-rotateY:hover img {

  transform: rotateY(180deg);

}



.bg {

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

}



.yt {

  position: relative;

  aspect-ratio: 139/106;

}



/* Transition All */

.transition {

  transition: 0.3s ease-out;

}



/* General */

/* Hidden Google Captcha */

.grecaptcha-badge {

  display: none !important;

  width: 0px !important;

  height: 0px !important;

  visibility: hidden !important;

  overflow: hidden;

}



/* Hidden Check Grammar Coccoc */

coccocgrammar {

  display: none;

}



/* Scroll Top */

.goTop {

  width: 41px;

  height: 41px;

  text-align: center;

  font-weight: bold;

  color: #444;

  text-decoration: none;

  position: fixed;

  bottom: 65px;

  right: 25px;

  display: none;

  z-index: 10;

  cursor: pointer;

}



.modal-quickiew {

  max-width: 1000px !important;

}



.fw-bold {

  font-weight: bold;

}



.ft-italic {

  font-style: italic;

}



.slick-data {

  display: none !important;

}



.slick-data.loaded {

  display: block !important;

}



.slick-data.slick-dotted {

  margin-bottom: 0;

}



/* News */

.col-news {

  padding: 0 10px;

  margin-bottom: 20px;

}



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

  .col-news {

    padding: 0 5px;

    margin-bottom: 10px;

  }

}



.row-news {

  margin: 20px -10px 0 -10px;

}



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

  .row-news {

    margin: 15px -5px 0 -5px;

  }

}



.news_box {

  position: relative;

}



.news_box:hover .news__name a {

  color: var(--hover-color);

}



.news__photo.overflow-hidden {

  border-radius: 6px;

}



.news__name {

  margin: 15px 0 7px 0;

  color: #000;

  font-family: "Mulish-Bold";

  font-size: 18px;

}



.news__name a {

  color: inherit;

  transition: all 0.3s;

}



.news__name.text-split {

  -webkit-line-clamp: 2;

}



.news__desc {

  font-family: "Mulish-Regular";

}



.news__desc.text-split {

  -webkit-line-clamp: 3;

}



.othernews.share {

  margin-top: 20px;

}



.othernews.share b {

  margin-bottom: 10px;

}



.list-news-other {

  padding-left: 17px;

  list-style: disc;

  width: 50%;

}



.list-news-other li {

  padding: 7px 0;

}



.list-news-other li:not(:last-child) {

  border-bottom: 1px solid #eee;

}



.list-news-other li a {

  text-transform: none;

  color: #333333;

}



.list-news-other li a:hover {

  color: #ec2d3f;

}



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

  .list-news-other {

    width: 100%;

  }

}



/* Product */

.row-product {

  margin: 25px -12px 0 -12px;

}



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

  .row-product {

    margin: 20px -5px 0 -5px;

  }

}



.col-product {

  padding: 0 12px;

  margin-bottom: 24px;

}



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

  .col-product {

    padding: 0 5px;

    margin-bottom: 10px;

  }

}



.product_box {

  position: relative;

}



.product_box:hover .product__name a {

  color: var(--hover-color);

}



.product__info {

  position: relative;

}



.product__name {

  color: #000;

  font-size: 20px;

  text-align: center;

}



.product__name a {

  color: inherit;

}



.product__name.text-split {

  -webkit-line-clamp: 2;

}



.product__price {

  display: flex;

  align-items: baseline;

  justify-content: center;

}



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

  .product__price {

    text-align: center;

    flex-wrap: wrap;

  }

}



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

  .product__price .price__pro_new {

    flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    max-width: 100%;

    margin-bottom: 5px;

  }

}



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

  .product__price .price__pro_old {

    flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    max-width: 100%;

  }

}



.price__pro_new a,

.price__pro_new strong {

  color: #cc0000;

  font: 20px Roboto-Bold;

}



.price__pro_old del {

  color: #aaa;

  font-size: 17px;

}



.product__price .price__pro_new+.price__pro_old {

  margin-left: 7px;

}



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

  .product__price .price__pro_new+.price__pro_old {

    margin-left: 0;

  }

}



.discount-pro-detail {

  background-color: #ec2d3f;

  border-radius: 20px;

  font-weight: bold;

  padding: 3px 9px;

  color: #fff;

  font-size: 11px;

}



.left-pro-detail {

  flex: 0 0 40%;

  -ms-flex: 0 0 40%;

  max-width: 40%;

  margin-bottom: 20px;

  padding-right: 10px;

  position: relative;

  text-align: center;

}



.left-pro-detail .MagicZoom {

  background-color: #ffffff;

  position: relative;

  z-index: 10;

}



.left-pro-detail.cate-pro-detail {

  flex: 0 0 50%;

  -ms-flex: 0 0 50%;

  max-width: 50%;

}



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

  .left-pro-detail {

    flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    max-width: 100%;

    margin-bottom: 20px;

    padding-right: 0;

  }



  .left-pro-detail.cate-pro-detail {

    flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    max-width: 100%;

  }

}



.right-pro-detail {

  flex: 0 0 60%;

  -ms-flex: 0 0 60%;

  max-width: 60%;

  margin-bottom: 20px;

  padding-left: 10px;

}



.right-pro-detail.cate-pro-detail {

  flex: 0 0 50%;

  -ms-flex: 0 0 50%;

  max-width: 50%;

}



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

  .right-pro-detail {

    flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    max-width: 100%;

    margin-bottom: 20px;

    padding-left: 0;

  }



  .right-pro-detail.cate-pro-detail {

    flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    max-width: 100%;

  }

}



.tabs-pro-detail {

  flex: 0 0 100%;

  -ms-flex: 0 0 100%;

  max-width: 100%;

}



/* Product Detail */

.grid-pro-detail {

  margin-bottom: 3rem;

}



.gallery-thumb-pro {

  position: relative;

  margin-top: 10px;

}



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

  .gallery-thumb-pro {

    margin-top: 5px;

  }

}



.control-pro-detail {

  top: calc(50% - 12.5px);

}



.control-pro-detail button {

  background-color: transparent;

  opacity: 1;

  width: 25px;

  height: 25px;

  background: rgba(0, 0, 0, 0.4);

  border-radius: 50%;

  color: #fff;

  font-size: 23px;

}



.control-pro-detail button.owl-prev {

  left: 10px;

}



.control-pro-detail button.owl-next {

  right: 10px;

}



.title-color,

.title-size {

  color: #4ea8cd;

  font-weight: normal;

}



.thumb-pro-detail {

  display: block !important;

  border-radius: 5px;

  cursor: pointer;

  background-color: #ffffff;

}



.thumb-pro-detail img {

  box-shadow: none !important;

  filter: brightness(100%) !important;

  border-bottom: 0px !important;

  padding-bottom: 0px !important;

}



.thumb-pro-detail.mz-thumb.mz-thumb-selected {

  border-color: #cecfd2;

}



.title-pro-detail {

  text-transform: capitalize;

  font-size: 27px;

  margin-bottom: 10px;

  font-family: "Quicksand-Bold";

}



.top-info-pro-detail {

  margin: 0 0 10px 0;

  padding: 0;

  list-style: none;

  display: flex;

  align-items: baseline;

}



.top-info-pro-detail li+li {

  border-left: 1px solid #eae4e8;

}



.top-info-pro-detail li:first-child {

  padding-right: 7px;

}



.top-info-pro-detail li:last-child {

  padding-left: 7px;

}



.top-info-pro-detail li span,

.top-info-pro-detail li a {

  font-weight: bold;

  color: #007bff;

  margin-left: 2px;

}



.comment-pro-detail {

  display: flex;

  align-items: center;

  justify-content: flex-start;

}



.social-plugin-pro-detail {

  margin-bottom: 1rem;

  margin-top: 0px !important;

}



.desc-pro-detail {

  margin-bottom: 1rem;

}



.attr-pro-detail {

  list-style: none;

  padding: 0;

  margin: 0;

}



.attr-pro-detail li {

  margin-bottom: 15px;

}



@media screen and (min-width: 991px) {

  .attr-pro-detail li:last-child {

    margin-bottom: 0;

  }

}



.attr-label-pro-detail {

  font-weight: bold;

  color: #000;

  display: block;

  margin-bottom: 6px;

}



.attr-content-pro-detail {

  margin-bottom: 0px;

}



.price-new-pro-detail {

  font-size: 25px;

  color: #02a1c9;

  font-family: "Quicksand-Bold";

}



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

  .price-new-pro-detail {

    font-size: 16px;

  }

}



.price-old-pro-detail {

  color: #6c757d;

  font-size: 16px;

  text-decoration: line-through;

  padding: 0 10px;

}



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

  .price-old-pro-detail {

    font-size: 13px;

    padding: 0 7px;

  }

}



.tabs-pro-detail {

  margin-top: 2rem;

}



.tabs-pro-detail .nav-tabs {

  justify-content: center;

}



.tabs-pro-detail .nav-tabs .nav-item .nav-link {

  margin-bottom: 0;

  border: 0;

  font-size: 15px;

  border-bottom: 2px solid transparent;

}



.tabs-pro-detail .nav-tabs .nav-item .nav-link.active {

  border-bottom-color: #555555;

  font-weight: bold;

}



.tabs-pro-detail .nav-tabs .nav-item .nav-link:hover {

  font-weight: bold;

  color: #333;

}



.tabs-pro-detail .nav-tabs .nav-item.show .nav-link {

  font-weight: bold;

  border-bottom-color: #555555;

}



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

  .tabs-pro-detail .nav-tabs .nav-link {

    font-size: 13px !important;

  }

}



/* Contact */

.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: 0px;

  left: 0px;

  width: 100% !important;

  height: 100% !important;

}



.section-main {

  margin-top: 15px;

  margin-bottom: 25px;

}



.title-main {

  margin-bottom: 1.5rem;

  text-align: center;

}



.title-main h2 {

  text-transform: uppercase;

  color: var(--main-color);

  font-size: 27px;

  font-family: "Quicksand-Bold";

}



.time-main {

  margin-bottom: 0.75rem;

  color: #999999;

}



.time-main i {

  vertical-align: top;

  margin: 3px 7px 0px 0px;

}



.time-main span {

  vertical-align: top;

  display: inline-block;

}



.header-container {

  text-align: center;

}



.header-container h2 {

  font-family: "Quicksand-Bold";

  font-size: 37px;

  color: var(--main-color);

  text-transform: uppercase;

}



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

  .header-container h2 {

    font-size: 25px;

  }

}



.header-container p {

  font: 15px Roboto-Italic;

}



/* Paging */

.pagination-cus .page-item {

  margin: 0 4px;

}



.pagination-cus .page-item:first-child .page-link {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}



.pagination-cus .page-item:last-child .page-link {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}



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

  background: var(--main-color);

  color: white;

  border-color: var(--main-color);

}



.pagination-cus .page-item:not(:first-child) .page-link {

  margin-left: 0;

}



.pagination-cus .page-link {

  color: var(--main-color);

  padding: 0;

  width: 35px;

  height: 69px;

  line-height: 67px;

  text-align: center;

  border: 0;

}



.pagination-cus .page-link:hover {

  z-index: 2;

  color: white;

  background-color: var(--main-color);

  border-color: var(--main-color);

}



/* Paging Ajax */

.pagination-ajax {

  text-align: center;

}



.pagination-ajax a {

  display: inline-block;

  vertical-align: top;

  margin: 0px 8px 3px 7px;

  width: 50px;

  height: 69px;

  line-height: 67px;

  color: #1a1a1a !important;

  font-size: 13px;

  cursor: pointer;

  text-decoration: none !important;

    background: url(../img/phantrang1.png) no-repeat;

}



.pagination-ajax a.current,

.pagination-ajax a:hover {

    color: #ffffff !important;

    background: url(../img/phantrang2.png) no-repeat;

}



.pagination-ajax a.first {

  text-indent: -9999px;

  position: relative;

  background-color: #ffffff !important;

}



.pagination-ajax a.first::before {

  content: "";

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 2;

  background-color: transparent;

  background-repeat: no-repeat;

  background-position: center;

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

}



.pagination-ajax a.last {

  text-indent: -9999px;

  position: relative;

  background-color: #ffffff !important;

}



.pagination-ajax a.last::before {

  content: "";

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 2;

  background-color: transparent;

  background-repeat: no-repeat;

  background-position: center;

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

}



.pagination-ajax a.prev {

  text-indent: -9999px;

  position: relative;

  background-color: #ffffff !important;

}



.pagination-ajax a.prev::before {

  content: "";

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 2;

  background-color: transparent;

  background-repeat: no-repeat;

  background-position: center;

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

}



.pagination-ajax a.next {

  text-indent: -9999px;

  position: relative;

  background-color: #ffffff !important;

}



.pagination-ajax a.next::before {

  content: "";

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 2;

  background-color: transparent;

  background-repeat: no-repeat;

  background-position: center;

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

}



.block-search {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 999;

  background: rgba(0, 0, 0, 0.8);

  display: none;

  transition: 0.8s;

}



.search-wrap {

  position: relative;

  color: #fff;

  height: 100vh;

}



.form-search-d {

  position: relative;

  width: 0;

  transition: 0.8s;

}



.form-search-d.active {

  width: 70%;

}



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

  .form-search-d.active {

    width: calc(100% - 50px);

  }

}



.form-search-d input {

  width: 100%;

  height: 45px;

  outline: none;

  color: #ffffff;

  border: none;

  border-bottom: 1px solid #fff;

  background: transparent;

  padding: 0 30px 0 10px;

  font-size: 12px;

}



.form-search-d input::-moz-placeholder {

  color: #fff;

  font-size: 12px;

}



.form-search-d input::placeholder {

  color: #fff;

  font-size: 12px;

}



.form-search-d button {

  position: absolute;

  top: 0;

  right: 0;

  outline: none;

  border: none;

  cursor: pointer;

  background: transparent;

  font-size: 14px;

  height: 100%;

  color: #fff;

}



.close-form-search {

  position: absolute;

  top: 30px;

  right: 0;

  font-size: 25px;

  transition: 0.3s;

}



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

  .close-form-search {

    font-size: 20px;

  }

}



.close-form-search:hover {

  color: #f00;

}



/* Toc */

.box-readmore {

  padding: 8px 15px;

  border: 1px solid #dedede;

  margin-bottom: 2rem;

  border-radius: 5px;

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

}



.box-readmore ul {

  list-style-type: none;

  counter-reset: item;

  margin-bottom: 0px;

  padding-left: 0px !important;

  margin-top: 8px;

}



.box-readmore ul li {

  display: table;

  counter-increment: item;

  margin-bottom: 5px;

}



.box-readmore ul li a {

  color: #333333;

  cursor: pointer;

  font-weight: 600;

}



.box-readmore ul li a:hover {

  color: #767676;

}



.box-readmore ul li::before {

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

  display: table-cell;

  padding-right: 5px;

}



.box-readmore ul li ul>li {

  margin: 0;

  margin-bottom: 8px;

}



.box-readmore ul li ul>li::before {

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

}



/*tienich-phone*/

@keyframes hueRotate {

  from {

    filter: hue-rotate(0deg);

  }



  to {

    filter: hue-rotate(360deg);

  }

}



.social_fixed {

  position: fixed;

  right: 25px;

  bottom: 150px;

  z-index: 999;

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 25px;

}



.support-online a {

  position: relative;

  text-align: left;

  width: 44px;

  height: 44px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 100rem;

  background: #02a1c9;

  transition: 0.3s;

}



.support-online a:hover {

  animation: unset;

  animation-name: fa-bounce;

  animation-delay: var(--fa-animation-delay, 0);

  animation-direction: var(--fa-animation-direction, normal);

  animation-duration: var(--fa-animation-duration, 1s);

  animation-iteration-count: var(--fa-animation-iteration-count, infinite);

  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));

}



.support-online i,

.support-online img {

  max-width: 40px;

  max-height: 40px;

  color: #fff;

  font-size: 20px;

  text-align: center;

  line-height: 1.9;

  position: relative;

  z-index: 999;

}



.support-online .btn-support {

  cursor: pointer;

}



.kenit-alo-circle-fill {

  width: 60px;

  height: 60px;

  top: -7.5px;

  right: -7.5px;

  position: absolute;

  transition: all 0.2s ease-in-out;

  border-radius: 100%;

  border: 2px solid transparent;

  transition: all 0.5s;

  background-color: rgba(88, 178, 199, 0.5);

  opacity: 0.75;

}



.kenit-alo-circle {

  width: 55px;

  height: 55px;

  top: -5px;

  left: -5px;

  position: absolute;

  background-color: transparent;

  border-radius: 100%;

  border: 1px solid rgba(88, 178, 199, 0.4);

  opacity: 0.1;

  border-color: var(--main-color);

  opacity: 0.5;

}



.social_fixed-phone {

  width: 100%;

  position: fixed;

  left: 0;

  bottom: 0;

  height: 55px;

  line-height: 45px;

  z-index: 100;

  display: none;

  box-shadow: 0 3px 6px #333333;

  border-radius: 10px 10px 0 0;

  background: #fff;

}



.social_fixed-phone ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  height: 100%;

}



.social_fixed-phone ul li {

  flex: 0 0 25%;

  -ms-flex: 0 0 25%;

  max-width: 25%;

  width: 100%;

}



.social_fixed-phone ul li a {

  text-decoration: none;

  font-size: 9px;

  font-family: Arial;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  letter-spacing: 1px;

  line-height: 2;

  height: 100%;

  padding-top: 5px;

  color: var(--main-color);

}



.social_fixed-phone svg {

  display: block;

  margin: 0 auto;

  height: 25px;

  fill: var(--main-color);

  max-width: 100%;

}



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

  .social_fixed-phone {

    display: block;

  }

}



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

  #footer {

    padding-bottom: 55px;

  }

}



@keyframes slide-top {

  0% {

    transform: translateY(0);

  }



  100% {

    transform: translateY(-10px);

  }

}







/* Scroll Top */

.goTop {

  width: 45px;

  height: 45px;

  text-align: center;

  font-weight: bold;

  color: #444;

  text-decoration: none;

  bottom: 75px;

  right: 25px;

  display: none;

  z-index: 10;

  cursor: pointer;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #02a1c9;

  border-radius: 100rem;

  transition: 1s;

  margin: 0 auto;

  visibility: visible;

  transition: all 0.5s;

  animation: slide-top 0.8s linear infinite alternate-reverse;

}



.goTop i {

  color: #fff;

  font-size: 22px;

}



.goTop.hide {

  opacity: 0;

  visibility: hidden;

}



/* #mmenu */

.mobile_menu_section {

  flex-direction: column;

  padding: 10px 15px;

}



.mobile_menu_section .mobile_menu_section-title {

  color: #02a1c9;

  margin-bottom: 5px;

}



.mobile_menu_section img,

.mobile_menu_section svg {

  max-width: 14px;

  max-height: 14px;

  width: 14px;

  height: 14px;

  margin-right: 5px;

}

.block-menu.sticky.animate__animated.animate__fadeInDown button.open-form-search img {

    position: relative;

    top: 0;

}

.mobile_menu_section .mobile_menu_help {

  display: flex;

  align-items: center;

}

.logo-box IMG {

    border-radius: 100%;

}

.logo-box {

    transition: all 0.8s;

    transform: scale(.9);

}

/* Animation */

.border-animation {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

      border: 1px solid rgb(0 161 255 / 50%);

  animation: squares 3s linear 0s infinite;

  opacity: 0;

  border-radius: 50%;

}



.border-animation.border-2 {

  animation-delay: 1s;

}



.border-animation.border-3 {

  animation-delay: 2s;

}



@keyframes squares {

  0% {

    transform: scale(1);

    opacity: 0;

  }



  20% {

    transform: scale(1.2);

    opacity: 1;

  }



  100% {

    transform: scale(1.6);

    opacity: 0;

  }

}



.wrap-phone-res {

  position: fixed;

  left: 10px;

  bottom: 65px;

  display: none;

}



.wrap-phone-res ul {

  margin: 0;

  padding: 0;

  list-style: none;

}



.wrap-phone-res ul li {

  margin: 8px 0;

  animation: customfadeInRight;

  animation-duration: 0.5s;

  animation-fill-mode: forwards;

  opacity: 0;

  transition: all 0.3s ease-in-out;

}



.wrap-phone-res ul li:nth-child(1) {

  animation-delay: 0.1s;

}



.wrap-phone-res ul li:nth-child(2) {

  animation-delay: 0.2s;

}



.wrap-phone-res ul li a {

  display: block;

  background: #fff;

  font-size: 14px;

  font-weight: bold;

  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

  padding: 10px 15px;

  border-radius: 20px;

  color: var(--main-color);

}



.wrap-phone-res ul li a i {

  animation: tada 1.2s infinite;

}



.wrap-phone-res.active {

  display: block;

}



@keyframes tada {

  0% {

    transform: scaleX(1);

  }



  10%,

  20% {

    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);

  }



  30%,

  50%,

  70%,

  90% {

    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);

  }



  40%,

  60%,

  80% {

    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);

  }



  to {

    transform: scaleX(1);

  }

}



#player {

  display: block;

  aspect-ratio: 435/330;

  width: 100%;

  margin-bottom: 10px;

}



.item-video-addon {

  padding: 0 5px;

  transition: 0.6s;

}



.slick-video-addon {

  margin: 0 -5px;

}



.animated {

  animation-duration: 1s;

  animation-fill-mode: both;

  opacity: 1;

}



.animated.infinite {

  animation-iteration-count: infinite;

}



.zoomIn {

  animation-name: customzoomIn;

}



@keyframes customzoomIn {

  0% {

    opacity: 0;

    transform: scale3d(0.3, 0.3, 0.3);

  }



  50% {

    opacity: 1;

  }

}



.swing-vertical {

  animation: top-image-bounce 2s infinite ease-in-out;

}



@keyframes top-image-bounce {

  0% {

    transform: translateY(-8px);

  }



  50% {

    transform: translateY(12px);

  }



  100% {

    transform: translateY(-8px);

  }

}



.vibration-icon {

  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

}



@keyframes phonering-alo-circle-img-anim {

  0% {

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

  }



  10% {

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

  }



  20% {

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

  }



  30% {

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

  }



  40% {

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

  }



  50% {

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

  }



  100% {

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

  }

}



.blink_me {

  -webkit-animation-name: blinker;

  -webkit-animation-duration: 1s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blinker;

  -moz-animation-duration: 1s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  animation-name: blinker;

  animation-duration: 1s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



@keyframes blinker {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@keyframes customfadeIn {

  0% {

    opacity: 0;

  }



  to {

    opacity: 1;

  }

}



@keyframes customfadeOut {

  0% {

    opacity: 1;

  }



  to {

    opacity: 0;

  }

}



@keyframes customfadeInUp {

  0% {

    opacity: 0;

    transform: translate3d(0, 100px, 0);

  }



  to {

    opacity: 1;

    transform: translateZ(0);

  }

}



@keyframes customfadeInDown {

  0% {

    opacity: 0;

    transform: translate3d(0, -100px, 0);

  }



  to {

    opacity: 1;

    transform: translateZ(0);

  }

}



@keyframes customfadeInLeft {

  0% {

    opacity: 0;

    transform: translate3d(100px, 0, 0);

  }



  to {

    opacity: 1;

    transform: translateZ(0);

  }

}



@keyframes customfadeInRight {

  0% {

    opacity: 0;

    transform: translate3d(-100px, 0, 0);

  }



  to {

    opacity: 1;

    transform: translateZ(0);

  }

}



.text-nhapnhay {

  animation: my 700ms infinite;

}



@keyframes my {

  0% {

    color: #ffc853;

  }



  50% {

    color: #f00;

  }



  100% {

    color: #ffc853;

  }

}



.rotate360 {

  animation: rotation 2s infinite linear;

}



@keyframes rotation {

  from {

    -webkit-transform: rotate(0deg);

  }



  to {

    -webkit-transform: rotate(359deg);

  }

}



/* Blink */

.blink {

  animation-name: blink;

  animation-duration: 1s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



@keyframes blink {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



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

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

  .criteria-main-box:after {

    display: none;

  }



  .why-main:after {

    display: none;

  }



  .flex_relative:after {

    display: none;

  }



  .criteria-main-box {

    background: #02a1c9;

    background-size: 100% 100%;

    height: auto;

    border-radius: 20px;

    padding: 15px 15px 16px;

  }



  .criteria-item__text h3 {

    font-size: 17px;

    margin: 14px 0 0;

  }



  .why-item {

    top: auto;

  }



  .criteria-item__text p {

    font-size: 13px;

  }



  .title_index img {

    width: 67%;

  }



  .criteria-main {

    position: relative;

    padding: 36px 0 20px;

  }



  .why-item {

    margin-bottom: 40px;

  }



  .why-item-box {

    animation: unset;

  }



  .why-main {

    margin-bottom: 0;

  }



  section.feedback_block {

    position: relative;

    padding: 69px 0 0;

  }



  section.owl_banner_link:after {

    display: none;

  }



  .items_newsllter {

    margin-bottom: 10%;

  }



  section.feedback_block:after {

    display: none;

  }



  .col-20 {

    flex: 0 0 50%;

    max-width: 50%;

    padding: 0px 8px;

  }



  .product-main-box:after {

    display: none;

  }



  span.price-new {

    font-size: 14px;

  }



  .product-item {

    margin-bottom: 28px;

  }



  .why-main {

    margin-bottom: 0;

    overflow: hidden;

    padding-top: 10%;

  }



  .newsletter-input input {

    height: 40px;

  }



  .newsletter-input textarea {

    height: 64px !important;

  }



  .title_newsllter p {

    font-size: 10px;

    margin-bottom: 16px;

    margin-top: 4px;

  }



  .why-main .title_index {

    margin-bottom: 14%;

  }



  section.blog_main:after {

    display: none;

  }



  section.blog_main {

    position: relative;

    padding: 20px 0 75px;

  }



  .items_footer_center {

    border-left: unset;

    border-right: unset;

  }



  .items_footer_center {

    position: relative;

    padding: 50px 0;

  }



  .items_footer_information {

    text-align: center;

  }



  .footerArticle {

    padding: 50px 0 10px;

    margin-top: 1%;

  }



  section.blog_main .title_index {

    text-align: center;

    margin-bottom: 29px;

  }



  .footerArticle:after {

    content: "";

    background-size: cover;

    width: 100%;

    height: 30px;

    top: -29px;

    left: 0;

    z-index: 99;

  }



  .content_feedbackmain {

    position: relative;

    margin-bottom: 13%;

  }



  .blog_main .title_index span img {

    width: 45%;

  }



  .infom_cus h3 {

    font-size: 16px;

    line-height: 24px;

    margin-bottom: 7px;

  }



  button.readon-button {

    height: 47px;

    font-size: 15px;

  }



  section.feedback_block2:before {

    display: none;

  }



  span.price-old {

    font-size: 14px;

  }



  .text-box p {

    font-size: 14px;

    margin: 8px 0 3px;

  }



  .row.rowproduct {

    margin: 0 -8px;

  }



  .product-main-box:before {

    display: none;

  }



  .items_newsllter {

    background-size: 100% 100%;

    position: relative;

    padding: 212px 42px 44px 42px;

  }



  .items_newsllter:After {

    top: -17px;

  }



  .items_newsllter:before {

    display: none;

  }



  .row.r_fb:after {

    display: none;

  }



  section.section-slider.position-relative {

    padding-top: 4%;

  }



  .left-slide {

    width: 100%;

    position: relative;

  }



  .right-slide {

    display: none;

  }



  .flex_relative:before {

    display: none;

  }

}



#loader-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 999999;

  pointer-events: none;

}



#loader-wrapper #wrap {

  background: #fff;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  display: block;

  text-align: center;

  width: 100%;

  height: 100%;

  z-index: 999999;

}



#loader-wrapper.show1 #wrap {

  background: transparent

}



#loader-wrapper:after {

  -webkit-mask: url(../images/mask-01.png);

  mask: url(../images/mask-01.png);

  -webkit-mask-size: 2300% 100%;

  mask-size: 2300% 100%;

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

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

  z-index: 99999;

}



#loader-wrapper.show1::after {

  -webkit-animation: MaskPlay 1s steps(22) forwards;

  animation: MaskPlay 1s steps(22) forwards;

}



#loader-wrapper.show1 #wrap {

  opacity: 0;

}



@-webkit-keyframes MaskPlay {

  from {

    -webkit-mask-position: 0 0;

    mask-position: 0 0

  }



  to {

    -webkit-mask-position: 100% 0;

    mask-position: 100% 0

  }

}



@keyframes MaskPlay {

  from {

    -webkit-mask-position: 0 0;

    mask-position: 0 0

  }



  to {

    -webkit-mask-position: 100% 0;

    mask-position: 100% 0

  }

}



/* Cart Fix */



.popup-cart {

  .total-procart {

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

    padding: 15px 0;



    p:last-child {

      font-size: 19px;

    }

  }

}



.cart-fixed {

  i {

    font-size: 20px;

    position: relative;

    z-index: 9;

  }



  .count-cart {

    position: absolute;

    top: 0px;

    right: -5px;

    color: #ffffff;

    width: 20px;

    height: 20px;

    background: #ec2d3f;

    text-align: center;

    line-height: 20px;

    font-size: 11px;

    border-radius: 100%;

    z-index: 10;

  }

}



#popup-cart {

  .card-cover {

    position: fixed;

    top: 0;

    bottom: 0;

    z-index: 1010;

    background: transparent;

    right: 0;

  }



  .cart-background {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 100%;

    z-index: -1;

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

    opacity: 0;

    visibility: hidden;

    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);

  }



  .price-new-cart {

    color: #000;

  }



  .cart-dialog {

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    transform: translateX(120%);

    transition: transform 0.35s ease, right 0.25s ease, visibility 0s;

    z-index: 1000;

    width: 480px;

    background: #fff;

    transition: transform 0.5s;

    box-shadow: 0 2px 12px rgba($color: #000000, $alpha: 0.12);



  }



  .wrap-cart {

    box-shadow: none;

    border-left: 0;

    border-right: 0;

    border-color: #e7e7e7;

    height: 100%;

    position: absolute;

    overflow-y: scroll;

    left: 0;

    top: 0;

    width: 100%;

    overscroll-behavior: none;

    padding: 5px 15px;



    &::-webkit-scrollbar {

      width: 5px;

      height: 10px;

      border-radius: 3px;

    }



    &::-webkit-scrollbar-button {

      width: 0;

      height: 0;

    }



    &::-webkit-scrollbar-track {

      background-color: #d4d4d4;

    }



    &::-webkit-scrollbar-track-piece {

      background-color: #e7e7e7;

    }



    &::-webkit-scrollbar-thumb {

      height: 60px;

      background-color: #d4d4d4;

    }



    &::-webkit-scrollbar-corner {

      background-color: #e7e7e7;

    }



    &::-webkit-resizer {

      background-color: #e7e7e7;

    }



    @include Responsive($lg) {

      padding: 5px 10px;

    }

  }



  .info-procart {

    padding-right: 0;

  }



  .link-to-cart {

    display: block;

    background: var(--main-color);

    color: #fff;

    border-radius: 5px;

    margin-bottom: 10px;

    padding: 10px 0;

    border: 1px solid var(--main-color);

    transition: .4s;



    &:hover {

      background: #fff;

      color: var(--main-color);

    }



    @include Responsive($lg) {

      padding: 6px 0;

    }

  }



  .buymore-cart {

    text-decoration: underline;

  }



  .procart {

    padding: 15px 0;



    @include Responsive($lg) {

      padding: 10px 0;

    }

  }



  .quantity-counter-procart {

    border-radius: 0;

    border-color: #f9f9f9;

    margin-left: 0;

  }



  .cart-header {

    padding: 15px;



    @include Responsive($lg) {

      padding: 10px;

    }

  }



  .close-cart {

    width: 25px;

    height: 25px;

    background: transparent;

    outline: none;

    border: none;

    font-size: 25px;

    color: #333;

  }



  .cart-title {

    font-size: 16px;

    color: var(--main-color);

    font-weight: bold;

  }



  .cart-footer {

    padding: 15px;



    .total-procart {

      padding: 6px 0;



      p {

        &:first-child {

          font-weight: normal;

        }



        &:last-child {

          font-size: 16px;

        }

      }

    }



    @include Responsive($lg) {

      padding: 10px;

    }

  }



  .cart-body {

    flex-grow: 1;

    position: relative;

  }



  .del-procart {

    color: $red;

    font-size: 15px;

    display: block;

    cursor: pointer;

    height: 15px;

    width: 15px;

    position: absolute;

    top: calc(50% - 7.5px);

    right: 0;

  }



  &.opened {

    .cart-background {

      opacity: 1;

      visibility: visible;

    }



    .card-cover {

      left: 0 !important;

      -webkit-transition-delay: 0s;

      transition-delay: 0s;

    }



    .cart-dialog {

      width: 480px;

      transform: translateX(0);

      -webkit-transition-delay: 0.1s;

      transition-delay: 0.1s;

      -webkit-transition-duration: 0.3s;

      transition-duration: 0.3s;

      transition: transform 0.35s ease, right 0.25s ease, visibility 0s;

      right: 0;



      @include Responsive($lg) {

        width: 85%;

        max-width: 450px;

      }

    }

  }

}



.no-cart {

  padding: 15px 10px;

  border-top: 1px solid #f9f9f9;



  p {

    margin: 10px 0;

  }



  a {

    display: inline-block;

    color: #1a73e8;

    text-decoration: underline;

  }



  .form-search {

    width: 50%;

    margin: 30px auto 0 auto;

    position: relative;

  }



  input {

    width: 100%;

    height: 40px;

    outline: none;

    border: 1px solid #ccc;

    padding: 0 40px 0 20px;

  }



  button {

    position: absolute;

    top: 0;

    right: 0;

    height: 100%;

    width: 40px;

    outline: none;

    border: 1px solid #ccc;

    cursor: pointer;

  }



  @include Responsive($lg) {

    .form-search {

      width: 100%;

    }

  }

}



.buymore-cart {

  color: var(--main-color);

  cursor: pointer;

  margin: 0px;



  i {

    margin-right: 2px;

    margin-top: 5px;

    vertical-align: top;

    font-size: 12px;

  }

}



.wrap-cart {

  padding: 20px 15px;

  background: #ffffff;

  border: 1px solid #d8d8d8;

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

}



.top-cart {

  @include Responsive($lg) {

    margin-top: 2rem;

  }

}



.procart {

  padding: 15px 10px;



  &+.procart {

    border-top: 1px solid #f1f1f1;

  }



  @include Responsive($lg) {

    padding: 8px 0;



    &+.procart {

      border-top: 1px solid #f1f1f1;

    }

  }

}



.top-cart .procart {

  padding: 15px 0;

}



.number-pro-cart {

  font-size: 13px;

}



.cart-sticky {

  position: sticky;

  top: 100px;

  background: #ffff;

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

  padding: 18px;

  border-radius: 5px;



}



.pic-procart {

  position: relative;

  @include Column(85px);



  .del-procart {

    color: #999;

    font-size: 15px;

    display: block;

    cursor: pointer;

    height: 15px;

    width: 15px;

    position: absolute;

    top: -7.5px;

    left: -7.5px;



    i {

      display: block;

    }



    &:hover {

      color: red;

    }

  }



  img {

    display: block;

    border: 1px solid #ededed;

  }



  @include Responsive($lg) {

    @include Column(60px);



    .del-procart {

      top: 0;

      left: 0;

      position: static;

      margin: 5px auto 0 auto;

    }

  }

}



.price-info-cart {

  strong {

    margin-right: 10px;

  }



  del {

    font-size: 12px;

    color: #8f9bb3;

  }

}



.name-procart {

  a {

    font-size: 14px;

    color: #000;

    display: block;



    &:hover {

      color: $red;

    }

  }

}



#cupponModal {



  .modal-header,

  .modal-body {

    padding: 10px;

  }



  button.close {

    padding: 0;

    margin: 0;

  }

}



.properties-procart {

  display: block;

  font-size: 13px;



  span {

    margin: 0 2px;

  }



  p {

    display: inline-block;

    margin-bottom: 0px;



    strong {

      font-weight: bold;

    }

  }

}



.quantity-counter-procart {

  border: 1px solid #f9f9f9;

  width: 90px;

  margin-top: 5px;

  height: 25px;

  line-height: normal;

  text-align: center;

  display: flex;

  align-items: stretch;

  margin-left: calc(100% - 90px);

}



.counter-procart {

  background-color: #f9f9f9;

  border: 0px;

  width: 30%;

  color: #333;

  outline: none;

  cursor: pointer;

  font-size: 10px;

  font-weight: bold;



  &:hover,

  &:focus {

    color: $red;

  }



  &:disabled,

  &:disabled:hover {

    color: #ccc;

    cursor: not-allowed;

  }

}



.counter-procart-minus {

  line-height: 25px;

}



.counter-procart-plus {

  line-height: 25px;

}



.quantity-counter-procart .quantity-procart {

  width: 40%;

  box-sizing: border-box;

  border: 0px;

  border-right: 1px solid #f9f9f9;

  border-left: 1px solid #f9f9f9;

  outline: none;

  box-shadow: none;

  padding: 0px;

  color: #333;

  text-align: center;

}



.price-procart {

  @include Column(95px);

  text-align: right;

}



.info-procart {

  padding: 0 15px;

  flex-grow: 1;



  @include Responsive($md) {

    padding: 0 10px;

  }

}



.price-new-cart {

  color: $red;

  margin-bottom: 0px;

  font-weight: bold;

}



.price-old-cart {

  color: #999;

  text-decoration: line-through;

}



.total-procart {

  padding: 5px 0;

  display: flex;

  align-items: baseline;

  justify-content: space-between;



  p {

    font-weight: bold;



    &:last-child {

      color: $red;

      font-size: 18px;

    }

  }



  @include Responsive($lg) {

    p {

      &:last-child {

        font-size: 16px;

      }

    }

  }

}



hr.hr-md {

  margin: 0.5rem 0;

}



.link-to-payment {

  display: block;

  background: var(--main-color);

  color: #fff;

  text-decoration: none;

  text-transform: uppercase;

  padding: 10px 5px;

  text-align: center;

  font-weight: bold;

  border-radius: 0;

  transition: 0.4s;

  border-radius: 5px;

  border: 1px solid var(--main-color);

  margin-top: 15px;



  &:hover {

    background: #fff;

    color: var(--main-color);

  }



  @include Responsive($lg) {

    padding: 6px 0;

  }

}



.cover-list-pro {

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

  border-radius: 5px;



  @include Responsive($lg) {

    border-radius: 0;

    box-shadow: none;

  }

}



.section-cart {

  background: #fff;

  border-radius: 5px;



  &.bot {

    padding: 15px;

  }



  &.bot {

    border-radius: 0 0 5px 5px;

  }





  h4 {

    font-size: 16px;

    font-weight: bold;

    padding: 15px;

    border-bottom: 1px solid #eae4e8;

    color: var(--main-color);

  }



  &>p {

    font-size: 14px;

    margin-bottom: 15px;

  }



  .counter-cart {

    font-weight: bold;

  }



  .list-procart {

    padding: 8px;

    border: 2px solid #eae4e8;

    overflow: hidden;

    border-radius: 8px;

  }



  @include Responsive($lg) {



    &.bot,

    &.top {

      padding: 0;

    }



    h4 {

      font-size: 15px;

      padding: 0 0 15px 0;

      margin-bottom: 15px;

    }



    &>p {

      font-size: 13px;

      margin-bottom: 5px;

    }



    .list-procart {

      padding: 0;

      border: 0;

      border-radius: 0;

    }

  }

}



.title-cart {

  font-size: 16px;

  color: var(--main-color);

  font-weight: bold;

  margin-bottom: 25px;

  position: relative;

  margin-bottom: 15px;



  a {

    font-size: 14px;

    color: #000;

    font-weight: normal;

  }



  @include Responsive($lg) {

    font-size: 15px;

  }

}



.procart.procart-label {

  background: var(--main-color);

  font-weight: bold;

  color: #fff;

  padding: 10px;

}



.input-cart {

  margin-bottom: 0.5rem;

  position: relative;



  textarea {

    resize: none;

    height: 100px;

  }



  select {

    cursor: pointer;

  }



  @include Responsive($lg) {



    input,

    select,

    textarea {

      font-size: inherit !important;

    }

  }

}



.payments-cart {

  text-align: left;

  margin-bottom: 5px;

  min-height: auto;



  &:last-child {

    margin-bottom: 0px;

  }



  input {

    top: calc(50% - 1.25rem / 2);

  }

}



.payments-label {

  cursor: pointer;

  background: #eee;

  display: block;

  padding: 10px 15px;

  border-radius: 3px;

  margin-bottom: 0px;

  color: #313131 !important;



  &::before,

  &::after {

    top: calc(50% - 1rem / 2);

  }



  &.active {

    background: $red;

        color: #ba0000 !important;

  }

}



.payments-info {

  opacity: 0;

  visibility: hidden;

  height: 0px;

  overflow: hidden;

  background: #f5efef;

  border-radius: 5px;



  p {

    margin-bottom: 1em;

  }



  &.active {

    padding: 10px 15px;

    margin-top: 5px;

    opacity: 1;

    visibility: visible;

    height: auto;

  }

}



.btn-cart {

  background: var(--main-color);

  color: #fff;

  font-size: inherit;

  border: 1px solid var(--main-color);

  text-transform: uppercase;

  font-weight: bold;

  height: 40px;



  &:hover {

    color: var(--main-color);

    background: #fff;

  }



  @include Responsive($lg) {

    height: 35px;

  }

}



.empty-cart {

  padding: 25px 30px;

  display: block;

  text-align: center;

  color: #23527c !important;

  width: 100%;



  i {

    color: red;

    font-size: 70px;

  }



  p {

    margin: 15px 0px;

    color: #333;

    font-size: 18px;

  }



  span {

    display: inline-block;

    border: 1px solid #2e9ef2;

    border-radius: 3px;

    padding: 10px;

    font-size: 16px;

    text-transform: uppercase;

    width: 100%;

    max-width: 325px;

  }

}



.color-pro-detail {

  cursor: pointer;

  display: inline-block;

  vertical-align: top;

  position: relative;

  width: 30px;

  height: 30px;

  margin: 0 4px;

  border: 1px solid #eee;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  border-radius: 50%;



  &::after {

    content: "";

    position: absolute;

    top: -4px;

    bottom: -4px;

    left: -4px;

    right: -4px;

    border-radius: 50%;

  }



  &.active {

    &::after {

      box-shadow: 0 0 4px rgba($color: #000000, $alpha: 0.5);

    }

  }



  &:hover {

    .color-tooltip {

      display: block;

    }

  }

}



.size-pro-detail,

.capacity-pro-detail,

.origin-pro-detail {

  cursor: pointer;

  border: 1px solid #ccc;

  display: inline-block;

  position: relative;

  margin-bottom: 0;

  padding: 3px 10px;

  border-radius: 4px;

  background: #fff;

  overflow: hidden;

}



.size-pro-detail+.size-pro-detail,

.capacity-pro-detail+.capacity-pro-detail,

.origin-pro-detail+.origin-pro-detail {

  margin-left: 5px;

}



.size-pro-detail.active,

.capacity-pro-detail.active,

.origin-pro-detail.active {

  border-color: #000;

  color: #000;



  &::before {

    content: '';

    padding: 4px;

    font-size: 10px;

    line-height: 1;

    position: absolute;

    top: -15px;

    right: -13px;

    background: #080808;

    width: 26px;

    height: 24px;

    transform: rotate(45deg);

    border-radius: 100%;

  }



  &::after {

    content: '';

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkCw8RJSHXzNuNAAAAfElEQVQoz7WRsQ2CYBQGLwRCaLRkDwqdwcLCSZjCmj2AgtoJXMbEUquzEAz+8Je89r675sGG59ka0ig+0ZFbJDGbgRwoAXemi/hb1QZw793ebB739cPgTdV2qvzZAFY+VL+VwB4nB59j5RLYhBVXcTBZw7NJDAN49LrFyz67GnkMHStx0wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0xMS0xNVQxNzozNzozMyswMDowMGfDTJEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMTEtMTVUMTc6Mzc6MzMrMDA6MDAWnvQtAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==);

    background-repeat: no-repeat;

    background-size: contain;

    position: absolute;

    top: 0px;

    right: 0;

    width: 6px;

    height: 6px;

  }

}



.color-pro-detail input[type="radio"],

.size-pro-detail input[type="radio"],

.capacity-pro-detail input[type="radio"],

.origin-pro-detail input[type="radio"] {

  display: none;

}



.quantity-pro-detail {

  width: 100%;

  max-width: 130px;

  line-height: normal;

  display: flex;

  align-items: center;

  justify-content: space-between;

  text-align: center;



  span {

    padding: 0px;

    width: 44px;

    height: 44px;

    color: #a4aaaf;

    cursor: pointer;

    border: 1px solid #ced4da;

    background: #fff;



    i {

      line-height: 44px;

      font-size: 14px;

      width: 44px;

      height: 44px;

      transition: 0.3s;

    }



    &.quantity-plus-pro-detail {

      border-left: 0px;

      border-radius: 0 5px 5px 0;

    }



    &.quantity-minus-pro-detail {

      border-right: 0px;

      border-radius: 5px 0 0 5px;

    }



    &:hover {

      i {

        color: #000;

      }

    }

  }



  input {

    height: 44px;

    border-top: 1px solid #ced4da;

    border-bottom: 1px solid #ced4da;

    width: calc(100% - 88px);

    text-align: center;

    font-size: 14px;

    padding: 5px;

  }



  @include Responsive($lg) {

    max-width: 105px;



    span {

      width: 35px;

      height: 35px;



      i {

        line-height: 35px;

        width: 35px;

        height: 35px;

      }

    }



    input {

      height: 35px;

      width: calc(100% - 70px);

    }

  }

}



.group-quantity-pro-detail {

  width: 130px;



  @include Responsive($lg) {

    width: 105px

  }

}



.group-cart-pro-detail {

  padding-left: 10px;

  width: 100%;

}



.group-cart-pro-detail {

  @include Column_2(130px);

  padding-left: 10px;



  @include Responsive($lg) {

    @include Column_2(105px)

  }

}



.cart-pro-detail {

  a {

    text-transform: uppercase;

    display: block;

    text-align: center;

    border-radius: 5px;

    cursor: pointer;

    transition: 0.4s;

    border: 1px solid #000;

    background: #fff;

    font-weight: bold;

    line-height: 42px;



    &.btn-pro {

      background: #000;

      color: #fff;



      &:hover {

        color: #000;

        background: #fff;

      }

    }



    &.btn-outline-pro {

      color: #000;



      &:hover {

        color: #fff;

        background: #000;

      }

    }

  }



  @include Responsive($lg) {

    a {

      font-size: 12.5px;

      line-height: 33px;

    }

  }

}



.cart-product {

  margin-bottom: 0px;



  span {

    cursor: pointer;

    width: 49%;

    float: left;

    color: #ffffff;

    text-transform: capitalize;

    text-align: center;

    padding: 7px 5px;

    border-radius: 3px;

  }

}



.cart-add {

  margin-right: 2%;

  background-color: $red;



  &:hover {

    background-color: $dark-red;

  }

}



.cart-buy {

  background-color: $green;



  &:hover {

    background-color: $dark-green;

  }

}



.cuppon-row {

  p {

    padding-left: 25px;

    background: url(../images/coupon-icon.webp) no-repeat left center;

    line-height: 22px;

  }



  a {

    color: var(--main-color);

  }

}



.lb-header-cuppon {

  color: #F47560;

  font-weight: bold;



  svg {

    width: 25px;

    height: 25px;

    margin-right: 5px;

  }

}



.cuppon-payment {

  button {

    width: 100%;

    height: 42px;

    background: var(--main-color);

    color: #fff;

    border-radius: 5px;

  }



  @include Responsive($lg) {



    input,

    button {

      height: 37px;

      font-size: inherit;

    }

  }

}



.color-tooltip {

  background: #000;

  color: #fff;

  position: absolute;

  left: 50%;

  top: 0;

  font-size: 11px;

  padding: 2px 8px;

  border-radius: 5px;

  line-height: 20px;

  transform: translate(-50%, calc(-100% - 10px));

  display: none;



  &::after {

    border-style: solid;

    border-width: 3px 2.5px 0 2.5px;

    border-color: #000 transparent transparent transparent;

    background: #333333;

    content: "";

    height: 8px;

    position: absolute;

    transform: rotate(45deg);

    width: 8px;

    left: calc(50% - 4px);

    bottom: -4px;

  }

}



.cupponBox {

  position: relative;

  background: #fff;

  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.15));

  padding: 10px;

  border-radius: 5px;

  min-height: 100px;

}



.cupponBox::before {

  content: "";

  position: absolute;

  top: 0;

  left: -3px;

  height: 100%;

  width: 10px;

  color: #fff;

  background-clip: padding-box;

  background: repeating-linear-gradient(#e5e5e5,

      #e5e5e5 5px,

      transparent 0,

      transparent 9px,

      #e5e5e5 0,

      #e5e5e5 10px) 0/1px 100% no-repeat,

    radial-gradient(circle at 0 7px,

      transparent,

      transparent 2px,

      rgba(229, 229, 229, 0.9333333333) 0,

      #e5e5e5 3px,

      currentColor 0) 1px 0/100% 10px repeat-y;

}



.cuppon__slick--items {

  padding: 7px;

}



.cuppon__slick {

  margin: 0 -7px;

}



.cupponBox_icon {

  flex: 0 0 90px;

  -ms-flex: 0 0 90px;

  max-width: 90px;

}



.cupponBox_info {

  flex: 0 0 calc(100% - 90px);

  -ms-flex: 0 0 calc(100% - 90px);

  max-width: calc(100% - 90px);

  padding-left: 10px;

}



.cupponBox_info h3 {

  font-size: 15px;

  font-weight: bold;

  color: var(--main-color);

  transition: 0.3s;

}



.cupponBox_info p {

  margin: 4px 0;

}



.cupponBox_info button {

  padding: 2px 15px;

  display: block;

  font-size: 12px;

  background: var(--main-color);

  color: #fff;

  line-height: 24px;

  height: 24px;

  border-radius: 12px;

}



.cupponBox_info a {

  text-decoration: underline;

}



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

  section.feedback_block {

    overflow: hidden;

}

  footer#footer:after{

    display: none;

  }

  .footerArticle:before {

  display: none;

}

  .cupponBox_info h3 {

    font-size: 14px;

  }

}

.date_newsnb {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    text-align: center;

}

.news-item__image {

    position: relative;

}

.date_newsnb {

    text-align: center;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    text-align: center;

    display: inline-block;

    width: 119px;

    background: #fff;

    padding: 25px 19px 29px;

    border-top-left-radius: 100px;

    border-top-right-radius: 100px;

    box-shadow: 0 0 5px rgb(50 50 50 / 50%);

}

.bg_newsnb {

    background: url(../img/ic_newsnn.png) no-repeat;

    background-size: 100% 100%;

    width: 81px;

    height: 81px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    padding: 25px 0;

}

p.newnb1 {

    width: 100%;

}

p.newnb1 {

    font-family: 'Quicksand-Bold';

    color: #fff;

    font-size: 25px;

    margin-bottom: 4px;

}

p.newnb2 {

    font-family: 'Quicksand-Medium';

    color: #fff;

    font-size: 16px;

}.content_owl_blog:after {

    position: absolute;

    background: url(../img/ic_news.png);

    content: '';

    width: 516px;

    height: 162px;

    top: -102px;

    right: 0;

    z-index: 99;

}.items_footer_center img {

    border-radius: 100%;

}

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

 .content_owl_blog:after{

  display: none;

 }

}


/* Tạo chuyển động rung nhẹ */
@keyframes soft-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  50% { transform: translate(1px, -1px) rotate(0.5deg); }
  75% { transform: translate(-1px, -1px) rotate(-0.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Áp dụng vào class cats-slide */
.cats-slide {
  display: inline-block; /* Hoặc block tùy bố cục của bạn */
  transition: transform 0.3s ease;
  
}

/* Tùy chọn 1: Rung liên tục (Lặp đi lặp lại nhẹ nhàng) */
.cats-slide {
  animation: soft-shake 3s infinite ease-in-out;
}

/* Tùy chọn 2: Chỉ rung khi di chuột vào (Hover) */
/* 
.cats-slide:hover {
  animation: soft-shake 0.5s ease-in-out;
}
*/
.why-image img {
    display: inline-block;
    transition: transform 0.3s ease;
    animation: soft-shake 3s infinite ease-in-out;
}