@charset "UTF-8";



/*-----------css reset---------------------*/

* {

  margin: 0;

  padding: 0;

}



min-h {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

  font-size: 100%;

  vertical-align: baseline;

  background: transparent;

}



body {

  line-height: 1;

  top: 0 !important;

}



blockquote,

q {

  quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

  content: "";

  content: none;

}



:focus {

  outline: 0;

}



ins {

  text-decoration: none;

}



del {

  text-decoration: line-through;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



a,

a:hover,

a:focus {

  outline: none !important;

}



/* Font face*/

@font-face {

  font-family: "UVN Saigon";

  src: url("fonts/UVNSaigon.eot");

  src: url("fonts/UVNSaigon.eot?#iefix") format("embedded-opentype"),

    url("fonts/UVNSaigon.woff2") format("woff2"),

    url("fonts/UVNSaigon.woff") format("woff"),

    url("fonts/UVNSaigon.ttf") format("truetype"),

    url("fonts/UVNSaigon.svg#UVNSaigon") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Fz Poppins";

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

  src: url("fonts/FzPoppins-Regular.eot?#iefix") format("embedded-opentype"),

    url("fonts/FzPoppins-Regular.woff2") format("woff2"),

    url("fonts/FzPoppins-Regular.woff") format("woff"),

    url("fonts/FzPoppins-Regular.ttf") format("truetype"),

    url("fonts/FzPoppins-Regular.svg#FzPoppins-Regular") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "FzPoppins-Bold";

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

  src: url("fonts/FzPoppins-Bold.eot?#iefix") format("embedded-opentype"),

    url("fonts/FzPoppins-Bold.woff2") format("woff2"),

    url("fonts/FzPoppins-Bold.woff") format("woff"),

    url("fonts/FzPoppins-Bold.ttf") format("truetype"),

    url("fonts/FzPoppins-Bold.svg#FzPoppins-Bold") format("svg");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "FzPoppins-Medium";

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

  src: url("fonts/FzPoppins-Medium.eot?#iefix") format("embedded-opentype"),

    url("fonts/FzPoppins-Medium.woff2") format("woff2"),

    url("fonts/FzPoppins-Medium.woff") format("woff"),

    url("fonts/FzPoppins-Medium.ttf") format("truetype"),

    url("fonts/FzPoppins-Medium.svg#FzPoppins-Medium") format("svg");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}



/*----------basic----------------*/

html,

body {

  font-size: 14px;

  line-height: 25px;

  text-rendering: optimizeLegibility;

  font-family: "Fz Poppins";

  font-weight: normal;

}



a {

  text-decoration: none;

  color: #1471ce;

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

}



a:hover {

  text-decoration: none !important;

  color: #f00;

}



html {

  scroll-behavior: smooth;

}



::-webkit-scrollbar {

  background: #fff;

  width: 10px;

  height: 11px;

}



::-webkit-scrollbar-thumb {

  background: #ccc;

}



/*Prevent Firefox Scrollbar Jump*/

img {

  border: none;

  max-width: 100%;

  height: auto;

  vertical-align: middle;

  box-sizing: border-box;

  position: relative;

  height: auto;

}



input,

textarea {

  padding: 0;

  margin: 0;

  resize: none;

  outline: none;

  height: auto !important;

  line-height: 25px !important;

}



select,

.cp {

  cursor: pointer;

}



.clear {

  clear: both;

}



:focus {

  outline: 0;

}



input:focus {

  outline: 1px solid #f97d17;

}



textarea:focus {

  outline: 1px solid #f97d17;

}



del {

  text-decoration: line-through;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



button {

  border: 0;

  cursor: pointer;

  font-weight: bold;

  outline: none;

}



ul,

ol,

dl {

  margin-left: 15px;

  text-decoration: none !important;

}



body {

  background: #fff;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0px;

  font-weight: normal;

  font-size: inherit;

}



.content h1,

.content h2,

.content h3,

.content h4,

.content h5,

.content h6 {

  margin-bottom: 0.5rem;

  font-weight: 700;

  font-size: 2rem;

}



p {

  margin: 0;

}



.content p {

  margin-bottom: 1rem;

}



/* My */

:root {

  --bg: #87F690;

  --font: "Fz Poppins";

  --fontBold: "FzPoppins-Bold";

  --fontMedium: "FzPoppins-Medium";

  --fontUVN: "UVN Saigon";

  --color-yellow: #d5af35;

  --color-main: #ffd600;

  --color-medium-main: #b9870c;

  --color-dark-main: #b9870c;

  --color-green: #28a745;

  --color-dark-green: #207d36;

  --color-black: #212529;

  --color-gray: #6c757d;

}



.w-clear:after {

  display: block;

  content: "";

  clear: both;

}



.hidden {

  display: none;

}



.hidden-item {

  opacity: 0;

}



.clear {

  clear: both;

}



.none {

  display: none;

}



.hidden-seoh {

  visibility: hidden;

  height: 0px;

  margin: 0px;

  overflow: hidden;

}



.del {

  text-decoration: line-through;

}



.center {

  position: relative;

  max-width: 1195px;

  margin: 0 auto;

  padding: 0 15px;

}



.center-1010 {

  position: relative;

  max-width: 1040px;

  margin: 0 auto;

  padding: 0 15px;

}



.center-1366 {

  position: relative;

  max-width: 1366px;

  margin: 0 auto;

  padding: 0;

}



.title-index {

  text-align: center;

  margin-bottom: 65px;

}



.title-index h2 {

  font-size: 32px;

  font-weight: 500;

  color: black;

}



.title-index p {

  margin-top: 12px;

  color: #a7a7a7;

}



.title-main {

  margin-bottom: 30px;

  text-align: center;

}



.title-main h1,

.title-main h2,

.title-main span {
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  margin: 0;
}


.page-wrapper-white .title-main h1,

.page-wrapper-white .title-main h2,

.page-wrapper-white .title-main span {
 color: #000;
}


.title-main p {

  display: block;

  margin: 0;

}



.title-detail {

  margin-bottom: 15px;

  color: #333;

}



.title-detail h1 {margin: 0;font-weight: normal;font-size: 25px;line-height: 28px;text-transform: capitalize;color: #000;}



.title-detail p {

  display: none;

}



.time-detail {

  margin-bottom: 10px;

  color: #999;

}



.time-detail i {

  vertical-align: top;

  margin: 5px 10px 0px 0px;

}



.time-detail span {

  vertical-align: top;

  display: inline-block;

}



.control-carousel {

  position: absolute;

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

  margin-bottom: 0px;

  width: 30px;

  height: 30px;

  text-align: center;

  line-height: 30px;

  border: 1px solid #eee;

  z-index: 2;

  background-color: #fff;

  color: #ccc;

  cursor: pointer;

}



.control-carousel:hover {

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

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

  color: #fff;

}



.prev-carousel {

  left: 0px;

}



.next-carousel {

  right: 0px;

}



/* Product detail */

.product-detail {

  position: relative;

}



.product-detail_slick {

  margin-right: -20px;

}



.product-detail_slick .box-product {

  margin-right: 20px;

}



.control-product {

  cursor: pointer;

  position: absolute;

  top: 40%;

  transform: translateY(-50%);

  width: 40px;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  border: 1px solid #eee;

  background-color: white;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);



  border-radius: 100%;

  z-index: 10;

}



.prev-product {

  left: -20px;

}



.next-product {

  right: -20px;

}



.control-product:hover {

  color: white;

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

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

}



.control-product:hover .default-img {

  opacity: 0;

}



.control-product:hover .hover-img {

  opacity: 1;

}



/* Container */

#container {

  padding: 30px 15px;

}



#container img {

  height: auto !important;

}



.content {}



.content-flex {

  display: flex;

  flex-flow: wrap;

  justify-content: space-between;

}



.left {

  width: calc(100% - 300px);

}



.right {

  width: 270px;

}



/* Breadcrumb */

.breadCrumbs {

  background-color: #eee;

  padding: 10px 0;

}



.breadCrumbs .center .breadcrumb {

  padding: 0;

  margin: 0;

  background-color: transparent;

  border-radius: 0;

}



.breadCrumbs .center .breadcrumb-item a {

  color: var(--color-black);

}



.breadCrumbs .center .breadcrumb-item a:hover {

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

}



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

  color: var(--color-gray);

  pointer-events: none;

}



/* General */

.mxh {

  list-style: none;

  padding: 0px;

  margin: 0px;

  display: flex;

  align-items: center;

}



.mxh li {

  display: inline-block;

  vertical-align: top;

  margin-right: 5px;

}



.mxh li:last-child {

  margin-right: 0px;

}



.mxh li a {

  display: block;

}



.mxh img {

  vertical-align: top;

  transition: all 0.5s;

}



.mxh img:hover {

  -webkit-animation: rubberBand 1s;

  animation: rubberBand 1s;

}



/* Loading logo intro */

/* 1) Wrapper ban đầu full-screen, nền đen */

.loading-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9999;

  overflow: hidden;

}



/* Logo quay 1 vòng trong 1.5s */

.loading-logo {

  max-width: 150px;

  animation: spin 1.5s linear 1 forwards;

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



/* Overlay trắng trượt lên/xuống */

.white-overlay {

  position: absolute;

  left: 0;

  bottom: -100%;

  width: 100%;

  height: 100%;

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

  pointer-events: none;

}



@keyframes overlayUp {

  from {

    bottom: -100%;

  }



  to {

    bottom: 0;

  }

}



@keyframes slideDown {

  from {

    transform: translateY(0);

  }



  to {

    transform: translateY(100%);

  }

}



.white-overlay.up {

  animation: overlayUp 0.5s ease-out forwards;

}



/* class chung cho cả wrapper và overlay khi slide xuống */

.slide-down {

  animation: slideDown 0.5s ease-in forwards;

}



.slide-down img {

  display: none;

}



/* khi overlay lên hết, đổi bg của wrapper sang trắng */

.white-bg {

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

}



.card-icon {

  width: 25%;

  text-align: right;

}



.card-icon a {

  color: #474747;

  position: relative;

  font-size: 20px;

}



.card-icon a i {}



.card-icon a span {

  background: var(--bg);

  color: #fff;

  min-width: 20px;

  height: 20px;

  display: inline-block;

  position: relative;

  font-size: 10px;

  text-align: center;

  line-height: 20px;

  border-radius: 50%;

  position: absolute;

  top: -5px;

}



/* Banner */

#header {

  padding: 5px 0;

}



#banner {

  background: #fff;

}



