/* SukhumvitSet */
@font-face {
    font-family: 'SukhumvitSetThin';
    src: url('../assets/fonts/SukhumvitSet-Thin.woff') format('woff');
}


@font-face {
    font-family: 'SukhumvitSetLight';
    src: url('../assets/fonts/SukhumvitSet-Light.woff') format('woff');
}

@font-face {
    font-family: 'SukhumvitSetRegular';
    src: url('../assets/fonts/SukhumvitSet-Text.woff') format('woff');
}

@font-face {
    font-family: 'SukhumvitSetMedium';
    src: url('../assets/fonts/SukhumvitSet-Medium.woff') format('woff');
}

@font-face {
    font-family: 'SukhumvitSetSemiBold';
    src: url('../assets/fonts/SukhumvitSet-SemiBold.woff') format('woff');
}


@font-face {
    font-family: 'SukhumvitSetBold';
    src: url('../assets/fonts/SukhumvitSet-Bold.woff') format('woff');
}


@font-face {
    font-family: 'SukhumvitSetExtraBold';
    src: url('../assets/fonts/SukhumvitSet-Extra%20Bold.woff') format('woff');
}

/* SF Thonburi */

@font-face {
    font-family: 'SFThonburiLight';
    src: url('../assets/fonts/SFThonburi.woff') format('woff');
}

@font-face {
    font-family: 'SFThonburiRegular';
    src: url('../assets/fonts/SFThonburi-Regular.woff') format('woff');
}

@font-face {
    font-family: 'SFThonburiSemiBold';
    src: url('../assets/fonts/SFThonburi-Semibold.woff') format('woff');
}


@font-face {
    font-family: 'SFThonburiBold';
    src: url('../assets/fonts/SFThonburi-Bold.woff') format('woff');
}

