.menu .menu-right {
  z-index: initial !important;
}

.twitter-typeahead,
.notification-box,
.menu-avatar-text-wrapper,
.menu-login-text,
.btn-kichHoat {
  z-index: 2;
}

#giftSuccessModal .modal-content {
  background-color: transparent;
  border: none;
}

#giftSuccessModal .success-icon {
  position: relative;
  width: 350px;
  height: 350px;
  margin: 0 auto;
}

#giftSuccessModal .success-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.2);
  z-index: 0;
  border-radius: 50%;
}

#giftSuccessModal .success-images-container {
  position: relative;
  width: 350px;
  height: 350px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#giftSuccessModal .shine-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#giftSuccessModal .shine-effect.shine-1 {
  -webkit-animation: rotateAroundCenter 10s linear infinite;
          animation: rotateAroundCenter 10s linear infinite;
  z-index: 0;
}

#giftSuccessModal .shine-effect.shine-2 {
  animation: rotateAroundCenter 10s linear infinite reverse;
  z-index: 0;
}

@-webkit-keyframes diamondPulse {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }

  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.15);
            transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes diamondPulse {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }

  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.15);
            transform: translate(-50%, -50%) scale(1.15);
  }
}

#giftSuccessModal .point {
  font-size: 80px;
  color: #2289e9;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-stroke: 10px #fff;
  text-stroke: 10px #fff;
  paint-order: stroke;
  -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

@-webkit-keyframes diamondFlyAway {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(calc(50vw - 600px)) translateY(calc(-50vh + 20px)) scale(0.1);
            transform: translateX(calc(50vw - 600px)) translateY(calc(-50vh + 20px)) scale(0.1);
    opacity: 0;
  }
}

@keyframes diamondFlyAway {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(calc(50vw - 600px)) translateY(calc(-50vh + 20px)) scale(0.1);
            transform: translateX(calc(50vw - 600px)) translateY(calc(-50vh + 20px)) scale(0.1);
    opacity: 0;
  }
}

#giftSuccessModal .kim-cuong.fly-away {
  -webkit-transform-origin: center center !important;
          transform-origin: center center !important;
  -webkit-animation: diamondFlyAway 1s ease-in forwards;
          animation: diamondFlyAway 1s ease-in forwards;
}

@-webkit-keyframes rotateAroundCenter {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotateAroundCenter {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes ballBounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }

  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes ballBounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }

  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.bounce-animation {
  -webkit-animation: ballBounce 0.6s ease-in-out;
          animation: ballBounce 0.6s ease-in-out;
}

.tooltip-trigger {
  position: relative;
}

.redirect-store-diamond {
  background-color: #ff8500;
  color: white;
  border-radius: 24px;
  padding: 5px 10px;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}

.custom-tooltip {
  visibility: hidden;
  background-color: #fffceb;
  color: #1f2937;
  text-align: right;
  border-radius: 14px;
  padding: 8px 12px;
  position: absolute;
  top: 215%;
  left: 35%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  border: 1px solid #fcc74d;
  visibility: visible;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.custom-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10%;
  margin-left: -8px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #fffceb transparent;
  -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.label-diamond-2 {
  width: 48px;
  height: 32px;
  border-radius: 60px;
  position: absolute;
  position: absolute;
  background-color: #FFEE8D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: 20px;
  top: 35px;
  -webkit-box-shadow: 0 4px 12px rgba(255, 238, 141, 0.6);
          box-shadow: 0 4px 12px rgba(255, 238, 141, 0.6);
  z-index: 2;
}

.label-diamond {
  width: 48px;
  height: 32px;
  border-radius: 60px;
  position: absolute;
  position: absolute;
  background-color: #FFEE8D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: 30px;
  top: 15px;
  -webkit-box-shadow: 0 4px 12px rgba(255, 238, 141, 0.6);
          box-shadow: 0 4px 12px rgba(255, 238, 141, 0.6);
  z-index: 2;
}

.backdrop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.backdrop-overlay.show {
  opacity: 1;
  visibility: visible;
}

.kho-bau-wrapper,
.custom-tooltip {
  z-index: 1001;
}

.v3-main-layout .v3-main_header-container .main_header .main_header-lap {
  z-index: initial;
}

#fullscreenModal {
  padding-right: 0 !important;
}

