@charset "utf-8";
/* CSS Document */
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');
    
    * {
      font-family: 'Noto Sans Thai', sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #1BC2F5 0%, #2787F5 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    .glass-effect {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }
    
    .nav-button {
      background: linear-gradient(145deg, #ffffff, #f0f0f0);
      border: none;
      box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: hidden;
    }
    
    .nav-button:hover {
      transform: translateY(-2px);
      box-shadow: 25px 25px 80px #bebebe, -25px -25px 80px #ffffff;
      background: linear-gradient(145deg, #667eea, #764ba2);
      color: white;
    }
    
    .nav-button:active {
      transform: translateY(0px);
    }
    
    .nav-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    
    .nav-button:hover::before {
      left: 100%;
    }
    
    .iframe-container {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(15px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      overflow: hidden;
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    .iframe-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 35px 55px rgba(0, 0, 0, 0.15);
    }
    
    #contentFrame {
      width: 100%;
      height: 3500px;
      border: none;
      border-radius: 10px;
	  	  }
    
    .floating-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    .loading-spinner {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }
    
    .spinner {
      width: 50px;
      height: 50px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .particle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      pointer-events: none;
      animation: particle-float 6s linear infinite;
    }
    
    @keyframes particle-float {
      0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
      }
    }
    
   
    
    @keyframes pulse {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }
    }
    
    .glow-text {
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    
    @media (max-width: 768px) {
	.sim-row { flex-wrap: wrap; padding: 14px; gap: 10px; }
    .sim-icon { border-radius: 10px; padding: 12px 14px; align-self: auto; }
    .divider  { display: none; }
    .sim-field { padding: 0 4px; }
    .badge    { margin-left: 0; 
		}
    .nav-grid {
        grid-template-columns: 1fr;
        gap: 1rem;

      }
    }
	* { box-sizing: border-box; margin: 0; padding: 0; }  
	.sim-row {
    display: flex;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
  }

  .sim-icon {
    color: #868681;
    padding: 10px 18px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
  }

  .sim-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a2535;
    padding: 0 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .divider {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    flex-shrink: 0;
  }

  .sim-field {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 16px 18px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sim-field i { font-size: 13px; color: #7a9ab8; }
  .sim-field .label { font-size: 11px; color: #767676; margin-right: 2px; }
  .sim-field .value { font-size: 13px; font-weight: 500; color: #2d4057; }

  .badge {
    margin-left: auto;
    margin-right: 16px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .badge.active  { background: #dcfce7; color: #166534; }
  .badge.warning { background: #fef9c3; color: #854d0e; }
  .badge.expired { background: #fee2e2; color: #991b1b; }