@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&family=Kanit:wght@400;600&display=swap');

/* =========================================================
   กำหนดฟอนต์ทั้งหน้า (Global Font)
   ========================================================= */
body,
#root,
#root *,
input,
button,
select,
textarea,
a,
p,
span,
label,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Prompt', 'Kanit', sans-serif !important;
}

#sign-in-form .row.m-0 {
    display: none !important;
}

.custom-login-header {
    width: 100% !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
}

.custom-login-header img {
    display: block;
    width: 270px;
    height: auto;
    /* margin: 0 auto 10px; */
}

/* .custom-login-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    font-family: 'Prompt', 'Kanit', sans-serif !important;

} */

.custom-login-subtitle {
    margin: 0 !important;
    /* กำหนดฟอนต์ */
    font-family: 'Prompt', 'Kanit', sans-serif !important;
    /* ปรับขนาดตัวอักษร */
    font-size: 18px !important;
    /* ปรับความหนา (เช่น 400, 500, 600, 700) */
    font-weight: 400 !important;
    /* ระยะห่างบรรทัด และ สี */
    line-height: 1.4 !important;
    color: #333333 !important;
}

/* =========================================================
   BUU MOOC - SIGN IN TARGET LAYOUT
   ========================================================= */


/* ---------------------------------------------------------
   LOGIN CONTAINER
   --------------------------------------------------------- */

#root #sign-in-form,
#root #registration-form {
    width: 100% !important;
    max-width: 450px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 0 !important;
}

/* ขยับเฉพาะฟอร์ม Register ขึ้นไปด้านบนเล็กน้อยเพื่อลดช่องว่าง */
#root #registration-form {
    margin-top: -20px !important;
}

#root .main-content .mw-xs {
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   REGISTER / SIGN IN TAB (Exact DOM Hierarchy Matching)
   --------------------------------------------------------- */

/* Container แถบแท็บด้านบน - จัดให้อยู่ตรงกลางฟอร์ม (กว้าง 450px เท่ากับตัวฟอร์ม) */
#root .layout .content .nav.nav-tabs,
#root .layout .content .nav-tabs,
#root .layout .content .pgn__tabs,
.pgn__tabs,
[role="tablist"],
.nav.nav-tabs,
.nav-tabs,
#root .nav-tabs,
#root [role="tablist"],
#root #sign-in-form .nav,
#root #sign-in-form .nav-tabs,
#root #sign-in-form [role="tablist"],
#root #registration-form .nav,
#root #registration-form .nav-tabs,
#root #registration-form [role="tablist"] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* ซ่อน Dropdown และปุ่ม More... ถาวร ห้ามแสดง แบบเด็ดขาด */
#root .layout .content .nav.nav-tabs a.pgn__tab_more,
#root .layout .content .nav.nav-tabs a#controlled-tab-tab-null,
.pgn__tab_more,
.pgn__tab_invisible.pgn__tab_more,
#controlled-tab-tab-null,
[data-testid="dropdown"],
.pgn__dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0% !important;
}

/* กำหนดลำดับ Sign in อยู่ซ้าย (order: 1) และ Register อยู่ขวา (order: 2) เพื่อไม่ให้กระตุกสลับไปมา */
a[data-rb-event-key="/login"],
a[id="controlled-tab-tab-/login"],
#controlled-tab-tab-\\/login,
a[data-rb-event-key="/login"] {
    order: 1 !important;
}

a[data-rb-event-key="/register"],
a[id="controlled-tab-tab-/register"],
#controlled-tab-tab-\\/register,
a[data-rb-event-key="/register"] {
    order: 2 !important;
}

/* ปุ่มแท็บ Sign in และ Register - ปรับให้ยาวขึ้นเต็มพื้นที่ (แบ่งครึ่ง 50/50) */
#root .layout .content .nav.nav-tabs a:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .nav-tabs a:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .pgn__tabs a:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .nav-link:not(#controlled-tab-tab-null):not(.pgn__tab_more),
.pgn__tabs a.nav-link:not(.pgn__tab_more),
.pgn__tabs button.nav-link:not(.pgn__tab_more),
.nav-item.nav-link:not(.pgn__tab_more),
.nav-link:not(.pgn__tab_more),
#controlled-tab-tab-\\/login,
#controlled-tab-tab-\\/register,
a[data-rb-event-key="/login"],
a[data-rb-event-key="/register"],
a[id="controlled-tab-tab-/login"],
a[id="controlled-tab-tab-/register"],
#root .nav-tabs a:not(.pgn__tab_more),
#root [role="tablist"] a:not(.pgn__tab_more) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;

    /* ขยายความยาวของปุ่มให้เต็ม 50% ของความกว้าง */
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 50px !important;
    padding: 12px 16px !important;

    font-size: 18px !important;
    color: #777777 !important;
    text-decoration: none !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    background: transparent !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    /* ปิด transition all เพื่อตัดปัญหากระพริบ/ยืดหดตอนคลิก */
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

