/* =========================================================
   VIONEX Services — Pro Max UI
   Primary: White | Secondary: Yellow
   Scope: vx-* only
   ========================================================= */

   :root {
       --vx-bg: #ffffff;
       --vx-soft: #fff9e6;
       --vx-card: #ffffff;

       --vx-text: #0f172a;
       --vx-muted: #64748b;

       --vx-yellow: #ffcc00;
       --vx-yellow-2: #ffe27a;

       --vx-border: rgba(15, 23, 42, .10);
       --vx-border-2: rgba(15, 23, 42, .14);

       --vx-r-xl: 22px;
       --vx-r-lg: 18px;
       --vx-r-md: 14px;

       --vx-shadow: 0 20px 46px rgba(15, 23, 42, .10);
       --vx-shadow-2: 0 12px 28px rgba(15, 23, 42, .08);

       --vx-max: 1150px;
       --vx-pad: clamp(14px, 3.2vw, 22px);
       --vx-gap: clamp(12px, 2.2vw, 18px);

       --vx-focus: 0 0 0 4px rgba(255, 204, 0, .25);
   }

   .vx-svc {
       max-width: var(--vx-max);
       margin: 0 auto;
       padding: 18px var(--vx-pad) 50px;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       color: var(--vx-text);
       background:
           radial-gradient(900px 420px at 18% -12%, rgba(255, 204, 0, .18), transparent 55%),
           radial-gradient(900px 420px at 90% 0%, rgba(255, 204, 0, .10), transparent 60%),
           linear-gradient(180deg, var(--vx-bg), var(--vx-bg));
   }

   /* Card */
   .vx-card {
       background: linear-gradient(135deg, var(--vx-soft), var(--vx-card) 48%);
       border: 1px solid var(--vx-border);
       border-radius: var(--vx-r-xl);
       box-shadow: var(--vx-shadow);
       padding: clamp(16px, 3vw, 26px);
   }

   .vx-svc__hero {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 14px;
       margin-bottom: var(--vx-gap);
       position: relative;
       overflow: hidden;
   }

   .vx-svc__hero::after {
       content: "";
       position: absolute;
       inset: -40% -25% auto auto;
       width: 240px;
       height: 240px;
       border-radius: 999px;
       background: radial-gradient(circle at 30% 30%, rgba(255, 204, 0, .35), rgba(255, 204, 0, .05));
       pointer-events: none;
   }

   .vx-title {
       margin: 0;
       font-weight: 950;
       font-size: clamp(22px, 3vw, 34px);
       letter-spacing: -0.02em;
   }

   .vx-subtitle {
       margin: 8px 0 0;
       font-size: 15px;
   }

   .vx-muted {
       color: var(--vx-muted);
   }

   /* Table wrapper */
   .vx-tableWrap {
       width: 100%;
       overflow: auto;
       border-radius: var(--vx-r-lg);
       border: 1px solid var(--vx-border);
       background: #fff;
   }

   /* Table */
   .vx-table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       min-width: 560px;
   }

   .vx-table thead th {
       position: sticky;
       top: 0;
       z-index: 1;
       background: linear-gradient(180deg, rgba(255, 204, 0, .18), rgba(255, 204, 0, .06));
       color: var(--vx-text);
       text-align: left;
       font-size: 13px;
       letter-spacing: .02em;
       font-weight: 950;
       padding: 12px 14px;
       border-bottom: 1px solid var(--vx-border);
   }

   .vx-table tbody td {
       padding: 12px 14px;
       font-size: 14px;
       border-bottom: 1px solid rgba(15, 23, 42, .08);
       vertical-align: top;
   }

   .vx-table tbody tr:hover td {
       background: rgba(255, 204, 0, .06);
   }

   .vx-num {
       width: 70px;
       font-weight: 950;
       white-space: nowrap;
   }

   .vx-name {
       font-weight: 900;
       color: rgba(15, 23, 42, .88);
   }

   /* Button */
   .vx-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 44px;
       padding: 10px 16px;
       border-radius: var(--vx-r-md);
       font-weight: 950;
       border: 1px solid transparent;
       text-decoration: none;
       cursor: pointer;
       transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
       -webkit-tap-highlight-color: transparent;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
   }

   .vx-btn:focus-visible {
       outline: none;
       box-shadow: var(--vx-focus);
   }

   .vx-btn--primary {
       color: #000;
       background: linear-gradient(180deg, var(--vx-yellow-2), var(--vx-yellow));
       border-color: rgba(0, 0, 0, .06);
       box-shadow: 0 12px 26px rgba(255, 204, 0, .24);
   }

   .vx-btn--primary:hover {
       transform: translateY(-1px);
       box-shadow: 0 16px 32px rgba(255, 204, 0, .32);
   }

   /* Empty state */
   .vx-empty {
       padding: 26px 12px;
       display: grid;
       place-items: center;
       gap: 10px;
       text-align: center;
   }

   .vx-empty__icon {
       width: 54px;
       height: 54px;
       border-radius: 18px;
       display: grid;
       place-items: center;
       background: linear-gradient(180deg, var(--vx-yellow-2), var(--vx-yellow));
       box-shadow: 0 14px 26px rgba(255, 204, 0, .25);
       font-size: 22px;
   }

   .vx-empty__text {
       margin: 0;
       font-weight: 850;
   }

   /* Responsive */
   @media (max-width: 720px) {
       .vx-svc__hero {
           flex-direction: column;
           align-items: flex-start;
       }

       .vx-svc__heroRight {
           width: 100%;
       }

       .vx-btn {
           width: 100%;
       }
   }

   /* Motion accessibility */
   @media (prefers-reduced-motion: reduce) {

       .vx-btn,
       .vx-table tbody tr:hover td {
           transition: none;
       }

       .vx-btn:hover {
           transform: none;
       }
   }