/* Text Hide */

.text-split {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 3 !important;
}

.text-split-1 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 1 !important;
}

.text-split-2 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;
}

.text-split-3 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 3 !important;
}

.text-split-4 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 4 !important;
}

.text-split-5 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 5 !important;
}

.text-split-6 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 6 !important;
}

.text-split-7 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 7 !important;
}

.text-split-10 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 10 !important;
}

.text-split-11 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 11 !important;
}

.text-split-12 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 12 !important;
}

.text-split-13 {
  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: normal !important;

  -webkit-box-orient: vertical !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 13 !important;
}

/* header */

.mid-head p {
  font-size: 65px;

  font-family: "font3";

  color: #ffb800;

  margin: 0px;

  text-shadow: 5px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  text-align: center;
}

.time-open {
  background: url(../imgs/time-open.png) no-repeat;

  background-size: 100% 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;
}

.time-open h3 {
  font-size: 25px;

  font-weight: 700;

  font-family: "font1";

  color: white;
}

.time-open .line {
  color: #7a0000 !important;

  width: 60px;

  height: 2px;

  background-color: #7a0000 !important;

  border: 1px solid #7a0000 !important;

  margin: 0px;
}

.time-open .time {
  color: white;

  font-size: 16px;

  font-family: "font1";

  font-weight: 700;
}

.time-open .title-hotline {
  color: white;

  font-size: 16px;

  font-family: "font1";
}

.time-open .number-hotline {
  color: white;

  font-size: 25px;

  font-family: "font1";

  font-weight: 800;
}

.time-open .address-hotline {
  color: white;

  font-size: 12px;

  font-family: "font1";

  font-weight: 500;
}

/*  */

