/* w88thai.ink — utility "ทางเข้า W88 / แก้เข้าไม่ได้" (tech/status theme) */
:root {
  --dx-bg: #0c1118;
  --dx-panel: #141b26;
  --dx-panel-2: #10161f;
  --dx-line: #263141;
  --dx-ink: #e8eef7;
  --dx-dim: #8a99ad;
  --dx-gold: #f5b823;
  --dx-gold-d: #a67a05;
  --dx-ok: #22c55e;
  --dx-warn: #ef4444;
  --dx-r: 10px;
  --dx-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans Thai", "Sarabun", "Segoe UI", Tahoma, sans-serif;
  background: var(--dx-bg); color: var(--dx-ink); line-height: 1.72;
}
a { color: var(--dx-gold); text-decoration: none; }
code { font-family: var(--dx-mono); background: var(--dx-panel-2); border: 1px solid var(--dx-line); border-radius: 6px; padding: 1px 7px; color: var(--dx-gold); font-size: .92em; }

/* top bar */
.dx-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: rgba(12,17,24,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--dx-line); }
.dx-logo { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.dx-logo b { color: var(--dx-gold); }
.dx-menu { display: none; margin-left: auto; gap: 20px; font-size: .92rem; font-weight: 600; }
.dx-menu a { color: var(--dx-dim); }
.dx-menu a.on, .dx-menu a:hover { color: var(--dx-ink); }
.dx-burger { margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--dx-line); border-radius: 8px; background: var(--dx-panel); cursor: pointer; display: grid; place-items: center; }
.dx-burger span { display: block; width: 18px; height: 2px; background: var(--dx-ink); margin: 2px 0; }
.dx-drawer { position: fixed; inset: 0; z-index: 50; display: none; background: rgba(4,7,12,.7); }
.dx-drawer.on { display: block; }
.dx-drawer-in { position: absolute; top: 0; right: 0; width: min(78vw,320px); height: 100%; background: var(--dx-panel); border-left: 1px solid var(--dx-line); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.dx-drawer-in a { color: var(--dx-ink); padding: 12px 10px; border-radius: 8px; font-weight: 600; }
.dx-drawer-in a.on { background: var(--dx-panel-2); color: var(--dx-gold); }
.dx-x { align-self: flex-end; background: none; border: 0; color: var(--dx-dim); font-size: 1.5rem; cursor: pointer; }

/* container */
.dx-wrap { max-width: 820px; margin: 0 auto; padding: 26px 16px; }

/* status banner */
.dx-status { max-width: 820px; margin: 22px auto 0; padding: 0 16px; }
.dx-status-box { border: 1px solid var(--dx-line); border-radius: 14px; background: linear-gradient(180deg, var(--dx-panel), var(--dx-panel-2)); padding: 22px; }
.dx-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; padding: 6px 14px; border-radius: 999px; }
.dx-badge.ok { background: rgba(34,197,94,.13); color: var(--dx-ok); border: 1px solid rgba(34,197,94,.3); }
.dx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dx-ok); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: dxpulse 2s infinite; }
@keyframes dxpulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.dx-status-box h1 { font-size: clamp(1.35rem, 5vw, 2rem); margin: 14px 0 4px; line-height: 1.3; }
.dx-status-box h1 b { color: var(--dx-gold); }
.dx-status-box .meta { color: var(--dx-dim); font-size: .9rem; font-family: var(--dx-mono); }
.dx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dx-btn { font-weight: 800; border-radius: var(--dx-r); padding: 13px 24px; font-size: 1rem; text-align: center; }
.dx-btn-go { background: linear-gradient(135deg, var(--dx-gold), var(--dx-gold-d)); color: #160f00; box-shadow: 0 5px 16px rgba(245,184,35,.25); }
.dx-btn-alt { border: 1.5px solid var(--dx-line); color: var(--dx-ink); }

/* content */
.dx-doc h2 { font-size: 1.3rem; margin: 30px 0 10px; padding-top: 6px; }
.dx-doc h2 .n { color: var(--dx-gold); font-family: var(--dx-mono); margin-right: 8px; }
.dx-doc h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.dx-doc p, .dx-doc li { color: var(--dx-ink); }
.dx-doc p { margin: 8px 0; }
.dx-doc ul, .dx-doc ol { padding-left: 22px; margin: 8px 0 14px; }
.dx-doc li { margin-bottom: 6px; }
.dx-lead { color: var(--dx-dim); font-size: 1rem; }

/* step cards */
.dx-steps { display: grid; gap: 12px; margin: 14px 0; }
.dx-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; background: var(--dx-panel); border: 1px solid var(--dx-line); border-radius: var(--dx-r); padding: 14px 16px; }
.dx-step .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--dx-gold), var(--dx-gold-d)); color: #160f00; }
.dx-step h4 { font-size: 1rem; margin-bottom: 2px; }
.dx-step p { color: var(--dx-dim); font-size: .93rem; margin: 2px 0; }

