/* style.v84.css — CSS ของหน้าเว็บ (ไม่ใช้กับหลังบ้าน — adminsys/style.v08.css) รวมจาก style.v81 + pjchat.v10 + style.v08 ตัดส่วนที่ไม่ได้ใช้ออก 2026-10-20; แก้ CSS แล้วเปลี่ยนเลขเวอร์ชันในชื่อไฟล์ */

/* ===== CSS กลางเดิมของ postjung — ตัวแปรสี (:root / :root.dark), ปุ่ม, pjpop, ฟอร์ม, topusermenu (เดิม style.v81.css) ===== */
:root {
	--dark-bg:#161618;
	--dark-bg2:#212124;
	--dark-bgtransparent: rgba(22,22,24,0.6);
	--dark-text:#d0d0d3;
	--dark-text2:#b0b0b3;
	--dark-text3:#909093;
	--dark-textred:#e22;
	--dark-texthl:#fff;
	--dark-textactive:#fff;
	--dark-link:#fff;
	--dark-linkactive:#d119a6;
	--dark-linkpj:#d119a6;
	--dark-linkpjactive:#fa46d0;
	--dark-border:#545457;
	--dark-bt:#313134;
	--dark-bttext:#b1b1b4;
	--dark-primary:#d119a6;
	--dark-primarytext:#fff;
	--dark-error:#e22;
	--dark-errortext:#fff;
	--bg0:#fff;
	--bg:#fff;
	--bg2:#eee;
	--bg3:#dadada;
	--bg4:#c8c8c8;
	--bgred:#faa;
	--bggreen:#9c9;
	--bgyellow:#ee6;
	--bgorange:#f96;
	--bgbrown:#966;
	--bgpink:#e8d;
	--bgblue:#79e;
	--bgtransparent: rgba(240,240,240,0.6);
	--text:#222;
	--text2:#444;
	--text3:#666;
	--text4:#888;
	--textred:#d00;
	--textgreen:#070;
	--textorange:#d60;
	--textyellow:#870;
	--textbrown:#933;
	--textblue:#04d;
	--textpink:#d119a6;
	--texthl:#000;
	--textactive:#000;
	--link:#000;
	--linkactive:#d119a6;
	--linkpj:#d119a6;
	--linkpjactive:#c922a2;
	--border:#a2a2a2;
	--bt:#c0c0c0;
	--bttext:#333;
	--btborder:#b0b0b0;
	--btactive:#b0b0b0;
	--btactivetext:#000;
	--btactiveborder:#a0a0a0;
	--primary:#d119a6;
	--primarylite:#ec36c1;
	--primarytext:#fff;
	--error:#d00;
	--errortext:#fff;
	color-scheme:light;
}
:root.dark {
	--bg0:#000;
	--bg:#181819;
	--bg2:#28282a;
	--bg3:#38383a;
	--bg4:#48484a;
	--bgred:#811;
	--bggreen:#151;
	--bgyellow:#554700;
	--bgorange:#920;
	--bgbrown:#462222;
	--bgpink:#7c0462;
	--bgblue:#04d;
	--bgtransparent: rgba(22,22,24,0.6);
	--text:#c0c0c0;
	--text2:#a8a8a8;
	--text3:#909090;
	--text4:#787878;
	--textred:#e22;
	--textgreen:#292;
	--textyellow:#dd0;
	--textbrown:#b55;
	--textblue:#69f;
	--textpink:#d119a6;
	--texthl:#eee;
	--textactive:#eee;
	--link:#eee;
	--linkactive:#ff94e6;
	--linkpj:#fa46d0;
	--linkpjactive:#ff94e6;
	--border:#545456;
	--bt:#313133;
	--bttext:#b1b1b4;
	--btborder:#444;
	--btactive:#414143;
	--btactivetext:#e1e1e4;
	--btactiveborder:#555;
	--primary:#d119a6;
	--primarylite:#ec36c1;
	--primarytext:#fff;
	--error:#d22;
	--errortext:#d8d8d8;
	color-scheme:dark;
}
body { margin:0; background-color:var(--bg); font-family:tahoma,Sans-Serif; font-size:11pt; color:var(--text); }
h1 { margin:0; padding:2px 1px; font-size:20pt; }
h2 { margin:0; padding:2px 1px; font-size:16pt; }
h3 { margin:0; padding:2px 1px; font-size:13pt; }
a { text-decoration:none; color:var(--link); }
a:hover { color:var(--linkactive); }
form { margin:0; }
::selection { background-color: var(--primary); color: var(--primarytext); }
#topbar { z-index:1; position:fixed; left:0; top:0; width:100%; max-width:100vw; min-height:44px; padding:0; background-color:#d119a6; }
.top_restrict { display:block; box-sizing:border-box; width:98%; max-width:800px; margin:20px auto; padding:5px; border-radius:10px; background-color:var(--bgred); text-align:center; font-size:11pt; color:var(--text); cursor:pointer; }
.top_restrict:hover { color:var(--texthl); }
#toplogo { display:inline-block; box-sizing:border-box; width:105px; height:44px; margin:0 0 0 6px; padding:12px 0 0 0; vertical-align:middle; background-repeat:no-repeat; background-size:contain; background-position:center center; font-size:14pt; color:#eee; }
#topbarback { max-width:100%; height:76px; margin-bottom:7px; transition:height 1s; }
.topusermenubg { z-index:20; position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:var(--dark-bgtransparent); backdrop-filter:blur(8px); }
.topusermenu { z-index:21; position:fixed; top:0; right:0; width:100vw; max-width:400px; height:100vh; overflow:hidden; background-color:var(--dark-bgtransparent); backdrop-filter:blur(8px); color:var(--dark-text2); }
.topusermenu .xclosebt { float:right; width:50px; height:50px; cursor:pointer; color:var(--dark-text2); }
.topusermenu .xclosebt:hover { color:var(--dark-textred); }
.topusermenu .xuser { display:block; padding:14px 0 0 16px; color:var(--dark-text); }
.topusermenu .xuser:hover { color:var(--dark-primary); }
.topusermenu .xuser img { width:48px; height:48px; border-radius:50%; vertical-align:middle; }
.topusermenu .xuser .xname { display:inline-block; box-sizing:border-box; width:calc(100% - 118px); overflow:hidden; padding:0 0 0 8px; vertical-align:middle; white-space:nowrap; text-overflow:ellipsis; font-size:24pt; }
.topusermenu .xbody { clear:both; box-sizing:border-box; width:100%; height:calc(100% - 50px); padding:10px 10px 60px 10px; overflow-x:hidden; overflow-y:auto; }
.topusermenu .xbt, .topusermenu .xbt2 { display:inline-block; box-sizing:border-box; margin:6px; padding:20px 10px; border-radius:20px; background-color:var(--dark-bg2); text-align:center; font-size:14pt; color:var(--dark-text2); cursor:pointer; }
.topusermenu .xbt { width:calc(100% - 12px); }
.topusermenu .xbt2 { width:calc(50% - 12px); }
.topusermenu .xbt:hover, .topusermenu .xbt2:hover { background-color:var(--dark-bg); color:var(--dark-primary); }
.topusermenu .xbt svg, .topusermenu .xbt2 svg { box-sizing:border-box; width:72px; height:72px; }
.topusermenu .xbt .xtitle, .topusermenu .xbt2 .xtitle { display:inline-block; box-sizing:border-box; width:100%; }
@keyframes topusermenu_show {
	from { opacity:0; transform:translateX(300px); }
	to { opacity:1; transform:translateX(0px); }
}
@keyframes topusermenu_close {
	from { opacity:1; transform:translateX(0px); }
	to { opacity:0; transform:translateX(300px); }
}
.bt { display:inline-block; box-sizing:border-box; max-width:100%; padding:8px 14px; border-radius:5px; border:1px solid var(--btborder); background-color:var(--bt); vertical-align:top; text-align:center; font-size:14pt; text-decoration:none; color:var(--bttext); cursor:pointer; }
.bt:hover { background-color:var(--btactive); color:var(--btactivetext); }
.bt img { vertical-align:middle; }
.bt.pj { border-color:#ac1d23; background-color:#ac1d23; color:#ffccae; }
.bt.pj:hover { border-color:#cd2e36; color:#ffffff; }
.bt.red { background-color:var(--bgred); color:var(--text); }
.bt.red:hover { border-color:var(--textred); color:var(--text); }
.bt.green { background-color:var(--bggreen); color:var(--text); }
.bt.green:hover { border-color:var(--textgreen); color:var(--text); }
.bt.yellow { background-color:var(--bgyellow); color:var(--text); }
.bt.yellow:hover { border-color:var(--textyellow); color:var(--text); }
.bt.small { padding:6px 8px; font-size:12pt; }
.pagebar { padding:5px 0 10px 0; text-align:center; font-size:14pt; font-weight:normal; }
.pagebar a { display:inline-block; box-sizing:border-box; min-width:5%; margin:5px 0 0 5px; padding:7px 5px; border:1px solid var(--bg2); background-color:var(--bg2); text-align:center; white-space:nowrap; color:var(--text3); }
.pagebar a:first-child { margin-left:0; }
.pagebar a:hover { border-color:var(--bg3); background-color:var(--bg3); color:var(--text); }
.pagebar .xnav { min-width:10%; padding:7px 10px; }
.pagebar .xcur { padding:7px 10px; border-color:var(--text4); background-color:var(--bg2); font-weight:bold; color:var(--text); }
.pagebar span { display:inline-block; margin:5px 0 0 5px; padding:7px; color:var(--text4); }
.note { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--bg3); background-color:var(--bg2); text-align:center; font-size:18pt; color:var(--text); }
.complete { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--textgreen); background-color:var(--bggreen); text-align:center; font-size:20pt; color:var(--text); }
.none { margin:20px 0; padding:70px 5px; border-radius:15px; border:2px solid var(--bg3); background-color:var(--bg2); text-align:center; font-size:18pt; color:var(--text3); font-style:italic; }
.warn { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--textyellow); background-color:var(--bgyellow); text-align:center; font-size:18pt; color:var(--text); }
.error { margin:20px 0; padding:30px 5px; border-radius:15px; border:2px solid var(--textred); background-color:var(--bgred); text-align:center; font-size:18pt; color:var(--text); }
.switchmenu { display:inline-block; box-sizing:border-box; padding:5px; vertical-align:middle; white-space:nowrap; font-size:14pt; }
.switchmenu .xbt { display:inline-block; box-sizing:border-box; padding:5px 8px; border:1px solid var(--bg4); background-color:var(--bg2); vertical-align:middle; white-space:normal; text-decoration:none; color:var(--text2); cursor:pointer; }
.switchmenu .xbt:first-child { border-radius:8px 0 0 8px; }
.switchmenu .xbt:last-child { border-radius:0 8px 8px 0; }
.switchmenu .xbt:hover { border-color:var(--border); }
.switchmenu .xbt.active { border-color:var(--text); background-color:var(--text2); color:var(--bg); }
.switchmenu .xbt.red, .switchmenu .xbt.red:hover { color:var(--textred); }
.switchmenu .xbt.red.active { border-color:var(--textred); background-color:var(--bgred); color:var(--texthl); }
.switchmenu .xbt.green, .switchmenu .xbt.green:hover { color:var(--textgreen); }
.switchmenu .xbt.green.active { border-color:var(--textgreen); background-color:var(--bggreen); color:var(--texthl); }
.switchmenu .xbt.yellow, .switchmenu .xbt.yellow:hover { color:var(--textyellow); }
.switchmenu .xbt.yellow.active { border-color:var(--textyellow); background-color:var(--bgyellow); color:var(--texthl); }
.switchmenu .xbt.brown, .switchmenu .xbt.brown:hover { color:var(--textbrown); }
.switchmenu .xbt.brown.active { border-color:var(--textbrown); background-color:var(--bgbrown); color:var(--texthl); }
.switchmenu .xbt.pink, .switchmenu .xbt.pink:hover { color:var(--textpink); }
.switchmenu .xbt.pink.active { border-color:var(--textpink); background-color:var(--bgpink); color:var(--texthl); }
.table1 { border-collapse:collapse; border:1px solid var(--bg3); background-color:var(--bg); }
.table1 th { padding:2px; border-width:0 0 1px 0; border-style:solid; border-color:var(--bg3); vertical-align:middle; text-align:center; background-color:var(--bg2); }
.table1 td { padding:3px 2px 2px 2px; border-width:0 0 1px 0; border-style:solid; border-color:var(--bg3); vertical-align:top; text-align:left; }
.mainbox { max-width:990px; margin:0 auto; padding:5px; }
.pjpop { z-index:101; position:fixed; top:150px; left:50%; box-sizing:border-box; width:600px; min-height:100px; margin:0 0 0 -320px; padding:0; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,0.5); background-color:var(--dark-bg); text-align:left; font-size:14pt; color:var(--dark-text); }
.pjpop .xibox { padding:15px; overflow:auto; }
.pjpop a { color:var(--dark-link); }
.pjpop a:hover { color:var(--dark-linkactive); }
.pjpop_bg { z-index:100; position:fixed; top:0; left:0; width:100%; height:100%; background-color:var(--dark-bgtransparent); backdrop-filter:blur(8px); }
.pjpop_msgbox { padding:0 5px; text-align:center; }
.pjpop_msgdiv { padding:0 0 10px 0; text-align:center; }
.pjpop .xtitlebar { width:100%; white-space:nowrap; }
.pjpop .xtitletext { display:inline-block; box-sizing:border-box; width:calc(100% - 50px); height:44px; overflow:hidden; padding:7px 0 0 12px; vertical-align:top; font-size:16pt; text-overflow:ellipsis; line-height:34px; }
.pjpop .xclosebt { display:inline-block; box-sizing:border-box; width:50px; height:44px; padding:6px 0 0 0; vertical-align:top; text-align:center; font-size:32px; line-height:32px; color:var(--dark-linkpj); cursor:pointer; }
.pjpop .xclosebt:hover { color:var(--dark-linkpjactive); }
.pjpop form { margin:0; padding:0; }
.pjpop .xbtbar { padding:10px 0; text-align:center; }
.pjpop .xbtbar > * { margin:10px 0 0 10px; }
.pjpop .xbtbar > *:first-child { margin-left:0; }
.pjpop .xbt { display:inline-block; box-sizing:border-box; padding:7px 20px; border-radius:8px; border:none; outline:none; background-color:var(--dark-bt); font-size:14pt; color:var(--dark-bttext) !important; cursor:pointer; }
.pjpop .xbt:hover, .pjpop a.xbt:hover { color:var(--dark-bttext); }
.pjpop a.xbt:hover, .pjpop .xbt:hover { filter:brightness(1.2); color:var(--dark-primarytext); }
.pjpop .xbt:disabled, .pjpop .xbt:disabled:hover { filter:brightness(0.6); }
@keyframes pjpop_show {
	from { opacity:0; transform:scaleY(0); }
	to { opacity:1; transform:scaleY(1); }
}
@keyframes pjpop_bg_show {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes pjpop_close {
	from { opacity:1; transform:scaleY(1); }
	to { opacity:0; transform:scaleY(0); }
}
@keyframes pjpop_bg_close {
	from { opacity:1; }
	to { opacity:0; }
}
.pjform { display:block; box-sizing:border-box; width:100%; margin:10px auto; text-align:center; font-size:14pt; }
.pjform .xtitle { padding:15px 0 5px 0; text-align:left; font-size:16pt; color:var(--text2); }
.pjform .xline { padding:5px 0; }
.pjform .xlabel { display:inline-block; box-sizing:border-box; width:24%; padding:5px 2px 2px 2px; vertical-align:top; text-align:right; font-size:14pt; }
.pjform .xvalue { display:inline-block; box-sizing:border-box; width:calc(75% - 20px); margin:0 0 0 10px; padding:5px 2px; vertical-align:top; text-align:left; }
.pjform .xlabel i, .pjform .xvalue i { font-style:normal; font-size:11pt; color:var(--text3); }
.pjform select, .pjform input[type=number], .pjform input[type=password], .pjform input[type=email], .pjform input[type=text] { box-sizing:border-box; max-width:100%; height:40px; vertical-align:top; font-size:14pt; }
.pjform input[type=submit], .pjform input[type=button] { box-sizing:border-box; height:40px; font-size:14pt; }
.pjform input[type=button] { min-width:80px; }
.pjform input[type=submit] { min-width:140px; }
.pjform textarea { box-sizing:border-box; width:100%; height:200px; font-size:12pt; }
.pjform .xchoice { padding:5px 0; text-align:left; }
.pjform .xchoice input[type=checkbox], .pjform .xchoice input[type=radio] { box-sizing:border-box; width:28px; height:28px; vertical-align:top; }
.pjform .xchoice label { display:inline-block; box-sizing:border-box; max-width:calc(100% - 48px); margin:0 0 0 7px; padding:5px 0; vertical-align:top; }
.pjform .xsubmitbar { padding:15px 0 10px 0; text-align:center; }
.aninput { position:relative; padding:20px 0 10px 0; height:40px; }
.aninput label { position:absolute; left:2px; top:28px; display:block; box-sizing:border-box; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14pt; color:var(--dark-text2); transition:top 0.4s, left 0.4s, font-size 0.4s; }
.aninput input[type='number'], .aninput input[type='password'], .aninput input[type='email'], .aninput input[type='text'] { position:absolute; left:0; top:20px; box-sizing:border-box; width:100%; height:40px; border-width:0 0 2px 0; border-color:var(--dark-border); border-style:solid; outline:none; background-color:transparent; font-size:14pt; color:var(--dark-text); transition:border 0.2s; }
.aninput.active label { left:0; top:4px; font-size:11pt; color:var(--dark-textactive); }
.aninput.focus input[type='number'], .aninput.focus input[type='password'], .aninput.focus input[type='email'], .aninput.focus input[type='text'] { border-width:0 0 5px 0; border-color:var(--dark-primary); }
.pjmenubox { position:absolute; display:block; box-sizing:border-box; width:200px; min-height:50px; border-radius:10px; background-color:var(--bgtransparent); backdrop-filter:blur(7px); font-size:14pt; }
.pjmenubox .xbt { display:block; padding:10px 10px 10px 12px; border-top:1px solid var(--border); color:var(--texthl); cursor:pointer; }
.pjmenubox .xbt:hover { background-color:var(--bgtransparent); }
.pjmenubox .xbt:first-of-type { border-top:none; }
.pjmenubox .xbt:first-child { border-radius:10px 10px 0 0; }
.pjmenubox .xbt:last-child { border-radius:0 0 10px 10px; }
.pjmenubox .xbt.xred { color:var(--textred); }
.pjmenubox .xbt.xclosebt { padding:0 5px; text-align:center; cursor:pointer; }
.pjmenubox .xbt.xclosebt svg { width:44px; height:44px; vertical-align:middle; }
@keyframes ani_fadein {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes ani_fadeout {
	from { opacity:1; }
	to { opacity:0; }
}
@media (max-width:650px) {
	#topbarback { height:48px; }
	.pjpop { left:1%; width:98%; margin-left:0; }
}
@media(max-width:600px) {
	.pjform .xlabel { display:block; width:100%; text-align:left; }
	.pjform .xlabel:empty { display:none; }
	.pjform .xvalue { display:block; width:100%; margin-left:2px; }
}
@media (max-width:500px) {
	.pagebar a { min-width:12%; }
}
@media (max-width:450px) {
	#toplogo { width:90px; }
}
@media (max-width:400px) {
	#toplogo { width:80px; }
}
@media (max-width:370px) {
	#toplogo { width:70px; }
}
@media (max-width:340px) {
	#toplogo { width:60px; }
	.pagebar a, .pagebar span { margin-left:2px; padding:7px 4px; }
}

/* ===== ส่วนที่ pjchat เพิ่ม/ปรับ — แถบบน, หน้า my/, ปุ่มโหมดมืด, สีโหมดมืดที่ทับ CSS ของหน้าต่าง ๆ (เดิม pjchat.v10.css) ===== */
#topbarback { height:54px; }
#topbar { z-index:20; display:flex; align-items:center; gap:12px; box-sizing:border-box; height:50px; padding:0 10px; overflow:hidden; white-space:nowrap; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
#topbar a { color:#fff; }
#topbar a:hover { color:#fdc1ef; }
#toplogo { display:flex; align-items:center; flex-shrink:0; width:auto; height:50px; margin:0; padding:0; }
#toplogo img { display:block; width:69px; height:40px; }
#topbar .xuser { margin-left:auto; }
#topbar .xlogin { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:0 !important; color:#fdc1ef; }
#topbar .xlogin:hover { color:#fff; }
#topbar .xlogin svg { width:32px; height:32px; }
.memberbox { max-width:420px; margin:24px auto; padding:0 16px; }
.memberbox h1 { margin:16px 0; font-size:20pt; color:var(--textpink); }
.memberform label { display:block; margin:14px 0 4px 0; color:var(--text2); }
.memberform input[type=tel], .memberform input[type=text], .memberform input[type=password], .memberform input[type=file] { box-sizing:border-box; width:100%; padding:10px; border:1px solid var(--border); border-radius:5px; background-color:var(--bg); font-size:14pt; color:var(--text); }
.memberform select, .memberform textarea { box-sizing:border-box; width:100%; padding:10px; border:1px solid var(--border); border-radius:5px; background-color:var(--bg); font-size:14pt; font-family:inherit; color:var(--text); }
.memberform textarea { height:180px; resize:vertical; }
.memberform .xhp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.memberform input.bt { width:100%; margin-top:20px; border-color:var(--primary); background-color:var(--primary); color:var(--primarytext); }
.memberform input.bt:hover { background-color:var(--primarylite); color:var(--primarytext); }
.memberbox .xerror, .memberbox .xok { margin:10px 0; padding:10px; border-radius:5px; color:var(--text); }
.memberbox .xerror { border:1px solid var(--textred); background-color:var(--bgred); }
.memberbox .xok { border:1px solid var(--textgreen); background-color:var(--bggreen); }
.memberbox .xlinks { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.memberbox .xlinks a { color:var(--linkpj); }
#chatmenu svg.xicon.xguest { color:#888; }
#topbar .xavatar { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:0 !important; }
#topbar .xavatar img { width:34px; height:34px; border-radius:50%; object-fit:cover; background-color:rgba(255,255,255,.25); box-shadow:0 0 0 2px rgba(255,255,255,.7); }
#topbar .xavatar:hover img { box-shadow:0 0 0 2px #fdc1ef; }
#topbar .xtheme { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:0 !important; padding:0; border:0; background:none; color:#fdc1ef; cursor:pointer; }
#topbar .xtheme:hover { color:#fff; }
#topbar .xtheme svg { width:26px; height:26px; }
#topbar .xtheme .xsun, :root.dark #topbar .xtheme .xmoon { display:none; }
:root.dark #topbar .xtheme .xsun { display:block; }
:root.dark #chatmenu svg.xicon.xguest { color:#777; }
:root.dark .spsh { color:#8aa4dc; }
:root.dark .spsh .xx .xi { background-color:#444; }
:root.dark #listbox .xm { background-color:#2c5a7e; }
:root.dark #listbox .xm:hover { background-color:#356a93; }
:root.dark #listbox .xw, :root.dark #listbox .xt { background-color:#7a3a71; }
:root.dark #listbox .xw:hover, :root.dark #listbox .xt:hover { background-color:#8c4482; }
:root.dark #listbox .xlink { color:#eee; }
:root.dark #listbox .xm .xinfo, :root.dark #listbox .xw .xinfo, :root.dark #listbox .xt .xinfo { color:#ddd; }
:root.dark #listbox .xnotpass .xmsg { color:var(--text3); }
:root.dark #listbox .xmsglabel { background-color:var(--bg4); color:var(--text); }
:root.dark #listbox .xmsglabel.yellow { background-color:var(--bgyellow); color:#ee6; }
:root.dark #listbox .xmsglabel.red { background-color:var(--bgred); color:#fcc; }
:root.dark #listbox .xinfo { color:var(--text2); }
:root.dark #listbox .xbt { color:#bbb; }
:root.dark #listbox .xbt:hover { color:var(--texthl); }
:root.dark #panelbox .xlistbox .xonline { border-color:var(--bg); }
:root.dark .spbox .xlink { background-color:var(--bg2); color:var(--text3); }
:root.dark .spbox .xlink:hover { background-color:var(--bg3); color:var(--texthl); }
:root.dark .spres { box-shadow:none; background-color:var(--bg2); color:#f99; }

/* ===== เมนูแชท (#chatmenu, inc-menu.php) + ความกว้างหน้า (เดิม style.v08.css) ===== */
h1 { max-width:990px; margin:0 auto; }
.mainbox { width:auto; max-width:990px; }
#chatmenu { margin:0 0 20px 0; padding:10px 0 0 0; border-bottom:4px solid var(--primary); text-align:center; white-space:nowrap; overflow-x:auto; }
#chatmenu .xmenu { display:inline-block; box-sizing:border-box; min-height:60px; padding:10px 20px; vertical-align:bottom; text-align:left; font-size:18pt; color:var(--text2); }
#chatmenu .xicon { width:56px; height:56px; margin:0 5px 0 0; border-style:none; vertical-align:middle; }
#chatmenu .xuicon { border-radius:50%; }
#chatmenu .xmenu:hover { color:var(--linkactive); }
#chatmenu .xmenu:hover .xuicon { opacity:1; }
#chatmenu .xmenu.active { margin:0 10px 0 10px; background-color:var(--primary); border-radius:10px 10px 0 0; color:var(--primarytext); }
#chatmenu .xmenu.active .xicon { filter:brightness(8); }
@media(max-width:900px) {
	#chatmenu .xmenu { font-size:12pt; }
	#chatmenu .xmenu b { font-size:16pt; }
}
@media(max-width:800px) {
	#chatmenu .xmenu { text-align:center; font-size:12pt; }
	#chatmenu .xmenu .xicon { width:40px; height:40px; }
	#chatmenu .xmenu .xlabel { display:block; box-sizing:border-box; }
}
@media(max-width:500px) {
	#chatmenu .xmenu { padding-left:8px; padding-right:8px; }
}
@media(max-width:400px) {
	#chatmenu .xmenu { font-size:11pt; }
}