.flex-banner {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo {

  width: 50%;

  /* max-width: 126px; */

  /* max-height: 88px; */

  padding: 0;

  position: relative;

  height: 100%;

  text-align: center;

  justify-content: center;

}



.logo img {

  max-height: 80px;

}



.logof {

  max-width: 187px;

  max-height: 130px;

  padding: 0;

  position: relative;

  height: 100%;

}



.banner {

  padding: 0;

}



.banner-ab {

  position: relative;

}



.banner-hotline {

  display: inline-block;

  padding-left: 25px;

  background-image: url(../img/bg_hotline.png);

  background-repeat: no-repeat;

  background-position: 0 4px;

}



.banner-hotline p {

  margin-bottom: -2px;

  text-transform: capitalize;

}



.banner-hotline span {

  color: var(--color-main);

  font-size: 20px;

  display: block;

}



/* Header */

.header-list {

  height: 49px;

  line-height: 49px;

}



.header-item {

  display: flex;

  align-items: center;

  gap: 12px;

}



.header-location {

  color: #666666;

}



.header-location i {

  transform: translateY(1px);

  font-size: 12px;

}



.header-hotline {

  font-size: 20px;

  font-weight: 500;

  color: var(--color-yellow);

}

 

.btn-search {

  position: relative;

  margin-left: 50px;

}



.btn-search a {

  padding: 5px !important;

  line-height: 30px !important;

  width: 40px;

  font-size: 20px !important;

  background: #fff !important;

  border-radius: 50%;

  color: #0072bc !important;

  text-align: right;

  position: relative;

  top: 0;

}



.btn-search a:after {

  display: none;

}



.btn-search a i {

  position: relative;

  z-index: 10;

  background: transparent;

}



.search_box_hide {

  position: absolute;

  top: 0;

  right: calc(100% + 5px);

  margin-right: 0px;

  z-index: 9;

  transition: all 0s;

  background: #ffffff;

  border-radius: 30px;

}



.search_box_hide input {

  width: 0;

  border: none;

  outline: none;

  border-radius: 20px 0 0 20px;



  font-size: 13px;

  color: #333;

  transition: all 0.5s;

  vertical-align: top;

  padding: 8px 0 7px;

  background: transparent;

}



.search_box_hide.opening input {

  width: 250px;

  padding: 8px 15px 7px;

}



/* Search */

.search {

  margin-left: 12px;

  display: block;

  /* max-width: 205px; */

  width: 25%;

  height: 38px;

  transition: all 0.3s ease-in-out;

  background-color: #fff;

  border-radius: 30px;

  border: 1px solid #ccc;

}



.search p {

  float: left;

  width: 50px;

  height: 38px;

  line-height: 38px;

  cursor: pointer;

  text-align: center;

  margin: 0px;

  color: black;

  font-size: 16px;

}



.search input {

  background: transparent;

  width: calc(100% - 50px);

  float: left;

  outline: none;

  padding: 5px 0px 5px 18px;

  border: 0px;

  font-size: 14px;

  height: 38px !important;

  line-height: inherit !important;

}



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

  letter-spacing: 0.5px;

  color: #bbbbbb;

}



.search input:-moz-placeholder {

  color: #bbbbbb;

}



.search input::-moz-placeholder {

  color: #bbbbbb;

}



.search input:-ms-input-placeholder {

  color: #bbbbbb;

}



/* Search mobile */

.search-mobile-list {

  width: 100px;

  display: flex;

  flex-wrap: wrap;

  align-content: center;

  justify-content: flex-end;

  align-items: center;

  gap: 5px;

}



.search-mobile {

  top: 118%;

  transform: translateY(-50%);

  right: 0px;

  width: 0px;

  position: absolute;

  z-index: 11;

  background-color: white;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease-in-out;

  border-radius: 5px;

  border: 1px solid rgba(26, 41, 84, 0.2);

}



.search-mobile.active {

  width: 300px;

  opacity: 1;

  visibility: visible;

}



.search-mobile-close {

  transform: rotate(0deg);

  transition: transform 0.5s ease-in-out;

  display: inline-block;

}



.search-mobile-close:hover {

  transform: rotate(180deg);

}



.search-mobile p {

  background-image: none;

  float: left;

  width: 35px;

  height: 35px;

  line-height: 35px;

  cursor: pointer;

  text-align: center;

  margin: 0px;

  color: black !important;

  font-size: 16px;

}



.search-mobile input {

  width: calc(100% - 70px);

  float: left;

  outline: none;

  padding: 5px 10px 5px 0px;

  border: 0px;

  background: transparent;

  font-size: 12px;

}



.search-mobile-btn i {

  font-size: 20px;

  color: #000;

}



.search-mobile p,

.search-mobile input {

  display: none !important;

}



.search-mobile.active p,

.search-mobile.active input {

  display: block !important;

}



/*Go top*/

.progress-wrap {

  position: fixed;

  bottom: 70px;

  right: 19px;

  height: 50px;

  width: 50px;

  cursor: pointer;

  display: block;

  border-radius: 50px;

  z-index: 100;

  opacity: 0;

  visibility: hidden;

  -webkit-transform: translateY(20px);

  -ms-transform: translateY(20px);

  transform: translateY(20px);

  -webkit-transition: all 400ms linear;

  -o-transition: all 400ms linear;

  transition: all 400ms linear;

}



.progress-wrap.active-progress {

  opacity: 1;

  visibility: visible;

  -webkit-transform: translateY(0);

  -ms-transform: translateY(0);

  transform: translateY(0);

}



.progress-wrap::after {

  position: absolute;

  font-family: "Font Awesome 5 Free";

  content: "\f077";

  text-align: center;

  line-height: 50px;

  font-size: 16px;

  font-weight: 900;

  color: var(--color-main);

  left: 0;

  top: 0;

  height: 50px;

  width: 50px;

  cursor: pointer;

  display: block;

  z-index: 1;

  -webkit-transition: all 400ms linear;

  -o-transition: all 400ms linear;

  transition: all 400ms linear;

}



.progress-wrap svg path {

  fill: none;

}



.progress-wrap svg.progress-circle path {

  stroke: var(--color-main);

  stroke-width: 4;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-transition: all 400ms linear;

  -o-transition: all 400ms linear;

  transition: all 400ms linear;

}



/* Menu RP */

#menu-mobile {

  display: none;

  z-index: 10;

  background: #fff;

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  z-index: 99;

}



.menu-bar-res {

  /* height: 100px; */

  padding: 0px 10px;

  display: -webkit-flex;

  display: -moz-flex;

  display: -ms-flex;

  display: -o-flex;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



#hamburger {

  display: block;

  width: 100px;

  height: 25px;

  position: relative;

}



#hamburger:before,

#hamburger:after,

#hamburger span {

  background: #000;

  content: "";

  display: block;

  width: 40px;

  height: 3px;

  position: absolute;

  left: 0px;

}



#hamburger:before {

  top: 0px;

}



#hamburger span {

  top: 10px;

}



#hamburger:after {

  top: 20px;

}



#hamburger:before,

#hamburger:after,

#hamburger span {

  -webkit-transition: none 0.5s ease 0.5s;

  transition: none 0.5s ease 0.5s;

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

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

}



#mmenu {

  display: none;

}



.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);

}



.mm-menu_opened {

  display: block !important;

}



#mmenu h2 {

  font-weight: normal;

  font-size: 15px;

  margin: 0;

}



.mm-listitem.heading {

  font-weight: bold;

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

  background: #dfdfdf;

  line-height: 20px;

  padding: 10px;

  text-transform: capitalize;

  margin-top: -1px;

}



.mm-listitem.heading:after {

  display: none;

}



.mm-wrapper__blocker {

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

}



div.search_mobi {

  position: absolute;

  z-index: 100;

  background: #fff;

  height: 30px;

  width: 70%;

  top: calc(50% - 15px);

  right: 10px;

}



div.search_mobi:after {

  display: none;

}



div.search_mobi input {

  padding: 0 20px;

  float: left;

  height: 30px !important;

  height: 29px;

  e-height: 30px;

  border: none;

  background: none;

  width: 86%;

  outline: none;

  color: #333;

  text-align: left;

}



div.search_mobi i {

  padding: 8px 11px;

  cursor: pointer;

  display: flex;

  justify-content: center;

  align-items: center;

}



div.search_mobi input::-moz-placeholder {

  color: #333;

}



div.search_mobi input:-ms-input-placeholder {

  color: #333;

}



div.search_mobi input:-moz-placeholder {

  color: #333;

}



/* Slideshow */

.slide-content {

  position: absolute;

  top: 50%;

  left: 60%;

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

  width: 100%;

  max-width: 555px;

  z-index: 3;

}



.slide-content h3 {

  display: inline-block;

  font-size: 22px;

  font-weight: 500;

  background: linear-gradient(to right, var(--color-yellow) 30%, black);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.slide-content h4 {

  margin: 10px 0 28px;

  font-size: 48px;

  line-height: 60px;

}



.btn-slide {

  position: relative;

  width: 170px;

  height: 40px;

  line-height: 38px;

  text-align: center;

  border: 1px solid black;

  color: black;

  font-weight: 500;

  overflow: hidden;

  z-index: 1;

}



.btn-slide::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: black;

  transform: scaleX(0);

  transform-origin: left;

  transition: all 0.3s ease-in-out;

  z-index: -1;

}



.btn-slide:hover span {

  color: white;

}



.btn-slide:hover::before {

  transform: scaleX(1);

}



.btn-slide span {

  position: relative;

  z-index: 2;

  transition: all 0.3s ease-in-out;

}



.slideshow {

  position: relative;

}



.slideshow a {

  display: block;

  cursor: pointer;

}



.slideshow a img {

  min-height: 550px;

  width: 100%;

  object-fit: cover;

  object-position: center;

}



.control-slideshow {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 43px;

  height: 43px;

  border-radius: 50%;

  color: white;

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

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

  position: absolute;

  z-index: 2;

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

  text-align: center;

  cursor: pointer;

  margin: 0px;

}



.prev-slideshow {

  left: -5px;

}



.next-slideshow {

  right: -5px;

}



/* Marquee */

.banner-marquee {

  background: linear-gradient(to right,

      var(--color-medium-main),

      var(--color-main));

  color: white;

  font-family: "UVN Saigon", sans-serif;

  font-size: 32px;

  text-transform: uppercase;

  overflow: hidden;

  white-space: nowrap;

  position: relative;

  padding: 20px 0;

}



.marquee-inner {

  height: 72px;

  line-height: 72px;

  display: inline-block;

  white-space: nowrap;

  animation: marquee 30s linear infinite;

}



.banner-marquee p,

