/* Guide Game TOSM - สไตล์พื้นฐาน */
* { box-sizing: border-box; }
body { font-family: "Segoe UI", Tahoma, "Sarabun", sans-serif; margin: 0; line-height: 1.6; color: #1a1a1a; background: #f6f7f9; }
header.topbar { background: #222; color: #fff; padding: 12px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header.topbar h1 { font-size: 18px; margin: 0; }
header.topbar nav { display: flex; gap: 8px; flex-wrap: wrap; }
header.topbar nav button, .tab-btn { background: #444; color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; }
header.topbar nav button.active, .tab-btn.active { background: #2d7ef7; }
main { max-width: 1000px; margin: 0 auto; padding: 20px; }
section { display: none; }
section.active { display: block; }
h2 { border-bottom: 2px solid #ddd; padding-bottom: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.card { background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; background:#eee; }
.card h3 { margin: 8px 0 4px; font-size: 16px; }
.card.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.card.clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-2px); }
.badge { display: inline-block; background: #eef2ff; color: #3551b5; font-size: 12px; padding: 2px 8px; border-radius: 999px; margin: 2px 4px 2px 0; }
.muted { color: #666; font-size: 14px; }
.rich { line-height: 1.7; }
.rich img { max-width: 100%; height: auto; border-radius: 6px; }
.rich h2, .rich h3 { margin: 10px 0 4px; }
details.faq { background:#fff; border:1px solid #e2e4e8; border-radius:8px; padding:10px 14px; margin-bottom:8px; }
details.faq summary { cursor: pointer; font-weight: 600; }
table { width: 100%; border-collapse: collapse; background:#fff; }
th, td { border: 1px solid #e2e4e8; padding: 8px 10px; text-align: left; font-size: 14px; vertical-align: top; }
th { background: #f0f2f5; }
.form-row { margin-bottom: 12px; }
.form-row label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.form-row input[type=text], .form-row input[type=number], .form-row input[type=file], .form-row textarea, .form-row select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: inherit; }
.group-item input[type=text], .group-item input[type=number], .group-item select { width: 100%; padding: 7px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 14px; }
.img-input { border:1px dashed #c3c9d4; border-radius:8px; padding:8px; background:#fff; }
.img-input > * { margin-bottom:6px; }
.img-input .img-mode { width:auto; min-width:160px; padding:6px; }
.img-input .img-url { width:100%; padding:7px; border:1px solid #ccc; border-radius:6px; }
.img-input .img-prev { max-height:120px; display:block; border-radius:6px; }
.img-size-row { display:flex; gap:8px; align-items:center; }
.img-size-row .img-w { max-width:220px; padding:7px; border:1px solid #ccc; border-radius:6px; }
/* Rich text editor */
.rte { border:1px solid #ccc; border-radius:6px; overflow:hidden; background:#fff; }
.rte-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:6px; background:#f0f2f5; border-bottom:1px solid #ddd; align-items:center; }
.rte-toolbar button, .rte-toolbar select { padding:4px 8px; border:1px solid #ccc; background:#fff; border-radius:4px; cursor:pointer; font-size:13px; width:auto; }
.rte-clr { display:inline-flex; align-items:center; gap:3px; border:1px solid #ccc; background:#fff; border-radius:4px; padding:2px 6px; font-size:13px; cursor:pointer; }
.rte-clr input[type=color]{ width:22px; height:20px; border:0; padding:0; background:none; cursor:pointer; }
.rte-editor { min-height:120px; padding:10px; outline:none; font-size:14px; }
.rte-editor:empty:before { content:"พิมพ์ข้อความที่นี่..."; color:#aaa; }
.btn { background:#2d7ef7; color:#fff; border:0; padding:9px 16px; border-radius:6px; cursor:pointer; font-size:14px; }
.btn.secondary { background:#6b7280; }
.btn.danger { background:#dc2626; }
.btn.small { padding:5px 10px; font-size:13px; }
.row-actions { display:flex; gap:6px; }
.toast { position: fixed; bottom: 20px; right: 20px; background:#222; color:#fff; padding:12px 18px; border-radius:8px; opacity:0; transition:.3s; z-index:100; }
.toast.show { opacity: 1; }
.hidden { display: none !important; }
.login-box { max-width: 360px; margin: 60px auto; background:#fff; padding:24px; border-radius:10px; border:1px solid #e2e4e8; }
.login-box input { width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; }
.attr-pair { display:flex; gap:8px; margin-bottom:6px; }
.attr-pair input { flex:1; }

/* Detail modal */
#detailModal.show { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:30px; z-index:50; }
#detailModal .detail-card { position:relative; background:#fff; border-radius:12px; padding:24px; max-width:680px; width:100%; }
/* มือถือ: ปุ่มปิดเกาะมุมขวาบนของจอ */
#detailClose { position:fixed; top:12px; right:12px; z-index:60; }
/* PC/Laptop: ปุ่มปิดเกาะมุมขวาบนของการ์ด */
@media (min-width:768px){
  #detailClose { position:absolute; top:-14px; right:-14px; box-shadow:0 2px 6px rgba(0,0,0,.3); }
}