:root {
      --bg-light: #f5f9ff;
      --primary: #0d6efd;
      --primary-soft: #e2efff;
      --accent: #00b4ff;
      --text-main: #1f2933;
      --text-muted: #6b7280;
      --card-bg: #ffffff;
      --border-soft: #dde7ff;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
    font-family: "Sarabun", sans-serif;
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-main);

    /* พื้นหลังหลายเลเยอร์แบบหรู ๆ */
    background:
        radial-gradient(120% 160% at 0% 0%, #dfeafe 0%, #edf3ff 32%, #f7f9ff 60%, #eef2ff 100%),
        radial-gradient(120% 150% at 100% 0%, #e0f0ff 0%, #f5f8ff 45%, #e7edff 100%),
        linear-gradient(145deg, #f4f8ff 0%, #edf3ff 35%, #f9fbff 100%);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    }
    /* แสงนุ่ม ๆ ตรงกลาง + มืดขอบเล็กน้อย */
    body::before {
    content: "";
    position: fixed;
    inset: -15%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 50%),
        radial-gradient(circle at 10% 80%, rgba(148, 163, 255, 0.16) 0, rgba(148, 163, 255, 0) 55%),
        radial-gradient(circle at 90% 90%, rgba(56, 189, 248, 0.16) 0, rgba(56, 189, 248, 0) 55%),
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0) 60%, rgba(15, 23, 42, 0.06) 100%);
    z-index: -1;
    opacity: 0.95;
    }
    .wrapper {
      max-width: 960px;
      width: 100%;
    }

    .card {
      position: relative;
      background: var(--card-bg);
      border-radius: 24px;
      border: 1px solid var(--border-soft);
      box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.8);
      padding: 32px 24px 28px;
      overflow: hidden;
    }

    @media (min-width: 768px) {
      .card {
        padding: 40px 48px 32px;
      }
    }

    /* แถบ Gradient ด้านบน */
    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      top: -60%;
      background: radial-gradient(circle at 10% 0, rgba(13, 110, 253, 0.24), transparent 55%),
                  radial-gradient(circle at 90% 0, rgba(0, 180, 255, 0.18), transparent 55%);
      opacity: 0.75;
      pointer-events: none;
      z-index: 0;
    }

    /* วงกลมตกแต่ง */
    .bubble {
      position: absolute;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(0, 180, 255, 0.08));
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
      z-index: 0;
      animation: float 10s ease-in-out infinite;
    }

    .bubble.b1 {
      width: 160px;
      height: 160px;
      top: -40px;
      right: -30px;
      animation-delay: 0s;
    }

    .bubble.b2 {
      width: 100px;
      height: 100px;
      bottom: -40px;
      left: 10%;
      animation-delay: 2.5s;
    }

    .bubble.b3 {
      width: 60px;
      height: 60px;
      top: 40px;
      left: -20px;
      animation-delay: 1.2s;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0) translateX(0);
      }
      25% {
        transform: translateY(-8px) translateX(4px);
      }
      50% {
        transform: translateY(4px) translateX(-4px);
      }
      75% {
        transform: translateY(-4px) translateX(2px);
      }
    }

    .content {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 32px;
      align-items: center;
    }

    @media (max-width: 768px) {
      .content {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    .badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #f97316;
      box-shadow: 0 0 0 6px rgba(248, 150, 70, 0.25);
    }

    .badge-label {
      font-weight: 500;
      color: var(--text-main);
    }

    h1 {
      font-size: clamp(28px, 4vw, 34px);
      line-height: 1.2;
      margin-bottom: 10px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #0f172a;
    }

    .subtitle {
      font-size: 15px;
      line-height: 1.6;
      color: var(--text-muted);
      margin-bottom: 18px;
    }

    .highlight {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--primary-soft);
      font-size: 13px;
      color: var(--primary);
      font-weight: 500;
      margin-bottom: 20px;
    }

    .highlight span {
      font-size: 16px;
    }

    .info-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin: 16px 0 24px;
      font-size: 14px;
    }

    .info-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(209, 213, 219, 0.7);
    }

    .info-icon {
      width: 20px;
      flex-shrink: 0;
      font-size: 16px;
      margin-top: 1px;
    }

    .info-text {
      line-height: 1.5;
      color: var(--text-muted);
    }

    .info-text strong {
      color: var(--text-main);
      font-weight: 600;
    }

    .footer-note {
      font-size: 12px;
      color: var(--text-muted);
      opacity: 0.9;
    }

    /* ส่วน illustration ด้านขวา */
    .illustration {
      position: relative;
      min-height: 210px;
    }

    .circle-bg {
      position: absolute;
      inset: 0;
      margin: auto;
      max-width: 260px;
      max-height: 260px;
      background: conic-gradient(from 180deg, #0d6efd 0deg, #00b3ff 110deg, #0ea5e9 200deg, #0d6efd 360deg);
      border-radius: 50%;
      padding: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.95;
    }

    .circle-inner {
      background: rgba(248, 250, 252, 0.98);
      border-radius: inherit;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .ring {
      position: absolute;
      border-radius: 999px;
      border: 1px dashed rgba(148, 163, 184, 0.7);
      inset: 18px;
      animation: spin 24s linear infinite;
      opacity: 0.8;
    }

    .ring::before,
    .ring::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.14);
    }

    .ring::after {
      top: auto;
      bottom: -4px;
      background: var(--primary);
    }

    @keyframes spin {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .monitor {
      position: relative;
      width: 70%;
      max-width: 210px;
      aspect-ratio: 4 / 3;
      border-radius: 18px;
      background: linear-gradient(145deg, #0f172a, #111827);
      box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.7),
        0 0 0 1px rgba(148, 163, 184, 0.35);
      overflow: hidden;
      padding: 10px 12px;
    }

    .monitor-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 10px;
      color: #e5e7eb;
      opacity: 0.9;
    }

    .dots {
      display: flex;
      gap: 4px;
    }

    .dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #4b5563;
    }

    .dot:nth-child(1) { background: #f97373; }
    .dot:nth-child(2) { background: #fbbf24; }
    .dot:nth-child(3) { background: #34d399; }

    .monitor-body {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      font-size: 8px;
      line-height: 1.3;
      color: #e5e7eb;
    }

    .status-card {
      border-radius: 10px;
      padding: 6px;
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(37, 99, 235, 0.06));
      border: 1px solid rgba(129, 140, 248, 0.4);
    }

    .status-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #bae6fd;
      margin-bottom: 3px;
    }

    .status-main {
      font-size: 10px;
      font-weight: 600;
      margin-bottom: 4px;
      color: #eff6ff;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 3px 6px;
      font-size: 8px;
      background: rgba(15, 118, 110, 0.4);
      color: #a7f3d0;
    }

    .status-pill span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
    }

    .status-sub {
      font-size: 8px;
      color: #9ca3af;
      margin-top: 4px;
    }

    .chip {
      position: absolute;
      right: 8px;
      bottom: 8px;
      font-size: 9px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      color: #bfdbfe;
      border: 1px solid rgba(59, 130, 246, 0.6);
      backdrop-filter: blur(6px);
    }

    .stand {
      position: absolute;
      inset: auto 0 -22px;
      margin: auto;
      width: 60%;
      max-width: 140px;
      height: 22px;
      border-radius: 999px;
      background: radial-gradient(circle at 50% 0, rgba(15, 23, 42, 0.6), transparent 70%);
      filter: blur(2px);
      opacity: 0.9;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .tag {
      font-size: 11px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px dashed rgba(148, 163, 184, 0.7);
      color: var(--text-muted);
      background: rgba(255, 255, 255, 0.8);
    }

    .brand {
      margin-top: 16px;
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .brand span {
      opacity: 0.9;
    }

    .brand strong {
      color: var(--primary);
      font-weight: 600;
    }
    /* ============================
   ANIMATIONS
   ============================ */

/* Fade-in ทั้งหน้า */
.card {
  animation: fadeIn 5.8s ;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* หัวข้อ H1 ลอยขึ้นเบา ๆ แบบ smooth */
h1 {
  animation: titleFloat 3.5s ease-in-out infinite;
}

@keyframes titleFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* highlight box กระพริบเบาๆ */
.highlight {
  animation: pulse 2.8s ease-in-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0px rgba(0, 123, 255, 0); }
  50%  { box-shadow: 0 0 14px rgba(13, 110, 253, 0.35); }
  100% { box-shadow: 0 0 0px rgba(0, 123, 255, 0); }
}

/* info-item icon เด้งเบา ๆ */
.info-icon {
  animation: iconBounce 2.8s ease-in-out infinite;
}

@keyframes iconBounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* badge แสดงผลแบบ fade-in ช้า */
.badge {
  animation: fadeIn 1.2s ease-out;
}

/* monitor ด้านขวาหมุนเข้าแบบ scale */
.monitor {
  animation: softPop 0.7s ease-out;
}

@keyframes softPop {
  0%   { opacity: 0; transform: scale(0.85) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.back-btn {
  background: linear-gradient(135deg, #0d6efd, #3b82f6);
  border: none;
  color: #fff;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.25);
  transition: all 0.25s ease;
  font-family: "Sarabun", sans-serif;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.35);
  background: linear-gradient(135deg, #0b5ed7, #2563eb);
}

.back-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(13, 110, 253, 0.25);
}
.back-btn-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}