body {
    background-color: #f3f3f3;
    margin: 0;
    padding: 20px;
    padding-top: 50px; /* Added padding top 50px */
    font-family: Arial, sans-serif;
  }
  .coupon-cell {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 0 auto;
  }
  .voucher-code {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    /* Animated red-yellow gradient */
    background: linear-gradient(90deg, #ff0000, #ffd700);
    background-size: 200% 200%;
    animation: redYellowGradient 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @keyframes redYellowGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .btn-copy {
    margin-bottom: 15px;
  }
  .qr-code {
    margin-top: 15px;
  }
  .book-title {
    display: block; /* ensure it's block-level */
    margin: 0 auto; /* center align horizontally */
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(45deg, #ff0000, #0000ff, #ff0000);
    background-size: 200% 200%;
    animation: gradient-animation 5s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
  }
  @keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  /* Fireworks effect on hover */
  .book-title:hover:after {
    content: "";
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%);
    transform: translate(-50%, -50%) scale(0);
    animation: fireworks 0.8s ease-out forwards;
    z-index: -1;
  }
  @keyframes fireworks {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  }
  .app-instructions figure img {
    border: 2px solid #f1f1f1;
  }
  .rating-stars {
    color: #ffc107; /* Màu vàng cho sao */
    font-size: 1.2em;
  }
  .store-links {
    margin-top: 10px;
  }
  .store-links a {
    color: #007bff;
    text-decoration: underline;
    margin: 0 5px;
  }
  .code-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 20px 0;
  }
  
  .book-cover-container {
    position: relative;
    padding: 3px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ff0000, #ffd700, #ff0000);
    background-size: 200% 200%;
    animation: gradientBorder 3s linear infinite;
  }

  .book-cover {
    height: 150px;
    width: auto;
    object-fit: contain;
    border-radius: 5px;
    display: block;
  }

  @keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .qr-code img {
    height: 150px;
    width: 150px;
  }

  .code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .rating-stars {
              display: inline-flex;
              gap: 2px;
              }

              .rating-stars i {
              color: #ffd700;
              filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
              animation: starPulse 2s ease-in-out infinite;
              }

              /* Apply different animation delays to each star */
              .rating-stars i:nth-child(1) { animation-delay: 0.0s; }
              .rating-stars i:nth-child(2) { animation-delay: 0.4s; }
              .rating-stars i:nth-child(3) { animation-delay: 0.8s; }
              .rating-stars i:nth-child(4) { animation-delay: 1.2s; }
              .rating-stars i:nth-child(5) { animation-delay: 1.6s; }

              @keyframes starPulse {
              0% {
                  transform: scale(1);
                  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
              }
              50% {
                  transform: scale(1.2);
                  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
              }
              100% {
                  transform: scale(1);
                  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
              }
              }

          @font-face {
              font-family: "SF Pro Display";
              font-style: normal;
              font-weight: 400;
              src: local("SF Pro Display"), url("https://s3-sgn10.fptcloud.com/bookascdn/assets/SFPRODISPLAYREGULAR.woff") format("woff");
          }

          @font-face {
              font-family: "SF Pro Display";
              font-style: normal;
              font-weight: 500;
              src: local("SF Pro Display"), url("https://s3-sgn10.fptcloud.com/bookascdn/assets/SFPRODISPLAYMEDIUM.woff") format("woff");
          }

          @font-face {
              font-family: "SF Pro Display";
              font-style: normal;
              font-weight: 600;
              src: local("SF Pro Display"), url("https://s3-sgn10.fptcloud.com/bookascdn/assets/SFPRODISPLAYBOLD.woff") format("woff");
          }

          * {
              margin: 0;
              padding: 0;
          }

          html {
              touch-action: pan-x pan-y;
              /* min-height: calc(100% + env(safe-area-inset-top)); */
              padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
          }

          @media screen and (orientation: landscape) {
              html {
                  /* min-height: calc(100% + env(safe-area-inset-top)); */ padding: 0;
              }
          }

          html, body {
              height: auto; /* Changed from calc( 99vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) ); */
              width: 100%;
              overflow: auto; /* Changed from hidden to auto */
              background: #fff;
              color: #28282b;
              text-align: center;
              font-family: "SF Pro Display";
              font-size: 16px;
          }

          .backguide {
              height: 100%;
              width: 100%;
              flex-direction: column;
              align-items: center;
              justify-content: center;
          }

          .backguide .footer {
              width: 64%;
              height: 3rem;
              padding-top: 2.5rem;
          }

          .backguide .enter {
              height: 3rem;
              width: calc(100% - 32px);
              background: #0068ff;
              border: 0;
              color: white;
              border-radius: 8px;
              font-size: 1rem;
          }

          .backguide .zmp-brand {
              position: absolute;
              bottom: 1rem;
              left: 0rem;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              /* padding-bottom: env(safe-area-inset-bottom); */
              color: #667685;
              font-weight: 500;
          }

          .backguide .zmp-brand p {
              margin-left: 0.33rem;
          }

          .backguide .tips {
              margin-top: 1.29rem;
              line-height: 0.2rem;
          }

          .backguide .icon {
              width: 3rem;
              height: 3rem;
              border-radius: 50%;
          }

          .backguide .appname {
              margin-top: 1rem;
              color: #27272a;
              font-weight: 500;
          }

          .main {
              text-align: center;
              padding: 1rem;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              height: 100vh;
              height: var(--window-height);
          }

          .brand {
              margin-top: 0.5rem;
              color: #99a3ad;
          }

          .subject {
              margin-top: 0.5rem;
              font-size: 1.2rem; /* Reduced font size */
              font-weight: 600;
              white-space: nowrap; /* Prevent text from wrapping */
              overflow: hidden; /* Hide overflowing text */
              text-overflow: ellipsis; /* Show ellipsis (...) for hidden text */
          }

          .preview {
              margin: 1rem 0;
              position: relative;
              flex: 1;
              /* overflow: hidden; */
          }

          .preview .content {
              position: relative;
              margin: 0 1rem;
              height: 100%;
          }

          .preview .bg {
              width: 100%;
              position: relative;
              max-width: 500px;
          }

          .preview .icon {
              position: absolute;
              display: block;
              border-radius: 21%;
          }

          .preview .title {
              position: absolute;
              text-align: center;
              font-weight: 400;
          }

          .preview .title p {
              overflow: hidden;
              text-overflow: ellipsis;
          }

          .preview #step-3 .icon {
              width: 16%;
              left: 4%;
              bottom: 73.56%;
          }

          .preview #step-2 .icon {
              width: 10%;
              left: 7%;
              bottom: 86%;
          }

          .preview #step-3 .title {
              left: 24%;
              top: 19%;
              font-size: 0.6rem;
          }

          .preview #step-2 .title {
              left: 24%;
              text-align: left;
              font-size: 0.4rem;
              bottom: 89%;
          }

          .preview .icon.small {
              width: 2.75rem;
              height: 2.75rem;
              left: 14.4rem;
              top: 14rem;
          }

          .preview .title.small {
              width: 0.16rem;
              left: 0.78rem;
              top: 1.266rem;
          }

          @media only screen and (min-height: 1024px) {
              .preview #step-3 .title {
                  font-size: 0.8rem;
              }

              .preview #step-2 .title {
                  font-size: 0.6rem;
              }
          }

          .guide {
              width: 100%;
              left: 0;
              max-width: 800px;
              margin-left: auto;
              margin-right: auto;
          }

          .guide .content {
              position: relative;
              z-index: 20;
              padding: 0 0.5rem;
              margin: 0 auto;
              border-radius: 0.5rem;
              background: #f7f7f7;
              margin: 0 1rem;
          }

          .guide .tips {
              position: relative;
              z-index: 20;
              text-align: left;
              display: flex;
              flex-direction: row;
              align-items: center;
              padding: 1rem 0;
          }

          .guide .tips:first-child {
              border-bottom: 1px solid #e4e8ec;
          }

          .guide .text {
              width: 100%;
              font-size: 15px;
          }

          .guide .icon {
              margin: auto;
          }

          .guide .arrow {
              width: auto;
              height: 1.5rem;
              left: 50%;
              transform: translateX(-50%);
              z-index: 10;
              margin-top: 0.5rem;
          }

          .ios-guide {
              width: 100vw;
              height: 100vh;
              height: var(--window-height);
          }

          .ios-guide .center {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 0 1rem;
          }

          .ios-guide .text {
              font-size: 1rem;
              color: #001a33;
              font-family: "SF Pro Display";
              font-weight: normal;
              text-align: center;
          }

          .ios-guide .safari-logo {
              width: 3.5rem;
              height: 3.5rem;
              display: block;
              object-fit: contain;
              margin-bottom: 1.5rem;
          }

          .iphone {
              position: relative;
              width: 100%;
              height: 100%;
              margin: auto;
              box-sizing: border-box;
          }

          .iphone-frame {
              position: relative;
              height: 100%;
              background-image: url("https://s3-sgn10.fptcloud.com/bookascdn/assets/iphone-frame.png");
              background-size: contain;
              background-repeat: no-repeat;
              margin: auto;
              box-sizing: border-box;
          }

          .step {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 100%; /* Start from below the screen */
              left: 50%;
              transform: translate(-50%, -50%);
              overflow: hidden;
              border-radius: 0.5rem;
              opacity: 0;
              transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
          }

          .iphone .screen .step.active {
              top: 50%; /* Slide up to the center */
              opacity: 1; /* Make visible */
          }

          .iphone .screen {
              position: absolute;
              left: 50%;
              width: 90%;
              height: 96%;
              top: 50%;
              overflow: hidden;
              border-radius: 0.5rem;
              left: 50%;
              transform: translate(-50%, -50%);
              box-sizing: border-box;
              background: black;
          }

          .iphone .screen .step .step-img {
              width: 100%;
              height: 100%;
              object-fit: contain; /* Ensure the image scales down to fit */
              object-position: bottom;
          }

          .touch {
              position: absolute;
              content: "";
              width: 15%;
              padding-top: 15%;
              border-radius: 100%;
              background-color: transparent;
              visibility: hidden;
          }

          .step-active .touch {
              visibility: visible;
              animation: press-animation 0.25s ease-in-out;
          }

          .touch-step-1 {
              bottom: 3%;
              left: 42.5%;
          }

          .touch-step-3 {
              right: 3%;
              top: 6%;
          }

          .touch-step-2 {
              bottom: 16.5%;
              right: 4%;
          }

          .hand-touch {
              position: absolute;
              left: 100%;
              bottom: 0;
              width: 20%;
              height: auto;
          }

          .hand-touch.step-1 {
              bottom: -5%;
              left: 40%;
              animation: hand-touch-step-1 0.5s ease-in-out;
          }

          .hand-touch.step-2 {
              bottom: 8%;
              left: 76%;
              animation: hand-touch-step-2-press 0.5s ease-in-out;
          }

          .hand-touch.step-3 {
              left: 75%;
              bottom: 75%;
              animation: hand-touch-step-3 0.5s linear;
          }

          .hand-touch.swipe-up {
              bottom: 20%;
              left: 35%;
              animation: hand-swipe-up 0.5s ease;
          }

          @keyframes hand-swipe-up {
              0% {
                  bottom: -5%;
                  left: 40%;
              }

              70% {
                  bottom: -5%;
                  left: 40%;
              }

              100% {
                  bottom: 20%;
                  left: 35%;
              }
          }

          @keyframes hand-touch-step-1 {
              0% {
                  left: 100%;
                  bottom: 0;
              }

              100% {
                  bottom: -5%;
                  left: 40%;
              }
          }

          @keyframes hand-touch-step-2 {
              0% {
                  bottom: 20%;
                  left: 35%;
              }

              100% {
                  bottom: 8%;
                  left: 76%;
              }
          }

          @keyframes hand-touch-step-3 {
              0% {
                  bottom: 8%;
                  left: 76%;
              }

              100% {
                  left: 75%;
                  bottom: 75%;
              }
          }

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

              100% {
                  transform: translate(-50%, -50%) scale(0.9, 0.9);
                  filter: brightness(50%);
              }
          }

          @keyframes slide-up {
              0% {
                  transform: translate(-50%, 50%);
                  opacity: 1;
                  background: transparent;
              }

              99% {
                  background: transparent;
              }

              100% {
                  transform: translate(-50%, -50%);
                  opacity: 1;
              }
          }

          @keyframes sheet-open {
              0% {
                  transform: translate(-50%, 50%);
                  opacity: 1;
                  background: transparent;
              }

              100% {
                  transform: translate(-50%, 0%);
                  opacity: 1;
                  background: transparent;
              }
          }

          @keyframes sheet-swipe-up {
              0% {
                  transform: translate(-50%, 0%);
                  opacity: 1;
              }

              100% {
                  transform: translate(-50%, -50%);
                  opacity: 1;
              }
          }

          @keyframes press-animation {
              0% {
                  opacity: 0.5;
                  background-color: #0168ff;
                  scale: 1;
              }

              50% {
                  opacity: 0.2;
                  background-color: #0168ff;
                  scale: 0.9;
              }

              100% {
                  opacity: 0.5;
                  background-color: #0168ff;
                  scale: 1;
              }
          }

          @keyframes step-inactive {
              0% {
                  opacity: 1;
              }

              100% {
                  opacity: 0;
              }
          }

          @keyframes invisible {
              0% {
                  visibility: visible;
              }

              100% {
                  visibility: hidden;
              }
          }

          .touch-finger {
              position: absolute;
              width: 80px;
              height: 80px;
              border-radius: 50%;
              pointer-events: none; /* Prevent interference with clicks */
              opacity: 0;
              animation: touch-move 0.5s ease-out forwards, touch-fade-in 0.3s ease-in forwards;
              transform: translate(-50px, -50px); /* Shift to bottom-left */
          }

          @keyframes touch-fade-in {
              to {
                  opacity: 1;
              }
          }

          .touch-animation {
              position: absolute;
              border-radius: 50%;
              border: 2px solid rgba(222, 10, 10, 0.5); /* Ripple border */
              opacity: 0;
              animation: touch-ripple 1s ease-out;
              pointer-events: none; /* Prevent interference with clicks */
          }

          .touch-finger {
              position: absolute;
              width: 40px; /* Reduced size */
              height: 40px; /* Reduced size */
              border-radius: 50%;
              background-color: rgba(222, 10, 10, 0.7); /* Finger color */
              pointer-events: none; /* Prevent interference with clicks */
              opacity: 0;
              animation: touch-move 0.5s ease-out forwards, touch-fade-in 0.3s ease-in forwards;
              transform: translate(-20px, -20px); /* Shift to center */
          }

          .touch-finger img {
              width: 100%;
              height: 100%;
              object-fit: contain;
          }

          @keyframes touch-move {
              0% {
                  transform: translate(-20px, -20px) translate(-10px, 10px); /* Start 10px away at 45 degrees */
              }

              100% {
                  transform: translate(-20px, -20px); /* Move to the center of the touch-container */
              }
          }

          @keyframes touch-ripple {
              0% {
                  transform: scale(0);
                  opacity: 1;
              }

              100% {
                  transform: scale(50);
                  opacity: 0;
              }
          }

          @keyframes touch-fade-in {
              to {
                  opacity: 1;
              }
          }

          .touch-container {
              position: absolute;
              width: 0;
              height: 0;
              transform: translate(-50%, -50%); /* Center the touch container */
          }

          .touch-animation {
              position: absolute;
              border-radius: 50%;
              border: 2px solid rgba(222, 10, 10, 0.5); /* Ripple border */
              opacity: 0;
              animation: touch-ripple 1s ease-out;
              pointer-events: none; /* Prevent interference with clicks */
          }

          .touch-finger {
              position: absolute;
              width: 40px; /* Reduced size */
              height: 40px; /* Reduced size */
              border-radius: 50%;
              background-color: rgba(222, 10, 10, 0.7); /* Finger color */
              pointer-events: none; /* Prevent interference with clicks */
              opacity: 0;
              animation: touch-move 0.5s ease-out forwards, touch-fade-in 0.3s ease-in forwards;
              transform: translate(-20px, -20px); /* Shift to center */
          }

          .touch-finger img {
              width: 100%;
              height: 100%;
              object-fit: contain;
          }

          @keyframes touch-move {
              0% {
                  transform: translate(-20px, -20px) translate(-10px, 10px); /* Start 10px away at 45 degrees */
              }

              100% {
                  transform: translate(-20px, -20px); /* Move to the center of the touch-container */
              }
          }

          @keyframes touch-ripple {
              0% {
                  transform: scale(0);
                  opacity: 1;
              }

              100% {
                  transform: scale(50);
                  opacity: 0;
              }
          }

          @keyframes touch-fade-in {
              to {
                  opacity: 1;
              }
          }

          .subject-container {
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .player-button {
              margin-right: 10px;
          }

          .player-button button {
              background: none;
              border: none;
              padding: 0;
              cursor: pointer;
          }

          .player-button svg {
              width: 40px;
              height: 40px;
          }

          .download-button {
              display: inline-block;
              padding: 12px 24px;
              font-size: 1rem;
              font-weight: bold;
              text-align: center;
              text-decoration: none;
              color: #fff;
              background: linear-gradient(45deg, #007bff, #6610f2);
              border: none;
              border-radius: 50px;
              cursor: pointer;
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
              position: relative;
              overflow: hidden;
          }

          .download-button:hover {
              transform: translateY(-2px);
              box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
          }

          .download-button::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 200%;
              height: 100%;
              background: linear-gradient(45deg, #007bff, #6610f2, #e83e8c, #dc3545, #fd7e14, #ffc107, #28a745, #20c997);
              background-size: 200% 200%;
              animation: gradientAnimation 8s linear infinite;
              z-index: -1;
              border-radius: 50px;
          }

          @keyframes gradientAnimation {
              0% {
                  background-position: 0 0;
              }
              100% {
                  background-position: 100% 0;
              }
          }