/* ธีม WHZ — หน้าตาตามเว็บ warzweb ของ Winghorizon (Bootstrap 5 dark: พื้น #1a1d20 / การ์ด #212529 / แถบ #2b3035 / Mitr / ไอคอนเมนูเหลือง)
   ไม่โหลด Bootstrap จริง — เขียนคลาสชุดเดียวกับธีม 5G (panel / btn / shop-grid …) เพราะ HTML ของแต่ละระบบสร้างจาก Core/Modules/*.cs
   สีทั้งหมดอยู่ใน :root */
:root{
  --bg:#1a1d20;--card:#212529;--card-2:#2b3035;--card-3:#343a40;--line:rgba(255,255,255,.12);
  --text:#dee2e6;--muted:#adb5bd;--white:#fff;
  --primary:#0d6efd;--success:#198754;--danger:#dc3545;--warning:#ffc107;--info:#0dcaf0;--orange:#ffa500;
  --radius:10px;--radius-sm:.375rem;--shadow:0 2px 5px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 Mitr,"Noto Sans Thai",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:#6ea8fe;text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:500;color:var(--white);margin:0 0 10px;line-height:1.3}
p{margin:0 0 10px}
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 12px}
.row{display:flex;flex-wrap:wrap;margin:0 -10px}
.row>*{padding:0 10px}
.col-main{flex:0 0 75%;max-width:75%;order:2}
.col-side{flex:0 0 25%;max-width:25%;order:1}
.col-xs-3{flex:0 0 25%;max-width:25%}.col-xs-4{flex:0 0 33.333%;max-width:33.333%}.col-xs-6{flex:0 0 50%;max-width:50%}.col-xs-12{flex:0 0 100%;max-width:100%}

/* หัวเว็บ: โลโก้กลาง (ชื่อเซิร์ฟสไตล์โลโก้ Winghorizon) */
.logo-container{padding:24px 0 4px;text-align:center}
.logo{display:inline-block;transition:transform .2s ease}
.logo:hover{transform:scale(1.05);text-decoration:none}
.logo span{font-size:52px;font-weight:500;letter-spacing:1px;color:#e00010;text-transform:uppercase;
  -webkit-text-stroke:1.5px #fff;paint-order:stroke fill;text-shadow:0 3px 0 #5c0008,0 0 18px rgba(224,0,16,.35)}
.logo img{height:100px;width:auto;display:block}

/* เมนู: แถบขอบมน + ไอคอนเหลือง */
.navbar{display:flex;align-items:center;flex-wrap:wrap;margin:20px 0;padding:8px 48px;background:var(--card-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.navbar-collapse{display:flex;flex:1;justify-content:space-between;align-items:center}
.nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav>li{position:relative}
.nav>li>a{display:block;padding:8px 14px;color:rgba(222,226,230,.75);border-radius:var(--radius-sm);text-decoration:none}
.nav>li>a .fa{color:var(--warning);margin-right:2px}
.nav>li>a:hover,.nav>li.open>a{color:var(--white)}
.nav>li.active>a{color:var(--white);background:rgba(255,255,255,.06)}
.caret{display:inline-block;width:0;height:0;margin-left:4px;vertical-align:middle;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent}
.dropdown-menu{display:none;position:absolute;left:0;top:calc(100% + 4px);min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);list-style:none;margin:0;padding:6px 0;z-index:20;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.navbar-right .dropdown-menu{left:auto;right:0}
.open>.dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:6px 16px;color:var(--text)}
.dropdown-menu a .fa{color:var(--warning);width:18px}
.dropdown-menu a:hover{background:var(--card-3);color:var(--white);text-decoration:none}
.navbar-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);padding:6px 12px;font:inherit;cursor:pointer}

/* กรอบเนื้อหา = การ์ดใหญ่แบบ warzweb */
.page{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px 4px;margin-bottom:24px}