/* ป้องกัน Paragon ซ่อนแท็บด้วย class pgn__tab_invisible */
.pgn__tabs a.nav-link.pgn__tab_invisible:not(.pgn__tab_more),
.nav-link.pgn__tab_invisible:not(.pgn__tab_more),
#controlled-tab-tab-\\/login.pgn__tab_invisible,
#controlled-tab-tab-\\/register.pgn__tab_invisible {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hover แท็บ */
#root .layout .content .nav.nav-tabs a:hover,
#root .layout .content .nav-tabs a:hover,
#root .layout .content .pgn__tabs a:hover,
.pgn__tabs a.nav-link:not(.pgn__tab_more):hover,
.nav-link:not(.pgn__tab_more):hover {
    color: #333333 !important;
}

/* Active แท็บที่เลือก - เปลี่ยนสีเป็น #FFCC00 (ตัวหนังสือและเส้นใต้หนา 3px) */
#root .layout .content .nav.nav-tabs a.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .nav-tabs a.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .pgn__tabs a.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .nav-link.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content .nav-item.nav-link.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
#root .layout .content a[data-rb-event-key="/login"].active,
#root .layout .content a[data-rb-event-key="/register"].active,
#root .layout .content a[id="controlled-tab-tab-/login"].active,
#root .layout .content a[id="controlled-tab-tab-/register"].active,
.nav-link.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
.nav-item.nav-link.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
.pgn__tabs a.nav-link.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
.pgn__tabs button.nav-link.active:not(#controlled-tab-tab-null):not(.pgn__tab_more),
a[data-rb-event-key="/login"].active,
a[data-rb-event-key="/register"].active,
a[id="controlled-tab-tab-/login"].active,
a[id="controlled-tab-tab-/register"].active,
#controlled-tab-tab-\\/login.active,
#controlled-tab-tab-\\/register.active,
[role="tab"][aria-selected="true"],
#root [role="tab"][aria-selected="true"],
#root #sign-in-form [role="tab"][aria-selected="true"],
#root #registration-form [role="tab"][aria-selected="true"] {
    color: #000000 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #FFCC00 !important;
    background: transparent !important;
}



/* ---------------------------------------------------------
   INPUT
   --------------------------------------------------------- */

#root #sign-in-form input.form-control,
#root #sign-in-form input.pgn__form-control,
#root #sign-in-form input[type="text"],
#root #sign-in-form input[type="email"],
#root #sign-in-form input[type="password"],
#root #registration-form input.form-control,
#root #registration-form input.pgn__form-control,
#root #registration-form input[type="text"],
#root #registration-form input[type="email"],
#root #registration-form input[type="password"],
#root form:not(#sign-in-form):not(#registration-form) input.form-control,
#root form:not(#sign-in-form):not(#registration-form) input.pgn__form-control,
#root form:not(#sign-in-form):not(#registration-form) input[type="text"],
#root form:not(#sign-in-form):not(#registration-form) input[type="email"],
#root form:not(#sign-in-form):not(#registration-form) input[type="password"] {
    width: 100% !important;

    height: auto !important;
    min-height: 52px !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 50px !important;

    border: 1px solid #d2d2d2 !important;

    border-radius: 7px !important;

    background: #ffffff !important;

    font-size: 18px !important;

    color: #333333 !important;

    box-shadow: none !important;
}


/* Focus */

#root #sign-in-form input.form-control:focus,
#root #sign-in-form input.pgn__form-control:focus,
#root #registration-form input.form-control:focus,
#root #registration-form input.pgn__form-control:focus {
    border-color: #c9c9c9 !important;

    box-shadow: 0 0 0 1px rgba(242, 200, 75, 0.25) !important;

    outline: none !important;
}


