/* =====================================================================
   Mist — เลย์เอาต์และตัวอักษรแนว dustin-ro.com (ฟอนต์ Prompt, ขนาดตามต้นแบบ)
   ปรับสีให้เข้ากับโลโก้ MIST (น้ำเงิน-ฟ้า) — โหลดต่อจาก cute.css
   ===================================================================== */
:root{
  --d-nav:rgba(12,30,72,.86); --d-nav-tx:#f2f6ff; --d-nav-sub:#9fb6e0;
  --d-ink:#1d3a6b; --d-ink2:#4a6390; --d-muted:#7d8fb0;
  --d-card-bd:#8fb0dc; --d-line:#c9dcf3;
  --d-blue:linear-gradient(to right,#2e6fd1,#3f8fe6);
  --d-blue-v:linear-gradient(180deg,#4d9ede 0%,#1270ec 100%);
}
html{font-size:15px}
body{font-family:'Prompt',sans-serif!important;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,.plaque,.sec-head h2,.notice-title,.tabs button,.pill-btn,.hex,.btn,.readmore,.sign b,.gpanel-hd h1,.page-title,.woe-tab,.rtabs button,.gc-castle,.tb-list>li>a{font-family:'Prompt',sans-serif!important}

/* ---------- เมนูบน: แถบเข้มโปร่ง ลิงก์ไทยหนา + อังกฤษตัวเล็ก ---------- */
.topbar{background:var(--d-nav)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;box-shadow:0 10px 24px rgba(0,0,0,.22)!important;backdrop-filter:blur(8px)}
.tb-list>li>a:not(.hex){color:var(--d-nav-tx)!important;font-size:16.5px!important;font-weight:600!important;padding:10px 12px!important;border-radius:12px!important;background:transparent!important;line-height:1.15;transform:none!important}
.tb-list>li>a small{font-size:10.5px!important;font-weight:400!important;letter-spacing:1px!important;color:var(--d-nav-sub)!important;text-transform:uppercase}
.tb-list>li>a:not(.hex):hover{background:rgba(255,255,255,.06)!important}
.tb-list>li>a.on{background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 24px rgba(0,0,0,.22)!important}
.tb-list>li>a.on small{color:#cfe0ff!important}
.nav-toggle{color:#fff!important}
.hex{height:42px!important;border-radius:12px!important;font-size:15px!important;font-weight:600!important}
.sub{border-radius:12px!important}
.sub a{font-size:14.5px}

/* ปุ่มหัวเว็บ 3 ปุ่มซ้ำกับปุ่มใหญ่ด้านล่าง: ซ่อนไว้ให้หน้าสะอาดแบบต้นแบบ */
.is-home .pills{display:none}

/* ---------- สไลด์ใหญ่ + ปุ่มด้านขวา ---------- */
.showcase-d{display:grid!important;grid-template-columns:minmax(0,1fr) 400px!important;gap:22px!important;align-items:stretch!important;max-width:1300px!important}
.showcase-d .show-slider{padding:8px!important;border-radius:16px!important;background:#fff!important;border:1px solid var(--d-line)!important;box-shadow:0 12px 28px rgba(18,52,110,.22)!important;display:block!important}
.showcase-d .slides,.showcase-d .slide,.showcase-d .slide img{border-radius:12px!important}
.quick{display:flex;flex-direction:column;gap:14px;min-width:0}
.qbig{position:relative;display:flex;align-items:center;gap:16px;flex:1;min-height:92px;padding:14px 22px;border-radius:18px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#123c86 0%,#1f5fc4 55%,#2f86e8 100%);border:1px solid #0d2f6e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 2px rgba(255,255,255,.08),0 10px 22px rgba(18,52,110,.3);transition:transform .15s,filter .15s}
.qbig::before{content:"";position:absolute;right:-30px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.qbig::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.qbig:hover{transform:translateY(-2px);filter:brightness(1.06);color:#fff}
.qbig:hover::after{left:120%}
.qbig-dl{background:linear-gradient(135deg,#0f6c8e 0%,#16a0c8 55%,#3cc8ec 100%);border-color:#0b5570}
.qbig-ic{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#1f5fc4;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 4px 10px rgba(0,0,0,.25)}
.qbig-dl .qbig-ic{color:#0f89b0}
.qbig-tx{display:flex;flex-direction:column;line-height:1.1;position:relative;z-index:1}
.qbig-tx b{font-size:28px;font-weight:600;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.qbig-tx small{font-size:12px;font-weight:500;letter-spacing:3px;opacity:.85;margin-top:4px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qtile{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,#ffffff,#eef4fc);border:1px solid var(--d-line);
  color:var(--d-ink);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(18,52,110,.12);transition:transform .15s,border-color .15s}
.qtile:hover{transform:translateY(-2px);border-color:#4d9ede;color:var(--d-ink)}
.qtile-ic{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--d-blue-v);color:#fff;box-shadow:0 4px 10px rgba(18,112,236,.3)}
.qtile-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.qtile-tx b{font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtile-tx small{font-size:10px;letter-spacing:1px;color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- ประกาศ ---------- */
.notice{max-width:1300px!important;border-radius:16px!important;border:1px solid var(--d-line)!important;box-shadow:0 6px 20px rgba(0,0,0,.08)!important}
.notice-title{font-size:22px!important;font-weight:700!important;color:var(--d-ink)!important;letter-spacing:.5px!important}
.ntext{font-size:15px}

/* ---------- ข่าว: หัวข้อ NEWS & EVENT + แท็บด้านขวา ---------- */
.news-sec{max-width:1300px!important}
.news-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid var(--d-line);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.news-h{margin:0;font-size:30px;font-weight:700;color:var(--d-ink);letter-spacing:.3px;line-height:1.1}
.news-h small{font-size:17px;font-weight:500;color:var(--d-ink2);margin-left:6px;letter-spacing:0}
.news-head .tabs{margin:0!important;gap:8px!important;justify-content:flex-end}
.news-head .tabs button{height:30px!important;min-width:0!important;padding:0 16px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.8px;text-transform:uppercase;border-radius:18px!important}

/* การ์ดข่าว 4 ใบต่อแถว แบบต้นแบบ */
.ncards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}
.ncard{padding:8px!important;border-radius:16px!important;background:linear-gradient(62deg,#ffffff 0%,#dfe7f2 100%)!important;border:1px solid var(--d-card-bd)!important;box-shadow:0 6px 20px rgba(0,0,0,.08)!important}
.ncard:hover{transform:translateY(-4px)!important;box-shadow:0 14px 30px rgba(18,52,110,.18)!important}
.ncard-img{aspect-ratio:8/5!important;border-radius:12px!important}
.ncard-img>img{width:100%;height:100%;object-fit:cover}
.ncard-body{padding:12px 6px 4px!important}
.ncard-body h3{font-size:18px!important;font-weight:500!important;line-height:1.35!important}
.ncard-body h3 a{color:var(--d-ink)!important}
.ncard-sub{margin:6px 0 0}
.tag{font-size:11.5px!important;font-weight:500!important;padding:1px 10px!important;border-radius:999px!important}
.ago{font-size:12px!important;color:var(--d-ink2)!important}
.readmore{height:22px!important;padding:0 10px!important;font-size:11.9px!important;font-weight:300!important;letter-spacing:.8px!important;border-radius:999px!important;
  background:var(--d-blue)!important;border:0!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)!important}
.pager button{font-size:14px}

/* ---------- ป้ายหัวข้อ RANKING / WAR / FANPAGE ---------- */
.plaque,.plaque-gold{font-size:20px!important;letter-spacing:2px!important;border-radius:14px!important;height:52px!important}

/* ---------- ปุ่มทั่วไป ---------- */
.btn{font-size:15px!important}
.btn-lg{font-size:17px!important}

/* ---------- จอเล็ก ---------- */
@media (max-width:1180px){
  .showcase-d{grid-template-columns:minmax(0,1fr) 340px!important}
  .qbig-tx b{font-size:24px}
  .ncards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:1000px){
  .showcase-d{grid-template-columns:minmax(0,1fr)!important}
  .quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .qbig{padding:12px 14px;gap:12px}
  .qbig-ic{width:46px;height:46px}
  .qbig-tx b{font-size:20px}
  .qbig-tx small{letter-spacing:1.5px}
  .qgrid{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .ncards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .news-head{justify-content:center;text-align:center}
  .news-head .tabs{justify-content:center}
}
@media (max-width:600px){
  .quick{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr 1fr}
  .qbig{min-height:78px}
  .qbig-tx b{font-size:22px}
  .news-h{font-size:24px}
  .news-h small{display:block;margin:4px 0 0;font-size:14px}
  .ncards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .ncard-body h3{font-size:15px!important}
}