@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    table.my-pretty-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      background: #f7f9fc;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
      color: #34495e;
    }

    table.my-pretty-table thead {
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: #ffffff;
    }

    table.my-pretty-table th, table.my-pretty-table td {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e0e6ed;
    }

    table.my-pretty-table tbody tr:nth-child(even) {
      background-color: #e3f2fd;
    }

    table.my-pretty-table tbody tr:hover {
      background-color: #d0f0fd;
    }

    table.my-pretty-table tbody td:nth-child(1) {
      background-color: #fef9e7;
      color: #d68910;
      font-weight: bold;
    }

    table.my-pretty-table tbody td:nth-child(2) {
      background-color: #fdecea;
      color: #e74c3c;
      font-weight: bold;
      position: relative;
    }

    table.my-pretty-table tbody td:nth-child(3) {
      background-color: #e8f8f5;
      color: #16a085;
      font-weight: bold;
    }

    /* Nút Copy trong ô Dàn Số */
    .copy-button {
      display: block;
      background-color: #2575fc;
      color: white;
      padding: 6px 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px auto 0;
      font-size: 12px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;
    }

    .copy-button:hover {
      background-color: #6a11cb;
    }

    /* Thông báo copy thành công */
    .copy-success {
      display: none;
      margin-top: 5px;
      background-color: #2ecc71;
      color: white;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
    }

    @media (max-width: 768px) {
      table.my-pretty-table thead {
        display: none;
      }

      table.my-pretty-table, table.my-pretty-table tbody, table.my-pretty-table tr, table.my-pretty-table td {
        display: block;
        width: 100%;
      }

      table.my-pretty-table tr {
        margin-bottom: 20px;
        padding: 10px;
        background: #ffffff;
        border: 1px solid #ddd;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
      }

      table.my-pretty-table td {
        text-align: center;
        padding: 10px 15px 10px 30%;
        position: relative;
        border: none;
        border-bottom: 1px solid #ddd;
        color: #34495e;
      }

      table.my-pretty-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
        text-align: center;
        font-weight: 600;
        color: #2575fc;
      }

      table.my-pretty-table td:last-child {
        border-bottom: 0;
      }
    }