body {
      font-family: 'Noto Sans Thai', sans-serif !important;
      background: linear-gradient(135deg, #f0f4f8, #e8f0fe, #f3e5f5);
      min-height: 100vh;
    }

    /* Navbar */
    .navbar {
      background: linear-gradient(90deg, #4A00E0, #8E2DE2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .navbar-brand, .nav-link {
      color: #fff !important;
      font-weight: 500;
    }
    .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 0.5rem;
    }
    .navbar-logo {
      height: 44px;
      width: 44px;
      object-fit: cover;
      border-radius: 50%;
    }

    /* Header */
    h1 {
      text-align: center;
      font-size: 42px;
      margin: 30px 0 20px 0;
      color: #4A00E0;
      text-shadow: 2px 2px 6px rgba(0,0,0,0.1);
      animation: fadeInDown 1s ease;
    }

    @keyframes fadeInDown {
      from {opacity:0; transform: translateY(-30px);}
      to {opacity:1; transform: translateY(0);}
    }

    /* Table */
    table {
      width: 90%;
      margin: 30px auto;
      border-collapse: separate;
      border-spacing: 0;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      animation: fadeIn 1.2s ease;
    }

    @keyframes fadeIn {
      from {opacity:0; transform: translateY(20px);}
      to {opacity:1; transform: translateY(0);}
    }

    thead {
      background: linear-gradient(90deg, #9826e3, #6a1b9a);
      color: white;
    }

    thead th {
      padding: 15px;
      font-weight: bold;
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.5px;
    }

    tbody td {
      padding: 14px;
      text-align: center;
      vertical-align: middle;
      font-size: 15px;
      transition: all 0.3s;
    }

    tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tbody tr:hover {
      background: linear-gradient(90deg, #f3e5f5, #ede7f6);
      transform: scale(1.01);
      box-shadow: inset 0 0 12px rgba(150, 0, 200, 0.15);
    }

    /* Icon */
    a.icon {
      display: inline-block;
      font-size: 24px;
      color: #00B5CC;
      transition: all 0.3s ease-in-out;
    }
    a.icon:hover {
      color: #9826e3;
      transform: scale(1.3) rotate(5deg);
    }

    /* Pagination */
    .btn-pagination {
      border: 1px solid #42a5f5;
      color: #1976d2;
      font-weight: 500;
      border-radius: 30px;
      padding: 6px 16px;
      font-size: 14px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: all 0.25s ease;
    }
    .btn-pagination:hover {
      background: #e3f2fd;
      color: #0d47a1;
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    #pageIndicator {
      font-size: 14px;
      color: #4A00E0;
    }

    /* Footer */
    footer {
      background: linear-gradient(90deg, #263238, #37474f);
      color: #fff;
      margin-top: 40px;
    }
    footer a {
      color: #90caf9;
      text-decoration: none;
    }
    footer a:hover {
      text-decoration: underline;
    }