/* Placeholder */

#root #sign-in-form input.form-control::placeholder,
#root #sign-in-form input.pgn__form-control::placeholder,
#root #registration-form input.form-control::placeholder,
#root #registration-form input.pgn__form-control::placeholder {
    color: #777777 !important;

    opacity: 1 !important;
}


/* ---------------------------------------------------------
   INPUT SPACING
   --------------------------------------------------------- */

#root #sign-in-form .form-group,
#root #registration-form .form-group {
    margin-bottom: 14px !important;
}


/* ---------------------------------------------------------
   PASSWORD EYE
   --------------------------------------------------------- */

#root #sign-in-form .password-toggle,
#root #sign-in-form button[aria-label*="password"],
#root #sign-in-form button[title*="password"],
#root #registration-form .password-toggle,
#root #registration-form button[aria-label*="password"],
#root #registration-form button[title*="password"] {
    color: #777777 !important;
}


/* ---------------------------------------------------------
   FORGOT PASSWORD
   --------------------------------------------------------- */

#root #sign-in-form #forgot-password,
#root #registration-form #forgot-password {
    display: block !important;

    margin-top: 10px !important;
    margin-bottom: 18px !important;

    color: #D49F00 !important;

    font-size: 16px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
}

#root #sign-in-form #forgot-password:hover,
#root #registration-form #forgot-password:hover {
    color: #B98500 !important;

    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   SIGN IN BUTTON
   --------------------------------------------------------- */

#root #sign-in-form #sign-in,
#root #registration-form #register,
#root #registration-form button[type='submit'],
#root #registration-form button.btn-primary,
#root #registration-form .register-button,
#root #password-reset-form button[type='submit'],
#root #password-reset-form button.btn-primary,
#root form:not(#sign-in-form):not(#registration-form) button[type='submit'],
#root form:not(#sign-in-form):not(#registration-form) button.btn-primary {
    width: 100% !important;

    height: 56px !important;
    min-height: 56px !important;

    margin-top: 10px !important;

    border-radius: 8px !important;

    background-color: #F2C84B !important;

    border: 1px solid #F2C84B !important;

    color: #000000 !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-shadow: none !important;
}

#root #sign-in-form #sign-in:hover,
#root #registration-form #register:hover,
#root #registration-form button[type='submit']:hover,
#root #registration-form button.btn-primary:hover,
#root #registration-form .register-button:hover,
#root #password-reset-form button[type='submit']:hover,
#root #password-reset-form button.btn-primary:hover,
#root form:not(#sign-in-form):not(#registration-form) button[type='submit']:hover,
#root form:not(#sign-in-form):not(#registration-form) button.btn-primary:hover {
    background-color: #EABB35 !important;

    border-color: #EABB35 !important;

    color: #000000 !important;
}

#root #sign-in-form #sign-in:focus,
#root #sign-in-form #sign-in:active,
#root #registration-form #register:focus,
#root #registration-form #register:active,
#root #registration-form button[type='submit']:focus,
#root #registration-form button[type='submit']:active,
#root #registration-form button.btn-primary:focus,
#root #registration-form button.btn-primary:active,
#root #registration-form .register-button:focus,
#root #registration-form .register-button:active,
#root #password-reset-form button[type='submit']:focus,
#root #password-reset-form button[type='submit']:active,
#root #password-reset-form button.btn-primary:focus,
#root #password-reset-form button.btn-primary:active,
#root form:not(#sign-in-form):not(#registration-form) button[type='submit']:focus,
#root form:not(#sign-in-form):not(#registration-form) button[type='submit']:active,
#root form:not(#sign-in-form):not(#registration-form) button.btn-primary:focus,
#root form:not(#sign-in-form):not(#registration-form) button.btn-primary:active {
    background-color: #F2C84B !important;

    border-color: #F2C84B !important;

    color: #000000 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   THAID DIVIDER
   --------------------------------------------------------- */

#root #sign-in-form .mt-4.mb-3.h4,
#root #registration-form .mt-4.mb-3.h4 {
    margin-top: 28px !important;
    margin-bottom: 16px !important;

    text-align: center !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    color: #777777 !important;
}


/* ---------------------------------------------------------
   THAID BUTTON
   --------------------------------------------------------- */