.grid-product-menu {
  display: grid;

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

.grid-product-menu .box-product .item-product {
}

.grid-product-seller {
  display: grid;

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

  gap: 30px;
}

.info-product {
  background: url(../imgs/bgr_info_product.png) no-repeat center;

  background-size: cover;

  height: 70px;

  width: 380px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0px 40px;
}

/* .wrap-product-like .owl-item {

    width: 411px !important;

} */

/* giới thiệu */

.wrap-gioithieu {
  padding: 90px 0px;
}

.group-gioithieu {
  display: flex;
}

.gioithieu-top {
  display: flex;

  justify-content: space-between;
}

.note-left {
  width: 300px;
}

.video-right {
  width: calc(100% - 30px - 300px);
}

.gioithieu-top .note-left h3 {
  color: #7a0000;

  font-size: 30px;

  font-family: "font3";

  text-align: center;

  margin: 0 auto;
}

.gioithieu-top .note-left .img-note {
  background: url(../imgs/note.png) no-repeat;

  width: 300px;

  height: 222px;

  display: flex;

  /* align-items: center; */

  justify-content: center;

  color: #ffb800;

  font-size: 40px;

  padding: 20px 50px;

  font-family: "font3";

  text-shadow: 4px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  animation: moveUpDown 3s infinite ease-in-out;
}

.box-video {
  position: relative;

  height: auto;
}

.gioithieu-item1 {
  display: flex;

  justify-content: space-between;

  background: url(../imgs/khung_gioithieu.png) no-repeat;

  background-size: 100% 100%;

  position: relative;

  padding: 50px 40px;

  margin-top: 90px;
}

.gioithieu-item1::before {
  position: absolute;

  content: "";

  background: url(../imgs/vegetable_1.png) no-repeat;

  width: 394px;

  height: 302px;

  bottom: -90px;

  left: -120px;
}

.gioithieu-item1::after {
  position: absolute;

  content: "";

  background: url(../imgs/vegetable_2.png) no-repeat;

  width: 593px;

  height: 516px;

  right: -300px;

  bottom: -60px;
}

.gioithieu-item1 .item1-left {
  width: 370px;
}

.item1-left p {
  font-size: 16px;

  margin-bottom: 28px;

  text-align: justify;
}

.gioithieu-item1 .item1-right {
  width: calc(100% - 30px - 370px);

  z-index: 100;
}

.name-gioithieu-item1 {
  font-size: 50px;

  font-family: "font3";

  color: #ffb800;

  position: absolute;

  top: -30px;

  left: 50%;

  transform: translateX(-50%);

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;
}

.gioithieu-item2 .title-gioithieu-item2 {
  font-size: 30px;

  font-family: "font3";

  color: #ffb800;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;
}

.gioithieu-item2 .name-gioithieu-item2 {
  font-size: 50px;

  font-family: "font3";

  color: #ffb800;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  /* text-stroke: 1px #7A0000; */
}

.gioithieu-item2 p {
  text-align: justify;

  font-size: 16px;

  /* margin-bottom: 38px; */
}

/* tiêu chí */

.wrap-tieuchi {
  background: url(../imgs/bgr_tieuchi.png) no-repeat;

  background-size: cover;

  padding: 70px 0px;
}

.tieuchi-item {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}

.tieuchi-info {
  text-align: center;
}

.tieuchi-info .tieuchi-desc {
  color: #ffb800;

  font-family: "font3";

  font-size: 80px;

  margin: 10px 0px;

  text-shadow: 3px 0px 0px white, 4px 4px 5px rgba(0, 0, 0, 0.2);

  /* -webkit-text-stroke: 1px white; */
}

.tieuchi-info .tieuchi-name {
  color: black;

  font-family: "font1";

  font-size: 20px;

  font-weight: 700;

  text-transform: uppercase;

  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
    -1px 1px 0 #fff;

  /* Viền trắng 1px quanh chữ */
}

.tieuchi-item:hover .tieuchi-img {
  transform: rotateY(180deg);
}

.tieuchi-img {
  transition: 0.7s;
}

/* món ăn yêu thích */

.wrap-product-like {
  padding: 50px 0px;
}

/* tin tức */

.wrap-news {
  padding: 50px 0px;
}

.wrap-news .wrap-content {
  background: url(../imgs/bgr_tintuc.png) no-repeat center;

  background-size: 100% 100%;

  position: relative;

  padding: 80px 50px;
}

.wrap-news .wrap-content::before {
  content: "";

  background: url(../imgs/ramen.png) no-repeat;

  position: absolute;

  width: 280px;

  height: 280px;

  bottom: -60px;

  right: -70px;
}

.wrap-news .wrap-content .title-main {
  position: absolute;

  top: -35px;

  left: 50%;

  transform: translateX(-50%);
}

.news-info .news-name {
  margin: 15px 0px 10px 0px;
}

.news-info .news-name a {
  font-size: 18px;

  color: black;

  font-family: "font1";

  font-weight: 800;

  transition: 0.5s;
}

.news-info .news-name a:hover {
  color: #ffb800;

  transition: 0.5s;
}

.news-item .news-img {
  border-radius: 200px 200px 0px 0px;
}

/* không gian quán */

.wrap-khonggian {
  padding: 50px 0px;

  position: relative;

  background: #faf2e4;
}

.wrap-khonggian::before {
  position: absolute;

  content: "";

  background: url(../imgs/album_to.png) no-repeat;

  width: 463px;

  height: 488px;

  top: -200px;

  left: 0px;

  animation: rotateSwing 3s infinite ease-in-out;
}

.click-khonggian {
  margin-bottom: 20px;
}

.click-khonggian .choose_list {
  display: flex;

  justify-content: center;

  align-items: center;
}

.box-main-khonggian {
  display: grid;

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

  gap: 30px;
}

.khonggian-image-item {
  position: relative;

  height: 100%;
}

.khonggian-image-item img {
  height: 100%;
}

.khonggian-image-item-0 {
  grid-column: 1/6;

  grid-row: 2/10;
}

.khonggian-image-item-1 {
  grid-column: 6/13;

  grid-row: 1/8;
}

.khonggian-image-item-2 {
  grid-column: 13/21;

  grid-row: 1/10;
}

.khonggian-image-item-3 {
  grid-column: 1/9;
}

.khonggian-image-item-4 {
  grid-column: 9/16;

  grid-row: 10/12;
}

.khonggian-image-item-5 {
  grid-column: 16/21;
}

.khonggian-image-item-0 img {
  border-radius: 150px 150px 0px 0px;
}

.khonggian-image-item-2 img {
  border-radius: 250px 250px 0px 0px;
}

.khonggian-txt {
  position: absolute;

  height: auto;

  padding: 10px;

  text-align: center;

  top: 50%;

  transform: translateY(-50%);

  color: #fff;

  background: #000000ab;

  font-size: 1.2rem;

  text-transform: uppercase;

  opacity: 0;

  transition: 0.2s all;

  width: 100%;

  font-family: "font1";
}

.khonggian-image-item:hover .khonggian-txt {
  opacity: 1;
}

.title-item1 {
  text-align: center;

  position: absolute;

  bottom: -80px;

  left: 50%;

  transform: translateX(-50%);

  width: max-content;
}

.title-item2 {
  text-align: center;

  width: max-content;

  margin: auto;
}

.title-item1 h3 {
  background: url(../imgs/bgr-khonggian.png) no-repeat center;

  background-size: cover;

  width: 370px;

  height: 71px;

  font-size: 30px;

  font-family: "font3";

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  text-shadow: 2px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  text-stroke: 1px #7a0000;
}

.title-item1 p {
  color: black;

  font-size: 20px;

  font-family: "font1";
}

.title-item2 h3 {
  font-size: 40px;

  font-family: "font3";

  color: #ffb800;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  text-stroke: 1px #7a0000;
}

.title-item2 p {
  font-size: 40px;

  font-family: "font2";

  color: black;
}

/* video và feedback */

.wrap-video-feedback {
  background-color: #ffcd00;

  padding: 65px 0px 185px 0px;

  position: relative;
}

.rau1 {
  position: absolute;

  top: 0px;

  left: 0px;

  z-index: 9999;
}

.rau2 {
  position: absolute;

  top: 10px;

  left: 25%;

  transform: translateX(-10%);
}

.rau3 {
  position: absolute;

  bottom: 25px;

  left: 45px;

  z-index: 9999;
}

.khoinguon {
  position: absolute;

  font-size: 60px;

  font-family: "font2";

  bottom: 25px;

  left: 40%;

  transform: translateX(-40%);

  z-index: 9999;
}

.box-youtube::after {
  content: "";

  background: url(../imgs/feedback_rau4.png);

  position: absolute;

  right: -150px;

  top: -90px;

  width: 221px;

  height: 161px;

  z-index: -1;
}

.group-video-feedback {
  position: relative;

  height: 550px;

  display: flex;
}

.box-youtube {
  position: absolute;

  left: 0px;

  top: 50px;

  width: 850px;

  z-index: 2;
}

.box-video a strong::after {
  position: absolute;

  top: 50%;

  left: 50%;

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

  width: 90px;

  height: 90px;

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

  background-size: 100% 100%;

  content: "";
}

.box-feedback {
  width: 630px;

  position: absolute;

  right: 0px;
}

.box-feedback .info-feedback {
  border-radius: 10px;

  border: 3px solid black;

  height: 450px;

  text-align: right;

  /* float: right; */

  /* margin-right: auto; */

  padding: 50px 45px 0px 290px;
}

.info-feedback .title-feedback {
  font-family: "font3";

  font-size: 50px;

  color: white;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  text-stroke: 1px #7a0000;
}

.info-feedback .desc-feeback {
  font-size: 16px;

  color: #5e5e5e;
}

.info-feedback .name-feedback {
  font-size: 20px;

  color: black;

  font-family: "font1";

  font-weight: 800;
}

.info-feedback span {
  font-size: 14px;

  color: black;

  font-family: "font1";

  font-weight: 600;
}

.youtube-item {
  position: relative;
}

.youtube-item a strong {
  border-radius: 20px;
}

.youtube-item a strong::after {
  position: absolute;

  top: 50%;

  left: 50%;

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

  width: 90px;

  height: 90px;

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

  background-size: 100% 100%;

  content: "";
}

.img-feedback {
  position: absolute;

  bottom: -250px;

  width: 300px;

  left: 100px;

  z-index: 100;
}

.img-feedback img {
  border-radius: 150px;

  border: 10px solid white;
}

/* đặt bàn */

.wrap-datban {
  background: url(../imgs/bgr_datban.png) no-repeat;

  background-size: cover;

  padding: 50px 0px;
}

.input-group1 {
  position: relative;
}

.input {
  border: solid 1.5px black;

  background: none;

  padding: 1rem;

  width: 100%;

  font-size: 1rem;

  color: #a6966b;

  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);

  height: 40px;
}

