/* Project: Leroy Classic RO - Global Styles 
   Style: Dark Luxury Minimal
   Updated: 2026-04-16
*/

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;600&display=swap');

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

body {
    font-family: 'Sarabun', sans-serif;
    color: #FFFFFF;
    background-color: #050505;
    overflow-x: hidden;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* เปลี่ยนจาก 100vw เป็น 100% */
    height: 100%; /* เปลี่ยนจาก 100vh เป็น 100% */
    z-index: -1;
    overflow: hidden; /* ป้องกันลูกล้น */
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(45%) grayscale(15%);
    pointer-events: none; /* ป้องกันการคลิกโดนวิดีโอ */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}

/* --- ปรับปรุง Navigation ให้ใหญ่และหรูหราขึ้น --- */
.navbar {
    width: 100%;
    position: relative;
    padding: 50px 0; /* เพิ่มพื้นที่แนวตั้งให้เมนูดูโปร่งขึ้น */
    z-index: 1000;
}

.nav-container {
    max-width: 1600px; /* ขยายความกว้างสูงสุดของแถวเมนู */
    margin: 0 auto;
}

.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 55px; /* ขยายระยะห่างระหว่างแต่ละเมนู */
    width: 100%;
}

.menu-item a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 300;
    letter-spacing: 3px; /* เพิ่มระยะห่างตัวอักษรให้ดูแพง */
    font-size: 1.15rem;   /* ขยายขนาดตัวอักษรขึ้นอีกนิด */
    padding: 10px 5px;
    white-space: nowrap;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu-item a:hover {
    color: #fff;
    letter-spacing: 5px; /* เพิ่ม Effect เวลา Hover ให้ตัวอักษรยืดออก */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* ปรับขนาดโลโก้ให้สมดุลกับเมนูที่ขยายขึ้น */
.nav-logo {
    margin: 0 40px; 
}

.nav-logo img {
    max-height: 90px; /* ขยายโลโก้ให้เด่นขึ้น */
    width: auto;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.25));
    transition: transform 0.5s ease;
}

.nav-logo img:hover {
    transform: scale(1.05); /* เพิ่มลูกเล่นให้โลโก้ขยับนิดๆ เวลาเอาเมาส์ไปชี้ */
}

/* ปุ่ม Discord แบบพรีเมียม */
.btn-discord {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 12px 30px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    font-size: 1.1rem !important;
}

.btn-discord:hover {
    background: #fff !important;
    color: #000 !important;
}

/* --- Main Layout --- */
.content {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 80px;
}

.main-wrapper {
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Status Frame --- */
.status-frame {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 2px;
}

.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    transition: 0.5s;
}