.banner-marquee img {

  display: inline-block;

}



.banner-marquee img {

  margin: -10px 38px 0 30px;

}



@keyframes marquee {

  from {

    transform: translateX(52%);

  }



  to {

    transform: translateX(-108%);

  }

}



/* Giới thiệu */

#gioithieu {

  /* background-image: url(../img/bg-gt_02.png); */

  /* background-repeat: no-repeat; */

  /* background-size: cover; */

  background: #F5F5F5;

}



.gioithieu-main {

  padding: 50px 0;

}



.gioithieu-left {

  width: 45%;

  /* height: 415px; */

  position: relative;

  margin-right: 20px;

}



.gioithieu-left img {

  position: absolute;

  border: 2px solid white;

}



.gioithieu-img1 {

  z-index: 1;

  max-width: 295px;

  top: 0;

  left: 0;

}



.gioithieu-img2 {

  z-index: 2;

  max-width: 190px;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

}



.gioithieu-img3 {

  z-index: 3;

  max-width: 200px;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

}



.gioithieu-right {

  width: 55%;

}



.gioithieu-left h2 {

  font-size: 22px;

  font-weight: 600;

  font-family: "Montserrat", sans-serif;

  margin-bottom: -2px;

}



.gioithieu-text {

  font-size: 70px;

  color: var(--bg);

  font-family: var(--fontMedium);

  line-height: 96px;

  display: block;

  height: initial;

  margin: 10px 0;

}



.gioithieu-mota {

  margin: 12px 0 30px;

}



.btn-gt {

  display: block;

  border-radius: 5px;

  width: 170px;

  /* height: 40px; */

  /* line-height: 40px; */

  font-weight: 500;

  color: #fff;

  text-align: center;

  background-color: #164863;

  padding: 10px 0;

  border: 1px solid #164863;

  font-family: var(--fontMedium);

}



.btn-gt:hover {

  animation: pulse 1s;

}



.btn-gt2 {

  background: #fff;

  border-color: #164863;

  color: #164863;

  margin-left: 8px;

}



@keyframes pulse {

  0% {

    box-shadow: 0 0 0 0 var(--color-main);

  }



  100% {

    box-shadow: 0 0 0 1.2em transparent;

  }

}



/* Collection */

#collection {

  background-color: black;

}



.collection-main {

  padding: 90px 0 85px;

}



.collection-main .title-index {

  margin-bottom: 49px;

  position: relative;



  h2 {

    color: white;

  }



  &::before {

    content: "";

    position: absolute;

    width: 55px;

    height: 3px;

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

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

  }

}



.collection-item {

  position: relative;

}



.collection-item::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  z-index: 2;

  pointer-events: none;

  user-select: none;

}



.collection-item img {

  width: 100%;

  object-fit: cover;

}



.collection-item h3 {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: 25px;

  color: white;

  font-size: 32px;

  font-weight: 500;

  text-align: center;

  width: calc(100% - 30px);

  z-index: 3;

}



/* Sản phẩm ajax */

.spajax-main {

  padding: 77px 0 65px;

}



.spajax-main .title-main {

  text-align: left;

}



.tab-sanpham {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 35px;

}



.click-tab {

  min-width: 150px;

  padding: 0 25px;

  height: 35px;

  text-align: center;

  line-height: 33px;

  border: 1px solid black;

  border-radius: 30px;

  cursor: pointer;

  font-size: 16px;

  transition: all 0.3s ease-in-out;

}



.click-tab.active,

.click-tab:hover {

  color: white;

  background-color: black;

}



.slick-tab,

.collection-slick,

.spuudai-slick {

  margin-right: -15px;

}



.slick-tab .slick-slide,

.collection-slick .slick-slide,

.spuudai-slick .slick-slide {

  margin-right: 15px;

}



.spajax-slide {

  position: relative;

}



.control-spajax {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  color: black;

  background-color: white;

  position: absolute;

  z-index: 3;

  top: 35%;

  transform: translateY(-50%);

  text-align: center;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);

}



.control-spajax:hover {

  color: white;

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

}



.control-spajax i {

  font-size: 18px;

}



.prev-spajax {

  left: -20px;

}



.next-spajax {

  right: -20px;

}



/* Tiêu chí */

#tieuchi {

  background-color: #484848;

}



.tieuchi-main {

  padding: 50px 0 60px;

  display: flex;

  align-items: center;

  gap: 60px;

}



.tieuchi-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  justify-content: center;

  width: calc((100% - 120px) / 3);

}



.tieuchi-img {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 120px;

  height: 120px;

  border-radius: 50%;

  background-color: #4b4b4b;

}



.tieuchi-img img {

  max-width: 65px;

  max-height: 65px;

}



.name-tieuchi {

  font-size: 24px;

  font-weight: 500;

  color: white;

  margin: 25px 0 10px;

}



.mota-tieuchi {

  color: #cccccc;

  font-weight: 500;

  line-height: 23px;

}



/* Sản phẩm ưu đãi */

.spuudai-slide~.spuudai-slide {

  margin-top: 7px;

}



.spuudai-main {

  padding: 85px 0 60px;

}



.spuudai-title {

  margin-bottom: 55px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.spuudai-title .title-main {

  text-align: left;

  margin-bottom: 0;

}



.btn-xemtatca {

  color: black;

  font-weight: 500;

}



.btn-xemtatca span {

  text-decoration: underline;

  text-underline-offset: 4px;

}



.btn-xemtatca:hover {

  color: var(--color-main);

}



.btn-xemtatca i {

  font-size: 12px;

  margin-left: 3px;

}



.spuudai-slide {

  position: relative;

}



.prev-uudai {

  left: -20px;

}



.next-uudai {

  right: -20px;

}



/* Video mp4 */

.video-mp4 video {

  transform: translateY(8px);

  width: 100%;

  height: auto;

  object-fit: cover;

  object-position: center;

}



/* Feedback */

#feedback {

  background-color: #f4e7d6;

}



.feedback-main {

  padding: 60px 0 75px;

}



.feedback-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: 240px;

  gap: 15px;

}



.feedback-item:first-child,

.feedback-item:last-child {

  grid-column: span 2;

}



.feedback-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



/* Tin tức */

#tintuc {

  background-image: url(../img/bg-tt_02.png);

  background-repeat: no-repeat;

  background-size: cover;

}



.tintuc-main {

  padding: 60px 0 75px;

}



.tintuc-main .title-index {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.tintuc-main .title-index::before,

.tintuc-main .title-index::after {

  content: "";

  position: relative;

  width: calc((100% - 444px) / 2);

  height: 1px;

  background-color: #41403d;

}



.tintuc-main .title-index h2 {

  color: white;

}



.tintuc-slick .slick-slide {

  transform: scale(0.93);

  transition: transform 0.3s ease-in-out;

}



.tintuc-slick .slick-center {

  transform: scale(1);

}



.tintuc-img {

  border-radius: 15px;

}



.tintuc-slick .slick-slide .tintuc-item {

  background-color: white;

}



.tintuc-slick .slick-slide .tintuc-name {

  margin: 18px 0 12px;

}



.tintuc-slick .slick-center .tintuc-item {

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

}



.tintuc-slick .slick-center .tintuc-name {

  margin: 18px 0 18px;

}



.tintuc-item {

  text-align: center;

  display: block;

  padding: 10px;

  border-radius: 15px;

  transition: all 0.3s ease-in-out;

}



.tintuc-name {

  font-size: 18px;

  font-weight: 500;

  color: black !important;

  transition: all 0.3s ease-in-out;

}



.btn-tt {

  width: 100%;

  height: 35px;

  border: 1px solid #6a6a6a;

  border-bottom-left-radius: 15px;

  border-bottom-right-radius: 15px;

  line-height: 35px;

  color: #6a6a6a !important;

  transition: all 0.3s ease-in-out;

}



.tintuc-slick .slick-center .btn-tt {

  border: 1px solid white;

  background-color: white;

}



.tintuc-slide {

  position: relative;

}



.tintuc-slide .control-spajax {

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

  color: black !important;

  top: 47%;

}



.tintuc-slide .control-spajax:hover {

  background-color: white;

}



.prev-tintuc {

  left: -10px;

}



.next-tintuc {

  right: -10px;

}



/* Footer */

#footer {}



.footer-top {

  background-color: var(--bg);

  padding: 80px 0 70px;

  color: white;

}



.footer-top a {

  color: #c6c6c6;

}



.footer-top a:hover {

  color: #f00;

}



.footer-tit {

  font-size: 20px;

  font-weight: 500;

  color: #fff;

  margin: 0 0 27px;

}



.footer-1 {

  width: 188px;

}



.footer-content {

  line-height: 25px;

}



.footer-content p {

  margin: 0;

}



.footer-content ul {

  margin: 7px 0 0 15px;

  max-width: 330px;

}



.footer-content ul li {

  margin-bottom: 6px;

}



.footer-mxh {

  display: flex;

  align-items: center;

  gap: 8px;

}



.footer-mxh a {

  display: flex !important;

  justify-content: center;

  align-items: center;

  width: 32px;

  height: 32px;

  text-align: center;

  background-color: transparent;

  border: 1px solid white;

  border-radius: 50%;

  transition: all 0.5s;

}



.footer-mxh a:hover {

  background-color: white;

}



.footer-mxh a:hover img {

  filter: invert(100%) sepia(90%) saturate(500%) hue-rotate(95deg);

}



.footer-mxh li {

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0;

}



.footer-mxh span {

  width: 70px;

}



.footer-2 {

  width: 210px;

}



.footer-list {

  list-style: none;

  padding: 0px;

  margin: 0px;

}



.footer-list li {

  margin-bottom: 11px;

}



.footer-list li:last-child {

  margin-bottom: 0px;

}



.footer-list li a {

  color: #c6c6c6;

}



.footer-list li a:hover {

  color: var(--color-main);

}



.footer-3 {

  width: 160px;

  margin-right: 15px;

}



.footer-4 {

  width: 350px;

}



.footer-4 #footer-map iframe {

  margin-top: 32px;

  display: block;

  width: 100%;

  max-height: 180px;

}



.footer-bottom {

  padding: 8px 0;

  color: #fff;

  background-color: rgb(29, 29, 29);

  text-align: center;

}



.copyright {

  line-height: 24px;

}



.copyright span {

  font-weight: bold;

  text-transform: uppercase;

}



.copyright a {

  color: #fff;

}



.copyright a:hover {

  color: #ff0;

}



.statistic {

  list-style: none;

  margin: 0;

  padding: 0;

}



.statistic span {

  margin: 0 10px;

}



