/* ปรับ card ให้ responsive */
.card {
    width: 100%; /* ให้เต็ม column */
    max-width: 600px; /* ขนาดสูงสุดบน desktop */
    margin: 0 auto; /* จัดกลาง horizontal */
}

.bsb-btn-xl {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: calc(1.26rem + 0.12vw);
    --bs-btn-border-radius: var(--bs-border-radius-lg)
}

@media(min-width:1200px) {
    .bsb-btn-xl {
        --bs-btn-font-size: 1.35rem
    }
}

.bsb-btn-2xl {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: calc(1.27rem + 0.24vw);
    --bs-btn-border-radius: var(--bs-border-radius-lg)
}

@media(min-width:1200px) {
    .bsb-btn-2xl {
        --bs-btn-font-size: 1.45rem
    }
}

.bsb-btn-3xl {
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-size: calc(1.28rem + 0.36vw);
    --bs-btn-border-radius: var(--bs-border-radius-lg)
}

@media(min-width:1200px) {
    .bsb-btn-3xl {
        --bs-btn-font-size: 1.55rem
    }
}

.bsb-btn-4xl {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: calc(1.29rem + 0.48vw);
    --bs-btn-border-radius: var(--bs-border-radius-lg)
}

@media(min-width:1200px) {
    .bsb-btn-4xl {
        --bs-btn-font-size: 1.65rem
    }
}

.bsb-btn-5xl {
    --bs-btn-padding-y: 1.125rem;
    --bs-btn-padding-x: 2.25rem;
    --bs-btn-font-size: calc(1.3rem + 0.6vw);
    --bs-btn-border-radius: var(--bs-border-radius-lg)
}

@media(min-width:1200px) {
    .bsb-btn-5xl {
        --bs-btn-font-size: 1.75rem
    }
}

.fullscreen {
    width: 100vw; /* เต็มความกว้างหน้าจอ */
    height: 100vh; /* เต็มความสูงหน้าจอ */
    /*display: flex;*/ /* ใช้ flex สำหรับจัด layout */
    align-items: center; /* จัด content กลางแนวตั้ง */
    justify-content: center; /* จัด content กลางแนวนอน */
    padding: 1rem; /* padding เริ่มต้น */
    box-sizing: border-box; /* รวม padding เข้า width/height */
    background-color: #f8f9fa; /* สีเดียวกับ bg-light ของ Bootstrap */
    /*background-image: url('~/img/bg-login.jpg');*/
    background-image: url('../../img/bg3.jpg'); /* ใส่ path รูปของคุณ */

    background-size: cover; /* ทำให้รูปเต็ม section */
    background-position: center; /* จัดรูปให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .fullscreen-section {
        padding: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .fullscreen-section {
        padding: 3rem;
    }
}


.text-blue {
    color: #2E5292;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    margin-top: 15px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

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

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

/* กันไอคอนทับตัวอักษรในช่อง */
.form-floating .form-control {
    padding-right: 3rem; /* เผื่อที่ให้ปุ่มด้านขวา */
}

/* ปุ่มไอคอน */
.btn-view-password {
    position: absolute;
    top: 50%;
    right: 0.75rem; /* ระยะจากขอบขวา */
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    outline: none;
    box-shadow: none;
    z-index: 3; /* ให้อยู่เหนือ input/label */
}

    /* ไอคอนตาปิด (ค่าเริ่มต้น) */
    .btn-view-password:before,
    .btn-view-password:after {
        content: "";
        position: absolute;
        inset: 0;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 18px auto;
    }

    .btn-view-password:before {
        background-image: url("../../img/visibility-hidden.svg");
        opacity: 1;
    }

    /* ไอคอนตาเปิด */
    .btn-view-password:after {
        background-image: url("../../img/visibility.svg");
        opacity: 0;
    }

    .btn-view-password.active:before {
        opacity: 0;
    }

    .btn-view-password.active:after {
        opacity: 1;
        filter: brightness(50%);
    }

    .btn-view-password::-moz-focus-inner {
        border: 0;
    }

    .btn-view-password:focus {
        outline: none;
        box-shadow: none;
    }