#root #sign-in-form .btn-social,
#root #registration-form .btn-social {
    width: 100% !important;
    max-width: none !important;

    height: 55px !important;
    min-height: 55px !important;

    margin-top: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #d2d2d2 !important;

    border-radius: 7px !important;

    background-color: #ffffff !important;

    color: #333333 !important;

    font-size: 18px !important;
    font-weight: 500 !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

#root #sign-in-form .btn-social:hover,
#root #registration-form .btn-social:hover {
    background-color: #fafafa !important;

    border-color: #c5c5c5 !important;

    color: #222222 !important;
}


/* ---------------------------------------------------------
   REGISTER TEXT
   --------------------------------------------------------- */

#root #sign-in-form .custom-register-text,
#root #registration-form .custom-register-text {
    margin-top: 20px !important;

    text-align: center !important;

    font-size: 18px !important;

    color: #333333 !important;
}

#root #sign-in-form .custom-register-text a,
#root #registration-form .custom-register-text a {
    color: #D49F00 !important;

    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   SUPPORT TEXT
   --------------------------------------------------------- */

#root #sign-in-form .custom-support-text,
#root #registration-form .custom-support-text {
    margin-top: 24px !important;

    text-align: center !important;

    font-size: 16px !important;

    line-height: 1.6 !important;

    color: #222222 !important;
}


/* ---------------------------------------------------------
   HIDE @go.buu.ac.th
   --------------------------------------------------------- */

#root #sign-in-form .row.m-0:has(a[href*="go.buu.ac.th"]),
#root #sign-in-form .row.m-0:has(button[title*="go.buu.ac.th"]),
#root #registration-form .row.m-0:has(a[href*="go.buu.ac.th"]),
#root #registration-form .row.m-0:has(button[title*="go.buu.ac.th"]) {
    display: none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    #root #sign-in-form,
    #root #registration-form {
        max-width: 100% !important;
    }

    #root #sign-in-form .custom-login-header img,
    #root #registration-form .custom-login-header img {
        width: 70px !important;
    }

    #root #sign-in-form .custom-login-header .custom-login-title,
    #root #registration-form .custom-login-header .custom-login-title {
        font-size: 21px !important;
    }

    #root #sign-in-form input.form-control,
    #root #sign-in-form input.pgn__form-control,
    #root #registration-form input.form-control,
    #root #registration-form input.pgn__form-control {
        height: 50px !important;

        min-height: 50px !important;
    }

    #root #sign-in-form #sign-in,
    #root #registration-form #register,
    #root #registration-form button[type='submit'] {
        height: 52px !important;

        min-height: 52px !important;
    }
}

/* ---------------------------------------------------------
   TOOLS ROW (Remember Me & Forgot Password)
   --------------------------------------------------------- */
.custom-tools-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

.custom-tools-row .form-group {
    margin-bottom: 0 !important;
}

.custom-tools-row .form-group label {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #555555 !important;
    cursor: pointer !important;
}

.custom-tools-row .form-group input[type="checkbox"] {
    margin-right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #F2C84B !important;
}

/* Reset original forgot password spacing */
#root #sign-in-form #forgot-password,
#root #registration-form #forgot-password {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* ---------------------------------------------------------
   REGISTER TEXT BOTTOM
   --------------------------------------------------------- */
.custom-register-text-bottom {
    margin-top: 24px !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #333333 !important;
}

.custom-register-text-bottom a {
    color: #D49F00 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-left: 5px !important;
}

.custom-register-text-bottom a:hover {
    color: #B98500 !important;
    text-decoration: underline !important;
}

/* ---------------------------------------------------------
   FOOTER CONTACTS
   --------------------------------------------------------- */
.custom-login-footer {
    width: 100% !important;
    max-width: 450px !important;
    margin: 30px auto 20px auto !important;
    padding-top: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* เฉพาะหน้า Register ให้ขยับส่วน Footer ขึ้นและเพิ่มพื้นที่ด้านล่าง (ไม่ให้กระทบหน้า Sign In) */
#root:has(a[data-rb-event-key="/register"].active) .custom-login-footer {
    margin: 15px auto 40px auto !important;
}

/* ขยับแถบ Tab (Sign in / Register) ขึ้นไปเฉพาะตอนอยู่หน้า Register */
#root:has(a[data-rb-event-key="/register"].active) .pgn__tabs {
    margin-top: -20px !important;
}