#fullscreenModal .action_ref_tutor {
  color: black;
}

#fullscreenModal .action_ref_tutor:hover {
  color: #21bdc6;
}

#fullscreenModal .modal-body {
  padding: 0 !important;
  height: 100vh;
  overflow: hidden;
}

#fullscreenModal .modal-dialog {
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0px !important;
}

#fullscreenModal .modal-content {
  height: 100vh;
  border: none;
}

@-webkit-keyframes fadeOutSlide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOutSlide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeInSlide {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#fullscreenModal .item .btn-control {
  pointer-events: auto;
  min-width: 450px;
  height: 85px;
  background: -webkit-gradient(linear, left bottom, left top, from(#cb2d2a), to(#ff746c));
  background: linear-gradient(to top, #cb2d2a, #ff746c);
  color: white;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 100px;
  position: relative;
  overflow: visible;
  -webkit-box-shadow: 0 0 0 12px rgba(173, 216, 230, 0.6);
          box-shadow: 0 0 0 12px rgba(173, 216, 230, 0.6);
  -webkit-filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

#fullscreenModal .item .btn-control::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100px;
  pointer-events: none;
  -webkit-transition: -webkit-box-shadow 0.6s ease;
  transition: -webkit-box-shadow 0.6s ease;
  transition: box-shadow 0.6s ease;
  transition: box-shadow 0.6s ease, -webkit-box-shadow 0.6s ease;
  -webkit-box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.6);
          box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.6);
  -webkit-filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}

#fullscreenModal .item .btn-control:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-box-shadow: 0 0 0 12px rgba(173, 216, 230, 0.6), 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 0 12px rgba(173, 216, 230, 0.6), 0 4px 12px rgba(0, 0, 0, 0.15);
  -webkit-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

#fullscreenModal .item .btn-prev {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

#fullscreenModal .item .btn-next {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

#fullscreenModal .item-4 .left-col-overlay {
  left: 310px !important;
}

#fullscreenModal .item-4 .right-col-overlay {
  top: 160px !important;
}

#fullscreenModal .item-4 .content-slide-4 {
  width: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: 140px;
  right: 0px;
  margin-top: 40px;
}

#fullscreenModal .action_ref_tutor {
  color: black;
}

#fullscreenModal .action_ref_tutor:hover {
  color: #21bdc6;
}

#fullscreenModal .modal-body {
  padding: 0px !important;
}

#fullscreenModal .progress-bar {
  width: 1240px;
  height: 37px;
  background: #ffd5d4;
  position: absolute;
  top: 90px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1000;
  border-radius: 25px;
  border: 5px solid #fff;
  overflow: visible;
}

#fullscreenModal .progress-bar-fill {
  height: 100%;
  background: #d4302c;
  width: 0%;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
  position: relative;
  left: 0;
  top: 0;
  border-radius: 25px;
}

#fullscreenModal .progress-indicator {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: right 0.3s ease;
  transition: right 0.3s ease;
  width: 100%;
}

#fullscreenModal .slide-1 {
  background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/li-xi.png");
}

#fullscreenModal .slide-2 {
  background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/tui-kim-cuong.png");
}

#fullscreenModal .slide-3 {
  background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/hop-qua.png");
}

#fullscreenModal .slide-4 {
  background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/sach.png");
}

#fullscreenModal .carousel-controls {
  position: absolute;
  bottom: 40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1001;
}

#fullscreenModal .btn-control {
  padding: 14px 48px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#fullscreenModal .btn-control:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#fullscreenModal .btn-control:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@-webkit-keyframes flyAcrossRandom {
  0% {
    top: -50px;
    opacity: 0;
    -webkit-transform: translateX(0) rotateZ(0deg);
            transform: translateX(0) rotateZ(0deg);
  }

  10% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.5;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    top: 100vh;
    opacity: 0;
    -webkit-transform: translateX(var(--tx, 50px)) rotateZ(var(--rotation, 360deg));
            transform: translateX(var(--tx, 50px)) rotateZ(var(--rotation, 360deg));
  }
}