.status-item .label { font-size: 0.7rem; color: #666; letter-spacing: 2px; margin-right: 10px; }
.status-item .value { font-size: 0.95rem; letter-spacing: 1px; }
.online-count { color: #f1c40f !important; }
.status-divider { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.1); }

/* --- Announce Container (ใช้ร่วมกับ Register และ Online) --- */
.announce-container {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px;
    border-radius: 2px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease-out;
}

.announce-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.announce-header h2 {
    font-weight: 200;
    font-size: 0.95rem;
    letter-spacing: 6px;
    margin: 0 25px;
    white-space: nowrap;
}

.line {
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

/* --- Announcement Items --- */
.ann-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ann-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}

.ann-content .date {
    min-width: 110px;
    font-size: 0.75rem;
    color: #555;
}

.ann-content p {
    font-weight: 300;
    font-size: 0.95rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-more-btn {
    text-decoration: none;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    margin-left: 20px;
    transition: 0.3s;
}

.read-more-btn:hover { background: #fff; color: #000; }

/* --- แก้ไขส่วนนี้เพื่อให้ตารางกับปุ่มเรียงกันบนลงล่าง --- */
#online-list-content {
    display: flex;
    flex-direction: column; /* บังคับให้ตารางอยู่บน ปุ่มอยู่ล่าง */
    align-items: center;    /* จัดทุกอย่างให้อยู่กึ่งกลางหน้าจอ */
    width: 100%;
}

.online-table {
    width: auto;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 20px;    /* เพิ่มระยะห่างระหว่างท้ายตารางกับปุ่ม */
}

/* กำหนดความกว้างแต่ละช่อง (รวมแล้วต้องสมดุลซ้าย-ขวา) */
.online-table th:nth-child(1), .online-table td:nth-child(1) { width: 180px; } /* ชื่อตัวละคร */
.online-table th:nth-child(2), .online-table td:nth-child(2) { width: 150px; } /* อาชีพ (อยู่ตรงกลาง) */
.online-table th:nth-child(3), .online-table td:nth-child(3) { width: 70px;  } /* เลเวล */
.online-table th:nth-child(4), .online-table td:nth-child(4) { width: 70px;  } /* จ๊อบ */
.online-table th:nth-child(5), .online-table td:nth-child(5) { width: 180px; } /* สถานที่ */

.online-table th {
    text-align: center;
    font-size: 0.75rem;
    color: #666; /* สีหัวข้อภาษาไทยให้ซอฟต์ลง */
    letter-spacing: 1px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.online-table td {
    padding: 15px 5px;
    font-size: 0.95rem;
    color: #bbb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    text-align: center;
}

.job-col { color: #888 !important; font-weight: 300; }
.lv-col { color: #f1c40f !important; font-family: sans-serif; } /* สีเหลืองทองสำหรับเลเวล */

.char-name { color: #fff !important; font-weight: 400; }
.map-name { color: #555; font-size: 0.75rem; }

/* --- Register Form Style --- */
.register-box { max-width: 400px; margin: 0 auto; padding: 10px 0; }
.input-group { margin-bottom: 15px; }
.input-group input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    color: #fff;
    font-family: 'Sarabun', sans-serif;
    outline: none;
    transition: 0.3s;
}
.input-group input:focus { border-color: rgba(255, 255, 255, 0.4); }

.gender-group {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: #888;
}

.btn-register {
    width: 100%;
    padding: 15px;
    background: #fff;
    color: #000;
    border: none;
    font-family: 'Sarabun', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.btn-register:hover { background: #f1c40f; }

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Pagination Style (ปรับให้อยู่ล่างตาราง) --- */
/* ส่วนของ Pagination (ปุ่ม) */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;            /* ให้กว้างเต็มเพื่อให้กึ่งกลางทำงาน */
    margin-top: 10px;
    padding: 20px 0;
}

.page-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #555;
    width: 35px;  /* ทำปุ่มเป็นสี่เหลี่ยมจตุรัสจะดูพรีเมียมกว่า */
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.page-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.page-btn.active {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* --- ปรับปรุงขนาดฟอร์มสมัครสมาชิกให้ใหญ่และอ่านง่ายขึ้น --- */
.register-main-frame { 
    max-width: 700px !important; /* ขยายความกว้างกรอบรวมอีกนิด */
    margin: 0 auto; 
}

.register-box label { 
    display: block; 
    font-size: 0.9rem;      /* ขยายหัวข้อจาก 0.7rem เป็น 0.9rem */
    color: #888;           /* ปรับสีให้สว่างขึ้นเล็กน้อยให้อ่านง่าย */
    letter-spacing: 2px; 
    margin-bottom: 12px;   /* เพิ่มระยะห่างระหว่างหัวข้อกับช่องกรอก */
    font-weight: 300;
}

.input-group input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;    /* เพิ่มความหนาของช่องกรอก */
    color: #fff;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;      /* ขยายขนาดตัวอักษรในช่องกรอก */
    font-weight: 200;
    outline: none;
    transition: 0.3s;
    border-radius: 2px;
}

.input-group input:focus { 
    border-color: rgba(255, 255, 255, 0.4); 
    background: rgba(255, 255, 255, 0.05);
}

/* ส่วนของเพศ (Gender) */
.gender-group {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px 0;
    font-size: 1rem;       /* ขยายขนาดตัวหนังสือส่วนเลือกเพศ */
    color: #aaa;
}

.gender-group input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2); /* ขยายปุ่ม Radio ให้ใหญ่ขึ้น */
}

/* ปุ่มสมัครสมาชิกขนาดใหญ่ */
.btn-register {
    width: 100%;
    padding: 20px;         /* เพิ่มความหนาปุ่ม */
    background: #fff;
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.2rem;      /* ขยายขนาดตัวอักษรปุ่ม */
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.4s;
    border: none;
    margin-top: 10px;
}

.btn-register:hover {
    background: #f1c40f;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(241, 196, 15, 0.2);
}

/* --- ปรับแต่ง CAPTCHA ให้อยู่กึ่งกลางและล็อคจำนวนตัวอักษร --- */
/* จัดการระยะห่างของหัวข้อ Captcha */
.register-box .input-group label {
    display: block;
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 300;
    text-transform: uppercase; /* บังคับตัวพิมพ์ใหญ่ให้เหมือนส่วนอื่น */
}

/* ปรับระยะห่างของตัว Captcha Wrapper ให้กระชับขึ้นเมื่อมีหัวข้อแล้ว */
.captcha-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; /* เพิ่มระยะห่างด้านล่างก่อนถึงปุ่มสมัคร */
    width: 100%;
}

.captcha-container-inner {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03); /* ปรับให้สว่างเท่ากับช่อง Input อื่น */
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* ปรับสีขอบให้เท่ากับช่อง Input อื่น */
    border-radius: 2px;
    width: 100%;
}

/* --- ขยายขนาดการแสดงผล Captcha --- */
#captcha-img {
    height: 50px; /* เพิ่มความสูงจาก 35px เป็น 50px */
    width: auto;
    filter: invert(1) brightness(1.2); /* เพิ่มความสว่างให้ตัวหนังสือในภาพ */
    opacity: 0.9;
    transition: 0.3s;
    cursor: pointer;
}

.captcha-container-inner {
    padding: 15px 20px; /* เพิ่ม Padding ให้กล่องดูใหญ่ขึ้น */
    max-width: 450px;    /* ขยายความกว้างสูงสุดของกล่อง Captcha */
}

.captcha-container-inner input {
    font-size: 1.5rem;   /* ขยายตัวหนังสือที่พิมพ์ตอบให้ใหญ่และชัดเจน */
    font-weight: 600;    /* เพิ่มความหนา */
    letter-spacing: 8px; /* เพิ่มระยะห่างตัวอักษรให้อ่านง่ายขึ้นมาก */
    text-indent: 8px;
    color: #f1c40f;
}

/* ปรับขนาดปุ่มรีเฟรชให้เข้ากับกล่องที่ใหญ่ขึ้น */
.refresh-captcha {
    font-size: 1.5rem;
    margin: 0 15px;
}

.captcha-container-inner input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* แก้ไขส่วนนี้ */
    padding: 5px 0 !important; /* เอา padding ซ้ายขวาออกเพื่อให้ text-align: center ทำงานได้แม่นยำ */
    text-align: center;         /* จัดตัวอักษรให้อยู่กึ่งกลางช่องพิม */
    
    color: #f1c40f; 
    font-family: 'Sarabun', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 4px;        /* ระยะห่างตัวอักษร */
    text-indent: 4px;           /* ใส่ indent เท่ากับ spacing เพื่อให้ตัวสุดท้ายไม่เบี้ยวไปทางซ้าย */
    
    text-transform: uppercase;
    outline: none;
    width: 100%;                /* ให้ขยายเต็มพื้นที่ที่เหลือจากรูปภาพ */
}

.captcha-container-inner input::placeholder {
    color: #444;
    letter-spacing: 2px;
    text-indent: 0;             /* placeholder ไม่ต้องใส่ indent */
    font-size: 0.8rem;
    text-align: center;
}

.alert { padding: 15px; border-radius: 2px; font-size: 0.9rem; margin-bottom: 20px; text-align: center; }
.alert.success { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid #2ecc71; }
.alert.error { background: rgba(231, 76, 60, 0.2); color: #e74c3c; border: 1px solid #e74c3c; }

/* ปรับปุ่มให้หรูขึ้น */
.btn-register {
    background: #fff;
    color: #000;
    font-weight: 600;
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn-register:hover {
    background: #f1c40f;
    box-shadow: 0 10px 30px rgba(241, 196, 15, 0.3);
    transform: translateY(-2px);
}

/* --- ปรับแต่งช่องวันเกิด --- */
.birth-row {
    display: flex;
    gap: 15px;
}

.birth-row select {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    color: #fff;
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    border-radius: 2px;
}

.birth-row select option {
    background: #111;
    color: #fff;
}

/* --- ปรับแต่งส่วนเลือกเพศให้หรูหรา (Gender Selection) --- */
.gender-group {
    display: flex;
    gap: 15px; /* ระยะห่างระหว่างปุ่ม Male/Female */
    margin-bottom: 30px;
    width: 100%;
}

.gender-label {
    flex: 1;
    position: relative;
    cursor: pointer;
    text-align: center;
}

/* ซ่อน Radio จริงไว้ */
.gender-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* สร้างปุ่มจำลองขึ้นมาใหม่ */
.custom-gender-btn {
    display: block;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #555;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 2px;
}

/* เอฟเฟกต์เมื่อเมาส์ชี้ */
.gender-label:hover .custom-gender-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* เอฟเฟกต์เมื่อเลือก (Checked) */
.gender-label input[type="radio"]:checked + .custom-gender-btn {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* เพิ่มสัญลักษณ์ M / F เล็กๆ ด้านหน้าเพื่อให้ดูเท่ขึ้น */
.gender-label input[value="M"] + .custom-gender-btn::before { content: "M | "; opacity: 0.5; }
.gender-label input[value="F"] + .custom-gender-btn::before { content: "F | "; opacity: 0.5; }


/* --- Download Page Styles (New Full Version) --- */

/* กรอบหลักของหน้าดาวน์โหลด */
.download-main-frame {
    max-width: 950px !important;
    margin: 0 auto;
}

/* การจัดวางแบบ Grid แนวนอน */
.download-grid {
    display: flex;
    flex-direction: column;
    gap: 25px; /* ระยะห่างระหว่างแต่ละ Card */
    margin-top: 40px;
}

/* ตัวการ์ดดาวน์โหลด */
.download-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 35px 45px; /* เพิ่มพื้นที่ด้านในให้โปร่ง */
    border-radius: 2px;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.download-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px); /* เปลี่ยนเป็นยกตัวขึ้นจะดูพรีเมียมกว่า */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* ไอคอน */
.card-icon {
    flex: 0 0 70px;
    margin-right: 40px;
}

.card-icon img {
    width: 100%;
    height: auto;
    opacity: 0.6;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
}

/* ส่วนข้อมูลไฟล์ */
.card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-info h3 {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 12px; /* ระยะห่างจากชื่อไฟล์ไปคำอธิบาย */
}

.file-details {
    color: #888;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 15px; /* จุดที่ทำให้ไม่ติดกับปุ่ม/ขนาดไฟล์ */
}

.file-size {
    color: #f1c40f;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}

/* ส่วนปุ่มกด */
.card-action {
    margin-left: 50px; /* เว้นระยะจากข้อความไปหาปุ่ม */
}

/* สไตล์ปุ่มดาวน์โหลด */
.btn-download, .btn-download-outline {
    display: inline-block;
    min-width: 200px; /* ล็อคความกว้างปุ่มให้เท่ากันเพื่อความสวยงาม */
    text-align: center;
    padding: 18px 0;
    font-family: 'Sarabun', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.4s ease;
    border-radius: 2px;
}

/* ปุ่มหลัก (พื้นขาว ตัวดำ) */
.btn-download {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.btn-download:hover {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #000;
    box-shadow: 0 10px 25px rgba(241, 196, 15, 0.3);
}

/* ปุ่มรอง (เส้นขอบ) */
.btn-download-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-download-outline:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* ข้อความหมายเหตุ */
.download-notice {
    margin-top: 60px;
    text-align: center;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.download-notice p {
    color: #444;
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Responsive สำหรับมือถือ */
@media (max-width: 800px) {
    .download-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
    }
    .card-icon {
        margin-right: 0;
        margin-bottom: 25px;
    }
    .card-action {
        margin-left: 0;
        margin-top: 30px;
        width: 100%;
    }
    .btn-download, .btn-download-outline {
        width: 100%;
    }
}

/* --- Login Page Styles --- */
.login-main-frame {
    max-width: 500px !important;
    margin: 0 auto;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 30px 0;
}

.remember-me {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 1px;
}

.remember-me input {
    margin-right: 10px;
    accent-color: #f1c40f; /* สีทองเวลาติ๊ก */
    transform: scale(1.2);
}

.forgot-link {
    font-size: 0.8rem;
    color: #444;
    text-decoration: none;
    transition: 0.3s;
}

.forgot-link:hover {
    color: #fff;
}

.btn-login {
    width: 100%;
    padding: 18px;
    background: #fff;
    color: #000;
    border: none;
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 2px;
}

.btn-login:hover {
    background: #f1c40f;
    box-shadow: 0 10px 30px rgba(241, 196, 15, 0.2);
    transform: translateY(-2px);
}

.login-footer {
    margin-top: 35px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
}

.login-footer p {
    color: #555;
    font-size: 0.9rem;
}

.login-footer a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    transition: 0.3s;
}

.login-footer a:hover {
    color: #f1c40f;
    border-bottom-color: #f1c40f;
}

.birth-row {
    display: flex;
    gap: 10px;
}
.birth-row select {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    color: #fff;
    font-family: 'Sarabun', sans-serif;
    outline: none;
    border-radius: 2px;
}

/* --- Member Panel Styles --- */
.member-main-frame {
    max-width: 1000px !important;
    margin: 0 auto;
}

/* Welcome Section */
.member-welcome-section {
    text-align: center;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
}

.member-welcome-section h3 {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.member-welcome-section h3 span {
    color: #f1c40f;
    font-weight: 500;
}

.status-badge-container {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.status-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.status-item label {
    font-size: 0.7rem;
    color: #555;
    letter-spacing: 2px;
}

.status-item span {
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* --- ปรับแต่ง Member Grid ให้เป็น 3 คอลัมน์ --- */
.member-menu-grid {
    display: grid;
    /* ล็อคให้มี 3 คอลัมน์ ขนาดเท่ากัน */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    padding-bottom: 50px;
    margin-top: 20px;
}

.menu-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 40px 20px; /* เพิ่มความสูงของการ์ดให้ดูเต็มบรรทัด */
    text-align: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 2px;
}

.menu-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* ปรับแต่ง Responsive สำหรับมือถือ (ถ้าจอแคบให้เหลือแถวละ 1 หรือ 2) */
@media (max-width: 900px) {
    .member-menu-grid {
        grid-template-columns: repeat(2, 1fr); /* จอกลางๆ เหลือ 2 คอลัมน์ */
    }
}

@media (max-width: 600px) {
    .member-menu-grid {
        grid-template-columns: 1fr; /* จอมือถือเหลือ 1 คอลัมน์ */
    }
    .member-welcome-section {
        padding: 20px 0;
    }
}

.menu-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    filter: grayscale(1);
    transition: 0.4s;
}

.menu-card:hover .menu-icon {
    filter: grayscale(0);
    transform: scale(1.1);
}

.menu-card h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.menu-card p {
    color: #444;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* Logout Card Special Style */
.logout-card:hover {
    border-color: rgba(231, 76, 60, 0.3);
}
.logout-card:hover h4 { color: #e74c3c; }

/* Mobile Responsive */
@media (max-width: 600px) {
    .status-badge-container { flex-direction: column; gap: 20px; }
    .member-menu-grid { grid-template-columns: 1fr; }
}

/* --- แก้ไข Server Status ให้ตรงระนาบเดียวกัน --- */
.server-status-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* ระยะห่างระหว่างไอเทม */
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 25px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    backdrop-filter: blur(5px);
}

.server-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ccc;
    letter-spacing: 2px;
    text-transform: uppercase;
	line-height: 1; /* ล็อคความสูงบรรทัดป้องกันตัวหนังสือกระโดด */
}

#status-dot-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e74c3c; /* สีแดงตอน Offline */
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
    flex-shrink: 0; /* สำคัญ: ป้องกันจุดวงกลมโดนบีบ */
}

#live-server-status {
    font-size: 0.95rem;
    font-weight: 600;
    color: #00000;
    letter-spacing: 1px;
	line-height: 1; /* ล็อคความสูงบรรทัดป้องกันตัวหนังสือกระโดด */
}

/* เส้นคั่นแนวตั้ง */
.status-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.online-count {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ccc !important; /* สีทองสำหรับจำนวนคน */
    letter-spacing: 1px;
	line-height: 1; /* ล็อคความสูงบรรทัดป้องกันตัวหนังสือกระโดด */
}

#player-count {
    font-weight: 600;
	color: #f1c40f !important; /* สีทองสำหรับจำนวนคน */
}

/* --- ปรับแต่ง Status ให้เสถียรและอยู่กึ่งกลางพื้นที่ --- */
.header-left {
    display: flex;
    align-items: center;
    justify-content: center; /* ดันเข้ากึ่งกลางพื้นที่ฝั่งซ้าย */
    flex: 1; /* แบ่งสัดส่วนให้เท่ากับฝั่งขวา เพื่อให้ Logo อยู่กลางหน้าจริงๆ */
}

/* --- ปรับแต่ง Status Badge (4 items version) --- */
.status-badge-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* ลดระยะห่างลงเล็กน้อยเพื่อให้พอดี 4 ช่อง */
    background: rgba(255, 255, 255, 0.02);
    padding: 18px 35px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    min-width: 120px; /* ล็อคความกว้างขั้นต่ำเพื่อให้ดูเท่ากัน */
}

/* เส้นคั่นระหว่างไอเทม */
.status-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
}

.status-item label {
    font-size: 0.9rem;
    color: #555;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.status-item span {
    font-size: 1.2rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ปรับ Responsive สำหรับหน้าจอเล็ก */
@media (max-width: 1024px) {
    .status-badge-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* จอกลางๆ แบ่งเป็น 2x2 */
        gap: 20px;
        border-radius: 15px;
    }
    .status-item:not(:last-child)::after { display: none; }
}

@media (max-width: 600px) {
    .status-badge-container {
        grid-template-columns: 1fr; /* มือถือเรียงเป็นแถวเดียว */
    }
}


/* --- Fix Character Styles --- */
/* --- ปรับปรุงกรอบ Fix Character --- */
.char-grid {
    display: grid;
    /* ขยายความกว้างขั้นต่ำจาก 320px เป็น 380px */
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); 
    gap: 25px;
    margin-top: 30px;
}

.char-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 22px; /* เพิ่มพื้นที่ด้านใน */
    display: flex;
    gap: 20px;
    border-radius: 8px; /* มนขึ้นหน่อยดูพรีเมียม */
    transition: 0.3s;
    min-height: 180px; /* คุมความสูงขั้นต่ำ */
}