.custom-footer-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 16px !important;
}

.custom-footer-contacts {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.contact-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 17px !important;
    color: #555555 !important;
    text-decoration: none !important;
}

.contact-link:hover {
    color: #333333 !important;
}

/* ---------------------------------------------------------
   INPUT ICONS & FLOATING LABELS FIX
   --------------------------------------------------------- */
.custom-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ดันข้อความใน input และ placeholder/label ให้พ้น icon */
#root #sign-in-form input.form-control,
#root #sign-in-form input.pgn__form-control,
#root #sign-in-form input[type="text"],
#root #sign-in-form input[type="email"],
#root #sign-in-form input[type="password"],
#root #registration-form input.form-control,
#root #registration-form input.pgn__form-control,
#root #registration-form input[type="text"],
#root #registration-form input[type="email"],
#root #registration-form input[type="password"],
#root form:not(#sign-in-form):not(#registration-form) input.form-control,
#root form:not(#sign-in-form):not(#registration-form) input.pgn__form-control,
#root form:not(#sign-in-form):not(#registration-form) input[type="text"],
#root form:not(#sign-in-form):not(#registration-form) input[type="email"],
#root form:not(#sign-in-form):not(#registration-form) input[type="password"] {
    padding-left: 48px !important;
}

#root #sign-in-form .pgn__form-control-floating-label,
#root #sign-in-form label,
#root #registration-form .pgn__form-control-floating-label,
#root #registration-form label,
#root form:not(#sign-in-form):not(#registration-form) .pgn__form-control-floating-label,
#root form:not(#sign-in-form):not(#registration-form) label {
    padding-left: 32px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    top: 0 !important;
    white-space: normal !important;
    /* ปรับขนาดตัวอักษรของข้อความ (Fullname, Email, etc.) ภายในช่องกรอกข้อมูล */
    font-size: 16px !important;
}

#root #sign-in-form label:has(input[type="checkbox"]),
#root #registration-form label:has(input[type="checkbox"]),
#root form:not(#sign-in-form):not(#registration-form) label:has(input[type="checkbox"]) {
    padding-left: 0 !important;
    height: auto !important;
    display: flex !important;
}

/* ---------------------------------------------------------
   PASSWORD EYE BUTTON HOVER FIX & ALIGNMENT
   --------------------------------------------------------- */
/* จัดกึ่งกลาง Icon ดวงตาในแนวตั้ง */
#root #sign-in-form .pgn__form-control-decorator-trailing,
#root #registration-form .pgn__form-control-decorator-trailing {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ลบสีพื้นหลังตอนเอาเมาส์ไปวาง (Hover) และตอนคลิก (Active/Focus) บนปุ่มดวงตา */
#root #sign-in-form button[name="passwordIcon"]:hover,
#root #sign-in-form button[name="passwordIcon"]:focus,
#root #sign-in-form button[name="passwordIcon"]:active,
#root #registration-form button[name="passwordIcon"]:hover,
#root #registration-form button[name="passwordIcon"]:focus,
#root #registration-form button[name="passwordIcon"]:active {
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

#root #sign-in-form button[name="passwordIcon"],
#root #registration-form button[name="passwordIcon"] {
    background-color: transparent !important;
}

/* ซ่อนไอคอนดวงตาที่แถมมากับบราวเซอร์ (เช่น Edge) เพื่อไม่ให้ซ้ำซ้อน */
#root #sign-in-form input[type="password"]::-ms-reveal,
#root #sign-in-form input[type="password"]::-ms-clear,
#root #registration-form input[type="password"]::-ms-reveal,
#root #registration-form input[type="password"]::-ms-clear,
#root #sign-in-form input[type="password"]::-webkit-credentials-auto-fill-button,
#root #registration-form input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

/* ---------------------------------------------------------
   FORGET PASSWORD PAGE TEXT ALIGNMENT & FONT STYLING
   --------------------------------------------------------- */
#root #forget-password-form h2.h4 {
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    font-family: 'Prompt', 'Kanit', sans-serif !important;
    margin-bottom: 12px !important;
}

#root #forget-password-form p.mb-4 {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    font-family: 'Prompt', 'Kanit', sans-serif !important;
}