textarea.input {
  border: solid 1.5px black;

  background: none;

  padding: 1rem;

  width: 100%;

  font-size: 1rem;

  color: #a6966b;

  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);

  height: 100px;
}

.user-label {
  position: absolute;

  left: 15px;

  color: black;

  pointer-events: none;

  transform: translateY(10px);

  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.input:focus,
input:valid {
  outline: none;

  /* border: 1.5px solid #A6966B; */
}

.choose_list span {
  font-size: 14px;
}

.input:focus ~ label,
input:valid ~ label {
  transform: translateY(-50%) scale(0.8);

  background-color: white;

  padding: 0 0.2em;

  color: #a6966b;

  font-size: 15px;
}

.contact-form .row {
  margin: 20px 100px;
}

/*xem thêm */

.xemthem {
  content: "";

  position: absolute;

  background: url(../imgs/xemthem.png) no-repeat;

  background-size: cover;

  height: 42px;

  width: 138px;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  right: 8%;

  bottom: 13%;

  font-weight: 700;
}

.xemthem:hover {
  color: #fc0;

  transition: 0.5s;
}

.xemthem-gioithieu {
  content: "";

  background: url(../imgs/xemthem-gioithieu.png) no-repeat;

  background-size: cover;

  height: 42px;

  width: 138px;

  color: #2e8b57;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 45px;

  font-weight: 700;
}

.xemthem-gioithieu:hover {
  color: #fc0;

  transition: 0.5s;
}

/*  */

.quick_contact {
  position: fixed;

  bottom: 50px;

  left: 60px;

  z-index: 20;
}

.quick_contact a {
  display: block;

  position: relative;

  font-size: 18px;

  color: #fff;

  padding: 0 20px 0 35px;

  height: 44px;

  line-height: 44px;

  text-decoration: none;

  border-radius: 0 40px 40px 0;
}

.quick_contact a span {
  display: flex;

  width: 45px;

  height: 45px;

  line-height: 40px;

  border-radius: 50%;

  text-align: center;

  position: absolute;

  left: -25px;

  /* color: #2E8B57; */

  top: -2.5px;

  border: solid 5px #fc0;

  align-items: center;

  justify-content: center;
}

.button_gradient {
  background-image: linear-gradient(90deg, #2e8b57 0%, #2e8b57 100%);

  border: 2px #fff solid;
}

.contact-phone {
  float: left;

  width: 100%;

  text-align: center;

  color: white;

  font-size: 20px;

  line-height: 1.2;

  font-family: "font1";

  line-height: 45px;

  animation-duration: 800ms;

  animation-name: chopchop;

  animation-iteration-count: infinite;

  animation-direction: alternate;

  line-height: 40px;
}

.quick_contact a span:before {
  content: "";

  position: absolute;

  top: -30px;

  left: -27px;

  width: 95px;

  height: 95px;

  background: url(../imgs/contact_rotate.png) center no-repeat;

  animation: rotate 3s linear infinite;
}

.quick_contact2 {
  position: fixed;

  bottom: 150px;

  left: 60px;

  z-index: 20;
}

.quick_contact2 a {
  display: block;

  position: relative;

  font-size: 18px;

  color: #fff;

  padding: 0 20px 0 35px;

  height: 44px;

  line-height: 44px;

  text-decoration: none;

  border-radius: 0 40px 40px 0;
}

.quick_contact2 a span {
  display: flex;

  width: 45px;

  height: 45px;

  line-height: 40px;

  border-radius: 50%;

  text-align: center;

  position: absolute;

  left: -25px;

  /* color: #2E8B57; */

  top: -2.5px;

  border: solid 5px #fc0;

  align-items: center;

  justify-content: center;
}

.quick_contact2 a span:before {
  content: "";

  position: absolute;

  top: -30px;

  left: -27px;

  width: 95px;

  height: 95px;

  background: url(../imgs/contact_rotate.png) center no-repeat;

  animation: rotate 3s linear infinite;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg);
  }
}

