:root {
      --tk-red: #FE2C55;
      --tk-cyan: #25F4EE;
      --tk-gray: #F2F3F5;
      --tk-gray-text: #6B6F76;
      --text: #0f0f0f;
      --sat: env(safe-area-inset-top, 0px);
      --sar: env(safe-area-inset-right, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
      --sal: env(safe-area-inset-left, 0px);
  }

  * {
      box-sizing: border-box;

  }

  body {
      font-family: "TikTok Sans", sans-serif;
      background: #f5f5f5;
      margin: 0;
      padding: 0 8px;
      color: var(--text)
  }

  header {
      position: fixed;
      z-index: 1000;
      background: #fff;
      left: 0;
      right: 0;
      top: 0;
  }

  header .navbar .nav-logo {}

  header .navbar .nav-logo img.header-coin-icon {
      width: 18px;
  }

  #totalCoins {
      font-weight: 400;
      color: var(--tk-gray-text);
  }

  header .navbar .nav-logo-box {
      display: flex;
      gap: 8px;

  }

  header .navbar .nav-logo img {
      width: 4rem;
  }

  .container {
      margin: 78px 0px 0;
      background: #fff;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
      position: relative;
  }

  .logo {
      width: 100px;
      position: absolute;
      left: 10px;
      top: 10px
  }

  .divider {
      margin-top: 70px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 12px
  }

  h1 {
      margin: 8px 0 16px;
      font-size: 20px
  }

  /* Coin packages */
  .package-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: 10px;
  }

  .package,
  .package-custom {
      border: 1px solid transparent;
      border-radius: 10px;
      background: var(--tk-gray);
      box-shadow: none;
      padding: 14px 0;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, transform .08s
  }

  .package:active {
      transform: scale(.99)
  }

  .username-form {
      margin-bottom: 2rem;
      margin-top: 1rem;
  }

  .coin {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 20px;
      font-weight: 800;
      color: var(--text)
  }

  .coin img {
      width: 24px;
      height: auto;
      vertical-align: middle
  }

  .price {
      margin-top: 6px;
      font-size: 14px;
      color: var(--tk-gray-text)
  }

  .package.selected {
      border-color: var(--tk-red);
      background: #FFF1F4;
      box-shadow: inset 0 0 0 2px rgba(254, 44, 85, .06)
  }

  @media (max-width:390px) {
      .package {
          padding: 12px;
          border-radius: 16px
      }

      .coin {
          font-size: 18px
      }

      .price {
          font-size: 13px
      }

      .coin img {
          width: 36px
      }
  }

  .field {
      margin-top: 8px;
      text-align: left
  }

  .field label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600
  }

  .field input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 8px
  }

  .field input[readonly] {
      background: #fafafa;
      cursor: pointer
  }

  /* Payment logos small + label */
  .pmethod-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      /* margin: 14px 0; */
      justify-content: flex-start
  }

  .payment-label {
      font-weight: 600;
      font-size: 14px;
      margin-right: 2px
  }

  .payment-logos {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-start
  }

  .payment-logos img {
      height: 24px;
      width: auto;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 2px 4px;
      flex: 0 0 auto
  }

  .btn {
      margin-top: 6px;
      width: 100%;
      background: #FE2C55;
      color: #fff;
      border: 0;
      border-radius: 10px;
      padding: 12px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer
  }

  .last-purchase {
      display: none;
      /* margin-top: 10px; */
      font-size: 14px;
      color: #333;
      background: #f8f8f8;
      border: 1px solid #eee;
      border-radius: 10px;
      padding: 10px;
      text-align: left
  }

  /* Payment Modal */
  .pm-modal,
  .final-modal {
      position: fixed;
      inset: 0;
      /* top, right, bottom, left = 0 */
      background: rgba(0, 0, 0, 0.45);
      z-index: 1100;
      display: flex;
      align-items: center;
      display: none;
      /* căn giữa theo chiều dọc */
      justify-content: center;
      /* căn giữa theo chiều ngang */
      padding: var(--sat) var(--sar) var(--sab) var(--sal);
      /* safe area */
      box-sizing: border-box;
  }

  .pm-wrap {
      background: #fff;
      border-radius: 16px;
      max-width: 520px;
      margin: 60px 16px;
      padding: 16px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
      position: relative
  }

  .pm-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee
  }

  .pm-title {
      font-size: 20px;
      font-weight: 700
  }

  .pm-close {
      background: transparent;
      border: 0;
      font-size: 22px;
      cursor: pointer
  }

  .pm-list {
      margin: 16px 0;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .pm-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 12px;
      cursor: pointer;
      background: #fff
  }

  .pm-item.active {
      border-color: #FE2C55;
      box-shadow: 0 0 0 2px rgba(254, 44, 85, .18)
  }

  .pm-left {
      display: flex;
      align-items: center;
      gap: 10px
  }

  .pm-radio {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid #bbb;
      position: relative
  }

  .pm-item.active .pm-radio {
      border-color: #FE2C55
  }

  .pm-item.active .pm-radio::after {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: #FE2C55
  }

  .pm-name {
      font-weight: 600
  }

  .pm-right {
      display: flex;
      gap: 10px;
      align-items: center
  }

  .pm-right img {
      height: 22px;
      width: auto;
      object-fit: contain;
      flex: 0 0 auto
  }

  .pm-card {
      display: none;
      margin-top: 12px;
      border: 1px dashed #ccc;
      border-radius: 10px;
      padding: 12px;
      background: #fafafa
  }

  .pm-card .vcard {
      background: linear-gradient(135deg, #FE2C55, #25F4EE);
      color: #fff;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      justify-content: center;
      font-weight: 700
  }

  .pm-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      margin-top: 16px
  }

  .pm-total {
      font-weight: 700
  }

  .pm-pay {
      background: #FE2C55;
      color: #fff;
      border: 0;
      border-radius: 10px;
      padding: 12px 20px;
      flex: 1;
      font-weight: 700;
      cursor: pointer
  }

  /* Loading */
  .loading-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 1200;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 16px;
  }

  .spinner-box {
      /* animation: spin 1s linear infinite; */
      background: #FFF;
      width: 100%;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 10px;

  }

  .spinner {

      padding: 24px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 60px;
      width: 100%;
  }

  .spinner img {
      width: 60px;
      position: absolute;
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }

  /* Success */

  .final-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
      text-align: center
  }

  .final-close {
      position: absolute;
      right: 10px;
      top: 8px;
      background: transparent;
      border: 0;
      font-size: 22px;
      cursor: pointer
  }

  .check {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: #2ecc71;
      position: relative;
      margin-bottom: 8px
  }

  .check::after {
      content: "";
      position: absolute;
      left: 18px;
      top: 13px;
      width: 20px;
      height: 12px;
      border: 4px solid #fff;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg)
  }

  .final-title {
      margin: 6px 0 4px 0;
      font-weight: 600;
  }

  .final-details {
      margin-top: 8px;
      /* font-size: 15px; */
      color: var(--tk-gray-text);
  }



  /* Keypad overlay (smooth) */
  .qty-sheet {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .0);
      z-index: 1200;
      transition: background .25s ease
  }

  .qty-sheet.show {
      background: rgba(0, 0, 0, .45)
  }

  .qty-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      padding: 12px 0 18px;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
      transform: translateY(100%);
      transition: transform .25s ease
  }

  .qty-sheet.show .qty-panel {
      transform: translateY(0)
  }

  /* .qty-handle {
      width: 44px;
      height: 5px;
      background: #ddd;
      border-radius: 999px;
      margin: 0 auto 10px
  } */

  .qty-title {
      font-weight: 700;
      margin: 0;
      text-align: center
  }

  .qty-range {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #999;
      font-size: 13px;
      margin-bottom: 8px
  }

  .qty-range img {
      width: 18px
  }

  .qty-display {
      width: 100%;
      border: 1px solid #ececec;
      border-radius: 10px;
      padding: 16px 12px;
      text-align: left;
      font-weight: 700;
      font-size: 20px;
      color: #333;
      background: #fff
  }

  .qty-display img {
      width: 24px;
  }

  .qty-keypad {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
  }

  .qty-key {
      padding: 14px 0;
      background: #f3f3f5;
      border-radius: 10px;
      font-weight: 700;
      font-size: 18px;
      box-shadow: inset 0 -1px 0 #ececec;
      user-select: none;
      text-align: center
  }

  .qty-key:active {
      transform: scale(.98);
      background: #e8e8ec
  }

  .qty-key.gray {
      background: #ececec
  }

  .qty-row {
      display: flex;
      justify-content: space-between;
      align-items: center
  }

  .qty-note {
      color: #e91e63;
      font-weight: 600;
      font-size: 14px
  }

  .qty-total {
      font-weight: 700
  }

  .qty-paybar {
      display: flex;
      gap: 10px;
      margin-top: 8px
  }

  .qty-paybtn {
      flex: 1;
      background: #FE2C55;
      color: #fff;
      border: 0;
      border-radius: 10px;
      padding: 12px 10px;
      font-weight: 700;
      text-align: center
  }

  .final-btn {
      flex: 1;
      background: #FE2C55;
      color: #fff;
      border: 0;
      border-radius: 10px;
      padding: 12px 28px;
      font-weight: 700;
      text-align: center;
      max-width: 200px;

  }

  /* === BEGIN: Payment method label + 6 logos in one row === */
  .pmethod-wrap {
      display: flex;
      align-items: flex-start;
  }

  .payment-label {
      display: block;
      font-size: 13px !important;
      font-weight: 600;
      margin-bottom: 4px;
  }

  .payment-logos {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      width: 100%;
      gap: 4px !important;
  }

  .payment-logos img {
      height: 18px !important;
      width: auto !important;
      object-fit: contain !important;
  }

  @media (min-width:421px) {
      .payment-logos img {
          height: 24px !important;
      }
  }

  /* === END overrides === */

  /* === BEGIN: Fix Payment method row (label on top, 6 logos one row, no wrap) === */
  .pmethod-wrap {
      display: flex;
      align-items: flex-start;
      width: 100%;
  }

  .payment-label {
      display: block;
      font-size: 13px !important;
      font-weight: 600;
      margin-bottom: 6px;
      text-align: left;
  }

  .payment-logos {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      justify-content: flex-start !important;
      width: 100%;
      overflow: hidden;
  }

  .payment-logos img {
      height: 20px !important;
      width: auto !important;
      object-fit: contain !important;
      border-radius: 6px;
      padding: 1px 3px;
      border: 1px solid #e5e5e5;
      background: #fff;
  }

  @media (max-width: 420px) {
      .payment-logos img {
          height: 16px !important;
          padding: 1px 2px !important;
      }
  }

  /* === END === */

  /* === BEGIN: Coin packages grid 3x3 === */
  .package-list {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
  }

  .package {
      padding: 10px 0 !important;
  }

  /* === END === */

  /* === BEGIN: Payment method bar === */
  .pmethod-wrap {
      display: flex;
      align-items: flex-start;
      width: 100%;
  }

  .payment-label {
      display: block;
      font-size: 13px !important;
      font-weight: 600;
      margin-bottom: 4px;
      text-align: left;
      white-space: nowrap;
  }

  .payment-logos {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      width: 100%;
  }

  .payment-logos img {
      height: 20px !important;
      width: auto !important;
      object-fit: contain !important;
  }

  /* === END === */

  /* === BEGIN: Success modal compact 16:9 === */
  .final-modal .final-card {
      /* width: 260px !important;
      height: 146px !important; */
      /* ~16:9 ratio */
      margin: auto 20px;
      padding: 12px !important;
      border-radius: 12px !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .final-modal .final-title {
      margin-top: 8px;
  }

  .final-modal .final-details {
      text-align: center;
      margin-bottom: 1rem;
  }

  .final-modal .check {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      background: #2ecc71 !important;
      position: relative;
      margin-bottom: 8px;
  }

  .final-modal .check::after {
      content: "";
      position: absolute;
      left: 14px;
      top: 12px;
      width: 16px;
      height: 10px;
      border: 3px solid #fff;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
  }

  /* === END === */

  /* === BEGIN: Mobile coin tiles fit & smaller corner radius === */
  .package {
      border-radius: 10px !important;
  }

  /* less rounded globally */

  @media (max-width: 420px) {
      .package-list {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;

          /* tighter gaps */
      }

      .package {
          /* smaller padding to avoid overflow */
          border-radius: 12px !important;
          /* less rounded on mobile */
      }

      .coin img {
          width: 1rem !important;
      }

      /* smaller coin icon */
      .coin {
          font-size: 14px !important;
      }

      /* smaller number */
      .price {
          font-size: 11px !important;
      }

      /* smaller USD price */
  }

  /* === END === */

  /* === BEGIN: Fix TikTok logo background === */
  .logo-tiktok img {
      background: transparent !important;
      mix-blend-mode: multiply;
      filter: brightness(1.05) contrast(1.2);
  }

  /* === END === */

  /* === BEGIN: Ensure USD price shows under each coin tile === */
  .package {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }

  .package .coin {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }

  .package .price,
  .package-custom .price {
      display: block !important;
      margin-top: 4px !important;
      font-size: 12px !important;
      line-height: 1.1 !important;
      color: var(--tk-gray-text, #6B6F76) !important;
  }

  @media (max-width:420px) {

      .package .price,
      .package-custom .price {
          font-size: 11px !important;
      }
  }

  /* === END === */

  footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #FFF;
      padding: 12px;
      z-index: 1;
      box-shadow: 0 -2px 20px rgba(0, 0, 0, .08);
  }

  .pty-headerbox {
      padding: 0 14px 12px;
      border-bottom: 1px solid rgba(22, 24, 35, 0.2);
      margin-bottom: 24px;
  }

  .qty-content {
      padding: 0 14px;
  }

  .pm-account {
      border-bottom: 1px solid #eee;
      padding: 16px 0;
  }

  .color-gray {
      color: var(--tk-gray-text, #6B6F76) !important;
  }

  .color-primary {
      color: var(--text) !important;
  }

  .pm-method-visa-logo {
      width: 36px !important;
  }

  .field input#tiktokId {
      font-size: 16px;
  }

  #pmUsername {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-direction: row;
      text-align: center;
  }

  #pmUsername img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-bottom: 4px;
  }

  /* .input-error {
      color: #dc2626 !important;
      -webkit-text-fill-color: #dc2626 !important;
  } */


  @keyframes shake {

      0%,
      100% {
          transform: translateX(0);
      }

      25% {
          transform: translateX(-4px);
      }

      75% {
          transform: translateX(4px);
      }
  }