/* ============================================================
   สไตล์เฉพาะหน้าพรีวิวนี้เท่านั้น (ไม่ใช่ไฟล์จริงของเว็บ)
   แยกออกจาก style.css เพื่อให้ style.css เหมือนไฟล์จริง 100%
   ============================================================ */

/* ---------- ปรับความสวยงามโดยรวม: ฟ้อนต์เดียวกันทุกหน้า + ปุ่มชัดเจนขึ้น ---------- */
:root {
  /* โค้งมนขึ้นเล็กน้อยให้ดู modern/minimal กว่าเดิม (ของเดิม 6px) */
  --radius: 10px;
  /* เปลี่ยนธีมสีเว็บจากเขียวเป็นฟ้าเข้ม (navy) ตามที่ขอ — override ตัวแปรสีหลักของ style.css */
  --board: #0a3161;
  --board-2: #12508f;
  --ok: #1e6a7a;
}
html, body, input, select, textarea, button {
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code {
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif;
  background: rgba(15, 40, 30, .07);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .92em;
}

/* ปุ่มทุกแบบ: เพิ่มเงาบาง ๆ + hover/active ให้กดแล้วรู้สึกตอบสนอง + โฟกัสชัดเจน */
.btn {
  box-shadow: 0 1px 2px rgba(15, 40, 30, .1);
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 3px 8px rgba(15, 40, 30, .18); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.96); box-shadow: 0 1px 2px rgba(15, 40, 30, .1); }
.btn:disabled { box-shadow: none; }