@keyframes chopchop {
  0% {
    transform: scale(1);

    color: #fff;
  }

  50% {
    transform: scale(1.1);

    color: #ec2d3f;
  }

  100% {
    transform: scale(1);

    color: #fc0;
  }
}

/* botton */

/* From Uiverse.io by nikk7007 */

.xem-them {
  display: flex;

  justify-content: center;

  margin-top: 40px;
}

.xem-them button {
  padding: 0.8em 1.8em;

  border: 2px solid #8e6700;

  position: relative;

  overflow: hidden;

  background-color: #ffb800;

  text-align: center;

  text-transform: uppercase;

  font-size: 16px;

  font-weight: bold;

  transition: 0.3s;

  z-index: 1;

  font-family: inherit;

  color: #8e6700;

  display: flex;
}

.xem-them button::before {
  content: "";

  width: 0;

  height: 300%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) rotate(45deg);

  background: #7a0000;

  transition: 0.5s ease;

  display: block;

  z-index: -1;
}

.xem-them button:hover::before {
  width: 105%;
}

.xem-them button:hover {
  color: white;
}

/* menu */

.wrap-menu {
  padding: 50px 0px;

  background: #faf2e4;

  position: relative;
}

.wrap-menu::after {
  position: absolute;

  content: "";

  background: url(../imgs/ot.png) no-repeat;

  width: 262px;

  height: 194px;

  top: 0px;

  left: 0px;
}