/* ---------------------------------------------------------
   HIDE LEFT PANEL MARKETING TEXT
   --------------------------------------------------------- */
#root h1.text-white {
    display: none !important;
}

/* ลบพื้นหลังสีฟ้าของระบบเดิมและทำให้โปร่งใส เพื่อโชว์ภาพพื้นหลัง */
#root,
#root .layout,
#root .pgn__page,
#root .pgn__page-container,
#root .layout-container {
    background-color: transparent !important;
    background-image: none !important;
}

/* ซ่อนแถบสีฟ้าและกราฟิกดั้งเดิมของระบบ Open edX (เปลี่ยนเป็นซ่อนแบบโปร่งใสเพื่อรักษาโครงสร้างให้ฟอร์มอยู่ฝั่งขวา) */
#root .layout>.w-50.d-flex,
#root .bg-primary-400 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------
   TRANSLUCENT BACKGROUND (Glassmorphism Effect)
   --------------------------------------------------------- */
/* ทำให้กรอบพื้นหลังสีขาวทึบ และเอาความฟรุ้งๆ(เบลอ)ออก */
#root .layout .content,
#root .pgn__page-content {
    /* background-color: #f3f4f4 !important; */
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /*  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; */

    /* ปรับขนาดให้เล็กลง (scale), ขยับไปทางขวา (translateX), และเลื่อนขึ้นข้างบน (translateY) */
    transform: scale(0.82) !important;

    /* สำคัญมาก: กำหนดจุดศูนย์กลางการย่อให้อยู่ขอบบน (top) เพื่อให้เวลาย่อแล้วกล่องยังคงติดขอบบนสุด ไม่เกิดช่องว่าง */
    transform-origin: top center !important;
    margin-top: 15px !important;

    /* บีบความกว้างกล่องให้เล็กลง (ค่าเดิมประมาณ 450px) */
    max-width: 700px !important;

}


/* ใส่รูปภาพพื้นหลังที่ body */
body {
    background-image: url('https://mooc.buu.ac.th/static/indigo/images/background1.svg') !important;

    /* สั่งให้รูปชิดซ้าย และไม่ขยายรูปจนผิดสัดส่วน (ใช้ contain หรือ auto) */
    background-size: 100vw 100vh !important;
    /* background-size: contain !important; */
    background-position: left center !important;
    background-repeat: no-repeat !important;
    /* background-color: #ffffff !important; */
    background-color: #f3f4f4 !important;


    /* ป้องกันการเลื่อนหน้าจอ (Scroll) และให้เต็มจอพอดี */
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* บังคับให้กล่อง Login ชิดขวาเสมอ และอยู่กึ่งกลางแนวตั้ง */
#root .layout {
    display: flex !important;
    align-items: flex-start !important;
    /* ดันกล่องขึ้นไปชิดขอบบนสุดตามที่ต้องการ */
    justify-content: flex-end !important;
    padding-right: 3% !important;
    padding-top: 0 !important;
    /* ลบระยะห่างด้านบน */
    margin-top: 0 !important;
    /* ลบระยะห่างด้านบน */
    height: 100% !important;
}

/* พอเป็นจอมือถือ/แท็บเล็ต (ขนาดเล็กกว่า 1200px) ให้ซ่อนรูปภาพและใช้พื้นหลังสีขาวล้วน พร้อมกับจัดกล่องมาตรงกลาง */
@media (max-width: 1200px) {
    body {
        background-image: none !important;
        background-color: #ffffff !important;
        /* เปิดให้สามารถ Scroll หน้าจอได้ในจอมือถือ/แท็บเล็ต */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    body #root {
        overflow: visible !important;
        height: auto !important;
    }

    body #root .layout {
        justify-content: center !important;
        padding-right: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* รีเซ็ต margin-right ที่ผู้ใช้ตั้งไว้ -150px เพื่อให้กล่องกลับมาอยู่ตรงกลางจริงๆ */
    body #root .layout .content,
    body #root .pgn__page-content {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* ปิดเอฟเฟกต์แสงเงา/รัศมีสีฟ้าที่มุมจอ */
[dir=ltr] #root .layout:after,
[dir=ltr] #root .layout:before {
    box-shadow: none !important;
    display: none !important;
}

@media (min-width: 576px) {

    #root .layout:after,
    #root .layout:before {
        display: none !important;
    }
}