/* Mass-RO shared page shell (inner pages) — nav / sub-hero / content card / footer
   ทุก class ขึ้นต้นด้วย ms- เพื่อไม่ชนกับ CSS เดิมของแต่ละหน้า */
.ms-body{margin:0;background:#0e1a3a}
.ms-body *{box-sizing:border-box}

/* ---------- nav ---------- */
.ms-nav{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;flex-direction:column;align-items:center;padding-top:18px;font-family:"Kanit",Tahoma,sans-serif;line-height:1.2}
.ms-nav__bar{display:flex;align-items:center;background:linear-gradient(180deg,#24418a,#11214d);border:2px solid rgba(242,193,78,.55);border-radius:14px;box-shadow:0 10px 30px rgba(10,20,50,.35);padding:0 10px;height:68px}
.ms-nav a{text-decoration:none}
.ms-nav .ms-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;height:100%;color:#ffe39a;transition:transform .15s}
.ms-btn b{font-size:20px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.ms-btn small{font-size:12px;color:#dfe7ff;font-family:Tahoma,sans-serif}
.ms-nav .ms-btn:hover{transform:translateY(-2px);color:#fff}
.ms-nav .ms-btn.is-on b{color:#fff;text-decoration:underline;text-decoration-color:#f2c14e;text-underline-offset:5px}
.ms-nav .ms-btn--dl{margin:-18px 10px 0;height:100px;padding:0 38px;border-radius:0 0 40px 40px;background:linear-gradient(180deg,#fff2c2,#f2c14e 70%,#c98e22);border:2px solid #fff3cc;box-shadow:0 8px 20px rgba(0,0,0,.35);color:#0e1a3a}
.ms-btn--dl b{font-size:30px;color:#0e1a3a;text-shadow:none}
.ms-btn--dl small{color:#17295a;font-size:14px;font-weight:600}
.ms-nav__tabs{display:flex;gap:110px;margin-top:-4px}
.ms-nav__tabs a{display:flex;align-items:center;gap:8px;background:#fff;padding:12px 22px 10px;border-radius:0 0 26px 26px;box-shadow:0 6px 14px rgba(0,0,0,.2);color:#0e1a3a}
.ms-nav__tabs b{display:block;font-size:16px}
.ms-nav__tabs small{font-size:11px;color:#5d6478;font-family:Tahoma,sans-serif}
.ms-fb{width:28px;height:28px;border-radius:50%;background:#1877f2;color:#fff;display:grid;place-items:center;font:700 18px Arial,sans-serif}
.ms-burger{display:none}

/* ---------- sub hero ---------- */
.ms-hero{position:relative;height:420px;overflow:hidden;background:#0e1a3a url(../images/header2.webp) center 35%/cover no-repeat}
.ms-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:200px;background:linear-gradient(180deg,transparent,#0e1a3a)}
.ms-hero__title{position:absolute;left:0;right:0;bottom:120px;z-index:2;text-align:center;font-family:"Kanit",Tahoma,sans-serif}
.ms-hero__title b{display:inline-block;padding:6px 26px;border-radius:14px;background:linear-gradient(180deg,#ffe9a8,#f2c14e);color:#0e1a3a;font-size:30px;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.ms-hero__title small{display:block;margin-top:8px;color:#fff;font-size:14px;letter-spacing:3px;text-shadow:0 2px 6px rgba(0,0,0,.7)}

/* ---------- content card ---------- */
.ms-main{position:relative;z-index:3;margin:-90px auto 0;width:min(1000px,100% - 24px);padding-bottom:50px}
.ms-card{border-radius:20px;overflow:hidden;border-top:5px solid #f2c14e;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.ms-content{position:relative}

/* ---------- footer ---------- */
.ms-foot{background:#0e1a3a;color:#b9c4e2;font:14px/1.8 Tahoma,sans-serif;text-align:center;padding:24px 16px 0}
.ms-foot a{color:#ffe39a;text-decoration:none}
.ms-foot__copy{margin-top:18px;padding:12px;background:#08122a;font-size:12px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .ms-nav__tabs{gap:30px}
  .ms-nav .ms-btn{padding:0 14px}.ms-btn b{font-size:17px}
}
@media (max-width:760px){
  .ms-nav{position:fixed;padding:0;align-items:stretch}
  .ms-nav__bar{flex-direction:column;height:auto;border-radius:0;padding:60px 0 12px;display:none}
  .ms-nav.open .ms-nav__bar{display:flex}
  .ms-nav__tabs{display:none}
  .ms-nav .ms-btn{width:100%;padding:12px}
  .ms-nav .ms-btn--dl{margin:6px auto;height:auto;border-radius:12px;width:calc(100% - 32px)}
  .ms-burger{display:block;position:fixed;top:12px;right:12px;z-index:60;width:44px;height:44px;border-radius:10px;border:2px solid #f2c14e;background:#0e1a3a;color:#f2c14e;font-size:22px;cursor:pointer}
  .ms-hero{height:260px}
  .ms-hero__title{bottom:80px}
  .ms-hero__title b{font-size:22px}
  .ms-main{margin-top:-60px;width:100%}
  .ms-card{border-radius:14px 14px 0 0}
}

/* old pages' first block sits flush at the top of the card */
.ms-content{padding-top:28px}

/* =====================================================================
   v2 (11 ต.ค.): หน้าย่อยทุกหน้าใช้หน้าตาเดียวกับ index
   - แถบเมนูโปร่ง/กระจกฝ้า + โล่ Download ทอง + ปุ่ม Facebook วงกลม + เส้นทองใต้เมนู
   - รูป head (header4) ด้านบน ไล่จางลงเป็นพื้นสว่างฟ้า-ครีม ไม่ยาวเกิน
   ===================================================================== */
.ms-body{background:linear-gradient(180deg,#eaf3ff 0,#f3f6fb 520px,#fbf6ea 1400px,#f3ead4 100%);color:#1b1f2c}

/* ---------- hero ---------- */
.ms-hero{height:380px;background-color:transparent!important;background-image:url(../images/header4-full.webp)!important;background-position:center 18%!important;background-size:cover!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,rgba(0,0,0,.5) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,rgba(0,0,0,.5) 78%,transparent 100%)}
.ms-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:170px;background:linear-gradient(180deg,rgba(14,26,58,.35),transparent);pointer-events:none}
.ms-hero::after{display:none}
.ms-hero__title{bottom:96px}
.ms-hero__title b{background:url(../images/dl-shield.svg) center/100% 100% no-repeat;padding:10px 40px 26px;border-radius:0;box-shadow:none;color:#141d4f;
  filter:drop-shadow(0 6px 8px rgba(40,20,0,.45));text-shadow:0 1px 0 rgba(255,250,225,.85)}
.ms-hero__title small{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.ms-main{margin-top:-60px}
.ms-card{border-top:4px solid #f2c14e;box-shadow:0 18px 44px rgba(20,40,90,.22)}

/* ---------- footer ไล่จากพื้นสว่างลงกรมท่า ---------- */
.ms-foot{background:linear-gradient(180deg,transparent 0,#0e1a3a 120px);padding-top:110px}

/* ---------- nav (คอม) ---------- */
@media (min-width:761px){
  #msNav{position:fixed;flex-direction:row;justify-content:center;align-items:flex-start;padding-top:14px}
  #msNav .ms-nav__bar{order:1;position:relative;z-index:2;height:64px;padding:0 18px;border-radius:18px;
    background:linear-gradient(180deg,rgba(14,26,58,.38),rgba(14,26,58,.22));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
    border:1px solid rgba(255,227,154,.28);box-shadow:0 6px 20px rgba(5,10,30,.18);transition:background .45s,border-color .45s,box-shadow .45s,height .3s}
  #msNav.stuck{padding-top:6px}
  #msNav.stuck .ms-nav__bar{height:54px;background:rgba(14,26,58,.62);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    border-color:rgba(242,193,78,.45);box-shadow:0 10px 30px rgba(5,10,30,.35),inset 0 -1px 0 rgba(255,227,154,.35)}
  #msNav .ms-btn{color:#fff}
  #msNav .ms-btn b{color:#fff;font-size:19px;white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.6)}
  #msNav .ms-btn small{color:#ffe7a6;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.7);font-family:"Kanit",Tahoma,sans-serif}
  #msNav .ms-btn.is-on b{text-decoration:none}
  #msNav .ms-btn:hover b{color:#ffe39a}
  #msNav.stuck .ms-btn b{font-size:17px}

  /* โล่ Download */
  #msNav .ms-btn--dl{position:relative;align-self:flex-start;margin:-14px 18px 0;height:112px;padding:24px 40px 18px!important;border:0;border-radius:0;box-shadow:none;justify-content:flex-start;overflow:hidden;animation:none;
    background:url(../images/dl-shield.svg) center/100% 100% no-repeat;filter:drop-shadow(0 6px 6px rgba(50,25,0,.45)) drop-shadow(0 14px 18px rgba(20,10,0,.3))}
  #msNav .ms-btn--dl::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(4% 0,96% 0,96% 60%,50% 94%,4% 60%);mix-blend-mode:soft-light;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 47%,rgba(255,255,255,0) 58%);background-size:300% 100%;background-repeat:no-repeat;
    animation:msShine 4s cubic-bezier(.45,.05,.35,1) .6s infinite}
  @keyframes msShine{0%{background-position:120% 0}75%,100%{background-position:-60% 0}}
  #msNav .ms-btn--dl b{font:800 30px/1 "Kanit",sans-serif;color:#141d4f!important;text-shadow:0 1px 0 rgba(255,250,225,.85),0 -1px 0 rgba(120,70,0,.25)}
  #msNav .ms-btn--dl small{color:#141d4f!important;font:600 14px "Kanit",sans-serif;text-shadow:none}
  #msNav .ms-btn--dl .crown{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:28px;height:15px;opacity:.85;
    background:linear-gradient(180deg,#2a3a86,#141d4f);clip-path:polygon(0 100%,0 20%,22% 60%,50% 0,78% 60%,100% 20%,100% 100%)}
  #msNav .ms-btn--dl:hover{transform:translateY(2px)}
  #msNav.stuck .ms-btn--dl{height:100px;margin-top:-6px;padding-top:20px!important}
  #msNav.stuck .ms-btn--dl b{font-size:23px}
  #msNav.stuck .ms-btn--dl small{font-size:12px}
  #msNav.stuck .ms-btn--dl .crown{top:5px}

  /* Facebook วงกลม */
  #msNav .ms-nav__tabs{display:contents}
  #msNav .ms-nav__tabs a{order:2;position:relative;z-index:1;height:48px;width:48px;padding:0;margin:8px 0 0 10px;border-radius:50%;justify-content:center;
    background:rgba(255,255,255,.92);border:2px solid rgba(242,193,78,.7);box-shadow:0 6px 16px rgba(0,0,0,.3);opacity:1!important;pointer-events:auto!important;
    transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .6s ease,height .3s,width .3s}
  #msNav .ms-nav__tabs a .ms-fb{width:30px;height:30px;font-size:19px}
  #msNav .ms-nav__tabs a > span:last-child{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px) scale(.9);opacity:0;pointer-events:none;white-space:nowrap;
    background:#fff;color:#0e1a3a;padding:6px 12px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:.25s cubic-bezier(.3,1.4,.5,1)}
  #msNav .ms-nav__tabs a:hover > span:last-child{opacity:1;transform:translate(-50%,0) scale(1)}
  #msNav .ms-nav__tabs a:hover{transform:translateY(-2px) scale(1.06)}
  #msNav.stuck .ms-nav__tabs a{height:42px;width:42px;margin-top:6px;transform:none}
  #msNav.scrolling .ms-nav__tabs a{opacity:0!important;transform:translateX(-70px) scale(.5);transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .4s ease .05s}
  .ms-btn--fb{display:none!important}

  /* เส้นทองใต้เมนู */
  #msNav .nav-ink{position:absolute;bottom:8px;left:0;width:0;height:3px;border-radius:3px;pointer-events:none;opacity:0;
    background:linear-gradient(90deg,transparent,#ffe39a 20%,#f2c14e 80%,transparent);box-shadow:0 0 10px rgba(255,210,100,.9);
    transition:left .35s cubic-bezier(.3,.9,.3,1),width .35s cubic-bezier(.3,.9,.3,1),opacity .3s}
}
@media (min-width:761px) and (max-width:1180px){
  #msNav .ms-btn{padding:0 12px}#msNav .ms-btn b{font-size:16px}#msNav .ms-btn small{font-size:11px}
  #msNav .ms-btn--dl{padding-left:24px!important;padding-right:24px!important}#msNav .ms-btn--dl b{font-size:24px}
}

/* ---------- มือถือ ---------- */
@media (max-width:760px){
  .ms-hero{height:300px;background-image:url(../images/header3-mobile.webp)!important;background-position:center 30%!important}
  .ms-hero__title{bottom:70px}
  .ms-hero__title b{font-size:20px;padding:8px 28px 22px}
  .ms-main{margin-top:-40px}
  .ms-nav .ms-btn.ms-btn--fb{flex-direction:row;justify-content:flex-start;gap:12px;background:#fff!important;border-radius:10px;color:#0e1a3a}
  .ms-nav .ms-btn.ms-btn--fb span:last-child{display:flex;flex-direction:column;align-items:flex-start}
  .ms-nav .ms-btn.ms-btn--fb b{color:#0e1a3a;font-size:17px;text-shadow:none}
  .ms-nav .ms-btn.ms-btn--fb small{color:#5d6478}
}
/* เนื้อหาเดิมของแต่ละหน้าออกแบบไว้บนพื้นกรมท่า — ให้การ์ดมีพื้นกรมท่าเสมอ อ่านออกบนพื้นสว่าง */
.ms-card{background:#0e1a3a}
.ms-hero__title small{font-weight:600;letter-spacing:4px;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6)}
/* การ์ดเนื้อหายาวมาก: เอฟเฟกต์เด้งตอนเลื่อนทำให้บางหน้าจางค้าง — ให้แสดงทันทีเสมอ */
.ms-card.fx{opacity:1!important;transform:none!important}

/* ===== v3: หัวข้อเป็นแท็บแฟ้มสีน้ำเงิน ขอบทองไล่สี + โลโก้ Mass ===== */
.ms-hero__title{display:none}
.ms-tabbar{position:absolute;z-index:6;height:0;left:0;top:0;pointer-events:none;margin:0;padding:0;border:0;text-align:left}
.ms-tab{pointer-events:auto}
.ms-tab{position:absolute;left:18px;bottom:0;display:flex;align-items:baseline;gap:12px;padding:10px 26px 9px;
  border:3px solid transparent;border-bottom:0;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#2d56b0,#17306f) padding-box,linear-gradient(180deg,#fff2c2,#f2c14e 45%,#c98e22 80%,#8a5a12) border-box;
  box-shadow:0 -6px 18px rgba(20,40,90,.22);font-family:"Kanit",Tahoma,sans-serif;white-space:nowrap}
.ms-tab::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-3px;height:3px;background:linear-gradient(90deg,#c98e22,#f2c14e 50%,#c98e22)}
.ms-tab b{font-size:24px;font-weight:800;line-height:1.1;background:linear-gradient(180deg,#fff6d5,#ffd866 55%,#e0a83a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.ms-tab small{font-size:12px;font-weight:600;letter-spacing:3px;color:#cfdaf7}
.ms-hlogo{position:absolute;z-index:3;left:27%;margin-left:-100px;top:96px;width:200px;display:block;filter:drop-shadow(0 8px 14px rgba(60,35,5,.45));animation:hlFloat 4.5s ease-in-out infinite}
.ms-hlogo img{display:block;width:100%;height:auto}
.ms-hlogo__shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,240,.95) 47%,rgba(255,236,170,.6) 50%,transparent 58% 100%);
  background-size:300% 100%;background-repeat:no-repeat;mix-blend-mode:screen;
  -webkit-mask:url(../images/mass-logo.webp?v=2) center/100% 100% no-repeat;mask:url(../images/mass-logo.webp?v=2) center/100% 100% no-repeat;
  animation:hlShine 4s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes hlShine{0%{background-position:120% 0}75%,100%{background-position:-60% 0}}
@keyframes hlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.ms-hlogo,.ms-hlogo__shine{animation:none}}
@media (max-width:760px){
  .ms-hlogo{left:34%;top:58px;bottom:auto;width:140px;margin-left:-70px}
  .ms-tab{left:12px;padding:8px 16px 7px;gap:8px;flex-direction:column;align-items:flex-start;gap:0}
  .ms-tab b{font-size:19px}
  .ms-tab small{font-size:10px;letter-spacing:2px}
}
.ms-tab.is-right{left:auto;right:18px}
@media (max-width:760px){.ms-tab.is-right{right:12px}}
.ms-card,.ms-content{overflow:visible!important}

/* ความสูงเริ่มต้นของเนื้อหา: เท่ากับหน้า Game Guide / Database ทุกหน้า */
@media (min-width:761px){body .ms-main{margin-top:-98px}}

/* v7: Download อยู่กลางจอพอดี — ปุ่มซ้าย/ขวากว้างเท่ากัน + ช่องว่างซ้ายเท่าปุ่ม Facebook */
@media (min-width:761px){
  #msNav .ms-nav__bar{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr auto 1fr 1fr;grid-template-rows:100%;align-items:center}
  #msNav .ms-nav__bar > .ms-btn:not(.ms-btn--dl){height:100%}
  #msNav::before{content:"";order:0;flex:none;width:116px;height:1px}
  #msNav.stuck::before{width:104px}
}
@media (min-width:761px){#msNav .ms-btn--dl{min-width:max-content}#msNav .ms-nav__tabs a{flex:none}}
@media (min-width:761px) and (max-width:1100px){#msNav::before{display:none}#msNav .ms-btn{padding-left:10px;padding-right:10px}}
@media (min-width:761px) and (max-width:1100px){#msNav .ms-nav__bar{padding:0 8px}}