.statistic span:last-child {

  padding-right: 0px;

}



#footer-map iframe {

  display: block;

  width: 100%;

  max-height: 450px;

}



/* Sản phẩm nổi bật */

#sanphamnoibat {

  padding: 35px 0;

}



/* Sản phẩm */

#sanpham {

  padding: 30px 0;

}



.sanpham~.sanpham {

  margin-top: 50px;

}



.product-list {

  max-width: 100%;

  text-align: center;

  font-size: 14px;

  color: #333;

  position: relative;

  padding: 0;

  margin: -5px 0 25px;

  display: flex;

  flex-flow: wrap;

  justify-content: center;

}



.product-list li {

  display: block;

  min-width: 120px;

  padding: 7px 15px 6px;

  margin: 0 2.5px 5px;

  border: 1px solid #c6862e;

  border-radius: 30px;

  cursor: pointer;

}



.product-list li.active {

  color: #fff;

  background: #da942d;

  border-color: #da942d;

}



.view-main {

  text-align: center;

  display: flex;

  justify-content: center;

}



.view-main a {

  display: block;

  min-width: 120px;

  padding: 7px 15px 6px;

  margin: 0 2.5px 5px;

  border: 1px solid #da942d;

  background: #da942d;

  color: #fff;

  border-radius: 30px;

  cursor: pointer;

}



/* Quảng cáo */

#quangcao img {

  width: 100%;

  /* max-height: 350px; */

  object-fit: cover;

  object-position: center;

}



/* Thư viện ảnh */

#thuvienanh {

  padding: 42px 0 55px;

}



.grid-thuvienanh {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(2, 220px);

  grid-gap: 10px 10px;

}



.box-thuvienanh {

  position: relative;

  overflow: hidden;

}



.box-thuvienanh img {

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  left: 0;

  top: 0;

  transition: all 0.5s;

}



.box-thuvienanh-content {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding: 15px 15px;

  text-align: center;

  font-weight: 600;

  font-size: 18px;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

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

  color: transparent;

  transition: all 0.7s;

}



.box-thuvienanh:hover .box-thuvienanh-content {

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

  color: #fff;

}



.box-thuvienanh-content>* {

  position: relative;

  z-index: 9;

}



.grid-thuvienanh .box-thuvienanh:nth-child(1) {

  grid-column: 1/3;

  grid-row: 1/3;

}



.grid-thuvienanh .box-thuvienanh:nth-child(1) .box-thuvienanh-content {

  padding: 25px 15px;

}



/* Bottom */

#bottom {

  padding: 0 0 50px;

}



.bottom-left {

  width: 67%;

}



.bottom-right {

  width: 30%;

}



.bottom-title {

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

  margin-bottom: 1.5rem;

}



.bottom-title h2 {

  display: inline-block;

  font-weight: 700;

  text-transform: uppercase;

  position: relative;

  padding-bottom: 10px;

  font-size: 20px;

  margin: 0;

}



.bottom-title h2:after {

  content: "";

  position: absolute;

  width: 100%;

  height: 4px;

  bottom: 0px;

  left: 0px;

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

}



.tintuc-flex {

  display: flex;

  flex-flow: wrap;

  justify-content: space-between;

  align-items: flex-start;

}



.tintuc-l {

  float: left;

  width: 46.1538461538%;

  line-height: 24px;

}



.tintuc-l-img {

  max-width: 100%;

  overflow: hidden;

  margin-bottom: 5px;

}



.tintuc-l-img img {

  width: 100%;

  transition: all 0.5s;

}



.tintuc-l-img:hover img {

  transform: scale(1.1);

}



.tintuc-l h3 a {

  font-size: 16px;

  color: #2f2f2f;

  line-height: 20px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.tintuc-l h3 a:hover {

  color: #d00;

}



.tintuc-l p {

  margin: 9px 0 10px;



  font-size: 13px;

  color: #666;

  text-align: justify;

  line-height: 18px;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.tintuc-l a.tintuc-l-more {

  font-size: 13px;

  color: #2f2f2f;

  background: #fff;

  display: inline-block;

  vertical-align: top;

  padding: 8px 16px 7px;

  transition: all 0.5s;

  border-radius: 0;

  text-transform: none;

  border: 2px solid #333;

  text-transform: uppercase;

}



.tintuc-l a.tintuc-l-more:hover {

  background: #2f2f2f;

  color: #fff;

}



.tintuc-r {

  float: right;

  width: 51.2820512821%;

  height: 450px;

  overflow: hidden;

}



.tintuc-r ul li {

  margin-bottom: 21px !important;

}



.box-newsi {

  line-height: 20px;



  font-size: 13px;

  color: #666;

  text-align: justify;

}



.box-newsi-img {

  width: 150px;

  max-width: 42%;

  float: left;

  margin-right: 20px;

}



.box-newsi h3 {

  font-weight: normal;

  line-height: 20px;

  font-size: 15px;

  margin: 0 0 7px;

  padding: 0;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.box-newsi h3 a {

  color: #000;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.box-newsi h3 a:hover {

  color: #d00;

}



.box-newsi-more {

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.video-main {

  position: relative;

  height: 400px;

}



.video-main iframe {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0px;

  left: 0px;

}



.listvideos {

  width: 100%;

  height: 40px;

  padding: 0px 10px;

  border: 1px solid #ccc;

  color: var(--color-black);

  margin-top: 10px;

  cursor: pointer;

}



/* Đối tác */

#doitac {

  padding: 20px 0;

  background: #eaeaea;

}



.owl-doitac {

  padding: 0 30px;

}



.box-doitac {

  display: block;

  border: 1px solid #eee;

}



.box-doitac img {

  width: 100%;

}



/* Sản Phẩm */

.box-product-list {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}



.box-product {

  width: calc((100% - 60px) / 4);

  position: relative;

}



.pic-product {

  position: relative;

}



.pic-product a {

  display: block;

  position: relative;

}



.pic-product a img.img-product-1 {

  position: relative;

  z-index: 1;

}



.pic-product a img.img-product-2 {

  position: absolute;

  left: 0;

  top: 0;

  transform: translateX(100%);

}



.pic-product:hover a img.img-product-2 {

  transform: translateX(0);

  z-index: 3;

}



.pic-product:hover::before,

.pic-product:hover .btn-xemchitiet {

  /* opacity: 1; */

  /* visibility: visible; */

}



.pic-product::before {

  opacity: 0;

  visibility: hidden;

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  z-index: 2;

  pointer-events: none;

  user-select: none;

  transition: all 0.3s ease-in-out;

}



.btn-xemchitiet {

  position: absolute;

  opacity: 0;

  visibility: hidden;

  top: 50%;

  left: 50%;

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

  width: 140px;

  height: 40px;

  line-height: 38px;

  text-align: center;

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

  color: var(--color-main);

  font-weight: 500;

  z-index: 3;

  transition: all 0.3s ease-in-out;

}



.btn-xemchitiet::before {

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

}



.pic-product img {

  width: 100%;

}



.content-product {

  padding: 20px 6px;

  text-align: center;

}



.name-product {

  font-size: 16px;

  line-height: 23px;

  margin: 0;

}



.name-product a {

  color: var(--color-black);

}



.name-product a:hover {

  color: var(--color-main);

}



.price-product {

  margin-top: 7px;

  flex-direction: column-reverse;

}



.price-new {

  font-size: 18px;

  font-weight: 500;

  color: black;

}



.price-old {

  font-size: 16px;

  font-weight: normal !important;

  color: var(--color-gray);

}



.price-per {

  position: absolute;

  top: 15px;

  right: 15px;

  color: #fff;

  background: var(--color-main);

  font-size: 11px;

  border-radius: 2px;

  width: 45px;

  height: 25px;

  text-align: center;

  line-height: 25px;

}



.box-product-cart {

  /* display: none !important; */

  font-size: 13px;

  margin: 10px 0 0;

}



.box-product-cart a,

.box-product-cart span {

  cursor: pointer;

  width: 47%;

  color: #fff;

  text-transform: capitalize;

  text-align: center;

  padding: 7px 5px;

  border-radius: 3px;

}



.box-product-cart-add {

  margin-right: 2%;

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

}



.box-product-cart-add:hover {

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

}



.box-product-cart-buy {

  background-color: #3d493a;

}



.box-product-cart-buy:hover {

  background-color: var(--color-dark-green);

}



/* Sản Phẩm detail */

.grid-pro-detail {

  margin-bottom: 50px;

}



.grid-pro-detail-top {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  visibility: hidden;

}



.left-pro-detail {

  position: relative;

  width: 46%;

  text-align: center;

  margin-right: 2%;

  background: white;

}



.left-pro-detail .MagicZoom {

  border: 1px solid #eee;

  padding: 7px;

  border-radius: 5px;

}



.product-detail-image-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.product-image-zoom {

  padding: 5px;

}



.product-detail-left {

  width: 23%;

  position: relative;

}



.product-detail-right {

  width: 75%;

}



.product-detail-left>span {

  position: absolute;

  z-index: 1;

  cursor: pointer;

  font-size: 17px;

}



.product-detail-prev {

  transform: rotate(90deg);

  top: -20px;

}



.product-detail-next {

  transform: rotate(90deg);

  bottom: -10px;

}



.right-pro-detail {

  width: 52%;

}



.gallery-thumb-pro {

  position: relative;

  margin-top: 10px;

}



.owl-thumb-pro {

  padding: 0px 40px;

}



.thumb-pro-detail {

  display: block !important;

  border: 1px solid #eee;

  padding: 5px;

  border-radius: 3px;

  cursor: pointer;

}



.product-for {

  margin-bottom: 10px;

}



.product-image-detail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



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

  border-color: #cecfd2;

}



.thumb-pro-detail img {

  box-shadow: none !important;

  filter: brightness(100%) !important;

  border-bottom: 0px !important;

  padding-bottom: 0px !important;

}



.title-pro-detail {

  text-transform: capitalize;

  font-size: 24px;

  display: block;

  font-weight: 700;

  margin: 10px 0 15px;

}



.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;

  padding-bottom: 15px;

}



.attr-pro-detail li {

  margin-bottom: 0.5rem;

}



.attr-label-pro-detail-cart {

  display: flex;

  align-items: center;

  margin-top: 20px;

}



.attr-label-pro-detail-size,

.attr-label-pro-detail-color {

  display: flex;

  align-items: center;

}



.attr-label-pro-detail-size .size-pro-detail {

  color: #767676;

  line-height: 14px;

  margin: 0px 7px;

}



.attr-label-pro-detail-color .attr-content-pro-detail {

  margin-left: 15px;

}



.attr-label-pro-detail {

  margin: 0px 5px 0px 0px;

  color: #767676;

}



.attr-label-pro-detail.d-block {

  display: block;

  margin: 0px 0px 0px 0px;

  color: #767676;

}



.attr-content-pro-detail {

  display: inline-block;

  margin-bottom: 0px;

  color: var(--color-main);

  font-weight: 700;

}



.attr-label-pro-detail-size,

.attr-label-pro-detail-color {

  display: flex;

  align-items: flex-start;

}



.attr-label-pro-detail-size .size-pro-detail {

  color: #767676;

  line-height: 14px;

  margin: 0px 2px;

  padding: 5px 4px;

  border-radius: 5px;

}



.price-new-pro-detail {

  font-weight: 700;

  font-size: 24px;

  color: var(--color-main);

}



.price-old-pro-detail {

  font-weight: 400;

  color: var(--color-gray);

  text-decoration: line-through;

  padding-left: 40px;

  font-size: 16px;

}



.color-pro-detail {

  display: inline-flex;

  position: relative;

  align-items: center;

  justify-content: center;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 2px solid transparent;

  padding: 2px;

}



.size-pro-detail {

  display: inline-block;

  position: relative;

}



.size-pro-detail {

  display: inline-block;

  position: relative;

}



.size-pro-detail.active {

  color: #e5101d;

}



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

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

  outline: none;

  position: relative;

  cursor: pointer;

  width: 100%;

  height: 100% !important;

  -webkit-appearance: none;

  border: 0px;

  top: 0px;

  left: 0px;

}



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

  border-radius: 50%;

}



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

  position: absolute;

}