/* sarabun */
@font-face {
    font-family: 'SarabunThin';
    src: url('../assets/fonts/Sarabun-Thin.woff') format('woff');
}
@font-face {
    font-family: 'SarabunExtraLight';
    src: url('../assets/fonts/Sarabun-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'SarabunLight';
    src: url('../assets/fonts/Sarabun-Light.woff') format('woff');
}
@font-face {
    font-family: 'SarabunRegular';
    src: url('../assets/fonts/Sarabun-Regular.woff') format('woff');
}
@font-face {
    font-family: 'SarabunMedium';
    src: url('../assets/fonts/Sarabun-Medium.woff') format('woff');
}
@font-face {
    font-family: 'SarabunSemiBold';
    src: url('../assets/fonts/Sarabun-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'SarabunBold';
    src: url('../assets/fonts/Sarabun-Bold.woff') format('woff');
}
@font-face {
    font-family: 'SarabunExtraBold';
    src: url('../assets/fonts/Sarabun-ExtraBold.woff') format('woff');
}

/* Kanit */
@font-face {
    font-family: 'KanitThin';
    src: url('../assets/fonts/Kanit-Thin.woff') format('woff');
}
@font-face {
    font-family: 'KanitExtraLight';
    src: url('../assets/fonts/Kanit-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'KanitLight';
    src: url('../assets/fonts/Kanit-Light.woff') format('woff');
}
@font-face {
    font-family: 'KanitRegular';
    src: url('../assets/fonts/Kanit-Regular.woff') format('woff');
}
@font-face {
    font-family: 'KanitMedium';
    src: url('../assets/fonts/Kanit-Medium.woff') format('woff');
}
@font-face {
    font-family: 'KanitSemiBold';
    src: url('../assets/fonts/Kanit-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'KanitBold';
    src: url('../assets/fonts/Kanit-Bold.woff') format('woff');
}
@font-face {
    font-family: 'KanitExtraBold';
    src: url('../assets/fonts/Kanit-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'KanitBlack';
    src: url('../assets/fonts/Kanit-Black.woff') format('woff');
}

/* NotoSansKR */
@font-face {
    font-family: 'NotoSansKRThin';
    src: url('../assets/fonts/NotoSansKR-Thin.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRExtraLight';
    src: url('../assets/fonts/NotoSansKR-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRLight';
    src: url('../assets/fonts/NotoSansKR-Light.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRRegular';
    src: url('../assets/fonts/NotoSansKR-Regular.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRMedium';
    src: url('../assets/fonts/NotoSansKR-Medium.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRSemiBold';
    src: url('../assets/fonts/NotoSansKR-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRBold';
    src: url('../assets/fonts/NotoSansKR-Bold.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRExtraBold';
    src: url('../assets/fonts/NotoSansKR-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'NotoSansKRBlack';
    src: url('../assets/fonts/NotoSansKR-Black.woff') format('woff');
}
/* arial */
@font-face {
    font-family: 'arialRegular';
    src: url('../assets/fonts/arial.woff') format('woff');
}
@font-face {
    font-family: 'arialRegularItalic';
    src: url('../assets/fonts/ariali.woff') format('woff');
}
@font-face {
    font-family: 'arialMedium';
    src: url('../assets/fonts/arialbd.woff') format('woff');
}
@font-face {
    font-family: 'arialSemiBold';
    src: url('../assets/fonts/Arialn_0.woff') format('woff');
}
@font-face {
    font-family: 'arialBold';
    src: url('../assets/fonts/ARIALNB.woff') format('woff');
}
@font-face {
    font-family: 'arialExtraBold';
    src: url('../assets/fonts/ariblk.woff') format('woff');
}

/* Bangkok*/
@font-face {
    font-family: 'BangkokTime1';
    src: url('../assets/fonts/Bangkok-Time1.woff') format('woff');
}

@font-face {
    font-family: 'BangkokTime2';
    src: url('../assets/fonts/Bangkok-Time2.woff') format('woff');
}

@font-face {
    font-family: 'BangkokMoney';
    src: url('../assets/fonts/Bangkok-Money.woff') format('woff');
}

@font-face {
    font-family: 'BangkokTime';
    src: url('../assets/fonts/Bangkok-Time.woff') format('woff');
}
/* BangkokMoney */
@font-face {
    font-family: 'BangkokMoneyRegular';
    src: url('../assets/fonts/Bangkok-Money-Regular.woff') format('woff');
}
@font-face {
    font-family: 'BangkokMoneyMedium';
    src: url('../assets/fonts/Bangkok-Money-Medium.woff') format('woff');
}
@font-face {
    font-family: 'BangkokMoneySemiBold';
    src: url('../assets/fonts/Bangkok-Money-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'BangkokMoneyBold';
    src: url('../assets/fonts/Bangkok-Money-Bold.woff') format('woff');
}

/* TTB-Money */
@font-face {
    font-family: 'TTBMoneyRegular';
    src: url('../assets/fonts/TTB-Money-Regular.woff') format('woff');
}
@font-face {
    font-family: 'TTBMoneyMedium';
    src: url('../assets/fonts/TTB-Money-Medium.woff') format('woff');
}
@font-face {
    font-family: 'TTBMoneySemiBold';
    src: url('../assets/fonts/TTB-Money-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'TTBMoneyBold';
    src: url('../assets/fonts/TTB-Money-Bold.woff') format('woff');
}
@font-face {
    font-family: 'TTBMoneyExtraBold';
    src: url('../assets/fonts/TTB-Money-ExtraBold.woff') format('woff');
}
/* krungsri */
@font-face {
    font-family: 'krungsriRegular';
    src: url('../assets/fonts/krungsri_con-webfont.woff') format('woff');
}
@font-face {
    font-family: 'krungsriMedium';
    src: url('../assets/fonts/krungsri_con_med-webfont.woff') format('woff');
}
@font-face {
    font-family: 'krungsriBold';
    src: url('../assets/fonts/krungsri_con_bol-webfont.woff') format('woff');
}

/* THSarabunNew */

@font-face {
    font-family: 'THSarabunRegular';
    src: url('../assets/fonts/THSarabun.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunBold';
    src: url('../assets/fonts/THSarabun-Bold.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunItalic';
    src: url('../assets/fonts/THSarabun-Italic.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunBoldItalic';
    src: url('../assets/fonts/THSarabun-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunNew';
    src: url('../assets/fonts/THSarabunNew.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunNewBold';
    src: url('../assets/fonts/THSarabunNew-Bold.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunNewItalic';
    src: url('../assets/fonts/THSarabunNew-Italic.woff') format('woff');
}

@font-face {
    font-family: 'THSarabunNewBoldItalic';
    src: url('../assets/fonts/THSarabunNew-BoldItalic.woff') format('woff');
}
/*DBHelvethaicaMonX*/
@font-face {
    font-family: 'DBHelvethaicaMonX';
    src: url('../assets/fonts/DBHelvethaicaMonX.woff') format('woff');
}

@font-face {
    font-family: 'DBHelvethaicaMonXCond';
    src: url('../assets/fonts/DBHelvethaicaMonXCond.woff') format('woff');
}
@font-face {
    font-family: 'DBHelvethaicaMonXMed';
    src: url('../assets/fonts/DBHelvethaicaMonXMed.woff') format('woff');
}

@font-face {
    font-family: 'DBHelvethaicaMonXMedCond';
    src: url('../assets/fonts/DBHelvethaicaMonXMedCond.woff') format('woff');
}

@font-face {
    font-family: 'DBHelvethaicaMonXBold';
    src: url('../assets/fonts/DBHelvethaicaMonXBd.woff') format('woff');
}

@font-face {
    font-family: 'DBHelvethaicaMonXBoldCond';
    src: url('../assets/fonts/DBHelvethaicaMonXBdCond.woff') format('woff');
}

/* Times New Roman*/
@font-face {
    font-family: 'TimesNewRoman';
    src: url('../assets/fonts/times.woff') format('woff');
}

@font-face {
    font-family: 'TimesNewRomanBold';
    src: url('../assets/fonts/timesbd.woff') format('woff');
}

@font-face {
    font-family: 'TimesNewRomanItalic';
    src: url('../assets/fonts/timesi.woff') format('woff');
}

@font-face {
    font-family: 'TimesNewRomanBoldItalic';
    src: url('../assets/fonts/timesbi.woff') format('woff');
}

/* IBM Plex sans thai */
@font-face {
    font-family: 'IBMPlexsansthaiThin';
    src: url('../assets/fonts/IBMPlexSansThai-Thin.woff') format('woff');
}
@font-face {
    font-family: 'IBMPlexsansthaiExtraLight';
    src: url('../assets/fonts/IBMPlexSansThai-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'IBMPlexsansthaiLight';
    src: url('../assets/fonts/IBMPlexSansThai-Light.woff') format('woff');
}
@font-face {
    font-family: 'IBMPlexsansthaiRegular';
    src: url('../assets/fonts/IBMPlexSansThai-Regular.woff') format('woff');
}
@font-face {
    font-family: 'IBMPlexsansthaiMedium';
    src: url('../assets/fonts/IBMPlexSansThai-Medium.woff') format('woff');
}
@font-face {
    font-family: 'IBMPlexsansthaiSemiBold';
    src: url('../assets/fonts/IBMPlexSansThai-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'IBMPlexsansthaiBold';
    src: url('../assets/fonts/IBMPlexSansThai-Bold.woff') format('woff');
}


/* Other*/
@font-face {
    font-family: 'DXKrungthaiSemiBold';
    src: url('../assets/fonts/DX-Krungthai-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'DXKrungthaiThin';
    src: url('../assets/fonts/DX-Krungthai-Thin.woff') format('woff');
}

@font-face {
    font-family: 'DXSCB';
    src: url('../assets/fonts/DX-SCB.woff') format('woff');
}

@font-face {
    font-family: 'DXTTBBold';
    src: url('../assets/fonts/DX-TTB-bold.woff') format('woff');
}

@font-face {
    font-family: 'DXTTBRegular';
    src: url('../assets/fonts/DX-TTB-regular.woff') format('woff');
}

@font-face {
    font-family: 'DXKrungthaiBold';
    src: url('../assets/fonts/DX-Krungthai-Bold.woff') format('woff');
}

@font-face {
    font-family: 'DXKrungthaiMedium';
    src: url('../assets/fonts/DX-Krungthai-Medium.woff') format('woff');
}

@font-face {
    font-family: 'DXKrungthaiRegular';
    src: url('../assets/fonts/DX-Krungthai-Regular.woff') format('woff');
}
@font-face {
    font-family: 'TTBMoney';
    src: url('../assets/fonts/TTB Money.woff') format('woff');
}

@font-face {
    font-family: 'CoreSansLight';
    src: url('../assets/fonts/Core-Sans-E-W01-35-Light.woff') format('woff');
}

@font-face {
    font-family: 'CoreSansBold';
    src: url('../assets/fonts/Core-Sans-N-65-Bold.woff') format('woff');
}

@font-face {
    font-family: 'BaacBold';
    src: url('../assets/fonts/Baac_Bold.woff') format('woff');
}

/* kurious*/
@font-face {
    font-family: 'kuriousRegular';
    src: url('../assets/fonts/kurious-Regular.woff') format('woff');
}
@font-face {
    font-family: 'kuriousMedium';
    src: url('../assets/fonts/kurious-medium.woff') format('woff');
}
@font-face {
    font-family: 'kuriousSemiBold';
    src: url('../assets/fonts/kurious-semibold.woff') format('woff');
}
@font-face {
    font-family: 'kuriousBold';
    src: url('../assets/fonts/kurious-Bold.woff') format('woff');
}

/* kurious*/
@font-face {
    font-family: 'kuriousRegular';
    src: url('../assets/fonts/kurious-Regular.woff') format('woff');
}
@font-face {
    font-family: 'kuriousMedium';
    src: url('../assets/fonts/kurious-medium.woff') format('woff');
}
@font-face {
    font-family: 'kuriousSemiBold';
    src: url('../assets/fonts/kurious-semibold.woff') format('woff');
}
@font-face {
    font-family: 'kuriousBold';
    src: url('../assets/fonts/kurious-Bold.woff') format('woff');
}

body {
    font-family: 'KanitMedium', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110vh;
    margin: 0;
    background: linear-gradient(135deg, #4a5a6a, #3a4d5b, #2f3e4c, #263340);
    overflow: auto;
}


.container {
    display: flex;
    gap: 20px;
    transform: scale(0.67);
    transform-origin: center;
    position: relative;
}

.display-container, .form-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: rgba(255, 255, 255, 0.0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.0);
    border-radius: 10px;
    min-width: 300px;
    max-width: 2200px;
    min-height: 400px;
    max-height: 1500px;
    resize: both;
    overflow: auto;
}

.form {
    display: flex;
    flex-direction: column;
    width: 380px;
}

h1 {
    font-family: 'KanitRegular', Arial, sans-serif;
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
}

h2 {
    font-family: 'KanitRegular', Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #0099ff;
    margin-bottom: 10px;
}


label {
    font-family: 'KanitRegular', Arial, sans-serif;
    margin-top: 15px;
    font-size: 23px;
    font-weight: normal;
    color: #D1D1D1;
}

input, select {
    margin-top: 7px;
    padding: 10px;
    font-size: 22px;
    font-family: 'KanitRegular', Arial, sans-serif;
    border: 2px solid #5d6970;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.0); /* This makes the background transparent */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    color: #fff; /* Change the text color to something that contrasts with the background */
}

input:focus, select:focus {
    border-color: #ffffff;
    border-width: 2px; /* เพิ่มความหนา */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
}


select option {
    font-size: 18px;
    background-color: #263340; /* ปรับสีพื้นหลังของตัวเลือก */
    color: #fff; /* สีตัวอักษรของตัวเลือก */
}

select option:hover {
    background-color: #0066cc; /* เปลี่ยนสีของตัวเลือกเมื่อ hover */
    color: #fff; /* สีของตัวอักษรในขณะ hover */
}

select option:checked {
    background-color: #004b99; /* เปลี่ยนสีพื้นหลังเมื่อมีการเลือก */
    color: #fff; /* สีตัวอักษรเมื่อมีการเลือก */
}


button {
    font-family: 'KanitRegular', Arial, sans-serif;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

input:hover, select:hover {
    background: rgba(255, 255, 255, 0.1); /* เพิ่มความขาวอ่อนเมื่อ hover */
    color: #ffffff; /* สีข้อความเปลี่ยนเป็นขาว */
}

button:hover {
    background-color: #4a5a6a; /* เพิ่มสีขาวอ่อนเมื่อ hover */
    color: #ffffff;
}

select option:hover {
    background-color: rgba(255, 255, 255, 0.2); /* เพิ่มความขาวอ่อนเมื่อ hover */
    color: #ffffff;
}


.display {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#canvas {
    border: none;
}

.qrcode-drop-area {
    margin-top: 5px;
    padding: 10px;
    font-size: 20px;
    font-family: 'KanitRegular', Arial, sans-serif;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
    color: #999;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Battery Slider Styles */
#battery {
    appearance: none;
    width: 93%;
    height: 8px;
    background: #4a5a6a; /* Matches the background color scheme */
    border-radius: 5px;
    outline: none;
    transition: background 0.3s ease;
    margin-top: 10px;
}

#battery::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #4a5a6a;
    border-radius: 5px;
    transition: background 0.3s ease;
}

#battery:hover::-webkit-slider-runnable-track {
    background: #5d6970; /* Lighter on hover for track */
}

#battery::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff; /* White thumb for contrast */
    box-shadow: 0px 0px 8px rgba(0, 102, 204, 0.7); /* Adds a glowing effect */
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    top: -4px; /* Center the thumb */
}

#battery:active::-webkit-slider-thumb {
    background: #99ccff; /* Lighter blue on active */
    box-shadow: 0px 0px 12px rgba(0, 102, 204, 1); /* Stronger glow when dragging */
}

/* For Firefox */
#battery::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #4a5a6a;
    border-radius: 5px;
}

#battery::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0px 0px 8px rgba(0, 102, 204, 0.7);
    cursor: pointer;
}

#battery:active::-moz-range-thumb {
    background: #99ccff;
    box-shadow: 0px 0px 12px rgba(0, 102, 204, 1);
}

/* Power Saving Mode Button */
#powerSavingMode {
    margin-top: 10px;
    background-color: #ff9900;
    border-radius: 8px;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#powerSavingMode:hover {
    background-color: #cc6600;
    transform: scale(1.05); /* Slight zoom on hover */
}


/* ปรับแต่ง Scrollbar ให้เข้ากับธีม */
::-webkit-scrollbar {
    width: 10px; /* ความกว้างของ scrollbar */
}

::-webkit-scrollbar-track {
    background: #2f3e4c; /* สี track เข้ากับพื้นหลัง */
    border-radius: 10px; /* เพิ่มความโค้งมนให้ scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: #3a4d5b; /* สี scrollbar เน้นให้เข้ากับองค์ประกอบ */
    border-radius: 10px; /* เพิ่มความโค้งมนให้ scrollbar */
    border: 2px solid #2f3e4c; /* ขอบรอบ scrollbar เข้ากับ track */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #4a5a6a; /* เปลี่ยนสีเมื่อ hover เข้ากับพื้นหลัง */
}



::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2); /* เพิ่มความขาวอ่อนเมื่อ hover */
}




/* Add this to your existing CSS */

#image-checkboxes-left, #image-checkboxes-right {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

#image-checkboxes-left label, #image-checkboxes-right label {
    font-size: 18px;
    color: #ffffff;
}

#image-checkboxes-left input[type="checkbox"], #image-checkboxes-right input[type="checkbox"] {
    margin-right: 5px;
}


/* ติ๊กหลายๆอัน*/
/* Title Selection Buttons */
#title-selection, #gender-selection , #status-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.title-btn {
    font-family: 'KanitRegular', Arial, sans-serif;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    background-color: #3a4d5b;
    color: #ffffff;
    border: 2px solid #5d6970;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.title-btn:hover {
    background-color: #4a5a6a;
    transform: translateY(-2px);
}

.title-btn.active {
    background-color: #0066cc;
    border-color: #004b99;
    transform: none;
}

.title-btn.active:hover {
    background-color: #005bb5;
}

input[list] {
    margin-top: 7px;
    padding: 10px;
    font-size: 22px;
    font-family: 'KanitRegular', Arial, sans-serif;
    border: 2px solid #5d6970;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.0);
    color: #fff;
}

textarea {
    margin-top: 7px;
    padding: 10px;
    font-size: 22px;
    font-family: 'KanitRegular', Arial, sans-serif;
    border: 2px solid #5d6970;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.0);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    color: #fff;
    resize: vertical;
}
textarea:focus {
    border-color: #ffffff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
}
textarea:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* --- Performance Mode (Low Spec) สำหรับหน้าสลิป --- */
body.low-spec-mode * {
    transition: none !important;
    animation: none !important;
}

body.low-spec-mode .container,
body.low-spec-mode .display-container,
body.low-spec-mode .form-container,
body.low-spec-mode input,
body.low-spec-mode select,
body.low-spec-mode button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* หากมีเอฟเฟกต์กระจกในหน้าสลิป ให้ปรับให้ทึบในโหมดนี้ */
body.low-spec-mode .premium-glass {
    background: #ffffff !important; /* หรือสีที่คุณต้องการเมื่อปิดเอฟเฟกต์ */
    backdrop-filter: none !important;
}

/* --- การทำงานเมื่อเปิด Low Spec Mode --- */
        body.low-spec-mode * {
            /* ปิด Transition และ Animation ทุกอย่างในหน้าเว็บ */
            transition: none !important;
            animation: none !important;
        }

        /* ===== เพิ่มโค้ด 5 บรรทัดนี้ลงไปครับ ===== */
        /* บังคับปิดความหน่วงของคลื่นลูกเล่นต่างๆ (รวมถึงคลื่น Sidebar) */
        body.low-spec-mode *::before,
        body.low-spec-mode *::after {
            transition: none !important;
            animation: none !important;
        }
        /* ==================================== */