/* กล่อง */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;box-shadow:0 0 10px rgba(0,0,0,.1);overflow:hidden}
.panel-heading{padding:14px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.panel-title{margin:0;font-size:17px;color:var(--white);text-align:center}
.panel-title .fa{color:var(--warning);margin-right:4px}
.panel-title .fa-chevron-right{display:none}
.panel-body{padding:16px}
.panel-body.narrow{padding:24px 18%}
.panel-default>.panel-heading{background:var(--card-2)}
.fb{display:flex;justify-content:center;overflow:hidden}

/* แถบยอดเงิน (ต่อผู้เล่น) */
.row.balance{margin-bottom:6px}
.balance .panel{margin-bottom:12px;background:linear-gradient(135deg,#0b5ed7,#0a3f91);border:0}
.balance .panel-body{padding:0}
.balance .btn{display:block;background:transparent;border:0;box-shadow:none;cursor:default;padding:10px}
.balance p{margin:0;font-size:13px;color:rgba(255,255,255,.85)}
.balance span{font:700 22px "Noto Sans Thai",Mitr,sans-serif}
.balance span[style]{background:#6c757d;border-radius:var(--radius-sm);padding:1px 10px;display:inline-block;margin-top:2px}

/* ปุ่ม (bg-gradient แบบ Bootstrap) */
.btn{display:inline-block;padding:7px 14px;border-radius:var(--radius-sm);border:1px solid transparent;font:inherit;cursor:pointer;color:var(--white);text-align:center;text-decoration:none;
  background-image:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0));transition:filter .15s}
.btn:hover{text-decoration:none;filter:brightness(1.12)}
.btn:disabled{opacity:.6;cursor:default;filter:none}
.btn-default{background-color:var(--card-3);border-color:var(--line)}
.btn-danger{background-color:var(--primary)}
.btn-success{background-color:var(--success)}
.btn-block{display:block;width:100%}
.btn-lg{padding:10px 16px;font-size:18px}
.text-danger{color:#ea868f}.text-success{color:#75b798}.text-muted{color:var(--muted)}.text-center{text-align:center}
.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-right{text-align:right}.small{font-size:13px}

/* ฟอร์ม */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;color:var(--white);font-weight:500}
.form-group small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.input-group{display:flex}
.input-group-text{display:flex;align-items:center;padding:0 12px;color:var(--text);background:var(--card-3);border:1px solid #495057;border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group .form-control{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.form-control{display:block;width:100%;padding:8px 12px;font:inherit;color:var(--text);background:var(--card-2);border:1px solid #495057;border-radius:var(--radius-sm)}
.form-control:focus{outline:0;border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}
select.form-control{height:auto}
.form-actions{display:flex;gap:8px;justify-content:flex-end}
.hint{margin-top:14px;text-align:center;color:var(--muted)}

/* ตาราง */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:9px 8px;border-top:1px solid var(--line);text-align:left}
.table thead th{border-top:0;border-bottom:1px solid var(--muted);color:var(--white)}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)}
.table.info th{width:40%;color:var(--muted);font-weight:400}
.table.info th .fa{color:var(--warning)}