/* .btn-ghost เดิมโปร่งใสไม่มีขอบ ดูจางจนแยกยากว่าเป็นปุ่ม — ใส่ขอบให้เห็นชัดว่ากดได้ */
.btn-ghost {
  background: var(--white);
  border: 1.5px solid var(--board);
  font-weight: 600;
}
.btn-ghost:hover:not(:disabled) { background: #eaf3ee; filter: none; }

.btn-danger { box-shadow: 0 1px 2px rgba(179, 38, 30, .18); }
.btn-post { box-shadow: 0 1px 3px rgba(245, 197, 24, .35); }

/* การ์ด/แถวต่างๆ ให้มีเงาบาง ๆ แยกออกจากพื้นหลังชัดเจนขึ้น */
.card, .board-list, .admin-row, .ads-table, .filter-bar, .check-form,
.position-legend-item, .kyc-privacy-note {
  box-shadow: 0 1px 3px rgba(15, 40, 30, .06);
}

.admin-row { transition: opacity .25s, transform .25s; }
.admin-row.removing { opacity: 0; transform: translateX(12px); }
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.reset-link { font-size: .85rem; }
.note-box {
  background: #eaf5ee;
  border: 1px solid #b4dcc2;
  color: #124d2c;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .85rem;
  margin-bottom: 14px;
}

/* ---------- โฆษณา / แบนเนอร์ ---------- */
/* แก้บั๊กแบนเนอร์บนสุดจัดกลางไม่ตรง (หลุดไปชิดซ้าย): style.css เดิมมี ".ad-slot { margin: 16px 0; }"
   ซึ่งเป็น shorthand แปลว่า margin-left/right = 0 — ที่แบนเนอร์บนสุด element เดียวกันมีทั้ง class
   "wrap" (จัดกลางด้วย margin:0 auto) และ "ad-slot" ผสมกัน (class="wrap ad-slot") พอ .ad-slot มาทีหลัง
   ในไฟล์เดียวกันเลยทับ margin-left/right ของ .wrap เป็น 0 ทำให้กล่องหลุดไปชิดซ้ายแทนที่จะอยู่กลางจอ
   จุดนี้ set margin-left/right เป็น auto กลับคืนตรงๆ (ไม่ใช้ shorthand) เพื่อไม่ให้ไปแตะ style.css เดิม */
.ad-slot { margin-top: 18px; margin-bottom: 18px; margin-left: auto; margin-right: auto; position: relative; }
/* โฆษณาที่แทรกอัตโนมัติกลาง/ท้ายเนื้อหาบทความ (จากระบบ bid ของเครือข่ายโฆษณา) — คั่นด้วยเส้นบางๆ ให้แยกจากเนื้อหาจริงชัดเจน */
.article-inline-ad-slot { padding: 14px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.ad-banner {
  position: relative;
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px 14px; text-decoration: none; color: inherit; min-height: 90px; text-align: center;
  box-shadow: 0 1px 3px rgba(15, 40, 30, .05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  overflow: hidden;
}
.ad-banner::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--board), var(--board-2, #2f9e6f));
  opacity: .8;
}
.ad-banner:hover {
  border-color: var(--board-2, #2f9e6f);
  box-shadow: 0 8px 20px rgba(15, 40, 30, .1);
  transform: translateY(-2px);
}
.ad-banner-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: #f1f4f2; border: 1px solid var(--line);
  padding: 2px 9px; border-radius: 999px;
}
.ad-banner-body { font-size: .9rem; color: var(--ink); line-height: 1.5; }
.ad-banner-placeholder {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 600; font-size: .95rem;
}
.ad-banner-placeholder::before { content: '📢'; font-size: 1.1rem; }
.ad-banner img {
  max-height: 90px; max-width: 100%; object-fit: contain; border-radius: 8px;
}
.ad-banner-google {
  background: linear-gradient(180deg, #f6fbf8, #eef6f1);
  border-style: dashed;
}
.ad-banner-google .ad-banner-body { color: var(--muted); }
.ad-banner-google code {
  display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 4px;
  background: rgba(15, 40, 30, .06); color: var(--muted);
}
.ad-banner-google:hover { transform: none; box-shadow: none; cursor: default; }

/* ---- แบนเนอร์ manual ขนาดใหญ่ขึ้น + ป้าย Sponsored + carousel เลื่อนได้เมื่อมีมากกว่า 1 แบนเนอร์ ---- */
.ad-banner-manual-lg {
  min-height: 140px;
  padding: 22px 26px 20px;
}
.ad-banner-manual-lg .ad-banner-body { font-size: 1rem; }
.ad-banner-manual-lg img { max-height: 140px; }
.ad-banner-manual-lg .ad-banner-placeholder { font-size: 1.05rem; }

/* ---- แบนเนอร์ที่มีรูปภาพ: ให้รูปเต็มพื้นที่แบนเนอร์ทั้งกล่อง (ไม่มีขอบขาวล้อมรูป) ----
   ขนาดรูปภาพแนะนำสำหรับแอดมิน (ดูคำแนะนำเต็มในฟอร์ม admin/ads.html): อัตราส่วนประมาณ 4:1
   - ขนาดแนะนำ: 1200 × 300 px (หรือเท่าสัดส่วนนี้) ไฟล์ .jpg/.png ไม่เกิน ~500KB
   - ระบบจะ crop ให้เต็มกล่องเสมอ (object-fit: cover) จุดกึ่งกลางรูปจะถูกเก็บไว้เสมอ ขอบรูปอาจถูกตัดถ้าไม่ตรงสัดส่วน */
.ad-banner.ad-banner-has-image {
  display: block; padding: 0; min-height: 0; aspect-ratio: 1200 / 300;
  background: #0c1a14;
}
.ad-banner.ad-banner-has-image .ad-banner-body { position: absolute; inset: 0; font-size: 0; }
.ad-banner.ad-banner-has-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: none; max-width: none; object-fit: cover; border-radius: 0;
}
.ad-banner.ad-banner-has-image .ad-banner-label {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(10, 20, 16, .62); color: #fff; border-color: transparent; backdrop-filter: blur(2px);
}
.ad-banner.ad-banner-has-image:hover { transform: none; }
.ad-banner-sponsored {
  display: inline-flex; align-items: center; margin-left: 6px;
  background: #f5a623; color: #fff; border: 0;
  padding: 2px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .05em;
}
.ad-carousel { position: relative; overflow: hidden; border-radius: 12px; }
.ad-carousel-track {
  display: flex;
  transition: transform .4s ease;
}
.ad-carousel-slide { flex: 0 0 100%; min-width: 100%; }
.ad-carousel-slide .ad-banner-manual-lg { border-radius: 12px; }
.ad-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(15,40,30,.12);
}
.ad-carousel-arrow:hover { background: #fff; }
.ad-carousel-prev { left: 8px; }
.ad-carousel-next { right: 8px; }
.ad-carousel-dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center;
}
.ad-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(15,40,30,.25); cursor: pointer;
}
.ad-carousel-dot.is-active { background: var(--board-2, #2f9e6f); width: 20px; border-radius: 5px; }

/* ---- แท็บเมนู "บทความ" ในเฮดเดอร์ ---- */
.header-nav a.nav-active { font-weight: 700; color: var(--board-2, #2f9e6f); }

/* ---- หน้ารวมบทความ (articles.html): การ์ดบทความสไตล์เดียวกับกระดานประกาศ ---- */
.article-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 10px; }
.article-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit; background: var(--white);
  box-shadow: 0 1px 3px rgba(15, 40, 30, .05);
  transition: box-shadow .18s ease, transform .18s ease;
}
.article-card:hover { box-shadow: 0 8px 20px rgba(15, 40, 30, .1); transform: translateY(-2px); }
.article-card-cover {
  position: relative;
  height: 140px; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef6f1, #f6fbf8);
}
.article-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-card-cover-emoji { font-size: 2.6rem; }
.article-card-badges {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.article-pinned-badge {
  background: #f5a623; color: #fff; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.article-sponsored-badge { background: #8a4fd1; }
.article-hot-badge { background: #e0401f; }
.article-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.article-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.article-card-title { font-size: 1.02rem; margin: 2px 0 0; line-height: 1.4; }
.article-card-excerpt { font-size: .86rem; color: var(--muted); line-height: 1.6; flex: 1; margin: 0; }
.article-card-meta { display: flex; gap: 12px; font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* ---- หน้ารายละเอียดบทความ (article.html) ---- */
.article-detail {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 30px 24px; box-shadow: 0 2px 10px rgba(15, 76, 58, .06);
}
@media (max-width: 640px) { .article-detail { padding: 18px 16px 16px; border-radius: 12px; } }
.article-detail-head h1 { margin: 10px 0 8px; font-size: 1.55rem; }
.article-detail-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--muted);
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.article-detail-cover-emoji {
  font-size: 4rem; text-align: center; padding: 30px 0;
  background: linear-gradient(135deg, #eef6f1, #f6fbf8); border-radius: 12px; margin-bottom: 18px;
}
.article-detail-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin-bottom: 18px; }
.article-body { font-size: 1.02rem; line-height: 1.9; color: var(--ink); }
.article-body h3 { font-size: 1.12rem; margin: 26px 0 10px; color: var(--board); }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 24px; }
.article-body li { margin-bottom: 7px; }
.article-body img { max-width: 100%; border-radius: 10px; margin: 14px 0; }
.article-body a { color: var(--board-2, #2f9e6f); text-decoration: underline; }
.article-embed-video { position: relative; width: 100%; padding-top: 56.25%; margin: 18px 0; border-radius: 12px; overflow: hidden; background: #000; }
.article-embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ลิงก์ "ดูต้นฉบับ" สำรอง — กดเปิดคลิปจริงที่แพลตฟอร์มต้นทางได้เสมอ เผื่อกรอบฝังใช้งานไม่ได้ในเบราว์เซอร์ผู้อ่าน
   (เจ้าของคลิปอาจปิดสิทธิ์ฝัง/ตั้งเป็นส่วนตัว/ลบคลิปไปแล้ว ซึ่งเป็นสิ่งที่เว็บเราควบคุมไม่ได้) */
.article-embed-original-link {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  background: rgba(10, 20, 16, .72); color: #fff; text-decoration: none;
  font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.article-embed-original-link:hover { background: rgba(10, 20, 16, .9); }
/* TikTok เป็นวิดีโอแนวตั้ง — ใช้สัดส่วนแคบและจัดกึ่งกลาง แทนสัดส่วน 16:9 ปกติ */
.article-embed-video.article-embed-tiktok { max-width: 325px; margin-left: auto; margin-right: auto; padding-top: 177%; }

.article-actions { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.article-like-row { margin: 0 0 14px; }
.article-like-btn { font-size: .96rem; padding: 10px 18px; transition: transform .15s ease; }
.article-like-pulse { animation: article-like-pulse .35s ease; }
@keyframes article-like-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.article-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.article-share-label { font-size: .84rem; color: var(--muted); margin-right: 2px; }
.share-ic { margin-right: 2px; }
.article-share-btn.share-fb:hover { border-color: #1877F2; color: #1877F2; }
.article-share-btn.share-x:hover { border-color: #111; color: #111; }
.article-share-btn.share-line:hover { border-color: #06C755; color: #06C755; }
.article-share-btn {
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-size: .82rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.article-share-btn:hover { background: #f1f4f2; }

/* ---- หน้าแอดมิน: จัดการบทความ ---- */
.article-tag-check-list { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfc; }
.article-tag-check { display: inline-flex; align-items: center; gap: 5px; font-size: .88rem; cursor: pointer; }
.article-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.article-media-insert { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fbfdfc; display: flex; flex-direction: column; gap: 8px; }
.article-media-row { display: flex; gap: 8px; align-items: center; }

.ad-size-guide {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fffbea; border: 1px solid #f0dca0; border-radius: var(--radius);
  padding: 12px 16px; margin: 4px 0 18px; font-size: .88rem;
}
.ad-size-guide-icon { font-size: 1.3rem; line-height: 1.3; }

.position-legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.position-legend-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px;
}
.position-legend-icon { font-size: 1.3rem; line-height: 1.3; }

/* ---------- ป้ายกำกับ ขาย/รับซื้อ/แลกเปลี่ยน + แท็กประกาศ — ฟอนต์ใหญ่เท่ากันหมดทุกที่ ---------- */
.deal-tag { display: inline-block; font-size: 1rem; font-weight: 700; padding: 5px 12px; border-radius: 4px; color: var(--white); margin-right: 6px; }
.tag-sell { background: #2563eb; }
.tag-buy { background: #15803d; }
.tag-trade { background: #7a4b12; }
.tag-sold { background: var(--muted); }
.tag-hidden { background: #b45309; }
.delivery-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.delivery-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
}
.delivery-badge-pickup { background: #eaf2ff; color: #1c4d9e; border: 1px solid #bcd6ff; }
.delivery-badge-ship { background: #eafaf0; color: #146c3d; border: 1px solid #b9e9cc; }

.tag-listing {
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, var(--tag-color, #8a5a00) 16%, white);
  color: color-mix(in srgb, var(--tag-color, #8a5a00) 80%, black 15%);
  border: 1px solid color-mix(in srgb, var(--tag-color, #8a5a00) 35%, white);
  border-radius: 999px; font-weight: 600;
  font-size: .78rem; padding: 3px 10px;
}

.listing-title-clamp {
  word-break: break-word; overflow-wrap: break-word;
}

/* ---------- เลือกแท็กประกาศ (สูงสุด 3 แท็ก) — ดีไซน์ pill สีสันสดใส แยกสีตามแท็ก ---------- */
.tag-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.tag-picker label.tag-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600;
  border: 1.5px solid var(--tag-color, var(--line)); border-radius: 999px; padding: 7px 14px 7px 12px; cursor: pointer;
  background: var(--white); color: var(--tag-color, var(--ink)); user-select: none;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.tag-picker label.tag-pill:not(.tag-picker-checked):hover { background: color-mix(in srgb, var(--tag-color, #999) 10%, white); transform: translateY(-1px); }
.tag-picker label.tag-pill.tag-picker-checked:hover { filter: brightness(1.05); transform: translateY(-1px); }
.tag-picker label.tag-pill { position: relative; }
.tag-picker input[type=checkbox] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tag-pill-check { display: none; font-size: .8rem; line-height: 1; }
.tag-pill-text { line-height: 1; }
.tag-picker label.tag-pill.tag-picker-checked {
  background: var(--tag-color, #c9930a); color: #fff; border-color: var(--tag-color, #c9930a);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tag-color, #c9930a) 45%, transparent);
}
.tag-picker label.tag-pill.tag-picker-checked .tag-pill-check { display: inline; }
.tag-picker label.tag-pill.tag-picker-disabled { opacity: .35; cursor: not-allowed; transform: none; }
.tag-picker label.tag-pill.tag-picker-disabled:hover { background: var(--white); transform: none; }
#tag-picker-hint { margin-top: 8px; }

/* ---------- แถบตัวกรองหน้ากระดานประกาศ ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin: 14px 0;
}
.filter-bar select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
  background: var(--white); color: var(--ink); min-width: 140px;
}
.filter-bar .filter-clear {
  font-size: .82rem; color: var(--muted); text-decoration: none; padding: 7px 4px;
}
.filter-bar .filter-clear:hover { color: var(--ink); text-decoration: underline; }
.filter-bar .filter-label { font-size: .78rem; color: var(--muted); margin-right: -2px; }

/* ---------- กระดานประกาศแบบลิสต์คอลัมน์ (ไม่มีรูป) ---------- */
.board-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.board-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  grid-template-areas:
    "tags tags tags tags"
    "title meta price bookmark";
  column-gap: 10px; row-gap: 6px; align-items: center;
  background: var(--white); padding: 10px 14px; text-decoration: none; color: inherit;
}
.board-row:hover { background: #f5faf7; }
.board-row.is-sold { opacity: .6; }
.board-row.is-hidden { opacity: .7; background: #fdf6ec; }
.badge-hidden { border-color: #b45309; color: #b45309; font-weight: 600; margin-left: 6px; }
.board-row-tags { grid-area: tags; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.board-row-title {
  grid-area: title; font-weight: 500; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.board-row-title .badge-new { margin-left: 6px; }
.board-row-meta { grid-area: meta; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.board-row-price { grid-area: price; font-weight: 600; color: var(--tag-ink); background: var(--tag); padding: 2px 10px; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-row-bookmark { grid-area: bookmark; }
.board-ad-slot { background: var(--white); padding: 8px 14px; }
.board-ad-slot .ad-banner { min-height: 70px; }
@media (max-width: 700px) {
  .board-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tags tags"
      "title title"
      "meta bookmark"
      "price bookmark";
  }
}

/* ---------- ปุ่มติดต่อ LINE / โทร ---------- */
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-line-contact { background: #06c755; border-color: #06c755; color: var(--white); font-weight: 600; }
.btn-phone-contact { background: var(--white); color: var(--ink); border-color: var(--line); font-weight: 600; }
.phone-revealed { cursor: default; gap: 8px; }
.phone-revealed-number { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .3px; }
.phone-copy-btn {
  border: 1px solid var(--line); background: var(--white); border-radius: 6px; padding: 2px 8px;
  font-size: .78rem; cursor: pointer; color: var(--ink);
}
.phone-copy-btn:hover { background: #f5f5f5; }

/* ---------- ป้ายประเทศ + ซ่อน IP ---------- */
.ip-cell { font-variant-numeric: tabular-nums; }
.ip-flag { margin-right: 4px; }
.view-toggle {
  display: inline-flex; gap: 2px; padding: 3px; background: #eef2f0; border-radius: 9px; border: none;
}
.view-toggle button {
  border: 0; background: none; padding: 7px 12px; border-radius: 6px; font: inherit; font-size: .82rem;
  color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.active { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 40, 30, .12); }

/* ปุ่มแท็บ "กำลังแสดง / รอตรวจ / ถูกซ่อน / ไม่ผ่าน" ในหน้าแอดมิน — markup ใช้ <button> แต่
   style.css เดิมมีสไตล์ไว้ให้เฉพาะ <a>, override เป็นสไตล์ minimal ที่นี่แทน */
.admin-tabs { display: flex; gap: 4px; margin: 12px 0 16px; flex-wrap: wrap; }
.admin-tabs button {
  font: inherit; font-size: .85rem; padding: 7px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.admin-tabs button:hover { color: var(--ink); border-color: var(--board-2, #2f9e6f); }
.admin-tabs button[aria-current] { background: var(--board); color: var(--white); border-color: var(--board); font-weight: 600; }

/* ---------- ฟอร์มลงประกาศ (จำลอง) ---------- */
.deal-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.deal-checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.deal-checks input { width: auto; margin: 0; }
.img-link-box { background: #f7faf8; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: .88rem; }
.img-link-box a { font-weight: 600; }
.img-verify-hint {
  margin: 10px 0 0; padding: 10px 12px; font-size: .86rem; font-weight: 600; color: #146c3d;
  background: #eef8f1; border: 1px solid #bfe3cc; border-radius: var(--radius);
}
.img-verify-hint a { color: #146c3d; text-decoration: underline; }
.example-img-preview { max-width: 320px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #f7faf8; }
.example-img-preview img { display: block; width: 100%; height: auto; }

/* ---------- กลไกกลาง: ป๊อปอัปทุกชนิดในเว็บนี้ลอยกลางจอด้วย position:fixed ล้วนๆ ----------
   (ไม่พึ่ง <dialog>.showModal() เพราะบางเบราว์เซอร์/WebView บนมือถือดันขึ้น "top layer"
   ลอยกลางจอไม่ถูกต้อง ทำให้ป๊อปอัปไปแสดงแทรกอยู่ในเนื้อหาปกติของหน้าแทน) */
.mm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(15, 30, 25, .65);
  backdrop-filter: blur(2px);
}
.mm-overlay.mm-overlay-open { display: flex; }
body.mm-overlay-lock { overflow: hidden; }

/* ---------- ป๊อปอัปข้อตกลง ---------- */
/* แบบเล็ก: ก่อนกดติดต่อผู้ขาย */
.disclaimer-modal { box-sizing: border-box; background: var(--white); border: 0; border-radius: var(--radius); max-width: 440px; width: calc(100% - 32px); padding: 20px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.disclaimer-modal h2 { margin-top: 0; font-size: 1.02rem; }
.disclaimer-modal p { color: var(--muted); font-size: .88rem; line-height: 1.6; }

/* แบบใหญ่: หน้าแรก ให้ต่างจากแบบเล็กชัดเจน ใหญ่กว่า มีไอคอน ขอบสีแดงเน้น */
.disclaimer-modal-home {
  max-width: 680px;
  padding: 36px 40px 32px;
  border-radius: 14px;
  border-top: 6px solid var(--danger);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* ป๊อปอัปเตือนก่อนกดดู LINE/เบอร์โทร — ขยายให้ใหญ่ขึ้น อ่านง่ายขึ้น (คงความต่างจากป๊อปอัปหน้าแรกเล็กน้อย) */
.disclaimer-modal-contact {
  max-width: 540px;
  padding: 32px 36px 28px;
  border-radius: 14px;
  border-top: 6px solid #d97706;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
}
.disclaimer-modal-contact h2 { font-size: 1.35rem; margin: 4px 0 14px; }
.disclaimer-modal-contact p { font-size: 1.05rem; line-height: 1.8; color: var(--ink); max-width: 460px; margin-left: auto; margin-right: auto; }
.disclaimer-modal-contact .disclaimer-home-btn { font-size: 1rem; padding: 13px 28px; }

/* ---- mmConfirm / mmSuccessPopup: ป๊อปอัปยืนยัน/แจ้งผลสำเร็จ แทน confirm()/alert() ของเบราว์เซอร์ ---- */
.mm-modal {
  box-sizing: border-box;
  background: var(--white);
  border: 0;
  border-radius: 14px;
  max-width: 460px;
  width: calc(100% - 32px);
  padding: 28px 30px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.mm-modal-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.mm-modal h2 { font-size: 1.2rem; margin: 4px 0 12px; }
.mm-modal p { font-size: .98rem; line-height: 1.7; color: var(--ink); margin: 0 0 4px; }
.mm-modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.mm-modal-actions .btn { min-width: 110px; }

.mm-modal-confirm { border-top: 6px solid #2563a8; }
.mm-modal-confirm.mm-modal-danger { border-top-color: var(--danger, #c0392b); }
.mm-modal-success { border-top: 6px solid #1f9d55; }
.mm-modal-success .mm-modal-icon { color: #1f9d55; }

/* ---- mmShowMockEmail: จำลองอีเมลที่ "ส่งออก" ในพรีวิว (ยืนยันอีเมล / ลืมรหัสผ่าน) ---- */
.mm-modal-email { max-width: 440px; border-top: 6px solid #d88a12; text-align: center; }
.mm-email-card { margin-top: 14px; background: #fbfaf7; border: 1px solid #e8e0cf; border-radius: 10px; padding: 14px 16px; text-align: left; }
.mm-email-field { font-size: .88rem; margin: 0 0 6px; }
.mm-email-body { font-size: .92rem; line-height: 1.7; color: var(--ink); margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e8e0cf; }
.mm-email-body p { margin: 0 0 8px; }

/* ---- mmShowInfoPopup: ป๊อปอัปอ่านอย่างเดียว เลื่อนอ่านได้ (เงื่อนไขฉบับเต็ม / รูปตัวอย่างการถ่ายรูป) ---- */
.mm-modal-info {
  max-width: 640px;
  width: calc(100% - 28px);
  max-height: calc(100vh - 60px);
  padding: 22px 22px 22px;
  text-align: left;
  border-top: 6px solid #2563a8;
  display: flex;
  flex-direction: column;
}
.mm-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mm-modal-info h2#mm-info-title { font-size: 1.15rem; margin: 2px 0 4px; }
.mm-info-close {
  border: 0; background: #f0f3f1; color: var(--ink); width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.mm-info-close:hover { background: #e2e7e4; }
.mm-info-body {
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 4px;
  flex: 1 1 auto;
}
.mm-info-body section { margin-bottom: 16px; }
.mm-info-body section:last-child { margin-bottom: 0; }
.mm-info-body h2 { font-size: 1rem; margin: 0 0 6px; color: #1f9d55; }
.mm-info-body p { font-size: .95rem; line-height: 1.75; color: var(--ink); margin: 0 0 8px; }
.mm-info-body ul { margin: 0 0 8px; padding-left: 22px; }
.mm-info-body li { font-size: .95rem; line-height: 1.75; color: var(--ink); margin-bottom: 4px; }
.mm-info-image-wrap { text-align: center; margin-bottom: 14px; }
.mm-info-image { max-width: 100%; max-height: 55vh; border-radius: 10px; border: 1px solid #e2e7e4; }
.mm-modal-info .mm-modal-actions { margin-top: 16px; }
.mm-info-accept-box {
  margin-top: 14px; padding: 14px; background: #fff;
  border: 2px solid #f0b93c; border-radius: 10px;
}
.mm-info-accept-box label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .96rem; cursor: pointer; }
.mm-info-accept-box input[type=checkbox] { width: 19px; height: 19px; }
.mm-info-accept-box input[type=checkbox]:disabled { cursor: not-allowed; opacity: .5; }
.mm-info-accept-box label:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.mm-info-scroll-hint {
  margin: 0 0 10px; padding: 7px 10px; font-size: .82rem; font-weight: 600; color: #a34700;
  background: #fff3d6; border: 1px solid #f0b93c; border-radius: 6px; text-align: center;
}

/* ---- checkbox ติ๊ก "ไม่ระบุราคาตายตัว" (ต่อรองได้/สอบถามผู้ขาย) ---- */
.price-negotiable-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -6px;
  font-size: .88rem;
  color: var(--muted);
  cursor: pointer;
}
.price-negotiable-check input[type=checkbox] { accent-color: #c9930a; width: 16px; height: 16px; }
#post-price:disabled, #edit-price:disabled { background: #f1efe9; color: var(--muted); cursor: not-allowed; }

/* ---- หน้าเงื่อนไขการใช้งาน (terms.html) ---- */
.terms-doc section h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--board); }
.terms-doc section p, .terms-doc section li { color: var(--ink); font-size: .92rem; line-height: 1.75; }
.terms-doc section ul { margin: 6px 0 0; padding-left: 22px; }
.terms-doc section li { margin-bottom: 4px; }
.terms-doc section { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.terms-doc section:last-child { border-bottom: none; }

/* ---- checkbox ยอมรับเงื่อนไข (ต้องกดอ่านก่อนถึงติ๊กได้) ---- */
.terms-consent input[type=checkbox]:disabled { cursor: not-allowed; }
.terms-consent-hint { font-size: .78rem; color: var(--muted); margin: 2px 0 0 26px; display: block; }

.terms-highlight-link {
  display: inline-block; font-weight: 700; color: #8a2b00; background: #fff3d6;
  border: 1.5px solid #f0b93c; border-radius: 6px; padding: 3px 10px; margin: 0 2px;
  text-decoration: none;
}
.terms-highlight-link:hover { background: #ffe6a8; }
.terms-gate-box { border: 1.5px solid #f0b93c; background: #fffaf0; border-radius: var(--radius); }
.terms-gate-status { font-size: .84rem; font-weight: 600; margin: 6px 0 0; }
.terms-gate-status.terms-status-pending { color: #a34700; }
.terms-gate-status.terms-status-ok { color: #146c3d; }
.terms-accept-box {
  position: sticky; bottom: 0; margin-top: 22px; padding: 16px; background: var(--white);
  border: 2px solid #f0b93c; border-radius: var(--radius); box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.terms-accept-box label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; cursor: pointer; }
.terms-accept-box input[type=checkbox] { width: 20px; height: 20px; }
.terms-accept-box input[type=checkbox]:disabled { cursor: not-allowed; opacity: .5; }
.terms-accept-box label:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.terms-scroll-hint {
  margin: 0 0 12px; padding: 8px 12px; font-size: .86rem; font-weight: 600; color: #a34700;
  background: #fff3d6; border: 1px solid #f0b93c; border-radius: 6px; text-align: center;
}

/* ---- ราคา: badge "ต่อรองได้" (โชว์เฉพาะติ๊กเท่านั้น) + ราคาขายแล้ว ---- */
.price-negotiable-badge {
  display: inline-block; margin-left: 8px; font-size: .78rem; font-weight: 700;
  background: #fff3d6; color: #8a5a00; border: 1px solid #f0d38c; border-radius: 999px; padding: 3px 10px; vertical-align: middle;
}
.price-tag-sold { background: var(--muted) !important; color: var(--white) !important; }

/* ---- ชื่อผู้ขาย + อายุสมาชิก ---- */
.seller-name { font-weight: 600; color: var(--board-2); text-decoration: none; }
.seller-name:hover { text-decoration: underline; }
.seller-since { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

.disclaimer-home-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 6px; }
.disclaimer-modal-home h2 { font-size: 1.7rem; margin: 4px 0 18px; }
.disclaimer-modal-home p { font-size: 1.2rem; line-height: 1.85; color: var(--ink); max-width: 560px; margin-left: auto; margin-right: auto; }
.disclaimer-home-sub { color: var(--muted) !important; font-size: .95rem !important; margin-top: 16px !important; }
.disclaimer-home-accept-row {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  max-width: 560px; margin: 20px auto 0; padding: 14px 16px;
  background: #fff4f2; border: 1px solid var(--danger); border-radius: 10px;
}
.disclaimer-home-accept-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--danger); cursor: pointer; }
.disclaimer-home-accept-row label { font-size: 1.08rem; font-weight: 600; line-height: 1.5; cursor: pointer; }
.disclaimer-home-btn { font-size: 1.08rem; padding: 14px 30px; }
.disclaimer-home-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- บุ๊กมาร์ก ---------- */
.bookmark-btn { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: 7px 10px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted); }
.bookmark-btn.active { color: var(--tag-ink); background: var(--tag); border-color: var(--tag); }
.board-row-bookmark { justify-self: end; }

/* ---------- ตัวแบ่งหน้า ---------- */
.pager a, .pager span { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; font-size: .9rem; }
.pager a:hover { border-color: var(--board-2); }
.pager .current { background: var(--board); color: var(--white); border-color: var(--board); font-weight: 600; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* ---------- หน้าบัญชีผู้ใช้ ---------- */
/* ---------- เมนูบนสุด (header-nav) ให้ minimal ขึ้นเล็กน้อย โดยไม่แตะ style.css ---------- */
.header-nav a { padding: 6px 10px; border-radius: 7px; transition: background .15s ease; }
.header-nav a:hover { background: rgba(255,255,255,.12); }

/* ---------- ปุ่ม "+ ลงประกาศ" ให้เด่นกว่าลิงก์เมนูอื่นๆ ทั้งหมด ---------- */
.header-nav .btn-post-cta {
  font-weight: 700; padding: 7px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.header-nav .btn-post-cta:hover { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(0,0,0,.24); background: var(--tag); }

/* ---------- สถานะล็อกอิน/สมัครสมาชิกที่เมนูบนสุด ---------- */
.auth-nav { display: flex; align-items: center; gap: 8px; padding-left: 8px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,.2); flex-shrink: 0; }
.auth-user { color: var(--white); font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.auth-user .badge { color: var(--ink); background: var(--white); }
.auth-nav .btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: var(--white); font-size: .82rem; }
.auth-nav .btn-ghost:hover { background: rgba(255,255,255,.12); }
.auth-nav a, .auth-nav button { white-space: nowrap; }
@media (max-width: 700px) { .auth-nav { border-left: 0; padding-left: 0; margin-left: 0; } .auth-user { display: none; } }

/* ---------- แก้เมนูบนสุด (header) แตกบรรทัดกลางคำจนดูเบี้ยวในมือถือ ---------- */
/* ให้เมนูทั้งแถบตกไปบรรทัดใหม่เป็นก้อนเดียวแบบจัดกลาง แทนที่จะบีบให้ตัวอักษรแต่ละลิงก์แตกบรรทัดเอง */
.header-nav { flex-wrap: wrap; row-gap: 8px; }
.header-nav a, .header-nav button { white-space: nowrap; }
@media (max-width: 700px) {
  .header-row { justify-content: center; text-align: center; }
  .header-nav { flex-basis: 100%; justify-content: center; margin-left: 0 !important; gap: 10px 14px; }
  .auth-nav { flex-basis: 100%; justify-content: center; padding-left: 0; margin-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 8px; margin-top: 2px; }
}

.account-tabs {
  display: inline-flex; gap: 2px; margin: 16px 0 20px; padding: 3px;
  background: #eef2f0; border-radius: 10px; border: none;
}
.account-tabs button {
  font: inherit; font-size: .87rem; padding: 8px 18px; border: 0; border-radius: 7px;
  background: none; cursor: pointer; color: var(--muted); border-bottom: none; margin-bottom: 0;
  transition: background .15s ease, color .15s ease;
}
.account-tabs button:hover { color: var(--ink); }
.account-tabs button.active {
  background: var(--white); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 40, 30, .12);
}
@media (max-width: 480px) { .account-tabs { display: flex; } .account-tabs button { flex: 1; } }

/* ---------- แจ้งปัญหาประกาศ (report modal) ---------- */
.report-modal { border: 0; border-radius: var(--radius); max-width: 440px; width: calc(100% - 32px); padding: 20px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.report-modal::backdrop { background: rgba(15, 30, 25, .5); }
.report-modal h2 { margin-top: 0; font-size: 1.05rem; }
.report-modal .stack { margin-top: 12px; }
.report-modal .row-end { justify-content: flex-end; margin-top: 14px; }

/* ---------- ระดับการยืนยันตัวตน ---------- */
.level-list { display: grid; gap: 10px; max-width: 560px; margin: 14px 0 20px; }
.level-item { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.level-item.current { border-color: var(--board); background: #f2f8f5; }
.level-item .level-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--board); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.level-item.is-top .level-num { background: var(--tag); color: var(--tag-ink); }
.level-item strong { display: block; font-size: .92rem; }
.level-item span.level-desc { color: var(--muted); font-size: .82rem; }
.kyc-form { max-width: 480px; }
.check-hit {
  max-width: 480px; background: #fdecea; border: 1px solid #f0b8b2; color: #7a1912;
  padding: 16px 18px; border-radius: var(--radius); margin: 14px 0;
}
.check-hit-title { font-weight: 700; font-size: 1.02rem; margin: 0 0 8px; }
.check-hit p { margin: 4px 0; }
.check-clear {
  max-width: 480px; background: #eaf5ee; border: 1px solid #b4dcc2; color: #124d2c;
  padding: 16px 18px; border-radius: var(--radius); margin: 14px 0;
}
.check-clear-title { font-weight: 700; font-size: 1.02rem; margin: 0 0 6px; }
.kyc-privacy-note {
  max-width: 620px; background: #f2f7ff; border: 1px solid #c7dcf7; color: #143a63;
  padding: 12px 14px; border-radius: var(--radius); font-size: .84rem; line-height: 1.6; margin: 10px 0 16px;
}
.kyc-privacy-note-strong {
  background: #fdecea; border: 1px solid #f0b8b2; color: #7a1912; max-width: 640px;
}
.kyc-privacy-heading { font-weight: 700; margin: 0 0 8px; font-size: .92rem; }
.kyc-privacy-note-strong ul { margin: 0; padding-left: 20px; }
.kyc-privacy-note-strong li { margin: 6px 0; }
.auth-oauth { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); font-size: .82rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kyc-consent {
  display: flex; align-items: flex-start; gap: 10px; max-width: 620px;
  background: var(--white); border: 1.5px solid var(--tag); border-radius: var(--radius);
  padding: 12px 14px; font-size: .85rem; line-height: 1.55; cursor: pointer;
}
.kyc-consent input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; cursor: pointer; }
.kyc-error { background: #fdecea; border: 1px solid #f0b8b2; color: var(--danger); padding: 10px 14px; border-radius: var(--radius); font-size: .88rem; margin: 10px 0; }
.kyc-success { background: #eaf5ee; border: 1px solid #b4dcc2; color: #124d2c; padding: 14px 16px; border-radius: var(--radius); font-size: .9rem; margin: 10px 0; }

/* ---------- จัดการโฆษณา (แอดมิน) ---------- */
.ads-table { width: 100%; border-collapse: collapse; background: var(--white); }
.ads-table th, .ads-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: .88rem; vertical-align: middle; }
.ads-table input, .ads-table select { padding: 6px 8px; font-size: .85rem; }
.stat-pill { display: inline-block; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 1px 7px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.btn-sm { padding: 5px 10px; font-size: .8rem; }
.file-size-note { display: block; font-size: .78rem; margin-top: 4px; }
.file-size-note.file-size-ok { color: var(--ok, #1a7f4a); }
.file-size-note.file-size-error { color: var(--danger); font-weight: 600; }

/* ---------- แกลเลอรีรูปภาพแบบ carousel ในหน้ารายละเอียดประกาศ (สูงสุด 10 รูป) ---------- */
.carousel-viewport { position: relative; }
.carousel-viewport .gallery-main { display: block; }
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(15, 40, 30, .5); color: var(--white); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background .15s ease;
}
.carousel-nav:hover { background: rgba(15, 40, 30, .75); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-counter {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(15, 40, 30, .6); color: var(--white); font-size: .74rem;
  padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.carousel-dot:hover { background: #bcd0c6; }
.carousel-dot.active { background: var(--board-2, #2f9e6f); transform: scale(1.25); }

/* ---------- ช่องกรอกลิงก์รูปภาพหลายรูป (ฟอร์มลง/แก้ไขประกาศ) ---------- */
.image-link-rows { display: flex; flex-direction: column; gap: 8px; }
.image-link-row { display: flex; align-items: center; gap: 8px; }
.image-link-num { color: var(--muted); font-size: .82rem; width: 18px; flex-shrink: 0; }
.image-link-row input { flex: 1; min-width: 0; }
.image-link-remove { flex-shrink: 0; padding: 5px 10px; }
#image-link-add { margin-top: 4px; }

/* ---------- รายละเอียดเพิ่มเติมของประกาศ (จากฟอร์มลง/แก้ไขประกาศ) ---------- */
.listing-description { white-space: pre-line; line-height: 1.6; font-size: .92rem; color: var(--ink); background: #f5faf7; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; }

/* ---------- ดันประกาศตัวเอง (หน้าบัญชีของฉัน) ---------- */
.mine-row-actions { display: flex; gap: 6px; justify-self: end; flex-wrap: wrap; }
.mine-row-actions .bump-btn { white-space: nowrap; }
.badge-bumped { display: inline-block; background: #fff0d6; color: #8a5a00; border: 1px solid #f0c878; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
@media (max-width: 700px) { .mine-row-actions { justify-self: start; margin-top: 4px; } }

/* ---------- ประกาศจากแอดมิน (ปักหมุดบนสุดกระดาน) ---------- */
.site-announcement {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #fff7e0, #fff1c9);
  border: 1.5px solid #f0c94a; border-radius: var(--radius);
  padding: 14px 18px; margin: 16px 0; position: relative; overflow: hidden;
  box-shadow: 0 2px 6px rgba(150, 110, 0, .1);
  transition: box-shadow .15s ease, transform .15s ease;
}
.site-announcement:hover { box-shadow: 0 6px 16px rgba(150, 110, 0, .16); transform: translateY(-1px); }
.site-announcement-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8a5a00; background: rgba(255,255,255,.65); border: 1px solid #f0c94a;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 6px;
}
.site-announcement-title { font-weight: 700; color: #4a3400; font-size: 1rem; margin: 0; }
.site-announcement-excerpt { color: #6b4e00; font-size: .85rem; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-announcement-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #8a5a00; font-size: 1.1rem; }
.announcement-article { max-width: 720px; }
.announcement-article .muted { margin-top: -4px; }
.announcement-article-body { white-space: pre-line; line-height: 1.7; margin-top: 18px; font-size: .96rem; }

/* ---------- คอมเมนต์ในประกาศ ---------- */
.comments-section { margin-top: 32px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; max-width: 620px; margin-bottom: 18px; }
.comment-form textarea { min-height: 70px; resize: vertical; }
.comment-list { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.comment-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin-bottom: 4px; }
.comment-author { font-weight: 600; }
.comment-owner-tag { display: inline-block; background: var(--tag); color: var(--tag-ink); font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.comment-time { color: var(--muted); font-size: .76rem; }
.comment-body { font-size: .9rem; line-height: 1.55; white-space: pre-line; }
.comment-reply-btn { background: none; border: none; color: var(--board-2, #2f9e6f); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 4px 0; }
.comment-reply-btn:hover { text-decoration: underline; }
.comment-replies { margin: 10px 0 0 20px; padding-left: 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.comment-reply-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.comment-reply-form textarea { min-height: 54px; resize: vertical; }
.comment-empty { color: var(--muted); font-size: .88rem; }
.comment-login-note { color: var(--muted); font-size: .85rem; }

/* ---------- ลบบัญชี (danger zone) ---------- */
.danger-zone { margin-top: 32px; padding: 16px 18px; border: 1.5px solid #f0b8b2; background: #fdf3f2; border-radius: var(--radius); }
.danger-zone h2 { margin-top: 0; color: var(--danger); font-size: 1.02rem; }
.danger-zone p { margin: 6px 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }

/* ---------- หน้าบัญชีของฉัน: ข้อมูลส่วนตัว / เปลี่ยนรหัสผ่าน ---------- */
.profile-section { margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); max-width: 480px; }
.profile-section h2 { margin-top: 0; font-size: 1.02rem; }
.profile-section input:disabled { background: #f1f2ef; color: var(--muted); cursor: not-allowed; }

/* ---------- หน้าคู่มือคัดลอกลิงก์รูป ---------- */
.guide-callout {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin: 14px 0; background: var(--white);
}
.guide-callout strong { display: block; margin-bottom: 6px; font-size: 1rem; }
.guide-callout p { margin: 6px 0; line-height: 1.55; }
.guide-callout-good { background: #f0f9f0; border-color: #b7e0b7; }
.guide-callout-bad { background: #fdf3f2; border-color: #f0b8b2; }
.guide-example-link code { display: inline-block; margin-top: 4px; word-break: break-all; background: var(--white); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: .8rem; }
.guide-steps { padding-left: 22px; }
.guide-steps li { margin: 8px 0; line-height: 1.6; }
.guide-steps code { background: #f2f2f2; padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* ============================================================
   รองรับมือถือแบบเต็มรูปแบบ (mobile hardening pass)
   - กันหน้าล้นแนวนอน (horizontal overflow) เป็นตาข่ายนิรภัยชั้นสุดท้าย เผื่อเนื้อหาที่เพิ่มเข้ามาทีหลังพลาดพลั้ง
   - ขยายพื้นที่แตะ (touch target) ของปุ่ม/ลิงก์/ช่องกรอกให้ถึงเกณฑ์แตะง่าย (~44px) ตามคำแนะนำ Apple HIG / Material
   - กันฟอนต์อินพุตเล็กกว่า 16px ที่ทำให้ Safari บน iOS ซูมจออัตโนมัติตอนโฟกัสช่องกรอก
   - เผื่อพื้นที่ safe-area (รอยบาก/แถบโฮมมือถือรุ่นใหม่) ให้ป๊อปอัปและฟุตเตอร์ไม่โดนบัง
   ============================================================ */
/* ตั้ง overflow-x: hidden ไว้ที่ <html> เท่านั้น (ไม่ใช่ <body>) เพราะ overflow ของ html จะถูกส่งต่อไปที่ viewport โดยตรงตามสเปก
   ไม่สร้าง scroll container แยกใหม่ — ถ้าตั้งที่ body แทน จะทำให้ position:sticky (เช่นเมนูซ้ายหน้าแอดมินบนมือถือ) เพี้ยนทันที */
html { max-width: 100%; overflow-x: hidden; }

@media (max-width: 640px) {
  /* ปุ่มหลักทุกชนิด: ความสูงขั้นต่ำ ~44px เพื่อให้แตะง่ายด้วยนิ้วหัวแม่มือ */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; }
  .btn-sm { min-height: 38px; padding: 8px 12px; }
  button:not(.btn):not(.bookmark-btn):not(.gallery-thumbs button):not(.star-input label) { min-height: 40px; }

  /* ช่องกรอกข้อมูล: ความสูงขั้นต่ำแตะง่าย + ฟอนต์ไม่ต่ำกว่า 16px กัน iOS Safari ซูมอัตโนมัติตอนโฟกัส */
  input, select, textarea { min-height: 44px; font-size: max(16px, 1rem); }
  textarea { min-height: 88px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px; height: 20px; }

  /* ลิงก์เมนูบน/ล่าง และปุ่มแบ่งหน้า: ขยายพื้นที่แตะให้ถึงเกณฑ์ */
  .header-nav a, .footer-row nav a { padding: 8px 4px; display: inline-flex; align-items: center; min-height: 40px; }
  .pager a, .pager span { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; }
  .cat-rail a { min-height: 40px; display: inline-flex; align-items: center; }
  .bookmark-btn { min-width: 36px; min-height: 36px; }
  .gallery-thumbs button { min-width: 56px; min-height: 56px; }

  /* ป๊อปอัป/โมดัล: เว้นระยะขอบให้พอดีจอแคบ + เผื่อ safe-area (รอยบาก/แถบโฮม) */
  .mm-modal { padding: 22px 18px 20px; max-width: calc(100% - 24px); }
  .mm-modal-actions { flex-direction: column-reverse; gap: 8px; }
  .mm-modal-actions .btn { width: 100%; min-width: 0; }

  /* เว้นพื้นที่ปลอดภัยด้านล่างสุดของหน้า (แถบโฮม iPhone รุ่นใหม่ที่ไม่มีปุ่ม home) */
  .site-footer .footer-row { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* ตารางในหน้าแอดมิน: ตัวอักษรในช่องกรอกต้อง ≥16px เช่นกัน กันซูมอัตโนมัติตอนแตะกรอกในตาราง */
  .catalog-table input, .catalog-table select, .ads-table input, .ads-table select { font-size: max(16px, .95rem); min-height: 40px; }
}

/* ============================================================
   หน้าแอดมิน "สถิติเว็บไซต์" (admin/stats.html) — กราฟแท่ง/แถบ/hotmap
   ============================================================ */
.stat-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 18px; }
.stat-breakdown-grid h3 { font-size: .92rem; margin: 0 0 8px; color: var(--ink); }

/* กราฟแท่ง (รายวัน/สัปดาห์/เดือน/ปี) */
.stat-chart { display: flex; align-items: flex-end; gap: 6px; min-width: 560px; height: 180px; padding: 10px 4px 0; border-bottom: 1px solid var(--line); }
.stat-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 14px; }
.stat-bar-value { font-size: .68rem; color: var(--muted); margin-bottom: 3px; white-space: nowrap; }
.stat-bar { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--board-2), var(--board)); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .2s ease; }
.stat-bar-col:hover .stat-bar { background: linear-gradient(180deg, var(--tag), #d9a90f); }
.stat-bar-label { font-size: .64rem; color: var(--muted); margin-top: 6px; white-space: nowrap; transform: rotate(0deg); }

/* แถบแนวนอน (top categories/brands/provinces/sellers) */
.stat-hbars { display: flex; flex-direction: column; gap: 7px; }
.stat-hbar-row { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 8px; }
.stat-hbar-label { font-size: .82rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-hbar-track { background: var(--paper); border-radius: 999px; height: 10px; overflow: hidden; }
.stat-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--board), var(--board-2)); border-radius: 999px; }
.stat-hbar-count { font-size: .78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Hotmap */
.stat-heatmap-wrap { max-width: 480px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.stat-heatmap-wrap canvas { display: block; width: 100%; height: auto; }
.stat-heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.hm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 10px; }
.hm-dot:first-child { margin-left: 0; }
.hm-dot.hm-low { background: rgba(245,158,11,.35); }
.hm-dot.hm-mid { background: rgba(245,158,11,.75); }
.hm-dot.hm-high { background: rgba(220,38,38,.85); }

/* ============================================================
   ตัวนับผู้เข้าชมสะสมที่หน้าแรก — ข้อความเล็กๆ กึ่งกลาง เรียบง่าย
   ============================================================ */
.site-visit-counter {
  margin: 24px 0 0;
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}
.site-visit-counter #visit-counter-digits {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .stat-hbar-row { grid-template-columns: 70px 1fr 40px; }
  .stat-hbar-label { font-size: .76rem; }
}