@font-face { font-family: BBOLD; src: url('./fonts/brandon-bold.otf') format('opentype'); font-weight: bold; font-style: normal; }
@font-face { font-family: BMEDI; src: url('./fonts/brandon-medium.otf') format('opentype'); font-weight: normal; font-style: normal; }

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

body, html, .all { margin: 0; padding: 0; min-width: 1200px;}
/* 1. บังคับให้โครงสร้างพื้นฐานสุดของเว็บเป็นสีน้ำเงินเข้มแทนสีขาว */
html {
    overflow-x: hidden;
    background-color: #1a3254 !important;
}

/* 1. ค่าเริ่มต้นสำหรับหน้าจอขนาดใหญ่ (เช่น 1920px ขึ้นไป) */
body {
    margin: 0;
    padding: 0;
    color: #fff;
    padding-top: 600px; 
    
    background: 
        url('../imgs/bg-top.png') no-repeat center top, 
        url('../imgs/section_start_bg.jpg') no-repeat center top #1a3254; 

    background-position: center top, center 100%; /* ระยะเดิมตอนจอเต็ม */
    background-size: 100% auto, 100% auto;
    background-attachment: scroll, scroll;
}
@media (max-width: 1920px) {
    body {
        background-position: center top, center 1070px;
    }
}
@media (max-width: 1680px) {
    body {
        background-position: center top, center 934px;
    }
}
/* 2. เมื่อหน้าจอหดลงมาเหลือความกว้างไม่เกิน 1600px (ความสูงภาพแรกจะลดลงเหลือประมาณ 900px) */
@media (max-width: 1600px) {
    body {
        background-position: center top, center 889px;
    }
}
@media (max-width: 1440px) {
    body {
        background-position: center top, center 779px;
    }
}
/* 3. เมื่อหน้าจอหดลงมาเหลือความกว้างไม่เกิน 1400px (ความสูงภาพแรกจะลดลงเหลือประมาณ 780px) */
@media (max-width: 1400px) {
    body {
        background-position: center top, center 776px;
    }
}
@media (max-width: 1280px) {
    body {
        background-position: center top, center 709px;
    }
}
/* 4. เมื่อหน้าจอหดลงมาเหลือความกว้างไม่เกิน 1200px (ความสูงภาพแรกจะลดลงเหลือประมาณ 670px) */
@media (max-width: 1200px) {
    body {
        background-position: center top, center 764px;
    }
}
/* 5. สำหรับหน้าจอแท็บเล็ต/มือถือ ความกว้างไม่เกิน 992px (ความสูงภาพแรกจะลดลงเหลือประมาณ 550px) */
@media (max-width: 1024px) {
    body {
        background-position: center top, center 565px;
    }
}
/* 5. สำหรับหน้าจอแท็บเล็ต/มือถือ ความกว้างไม่เกิน 992px (ความสูงภาพแรกจะลดลงเหลือประมาณ 550px) */
@media (max-width: 992px) {
    body {
        background-position: center top, center 550px;
    }
}


/* ส่วนของ Footer ของคุณคงเดิมไว้ได้เลยครับ */
.site-footer-bg {
    width: 100%;
    background: url('../imgs/bg-bottom-footer.jpg') no-repeat center top;
    background-size: 100% auto;
    /*padding-top: 400x; */
    padding-bottom: 50px;
}