.char-header {
    display: flex;
    flex-direction: column; /* เปลี่ยนจากแนวนอนเป็นแนวตั้ง */
    align-items: flex-start; /* ชิดซ้าย */
    gap: 5px; /* ระยะห่างระหว่างชื่อกับอาชีพ */
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    width: 100%;
}

.char-header h4 {
    font-size: 1.1rem;
    margin: 0;
    white-space: nowrap; /* ชื่อตัวละครบรรทัดเดียว */
}

.job-tag {
    font-size: 0.75rem;
    color: #f1c40f; /* เปลี่ยนสีให้เด่นขึ้น */
    background: rgba(241, 196, 15, 0.1); /* พื้นหลังทองจางๆ */
    padding: 3px 12px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(241, 196, 15, 0.2);
    /* ยอมให้ขึ้นบรรทัดใหม่ได้ถ้าชื่อยาวมาก หรือจะใช้ nowrap ก็ได้ */
    white-space: normal; 
    line-height: 1.2;
}

/* ปรับรูปให้ใหญ่ขึ้นตามกรอบ */
.char-job-img {
    width: 120px;
    height: 120px;
}

.char-details { flex: 1; }

.char-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.char-header h4 { font-size: 1.1rem; color: #fff; }
.job-tag { font-size: 0.7rem; background: #333; padding: 2px 8px; border-radius: 10px; color: #aaa; }

.char-stats p { font-size: 0.8rem; color: #666; margin-bottom: 5px; }
.char-stats span { color: #999; font-weight: 300; }

.char-actions { margin-top: 15px; }

.btn-fix {
    width: 100%;
    background: #f1c40f;
    color: #000;
    border: none;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-fix:hover { background: #fff; }

.btn-disabled {
    width: 100%;
    background: #222;
    color: #444;
    border: 1px solid #333;
    padding: 10px;
    font-size: 0.8rem;
    cursor: not-allowed;
}

.btn-reset {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    transition: 0.3s;
}

.btn-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* ปรับหัวข้อตัวละครให้รองรับไอคอนเพศ */
.char-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    color: #fff;
}

/* --- Fix Character Page --- */
.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.char-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    display: flex;
    gap: 15px;
    border-radius: 4px;
    transition: 0.3s;
}

.char-job-img {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 80%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}

.char-job-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated; /* ทำให้ Pixel Art คมชัด */
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

.char-details { flex: 1; }
.char-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.char-header h4 { font-size: 1rem; color: #fff; display: flex; align-items: center; gap: 5px; }
.job-tag { font-size: 0.7rem; color: #666; background: #111; padding: 2px 8px; border-radius: 10px; }

.char-stats p { font-size: 0.8rem; color: #777; margin-bottom: 3px; }
.char-stats span { color: #444; }

.char-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 15px;
}

.btn-fix, .btn-reset {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: #ccc;
    padding: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: 0.2s;
}

.btn-fix:hover { background: #f1c40f; color: #000; border-color: #f1c40f; }
.btn-reset:hover { background: #fff; color: #000; border-color: #fff; }

.btn-disabled {
    background: #111;
    color: #444;
    border: 1px solid #222;
    font-size: 0.75rem;
    padding: 8px;
    cursor: not-allowed;
}

/* Alert Box */
.alert.success { background: rgba(46, 204, 113, 0.2); border: 1px solid #2ecc71; color: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px; }
.alert.error { background: rgba(231, 76, 60, 0.2); border: 1px solid #e74c3c; color: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px; }

/* ปรับแต่ง Header ให้รองรับแนวตั้ง */
.announce-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* ปุ่มย้อนกลับแบบอยู่กึ่งกลางใต้หัวข้อ */
.btn-back-member-center {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #888;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    margin-top: 5px;
}

.btn-back-member-center i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.btn-back-member-center:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(241, 196, 15, 0.5); /* เพิ่มขอบสีทองจางๆ */
}

.btn-back-member-center:hover i {
    transform: translateX(-3px); /* ลูกศรขยับถอยหลังตอนชี้ */
}

.job-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    transition: opacity 0.5s ease; /* เพิ่มเอฟเฟกต์จางเข้า */
}

/* เพิ่มสถานะตอนรูปกำลังโหลด (Optional) */
.job-main-img[src=""] {
    opacity: 0;
}

.char-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    /* บังคับให้เนื้อหาภายในไปกองทางขวา */
    align-items: flex-end; 
}

.char-stats p {
    margin: 0;
    display: flex;
    /* แยกหัวข้อไว้ซ้าย (เท่าที่พื้นที่เหลือ) และข้อมูลไปขวาสุด */
    justify-content: flex-end; 
    width: 100%;
    font-size: 0.95rem;
    text-align: right;
}

/* หัวข้อ (Label) */
.char-stats .label {
    color: #666;
    font-weight: 300;
    margin-right: auto; /* ดันหัวข้อไปทางซ้ายที่สุดเท่าที่จะทำได้ */
    padding-right: 15px; /* ระยะห่างก่อนถึงตัวข้อมูล */
}

/* ข้อมูล (Value) */
.char-stats .value {
    color: #eee;
    font-weight: 400;
    text-align: right; /* บังคับให้ตัวหนังสือชิดขวาทุกบรรทัด */
    display: inline-block;
}

.zeny-text {
    color: #f1c40f;
    font-weight: bold;
}

/* Luxury Form Styles */
.luxury-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 1px;
}

.form-group input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    color: #fff;
    border-radius: 4px;
    outline: none;
    transition: 0.3s;
}

.form-group input:focus {
    border-color: #f1c40f;
    background: rgba(255, 255, 255, 0.06);
}

.btn-submit-gold {
    margin-top: 10px;
    background: #f1c40f;
    color: #000;
    border: none;
    padding: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 4px;
}

.btn-submit-gold:hover {
    background: #fff;
    transform: translateY(-2px);
}

/* นำ Class จาก Fix Character มาใช้ร่วมกันได้เลย */
.btn-back-member-center {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #888;
    font-size: 0.9rem;
    margin-top: 5px;
}


/* บังคับฟอนต์ให้ทุกองค์ประกอบของฟอร์ม */
input, button, select, optgroup, textarea {
    font-family: 'Sarabun', 'Sarabun', sans-serif !important;
}

/* ปรับแต่งปุ่มอัปเดตให้ดูแพง (Luxury Gold) */
.btn-submit-gold {
    width: 100%;
    background: linear-gradient(135deg, #f1c40f 0%, #d4ac0d 100%);
    color: #000;
    border: none;
    padding: 14px;
    font-family: 'Sarabun', sans-serif !important; /* บังคับฟอนต์หัวข้อ */
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.2);
}

.btn-submit-gold:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

/* ปรับแต่งช่องกรอกรหัสผ่าน */
.luxury-form input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-family: 'Sarabun', sans-serif !important;
    padding: 12px 15px;
    border-radius: 4px;
}

/* จัดการตำแหน่งไอคอนดวงตาภายในช่อง Input */
.password-input-wrapper {
    position: relative; /* เพื่อให้ไอคอนเทียบตำแหน่งกับช่องนี้ */
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrapper .pass-input {
    width: 100%;
    padding-right: 45px !important; /* เว้นที่ด้านขวาไว้ให้ดวงตา */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: 4px;
    font-family: 'Sarabun', sans-serif !important;
}

.toggle-password {
    position: absolute;
    right: 15px; /* ห่างจากขอบขวา 15px */
    cursor: pointer;
    color: #666; /* สีเทาเริ่มต้น */
    font-size: 0.9rem;
    z-index: 10;
    transition: 0.3s;
}

.toggle-password:hover {
    color: #f1c40f; /* เปลี่ยนเป็นสีทองเวลาเอาเม้าส์ไปชี้ */
}

/* ปรับแต่ง Label ให้ฟอนต์ตรงกับหน้าอื่น */
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #888;
    font-family: 'Sarabun', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 1px;
}

/* ปรับปรุง Header ให้มีระยะห่างที่สวยงาม */
.announce-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่างหัวข้อก่อนเริ่มฟอร์ม */
    gap: 15px; /* เพิ่มระยะห่างระหว่างบรรทัดเส้นทองกับปุ่มย้อนกลับ */
}

/* ปรับปรุงปุ่มย้อนกลับหน้าสมาชิก (แบบอยู่กึ่งกลาง) */
.btn-back-member-center {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #666;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 8px 25px;
    border-radius: 20px; /* ทำมุมให้มนโค้งดูพรีเมียมขึ้น */
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    
    /* เพิ่มระยะห่างจากตัวหนังสือ "จัดการตัวละคร" หรือ "เปลี่ยนรหัสผ่าน" */
    margin-top: 10px; 
}

.btn-back-member-center:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(241, 196, 15, 0.5);
    transform: translateY(-2px); /* ให้ปุ่มลอยขึ้นนิดนึงตอนชี้ */
}

/* --- Server Info & Topup Page Refined --- */

/* ส่วนหัวข้อที่มีขีดข้าง */
.section-title {
    color: #888;
    margin-bottom: 20px;
    font-family: 'Sarabun', sans-serif;
    font-weight: 300;
    border-left: 3px solid #f1c40f;
    padding-left: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title.gold {
    color: #f1c40f;
}

/* คอนเทนเนอร์ Bullet List */
.info-bullet-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 50px;
}

/* การจัดวาง Grid 2 คอลัมน์ */
.info-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* สไตล์รายการ Bullet */
.bullet-list {
    list-style: none;
    padding: 0;
}

.bullet-item {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.bullet-item:last-child {
    margin-bottom: 0;
}

.bullet-icon {
    color: #f1c40f;
    margin-top: 4px;
    width: 20px;
    text-align: center;
}

.bullet-text strong {
    display: block;
    color: #fff;
    font-weight: 400;
}

.bullet-text span {
    font-size: 0.85rem;
    color: #666;
}

/* การจัดวางคำสั่ง @Commands */
.command-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

.command-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.command-card code {
    color: #f1c40f;
    font-family: 'Sarabun', sans-serif;
}

.command-card p {
    font-size: 0.7rem;
    color: #555;
    margin-top: 5px;
}

/* ส่วนของพอยท์และของแถมในหน้าเติมเงิน */
.bonus-badge {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 20px;
    color: #aaa;
}

/* Responsive สำหรับมือถือ */
@media (max-width: 768px) {
    .info-grid-2, .command-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Topup Shop System CSS --- */

/* ปรับภาพแพ็คเกจให้ดูเด่น */
.package-img img {
    max-height: 90px;
    margin-bottom: 15px;
    transition: 0.5s;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

.menu-card:hover .package-img img {
    transform: scale(1.15) rotate(5deg);
}

/* ราคาแพ็คเกจ */
.package-price {
    color: #f1c40f;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* ป้ายของแถม */
.bonus-badge {
    display: inline-block;
    font-size: 0.7rem;
    background: rgba(241, 196, 15, 0.05);
    color: #f1c40f;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(241, 196, 15, 0.2);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ปรับระยะห่าง Grid ของไอเทมขายตรงบนมือถือ */
@media (max-width: 768px) {
    .member-menu-grid[style*="repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- Topup Rewards System --- */
.topup-rewards-wrapper {
    max-width: 1100px; 
    margin: 0 auto;
}

.topup-package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.package-card {
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: 0.3s;
}

.package-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(241, 196, 15, 0.3);
    transform: translateY(-5px);
}

.package-price-link {
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    padding: 12px;
}

.package-points-display {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 400;
    margin-bottom: 20px;
}

.package-points-display span {
    font-size: 0.9rem;
    color: #f1c40f;
}

.bonus-rewards-container {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 15px;
    flex-grow: 1;
    border: 1px solid rgba(241, 196, 15, 0.1);
}

.bonus-rewards-header {
    font-size: 0.7rem;
    color: #f1c40f;
    margin-bottom: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(241, 196, 15, 0.1);
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bonus-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.bonus-item-row {
    font-size: 0.85rem;
    color: #ccc;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
    padding-bottom: 2px;
}

.bonus-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.bonus-item-qty {
    color: #f1c40f;
    font-weight: bold;
}

.no-bonus-text {
    font-size: 0.85rem;
    color: #444;
    text-align: center;
    padding: 10px 0;
}

.topup-footer-nav {
    text-align: center;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    padding-bottom: 50px;
}

/* ตัวคลุมชั้นนอกสุด ต้องสั่งให้ลูกอยู่กึ่งกลาง */
.main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* จัดลูกให้อยู่กึ่งกลางแนวนอน */
    width: 100%;
    min-height: 100vh;
}

/* ตัว Container ของหน้าเติมเงิน */
.topup-rewards-wrapper {
    width: 100%;
    min-width: 800px;
    max-width: 1200px;
    margin: 0 auto !important; /* บังคับกึ่งกลาง */
    float: none !important;    /* ป้องกัน float ทำเบี้ยว */
    display: block;
    position: relative;
}

/* ปรับ Grid ให้สมดุล */
.topup-package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    width: 100%; /* ให้ Grid ขยายเต็ม Wrapper */
}

/* คลาสที่คลุมเนื้อหาทั้งหมด */
.content {
    width: 100%;
    display: flex;
    justify-content: center;
    /* ห้ามใส่ height: 100vh; ตรงนี้เด็ดขาด */
    min-height: calc(100vh - 150px); /* ใช้ min-height แทน เพื่อให้สั้นที่สุดคือเต็มจอ แต่ยาวกว่านั้นได้ */
    padding-top: 20px;
    padding-bottom: 50px; /* เพิ่มพื้นที่ด้านล่างเวลาข้อความยาวๆ */
}

/* คลาสที่คลุมกรอบหน้าเติมเงิน */
.main-wrapper {
    width: 100%;
    max-width: 1200px; /* ขยายตามที่คุณต้องการ */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ห้ามใส่ height หรือ overflow: hidden */
    height: auto !important; 
}

/* ตัว Container หลัก */
.announce-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px;
    /* ห้ามใส่ height ล็อคไว้ */
    height: auto; 
    overflow: visible; /* มั่นใจว่าเนื้อหาที่ยาวออกมาจะถูกแสดง */
}