/* หน้าแรก */
.hero-card{text-align:center;padding:34px 16px;margin-bottom:18px;border-radius:var(--radius);background:linear-gradient(135deg,#0b5ed7,#0a3f91);box-shadow:var(--shadow)}
.hero-card h2{font-size:28px}.hero-card h2 .fa{color:var(--warning)}
.hero-card p{color:rgba(255,255,255,.85)}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 0}
.hero-card .btn-danger{background-color:#fff;color:#0a3f91;font-weight:500}
.dl-links{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.dl-links .btn{padding:14px;background-color:var(--success);border:0}
.dl-links .fa{margin-right:4px}

footer{margin-top:auto;color:var(--muted);font-size:14px;text-align:center;padding:12px 15px 22px}

/* SweetAlert2 ธีมมืด */
.swal2-popup{background:var(--card)!important;color:var(--text)!important;font-family:Mitr,sans-serif!important;border-radius:var(--radius)!important}
.swal2-title,.swal2-html-container{color:var(--white)!important}
.swal2-confirm{background:var(--primary)!important}

/* มือถือ */
@media (max-width:991px){
  .col-main,.col-side{flex:0 0 100%;max-width:100%}
  .col-side{order:3}
  .panel-body.narrow{padding:16px}
  .navbar{padding:8px 16px}
}
@media (max-width:767px){
  .logo span{font-size:32px}
  .navbar-toggle{display:block;margin-left:auto}
  .navbar-collapse{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;margin-top:8px}
  .navbar.show .navbar-collapse{display:flex}
  .nav{flex-direction:column}
  .dropdown-menu{position:static;box-shadow:none;border:0;background:transparent}
  .balance>div{flex:0 0 100%;max-width:100%}
  .page{padding:12px 10px 2px}
}

/* ---- หน้าของแต่ละระบบ ---- */
.price{color:var(--success);font-weight:500}
.shop-card .price,.gacha-head .price{color:#75b798}
.item-icon{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 8px;background:var(--card-2);border:1px solid var(--line);border-radius:8px}
.item-icon.sm{width:40px;height:40px;margin:0}
.item-icon.lg{width:120px;height:120px}
.item-icon.star{display:grid;place-items:center;font-size:40px;color:var(--warning)}
.item-icon.custom{padding:4px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.shop-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.shop-card h4{font-size:16px;margin:4px 0}
.shop-card .btn{margin-top:auto}
.shop-card .btn-danger{background-color:var(--success)}
.gacha-head{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.rar-common{color:var(--text)}.rar-rare{color:#6ea8fe}.rar-epic{color:#c29ffa}.rar-legendary{color:var(--warning);font-weight:500}
.daily-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.daily{background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-align:center}
.daily.past{opacity:.5}
.daily.today{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(13,110,253,.3)}
.daily.today.done{border-color:var(--success);box-shadow:none}
.mission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mission{background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.bar{position:relative;height:16px;background:var(--card-3);border-radius:var(--radius-sm);overflow:hidden;margin:8px 0 4px}
.bar span{display:block;height:100%;background:var(--danger);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%);background-size:16px 16px}
.swatch{display:inline-block;width:22px;height:22px;border-radius:50%;margin-right:6px;border:2px solid var(--line);vertical-align:middle}
.qrbox .qr{width:260px;max-width:100%;background:#fff;padding:10px;border-radius:8px}
.table.promo td{vertical-align:top}

/* หน้าเต็มความกว้าง (หน้าเติมเงิน) */
.row.full>.col-main{flex:0 0 100%;max-width:100%}
.row.full>.col-side{display:none}
.col-8{flex:0 0 66.667%;max-width:66.667%}.col-4{flex:0 0 33.333%;max-width:33.333%}
.row.tp .col-8{order:2}.row.tp .col-4{order:1}

/* หน้าเติมเงิน (แบบ warzweb: ซ้าย = กล่องเติมเงิน / ขวา = โปรโมชั่น) */
.tp-video{position:relative;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden}
.tp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tp-rate{font-size:28px;font-weight:500;color:var(--white);margin:6px 0 14px}
.tp-rate.hot{color:var(--warning)}
.tp-rate b{font-size:1.15em;color:#ea868f}
.tp-promo{display:block;width:100%;max-width:100%;margin:0 auto 12px;border-radius:8px}
.tp-form .panel-heading{background:linear-gradient(135deg,#0b5ed7,#0a3f91)}
.tp-steps{background:#fff;color:#212529;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:16px}
.tp-steps p{margin:0 0 6px;font-size:13px;line-height:1.55;color:#dc3545}
.tp-steps p:nth-child(even){color:#d63384}
.tp-steps .tp-warn{color:#212529;font-weight:500;margin:8px 0 0}
.tp-label{display:block;margin-bottom:5px;color:var(--white)}
.tp-input{margin-bottom:12px}
.tp-form .btn-success{padding:10px 14px;font-weight:500}
@media (max-width:991px){.col-8,.col-4{flex:0 0 100%;max-width:100%}.tp-rate{font-size:22px}}

/* เอฟเฟกต์เต้น (ป้ายโปร) */
.pulse{animation:pulse 2s ease-in-out 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}