/* กล่องเนื้อหาตรงกลาง */
.all {
     /*สีน้ำเงินหม่นอมเทาโปร่งแสง 75% ดึงจากโทนหมอกในภาพ */
    background: rgba(22, 32, 47, 0.75); 
    
    /* ใส่เส้นขอบบางๆ สีทองเหลืองหม่นเพื่อให้เข้ากับชุดของตัวละครและกรอบรูป */
    border: 1px solid rgba(250, 219, 147, 0.15); 
    
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	
	
}
body, a, a:active, a:visited, a:link { font-family:"IBM Plex Sans Thai", Arial; font-size: 14px; text-decoration: none; }
a, a:active, a:visited, a:link { color: #fffca1; cursor: pointer; font-weight: bold; }
a:hover { color: #fadb93; }
a:active { color: #fff; }
p { margin: 0; padding: 0; }
.pddInner { padding: 0 20px; }
hr { width: 100%; height: 2px; padding: 0; margin: 20px auto; border: 0; background: transparent url('../imgs/separator.png') no-repeat center top; }
.faceIndex { overflow: hidden; min-height: 200px; background: transparent; margin: 15px auto; }
p.cbold { font-weight: bold; text-align: center; width: 100%; padding: 10px 0; text-transform: uppercase; }
.rmsg { display: table; width: 464px; margin: 0 auto 20px auto; padding: 20px; box-sizing: border-box; background: #108c00; text-align: center; color: #fff; font-size: 14px; }
.rmsg.error { background-color: #b30000 !important; }
.rmsg.warn { background-color: #fffca1 !important; color: #000 !important; }
.rmsg a { color: #25a3a7; }
#alerta { visibility: hidden; position: fixed; display: table; z-index: 1001; margin: 0 auto; padding: 25px 30px; color: #5a5a5a; font-size: 15px; background: #f7f7f7; border-radius: 6px; }
#alerta .ok { display: table; width: 100%; }
#alerta .ok > div { font-size: 12px; font-weight: bold; cursor: pointer; display: table; float: right; margin: 15px 0 0 0; padding: 5px 0; text-align: center; width: 60px; text-transform: uppercase; color: #fff; background: #ac0f0f; border: 1px solid #ac0f0f; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset; border-radius: 4px; }
#alerta .ok > div:hover { background: #d21818; border-color: #d21818; }
#alerta .ok.sucesso > div { background: #0dbb00; border: 1px solid #0dbb00; }
#alerta .ok.sucesso > div:hover { background: #0a8c00; border: 1px solid #0a8c00; }
#backblack { height: 100%; width: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.8; z-index: 1000; }
input.default.sucesso { align-items: center;
    gap: 10px;                  /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
    padding: 10px 24px;         /* ขนาดความกว้าง-สูงของปุ่ม */
    
    /* 🔮 ปรับให้พื้นหลังโปร่งแสงขึ้น ดึงสีน้ำเงินมืดจางๆ ให้เข้ากับกรอบ Status */
    background: linear-gradient(135deg, rgba(0, 167, 245, 0.4) 0%, rgba(11, 18, 30, 0.5) 100%); 
    
    /* 🌐 ใส่เอฟเฟคกระจกเบลอ ให้มองเห็นวิดีโอด้านหลังลอยละมุนอยู่ใต้ปุ่ม */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* ⚡ เปลี่ยนเส้นขอบเป็นสีฟ้าไอซ์ซีดๆ จางๆ เข้าชุดกัน */
    border: 1px solid rgba(0, 204, 255, 0.25); 
    border-radius: 4px;         /* มุมเหลี่ยมตัดเล็กน้อยตามสไตล์เกมคอนโซล */
    color: #a3c3d9;             /* เปลี่ยนสีตัวอักษรเป็นขาวอมน้ำเงินอ่อน */
    font-family: "IBM Plex Sans Thai", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;  /* บังคับตัวพิมพ์ใหญ่ทั้งหมด */
    letter-spacing: 1px;        /* เว้นระยะตัวอักษรให้ดูหรูหรา */
    cursor: pointer;
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05); /* มิติแสงด้านบนในปุ่ม */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden; }

article a.default, a.default, span.default, input.default { transition: background-color 0.4s, border-color 0.4s; cursor: pointer; display: block; text-align: center; font-weight: bold; font-size: 12px; text-transform: uppercase; padding: 6px 0 5px 0; width: 178px; margin: 0 0 1px; border-radius: 1px; box-shadow: 0px 1px 0px rgba(255,255,255,0.2) inset; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; }
article .ucp a.default, .ucp a.default, .ucp span.default, .ucp input.default { padding: 9px 0 10px 0; }
article a.default:active, a.default:active, input.default:active, span.default:active { opacity: 0.7; }
a.default.dbig, input.default.dbig { font-size: 16px; padding: 12px 35px 13px 35px; display: table; width: auto !important; }
article a.default, a.default, span.default, input.default { align-items: center;
    gap: 10px;                  /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
    padding: 10px 24px;         /* ขนาดความกว้าง-สูงของปุ่ม */
    
    /* 🔮 ปรับให้พื้นหลังโปร่งแสงขึ้น ดึงสีน้ำเงินมืดจางๆ ให้เข้ากับกรอบ Status */
    background: linear-gradient(135deg, rgba(0, 167, 245, 0.4) 0%, rgba(11, 18, 30, 0.5) 100%); 
    
    /* 🌐 ใส่เอฟเฟคกระจกเบลอ ให้มองเห็นวิดีโอด้านหลังลอยละมุนอยู่ใต้ปุ่ม */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* ⚡ เปลี่ยนเส้นขอบเป็นสีฟ้าไอซ์ซีดๆ จางๆ เข้าชุดกัน */
    border: 1px solid rgba(0, 204, 255, 0.25); 
    border-radius: 4px;         /* มุมเหลี่ยมตัดเล็กน้อยตามสไตล์เกมคอนโซล */
    color: #a3c3d9;             /* เปลี่ยนสีตัวอักษรเป็นขาวอมน้ำเงินอ่อน */
    font-family: "IBM Plex Sans Thai", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;  /* บังคับตัวพิมพ์ใหญ่ทั้งหมด */
    letter-spacing: 1px;        /* เว้นระยะตัวอักษรให้ดูหรูหรา */
    cursor: pointer;
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05); /* มิติแสงด้านบนในปุ่ม */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden; }
article a.default:hover, a.default:hover, input.default:hover, span.default:hover {  color: #ffffff;             /* ตัวหนังสือเปลี่ยนเป็นสีขาวสว่างชัดเจน */
    
    /* ⚡ เส้นขอบสว่างวาบเป็นสีฟ้าไฟนีออน */
    border-color: rgba(0, 204, 255, 0.8);      
    transform: translateY(-2px); /* ปุ่มลอยขึ้นเล็กน้อยดูมีมิติ */
    
    /* 🌟 ปรับแสงฟุ้ง (Glow) ให้แมตช์กัน โดยผสมพลังออร่าสีฟ้าสว่างและเงาดำ */
    box-shadow: 0 0 18px rgba(0, 204, 255, 0.6), 
                0 6px 20px rgba(0, 0, 0, 0.7),
                inset 0 0 8px rgba(0, 204, 255, 0.3); /* เพิ่มแสงเรืองข้างในปุ่ม */
    
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.2) 0%, rgba(11, 18, 30, 0.6) 100%);
    filter: brightness(115%);
}

.all { width: 1100px; position: relative; display: table; margin: 0 auto; padding-top: 14px; }


.loginarea .avatar span,
.loginarea .fields,
.loginarea label > span,
.loginarea .gologin,
.loginarea .user .opts > a,
.download-buttons a,
.banners > div > a,

aside .box .title,
h1,
.news > div .finalinfo a.lermaisn,
.news a.morenews,
.loginarea .user .opts > span > i
{ background: transparent url('../imgs/css-sprites.png') no-repeat; }

h1, h1 { display: block; color: #fff; font-family: "IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; width: 100%; box-sizing: border-box; padding: 0; }
h1 { font-size: 20px; height: 32px; margin: 25px auto 20px; padding: 0 0 0 30px; background-position: -340px bottom; }
h1 { font-size: 15px; margin: 20px 0 20px 0; }

#fanback { background: transparent url("../imgs/nm/fanbg.png") repeat; display: none; height: 50%; top: 0; left: 0; position: fixed; width: 100%; z-index: 99999; } #fan-exit { height: 100%; width: 100%; } #fanbox { background: #fff; border-radius: 5px; left: 50%; margin: -123px 0 0 -210px; position: absolute; top: 50%; width: 420px; } #fanbox > iframe { border: none; overflow: hidden; margin: 8px 0 0 8px; width: 402px; height: 230px; } #fanclose { background: transparent url("../imgs/nm/fanclose.png") repeat scroll 0 0; cursor: pointer; float: right; height: 15px; right: -22px; top: -20px; padding: 20px 40px 20px 20px; position: absolute; } #fanclose:hover { background-position: 0 -56px; } 




.langs a { float: left; display: block; width: 42px; height: 26px; margin: 0 2px 0 0; background: transparent url('../imgs/nm/langs.png') no-repeat; }
.langs a.en { background-position: 0 0; border-radius: 3px 0 0 3px; }
.langs a.pt { background-position: -44px 0; }
.langs a.es { background-position: -88px 0; border-radius: 0 3px 3px 0; }
.langs a.en:hover, .en .langs a.en { background-position: 0 -28px; }
.langs a.pt:hover, .pt .langs a.pt { background-position: -44px -28px; }
.langs a.es:hover, .es .langs a.es { background-position: -88px -28px; }
.langs a:active { opacity: 0.6; }
.en .langs a.en, .pt .langs a.pt, .es .langs a.es { cursor: default; }

.loginarea { width: 315px; height: 83px; position: absolute; top:-100px; right: 10px; }
.loginarea .avatar { float: left; }
.loginarea .avatar, .loginarea .avatar span { width: 97px; height: 88px; box-sizing: border-box; padding: 1px 0 0 8px; }
.loginarea .avatar span { position: absolute; top: 0; left: 0; background-position: 0 -58px; }
.loginarea .avatar img { width: 80px; height: 80px; }
.loginarea .fields { float: left; width: 218px; height: 65px; background-position: -738px -154px; margin: 9px 0 0 0; position: relative; }
.loginarea input[type="text"], .loginarea input[type="password"], .loginarea .user .info { outline: none; box-sizing: border-box; background: transparent; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); font-size: 12px; font-family:"IBM Plex Sans Thai", Arial; border: 0; margin: 0; height: 30px; line-height: 30px; padding: 0 32px 0 24px; }
.loginarea input[type="text"] { width: 218px; margin: 0 0 5px;  }
.loginarea input[type="password"] { width: 127px; }
.loginarea input::-webkit-input-placeholder { color: rgba(255,255,255,0.8); }
.loginarea input:-moz-placeholder { color: rgba(255,255,255,0.8); }
.loginarea label > span { height: 14px; position: absolute; left: 1px; }
.loginarea label > span.icon-user { width: 13px; background-position: -99px -62px; top: 8px; }
.loginarea label > span.icon-pass { width: 15px; background-position: -114px -62px; top: 43px; }
.loginarea .gologin, .loginarea .user .opts > a {
    text-align: center;
    cursor: pointer;
    outline: none;
    position: absolute;
    right: 0;
    top: 35px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 0;
    border: 0;
    
    /* สไตล์ใหม่ที่เพิ่มความเท่และมิติ */
    background: linear-gradient(135deg, #007f87 0%, #004d52 100%); /* ไล่เฉดสีฟ้าอมเขียว (Teal) ตามภาพ */
    transform: skewX(-15deg); /* ตัดขอบปุ่มให้เอียงเท่ๆ สไตล์อินเตอร์เฟสเกม */
    border: 1px solid #00f3ff; /* เพิ่มเส้นขอบเรืองแสงสีฟ้า */
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.2); /* เอฟเฟกต์เรืองแสงทั้งนอกและใน */
    border-radius: 2px;
    
    /* สไตล์ตัวอักษร */
    font-family: "IBM Plex Sans Thai", BBOLD, Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.8); /* ตัวอักษรเรืองแสง */
    letter-spacing: 1px; /* ขยับตัวอักษรให้ห่างกันเล็กน้อย ดูพรีเมียมขึ้น */
    
    /* ปรับให้การเปลี่ยนเอฟเฟกต์นุ่มนวลขึ้น */
    transition: all 0.3s ease;
}

/* เอฟเฟกต์ตอนเมาส์ชี้ (Hover) - ปุ่มจะสว่างและเรืองแสงเข้มขึ้น */
.loginarea .gologin:hover, .loginarea .user .opts > a:hover {
    background: linear-gradient(135deg, #00b4bf 0%, #006b72 100%); /* สว่างขึ้น */
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.7), inset 0 0 8px rgba(255, 255, 255, 0.4); /* เรืองแสงวาบขึ้น */
    color: #fff;
    text-shadow: 0 0 8px #ffffff;
}

/* เอฟเฟกต์ตอนกด (Active) - ปุ่มจะยุบลงและมืดลงเล็กน้อยเหมือนโดนกดจริง */
.loginarea .gologin:active, .loginarea .user .opts > a:active {
    transform: skewX(-15deg) scale(0.95); /* ปุ่มยุบลงเล็กน้อย */
    opacity: 0.9;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.4);
}

.loginarea .ess { width: 120px; position: absolute; top: 69px; left: -13px; text-align: left; }
.loginarea .ess a { font-size: 10px !important; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);color: #fff; }
.loginarea .error { position: absolute; left: 15px; top: 100px; width: 280px; padding: 5px; background: red; border-radius: 4px; text-align: center; color: #fff; font-size: 12px; }
.loginarea .loader { opacity: 0.8; width: 120px; height: 80px; background: #000 url('../imgs/nm/loader.gif') no-repeat center center; position: absolute; left: 80px; top: 3px; border-radius: 50%; }

.loginarea .user .info, .loginarea .user .opts > span { font-family: "IBM Plex Sans Thai",BBOLD, Arial; font-weight: bold; text-transform: uppercase; }
.loginarea .user .info { padding-left: 4px; }
.loginarea .user .opts { width: 100%; height: 30px; display: table; margin: 5px; }
.loginarea .user .opts > span, .loginarea .user .opts > a { display: block; height: 30px; line-height: 30px; float: left; margin: 0; box-sizing: border-box; }
.loginarea .user .opts > span { position: relative; cursor: default; width: 127px; font-size: 11px; }
.loginarea .user .opts > span > i { display: block; width: 8px; height: 8px; float: left; background-position: -130px -62px; margin: 11px 4px 0 0; }
.loginarea .user .opts > span:hover { color: #fadb93; }
.loginarea .user .opts > span:hover > i { background-position: -140px -62px; }
.loginarea .user .opts > span > div { display: none; position: absolute; left: -10px; top: 30px; background: #fff; width: 180px; box-sizing: border-box; padding: 4px; }
.loginarea .user .opts > span > div > a { width: 100%; box-sizing: border-box; border-radius: 0 !important; height: 24px; line-height: 24px; padding: 0 !important; font-size: 10px; }
.loginarea .user .opts > span:hover > div { display: block; }

.download-buttons { width: 534px; height: 50px; position: absolute; left: 0px; top: -100px; display: table; }
.download-buttons a {  display: block; height: 50px; width: 265px; float: left; margin: 0; transition: opacity 0.4s; }
.download-buttons a.server { background-position: -313px 0; margin-right: 4px; }
.download-buttons a.client { background-position: -580px 0; }
.download-buttons a:hover { opacity: 0.7; }

section { width: 1200px; display: table; margin-left: 60px; padding: 20px 0 0 0; }

aside { width: 540px; float: left; margin: 0 20px 0 0; }

article { width: 565px; float: left; }
article > h1:first-child { margin-top: 0; }

aside .box { width: 100%; display: table; margin: 0 0 30px 0; }
aside .box .title { width: 540px; height: 46px; line-height: 46px; text-align: center; color: #000; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; font-size: 18px; background-position: 0 -154px; }
aside .box .ct { display: table; width: 500px; padding: 20px 0 0 20px; }
aside .box .ct.vote { width: auto !important; margin: 0 auto; text-align: center; }
aside .box .ct.vote > a { margin: 0 0 5px 5px; opacity: 0.8; float: left; }
aside .box .ct.vote > a:first-child { margin: 0 0 5px 0; }
aside .box .ct.vote > a:hover { opacity: 1; }

aside .box .multitables { display: table; margin: 0 auto; }
aside .box .multitables table { width: 164px; float: left; margin: 0 0 0 4px; }
aside .box .multitables table:first-child { margin: 0; }
aside .box .multitables table tr > * { border: 0; }
aside .box .multitables table tr th { background: #011d1e; color: #fff; font-family:"IBM Plex Sans Thai", Arial; font-weight: bold; font-size: 10px; text-transform: uppercase; height: 29px; line-height: 29px; text-align: center; padding: 0 5px; border-bottom: 2px solid #fff; }
aside .box .multitables table.pvp tr th { border-color: #126fcc; }
aside .box .multitables table.pk tr th { border-color: #cc1212; }
aside .box .multitables table.clan tr th { border-color: #33cc1e; }
aside .box .multitables table tr th:first-child { text-align: left; padding: 0 0 0 14px; }
aside .box .multitables table tr td { background: #1a2b29; color: rgba(255,255,255,0.8); font-family:"IBM Plex Sans Thai", Arial; font-weight: bold; font-size: 11px; text-transform: none !important; height: 26px; line-height: 26px; text-align: center; padding: 0; }
aside .box .multitables table tr.two td { background: #13201f; }
aside .box .multitables table tr td:first-child { text-align: left; padding: 0 10px; }

aside .box a.moreranks { margin: 5px 0 0 0; display: table; width: 100%; background: #066b6f; height: 28px; line-height: 28px; text-align: center; font-family:"IBM Plex Sans Thai", BBOLD, Arial; text-transform: uppercase; font-size: 12px; color: #fff; font-weight: bold; transition: background 0.4s, color 0.4s; }
aside .box a.moreranks:hover { background: #f8bb00; color: #fff; }
aside .box a.moreranks:active { opacity: 0.7; }

.banners { width: 1060px; margin-left: 70px; display: table; }
.banners > div { width: 529px; height: 200px; float: left; position: relative; }
.banners > div > a { z-index: 2; position: absolute; left: 8px; top: 112px; display: block; width: 338px; height: 66px; background-position: 0 -244px; text-align: center; color: #000; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; font-size: 20px; text-transform: uppercase; box-sizing: border-box; padding: 12px 0 0; }
.banners > div > a:hover { color: #066b6f; }
.banners > div > a > span { display: block; font-family:"IBM Plex Sans Thai", BMEDI, Arial; font-weight: normal; font-size: 13px; margin: -4px 0 0 0; }
.banners > div.b2 { float: right; }
.banners > div.b2 > a { left: auto; right: 8px; }
@keyframes banner1_move { 0% {left: 8px;} 33% {left: -28px;} 66% {left: 38px;} 100% {left: 8px;} }
.banners > .b1 > a:hover { animation-name: banner1_move; animation-duration: 0.4s; }
@keyframes banner2_move { 0% {right: 8px;} 33% {right: -28px;} 66% {right: 38px;} 100% {right: 8px;} }
.banners > .b2 > a:hover { animation-name: banner2_move; animation-duration: 0.4s; }

.bannersnews { width: 529px; margin-left: 50px; display: table; top: -55px; position: relative; }
.bannersnews > div { width: 529px; height: 200px; float: left; position: relative; }
.bannersnews > div > a { z-index: 2; position: absolute; left: 8px; top: 20px; display: block; width: 338px; height: 66px; background-position: 0 -244px; text-align: center; color: #fff; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; font-size: 20px; text-transform: uppercase; box-sizing: border-box; padding: 12px 0 0; }
.bannersnews > div > a:hover { color: #f8bb00; }
.bannersnews > div > a > span { display: block; font-family:"IBM Plex Sans Thai", BMEDI, Arial; font-weight: normal; font-size: 10px; margin: -4px 0 0 0; }
.bannersnews > div.b2 { float: right; }
.bannersnews > div.b2 > a { left: auto; right: 8px; }
@keyframes banner1_move { 0% {left: 8px;} 33% {left: -28px;} 66% {left: 38px;} 100% {left: 8px;} }
.bannersnews > .b1 > a:hover { animation-name: banner1_move; animation-duration: 0.4s; }
@keyframes banner2_move { 0% {right: 8px;} 33% {right: -28px;} 66% {right: 38px;} 100% {right: 8px;} }
.bannersnews > .b2 > a:hover { animation-name: banner2_move; animation-duration: 0.4s; }

footer { width: 100%; height: 420px; }
footer > div { width: 1140px; display: table; margin: 0 auto; }
footer .linksPanel { padding: 190px 0 0; display: table; float:left; margin: 0; box-sizing: border-box; text-align: center; }
footer .linksPanel > div { box-sizing: border-box; float: left; border: 0; border-right: 1px solid rgba(0,0,0,0.8); border-left: 1px solid rgba(255,255,255,0.1); padding: 0 20px; }
footer .linksPanel > div > div { color: #fff; font-size: 16px; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; margin: 0 0 10px; }
footer .linksPanel > div > a { display: table; box-sizing: border-box; font-weight: normal; font-size: 14px; margin: 0 0 4px 0; color: #fff495; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
footer .linksPanel > div > a:hover { color: #ffe403; }
footer .linksPanel > div > a:active { color: #fff; }
footer .r { width: 600px; float: right; }
footer .copyright { color: rgba(255,255,255,0.5); width: 550px; padding: 220px 0 0; display: table; float: right; text-align: right; font-size: Arial; font-size: 10px; text-transform: uppercase; }
footer .copyright span { display: block; color: #fff; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; font-size: 13px; margin: 0 0 4px 0; }
footer .copyright a.atualstudio { transition: opacity 0.4s; opacity: 0.5; display: inline-block; margin: 17px 0 0 0; width: 120px; height: 18px; background: transparent url('../imgs/nm/atualstudio.png'); }
footer .copyright a.atualstudio:hover { opacity: 1; }

.galleryBox { width: 500px; overflow: hidden; margin: 0 auto; }
.galleryBox > div { width: 505px; display: table; margin: 0 auto; }
.galleryBox a, .galleryBox a div, .galleryBox a img { width: 98px; height: 98px; }
.galleryBox a { background: rgba(0,0,0,0.7); display: block; position: relative; float: left; margin: 0 3px 3px 0; overflow: hidden; }
.galleryBox a span { display: block; width: 42px; height: 42px; position: absolute; left: 28px; top: 28px; background: transparent url('../imgs/nm/play.png') no-repeat; opacity: 0.7; }
.galleryBox a div { position: absolute; left: 0; top: 0; opacity: 0; box-shadow: inset 0 0 30px #f8bb00; }
.galleryBox a:hover { border-color: #000; transition: border-color 0.4s; }
.galleryBox a:hover span { opacity: 1; transition: opacity 0.4s; }
.galleryBox a:hover div { opacity: 1; transition: opacity 0.4s; }

.fullGallery { width: 1000px; }
.fullGallery > div { width: 1010px; }

.news { display: table; width: 100%; padding: 0 0 10px 0; }
.news > div { background: #fff; cursor: default; box-sizing: border-box; width: 100%; padding: 20px; display: table; margin: 0 0 10px; position: relative; }
.news > div a.imgn { width: 104px; height: 104px; background: #011d1e; box-sizing: border-box; padding: 2px; display: block; float: left; position: relative; }
.news > div a.imgn img { width: 100px; height: 100px; }
.news > div .contentn { width: calc(100% - 104px); box-sizing: border-box; padding: 0 0 0 20px; float: left; }
.news > div a.titlen { transition: color 0.4s; display: table; color: #000 !important; font-family:"IBM Plex Sans Thai", BBOLD, Arial !important; font-weight: bold; text-transform: uppercase; font-size: 17px; margin: 0 0 5px; }
.news > div a.titlen:hover { color: #066b6f !important; }
.news > div a.titlen:active { color: #f8bb00 !important; }
.news > div .textn { width: 100%; min-height: 45px; box-sizing: border-box; color: rgba(0,0,0,0.5); }
.news > div .finalinfo { width: 100%; }
.news > div .finalinfo .datan { color: rgba(0,0,0,0.5); font-family: "IBM Plex Sans Thai",BMEDI, Arial !important; font-weight: bold; text-transform: uppercase; font-size: 11px; margin: 7px 0 0 0; }
.news > div .finalinfo a.lermaisn {
    position: absolute;
    bottom: 24px;
    right: -21px;
    display: block;
    width: 162px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    
    /* สไตล์ใหม่: ไล่เฉดสีส้ม-แดงเพลิง ให้เข้ากับแสงสีส้มของเกราะในภาพ */
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%); 
    transform: skewX(-15deg); /* ตัดขอบปุ่มเอียงเท่ๆ สไตล์เกมมิ่ง เข้าชุดกับปุ่ม LOGIN */
    border: 1px solid #ff9d00; /* เส้นขอบสีส้มทองเพิ่มความคมชัด */
    box-shadow: 0 0 12px rgba(255, 106, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.2); /* เอฟเฟกต์เรืองแสงสีส้ม */
    border-radius: 2px;

    /* สไตล์ตัวอักษร */
    color: #fff !important;
    font-family: "IBM Plex Sans Thai", BBOLD, Arial !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    text-shadow: 0 0 5px rgba(255, 106, 0, 0.8); /* ตัวอักษรเรืองแสงสีไฟ */
    letter-spacing: 1px;
    
    /* ปรับให้การเปลี่ยนเอฟเฟกต์นุ่มนวล */
    transition: all 0.3s ease;
}

/* เอฟเฟกต์ตอนเมาส์ชี้ (Hover) - ปุ่มจะระเบิดแสงสว่างวาบขึ้นดูมีพลัง */
.news > div .finalinfo a.lermaisn:hover {
    background: linear-gradient(135deg, #ff8c00 0%, #ff1e56 100%); /* ปรับเฉดให้สว่างขึ้น */
    box-shadow: 0 0 22px rgba(255, 140, 0, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.4); /* เรืองแสงเข้มขึ้น */
    text-shadow: 0 0 8px #ffffff; /* ตัวอักษรเปล่งแสงสีขาว */
}

/* เอฟเฟกต์ตอนกด (Active) - ปุ่มยุบตัวลงเหมือนมีการตอบสนอง */
.news > div .finalinfo a.lermaisn:active {
    transform: skewX(-15deg) scale(0.95); /* ปุ่มยุบลงเล็กน้อย */
    opacity: 0.9;
    box-shadow: 0 0 6px rgba(255, 106, 0, 0.5);
}

.news a.morenews { display: block; margin: 20px auto 0; width: 367px; height: 40px; line-height: 40px; text-align: center; background-position: 0 -202px; color: #fff !important; font-family:"IBM Plex Sans Thai", BBOLD, Arial !important; font-weight: bold; text-transform: uppercase; font-size: 16px; }
.news a.morenews:hover { background-position: -369px -202px; }
.news a.morenews:active { opacity: 0.8; }

.news.inner > div { width: calc(50% - 30px); float: left; margin-right: 30px; }

#modal { position: fixed; z-index: 1000; top:0; left: 0; padding: 20px 0 0 0; width: 560px; height: 250px; left:calc(50% - 283px);top:calc(50% - 128px); text-align: center; border: 3px solid #6c6c6e; border-radius: 10px; box-shadow: 0 0 25px rgba(0,0,0,0.5); color: #fff !important; background: #011d1e; }
#modal h1 { text-align:center; width: 100%; padding:0; margin:16px 0 20px 0; font-size: 20px !important; background: transparent; }

.faceIndex { border: 5px solid #fff; }
.paginate { display: table; margin: 30px auto; }
.paginate a { display: block; padding: 8px 10px; font-weight: bold; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset; float: left; margin: 0 1px 0 0; }
.paginate a.atual, .paginate a.desatived { cursor: default; box-shadow: none; }
.paginate a { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.7); color: rgba(0,0,0,0.7) !important; }
.paginate a:hover { background: rgba(255,255,255,0.9) !important; border-color: rgba(255,255,255,0.9) !important; color: #000 !important; }
.paginate a:active, .paginate a.atual { background: #fff !important; border-color: #fff !important; color: #000 !important; }
.paginate a:active { opacity: 0.5; }
.paginate a.desatived { background: rgba(0,0,0,0.1) !important; border-color: rgba(0,0,0,0.1) !important; color: rgba(255,255,255,0.2) !important; }

table.default { border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.3); width: 100%; background: 0; overflow: hidden; }
table.default tr td:first-child { border: 0; }
table.default tr td { font-size: 12px; padding: 6px 8px; border-left: 1px solid rgba(0,0,0,0.4); background: rgba(0,0,0,0.1); }
table.default tr.two td { background: rgba(255,255,255,0.1); }
table.default tr td.foco { font-weight: bold; color: #fff; background: rgba(0,0,0,0.2); }
table.default tr.two td.foco { background: rgba(255,255,255,0.2); }
table.default tr th { font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; font-size: 12px; background: #fff; color: #000; padding: 10px 0; border-left: 1px solid #12001d; }
table.default tr.ctype2, table.default tr.ctype2 td { padding: 0; margin: 0; height: 2px; background: rgba(0,0,0,0.1); }
table.default .pos { width: 25px; text-align: center; }

.horMenu { display: table; margin: 20px auto; }
.horMenu a { float: left; padding: 10px 15px; border-bottom: 2px solid rgba(255,255,255,0.5); margin: 0 0 0 10px; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,0.6) !important; }
.horMenu a:first-child { margin: 0; }
.horMenu a:hover { border-color: #fff !important; color: #fff !important; }
.horMenu a.act { cursor: default; border-color: #fff !important; color: #fff !important; text-shadow: 0 0 5px rgba(255,255,255,0.6); }
.horMenu a:active { opacity: 0.6; }
.horMenu.ranks a { padding: 10px 10px; }

.rulesbox, .rulesbox .pddInner { text-align: left !important; }
.rulesbox { height: 260px; box-sizing: border-box; overflow: auto; margin: 0 auto 20px; padding: 20px; width: calc(100% - 20px); border: 2px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); }
.rulesbox h1 { padding-top: 0; background: transparent !important; width: auto; height: auto; margin: 0; padding: 0 0 20px 20px; font-size: 20px; }

.formpadrao, .formpadrao > div, .formpadrao .camp input, .formpadrao .camp select { border-radius: 2px; }
.formpadrao { display: table; margin: 0 auto 2px auto; padding: 2px; }
.formpadrao > div { display: table; }
.formpadrao .desc { width: 200px; padding: 0 10px; color: #fff; font-family:"IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; font-size: 12px; text-align: right; }
.formpadrao .desc, .formpadrao .camp, .formpadrao .camp2 { float: left; height: 46px; line-height: 46px; }
.formpadrao .camp input[type="text"], .formpadrao .camp input[type="password"], .formpadrao .camp input[type="file"] { border: 0; width: 230px; margin: 5px 5px 0 0; height: 36px; line-height: 36px; padding: 0 5px; box-shadow: 1px 1px 1px rgba(0,0,0,0.4) inset; }
.formpadrao .camp select { border: 0; width: 240px; margin: 5px 5px 0 0; padding: 9px 7px 8px; box-shadow: 1px 1px 1px rgba(0,0,0,0.4) inset; }
.formpadrao textarea { border: 0; resize: vertical; height: 300px; width: 200px; margin: 0 4px 10px 0; padding: 5px; }
.formpadrao.tdate .camp input { text-align: center; padding: 0 9px; }
.formpadrao.errorc, .formpadrao.errorc .desc, .formpadrao.errorc .camp { border-color: #c70000; }
.formpadrao.errorc > div { background: #c70000; }
.formpadrao.errorc .desc { color: #fff; }
.formpadrao { border: 1px solid rgba(0,0,0,0.5); }
.formpadrao > div { background: rgba(255,255,255,0.1); }
.formpadrao .desc { color: #fff; }
.formpadrao .camp input[type="text"], .formpadrao .camp input[type="password"], .formpadrao .camp input[type="file"], .formpadrao .camp select, .formpadrao textarea { background: #fff; }
.formpadrao .camp input[type="text"]:focus, .formpadrao .camp input[type="password"]:focus, .formpadrao .camp select:hover, .formpadrao textarea:focus { background: #fffbd5; }

label.captcha { position: relative; }
label.captcha img.captchaImage { position: absolute; left: 8px; top: 3px; opacity: 0.8; border-radius: 3px; }
label.captcha a { position: absolute; right: 13px; top: 13px; }
label.captcha a, label.captcha a img { width: 23px; height: 23px; }
label.captcha a:hover { opacity: 0.7; }
label.captcha a:active { opacity: 1; }

.castled { width: 380px; height: 260px; margin: 0; float: left; }
.castled b, .castled .ci .co { color: #fff; }
.castled, .castled > div { display: table; }
.castled .ct { color: #fff; font-size: 16px; font-weight: bold; padding: 10px 0 10px 30px; }
.castled .imgc { width: 200px; height: 113px; border: 2px solid #fff; float: left; }
.castled .imgc span { display: block; width: 200px; height: 113px; background: rgba(0,0,0,0.6) url('../imgs/nm/castles.jpg') no-repeat; }
.castled .ci { float: left; width: 160px; padding: 2px 0 0 10px; }
.castled .ci .co { font-weight: bold; }
.castled .ci .cc { margin-bottom: 8px; }
.castled .nwar { padding: 5px 0 10px 0; }
.castled .imgc.aden span { background-position: left top; }
.castled .imgc.goddard span { background-position: -200px top; }
.castled .imgc.giran span { background-position: -400px top; }
.castled .imgc.oren span { background-position: -600px top; }
.castled .imgc.dion span { background-position: -800px top; }
.castled .imgc.gludio span { background-position: -1000px top; }
.castled .imgc.innadril span { background-position: -1200px top; }
.castled .imgc.rune span { background-position: -1400px top; }
.castled .imgc.schuttgart span { background-position: -1600px top; }

.rankings_options { display: table; margin: 0 auto 20px; }
.rankings_options a { float: left; padding: 0 14px; margin: 0 0 0 3px; height: 40px; line-height: 40px; color: #fff; font-family: "IBM Plex Sans Thai", BBOLD, Arial; font-weight: bold; text-transform: uppercase; font-size: 12px; border: 0; border-bottom: 2px solid rgba(255,255,255,0.8); }
.rankings_options a:first-child { margin: 0; }
.rankings_options a:hover { border-color: #42cbd0; color: #42cbd0; }
.rankings_options a.ativa { border-color: #ffec50; color: #ffec50; }
.rankings_options div { float: left; }

.server_status { margin: 0 auto; width: 294px; height: 62px; background: transparent url('../imgs/server_status.png') no-repeat; }
.server_status > * { font-size: 16px; text-align: center; padding: 30px 0 0 0; width: 50%; float: left; font-weight: normal !important; font-family: "IBM Plex Sans Thai", H57, Arial !important; text-transform: uppercase; color: #3ee242; }
.server_status > *.off { color: #ff0404; }

.dual-div { display: table; width: 100%; }
.dual-div > div { width: calc(50% - 10px); float: left; }
.dual-div > div:first-child { margin-right: 20px; }

.tri-div { display: table; width: 100%; }
.tri-div > div { width: calc(33% - 10px); float: left; margin-left: 20px; }
.tri-div > div:first-child { margin: 0; }

.center-txt { text-align: center; }
.center-txt h1, .center-txt h2 { padding-left: 0; padding-right: 0; }
body {
cursor: url('cursors/cursor.cur'), auto;
}
a {
cursor: url('cursors/hand.cur'), auto;
}
.dartan_font_small {
	text-shadow: -2px 0 black, 0 1px black, 2px 0 black, 0 -2px black;
	font-family:"IBM Plex Sans Thai", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #f0ff65;
	font-weight: bold;
}

.merac_font_small {
	text-shadow: -2px 0 black, 0 1px black, 2px 0 black, 0 -2px black;
	font-family:"IBM Plex Sans Thai", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #fa0c0c;
	font-weight: bold;
}
.wrapper{width:100%;min-width:320px;margin:0 auto;position:relative;z-index:1;background:url("../img/bg/main_footer_bg.jpg") repeat-y;background-size:100% auto}
.wrapper:before{content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:-1}
.content-area{max-width:1200px;width:calc(100% - 60px);margin:0 auto;height:auto;position:relative;z-index:1}
.nav{width:100%;height:100px;position:fixed;top:0;left:0;z-index:100;transition:height .3s ease-in-out}
@media(max-width: 1024px){.nav{height:80px}}
.nav:after{content:"";width:100%;height:100%;position:absolute;z-index:1;top:0;left:0;pointer-events:none;background:rgba(16, 26, 31, 0.9);transition:opacity .3s ease-in-out;opacity:0}
.nav:before{content:"";position:absolute;z-index:2;left:0px;bottom:-7px;width:100%;height:13px;text-align:center;background:url("../img/bg/border_bg.png") center center repeat-x;transition:opacity .3s ease-in-out;opacity:0}
.nav--fixed{height:70px}@media(max-width: 1024px){
.nav--fixed{height:60px}}
.nav--fixed:after{opacity:1}
.nav--fixed:before{opacity:1}
.nav--fixed .nav__logo{transform:scale(0.8) translateX(-10px)}
.nav--fixed .nav__links{border-radius:0px 0px 10px 10px}
.nav .content-area{height:100%;display:flex;justify-content:flex-start;align-items:center;gap:40px;z-index:3}
@media(max-width: 1240px){.nav .content-area{gap:30px}}
@media(max-width: 1024px){.nav .content-area{gap:20px}}
@media(max-width: 480px){.nav .content-area{gap:10px}}
.nav__logo{display:flex;transition:filter .3s ease-in-out,transform .3s ease-in-out;position:relative;z-index:3}
.nav__logo:hover{filter:brightness(110%)}
.nav__logo img{width:146px}
@media(max-width: 1024px){.nav__logo img{width:100px}}.nav__links{display:flex;justify-content:flex-start;align-self:center;flex-wrap:wrap;column-gap:40px;z-index:1}
@media(max-width: 1024px){.nav__links{width:300px;height:auto;position:absolute;top:calc(100% + 1px);right:0;background:rgba(31,21,16,.9);border-radius:10px;padding:10px 0;transition:border-radius .3s ease-in-out;display:none}}
@media(max-width: 480px){.nav__links{width:100%}}.nav__item{height:100%;position:relative}
@media(max-width: 1024px){.nav__item{width:100%;height:auto}}.nav__item-text{font-family:var(--primary-font);font-size:16px;line-height:3em;color:#e5e5e5;text-transform:uppercase;cursor:pointer;transition:color .3s ease-in-out;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;column-gap:6px}
@media(max-width: 1240px){.nav__item-text{font-size:15px}}@media(max-width: 1024px){.nav__item-text{line-height:1em;padding:10px 20px}}
.nav__item-text--dropdown:after{content:"";width:12px;aspect-ratio:15/8;position:relative;background:url("../img/icons/nav_arrow_icon.png");background-size:100% 100%;transition:transform .3s ease-in-out}
@media(max-width: 1024px){.nav__item-text.active{color:#f4d18a}
.nav__item-text--dropdown.active:after{transform:scale(1, -1)}}
.nav__item-stroke {
    min-width: 100%;
    position: absolute;
    left: 0px;
    top: 100%;
    list-style-type: none;
    
    /* 🎨 เปลี่ยนพื้นหลังเป็นสีน้ำเงินหม่นโปร่งแสง 85% (เพิ่มความเข้มขึ้นนิดหน่อยเพื่อให้อ่านง่ายบนเมนู) */
    background: rgba(22, 32, 47, 0.85); 
    
    /* ✨ เพิ่มเส้นขอบทองเหลืองจางๆ แบบเดียวกับตัวกล่องเว็บ */
    border: 1px solid rgba(250, 219, 147, 0.2); 
    
    /* 🎯 ปรับรูปทรงและเงาให้เข้าชุดกัน */
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    
    /* 📏 ปรับ Padding (บน-ล่าง 12px / ซ้าย-ขวา 16px) ช่วยลดความกว้างในแนวตั้ง */
    padding: 12px 16px; 
    
    opacity: 0;
    pointer-events: none;
    
    /* 📐 ปรับระยะลอยเริ่มต้นให้ชิดขึ้น (จากเดิม -10px ขยับขึ้นเป็น -4px เพื่อให้ตอนกางออกไม่ห่างเกินไป) */
    transform: translateY(-4px); 
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

@media(max-width: 1024px){
    .nav__item-stroke {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0px);
        display: none;
        position: relative;
        padding: 10px 20px;
        border-radius: 0;
        border: none; /* เอาเส้นขอบออกบนมือถือ */
        background: rgba(0,0,0,.5);
    }
}.nav__item-stroke li:not(:first-child){margin-top: 10px}
.nav__item-stroke li a{font-family:var(--primary-font);font-size:15px;line-height:1em;color:#e5e5e5;text-transform:uppercase;white-space:nowrap;transition:color .3s ease-in-out}
.nav__item-stroke li a:hover{color:#f4d18a}
@media(min-width: 1024px){.nav__item:hover .nav__item-text{color:#f4d18a}.nav__item:hover .nav__item-text--dropdown:after{transform:scale(1, -1)}}
@media(min-width: 1024px)and (max-width: 1240px){.nav__item:hover .nav__item-text--dropdown:after{transform:scale(1, -1)}}
@media(min-width: 1024px){
    .nav__item:hover .nav__item-stroke {
        opacity: 1;
        pointer-events: all;
        transform: translateY(-25px); /* 👈 ลองเริ่มที่ -25px หรือ -30px ดูครับ ขอบกล่องจะลอยขึ้นไปแปะใต้เมนูพอดี ทำให้เมาส์ไม่หลุดแล้วคลิกได้แน่นอนครับ */
    }
}
.nav__auth {
    font-family: var(--primary-font);
    font-size: 16px;
    line-height: 1em;
    color: #e5e5e5;
    text-transform: uppercase;
    transition: color .3s ease-in-out;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

/* 📱 เมื่อจอย่อต่ำกว่า 1240px: ปรับปุ่ม LOGIN เป็นวงกลมธีมเว็บ L2 */
@media(max-width: 1240px) {
    .nav__auth {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #141f32 0%, #0b121e 100%);
        border: 1px solid rgba(250, 219, 147, 0.3);
        box-shadow: 0px 4px 8px rgba(0,0,0,.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .3s ease-in-out;
        overflow: hidden; /* ล็อกไม่ให้ตัวหนังสือที่โดนซ่อนโผล่ออกมาดันกล่อง */
    }
}

.nav__auth i {
    display: none;
    transition: color .3s ease-in-out;
    color: #fff; /* สีไอคอนเริ่มต้นสีฟ้าอมเขียว */
}

@media(max-width: 1240px) {
    .nav__auth i {
        display: block;
        font-size: 14px;
    }
    .nav__auth span {
        display: none !important; /* บังคับซ่อนตัวหนังสือเด็ดขาดไม่ให้หลุดเฟรม */
    }
}

.nav__auth:hover { color: #f4d18a; }

/* เอฟเฟกต์ Hover ของปุ่มวงกลม LOGIN บนมือถือ/แท็บเล็ต */
@media(max-width: 1240px) {
    .nav__auth:hover {
        border-color: #fadb93;
        box-shadow: 0 0 15px rgba(96, 147, 172, 0.6);
    }
    .nav__auth:hover i {
        color: #fadb93; /* ไอคอนเปลี่ยนเป็นสีทองตอน Hover */
    }
}
.nav__account-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;                  /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
    padding: 10px 24px;         /* ขนาดความกว้าง-สูงของปุ่ม */
    
    /* 🔮 ปรับให้พื้นหลังโปร่งแสงขึ้น ดึงสีน้ำเงินมืดจางๆ ให้เข้ากับกรอบ Status */
    background: linear-gradient(135deg, rgba(20, 31, 50, 0.4) 0%, rgba(11, 18, 30, 0.5) 100%); 
    
    /* 🌐 ใส่เอฟเฟคกระจกเบลอ ให้มองเห็นวิดีโอด้านหลังลอยละมุนอยู่ใต้ปุ่ม */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* ⚡ เปลี่ยนเส้นขอบเป็นสีฟ้าไอซ์ซีดๆ จางๆ เข้าชุดกัน */
    border: 1px solid rgba(0, 204, 255, 0.25); 
    border-radius: 4px;         /* มุมเหลี่ยมตัดเล็กน้อยตามสไตล์เกมคอนโซล */
    color: #a3c3d9;             /* เปลี่ยนสีตัวอักษรเป็นขาวอมน้ำเงินอ่อน */
    font-family: "IBM Plex Sans Thai", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;  /* บังคับตัวพิมพ์ใหญ่ทั้งหมด */
    letter-spacing: 1px;        /* เว้นระยะตัวอักษรให้ดูหรูหรา */
    cursor: pointer;
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05); /* มิติแสงด้านบนในปุ่ม */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* ⚡ เอฟเฟกต์ตอนเมาส์ชี้ (Hover) - ระเบิดพลังออร่าสีฟ้าสลับทอง */
.nav__account-btn:hover {
    color: #ffffff;             /* ตัวหนังสือเปลี่ยนเป็นสีขาวสว่างชัดเจน */
    
    /* ⚡ เส้นขอบสว่างวาบเป็นสีฟ้าไฟนีออน */
    border-color: rgba(0, 204, 255, 0.8);      
    transform: translateY(-2px); /* ปุ่มลอยขึ้นเล็กน้อยดูมีมิติ */
    
    /* 🌟 ปรับแสงฟุ้ง (Glow) ให้แมตช์กัน โดยผสมพลังออร่าสีฟ้าสว่างและเงาดำ */
    box-shadow: 0 0 18px rgba(0, 204, 255, 0.6), 
                0 6px 20px rgba(0, 0, 0, 0.7),
                inset 0 0 8px rgba(0, 204, 255, 0.3); /* เพิ่มแสงเรืองข้างในปุ่ม */
    
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.2) 0%, rgba(11, 18, 30, 0.6) 100%);
    filter: brightness(115%);
}

/* 🖱️ เอฟเฟกต์ตอนกดปุ่ม (Active) */
.nav__account-btn:active {
    transform: translateY(1px);  /* ปุ่มยุบตัวลงตอนกด */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8),
                0 0 8px rgba(0, 204, 255, 0.4);
}

/* 🌟 แถมพิเศษ: เพิ่มลูกเล่นลำแสงวิ่งผ่านปุ่ม (Shine Light Effect) ตอนชี้เมาส์ */
.nav__account-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    transition: 0.6s;
}
.nav__account-btn:hover::before {
    left: 150%;
}

/* 📱 เมื่อจอย่อต่ำกว่า 1240px: ปรับปุ่ม ลงทะเบียน เป็นวงกลมธีมเว็บ L2 */
@media(max-width: 1240px) {
    .nav__account-btn {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #141f32 0%, #0b121e 100%);
        border: 1px solid rgba(250, 219, 147, 0.3);
        box-shadow: 0px 4px 8px rgba(0,0,0,.5);
        padding: 0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .3s ease-in-out;
        overflow: hidden;
    }
    .nav__account-btn:after { display: none; }
}

.nav__account-btn i { display: none; }

@media(max-width: 1240px) {
    .nav__account-btn i {
        display: block;
        font-size: 13px;
        color: #fff;
        transition: color 0.3s;
    }
    .nav__account-btn span {
        display: none !important;
    }
}

/* เอฟเฟกต์ Hover ของปุ่มวงกลม ลงทะเบียน บนมือถือ/แท็บเล็ต */
@media(max-width: 1240px) {
    .nav__account-btn:hover {
        border-color: #fadb93;
        box-shadow: 0 0 15px rgba(96, 147, 172, 0.6);
    }
    .nav__account-btn:hover i {
        color: #fadb93;
    }
}

.nav__panel{position:relative;display:flex;justify-content:center;align-items:center;gap:10px}
.nav__panel .gray-btn{z-index:1}
.nav__panel-out{width:14px;height:14px;display:flex;justify-content:center;align-items:center;font-size:10px;line-height:1em;transform:rotate(45deg);background-color:#d31616;position:absolute;z-index:2;top:14px;right:17px;transition:background-color .3s ease-in-out}
.nav__panel-out:after{content:"";width:calc(100% + 24px);aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
@media(max-width: 1240px){.nav__panel-out:after{display:none}}.nav__panel-out:hover{background-color:#dd5d5d}
@media(max-width: 1240px){.nav__panel-out{position:relative;top:0;left:0;width:30px;height:30px;border-radius:50%;font-size:13px}}
.open-main-menu{width:30px;height:30px;border-radius:50%;border:1px solid #fadb93;box-shadow:0px 4px 5px rgba(0,0,0,.3);position:relative;cursor:pointer;display:none;background-color:rgba(31,21,16,.8);transition:background-color .3s ease-in-out,border .3s ease-in-out;z-index:3}
@media(max-width: 1024px){.open-main-menu{display:flex}}
.open-main-menu:hover{background-color:rgba(31,21,16,.8)}
.open-main-menu:hover:after,.open-main-menu:hover:before{background:#ffc24c}
.open-main-menu:hover .open-main-menu__item{transform:scale(0.7, 1)}
.open-main-menu.active:after{transform:rotate(-135deg) scale(0.7, 1);top:calc((100% - 1px)/2)}
.open-main-menu.active:before{transform:rotate(135deg) scale(0.7, 1);top:calc((100% - 1px)/2)}
.open-main-menu.active .open-main-menu__item{transform:scale(0, 1)}
.open-main-menu:after{content:"";width:calc(100% - 12px);height:1px;background:#ffc24c;position:absolute;transform:rotate(0deg);transition:all .3s ease-in-out;top:9px;left:6px;transform:scale(0.7, 1)}
.open-main-menu:before{content:"";width:calc(100% - 12px);height:1px;background:#ffc24c;position:absolute;transform:rotate(0deg);transition:all .3s ease-in-out;top:calc(100% - 11px);left:6px;transform:scale(0.7, 1)}
.open-main-menu__item{width:calc(100% - 12px);height:1px;background:#ffc24c;position:absolute;top:calc((100% - 2px)/2);left:6px;transform:rotate(0deg);transition:all .3s ease-in-out;transform:scale(0.7, 1)}
/* เพิ่ม display: flex และปรับแนวตั้งให้อยู่กึ่งกลาง */
.langs {
  width: auto;
  position: relative;
  z-index: 3;
  margin-left: auto;
  display: flex;          /* บังคับให้ลูกเรียงเป็นแนวนอน */
  align-items: center;    /* จัดให้อยู่กึ่งกลางแนวตั้งเท่ากัน */
  gap: 25px;              /* (ไม่บังคับ) ใช้กำหนดระยะห่างระหว่างธงแต่ละอันแทน margin-right */
}

/* ปรับโค้ดเดิมเล็กน้อย */
.langs__content {
  width: 30px;
  height: 30px;
  position: relative;
  border-radius: 50%;
  z-index: 2;
  /* margin-right: 16px; */ /* แนะนำให้เอาออก แล้วใช้ gap ใน .langs ด้านบนควบคุมแทนจะแม่นยำกว่า */
  border: 1px solid #fadb93;
  box-shadow: 0px 4px 5px rgba(0,0,0,.3);
}
.langs__content-arrow{content:"";width:12px;aspect-ratio:15/8;position:absolute;top:calc((100% - 6px)/2);right:-18px;background:url("../img/icons/nav_arrow_icon.png") center center no-repeat;background-size:100% 100%;transition:transform .3s ease-in-out;cursor:pointer}
.langs__content:hover .langs__content-arrow{transform:scale(1, -1)}
.langs__content-current{width:26px;height:26px;border-radius:50%;margin:1px 0px 0px 1px;cursor:pointer;transition:filter .3s ease-in-out;overflow:hidden;position:relative;z-index:2}
.langs__content-current:hover{filter:brightness(130%)}
.langs__content-current img{width:100%;height:100%;object-fit:cover}
.langs__content-stroke{position:absolute;z-index:1;top:calc(100% - 10px);left:50%;transform:translateX(-50%) translateY(-35px);list-style:none;padding:5px;padding-top:25px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:0;pointer-events:none}
.langs__content-stroke:after{content:"";position:absolute;z-index:1;top:20px;bottom:0;left:0;right:0;background:#2d201b;border-radius:100px}
.langs__content-stroke li{width:30px;height:30px;transition:filter .3s ease-in-out;overflow:hidden;border-radius:50%;position:relative;z-index:2}
.langs__content-stroke li:hover{filter:brightness(150%)}
.langs__content-stroke li:not(:last-child){margin-bottom:7px}
.langs__content-stroke li a{width:100%;height:100%;display:block;position:relative}
.langs__content-stroke li img{display:block;height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%)}
.langs__content:hover .langs__content-stroke{transform:translateX(-50%) translateY(0%);opacity:1;pointer-events:all}

/* กล่องหลักคุมพื้นที่หน้าจอ */
.hero-container {
  position: relative;
  width: 100%;
  height: 100vh; /* เต็มความสูงหน้าจอพอดี */
  overflow: hidden;
  background-color: #000; /* พื้นหลังสำรองสีดำ */
}

/* ตั้งค่าให้ทุกเลเยอร์พื้นหลังขยายเต็มพื้นที่และซ้อนทับกัน */
.bg-fallback-img, 
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* บังคับให้ภาพและวิดีโอขยายเต็มจอโดยไม่เสียอัตราส่วน */
}

/* เลเยอร์ 1: ภาพนิ่งอยู่หลังสุด */
.bg-fallback-img {
  z-index: 1;
}

/* เลเยอร์ 2: วิดีโออยู่เหนือภาพนิ่ง */
.bg-video {
  z-index: 2;
}

/* เลเยอร์ 3: เอฟเฟคเม็ดไฟลอยเด่นเหนือกราฟิกพื้นหลัง */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none; /* ป้องกันไม่ให้แคนวาสบังการคลิกเมาส์ */
}

/* เลเยอร์ 4: เนื้อหาเว็บและตัวละครอยู่หน้าสุดเสมอ */
.hero-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;  /* จัดแนวตั้งเรียงลงมา */
  align-items: center;      /* จัดกึ่งกลางแนวนอน */
  justify-content: center; /* จัดกึ่งกลางแนวตั้ง */
  height: 100vh;           /* ให้สูงเท่าหน้าจอพอดี */
}
/* การ์ดกรอบหลัก (ปรับให้พื้นหลังโปร่งใสขึ้น และเพิ่มเอฟเฟคเบลอฉากหลัง) */
.server-status-card {
  position: relative;
  /* ลดค่า alpha ของสีพื้นหลังลงเหลือ 0.35 และ 0.45 เพื่อความโปร่งแสงที่มากขึ้น */
  background: linear-gradient(135deg, rgba(10, 20, 35, 0.35), rgba(5, 10, 15, 0.45));
  border: 1px solid rgba(0, 204, 255, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  width: 160px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 
              inset 0 0 10px rgba(0, 204, 255, 0.05);
  font-family: 'Arial', sans-serif;
  /* เพิ่มค่า blur เป็น 8px เพื่อให้วิดีโอด้านหลังที่ทะลุเข้ามาดูเนียนตาและตัวอักษรอ่านง่ายขึ้น */
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px); /* รองรับเบราว์เซอร์ Safari */
  overflow: hidden;
}

/* เส้นขอบมุมเรืองแสง */
.card-glow-border {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 6px;
  pointer-events: none;
  border-top: 1.5px solid rgba(0, 204, 255, 0.4);
  border-bottom: 1px solid rgba(0, 204, 255, 0.1);
}

/* จัดแถวข้อความซ้าย-ขวา */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
}

/* หัวข้อภาษาอังกฤษ */
.status-label {
  color: #a3c3d9;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 204, 255, 0.3);
}

/* ป้ายแสดงสถานะ Online / Offline */
.status-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* สไตล์เมื่อเซิร์ฟเวอร์ Online */
.status-badge.on {
  background: rgba(0, 255, 136, 0.15); /* เพิ่มความชัดของสีป้ายเล็กน้อยเพื่อให้ตัดกับพื้นหลังที่ใสขึ้น */
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.4);
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.2);
}

/* สไตล์เมื่อเซิร์ฟเวอร์ Offline */
.status-badge.off {
  background: rgba(255, 51, 51, 0.15);
  color: #ff3333;
  border: 1px solid rgba(255, 51, 51, 0.4);
  box-shadow: 0 0 6px rgba(255, 51, 51, 0.2);
}

/* ตัวเลขจำนวนคนออนไลน์ */
.player-count {
  color: #ffcc00;
  font-size: 12px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

/* เส้นคั่นกลางลายเส้นบาง */
.status-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 204, 255, 0.2), transparent);
  margin: 6px 0;
}

/* ปุ่มดาวน์โหลดหลัก (ใช้เทคนิค clip-path ตัดหัวท้ายให้เฉียงแบบเท่ๆ) */
.btn-download-game {
  position: absolute;
  padding: 2px; /* ขนาดของเส้นขอบเรืองแสง */
  background: linear-gradient(135deg, rgba(0, 204, 255, 0.6), rgba(255, 204, 0, 0.2), rgba(0, 204, 255, 0.4));
  border: none;
  cursor: pointer;
  
  /* ตัดมุมซ้ายบนและขวาต่ำให้เฉียงเป็นทรงคางหมู/หกเหลี่ยมสไตล์เกม */
  clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
  
  /* แสงออร่าสีฟ้านีออนฟุ้งรอบตัวปุ่ม */
  filter: drop-shadow(0 0 15px rgba(0, 204, 255, 0.4));
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* จัดตำแหน่งให้อยู่ตรงกลางแถวดวงจันทร์ (ปรับขยับมาร์จิ้นได้ตามหน้าเว็บจริง) */
  width: 289px;
  margin: 20px auto;
  left: 50%;
  top: -10px; 
  display: block;
}

/* พื้นหลังด้านในปุ่ม (โปร่งแสงทะลุเห็นดวงจันทร์และเอฟเฟค) */
.btn-download-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* ดึงโทนสีมืดจางๆ และคุมความใสให้เข้ากับกรอบ Status */
  background: linear-gradient(180deg, rgba(10, 25, 47, 0.45) 0%, rgba(5, 12, 24, 0.6) 100%);
  padding: 14px 45px;
  
  /* ตัดมุมด้านในให้ขนานเป๊ะกับกรอบนอก */
  clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
  
  /* เอฟเฟคกระจกเบลอละมุนให้เห็นเม็ดไฟลอยผ่านใต้ปุ่ม */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ไอคอนสามเหลี่ยม/ลูกศรดาวน์โหลด */
.download-icon {
  color: #ffcc00; /* สีทองสว่าง */
  font-size: 16px;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
  animation: bounceArrow 1.5s infinite ease-in-out; /* ลูกเล่นลูกศรขยับขึ้นลงล่อตาล่อใจ */
}

/* ตัวอักษร DOWNLOAD GAME */
.download-text {
  color: #ffffff;
  font-family: "IBM Plex Sans Thai", Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.6);
}

/* ⚡ เอฟเฟกต์ตอนเอาเมาส์ไปชี้ (Hover) - ปุ่มจะสว่างวาบและขยายพลังออร่า */
.btn-download-game:hover {
  transform: scale(1.05); /* ขยายขนาดใหญ่ขึ้นเล็กน้อย */
  filter: drop-shadow(0 0 25px rgba(0, 204, 255, 0.8)); /* แสงเรืองจ้าขึ้น */
}

.btn-download-game:hover .btn-download-inner {
  /* เปลี่ยนพื้นหลังให้สะท้อนสีฟ้าเหลืองเหล็กกล้า */
  background: linear-gradient(180deg, rgba(0, 204, 255, 0.25) 0%, rgba(255, 204, 0, 0.1) 100%);
}

.btn-download-game:hover .download-text {
  color: #ffcc00; /* ตัวหนังสือสลับเป็นสีทองสว่างวาบ */
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.9);
}

/* 🖱️ เอฟเฟกต์ตอนกดปุ่ม (Active) */
.btn-download-game:active {
  transform: scale(0.98); /* ยุบตัวลงเล็กน้อยตอนคลิก */
}

/* 🔄 แอนิเมชันสั่งให้ลูกศรดาวน์โหลดขยับเด้งขึ้นลงช้าๆ */
@keyframes bounceArrow {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

/* 🌟 ลำแสงวิ่งผ่านปุ่มเฉียงๆ ตอนชี้เมาส์ */
.btn-download-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}
.btn-download-game:hover .btn-download-inner::before {
  left: 150%;
}

.header__logo {
  position: absolute;
  max-width: 240px;
  /* margin: auto; เอาออกได้เลยเพราะ absolute ไม่รองรับการจัดกึ่งกลางด้วยวิธีนี้ */
  
  /* แก้ไขตรงนี้ */
  left: 50%;
  top: 250px;
  transform: translateX(-50%); /* ดันโลโก้กลับมาครึ่งหนึ่งของตัวมันเองเพื่อให้ตรงกลางเป๊ะ */
  
  display: block;
  transition: transform .3s ease-in-out;
}

/* เนื่องจากมีการใช้ transform ในตัวหลัก เวลา hover ต้องใส่ translateX ควบคู่ไปด้วย */
.header__logo:hover {
  transform: translateX(-50%) scale(1.05); 
}

.header__logo img {
  width: 100%;
}