:root{
  --pink:#ff7f9d;--pink2:#ff9db5;--cream:#fff8f2;--line:#f3b7ab;--text:#7b3e3a;
  --purple:#9b69ce;--blue:#7e9fe8;--shadow:0 10px 24px rgba(170,90,100,.16);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Tahoma","Noto Sans Thai",sans-serif;color:var(--text);background:#fffbf9;min-width:320px}.container{width:min(1480px,94%);margin:auto}.page-bg{position:fixed;inset:0;z-index:-3;background-image:url('../img/bg.png');background-repeat:no-repeat;background-position:center center;background-size:100% 100%;background-color:#fff}
.page-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.08));pointer-events:none}.decor{position:fixed;top:80px;bottom:80px;width:190px;z-index:-2;background-repeat:no-repeat;background-size:contain;pointer-events:none}.decor-left{left:0;background-image:url('../img/decorations/side-left.png');background-position:left center}.decor-right{right:0;background-image:url('../img/decorations/side-right.png');background-position:right center}
.panel,.card{background:rgba(255,249,244,.94);border:2px solid rgba(237,167,154,.88);box-shadow:var(--shadow);border-radius:26px}.glass{backdrop-filter:blur(8px)}
.site-header{display:flex;justify-content:space-between;gap:28px;padding-top:36px;position:relative;z-index:3}.top-nav{display:flex;align-items:center;padding:10px 24px;gap:28px;min-height:86px}.nav-item{text-decoration:none;color:#733c38;display:grid;place-items:center;gap:5px;font-size:16px}.nav-item span{font-size:28px;color:#f36b86}.nav-item:hover,.nav-item.active{transform:translateY(-2px);color:#ef6481}.account-actions{display:flex;align-items:center;gap:12px;padding:14px 18px;height:max-content}.btn{padding:13px 24px;border-radius:14px;text-decoration:none;font-weight:700;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 8px rgba(120,70,90,.15)}.btn-pink{background:linear-gradient(#ef6f98,#d85184);color:white}.btn-blue{background:linear-gradient(#b1b6ff,#7f83df);color:white}.btn-soft{background:#fff5ee;color:#e96685}
.hero{height:260px;position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:10px}.logo-wrap{text-align:center;position:relative;z-index:2}.site-logo{width:min(460px,42vw);max-height:210px;object-fit:contain}.logo-fallback{display:none;font-family:Georgia,serif;font-size:72px;line-height:.82;font-weight:900;color:#6fc7ff;text-shadow:3px 3px 0 #fff,6px 6px 0 #b26949}.logo-fallback span{color:#ff8ea7}.asset-hint{font-size:12px;background:rgba(255,255,255,.8);display:inline-block;padding:4px 8px;border-radius:8px;color:#9e7772}.character{position:absolute;bottom:-26px;width:390px;height:300px;background-repeat:no-repeat;background-size:contain;background-position:center bottom;z-index:1}.character-left{left:40px;background-image:url('../img/characters/character-left.png')}.character-right{right:50px;background-image:url('../img/characters/character-right.png')}
.content-grid{display:grid;grid-template-columns:300px 1fr 340px;gap:22px;align-items:start;position:relative;z-index:2}.card{overflow:hidden}.card-title{font-size:23px;font-weight:900;color:#f26582;padding:18px 22px;border-bottom:1px solid #f1c8bd;background:linear-gradient(90deg,#ffd0d0,#fff8f1)}.card-title.row{display:flex;justify-content:space-between;align-items:center}.card-title.row a{font-size:13px;color:#ff6f8f;text-decoration:none}.purple-title{color:#9560c5;background:linear-gradient(90deg,#ffe2e0,#fff8f4)}
.main-menu-card{padding-bottom:18px}.menu-list{display:grid;gap:12px;padding:16px}.menu-btn{display:flex;align-items:center;gap:14px;text-decoration:none;color:#e35d79;padding:12px 16px;background:#fffaf4;border:1px solid #efc3b9;border-radius:16px;box-shadow:0 3px 7px rgba(120,60,60,.08)}.menu-btn:hover{transform:translateX(3px);background:white}.menu-btn .ico{font-size:28px;width:42px;text-align:center}.menu-btn b{display:block;font-size:17px}.menu-btn small{display:block;color:#94665f;margin-top:4px}.menu-btn.facebook .ico{background:#5b78c8;color:white;border-radius:6px;font-weight:900}.menu-btn.facebook b{color:#b449b6}
.news-card{min-height:510px}.news-list{padding:8px 16px 16px}.news-item{display:grid;grid-template-columns:110px 1fr 95px;gap:16px;align-items:center;padding:14px 4px;border-bottom:1px solid #ecd8d1}.thumb{height:72px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#92c3f6,#f2a7bc)}.thumb img{width:100%;height:100%;object-fit:cover}.news-copy h3{margin:4px 0 5px;font-size:17px}.news-copy p{margin:0;font-size:13px;color:#8b5f59}.news-item time{font-size:12px;color:#a26e69;text-align:right}.tag{display:inline-block;padding:3px 8px;border-radius:7px;color:#fff;font-size:11px;font-weight:700}.tag.pink{background:#f26b89}.tag.blue{background:#6c94d8}.tag.green{background:#77b97d}.tag.purple{background:#a578cc}
.side-stack{display:grid;gap:18px}.server-box{padding:22px}.server-head{display:flex;justify-content:space-between;gap:10px}.online{background:#60be65;color:#fff;border-radius:14px;padding:6px 14px;font-weight:700}.server-box p{margin:18px 0 5px;font-weight:700}.online-count{display:flex;align-items:baseline;gap:10px}.online-count strong{font-size:44px;color:#6657b8}.play-btn{width:100%;margin-top:18px;border:0;border-radius:18px;padding:16px;font-size:21px;font-weight:800;color:white;background:linear-gradient(#ff8fab,#ef6f8a);box-shadow:inset 0 2px rgba(255,255,255,.65),0 5px 9px rgba(230,96,120,.25);cursor:pointer}.items-row{display:grid;grid-template-columns:28px repeat(3,1fr) 28px;gap:8px;align-items:center;padding:20px 12px 6px}.item{text-align:center;font-size:12px}.item-img{height:92px;border-radius:8px;background:linear-gradient(145deg,#b6dcff,#ffd2d7);overflow:hidden;border:1px solid #e6b9b3}.item-img img{width:100%;height:100%;object-fit:contain}.arrow{width:28px;height:28px;border:0;border-radius:50%;background:#f06e8e;color:#fff;font-size:25px;line-height:1;cursor:pointer}.dots{text-align:center;padding:0 0 14px}.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f4b9c5;margin:0 3px}.dots i.active{background:#e97692}
.site-footer{margin-top:110px;background:transparent;color:white;border:0;box-shadow:none}.footer-inner{min-height:120px;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;top:36px}.footer-links{display:flex;gap:38px;flex-wrap:wrap}.footer-links a{color:#fff;text-decoration:none}.copyright{text-align:right;line-height:1.5}
@media(max-width:1100px){.content-grid{grid-template-columns:260px 1fr}.side-stack{grid-column:1/-1;grid-template-columns:1fr 1fr}.character{opacity:.75}.character-left{left:-70px}.character-right{right:-70px}.site-header{flex-direction:column}.account-actions{align-self:flex-end;margin-top:-96px}.top-nav{padding-right:360px;gap:18px}.hero{height:220px}}
@media(max-width:780px){.container{width:min(94%,680px)}.site-header{padding-top:14px}.top-nav{padding:8px 10px;gap:6px;overflow-x:auto}.nav-item{min-width:78px;font-size:12px}.nav-item span{font-size:22px}.account-actions{margin:8px 0 0;align-self:stretch;justify-content:center;flex-wrap:wrap}.btn{padding:10px 14px}.hero{height:190px}.character{display:none}.site-logo{width:320px;max-width:85vw}.logo-fallback{font-size:50px}.content-grid{grid-template-columns:1fr}.side-stack{grid-column:auto;grid-template-columns:1fr}.news-item{grid-template-columns:86px 1fr}.news-item time{display:none}.footer-inner{flex-direction:column;align-items:center;padding:24px 0;top:18px}.copyright{text-align:center}.decor{opacity:.35;width:100px}}


/* ===== Footer position hard override ===== */
.site-footer{
    margin-top: 110px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.site-footer .footer-inner{
    min-height: 120px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    top: 0 !important;
    transform: translateY(58px) !important;
}

.site-footer .footer-links,
.site-footer .copyright{
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

@media (max-width: 780px){
    .site-footer .footer-inner{
        transform: translateY(28px) !important;
        align-items: center !important;
    }
    .site-footer .copyright{
        text-align: center !important;
    }
}


/* ===== FINAL FOOTER LOWER ALIGNMENT ===== */
.site-footer{
    margin-top: 110px !important;
    min-height: 155px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-footer .footer-inner{
    min-height: 155px !important;
    height: 155px !important;
    padding: 52px 0 18px 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

.site-footer .footer-links,
.site-footer .copyright{
    margin-top: 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

@media (max-width: 780px){
    .site-footer{
        min-height: 180px !important;
    }
    .site-footer .footer-inner{
        height: auto !important;
        min-height: 180px !important;
        padding: 48px 0 24px 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .site-footer .copyright{
        text-align: center !important;
    }
}


/* ===== FIX: background/footer must scroll together ===== */
html, body{
    min-height: 100%;
}

body{
    position: relative !important;
    min-height: 100vh !important;
}

/* เดิมเป็น fixed ทำให้พื้นหลังค้างอยู่กับจอเวลาหมุนเมาส์ */
.page-bg{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
}

/* footer อยู่กับส่วนล่างของหน้า ไม่ลอยตาม viewport */
.site-footer{
    position: relative !important;
    z-index: 2 !important;
}

.site-footer .footer-inner{
    position: relative !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    min-height: 150px !important;
    padding: 72px 0 18px !important;
    align-items: flex-start !important;
}


/* ===== Footer slight lower adjustment ===== */
.site-footer .footer-inner{
    padding-top: 88px !important;
}


/* ===== Move main content cards slightly lower ===== */
.content-grid{
    margin-top: 42px !important;
}

@media (max-width: 1100px){
    .content-grid{
        margin-top: 34px !important;
    }
}

@media (max-width: 780px){
    .content-grid{
        margin-top: 24px !important;
    }
}


/* ===== FORCE main panels lower ===== */
main.content-grid{
    position: relative !important;
    top: 70px !important;
    margin-top: 0 !important;
}

@media (max-width: 1100px){
    main.content-grid{
        top: 55px !important;
    }
}

@media (max-width: 780px){
    main.content-grid{
        top: 35px !important;
    }
}


/* ===== Move main panels further down ===== */
main.content-grid{
    top: 115px !important;
}

@media (max-width: 1100px){
    main.content-grid{
        top: 90px !important;
    }
}

@media (max-width: 780px){
    main.content-grid{
        top: 55px !important;
    }
}


/* ===== Narrow main content so background is visible on both sides ===== */
.container{
    width: min(1280px, 88%) !important;
}

.content-grid{
    grid-template-columns: 270px minmax(0, 1fr) 310px !important;
    gap: 18px !important;
}

/* ลดขนาดภายในเล็กน้อยให้สมดุล */
.card-title{
    font-size: 21px !important;
    padding: 16px 18px !important;
}

.menu-list{
    padding: 14px !important;
    gap: 10px !important;
}

.menu-btn{
    padding: 10px 13px !important;
}

.menu-btn b{
    font-size: 16px !important;
}

@media (max-width: 1100px){
    .container{
        width: min(94%, 980px) !important;
    }
    .content-grid{
        grid-template-columns: 250px minmax(0, 1fr) !important;
    }
}

@media (max-width: 780px){
    .container{
        width: min(94%, 680px) !important;
    }
    .content-grid{
        grid-template-columns: 1fr !important;
    }
}


/* ===== Move left main menu card lower ===== */
.main-menu-card{
    position: relative !important;
    top: 38px !important;
}

@media (max-width: 1100px){
    .main-menu-card{
        top: 28px !important;
    }
}

@media (max-width: 780px){
    .main-menu-card{
        top: 18px !important;
    }
}


/* ===== Move left main menu card further down ===== */
.main-menu-card{
    top: 78px !important;
}

@media (max-width: 1100px){
    .main-menu-card{
        top: 56px !important;
    }
}

@media (max-width: 780px){
    .main-menu-card{
        top: 34px !important;
    }
}


/* ===== Move news + right status/items cards further down ===== */
.news-card{
    position: relative !important;
    top: 78px !important;
}

.side-stack{
    position: relative !important;
    top: 78px !important;
}

@media (max-width: 1100px){
    .news-card,
    .side-stack{
        top: 56px !important;
    }
}

@media (max-width: 780px){
    .news-card,
    .side-stack{
        top: 34px !important;
    }
}


/* ===== FIX OVERLAP: move panels in normal document flow ===== */
/* ยกเลิกการขยับด้วย top เพราะมันไม่ดัน footer ลง ทำให้กรอบทับกัน */
main.content-grid{
    position: relative !important;
    top: auto !important;
    margin-top: 190px !important;
    margin-bottom: 34px !important;
}

/* ทุกคอลัมน์ให้อยู่ใน flow เดียวกัน */
.main-menu-card,
.news-card,
.side-stack{
    position: relative !important;
    top: auto !important;
    transform: none !important;
}

/* เว้นช่องก่อน footer ให้พอดี */
.site-footer{
    margin-top: 24px !important;
}

@media (max-width: 1100px){
    main.content-grid{
        top: auto !important;
        margin-top: 145px !important;
        margin-bottom: 30px !important;
    }
    .main-menu-card,
    .news-card,
    .side-stack{
        top: auto !important;
    }
}

@media (max-width: 780px){
    main.content-grid{
        top: auto !important;
        margin-top: 90px !important;
        margin-bottom: 24px !important;
    }
    .main-menu-card,
    .news-card,
    .side-stack{
        top: auto !important;
    }
}


/* =========================================================
   REFERENCE FIT — จัดสัดส่วนให้ใกล้ภาพตัวอย่าง
   ========================================================= */

/* ความกว้างรวม: ให้เห็นฉากซ้าย-ขวาเหมือนภาพตัวอย่าง */
.container{
    width: min(1320px, 78vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header เล็กลงและกระชับ */
.site-header{
    padding-top: 14px !important;
    gap: 18px !important;
}

.top-nav{
    min-height: 62px !important;
    padding: 7px 18px !important;
    gap: 18px !important;
}

.nav-item{
    font-size: 13px !important;
    gap: 2px !important;
}

.nav-item span{
    font-size: 22px !important;
}

.account-actions{
    padding: 8px 12px !important;
    gap: 8px !important;
}

.btn{
    padding: 9px 16px !important;
    font-size: 13px !important;
}

/* Hero + logo */
.hero{
    height: 225px !important;
    padding-top: 0 !important;
}

.site-logo{
    width: min(400px, 34vw) !important;
    max-height: 175px !important;
}

.character{
    width: 335px !important;
    height: 255px !important;
    bottom: -18px !important;
}

.character-left{
    left: 18px !important;
}

.character-right{
    right: 18px !important;
}

/* สำคัญ: ยกเลิก margin/top ที่สะสมจากแพตช์ก่อนหน้า */
main.content-grid{
    position: relative !important;
    top: auto !important;
    margin-top: -8px !important;
    margin-bottom: 18px !important;
    transform: none !important;

    grid-template-columns: 245px minmax(0, 1fr) 285px !important;
    gap: 14px !important;
    align-items: start !important;
}

/* ห้ามการ์ดแต่ละฝั่งขยับแยกกัน */
.main-menu-card,
.news-card,
.side-stack{
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    transform: none !important;
}

/* ลดขนาดกรอบและรายละเอียดให้ใกล้ reference */
.panel,
.card{
    border-radius: 20px !important;
}

.card-title{
    font-size: 18px !important;
    padding: 12px 15px !important;
}

.card-title.row a{
    font-size: 11px !important;
}

.main-menu-card{
    padding-bottom: 10px !important;
}

.menu-list{
    gap: 8px !important;
    padding: 11px !important;
}

.menu-btn{
    gap: 9px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

.menu-btn .ico{
    width: 32px !important;
    font-size: 22px !important;
}

.menu-btn b{
    font-size: 14px !important;
}

.menu-btn small{
    font-size: 11px !important;
    margin-top: 2px !important;
}

/* ข่าว */
.news-card{
    min-height: 430px !important;
}

.news-list{
    padding: 5px 12px 10px !important;
}

.news-item{
    grid-template-columns: 92px minmax(0, 1fr) 78px !important;
    gap: 11px !important;
    padding: 10px 3px !important;
}

.thumb{
    height: 58px !important;
}

.news-copy h3{
    font-size: 14px !important;
    margin: 3px 0 !important;
}

.news-copy p{
    font-size: 11px !important;
}

.news-item time{
    font-size: 10px !important;
}

.tag{
    font-size: 9px !important;
    padding: 2px 6px !important;
}

/* ฝั่งสถานะเซิร์ฟเวอร์ */
.side-stack{
    gap: 12px !important;
}

.server-box{
    padding: 15px !important;
}

.server-box p{
    margin: 12px 0 4px !important;
    font-size: 13px !important;
}

.online{
    padding: 5px 10px !important;
    font-size: 12px !important;
}

.online-count strong{
    font-size: 36px !important;
}

.play-btn{
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
}

.items-row{
    grid-template-columns: 24px repeat(3,1fr) 24px !important;
    gap: 5px !important;
    padding: 14px 8px 4px !important;
}

.item{
    font-size: 10px !important;
}

.item-img{
    height: 72px !important;
}

.arrow{
    width: 24px !important;
    height: 24px !important;
    font-size: 20px !important;
}

.dots{
    padding-bottom: 9px !important;
}

/* Footer: อยู่ต่อจาก content ตาม flow ปกติ ไม่ทับกัน */
.site-footer{
    position: relative !important;
    margin-top: 8px !important;
    min-height: 72px !important;
    background: transparent !important;
}

.site-footer .footer-inner{
    min-height: 72px !important;
    height: 72px !important;
    padding: 20px 0 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    align-items: flex-start !important;
}

.footer-links{
    gap: 24px !important;
    font-size: 12px !important;
}

.copyright{
    font-size: 12px !important;
}

/* พื้นหลังรักษาสัดส่วน ไม่ยืดตามความสูงของหน้า */
.page-bg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* จอขนาดกลาง */
@media (max-width: 1400px){
    .container{
        width: min(1180px, 84vw) !important;
    }

    main.content-grid{
        grid-template-columns: 225px minmax(0,1fr) 265px !important;
        gap: 12px !important;
    }

    .hero{
        height: 205px !important;
    }
}

/* Tablet */
@media (max-width: 1100px){
    .container{
        width: 92% !important;
    }

    main.content-grid{
        margin-top: 0 !important;
        grid-template-columns: 240px minmax(0,1fr) !important;
        gap: 14px !important;
    }

    .side-stack{
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Mobile */
@media (max-width: 780px){
    .container{
        width: 94% !important;
    }

    main.content-grid{
        grid-template-columns: 1fr !important;
        margin-top: 0 !important;
    }

    .side-stack{
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
    }

    .site-footer .footer-inner{
        height: auto !important;
        min-height: 120px !important;
        padding: 24px 0 !important;
    }
}


/* ===== RESTORE PINK FOOTER STRIP ===== */
.site-footer{
    margin-top: 8px !important;
    min-height: 92px !important;
    background:
        radial-gradient(circle at 12% 58%, rgba(255,255,255,.45) 0 3px, transparent 4px),
        radial-gradient(circle at 49% 55%, rgba(255,255,255,.38) 0 3px, transparent 4px),
        radial-gradient(circle at 84% 62%, rgba(255,255,255,.42) 0 4px, transparent 5px),
        linear-gradient(90deg,#f39aa5 0%,#f4a4ad 45%,#ef95a2 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}

/* ขอบหยักสีชมพูด้านบน ให้คล้ายภาพตัวอย่าง */
.site-footer::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-12px;
    height:14px;
    background:
      linear-gradient(135deg, transparent 9px, #f39aa5 0) 0 0/20px 14px repeat-x,
      linear-gradient(225deg, transparent 9px, #f39aa5 0) 10px 0/20px 14px repeat-x;
    pointer-events:none;
}

.site-footer .footer-inner{
    min-height: 92px !important;
    height: 92px !important;
    padding: 26px 0 0 !important;
    position: relative !important;
    z-index: 1 !important;
    align-items: flex-start !important;
}

/* ให้ตัวหนังสืออ่านชัดบนพื้นชมพู */
.site-footer .footer-links a,
.site-footer .copyright{
    color:#fff !important;
    text-shadow:0 1px 2px rgba(150,70,80,.22) !important;
}


/* ===== REMOVE CSS PINK FOOTER — use pink from background image only ===== */
.site-footer{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-footer::before{
    display: none !important;
    content: none !important;
    background: none !important;
}

.site-footer .footer-inner{
    background: transparent !important;
}

/* keep footer text visible over the pink already inside bg.png */
.site-footer .footer-links a,
.site-footer .copyright{
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(120,60,70,.28) !important;
}


/* ===== SHOW THE PINK STRIP THAT IS ALREADY INSIDE bg.png ===== */
/* ให้พื้นหลังยืดตามความสูงของหน้า เพื่อให้ส่วนสีชมพูท้ายภาพมาอยู่ตรง Footer */
.page-bg{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-image: url('../img/bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
}

/* Footer โปร่งใส เพื่อเห็นสีชมพูจากรูป bg.png จริง ๆ */
.site-footer,
.site-footer .footer-inner{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-footer::before{
    display: none !important;
    content: none !important;
}


/* ===== Move footer text slightly lower and center better in pink strip ===== */
.site-footer{
    min-height: 96px !important;
}

.site-footer .footer-inner{
    min-height: 96px !important;
    height: 96px !important;
    padding: 30px 0 0 !important;
    align-items: flex-start !important;
}

.site-footer .footer-links,
.site-footer .copyright{
    position: relative !important;
    top: 8px !important;
}


/* ===== Move footer text further down ===== */
.site-footer .footer-inner{
    min-height: 110px !important;
    height: 110px !important;
    padding-top: 42px !important;
}

.site-footer .footer-links,
.site-footer .copyright{
    top: 18px !important;
}


/* =========================================================
   TOP NAV — ใช้รูปปุ่มที่ผู้ใช้ตัดเองใน img/menu/
   home.png, news.png, download.png, guide.png, shop.png, community.png
   ========================================================= */
.top-nav.top-nav-images{
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:0 !important;
    min-height:0 !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    overflow:visible !important;
}

.top-nav-images .nav-image-link{
    display:block !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    text-decoration:none !important;
    border:0 !important;
    background:transparent !important;
    transform:none !important;
    transition:transform .16s ease, filter .16s ease !important;
}

.top-nav-images .nav-image-link img{
    display:block !important;
    width:auto !important;
    height:64px !important;
    max-width:none !important;
    object-fit:contain !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    pointer-events:none !important;
}

.top-nav-images .nav-image-link:hover{
    transform:translateY(-2px) !important;
    filter:brightness(1.04) !important;
}

/* ลบ style ของเมนูตัวอักษรเดิม */
.top-nav-images .nav-item,
.top-nav-images .nav-item span,
.top-nav-images .nav-item b{
    display:none !important;
}

@media (max-width:1100px){
    .top-nav.top-nav-images{
        padding-right:0 !important;
        gap:0 !important;
        overflow-x:auto !important;
        scrollbar-width:none;
    }
    .top-nav.top-nav-images::-webkit-scrollbar{
        display:none;
    }
    .top-nav-images .nav-image-link img{
        height:58px !important;
    }
}

@media (max-width:780px){
    .top-nav.top-nav-images{
        padding:0 !important;
        gap:0 !important;
        overflow-x:auto !important;
    }
    .top-nav-images .nav-image-link{
        min-width:0 !important;
    }
    .top-nav-images .nav-image-link img{
        height:52px !important;
    }
}


/* =========================================================
   TOP MENU FIT — ขยายปุ่มและจัดแนว PNG ให้ตรง/พอดี
   ========================================================= */
.site-header{
    align-items:flex-start !important;
}

.top-nav.top-nav-images{
    width:auto !important;
    height:82px !important;
    min-height:82px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    line-height:0 !important;
}

/* ให้ทุกชิ้นอยู่ baseline เดียวกัน */
.top-nav-images .nav-image-link{
    height:82px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin:0 -1px 0 0 !important;
    padding:0 !important;
    line-height:0 !important;
    vertical-align:top !important;
    overflow:visible !important;
}

/* ขยายจาก 64px -> 82px และห้าม browser บีบ/ยืดผิดสัดส่วน */
.top-nav-images .nav-image-link img{
    display:block !important;
    width:auto !important;
    height:82px !important;
    max-height:82px !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
}

/* ปุ่ม account ด้านขวาให้ระดับใกล้กับเมนูซ้าย */
.account-actions{
    min-height:82px !important;
    display:flex !important;
    align-items:center !important;
    margin-top:0 !important;
}

/* ลด hover ไม่ให้ปุ่มกระโดดจนดูเบี้ยว */
.top-nav-images .nav-image-link:hover{
    transform:none !important;
    filter:brightness(1.05) drop-shadow(0 2px 3px rgba(140,75,90,.12)) !important;
}

/* จอ desktop ใหญ่ — ขยายเพิ่มเล็กน้อย */
@media (min-width:1400px){
    .top-nav.top-nav-images,
    .top-nav-images .nav-image-link{
        height:88px !important;
        min-height:88px !important;
    }

    .top-nav-images .nav-image-link img{
        height:88px !important;
        max-height:88px !important;
    }

    .account-actions{
        min-height:88px !important;
    }
}

/* Tablet */
@media (max-width:1100px){
    .top-nav.top-nav-images,
    .top-nav-images .nav-image-link{
        height:70px !important;
        min-height:70px !important;
    }

    .top-nav-images .nav-image-link img{
        height:70px !important;
        max-height:70px !important;
    }

    .account-actions{
        min-height:70px !important;
    }
}

/* Mobile */
@media (max-width:780px){
    .top-nav.top-nav-images,
    .top-nav-images .nav-image-link{
        height:60px !important;
        min-height:60px !important;
    }

    .top-nav-images .nav-image-link img{
        height:60px !important;
        max-height:60px !important;
    }
}


/* =========================================================
   ACCOUNT BUTTONS — ใช้ PNG ที่ผู้ใช้ตัดเองใน img/account/
   login.png, register.png, topup.png
   ========================================================= */
.account-actions.account-image-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    min-height:0 !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    overflow:visible !important;
}

.account-image-actions .account-image-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin:0 -1px 0 0 !important;
    padding:0 !important;
    line-height:0 !important;
    text-decoration:none !important;
    background:transparent !important;
    border:0 !important;
    transform:none !important;
    transition:filter .16s ease !important;
}

.account-image-actions .account-image-link img{
    display:block !important;
    width:auto !important;
    height:72px !important;
    max-height:72px !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    pointer-events:none !important;
}

.account-image-actions .account-image-link:hover{
    transform:none !important;
    filter:brightness(1.05) drop-shadow(0 2px 3px rgba(140,75,90,.12)) !important;
}

/* ลบ style ปุ่มตัวอักษรเดิมภายใน account actions */
.account-image-actions .btn{
    display:none !important;
}

@media (min-width:1400px){
    .account-image-actions .account-image-link img{
        height:78px !important;
        max-height:78px !important;
    }
}

@media (max-width:1100px){
    .account-actions.account-image-actions{
        align-self:flex-end !important;
        margin-top:0 !important;
    }
    .account-image-actions .account-image-link img{
        height:64px !important;
        max-height:64px !important;
    }
}

@media (max-width:780px){
    .account-actions.account-image-actions{
        width:100% !important;
        justify-content:center !important;
        overflow-x:auto !important;
    }
    .account-image-actions .account-image-link img{
        height:56px !important;
        max-height:56px !important;
    }
}


/* ===== ACCOUNT BUTTONS BIGGER ===== */
.account-image-actions .account-image-link img{
    height:82px !important;
    max-height:82px !important;
}

@media (min-width:1400px){
    .account-image-actions .account-image-link img{
        height:88px !important;
        max-height:88px !important;
    }
}

@media (max-width:1100px){
    .account-image-actions .account-image-link img{
        height:72px !important;
        max-height:72px !important;
    }
}

@media (max-width:780px){
    .account-image-actions .account-image-link img{
        height:62px !important;
        max-height:62px !important;
    }
}


/* =========================================================
   LEFT MENU IMAGE BUTTONS
   ใช้รูปของผู้ใช้โดยตรง และคงขนาด/ตำแหน่งเดิมของกรอบไว้
   ========================================================= */
.main-menu-card{
    display:block !important;
    padding-bottom:10px !important;
    overflow:hidden !important;
}

.main-menu-card > .card-title,
.main-menu-card > .menu-list{
    display:none !important;
}

.left-menu-image-list{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:11px !important;
    width:100% !important;
}

.left-menu-image-btn{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    text-decoration:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
}

.left-menu-image-btn img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    border:0 !important;
    pointer-events:none !important;
}

/* ไม่ขยับ ไม่ขยายปุ่มเวลา hover */
.left-menu-image-btn:hover{
    transform:none !important;
    filter:brightness(1.035) !important;
}


/* ===== LEFT MENU BUTTONS: bigger + tighter to fill the background frame ===== */
.main-menu-card{
    padding-bottom: 6px !important;
}

.left-menu-image-list{
    gap: 4px !important;
    padding: 8px 8px 10px !important;
}

.left-menu-image-btn{
    width: 100% !important;
}

.left-menu-image-btn img{
    width: 100% !important;
    max-width: 100% !important;
}


/* ===== LEFT MENU: fill inner frame properly ===== */
/* ลดช่องว่างรอบชุดปุ่มให้เหลือน้อยที่สุด */
.main-menu-card{
    padding-bottom: 3px !important;
}

.left-menu-image-list{
    gap: 1px !important;
    padding: 4px 4px 5px !important;
}

/* ขยายรูปปุ่มให้กินพื้นที่กรอบด้านในเกือบเต็ม */
.left-menu-image-btn{
    width: calc(100% + 10px) !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
}

.left-menu-image-btn img{
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
}

/* กันช่องว่างจาก baseline / line-height */
.left-menu-image-list,
.left-menu-image-btn{
    line-height: 0 !important;
}


/* ===== LEFT MENU: remove white inner panel and stack buttons touching ===== */
.main-menu-card{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.left-menu-image-list{
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* ให้ปุ่มชนกันเต็มกรอบ */
.left-menu-image-btn{
    display: block !important;
    width: calc(100% + 18px) !important;
    margin: 0 0 0 -9px !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.left-menu-image-btn + .left-menu-image-btn{
    margin-top: -2px !important;
}

.left-menu-image-btn img{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ===== REMOVE OUTER FRAME BEHIND LEFT MENU BUTTONS ===== */
.main-menu-card{
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* ปุ่มให้ชนกันทั้งหมด */
.left-menu-image-list{
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.left-menu-image-btn{
    margin: 0 !important;
    padding: 0 !important;
}

.left-menu-image-btn + .left-menu-image-btn{
    margin-top: -3px !important;
}


/* ===== LEFT MENU BUTTONS BIGGER ===== */
.left-menu-image-list{
    width: 112% !important;
    margin-left: -6% !important;
}

.left-menu-image-btn{
    width: 100% !important;
}

.left-menu-image-btn img{
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}


/* ===== LEFT MENU BIGGER + MOVE DOWN ===== */
.left-menu-image-list{
    position: relative !important;
    top: 32px !important;
}

@media (max-width:1100px){
    .left-menu-image-list{
        top: 24px !important;
    }
}

@media (max-width:780px){
    .left-menu-image-list{
        top: 16px !important;
    }
}


/* ===== MOVE LEFT MENU BUTTONS A BIT TO THE RIGHT ===== */
.left-menu-image-list{
    left: 12px !important;
}

@media (max-width:1100px){
    .left-menu-image-list{
        left: 8px !important;
    }
}

@media (max-width:780px){
    .left-menu-image-list{
        left: 4px !important;
    }
}


/* =========================================================
   NEWS FRAME IMAGE
   ใช้กรอบ img/news/news-frame.png เป็นพื้นหลังของข่าว
   ข้อความ/รูปข่าวเดิมยังอยู่ด้านบนและกดได้ตามเดิม
   ========================================================= */
.news-card{
    background: url('../img/news/news-frame.png') center center / 100% 100% no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* ให้หัวข้อเดิมวางทับบนหัวกรอบรูป โดยไม่สร้างกรอบ CSS ซ้ำ */
.news-card > .card-title{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* เส้นแบ่งอยู่ในรูปกรอบแล้ว จึงไม่ให้ CSS วาดเส้นซ้ำ */
.news-card .news-item{
    border-bottom: 0 !important;
}

/* เว้นด้านล่างให้ลายรั้ว/ตัวการ์ตูนในรูปกรอบไม่โดนข้อความทับ */
.news-card .news-list{
    padding-bottom: 48px !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        padding-bottom: 42px !important;
    }
}

@media (max-width:780px){
    .news-card{
        background-size: 100% 100% !important;
    }

    .news-card .news-list{
        padding-bottom: 36px !important;
    }
}


/* ===== CLEAN NEWS FRAME (no bottom mascots/fence) ===== */
.news-card{
    background: url('../img/news/news-frame.png') center top / 100% 100% no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

.news-card > .card-title{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 16px 22px 14px !important;
}

.news-card .news-list{
    padding: 6px 18px 18px !important;
}

.news-card .news-item{
    border-bottom: 0 !important;
    padding: 14px 6px !important;
}

.news-card .news-item:last-child{
    border-bottom: 0 !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        padding: 6px 16px 16px !important;
    }
}


/* ===== NEWS FRAME BIGGER ===== */
.news-card{
    width: 106% !important;
    margin-left: -3% !important;
    min-height: 465px !important;
    background-size: 100% 100% !important;
    background-position: center top !important;
}

/* ให้เนื้อหาข้างในยังอยู่เป็นสัดส่วนเดิม */
.news-card > .card-title,
.news-card .news-list{
    width: 100% !important;
}

@media (max-width: 1100px){
    .news-card{
        width: 103% !important;
        margin-left: -1.5% !important;
        min-height: 450px !important;
    }
}

@media (max-width: 780px){
    .news-card{
        width: 100% !important;
        margin-left: 0 !important;
        min-height: auto !important;
    }
}


/* ===== NEWS DATES: keep away from right border ===== */
.news-card .news-item{
    padding-right: 18px !important;
}

.news-card .news-item time{
    padding-right: 8px !important;
    margin-right: 0 !important;
    text-align: right !important;
}

/* เผื่อกรอบใหญ่ขึ้น ให้คอลัมน์วันที่มีพื้นที่มากขึ้นเล็กน้อย */
.news-card .news-item{
    grid-template-columns: 92px minmax(0, 1fr) 92px !important;
}

@media (max-width:1100px){
    .news-card .news-item{
        padding-right: 14px !important;
        grid-template-columns: 86px minmax(0, 1fr) 86px !important;
    }
}

@media (max-width:780px){
    .news-card .news-item{
        padding-right: 8px !important;
    }
}


/* ===== NEWS THUMBNAILS: keep image boxes away from frame border ===== */
.news-card .news-list{
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.news-card .news-item{
    padding-left: 8px !important;
    padding-right: 18px !important;
}

.news-card .thumb{
    margin-left: 4px !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .news-card .news-item{
        padding-left: 6px !important;
        padding-right: 14px !important;
    }
}

@media (max-width:780px){
    .news-card .news-list{
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .news-card .news-item{
        padding-left: 4px !important;
        padding-right: 8px !important;
    }

    .news-card .thumb{
        margin-left: 0 !important;
    }
}


/* ===== MOVE NEWS PANEL SLIGHTLY TO THE RIGHT ===== */
.news-card{
    position: relative !important;
    left: 16px !important;
}

@media (max-width:1100px){
    .news-card{
        left: 10px !important;
    }
}

@media (max-width:780px){
    .news-card{
        left: 0 !important;
    }
}


/* ===== NUDGE NEWS PANEL BACK LEFT A LITTLE ===== */
.news-card{
    left: 9px !important;
}

@media (max-width:1100px){
    .news-card{
        left: 6px !important;
    }
}

@media (max-width:780px){
    .news-card{
        left: 0 !important;
    }
}


/* ===== NUDGE NEWS PANEL A LITTLE MORE LEFT ===== */
.news-card{
    left: 5px !important;
}

@media (max-width:1100px){
    .news-card{
        left: 3px !important;
    }
}

@media (max-width:780px){
    .news-card{
        left: 0 !important;
    }
}


/* =========================================================
   SERVER FRAME IMAGE
   ใช้รูป img/server/server-frame.png ที่ผู้ใช้ทำเอง
   ========================================================= */

.server-frame-card{
    position:relative !important;
    min-height:300px !important;
    background:url('../img/server/server-frame.png') center top / 100% 100% no-repeat !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
}

/* หัวข้อและป้ายออนไลน์มีอยู่ในรูปแล้ว จึงซ่อนของ HTML เดิม */
.server-frame-card > .card-title{
    display:none !important;
}

.server-frame-card .online{
    display:none !important;
}

/* จัดข้อมูลจริงให้อยู่ในพื้นที่ว่างของกรอบรูป */
.server-frame-card .server-box{
    position:relative !important;
    min-height:300px !important;
    padding:88px 24px 20px !important;
    background:transparent !important;
}

.server-frame-card .server-head{
    display:block !important;
    width:62% !important;
    padding:0 !important;
    margin:0 0 12px 0 !important;
}

.server-frame-card .server-head b{
    display:block !important;
    font-size:14px !important;
    line-height:1.35 !important;
}

/* ผู้เล่นออนไลน์ */
.server-frame-card .server-box > p{
    width:62% !important;
    margin:10px 0 2px !important;
    font-size:13px !important;
}

.server-frame-card .online-count{
    width:62% !important;
    margin:0 !important;
    gap:7px !important;
}

.server-frame-card .online-count strong{
    font-size:34px !important;
}

/* ปุ่มเข้าสู่เกมเอาออก ตามกรอบใหม่ */
.server-frame-card .play-btn{
    display:none !important;
}

@media (max-width:1100px){
    .server-frame-card{
        min-height:285px !important;
    }

    .server-frame-card .server-box{
        min-height:285px !important;
        padding:82px 20px 18px !important;
    }
}

@media (max-width:780px){
    .server-frame-card{
        min-height:300px !important;
        max-width:320px !important;
        margin:0 auto !important;
    }

    .server-frame-card .server-box{
        min-height:300px !important;
        padding:88px 24px 18px !important;
    }
}


/* =========================================================
   SERVER STATUS BADGE IMAGE
   ใช้รูป img/server/status-offline.png
   วางไว้เหนือหัวสไลม์สีชมพูในกรอบ server-frame
   ========================================================= */
.server-frame-card .server-box{
    position: relative !important;
}

/* ซ่อนข้อความสถานะเดิมทั้งหมด เพราะจะใช้รูปแทน */
.server-frame-card .online,
.server-frame-card .status-text,
.server-frame-card .server-status{
    display: none !important;
}

/* ป้ายออฟไลน์เป็นรูปภาพ */
.server-frame-card .server-box::after{
    content: "" !important;
    position: absolute !important;
    right: 24px !important;
    top: 96px !important;
    width: 84px !important;
    height: 42px !important;
    background: url('../img/server/status-offline.png') center / contain no-repeat !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

@media (max-width:1100px){
    .server-frame-card .server-box::after{
        right: 22px !important;
        top: 92px !important;
        width: 78px !important;
        height: 39px !important;
    }
}

@media (max-width:780px){
    .server-frame-card .server-box::after{
        right: 26px !important;
        top: 96px !important;
        width: 82px !important;
        height: 41px !important;
    }
}


/* =========================================================
   SERVER TEXT LAYOUT — pretty arrangement
   ========================================================= */
.server-frame-card .server-box{
    position: relative !important;
    min-height: 300px !important;
    padding: 86px 24px 18px !important;
    background: transparent !important;
}

.server-frame-card .server-info-wrap{
    width: 62% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.server-frame-card .server-label{
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #8a5b59 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.server-frame-card .server-name{
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #7b4b49 !important;
    line-height: 1.15 !important;
    margin: 0 0 10px 0 !important;
    text-wrap: balance !important;
}

.server-frame-card .players-label{
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #8a5b59 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.server-frame-card .online-count{
    width: auto !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
}

.server-frame-card .online-count strong{
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #6a57d4 !important;
    letter-spacing: -0.5px !important;
}

.server-frame-card .online-count span{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #7b4b49 !important;
    line-height: 1 !important;
}

/* ซ่อนข้อความสถานะเดิม/องค์ประกอบเดิมที่ไม่ใช้ */
.server-frame-card .card-title{
    display: none !important;
}
.server-frame-card .online,
.server-frame-card .status-text,
.server-frame-card .server-status,
.server-frame-card .server-head,
.server-frame-card .server-box > p{
    display: none !important;
}

/* ปุ่มเข้าเกมยังซ่อนอยู่ */
.server-frame-card .play-btn{
    display: none !important;
}

@media (max-width:1100px){
    .server-frame-card .server-box{
        min-height: 285px !important;
        padding: 82px 22px 18px !important;
    }

    .server-frame-card .server-info-wrap{
        width: 64% !important;
    }

    .server-frame-card .server-name{
        font-size: 17px !important;
    }

    .server-frame-card .online-count strong{
        font-size: 36px !important;
    }
}

@media (max-width:780px){
    .server-frame-card .server-box{
        min-height: 300px !important;
        padding: 88px 24px 18px !important;
    }

    .server-frame-card .server-info-wrap{
        width: 62% !important;
    }

    .server-frame-card .server-name{
        font-size: 18px !important;
    }
}


/* =========================================================
   ITEM FRAME IMAGE
   ใช้รูป img/items/item-frame.png ที่ผู้ใช้ตัดเอง
   ========================================================= */
.item-frame-card{
    position:relative !important;
    min-height:235px !important;
    background:url('../img/items/item-frame.png') center top / 100% 100% no-repeat !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
}

/* หัวข้อ "ไอเทมแนะนำ" อยู่ในรูปแล้ว จึงซ่อนหัวข้อ HTML เดิม */
.item-frame-card > .card-title{
    display:none !important;
}

/* จัดรายการไอเทมให้อยู่ในพื้นที่ว่างของกรอบ */
.item-frame-card .items-row{
    min-height:205px !important;
    padding:72px 14px 12px !important;
    grid-template-columns:26px repeat(3,1fr) 26px !important;
    gap:7px !important;
    align-items:center !important;
}

/* ขนาดช่องไอเทมให้เข้ากับกรอบใหม่ */
.item-frame-card .item-img{
    height:78px !important;
    border-radius:10px !important;
}

.item-frame-card .item{
    font-size:10px !important;
}

/* ปรับลูกศรให้เล็กและอยู่กลาง */
.item-frame-card .arrow{
    width:26px !important;
    height:26px !important;
    font-size:20px !important;
}

/* จุดสไลด์อยู่ใกล้ด้านล่าง */
.item-frame-card .dots{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:10px !important;
    padding:0 !important;
    text-align:center !important;
}

@media (max-width:1100px){
    .item-frame-card{
        min-height:225px !important;
    }

    .item-frame-card .items-row{
        min-height:195px !important;
        padding:68px 12px 10px !important;
    }

    .item-frame-card .item-img{
        height:72px !important;
    }
}

@media (max-width:780px){
    .item-frame-card{
        max-width:320px !important;
        min-height:235px !important;
        margin:0 auto !important;
    }

    .item-frame-card .items-row{
        min-height:205px !important;
        padding:72px 14px 12px !important;
    }
}


/* =========================================================
   FORCE ITEM FRAME TO SHOW
   ใช้ <img> จริงแทน background-image เพื่อกัน CSS เดิมทับ
   ========================================================= */
.item-frame-card{
    position:relative !important;
    min-height:235px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
}

.item-frame-card .item-frame-bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:fill !important;
    display:block !important;
    z-index:0 !important;
    pointer-events:none !important;
}

/* เนื้อหาให้อยู่เหนือรูปกรอบ */
.item-frame-card .items-row,
.item-frame-card .dots{
    position:relative !important;
    z-index:2 !important;
}

.item-frame-card > .card-title{
    display:none !important;
}

.item-frame-card .items-row{
    min-height:205px !important;
    padding:72px 14px 12px !important;
    grid-template-columns:26px repeat(3,1fr) 26px !important;
    gap:7px !important;
    align-items:center !important;
}

.item-frame-card .item-img{
    height:78px !important;
}

.item-frame-card .dots{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:10px !important;
    text-align:center !important;
}

@media (max-width:1100px){
    .item-frame-card{
        min-height:225px !important;
    }
    .item-frame-card .items-row{
        min-height:195px !important;
        padding:68px 12px 10px !important;
    }
}

@media (max-width:780px){
    .item-frame-card{
        max-width:320px !important;
        min-height:235px !important;
        margin:0 auto !important;
    }
}


/* ===== FINAL ITEM FRAME FIX ===== */
.item-frame-card{
    position: relative !important;
    min-height: 235px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.item-frame-card .item-frame-bg{
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.item-frame-card .items-row,
.item-frame-card .dots{
    z-index: 2 !important;
}

.item-frame-card .items-row{
    position: relative !important;
    min-height: 205px !important;
    padding: 72px 14px 12px !important;
}

.item-frame-card .dots{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 10px !important;
}


/* =========================================================
   ITEM FRAME FIT FIX
   ทำให้ช่องไอเทมพอดีกับกรอบ item-frame
   ========================================================= */
.item-frame-card{
    min-height: 228px !important;
}

.item-frame-card .item-frame-bg{
    object-fit: fill !important;
}

.item-frame-card .items-row{
    position: relative !important;
    min-height: 188px !important;
    padding: 58px 12px 26px !important;
    grid-template-columns: 22px repeat(3, 1fr) 22px !important;
    gap: 6px !important;
    align-items: start !important;
}

.item-frame-card .item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    color: #7c5a57 !important;
}

.item-frame-card .item-img{
    width: 100% !important;
    height: 66px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.item-frame-card .item img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.item-frame-card .item span{
    display: block !important;
    width: 100% !important;
    max-width: 72px !important;
    min-height: 24px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    color: #7a5856 !important;
}

.item-frame-card .arrow{
    width: 22px !important;
    height: 22px !important;
    font-size: 18px !important;
    align-self: center !important;
    margin-top: 20px !important;
}

.item-frame-card .dots{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    text-align: center !important;
    z-index: 3 !important;
}

.item-frame-card .dots i{
    width: 7px !important;
    height: 7px !important;
    margin: 0 3px !important;
}

@media (max-width:1100px){
    .item-frame-card{
        min-height: 220px !important;
    }

    .item-frame-card .items-row{
        min-height: 180px !important;
        padding: 56px 10px 24px !important;
        grid-template-columns: 20px repeat(3, 1fr) 20px !important;
        gap: 5px !important;
    }

    .item-frame-card .item-img{
        height: 62px !important;
    }

    .item-frame-card .item span{
        max-width: 66px !important;
        font-size: 9.5px !important;
    }
}

@media (max-width:780px){
    .item-frame-card{
        max-width: 320px !important;
        min-height: 228px !important;
    }

    .item-frame-card .items-row{
        min-height: 188px !important;
        padding: 58px 12px 26px !important;
    }

    .item-frame-card .item-img{
        height: 66px !important;
    }

    .item-frame-card .item span{
        max-width: 72px !important;
        font-size: 10px !important;
    }
}


/* =========================================================
   MOVE ITEM DOTS UP INTO THE FRAME
   ========================================================= */
.item-frame-card .dots{
    bottom: 24px !important;
}

@media (max-width:1100px){
    .item-frame-card .dots{
        bottom: 22px !important;
    }
}

@media (max-width:780px){
    .item-frame-card .dots{
        bottom: 24px !important;
    }
}


/* ===== FORCE DOTS INSIDE ITEM FRAME ===== */
.item-frame-card{
    position: relative !important;
}

.item-frame-card > .dots{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 40px !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    z-index: 20 !important;
}

@media (max-width:1100px){
    .item-frame-card > .dots{
        bottom: 36px !important;
    }
}

@media (max-width:780px){
    .item-frame-card > .dots{
        bottom: 40px !important;
    }
}


/* =========================================================
   FINAL FIX — DOTS MUST STAY INSIDE ITEM FRAME
   ใช้ top ตายตัว ไม่ใช้ bottom เพื่อกัน CSS เก่าทับกัน
   ========================================================= */
.item-frame-card{
    position: relative !important;
    overflow: visible !important;
}

.item-frame-card > .dots{
    position: absolute !important;
    top: 168px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    line-height: 10px !important;
    text-align: center !important;
    z-index: 50 !important;
}

.item-frame-card > .dots i{
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 3px !important;
    vertical-align: top !important;
}

@media (max-width:1100px){
    .item-frame-card > .dots{
        top: 162px !important;
    }
}

@media (max-width:780px){
    .item-frame-card > .dots{
        top: 168px !important;
    }
}


/* ===== MOVE ITEM DOTS UP AGAIN ===== */
.item-frame-card > .dots{
    top: 150px !important;
}

@media (max-width:1100px){
    .item-frame-card > .dots{
        top: 146px !important;
    }
}

@media (max-width:780px){
    .item-frame-card > .dots{
        top: 150px !important;
    }
}


/* ===== MOVE ITEM ARROWS UP A LITTLE ===== */
.item-frame-card .arrow{
    position: relative !important;
    top: -8px !important;
    margin-top: 0 !important;
}

@media (max-width:1100px){
    .item-frame-card .arrow{
        top: -6px !important;
    }
}

@media (max-width:780px){
    .item-frame-card .arrow{
        top: -8px !important;
    }
}


/* =========================================================
   ITEM SLIDER JS
   ========================================================= */
.item-frame-card .item{
    will-change: transform, opacity;
}

.item-frame-card .arrow,
.item-frame-card .dots i{
    cursor: pointer !important;
    user-select: none !important;
}

.item-frame-card .arrow:active{
    transform: scale(.92) !important;
}


/* =========================================================
   CLICKABLE NEWS LIST
   ซ่อนหัวข้อ/ดูทั้งหมด และให้ทั้งแถวข่าวกดได้
   ========================================================= */
.news-card > .card-title{
    display:none !important;
}

.news-card .news-list{
    padding-top:18px !important;
}

.news-card .news-clickable{
    position:relative !important;
    cursor:pointer !important;
    border-radius:14px !important;
    transition:
        transform .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.news-card .news-clickable::after{
    content:"›" !important;
    position:absolute !important;
    right:7px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    font-size:24px !important;
    font-weight:900 !important;
    color:rgba(231,105,136,.35) !important;
    opacity:0 !important;
    transition:opacity .18s ease, right .18s ease !important;
    pointer-events:none !important;
}

.news-card .news-clickable:hover{
    transform:translateY(-2px) !important;
    background:rgba(255,255,255,.45) !important;
    box-shadow:0 6px 16px rgba(180,105,115,.12) !important;
    filter:brightness(1.015) !important;
}

.news-card .news-clickable:hover::after{
    opacity:1 !important;
    right:3px !important;
}

.news-card .news-clickable:active{
    transform:translateY(0) scale(.992) !important;
}

.news-card .news-clickable:focus-visible{
    outline:2px solid rgba(239,111,138,.7) !important;
    outline-offset:2px !important;
}

/* ป้องกันลูกศร hover ชนวันที่ */
.news-card .news-clickable time{
    padding-right:16px !important;
}


/* =========================================================
   MOVE ALL NEWS CONTENT DOWN INSIDE THE FRAME
   ========================================================= */
.news-card .news-list{
    position: relative !important;
    top: 18px !important;
}

/* คงระยะของแต่ละข่าวให้เท่ากันหลังขยับลง */
.news-card .news-item{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        top: 14px !important;
    }
}

@media (max-width:780px){
    .news-card .news-list{
        top: 10px !important;
    }
}


/* ===== MOVE NEWS CONTENT DOWN MORE ===== */
.news-card .news-list{
    top: 30px !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        top: 24px !important;
    }
}

@media (max-width:780px){
    .news-card .news-list{
        top: 16px !important;
    }
}


/* ===== MOVE NEWS CONTENT DOWN EVEN MORE ===== */
.news-card .news-list{
    top: 42px !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        top: 34px !important;
    }
}

@media (max-width:780px){
    .news-card .news-list{
        top: 22px !important;
    }
}


/* ===== MOVE NEWS CONTENT DOWN A LITTLE MORE ===== */
.news-card .news-list{
    top: 50px !important;
}

@media (max-width:1100px){
    .news-card .news-list{
        top: 40px !important;
    }
}

@media (max-width:780px){
    .news-card .news-list{
        top: 26px !important;
    }
}


/* ===== MOVE ITEM SECTION UP A LITTLE ===== */
.item-frame-card .items-row{
    position: relative !important;
    top: -8px !important;
}

.item-frame-card > .dots{
    top: 142px !important;
}

@media (max-width:1100px){
    .item-frame-card .items-row{
        top: -6px !important;
    }

    .item-frame-card > .dots{
        top: 138px !important;
    }
}

@media (max-width:780px){
    .item-frame-card .items-row{
        top: -8px !important;
    }

    .item-frame-card > .dots{
        top: 142px !important;
    }
}


/* ===== MOVE ITEM CONTENT UP MUCH MORE ===== */
.item-frame-card .items-row{
    top: -24px !important;
}

.item-frame-card > .dots{
    top: 126px !important;
}

@media (max-width:1100px){
    .item-frame-card .items-row{
        top: -20px !important;
    }

    .item-frame-card > .dots{
        top: 122px !important;
    }
}

@media (max-width:780px){
    .item-frame-card .items-row{
        top: -24px !important;
    }

    .item-frame-card > .dots{
        top: 126px !important;
    }
}


/* =========================================================
   MOVE WHOLE ITEM CARD UP
   ขยับทั้งกรอบ + ไอเทม + ข้อความ + ลูกศร + จุด พร้อมกัน
   ========================================================= */
.item-frame-card{
    position: relative !important;
    top: -42px !important;
    margin-bottom: -42px !important;
}

/* ยกเลิกการขยับเฉพาะของด้านในจากแพตช์ก่อนหน้า */
.item-frame-card .items-row{
    top: 0 !important;
}

.item-frame-card > .dots{
    top: 150px !important;
}

@media (max-width:1100px){
    .item-frame-card{
        top: -34px !important;
        margin-bottom: -34px !important;
    }

    .item-frame-card .items-row{
        top: 0 !important;
    }

    .item-frame-card > .dots{
        top: 146px !important;
    }
}

@media (max-width:780px){
    .item-frame-card{
        top: -28px !important;
        margin-bottom: -28px !important;
    }

    .item-frame-card .items-row{
        top: 0 !important;
    }

    .item-frame-card > .dots{
        top: 150px !important;
    }
}


/* =========================================================
   LOGO ONLY: BIGGER + TOP CENTER
   ขยับเฉพาะโลโก้ให้ใหญ่ขึ้นและชิดขอบบนกึ่งกลาง
   ไม่กระทบส่วนอื่น
   ========================================================= */
.hero{
    overflow: visible !important;
}

.logo-wrap{
    position: absolute !important;
    left: 50% !important;
    top: -92px !important;
    transform: translateX(-50%) !important;
    width: min(780px, 58vw) !important;
    text-align: center !important;
    z-index: 5 !important;
}

.site-logo{
    width: min(780px, 58vw) !important;
    max-width: 780px !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.asset-hint{
    display: none !important;
}

@media (max-width: 1100px){
    .logo-wrap{
        top: -78px !important;
        width: min(650px, 60vw) !important;
    }

    .site-logo{
        width: min(650px, 60vw) !important;
        max-width: 650px !important;
        max-height: 250px !important;
    }
}

@media (max-width: 780px){
    .logo-wrap{
        top: -42px !important;
        width: min(420px, 72vw) !important;
    }

    .site-logo{
        width: min(420px, 72vw) !important;
        max-width: 420px !important;
        max-height: 170px !important;
    }
}


/* =========================================================
   MOVE ONLY LOGO HIGHER AGAIN
   ขยับเฉพาะโลโก้ขึ้นอีก ไม่กระทบส่วนอื่น
   ========================================================= */
.logo-wrap{
    top: -120px !important;
}

@media (max-width: 1100px){
    .logo-wrap{
        top: -100px !important;
    }
}

@media (max-width: 780px){
    .logo-wrap{
        top: -58px !important;
    }
}


/* =========================================================
   MOVE ONLY LOGO A LITTLE HIGHER AGAIN
   ขยับเฉพาะโลโก้ขึ้นอีกนิด ไม่กระทบส่วนอื่น
   ========================================================= */
.logo-wrap{
    top: -132px !important;
}

@media (max-width: 1100px){
    .logo-wrap{
        top: -110px !important;
    }
}

@media (max-width: 780px){
    .logo-wrap{
        top: -64px !important;
    }
}


/* =========================================================
   REBUILD TOP LEFT / TOP RIGHT BUTTONS
   แก้ปุ่มเมนูด้านบนซ้ายและขวาที่กดไม่ได้
   ========================================================= */

/* ให้ Header อยู่เหนือโลโก้เสมอ */
.site-header{
    position: relative !important;
    z-index: 100 !important;
    pointer-events: none !important;
}

/* เปิดการคลิกเฉพาะกลุ่มปุ่ม */
.site-header .top-nav,
.site-header .account-actions,
.site-header .nav-image-link,
.site-header .account-image-link{
    pointer-events: auto !important;
}

/* โลโก้ห้ามบังพื้นที่คลิกของปุ่ม ถึงภาพจะทับอยู่ด้านหน้า */
.logo-wrap,
.logo-wrap *,
.site-logo{
    pointer-events: none !important;
}

/* -------- เมนูด้านซ้าย -------- */
.top-nav.top-nav-images{
    position: relative !important;
    z-index: 110 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.top-nav-images .nav-image-link{
    position: relative !important;
    z-index: 111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 -1px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.top-nav-images .nav-image-link img{
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
}

.top-nav-images .nav-image-link:hover{
    filter: brightness(1.08) drop-shadow(0 3px 4px rgba(120,70,90,.22)) !important;
}

.top-nav-images .nav-image-link:active{
    transform: translateY(1px) scale(.98) !important;
}

/* -------- ปุ่มด้านขวา Login/Register/Topup -------- */
.account-actions.account-image-actions{
    position: relative !important;
    z-index: 110 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

.account-image-actions .account-image-link{
    position: relative !important;
    z-index: 111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 -1px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.account-image-actions .account-image-link img{
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
}

.account-image-actions .account-image-link:hover{
    filter: brightness(1.08) drop-shadow(0 3px 4px rgba(120,70,90,.22)) !important;
}

.account-image-actions .account-image-link:active{
    transform: translateY(1px) scale(.98) !important;
}

/* ให้โลโก้ยังอยู่ตำแหน่งเดิม แต่ไม่ขวางเมาส์ */
.logo-wrap{
    z-index: 5 !important;
}


/* =========================================================
   LOGO ANIMATION EFFECTS
   ลอยขึ้นลง + เรืองแสง + ประกายวิ่งผ่าน
   กระทบเฉพาะโลโก้
   ========================================================= */

.logo-wrap{
    overflow: visible !important;
}

/* ลอยขึ้นลงเบา ๆ + หายใจนิด ๆ */
.site-logo{
    animation:
        logoFloat 3.8s ease-in-out infinite,
        logoGlow 2.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
}

/* แสงประกายวิ่งผ่านโลโก้ */
.logo-wrap::after{
    content:"" !important;
    position:absolute !important;
    top:8% !important;
    left:-35% !important;
    width:26% !important;
    height:84% !important;
    background:linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,0) 75%,
        transparent 100%
    ) !important;
    transform:skewX(-18deg) !important;
    filter:blur(2px) !important;
    opacity:0 !important;
    pointer-events:none !important;
    z-index:6 !important;
    animation:logoShine 5.8s ease-in-out infinite !important;
}

/* ดาวเล็ก ๆ รอบโลโก้ */
.logo-wrap::before{
    content:"✦  ✧  ✦" !important;
    position:absolute !important;
    left:50% !important;
    top:8px !important;
    transform:translateX(-50%) !important;
    width:112% !important;
    text-align:center !important;
    font-size:18px !important;
    letter-spacing:70px !important;
    color:rgba(255,255,255,.9) !important;
    text-shadow:
        0 0 6px rgba(255,255,255,.9),
        0 0 12px rgba(255,191,220,.75) !important;
    pointer-events:none !important;
    z-index:7 !important;
    animation:logoSparkle 2.2s ease-in-out infinite !important;
}

@keyframes logoFloat{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-7px) scale(1.015);
    }
}

@keyframes logoGlow{
    0%,100%{
        filter:
            drop-shadow(0 0 3px rgba(255,255,255,.35))
            drop-shadow(0 0 8px rgba(255,150,195,.22));
    }
    50%{
        filter:
            drop-shadow(0 0 7px rgba(255,255,255,.65))
            drop-shadow(0 0 15px rgba(255,142,190,.45));
    }
}

@keyframes logoShine{
    0%,68%{
        left:-35%;
        opacity:0;
    }
    72%{
        opacity:.9;
    }
    86%{
        left:110%;
        opacity:.65;
    }
    90%,100%{
        left:110%;
        opacity:0;
    }
}

@keyframes logoSparkle{
    0%,100%{
        opacity:.35;
        transform:translateX(-50%) scale(.96);
    }
    50%{
        opacity:1;
        transform:translateX(-50%) scale(1.06);
    }
}

/* Hover ให้โลโก้ตอบสนองเล็กน้อย */
.logo-wrap:hover .site-logo{
    animation-play-state:paused !important;
    transform:translateY(-4px) scale(1.035) !important;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.75))
        drop-shadow(0 0 18px rgba(255,130,185,.5)) !important;
}

/* ผู้ใช้ที่ตั้งลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce){
    .site-logo,
    .logo-wrap::before,
    .logo-wrap::after{
        animation:none !important;
    }
}


/* =========================================================
   LOGO EFFECTS V2 — เอฟเฟกต์ชัดเจนขึ้น
   ขยับเฉพาะโลโก้/เอฟเฟกต์รอบโลโก้ ไม่กระทบส่วนอื่น
   ========================================================= */

/* ให้เอฟเฟกต์อยู่รอบโลโก้และมองเห็นชัด */
.logo-wrap{
    isolation: isolate !important;
    overflow: visible !important;
}

/* โลโก้: ลอยเบา ๆ + เรืองแสงแรงขึ้น */
.site-logo{
    position: relative !important;
    z-index: 5 !important;
    animation:
        logoFloatV2 3.2s ease-in-out infinite,
        logoGlowV2 2.2s ease-in-out infinite !important;
}

/* วงแสงหมุนด้านหลังโลโก้ */
.logo-wrap::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:112% !important;
    height:92% !important;
    transform:translate(-50%,-50%) rotate(0deg) !important;
    border-radius:50% !important;
    background:
        conic-gradient(
            from 0deg,
            rgba(255,143,188,0) 0deg,
            rgba(255,143,188,.65) 35deg,
            rgba(255,255,255,.85) 58deg,
            rgba(139,204,255,.7) 85deg,
            rgba(139,204,255,0) 125deg,
            rgba(255,197,113,.55) 175deg,
            rgba(255,197,113,0) 220deg,
            rgba(201,150,255,.6) 280deg,
            rgba(201,150,255,0) 360deg
        ) !important;
    filter:blur(18px) !important;
    opacity:.65 !important;
    z-index:1 !important;
    pointer-events:none !important;
    animation:logoHaloSpin 8s linear infinite !important;
}

/* ดาว/ประกายรอบโลโก้ แบบเห็นชัด */
.logo-wrap::after{
    content:"" !important;
    position:absolute !important;
    inset:-18% -10% !important;
    z-index:8 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 8% 30%, rgba(255,255,255,1) 0 2px, transparent 3px),
        radial-gradient(circle at 18% 72%, rgba(255,218,238,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 31% 16%, rgba(255,255,255,.95) 0 2px, transparent 3px),
        radial-gradient(circle at 47% 88%, rgba(181,222,255,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 63% 12%, rgba(255,241,171,.95) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 76%, rgba(255,255,255,1) 0 3px, transparent 4px),
        radial-gradient(circle at 92% 34%, rgba(219,188,255,.95) 0 2px, transparent 3px) !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.95))
        drop-shadow(0 0 9px rgba(255,151,205,.65)) !important;
    opacity:.9 !important;
    animation:logoSparklesV2 1.8s ease-in-out infinite alternate !important;
}

/* แสงวาบวิ่งผ่านโลโก้ด้วย mask + pseudo ของ image ไม่ได้ จึงใช้ filter pulse ให้เห็นชัด */
@keyframes logoFloatV2{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-6px) scale(1.012);
    }
}

@keyframes logoGlowV2{
    0%,100%{
        filter:
            drop-shadow(0 0 4px rgba(255,255,255,.65))
            drop-shadow(0 0 10px rgba(255,123,183,.55))
            drop-shadow(0 0 16px rgba(120,190,255,.35));
    }
    50%{
        filter:
            drop-shadow(0 0 9px rgba(255,255,255,.95))
            drop-shadow(0 0 20px rgba(255,123,183,.85))
            drop-shadow(0 0 30px rgba(120,190,255,.6));
    }
}

@keyframes logoHaloSpin{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes logoSparklesV2{
    0%{
        opacity:.35;
        transform:scale(.96) rotate(-1deg);
    }
    50%{
        opacity:1;
        transform:scale(1.04) rotate(1deg);
    }
    100%{
        opacity:.55;
        transform:scale(1) rotate(-.5deg);
    }
}

/* เพิ่มแสงวาบชัด ๆ ตอน hover */
.logo-wrap:hover .site-logo{
    animation-play-state:paused !important;
    transform:translateY(-4px) scale(1.04) !important;
    filter:
        drop-shadow(0 0 12px rgba(255,255,255,1))
        drop-shadow(0 0 26px rgba(255,110,185,.95))
        drop-shadow(0 0 36px rgba(105,190,255,.75)) !important;
}


/* =========================================================
   LOGO STARS V3 — ทำดาว/ประกายให้มองเห็นชัดจริง
   ========================================================= */

/* ใช้ตัวดาวจริงแทนจุด gradient เพื่อให้เห็นแน่นอน */
.logo-wrap::after{
    content:"✦   ✧   ✦   ✧   ✦   ✧" !important;
    position:absolute !important;
    left:50% !important;
    top:48% !important;
    width:125% !important;
    height:auto !important;
    transform:translate(-50%,-50%) !important;
    text-align:center !important;
    white-space:nowrap !important;

    font-size:30px !important;
    font-family:Arial, "Segoe UI Symbol", sans-serif !important;
    font-weight:700 !important;
    letter-spacing:24px !important;

    color:#ffffff !important;
    text-shadow:
        0 0 4px #ffffff,
        0 0 9px #ffffff,
        0 0 14px #ff9ac8,
        0 0 22px #8ecbff !important;

    background:none !important;
    filter:none !important;
    opacity:1 !important;
    pointer-events:none !important;
    z-index:20 !important;

    animation:logoRealStars 1.5s ease-in-out infinite alternate !important;
}

/* ทำดาวให้กระพริบและขยับเล็กน้อย */
@keyframes logoRealStars{
    0%{
        opacity:.35;
        transform:translate(-50%,-50%) scale(.94) rotate(-1deg);
        text-shadow:
            0 0 3px #fff,
            0 0 7px #ffb7d6,
            0 0 10px #94cfff !important;
    }
    50%{
        opacity:1;
        transform:translate(-50%,-52%) scale(1.08) rotate(1deg);
        text-shadow:
            0 0 6px #fff,
            0 0 14px #fff,
            0 0 22px #ff86be,
            0 0 30px #79bfff !important;
    }
    100%{
        opacity:.55;
        transform:translate(-50%,-48%) scale(1) rotate(-.5deg);
    }
}

/* จอเล็ก ลดขนาดดาวลง */
@media (max-width:1100px){
    .logo-wrap::after{
        font-size:24px !important;
        letter-spacing:18px !important;
        width:120% !important;
    }
}

@media (max-width:780px){
    .logo-wrap::after{
        font-size:18px !important;
        letter-spacing:12px !important;
        width:118% !important;
    }
}


/* =========================================================
   REMOVE LOGO STARS
   เอาดาว/ประกายตัวอักษรรอบโลโก้ออก
   ========================================================= */
.logo-wrap::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    background:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
}


/* =========================================================
   MOBILE RESPONSIVE PATCH — 2026-08
   รองรับมือถือ/แท็บเล็ตโดยไม่แก้หน้าตา Desktop
   ========================================================= */
html{
    -webkit-text-size-adjust:100%;
}

body{
    overflow-x:hidden !important;
}

img{
    max-width:100%;
}

@media (max-width: 900px){
    .container{
        width:min(100% - 24px, 100%) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Header */
    .site-header{
        min-height:0 !important;
        padding-top:10px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:5px !important;
    }

    .top-nav.top-nav-images{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        justify-content:center !important;
        align-items:center !important;
        gap:2px !important;
        padding:0 !important;
        margin:0 auto !important;
    }

    .nav-image-link{
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        display:flex !important;
        justify-content:center !important;
    }

    .nav-image-link img{
        width:100% !important;
        max-width:122px !important;
        height:auto !important;
        object-fit:contain !important;
    }

    .account-actions.account-image-actions{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:min(100%,430px) !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:0 !important;
        margin:0 auto !important;
        padding:0 !important;
    }

    .account-image-link{
        width:100% !important;
        min-width:0 !important;
        display:flex !important;
        justify-content:center !important;
    }

    .account-image-link img{
        width:100% !important;
        max-width:132px !important;
        height:auto !important;
        object-fit:contain !important;
    }

    /* Hero */
    .hero{
        min-height:210px !important;
        height:auto !important;
        padding:20px 0 0 !important;
    }

    .logo-wrap{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:-30px !important;
        width:min(92vw,520px) !important;
        margin:0 auto !important;
    }

    .site-logo{
        width:100% !important;
        max-width:520px !important;
        height:auto !important;
    }

    .character{
        opacity:.64 !important;
        transform:scale(.74) !important;
        transform-origin:bottom center !important;
        pointer-events:none !important;
    }

    /* Main blocks */
    .content-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:18px !important;
        margin-top:-18px !important;
    }

    .main-menu-card,
    .news-card,
    .side-stack{
        width:100% !important;
        min-width:0 !important;
    }

    .left-menu-image-list{
        width:100% !important;
        margin:0 !important;
        left:auto !important;
        top:0 !important;
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:2px 4px !important;
        padding:0 !important;
    }

    .left-menu-image-btn,
    .left-menu-image-btn + .left-menu-image-btn{
        margin:0 !important;
        width:100% !important;
    }

    .left-menu-image-btn img{
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
    }

    .news-card .news-list{
        top:0 !important;
    }

    .news-item{
        min-width:0 !important;
        grid-template-columns:84px minmax(0,1fr) !important;
        gap:10px !important;
        padding:8px !important;
    }

    .news-item .thumb{
        width:84px !important;
        height:64px !important;
    }

    .news-item .news-copy{
        min-width:0 !important;
    }

    .news-item h3{
        font-size:14px !important;
        line-height:1.35 !important;
        overflow-wrap:anywhere !important;
    }

    .news-item p{
        font-size:11px !important;
        line-height:1.45 !important;
    }

    .news-item time{
        grid-column:2 !important;
        justify-self:start !important;
        font-size:10px !important;
    }

    .side-stack{
        display:grid !important;
        gap:18px !important;
    }

    .server-frame-card,
    .item-frame-card{
        max-width:100% !important;
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .item-frame-card{
        top:0 !important;
        margin-bottom:0 !important;
    }

    .item-frame-card .items-row{
        width:88% !important;
        left:6% !important;
        right:auto !important;
    }

    .item-frame-card .item{
        min-width:0 !important;
    }

    .item-frame-card .item-img img{
        max-width:100% !important;
        height:auto !important;
    }

    .site-footer{
        margin-top:24px !important;
    }

    .footer-inner{
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

@media (max-width: 600px){
    .page-bg{
        background-size:cover !important;
        background-position:center top !important;
    }

    .container{
        width:calc(100% - 16px) !important;
    }

    .site-header{
        padding-top:6px !important;
    }

    .top-nav.top-nav-images{
        grid-template-columns:repeat(3,1fr) !important;
    }

    .nav-image-link img{
        max-width:108px !important;
    }

    .account-actions.account-image-actions{
        width:100% !important;
    }

    .account-image-link img{
        max-width:118px !important;
    }

    .hero{
        min-height:150px !important;
        padding-top:10px !important;
    }

    .logo-wrap{
        top:-18px !important;
        width:min(96vw,430px) !important;
    }

    .character{
        display:none !important;
    }

    .content-grid{
        gap:14px !important;
        margin-top:-12px !important;
    }

    .left-menu-image-list{
        grid-template-columns:1fr 1fr !important;
        gap:0 2px !important;
    }

    .news-item{
        grid-template-columns:72px minmax(0,1fr) !important;
        gap:8px !important;
        border-radius:13px !important;
    }

    .news-item .thumb{
        width:72px !important;
        height:58px !important;
    }

    .news-item h3{
        font-size:13px !important;
        margin:2px 0 2px !important;
    }

    .news-item p{
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    .tag{
        font-size:9px !important;
        padding:2px 7px !important;
    }

    .server-frame-card{
        min-height:0 !important;
    }

    .server-box{
        transform:none !important;
    }

    .item-frame-card .items-row{
        width:92% !important;
        left:4% !important;
        gap:4px !important;
    }

    .item-frame-card .item span{
        font-size:9px !important;
    }

    .item-frame-card .arrow{
        flex:0 0 28px !important;
        width:28px !important;
        height:28px !important;
        font-size:25px !important;
    }

    .footer-inner{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:10px !important;
        text-align:center !important;
    }

    .footer-links{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px 12px !important;
    }

    .footer-links a,
    .copyright{
        font-size:10px !important;
    }
}

@media (max-width: 390px){
    .container{
        width:calc(100% - 12px) !important;
    }

    .nav-image-link img{
        max-width:100px !important;
    }

    .account-image-link img{
        max-width:108px !important;
    }

    .hero{
        min-height:135px !important;
    }

    .left-menu-image-list{
        grid-template-columns:1fr !important;
        gap:0 !important;
    }

    .left-menu-image-btn img{
        max-width:330px !important;
        margin:0 auto !important;
    }

    .news-item{
        grid-template-columns:64px minmax(0,1fr) !important;
    }

    .news-item .thumb{
        width:64px !important;
        height:54px !important;
    }

    .news-item p{
        display:none !important;
    }
}


/* =========================================================
   MOBILE V2 FIX — แก้หน้าแตก/โลโก้ใหญ่/เมนูกระจาย
   ========================================================= */
@media (max-width: 768px){

    body{
        overflow-x:hidden !important;
    }

    .page-bg{
        background-size:100% auto !important;
        background-position:center top !important;
        background-repeat:repeat-y !important;
    }

    .container{
        width:calc(100% - 16px) !important;
        max-width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* ---------- HEADER ---------- */
    .site-header.container{
        width:100% !important;
        padding:8px 8px 0 !important;
        margin:0 !important;
        box-sizing:border-box !important;
        gap:2px !important;
        align-items:center !important;
    }

    .top-nav.top-nav-images{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:1px !important;
        overflow:visible !important;
        margin:0 auto !important;
        padding:0 !important;
    }

    .top-nav.top-nav-images .nav-image-link{
        display:flex !important;
        width:auto !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        flex:0 0 auto !important;
        margin:0 !important;
        padding:0 !important;
    }

    .top-nav.top-nav-images .nav-image-link img{
        display:block !important;
        width:auto !important;
        height:58px !important;
        max-width:96px !important;
        max-height:58px !important;
        object-fit:contain !important;
    }

    .account-actions.account-image-actions{
        position:relative !important;
        width:auto !important;
        max-width:100% !important;
        height:auto !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:0 !important;
        margin:-2px auto 0 !important;
        padding:0 !important;
    }

    .account-actions.account-image-actions .account-image-link{
        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        flex:0 0 auto !important;
        margin:0 -2px 0 0 !important;
    }

    .account-actions.account-image-actions .account-image-link img{
        display:block !important;
        width:auto !important;
        height:64px !important;
        max-width:132px !important;
        max-height:64px !important;
        object-fit:contain !important;
    }

    /* ---------- HERO / LOGO ---------- */
    .hero.container{
        width:100% !important;
        min-height:112px !important;
        height:112px !important;
        padding:0 !important;
        margin:4px auto 2px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:visible !important;
    }

    .hero .character{
        display:none !important;
    }

    .hero .logo-wrap{
        position:relative !important;
        inset:auto !important;
        top:0 !important;
        left:auto !important;
        right:auto !important;
        width:min(340px,78vw) !important;
        height:auto !important;
        margin:0 auto !important;
        padding:0 !important;
        transform:none !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    .hero .logo-wrap .site-logo{
        display:block !important;
        width:100% !important;
        max-width:340px !important;
        height:auto !important;
        max-height:120px !important;
        object-fit:contain !important;
        margin:0 auto !important;
    }

    .hero .logo-fallback,
    .hero .asset-hint{
        display:none !important;
    }

    /* ---------- CONTENT ---------- */
    .content-grid{
        display:flex !important;
        flex-direction:column !important;
        width:calc(100% - 16px) !important;
        margin:0 auto !important;
        gap:12px !important;
    }

    .main-menu-card{
        width:100% !important;
        margin:0 auto !important;
        padding:0 !important;
        top:0 !important;
    }

    .left-menu-image-list{
        position:relative !important;
        width:min(360px,92vw) !important;
        max-width:360px !important;
        margin:0 auto !important;
        padding:0 !important;
        top:0 !important;
        left:auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:0 !important;
    }

    .left-menu-image-list .left-menu-image-btn,
    .left-menu-image-list .left-menu-image-btn + .left-menu-image-btn{
        display:block !important;
        width:100% !important;
        max-width:360px !important;
        margin:-2px auto 0 !important;
        padding:0 !important;
    }

    .left-menu-image-list .left-menu-image-btn:first-child{
        margin-top:0 !important;
    }

    .left-menu-image-list .left-menu-image-btn img{
        display:block !important;
        width:100% !important;
        max-width:360px !important;
        height:auto !important;
        margin:0 auto !important;
        object-fit:contain !important;
    }

    /* ---------- NEWS ---------- */
    .news-card{
        width:100% !important;
        min-height:0 !important;
        margin:2px auto 0 !important;
        left:0 !important;
        top:0 !important;
        border-radius:18px !important;
        background-size:100% 100% !important;
    }

    .news-card .news-list{
        position:relative !important;
        top:0 !important;
        padding:34px 12px 24px !important;
    }

    .news-card .news-item{
        display:grid !important;
        grid-template-columns:74px minmax(0,1fr) !important;
        gap:8px !important;
        padding:9px 5px !important;
        margin:0 !important;
    }

    .news-card .news-item .thumb{
        width:74px !important;
        height:58px !important;
        margin:0 !important;
    }

    .news-card .news-item time{
        grid-column:2 !important;
        justify-self:start !important;
        padding:0 !important;
        margin:0 !important;
        font-size:9px !important;
    }

    .news-card .news-item h3{
        font-size:13px !important;
        line-height:1.3 !important;
    }

    .news-card .news-item p{
        font-size:10px !important;
        line-height:1.35 !important;
    }

    /* ---------- SIDE CARDS ---------- */
    .side-stack{
        width:100% !important;
        margin:0 auto !important;
        gap:12px !important;
    }

    .server-frame-card,
    .item-frame-card{
        width:100% !important;
        max-width:100% !important;
        left:0 !important;
        top:0 !important;
        margin:0 auto !important;
    }

    .item-frame-card{
        margin-bottom:0 !important;
    }
}

@media (max-width: 480px){

    .top-nav.top-nav-images{
        flex-wrap:wrap !important;
        max-width:330px !important;
    }

    .top-nav.top-nav-images .nav-image-link{
        width:33.333% !important;
    }

    .top-nav.top-nav-images .nav-image-link img{
        height:52px !important;
        max-width:92px !important;
        max-height:52px !important;
        margin:0 auto !important;
    }

    .account-actions.account-image-actions .account-image-link img{
        height:58px !important;
        max-width:116px !important;
        max-height:58px !important;
    }

    .hero.container{
        height:100px !important;
        min-height:100px !important;
        margin-top:0 !important;
    }

    .hero .logo-wrap{
        width:min(300px,78vw) !important;
    }

    .hero .logo-wrap .site-logo{
        max-width:300px !important;
        max-height:105px !important;
    }

    .left-menu-image-list{
        width:min(330px,94vw) !important;
    }

    .left-menu-image-list .left-menu-image-btn,
    .left-menu-image-list .left-menu-image-btn img{
        max-width:330px !important;
    }

    .news-card .news-list{
        padding:30px 9px 18px !important;
    }

    .news-card .news-item{
        grid-template-columns:64px minmax(0,1fr) !important;
        gap:7px !important;
        padding:7px 3px !important;
    }

    .news-card .news-item .thumb{
        width:64px !important;
        height:52px !important;
    }

    .news-card .news-item p{
        display:none !important;
    }
}


/* =========================================================
   MOBILE V3 FIX
   - ปุ่มบนชิดกันและชัดขึ้น
   - ล็อก BG ไม่ให้เลื่อน/ต่อภาพเละบนมือถือ
   ========================================================= */

@media (max-width: 768px){

    html, body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    /* ล็อกภาพพื้นหลังมือถือ: ไม่ repeat และไม่เลื่อนตามเนื้อหา */
    .page-bg{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100vh !important;
        min-height:100vh !important;
        background-image:url("../img/bg.png") !important;
        background-repeat:no-repeat !important;
        background-position:center top !important;
        background-size:cover !important;
        background-attachment:scroll !important;
        z-index:-10 !important;
        transform:none !important;
    }

    /* กัน pseudo/background อื่นมาซ้อนจนเห็นภาพต่อซ้ำ */
    body::before,
    body::after{
        background-repeat:no-repeat !important;
    }

    /* ---------- TOP NAV: ชิดกัน ---------- */
    .top-nav.top-nav-images{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:0 !important;
        width:auto !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:0 !important;
    }

    .top-nav.top-nav-images .nav-image-link{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 -4px 0 0 !important;
        padding:0 !important;
    }

    .top-nav.top-nav-images .nav-image-link:last-child{
        margin-right:0 !important;
    }

    .top-nav.top-nav-images .nav-image-link img{
        display:block !important;
        width:auto !important;
        height:58px !important;
        max-width:none !important;
        max-height:58px !important;
        object-fit:contain !important;
        image-rendering:auto !important;
        filter:contrast(1.04) saturate(1.04) !important;
    }

    /* ---------- ACCOUNT BUTTONS: ชิดกัน ---------- */
    .account-actions.account-image-actions{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:0 !important;
        width:auto !important;
        max-width:100% !important;
        margin:-3px auto 0 !important;
        padding:0 !important;
    }

    .account-actions.account-image-actions .account-image-link{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 -5px 0 0 !important;
        padding:0 !important;
    }

    .account-actions.account-image-actions .account-image-link:last-child{
        margin-right:0 !important;
    }

    .account-actions.account-image-actions .account-image-link img{
        display:block !important;
        width:auto !important;
        height:66px !important;
        max-width:none !important;
        max-height:66px !important;
        object-fit:contain !important;
        filter:contrast(1.04) saturate(1.05) !important;
    }

    /* ไม่ให้ส่วนเนื้อหาทำให้ BG ดูขาดเป็นช่วง ๆ */
    main,
    .site-header,
    .hero,
    .content-grid,
    .site-footer{
        background:transparent !important;
    }
}

@media (max-width: 560px){

    .top-nav.top-nav-images{
        max-width:360px !important;
        transform:scale(.94) !important;
        transform-origin:top center !important;
    }

    .top-nav.top-nav-images .nav-image-link{
        margin-right:-6px !important;
    }

    .top-nav.top-nav-images .nav-image-link img{
        height:54px !important;
        max-height:54px !important;
    }

    .account-actions.account-image-actions{
        max-width:360px !important;
        transform:scale(.96) !important;
        transform-origin:top center !important;
        margin-top:-5px !important;
    }

    .account-actions.account-image-actions .account-image-link{
        margin-right:-7px !important;
    }

    .account-actions.account-image-actions .account-image-link img{
        height:62px !important;
        max-height:62px !important;
    }
}

@media (max-width: 390px){

    .top-nav.top-nav-images{
        transform:scale(.87) !important;
        width:max-content !important;
        max-width:none !important;
        margin-left:50% !important;
        translate:-50% 0 !important;
    }

    .account-actions.account-image-actions{
        transform:scale(.90) !important;
        width:max-content !important;
        max-width:none !important;
        margin-left:50% !important;
        translate:-50% 0 !important;
    }
}


/* =========================================================
   HEADER BUTTONS UP — ขยับปุ่มบนซ้ายและขวาขึ้น
   ========================================================= */
@media (min-width: 769px){
    .site-header.container{
        padding-top: 16px !important;
    }

    .top-nav.top-nav-images{
        position: relative !important;
        top: -10px !important;
    }

    .account-actions.account-image-actions{
        position: relative !important;
        top: -10px !important;
    }
}

@media (max-width: 768px){
    .top-nav.top-nav-images{
        position: relative !important;
        top: -4px !important;
    }

    .account-actions.account-image-actions{
        position: relative !important;
        top: -4px !important;
    }
}


/* =========================================================
   LIVE SERVER STATUS — TCP PORT 6027
   ========================================================= */
.server-frame-card{
    position:relative !important;
}

.server-live-status{
    position:absolute !important;
    right:18px !important;
    top:18px !important;
    z-index:8 !important;
    pointer-events:none !important;
}

.server-live-status img{
    display:block !important;
    width:auto !important;
    height:34px !important;
    max-width:120px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 3px 5px rgba(80,50,50,.12)) !important;
}

/* ซ่อน badge แบบ pseudo เดิม ถ้ามี เพื่อไม่ให้ซ้อนกัน */
.server-frame-card::after{
    display:none !important;
}

@media(max-width:768px){
    .server-live-status{
        right:12px !important;
        top:12px !important;
    }

    .server-live-status img{
        height:30px !important;
        max-width:105px !important;
    }
}


/* =========================================================
   SERVER STATUS FINAL FIX
   ใช้สถานะจาก server-status.php เท่านั้น
   ========================================================= */

/* ปิดป้าย OFFLINE แบบเก่าที่ถูก hard-code ไว้ */
.server-frame-card .server-box::after{
    content:none !important;
    display:none !important;
    background:none !important;
}

/* ป้ายสถานะจริง วางตำแหน่งเดิมเหนือสไลม์ */
.server-live-status{
    position:absolute !important;
    right:24px !important;
    top:96px !important;
    width:84px !important;
    height:42px !important;
    z-index:20 !important;
    pointer-events:none !important;
}

.server-live-status img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:contain !important;
}

@media(max-width:1100px){
    .server-live-status{
        right:22px !important;
        top:92px !important;
        width:78px !important;
        height:39px !important;
    }
}

@media(max-width:780px){
    .server-live-status{
        right:26px !important;
        top:96px !important;
        width:82px !important;
        height:41px !important;
    }
}


/* =========================================================
   SERVER STATUS TEXT FALLBACK — รูปไม่ขึ้นก็ยังเห็นสถานะ
   ========================================================= */
.server-frame-card .server-box::after{
    content:none !important;
    display:none !important;
}

.server-live-status{
    position:absolute !important;
    right:22px !important;
    top:96px !important;
    z-index:30 !important;
    min-width:72px !important;
    height:36px !important;
    padding:0 10px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    pointer-events:none !important;
    box-shadow:0 4px 10px rgba(86,55,55,.18) !important;
}

.server-live-status img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    z-index:1 !important;
}

.server-live-status #serverStatusText{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-shadow:0 1px 1px rgba(0,0,0,.14) !important;
}

.server-live-status.is-online{
    background:linear-gradient(180deg,#69d97c,#38b95c) !important;
    border:2px solid rgba(255,255,255,.88) !important;
    color:#fff !important;
}

.server-live-status.is-offline{
    background:linear-gradient(180deg,#e85f6b,#c83f4c) !important;
    border:2px solid rgba(255,255,255,.88) !important;
    color:#fff !important;
}

@media(max-width:780px){
    .server-live-status{
        right:24px !important;
        top:94px !important;
        min-width:68px !important;
        height:34px !important;
    }
    .server-live-status #serverStatusText{
        font-size:11px !important;
    }
}


/* =========================================================
   SERVER STATUS CLEAN — ไม่ให้ข้อความซ้อนกับข้อความใน PNG
   ========================================================= */
.server-live-status #serverStatusText{
    display:none !important;
}

.server-live-status.image-error #serverStatusText{
    display:block !important;
}

.server-live-status.image-error #serverStatusImage{
    display:none !important;
}


/* =========================================================
   SERVER STATUS — USER PNG ONLY FINAL OVERRIDE
   ปรับให้รูปออนไลน์/ออฟไลน์เล็กลง และขยับขึ้นด้านบน
   ========================================================= */
.server-frame-card .server-box::after{
    content:none !important;
    display:none !important;
}

.server-live-status{
    position:absolute !important;
    right:24px !important;
    top:70px !important;
    z-index:40 !important;

    width:64px !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    display:block !important;
    overflow:visible !important;
    pointer-events:none !important;
}

.server-live-status::before,
.server-live-status::after{
    content:none !important;
    display:none !important;
}

.server-live-status #serverStatusText,
.server-live-status span{
    display:none !important;
}

.server-live-status #serverStatusImage{
    position:static !important;
    inset:auto !important;
    display:block !important;

    width:64px !important;
    height:auto !important;
    max-width:64px !important;
    max-height:none !important;

    padding:0 !important;
    margin:0 !important;

    object-fit:contain !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
}

@media(max-width:780px){
    .server-live-status{
        right:18px !important;
        top:66px !important;
        width:58px !important;
    }

    .server-live-status #serverStatusImage{
        width:58px !important;
        max-width:58px !important;
    }
}


/* CMS CONNECTED ITEMS */
.item-frame-card .item{
    text-decoration:none !important;
    color:inherit !important;
}
.quick-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;margin-bottom:35px}
.quick-service-grid article{scroll-margin-top:20px;padding:20px;border:1px solid rgba(205,137,155,.28);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 10px 25px rgba(116,73,84,.08)}
.quick-service-grid h2{margin:0 0 8px;font-size:18px;color:#825260}.quick-service-grid p{min-height:42px;margin:0 0 13px;color:#967b81;line-height:1.55}
.quick-service-grid a,.primary-link,.secondary-link{display:inline-flex;border-radius:999px;padding:9px 14px;background:#d86f88;color:#fff;text-decoration:none;font-weight:700}
.secondary-link{margin-left:8px;background:#eee3e6;color:#765861}.simple-page{min-height:100vh;display:grid;place-items:center;padding:24px}.simple-card{position:relative;z-index:1;width:min(480px,100%);padding:30px;border-radius:22px;text-align:center;background:#fff;box-shadow:0 20px 50px rgba(110,69,80,.15)}
@media(max-width:850px){.quick-service-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.quick-service-grid{grid-template-columns:1fr}}

/* Production server overview + individual service health */
.server-overview{margin-top:18px;margin-bottom:22px;padding:22px;border:2px solid rgba(230,160,180,.55);border-radius:24px;background:rgba(255,255,255,.9);box-shadow:0 14px 36px rgba(120,70,90,.12)}
.server-overview-head{text-align:center;margin-bottom:16px}.server-overview-head>span{font-size:12px;font-weight:800;letter-spacing:.12em;color:#c75f7e}.server-overview-head h2{margin:4px 0 5px;font-size:26px;color:#77525e}.server-overview-head p{margin:0;color:#806b70}
.server-stat-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}.server-stat-grid>div{padding:12px 7px;text-align:center;border:1px solid #efd5dc;border-radius:14px;background:#fff8fa}.server-stat-grid small{display:block;font-size:10px;font-weight:800;color:#a17c86}.server-stat-grid strong{display:block;margin-top:4px;font-size:17px;color:#704b58}
.server-overview-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}.server-overview-actions a{padding:9px 15px;border-radius:999px;background:#fff;border:1px solid #e7bdca;color:#a94f6d;font-weight:700;text-decoration:none}.server-overview-actions a:hover{transform:translateY(-1px)}
.service-status-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.service-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800;background:#f4f4f4;color:#777}.service-pill i{width:7px;height:7px;border-radius:50%;background:#999}.service-pill.is-online{background:#effaf3;color:#2f7c4b}.service-pill.is-online i{background:#45a867}.service-pill.is-offline{background:#fff0f1;color:#a84e57}.service-pill.is-offline i{background:#d96570}
@media(max-width:980px){.server-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.server-overview{padding:16px}.server-overview-head h2{font-size:21px}.server-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.server-stat-grid strong{font-size:15px}}