/* Top Bar */
        body {

          margin: 0;
          font-family: 'Segoe UI', sans-serif;
          background: white;
          padding: 20px;
          text-align: center;

        }

        .top-bar {
          background: linear-gradient(-145deg, rgb(80, 5, 82) 0%, rgb(206, 83, 200) 100%);
          color: white;
          padding: 10px 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .top-bar,
        .phone-info {
          flex-shrink: 0;
        }

        .app-container {
          display: flex;
          flex-direction: column;
          height: 100vh;
        }

        .time {
          font-size: 14px;
        }

        .top-title {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .back-icon {
          font-size: 20px;
          cursor: pointer;
        }

        .delete-icon {
          font-size: 20px;
          cursor: pointer;
        }

        .network-name {
          font-weight: bold;
          font-size: 18px;
        }

        .network-sub {
          font-size: 14px;
        }

        .operator-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 5px;
          padding: 15px 20px;
          border-radius: 10px;
          cursor: pointer;
          transition: background-color 0.3s, transform 0.2s;
          text-decoration: none;
        }

        .operator-row:hover {
          background-color: #f0f0f0;
          transform: scale(1.02);
        }

        .operator-left {
          display: flex;
          align-items: center;
          gap: 10px;
          font-weight: bolder;
        }

        .operator-left h2 {
          margin: 0;
        }

        .operator-right i {
          font-size: 40px;
        }

        .unitel-section {
          max-width: 400px;
          margin: 50px auto;
          text-align: center;
          margin-top: 20px;
        }

        .operator-title {
          font-size: 24px;
          margin-bottom: 20px;
          font-weight: bold;
        }

        .input-label-group {
          position: relative;
          margin-bottom: 30px;
          padding: 0 20px;
        }

        .input-label-group label {
          display: block;
          text-align: left;
          font-size: 18px;
          margin-bottom: 10px;
        }

        .input-group {
          position: relative;
          display: flex;
          align-items: center;
          background-color: #d9d9d9;
          border-radius: 12px;
          padding: 10px 15px;
        }

        .input-group input {
          border: none;
          outline: none;
          font-size: 18px;
          flex: 1;
          background: transparent;
          color: #444;
        }

        .input-icon {
          font-size: 24px;
          color: #aaa;
          margin-left: 10px;
        }

        .continue-button {
          background: rgb(206, 83, 200) 100%;
          color: white;
          font-weight: bold;
          border: none;
          border-radius: 30px;
          padding: 15px 40px;
          font-size: 18px;
          cursor: pointer;
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }

        .continue-button:hover {
          background: rgb(91, 12, 107) 100%;
          transform: scale(1.03);
          box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
        }

        .icon-circle {
          width: 100px;
          height: 100px;
          background-color: red;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 60px;
          margin: 30px auto 15px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .main-message {
          font-size: 22px;
          font-weight: bold;
          color: #111;
          margin-bottom: 10px;
        }

        .sub-message {
          font-size: 18px;
          margin: 0 30px;
          line-height: 1.6;
          color: #111;
        }

        .error-code {
          font-weight: bold;
          font-size: 16px;
          margin-top: 20px;
          color: #333;
        }

        .clock-section {
          margin-top: 25px;
          text-align: center;
        }

        .clock-icon {
          background-color: #c0d3e0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 5px;
          font-size: 20px;
          color: #234;
        }

        .time-text {
          font-size: 16px;
          font-weight: bold;
        }

        .pay-button {
          background: rgb(206, 83, 200) 100%;
          color: white;
          border: none;
          padding: 15px 50px;
          font-size: 16px;
          border-radius: 30px;
          box-shadow: 0 4px 0 #070606;
          cursor: pointer;
          transition: all 0.2s ease;

          margin-top: 25px;
          font-weight: bold;
          
        }

        .pay-button:hover {
          background: linear-gradient(to right, #660fa0, #772dca);
          transform: scale(1.03);
        }

        .success-icon {
          font-size: 80px;
          color: #2ecc71;
          margin-top: 40px;
        }

        .success-text {
          color: #2ecc71;
          font-size: 18px;
          margin-top: 10px;
        }

        .amount {
          font-size: 24px;
          font-weight: bold;
          margin: 5px 0 30px;
        }

        .ad-card {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fff;
          box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          padding: 15px;
          max-width: 500px;
          margin: 0 auto 30px;
          position: relative;
        }

        .ad-content {
          display: flex;
          gap: 10px;
          text-align: left;
        }

        .ad-content img {
          width: 50px;
          height: 50px;
          border-radius: 5px;
        }

        .ad-text h4 {
          color: #c0392b;
          margin: 0;
          font-size: 16px;
        }

        .ad-text p {
          margin: 5px 0 0;
          font-size: 14px;
          color: #333;
        }

        .close-btn {
          position: absolute;
          right: 10px;
          top: 10px;
          background: #003b5c;
          color: white;
          border: none;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          font-size: 14px;
          cursor: pointer;
        }

        .action-buttons {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-bottom: 30px;
        }

        .mini-button {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: white;
          padding: 15px;
          border-radius: 10px;
          box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
          width: 80px;
          font-size: 13px;
        }

        .mini-button i {
          font-size: 20px;
          margin-bottom: 5px;
          color: #426788;
        }

        .mini-button:hover {
          background: linear-gradient(to right, #666268, #aca9af);
          transform: scale(1.03);
        }

        .phone-info {
          text-align: center;
          padding: 20px 10px;
        }

        .phone-info h3 {
          margin: 10px 0 5px;
        }

        .subtitle {
          color: #205080;
          font-size: 14px;
        }

        .phone-number {
          font-size: 24px;
          font-weight: bold;
          color: #1e4b73;
        }

        .balance-badge {
          display: inline-block;
          margin-top: 10px;
          padding: 6px 15px;
          background-color: white;
          color: #205080;
          border-radius: 12px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
          font-size: 14px;
        }

        .back-item {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 10px 20px;
          color: #234;
          font-size: 16px;
          font-weight: bold;
        }

        .plan-list {
          list-style: none;
          padding: 0 15px;
          margin: 0;
        }

        .plan-list li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 5px;
          font-size: 16px;
          border-bottom: 1px solid #ccc;
          transition: background 0.2s;
          color: #0e3a5a;
        }

        .plan-list li:hover {
          background-color: #eaeaea;
          cursor: pointer;
        }

        .plan-list .index {
          width: 20px;
          color: #555;
          margin-right: 8px;
        }

        .scroll_list {
          flex-grow: 1;
          overflow-y: auto;
          padding: 0 10px;
        }

        .payment-section {
          text-align: center;
          padding: 20px 15px;
        }

        .pay-title {
          color: #1e4b73;
          font-size: 22px;
          margin-bottom: 5px;
        }

        .product-label {
          font-size: 14px;
          color: #333;
        }

        .product-name {
          color: #1e4b73;
          font-weight: bold;
          font-size: 18px;
          margin-top: 3px;
        }

        .alert-warning {
          margin: 15px auto;
          background-color: #d7a416;
          color: white;
          padding: 8px 15px;
          border-radius: 8px;
          width: fit-content;
          font-size: 14px;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .phone-label {
          font-size: 14px;
          margin-top: 15px;
        }

        .details-box {
          background: white;
          margin-top: 30px;
          margin-inline: auto;
          border-radius: 16px;
          padding: 15px;
          width: 90%;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .details-header {
          font-size: 14px;
          color: #999;
          text-align: left;
          margin-bottom: 10px;
        }

        .details-content {
          text-align: center;
        }

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

        .label {
          font-size: 13px;
          color: #555;
        }

        .label.red {
          color: #dc3e00;
        }

        .value {
          font-size: 18px;
          font-weight: bold;
          color: black;
        }

        .value.red {
          color: #dc3e00;
        }

        .balance-warning {
          margin-top: 10px;
          font-size: 14px;
          color: #205080;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 6px;
        }

        /* Menu List */
        .menu-list {
            list-style: none;
            padding: 0 15px;
            margin: 0;
        }

        .menu-list li {
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 5px;
            font-size: 18px;
            color: #114477;
            border-bottom: 1px solid #ccc;
            transition: background 0.2s;
        }

        .menu-list li:hover {
            background-color: #eaeaea;
            cursor: pointer;
        }

        .menu-list li span:first-child {
            width: 25px;
            color: #666;
        }