.quantity-pro-detail {

  width: 100%;

  max-width: 110px;

  line-height: normal;

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  text-align: center;

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

  border-radius: 3px;

}



.quantity-pro-detail span {

  line-height: 37px;

  padding: 0px;

  width: 30px;

  height: 40px;

  color: #767676;

  cursor: pointer;

  font-size: 22px;

  font-weight: 300;

}



.quantity-pro-detail span.quantity-plus-pro-detail {

  border-left: 0px;

  line-height: 40px;

}



.quantity-pro-detail span.quantity-minus-pro-detail {

  border-right: 0px;

}



.quantity-pro-detail input {

  height: 30px !important;

  border: 0px solid #cccccc;

  width: calc(100% - 60px);

  text-align: center;

  color: #767676;

  font-size: 14px;

  padding: 5px;

  line-height: inherit !important;

}



.cart-pro-detail {

  display: flex;

  align-items: stretch;

  justify-content: flex-start;

  margin-left: 8px;

}



.cart-pro-detail a {

  width: auto;

  text-align: center;

  color: #fff;

  padding: 9px 30px;

  text-transform: uppercase;

  border-radius: 3px;

  cursor: pointer;

  font-weight: 600;

}



.cart-pro-detail a.addnow:hover {

  background: var(--color-main);

  color: #fff;

}



.cart-pro-detail a.addnow {

  margin-right: 10px;

  background: var(--color-main);

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

}



.cart-pro-detail a.buynow {

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

}



.cart-pro-detail a.buynow:hover {

  background-color: var(--color-dark-green);

}



.cart-pro-detail a i {

  vertical-align: top;

  margin-top: 3px;

  margin-right: 8px;

}



.tags-pro-detail {

  margin: 1rem 0px 2rem 0px;

}



.tags-pro-detail a {

  float: left;

  font-size: 12px;

  color: #fff;

  padding: 5px 10px 7px 10px;

  margin-right: 5px;

  margin-bottom: 5px;

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

  border-radius: 3px;

}



.tags-pro-detail a:hover {

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

}



.tags-pro-detail a i {

  font-size: 10px;

  float: left;

  margin: 5px 5px 0px 0px;

}



.tabs-pro-detail {

  margin: 25px 0 0;

}



.tabs-pro-detail .ul-tabs-pro-detail {

  padding: 0;

  margin: 0;

  list-style: none;

  display: flex;

  align-items: center;

  border-bottom: 1px solid #f1f1f1;

}



.tabs-pro-detail .ul-tabs-pro-detail li {

  cursor: pointer;

  padding: 5px 10px;

  text-align: center;

  border-bottom: 2px solid transparent;

  font-weight: 700;

  font-size: 18px;

  margin-bottom: -1px;

}



.tabs-pro-detail .ul-tabs-pro-detail li.active {

  border-bottom: 2px solid var(--color-main);

}



.tabs-pro-detail .ul-tabs-pro-detail li:last-child {

  margin-right: 0px;

  border-right: 0px;

}



.tabs-pro-detail .content-tabs-pro-detail {

  display: none;

}



.tabs-pro-detail .content-tabs-pro-detail.active {

  display: block;

}



.content-tabs-pro-detail.opacity {

  max-height: 930px;

  overflow: hidden;

}



.content-tabs-pro-detail.activeht {

  max-height: unset;

}



.content-tabs-pro-detail.opacity:after {

  position: absolute;

  content: "";

  left: 0px;

  height: 100px;

  width: 100%;

  background: linear-gradient(to bottom, transparent, #fff);

  bottom: 0px;

}



.mgt-25 {

  margin-top: 25px;

}



.pagination-home .page-link {

  border-radius: 50%;

  margin: 1px 3px;

  min-width: 31px;

  min-height: 31px;

}



.pagination-home .page-item:first-child .page-link,

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

  border-radius: 50%;

}



.commentfb-pro-detail-title {

  font-size: 18px;

  font-weight: 700;

  border-bottom: 1px solid #f1f1f1;

  margin-bottom: 10px;

  margin-top: 30px;

}



.commentfb-pro-detail-title span {

  display: inline-block;

  border-bottom: 2px solid var(--color-main);

  padding: 4px 8px;

  margin-bottom: -1px;

}



.pro-detail-container.opacity:after {

  position: absolute;

  content: "";

  left: 0px;

  height: 100px;

  width: 100%;

  background: linear-gradient(to bottom, transparent, #fff);

  bottom: 0px;

}



.pro-detail-container {

  position: relative;

  margin-top: 20px;

}



.pro-detail-btn-container {

  max-width: 150px;

  margin: 0 auto;

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

  text-align: center;

  height: 34px;

  line-height: 34px;

  text-transform: uppercase;

  border-radius: 5px;

  font-size: 14px;

  color: var(--color-main);

  font-weight: 700;

  z-index: 1;

  display: block;

  position: relative;

  margin-top: 10px;

}



.pro-detail-btn-container:hover {

  color: #fff;

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

}



.pro-detail-btn-container:hover {

  color: #fff;

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

}



.pro-detail-container.opacity {

  max-height: 300px;

  overflow: hidden;

}



.pro-detail-container.active {

  max-height: unset;

}



.pro-detail-policy {

  border-top: 1px solid #f5f5fa;

  padding: 15px 0px;

}



.pro-detail-policy ul {

  list-style: none;

  margin: 0px;

  padding: 0px;

  color: #767676;

}



.pro-detail-policy ul li {

  margin-bottom: 4px;

}



.pro-detail-policy ul img {

  margin-right: 5px;

}



.pro-detail-list-cat {

  border-top: 1px solid #f5f5fa;

  padding: 15px 0px;

}



.pro-detail-list-cat p {

  color: #000;

  font-weight: 500;

}



.pro-detail-list-cat p a {

  color: #767676;

  font-weight: 400;

  display: inline-block;

}



.pro-detail-list-cat p a:hover {

  color: var(--color-main);

}



.pro-detail-btn-container:hover {

  color: #fff;

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

}



.pro-detail-list-cat p a:first-child {

  margin-left: 5px;

}



.commentfb-pro-detail-title {

  font-size: 18px;

  font-weight: 700;

  border-bottom: 1px solid #f1f1f1;

  margin-bottom: 10px;

  margin-top: 10px;

}



.commentfb-pro-detail-title span {

  display: inline-block;

  border-bottom: 2px solid var(--color-main);

  padding: 4px 8px;

  margin-bottom: -1px;

}



.content-tabs-pro-detail {

  position: relative;

}



.pro-detail-container {

  position: relative;

  margin-top: 20px;

}



.pro-detail-btn-container {

  max-width: 150px;

  margin: 0 auto;

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

  text-align: center;

  height: 34px;

  line-height: 34px;

  text-transform: uppercase;

  border-radius: 5px;

  font-size: 14px;

  color: var(--color-main);

  font-weight: 700;

  z-index: 1;

  display: block;

  position: relative;

  margin-top: 10px;

}



.pro-detail-btn-container:hover {

  color: #fff;

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

}



/* Bai viet */

.box-hot-news {

  display: flex;

  justify-content: space-between;

  margin-bottom: 55px;

  flex-wrap: wrap;

}



.pic-hot-news {

  width: 50%;

}



.desc-hot-news {

  width: 50%;

  padding: 56px 52px 0px 58px;

  background-color: #f9f9f9;

}



.desc-hot-news>p:first-child {

  color: var(--color-main);

}



.name-hot-news {

  font-size: 20px;

  font-weight: 700;

  line-height: 26px;

  margin-bottom: 4px;

}



.name-hot-news a {

  color: #000;

}



.name-hot-news a:hover {

  color: var(--color-main);

}



.time-hot-news {

  color: #767676;

  margin-bottom: 16px;

}



.info-hot-news {

  color: #767676;

  line-height: 22px;

}



.btn-hot-news {

  display: inline-block;

  color: #000;

  font-weight: 600;

  margin-top: 28px;

}



.btn-hot-news:hover {

  color: var(--color-main);

}



.news-total-container {

  display: flex;

  flex-wrap: wrap;

  margin: -30px -12px;

}



.boxs-news {

  width: calc(100% / 3);

  padding: 30px 12px;

}



.time-news {

  display: flex;

  align-items: center;

  margin-top: 20px;

}



.time-news span {

  position: relative;

  display: inline-block;

}



.time-news span:nth-child(1):after {

  position: absolute;

  content: "";

  left: calc(100% + 6px);

  top: 50%;

  width: 3px;

  height: 3px;

  background-color: #cbcbcb;

  border-radius: 50%;

}



.time-news span:nth-child(2) {

  font-size: 13px;

  color: #767676;

  margin-left: 15px;

}



.name-news a {
  font-weight: bold;
  color: #000;
  font-size: 18px;
  line-height: 26px;
}



.name-news a:hover {

  color: var(--color-main);

}



.info-news {

  color: #767676;

  line-height: 22px;

  margin-top: 14px;

}



.news-load-more {

  width: 150px;

  height: 50px;

  line-height: 50px;

  display: block;

  margin: 0 auto;

  text-align: center;

  border: 2px solid #161616;

  border-radius: 5px;

  background-color: #161616;

  color: #fff;

  text-transform: uppercase;

  margin-top: 30px;

}



.news-load-more:hover {

  color: #161616;

  background-color: #fff;

}



.share {

  padding: 20px 10px 10px 15px;

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

  margin-top: 15px;

  border-radius: 5px;

}



.share b {
  display: block;
  margin-bottom: 5px;
  color: #000;
}



/* Bài viết liên quan */

.othernews b {

  margin-bottom: 10px;

}



.list-news-other {

  padding-left: 10px;

  list-style: square;

}



.list-news-other li {

  margin-bottom: 2px;

}



.list-news-other li a {
  text-transform: none;
  color: #000;
}



.list-news-other li a:hover {

  color: var(--color-main);

}



/* Album */

.box-album {

  float: left;

  width: 23.5%;

  margin: 0 2% 2% 0;

  text-align: center;

  cursor: pointer;

}



.pic-album {

  position: relative;

}



.pic-album img {

  width: 100%;

}



.name-album {

  font-weight: bold;

  font-size: 16px;

  color: var(--color-black);

  line-height: 22px;

  margin-bottom: 0;

  padding: 10px;

}



/* Video */

.box-video {

  float: left;

  width: 23.5%;

  margin: 0 2% 2% 0;

  text-align: center;

  cursor: pointer;

}



.pic-video {

  position: relative;

  margin-bottom: 10px;

}



.pic-video:before {

  content: "";

  position: absolute;

  width: 50px;

  height: 35px;

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

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

  z-index: 1;

  background-repeat: no-repeat;

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

}



.pic-video img {

  width: 100%;

}



.name-video {

  font-size: 16px;

  color: var(--color-black);

  line-height: 22px;

  margin-bottom: 0;

  padding: 0 10px;

}



/* Toc */

.box-readmore {

  padding: 8px 15px;

  border: 1px solid #dedede;

  margin-bottom: 2rem;

  border-radius: 5px;

  background-color: #eeeeee;

}



.box-readmore li ul>li {

  margin: 0;

  margin-bottom: 8px;

}



.box-readmore li ul>li:before {

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

}



.box-readmore ul {

  list-style-type: none;

  counter-reset: item;

  margin-bottom: 0px;

  padding-left: 0px !important;

  margin-top: 8px;

}



.box-readmore ul li {

  display: table;

  counter-increment: item;

  margin-bottom: 5px;

}



.box-readmore ul li:before {

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

  display: table-cell;

  padding-right: 5px;

}



.box-readmore ul li a {

  color: #333333;

  cursor: pointer;

  font-weight: 600;

}



.box-readmore ul li a:hover {

  color: #767676;

}



/* Like Share */

#mxh-plus {

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

}



