@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;}
body {
    margin: 0;
    padding: 0;
    color: #fff;
    padding-top: 100px; 
    
    background: 
        url('../imgs/bg-top.jpg') no-repeat center top, 
        url('../imgs/bg-bottom-footer.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);
	
	
}
.all { width: 1100px; position: relative; display: table; margin: 0 auto; padding-top: 14px; }
body, a, a:active, a:visited, a:link, input, textarea, select { font-family: "IBM Plex Sans Thai",OpenSansRegular, Arial; font-size: 14px; text-decoration: none; }

a, a:active, a:visited, a:link { cursor: pointer; font-weight: bold; font-family: "IBM Plex Sans Thai", OpenSansBold, Arial; font-size: 14px; }
a, input { outline: none; }
p { margin: 0; padding: 0; }
input[type="checkbox"], input[type="radio"] { cursor: pointer; }

.pddInner { padding: 0 15px 30px; }

a, a:active, a:visited, a:link { color: #fffca1; cursor: pointer; font-weight: bold; }
a:hover { color: #fadb93; }
a:active { color: #fff; }

#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; }

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: 3px; box-shadow: 0px 1px 0px rgba(255,255,255,0.2) inset; font-family:"IBM Plex Sans Thai", Tahoma; } 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, span.default, input.default { background: #252525; background: -moz-linear-gradient(top, #4e4e4e 0%, #252525 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(100%,#252525)); border: 1px solid #252525; color: rgba(255,255,255,0.8) !important; }
a.default.big, span.default.big, input.default.big { text-transform: uppercase; min-width: 140px; padding: 7px 24px; font-size: 15px; }
a.default.superbig, span.default.superbig, input.default.superbig { text-transform: uppercase; min-width: 140px; padding: 10px 30px; font-size: 16px; }
a.default:hover, input.default:hover, span.default:hover { background: #6c6c6c; border-color: #6c6c6c; color: #fff !important; }
a.default.sucesso, span.default.sucesso, input.default.sucesso { background: #0dbb00 !important; border-color: #0dbb00 !important; color: #fff !important; } 
section.login { min-height: 540px; background: #fff url('../imgs/nm/login_bg.jpg') no-repeat center bottom; }
section { width: 1000px; min-height: 400px; background: #fff; margin: 0 auto; padding: 15px 20px 15px 15px; border-radius: 15px 0 15px 15px; position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.3); }
section.login { min-height: 540px; background: #fff url('../imgs/nm/login_bg.jpg') no-repeat center bottom; }
.loggedAs { width: 225px; height: 45px; overflow: hidden; box-sizing: border-box; padding: 15px 15px 0; 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;

  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; position: absolute; top: -51px; left: 25;  }

  a.buttonlogin.big, span.buttonlogin.big, input.buttonlogin.big { text-transform: uppercase; min-width: 140px; padding: 7px 24px; font-size: 15px;
    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; }
  a.buttonlogin.big, span.buttonlogin.big, input.buttonlogin.big:hover { text-transform: uppercase;              
    /* ตัวหนังสือเปลี่ยนเป็นสีขาวสว่างชัดเจน */
    color: #fff;  
    /* ⚡ เส้นขอบสว่างวาบเป็นสีฟ้าไฟนีออน */
    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%); }

.loggedAs > div { position: relative; font-size: 12px; color: #414141; font-weight: bold; width: 100%; height: 25px; line-height: 25px; box-sizing: border-box; padding: 0 10px; background: #dfdfdf; border-radius: 4px; }
.loggedAs > div > div { position: absolute; top: 2px; right: 2px; }
.loggedAs a.default { float: left; width: 19px; height: 16px; padding: 3px 0 0 0; font-size: 14px; display: table; margin: 0 0 0 2px; display: inline-block; border-radius: 3px; }
.loggedAs a.logout:hover { background-color: #bd0000 !important; border-color: #bd0000 !important; }

.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; }

.indexTitle { font-size: 26px; width: 100%; text-align: center; padding: 0px 0 0; color: #fff; font-family:"IBM Plex Sans Thai", OpenSansSemibold, Arial; font-weight: bold; }

.smallCenter { text-align: center; position: relative; display: table; width: 382px; margin: 0 auto 0; padding: 20px 0 50px 0; }
.smallCenter .grayArea { width: 100%; margin: 10px 0; padding: 10px 0; text-align: center; background: rgba(0,0,0,0.15); color: #000; border-radius: 4px; }
.smallCenter .accessButton { display: table; margin: 10px auto 20px; }

.formpadrao, .formpadrao > div, .formpadrao .camp input, .formpadrao .camp select { border-radius: 3px; } .formpadrao { display: table; margin: 0 auto 2px auto; padding: 2px; } .formpadrao > div { display: table; } .formpadrao .desc { width: 2px; padding: 0 2px; font-weight: bold; text-align: right; } .formpadrao .desc, .formpadrao .camp, .formpadrao .camp2 { float: left; height: 40px; line-height: 40px; } .formpadrao .camp input[type="text"], .formpadrao .camp input[type="password"], .formpadrao .camp input[type="file"] { border: 0; width: 300px; margin: 5px 5px 0 0; height: 30px; line-height: 30px; padding: 0 5px; box-shadow: 1px 1px 1px rgba(0,0,0,0.4) inset; } .formpadrao .camp select { border: 0; width: 210px; margin: 5px 5px 0 0; padding: 6px 5px 5px; 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.7); } .formpadrao > div { background: rgba(0,0,0,0.7); } .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; width: 180px; } label.captcha a { position: absolute; right: 12px; top: 12px; } label.captcha a, label.captcha a img { width: 23px; height: 23px; } label.captcha a:hover { opacity: 0.7; } label.captcha a:active { opacity: 1; }

footer { color: rgba(255,255,255,0.6); font-size: 13px; width: 1000px; padding: 30px 0 35px; box-sizing: border-box; margin: 0 auto; text-align: center; position: relative; font-weight: bold; }
footer span { font-size: 11px; font-weight: normal; }
footer a.atualstudio { top: 40px; right: 50px; position: absolute; opacity: 0.4; display: block; width: 120px; height: 18px; background: transparent url('../imgs/nm/atualstudio.png'); }
footer a.atualstudio:hover { opacity: 1; }

.grayBg { background: #e6e6e6 url('../imgs/nm/white_line.png') repeat-y 220px 0; display: table; width: 100%; border-radius: 10px 0 0 10px; }

aside { width: 220px; float: left; }

.saldo, .saldo > div { width: 100%; box-sizing: border-box; padding: 10px; }
.saldo > div { background: #fff; border-radius: 8px 0 8px 8px; }
.saldo > div .total { border: 1px solid #e6e6e6; border-radius: 3px; padding: 5px 0; margin: 0 0 6px 0; text-align: center; font-size: 13px; font-weight: bold; font-family: "IBM Plex Sans Thai",OpenSansBold, Arial; }
.saldo > div .total span { color: #0da500; }
.saldo > div .bts { display: table; margin: 0 auto;}
.saldo > div a.default { float: left; width: 82px; padding: 4px 0; font-family: "IBM Plex Sans Thai", Arial; font-size: 12px; text-transform: capitalize; margin-left: 6px; }
.saldo > div a.default:first-child { margin: 0; }

nav { display: table; width: 100%; }
nav > * { cursor: pointer; display: table; width: 100%; height: 42px; line-height: 42px; padding: 0 0 0 15px; box-sizing: border-box; margin: 0 0 1px 0; font-size: 15px !important;  color: #000 !important; font-family: "IBM Plex Sans Thai", OpenSansRegular, Arial !important; font-weight: normal !important; transition: background 0.2s; }
/*nav > *:hover { background: #c2c2c2; }
nav > *:active { background: #a1a1a1; }*/
nav > span { padding-left: 0 !important; cursor: default !important; }
nav > span > span { cursor: pointer; display: block; width: 100%; padding-left: 15px; box-sizing: border-box; }
nav > * > i, nav > * > span > i { width: 18px; margin: 0 8px 0 0; text-align: center; }
nav > *.actived { cursor: default; color: #fff !important; background: #a1a1a1 url('../imgs/nm/menu_arrow.png') no-repeat right 0; }

nav .dropdown { display: none; padding: 0 0 14px 15px; }
nav .dropdown a { display: block; box-sizing: border-box; width: 100%; height: 34px; line-height: 34px; padding: 0 10px; margin: 0 0 1px 0; background-color: rgba(255,255,255,0.5) !important; border-left: 2px solid rgba(255,255,255,0.8); font-size: 13px !important; color: #000 !important; font-weight: normal !important;font-family: "IBM Plex Sans Thai", OpenSansRegular, Arial !important; transition: background-color 0.4s, border-color 0.4s; }
nav .dropdown a:hover { background-color: #fff !important; border-color: #fff !important; }
nav .dropdown a:active { opacity: 0.7; }
nav > *.actived .dropdown { display: block; }
article { background: #fff; width: calc(100% - 220px); height: 100%; min-height: 500px; box-sizing: border-box; padding: 10px 5px 5px 25px; float: left; }

ul.breadcrumb { display: table; width: 100%; margin: 0 0 20px 0; padding: 7px 15px; box-sizing: border-box; list-style: none; background: #f8f8f8; border: 1px solid #e6e6e6; border-radius: 3px; }
ul.breadcrumb li { display: inline-block; float: left; }
ul.breadcrumb li + li:before { padding: 8px; color: black; content: "»"; }
ul.breadcrumb li a { color: #000; }
ul.breadcrumb li a:hover { color: #585858; }
ul.breadcrumb li a:active { color: #ccc; }

h1, h2, h3 { font-family:"IBM Plex Sans Thai", OpenSansSemibold, Arial; font-weight: bold; }
h1 { font-size: 20px; margin: 0 0 15px 15px; }
h1 i { margin-right: 7px; }
h2 { font-size: 17px; margin: 0 0 15px 15px; }

.box { position: relative; box-sizing: border-box; width: 100%; background: #f7f7f7; border: 1px solid #ececec; margin: 0; border-radius: 5px; padding: 0 0 15px 0; }
.twoBox { width: 100%; display: table; }
.twoBox .box { float: left; width: calc(50% - 10px); margin: 0 0 20px 20px; }
.twoBox .box:first-child { margin-left: 0; }
.box h1 { width: 100%; height: 40px; line-height: 40px; box-sizing: border-box; font-size: 16px; background: #5e5e5e; color: #fff; margin: 0 0 10px 0; padding: 0 0 0 15px; border-radius: 5px; }

.lines { padding: 0 15px; }
.lines > div { padding: 0 10px; box-sizing: border-box; display: table; width: 100%; height: 36px; line-height: 36px; font-family:"IBM Plex Sans Thai", OpenSansRegular, Arial; font-size: 14px; border-top: 1px solid rgba(0,0,0,0.2); }
.lines > div.two { background: rgba(0,0,0,0.05); }
.lines > div:first-child { border: 0; }
.lines > div span { float: right; font-family: "IBM Plex Sans Thai", OpenSansSemibold, Arial; font-weight: bold; }

.lines.logs > div { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.2); }
.lines.logs > div.two { background: rgba(0,0,0,0.1); }

.mult { display: table; box-sizing: border-box; width: 100%; margin: 0 auto; }

.mult .selec { box-sizing: border-box; display: table; margin: 5px auto 0 auto; }
.mult .selec > * { float: left; transition: background-color 0.4s; position: relative; width: 80px; height: 80px; padding: 10px; overflow: hidden; background: #d9d9d9; margin: 0 1px 0 0; }
.mult .selec > div { cursor: pointer; }
.mult .selec > div:hover { background: rgba(0,0,0,0.3); }
.mult .selec > span:hover { background: rgba(0,0,0,0.2); }
.mult .selec > div.actived { cursor: default; background: #f9f9f9; }
.mult .selec > div > img { width: 80px; height: 80px; }
.mult .selec > div > div { width: 72px; height: 22px; line-height: 22px; position: absolute; bottom: 11px; right: 15px; font-family:"IBM Plex Sans Thai", Arial; font-size: 9px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000; text-align: center; overflow: hidden; }

.mult .infos, .mult .opts { display: none; width: calc(100% - 15px); min-height: 200px; padding: 15px 0 0; background: rgba(255,255,255,0.3); }
.mult .infos.actived, .mult .opts { display: table !important; }
.mult .lines { float: left; width: calc(50% - 15px); padding: 0; margin: 0 0 0 15px; }
.mult .lines > div { width: 100%; padding: 0 10px; margin: 0; box-sizing: border-box; }
.mult .charSelectedTxt, .service { box-sizing: border-box; width: calc(100% - 25px); background: #fffb99; margin: 0 0 0 20px; padding: 12px 18px; font-size: 15px; border-radius: 4px; }
.service { font-size: 14px; background: rgba(0,0,0,0.1); margin-top: 20px; padding: 20px 20px 25px; }
.service > .title { font-size: 18px; margin: 0 0 10px 0; position: relative; }
.service > .title .costs { position: absolute; top: 0; right: 0; padding: 10px 15px; font-size: 14px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 2px; }
.service > .desc { margin: 0 0 10px 0; }
.service > .work { margin: 0 0 15px 0; }
.service > input.default { width: auto !important; display: table !important; margin: 0 auto; padding: 10px 15px; font-size: 13px; }
.service .confirmChar { box-sizing: border-box; min-width: 381px; padding: 10px 15px; display: table; text-align: center; margin: 10px auto 0; background: #fffb99; border-radius: 4px; }
.service .confirmChar.invis { display: none !important; }
.service .confirmChar a.default { width: 120px; display: inline-block; margin: 0 0 0 10px; background: #b70000; background: -moz-linear-gradient(top, #e50000 0%, #b70000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e50000), color-stop(100%,#b70000)); border: 1px solid #b70000; color: #fff; }
.service .confirmChar a.default:hover { background: #6c0d0d; border-color: #6c0d0d; }

.rulesbox { box-sizing: border-box; width: 100%; height: 280px; border: 2px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.1); overflow: auto; margin: 0 auto 20px; padding: 20px; border-radius: 4px; }
.rulesbox h1 { padding: 0 0 10px; font-size: 17px; }

table.donateBox { box-sizing: border-box; width: 100%; border: 2px solid rgba(0,0,0,0.2); background: rgba(0,0,0,0.05); border-radius: 4px; }
table.donateBox th, table.donateBox td { box-sizing: border-box; padding: 8px; border: 1px solid rgba(0,0,0,0.1); border-right: 0; border-bottom: 0; text-align: left; }
table.donateBox th { border-top: 0; background: rgba(0,0,0,0.1); }
table.donateBox th:first-child, table.donateBox td:first-child { border-left: 0; }
table.donateBox select { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid rgba(0,0,0,0.1); margin: 0; padding: 5px; border-radius: 4px; }
table.donateBox select:hover { background: #fffdd4; }
table.donateBox .bonus { display: none; background: #fffb99; text-align: center; width: 100%; margin: 5px auto 0; padding: 5px 0; box-sizing: border-box; border-radius: 4px; }

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 { text-align: center; font-size: 12px; padding: 6px 8px; border-left: 1px solid rgba(0,0,0,0.2); background: rgba(0,0,0,0.1); }
table.default tr.two td { background: rgba(0,0,0,0.03); }
table.default tr td.foco { font-weight: bold; color: #000; background: rgba(0,0,0,0.15); }
table.default tr.two td.foco { background: rgba(0,0,0,0.06); }
table.default tr th { font-weight: bold; text-align: center; background: #5e5e5e; color: #fff; padding: 10px 0; }
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; }
table.default tr.pin td { background: #fffde5 !important; }


span#confirm { background: #fffb99; box-sizing: border-box; display: table; width: 100%; margin: 10px 0; padding: 30px 0; text-align: center; font-size: 15px; }
span#confirm.invis { display: none !important; }

.wSelectBg { background: rgba(0,0,0,0.1); width: 100%; box-sizing: border-box; padding: 20px 0 20px 40px; margin: 0 0 20px 0; border-radius: 4px; }
.wSelectBg select { border: 0; width: 570px; box-sizing: border-box; background: #fff; margin: 0 0 0 10px; padding: 5px; }

.shopPacks { box-sizing: border-box; width: 100%; padding: 0 0 30px 15px; display: table; }
.shopPacks > a { opacity: 1; transition: opacity 0.3s; position: relative; float: left; width: 136px; height: 136px; display: block; margin: 0 10px 10px 0; background-color: transparent; background-repeat: no-repeat; background-position: center top; border-radius: 3px; }
.shopPacks > a > div { overflow: hidden; box-sizing: border-box; width: 136px; height: 50px; padding: 30px 0 0 0; position: absolute; left: 0; bottom: 0; background: transparent url('../imgs/nm/degrade_black_transp.png'); color: #fff; font-size: 10px; text-align: center; border-radius: 0 0 3px 3px; }
.shopPacks > a:hover { opacity: 0.7; }

.shopItemList { padding: 0 20px 20px; }
.shopItemList table td, .shopItemList table th { text-align: left !important; }
.shopItemList table td { font-size: 13px !important; }
.shopItemList table td:hover {  }

#buyItemForm { position: relative; }
.shopItemList .packImg { position: absolute; top: -40px; right: 20px; padding: 6px; border-radius: 4px; background: rgba(0,0,0,0.2); }
.shopItemList .packImg, .shopItemList .packImg img { width: 80px; height: 80px; }

#buyTrigger { width: 120px; }

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

.castled { float: left; width: 355px; margin: 0; } .castled, .castled > div { display: table; } .castled .ct { font-size: 16px; font-weight: bold; padding: 10px 0 10px 30px; } .castled .imgc { width: 175px; height: 99px; border: 1px solid rgba(0,0,0,0.4); float: left; border-radius: 6px; } .castled .imgc span { display: block; width: 175px; height: 99px; background: rgba(0,0,0,0.6) url('../imgs/nm/castles.jpg') no-repeat; border-radius: 5px; } .castled .ci { float: left; width: 168px; 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: -175px top; } .castled .imgc.giran span { background-position: -350px top; } .castled .imgc.oren span { background-position: -525px top; } .castled .imgc.dion span { background-position: -700px top; } .castled .imgc.gludio span { background-position: -875px top; } .castled .imgc.innadril span { background-position: -1050px top; } .castled .imgc.rune span { background-position: -1225px top; } .castled .imgc.schuttgart span { background-position: -1400px top; }

.rmsg { display: table; width: 360px; margin: 0 auto 20px auto; padding: 10px; background: #108c00; border-radius: 5px; text-align: center; color: #fff; font-size: 14px; } .rmsg.error { background-color: #b30000 !important; } .rmsg.warn { 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: 300px;
  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; }

.fullGallery { width: 100%; overflow: hidden; margin: 0 auto; padding: 15px 0 0 0; } .fullGallery > div { width: calc(100% + 20px); display: table; } .fullGallery a, .fullGallery a div, .fullGallery a img { width: 88px; height: 88px; } .fullGallery a { border: 1px solid rgba(0,0,0,0.4); background: rgba(255,255,255,0.5); display: block; position: relative; float: left; padding: 1px; margin: 0 10px 10px 0; border-radius: 3px; } .fullGallery a div { border-radius: 5px; position: absolute; top: 1px; left: 1px; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; } .fullGallery a img { border-radius: 5px; } .fullGallery a span { display: block; width: 46px; height: 46px; position: absolute; left: 23px; top: 23px; background: transparent url('../imgs/nm/play2.png') no-repeat; border-radius: 5px; } .fullGallery a:hover { border-color: rgba(0,0,0,0.7); background: rgba(255,255,255,0.4); } .fullGallery a:hover div { box-shadow: 0 0 10px rgba(255,255,255,1) inset; } 
.fullGallery a mark { display: block; position: absolute; width: calc(100% - 2px); height: 24px; line-height: 24px; background: rgba(0,0,0,0.7); bottom: 1px; right: 1px; color: #fffeb4; font-size: 10px; text-align: center; font-family:"IBM Plex Sans Thai", Arial; font-weight: bold; }
.fullGallery i { cursor: pointer; display: block; position: absolute; top: -6px; right: -6px; background: #ba0000; color: rgba(255,255,255,0.7); width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 11px; text-align: center; }
.fullGallery i:hover { background: #ff0000; color: #fff; }

.paginate { display: table; margin: 30px auto; } .paginate a { display: block; padding: 5px 8px; font-weight: bold; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset; float: left; margin: 0 1px 0 0; border-radius: 3px; } .paginate a.atual, .paginate a.desatived { cursor: default; box-shadow: none; } .paginate a { background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.7); color: rgba(255,255,255,0.7) !important; } .paginate a:hover { background: rgba(0,0,0,0.9) !important; border-color: rgba(0,0,0,0.9) !important; color: #fff !important; } .paginate a:active, .paginate a.atual { background: #000 !important; border-color: #000 !important; color: #fff !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(0,0,0,0.3) !important; }

.atualEnd { padding: 0 0 20px 0; }
.atualEnd.invis { display: none; }

.inventory { width: 100%; max-width: 722px; margin: 0 auto; padding: 10px 10px 4px 4px; border: 2px solid #d9d9d9; box-sizing: border-box; background: #f5f5f5; }
.inventory.loading { min-height: 106px; background: #f5f5f5 url('../imgs/nm/loader.gif') no-repeat center center; }
.inventory > div { display: table; width: 100%; }
.inventory > div > span { display: block; cursor: pointer; float: left; width: 32px; height: 32px; padding: 1px; margin: 0 0 6px 6px; border: 2px solid #ccc; }
.inventory > div > span:hover { border-color: #00b40d; }
.inventory > div > span.actived { border-color: #fffb99 !important; box-shadow: 0 0 10px #00b40d; }
.inventory.passive > div > span > img { -webkit-filter:grayscale(1); -moz-filter:grayscale(1); -o-filter:grayscale(1); filter:grayscale(1); opacity:0.9 !important; }
.inventory.passive > div > span.actived > img, .inventory > div > span:hover > img { -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -o-filter:grayscale(0); filter:grayscale(0); opacity:1 !important; }

#enchItemSelected { position: relative; display: table; margin: 40px auto 50px; background: #fffb99; padding: 30px; border-radius: 8px; }
#enchItemSelected.invis { display: none !important; }
#enchItemSelected > * { float: left; }
#enchItemSelected > img { border-radius: 4px; }
#enchItemSelected > .n { height: 32px; line-height: 32px; padding: 0 15px 0 10px; }
#enchItemSelected > span { display: block; height: 32px; line-height: 32px; font-weight: bold; }
#enchItemSelected > span > input { background: #fff !important; text-align: center; width: 50px; box-sizing: border-box; margin: 0; padding: 0 5px; height: 32px; line-height: 32px; border: 2px solid rgba(0,0,0,0.3); border-radius: 4px; margin: 0 10px 0 0; }
#enchItemSelected > span > input:hover, #enchItemSelected > span > input:focus { border-color: rgba(0,0,0,0.8); }
#enchItemSelected > .c { position: absolute; top: -15px; right: 30px; width: 200px; background: #0da500; text-align: center; box-sizing: border-box; padding: 6px; border-radius: 6px; color: #fff; }
#enchItemSelected > .m { position: absolute; top: -15px; left: 30px; background: #b30000; padding: 6px; border-radius: 6px; color: #fff; }
#enchItemSelected > a { font-size: 13px !important; box-sizing: border-box !important; width: 200px !important; height: 32px !important; line-height: 30px !important; padding: 0 15px 0 !important; margin: 0 !important; }

/* Skin Colors */

section.black .box h1, section.black table.default tr th, section.black .service > .title .costs, section.black nav > *.actived { background-color: #1c1c1c !important; } section.black a, section.black a:active, section.black a:visited, section.black a:link { color: #000; } section.black a:hover { color: #5a5a5a; } section.black a:active { color: #9c9c9c; } section.black a.default, section.black span.default, section.black input.default { background: #1c1c1c; background: -moz-linear-gradient(top, #4c4c4c 0%, #1c1c1c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(100%,#1c1c1c)); border: 1px solid #1c1c1c; } section.black a.default:hover, section.black input.default:hover, section.black span.default:hover { background: #646464; border-color: #646464; } section.black table.donateBox { border-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.05); } section.black table.donateBox th { background-color: rgba(0,0,0,0.1); } 
section.blue .box h1, section.blue table.default tr th, section.blue .service > .title .costs, section.blue nav > *.actived { background-color: #15487c !important; } section.blue a, section.blue a:active, section.blue a:visited, section.blue a:link { color: #0672a5; } section.blue a:hover { color: #00a6f3; } section.blue a:active { color: #27617c; } section.blue a.default, section.blue span.default, section.blue input.default { background: #15487c; background: -moz-linear-gradient(top, #0d6aab 0%, #15487c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d6aab), color-stop(100%,#15487c)); border: 1px solid #15487c; } section.blue a.default:hover, section.blue input.default:hover, section.blue span.default:hover { background: #2394e3; border-color: #2394e3; } section.blue table.donateBox { border-color: rgba(33,90,154,0.2); background-color: rgba(33,90,154,0.05); } section.blue table.donateBox th { background-color: rgba(33,90,154,0.1); } 
section.red .box h1, section.red table.default tr th, section.red .service > .title .costs, section.red nav > *.actived { background-color: #740000 !important; } section.red a, section.red a:active, section.red a:visited, section.red a:link { color: #ac0000; } section.red a:hover { color: #de0000; } section.red a:active { color: #ff5a5a; } section.red a.default, section.red span.default, section.red input.default { background: #740000; background: -moz-linear-gradient(top, #9f0000 0%, #740000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9f0000), color-stop(100%,#740000)); border: 1px solid #740000; } section.red a.default:hover, section.red input.default:hover, section.red span.default:hover { background: #c70000; border-color: #c70000; } section.red table.donateBox { border-color: rgba(116,0,0,0.2); background-color: rgba(116,0,0,0.05); } section.red table.donateBox th { background-color: rgba(116,0,0,0.1); } 
section.green .box h1, section.green table.default tr th, section.green .service > .title .costs, section.green nav > *.actived { background-color: #0b5f00 !important; } section.green a, section.green a:active, section.green a:visited, section.green a:link { color: #0f7f00; } section.green a:hover { color: #15b000; } section.green a:active { color: #1be400; } section.green a.default, section.green span.default, section.green input.default { background: #0b5f00; background: -moz-linear-gradient(top, #118f00 0%, #0b5f00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#118f00), color-stop(100%,#0b5f00)); border: 1px solid #0b5f00; } section.green a.default:hover, section.green input.default:hover, section.green span.default:hover { background: #15b100; border-color: #15b100; } section.green table.donateBox { border-color: rgba(11,95,0,0.2); background-color: rgba(11,95,0,0.05); } section.green table.donateBox th { background-color: rgba(11,95,0,0.1); } 
section.purple .box h1, section.purple table.default tr th, section.purple .service > .title .costs, section.purple nav > *.actived { background-color: #4c005f !important; } section.purple a, section.purple a:active, section.purple a:visited, section.purple a:link { color: #6b0086; } section.purple a:hover { color: #9201b6; } section.purple a:active { color: #b700e5; } section.purple a.default, section.purple span.default, section.purple input.default { background: #4c005f; background: -moz-linear-gradient(top, #70008c 0%, #4c005f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70008c), color-stop(100%,#4c005f)); border: 1px solid #4c005f; } section.purple a.default:hover, section.purple input.default:hover, section.purple span.default:hover { background: #8c00af; border-color: #8c00af; } section.purple table.donateBox { border-color: rgba(76,0,95,0.2); background-color: rgba(76,0,95,0.05); } section.purple table.donateBox th { background-color: rgba(76,0,95,0.1); } 

.navbar {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 50px;
	/* background: red; */
	solid: #000;
	background: #477082;
	z-index: 25000;
}

.mmenu {
	height: 170px;
	width: 1185px;
	margin: 0 auto;
}

.mmenu h3,
.mmenu h3 a {
	clear: both;
	padding-bottom: 0px;
	font-size: 16px;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	font-family:"IBM Plex Sans Thai", 'Cairo', sans-serif;
	/* text-transform: uppercase; */
	font-size: 16px;
	font-weight: 400;
	text-shadow: 1px 1px 2px #000;
	
}

.mmenu ul {
	clear: both;
	/* padding-bottom: 27px; */
	font-size: 16px;
	color: #ffffff;
	font-weight: normal;
	padding-left: 0px;
	text-align: center;
	font-family:"IBM Plex Sans Thai", 'Cairo', sans-serif;
	/* text-transform: uppercase; */
}

.mmenu h1,
.mmenu h1 a,
.mmenu h1 a:hover {
	font-size: 12px;
	color: #666;
	padding: 27px 0 0;
}

.mmenu #category {
	float: left;
	width: 190px;
	padding: 1 0 2px;
	border-right: 1px solid rgba(255, 255, 255, 0);
	margin-right: 5px;
}
.mmenu #category2 {
	float: left;
	width: 340px;
	padding: 1 0 2px;
	border-right: 1px solid rgba(255, 255, 255, 0);
	margin-left: 13px;
}
.mmenu #category3 {
	float: left;
	width: 150px;
	padding: 1 0 2px;
	border-right: 1px solid rgba(255, 255, 255, 0);
	margin-left: 210px;
}

.mmenu #category li {
	padding: 0 0 0px 0px;
	text-align: center;
	list-style: none;
}

.mmenu #category li a {
	font-size: 12px;
	color: #bbb;
	text-align: center;
	font-family:"IBM Plex Sans Thai", 'Raleway', sans-serif;
	font-weight: 400;
	text-shadow: 1px 1px 2px #000;
}

.mmenu #category li a:hover {
	color: #f0562d;
	text-align: center;
	text-shadow: 1px 1px 2px #000;
}

.mmenu #category li span {
	color: #FFA700;
	font-weight: 400;
}

.overlaps {
	width: 100%;
	/*margin-top: 100px;*/
}

.overlaps:hover {
	/*background: rgba(0, 0, 0, 0.58);*/
}
.shadow_font {
	font-family:"IBM Plex Sans Thai", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px; 
	color: #ffffff; 
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
.avatar-login {
width: 105px;
height: 105px;
margin: 0px auto;
border: 5px solid #171532;
border-radius: 999px;   
}


.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}

.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)}
/* กล่องหลักคุมพื้นที่หน้าจอ */
.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: 450px;
  top: -80px; 
  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%;
}