/* DNS values highlight */
.dx-dns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.dx-dns div { flex: 1; min-width: 150px; background: var(--dx-panel-2); border: 1px solid var(--dx-line); border-radius: var(--dx-r); padding: 12px 16px; text-align: center; }
.dx-dns .lbl { color: var(--dx-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.dx-dns .val { font-family: var(--dx-mono); font-size: 1.25rem; color: var(--dx-gold); font-weight: 700; margin-top: 3px; }

/* tabs (device) */
.dx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.dx-tabs button { border: 1px solid var(--dx-line); background: var(--dx-panel); color: var(--dx-dim); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.dx-tabs button.on { background: rgba(245,184,35,.12); border-color: var(--dx-gold); color: var(--dx-gold); }
.dx-pane { display: none; }
.dx-pane.on { display: block; }

/* callout */
.dx-note { border-left: 3px solid var(--dx-gold); background: rgba(245,184,35,.07); border-radius: 0 var(--dx-r) var(--dx-r) 0; padding: 12px 15px; margin: 14px 0; font-size: .93rem; color: var(--dx-dim); }
.dx-note.warn { border-left-color: var(--dx-warn); background: rgba(239,68,68,.07); }

/* faq */
.dx-faq { display: grid; gap: 10px; margin-top: 12px; }
.dx-faq-i { background: var(--dx-panel); border: 1px solid var(--dx-line); border-radius: var(--dx-r); overflow: hidden; }
.dx-faq-q { padding: 14px 16px; font-weight: 700; cursor: pointer; position: relative; padding-right: 36px; }
.dx-faq-q::after { content: "+"; position: absolute; right: 16px; color: var(--dx-gold); }
.dx-faq-i.open .dx-faq-q::after { content: "\2212"; }
.dx-faq-a { display: none; padding: 0 16px 14px; color: var(--dx-dim); font-size: .93rem; }
.dx-faq-i.open .dx-faq-a { display: block; }

/* cross-links */
.dx-cards { display: grid; gap: 12px; margin: 16px 0; }
.dx-card { background: var(--dx-panel); border: 1px solid var(--dx-line); border-radius: var(--dx-r); padding: 16px; }
.dx-card h3 { font-size: 1rem; margin-bottom: 4px; }
.dx-card p { color: var(--dx-dim); font-size: .9rem; }

/* footer */
.dx-foot { border-top: 1px solid var(--dx-line); background: var(--dx-panel-2); margin-top: 34px; }
.dx-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: .9rem; }
.dx-foot-nav a { color: var(--dx-dim); }
.dx-foot p { color: var(--dx-dim); font-size: .85rem; }
.dx-warn-box { border: 1px solid rgba(245,184,35,.25); background: rgba(245,184,35,.06); border-radius: var(--dx-r); padding: 12px 14px; margin: 14px 0; font-size: .84rem; color: var(--dx-dim); }
.dx-fine { font-size: .8rem; padding-bottom: 10px; }

@media (min-width: 760px) {
  .dx-menu { display: flex; }
  .dx-burger { display: none; }
  .dx-steps { gap: 14px; }
  .dx-cards { grid-template-columns: repeat(3, 1fr); }
}
/*os:css*/
:root{--dx-gold2:var(--dx-gold-d)}
/* OneSignal push button + prompt */
.dx-bell{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 11px;border:1.5px solid var(--dx-gold);border-radius:999px;background:rgba(255,255,255,.04);color:var(--dx-gold);font:inherit;font-weight:700;font-size:.86rem;line-height:1;cursor:pointer;white-space:nowrap}
.dx-bi{width:18px;height:18px;flex:none}.dx-bell .dx-bl{display:none}
.dx-bell.on,.dx-pushd.on{background:var(--dx-gold);color:#120c00;border-color:var(--dx-gold);cursor:default}
.dx-bell+.dx-burger{margin-left:0}
.dx-pushd{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:12px;border:1.5px solid var(--dx-gold);border-radius:var(--dx-r);background:none;color:var(--dx-gold);font:inherit;font-weight:700;cursor:pointer}
@media(min-width:760px){.dx-bell{margin-left:0}.dx-bell .dx-bl{display:inline}}
.dx-pp{position:fixed;top:12px;left:12px;right:12px;z-index:60;margin:0 auto;max-width:560px;display:flex;gap:14px;align-items:center;padding:20px 16px 16px;background:var(--dx-panel);color:var(--dx-ink);border:1px solid var(--dx-line);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.6);animation:dx-ppin .38s ease-out}
.dx-pp[hidden]{display:none}@keyframes dx-ppin{from{transform:translateY(-130%);opacity:0}to{transform:none;opacity:1}}
.dx-pp>img{width:110px;max-width:30%;height:auto;flex:none}
.dx-ppx{position:absolute;top:2px;right:6px;background:none;border:0;color:var(--dx-dim);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px 8px}
.dx-ppb{flex:1;min-width:0}.dx-ppt{font-weight:800;color:var(--dx-gold);font-size:1.02rem;margin:0 0 4px;line-height:1.3}
.dx-ppb p{margin:0;font-size:.88rem;line-height:1.45}
.dx-ppa{display:flex;gap:10px;margin-top:12px}.dx-ppa button{flex:1;min-width:0;font:inherit;font-weight:800;border:0;border-radius:999px;padding:11px 6px;cursor:pointer;font-size:.9rem;white-space:nowrap}
.dx-ppa [data-pp-yes]{background:linear-gradient(135deg,var(--dx-gold),var(--dx-gold2));color:#120c00}.dx-ppa [data-pp-no]{background:rgba(255,255,255,.12);color:var(--dx-ink)}
@media(max-width:420px){.dx-pp{gap:10px;padding:18px 12px 14px}.dx-pp>img{width:84px}}
.dx-pp{z-index:1000}
/*/os:css*/