.social-plugin .at-share-btn {

  margin-bottom: 0px !important;

}



.social-plugin .zalo-share-button {

  margin-left: 4px;

}



.social-plugin {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  margin-top: 10px;

}



.social-plugin-title {

  font-size: 15px;

  margin-right: 10px;

}



.social-plugin img {

  max-height: 40px;

  max-width: 40px;

  border-radius: 5px;

}



.social-plugin .at-share-btn {

  margin-bottom: 0px !important;

}



/* Phân Trang */

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

  color: #555555;

  font-size: 0.875rem;

}



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

  color: #ffffff;

  background-color: #555555;

  border-color: #555555;

}



.pagination-home {

  width: 100%;

  display: block;

  margin: 30px auto 0;

}



/* Phân Trang Ajax */

.pagination-ajax {

  text-align: center;

}



.pagination-ajax a {

  display: inline-block;

  vertical-align: top;

  margin: 0px 2px 3px 2px;

  color: #333;

  background: #eee;

  border: 1px solid rgba(161, 161, 161, 0.4);

  font-size: 12px;

  cursor: pointer;

  padding: 1px 10px 0;

  border-radius: 2px;

}



.pagination-ajax a.current,

.pagination-ajax a:hover {

  background: var(--color-main);

  color: #fff;

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

}



/* Popup custom */

.modal-custom .modal-footer {

  padding: 0.5rem;

}



.modal-custom .modal-footer .btn {

  font-size: 14px;

}



/* Popup */

#popup .modal-body {

  padding: 0px;

}



/* 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 */

.scrollToTop {

  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;

}



/* Text Hide */

.text-split {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 3;

}



.text-split.text-split-1 {

  -webkit-line-clamp: 1;

}



.text-split.text-split-2 {

  -webkit-line-clamp: 2;

}



.text-split.text-split-3 {

  -webkit-line-clamp: 3;

}



/* Transition All */

.transition {

  -webkit-transition: 0.3s ease-out;

  -moz-transition: 0.3s ease-out;

  -o-transition: 0.3s ease-out;

  transition: 0.3s ease-out;

}



/* Scale IMG */

.scale-img {

  overflow: hidden;

  display: block;

}



.scale-img img {

  width: 100%;

  -webkit-transition: 0.3s ease-out;

  -moz-transition: 0.3s ease-out;

  -o-transition: 0.3s ease-out;

  transition: 0.3s ease-out;

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

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

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

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

  transform: scale(1, 1);

}



.scale-img:hover>img {

  -webkit-transition: 0.3s ease-out;

  -moz-transition: 0.3s ease-out;

  -o-transition: 0.3s ease-out;

  transition: 0.3s ease-out;

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

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

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

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

  transform: scale(1.1, 1.1);

}



.skew img {

  overflow: hidden;

  -webkit-transition: all 1.5s ease;

  -moz-transition: all 1.5s ease;

  -o-transition: all 1.5s ease;

  -ms-transition: all 1.5s ease;

  transition: all 1.5s ease;

}



.skew img:hover {

  border-radius: 50%;

  -webkit-transform: rotate(360deg);

  -moz-transform: rotate(360deg);

  -o-transform: rotate(360deg);

  -ms-transform: rotate(360deg);

  transform: rotate(360deg);

}



/* Hover ảnh*/

.hover_anh {

  position: relative;

  overflow: hidden;

}



.hover_anh::before {

  content: "";

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

  bottom: 0;

  left: 0;

  position: absolute;

  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -o-transform: rotate(90deg);

  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;

}



.hover_anh::after {

  content: "";

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

  top: 0;

  right: 0;

  position: absolute;

  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -o-transform: rotate(90deg);

  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;

}



.hover_anh:hover::before,

.hover_anh:hover::after {

  -webkit-transform: rotateY(180deg);

  -moz-transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  -o-transform: rotateY(180deg);

  transform: rotateY(180deg);

  -webkit-transition-duration: 1.3s;

  -moz-transition-duration: 1.3s;

  -ms-transition-duration: 1.3s;

  -o-transition-duration: 1.3s;

  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%;

}



/*Hover Text*/

.hover-text h3 a {

  transition: all 0.5s;

}



.hover-text h3 a:hover {

  color: #d00;

}



/* Blink */

.blink {

  -webkit-animation-name: blink;

  -webkit-animation-duration: 1s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blink;

  -moz-animation-duration: 1s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  animation-name: blink;

  animation-duration: 1s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



@-moz-keyframes blink {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@-webkit-keyframes blink {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@keyframes blink {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



/* Button Frame */

.btn-frame {

  display: block;

  width: 50px;

  height: 50px;

  position: fixed;

  right: 20px;

  z-index: 10;

  cursor: pointer;

}



.btn-frame i {

  display: flex;

  display: -ms-flex;

  justify-content: center;

  align-items: center;

  -ms-flex-align: center;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: var(--color-main);

  position: relative;

  z-index: 1;

  font-size: 20px;

  color: #ffffff;

}



.btn-frame i img {

  vertical-align: middle;

  width: 65%;

}



.btn-frame .animated.infinite {

  animation-iteration-count: infinite;

}



.btn-frame .kenit-alo-circle {

  width: 60px;

  height: 60px;

  top: -5px;

  right: -5px;

  position: absolute;

  background-color: transparent;

  -webkit-border-radius: 100%;

  -moz-border-radius: 100%;

  border-radius: 100%;

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

  opacity: 0.1;

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

  opacity: 0.5;

}



.btn-frame .zoomIn {

  animation-name: zoomIn;

}



.btn-frame .animated {

  animation-duration: 1s;

  animation-fill-mode: both;

}



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

  width: 70px;

  height: 70px;

  top: -10px;

  right: -10px;

  position: absolute;

  -webkit-transition: all 0.2s ease-in-out;

  -moz-transition: all 0.2s ease-in-out;

  -ms-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  -webkit-border-radius: 100%;

  -moz-border-radius: 100%;

  border-radius: 100%;

  border: 2px solid transparent;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

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

  opacity: 0.4;

}



.btn-frame .pulse {

  animation-name: pulse;

}



/* Ứng dụng */

.ungdung {

  position: fixed;

  right: 18px;

  top: 120px;

  list-style: none;

  margin: 0;

  padding: 0;

  z-index: 9;

  display: flex;

  flex-direction: column;

}



.ungdung li {

  margin: 8px 0 0;

}



/* Zalo */

.btn-zalo {

  bottom: 230px;

}



/* Phone */

.btn-phone {

  left: 20px;

  right: auto;

  bottom: 70px;

}



.btn-phone span {

  display: flex;

  display: -ms-flex;

  justify-content: center;

  align-items: center;

  -ms-flex-align: center;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: var(--color-main);

  position: relative;

  z-index: 1;

  font-size: 20px;

  color: #ffffff;

}



.btn-phone i {

  transform: rotate(90deg);

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: #ffffff;

  color: red;

}



/*phone*/

#button-contact-vr {

  position: fixed;

  right: 0;

  bottom: 130px;

  z-index: 99999;

}



#button-contact-vr .button-contact {

  position: relative;

  margin-top: -5px;

}



#button-contact-vr .button-contact .phone-vr {

  position: relative;

  visibility: visible;

  background-color: transparent;

  width: 90px;

  height: 90px;

  cursor: pointer;

  z-index: 11;

  -webkit-backface-visibility: hidden;

  -webkit-transform: translateZ(0);

  transition: visibility 0.5s;

  left: 0;

  bottom: 0;

  display: block;

}