@keyframes flyAcrossRandom {
  0% {
    top: -50px;
    opacity: 0;
    -webkit-transform: translateX(0) rotateZ(0deg);
            transform: translateX(0) rotateZ(0deg);
  }

  10% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.5;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    top: 100vh;
    opacity: 0;
    -webkit-transform: translateX(var(--tx, 50px)) rotateZ(var(--rotation, 360deg));
            transform: translateX(var(--tx, 50px)) rotateZ(var(--rotation, 360deg));
  }
}

#fullscreenCarousel {
  height: 100vh;
  width: 100%;
}

#fullscreenCarousel .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  position: relative;
}

#fullscreenCarousel .item.fadeOut {
  opacity: 0;
}

#fullscreenCarousel .item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#fullscreenCarousel .item .left-col-overlay {
  z-index: 2;
  position: absolute;
  top: 160px;
  left: 100px;
  overflow: visible;
}

#fullscreenCarousel .item .left-col-overlay .hoa-dao {
  position: absolute;
  bottom: -150px;
  left: 0px;
}

#fullscreenCarousel .item .right-col-overlay {
  z-index: 2;
  position: absolute;
  top: 200px;
  right: 17%;
  overflow: visible;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#fullscreenCarousel .item .right-col-overlay .title-slide-1 {
  font-size: 52px;
  color: #000;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 16px;
}

#fullscreenCarousel .item .right-col-overlay .desc-slide {
  font-size: 24px;
  margin-top: 16px;
  max-width: 480px;
  text-align: center;
  color: #4b5563;
  margin-bottom: 40px;
}

#fullscreenCarousel .owl-stage {
  height: 100vh;
}

#fullscreenCarousel .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

#fullscreenCarousel .owl-nav button {
  pointer-events: auto;
}

#fullscreenCarousel .owl-prev,
#fullscreenCarousel .owl-next {
  background: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  padding: 10px 15px !important;
  border-radius: 3px;
}

#fullscreenCarousel .owl-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 10;
}

#fullscreenCarousel .owl-dots .owl-dot {
  background: rgba(255, 255, 255, 0.5) !important;
  margin: 0 5px;
}

#fullscreenCarousel .owl-dots .owl-dot.active {
  background: white !important;
}

#fullscreenModal .modal-dialog {
  min-width: 100% !important;
}

#fullscreenCarousel {
  position: relative;
}

#fullscreenCarousel .item,
#fullscreenCarousel .item-4 {
  background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/background-1.png") !important;
  background-size: cover;
  background-position: center;
}

#fullscreenCarousel .item-3 {
  background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/background-3.png") !important;
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 1680px) {
  .progress-bar {
    top: 50px !important;
  }

  #fullscreenCarousel .item,
  #fullscreenCarousel .item-4 {
    background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/background-1-2.png") !important;
    background-size: cover;
    background-position: center;
  }

  #fullscreenCarousel .item-3 {
    background-image: url("https://static-mass.edupia.vn/edupia-mass/product-cms/resources/uploads/images/2026/02/10/background-1-3.png") !important;
    background-size: cover;
    background-position: center;
  }

  #fullscreenCarousel .item img {
    width: 100% !important;
  }

  #fullscreenCarousel .item .left-col-overlay {
    position: absolute;
    top: 120px;
    left: 30px;
  }

  #fullscreenCarousel .item .right-col-overlay {
    top: 120px !important;
    right: 8%;
  }

  #fullscreenCarousel .item-3 .right-col-overlay {
    top: 130px !important;
    right: 8%;
  }

  #fullscreenCarousel .item-4 .left-col-overlay {
    left: 220px !important;
  }
}

@media screen and (max-width: 1440px) {
  #fullscreenCarousel .item img {
    width: 90% !important;
  }

  #fullscreenCarousel .item .left-col-overlay {
    position: absolute;
    left: 100px;
  }

  #fullscreenCarousel .item .right-col-overlay {
    right: 5%;
  }

  #fullscreenCarousel .item-4 .left-col-overlay {
    left: 100px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
  #fullscreenCarousel .item img {
    width: 80% !important;
  }

  #fullscreenCarousel .item .right-col-overlay .title-slide-1 {
    font-size: 36px;
  }

  #fullscreenCarousel .item-2 .right-col-overlay img,
  #fullscreenCarousel .item-3 .right-col-overlay img {
    width: 60% !important;
  }

  #fullscreenModal .progress-bar {
    width: 1000px !important;
  }
}