/* ตลาดทุเรียน — mobile-first, ภาษาไทย (Tahoma เรนเดอร์ไทยได้ดีบน Windows) */
/* ธีมแอปมือถือ: เขียวเข้ม–ครีม–ขาว */
:root {
--green: #1e7a3c; /* เขียวกลาง (ไอคอน/โฟกัส) */
--green-dark: #14532d; /* เขียวเข้ม (header, ปุ่มหลัก, ราคา) */
--green-soft: #e3f2e6; /* พื้นเขียวอ่อน (กล่องสรุปแรก) */
--cream: #fbf6e9; /* พื้นครีม (กล่องสรุปถัดไป) */
--gold: #e0982e;
--line: #06c755;
--bg: #f0f7f0;
--card: #ffffff;
--ink: #1f2a22;
--muted: #6b7a6f;
--border: #e1ebe2;
--radius: 16px; /* การ์ดมุมมนใหญ่ (rounded-2xl) */
--shadow: 0 1px 3px rgba(20, 83, 45, .08), 0 1px 2px rgba(0, 0, 0, .04);
--maxw: 680px;
--tabbar-h: 62px;
/* หัวเว็บ/หน้าแรกสไตล์ Facebook */
--fb-green: #1F6B3F;
--fb-green-2: #2E8452; /* ปุ่มกลมในหัวเว็บ */
--fb-tab-off: #B9E2C7; /* ไอคอนเมนูที่ไม่ได้เลือก */
--fb-bg: #F0F2F5;
--fb-ink: #1C1E21; /* ตัวอักษรหลัก (ตามไฟล์แบบ) */
--fb-muted: #65676B;
--fb-line: #E4E6EB;
--fb-shadow: 0 1px 2px rgba(0, 0, 0, .12);
/* ฟอนต์: ไฟล์ไทย/ละตินอยู่ใน static/fonts (css/fonts.css) · ตัวจีนไม่มีไฟล์ ใช้ฟอนต์ในเครื่องผู้ใช้ (PR China-ready 2026-10-13) */
--font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
--font-head: "Prompt", "Sarabun", "Segoe UI", Tahoma, var(--font-zh);
--font-body: "Sarabun", "Segoe UI", Tahoma, system-ui, -apple-system, var(--font-zh);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
line-height: 1.55;
font-size: 16px;
}
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 14px; }
/* ---- inline SVG icons (Heroicons-outline style, templates/_icons/) ---- */
.icon { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.18em; }
.empty__icon .icon { width: 40px; height: 40px; opacity: .55; }
.card__thumb-icon .icon { width: 40px; height: 40px; }
.detail__thumb-icon .icon { width: 58px; height: 58px; }
/* ---- header สไตล์ Facebook: เขียว #1F6B3F, โลโก้/ปุ่มลงประกาศพื้นขาวตัวเขียว ---- */
.site-header {
position: sticky; top: 0; z-index: 20;
background: var(--fb-green); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: 56px; padding: 0 14px; max-width: 1440px; margin: 0 auto;
}
.hdr__left, .hdr__right { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.hdr__right { justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 8px; flex: none; font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: .1px; }
.brand__mark {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 38px; height: 38px; color: var(--fb-green); /* ไม่มีวงกลมขาวแล้ว (2026-10-15) — โลโก้ตัวการ์ตูนวางบนเขียวตรงๆ */
}
.brand__logo { width: 38px; height: 38px; display: block; } /* header-logo-96.png (โปร่งใส) */
/* ช่องค้นหา (แสดงอย่างเดียว ยังไม่ทำงาน) */
.hdr__search {
display: none; align-items: center; gap: 8px; height: 40px; width: 260px; max-width: 100%;
padding: 0 14px; border-radius: 999px; background: var(--fb-bg); color: var(--fb-muted);
}
.hdr__search .icon { width: 17px; height: 17px; }
.hdr__search input {
border: 0; background: transparent; outline: none; font: inherit; font-size: 15px;
width: 100%; min-width: 0; color: var(--fb-ink); cursor: default;
}
/* แท็บไอคอนกลาง: ที่เลือก = ขาว + ขีดล่าง, ที่เหลือ = #B9E2C7 */
.toptabs { display: none; align-self: stretch; gap: 4px; }
.toptab {
width: 110px; display: flex; align-items: center; justify-content: center;
color: var(--fb-tab-off); border-radius: 8px; margin: 4px 0;
}
.toptab .icon { width: 26px; height: 26px; }
.toptab:hover { background: rgba(255, 255, 255, .1); }
.toptab--active {
color: #fff; margin: 0; border-radius: 0; border-bottom: 3px solid #fff; padding-top: 3px;
}
.toptab--active:hover { background: none; }
.hdr__post {
display: none; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px;
background: #fff; color: var(--fb-green); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.hdr__post .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.hdr__post:hover { background: #e3f1e8; }
.hdr__pill {
display: none; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; border: 0;
background: var(--fb-green-2); color: #fff; font: inherit; font-weight: 600; font-size: 15px;
white-space: nowrap; cursor: pointer;
}
.hdr__pill:hover { background: #39945f; }
.hdr__auth.logout-form { display: none; }
@media (min-width: 820px) {
.site-header__inner { height: 60px; padding: 0 16px; }
.brand__name { display: none; }
.brand__mark { width: 44px; height: 44px; }
.brand__logo { width: 44px; height: 44px; }
.hdr__search, .toptabs, .hdr__post, .hdr__pill, .hdr__auth.logout-form { display: flex; }
}
/* ---- buttons ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent;
font-size: 14px; font-weight: 600; cursor: pointer; background: #e9efe9; color: var(--ink);
}
.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary:hover { background: #0f4224; }
.btn--pill { border-radius: 999px; padding: 8px 18px; }
.btn--post:disabled { opacity: .55; cursor: not-allowed; }
.btn--line { background: var(--line); color: #fff; }
.btn--phone { background: #fff; color: var(--green-dark); border-color: var(--green); }
.main { padding: 14px 14px 40px; }
/* มือถือ: เผื่อที่ให้ bottom nav (fixed) */
@media (max-width: 767px) { .main { padding-bottom: calc(var(--tabbar-h) + 24px); } }
/* ---- filters / chips ---- */
.filters { margin-bottom: 14px; }
.filters__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.filters__label { font-size: 12px; color: var(--muted); min-width: 42px; flex: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chip {
flex: none; display: inline-flex; align-items: center;
min-height: 36px; padding: 6px 14px; border-radius: 999px;
background: #fff; border: 1px solid var(--border); color: #4b5a4f;
font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { border-color: var(--green); }
.chip--active {
background: var(--green-dark); border-color: var(--green-dark);
color: #fff; font-weight: 700;
}
/* ---- results ---- */
.results { transition: opacity .15s; }
#board.htmx-request .results { opacity: .45; }
.results__count { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } }
/* ---- card ---- */
.card {
display: flex; flex-direction: column; background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow);
}
/* หัวการ์ด: avatar กลม + ชื่อ (หนา) + พื้นที่ · เวลา relative + badge หมวดชิดขวา */
.card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; }
.card__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: block; }
.card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.card__name { font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.card__name:hover { color: var(--green-dark); }
.card__who .card__meta { margin: 0; font-size: 12.5px; }
.card__dot { margin: 0 3px; }
.card__cat { flex: none; }
.card__thumb {
margin: 0 12px 4px; border-radius: 12px; overflow: hidden;
aspect-ratio: 16 / 9; background: #eef4ee;
display: flex; align-items: center; justify-content: center;
}
.card__thumb-icon { font-size: 42px; opacity: .55; }
.card__body { padding: 8px 12px 6px; }
.card__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.card__title { font-size: 16px; margin: 0 0 4px; line-height: 1.4; font-weight: 600; }
.card__meta { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.card__price { margin: 0; }
/* ---- badges / price ---- */
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge--cat { background: var(--green-soft); color: var(--green-dark); }
.badge--verified { background: #e8f5e9; color: var(--green); }
.badge--muted { background: #eef1ee; color: #5c6a5f; }
.price { font-size: 17px; font-weight: 800; color: var(--green-dark); }
.price--lg { font-size: 24px; }
.price--board { font-size: 14px; font-weight: 700; color: var(--gold); }
.price--ask { font-size: 14px; font-weight: 600; color: var(--muted); }
/* ---- empty ---- */
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty__icon { font-size: 46px; }
.empty__title { font-weight: 700; margin: 8px 0 2px; color: #555; }
.empty__hint { font-size: 13px; margin: 0; }
/* ---- detail ---- */
.backlink { display: inline-block; margin: 4px 0 12px; color: var(--green-dark); font-weight: 600; font-size: 14px; }
.detail { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 0 18px; overflow: hidden; }
.detail__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #eef4ee, #e3ece1); display: flex; align-items: center; justify-content: center; }
.detail__thumb-icon { font-size: 72px; opacity: .55; }
.detail__badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 16px 0; }
.detail__title { font-size: 22px; font-weight: 800; margin: 8px 16px 4px; }
.detail__area { margin: 0 16px 8px; color: var(--muted); font-size: 14px; }
.detail__price { margin: 0 16px 10px; }
.detail__desc { margin: 0 16px 14px; white-space: pre-line; }
.detail__posted { margin: 10px 16px 0; }
.block { margin: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.block__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: #333; }
/* attributes */
.attrs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.attrs dt { color: var(--muted); font-size: 14px; }
.attrs dd { margin: 0; font-weight: 600; font-size: 14px; }
/* price table */
.table-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th, .ptable td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ptable thead th { background: #f3f6f2; color: var(--green-dark); font-size: 13px; }
.ptable .num { text-align: right; font-weight: 700; color: var(--green-dark); }
/* offers */
.offers__top { margin: 0 0 8px; font-size: 15px; }
.offers__top strong { color: var(--gold); font-size: 18px; }
.offers { list-style: none; margin: 0; padding: 0; }
.offers__item { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.offers__price { font-weight: 800; color: var(--green-dark); min-width: 84px; }
.offers__by { font-size: 14px; }
/* contact */
.contact__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.contact__seller { font-size: 14px; color: #444; margin: 0; }
/* utils */
.muted { color: var(--muted); }
.small { font-size: 12px; }
/* ---- header nav / auth ---- */
.btn--post { padding: 7px 14px; font-size: 14px; background: #fff; color: var(--green-dark); border-radius: 999px; }
.btn--post:hover { background: var(--green-soft); }
.logout-form { margin: 0; }
.linkbtn { background: none; border: none; color: #fff; font: inherit; font-size: 13px; cursor: pointer; opacity: .9; text-decoration: underline; padding: 0; }
.linkbtn:hover { opacity: 1; }
/* ---- page title / selector ---- */
.page-title { font-size: 22px; font-weight: 800; margin: 6px 0 14px; }
.selector { margin-bottom: 16px; }
.selector__label { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.selector__hint { margin: 8px 0 0; }
/* ---- forms ---- */
.postform { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.postform__cat { margin: 0 0 14px; font-size: 14px; color: #555; }
.postform-empty { background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); padding: 30px 16px; text-align: center; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: #444; }
.field .req { color: #c0392b; }
.postform input[type="text"],
.postform input[type="number"],
.postform input[type="password"],
.postform input[type="date"],
.postform input:not([type]),
.postform select,
.postform textarea {
width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink);
}
.postform textarea { resize: vertical; }
.postform input:focus, .postform select:focus, .postform textarea:focus {
outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
.field--error input, .field--error select, .field--error textarea { border-color: #c0392b; }
.field__hint { display: block; margin-top: 4px; }
.field__err { display: block; margin-top: 4px; color: #c0392b; font-size: 12px; }
.form-errors { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.btn--block { width: 100%; padding: 12px; font-size: 16px; margin-top: 4px; }
/* ---- buy-board form (price rows) ---- */
.board-rows__title { margin-top: 6px; }
.board-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: #fbfbf8; }
.board-row__grid {
display: grid; gap: 8px; align-items: center;
grid-template-columns: 1fr 1fr 36px;
grid-template-areas:
"type type del"
"grade price unit"
"note note note";
}
.brc--type { grid-area: type; }
.brc--grade { grid-area: grade; }
.brc--price { grid-area: price; }
.brc--unit { grid-area: unit; }
.brc--note { grid-area: note; }
.board-row__del {
grid-area: del; align-self: stretch; background: #fff; border: 1px solid var(--border);
border-radius: 8px; color: #c0392b; cursor: pointer; font-size: 14px; line-height: 1;
}
.board-row__del:hover { background: #fdecea; border-color: #f5c6cb; }
.board-row__err { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.boardform input.inp-err, .boardform select.inp-err { border-color: #c0392b; }
@media (min-width: 600px) {
.board-row__grid {
grid-template-columns: 1.5fr .9fr 1fr .8fr 1.6fr 36px;
grid-template-areas: "type grade price unit note del";
}
}
.btn--ghost { background: #fff; border: 1px solid var(--green); color: var(--green-dark); }
.btn--ghost:hover { background: #f0f6f0; }
.btn--addrow { margin: 2px 0 16px; }
/* กล่องเคลมแผง curated */
.claim-box {
border: 2px dashed var(--gold); border-radius: 10px;
padding: 12px 14px; margin: 12px 0; background: #fffbef;
}
.claim-box p { margin: 4px 0; }
/* ---- กระดานราคากลาง ---- */
/* แถบสรุปหัวกระดาน: วันที่ · จำนวนแผง · ช่วงราคา */
.boardbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
background: var(--card); border: 1px solid var(--border); border-radius: 9px;
padding: 10px 14px; margin-bottom: 12px; font-size: 14px;
}
.boardbar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.boardbar__item .icon { color: var(--green); }
/* กล่องแจ้งข้อมูล (ไม่ใช่ error) เช่น "วันนี้ยังไม่มีแผงลงราคา" */
.notice {
background: #fff7e6; border: 1px solid #eeda9f; color: #8a5a00;
border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px;
}
/* ---- การ์ดสรุปราคาวันนี้ (หัวหน้าแรก) ---- */
.sumcard {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 14px 14px 12px; margin-bottom: 14px;
}
.sumcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sumcard__title { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.sumcard__sub { margin: 2px 0 0; font-size: 12px; }
.sumcard__region select {
font: inherit; font-size: 13px; font-weight: 700; color: var(--green-dark);
background: var(--green-soft); border: 1px solid transparent; border-radius: 999px;
padding: 6px 28px 6px 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
.sumcard__region select:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 122, 60, .18); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* แท็บพันธุ์ในการ์ดสรุป (active = เขียวเข้มตัวขาว) */
.vtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding-bottom: 2px; }
.vtabs::-webkit-scrollbar { display: none; }
.vtab {
flex: none; min-height: 34px; padding: 6px 16px; border-radius: 999px;
border: 1px solid var(--border); background: #fff; color: #4b5a4f;
font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.vtab--active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
/* กล่องราคาต่อเกรด: 1 = ทอง/ครีม, 2 = เขียวอ่อน, 3 = เทาอ่อน */
.sumcard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sumbox { border-radius: 12px; padding: 10px 10px 9px; min-width: 0; border: 1px solid transparent; }
.sumbox--1 { background: var(--cream); border-color: #f0dfb0; }
.sumbox--2 { background: var(--green-soft); border-color: #cfe6d3; }
.sumbox--3 { background: #f2f4f2; border-color: #e3e7e3; }
.sumbox__name { font-weight: 800; font-size: 13px; color: var(--ink); }
.sumbox--1 .sumbox__name { color: #8a5a00; }
.sumbox--2 .sumbox__name { color: var(--green-dark); }
.sumbox__range {
font-size: 26px; font-weight: 800; color: var(--green-dark); line-height: 1.1;
margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; overflow-wrap: anywhere;
}
.sumbox__range small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 1px; }
.sumbox__diff { font-size: 12px; font-weight: 700; margin-top: 4px; color: var(--muted); }
.sumbox__diff--up { color: #1e7a3c; }
.sumbox__diff--down { color: #d03a1e; }
.sumcard__empty { margin: 4px 0 8px; font-size: 14px; }
.sumcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sumcard__src { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.sumcard__src .icon { color: var(--green); }
@media (max-width: 400px) { .sumbox__range { font-size: 22px; } .sumbox { padding: 8px 8px 7px; } .sumbox__diff { font-size: 11px; } }
@media (min-width: 560px) { .sumbox__range { font-size: 32px; } }
/* ชิพพื้นที่แถวเดียวเหนือ "ราคาแต่ละแผง" */
.chips--region { margin: 4px 0 10px; }
/* หัวเซกชัน (ชื่อ + ลิงก์ขวา) */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.section-title { font-size: 16px; font-weight: 800; margin: 0; }
.section-link { font-size: 13px; font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }
/* การ์ดต่อโพสต์ (1 การ์ด = 1 โพสต์ราคาของแผง): หัว avatar+ชื่อ → ตาราง พันธุ์×เกรด → หมายเหตุ/ปุ่ม */
.grid--posts { gap: 10px; }
.pcard {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 12px 12px 10px;
}
.pcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pcard__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: block; }
.pcard__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__avatar .avatar { width: 42px; height: 42px; }
.pcard__who { flex: 1; min-width: 0; }
.pcard__row1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.pcard__stall {
font-weight: 800; color: var(--ink); font-size: 17px; line-height: 1.25;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.pcard__stall:hover { color: var(--green-dark); text-decoration: underline; }
.pcard__row1 .badge { flex: none; }
.pcard__row2 { font-size: 12px; line-height: 1.4; margin-top: 1px; }
/* ตารางเกรด: เซลล์ราคาเป็นกล่องมนขอบสี */
.gtable-wrap { overflow-x: auto; margin: 6px -4px 0; }
.gtable-wrap + .gtable-wrap { margin-top: 8px; }
.gtable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px 4px; margin: -4px 0; font-size: 13px; }
.gtable th.gtable__var { width: 26%; }
.gtable th { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 0 2px 2px; white-space: nowrap; }
.gtable th.gtable__var, .gtable td.gtable__var { text-align: left; white-space: nowrap; }
.gtable td.gtable__var { font-weight: 700; font-size: 13.5px; color: var(--ink); padding-right: 4px; overflow: hidden; text-overflow: ellipsis; }
.gtable td { padding: 0; text-align: center; }
.pricebox {
min-width: 0; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 40px; padding: 4px 6px; border-radius: 10px;
border: 1.5px solid #bfdcc5; background: #f4faf5; color: var(--green-dark);
font-size: 17px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.pricebox__note { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pricebox--none { border-color: var(--border); background: #fafbfa; color: #b0b8b2; font-weight: 600; }
.pcard__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pcard__note { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.pcard__note .icon { flex: none; margin-top: 2px; color: var(--green); }
.pcard__actions { display: flex; gap: 8px; }
.pcard__actions .btn { flex: 1; min-height: 38px; font-size: 13.5px; }
/* ปุ่มลอย "+ ลงราคา" (มือถือ) — เอาออกจาก board.html แล้ว 2026-10-04 (ซ้ำ tabbar); CSS คงไว้ ซ่อนก่อน-ลบทีหลัง */
.fab {
position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 24;
display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 10px 18px 10px 14px;
border-radius: 999px; background: var(--green-dark); color: #fff; font-weight: 800; font-size: 15px;
box-shadow: 0 6px 18px rgba(20, 83, 45, .35);
}
.fab .icon { width: 20px; height: 20px; }
.fab:hover { background: #0f4224; }
@media (min-width: 768px) { .fab { display: none; } }
/* แถวราคารายวันของแผง (stalls) — 4 ช่อง ไม่มี unit (fix บาท/กก.) */
.price-row__grid {
display: grid; gap: 8px; align-items: center;
grid-template-columns: 1fr 1fr 36px;
grid-template-areas:
"variety grade del"
"price note note";
}
.prc--variety { grid-area: variety; }
.prc--grade { grid-area: grade; }
.prc--price { grid-area: price; }
.prc--note { grid-area: note; }
@media (min-width: 600px) {
.price-row__grid {
grid-template-columns: 1.2fr 1.1fr .9fr 1.8fr 36px;
grid-template-areas: "variety grade price note del";
}
}
/* ---- photos ---- */
.card__thumb { position: relative; }
.card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__count {
position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .6);
color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
display: inline-flex; align-items: center; gap: 4px;
}
/* แกลเลอรีหน้า detail ประกาศ — รูปแรกใหญ่ + แถว thumbnail (แบบเฟส) */
.dgal__main { display: block; background: #eef4ee; }
.dgal__main img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; }
.dgal__thumbs {
display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto;
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--border);
}
.dgal__thumb {
flex: none; width: 64px; height: 64px; border-radius: 8px;
overflow: hidden; border: 1px solid var(--border);
}
.dgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* รูปหน้าแผง — ลิงก์ครอบรูปให้เต็มกรอบเดิม */
.detail__thumb-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.photo-field input[type="file"] { width: 100%; font-size: 14px; padding: 8px 0; }
/* ---- owner controls (เจ้าของประกาศ) ---- */
.owner-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 16px 0; }
.owner-bar__form { margin: 0; }
.btn--warn { background: #e08a2e; color: #fff; }
.btn--warn:hover { background: #c8761f; }
/* ---- auth ---- */
.auth { max-width: 380px; margin: 0 auto; }
.auth__hint { margin-top: 14px; text-align: center; }
/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--border); padding: 18px 0 28px; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 767px) { .site-footer { padding-bottom: calc(var(--tabbar-h) + 18px); } }
/* ---- bottom navigation (มือถือ) — 4 แท็บ, active = เขียวเข้ม + ขีดบน ---- */
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
display: grid; grid-template-columns: repeat(4, 1fr);
height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: #fff; border-top: 1px solid var(--border);
box-shadow: 0 -2px 10px rgba(20, 83, 45, .06);
}
.tabbar__item {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; color: #8a978d; font-size: 11px; font-weight: 600; line-height: 1;
}
.tabbar__item .icon { width: 24px; height: 24px; }
.tabbar__item--active { color: var(--green-dark); font-weight: 800; }
.tabbar__item--active::before {
content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
background: var(--green-dark); border-radius: 0 0 3px 3px;
}
/* ปุ่มกลาง "ลงราคา" เด่น: วงกลมเขียวเข้มยกขึ้น */
.tabbar__cta {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 50%; margin-top: -22px;
background: var(--green-dark); color: #fff; box-shadow: 0 4px 12px rgba(20, 83, 45, .35);
border: 3px solid var(--bg);
}
.tabbar__cta .icon { width: 24px; height: 24px; }
.tabbar__item--cta { color: var(--green-dark); }
.tabbar__item--cta.tabbar__item--active::before { display: none; }
@media (min-width: 768px) { .tabbar { display: none; } }
/* แถบบัญชีบนหน้า "แผงของฉัน" (โปรไฟล์) */
.acctbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 10px 12px; margin-bottom: 14px;
}
.acctbar__name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acctbar__logout { margin: 0; }
.acctbar__link {
display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px;
border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--green-dark);
font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.acctbar__link:hover { background: var(--green-soft); }
/* ============ Facebook-style composer ============ */
/* กล่องโพสต์บนสุดของฟีด */
/* วงกลมโปรไฟล์กลาง (templates/_avatar.html ผ่าน {% stall_avatar %}/{% avatar %}) — สีผูกกับแผงจาก id (6 สี ตัวขาวอ่านชัด)
อักษรอังกฤษ 2 ตัว (Prompt 600) · ไม่มี = ไอคอนร้านค้า/ผู้ใช้ · มีรูปโลโก้ = รูป */
.avatar {
width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
background: var(--fb-green); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 15px;
letter-spacing: .3px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar .icon { width: 52%; height: 52%; vertical-align: 0; }
.avatar--sm { width: 36px; height: 36px; font-size: 14px; }
.avatar--xs { width: 32px; height: 32px; font-size: 13px; margin-top: 2px; }
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.avatar--c0 { background: #1F6B3F; }
.avatar--c1 { background: #B4471F; }
.avatar--c2 { background: #5B47B0; }
.avatar--c3 { background: #2C5F99; }
.avatar--c4 { background: #A33B5C; }
.avatar--c5 { background: #4B4F56; }
.avatar--photo { background: #E4E6EB; }
.fbcomposer {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 12px; margin-bottom: 14px;
}
.fbcomposer__row { display: flex; align-items: center; gap: 10px; }
.fbcomposer__input {
flex: 1; background: #f0f2ec; border-radius: 20px; padding: 10px 16px;
color: var(--muted); font-size: 15px;
}
.fbcomposer__row:hover .fbcomposer__input { background: #e9ece4; }
.fbcomposer__actions {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.fbcomposer__actions a {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: 40px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #555;
}
.fbcomposer__actions a:hover { background: #f0f2ec; }
.fbcomposer__actions .icon { color: var(--green); }
/* card สร้างโพสต์ (/post/) */
.composer-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 14px; max-width: 560px; margin: 0 auto;
}
.composer-card__title {
font-size: 17px; font-weight: 800; text-align: center;
margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.composer-card .postform { border: none; box-shadow: none; padding: 0; }
/* segmented selector 4 หมวด */
.segmented {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-bottom: 12px;
}
.segmented__item {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 54px; padding: 8px 4px; font-size: 12.5px; font-weight: 600; color: #555;
border-right: 1px solid var(--border); text-align: center;
}
.segmented__item:last-child { border-right: none; }
.segmented__item .icon { width: 20px; height: 20px; }
.segmented__item:hover { background: #f0f2ec; }
.segmented__item--active { background: var(--green-dark); color: #fff; }
.segmented__item--active:hover { background: var(--green-dark); }
/* ช่องหัวเรื่องใหญ่ไร้กรอบ */
.postform textarea.composer-title, .composer-title {
width: 100%; border: none; outline: none; resize: none; background: transparent;
font: inherit; font-size: 20px; font-weight: 600; line-height: 1.45;
padding: 8px 2px; min-height: 64px; color: var(--ink); border-radius: 0;
}
.composer-title::placeholder { color: #b9beb3; font-weight: 500; }
.postform textarea.composer-title:focus { box-shadow: none; border: none; }
.composer-title.inp-err { border-bottom: 2px solid #c0392b; }
/* ฟิลด์รอง — แถวกะทัดรัด */
.composer-more { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.crow__label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 5px; }
.crow--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.crow--grid .crow { margin: 0; }
/* chip เลือกค่า (radio) + chip เติมค่า (ปุ่ม) */
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset--fill { margin-bottom: 8px; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span {
display: inline-flex; align-items: center; min-height: 40px; padding: 7px 13px;
border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #555;
font-size: 14px; cursor: pointer;
}
.chip-radio input:checked + span {
background: var(--green-dark); border-color: var(--green-dark); color: #fff; font-weight: 700;
}
.chip-radio input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
.fillchip {
display: inline-flex; align-items: center; min-height: 40px; padding: 7px 13px;
border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #555;
font: inherit; font-size: 14px; cursor: pointer;
}
.fillchip:hover { border-color: var(--green); color: var(--green-dark); }
/* กล่องอัปรูป drag-drop + preview */
.photobox {
border: 2px dashed var(--border); border-radius: 10px; padding: 14px;
text-align: center; background: #fbfbf8;
}
.photobox.is-drag { border-color: var(--green); background: #f0f6f0; }
.photobox__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photobox__btn {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
border: 1px solid var(--green); border-radius: 9px; background: #fff;
color: var(--green-dark); font-weight: 700; font-size: 15px; cursor: pointer;
}
.photobox__btn .icon { width: 20px; height: 20px; }
.photobox__hint, .photobox__busy { margin: 8px 0 0; }
.photobox--has .photobox__busy { margin: 6px 0 0; }
/* collage preview ใหญ่แบบเฟส — layout ขับด้วย data-n (จำนวนรูป) */
.photobox--has { padding: 8px; border-style: solid; text-align: left; }
.photobox--has .photobox__btn, .photobox--has .photobox__hint { display: none; }
.photobox__stage { position: relative; }
.photobox__addmore {
position: absolute; top: 8px; left: 8px; z-index: 3;
display: inline-flex; align-items: center; gap: 5px;
min-height: 36px; padding: 6px 12px; border-radius: 9px;
background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer;
box-shadow: var(--shadow);
}
.photobox__addmore .icon { width: 16px; height: 16px; }
.photobox__previews { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.photobox__previews[data-n="1"] { grid-template-columns: 1fr; }
.photobox__thumb {
position: relative; width: 100%; aspect-ratio: 1;
border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
}
.photobox__previews[data-n="1"] .photobox__thumb { aspect-ratio: 4 / 3; }
.photobox__previews[data-n="3"] .photobox__thumb:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.photobox__previews .photobox__thumb:nth-child(n+5) { display: none; } /* เกิน 4 → ซ่อนหลังม่าน +N */
.photobox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photobox__rm {
position: absolute; top: 6px; right: 6px; z-index: 2;
width: 28px; height: 28px; border-radius: 50%;
border: none; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
}
.photobox__rm:hover { background: rgba(0, 0, 0, .8); }
.photobox__more {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .45); color: #fff; font-size: 26px; font-weight: 800;
}
.composer-submit { margin-top: 14px; }
/* ปุ่มเพิ่มแถว (ฟอร์มราคาแผง + บอร์ด) ให้เด่นและกดง่ายบนมือถือ */
.btn--addrow { width: 100%; min-height: 44px; border-style: dashed; font-size: 15px; }
/* ---- ฟอร์มโพสต์ minimal: รูปคือพระเอก ---- */
.composer-form > .crow { margin-top: 12px; }
.composer-form .photobox { padding: 26px 14px; }
.composer-form .photobox__btn { min-height: 52px; padding: 12px 26px; font-size: 16px; }
.composer-form .photobox__btn .icon { width: 24px; height: 24px; }
.composer-content {
min-height: 0; overflow: hidden; /* auto-resize ด้วย JS — ไม่มี scrollbar ใน textarea */
font-size: 17px; font-weight: 500; margin-top: 4px;
}
.composer-area { margin-top: 4px; }
/* แถบ "เพิ่มลงในโพสต์" (composer action bar) */
.addbar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
border: 1px solid var(--border); border-radius: 9px;
padding: 4px 6px 4px 12px; margin-top: 10px;
}
.addbar__label { font-size: 13.5px; font-weight: 600; color: #555; }
.addbar__icons { display: flex; gap: 4px; }
.addbar__btn {
position: relative; width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 9px; background: transparent; color: #7a7a72; cursor: pointer;
}
.addbar__btn:hover { background: #f0f2ec; }
.addbar__btn .icon { width: 22px; height: 22px; }
.addbar__btn--set { color: var(--green-dark); }
.addbar__btn--set::after {
content: ""; position: absolute; top: 7px; right: 7px;
width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
.addbar-field { margin-top: 8px; }
.addbar-field:not([hidden]) { animation: addbar-in .15s ease-out; }
@keyframes addbar-in { from { opacity: 0; transform: translateY(-4px); } }
.addbar-field input {
width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink);
}
.addbar-field input:focus {
outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
/* พิกัด/ตำบล ใต้พื้นที่ (หน้า detail) */
.detail__loc { margin-top: -4px; }
.detail__loc-link { color: var(--green-dark); font-weight: 600; text-decoration: underline; }
/* ---- lightbox (static/js/lightbox.js) ---- */
.lb {
position: fixed; inset: 0; z-index: 100; display: none;
align-items: center; justify-content: center; background: rgba(0, 0, 0, .93);
}
.lb--open { display: flex; }
.lb__img { max-width: 96vw; max-height: 92vh; object-fit: contain; display: block; }
.lb__count {
position: absolute; top: 12px; left: 14px; color: #fff;
font-size: 14px; font-weight: 700; letter-spacing: .5px;
}
.lb__close {
position: absolute; top: 8px; right: 10px; width: 40px; height: 40px;
border: none; border-radius: 9px; background: rgba(255, 255, 255, .12);
color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.lb__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 64px; border: none; border-radius: 9px;
background: rgba(255, 255, 255, .12); color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
}
.lb__nav--prev { left: 8px; }
.lb__nav--next { right: 8px; }
.lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, .25); }
/* ---- ติดตามแผง (followbox) ---- */
.followbox { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 4px 16px 10px; }
.followbox form { margin: 0; }
.followbox__btn { min-height: 40px; }
.followbox__count { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
/* ---- กระดิ่งแจ้งเตือน (nav) ---- */
.notifwrap { position: relative; display: flex; }
.notifbell {
position: relative; width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 50%; background: var(--fb-green-2); color: #fff; cursor: pointer;
}
.notifbell:hover { background: #39945f; }
.notifbell .icon { width: 22px; height: 22px; }
.notifbadge { position: absolute; top: 1px; right: -1px; pointer-events: none; }
/* จอแคบ: บีบช่องไฟ nav ให้กระดิ่งเข้าแถวได้โดยไม่ล้นขอบ (เช็คที่ 375px) */
@media (max-width: 420px) {
.notifbell { width: 36px; height: 36px; }
}
.notifbadge__num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
background: #e53935; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
/* dropdown แจ้งเตือน — desktop ห้อยใต้กระดิ่ง, มือถือเต็มความกว้าง */
.notifpanel {
position: absolute; right: 0; top: 48px; width: 340px; max-height: 70vh; overflow-y: auto;
background: var(--card); color: var(--ink); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); z-index: 30;
}
@media (max-width: 599px) {
.notifpanel { position: fixed; left: 8px; right: 8px; top: 62px; width: auto; }
}
.notifpanel__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 15px;
}
.notifpanel__readall {
background: none; border: none; padding: 0; font: inherit; font-size: 13px;
color: var(--green-dark); text-decoration: underline; cursor: pointer;
}
.notifpanel__all { display: block; text-align: center; padding: 11px; font-size: 14px; font-weight: 700; color: var(--green-dark); border-top: 1px solid var(--border); }
.notifpanel__all:hover { background: #f4f7f3; }
/* รายการแจ้งเตือน (ใช้ทั้ง dropdown และหน้ารวม) */
.notiflist { list-style: none; margin: 0; padding: 0; }
.notif a { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.notif:last-child a { border-bottom: none; }
.notif a:hover { background: #f4f7f3; }
.notif--unread a { background: #eef6ee; }
.notif--unread .notif__msg { font-weight: 700; }
.notif__msg { display: block; font-size: 14px; line-height: 1.45; }
.notif__time { display: block; margin-top: 2px; }
.notiflist__empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 14px; }
/* หน้ารวมแจ้งเตือน /notifications/ */
.notifpage__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.notifpage__head form { margin: 0 0 10px; }
.notiflist--page {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow);
}
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.pager__info { flex: none; }
/* ---- ใจ + คอมเมนต์ ---- */
/* การ์ดเปลี่ยนโครงจาก เดี่ยวเป็น div + ลิงก์ภายใน (ปุ่มใจต้องกดได้ ไม่ซ้อนใน ) */
.card__link { display: flex; flex-direction: column; flex: 1; }
.card__foot {
display: flex; align-items: center; gap: 4px;
border-top: 1px solid var(--border); padding: 2px 8px; margin-top: 4px;
}
.likebox form { margin: 0; display: inline-flex; }
.likebtn {
display: inline-flex; align-items: center; gap: 5px;
min-height: 38px; padding: 6px 10px; border: none; border-radius: 9px;
background: transparent; color: var(--muted); font: inherit; font-size: 13.5px;
font-weight: 600; cursor: pointer;
}
.likebtn:hover { background: #f0f2ec; }
.likebtn .icon { width: 19px; height: 19px; }
.likebtn--on { color: #e53935; }
.likebtn--on .icon { fill: currentColor; }
.card__cmt {
display: inline-flex; align-items: center; gap: 5px;
min-height: 38px; padding: 6px 10px; border-radius: 9px;
color: var(--muted); font-size: 13.5px; font-weight: 600;
}
.card__cmt:hover { background: #f0f2ec; }
.card__cmt .icon { width: 19px; height: 19px; }
.card__cmt-num, .likebtn__num { font-variant-numeric: tabular-nums; }
/* แถวใจ+คอมเมนต์บนหน้า detail (เหนือ section คอมเมนต์) */
.detail__engage {
display: flex; align-items: center; gap: 8px;
margin: 4px 16px 0; padding-top: 10px; border-top: 1px solid var(--border);
}
.detail__engage .likebtn { font-size: 14.5px; }
.detail__cmtcount {
display: inline-flex; align-items: center; gap: 5px;
min-height: 38px; padding: 6px 10px; border-radius: 9px;
color: var(--muted); font-size: 14.5px; font-weight: 600;
}
.detail__cmtcount:hover { background: #f0f2ec; }
/* รายการคอมเมนต์ */
.comment-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comment-list__empty { padding: 4px 0; font-size: 14px; }
/* มีคอมเมนต์จริงเข้ามา (htmx append) → ซ่อนแถว "ยังไม่มีคอมเมนต์" */
.comment-list__empty:not(:only-child) { display: none; }
.comment { display: flex; align-items: flex-start; gap: 8px; }
.comment__bubble {
flex: 1; min-width: 0; background: #f0f2ec; border-radius: 12px; padding: 7px 12px;
}
.comment__name { display: block; font-size: 13px; color: var(--green-dark); }
.comment__text { display: block; font-size: 14.5px; line-height: 1.5; overflow-wrap: break-word; }
.comment__time { display: block; margin-top: 1px; }
.comment__hideform { margin: 2px 0 0; }
.comment__hide {
width: 30px; height: 30px; border: none; border-radius: 50%;
background: transparent; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.comment__hide:hover { background: #fdecea; color: #c0392b; }
/* ปุ่มจิ้มสำเร็จรูป + ช่องพิมพ์ */
.quickreplies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.comment-form { display: flex; gap: 8px; }
.comment-form input {
flex: 1; min-width: 0; padding: 10px 14px; font: inherit; font-size: 15px;
border: 1px solid var(--border); border-radius: 20px; background: #fff; color: var(--ink);
}
.comment-form input:focus {
outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
.comment-login { font-size: 14px; }
/* ---- แก้ไขประกาศ (เฟส 13) ---- */
/* แถบยืนยันหลัง redirect (django messages) */
.flash {
border-radius: 9px; padding: 10px 14px; margin-bottom: 12px;
font-size: 14.5px; font-weight: 600;
background: #e8f3e8; color: var(--green-dark); border: 1px solid #bcd9bc;
}
.flash--error, .flash--warning { background: #fdecea; color: #c0392b; border-color: #f5c6cb; }
/* รูปเดิมในฟอร์มแก้ไข — ติ๊ก ✕ เพื่อลบ (checkbox ทำงานได้แม้ไม่มี JS) */
.photobox__olds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.photobox__old {
position: relative; aspect-ratio: 1;
border-radius: 9px; overflow: hidden; border: 1px solid var(--border);
}
.photobox__old img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photobox__del {
position: absolute; top: 6px; right: 6px; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
}
.photobox__del:hover { background: rgba(0, 0, 0, .8); }
.photobox__del input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* ติ๊กลบแล้ว → รูปจาง + ปุ่มแดง (กดซ้ำ = ยกเลิก) */
.photobox__old:has(input:checked) img { opacity: .35; filter: grayscale(1); }
.photobox__old:has(input:checked) .photobox__del { background: #c0392b; }
.photobox__oldhint { margin: 0 0 10px; }
/* หน้าประกาศของฉัน + ลิงก์บนฟีด */
.feed-minelink { text-align: right; margin: -6px 0 10px; }
.mine-item__bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mine-item__bar .btn { flex: 1; }
/* ---- ผูกแผงกับโพสต์บอร์ด (เฟส 14) ---- */
.composer-stall { margin-bottom: 12px; }
.composer-stall .crow__label { display: block; margin-bottom: 5px; }
.composer-stall__hint { margin: 5px 0 0; }
/* ชื่อแผงท้ายการ์ดฟีด — ชิดขวา กดไปหน้าแผง */
.card__stall {
display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
min-height: 38px; padding: 6px 10px; border-radius: 9px;
color: var(--green-dark); font-size: 13.5px; font-weight: 700;
max-width: 55%; overflow: hidden;
}
.card__stall span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__stall .icon { flex: 0 0 auto; width: 16px; height: 16px; }
.card__stall:hover { background: #eef3ea; }
.detail__stall a { font-weight: 700; }
/* badge "ทีมงานรวบรวมจากประกาศสาธารณะของแผง" (เฟส 14.1) — ข้อความยาว ให้ตัวเล็กและห่อบรรทัดได้ */
.badge--collected { white-space: normal; line-height: 1.35; text-align: left; font-weight: 600; }
/* ---- ฟอร์มย่อ "เพิ่มแผงใหม่" ในฟอร์มโพสต์บอร์ด (เฟส 15, staff) ---- */
.newstall {
margin-top: 10px; padding: 12px; border: 1px dashed var(--border);
border-radius: 10px; background: #fbfbf8;
display: flex; flex-direction: column; gap: 10px;
}
.newstall__field input[type="text"], .newstall__field input[type="tel"] { width: 100%; }
.newstall__hint { margin: 0; }
.newstall__warn {
border: 1px solid #e8c97a; background: #fdf6e3; border-radius: 9px;
padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.newstall__warn-title { margin: 0; font-weight: 700; font-size: 14px; }
.newstall__sim {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 14px;
}
.newstall__sim .btn { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; }
/* hotfix เฟส 15: display:flex ของ .newstall ทับ attribute hidden (UA style แพ้ author style)
+ input เบอร์โทร (type=tel) ในฟอร์มย่อไม่โดน selector กลางของ .postform ที่ไม่มี tel */
.newstall[hidden] { display: none; }
.newstall__field input[type="tel"], .newstall__field input[type="text"] {
padding: 10px 12px; font: inherit; font-size: 15px;
border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink);
}
.newstall__field input:focus {
outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
/* ---- วางข้อมูลราคา bulk ในฟอร์มโพสต์บอร์ด (เฟส 16, staff) ---- */
.bulkpaste { margin: -6px 0 16px; } /* ชิดใต้ปุ่ม "+ เพิ่มแถว" */
.bulkpaste__toggle { min-height: 40px; }
.bulkpaste__panel { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.bulkpaste__panel[hidden] { display: none; } /* display:flex ทับ hidden — บทเรียน hotfix เฟส 15 */
.bulkpaste__text { font-size: 14px; line-height: 1.5; }
.bulkpaste__hint { margin: 0; }
/* ช่องที่ bulk paste ให้ตรวจ (ชนิด/เกรดไม่ตรง DB, ราคาว่าง) — สีส้มเตือน ไม่ใช่แดง error */
.boardform input.inp-warn { border-color: #d97706; background: #fff7e6; }
/* ============ หน้าแรกสไตล์ Facebook (กระดานราคา) ============ */
/* พื้น #F0F2F5 · 3 คอลัมน์ ≥1100px · 2 คอลัมน์ 820–1099px (ซ่อนขวา) · มือถือ 1 คอลัมน์ (ซ่อนซ้าย, ขวาไปท้ายฟีด) */
body.page-fb { background: var(--fb-bg); color: var(--fb-ink); }
.page-fb .site-footer { border-top-color: #dadde1; }
.main--fb { padding: 0 0 40px; }
@media (max-width: 767px) { .main--fb { padding-bottom: calc(var(--tabbar-h) + 24px); } }
.main--fb > .flash { margin: 12px 14px 0; }
.fb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 auto; }
.fb__left { display: none; }
.fb__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fb__right { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 820px) {
.fb { grid-template-columns: 260px minmax(0, 680px); justify-content: center; gap: 24px; padding: 16px 16px 0; max-width: 1440px; }
.fb__left { display: block; position: sticky; top: 76px; align-self: start; }
.fb__main { gap: 16px; }
.fb__right { display: none; }
}
@media (min-width: 1100px) {
.fb { grid-template-columns: 260px minmax(0, 680px) 300px; }
.fb__right { display: flex; gap: 16px; position: sticky; top: 76px; align-self: start; }
}
/* กล่องขาวพื้นฐาน — มือถือเต็มขอบไม่มีมุม, จอใหญ่มุม 8px + เงาบาง */
.fbbox { background: #fff; }
@media (min-width: 820px) { .fbbox { border-radius: 8px; box-shadow: var(--fb-shadow); } }
/* เมนูซ้าย */
.fbnav { display: flex; flex-direction: column; gap: 2px; }
.fbnav__item {
display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px;
color: var(--fb-ink); font-size: 15px; font-weight: 500;
}
.fbnav__item:hover { background: #E4E6EB; }
.fbnav__item--me { font-weight: 600; }
.fbnav__item--active { background: #E3F1E8; }
.fbnav__item--active:hover { background: #d6eadd; }
.fbnav__item--on { font-weight: 600; }
.fbnav__ico {
flex: none; width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #E4E6EB; color: var(--fb-green); font-family: var(--font-head); font-weight: 600;
}
.fbnav__ico .icon { width: 20px; height: 20px; }
.fbnav__ico--me { background: var(--fb-green); color: #fff; }
.fbnav__item--active .fbnav__ico { background: #D3EADB; }
.fbnav__ico--sq { border-radius: 8px; }
.fbnav__ico--sq .icon { width: 18px; height: 18px; }
.fbnav__item--on .fbnav__ico--sq { background: var(--fb-green); color: #fff; }
.fbnav__sep { height: 1px; background: #CED0D4; margin: 12px 8px; }
.fbnav__head { padding: 0 8px 6px; color: var(--fb-muted); font-size: 16px; font-weight: 600; }
/* การ์ดเกรดแนวตั้งแบบ Stories */
.stories { background: #fff; padding: 12px 0 14px; }
@media (min-width: 820px) { .stories { background: none; padding: 0; } }
.stories__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 10px; }
@media (min-width: 820px) { .stories__head { padding: 0 0 10px; } }
.stories__title { margin: 0; font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.35; }
@media (min-width: 820px) { .stories__title { font-size: 22px; } }
.stories__sub { margin: 0; color: var(--fb-muted); font-size: 13px; }
@media (min-width: 820px) { .stories__sub { font-size: 14px; } }
.stories__region select {
font: inherit; font-size: 13px; font-weight: 600; color: var(--fb-ink);
height: 34px; padding: 0 30px 0 10px; border: 0; border-radius: 8px; background-color: #E4E6EB;
cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
@media (min-width: 820px) { .stories__region select { height: 36px; font-size: 14px; } }
.stories__region select:focus { outline: none; box-shadow: 0 0 0 3px rgba(31, 107, 63, .25); }
.stories .vtabs { padding: 0 12px; }
@media (min-width: 820px) { .stories .vtabs { padding: 0; } }
.stories .vtab--active { background: var(--fb-green); border-color: var(--fb-green); }
.stories__empty { margin: 0; padding: 0 12px; color: var(--fb-muted); font-size: 14px; }
.stories__row {
display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: 8px;
padding: 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stories__row::-webkit-scrollbar { display: none; }
.stories__row[hidden] { display: none; }
@media (min-width: 820px) {
.stories__row { grid-auto-columns: minmax(130px, 1fr); padding: 0; }
}
.story {
height: 176px; border-radius: 12px; padding: 10px; min-width: 0;
display: flex; flex-direction: column; justify-content: space-between;
}
@media (min-width: 820px) { .story { height: 196px; padding: 14px; box-shadow: var(--fb-shadow); } }
.story__badge {
align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; color: #fff;
}
.story__pre { display: none; }
@media (min-width: 820px) { .story__badge { padding: 2px 10px; font-size: 13px; } .story__pre { display: inline; } }
.story__num {
font-family: var(--font-head); font-size: 42px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.story__num--range { font-size: 24px; letter-spacing: -.3px; }
@media (min-width: 820px) { .story__num { font-size: 52px; } .story__num--range { font-size: 30px; } }
.story__unit { font-size: 12px; font-weight: 500; margin-top: 4px; }
@media (min-width: 820px) { .story__unit { font-size: 14px; } }
.story__diff { font-size: 11.5px; font-weight: 600; margin-top: 4px; opacity: .85; }
.story__diff--up { color: #1e7a3c; opacity: 1; }
.story__dlbl { display: none; }
@media (min-width: 820px) { .story__dlbl { display: inline; } }
.story__diff--down { color: #c62f14; opacity: 1; }
/* สีผูกกับชื่อเกรด (ชุดเดียวกับป้าย .gchip ในตารางราคา): AB ส้ม · C ม่วง · D ฟ้า · อื่น เทา — ใช้ทั้ง story (หน้าแรก) และ ministory (ขวาฟีด) */
.story--ab, .ministory--ab { background: #FFE3D6; } .story--ab .story__badge, .ministory--ab .ministory__badge { background: #B4471F; } .story--ab .story__num, .ministory--ab .ministory__num { color: #6E2A10; } .story--ab .story__unit, .ministory--ab .ministory__unit { color: #9A3A17; }
.story--c, .ministory--c { background: #E6E1FA; } .story--c .story__badge, .ministory--c .ministory__badge { background: #5B47B0; } .story--c .story__num, .ministory--c .ministory__num { color: #33267A; } .story--c .story__unit, .ministory--c .ministory__unit { color: #5B47B0; }
.story--d, .ministory--d { background: #DCEBFA; } .story--d .story__badge, .ministory--d .ministory__badge { background: #2C5F99; } .story--d .story__num, .ministory--d .ministory__num { color: #173A63; } .story--d .story__unit, .ministory--d .ministory__unit { color: #2C5F99; }
.story--x, .ministory--x { background: #ECEEF1; } .story--x .story__badge, .ministory--x .ministory__badge { background: #4B4F56; } .story--x .story__num, .ministory--x .ministory__num { color: #1C1E21; } .story--x .story__unit, .ministory--x .ministory__unit { color: #4B4F56; }
.story--add {
border: 1px solid var(--fb-line); background: #fff; color: var(--fb-ink);
align-items: center; justify-content: center; gap: 8px; text-align: center;
font-weight: 600; font-size: 13px;
}
@media (min-width: 820px) { .story--add { border: 0; font-size: 14px; } }
.story--add:hover { background: #F7F8FA; }
.story__plus {
width: 40px; height: 40px; border-radius: 50%; background: var(--fb-green); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 820px) { .story__plus { width: 44px; height: 44px; border: 4px solid #fff; box-shadow: 0 0 0 1px #CED0D4; } }
.story__plus .icon { width: 20px; height: 20px; stroke-width: 2.6; }
/* แจ้งว่าไม่ใช่ราคาวันนี้ */
.fbnotice {
display: flex; align-items: center; gap: 10px; margin: 0 12px;
background: #FFF8E6; border: 1px solid #F1DFA8; border-radius: 8px;
padding: 10px 14px; font-size: 14px; color: #6B4700;
}
.fbnotice .icon { width: 18px; height: 18px; }
@media (min-width: 820px) { .fbnotice { margin: 0; } }
/* กล่องโพสต์ */
.fbcompose { padding: 12px 16px 6px; }
.fbcompose__row { display: flex; align-items: center; gap: 8px; }
.fbcompose__input {
flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; padding: 0 14px;
border-radius: 999px; background: var(--fb-bg); color: var(--fb-muted); font-size: 15px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fbcompose__input:hover { background: #E4E6EB; }
.fbcompose__actions {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--fb-line);
}
.fbcompose__i { display: inline-flex; }
.fbcompose__i .icon { width: 22px; height: 22px; }
.fbcompose__i--g { color: var(--fb-green); }
.fbcompose__i--o { color: #B26A00; }
.fbcompose__i--b { color: #2D6CC0; }
/* ปุ่มแบน (แถวปุ่มโพสต์ / กล่องโพสต์) */
.fbbtn {
flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent;
color: var(--fb-muted); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.fbbtn:hover { background: #F0F2F5; }
.fbbtn .icon { width: 20px; height: 20px; }
.fbbtn--call { color: var(--fb-green); }
@media (max-width: 400px) { .fbbtn { font-size: 14px; gap: 5px; } .fbbtn .icon { width: 18px; height: 18px; } }
/* ชิพพื้นที่ */
.fbchips { display: flex; gap: 8px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; }
.fbchips::-webkit-scrollbar { display: none; }
@media (min-width: 820px) { .fbchips { padding: 0; flex-wrap: wrap; } }
.fbchip {
flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
border-radius: 999px; background: #E4E6EB; color: var(--fb-ink); font-weight: 600; font-size: 14px;
}
.fbchip:hover { background: #d8dadf; }
.fbchip--on, .fbchip--on:hover { background: var(--fb-green); color: #fff; }
/* โพสต์ราคาต่อแผง */
.fbposts { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 820px) { .fbposts { gap: 16px; } }
.fbpost__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0; }
@media (min-width: 820px) { .fbpost__head { padding: 12px 16px 0; } }
.fbpost__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: block; }
.fbpost__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbpost__who { flex: 1; min-width: 0; line-height: 1.35; }
.fbpost__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fbpost__name a { color: var(--fb-ink); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbpost__name a:hover { text-decoration: underline; }
.fbpost__verified {
flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--fb-green); color: #fff;
font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.fbpost__meta { display: flex; align-items: center; gap: 4px; color: var(--fb-muted); font-size: 13px; }
.fbpost__meta .icon { width: 12px; height: 12px; }
.fbpost__more {
flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
color: var(--fb-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fbpost__more:hover { background: #F0F2F5; }
.fbpost__more .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.fbpost__note { margin: 8px 12px 10px; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 820px) { .fbpost__note { margin: 10px 16px 12px; } }
.fbpost__head + .fbtable-wrap { margin-top: 10px; }
.fbtable-wrap { margin: 0 12px; border: 1px solid var(--fb-line); border-radius: 8px; overflow-x: auto; }
@media (min-width: 820px) { .fbtable-wrap { margin: 0 16px; } }
.fbtable-wrap + .fbtable-wrap { margin-top: 8px; }
.fbtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fbtable th {
background: #F7F8FA; color: var(--fb-muted); font-size: 12px; font-weight: 600;
padding: 6px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ป้ายเกรดพาสเทลบนหัวคอลัมน์ — สีผูกกับชื่อเกรด (filter grade_key) ไม่ใช่ลำดับ */
.gchip {
display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
padding: 2px 10px; border-radius: 999px; font-family: var(--font-head); font-size: 12px; font-weight: 600; line-height: 1.4;
}
.gchip--ab { background: #FFE3D6; color: #9A3A17; }
.gchip--c { background: #E6E1FA; color: #5B47B0; }
.gchip--d { background: #DCEBFA; color: #2C5F99; }
.gchip--x { background: #ECEEF1; color: #4B4F56; }
@media (min-width: 820px) { .fbtable th { font-size: 13px; padding: 8px 4px; } }
.fbtable th.fbtable__var, .fbtable td.fbtable__var { width: 30%; text-align: left; padding-left: 10px; }
@media (min-width: 820px) { .fbtable th.fbtable__var, .fbtable td.fbtable__var { padding-left: 12px; } }
.fbtable td { border-top: 1px solid var(--fb-line); padding: 8px 4px; text-align: center; vertical-align: middle; }
@media (min-width: 820px) { .fbtable td { padding: 10px 4px; } }
.fbtable td.fbtable__var { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbtable__price { font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.2; color: #154D2D; font-variant-numeric: tabular-nums; }
@media (min-width: 820px) { .fbtable__price { font-size: 22px; } }
.fbtable__note { font-size: 12px; color: var(--fb-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbtable__none { color: #BCC0C4; font-weight: 600; }
.fbpost__actions {
display: flex; gap: 4px; margin: 12px 12px 0; padding: 4px 0 6px; border-top: 1px solid var(--fb-line);
}
@media (min-width: 820px) { .fbpost__actions { margin: 12px 16px 0; padding-bottom: 6px; } }
.fb__more { display: block; width: max-content; margin: 8px auto 0; color: var(--fb-green); font-weight: 600; font-size: 15px; padding: 8px; }
.fb__more:hover { text-decoration: underline; }
.page-fb .empty { margin: 0; }
/* คอลัมน์ขวา */
.fbsum { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.fbsum__title { margin: 0; font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.fbsum__item { display: flex; align-items: center; gap: 10px; }
.fbsum__item .icon { width: 18px; height: 18px; color: var(--fb-green); }
.fbsum__item--muted { color: var(--fb-muted); font-size: 14px; }
.fbstalls { background: #fff; padding: 12px 4px 8px; }
@media (min-width: 820px) { .fbstalls { background: none; padding: 0; } }
.fbstalls__head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px; }
.fbstalls__head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--fb-muted); }
.fbstalls__head a { font-size: 14px; color: var(--fb-green); }
.fbstalls__head a:hover { text-decoration: underline; }
.fbstalls__avatar { position: relative; flex: none; width: 36px; height: 36px; display: inline-flex; }
.fbstalls__dot {
position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
background: #31A24C; border: 2px solid #fff;
}
@media (min-width: 820px) { .fbstalls__dot { border-color: var(--fb-bg); } }
.fbstalls__text { flex: 1; min-width: 0; line-height: 1.35; }
.fbstalls__name { display: block; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbstalls__meta { display: block; color: var(--fb-muted); font-size: 13px; }
.fbfoot { display: none; padding: 0 8px; color: var(--fb-muted); font-size: 13px; }
@media (min-width: 820px) { .fbfoot { display: block; } }
/* ---- ย่อโพสต์: พับแถวราคาเกิน 3 พันธุ์ (listings/_price_tables.html) ---- */
.fbtable__row--more { display: none; }
.is-expanded .fbtable__row--more { display: table-row; }
.fbmore {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; margin: 0; height: 44px; padding: 0 10px;
border: 0; border-top: 1px solid #EEF0F2; border-radius: 0; background: #fff; color: var(--fb-green);
font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.fbmore:hover { background: #F7F8FA; }
.fbmore .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.fbmore[aria-expanded="true"] { color: var(--fb-muted); font-weight: 600; }
@media (min-width: 820px) { .fbmore { height: 42px; } }
.card .fbtable-wrap { margin: 6px 12px 0; }
.card .fbtable-wrap + .fbtable-wrap { margin-top: 8px; }
/* ---- รูปหลายรูปแบบ Facebook (listings/_photo_grid.html) ---- */
.pgrid {
display: grid; gap: 3px; margin: 8px 12px 4px; border-radius: 12px; overflow: hidden; background: #eef4ee;
}
.pgrid__item { position: relative; display: block; overflow: hidden; background: #e6ece6; cursor: zoom-in; }
.pgrid__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* รูปป้ายราคา: หัวป้าย (ชื่อแผง/วันที่) อยู่ด้านบน → crop จากบน ไม่ตัดกลาง */
.pgrid--sign .pgrid__item img { object-position: top; }
/* รูปเดียว (ฟีด/หน้าแรก) แบบ Facebook — static/js/pgrid.js ใส่ .pgrid--portrait เมื่อรูปสูงกว่ากรอบ 4/5
แนวนอน/จัตุรัส/ตั้งนิดหน่อย = สัดส่วนจริงเต็มกว้าง ไม่ครอป ไม่เติมขอบ
แนวตั้ง = กรอบ 4/5 กว้างเต็มการ์ด สูงไม่เกิน 80vh รูปทั้งรูป (contain) ด้านข้างเติมรูปเดียวกันขยายเต็มกรอบ + blur + มืดลง */
.pgrid--1 .pgrid__item img { height: auto; max-height: none; object-fit: contain; object-position: center; }
.pgrid--1.pgrid--portrait .pgrid__item { aspect-ratio: 4 / 5; max-height: 80vh; background: #222; }
.pgrid--1.pgrid--portrait .pgrid__item::before {
content: ""; position: absolute; inset: -40px; background: var(--pgrid-bg) center / cover no-repeat;
filter: blur(24px) brightness(.72);
}
.pgrid--1.pgrid--portrait .pgrid__item img { position: relative; height: 100%; }
.pgrid--2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
.pgrid--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.pgrid--3 .pgrid__item:first-child { grid-row: 1 / span 2; }
.pgrid--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.pgrid__more {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .45); color: #fff; font-family: var(--font-head); font-size: 30px; font-weight: 700;
}
.detail__gallery .pgrid { margin: 0; border-radius: 0; }
.detail__gallery .pgrid--1 .pgrid__item img { max-height: 70vh; }
/* หน้าแรก: รูปของโพสต์ราคาเป็นแถวเล็กใต้ตาราง (ตารางยังเป็นหลัก) */
.fbpost__photos {
display: flex; gap: 6px; margin: 10px 12px 0; overflow-x: auto;
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
@media (min-width: 820px) { .fbpost__photos { margin: 10px 16px 0; } }
.fbpost__photo {
flex: none; width: 76px; height: 76px; border-radius: 8px; overflow: hidden;
border: 1px solid var(--fb-line); background: #eef4ee; cursor: zoom-in;
}
.fbpost__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* ============ การ์ดโพสต์กลาง (listings/_post_card.html) — หน้าแรก / ฟีด / หน้ารายละเอียด ============ */
.fbpost__name a, .fbpost__name > span:first-child { min-width: 0; flex: 0 1 auto; color: var(--fb-ink); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbpost__badge {
flex: none; display: inline-block; padding: 1px 8px; border-radius: 6px;
background: #E3F1E8; color: var(--fb-green); font-size: 12px; font-weight: 600; line-height: 1.5;
}
.fbpost__badge--end { display: none; padding: 1px 7px; font-size: 11.5px; }
@media (max-width: 819px) {
.fbpost__badge--inline, .fbpost__more { display: none; }
.fbpost__badge--end { display: inline-block; }
}
.fbpost__badge--cat { background: #E4E6EB; color: #4B4F56; }
.fbpost__title { margin: 10px 12px 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.fbpost__title a { color: var(--fb-ink); }
.fbpost__title a:hover { text-decoration: underline; }
.fbpost__price { margin: 4px 12px 0; }
.fbpost__price .price { font-family: var(--font-head); font-weight: 600; }
@media (min-width: 820px) { .fbpost__title, .fbpost__price { margin-left: 16px; margin-right: 16px; } }
.fbpost__note + .fbtable-wrap, .fbpost__price + .fbtable-wrap, .fbpost__title + .fbtable-wrap { margin-top: 0; }
.fbpost__price + .fbpost__note, .fbpost__title + .fbpost__note { margin-top: 6px; }
/* บรรทัดเล็กใต้ตาราง: โพสต์ที่ทีมงานลง (แผง curated) */
.fbpost__collected {
display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; color: var(--fb-muted); font-size: 12.5px;
}
.fbpost__collected .icon { width: 14px; height: 14px; }
@media (min-width: 820px) { .fbpost__collected { margin: 8px 16px 0; } }
/* ปุ่มท้ายการ์ด: ใจ/คอมเมนต์ ใช้ปุ่มแบน .fbbtn ชุดเดียวกับ โทร/แชร์ */
.fbpost__actions .likebox { flex: 1 1 0; min-width: 0; display: flex; }
.fbpost__actions .likebox form { flex: 1 1 0; min-width: 0; }
.fbpost__actions .likebtn {
width: 100%; justify-content: center; gap: 8px; min-height: 40px; height: 40px; padding: 0 6px;
border-radius: 8px; color: var(--fb-muted); font-size: 15px; font-weight: 600;
}
.fbpost__actions .likebtn:hover { background: #F0F2F5; }
.fbpost__actions .likebtn .icon { width: 20px; height: 20px; }
.fbpost__actions .likebtn--on { color: #e53935; }
.fbbtn__num, .likebtn__num { font-variant-numeric: tabular-nums; }
@media (max-width: 400px) {
.fbpost__actions .likebtn, .fbpost__actions .fbbtn { font-size: 13px; gap: 4px; padding: 0 2px; }
.fbpost__actions .likebtn .icon, .fbpost__actions .fbbtn .icon { width: 18px; height: 18px; }
}
/* ปุ่มพับตาราง: กางแล้วลูกศรกลับหัว */
.fbmore[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* รูปในการ์ดฟีด */
.fbpost .pgrid { margin: 10px 12px 0; }
@media (min-width: 820px) { .fbpost .pgrid { margin: 10px 16px 0; } }
/* หน้ารายละเอียด: รูปเรียงลงเต็มขนาด ไม่ครอป */
.pstack { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 0; background: #F0F2F5; }
.pstack__item { display: block; cursor: zoom-in; background: #fff; }
.pstack__item img { display: block; width: 100%; height: auto; }
/* ============ หน้าฟีด (core/home.html) ============ */
/* กล่องโพสต์ของฟีด = กล่องขาว .fbbox — จอคอม: มุม 12 เงาบาง ช่องหลอกเทา + 4 ปุ่มลัด · มือถือ: ช่องหลอกมีขอบ + ไอคอนรูปฟ้า ไม่มีปุ่มลัด */
.page-fb .fbcomposer { border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 12px 12px 0; }
.page-fb .fbcomposer__row { gap: 8px; }
.page-fb .fbcomposer__input {
flex: 1 1 auto; height: 40px; display: flex; align-items: center; padding: 0 14px; box-sizing: border-box;
border: 1px solid #CED0D4; border-radius: 999px; background: transparent; color: var(--fb-muted); font-size: 15px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-fb .fbcomposer__row:hover .fbcomposer__input { background: #F7F8FA; }
.fbcomposer__photo { flex: none; display: inline-flex; color: #2D6CC0; }
.fbcomposer__photo .icon { width: 24px; height: 24px; }
.page-fb .fbcomposer__actions { display: none; }
@media (min-width: 820px) {
.page-fb .fbcomposer { border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); padding: 12px 16px; }
.page-fb .fbcomposer__row { gap: 10px; }
.page-fb .fbcomposer__input { border: 0; background: var(--fb-bg); padding: 0 16px; font-size: 16px; }
.page-fb .fbcomposer__row:hover .fbcomposer__input { background: #E4E6EB; }
.fbcomposer__photo { display: none; }
.page-fb .fbcomposer__actions {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--fb-line);
}
}
.fbcomposer__act {
display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-height: 0;
border-radius: 8px; color: var(--fb-muted); font-size: 15px; font-weight: 600;
}
.fbcomposer__act:hover { background: #F0F2F5; }
.fbcomposer__act .icon { width: 20px; height: 20px; }
.fbcomposer__act--buy .icon { color: var(--fb-green); }
.fbcomposer__act--sell .icon { color: #B4471F; }
.fbcomposer__act--orchard .icon { color: #5B47B0; }
.fbcomposer__act--notice .icon { color: #2C5F99; }
/* ตัวกรองแถวเดียว (ตามแบบ): มือถือ = อยู่ในกล่องขาวเดียวกับ composer (ชิพเทา 34px, "ทุกพื้นที่" ขาวมีขอบ)
จอคอม = ลอยบนพื้นเทา (ชิพขาวมีเงา 36px, ที่เลือก = เขียว, "ทุกพื้นที่" เทา #E4E6EB มีหมุด + ลูกศร) */
.feedbar { display: flex; align-items: center; gap: 6px; background: #fff; margin-top: -8px; padding: 12px 12px 10px; }
.feedbar .fbchips { flex: 1 1 auto; min-width: 0; padding: 0; gap: 6px; }
.feedbar .fbchip { height: 34px; padding: 0 14px; font-size: 14px; }
.feedbar__region {
flex: none; position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 12px;
border: 1px solid #CED0D4; border-radius: 999px; background: #fff; color: var(--fb-ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.feedbar__region select {
appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
font: inherit; font-weight: 600; font-size: 14px; color: inherit; cursor: pointer; max-width: 120px;
}
.feedbar__region select:focus { outline: none; }
.feedbar__region:focus-within { box-shadow: 0 0 0 3px rgba(31, 107, 63, .25); }
.feedbar__pin { display: none; }
.feedbar__pin .icon, .feedbar__chev .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.feedbar__chev { display: inline-flex; }
@media (min-width: 820px) {
.feedbar { background: none; margin-top: 0; padding: 0; gap: 12px; justify-content: space-between; }
.feedbar .fbchips { flex-wrap: wrap; overflow: visible; }
.feedbar .fbchip { height: 36px; padding: 0 16px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.feedbar .fbchip:hover { background: #F7F8FA; }
.feedbar .fbchip--on, .feedbar .fbchip--on:hover { background: var(--fb-green); color: #fff; }
.feedbar__region { height: 36px; padding: 0 12px; border: 0; background: #E4E6EB; gap: 6px; }
.feedbar__region:hover { background: #d8dadf; }
.feedbar__pin { display: inline-flex; }
.feedbar__pin .icon { width: 15px; height: 15px; }
.feedbar__chev .icon { width: 14px; height: 14px; }
}
/* การ์ดฟีดมุมโค้ง 12 บนจอคอม (ตามแบบ) */
@media (min-width: 820px) { .page-feed .fbbox, .page-detail .fbbox { border-radius: 12px; } }
.page-feed .results .fbbox.empty, .page-detail .fbbox.empty { padding: 48px 16px; }
/* คอลัมน์ขวา: ราคาพันธุ์หลักวันนี้ (การ์ด AB/C/D เล็ก) */
.railprice { padding: 14px 16px; }
.railprice__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.railprice__title { margin: 0; font-size: 17px; font-weight: 700; }
.railprice__all { font-size: 13px; font-weight: 600; color: var(--fb-green); }
.railprice__all:hover { text-decoration: underline; }
.railprice__sub { margin: 0 0 10px; color: var(--fb-muted); font-size: 13px; }
.railprice__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ministory { border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ministory__label { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ministory__num { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ministory__num--range { font-size: 16px; line-height: 1.6; }
.ministory--ab .ministory__label { color: #9A3A17; } .ministory--c .ministory__label { color: #5B47B0; }
.ministory--d .ministory__label { color: #2C5F99; } .ministory--x .ministory__label { color: #4B4F56; }
/* ============ หน้ารายละเอียดโพสต์ (listings/detail.html) ============ */
@media (min-width: 820px) { .fb--single { grid-template-columns: minmax(0, 680px); } }
/* หัวเขียว (มือถือ): ปุ่มกลับ + "โพสต์ของ<แผง>" + แชร์ — แทน header หลัก; จอคอมใช้ header หลัก */
.detailbar {
position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; gap: 8px;
padding: 10px 8px; box-sizing: border-box; background: var(--fb-green); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.detailbar__btn {
flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.detailbar__btn:hover { background: var(--fb-green-2); }
.detailbar__btn .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.detailbar__btn:last-child .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.detailbar__title {
flex: 1 1 auto; min-width: 0; margin: 0; text-align: left; font-family: var(--font-head);
font-size: 19px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.backlink--fb { display: none; margin: 0; }
@media (max-width: 819px) { .page-detail .site-header { display: none; } }
@media (min-width: 820px) { .detailbar { display: none; } .backlink--fb { display: inline-block; } }
.owner-bar--fb { margin: 0; padding: 10px 12px; }
@media (min-width: 820px) { .owner-bar--fb { padding: 10px 16px; } }
.dblock { padding: 12px 12px 14px; }
@media (min-width: 820px) { .dblock { padding: 14px 16px 16px; } }
.dblock__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--fb-ink); }
.dblock__title + .dblock__title { margin-top: 14px; }
.dblock__count { color: var(--fb-muted); font-weight: 500; font-size: 14px; }
.dblock__row { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14.5px; color: var(--fb-ink); }
.dblock__row .icon { width: 16px; height: 16px; color: var(--fb-muted); }
/* กล่อง "ติดต่อแผง": ปุ่มโทรใหญ่ทีละเบอร์ พร้อมชื่อคน */
.dcontact { padding: 14px 12px; }
@media (min-width: 820px) { .dcontact { padding: 14px 16px; } }
.dcontact__btns { display: flex; flex-direction: column; gap: 8px; }
.callbtn {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
background: #E3F1E8; color: #154D2D;
}
.callbtn:hover { background: #d6eadd; }
.callbtn__ico {
flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--fb-green); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.callbtn__ico .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.callbtn__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.callbtn__num { font-family: var(--font-head); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.callbtn__name { font-size: 13px; color: #3C6B4E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callbtn__go { flex: none; font-size: 14px; font-weight: 700; }
.callbtn--line .callbtn__ico { background: var(--line); }
.dcontact__links {
display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin: 0;
border: 1px solid #CED0D4; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--fb-ink);
}
.dcontact__links a { color: var(--fb-ink); }
.dcontact__links a:hover { text-decoration: underline; }
.dcontact__links:hover { background: #F7F8FA; }
.dcontact .contact__seller { margin-top: 8px; }
/* คอมเมนต์ (ระบบเดิม) ในกล่องขาว */
.dcomments { margin: 0; padding: 14px 12px; border-top: 0; }
@media (min-width: 820px) { .dcomments { padding: 14px 16px 16px; } }
.dcomments .comment__bubble { background: #F0F2F5; }
.dcomments .comment-form { align-items: center; gap: 8px; margin: 0; }
.dcomments .comment-form input {
height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #F0F2F5; font-size: 14.5px;
}
.dcomments .comment-form input:focus { box-shadow: 0 0 0 2px rgba(31, 107, 63, .3); }
.dcomments .quickreplies { margin: 10px 0 0; }
.dcomments .comment-login { display: flex; align-items: center; gap: 8px; }
.dcomments .comment-login .avatar { background: #E4E6EB; color: var(--fb-muted); }
.comment-login__btn {
flex: 1 1 auto; height: 40px; display: flex; align-items: center; padding: 0 14px;
border-radius: 999px; background: #F0F2F5; color: var(--fb-muted); font-size: 14.5px;
}
.comment-login__btn:hover { background: #E4E6EB; }
.dcomments .comment-list { margin-top: 12px; }
.dcomments .comment-list__empty { text-align: center; color: #8A8D91; font-size: 14px; padding: 0; }
.page-detail .detail__posted { margin: 0 12px; }
@media (min-width: 820px) { .page-detail .detail__posted { margin: 0; } }
.page-detail .fbnotice { margin: 0 12px; }
/* ============ ตามไฟล์แบบ design-feed-desktop / design-feed-mobile / design-detail-mobile (2026-10-04) ============ */
/* เมนูซ้ายของฟีด: รายการที่เลือก = วงกลมเขียวไอคอนขาว + พื้น #E3F1E8 ตัวหนา (ตามแบบ) — หน้าแรกคงแบบเดิม */
.fbnav--feed .fbnav__item--active { font-weight: 600; }
.fbnav--feed .fbnav__item--active .fbnav__ico { background: var(--fb-green); color: #fff; }
.fbnav__item--soon { cursor: default; }
/* หัวการ์ด: ขนาดวงกลม/ชื่อ/บรรทัดย่อยตามโหมด (feed จอคอม 42·16/700 · มือถือ 40·15/700 · detail 46·16/700) */
.fbpost--feed .fbpost__head { padding: 12px 12px 0; }
.fbpost--feed .fbpost__name a, .fbpost--feed .fbpost__name > span:first-child,
.fbpost--detail .fbpost__name a, .fbpost--detail .fbpost__name > span:first-child { font-weight: 700; font-size: 15px; }
.fbpost--feed .fbpost__meta { font-size: 12.5px; }
.fbpost--feed .fbpost__name { gap: 8px; }
.fbpost--detail .fbpost__head { padding: 14px 12px 0; }
.fbpost--detail .fbpost__avatar, .fbpost--detail .fbpost__avatar .avatar { width: 46px; height: 46px; }
.fbpost--detail .fbpost__avatar .avatar { font-size: 18px; }
.fbpost--detail .fbpost__name a, .fbpost--detail .fbpost__name > span:first-child { font-size: 16px; }
.fbpost--detail .fbpost__meta { font-size: 13px; }
@media (min-width: 820px) {
.fbpost--feed .fbpost__head { padding: 14px 16px 0; }
.fbpost--detail .fbpost__head { padding: 14px 16px 0; }
.fbpost--feed .fbpost__avatar, .fbpost--feed .fbpost__avatar .avatar { width: 42px; height: 42px; }
.fbpost--feed .fbpost__avatar .avatar { font-size: 17px; }
.fbpost--feed .fbpost__name a, .fbpost--feed .fbpost__name > span:first-child { font-size: 16px; }
.fbpost--feed .fbpost__meta { font-size: 13px; }
}
.fbpost__meta .icon { width: 12px; height: 12px; stroke-width: 2; }
/* หมายเหตุ */
.fbpost--feed .fbpost__note { margin: 8px 12px 10px; font-size: 14.5px; line-height: 1.5; }
.fbpost--detail .fbpost__note { margin: 10px 12px 12px; font-size: 15px; line-height: 1.55; }
@media (min-width: 820px) {
.fbpost--feed .fbpost__note { margin: 10px 16px 12px; font-size: 15px; line-height: 1.55; }
.fbpost--detail .fbpost__note { margin: 10px 16px 12px; }
}
/* ตารางราคา: กรอบมุม 10 · หัว #F7F8FA · แถวคั่น #EEF0F2 · ขนาดตามโหมด/จอ */
.fbpost .fbtable-wrap { border-radius: 10px; overflow: hidden; }
.fbpost .fbtable td { border-top-color: #EEF0F2; }
.fbpost--feed .fbtable th { padding: 7px 3px; font-size: 12px; }
.fbpost--feed .fbtable th.fbtable__var, .fbpost--feed .fbtable td.fbtable__var { padding-left: 10px; }
.fbpost--feed .fbtable td { padding: 8px 3px; }
.fbpost--feed .fbtable td.fbtable__var { font-size: 14px; line-height: 1.2; }
.fbpost--feed .fbtable__price { font-size: 17px; line-height: 1.15; }
.fbpost--feed .fbtable__note { font-size: 10.5px; }
.fbpost--feed .gchip { padding: 0 8px; font-size: 11.5px; font-weight: 700; font-family: inherit; }
.fbpost--detail .fbtable th { padding: 8px 3px; font-size: 12px; }
.fbpost--detail .fbtable th.fbtable__var, .fbpost--detail .fbtable td.fbtable__var { padding-left: 10px; }
.fbpost--detail .fbtable td { padding: 9px 3px; }
.fbpost--detail .fbtable td.fbtable__var { font-size: 14.5px; line-height: 1.2; }
.fbpost--detail .fbtable__price { font-size: 18px; line-height: 1.15; }
.fbpost--detail .fbtable__note { font-size: 10.5px; }
.fbpost--detail .gchip { padding: 0 9px; font-size: 12px; font-weight: 700; font-family: inherit; }
@media (min-width: 820px) {
.fbpost--feed .fbtable th { padding: 8px 4px; font-size: 13px; }
.fbpost--feed .fbtable th.fbtable__var, .fbpost--feed .fbtable td.fbtable__var { padding-left: 12px; }
.fbpost--feed .fbtable td { padding: 9px 4px; }
.fbpost--feed .fbtable td.fbtable__var { font-size: 15px; }
.fbpost--feed .fbtable__price { font-size: 19px; }
.fbpost--feed .fbtable__note { font-size: 11.5px; }
.fbpost--feed .gchip { padding: 1px 10px; font-size: 12px; }
.fbpost--detail .fbtable th.fbtable__var, .fbpost--detail .fbtable td.fbtable__var { padding-left: 12px; }
}
.fbpost--feed .fbtable th.fbtable__var, .fbpost--feed .fbtable td.fbtable__var,
.fbpost--detail .fbtable th.fbtable__var, .fbpost--detail .fbtable td.fbtable__var { width: 28%; }
/* บรรทัดที่มา: 12px #8A8D91 (มือถือ 11.5 ไม่มีไอคอน) */
.fbpost--feed .fbpost__collected, .fbpost--detail .fbpost__collected { margin: 6px 12px 0; gap: 4px; color: #8A8D91; font-size: 11.5px; }
.fbpost--detail .fbpost__collected { font-size: 12px; }
.fbpost--feed .fbpost__collected .icon, .fbpost--detail .fbpost__collected .icon { display: none; }
@media (min-width: 820px) {
.fbpost--feed .fbpost__collected, .fbpost--detail .fbpost__collected { margin: 6px 16px 0; font-size: 12px; }
.fbpost--feed .fbpost__collected .icon { display: inline-block; width: 12px; height: 12px; }
}
/* รูปในฟีด: เต็มขอบการ์ด ตัดจากหัวรูป — 2 รูปคู่สูง 260 (จอคอม 340) · 1 รูปสูง 380 (จอคอม 440) · 3+ รูป grid เดิมเต็มขอบ */
.fbpost--feed .pgrid { margin: 10px 0 0; border-radius: 0; gap: 2px; background: #fff; }
.fbpost--feed .pgrid--2 { aspect-ratio: auto; }
.fbpost--feed .pgrid--2 .pgrid__item { height: 260px; }
.fbpost--feed .pgrid--sign .pgrid__item img { object-position: top; }
@media (min-width: 820px) {
.fbpost--feed .pgrid { margin-top: 12px; gap: 3px; }
.fbpost--feed .pgrid--2 .pgrid__item { height: 340px; }
}
/* หน้ารายละเอียด: รูปเรียงลงเต็มขนาด คั่น 2px */
.fbpost--detail .pstack { gap: 2px; margin-top: 12px; background: #fff; }
/* ปุ่มท้ายการ์ด: ฟีด = 4 ช่องเท่ากัน (ถูกใจ · ความคิดเห็น/คอมเมนต์ · โทร · แชร์) · รายละเอียด = 3 ช่อง (ถูกใจ · บันทึก · แชร์) */
.fbpost--feed .fbpost__actions, .fbpost--detail .fbpost__actions {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 10px 12px 0; padding: 0;
}
.fbpost--detail .fbpost__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; padding: 0 4px; }
.fbpost--feed .fbpost__actions .fbbtn, .fbpost--feed .fbpost__actions .likebtn {
height: 44px; min-height: 44px; gap: 5px; font-size: 13.5px; border-radius: 8px; padding: 0 2px;
}
.fbpost--detail .fbpost__actions .fbbtn, .fbpost--detail .fbpost__actions .likebtn {
height: 46px; min-height: 46px; gap: 5px; font-size: 14px; border-radius: 8px; padding: 0 2px;
}
.fbpost--feed .fbpost__actions .icon, .fbpost--detail .fbpost__actions .icon { width: 18px; height: 18px; }
.fbpost--feed .fbbtn--call { font-weight: 700; }
.fbbtn__lbl-l { display: none; }
@media (min-width: 820px) {
.fbpost--feed .fbpost__actions { gap: 4px; margin: 12px 16px 0; padding: 4px 0 6px; }
.fbpost--feed .fbpost__actions .fbbtn, .fbpost--feed .fbpost__actions .likebtn { height: 40px; min-height: 40px; gap: 7px; font-size: 14px; padding: 0 6px; }
.fbpost--feed .fbpost__actions .icon { width: 19px; height: 19px; }
.fbbtn__lbl-l { display: inline; }
.fbbtn__lbl-s { display: none; }
}
.fbpost--feed .fbpost__actions .likebox { display: contents; }
.fbpost--detail .fbpost__actions .likebox { display: contents; }
.fbpost--feed .fbpost__actions .likebox form, .fbpost--detail .fbpost__actions .likebox form { display: flex; min-width: 0; }
.fbpost--feed .fbpost__actions .likebtn, .fbpost--detail .fbpost__actions .likebtn { width: 100%; }
/* หน้ารายละเอียดจอคอม: การ์ด/กล่องมุม 12 ตามฟีด */
@media (min-width: 820px) { .fbpost--detail .fbpost__actions { padding: 0 12px 6px; margin-top: 12px; } }
/* ฟีดมือถือตามแบบ: ไม่มีคอลัมน์ขวาต่อท้ายฟีด (หน้าแรกยังแสดงรายชื่อแผงต่อท้ายตามแบบหน้าแรก) */
@media (max-width: 1099px) { .page-feed .fb__right { display: none; } }
/* ============ หน้าราคา /prices/ (stalls/market_prices.html) — ตามไฟล์แบบ design-prices-desktop / design-prices-mobile (2026-10-04) ============ */
/* จอคอม (≥820px): header กลางเดิม + เนื้อหากว้าง 1100 · มือถือ: หัวเขียวของหน้า (.pxhdr) แทน header หลัก, กล่องขาวเต็มขอบ */
.px { display: flex; flex-direction: column; gap: 8px; padding: 0 0 24px; }
@media (min-width: 820px) { .px { max-width: 1100px; margin: 0 auto; gap: 14px; padding: 18px 16px 48px; } }
/* หัวเขียวมือถือ: ชื่อหน้า + ปุ่มลงราคา + แถวเลือกวัน */
.pxhdr { background: var(--fb-green); color: #fff; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pxhdr__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pxhdr__title { margin: 0; font-family: var(--font-head); font-size: 21px; font-weight: 600; line-height: 1.2; }
.pxhdr__post {
display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px; border-radius: 999px;
background: #fff; color: var(--fb-green); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.pxhdr__post .icon { width: 16px; height: 16px; stroke-width: 2.6; }
@media (max-width: 819px) { .page-prices .site-header { display: none; } }
@media (min-width: 820px) { .pxhdr { display: none; } }
/* หัวหน้า (จอคอม): ชื่อ + บรรทัดย่อย + เลือกวัน */
.px__head { display: none; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (min-width: 820px) { .px__head { display: flex; } }
.px__title { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 600; line-height: 1.25; }
.px__sub { margin: 0; color: var(--fb-muted); font-size: 14px; }
.px__empty { margin: 8px; }
@media (min-width: 820px) { .px__empty { margin: 0; } }
/* เลือกวัน ‹ วันที่ › — desktop ขอบเทาพื้นขาว · mobile ปุ่มเขียวอ่อนในหัวเขียว */
.pxdate { position: relative; display: flex; align-items: center; gap: 6px; margin: 0; }
.pxdate__btn, .pxdate__cur {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px;
border: 1px solid #CED0D4; background: #fff; color: var(--fb-ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.pxdate__btn { width: 40px; flex: none; }
.pxdate__btn .icon { width: 18px; height: 18px; }
.pxdate__btn--off { background: var(--fb-bg); color: #BCC0C4; cursor: default; }
.pxdate__cur { padding: 0 14px; white-space: nowrap; }
.pxdate__cur .icon { width: 17px; height: 17px; color: var(--fb-green); stroke-width: 2; }
.pxdate__cur:hover, .pxdate__btn:not(.pxdate__btn--off):hover { background: #F7FAF8; }
/* input วันที่จริงซ่อนไว้ (เปิดด้วย showPicker จากปุ่มวันที่ — ห้าม display:none ไม่งั้นเปิดไม่ได้) */
.pxdate__input { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.pxdate--mobile .pxdate__btn { border: 0; background: var(--fb-green-2); color: #fff; }
.pxdate--mobile .pxdate__btn--off { color: #7FB896; }
.pxdate--mobile .pxdate__btn:not(.pxdate__btn--off):hover { background: #39945f; }
.pxdate--mobile .pxdate__cur { flex: 1 1 auto; border: 0; }
.pxdate--mobile .pxdate__cur:hover { background: #fff; }
/* แท็บพันธุ์ (ชื่อยาวแสดงครบ — มือถือเลื่อนแนวนอน จอคอมขึ้นบรรทัดใหม่) + dropdown พื้นที่ */
.px__filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fff; padding: 10px 12px; }
.pxtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pxtab {
flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
background: #E4E6EB; color: var(--fb-ink); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.pxtab:hover { background: #d8dadf; }
.pxtab--on, .pxtab--on:hover { background: var(--fb-green); color: #fff; font-weight: 700; }
.pxregion { position: relative; flex: none; display: inline-flex; align-items: center; }
.pxregion select {
height: 34px; padding: 0 30px 0 12px; border: 1px solid #CED0D4; border-radius: 999px; background: #fff;
font: inherit; font-weight: 600; font-size: 14px; color: var(--fb-ink); cursor: pointer; appearance: none; -webkit-appearance: none;
}
.pxregion .icon { position: absolute; right: 11px; width: 13px; height: 13px; stroke-width: 2.6; pointer-events: none; }
.pxregion select:focus { outline: none; box-shadow: 0 0 0 3px rgba(31, 107, 63, .25); }
.px__none { color: var(--fb-muted); font-size: 14px; padding: 6px 2px; }
.px__none--box { padding: 14px 16px; }
@media (min-width: 820px) {
.px__filters { justify-content: space-between; gap: 10px; background: none; padding: 0; }
.pxtab { height: 36px; padding: 0 16px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pxtab:hover { background: #F7FAF8; }
.pxtab--on, .pxtab--on:hover { background: var(--fb-green); }
.pxregion select { height: 36px; border: 0; background: #E4E6EB; }
}
.px__notice { margin: 0 8px; }
.px__notice a { font-weight: 700; color: var(--fb-green); text-decoration: underline; }
@media (min-width: 820px) { .px__notice { margin: 0; } }
/* การ์ดสรุปต่อเกรด — สีผูกกับชื่อเกรด (grade_key) ชุดเดียวกับ .gchip/.story */
.pxcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 0 8px; }
.pxcard { border-radius: 12px; padding: 8px 10px; background: #ECEEF1; }
.pxcard__top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pxcard__badge { font-size: 12px; font-weight: 700; color: #4B4F56; white-space: nowrap; }
.pxcard__pre, .pxcard__n, .pxcard__unit, .pxcard__d { display: none; }
.pxcard__num { font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.1; color: #2B2F36; margin-top: 2px; }
.pxcard__range { font-size: 11.5px; color: #4B4F56; margin-top: 2px; }
.pxcard__m { white-space: nowrap; }
.pxcard--ab { background: #FFE3D6; } .pxcard--ab .pxcard__badge, .pxcard--ab .pxcard__range { color: #9A3A17; } .pxcard--ab .pxcard__num { color: #6E2A10; }
.pxcard--c { background: #E6E1FA; } .pxcard--c .pxcard__badge, .pxcard--c .pxcard__range { color: #5B47B0; } .pxcard--c .pxcard__num { color: #33267A; }
.pxcard--d { background: #DCEBFA; } .pxcard--d .pxcard__badge, .pxcard--d .pxcard__range { color: #2C5F99; } .pxcard--d .pxcard__num { color: #173A63; }
@media (min-width: 820px) {
.pxcards { grid-template-columns: repeat(var(--px-cards, 3), minmax(0, 1fr)); gap: 10px; padding: 0; }
.pxcard, .pxcard--ab, .pxcard--c, .pxcard--d { background: #fff; border-radius: 12px; box-shadow: var(--fb-shadow); padding: 12px 14px; border-top: 4px solid #D5D8DD; }
.pxcard--ab { border-top-color: #F2B9A0; } .pxcard--c { border-top-color: #C3B8F0; } .pxcard--d { border-top-color: #A9CBEF; }
.pxcard__badge { border-radius: 999px; padding: 1px 10px; font-size: 13px; background: #ECEEF1; }
.pxcard--ab .pxcard__badge { background: #FFE3D6; } .pxcard--c .pxcard__badge { background: #E6E1FA; } .pxcard--d .pxcard__badge { background: #DCEBFA; }
.pxcard__pre, .pxcard__n { display: inline; }
.pxcard__avglbl, .pxcard__m { display: none; }
.pxcard__n { color: var(--fb-muted); font-size: 13px; font-weight: 500; }
.pxcard__num { display: flex; align-items: baseline; gap: 6px; font-size: 34px; line-height: 1; margin-top: 6px; }
.pxcard__unit { display: inline; font-family: "Sarabun", sans-serif; font-size: 13px; font-weight: 400; color: var(--fb-muted); }
.pxcard__range, .pxcard--ab .pxcard__range, .pxcard--c .pxcard__range, .pxcard--d .pxcard__range { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: #4B4F56; }
.pxcard__d { display: inline; }
.pxcard__d b { font-family: var(--font-head); font-weight: 600; }
}
/* กราฟแนวโน้ม */
.pxchart { padding: 12px; }
.pxchart__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pxchart__title { margin: 0; font-size: 15.5px; font-weight: 700; }
.pxranges { display: flex; gap: 4px; background: var(--fb-bg); border-radius: 999px; padding: 3px; }
.pxrange {
height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent;
font: inherit; font-weight: 600; font-size: 13px; color: var(--fb-muted); cursor: pointer;
}
.pxrange--on { background: #fff; color: var(--fb-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.pxchart__box { position: relative; height: 180px; }
.pxchart__empty { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: #8A8D91; font-size: 14px; }
.pxchart__empty[hidden] { display: none; } /* display:flex ทับ attribute hidden (เหมือนเคสฟอร์มเพิ่มแผง) */
.pxchart__hint { margin: 8px 0 0; font-size: 12.5px; color: #8A8D91; }
@media (min-width: 820px) {
.pxchart { padding: 14px 16px; border-radius: 12px; }
.pxchart__title { font-size: 17px; }
.pxchart__box { height: 220px; }
}
/* ตารางแบบหุ้น: มือถือ = แผง + คอลัมน์เกรด · จอคอม = + พื้นที่ · เทียบเมื่อวาน · อัปเดต · ปุ่มโทร (เลื่อนแนวนอนถ้าแคบ) */
.pxtable { overflow: hidden; }
.pxtable__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 12px 8px; }
.pxtable__title { margin: 0; font-size: 15.5px; font-weight: 700; }
.pxtable__v, .pxtable__hint-d { display: none; }
.pxtable__hint { color: var(--fb-muted); font-size: 12.5px; }
.pxscroll { overflow-x: auto; }
.pxgrid { min-width: 0; }
.pxrow {
display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--px-grades, 3), minmax(38px, 46px));
gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #EEF0F2;
}
.pxrow--head { padding: 6px 12px; background: #F7F8FA; border-top: 1px solid var(--fb-line); border-bottom-color: var(--fb-line); }
.pxrow--data { cursor: pointer; }
.pxrow--data:hover { background: #F7FAF8; }
.pxrow--faded { opacity: .55; }
.pxcol--area, .pxcol--chg, .pxcol--time, .pxcol--call { display: none; }
.pxsort {
border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--fb-muted);
text-align: left; cursor: pointer; white-space: nowrap;
}
.pxsort--num { text-align: right; }
.pxsort--ab { color: #9A3A17; } .pxsort--c { color: #5B47B0; } .pxsort--d { color: #2C5F99; }
.pxsort--on.pxsort--desc::after { content: " ▼"; font-size: 10px; }
.pxsort--on.pxsort--asc::after { content: " ▲"; font-size: 10px; }
.pxcell { min-width: 0; font-size: 14px; color: #4B4F56; }
.pxcell--num { text-align: right; font-family: var(--font-head); font-size: 18px; font-weight: 600; color: #154D2D; }
.pxcell--none { color: #BCC0C4; font-weight: 500; }
.pxcell__name { display: block; font-weight: 700; font-size: 14.5px; color: var(--fb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxcell__sub { display: block; font-size: 12px; color: var(--fb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxcell__sub--d { display: none; }
.pxchg { display: inline-block; border-radius: 5px; padding: 0 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #ECEEF1; color: #4B4F56; }
.pxchg--m { margin-top: 2px; }
.pxchg--up, .pxchg--new { background: #E3F1E8; color: #1F6B3F; }
.pxchg--down { background: #FBE3E3; color: #B3261E; }
.pxcall {
justify-self: end; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%; background: #E3F1E8; color: var(--fb-green);
}
.pxcall:hover { background: #d2e8da; }
.pxcall .icon { width: 17px; height: 17px; stroke-width: 2.2; }
.pxtable__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px 14px; font-size: 12.5px; color: var(--fb-muted); }
.pxtable__foot a { font-weight: 700; color: var(--fb-green); }
.pxtable__foot--solo { justify-content: center; padding: 14px 12px; }
@media (min-width: 820px) {
.pxtable { border-radius: 12px; }
.pxtable__head { padding: 12px 16px; }
.pxtable__title { font-size: 17px; }
.pxtable__v, .pxtable__hint-d { display: inline; }
.pxtable__hint { font-size: 13px; }
.pxgrid { min-width: 760px; }
.pxrow {
grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) repeat(var(--px-grades, 3), minmax(0, .8fr)) minmax(0, 1fr) minmax(0, .8fr) 56px;
gap: 8px; padding: 11px 16px;
}
.pxrow--head { padding: 9px 16px; }
.pxcol--area, .pxcol--chg, .pxcol--time, .pxcol--call { display: block; }
.pxsort { font-size: 12.5px; }
.pxcell--num { font-size: 19px; }
.pxcell__name { font-size: 15px; white-space: normal; }
.pxcell__sub { font-size: 12.5px; white-space: normal; }
.pxcell__sub--d { display: block; }
.pxcell__sub--m, .pxchg--m { display: none; }
.pxchg { border-radius: 6px; padding: 1px 8px; font-size: 13px; }
.pxcol--time { font-size: 13.5px; color: var(--fb-muted); }
.pxtable__foot { padding: 10px 16px 14px; font-size: 13px; }
}
/* ลิงก์จากการ์ดราคาบนหน้าแรก → หน้าราคา */
.stories__more {
display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 0; font-weight: 700; font-size: 14px; color: var(--fb-green);
}
.stories__more:hover { text-decoration: underline; }
.stories__more .icon { width: 17px; height: 17px; }
@media (min-width: 820px) { .stories__more { margin: 10px 0 0; } }
/* ============ หน้าหลัก = ฟีด (PR B 2026-10-04) — ตามไฟล์แบบ design-home-feed ============ */
/* แท็บบนจอคอม: ไอคอน + ป้ายเล็ก 5 เมนู (หน้าหลัก · ราคา · สวน · ตลาด · แผง) ที่เลือก = ขาว + ขีดล่าง */
.toptab { flex-direction: column; gap: 1px; width: 96px; font-size: 11px; font-weight: 600; line-height: 1.2; }
.toptab .icon { width: 24px; height: 24px; }
.toptab--active { padding-top: 3px; }
@media (min-width: 820px) and (max-width: 1023px) { .toptab { width: 80px; } }
/* แถบล่างมือถือ 5 ช่อง: หน้าหลัก · ราคา · (+ โพสต์) · ตลาด · เมนู (ปุ่ม) */
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tabbar__item--menu { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; color: #8a978d; }
.tabbar__item--menu[aria-expanded="true"] { color: var(--green-dark); }
/* แผ่นเมนูเลื่อนขึ้น (มือถือ) */
.msheet { position: fixed; inset: 0; z-index: 40; }
.msheet[hidden] { display: none; }
.msheet__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.msheet__panel {
position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto;
background: #fff; border-radius: 16px 16px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
}
.msheet__grip { width: 40px; height: 4px; border-radius: 2px; background: #CED0D4; margin: 4px auto 10px; }
.msheet__item {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border-radius: 10px; border: 0; background: none;
color: var(--fb-ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
}
.msheet__item:hover, .msheet__item:active { background: #F0F2F5; }
.msheet__item .muted { font-weight: 500; font-size: 13px; }
.msheet__form { margin: 0; }
.msheet__sep { height: 1px; background: #E4E6EB; margin: 6px 8px; }
.msheet__close {
display: block; width: 100%; margin-top: 8px; height: 44px; border: 0; border-radius: 10px;
background: #E4E6EB; color: var(--fb-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
body.msheet-open { overflow: hidden; }
@media (min-width: 768px) { .msheet { display: none; } }
/* เมนูซ้าย "ฟีด — ดูเฉพาะ": สี่เหลี่ยมมนสีตามหมวด (ตามแบบ) ที่เลือก = เขียวไอคอนขาว + พื้นเขียวอ่อน ตัวหนา */
.fbnav--home .fbnav__ico--sq { width: 34px; height: 34px; border-radius: 10px; }
.fbnav__ico--all { background: #ECEEF1; color: #4B4F56; }
.fbnav__ico--buy-board { background: #FFE3D6; color: #9A3A17; }
.fbnav__ico--orchard { background: #E6E1FA; color: #5B47B0; }
.fbnav__ico--sell { background: #FFF1C9; color: #7A5600; }
.fbnav__ico--notice { background: #DCEBFA; color: #2C5F99; }
.fbnav__ico--stalls { background: #E3F1E8; color: var(--fb-green); }
.fbnav__ico--on, .fbnav__item--on .fbnav__ico--sq { background: var(--fb-green); color: #fff; }
.fbnav--home .fbnav__item--on { background: #E3F1E8; font-weight: 700; }
/* แถบ "ราคา<พันธุ์หลัก>วันนี้" บนสุดของฟีด */
.pbar { padding: 12px 12px 12px; }
.pbar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pbar__hgroup { min-width: 0; }
.pbar__title { margin: 0; font-family: var(--font-head); font-size: 17px; font-weight: 600; line-height: 1.3; }
.pbar__sub { margin: 2px 0 0; color: var(--fb-muted); font-size: 12.5px; }
.pbar__all { flex: none; font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--fb-green); }
.pbar__all:hover { text-decoration: underline; }
.pbar__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pbar__tile { border-radius: 12px; padding: 10px 12px; min-width: 0; background: #ECEEF1; }
.pbar__tile--ab { background: #FFE3D6; } .pbar__tile--c { background: #E6E1FA; } .pbar__tile--d { background: #DCEBFA; }
.pbar__badge { display: inline-block; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; background: #4B4F56; }
.pbar__tile--ab .pbar__badge { background: #B4471F; } .pbar__tile--c .pbar__badge { background: #5B47B0; } .pbar__tile--d .pbar__badge { background: #2C5F99; }
.pbar__num { font-family: var(--font-head); font-size: 26px; font-weight: 700; margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #1C1E21; }
.pbar__num--range { font-size: 18px; line-height: 1.45; }
.pbar__tile--ab .pbar__num { color: #6E2A10; } .pbar__tile--c .pbar__num { color: #33267A; } .pbar__tile--d .pbar__num { color: #173A63; }
.pbar__unit { font-size: 12px; color: #4B4F56; }
.pbar__tile--ab .pbar__unit { color: #9A3A17; } .pbar__tile--c .pbar__unit { color: #5B47B0; } .pbar__tile--d .pbar__unit { color: #2C5F99; }
.pbar__more {
border: 1px dashed #B9C9BF; border-radius: 12px; padding: 10px 12px; min-width: 0;
display: flex; flex-direction: column; justify-content: center; gap: 4px; color: var(--fb-green); font-weight: 700; font-size: 13.5px; line-height: 1.3;
}
.pbar__more:hover { background: #F3F8F4; }
.pbar__more .icon { width: 22px; height: 22px; }
@media (min-width: 820px) {
.pbar { padding: 14px 16px; border-radius: 12px; }
.pbar__title { font-size: 19px; }
.pbar__sub { font-size: 13px; }
.pbar__all { font-size: 14px; }
.pbar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pbar__num { font-size: 28px; }
.pbar__num--range { font-size: 19px; }
.pbar__more { font-size: 14px; }
}
/* การ์ด "สรุปราคาประจำวัน" (ปักบนฟีด เฉพาะวันนี้ที่มีราคา) */
.dsum { padding-bottom: 12px; }
.dsum__head { align-items: center; }
.dsum__avatar {
flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fb-green); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.dsum__avatar .icon { width: 22px; height: 22px; }
.dsum__badge { flex: none; align-self: flex-start; background: #E3F1E8; color: var(--fb-green); border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dsum__brand { display: none; } /* มือถือแคบ: ชื่อการ์ดไม่ถูกตัด */
@media (min-width: 480px) { .dsum__brand { display: inline; } }
.dsum__text { margin: 10px 12px 8px; font-size: 15px; line-height: 1.6; }
.dsum__text b { font-weight: 700; }
.dsum__chg { font-weight: 700; white-space: nowrap; }
.dsum__chg--up { color: #1F6B3F; }
.dsum__chg--down { color: #B4471F; }
.dsum__chg--same { color: var(--fb-muted); font-weight: 600; }
.dsum__spark { margin: 0 12px; border-radius: 10px; background: #F7F8FA; padding: 8px 6px 4px; }
.dsum__sparkhead { display: flex; justify-content: space-between; gap: 8px; padding: 0 6px 2px; font-size: 12.5px; font-weight: 600; color: #4B4F56; }
.spark { display: block; width: 100%; height: 96px; }
.spark__line { fill: none; stroke: #B4471F; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot { fill: #B4471F; }
.spark__dot--today { stroke: #fff; stroke-width: 2; }
.spark--c .spark__line, .spark--c .spark__dot { stroke: #5B47B0; } .spark--c .spark__dot { fill: #5B47B0; }
.spark--d .spark__line, .spark--d .spark__dot { stroke: #2C5F99; } .spark--d .spark__dot { fill: #2C5F99; }
.spark--x .spark__line { stroke: #4B4F56; } .spark--x .spark__dot { fill: #4B4F56; }
.spark__val { font-size: 10.5px; font-weight: 700; fill: #4B4F56; font-family: var(--font-head); }
.spark__val--today { fill: #1C1E21; font-size: 12px; }
.spark__lbl { font-size: 10px; fill: #8A8D91; }
.spark__lbl--today { fill: #1F6B3F; font-weight: 700; }
.dsum__foot { display: flex; justify-content: space-between; align-items: center; margin: 10px 12px 0; }
.dsum__foot a { font-weight: 700; font-size: 14px; color: var(--fb-green); }
.dsum__share { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 8px; border-radius: 8px; color: var(--fb-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.dsum__share:hover { background: #F0F2F5; }
.dsum__share .icon { width: 16px; height: 16px; }
@media (min-width: 820px) {
.dsum__avatar { width: 42px; height: 42px; }
.dsum__text { margin: 10px 16px 8px; }
.dsum__spark { margin: 0 16px; }
.dsum__foot { margin: 10px 16px 0; }
}
/* รูปเดียวในการ์ดฟีด: กฎอยู่ที่ส่วน .pgrid--1 ด้านบน (แบบ Facebook 4/5 + blur) · หน้ารายละเอียดใช้ .pstack ไม่โดน */
/* คอลัมน์ขวา: รายชื่อแผงเป็นกล่องขาว (การ์ดราคาย้ายไปกลางแล้ว) */
.fbstalls--rail { padding: 12px 8px; }
.fbstalls--rail .fbstalls__head { padding: 0 8px 6px; }
.fbstalls__note { margin: 0 8px 6px; font-size: 12.5px; }
/* ==== PWA (2026-10-04): แถบชวนติดตั้ง (templates/_pwa_install.html + static/js/pwa.js) + หน้า offline (templates/pwa/offline.html) ==== */
/* วางเหนือ bottom nav (.tabbar z-index 25) ใต้แผ่นเมนู (.msheet 40) — ไม่ทับเนื้อหา: body.has-pwabar ดัน padding ล่างเพิ่ม */
.pwabar {
position: fixed; left: 10px; right: 10px; z-index: 24;
bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 8px 24px rgba(20, 83, 45, .18); font-size: 13px; line-height: 1.35;
}
.pwabar[hidden] { display: none; }
.pwabar__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.pwabar__body { flex: 1; min-width: 0; }
.pwabar__v[hidden] { display: none; }
.pwabar__v strong { display: block; font-size: 14px; color: var(--ink); }
.pwabar__v span { display: block; color: var(--muted); font-size: 12.5px; }
.pwabar__v .icon { width: 16px; height: 16px; vertical-align: -3px; color: #0a84ff; }
.pwabar__btn {
flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px;
border-radius: 999px; background: var(--green-dark); color: #fff; font-weight: 800; font-size: 13.5px; white-space: nowrap;
border: 0; cursor: pointer; text-decoration: none;
}
.pwabar__btn[hidden] { display: none; }
.pwabar__close {
flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
font-size: 22px; line-height: 1; cursor: pointer;
}
.pwabar__close:hover { background: var(--bg); }
@media (max-width: 767px) { body.has-pwabar .main, body.has-pwabar .main--fb { padding-bottom: calc(var(--tabbar-h) + 100px); } }
@media (min-width: 768px) { .pwabar { left: auto; right: 20px; bottom: 20px; max-width: 420px; } }
.page-offline { background: var(--bg); }
.offline { max-width: 420px; margin: 14vh auto 0; padding: 24px; text-align: center; }
.offline__logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: var(--shadow); }
.offline__title { font-family: var(--font-head); font-size: 22px; margin: 18px 0 6px; color: var(--ink); }
.offline__text { color: var(--muted); margin: 0 0 18px; }
.offline__retry { min-width: 160px; }
/* ---- หน้าเข้าสู่ระบบ LINE/Google (PR auth 2026-10-04, templates/account/login.html) — มือถือก่อน ---- */
.login { padding-top: 6px; }
.login__lead { margin: 0 0 18px; font-size: 15px; }
.login__form { margin: 0 0 12px; }
.login__btn {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent;
font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.login__btn .icon { width: 24px; height: 24px; }
.login__btn--line { background: var(--line); color: #fff; }
.login__btn--line:hover { background: #05b34c; }
.login__btn--google { background: #fff; color: var(--ink); border-color: #cfd8d1; }
.login__btn--google:hover { background: #f6f8f6; }
.login__none { text-align: center; font-size: 14px; }
.login__inapp { background: var(--cream); border: 1px solid #efe3bf; border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; font-size: 14px; }
.login__inapp[hidden] { display: none; }
.login__inapp p { margin: 0 0 8px; }
.login__inapp [hidden] { display: none; }
.login__open { width: 100%; }
.login__inapp-hint { text-align: center; margin: -4px 0 12px; line-height: 1.5; }
.login__legal { text-align: center; margin: 14px 0 22px; line-height: 1.6; }
.login__legal a { text-decoration: underline; }
.login__staff { text-align: center; }
.login__staff-link { display: inline-block; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; text-decoration: underline; padding: 6px 10px; }
.login__staff-link::-webkit-details-marker { display: none; }
.login__staff-form { text-align: left; margin-top: 12px; }
/* ---- หน้า /privacy/ /terms/ (templates/core/privacy.html, terms.html) ---- */
.legal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px 14px; }
.legal__lead { margin: 0 0 16px; font-size: 15.5px; }
.legal h2 { font-family: var(--font-head); font-size: 17px; margin: 20px 0 8px; color: var(--green-dark); }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--green-dark); text-decoration: underline; }
.legal__meta { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 10px; }
.site-footer__legal a { text-decoration: underline; }
.msheet__legal { text-align: center; margin: 8px 0 0; }
.msheet__legal a { text-decoration: underline; }
/* ============ สองภาษาไทย-จีน (PR China-ready 1/8, 2026-10-13) ============ */
/* {% bi "key" %} (core/templatetags/bi.py): ภาษาหลักตัวปกติ + อีกภาษาตัวเล็กสีทอง #7a5d00 ข้าง ๆ — เห็นทั้งสองภาษาโดยไม่ต้องกดแปล */
.bi { display: inline; }
.bi__sub { font-size: .78em; font-weight: 500; color: #7a5d00; margin-left: .3em; white-space: nowrap; }
/* โหมดไทยล้วน (PR 2026-10-16): ซ่อนทุกตัวจีนที่มี class zh (span ตัวเล็กของ {% bi %} ใส่ zh ให้เอง
เมื่อภาษาหลักเป็นไทย · ≈¥/斤 .cny · ข้อความที่ห่อ ด้วย zh_span()) — ยกเว้น .bi__sub--keep (disclaimer) · ปุ่ม 中文 ไม่มี zh */
body[data-lang="th"] .zh { display: none; }
.bi--stack { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.bi--stack .bi__sub { margin-left: 0; }
/* บนหัวเว็บสีเขียวเข้ม สีทอง #7a5d00 อ่านไม่ออก → ใช้ทองอ่อน (ที่อื่นคงสีตามสเปก) */
.site-header .bi__sub { color: #E8C86A; }
.site-header .hdr__post .bi__sub { color: #7a5d00; } /* ปุ่มโพสต์พื้นขาว */
.toptab--active .bi__sub { color: #F4E3A8; }
.toptab .bi__sub, .tabbar__item .bi__sub { font-size: 10px; margin-left: 3px; }
/* ปุ่มสลับภาษา "ไทย | 中文" (_langswitch.html) — หัวเว็บทุกหน้า + แผ่นเมนูมือถือ */
.langsw { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.langsw__btn { border: 0; background: none; padding: 4px 2px; margin: 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer; opacity: .75; }
.langsw__btn:hover { opacity: 1; text-decoration: underline; }
.langsw__on { font-weight: 800; }
.langsw__sep { opacity: .55; }
.langsw--hdr { color: #fff; flex: none; }
.langsw--sheet { justify-content: center; width: 100%; margin: 0 0 8px; font-size: 15px; color: var(--fb-ink); }
.langsw--sheet .langsw__btn { padding: 8px 6px; }
.langsw--sheet .langsw__on { color: var(--green-dark); }
/* ==== กระดานราคา 2/9 (2026-10-14): ¥/斤 · ป้ายความสด · สถานะตลาด · เครดิต · การ์ดหน้าแรก · ปุ่มภาษา 44px ==== */
/* ≈¥/斤 ตัวเล็กสีทอง (#7a5d00 ชุดเดียวกับ .bi__sub) คู่ราคา ฿/กก. ทุกจุด — services.fx / {% cny %} */
.cny { display: inline-block; margin-left: .35em; font-family: var(--font-body); font-size: .72em; font-weight: 600; color: #7a5d00; white-space: nowrap; vertical-align: baseline; }
.pxcell--num .cny { display: block; margin: 0; font-size: 11px; line-height: 1.2; font-weight: 600; text-align: right; }
.pxcard__cny { margin-top: 2px; font-size: 13px; }
.pxcard__cny .cny { margin-left: 0; font-size: 13px; }
.pxcard__num .pxcard__chg { font-family: var(--font-body); font-size: 11.5px; margin-left: 6px; vertical-align: middle; }
.pxcard__top .bi__sub, .pbar__badge .bi__sub { font-size: .8em; }
.pxcard__unit .bi__sub, .pbar__unit .bi__sub, .pxcell__sub .bi__sub { font-size: .9em; }
/* ป้ายความสดต่อแผง: ● สด · 20 นาทีที่แล้ว (เขียว) · วันนี้ HH:MM / เมื่อวาน / 2 วันที่แล้ว (เทา) · เกิน 2 วัน ไม่โชว์ (services.freshness) */
.fresh { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: #65676B; white-space: nowrap; }
.fresh__dot { font-size: 9px; line-height: 1; color: #9AA0A6; }
.fresh--fresh { color: #1F6B3F; }
.fresh--fresh .fresh__dot { color: #2EAD5A; }
.fresh .bi__sub { font-size: .85em; }
.pxcell__fresh { margin-top: 2px; }
/* ป้ายสถานะตลาดวันนี้ (MarketStatus): ของออกมาก เขียว · ปกติ เทา · ขาด ส้ม */
.mstatus { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; background: #ECEEF1; color: #4B4F56; white-space: nowrap; }
.mstatus__dot { width: 8px; height: 8px; border-radius: 50%; background: #9AA0A6; flex: none; }
.mstatus--plenty { background: #E3F1E8; color: #1F6B3F; } .mstatus--plenty .mstatus__dot { background: #2EAD5A; }
.mstatus--short { background: #FDEBD3; color: #9A3A17; } .mstatus--short .mstatus__dot { background: #E8842C; }
.mstatus__note { font-size: 12.5px; color: var(--fb-muted); }
.px__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; font-size: 13px; }
.px__statuslbl { font-weight: 700; color: var(--fb-ink); }
@media (min-width: 820px) { .px__status { border-radius: 12px; padding: 10px 16px; } }
/* บรรทัดเครดิตใต้ราคาแต่ละแผง: source_note + "ล้งขอเอาออกได้" (ไทย+จีน) */
.pxcredit { display: block; font-size: 11.5px; color: #8A8D91; white-space: normal; line-height: 1.35; }
.pxcredit .bi__sub { font-size: .9em; }
p.pxcredit { margin: 6px 0 0; }
/* การ์ดราคาหน้าแรก: ค่ากลางใหญ่ + ≈¥ · ต่ำ–สูง + จำนวนแผง · ▲▼ เทียบเมื่อวาน · ป้ายสถานะตลาด */
.pbar__variety { font-weight: 600; }
.pbar__head { flex-wrap: wrap; } /* มือถือ: ลิงก์ "ดูตารางราคาทุกแผง" ตกบรรทัดใต้หัวได้ ไม่เบียดชื่อพันธุ์ */
.pbar__sub { line-height: 1.5; }
.pbar__warn { color: #9A3A17; }
/* ราคาเกิน 2 วัน (rail.is_stale): หัวการ์ดเป็นสีเทา (การ์ดยังอยู่ แค่ไม่มีลูกศร/ป้ายสด) */
.pbar--stale .pbar__title, .pbar--stale .pbar__title .bi__sub, .pbar--stale .pbar__sub, .pbar--stale .pbar__warn, .pbar--stale .pbar__sub .bi__sub { color: #8A8D91; }
.pbar__status { margin: 6px 0 0; }
.pbar__tiletop { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pbar__chg { font-size: 11px; }
.pbar__unit { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pbar__range { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #4B4F56; font-variant-numeric: tabular-nums; }
.pbar__n { font-weight: 500; color: var(--fb-muted); }
.pbar__more .bi--stack { align-items: flex-start; }
/* ปุ่มสลับภาษา "ไทย | 中文": พื้นที่กดสูงอย่างน้อย 44px บนมือถือ (หัวเว็บสูง 56px — ปุ่มขยายเต็มความสูง) */
@media (max-width: 819px) {
.langsw--hdr { gap: 2px; }
.langsw--hdr .langsw__btn, .langsw--hdr .langsw__on {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; min-width: 44px; padding: 0 6px; box-sizing: border-box;
}
.langsw--sheet .langsw__btn, .langsw--sheet .langsw__on {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; box-sizing: border-box;
}
}
/* ==== PR 4 โปรไฟล์ล้ง + ราคารายสัปดาห์ (2026-10-15) — section ใหม่เท่านั้น ไม่แตะส่วนเดิม (ป้ายระดับ .tbadge เอาออก 2026-10-16) ==== */
/* หน้าแผง: ข้อมูลแผง 店铺信息 (2026-10-16 แทน "การยืนยันตัวตน" — ไม่มีป้ายระดับแล้ว)
ข้อเท็จจริงจากระบบ (dl แถว ป้าย|ค่า) + chip ที่แผงแจ้ง + สถิติ 3 ช่อง · สิ่งที่ทีมงานทำ (วันที่ + ตรวจอะไร/ไม่ได้ตรวจอะไร) · ข้อความท้าย */
.sinfo__intro { margin: -4px 0 10px; line-height: 1.5; }
.sinfo__sub { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.sinfo__facts { margin: 0; }
.sinfo__row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.sinfo__row:last-child { border-bottom: 0; }
.sinfo__row dt { flex: 0 0 38%; max-width: 160px; color: var(--muted); font-size: 13px; }
.sinfo__row dd { flex: 1; min-width: 0; margin: 0; font-weight: 600; }
.sinfo__date { font-weight: 500; color: var(--muted); white-space: nowrap; }
.sinfo__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sinfo__chip { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 12.5px; font-weight: 600; }
.sinfo__team { list-style: none; margin: 0; padding: 0; }
.sinfo__act { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.sinfo__act:last-child { border-bottom: 0; }
.sinfo__actname { font-size: 14px; font-weight: 600; }
.sinfo__hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.sinfo__disc { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; }
/* ประโยคยาว (บรรทัดกำกับ/คำอธิบาย/ข้อความท้าย): อีกภาษาขึ้นบรรทัดใหม่ ตัดคำได้ (ปกติ .bi__sub ห้ามตัดบรรทัด) */
.sinfo__intro .bi, .sinfo__hint .bi, .sinfo__disc .bi { display: flex; flex-direction: column; gap: 2px; }
.sinfo__intro .bi__sub, .sinfo__hint .bi__sub, .sinfo__disc .bi__sub { margin-left: 0; white-space: normal; font-size: .95em; }
.sinfo__row dt .bi, .sinfo__row dd > .bi { white-space: normal; }
.sinfo__row .bi__sub { white-space: normal; }
.tstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tstats__cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 12px; background: var(--cream); text-align: center; }
.tstats__num { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--green-dark); font-variant-numeric: tabular-nums; line-height: 1.2; }
.tstats__num small { font-size: 12px; font-weight: 600; }
.tstats__num--sm { font-size: 13.5px; min-width: 0; }
.tstats__num--sm .fresh { white-space: normal; justify-content: center; flex-wrap: wrap; font-size: 13px; }
.tstats__num--sm .bi { display: inline-flex; flex-direction: column; align-items: center; }
.tstats__lbl { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tstats__lbl .bi { display: inline-flex; flex-direction: column; }
/* หน้าแผง: กราฟแท่ง 8 สัปดาห์ */
.wkchart__box { position: relative; height: 180px; }
/* /prices/: ตารางรายสัปดาห์ใต้กราฟรายวัน */
.pxweek { padding: 12px; }
.pxweek__scroll { overflow-x: auto; margin-top: 8px; }
.pxweek__table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pxweek__table th { font-size: 12px; font-weight: 600; color: var(--fb-muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--fb-line); white-space: nowrap; }
.pxweek__table td { padding: 7px 8px; border-bottom: 1px solid var(--fb-line); white-space: nowrap; }
.pxweek__table .num { text-align: right; }
.pxweek__table tbody tr:first-child td { background: #f4faf5; }
.pxweek__row--none td { color: #b0b3b8; }
@media (max-width: 599px) {
.pxweek__table { font-size: 12.5px; }
.pxweek__table th { white-space: normal; padding: 6px 4px; vertical-align: bottom; }
.pxweek__table th .bi { display: inline-flex; flex-direction: column; }
.pxweek__table td { padding: 7px 4px; }
.pxweek__table td:first-child { white-space: normal; }
}
/* /prices/: ตลาดจีนสัปดาห์นี้ (MarketNote) — บอกทิศทาง ไม่ใช่ราคาซื้อขาย */
.cnnote { padding: 12px; }
.cnnote__disc { margin: 2px 0 8px; font-size: 12px; color: #9A3A17; }
.cnnote__list { list-style: none; margin: 0; padding: 0; }
.cnnote__item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--fb-line); }
.cnnote__arrow { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.cnnote__arrow--up { background: #e3f2e6; color: #1F6B3F; }
.cnnote__arrow--down { background: #fde8e4; color: #B4471F; }
.cnnote__arrow--flat { background: #eef0f2; color: #4B4F56; }
.cnnote__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.cnnote__note { font-size: 12.5px; color: var(--fb-muted); }
/* ==== PR เก็บติ่ง (2026-10-16): ข้อความกำกับราคา + แจ้งราคาผิด 报错 ==== */
/* ข้อความกำกับใต้ตาราง/การ์ดราคา (stalls/_price_notes.html) — จาง ตัวเล็ก อีกภาษาขึ้นบรรทัดใหม่ ตัดคำได้ */
.pnotes { margin: 8px 0 0; }
.pnotes__line { margin: 0 0 4px; font-size: 11.5px; line-height: 1.45; color: #8A8D91; }
.pnotes__line .bi { display: flex; flex-direction: column; }
.pnotes__line .bi__sub { margin-left: 0; white-space: normal; font-size: .95em; }
.pbar .pnotes { padding: 0 2px; }
.pnotes__box { padding: 10px 12px; }
.pnotes__box .pnotes { margin: 0; }
/* ลิงก์ "ราคานี้ผิด? แจ้งทีมงาน 报错" ใต้ตารางหน้าแผง */
.pnotes__report { margin: 6px 0 0; font-size: 12.5px; }
.pnotes__report a { display: inline-flex; align-items: center; gap: 4px; color: #9A3A17; font-weight: 600; }
.pnotes__report .icon { width: 14px; height: 14px; }
/* /prices/: ไอคอนธงเล็กข้างชื่อแผง (ชื่อยังตัด … ได้ ไอคอนไม่หด) */
.pxcell__nameline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pxcell__nameline .pxcell__name { min-width: 0; }
.pxreport { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px 0; border-radius: 50%; color: #B0B3B8; }
.pxreport:hover { color: #9A3A17; background: #FBEDE7; }
.pxreport .icon { width: 13px; height: 13px; }
/* หน้าแจ้งราคาผิด (stalls/price_report.html) */
.prep { max-width: 520px; }
.prep__done { padding: 14px 16px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); }
.prep__privacy { margin-top: 8px; text-align: center; }
.prep__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ==== หลังบ้านทีมงาน /staff/ (staff เท่านั้น — templates/backoffice/) ตามผัง Main / StaffPhone ==== */
/* แดง = ทีมงานต้องทำ · เหลือง = รอแผง · เขียว = เรียบร้อย — ใช้เฉพาะหน้านี้ (ไม่แตะหน้า public) */
:root {
--st-bg: #f2f4f0; --st-line: #e1e7df; --st-ink: #1c2a20; --st-muted: #5b6b60;
--st-green: #1F6B3F; --st-green-2: #164f2b;
--st-red: #b42318; --st-red-bg: #fff7f6; --st-red-soft: #fde8e6; --st-red-line: #f3b8b1;
--st-yel: #8a5300; --st-yel-bg: #fffbf0; --st-yel-soft: #fff3d6; --st-yel-line: #f0d9a3; --st-yel-btn: #c99a3a;
--st-ok-bg: #f6fbf7; --st-ok-soft: #e3f1e6; --st-ok-line: #bfdcc7;
}
/* ตัวเลขแดงบนกระดิ่ง (staff): มุมซ้ายบน แยกจาก badge ยังไม่อ่าน (มุมขวาบน) · กดแล้วไป /staff/ */
.staffbadge { position: absolute; top: -4px; left: -6px; z-index: 1; }
.staffbadge__num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
background: var(--st-red); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
border: 2px solid var(--fb-green);
}
.staffbadge__num:hover { background: #8f1c13; }
.notifpanel__staff {
display: flex; align-items: center; min-height: 44px; padding: 10px 14px;
background: var(--st-red-soft); color: var(--st-red); font-size: 14px; font-weight: 700;
border-bottom: 1px solid var(--st-red-line);
}
.msheet__count {
display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
margin-left: auto; border-radius: 11px; background: var(--st-red); color: #fff; font-size: 12.5px; font-weight: 800;
}
body.staffpage { background: var(--st-bg); color: var(--st-ink); }
/* หัวเขียว */
.shdr { position: relative; }
.shdr__inner {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
max-width: 1360px; margin: 0 auto; padding: 12px 16px; min-height: 64px;
}
.shdr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shdr__logo { width: 40px; height: 40px; flex: none; }
.shdr__titles { display: flex; flex-direction: column; min-width: 0; }
.shdr__title { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.25; }
.shdr__title--desk { display: none; }
.shdr__date { font-size: 13px; color: #cfe6d5; line-height: 1.3; }
.shdr__gap { flex: 1 1 0; }
.shdr__site {
display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px;
border: 1px solid #8fc3a0; color: #fff; font-weight: 700; font-size: 15px;
}
.shdr__site:hover { background: var(--st-green-2); }
.shdr__me { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 999px; }
.shdr__me .avatar { margin-top: 0; }
.shdr__mename { display: none; flex-direction: column; font-size: 14px; line-height: 1.2; font-weight: 600; }
.shdr__mename small { color: #cfe6d5; font-size: 12px; font-weight: 400; }
.shdr__stats {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
max-width: 1360px; margin: 0 auto; padding: 0 16px 16px;
}
.shdr__stat {
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px;
background: var(--st-green-2); border-radius: 12px; padding: 8px; color: #cfe6d5; font-size: 12px; text-align: center;
}
.shdr__num { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.15; color: #fff; }
.shdr__num--todo { color: #ffb4a8; }
.shdr__num--wait { color: #f5c842; }
@media (min-width: 768px) {
.shdr__inner { padding: 12px 24px; }
.shdr__title { font-size: 18px; }
.shdr__title--desk { display: inline; }
.shdr__title--phone { display: none; }
.shdr__site { display: inline-flex; }
.shdr__me { background: var(--st-green-2); padding: 4px 12px 4px 4px; }
.shdr__mename { display: flex; }
.shdr__stats { display: none; }
}
/* โครงหน้า: เมนูซ้าย (≥768) + เนื้อหา */
.staff { padding: 16px 16px 40px; }
@media (max-width: 767px) { .staff { padding-bottom: calc(var(--tabbar-h) + 24px); } }
.staff > .flash { max-width: 1312px; margin: 0 auto 12px; }
.staff__layout { max-width: 1312px; margin: 0 auto; display: flex; gap: 24px; align-items: flex-start; }
.staff__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.snav { display: none; }
@media (min-width: 768px) {
.staff { padding: 24px 24px 48px; }
.staff__main { gap: 20px; }
.snav { display: flex; flex-direction: column; gap: 2px; flex: 0 0 220px; position: sticky; top: 16px; }
}
@media (min-width: 1100px) { .snav { flex-basis: 250px; } }
.snav__item {
display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
color: var(--st-ink); font-weight: 600; font-size: 15px;
}
.snav__item .icon { width: 20px; height: 20px; }
.snav__item:hover { background: #eaf3ec; }
.snav__item--on, .snav__item--on:hover { background: var(--st-green); color: #fff; }
.snav__item--admin { margin-top: 12px; color: var(--st-muted); font-weight: 500; }
.snav__count {
margin-left: auto; min-width: 22px; padding: 0 8px; border-radius: 999px; text-align: center;
background: var(--st-red); color: #fff; font-size: 13px; font-weight: 700;
}
.shello__h { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 21px; line-height: 1.3; }
.shello__sub { margin: 4px 0 0; color: var(--st-muted); font-size: 14px; }
@media (min-width: 768px) { .shello__h { font-size: 28px; } .shello__sub { font-size: 16px; } }
/* ปุ่ม */
.sbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--st-green);
background: #fff; color: var(--st-green); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.sbtn:hover { background: #eaf3ec; }
.sbtn .icon { width: 18px; height: 18px; }
.sbtn--solid { background: var(--st-green); color: #fff; }
.sbtn--solid:hover { background: var(--st-green-2); }
.sbtn--todo, .sbtn--todo:hover { background: var(--st-red); border-color: var(--st-red); color: #fff; }
.sbtn--wait { border-color: var(--st-yel-btn); color: var(--st-yel); }
.sbtn--wait:hover { background: var(--st-yel-soft); }
.sbtn--sm { padding: 0 12px; font-size: 14px; }
@media (min-width: 768px) { .sbtn { min-height: 40px; } .sbtn--sm { min-height: 36px; } }
.spill {
display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px;
background: #eef1ec; color: var(--st-muted); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.spill--todo { background: var(--st-red-soft); color: var(--st-red); }
.spill--wait { background: var(--st-yel-soft); color: var(--st-yel); }
.spill--ok { background: var(--st-ok-soft); color: var(--st-green); }
/* การ์ดงานรอจัดการ — มือถือ: แถวกดได้ทั้งแถว (ผัง StaffPhone) · จอคอม: การ์ดเรียงเป็นตาราง (ผัง Main) */
.stasks { display: grid; gap: 10px; }
.stask {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: 14px; border: 1px solid var(--st-line); background: #fff;
}
.stask--todo { border-color: var(--st-red-line); background: var(--st-red-bg); }
.stask--wait { border-color: var(--st-yel-line); background: var(--st-yel-bg); }
.stask--ok { border-color: var(--st-ok-line); background: var(--st-ok-bg); }
.stask__top { display: contents; }
.stask .spill { display: none; }
.stask__num {
order: -1; flex: none; display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 18px;
background: var(--st-ok-soft); color: var(--st-green);
}
.stask--todo .stask__num { background: var(--st-red-soft); color: var(--st-red); }
.stask--wait .stask__num { background: var(--st-yel-soft); color: var(--st-yel); }
.stask__body { flex: 1 1 auto; min-width: 0; }
.stask__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.stask__detail { margin: 2px 0 0; font-size: 13px; color: var(--st-muted); line-height: 1.45; overflow-wrap: anywhere; }
.stask__go, .stask__go:hover { border: 0; background: none; min-height: 0; padding: 0; color: var(--st-muted); }
.stask__go::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.stask__golabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
.stasks { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stask { flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; border-radius: 16px; }
.stask__top { display: flex; align-items: center; justify-content: space-between; }
.stask .spill { display: inline-flex; }
.stask__num { order: 0; width: auto; height: auto; background: none !important; font-size: 36px; line-height: 1; }
.stask__title { font-size: 17px; }
.stask__detail { font-size: 14px; margin-top: 6px; }
.stask__go { min-height: 40px; padding: 0 16px; border: 1px solid var(--st-green); background: #fff; color: var(--st-green); }
.stask__go:hover { min-height: 40px; padding: 0 16px; border: 1px solid var(--st-green); background: #eaf3ec; color: var(--st-green); }
.stask__go.sbtn--todo, .stask__go.sbtn--todo:hover { background: var(--st-red); border-color: var(--st-red); color: #fff; }
.stask__go.sbtn--wait { border-color: var(--st-yel-btn); color: var(--st-yel); }
.stask__go.sbtn--wait:hover { border-color: var(--st-yel-btn); color: var(--st-yel); background: var(--st-yel-soft); }
.stask__go::after { display: none; }
.stask__go .icon { display: none; }
.stask__golabel { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* การ์ดเนื้อหา + แถวรายการ */
.srow { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
@media (min-width: 768px) { .srow { gap: 20px; } }
.scard {
flex: 1 1 340px; min-width: 0; background: #fff; border: 1px solid var(--st-line); border-radius: 16px; padding: 16px;
}
.scard--wide { flex-basis: 420px; }
@media (min-width: 768px) { .scard { padding: 20px; } }
.scard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scard__h { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--st-ink); }
.scard__sub { margin: 4px 0 8px; color: var(--st-muted); font-size: 14px; }
.slist { list-style: none; margin: 0; padding: 0; }
.sitem { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1ec; }
.slist > .sitem:first-child { border-top: 0; }
.sitem--wrap { flex-wrap: wrap; }
.sitem__body { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.sitem__t { display: block; font-weight: 700; }
a.sitem__t:hover { color: var(--st-green); text-decoration: underline; }
.sitem__s { color: var(--st-muted); font-size: 14px; }
.sitem__body a:hover strong { color: var(--st-green); text-decoration: underline; }
.sdot {
flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
background: var(--st-ok-soft); color: var(--st-green); font-weight: 700;
}
.sdot .icon { width: 16px; height: 16px; }
.sdot--todo { background: var(--st-red-soft); color: var(--st-red); }
.sdot--wait { background: var(--st-yel-soft); color: var(--st-yel); }
.snum { font-family: var(--font-head); font-weight: 600; }
.sbar { height: 8px; background: #eef1ec; border-radius: 999px; margin: 8px 0 4px; overflow: hidden; }
.sbar span { display: block; height: 100%; background: var(--st-yel-btn); border-radius: 999px; }
.sempty { padding: 12px 0; color: var(--st-muted); font-size: 14px; }
/* ฟอร์มอัตรา ¥ + ปุ่มสถานะตลาด (มือถือขึ้นบรรทัดใหม่เต็มกว้าง) */
.sfx { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.sfx__label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; color: var(--st-muted); font-size: 14px; }
.sfx__label > span { flex: none; white-space: nowrap; }
.sfx__input {
width: 100%; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid #c9d2c6; border-radius: 10px;
font: inherit; font-weight: 700; color: var(--st-ink); background: #fff;
}
.sfx__input:focus { outline: none; border-color: var(--st-green); box-shadow: 0 0 0 3px rgba(31, 107, 63, .15); }
.smkt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1 1 100%; }
.smkt .sbtn { padding: 0 8px; }
@media (min-width: 768px) {
.sfx { flex: 0 0 auto; }
.sfx__label { flex: 0 0 auto; }
.sfx__input { width: 88px; height: 40px; }
.smkt { display: flex; flex: 0 0 auto; }
.smkt .sbtn { padding: 0 12px; }
}
.smissing { border-top: 1px solid #eef1ec; padding-top: 4px; }
.smissing > summary {
display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--st-yel); font-weight: 700; font-size: 15px;
}
/* ความเคลื่อนไหว */
.sact__t {
flex: none; width: 52px; display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 600;
color: var(--st-muted); font-size: 14px; line-height: 1.25;
}
.sact__t small { font-weight: 500; font-size: 12px; }
/* แถบล่างทีมงาน (มือถือ) — ใช้โครง .tabbar เดิม 4 ปุ่ม */
.stabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stabbar .tabbar__item { font-size: 12px; min-height: 44px; }
/* ==== หน้าจัดการแผง /shops//manage/ (สมาชิกแผง — templates/stalls/manage.html) ตามผัง Owner / OwnerPhone (PR ผู้ช่วยแผง 2026-10-16) ==== */
/* ใช้ token เดียวกับหลังบ้าน (--st-*) ให้หน้าตาเป็นชุดเดียวกัน — ไม่แตะหน้า public */
body.mgpage { background: var(--st-bg); color: var(--st-ink); }
/* หัวเขียว: จอคอม = "จัดการแผง" · มือถือ = avatar + ชื่อแผง + role (ผัง OwnerPhone) */
.mghdr__inner {
display: flex; align-items: center; gap: 10px 12px;
max-width: 1360px; margin: 0 auto; padding: 10px 14px; min-height: 64px;
}
.mghdr__brand { display: none; flex: none; }
.mghdr__logo { width: 40px; height: 40px; display: block; }
.mghdr__title--desk { display: none; font-family: var(--font-head); font-weight: 600; font-size: 18px; }
.mghdr__title--desk .bi__sub { color: #f5c842; }
.mghdr__stall { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.mghdr__stall .avatar { width: 48px; height: 48px; font-size: 16px; border: 3px solid #fff; margin: 0; }
.mghdr__stallname { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mghdr__name { font-family: var(--font-head); font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mghdr__role { font-size: 13px; color: #cfe6d5; }
.mghdr__role .bi__sub { color: #f5c842; }
.mghdr__gap { flex: 0 0 0; }
.mghdr .langsw--hdr { display: inline-flex; } /* มือถือไม่มีแผ่นเมนู (แถบล่างเป็น 3 ปุ่มของหน้านี้) → สลับภาษาที่หัวเสมอ */
.mghdr__eye {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 44px; height: 44px; border-radius: 12px; background: var(--st-green-2); color: #fff;
}
.mghdr__eye .icon { width: 22px; height: 22px; }
@media (min-width: 768px) {
.mghdr__inner { padding: 10px 24px; }
.mghdr__brand, .mghdr__title--desk { display: inline-flex; }
.mghdr__stall { display: none; }
.mghdr__gap { flex: 1 1 0; }
.mghdr__eye { display: none; }
}
/* รูปปก + รูปแผง + ชื่อ + ป้าย role + ปุ่ม — มือถือซ่อน (หัวเขียวแทน) */
.mgtop { display: none; background: #fff; border-bottom: 1px solid var(--st-line); }
.mgtop__inner { max-width: 1312px; margin: 0 auto; padding: 0 24px; }
.mgcover {
position: relative; height: 140px; border-radius: 0 0 18px 18px; overflow: hidden;
background: linear-gradient(180deg, #dcebe0 0%, #c5dfcc 100%);
}
.mgcover__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgcover__form { position: absolute; right: 16px; bottom: 16px; margin: 0; }
.mgcover__btn { background: rgba(255, 255, 255, .92); cursor: pointer; }
.mgcover__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mgprofile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: 0 8px 20px; margin-top: -48px; position: relative; }
.mgprofile__avatar .avatar { width: 112px; height: 112px; font-size: 34px; border: 5px solid #fff; margin: 0; }
.mgprofile__body { flex: 1 1 320px; min-width: 0; padding-bottom: 4px; }
.mgprofile__name { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.25; }
.mgprofile__meta { margin: 2px 0 0; color: var(--st-muted); font-size: 15px; }
.mgrole {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
background: #eaf3ec; color: var(--st-green); font-size: 13px; font-weight: 700;
}
.mgprofile__btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 768px) { .mgtop { display: block; } }
/* ปุ่ม */
.mgbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--st-green);
background: #fff; color: var(--st-green); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.mgbtn:hover { background: #eaf3ec; }
.mgbtn .icon { width: 18px; height: 18px; }
.mgbtn--solid { background: var(--st-green); color: #fff; }
.mgbtn--solid:hover { background: var(--st-green-2); }
.mgbtn--big { min-height: 52px; font-size: 17px; width: 100%; }
.mgbtn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.mgbtn--block { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding: 8px 14px; }
.mgbtn--ghost { border-color: var(--st-line); color: var(--st-muted); }
.mgbtn--danger { border-color: var(--st-red-line); color: var(--st-red); }
.mgbtn--danger:hover { background: var(--st-red-soft); }
.mgbtn--warn { border-color: var(--st-yel-btn); color: var(--st-yel); }
.mgbtn--warn:hover { background: var(--st-yel-soft); }
.mgbtn--warnsolid { background: var(--st-yel); border-color: var(--st-yel); color: #fff; }
.mgbtn--warnsolid:hover { background: #6e4200; }
@media (min-width: 768px) {
.mgbtn { min-height: 40px; }
.mgbtn--big { min-height: 44px; width: auto; min-width: 160px; }
}
/* โครงหน้า: มือถือคอลัมน์เดียว · จอคอม เมนูซ้าย + เนื้อหา + คอลัมน์ขวา (ผัง Owner) */
.mg { padding: 14px 14px 40px; }
@media (max-width: 767px) { .mg { padding-bottom: calc(var(--tabbar-h) + 24px); } }
.mg > .flash { max-width: 1264px; margin: 0 auto 12px; }
.mg__layout { max-width: 1264px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.mg__main, .mg__aside { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mgnav { display: none; }
@media (min-width: 768px) {
.mg { padding: 24px 24px 48px; }
.mg__layout { gap: 24px; flex-wrap: nowrap; }
.mg__main { flex: 999 1 560px; gap: 20px; }
.mg__aside { flex: 1 1 300px; max-width: 380px; gap: 20px; }
.mgnav { display: flex; flex-direction: column; gap: 2px; flex: 0 0 200px; position: sticky; top: 16px; }
}
@media (min-width: 768px) and (max-width: 1099px) { .mgnav { display: none; } }
@media (min-width: 1100px) { .mgnav { flex-basis: 240px; } }
.mgnav__item {
display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
color: var(--st-ink); font-weight: 600; font-size: 15px;
}
.mgnav__item:hover { background: #eaf3ec; }
.mgnav__item--on, .mgnav__item--on:hover { background: var(--st-green); color: #fff; }
.mgnav__item--on .bi__sub { color: #f5c842; }
.mgnav__item--sub { color: var(--st-muted); font-weight: 500; margin-top: 10px; }
.mgnav__count { margin-left: auto; min-width: 22px; padding: 0 8px; border-radius: 999px; text-align: center; background: var(--st-yel); color: #fff; font-size: 13px; font-weight: 700; }
/* การ์ด */
.mgcard { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; padding: 16px; scroll-margin-top: 72px; }
@media (min-width: 768px) { .mgcard { padding: 20px; } }
.mgcard--today { border: 2px solid var(--st-green); }
.mgcard--report { background: var(--st-yel-bg); border-color: var(--st-yel-line); }
.mgcard--soft { background: #f6f8f4; }
.mgcard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-bottom: 10px; }
.mgcard__h { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--st-ink); }
.mgcard--today .mgcard__h { font-size: 20px; }
.mgcard__sub { margin: 2px 0 0; color: var(--st-muted); font-size: 13.5px; line-height: 1.45; }
.mgcard__sub .bi { display: inline; }
.mgsub { margin: 14px 0 4px; font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.mgempty { margin: 8px 0 0; color: var(--st-muted); font-size: 14px; }
/* กล่องลงราคาวันนี้ — แถวราคาใช้ partial _price_row.html เดิม */
.mgprice { margin: 0; }
.mgprice .price-row { background: #fbfbf8; }
.mgprice__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.mgprice__hint { flex: 1 1 100%; color: var(--st-muted); font-size: 13.5px; text-align: center; }
.mgprice__hint .bi { display: inline; }
.mgprice__hint strong { color: var(--st-ink); }
@media (min-width: 768px) {
.mgprice__hint { flex: 1 1 220px; text-align: left; }
}
/* แจ้งราคาผิด */
.mgreport__head { display: flex; align-items: center; gap: 10px; }
.mgreport__head .icon { width: 26px; height: 26px; color: var(--st-yel); flex: none; }
.mgreport__list { list-style: none; margin: 0; padding: 0; }
.mgreport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0 0; }
.mgreport + .mgreport { border-top: 1px solid var(--st-yel-line); margin-top: 12px; }
.mgreport__body { flex: 1 1 240px; min-width: 0; }
.mgreport__t { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.mgreport__s { color: var(--st-muted); font-size: 14px; }
.mgreport__s .bi { display: inline; }
.mgreport__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mgreport__btns form { margin: 0; }
/* สถิติ 7 วัน — มือถือ 3 ช่อง (ผัง OwnerPhone ไม่มี "คนกดโทร") · จอคอม 4 ช่อง */
.mgstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mgstat { background: #f6f8f4; border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.mgstat--desk { display: none; }
.mgstat__num { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--st-ink); }
.mgstat__num--na { color: #8a9a8f; }
.mgstat__lbl { color: var(--st-muted); font-size: 12px; line-height: 1.35; }
.mgstat__lbl .bi { display: inline; }
@media (min-width: 768px) {
.mgstats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mgstat { align-items: flex-start; text-align: left; padding: 14px; }
.mgstat--desk { display: flex; }
.mgstat__num { font-size: 28px; }
.mgstat__lbl { font-size: 14px; }
}
/* แถวรายการ (โพสต์ / ผู้ช่วย / ลิงก์เชิญ) */
.mglist { list-style: none; margin: 0; padding: 0; }
.mgrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1ec; }
.mglist > .mgrow:first-child, .mgrow--first { border-top: 0; }
.mgrow .avatar { margin: 0; }
.mgrow__thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; background: #dcebe0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--st-green); }
.mgrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgrow__thumb .icon { width: 26px; height: 26px; }
.mgrow__body { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.mgrow__t { display: block; font-weight: 700; }
a.mgrow__t:hover { color: var(--st-green); text-decoration: underline; }
.mgrow__s { color: var(--st-muted); font-size: 13.5px; }
.mgrow__s .bi { display: inline; }
.mgrow__link { flex: none; font-weight: 700; font-size: 14px; color: var(--st-green); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.mgme { color: var(--st-muted); font-weight: 500; font-size: 13px; }
.mgmember__menu { flex: none; }
.mgmember__menu > summary { list-style: none; }
.mgmember__menu > summary::-webkit-details-marker { display: none; }
.mgmember__panel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mgmember__form { margin: 0; display: flex; gap: 6px; align-items: center; }
.mgselect { min-height: 40px; padding: 0 10px; border: 1px solid #c9d2c6; border-radius: 10px; font: inherit; font-size: 14px; background: #fff; color: var(--st-ink); max-width: 100%; }
.mginvite__url { width: 100%; min-height: 36px; padding: 0 8px; margin: 4px 0; border: 1px solid #c9d2c6; border-radius: 8px; font: inherit; font-size: 13px; color: var(--st-ink); background: #fbfbf8; }
.mginvite { flex-wrap: wrap; }
.mginvite__btns { display: flex; gap: 6px; flex: 1 1 100%; }
.mginvite__btns form { margin: 0; }
.mginviteform { margin-top: 10px; }
.mginviteform > summary { list-style: none; }
.mginviteform > summary::-webkit-details-marker { display: none; }
.mginviteform__form { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 12px; border: 1px dashed var(--st-line); border-radius: 12px; }
.mginviteform__lbl { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.mginviteform__lbl .mgselect { min-height: 44px; }
/* เชื่อม LINE */
.mgdot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #c9d2c6; }
.mgdot--on { background: var(--st-green); }
.mgremind { margin: 0; }
.mgsoon { color: var(--st-muted); font-size: 13px; }
.mgswitch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: #c9d2c6; cursor: pointer; }
.mgswitch--on { background: var(--st-green); }
.mgswitch__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.mgswitch--on .mgswitch__knob { left: 23px; }
/* คนอื่นเห็นแผงคุณแบบนี้ */
.mgpublic { background: #fff; border: 1px solid var(--st-line); border-radius: 12px; padding: 14px; margin-top: 10px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.mgpublic__row { display: flex; justify-content: space-between; gap: 12px; }
.mgpublic__row > span:first-child { color: var(--st-muted); }
.mgpublic__row .bi { display: inline; }
.mgpublic__edit { display: inline-block; margin: 10px 14px 0 0; font-weight: 700; color: var(--st-green); min-height: 44px; line-height: 44px; }
/* แถบล่างมือถือ 3 ปุ่ม (ผัง OwnerPhone) */
.mgtabbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mgtabbar .tabbar__item { font-size: 12px; min-height: 44px; color: var(--st-green); }
/* หน้ารับคำเชิญ /shops/invite// */
.mginvitepage { padding: 18px; }
.mginvitepage__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mginvitepage__head .avatar { margin: 0; }
.mginvitepage__kicker { margin: 0; color: var(--muted); font-size: 13px; }
.mginvitepage__name { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.25; }
.mginvitepage__q { font-size: 18px; font-weight: 700; margin: 8px 0 4px; }
.mginvitepage__form { margin: 14px 0 0; }
.mginvitepage__dead .small { margin-top: 4px; font-weight: 400; }
.mginvitepage__back { margin: 14px 0 0; }
.mginvitepage__back .linkbtn { color: var(--green-dark); }
/* "แผงของฉัน": role + ปุ่มจัดการแผง */
.mine-stall__role { margin: 8px 0 0; }
.mine-stall__btns { display: flex; gap: 8px; margin: 8px 0 0; }
.mine-stall__btns .btn { margin: 0; }
/* ลิงก์ "ราคานี้ผิด? 报错" เล็กใต้ตารางการ์ดโพสต์ในฟีด */
.fbpost__report { margin: 6px 12px 0; font-size: 12px; }
.fbpost__report a { display: inline-flex; align-items: center; gap: 4px; color: #9A3A17; font-weight: 600; }
.fbpost__report .icon { width: 13px; height: 13px; }
@media (min-width: 820px) { .fbpost__report { margin: 6px 16px 0; } }
/* ==== ทะเบียนสวน /orchards/ (PR 5, 2026-10-16 — templates/orchards/) ตามผัง OrchardList / OrchardForm / OrchardBuyer / OrchardOwner ==== */
/* ใช้ token --st-* ชุดเดียวกับหลังบ้าน/หน้าจัดการแผง · prefix .oc* · ไม่แตะหน้า public อื่น */
body.ocpage { background: var(--st-bg); color: var(--st-ink); }
.oc { padding: 14px 14px 40px; max-width: 1248px; margin: 0 auto; width: 100%; }
.oc--narrow { max-width: 720px; }
@media (max-width: 767px) { .oc { padding-bottom: calc(var(--tabbar-h) + 24px); } }
@media (min-width: 768px) { .oc { padding: 24px 24px 48px; } }
.oc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.oc__title { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.25; }
.oc__title .bi__sub { font-size: .6em; }
@media (min-width: 768px) { .oc__title { font-size: 28px; } }
.oc__sub { margin: 4px 0 0; color: var(--st-muted); font-size: 14.5px; }
.oc__sub .bi { display: inline; }
.oc__headbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oc__oldlink { font-size: 13px; color: var(--st-muted); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.oc__oldlink:hover { color: var(--st-green); }
/* ปุ่ม (แบบเดียวกับ .mgbtn) */
.ocbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--st-green);
background: #fff; color: var(--st-green); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.ocbtn:hover { background: #eaf3ec; }
.ocbtn .icon { width: 18px; height: 18px; }
.ocbtn .bi__sub { font-size: .8em; }
.ocbtn--solid { background: var(--st-green); color: #fff; }
.ocbtn--solid:hover { background: var(--st-green-2); }
.ocbtn--solid .bi__sub { color: #f5c842; }
.ocbtn--big { min-height: 52px; font-size: 17px; width: 100%; white-space: normal; }
.ocbtn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.ocbtn--block { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding: 8px 14px; }
.ocbtn--ghost { border-color: var(--st-line); color: var(--st-muted); }
.ocbtn--line { border-color: var(--line); color: #fff; background: var(--line); }
.ocbtn--onhdr { background: var(--st-green-2); border-color: var(--st-green-2); color: #fff; }
.ocbtn--onhdr:hover { background: #0f3a20; }
@media (min-width: 768px) { .ocbtn { min-height: 40px; } .ocbtn--big { min-height: 48px; width: auto; min-width: 220px; } }
/* กล่องเตือน GACC/GAP + กล่องกติกาในฟอร์ม */
.ocwarn {
display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px;
background: var(--st-yel-bg); border: 1px solid var(--st-yel-line); border-radius: 12px; padding: 10px 14px;
font-size: 13.5px; color: #5b4300; line-height: 1.45;
}
.ocwarn .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ocwarn > span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.ocwarn .bi { display: inline; }
.ocwarn .bi__sub { display: block; }
.ocwarn a { font-weight: 700; color: var(--st-green); }
.ocwarn--form { margin-bottom: 16px; }
/* ตัวกรอง */
.ocfilters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ocfilters__chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; align-items: center; scrollbar-width: thin; }
.ocfilters__sep { flex: none; width: 1px; height: 24px; background: #c9d2c6; }
.ocfilters__selects { display: flex; gap: 8px; flex-wrap: wrap; }
.occhip {
flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 999px;
border: 1px solid #c9d2c6; background: #fff; color: var(--st-ink); font: inherit; font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.occhip:hover { border-color: var(--st-green); }
.occhip--on { background: var(--st-green); border-color: var(--st-green); color: #fff; }
.occhip--on .bi__sub { color: #f5c842; }
.occhip .bi__sub { font-size: .8em; }
.occhip--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.occhip--radio { position: relative; }
.occhip--radio:has(input:checked) { background: var(--st-green); border-color: var(--st-green); color: #fff; }
.occhip--radio:has(input:checked) .bi__sub { color: #f5c842; }
.occhip--radio:has(input:focus-visible) { outline: 2px solid var(--st-green-2); outline-offset: 2px; }
.ocselect { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid #c9d2c6; background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--st-ink); max-width: 100%; }
.ocfilters__selects .ocselect:last-of-type { margin-left: auto; }
/* การ์ดสวน */
.ocgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .ocgrid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; } }
.occard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden; color: var(--st-ink); }
.occard:hover { border-color: var(--st-green); }
.occard__img { position: relative; height: 150px; background: #c5dfcc; }
.occard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.octag { position: absolute; top: 10px; left: 10px; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; background: #eef1ec; color: var(--st-muted); line-height: 1.4; }
.octag .bi__sub { font-size: .85em; }
.octag--has { background: var(--st-yel-soft); color: var(--st-yel); }
.octag--applying { background: #e6f0fa; color: #1d4e89; }
.octag--none { background: #eef1ec; color: var(--st-muted); }
.octag--dark { left: auto; right: 10px; background: rgba(0, 0, 0, .55); color: #fff; }
.octag--dark .bi__sub { color: #f5c842; }
.octag--green { top: auto; bottom: 10px; background: var(--st-green); color: #fff; }
.octag--green .bi__sub { color: #f5c842; }
.octag--bl { top: auto; bottom: 10px; }
.occard__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.occard__name { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.occard__area { font-size: 13px; color: var(--st-muted); }
.occard__facts { font-size: 14px; }
.occard__foot { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--st-muted); }
.occard__foot .bi { display: inline; }
.ocmine-item { display: flex; flex-direction: column; gap: 8px; }
.ocmine-item .occard { flex: 1; }
/* ข้อความกำกับ (กติกาข้อ 3, 6) */
.ocdisc { margin: 18px 0 0; font-size: 13px; color: var(--st-muted); text-align: center; line-height: 1.5; }
.ocdisc .bi { display: inline; }
.ocdisc .bi__sub { display: block; }
.ocdisc__line { display: block; }
.ocdisc--left { text-align: left; margin: 0; }
/* ฟอร์ม */
.ocform { margin-top: 10px; }
.ocform__row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ocform__months { display: flex; gap: 8px; align-items: center; }
.ocform__months select { flex: 1; min-width: 0; }
.ocgapchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ocform .field__hint { display: block; font-size: 12px; color: var(--st-muted); font-weight: 400; margin-top: 2px; }
.ocform .field label { color: var(--st-ink); font-weight: 700; }
.ocaccept { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 14px; padding: 12px; border: 1px solid var(--st-line); border-radius: 12px; background: #f6f8f4; font-size: 14px; line-height: 1.5; cursor: pointer; }
.ocaccept input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
.ocaccept > span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.ocaccept .bi__sub { display: block; }
.ocform__actions { margin-top: 8px; }
.ocform__next { text-align: center; margin: 8px 0 0; }
.ocform__recap { margin-bottom: 12px; }
.ocform__back { font-weight: 700; color: var(--st-green); }
.ocform .photobox { margin-top: 4px; }
/* หน้าสวน */
.ocdetail { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden; }
.ocgal__main { position: relative; display: block; aspect-ratio: 16 / 9; background: #c5dfcc; max-height: 420px; overflow: hidden; }
.ocgal__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocgal__empty { display: flex; align-items: center; justify-content: center; color: var(--st-green); }
.ocgal__empty .icon { width: 56px; height: 56px; opacity: .6; }
.ocgal__count { top: auto; left: auto; right: 12px; bottom: 12px; }
.ocgal__thumbs { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; }
.ocgal__thumbs a { flex: none; width: 72px; height: 54px; border-radius: 8px; overflow: hidden; background: #eef1ec; }
.ocgal__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocdetail__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ocdetail__name { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.25; }
.ocdetail__area { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--st-muted); }
.ocdetail__area .icon { width: 15px; height: 15px; }
.ocdetail__area .bi { display: inline; }
.ocdetail__desc { margin: 0; font-size: 15px; line-height: 1.55; }
.ocbadges { display: flex; flex-wrap: wrap; gap: 6px; }
.ocbadge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; background: #eef1ec; color: var(--st-muted); }
.ocbadge .bi__sub { font-size: .85em; }
.ocbadge--variety { background: #eaf3ec; color: var(--st-green); }
.ocbadge--has { background: var(--st-yel-soft); color: var(--st-yel); }
.ocbadge--applying { background: #e6f0fa; color: #1d4e89; }
.ocbadge a { font-weight: 600; text-decoration: underline; }
.ocfacts { margin: 0; background: #fff; border: 1px solid var(--st-line); border-radius: 12px; padding: 4px 14px; }
.ocfact { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eef1ec; font-size: 14px; }
.ocfact:first-child { border-top: 0; }
.ocfact dt { color: var(--st-muted); margin: 0; }
.ocfact dt .bi__sub { display: block; }
.ocfact dd { margin: 0; font-weight: 600; text-align: right; }
.ocfact dd a { color: var(--st-green); font-weight: 600; }
.ocsec__h { margin: 0 0 8px; font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.occontact { background: #f6f8f4; border-radius: 12px; padding: 12px 14px; scroll-margin-top: 72px; }
.occontact p { margin: 0; font-size: 14px; }
.occontact__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.occontact__btns .ocbtn { flex: 1 1 200px; }
.ocmine { border: 1px solid var(--st-line); border-radius: 12px; padding: 12px 14px; }
.ocmine__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 0; }
.ocmine__row + .ocmine__row { border-top: 1px solid #eef1ec; }
.ocmine__row--off { opacity: .7; }
.ocmine__body { flex: 1 1 200px; font-size: 14px; }
.ocmine__body .bi { display: inline; }
.ocmine__price { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--st-green); }
.ocmine__form { margin: 0; }
.ocmine__row .octag { position: static; display: inline-block; margin-left: 4px; }
.ocoffer { background: #fff; border: 2px solid var(--st-green); border-radius: 14px; padding: 14px; scroll-margin-top: 72px; }
.ocoffer--closed { border-style: dashed; border-color: #c9d2c6; color: var(--st-muted); }
.ocoffer--closed p { margin: 0; text-align: center; }
.ocoffer__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ocoffer__lbl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.ocoffer__lbl input, .ocoffer__lbl select {
height: 46px; border: 1px solid #c9d2c6; border-radius: 10px; padding: 0 12px; font: inherit; font-weight: 600; font-size: 16px; background: #fff; color: var(--st-ink); width: 100%;
}
.ocoffer__lbl input[name="price"] { font-weight: 700; font-size: 18px; }
.ocoffer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ocoffer__grid .ocoffer__lbl:last-child { grid-column: 1 / -1; }
@media (min-width: 560px) { .ocoffer__grid { grid-template-columns: 1fr 1fr 1fr; } .ocoffer__grid .ocoffer__lbl:last-child { grid-column: auto; } }
.ocoffer__hint { text-align: center; margin: 0; }
.ocoffer__hint .bi { display: inline; }
.ocowner { margin: 0; }
.ocreport { margin: 4px 0 0; font-size: 13px; text-align: center; }
.ocreport a { display: inline-flex; align-items: center; gap: 4px; color: #9A3A17; font-weight: 600; min-height: 44px; }
.ocreport .icon { width: 14px; height: 14px; }
/* หน้าเจ้าของสวน */
.ocown { background: var(--st-green); color: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ocown__top { display: flex; align-items: center; gap: 10px; }
.ocown__avatar { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #7a8f5a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ocown__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocown__avatar .icon { width: 24px; height: 24px; }
.ocown__body { flex: 1; min-width: 0; }
.ocown__name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.25; }
.ocown__meta { margin: 2px 0 0; font-size: 13px; color: #cfe6d5; }
.ocown .octag { position: static; display: inline-block; margin-top: 4px; }
.ocown__edit { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--st-green-2); color: #fff; display: flex; align-items: center; justify-content: center; }
.ocown__edit .icon { width: 20px; height: 20px; }
.ocstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ocstat { background: var(--st-green-2); border-radius: 12px; padding: 8px; text-align: center; }
.ocstat__num { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.2; }
.ocstat__num--gold { color: #f5c842; }
.ocstat__num--on { color: #9fd3ae; }
.ocstat__num--off { color: #f3b8b1; }
.ocstat__lbl { font-size: 12px; color: #cfe6d5; }
.ocstat__lbl .bi__sub { color: #f5c842; }
.ocown__btns { display: none; gap: 8px; }
@media (min-width: 768px) {
.ocown { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 20px; }
.ocown__top { flex: 1 1 320px; }
.ocown__edit { display: none; }
.ocstats { flex: 1 1 300px; }
.ocown__btns { display: flex; flex: 1 1 100%; }
.ocown__name { font-size: 22px; }
}
.ocoffers { display: flex; flex-direction: column; gap: 10px; }
.ocoffers__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ocoffers__head .ocsec__h { margin: 0; }
.ocofferitem { background: #fff; border: 1px solid var(--st-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ocofferitem--best { border: 2px solid var(--st-green); }
.ocofferitem__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ocofferitem__who { min-width: 0; }
.ocofferitem__stall { font-weight: 700; }
.ocofferitem__facts { font-size: 12px; color: var(--st-muted); }
.ocofferitem__facts .bi { display: inline; }
.ocofferitem__price { text-align: right; flex: none; }
.ocofferitem__num { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--st-green); line-height: 1.2; }
.ocofferitem__unit { font-size: 11px; color: var(--st-muted); }
.ocofferitem__note { font-size: 14px; background: #f6f8f4; border-radius: 8px; padding: 8px 10px; }
.ocofferitem__btns { display: flex; gap: 8px; }
.ocofferitem__btns .ocbtn { flex: 1; }
.ocswitch { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 14px; background: #fff; border: 1px solid var(--st-line); border-radius: 14px; }
.ocswitch__text { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.ocswitch__text .bi { display: inline; }
@media (min-width: 768px) { .ocswitch { position: sticky; bottom: 12px; } }
/* ประโยคยาวสองภาษาในหน้าสวน: อีกภาษาตัดคำได้ (.bi__sub ทั่วเว็บเป็น nowrap สำหรับคำสั้น ๆ ในเมนู) */
.ocwarn .bi__sub, .ocdisc .bi__sub, .ocaccept .bi__sub, .ocoffer__hint .bi__sub, .occontact .bi__sub, .ocofferitem__facts .bi__sub,
.ocswitch__text .bi__sub, .ocmine__body .bi__sub, .oc__sub .bi__sub, .ocfact dt .bi__sub, .ocoffer--closed .bi__sub, .ocform .field__hint .bi__sub,
.ocoffers__head .bi__sub, .empty__title .bi__sub, .ocform__next .bi__sub, .ocdetail .ocwarn .bi__sub { white-space: normal; overflow-wrap: anywhere; }
/* ==== งานรอจัดการ /staff/tasks/ (PR ปิดงานใน /staff/, 2026-10-16 — templates/backoffice/tasks.html + _task_*.html) ==== */
.stabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.stab {
flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
border: 1px solid #c9d2c6; background: #fff; color: var(--st-ink); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.stab--on { background: var(--st-green); border-color: var(--st-green); color: #fff; }
.stab__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--st-red); color: #fff; font-size: 12.5px; font-weight: 800; }
.stab__n--zero { background: #eef1ec; color: var(--st-muted); }
.stab--on .stab__n--zero { background: rgba(255, 255, 255, .25); color: #fff; }
.stlist { padding-top: 8px; }
.stask-row { align-items: flex-start; }
.stask-row__head { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; }
.stask-row__head .sact__t { margin-left: auto; }
.stask-row__body { flex: 1 1 100%; min-width: 0; }
.stask-row__t { font-size: 15px; overflow-wrap: anywhere; }
.stask-row__t a:hover { color: var(--st-green); text-decoration: underline; }
.stask-row__msg { margin-top: 4px; padding: 8px 10px; background: #f6f8f4; border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
.stask-row__facts { margin-top: 4px; font-size: 13.5px; color: var(--st-muted); line-height: 1.5; overflow-wrap: anywhere; }
.stask-row__facts b { color: var(--st-ink); }
.stask-row__match { background: var(--st-ok-soft); color: var(--st-green) !important; padding: 0 4px; border-radius: 4px; }
.stask-row__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.stask-row__btns form { margin: 0; display: inline-flex; }
.stask-row__btns .sbtn { min-height: 44px; }
.stask-row__admin { margin-left: auto; font-size: 12.5px; color: var(--st-muted); min-height: 44px; display: inline-flex; align-items: center; }
.stask-row__admin:hover { color: var(--st-green); text-decoration: underline; }
.stask-row__reject > summary { list-style: none; cursor: pointer; }
.stask-row__reject > summary::-webkit-details-marker { display: none; }
.stask-row__reject[open] > summary { opacity: .6; }
.stask-row__rejectform { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stask-row__rejectform .sfx__input { flex: 1 1 200px; min-height: 44px; }
.stabbar__n--zero { display: none; }
.stabbar__n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--st-red); color: #fff; font-size: 11px; font-weight: 800; }
@media (min-width: 768px) {
.stask-row__btns .sbtn { min-height: 38px; }
.stabs { flex-wrap: wrap; overflow: visible; }
}
/* ---- ทางเข้าผู้ใช้ใหม่ (2026-10-16): หน้าเริ่มต้น /start/ (.start*) + หน้า "เสร็จแล้ว คราวหน้าเปิดจากไหน" (.sdone*) + ปุ่มล็อกอินบนหน้าคำเชิญ ---- */
.start { max-width: 520px; margin: 0 auto; padding: 8px 0 24px; }
.start__title { font-size: 24px; font-weight: 800; margin: 6px 0 2px; text-align: center; }
.start__sub { text-align: center; margin: 0 0 18px; font-size: 15px; }
.start__cards { display: flex; flex-direction: column; gap: 12px; }
.startcard {
display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "ico body" "ico btn"; gap: 4px 12px; align-items: center;
padding: 16px 16px 14px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--card); box-shadow: var(--shadow);
color: var(--ink); text-decoration: none; min-height: 96px;
}
.startcard:hover { border-color: var(--green); background: #f7fbf7; }
.startcard__ico { grid-area: ico; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green-soft); color: var(--green-dark); }
.startcard__ico .icon { width: 28px; height: 28px; }
.startcard--buyer .startcard__ico { background: #fff3dd; color: #a35f00; }
.startcard--viewer .startcard__ico { background: #e8eef9; color: #2C5F99; }
.startcard__body { grid-area: body; display: flex; flex-direction: column; gap: 2px; }
.startcard__name { font-size: 19px; font-weight: 800; line-height: 1.2; }
.startcard__hint { font-size: 14px; color: var(--muted); line-height: 1.35; }
.startcard__btn { grid-area: btn; font-weight: 700; color: var(--green-dark); font-size: 15px; }
.start__alt { margin: -4px 0 0 64px; }
.start__have { margin: 18px 0 0; padding: 12px 14px; background: var(--cream); border: 1px solid #efe3bf; border-radius: 12px; font-size: 14px; }
.start__have-h { margin: 0 0 4px; font-weight: 700; }
.start__have-list { margin: 0 0 8px; padding-left: 18px; }
.start__skip { text-align: center; margin: 22px 0 0; }
.start__skip-link { color: var(--muted); font-size: 14px; text-decoration: underline; }
.sdone { max-width: 520px; margin: 0 auto; padding: 8px 0 24px; }
.sdone__check { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px; background: var(--green-soft); color: var(--green-dark); display: flex; align-items: center; justify-content: center; }
.sdone__check .icon { width: 30px; height: 30px; }
.sdone__title { font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 4px; }
.sdone__lead { text-align: center; margin: 0 0 18px; font-size: 15px; }
.sdone__ways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sdone__way { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.sdone__num { width: 32px; height: 32px; border-radius: 50%; background: var(--green-dark); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sdone__body { min-width: 0; }
.sdone__h { margin: 4px 0 8px; font-weight: 700; font-size: 15px; }
.sdone__btn { margin: 0; text-decoration: none; }
.sdone__form { margin: 0; }
.sdone__hint { margin: 8px 0 0; }
.sdone__chat { margin: 0; }
.sdone__bubble { display: inline-block; background: #e9f7ec; border: 1px solid #bfe3c8; border-radius: 16px 16px 16px 4px; padding: 8px 14px; font-weight: 700; font-size: 16px; }
.sdone__link { display: flex; gap: 8px; align-items: center; }
.sdone__url { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fafcfa; color: var(--ink); }
.sdone__copy { white-space: nowrap; padding: 10px 14px; margin: 0; }
.sdone__go { margin: 18px 0 0; }
.login__btn--big { min-height: 60px; font-size: 18px; }
.login__btn--small { min-height: 44px; font-size: 15px; font-weight: 600; }
.login__form--minor { max-width: 320px; margin-left: auto; margin-right: auto; }
.mginvitepage__login { margin: 14px 0 6px; }