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

    table.dan-de-bat-tu {
      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.dan-de-bat-tu thead {
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: #ffffff;
    }

    table.dan-de-bat-tu th, table.dan-de-bat-tu td {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e0e6ed;
    }

    table.dan-de-bat-tu tbody tr:nth-child(even) {
      background-color: #e3f2fd;
    }

    table.dan-de-bat-tu tbody tr:hover {
      background-color: #d0f0fd;
    }

    table.dan-de-bat-tu tbody td:nth-child(1) {
      background-color: #fef9e7;
      color: #d68910;
      font-weight: bold;
    }

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

    table.dan-de-bat-tu 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.dan-de-bat-tu thead {
        display: none;
      }

      table.dan-de-bat-tu, table.dan-de-bat-tu tbody, table.dan-de-bat-tu tr, table.dan-de-bat-tu td {
        display: block;
        width: 100%;
      }

      table.dan-de-bat-tu 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.dan-de-bat-tu td {
        text-align: center;
        padding: 10px 15px 10px 30%;
        position: relative;
        border: none;
        border-bottom: 1px solid #ddd;
        color: #34495e;
      }

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

      table.dan-de-bat-tu td:last-child {
        border-bottom: 0;
      }
    }


/* Mẫu. không card view 


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

    table.dan-de-bat-tu {
      width: 96%; 
      max-width: 100%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      background: #ffffff; 
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
      color: #333333; 
    }

    
    table.dan-de-bat-tu thead {
      background: linear-gradient(90deg, #ec4899, #14b8a6); 
      color: #ffffff;
    }

   
    table.dan-de-bat-tu th,
    table.dan-de-bat-tu td {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e0e6ed;
    }

   
    table.dan-de-bat-tu tbody tr:nth-child(even) {
      background-color: #f7f7f7;
    }

    
    table.dan-de-bat-tu tbody tr:hover {
      background-color: #ffe4e6;
    }

    
    table.dan-de-bat-tu tbody td:nth-child(1) {
      background-color: #fffbe5; 
      color: #b45309;
      font-weight: bold;
    }

   
    table.dan-de-bat-tu tbody td:nth-child(2) {
      background-color: #f5e8ff; 
      color: #7e22ce;
      font-weight: bold;
      white-space: normal;     
      word-break: break-word;  
      overflow-wrap: break-word; 
    }

   
    table.dan-de-bat-tu tbody td:nth-child(3) {
      background-color: #e0f7f4; 
      color: #0d9488;
      font-weight: bold;
    }

   
    @media (max-width: 768px) {
      table.dan-de-bat-tu th,
      table.dan-de-bat-tu td {
        padding: 10px;
        font-size: 14px; 
      }
    }
 
                                  
                                  
*/