body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .lotto-card {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 2px;
      margin: 20px auto;
      max-width: 380px;
    }
    .cell {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid black;
      font-size: 18px;
      background-color: white;
      cursor: pointer;
      user-select: none;
    }
    .empty {
      background-color: lightgray;
      cursor: default;
    }
    .marked {
      /*background-color: yellow;*/
    }
    .text-row {
      grid-column: span 9;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      background-color: #ddd;
      padding: 5px;
      margin-top: 5px;
    }
    .lotto-card div.text-row:last-child{
      display: none;
    }
    .alert {
      color: green;
      font-weight: bold;
      margin-top: 10px;
    }




    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      background-color: #fff;
    }

    .lotto-card {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 2px;
      margin: 20px auto;
      max-width: 380px;
    }

    .cell {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      /*background-color: #C3002F; /* đỏ đậm */*/
      
      background-position: 0 0, 22px 22px;
      background-size: 38px 38px;
      border: 1px solid #fff;
      box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
      cursor: pointer;
      user-select: none;
      transition: transform 0.1s ease;
    }
    .cell.empty{
      background-image: radial-gradient(#e44e6a 15%, transparent 16%), radial-gradient(#e44e6a 15%, transparent 16%); 
    }

    .cell:hover {
      transform: scale(1.05);
    }

    .empty {
      background-color: #f8dcdc;
      color: transparent;
      cursor: default;
    }

    .marked {
      /*background-color: #FFEB3B !important;*/
      color: #000 !important;
      font-weight: bold;
      background-image: none;
    }

    .text-row {
      grid-column: span 9;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      color: #C3002F;
      padding: 6px 0;
      background-color: #fff2f2;
      border-radius: 6px;
      margin: 5px 0;
      border: 1px dashed #C3002F;
    }


    .marked {
      position: relative;
      /*background-color: inherit; /* giữ nguyên màu nền theo vé */*/
      color: white;
      z-index: 1;
      overflow: hidden;
    }

    .marked::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 38px;
      height: 38px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      /*background: rgba(255, 255, 255, 0.3);*/
      box-shadow: inset -2px -2px 4px rgba(255,255,255,0.8),
                  inset 2px 2px 4px rgba(0,0,0,0.5);
      backdrop-filter: blur(.5px); /* tạo hiệu ứng kính */
      pointer-events: none;
    }

    .greeting{
      color: #000;
      font-weight: normal !important;
    }
    .play-code{
      font-weight: bold !important;
    }