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

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(135deg, #ffeef8 0%, #fff5f7 100%);
     min-height: 100vh;
 }

 /* Header */
 .header {
     background: linear-gradient(135deg, #ffc8dd 0%, #ffafcc 100%);
     padding: 1rem 2rem;
     box-shadow: 0 2px 10px rgba(255, 175, 204, 0.3);
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     font-size: 1.5rem;
     font-weight: bold;
     color: #fff;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .logo-icon {
     width: 32px;
     height: 32px;
     background: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffafcc;
 }

 /* Desktop Navigation */
 .nav-menu {
     display: flex;
     list-style: none;
     gap: 2rem;
 }

 .nav-menu li a {
     color: white;
     text-decoration: none;
     padding: 0.5rem 1rem;
     border-radius: 20px;
     transition: all 0.3s ease;
     font-weight: 500;
 }

 .nav-menu li a:hover,
 .nav-menu li a.active {
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
 }

 /* Mobile Bottom Navigation */
 .bottom-nav {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: white;
     box-shadow: 0 -2px 10px rgba(255, 175, 204, 0.3);
     z-index: 1000;
     padding: 0.5rem 0;
 }

 .bottom-nav-menu {
     display: flex;
     justify-content: space-around;
     align-items: center;
     list-style: none;
     max-width: 600px;
     margin: 0 auto;
 }

 .bottom-nav-item {
     flex: 1;
     text-align: center;
 }

 .bottom-nav-item a {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.25rem;
     padding: 0.5rem;
     text-decoration: none;
     color: #999;
     transition: all 0.3s ease;
 }

 .bottom-nav-item a.active {
     color: #ff8fab;
 }

 .bottom-nav-icon {
     font-size: 1.5rem;
     transition: transform 0.3s ease;
 }

 .bottom-nav-item a.active .bottom-nav-icon {
     transform: scale(1.2);
 }

 .bottom-nav-label {
     font-size: 0.75rem;
     font-weight: 500;
 }

 /* Profile Button in Header */
 .header-actions {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .profile-btn {
     background: white;
     border: none;
     color: #ff8fab;
     padding: 0.5rem 1.5rem;
     border-radius: 20px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .profile-btn:hover {
     background: rgba(255, 255, 255, 0.9);
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .login-btn {
     background: rgba(255, 255, 255, 0.2);
     border: 2px solid white;
     color: white;
     padding: 0.5rem 1.5rem;
     border-radius: 20px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .login-btn:hover {
     background: white;
     color: #ff8fab;
 }

 @media (max-width: 768px) {

     .profile-btn,
     .login-btn {
         padding: 0.4rem 1rem;
         font-size: 0.9rem;
     }
 }

 /* Main Content */
 .main-content {
     max-width: 1200px;
     margin: 2rem auto;
     padding: 0 2rem;
 }

 /* Add padding bottom for mobile to account for bottom nav */
 @media (max-width: 768px) {
     .main-content {
         padding-bottom: 5rem;
     }
 }

 .hero {
     background: white;
     border-radius: 20px;
     padding: 3rem;
     box-shadow: 0 10px 30px rgba(255, 175, 204, 0.2);
     text-align: center;
     margin-bottom: 2rem;
 }

 .hero h1 {
     color: #c9184a;
     font-size: 2.5rem;
     margin-bottom: 1rem;
 }

 .hero p {
     color: #666;
     font-size: 1.1rem;
     line-height: 1.6;
 }

 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-top: 2rem;
 }

 .card {
     background: white;
     border-radius: 15px;
     padding: 2rem;
     box-shadow: 0 5px 15px rgba(255, 175, 204, 0.15);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(255, 175, 204, 0.25);
 }

 .card-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #ffc8dd 0%, #ffafcc 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
     font-size: 1.5rem;
 }

 .card h3 {
     color: #c9184a;
     margin-bottom: 0.5rem;
 }

 .card p {
     color: #666;
     line-height: 1.5;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .nav-menu {
         display: none;
     }

     .bottom-nav {
         display: block;
     }

     .hero {
         padding: 2rem 1.5rem;
     }

     .hero h1 {
         font-size: 2rem;
     }

     .main-content {
         padding: 0 1rem;
     }

     .card-grid {
         grid-template-columns: 1fr;
     }
 }

 /* -------------------------------------- */
 /* Login Container */
 /* -------------------------------------- */
 .login-container {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 2rem;
 }

 .login-wrapper {
     display: flex;
     max-width: 900px;
     /* เพิ่มความกว้างสำหรับ Banner */
     width: 100%;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 15px 50px rgba(255, 175, 204, 0.4);
     background: white;
 }

 /* -------------------------------------- */
 /* Login Banner (Left Side) */
 /* -------------------------------------- */
 .login-banner {
     flex: 1;
     background: url('your_placeholder_image.jpg') no-repeat center center;
     /* เปลี่ยนเป็น URL รูปภาพของคุณ */
     background-size: cover;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .banner-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* ใช้ Gradient ที่เข้ากับโทนสี */
     background: linear-gradient(135deg, rgba(255, 199, 221, 0.7) 0%, rgba(255, 175, 204, 0.7) 100%);
 }

 .banner-content {
     z-index: 10;
     color: white;
     text-align: center;
     padding: 2rem;
 }

 .banner-title {
     font-size: 2.5rem;
     margin-bottom: 0.5rem;
     font-weight: 700;
 }

 .banner-text {
     font-size: 1.1rem;
     font-weight: 300;
 }

 /* -------------------------------------- */
 /* Login Form (Right Side) */
 /* -------------------------------------- */
 .login-form-container {
     flex: 1;
     padding: 3rem 2.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .login-header {
     text-align: center;
     margin-bottom: 2rem;
 }

 .logo {
     margin-bottom: 1rem;
 }

 .logo-text {
     font-size: 1.8rem;
     font-weight: bold;
     color: #c9184a;
 }

 .logo-accent {
     color: #ff8fab;
 }

 .login-title {
     color: #c9184a;
     font-size: 1.8rem;
     margin-bottom: 0.5rem;
 }

 .login-subtitle {
     color: #999;
     font-size: 0.95rem;
 }

 /* Form Groups and Inputs */
 .form-group {
     margin-bottom: 1.5rem;
 }

 .form-group label {
     color: #666;
     font-weight: 500;
     font-size: 0.9rem;
     margin-left: 0.5rem;
     margin-bottom: 0.2rem;
     display: block;
 }

 .input-group {
     position: relative;
     display: flex;
     align-items: center;
 }

 .input-icon {
     position: absolute;
     left: 1rem;
     font-size: 1.2rem;
     color: #ffafcc;
     z-index: 2;
 }

 .form-control {
     width: 100%;
     padding: 1rem 1rem 1rem 3rem;
     /* เพิ่ม padding ด้านซ้ายเพื่อเว้นที่ให้ icon */
     border: 2px solid #ffeef8;
     border-radius: 15px;
     font-size: 1rem;
     transition: all 0.3s ease;
     background: #ffeef8;
     /* แก้ไขปัญหา Blazor InputText */
     line-height: normal;
 }

 .form-control:focus {
     outline: none;
     border-color: #ffafcc;
     background: white;
     box-shadow: 0 5px 15px rgba(255, 175, 204, 0.2);
 }

 /* Password Visibility Toggle */
 .toggle-password {
     background: none;
     border: none;
     position: absolute;
     right: 1rem;
     padding: 0.5rem;
     cursor: pointer;
     color: #ffafcc;
     transition: color 0.3s;
     z-index: 2;
 }

 .toggle-password:hover {
     color: #c9184a;
 }

 .password-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .forgot-link {
     color: #ff8fab;
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
 }

 .forgot-link:hover {
     color: #c9184a;
     text-decoration: underline;
 }

 /* Remember Me Checkbox */
 .remember-me {
     display: flex;
     align-items: center;
     cursor: pointer;
 }

 .remember-me .checkbox-container {
     display: block;
     position: relative;
     padding-left: 25px;
     margin-bottom: 0;
     cursor: pointer;
     font-size: 0.9rem;
     color: #666;
     user-select: none;
 }

 .remember-me input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 18px;
     width: 18px;
     background-color: #eee;
     border-radius: 4px;
     border: 1px solid #ffc8dd;
 }

 .remember-me input:checked~.checkmark {
     background-color: #ffafcc;
 }

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
     left: 6px;
     top: 3px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     transform: rotate(45deg);
 }

 .remember-me input:checked~.checkmark:after {
     display: block;
 }

 /* Submit Button */
 .btn-login {
     background: linear-gradient(135deg, #ffc8dd 0%, #ffafcc 100%);
     color: white;
     border: none;
     padding: 1rem;
     border-radius: 15px;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(255, 175, 204, 0.3);
     width: 100%;
 }

 .btn-login:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(255, 175, 204, 0.4);
 }

 .btn-login:active:not(:disabled) {
     transform: translateY(0);
 }

 .btn-login:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }

 /* Spinner and Loading State */
 .spinner {
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top: 4px solid white;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     animation: spin 1s linear infinite;
     display: inline-block;
     margin-right: 0.5rem;
 }

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

     100% {
         transform: rotate(360deg);
     }
 }

 /* Register Link */
 .register-link {
     text-align: center;
     margin-top: 1.5rem;
     color: #666;
     font-size: 0.95rem;
 }

 .register-link a {
     color: #ff8fab;
     text-decoration: none;
     font-weight: 600;
 }

 /* Alert Message (Blazor) */
 .alert-danger {
     background-color: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
     padding: 0.75rem 1.25rem;
     margin-bottom: 1rem;
     border-radius: 10px;
     font-size: 0.9rem;
     text-align: center;
 }

 /* Responsive */
 @media (max-width: 768px) {


     .login-banner {
         height: 200px;
         /* ลดความสูงของ Banner บนมือถือ */
     }

     .login-container {
         height: auto;
         min-height: 100vh;
         padding: 20px 0;
         /* เพิ่มระยะห่างบนล่าง */
         align-items: flex-start;
         /* ให้เริ่มจากด้านบน แทนที่จะอยู่ตรงกลางเป๊ะๆ */
     }

     .banner-title {
         font-size: 2rem;
     }

     /* 1. ปรับ Logo ให้เล็กลงและจัดให้อยู่บรรทัดเดียว */
     .login-header {
         margin-bottom: 1rem;
         /* ลดระยะห่างด้านล่าง */
     }

     .logo-text {
         font-size: 1.4rem;
         /* ลดขนาดตัวอักษร Logo */
         white-space: nowrap;
         /* ห้ามตัดบรรทัด */
     }

     .login-title {
         font-size: 1.5rem;
         /* ลดขนาดหัวข้อ */
         margin-top: 0.5rem;
     }

     .login-wrapper {
         height: auto !important;
         /* สำคัญ: ปลดล็อกความสูง */
         min-height: auto;
         display: flex;
         flex-direction: column;
         overflow: visible;
         /* ให้เนื้อหาแสดงออกมาได้ */
         margin-bottom: 50px;
         /* เว้นที่ด้านล่างเผื่อไว้ */
     }

     .login-form-container {
         padding: 1.5rem 1rem;
         /* ลด Padding ด้านข้างเพื่อให้มีที่เหลือ */
     }

     /* 3. ปรับขนาดปุ่มกด PIN ให้กะทัดรัดขึ้น */
     .numeric-keypad {
         gap: 12px;
         /* ลดช่องว่างระหว่างปุ่ม */
         max-width: 280px;
         /* บีบความกว้างรวม */
         margin-bottom: 1rem;
     }

     .key-btn {
         width: 60px;
         /* ลดขนาดปุ่ม */
         height: 60px;
         font-size: 1.3rem;
         /* ลดขนาดตัวเลข */
     }

     /* ปรับปุ่ม 0 และ Backspace ให้ตรงแนว */
     .key-btn.action-btn {
         font-size: 1.2rem;
     }

     /* 4. ปรับจุด PIN */
     .pin-display-area {
         margin: 15px 0;
         /* ลดระยะห่างบนล่าง */
     }
 }

 /* --- Pin Display & Keypad Styles --- */

 /* ส่วนแสดงผลจุด 6 จุด */
 .pin-display-area {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin: 1.5rem 0;
 }

 .pin-dot {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: #ffeef8;
     /* สีพื้นหลังจุดว่าง */
     border: 2px solid #ffafcc;
     transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .pin-dot.filled {
     background-color: #c9184a;
     /* สีจุดที่กรอกแล้ว */
     border-color: #c9184a;
     transform: scale(1.2);
     box-shadow: 0 0 10px rgba(201, 24, 74, 0.3);
 }

 /* แป้นตัวเลข */
 .numeric-keypad {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* แบ่งเป็น 3 คอลัมน์เท่าๆ กัน */
     gap: 15px;
     /* ระยะห่างระหว่างปุ่ม */
     max-width: 320px;
     /* ความกว้างสูงสุด */
     width: 100%;
     margin: 0 auto;
     padding: 0 10px;
     /* เว้นขอบซ้ายขวานิดหน่อย */
 }

 .key-btn {
     width: 100%;
     /* ให้ยืดเต็มช่อง Grid */
     aspect-ratio: 1 / 1;
     /* บังคับให้เป็นวงกลม (กว้าง=สูง) เสมอ */
     max-width: 75px;
     /* ขนาดใหญ่สุดไม่เกิน 75px */
     height: auto;
     /* ให้สูงตามสัดส่วน */

     border-radius: 50%;
     border: none;
     background: white;

     /* จัดตัวเลขให้อยู่ตรงกลาง */
     display: flex;
     justify-content: center;
     align-items: center;

     font-size: 1.5rem;
     /* ขนาดตัวอักษรเริ่มต้น */
     color: #c9184a;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

     /* ป้องกันการแตะแล้วเกิดสีไฮไลท์แปลกๆ ในมือถือ */
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
 }

 .key-btn:hover {
     background-color: #fff0f5;
     transform: translateY(-2px);
 }

 .key-btn:active {
     background-color: #ffafcc;
     transform: scale(0.95);
 }

 .key-btn.action-btn {
     background: transparent;
     box-shadow: none;
     color: #999;
     font-size: 1.3rem;
     /* ลดขนาดไอคอนลงนิดนึง */
 }

 .key-btn.action-btn:hover {
     color: #c9184a;
     background: rgba(255, 175, 204, 0.1);
 }

 /* ปรับแต่งสำหรับหน้า Set Pin โดยเฉพาะ */
 .pin-setup-card {
     background: white;
     border-radius: 25px;
     padding: 2rem;
     box-shadow: 0 10px 40px rgba(255, 175, 204, 0.3);
     max-width: 450px;
     margin: 2rem auto;
     text-align: center;
 }

 .pin-setup-card h2 {
     color: #c9184a;
     margin-bottom: 0.5rem;
 }

 .pin-setup-card p {
     color: #888;
 }

 /* --- 📱 MEDIA QUERY สำหรับหน้าจอมือถือเล็ก (เช่น iPhone SE) --- */
 @media (max-width: 380px) {
     .numeric-keypad {
         gap: 10px;
         /* ลดช่องว่างลง */
         max-width: 280px;
         /* ลดความกว้างรวม */
     }

     .key-btn {
         font-size: 1.3rem;
         /* ลดขนาดตัวเลขลง */
     }
 }