:root {
             --primary: #fbbf24;
             --primary-2: #b45309;
             --primary-soft: rgba(251, 191, 36, 0.14);
             --primary-glow: rgba(251, 191, 36, 0.35);
             --text: #fdf0d4;
             --muted: #c2ab83;
             --card: #18222e;
             --card-border: #2c3a4a;
             --input-bg: #0b121a;
             --input-border: #2c3a4a;
             --input-text: #e6edf3;
             --placeholder: #5d7080;
             --danger: #e15b5b;
             --radius: 20px;
             --radius-sm: 12px;
             --radius-md: 14px;
}

[v-cloak] {
    display: none;
}

         * {
             box-sizing: border-box;
         }

         html, body {
             height: 100%;
             margin: 0;
         }

         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", Roboto, sans-serif;
             color: var(--text);
             line-height: 1.55;
             min-height: 100vh;
             background: radial-gradient(ellipse at top, #1a1408, #0a0804 70%);
             position: relative;
         }

         .bg-aurora, .bg-beam {
             position: fixed;
             inset: 0;
             pointer-events: none;
             z-index: 0;
         }

         .page {
             position: relative;
             z-index: 1;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 32px 16px;
             background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/3a6c5f62-4cd3-458a-8fa9-b161cc679554%20%281%29.png');
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
             background-attachment: fixed;
         }

         .container {
             width: 100%;
             max-width: 480px;
             margin: 0 auto;
         }

         .card-wrap {
             width: 100%;
         }

         .layout-split .page {
             padding: 0;
         }

         .layout-split .container {
             width: 100%;
             max-width: 1440px;
             display: grid;
             grid-template-columns: 1fr 1.15fr;
             gap: 0;
             min-height: 100vh;
             align-items: center;
         }

             .layout-split .container .card-wrap {
                 padding: 32px 24px;
                 display: flex;
                 justify-content: center;
             }

         @media (max-width: 860px) {
             .layout-split .container {
                 grid-template-columns: 1fr;
             }

             .layout-split .split-hero {
                 display: none;
             }
         }

         .split-hero {
             position: relative;
             height: 100vh;
             overflow: hidden;
             background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
             display: flex;
             align-items: center;
             padding: 60px;
             color: #fff;
         }

         .hero-deco {
             position: absolute;
             inset: 0;
             pointer-events: none;
         }

         .hero-orb {
             position: absolute;
             border-radius: 50%;
             background: rgba(255,255,255,0.18);
             filter: blur(50px);
         }

         .hero-orb-1 {
             top: -100px;
             right: -50px;
             width: 350px;
             height: 350px;
         }

         .hero-orb-2 {
             bottom: -100px;
             left: -50px;
             width: 280px;
             height: 280px;
         }

         .hero-content {
             position: relative;
             z-index: 1;
         }

         .brand-badge-large {
             width: 80px !important;
             height: 80px !important;
             background: rgba(255, 255, 255, 0.22) !important;
             backdrop-filter: blur(10px);
             margin-bottom: 28px !important;
         }

             .brand-badge-large svg {
                 width: 40px !important;
                 height: 40px !important;
             }

         .hero-title {
             font-size: 36px;
             margin: 0 0 12px;
             font-weight: 700;
             line-height: 1.15;
         }

         .hero-subtitle {
             font-size: 16px;
             margin: 0 0 28px;
             opacity: 0.92;
         }

         .hero-features {
             list-style: none;
             padding: 0;
             margin: 0;
         }

             .hero-features li {
                 font-size: 14.5px;
                 margin: 8px 0;
                 opacity: 0.94;
             }

         .card {
             width: 100%;
             max-width: 480px;
             background: var(--card);
             border: 1px solid var(--card-border);
             border-radius: var(--radius);
             padding: 36px 40px 32px;
             box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(251, 191, 36, 0.10);
             position: relative;
         }

         @media (max-width: 640px) {
             .page {
                 padding: 28px 20px;
                 background-attachment: scroll;
                 background-position: 80% center;
             }

             .card {
                 max-width: 100%;
                 padding: 24px 22px 22px;
                 border-radius: 18px;
             }
         }

         @media (max-width: 400px) {
             .page {
                 padding: 22px 16px;
             }

             .card {
                 padding: 22px 18px 20px;
                 border-radius: 16px;
             }
         }

         .card-glass {
             background: rgba(24, 34, 46, 0.6);
             backdrop-filter: blur(20px);
             border-color: rgba(255,255,255,0.1);
         }

         .brand {
             text-align: center;
             margin-bottom: 26px;
         }

         .brand-minimal {
             text-align: left;
             margin-bottom: 22px;
             padding-bottom: 16px;
             border-bottom: 1px solid var(--card-border);
         }

         .brand-badge {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             width: 72px;
             height: 72px;
             background: linear-gradient(135deg, #fbbf24, #b45309);
             border-radius: 20px;
             margin-bottom: 18px;
             box-shadow: 0 12px 28px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
         }

             .brand-badge svg {
                 width: 30px;
                 height: 30px;
                 color: #fff;
             }

         .brand h1 {
             margin: 0 0 6px;
             font-size: 26px;
             font-weight: 700;
             letter-spacing: -0.01em;
         }

         .brand p {
             margin: 0;
             color: var(--muted);
             font-size: 14px;
         }

         @media (max-width: 400px) {
             .brand h1 {
                 font-size: 22px;
             }

             .brand p {
                 font-size: 13px;
             }
         }

         form {
             display: flex;
             flex-direction: column;
             gap: 16px;
         }

         .field {
             display: flex;
             flex-direction: column;
             gap: 6px;
             min-width: 0;
         }

             .field label {
                 font-size: 12.5px;
                 font-weight: 600;
                 color: var(--muted);
                 letter-spacing: 0.2px;
             }

                 .field label .req {
                     color: var(--primary);
                     margin-left: 2px;
                 }

         .input, .select {
             width: 100%;
             background: var(--input-bg);
             border: 1px solid var(--input-border);
             color: var(--input-text);
             padding: 14px 16px;
             border-radius: var(--radius-sm);
             font-size: 15px;
             font-family: inherit;
             transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
             outline: none;
             min-width: 0;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
         }

         select.input, select.select {
             background-repeat: no-repeat;
         }

         select::-ms-expand {
             display: none;
         }

         .input:hover, .select:hover {
             border-color: rgba(251, 191, 36, 0.35);
         }

         .input:focus, .select:focus {
             border-color: var(--primary);
             box-shadow: 0 0 0 3px var(--primary-soft);
         }

         @media (max-width: 480px) {
             .input, .select {
                 font-size: 16px;
                 padding: 13px 14px;
             }
         }

         .input::placeholder {
             color: var(--placeholder);
         }

         .phone-row {
             display: flex;
             gap: 12px;
             width: 100%;
         }

         .password-wrap {
             position: relative;
         }

             .password-wrap .input {
                 padding-right: 44px;
             }

         .toggle-pw {
             position: absolute;
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
             background: none;
             border: none;
             cursor: pointer;
             color: var(--muted);
             padding: 6px;
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: color 0.15s ease, background 0.15s ease;
         }

             .toggle-pw:hover {
                 color: var(--text);
                 background: rgba(251, 191, 36, 0.1);
             }

             .toggle-pw svg {
                 width: 18px;
                 height: 18px;
             }

         .error {
             font-size: 12px;
             color: var(--danger);
             margin-top: 2px;
             display: none;
         }

         .field.has-error .input, .field.has-error .select, .field.has-error .custom-select-trigger {
             border-color: var(--danger);
         }

         .field.has-error .error {
             display: block;
         }

         .submit {
             margin-top: 8px;
             width: 100%;
             background: linear-gradient(135deg, #fbbf24, #b45309);
             color: #fff;
             border: none;
             padding: 16px 18px;
             border-radius: 14px;
             font-size: 15.5px;
             font-weight: 700;
             cursor: pointer;
             transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
             box-shadow: 0 10px 28px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
             letter-spacing: 0.3px;
         }

             .submit:hover {
                 filter: brightness(1.06);
                 transform: translateY(-1px);
                 box-shadow: 0 14px 32px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
             }

             .submit:active {
                 transform: translateY(0);
                 box-shadow: 0 6px 16px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
             }

             .submit:focus-visible {
                 outline: 2px solid var(--primary);
                 outline-offset: 3px;
             }

         .signup-header {
             text-align: center;
             padding: 0 0 20px;
         }

         .signup-title {
             margin: 0;
             font-size: 24px;
             font-weight: 700;
             letter-spacing: -0.02em;
             color: var(--text);
         }

         .input-with-icon {
             position: relative;
         }

             .input-with-icon .field-icon {
                 position: absolute;
                 left: 16px;
                 top: 50%;
                 transform: translateY(-50%);
                 width: 18px;
                 height: 18px;
                 color: var(--muted);
                 pointer-events: none;
                 z-index: 1;
             }

         .input.has-icon {
             padding-left: 44px;
         }

         .input.has-suffix {
             padding-right: 44px;
         }

         .signin-link {
             text-align: center;
             color: var(--muted);
             font-size: 13px;
             margin: 18px 0 20px;
         }

             .signin-link a {
                 color: var(--text);
                 text-decoration: underline;
                 text-underline-offset: 3px;
                 font-weight: 700;
                 margin-left: 4px;
                 transition: color 0.15s ease;
             }

                 .signin-link a:hover {
                     color: var(--primary);
                 }

         /* =========================================
                 Custom Select Box (Replacement for TomSelect)
                 ========================================= */
         .custom-select-container {
             position: relative;
             width: 130px;
             flex-shrink: 0;
         }

         .custom-select-trigger {
             background-color: var(--input-bg);
             border: 1px solid var(--input-border);
             border-radius: var(--radius-sm);
             color: var(--input-text);
             padding: 0 16px;
             height: 50.5px; /* Match height with input */
             display: flex;
             align-items: center;
             justify-content: space-between;
             cursor: pointer;
             font-size: 15px;
             transition: border-color 0.15s ease, box-shadow 0.15s ease;
             user-select: none;
         }

             .custom-select-trigger:hover {
                 border-color: rgba(251, 191, 36, 0.35);
             }

             .custom-select-trigger.active {
                 border-color: var(--primary);
                 box-shadow: 0 0 0 3px var(--primary-soft);
             }

         .custom-select-dropdown {
             position: absolute;
             top: calc(100% + 6px);
             left: 0;
             width: 280px; /* กว้างพอให้เห็นชื่อประเทศ */
             background-color: #161e2c; /* เข้มกว่ากล่องนิดหน่อย */
             border: 1px solid var(--card-border);
             border-radius: var(--radius-sm);
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
             display: none;
             z-index: 100;
             overflow: hidden;
         }

             .custom-select-dropdown.open {
                 display: block;
                 animation: fadeIn 0.2s ease;
             }

         @keyframes fadeIn {
             from {
                 opacity: 0;
                 transform: translateY(-4px);
             }

             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }

         .custom-select-search {
             width: 100%;
             background-color: transparent;
             border: none;
             border-bottom: 1px solid var(--card-border);
             color: var(--input-text);
             padding: 12px 16px;
             outline: none;
             font-size: 14px;
         }

             .custom-select-search::placeholder {
                 color: var(--placeholder);
             }

         .custom-options-list {
             list-style: none;
             margin: 0;
             padding: 4px 0;
             max-height: 220px;
             overflow-y: auto;
         }

         .custom-option {
             padding: 10px 16px;
             color: #94a3b8;
             cursor: pointer;
             transition: 0.15s;
             font-size: 14px;
             display: flex;
             align-items: center;
         }

             .custom-option:hover, .custom-option.selected {
                 background-color: rgba(255, 255, 255, 0.05);
                 color: var(--primary);
             }

         /* Scrollbar styles for list */
         .custom-options-list::-webkit-scrollbar {
             width: 6px;
         }

         .custom-options-list::-webkit-scrollbar-thumb {
             background: #334155;
             border-radius: 4px;
         }

         .custom-options-list::-webkit-scrollbar-track {
             background: transparent;
         }

         /* =========================================
         Trust Badges (Bank / Instant / Worldwide)
         ========================================= */
         .trust-badges {
             display: flex;
             align-items: center;
             justify-content: space-between; /* กระจายระยะห่างให้เท่ากัน */
             gap: 12px;
             margin-top: 24px;
             margin-bottom: 8px;
             padding: 0 4px;
         }

         .trust-item {
             display: flex;
             align-items: center;
             gap: 8px;
         }

             .trust-item svg {
                 width: 26px;
                 height: 26px;
                 color: var(--primary); /* ใช้สีทองของตีม */
                 flex-shrink: 0;
             }

             .trust-item span {
                 font-size: 12px;
                 font-weight: 600;
                 color: var(--input-text);
                 line-height: 1.3;
                 text-align: left;
             }

         /* สำหรับหน้าจอมือถือขนาดเล็กมาก ให้มันปัดบรรทัดลงมาสวยๆ */
         @media (max-width: 420px) {
             .trust-badges {
                 flex-wrap: wrap;
                 justify-content: center;
                 gap: 16px 20px;
             }
         }
    /* =========================================
   Contact Section
   ========================================= */
    .contact-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--card-border); /* เส้นคั่นด้านบน */
        text-align: center;
    }

    .contact-text {
        font-size: 13px;
        color: var(--muted);
        margin: 0 0 16px 0;
        font-weight: 600;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* แบ่ง 2 คอลัมน์เท่าๆ กัน */
        gap: 12px;
    }

    /* สไตล์ของปุ่มติดต่อ */
    .contact-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        background: var(--input-bg); /* พื้นหลังสีเข้มเหมือนช่องกรอกข้อมูล */
        border: 1px solid var(--input-border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none; /* เอาเส้นใต้ลิงก์ออก */
        transition: all 0.2s ease;
    }

        /* สไตล์ของไอคอน */
        .contact-link svg {
            width: 18px;
            height: 18px;
            color: var(--muted);
            transition: color 0.2s ease;
        }

        /* เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) */
        .contact-link:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: var(--primary); /* ขอบเปลี่ยนเป็นสีทอง */
            color: var(--primary); /* ตัวอักษรเปลี่ยนเป็นสีทอง */
        }

            .contact-link:hover svg {
                color: var(--primary); /* ไอคอนเปลี่ยนเป็นสีทอง */
            }

    /* สำหรับหน้าจอมือถือ ให้ปุ่มเรียงต่อกันเป็นแนวตั้ง (แถวละ 1 ปุ่ม) */
    @media (max-width: 480px) {
        .contact-grid {
            grid-template-columns: 1fr;
        }
    }
    .currency-select:disabled {
        opacity: 1;
        cursor: default;
        color: var(--input-text);
        -webkit-text-fill-color: var(--input-text);
    }