body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
	
	font-family: 'Prompt', sans-serif;
    font-weight: 400;
    color: #ffffff;
}

/* =========================
   ปรับพิกัด LOGO ได้ตรงนี้
   ========================= */
:root{
    --logo-offset-x: 0px;
    --logo-offset-y: -120px;
    --logo-size: 650px;

}

.bg-wrapper {
    width: 100%;
    position: relative;
    background: url("../img/bg_body2.jpg") top center repeat-y;
    background-size: auto;
}

.bg-image {
    width: 100%;
    height: auto;
    display: block;
}

.logo {
    position: absolute;
    top: var(--logo-offset-y);
    left: 50%;
    width: var(--logo-size);
    height: var(--logo-size);
    transform: translateX(-50%) translateX(var(--logo-offset-x));
    display: block;
    pointer-events: none;
    user-select: none;

    animation: logoFloatZoom 4.5s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

@keyframes logoFloatZoom {
    0% {
        transform: translateX(-50%) translateX(var(--logo-offset-x)) translateY(0px) scale(1.00);
    }
    50% {
        transform: translateX(-50%) translateX(var(--logo-offset-x)) translateY(-10px) scale(1.06);
    }
    100% {
        transform: translateX(-50%) translateX(var(--logo-offset-x)) translateY(0px) scale(1.00);
    }
}

.content {
    position: relative;
    width: 100%;
}

/* =========================
   STATUS POSITION CONTROL
   ========================= */
:root{
    --status-offset-y: 650px;
    --status-width: 1200px;
}

.status-wrapper {
    position: absolute;
    top: var(--status-offset-y);
    left: 50%;
    transform: translateX(-50%);
    width: var(--status-width);
}

.status-image {
    width: 100%;
    height: auto;
    display: block;
}

.status-text {
    position: absolute;
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    white-space: nowrap;
	transform: translateX(-50%);
}

.text1 {
    left: 105px;
    top: 65px;
    color: #00ff66;
}

.text2 {
    left: 350px;
    top: 65px;
    color: #ff5a2a;
}

.text3 {
    left: 850px;
    top: 65px;
    color: #ff5a2a;
}

.text4 {
    left: 1090px;
    top: 65px;
    color: #ff5a2a;
}

/* =========================
   MENU POSITION CONTROL
   ========================= */
:root{
    --menu-offset-y: 900px;
    --menu-width: 1200px;
}

.menu-wrapper{
    position: absolute;
    top: var(--menu-offset-y);
    left: 50%;
    transform: translateX(-50%);
    width: var(--menu-width);

    position: absolute;
}
.menu-wrapper{
    position: absolute;
    transform: translateX(-50%);
}

.menu-wrapper{ 
    position: absolute;
}

/* =========================
   MENU BUTTON BASE
   ========================= */
.menu-btn{
    position: absolute;
    display: inline-block;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    transition: transform 180ms ease;
    will-change: transform;
}

.menu-btn img{
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

:root{
    --btn-register-x: 15px;
    --btn-register-y: 100px;
    --btn-register-w: 260px;
}

.menu-btn-register{
    left: var(--btn-register-x);
    top: var(--btn-register-y);
    width: var(--btn-register-w);
}

.menu-btn:hover{
    animation: btnWiggle 0.45s ease-in-out infinite;
}

.menu-btn:active{
    animation: none;
    transform: scale(0.97);
}

@keyframes btnWiggle{
    0%   { transform: translateY(0px) rotate(0deg) scale(1); }
    40%  { transform: translateY(-2px) rotate(-1deg) scale(1.01); }
    70%  { transform: translateY(0px) rotate(1deg)  scale(1.01); }
    100% { transform: translateY(0px) rotate(0deg)  scale(1); }
}

/* =========================
   DOWNLOAD BUTTON POSITION
   ========================= */
:root{
    --btn-download-x: 15px;
    --btn-download-y: 180px;
    --btn-download-w: 260px;
}

.menu-btn-download{
    left: var(--btn-download-x);
    top: var(--btn-download-y);
    width: var(--btn-download-w);
}

/* =========================
   SVINFO BUTTON POSITION
   ========================= */
:root{
    --btn-svinfo-x: 15px;
    --btn-svinfo-y: 260px;
    --btn-svinfo-w: 260px;
}

.menu-btn-svinfo{
    left: var(--btn-svinfo-x);
    top: var(--btn-svinfo-y);
    width: var(--btn-svinfo-w);
}

/* =========================
   BOSS BUTTON POSITION
   ========================= */
:root{
    --btn-boss-x: 15px;
    --btn-boss-y: 340px;
    --btn-boss-w: 260px;
}

.menu-btn-boss{
    left: var(--btn-boss-x);
    top: var(--btn-boss-y);
    width: var(--btn-boss-w);
}

/* =========================
   GUILD BUTTON POSITION
   ========================= */
:root{
    --btn-guild-x: 15px;
    --btn-guild-y: 420px;
    --btn-guild-w: 260px;
}

.menu-btn-guild{
    left: var(--btn-guild-x);
    top: var(--btn-guild-y);
    width: var(--btn-guild-w);
}

/* =========================
   MEMBER BUTTON POSITION
   ========================= */
:root{
    --btn-member-x: 925px;
    --btn-member-y: 100px;
    --btn-member-w: 260px;
}

.menu-btn-member{
    left: var(--btn-member-x);
    top: var(--btn-member-y);
    width: var(--btn-member-w);
}

/* =========================
   DONATE BUTTON POSITION
   ========================= */
:root{
    --btn-donate-x: 925px;
    --btn-donate-y: 180px;
    --btn-donate-w: 260px;
}

.menu-btn-donate{
    left: var(--btn-donate-x);
    top: var(--btn-donate-y);
    width: var(--btn-donate-w);
}

/* =========================
   GUIDE BUTTON POSITION
   ========================= */
:root{
    --btn-guide-x: 925px;
    --btn-guide-y: 260px;
    --btn-guide-w: 260px;
}

.menu-btn-guide{
    left: var(--btn-guide-x);
    top: var(--btn-guide-y);
    width: var(--btn-guide-w);
}

/* =========================
   FBGROUP BUTTON POSITION
   ========================= */
:root{
    --btn-fbgroup-x: 925px;
    --btn-fbgroup-y: 340px;
    --btn-fbgroup-w: 260px;
}

.menu-btn-fbgroup{
    left: var(--btn-fbgroup-x);
    top: var(--btn-fbgroup-y);
    width: var(--btn-fbgroup-w);
}

/* =========================
   FBPAGE BUTTON POSITION
   ========================= */
:root{
    --btn-fbpage-x: 925px;
    --btn-fbpage-y: 420px;
    --btn-fbpage-w: 260px;
}

.menu-btn-fbpage{
    left: var(--btn-fbpage-x);
    top: var(--btn-fbpage-y);
    width: var(--btn-fbpage-w);
}

/* =========================
   NEWS POSITION CONTROL
   ========================= */
:root{
    --news-offset-y: 1550px;
    --news-width: 1200px;
}

.news-wrapper{
    position: absolute;
    top: var(--news-offset-y);
    left: 60%;
    transform: translateX(-50%);
    width: var(--news-width);
}

.news-image{
    width: 100%;
    height: auto;
    display: block;
}

/* =========================
   NEWS CATEGORY POSITION
   ========================= */
:root{
    --news-category-offset-y: 1670px;
}

.news-category-wrapper{
    position: absolute;
    top: var(--news-category-offset-y);
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    text-align: center;
}

.news-category{
    display: flex;
    justify-content: center;
    gap: 0px;
}

.news-btn{
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.news-btn img{
    width: 220px;
    height: auto;
}

.news-btn:hover{
    transform: translateY(-3px);
}

.news-btn.active{
    transform: scale(1.05);
}

/* =========================
   NEWS LIST POSITION
   ========================= */
:root{
    --news-list-offset-y: 1800px;
}

.news-list-wrapper{
    position: absolute;
    top: var(--news-list-offset-y);
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
}

.news-grid{
    display: grid;
    grid-template-columns: repeat(3, 320px);
    gap: 20px;
    justify-content: center;
}

.news-box{
    width: 320px;
    background: rgba(0,0,0,0.0);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-box:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.news-thumb{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.news-title{
    font-size: 16px;
    font-weight: bold;
    color: #555;
    padding: 10px 12px 0;
	background-color: #fff;
}

.news-desc{
    font-size: 14px;
    color: #777;
    padding: 6px 12px 14px;
    line-height: 1.4;
	background-color: #fff;
}