/* Preserving all original CSS */

      @charset "UTF-8";
      body,
      div,
      p,
      header,
      footer,
      section,
      h3 {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          line-height: 1;
      }

      button {
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0 none;
      }

      a {
          -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
          -webkit-user-select: none;
          -moz-user-focus: none;
          -moz-user-select: none;
          user-select: none;
      }

      img {
          -webkit-tap-highlight-color: transparent;
          -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
          -webkit-user-select: none;
          -moz-user-focus: none;
          -moz-user-select: none;
          user-select: none;
      }

      html {
          background-color: #363535;
      }

      .swiper {
          width: 100%;
      }

      .benefits-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 20px;
          padding: 25px 0;
      }

      .benefit-card {
          text-align: center;
          padding: 20px;
          border-radius: 12px;
          background: #f9fbfd;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          transition: transform 0.3s ease;
      }

      .benefit-card:hover {
          transform: translateY(-5px);
      }

      .benefit-card h3 {
          color: #2c3e50;
          margin: 15px 0 10px;
      }

      .benefit-card p {
          color: #546e7a;
          font-size: 0.95em;
          line-height: 1.5;
      }

      .app-specs {
          padding: 30px 15px;
          max-width: 800px;
          margin: 0 auto;
      }

      .specs-table {
          overflow-x: auto;
          margin-top: 20px;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      }

      table {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          overflow: hidden;
      }

      thead {
          background: #2c5282;
      }

      th {
          padding: 18px 15px;
          text-align: left;
          color: white;
          font-weight: 600;
      }

      tbody tr:nth-child(even) {
          background: #2d3748;
      }

      td {
          padding: 15px;
          border-bottom: 1px solid #edf2f7;
      }

      td:first-child {
          font-weight: 600;
          color: #edf2f7;
      }

      code {
          background: #ebf8ff;
          color: #2b6cb0;
          padding: 3px 8px;
          border-radius: 4px;
          font-weight: bold;
      }

      .swiper-slide {
          font-size: 18px;
          background: #fff;
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          width: 100%;
      }

      @keyframes switch {
          0%,
          100% {
              transform: scale(1);
          }
          50% {
              transform: scale(0.8);
          }
      }

      .container {
          width: 100%;
          overflow: hidden;
          max-width: 500px;
          margin: 0 auto;
      }

      body {
          max-width: 500px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          margin: 0 auto;
          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
          width: 100%;
          color: #e6e6e6;
      }

      body header {
          height: 68px;
          width: 100%;
          max-width: 500px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 7px;
          background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
          position: fixed;
          top: 0;
          left: 50%;
          transform: translate(-50%);
          z-index: 2;
          max-width: 500px;
          overflow: hidden;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      }

      body header .icon {
          display: flex;
          align-items: center;
      }

      body header .icon img {
          width: 41px;
          height: 41px;
          border-radius: 50%;
          border: 2px solid #ffd71e;
      }

      body header .icon span {
          margin-left: 11px;
          font-size: 22px;
          font-weight: bold;
          color: #ffffff;
          text-shadow: 0 0 5px rgba(255, 215, 30, 0.7);
      }

      body header a {
          text-decoration: none;
          font-weight: 600;
          margin: 0px 5px 0px 5px;
      }

      body header .download {
          background: linear-gradient(to right, #ffd71e, #ffb300);
          background-repeat: no-repeat;
          background-size: cover;
          width: 123px;
          height: 39px;
          font-size: 16px;
          font-weight: bold;
          color: #1a1a1a;
          align-items: center;
          justify-content: center;
          display: inline-flex;
          text-decoration: none;
          border-radius: 25px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;
      }

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

      body header::after {
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          background: linear-gradient(to right, transparent, #ffd71e, transparent);
          position: absolute;
          bottom: 0;
          left: 0;
      }

      .fixDownload {
          position: fixed;
          width: 100%;
          max-width: 500px;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
          z-index: 2;
          cursor: pointer;
      }

      .fixDownload .download {
          width: 100%;
          background: rgba(0, 0, 0, 0.85);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px 0;
          backdrop-filter: blur(5px);
      }

      .fixDownload .download a {
          animation: switch 1s ease-out infinite;
          display: inline-flex;
      }

      .fixDownload .download a img {
          width: 288px;
      }

      body .banner {
          width: 100%;
          height: 100%;
          margin-top: 68px;
          position: relative;
          font-size: 0;
          min-height: 500px;
          cursor: pointer;
          border-bottom: 3px solid #ffd71e;
      }

      body .banner img {
          width: 100%;
          display: block;
      }

      body .banner .more {
          position: absolute;
          top: 14px;
          right: 6px;
          width: 155px;
          height: 39px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #fff;
          text-decoration: none;
          background: linear-gradient(to right, #ff416c, #ff4b2b);
          background-size: 100% 100%;
          border-radius: 25px;
          font-weight: 600;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
          z-index: 1;
      }

      body .statis {
          width: 90%;
          height: 221px;
          padding: 30px 0 0;
          margin: 0 auto;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          margin-top: 20px;
          margin-bottom: 20px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
          backdrop-filter: blur(4px);
          border: 1px solid rgba(255, 255, 255, 0.1);
      }

      body .statis .title {
          width: 100%;
          height: 16px;
          font-size: 22px;
          font-weight: bold;
          color: #ffd71e;
          text-align: center;
          margin-bottom: 25px;
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      body .statis .content {
          height: 79px;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
      }

      body .statis .content .total {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
      }

      body .statis .content .total .num {
          width: 72px;
          height: 41px;
          font-size: 28px;
          font-weight: bold;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      body .statis .content .total .star {
          width: 61px;
          height: 9px;
      }

      body .statis .content .total span {
          font-size: 15px;
          color: #c0c0c0;
      }

      body .statis .content .line {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 77px;
      }

      body .statis .content .line-bar {
          display: flex;
          align-items: center;
      }

      body .statis .content .line-bar span {
          font-size: 14px;
          margin-right: 8px;
          color: #e0e0e0;
          width: 20px;
      }

      body .statis .content .line-bar div {
          height: 13px;
          border-radius: 10px;
      }

      body .statis .content .line-bar .bar-5 {
          background: linear-gradient(to right, #ff416c, #ff4b2b);
          width: 189px;
      }

      body .statis .content .line-bar .bar-4 {
          background: linear-gradient(to right, #aed888, #7dce70);
          width: 112px;
      }

      body .statis .content .line-bar .bar-3 {
          background: linear-gradient(to right, #ffd935, #ffb300);
          width: 23px;
      }

      body .statis .content .line-bar .bar-2 {
          background: linear-gradient(to right, #ffb235, #ff8c00);
          width: 17px;
      }

      body .statis .content .line-bar .bar-1 {
          background: linear-gradient(to right, #ff8c5a, #ff6b4a);
          width: 27px;
      }

      body .statis .bottom {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 27px;
          padding: 0 10px;
      }

      body .statis .bottom .option {
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.1);
          padding: 8px 15px;
          border-radius: 10px;
          transition: all 0.3s ease;
      }

      body .statis .bottom .option:hover {
          background: rgba(255, 215, 30, 0.2);
          transform: translateY(-3px);
      }

      body .statis .bottom .option .bottom-option-title {
          font-size: 13px;
          color: #a0a0a0;
      }

      body .statis .bottom .option .num {
          font-size: 17px;
          font-weight: bold;
          color: #ffd71e;
          line-height: 14px;
          margin: 0 3px 0 7px;
      }

      body .statis .bottom .option img {
          width: 10px;
          height: 9px;
      }

      body .article {
          width: 100%;
          margin-top: 30px;
      }

      body .article .swiper-slide {
          width: 90%;
      }

      body .article .swiper-slide .article-list {
          width: 100%;
          height: 232px;
          background: rgba(255, 255, 255, 0.08);
          border-radius: 15px;
          padding: 18px 14px 0 17px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
      }

      body .article .swiper-slide .article-list:hover {
          transform: translateY(-5px);
          background: rgba(255, 255, 255, 0.12);
      }

      body .article .swiper-slide .article-list .list-header {
          display: flex;
          align-items: center;
      }

      body .article .swiper-slide .article-list .list-header .head {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          border: 2px solid #ffd71e;
          object-fit: cover;
      }

      body .article .swiper-slide .article-list .list-header .info {
          display: flex;
          flex-direction: column;
          margin-left: 19px;
      }

      body .article .swiper-slide .article-list .list-header .info .username {
          font-size: 18px;
          font-weight: bold;
          color: #fff;
      }

      body .article .swiper-slide .article-list .list-header .info .star-address {
          display: flex;
          align-items: center;
          margin-top: 9px;
      }

      body .article .swiper-slide .article-list .list-header .info .star-address .star {
          width: 51px;
          height: 21px;
          background: #ffd935;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 7px;
      }

      body .article .swiper-slide .article-list .list-header .info .star-address .star span {
          margin-right: 5px;
          font-size: 15px;
          color: #333;
          font-weight: bold;
      }

      body .article .swiper-slide .article-list .list-header .info .star-address .star img {
          width: 9px;
          height: 9px;
      }

      body .article .swiper-slide .article-list .list-header .info .star-address .address {
          font-size: 15px;
          font-weight: 400;
          color: #b0b0b0;
      }

      body .article .swiper-slide .article-list .list-content {
          font-size: 14px;
          margin-top: 21px;
          line-height: 1.6;
          color: #d0d0d0;
          padding: 0 5px;
      }

      body .homeItem {
          width: 100%;
          height: 189px;
          padding-top: 30px;
      }

      body .homeItem>.title {
          font-size: 22px;
          font-weight: bold;
          color: #ffd71e;
          text-align: center;
          margin-bottom: 15px;
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      body .homeItem>.content {
          height: 141px;
      }

      body .homeItem>.content .swiper {
          height: 100%;
      }

      body .homeItem>.content .swiper .swiper-wrapper {
          height: auto;
      }

      body .homeItem .swiper-pagination-bullet {
          width: 11px;
          height: 11px;
          background: rgba(255, 255, 255, 0.5);
      }

      body .homeItem .swiper-pagination-bullet-active {
          background-color: #ffa50f;
          width: 30px;
          border-radius: 5px;
      }

      body .homeItem .swiper-slide {
          padding: 4px 0;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      body .homeItem .swiper-slide .box {
          width: 90%;
          height: 99px;
          box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
          display: flex;
          align-items: center;
          padding: 0 0 0 56px;
          background: rgba(255, 255, 255, 0.08);
          border-radius: 15px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
      }

      body .homeItem .swiper-slide .box:hover {
          transform: translateY(-5px);
          background: rgba(255, 255, 255, 0.12);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
      }

      body .homeItem .swiper-slide .title {
          font-size: 16px;
          color: #fff;
          font-weight: bold;
          margin-bottom: 8px;
      }

      body .homeItem .swiper-slide .text {
          display: flex;
          align-items: center;
          font-size: 12px;
          line-height: 16px;
          color: #c0c0c0;
      }

      body .homeItem .swiper-slide .text img {
          width: 12px;
          height: 10px;
          margin-right: 5px;
      }

      body .homeItem .swiper-slide .left {
          display: flex;
          align-items: center;
          margin-right: 30px;
      }

      body .homeItem .slide1 .left img {
          width: 55px;
          height: 43px;
      }

      body .homeItem .slide2 .left img {
          width: 39px;
          height: 43px;
      }

      body .homeItem .slide3 .left img {
          width: 33px;
          height: 43px;
      }

      body .homeItem .slide4 .left img {
          width: 21px;
          height: 55px;
      }

      body .homeItem .slide5 .left img {
          width: 57px;
          height: 67px;
      }

      body .homeItem .slide6 .left img {
          width: 48px;
          height: 52px;
      }

      body .step {
          width: 100%;
          padding: 20px 6px 0;
          margin: 30px 0 10px;
      }

      body .step img {
          width: 100%;
          margin: 8px 0 0 0;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }

      p {
          line-height: 1.5rem;
          margin: 8px 5px 0 0;
          text-transform: capitalize;
          color: #d0d0d0;
          font-size: 14px;
      }

      body footer {
          width: 100%;
          height: 235px;
          background: linear-gradient(to top, #0f0c29, #302b63);
          padding-top: 26px;
          margin-top: 40px;
          border-top: 1px solid #ffd71e;
      }

      body footer .icon {
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          width: 284px;
      }

      body footer .icon img {
          width: 54px;
          height: 28px;
          filter: drop-shadow(0 0 5px rgba(255, 215, 30, 0.5));
      }

      body footer .company {
          margin: 20px auto 0;
          width: 240px;
          display: flex;
          justify-content: space-between;
      }

      body footer .company .link a {
          text-decoration: none;
          color: #fff;
          font-size: 12px;
          font-family: ari-All;
          transition: all 0.3s ease;
      }

      body footer .company .link a:hover {
          color: #ffd71e;
          text-decoration: underline;
      }

      body .privacyPolicy {
          width: 100%;
          padding: 12px 0 40px 0;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 15px;
          margin-top: 20px;
      }

      body .privacyPolicy .content {
          width: 90%;
          margin: auto;
      }

      body .privacyPolicy .content h1 {
          font-size: 16px;
          color: #ffd71e;
          margin-bottom: 15px;
          text-align: center;
      }

      body .privacyPolicy .content .text {
          font-size: 12px;
          color: #d0d0d0;
          line-height: 1.6;
          margin-bottom: 15px;
      }

      body .privacyPolicy .content .text a {
          text-decoration: underline;
          color: #4dabf7;
          transition: all 0.3s ease;
      }

      body .privacyPolicy .content .text a:hover {
          color: #ffd71e;
      }

      body .privacyPolicy .content .text.item {
          font-size: 12px;
          margin-top: 5px;
      }

      body .privacyPolicy .content .text .strong {
          color: #ffd71e;
          font-size: 12px;
          font-weight: bold;
      }

      body .privacyPolicy .listStyle {
          display: flex;
          margin-bottom: 15px;
      }

      body .privacyPolicy .listStyle .left {
          font-size: 12px;
          color: #d0d0d0;
          line-height: 1.6;
      }

      body .privacyPolicy .listStyle .right ul {
          margin-left: 18px;
      }

      body .privacyPolicy .listStyle .right li {
          font-size: 12px;
          color: #d0d0d0;
          list-style: outside;
          list-style-type: circle;
          margin-bottom: 8px;
      }

      body .privacyPolicy .listStyle .right li::marker {
          margin-right: 2px;
          color: #ffd71e;
      }

      body .privacyPolicy .listStyle .right li a {
          text-decoration: underline;
          color: #4dabf7;
      }

      body .privacyPolicy .listStyle.disc {
          margin-bottom: 8px;
      }

      body .privacyPolicy .listStyle.disc .right li {
          list-style-type: disc;
      }

      body .privacyPolicy .listStyle.disc .right li li {
          list-style-type: circle;
      }

      body .privacyPolicy .listStyle.disc .right li .strong {
          color: #ffd71e;
          font-size: 12px;
      }

      table {
          width: 100%;
          border-collapse: collapse;
          margin: 20px 0;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      th,
      td {
          border: 1px solid rgba(255, 255, 255, 0.1);
          padding: 12px;
          text-align: left;
          color: #e0e0e0;
      }

      th {
          background: linear-gradient(to right, #0f0c29, #302b63);
          text-align: center;
          font-weight: bold;
          color: #ffd71e;
          text-transform: uppercase;
      }

      tr:nth-child(even) {
          background-color: rgba(255, 255, 255, 0.05);
      }

      tr:hover {
          background-color: rgba(255, 215, 30, 0.1);
      }

      li {
          line-height: 1.5rem;
          color: #d0d0d0;
          margin-bottom: 8px;
      }

      /* New additions for modern UI */

      .section-title {
          text-align: center;
          font-size: 24px;
          color: #ffd71e;
          margin: 30px 0 20px;
          position: relative;
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      .section-title::after {
          content: "";
          display: block;
          width: 80px;
          height: 3px;
          background: linear-gradient(to right, transparent, #ffd71e, transparent);
          margin: 8px auto;
      }

      .card {
          background: rgba(255, 255, 255, 0.08);
          border-radius: 15px;
          padding: 20px;
          margin: 15px 0;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
      }

      .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
          background: rgba(255, 255, 255, 0.12);
      }

      .badge {
          display: inline-block;
          padding: 4px 10px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: bold;
          margin-right: 8px;
      }

      .badge-primary {
          background: linear-gradient(to right, #3498db, #2c3e50);
          color: white;
      }

      .badge-success {
          background: linear-gradient(to right, #2ecc71, #27ae60);
          color: white;
      }

      .badge-warning {
          background: linear-gradient(to right, #f39c12, #d35400);
          color: white;
      }

      .progress {
          height: 10px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 10px;
          overflow: hidden;
          margin: 10px 0;
      }

      .progress-bar {
          height: 100%;
          border-radius: 10px;
      }

      /* Responsive adjustments */

      @media (max-width: 480px) {
          body .statis .bottom {
              flex-direction: column;
              align-items: center;
          }
          body .statis .bottom .option {
              width: 80%;
              margin-bottom: 10px;
          }
          body .homeItem .swiper-slide .box {
              padding: 0 10px;
              justify-content: center;
          }
          body .homeItem .swiper-slide .left {
              margin-right: 15px;
          }
      }