.phone-vr-circle-fill {

  width: 65px;

  height: 65px;

  top: 12px;

  left: 12px;

  position: absolute;

  box-shadow: 0 0 0 0 #c31d1d;

  background-color: rgba(230, 8, 8, 0.7);

  border-radius: 50%;

  border: 2px solid transparent;

  -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;

  animation: phone-vr-circle-fill 2.3s infinite ease-in-out;

  transition: all 0.5s;

  -webkit-transform-origin: 50% 50%;

  -ms-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

  -webkit-animuiion: zoom 1.3s infinite;

  animation: zoom 1.3s infinite;

}



.phone-vr-img-circle {

  background-color: #e60808;

  width: 40px;

  height: 40px;

  line-height: 40px;

  top: 25px;

  left: 25px;

  position: absolute;

  border-radius: 50%;

  overflow: hidden;

  display: flex;

  justify-content: center;

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

  animation: phone-vr-circle-fill 1s infinite ease-in-out;

}



.phone-vr-img-circle a {

  display: block;

  line-height: 37px;

}



.phone-vr-img-circle img {

  max-height: 25px;

  max-width: 27px;

  position: absolute;

  top: 50%;

  left: 50%;

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

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

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

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

}



@-webkit-keyframes phone-vr-circle-fill {

  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);

  }

}



@-webkit-keyframes zoom {

  0% {

    transform: scale(0.9);

  }



  70% {

    transform: scale(1);

    box-shadow: 0 0 0 15px transparent;

  }



  100% {

    transform: scale(0.9);

    box-shadow: 0 0 0 0 transparent;

  }

}



@keyframes zoom {

  0% {

    transform: scale(0.9);

  }



  70% {

    transform: scale(1);

    box-shadow: 0 0 0 15px transparent;

  }



  100% {

    transform: scale(0.9);

    box-shadow: 0 0 0 0 transparent;

  }

}



.phone-bar a {

  position: fixed;

  bottom: 25px;

  left: 30px;

  z-index: -1;

  color: #fff;

  font-size: 16px;

  padding: 8px 15px 7px 50px;

  border-radius: 100px;

  white-space: nowrap;

}



.phone-bar a:hover {

  opacity: 0.8;

  color: #fff;

}



@media (max-width: 736px) {

  .phone-bar {

    display: none;

  }

}



#zalo-vr .phone-vr-circle-fill,

#messenger-vr .phone-vr-circle-fill {

  box-shadow: 0 0 0 0 #2196f3;

  background-color: rgba(33, 150, 243, 0.7);

}



#zalo-vr .phone-vr-img-circle,

#messenger-vr .phone-vr-img-circle {

  background-color: #2196f3;

}



#whatsapp-vr .phone-vr-circle-fill {

  box-shadow: 0 0 0 0 var(--color-main);

  background-color: rgba(54, 240, 60, 0.7);

}



#whatsapp-vr .phone-vr-img-circle {

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

}



/* Messenger */

.js-facebook-messenger-container.closed,

.js-facebook-messenger-tooltip.closed {

  display: none !important;

}



.js-facebook-messenger-tooltip {

  bottom: 97px;

  right: 97px;

}



.js-facebook-messenger-tooltip {

  color: #404040;

  background: #fff;

}



.js-facebook-messenger-box,

.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

  z-index: 999;

}



.js-facebook-messenger-tooltip {

  display: none;

  position: fixed;

  text-align: center;

  border-radius: 10px;

  overflow: hidden;

  font-size: 12px;

  line-height: 1;

  padding: 10px;

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

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

  z-index: 1e30;

}



.js-facebook-messenger-close-tooltip {

  width: 10px;

  height: 10px;

  display: inline-block;

  cursor: pointer;

  margin-left: 10px;

}



.js-facebook-messenger-box.rubberBand {

  -webkit-animation-name: rubberBand;

  animation-name: rubberBand;

}



.js-facebook-messenger-box.animated {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}



.js-facebook-messenger-box,

.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

  z-index: 999;

}



.js-facebook-messenger-box {

  display: block;

  position: fixed;

  cursor: pointer;

  bottom: 150px;

  right: 17px;

  width: 56px;

  height: 56px;

  text-align: center;

  background: var(--color-main);

  border-radius: 100%;

  overflow: hidden;

  z-index: 99;

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

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

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

}



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

  transform: rotate(0deg);

}



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

  width: 32px;

  height: 33px;

  position: absolute;

  top: 13px;

  left: 12px;

  opacity: 1;

  overflow: hidden;

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

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

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

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

}



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

  transform: rotate(-45deg);

}



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

  opacity: 0;

  width: 19px;

  height: 20px;

  position: absolute;

  top: 19px;

  left: 19px;

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

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

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

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

}



.js-facebook-messenger-container,

.js-facebook-messenger-container-button {

  z-index: 1000;

}



.js-facebook-messenger-container {

  position: fixed;

  opacity: 0;

  transform: translateY(50px);

  bottom: 110px;

  right: 90px;

  border-radius: 10px;

  pointer-events: none;

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

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

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

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

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

}



.js-facebook-messenger-top-header {

  width: 300px;

}



.js-facebook-messenger-top-header {

  color: #fff;

  background: var(--color-main);

}



.js-facebook-messenger-top-header {

  display: block;

  position: relative;

  width: 300px;

  background: var(--color-main);

  color: #fff;

  text-align: center;

  line-height: 1;

  padding: 10px;

  font-size: 14px;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

}



.js-facebook-messenger-container iframe,

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

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;

}



.js-facebook-messenger-box,

.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

  z-index: 999;

}



.js-facebook-messenger-container,

.js-facebook-messenger-container-button {

  z-index: 1000;

}



.js-facebook-messenger-top-header {

  color: #fff;

  background: var(--color-main);

}



.js-facebook-messenger-top-header {

  width: 300px;

}



.js-facebook-messenger-tooltip {

  color: #404040;

  background: #fff;

}



.js-facebook-messenger-container.open {

  transform: translateY(0px);

  opacity: 1;

  pointer-events: all;

}



.js-facebook-messenger-tooltip {

  bottom: 97px;

  right: 97px;

}



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

  opacity: 0;

}



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

  transform: rotate(0deg);

}



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

  opacity: 1;

}



/* Cart fix */

.cart-fixed {

  position: fixed;

  right: 20px;

  bottom: 315px;

  z-index: 10;

  background: #4b4f56;

  width: 50px;

  height: 50px;

  text-align: center;

  color: #fff !important;

  border-radius: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  display: none;

}



.cart-fixed i {

  font-size: 20px;

}



.cart-fixed span {

  position: absolute;

  top: 0px;

  right: -5px;

  color: #fff;

  width: 25px;

  height: 25px;

  background: var(--color-main);

  text-align: center;

  line-height: 25px;

  font-size: 11px;

  border-radius: 100%;

}



/* Toolbar */

.toolbar {

  background: var(--color-main);

  width: 100%;

  padding: 3vw;

  bottom: 0px;

  position: fixed;

  z-index: 500;

  height: auto;

  left: 0px;

}



.toolbar ul {

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0px;

  margin: 0px;

}



.toolbar ul li {

  text-align: center;

  width: 25%;

}



.toolbar ul li a {

  display: block;

  width: 100%;

  cursor: pointer;

}



.toolbar ul li a img {

  height: 6vw;

  width: auto;

}



.toolbar ul li a span {

  font-weight: 400;

  color: #fff;

  font-size: 3.5vw;

  display: none;

}



/* Fixbar */

.fixbar {

  bottom: 0;

  display: block;

  background: #f0eff4;

  border-top: 1px solid #ddd;

  width: 100%;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  position: fixed;

  margin: 0;

  z-index: 500;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  height: 50px;

}



.fixbar ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



.fixbar ul li {

  display: inline-block;

  margin: 0 auto 10px;

  text-align: center;

  width: 25%;

  float: left;

}



.fixbar .icon-cart-mobile,

.fixbar .icon-cart-new,

.fixbar .icon-home-new,

.fixbar .icon-hotdeal-new {

  width: 20px;

  height: 20px;

  display: block;

  margin: 8px auto 0;

}



.fixbar .icon-cart-mobile {

  background: url(../images/cart-mobile.png) no-repeat;

}



.cart-total-header-mobile {

  font-size: 10px;

  position: absolute;

  background: red;

  color: #fff !important;

  border-radius: 50%;

  height: 15px;

  width: 15px;

  line-height: 15px;

  top: 5px;

  margin-left: 5px;

}



.fixbar ul li a {

  font-size: 11px;

  text-decoration: none;

  color: #333;

}



.fixbar ul li a i {

  font-size: 20px;

}



/* Plugbar */

.plugbar {

  position: fixed;

  bottom: 0;

  left: 0;

  border-top: 1px solid #eae6e6;

  width: 100%;

  right: 0;

  max-width: 767px;

  margin: 0 auto;

  background: #fff;

  padding: 9px 10px 10px 7px;

  z-index: 10;

}



.plugbar ul {

  list-style: none;

  padding: 0;

  margin: 0px;

  display: -webkit-flex;

  display: -moz-flex;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.plugbar ul li {

  width: 20%;

  float: left;

}



.plugbar ul li a {

  display: block;

  color: #696969;

  font-size: 12px;

  text-align: center;

  position: relative;

}



.plugbar ul li a i {

  font-size: 20px;

  color: #696969;

}



.plugbar ul li a span {

  position: absolute;

  width: 50px;

  height: 50px;

  top: -40px;

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

  font-size: 14px;

  display: block;

  border: 1px solid rgba(234, 230, 230, 0.5);

  border-radius: 100%;

}



/* Fix toolbar */

.fix-toolbar {

  background: var(--color-main);

  width: 100%;

  padding: 5px;

  bottom: 0;

  position: fixed;

  height: auto;

  line-height: 25px;

  left: 0;

  right: 0;

  margin: 0 auto;

  display: none;

  border-top: 1px solid #fff;

  z-index: 99;

}



.fix-toolbar img {

  vertical-align: top;

}



.fix-toolbar ul {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 5px;

  list-style: none;

  margin: 0;

}



.fix-toolbar ul li {

  text-align: center;

  width: 20%;

}



.fix-toolbar ul li a {

  display: block;

  width: 100%;

  cursor: pointer;

  color: #fff;

  font-size: 30px;

}



.fix-toolbar ul li a img {

  height: 25px !important;

  width: auto;

}



.fix-toolbar ul li a span {

  font-weight: 400;

  color: #fff;

  font-size: 13px;

  display: none;

}



/* Combo Phone */

.support-online {

  position: fixed;

  z-index: 999;

  left: 10px;

  bottom: 0px;

}



.support-online a {

  position: relative;

  margin: 20px 10px;

  text-align: left;

  width: 40px;

  height: 40px;

}



.support-online i {

  width: 40px;

  height: 40px;

  background: #43a1f3;

  color: #fff;

  border-radius: 100%;

  font-size: 20px;

  text-align: center;

  line-height: 1.9;

  position: relative;

  z-index: 999;

}



.support-online a span {

  border-radius: 2px;

  text-align: center;

  background: rgb(103, 182, 52);

  padding: 9px;

  display: none;

  width: 180px;

  margin-left: 10px;

  position: absolute;

  color: #ffffff;

  z-index: 999;

  top: 0px;

  left: 40px;

  transition: all 0.2s ease-in-out 0s;

  -moz-animation: headerAnimation 0.7s 1;

  -webkit-animation: headerAnimation 0.7s 1;

  -o-animation: headerAnimation 0.7s 1;

  animation: headerAnimation 0.7s 1;

}



.support-online a:hover span {

  display: block;

}



.support-online a {

  display: block;

}



.support-online a span:before {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 10px 10px 10px 0;

  border-color: transparent rgb(103, 182, 52) transparent transparent;

  position: absolute;

  left: -10px;

  top: 10px;

}



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

  width: 60px;

  height: 60px;

  top: -10px;

  position: absolute;

  -webkit-transition: all 0.2s ease-in-out;

  -moz-transition: all 0.2s ease-in-out;

  -ms-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  -webkit-border-radius: 100%;

  -moz-border-radius: 100%;

  border-radius: 100%;

  border: 2px solid transparent;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

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

  opacity: 0.75;

  right: -10px;

}