.paging-product-category.daonguoc {
  display: flex;

  flex-direction: row-reverse;

  justify-content: center;
}

.paging-product-category {
  display: flex;

  justify-content: space-between;
}

.left-menu {
  width: calc(100% - 40% - 140px);
}

.right-menu {
  width: 42%;
}

.left-menu .name-list {
  font-size: 30px;

  font-family: "font3";

  color: white;

  background: #ffb800;

  width: fit-content;

  border-radius: 5px;

  padding: 10px 25px;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  text-stroke: 1px #7a0000;
}

.group-price {
  display: flex;

  flex-direction: column;
}

.price-item {
  display: flex;

  justify-content: space-between;
}

.price-item span {
  font-size: 30px;

  font-family: "font3";

  color: #ffb800;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  text-stroke: 1px #7a0000;

  padding: 0px 5px;
}

.box-product-menu {
  padding-bottom: 50px;

  position: relative;
}

.daonguoc .right-menu .box-img-menu {
  width: fit-content;

  background: #ffb800;

  border-radius: 0% 50% 50% 0%;
}

.box-img-menu img {
  border-radius: 50%;

  padding: 10px 10px 10px 10px;

  z-index: 3;

  position: relative;

  transition: 1s ease;
}

.box-img-menu img:hover {
  transition: 1s ease;

  transform: rotate(15deg);
}

.daonguoc .right-menu .box-img-menu::after {
  content: "";

  position: absolute;

  left: -175px;

  background: #ffb800;

  width: 310px;

  height: 352px;
}

.right-menu .box-img-menu {
  width: fit-content;

  background: #ffb800;

  border-radius: 50% 0% 0% 50%;
}

.right-menu .box-img-menu::after {
  content: "";

  position: absolute;

  /* right: 0px; */

  background: #ffb800;

  width: 310px;

  height: 352px;

  z-index: 1;
}

.paging-product-category.daonguoc .left-menu {
  width: calc(100% - 50% - 140px);

  z-index: 2;
}

.paging-product-category.daonguoc .right-menu {
  width: 40%;
}

.box-product-menu .m-0 .right-menu .box-img-menu::before {
  content: "";

  position: absolute;

  background: url(../imgs/menu-vegetable_1.png) no-repeat;

  right: -15px;

  width: 438px;

  height: 498px;

  z-index: 2;

  top: -60px;
}

.m-0 .left-menu {
  background: url(../imgs/bgr_menu_icon1.png) no-repeat;

  background-size: 100% 100%;
}

.box-product-menu .m-1 .right-menu .box-img-menu::before {
  content: "";

  position: absolute;

  background: url(../imgs/menu-vegetable_2.png) no-repeat;

  left: -35px;

  width: 611px;

  height: 574px;

  z-index: 2;

  top: -125px;
}

.paging-product-category.daonguoc.m-1::before {
  content: "";

  position: absolute;

  background: url(../imgs/bgr_menu_icon2.png) no-repeat;

  right: -25px;

  width: 371px;

  height: 404px;

  z-index: 0;

  bottom: -120px;
}

.box-product-menu .m-2 .right-menu .box-img-menu::before {
  content: "";

  position: absolute;

  background: url(../imgs/menu-vegetable_3.png) no-repeat;

  right: -25px;

  width: 371px;

  height: 404px;

  z-index: 2;

  top: -60px;
}

.group-camhung {
  position: absolute;

  right: -85px;

  bottom: -50px;
}

.group-camhung span {
  font-size: 60px;

  color: black;

  font-family: "font2";
}

.group-camhung .info-camhung {
  font-size: 30px;

  font-family: "font3";

  color: white;

  text-shadow: 3px 0px 0px #7a0000, 4px 4px 5px rgba(0, 0, 0, 0.2);

  -webkit-text-stroke: 1px #7a0000;

  text-stroke: 1px #7a0000;
}

.rotate {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);

  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);

  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

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

  50% {
    transform: rotate(-15deg);
  }

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

@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(50px);
  }
}