/* หน้าอัลบัม (show.php) — เดิม picpost/show.v40.css ตัดส่วนโฆษณา/facebook comment */

#mainbox2 { width:96%; max-width:1600px; }

h1 { margin:0; padding:10px 0 0 0; font-size:28pt; }

.sph1desc { display:inline-block; margin:10px 5px 0 5px; color:var(--text3); }
.sppostby { display:inline-block; vertical-align:middle; }
.sph1desc .xicon { width:28px; height:28px; border-radius:50%; vertical-align:middle; }
.sph1desc a { display:inline-block; vertical-align:middle; color:var(--text3); }
.sph1desc a:hover { color:var(--linkactive); }

.spnotfound { width:97%; box-sizing:border-box; max-width:800px; margin:50px auto; padding:20px 10px; background-color:var(--bg3); font-size:11pt; color:var(--text); }
.spnotfound .xtitle { padding:10px 5px; background-color:var(--bgred); font-size:16pt; }
.spnotfound .xtail { text-align:center; }
.spnotfound li { padding-bottom:7px; }

.spsharebox { z-index:1; position:absolute; box-sizing:border-box; width:90%; max-width:200px; min-height:100px; padding:0 5px 5px 5px; border-radius:5px; background-color:var(--bg3); font-size:10pt; color:var(--text); }
.spsharebox::before { content:''; position:absolute; top:-23px; right:8px; display:block; width:0; height:0; border:12px solid rgba(0,0,0,0); border-bottom-color:var(--bg3); }
.spsharebox .xclosebt { float:right; display:block; width:36px; height:36px; text-align:center; font-size:26px; line-height:30px; color:var(--text3); cursor:pointer; }
.spsharebox .xclosebt:hover { color:var(--text); }
.spsharebox .xtitle { box-sizing:border-box; height:40px; padding:2px 0 0 5px; font-size:16pt; line-height:36px; }
.spsharebox .xurl { padding:5px; }
.spsharebox .xurl input { box-sizing:border-box; height:36px; vertical-align:top; }
.spsharebox .xurl input[type=text] { width:calc(100% - 60px); border-radius:5px 0 0 5px; border:1px solid var(--border); background-color:var(--bg2); font-size:10pt; color:var(--text); }
.spsharebox .xurl input[type=button] { width:60px; border-radius:0 5px 5px 0; border:none; background-color:var(--primary); font-size:11pt; color:var(--primarytext); }
.spsharebox .xqr { padding:0 0 5px 0; }
.spsharebox .xqr img { box-sizing:border-box; width:100%; margin:0 auto; border:6px solid #fff; }

#textdiv { position:relative; box-sizing:border-box; width:100%; max-height:70vh; overflow:auto; padding:5px 5px 10px 10px; font-size:14pt; overflow-wrap:anywhere; }
#textdiv img { max-width:100%; }
.spcredit { padding:0 0 20px 20px; font-size:12pt; overflow-wrap:anywhere; }
.spcredit a { color:var(--text); }

.spimglist { clear:both; }
.spimglist .xbox { padding:15px 0; text-align:center; }
.spimglist .ximg { max-width:100%; border-style:none; }
.spimglist .xtext { text-align:center; font-size:14pt; }
.spimglist .xtool { color:var(--text4); font-size:10pt; }
.spimglist .xtool a { color:var(--text3); }
.spimglist .xtool form, .spinfo .xtool form { display:inline; }
.spimglist .xtool .xdel { border:none; background:none; font-size:10pt; color:var(--textred); cursor:pointer; }
.spimglist .ximg { height:auto; }

.spinfo { padding:10px 0 5px 5px; font-size:12pt; color:var(--text2); }
.spinfo .xbox { box-sizing:border-box; display:inline-block; width:48%; min-width:300px; padding:5px 0 0 10px; vertical-align:top; }
.spinfo .xicon { float:left; width:100px; min-height:102px; margin:0 5px 0 0; padding:15px 0 0 0; }
.spinfo .xicon img { width:100px; height:100px; border-radius:50px; border-style:none; }
.spinfo .xname { font-weight:bold; color:var(--linkpj); }
.spinfo .xview { padding:10px 0 5px 0; }
.spinfo .xview b { font-size:18pt; font-weight:normal; }
.spinfo .xdate i { color:var(--text4); }
.spinfo .xtool { padding:5px 0 0 0; }
.spinfo .xtool .bt { margin:5px 0 0 5px; }
.spinfo .xlabel { padding:10px 0; }

#votenum { display:inline-block; margin:5px 5px 0 0; padding:0 15px 0 0; vertical-align:middle; text-align:center; white-space:nowrap; font-size:9pt; font-family:arial,serif; }
#votenum b { display:block; line-height:28pt; font-size:30pt; color:var(--textpink); }

/* ดาว 5 ดวง (เดิมใช้รูป /pic-tem/icon-vote*.png ของ postjung) — #voterate1 กว้าง = คะแนน x 20% */
#voterate { position:relative; display:inline-block; width:160px; height:32px; margin:0 2px 0 0; vertical-align:middle; overflow:hidden; white-space:nowrap; font-size:28px; line-height:32px; letter-spacing:2px; color:var(--bg3); }
#voterate::before { content:'★★★★★'; }
#voterate.active { cursor:pointer; }
#voterate1 { position:absolute; left:0; top:0; height:32px; width:0; overflow:hidden; color:#f5b301; }
#voterate1::before { content:'★★★★★'; }
#votemsg { text-align:center; color:var(--text4); }

#votehist { padding:10px 0 0 0px; color:var(--text3); font-size:9pt; }
#votehist a { color:var(--text2); }
#votehist a:hover { color:var(--linkpjactive); }


.spsharebar { text-align:center; }
.spsharebar .xfbbt { display:inline-block; box-sizing:border-box; width:calc(100% - 230px); margin:5px 10px 0 0; padding:10px; border-radius:7px; background-color:#45619d; vertical-align:bottom; text-align:center; font-size:14pt; font-weight:bold; color:#eee; }
.spsharebar .xfbbt:hover { background-color:#354e83; color:#fff; }
.spsharebar .ximgbt { width:32px; height:32px; padding:8px; vertical-align:bottom; cursor:pointer; }
.spsharebar .ximgbt:hover { width:40px; height:40px; padding:4px; background-color:var(--bg2); }
.spsharebar .xshbt { display:inline-block; height:40px; padding:4px; vertical-align:bottom; white-space:nowrap; font-size:11pt; cursor:pointer; color:var(--textpink); }
.spsharebar .xshbt img { width:28px; height:28px; padding:4px 2px 4px 6px; vertical-align:middle; }
.spsharebar .xshbt:hover { background-color:var(--bg2); }
.spsharebar .xshbt:hover img { width:36px; height:36px; padding:0px; }

.spreport { padding:5px 10px 10px 0; text-align:right; font-size:10pt; }
.spreport a { display:inline-block; padding:5px; border-radius:8px; color:var(--textred); }
.spreport a:hover { background-color:var(--bg2); color:var(--text); }
.spreport b { font-size:14pt; font-weight:normal; }

.sppp { margin:0 auto; padding:5px 0 15px 0; font-size:14pt; }
.sppp h2 { margin:0; padding:0; font-weight:normal; font-size:20pt; }
.sppp h2 a { color:var(--linkpj); }
.sppp h2 a:hover { color:var(--linkpjactive); }
.sppp .xuicon { width:64px; height:64px; border-radius:50%; vertical-align:middle; }
.sppp .xlink { display:inline-block; box-sizing:border-box; width:25%; padding:20px; vertical-align:top; color:var(--text); }
.sppp .xlink:hover { color:var(--linkpj); }
.sppp .ximg { width:100%; aspect-ratio:1/1; margin:0 0 3px 0; border-style:none; }
.sppp .xtitle { display:inline-block; width:100%; }
.sppp .xmore { display:block; margin:15px 0; }


@media (max-width:1000px) { 
#recfeed { box-sizing:border-box; width:100%; max-width:1500px; margin:0 auto; padding:10px 5px; text-align:center; font-size:16pt; }
#recfeed .xhead { margin:0; padding:0; text-align:left; font-weight:normal; font-size:20pt; color:var(--textpink); }
#recfeed .xstatusbox { display:none; padding:20px; font-size:20pt; font-style:italic; color:var(--text4); }
#recfeed .xlink { display:inline-block; box-sizing:border-box; width:25%; padding:20px; vertical-align:top; text-align:left; text-decoration:none; color:var(--text); }
#recfeed .xlink:hover { color:var(--linkactive); }
#recfeed .ximg { width:100%; aspect-ratio:1; margin:0 0 3px 0; border-style:none; }
#recfeed .xtitle { display:inline-block; width:100%; }
#recfeed .xmore { display:block; margin:15px 0 0; }



@media (max-width:1200px) {
	.sppp .xlink { width:33%; }
	#recfeed .xlink { width:33%; padding:20px 15px; }
}
@media (max-width:900px) {
	h1 { font-size:24pt; }
	.sppp .xlink { width:50%; }
	#recfeed { padding-left:0; padding-right:0; }
	#recfeed .xlink { width:50%; }
}
@media (max-width:500px) {
	#mainbox2 { width:99%; }
	h1 { font-size:20pt; }
	.spsharebar .xfbbt { font-size:12pt; }
	.sppp .xlink { width:100%; }
	#recfeed .xlink { width:100%; padding:20px 5px; }
}

@media print { body { opacity:0; width:1px; height:1px; overflow:hidden; } }

.sptags { padding:10px 30px 0 0; text-align:right; }
.spinfo .xbox { min-width:280px; }
@media (max-width:640px) { .spinfo .xbox { display:block; width:100%; } }

/* คอมเมนต์ (picpost_cm) */
#cmbox { max-width:800px; margin:10px auto 20px auto; padding:0 5px; }
#cmbox h2 { padding:10px 0; font-weight:normal; color:var(--textpink); }
#cmbox .xclosed { padding:20px; text-align:center; color:var(--text3); }
#cmbox .xcm { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--bg2); }
#cmbox .xcmicon img { width:44px; height:44px; border-radius:50%; object-fit:cover; background-color:var(--bg2); }
#cmbox .xcmbody { flex:1; min-width:0; }
#cmbox .xcmhead a { font-weight:bold; color:var(--text2); }
#cmbox .xcmdate { font-size:9pt; color:var(--text4); }
#cmbox .xcmdel { border:none; background:none; font-size:9pt; color:var(--textred); cursor:pointer; }
#cmbox .xcmmsg { padding:3px 0 0 0; font-size:12pt; overflow-wrap:anywhere; }
#cmform textarea { box-sizing:border-box; width:100%; height:90px; margin:10px 0 0 0; padding:8px; border:1px solid var(--border); border-radius:5px; background-color:var(--bg0); font-size:12pt; color:var(--text); }
#cmform .xcmsubmit { padding:5px 0; text-align:right; }
#cmform #cmmsg { color:var(--textred); }
#cmbox .xlogin { padding:15px; text-align:center; }