:root {
  /* --muted เดิม #6b7280 วัดได้ 4.3:1 บนพื้น #f4f5f8 ไม่ผ่าน 4.5:1 (audit 31 ต.ค. 2026) → เข้มขึ้นหนึ่งขั้น */
  --bg: #f4f5f8; --card: #fff; --text: #111827; --muted: #5b6472; --dim: #c0c5ce; --line: #e8eaef; --soft: #f8f9fb;
  --accent: #1d4ed8; --accent-soft: #e8efff;
  --good: #047857; --good-soft: #e3f6ee; --warn: #b45309; --warn-soft: #fdf2e0; --bad: #b91c1c; --bad-soft: #fde8e8;
  /* แหล่งข้อมูล: CRM ร้าน = น้ำเงิน (สีหลักของระบบ) · Meta = ม่วง · คำนวณร่วม = เทา */
  --crm: #1d4ed8; --crm-soft: #eef3ff; --meta: #7c3aed; --meta-soft: #f3eeff; --both: #475467; --both-soft: #f1f3f6;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1016; --card: #151a22; --text: #e8ebf0; --muted: #9aa3b5; --dim: #4b5363; --line: #252c38; --soft: #1a2029;
    --accent: #7aa2ff; --accent-soft: #1c2a4a;
    --good: #4ade9b; --good-soft: #12301f; --warn: #fbbf5a; --warn-soft: #36290f; --bad: #f87b7b; --bad-soft: #3a1717;
    --crm: #7aa2ff; --crm-soft: #1a2440; --meta: #c4a6ff; --meta-soft: #2a1f44; --both: #aab2c0; --both-soft: #1e242e;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 "IBM Plex Sans Thai", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
h1, h2 { margin: 0; letter-spacing: -.01em; }
code { font-size: 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.zero { color: var(--muted); }       /* ค่าศูนย์/ไม่มีข้อมูล: เงียบกว่าแต่ยังอ่านออก (เดิมใช้ --dim วัดได้ 1.7:1) */
.err { color: var(--bad); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ส่วนหัว */
.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 16px; align-items: center; padding: 10px 24px;
       background: var(--card);   /* เคยโปร่ง 88% เห็นแท็บลอดหัวตอนเลื่อน (ภาพ audit 31 ต.ค. 2026) */ border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; }
.brand div { display: flex; flex-direction: column; line-height: 1.2; }
.brand small { color: var(--muted); font-size: 12px; }
.logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; }
.logo svg { width: 18px; height: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; cursor: default; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.logout { margin-left: auto; color: var(--muted); font-size: 13px; padding: 8px 0; }   /* padding ให้พื้นที่กดพอ */
.logout:hover { color: var(--text); }

main { max-width: 1240px; margin: 0 auto; padding: 24px; }
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.page-head h1 { font-size: 24px; font-weight: 700; }
.page-head p { margin: 2px 0 0; }

/* ตัวกรอง */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input, select, button { font: inherit; font-size: 13px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.filters > button, .login button { background: var(--accent); color: #fff; border: 0; padding: 0 16px; font-weight: 600; cursor: pointer; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; }
.seg a, .seg button { height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 0; border-radius: 6px;
                      background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg a:hover, .seg button:hover { color: var(--text); }
.seg .on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.seg em { font-style: normal; font-size: 11px; background: var(--bad-soft); color: var(--bad); border-radius: 99px; padding: 0 6px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px;
             background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; }
.btn-ghost svg { width: 16px; height: 16px; color: var(--muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* แจ้งเตือน */
.alert { display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--radius);
         background: var(--warn-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.alert svg { color: var(--warn); flex: none; margin-top: 1px; }
.alert p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.alert.info { background: var(--both-soft); border-color: color-mix(in srgb, var(--both) 30%, transparent); }
.alert.info svg { color: var(--both); }

/* ป้ายแหล่งข้อมูล — "ตัวเลขนี้มาจากฝั่งไหน" ต้องเห็นในครึ่งวินาที: สี + ตัวอักษร ไม่ใช่สีอย่างเดียว */
.src { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 0 6px; border-radius: 4px; font: 600 10px/16px inherit; font-family: inherit;
       letter-spacing: .02em; text-transform: uppercase; font-style: normal; }
.src.crm { background: var(--crm-soft); color: var(--crm); }
.src.meta { background: var(--meta-soft); color: var(--meta); }
.src.both { background: var(--both-soft); color: var(--both); }
.kpi.hero .src { background: rgba(255, 255, 255, .22); color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend i.crm { background: var(--crm); } .legend i.meta { background: var(--meta); } .legend i.both { background: var(--both); }

/* ตัวเลขสรุป */
.kpis { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
       padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi > span { color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi.hero { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7c3aed)); color: #fff; border: 0; }
.kpi.hero > span, .kpi.hero small { color: rgba(255, 255, 255, .9); }
.kpi.hero b { font-size: 30px; }
.meter { height: 6px; margin: 8px 0 2px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.meter i { display: block; height: 100%; background: #fff; border-radius: inherit; }
.tone-good { color: var(--good); } .tone-warn { color: var(--warn); } .tone-bad { color: var(--bad); }

/* ตาราง */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 16px; font-weight: 600; }
.card-head h2 .muted { font-weight: 400; }
.card-head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--soft); }
th { background: var(--soft); font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
th[data-s] { cursor: pointer; user-select: none; }
th[data-s]:hover { color: var(--text); }
th.sorted { color: var(--text); }
th.sorted::after { content: " ↓"; } th.sorted.asc::after { content: " ↑"; }
/* แถวหัวกลุ่ม: แถบสีบน + พื้นอ่อนของกลุ่ม ไล่ลงมาถึงคอลัมน์ลูกให้ตาเชื่อมได้ */
thead .groups th { padding: 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-align: center; background: var(--card); }
thead .groups th.g { border-top: 3px solid; }
thead .groups th.g span { display: inline-block; padding: 1px 8px; border-radius: 99px; }
th.g.crm, th.crm { color: var(--crm); } th.g.crm span { background: var(--crm-soft); }
th.g.meta, th.meta { color: var(--meta); } th.g.meta span { background: var(--meta-soft); }
th.g.both, th.both { color: var(--both); } th.g.both span { background: var(--both-soft); }
th.crm, th.meta, th.both { background: var(--card); }
th.sorted.crm, th.sorted.meta, th.sorted.both { text-decoration: underline; text-underline-offset: 4px; }
td.meta { background: color-mix(in srgb, var(--meta-soft) 45%, transparent); }
td.both { background: color-mix(in srgb, var(--both-soft) 55%, transparent); }
.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: 48px; }

.ad { display: flex; gap: 12px; align-items: center; min-width: 260px; max-width: 460px; }   /* 300 ทำตารางกว้าง 1204 เกินการ์ด 1190 ที่จอ 1280–1440 → เลื่อนข้าง 14px คอลัมน์ขวาชิดขอบ (audit 12 พ.ย. 2026) */
.thumb { position: relative; flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
         display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meta { min-width: 0; }
.title { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta small { color: var(--muted); font-size: 12px; }
.sub { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.lost { display: block; color: var(--warn); font-size: 11px; margin-top: 2px; }
.id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 0 6px; margin-right: 4px; }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.off { background: var(--both-soft); color: var(--muted); }   /* เดิมอ้าง --border ที่ไม่มีอยู่จริง → ป้ายไม่มีพื้น (audit 12 พ.ย. 2026) */

.rev { position: relative; min-width: 110px; }
.rev .bar { position: absolute; right: 14px; bottom: 8px; height: 3px; border-radius: 99px; background: var(--accent); opacity: .5; max-width: calc(100% - 28px); }
.roas { display: inline-block; min-width: 52px; text-align: center; padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.roas.good { background: var(--good-soft); color: var(--good); }
.roas.warn { background: var(--warn-soft); color: var(--warn); }
.roas.bad { background: var(--bad-soft); color: var(--bad); }

.note { font-size: 12px; margin-top: 16px; }
.note p { margin: 4px 0; }

/* เข้าสู่ระบบ */
.center { display: grid; place-items: center; min-height: 100vh; padding: 16px;
          background: radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%), var(--bg); }
.card.login { padding: 32px 28px; width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; overflow: visible; }
.card.login .logo { width: 44px; height: 44px; border-radius: 12px; }
.card.login .logo svg { width: 22px; height: 22px; }
.card.login h1 { font-size: 22px; font-weight: 700; }
.card.login p { margin: -8px 0 4px; }
.card.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.card.login input { height: 40px; font-size: 14px; }
.card.login button { height: 40px; font-size: 14px; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi.hero { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  /* มือถือ: ปุ่ม ≥44px, ช่องกรอก 16px กัน iOS ซูม, ตัวกรองเรียงเป็นแถวเต็ม (audit 31 ต.ค. 2026: ปุ่มเล็ก 10 จุด, "–" ลอยเดี่ยว) */
  input, select, button, .btn-ghost { height: 44px; font-size: 16px; }
  .seg { width: 100%; }
  .seg a, .seg button { flex: 1; justify-content: center; height: 44px; font-size: 14px; }
  .filters { width: 100%; }
  .filters .dates { display: flex; gap: 8px; align-items: center; width: 100%; }
  .filters .dates input { flex: 1; min-width: 0; }
  .filters select { flex: 1; }
  .filters > button { min-width: 88px; }
  .logout { padding: 12px 0 12px 12px; }
  /* แท็บกรองเคยดัน CSV ล้นการ์ดไป 160px (การ์ด overflow:hidden → กดไม่ได้เลยบนมือถือ, audit 12 พ.ย. 2026) → แท็บลงแถวของตัวเอง เลื่อนข้างได้ */
  .card-head .tools { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .card-head .tools .seg { order: 3; flex: 1 1 100%; overflow-x: auto; }
  .card-head .tools .seg button { flex: 0 0 auto; }
  .card.login input, .card.login button { height: 44px; font-size: 16px; }
}
@media (max-width: 1100px) {
  /* iPad แนวตั้ง/แนวนอน (820/1024): ตาราง 9 คอลัมน์กว้างกว่าจอเล็กน้อย → คอลัมน์แอดเกาะซ้ายตอนเลื่อน มีเงาบอกว่าเลื่อนได้ (ภาพ audit 1 พ.ย. 2026) */
  #ads td:first-child, #ads th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }   /* เฉพาะตารางแอด — เดิมติดตารางหน้า diag ไปด้วย */
  tr.row.open td:first-child { background: var(--soft); }
  .ad { max-width: 320px; }
}
@media (max-width: 640px) {
  .top { padding: 10px 16px; }
  .top .pill { display: none; }
  main { padding: 16px; }
  .page-head h1 { font-size: 20px; }
  .kpi b { font-size: 22px; }
  .kpi.hero b { font-size: 26px; }
  /* คอลัมน์แอดเกาะซ้ายเคยกิน 249 จาก 326px เหลือที่ดูตัวเลขแค่ 77px (audit 12 พ.ย. 2026) → บีบเหลือ ~200 และย้ายรายละเอียดรองไปแถวกาง */
  .ad { min-width: 0; width: 188px; max-width: 188px; gap: 6px; }
  .thumb { width: 44px; height: 44px; }
  .stack { width: 40px; } .stack img:nth-child(n+2) { display: none; }
  .ad .lost, .ad .id { display: none; }
  #ads th, #ads td { padding: 10px 8px; }
  #ads tr.child td:first-child { padding-left: 12px; }
  .mix-text { min-width: 0; }
}

/* กราฟรายวัน — สองชุดข้อมูลหน่วยบาทเหมือนกันจึงใช้แกนเดียว · สีคู่ผ่าน validate_palette (light #1d4ed8/#ea580c · dark #4f83e8/#d9701f) */
:root { --chart-rev: #1d4ed8; --chart-spend: #ea580c; }
@media (prefers-color-scheme: dark) { :root { --chart-rev: #4f83e8; --chart-spend: #d9701f; } }
.chart-card { margin-bottom: 20px; }
.chart { position: relative; padding: 8px 12px 4px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; fill: none; stroke: none; }   /* กฎ svg ทั่วไปด้านบน (20px, stroke) เป็นของไอคอน */
.chart svg:focus-visible { outline: 2px solid var(--accent-soft); border-radius: 6px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); stroke: none; font-size: 11px; font-family: inherit; }
.chart .bar-rev { fill: var(--chart-rev); }
.chart .line-spend { fill: none; stroke: var(--chart-spend); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot-spend { fill: var(--chart-spend); stroke: var(--card); stroke-width: 2; }
.chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart .tip { position: absolute; top: 12px; z-index: 2; pointer-events: none; min-width: 150px; padding: 8px 10px; border-radius: 8px;
              background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(16, 24, 40, .12); font-size: 12px; }
.chart .tip div { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.chart .tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .tip span { color: var(--muted); }
.chart .tip .key { width: 12px; height: 2px; border-radius: 2px; }
.chart .tip .key.c-rev { background: var(--chart-rev); height: 8px; width: 8px; border-radius: 2px; }
.chart .tip .key.c-spend { background: var(--chart-spend); }
.chart-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.chart-legend .sw.c-rev {   /* ไม่ใช้ .rev — ชนกับเซลล์ยอดจริงในตาราง */ background: var(--chart-rev); }
.chart-legend .sw.c-spend { height: 3px; width: 14px; background: var(--chart-spend); }
.chart-table summary { cursor: pointer; padding: 6px 18px 10px; font-size: 12px; }
.chart-table table { font-size: 13px; }
.tag.neutral { background: var(--both-soft); color: var(--both); }
td.crm { background: color-mix(in srgb, var(--crm-soft) 35%, transparent); }
#view .muted { font-size: 11px; }

/* ส่วนต่างเทียบช่วงก่อน (▲▼) · ระดับความสนใจ · แถวรายละเอียด · ความแม่น — 1 พ.ย. 2026 เอเจนซี่ต้องเช็คก่อน/หลังโยกงบ */
.delta { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 600; vertical-align: 2px; white-space: nowrap;
         background: var(--both-soft); color: var(--both); }
.delta.good { background: var(--good-soft); color: var(--good); }
.delta.bad { background: var(--bad-soft); color: var(--bad); }
.kpi b .delta { font-size: 12px; vertical-align: 6px; }
.kpi.hero b .delta { background: rgba(255, 255, 255, .22); color: #fff; }
.kpi small .delta { font-size: 10px; vertical-align: 1px; }
/* .delta.good/.bad เจาะจงกว่า td .delta → พื้นเขียว/แดงเต็มความกว้างช่องโผล่กลับมาทุกแถว (audit 12 พ.ย. 2026) ในตารางใช้สีตัวอักษรอย่างเดียวพอ */
td .delta, td .delta.good, td .delta.bad { display: block; margin: 1px 0 0; padding: 0; background: none; text-align: right; }
.cmp-note { font-size: 12px; color: var(--muted); }
/* ระดับความสนใจ: แรง→เบา = น้ำเงินเข้ม→อ่อน ส้ม(ติดราคา) เทา(ถามผ่านๆ) — มีช่องว่าง 2px คั่น และ title/รายการข้อความเสมอ */
/* แถบเป็นปุ่ม: กดแล้วกางรายละเอียด (ผู้ใช้ 1 พ.ย. 2026: "เห็นแท่งหลายสีแต่คลิกดูไม่ได้") · ความหมายสีมีคำกำกับใต้แถบ + legend บนหัวตารางเสมอ */
.mix { display: flex; gap: 2px; height: 6px; width: 64px; margin: 4px 0 0 auto; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: none; cursor: pointer; }
.mix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mix-text { white-space: normal; max-width: 150px; min-width: 96px; margin-left: auto; line-height: 1.4; }
.mix-text span { display: inline-block; white-space: nowrap; }   /* ตัดบรรทัดระหว่างรายการเท่านั้น ไม่ตัดกลางคำ */
.mix-text em { font-style: normal; }
.lv-legend { width: 100%; font-size: 12px; }
.lv-legend .dotlv { margin-right: 4px; }
.mix i { display: block; border-radius: 2px; }
.lv-bought { background: var(--good); } .lv-hot { background: var(--crm); } .lv-missed_sold { background: color-mix(in srgb, var(--crm) 45%, var(--card)); }
.lv-price_silent { background: #ea580c; } .lv-casual { background: var(--dim); }
.dotlv { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.warn-t { color: var(--warn); } .good-t { color: var(--good); }
.legend .acc { margin-left: auto; }
.legend .acc b { font-weight: 600; color: var(--text); }
th .sub { display: inline; margin-left: 3px; font-size: 10px; font-weight: 500; color: var(--muted); }   /* inline ไม่งั้นลูกศรเรียงตกบรรทัด */
.expand { flex: none; width: 28px; height: 28px; padding: 0; margin: 0 -8px 0 -6px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.expand svg { width: 16px; height: 16px; transition: transform .15s; }
.expand:hover { background: var(--soft); color: var(--text); }
.expand[aria-expanded="true"] svg { transform: rotate(90deg); }
tr.row { cursor: pointer; }
tr.row.open td { border-bottom: 0; background: var(--soft); }
tr.detail td { background: var(--soft); padding: 4px 18px 16px 52px; }
tr.detail:hover { background: var(--soft); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; font-size: 13px; }
.detail-grid > div > b { display: block; margin-bottom: 4px; font-weight: 600; }
.detail-grid p { margin: 4px 0; }
.detail-grid .mix { width: 100%; height: 8px; margin: 2px 0 6px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { line-height: 1.6; }
ul.plain li b { font-weight: 600; }
/* แคมเปญ = แถวหัวกลุ่ม (เข้มกว่า มีรูปแอดซ้อน 3 รูปบอกว่าข้างในมีอะไร) · แอด = แถวลูก ร่นเข้า มีเส้นซ้าย */
tr.camp td { background: color-mix(in srgb, var(--accent-soft) 40%, var(--card)); border-top: 2px solid var(--line); }
tr.camp .title { font-weight: 700; font-size: 15px; }
tr.camp.open td { background: color-mix(in srgb, var(--accent-soft) 60%, var(--card)); }
.fold { flex: none; width: 28px; height: 28px; padding: 0; margin: 0 -4px 0 -6px; border: 0; border-radius: 6px; background: none; color: var(--accent); cursor: pointer; display: grid; place-items: center; }
.fold svg { width: 18px; height: 18px; transition: transform .15s; }
.fold:hover { background: var(--accent-soft); }
.fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.stack { position: relative; flex: none; width: 62px; height: 44px; }
.stack img, .stack i { position: absolute; top: 2px; width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 2px solid var(--card); background: var(--soft); }
.stack img:nth-child(1), .stack i { left: 0; z-index: 3; } .stack img:nth-child(2) { left: 11px; z-index: 2; } .stack img:nth-child(3) { left: 22px; z-index: 1; }
tr.child td:first-child { padding-left: 34px; box-shadow: inset 3px 0 0 var(--accent-soft); }
tr.child .title { font-weight: 500; }
tr.child + tr.detail td { padding-left: 70px; }
/* รูปโฆษณากดได้ · โลโก้เพจ (Meta ให้แค่นี้สำหรับบูสต์โพสต์ข้อความ) จางลงและติดป้าย */
.thumb[role=button] { cursor: zoom-in; }
.thumb[role=button]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thumb.logo img { opacity: .5; }
.thumb.logo::after { content: 'โพสต์'; position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 4px; background: rgba(17, 24, 39, .7); color: #fff; font-size: 9px; line-height: 14px; }
#lb { border: 0; border-radius: 14px; padding: 0; width: min(92vw, 640px); background: var(--card); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
#lb::backdrop { background: rgba(0, 0, 0, .6); }
#lb img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #0d1016; }
.lb-meta { padding: 12px 16px 16px; font-size: 13px; }
.lb-meta b { display: block; font-weight: 600; }
.lb-meta small { display: block; color: var(--muted); margin-top: 2px; }
.lb-meta a { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 500; }
.lb-note { margin: 8px 0 0; color: var(--muted); }
#lb img[hidden], .lb-prev[hidden] { display: none; }
.lb-prev { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 12px 0 4px; background: #0d1016; }
.lb-prev iframe { border: 0; max-width: 100%; max-height: 70vh; background: #fff; border-radius: 8px; }
.lb-wait { margin: 0; padding: 24px 16px; color: #cbd5e1; font-size: 13px; text-align: center; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; }
.lb-actions a { margin-top: 0; }
.lb-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.lb-btn:hover { border-color: var(--accent); color: var(--accent); }
.lb-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(17, 24, 39, .6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 800px) {
  .expand, .fold { width: 44px; height: 44px; margin: 0 -12px 0 -10px; }
  /* แถวรายละเอียดบนมือถือ: ตารางกว้างกว่าจอ → ให้ช่องนี้กว้างเท่าจอและเกาะซ้ายตามการเลื่อน ไม่งั้นคอลัมน์ขวาถูกตัด */
  tr.detail td { display: block; position: sticky; left: 0; width: calc(100vw - 34px); box-sizing: border-box; }
  td .delta { font-size: 10px; }
  tr.detail td { padding-left: 16px; }
}

/* มือถือ (≤640): ตาราง 9 คอลัมน์เลื่อนแนวนอนเห็นตัวเลขทีละคอลัมน์ → แต่ละแถวเป็นการ์ด: ชื่อแอดเต็มกว้าง + ตัวเลข 8 ช่องเป็นตาราง 3 คอลัมน์ มีป้ายกำกับจาก data-l
   แถวยังเป็น <tr> เดิม — กรอง/เรียง/พับ/กางใน JS ทำงานเหมือนเดิม · หัวตารางซ่อน จึงเรียงผ่าน .msort */
.msort { display: none; }
@media (max-width: 640px) {
  .msort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
  .msort select { height: 44px; font-size: 16px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); max-width: 190px; }
  #ads, #ads tbody { display: block; }
  #ads thead { display: none; }
  #ads tr.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
  #ads tr.row > td { display: block; padding: 0; border: 0; background: none; box-shadow: none; position: static; min-width: 0; }
  #ads tr.row > td:first-child { grid-column: 1 / -1; padding: 0 0 6px; }
  #ads tr.row > td.n { text-align: left; padding: 6px 0 2px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
  #ads tr.row > td.n::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
  #ads tr.row > td.n .sub { font-weight: 400; }
  #ads tr.camp { background: color-mix(in srgb, var(--accent-soft) 40%, var(--card)); border-top: 2px solid var(--line); }
  #ads tr.child { padding-left: 14px; box-shadow: inset 3px 0 0 var(--accent-soft); }
  #ads tr.row.open { background: var(--soft); border-bottom: 0; }
  #ads tr.camp.open { background: color-mix(in srgb, var(--accent-soft) 60%, var(--card)); }
  #ads .ad { width: auto; max-width: none; }
  #ads .ad .lost { display: block; }
  #ads .mix, #ads .mix-text { margin-left: 0; max-width: none; }
  #ads .rev { min-width: 0; }
  #ads .rev .bar { display: none; }
  #ads tr.detail { display: block; }
  #ads tr.detail > td, #ads tr.child + tr.detail > td { display: block; position: static; width: auto; padding: 4px 12px 14px; }
  #ads td.empty { display: block; }
  #ads tr[hidden] { display: none !important; }   /* ต้องชนะ display:grid/block ข้างบน — JS กรอง/พับ/กางด้วย hidden */
}