.support-online .kenit-alo-circle {

  width: 50px;

  height: 50px;

  top: -5px;

  right: -5px;

  position: absolute;

  background-color: transparent;

  -webkit-border-radius: 100%;

  -moz-border-radius: 100%;

  border-radius: 100%;

  border: 2px solid rgba(30, 30, 30, 0.4);

  opacity: 0.1;

  border-color: #0089b9;

  opacity: 0.5;

}



.support-online .support-online .btn-support {

  cursor: pointer;

}



.support-online .mes i {

  background: orange;

}



.support-online .sms i {

  background: red;

}



.support-online .call-now i {

  background: green;

}



/* Phone Switch */

.widget-mobile {

  position: fixed;

  left: 50%;

  transform: translateX(-50%);

  bottom: 10px;

  z-index: 9999999;

}



#my-phone-circle {

  position: relative;

  width: 50px !important;

  height: 50px !important;

}



.wcircle-open .wcircle-icon i:before {

  content: "\f00d";

}



.wcircle-icon {

  background: #1282fc;

  border-radius: 50%;

  display: flex !important;

  display: -ms-flex !important;

  align-items: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  position: relative !important;

}



.wcircle-icon:before {

  position: absolute;

  content: "";

  width: 60px;

  height: 60px;

  background: rgba(18, 130, 252, 0.5);

  border: 1px solid #fff;

  border-radius: 50%;

  left: -5px;

  top: -5px;

  -webkit-animation: pulse 1s infinite ease-in-out;

  -moz-animation: pulse 1s infinite ease-in-out;

  -ms-animation: pulse 1s infinite ease-in-out;

  -o-animation: pulse 1s infinite ease-in-out;

  animation: pulse 1s infinite ease-in-out;

}



.wcircle-icon:after {

  position: absolute;

  content: "";

  width: 80px;

  height: 80px;

  background: rgba(18, 130, 252, 0.5);

  border-radius: 50%;

  left: -15px;

  top: -15px;

  -webkit-animation: zoomIn 2s infinite ease-in-out;

  -moz-animation: zoomIn 2s infinite ease-in-out;

  -ms-animation: zoomIn 2s infinite ease-in-out;

  -o-animation: zoomIn 2s infinite ease-in-out;

  animation: zoomIn 2s infinite ease-in-out;

}



.wcircle-menu {

  position: absolute !important;

  left: 0;

  top: 0;

  display: none;

}



.wcircle-menu-item {

  width: 50px;

  height: 50px;

  background: #1282fc;

  border-radius: 50%;

  display: flex;

  display: -ms-flex;

  align-items: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}



.wcircle-menu-item img {

  width: 50px;

  height: 50px;

  display: block;

  border-radius: 50%;

}



.wcircle-menu-item i,

.wcircle-icon i {

  font-size: 25px;

  color: #fff;

  position: relative;

  z-index: 9999;

}



.shake-anim {

  -webkit-animation: shake-anim 1s infinite ease-in-out;

  -moz-animation: shake-anim 1s infinite ease-in-out;

  -ms-animation: shake-anim 1s infinite ease-in-out;

  -o-animation: shake-anim 1s infinite ease-in-out;

  animation: shake-anim 1s infinite ease-in-out;

  -webkit-transform-origin: 50% 50%;

  -moz-transform-origin: 50% 50%;

  -ms-transform-origin: 50% 50%;

  -o-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

}



@-moz-keyframes shake-anim {

  0% {

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

  }



  10%,

  30% {

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

  }



  20%,

  40% {

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

  }



  100%,

  50% {

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

  }

}



@-webkit-keyframes shake-anim {



  0%,

  100%,

  50% {

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

  }



  10%,

  30% {

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

  }



  20%,

  40% {

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

  }

}



@-o-keyframes shake-anim {



  0%,

  100%,

  50% {

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

  }



  10%,

  30% {

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

  }



  20%,

  40% {

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

  }

}



.box-sp:nth-child(3n) {

  margin-right: 0;

}



.box-sp:nth-child(3n + 1) {

  clear: both;

}



.box-album:nth-child(4n + 1) {

  clear: both;

}



.box-album:nth-child(4n) {

  margin-right: 0px;

}



.box-video:nth-child(4n + 1) {

  clear: both;

}



.box-video:nth-child(4n) {

  margin-right: 0;

}



/*Video slick*/

#video-slick {

  display: flex;

  justify-content: space-between;

}



.video-left {

  width: calc(100% - 146px);

  height: 406px;

}



.video-right {

  width: 135px;

  max-height: 406px;

}



.video-right .slick-video * {

  vertical-align: top;

}



.video-right .slick-video .slick-slide {

  border: none !important;

}



.pvd {

  cursor: pointer;

  height: 128px;

  margin-bottom: 11px;

}



.pvd img {

  width: 135px;

  height: 128px;

  object-fit: cover;

}



.responsive-item {

  overflow: auto;

}



.main-nhantin {

  background: url(../images/bg-nt.png) no-repeat;

  background-size: cover;

  position: relative;

  padding: 68px 0 92px;

}



.cot1-nt {

  width: calc(488% * 100 / 1135);

  position: relative;

  padding: 0;

}



.cot2-nt {

  width: calc(593% * 100 / 1135);

  position: relative;

  background: #f5f5f5e8;

  padding: 52px 33px 40px;

  border-radius: 5px;

}



.doitac {

  display: flex;

  flex-wrap: wrap;

  margin: -8.5px;

  justify-content: center;

}



.box-dtac {

  width: calc(100% / 3);

  padding: 8.5px;

}



.box-dtac img {

  border-radius: 5px;

}





.cot2-nt p {

  text-align: center;

  color: #164863;

  font-size: 24px;

  font-weight: 700;

  position: relative;

  margin-bottom: 8px;

  font-family: "Montserrat", sans-serif;

}



.slogan-nt {

  text-align: center;

  font-family: "Montserrat", sans-serif;

  font-size: 16px;

  line-height: 32px;

  font-weight: 500;

  margin-top: 23px;

}



.cot2-nt p:before {

  position: absolute;

  content: "";

  width: 29px;

  height: 3px;

  background: #164863;

  top: 50%;

  transform: translateY(-50%) translateX(-36px);

}



.cot2-nt h2 {

  font-family: "Open Sans", sans-serif;

  text-align: center;

  font-size: 32px;

  font-weight: 600;

}



.form-control {

  border: 0;

}



.newsletter-input {

  position: relative;

  width: calc(100% - 60px);

}



.form-nhantin .form-newsletter .newsletter-input {

  width: 100%;

}



.form-nhantin .form-newsletter .newsletter-input img {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 24px;

}



.form-nhantin .form-newsletter .newsletter-input.ten {

  margin-bottom: 22px;

}



.form-nhantin {

  padding: 28px 0 0;

  position: relative;

  font-family: "Montserrat", sans-serif;

}



.form-nhantin .form-newsletter .row-1 {

  display: flex;

  grid-gap: 7px;

  margin-bottom: 18px;

}



.form-nhantin .form-newsletter .newsletter-input input {

  height: 45px !important;

  width: 100%;

}



.newsletter-input input {

  padding: 4px 10px 4px 54px;

  font-size: 16px;

  border-radius: 50px;

  color: #101010c4;

  font-weight: 500;

}



.form-nhantin .form-newsletter .newsletter-input textarea.form-control {

  height: 155px !important;

  width: 100%;

  border-radius: 15px;

  padding: 8px 31px;

  font-size: 16px;

  font-weight: 500;

  color: #333333c7;

}



.newsletter-button {

  width: 160px;

  margin: auto;

  margin-top: 28px;

}



.newsletter-button input[type=submit] {

  width: 100%;

  border: 0px;

  background-color: #164863;

  color: #fff;

  display: block;

  padding: 12.5px 16px;

  font-weight: 700;

  cursor: pointer;

  font-size: 16px;

  border-radius: 10px;

}

.skiptranslate{

  display:none !important;

}


.intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-gap: 20px; */
  min-height: 100vh;
  padding: 10px;
  position: relative;
  grid-template-columns: 350px 1fr;
}
.intro-grid-right{
  
}
.intro-item {
  position: relative;
  padding: 10px;
}

.intro-item a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.intro-item a video{
  width: 100%;
  height: calc(100vh/4 - 30px);
   object-fit: cover;
}
.intro-item a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.intro-item h3 {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  /* width: 100%; */
  padding: 3%;
  /* background: linear-gradient(to top right, rgba(0,0,0,.5), transparent); */
}

.intro-item-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.intro-item-home{
  margin: auto;width: 300px;height: 150px;z-index: 9;
}
.intro-item-home a{

}
.intro-item-home a img{

}
.intro-item-home a span{
  font-size: 20px;
  font-weight: 600;
  color: #DC560F;
  background: 
#000;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 2%;
  border-radius: 10px;
  box-shadow: 0px 0px 6px #DC560F;
  /* display: none; */
  margin: 20px 0 0;
  padding: 10px 0;
}
@media (max-width: 768px) {
  .intro-grid {
      grid-template-columns: repeat(1, 1fr);
  }
}

.page-wrapper-white{
  background: #F2F2F2;
}