/* แต่ละหน้า: เมนู, หน้าแรก, ข่าว, งบการเงิน, Stock Map, Earning Season, หุ้นเด่น, ธนาคารกลาง, นักลงทุน, heat map, พอร์ต, บัญชีผู้ใช้
   (แยกออกจาก index.html ต.ค. 2026 — ลำดับไฟล์มีผล: theme → base → pages → mobile) */
/* ---------- เมนูบนสุด + การสลับหน้า ---------- */
main[hidden] { display: none !important; }
.main-nav { display: flex; gap: 4px; }
.nav-tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.nav-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.nav-tab.active { color: var(--accent-teal); background: color-mix(in srgb, var(--accent-teal) 13%, transparent); font-weight: 600; }
a.wordmark { text-decoration: none; cursor: pointer; }


/* ---------- ปุ่มติดดาว (เพิ่มเข้า watchlist) ---------- */
.star-btn {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 14px;
  cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.star-btn.on { background: color-mix(in srgb, var(--accent-amber) 10%, var(--surface)); }
.star-btn:hover:not(:disabled) { border-color: var(--accent-amber); color: var(--accent-amber); }
.star-btn.on { color: var(--accent-amber); border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent); }
.star-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- หน้าหลัก ---------- */
main#viewHome { max-width: 1200px; }
/* หน้าพอร์ตกว้างเท่าหน้าหลัก — ตัวเลขแบบบาทยาว ถ้ากว้าง 980px ปุ่มแก้ไข/ลบจะตกขอบตาราง */
main#viewPortfolio, main#viewInvestors { max-width: 1200px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.home-grid > .card { margin-bottom: 16px; }
/* กล่องข่าว (ยังไม่มีข้อมูล) สูงเท่าภาพรวมตลาด */
.home-news { display: flex; flex-direction: column; }
.home-news-body { flex: 1 1 auto; display: flex; }
.home-news-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-secondary); font-size: 13px;
  text-align: center; padding: 24px;
}
.home-news-icon { font-size: 26px; opacity: 0.6; }
/* แสดงพอดี 6 ข่าวล่าสุด ข่าวที่เหลือเลื่อนดูในกล่อง: แถวสูงอย่างน้อย 85px (รูป 64 + ระยะบนล่าง 20 + เส้นคั่น 1)
   และยืดให้ 6 แถวเต็มความสูงกล่องพอดีเมื่อการ์ดภาพรวมตลาดข้างๆ สูงกว่า (100cqh = ความสูงกล่องข่าว) */
.home-news-body { flex: 1 1 0; min-height: calc(85px * 6); container-type: size; overflow-y: auto; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.home-news-body .nw-row { flex: 0 0 auto; height: max(85px, calc(100cqh / 6)); align-items: center; }
.nw-more { color: var(--accent-teal); font-size: 12px; text-decoration: none; white-space: nowrap; }
.nw-more:hover { text-decoration: underline; }

/* ---------- ข่าว ---------- */
.nw-row {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 4px; background: transparent; border: none;
  border-bottom: 1px solid var(--border); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.nw-row:last-child { border-bottom: none; }
.nw-row:hover, .nw-row.active { background: var(--surface-hover); border-radius: var(--radius); }
.nw-thumb {
  position: relative; flex: 0 0 auto; width: 96px; height: 64px; border-radius: 4px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-family: var(--font-mono); font-weight: 600; font-size: 18px;
}
.nw-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-row-main { min-width: 0; flex: 1; }
.nw-row-title { font-size: 13.5px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-row-meta { display: block; color: var(--text-dim); font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* block: ไม่งั้นตัดท้ายด้วย … ไม่ได้ ข้อความยาวล้นการ์ด */
/* ผลกระทบของข่าว (เดาจากคำในข่าว): ทั้งตลาด = ส้ม, กลุ่มหุ้น = ฟ้า, หุ้นรายตัว = ตัวอักษร mono */
.nw-imp { margin-left: 6px; }
.nw-imp-m { color: var(--accent-amber); }
.nw-imp-s { color: var(--accent-blue); }
.nw-imp-t { color: var(--text-secondary); font-family: var(--font-mono); }
.nw-impact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; }
.nw-impact-label { color: var(--text-dim); margin-right: 2px; }
.imp-chip { border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 12px; background: transparent; color: var(--text-secondary); font-family: inherit; }
.imp-chip.m { border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent); color: var(--accent-amber); }
.imp-chip.s { border-color: color-mix(in srgb, var(--accent-blue) 45%, transparent); color: var(--accent-blue); }
.imp-chip.t { font-family: var(--font-mono); cursor: pointer; color: var(--accent-teal); border-color: color-mix(in srgb, var(--accent-teal) 40%, transparent); }
.imp-chip.t:hover { background: color-mix(in srgb, var(--accent-teal) 10%, transparent); }
.nw-impact-note { color: var(--text-dim); font-size: 11px; width: 100%; }

/* ---------- หน้าหุ้น: งบการเงิน / ความคาดหวังของนักวิเคราะห์ / ข่าวของหุ้น ---------- */
.fin-summary { background: color-mix(in srgb, var(--accent-teal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent-teal) 25%, transparent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.fin-summary-title { font-size: 12.5px; color: var(--accent-teal); font-weight: 600; margin-bottom: 6px; }
.fin-summary ul { margin: 0; padding-left: 18px; }
.fin-summary li { line-height: 1.8; font-size: 13.5px; }
.fin-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fin-sub-title { font-size: 13px; font-weight: 600; }
.fin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-chip { border: 1px solid var(--border); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit; }
.fin-chip:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.fin-chip.active { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-accent); font-weight: 600; }
.chart-box.fin-chart { height: 280px; }
.fin-legend-note { color: var(--text-dim); font-size: 11px; margin-top: 6px; min-height: 14px; }
.fin-compare { margin-top: 18px; }
.fin-compare-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.fin-compare-head b { color: var(--text-primary); }
.fin-compare-head select { background: var(--bg); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font-family: inherit; font-size: 12.5px; max-width: 100%; }
.pf-table.fin-table { min-width: 0; }
.fin-table td { padding: 8px 10px; }
.fin-table td.fin-name { font-family: var(--font-sans); color: var(--text-primary); }
.fin-explain { font-size: 11px; color: var(--text-dim); white-space: normal; margin-top: 2px; max-width: 260px; }
.fin-all summary { cursor: pointer; color: var(--accent-teal); font-size: 13px; margin-top: 14px; }
.fin-all-wrap { max-height: 440px; overflow: auto; margin-top: 8px; }
.fin-all-wrap th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.fin-all-wrap .fin-sticky { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.fin-note { color: var(--text-dim); font-size: 11.5px; line-height: 1.7; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.fin-msg { color: var(--text-dim); font-size: 13px; padding: 28px 8px; text-align: center; }
.exp-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
/* วันประกาศงบครั้งถัดไป = แถบหัวเต็มความกว้าง แล้วกล่องตัวเลขคาด 4 กล่องเรียงแถวเดียว (เดิม 5 กล่อง กล่องสุดท้ายตกแถวเดียว) */
.exp-box.exp-date { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.exp-box.exp-date .exp-box-label, .exp-box.exp-date .exp-box-sub { margin: 0; }
.exp-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.exp-box-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; }
.exp-box-value { font-family: var(--font-mono); font-size: 17px; font-weight: 600; }
.exp-box-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.55; }
/* ข่าวของหุ้น (หน้าหุ้น): กล่องเลื่อนในตัวบนจอคอม — จอสัมผัสใช้ "แสดงเพิ่ม" แทน (ดู media block จอสัมผัส) */
.nw-list { max-height: calc(100vh - 230px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.nw-list.sn-list { max-height: 560px; }

/* ---------- ปุ่ม Overview (ภาพรวมบริษัท) ---------- */
.ov-btn { background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--accent-teal);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 14px; cursor: pointer; }
.ov-btn:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.ov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 70px; }
.ov-head h3 { margin: 0; }
.ov-ceo { border: 1px solid var(--border); border-left: 3px solid var(--accent-teal); border-radius: var(--radius); padding: 10px 12px; }
.ov-ceo-k { font-size: 11px; color: var(--text-dim); }
.ov-ceo-name { font-size: 16px; font-weight: 600; }
.ov-ceo-sub { font-size: 12px; color: var(--text-secondary); }
.ov-summary { font-size: 14.5px; line-height: 1.8; margin: 0 0 10px; }
.ov-summary.ov-en { font-size: 13.5px; color: var(--text-secondary); }
.ov-points { margin: 0 0 14px; padding-left: 20px; }
.ov-points li { line-height: 1.75; margin-bottom: 4px; }
.ov-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 6px 0 14px; font-size: 13px; }
.ov-facts > div { display: flex; flex-direction: column; }
.ov-fk { font-size: 11px; color: var(--text-dim); }
.ov-fv a { color: var(--accent-teal); text-decoration: none; }

/* ---------- Watchlist จอใหญ่ (ลากเรียง / เอาดาวออก) ---------- */
.wl-home { cursor: pointer; }

.sr-pop.wlm-pop { max-width: 760px; }
.wlm-list { max-height: 65vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.wlm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 4px; border-bottom: 1px solid var(--border); background: var(--surface); }
.wlm-row { position: relative; will-change: transform; }
.wlm-row.dragging { z-index: 2; background: var(--surface-hover); border-radius: var(--radius); border-bottom-color: transparent;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 50%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-teal) 50%, transparent); }
.wlm-list.is-dragging { user-select: none; cursor: grabbing; }
.wlm-handle { background: transparent; border: none; color: var(--text-dim); font-size: 16px; letter-spacing: -2px; padding: 6px 6px;
  cursor: grab; touch-action: none; user-select: none; }
.wlm-row.dragging .wlm-handle { cursor: grabbing; color: var(--accent-teal); }
.wlm-main { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.wlm-main:hover .er-sym { text-decoration: underline; }
.wlm-price { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); font-size: 13px; }
.wlm-star { background: transparent; border: 1px solid color-mix(in srgb, var(--accent-amber) 45%, transparent); border-radius: var(--radius); color: var(--accent-amber);
  font: inherit; font-size: 14px; padding: 4px 9px; cursor: pointer; min-width: 40px; }
.wlm-star.confirm { border-color: var(--negative); color: var(--negative); font-size: 12px; font-weight: 600; }
.wlm-msg { min-height: 18px; font-size: 12px; color: var(--positive); opacity: 0; transition: opacity 0.2s; }
.wlm-msg.show { opacity: 1; }
.wlm-msg.bad { color: var(--negative); }

/* ---------- การ์ดข่าวในหน้าหลัก: กดตรงไหนก็ได้ ---------- */
.home-news { cursor: pointer; }


/* ---------- Stock Map (ล่างสุดของหน้าหลัก): แผนที่สหรัฐฯ (รัฐ) / ไทย (จังหวัด) ทีละประเทศ ---------- */
.sm-box { position: relative; height: 440px; display: flex; align-items: center; justify-content: center; }
.sm-box svg { width: 100%; height: 100%; display: block; }
.sm-region { fill: var(--map-region); stroke: var(--bg); stroke-width: 0.6; vector-effect: non-scaling-stroke; transition: fill 0.6s ease; cursor: default; }
.sm-region:hover { stroke: var(--accent-teal); stroke-width: 1.6; }
.sm-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 9px; font-size: 12px; white-space: nowrap; box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 40%, transparent); z-index: 2; }
.sm-tip .pf-muted { font-size: 11px; }
.sm-note { color: var(--text-dim); font-size: 11px; margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .sm-box { height: 300px; } }

/* ---------- Stock Map จอใหญ่ (#stockmap) ---------- */
.sm-home { cursor: pointer; }

main#viewStockmap { max-width: 1440px; }
.smv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.smv-map-card { padding: 0; overflow: hidden; }
.smv-map { position: relative; height: calc(100vh - 200px); min-height: 460px; overflow: hidden; touch-action: none;
  cursor: grab; background: var(--map-bg); user-select: none; -webkit-user-select: none; }
.smv-map.grabbing { cursor: grabbing; }
.smv-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.smv-map svg { transform-origin: 0 0; will-change: transform; }
.smv-map .sm-region { stroke-width: 0.9; transition: fill 0.6s ease; }
.smv-map .sm-region:hover, .smv-map .sm-region.hl { stroke: var(--accent-teal); stroke-width: 2; }
.smv-sub { fill: none; stroke: color-mix(in srgb, var(--bg) 35%, transparent); stroke-width: 0.5; vector-effect: non-scaling-stroke; display: none; pointer-events: none; }
.show-sub .smv-sub { display: inline; }
.moving .smv-sub, .moving .smv-labels { visibility: hidden; }   /* ระหว่างเลื่อน/ซูม ซ่อนเส้นเขตย่อยกับชื่อ (ลดงานวาด) */
.smv-labels text { fill: color-mix(in srgb, var(--text-primary) 60%, transparent); text-anchor: middle; dominant-baseline: middle; font-family: var(--font-sans);
  font-weight: 600; pointer-events: none; display: none; }
.show-labels .smv-labels text { display: inline; }
.smv-markers { position: absolute; inset: 0; pointer-events: none; }
.smv-pin, .smv-cl { position: absolute; left: 0; top: 0; pointer-events: auto; padding: 0; cursor: pointer; font: inherit; }
.smv-pin { background: none; border: none; color: var(--text-primary); line-height: 1.2; }
.smv-cl { z-index: 1; }
.smv-pin { z-index: 2; }   /* หมุดบริษัทอยู่เหนือวงกลมกลุ่มเสมอ (กดโลโก้ได้แม้มีกลุ่มข้างๆ ซ้อน) */
.smv-pin:hover, .smv-cl:hover { z-index: 5; }
.smv-pin .logo { margin: -16px 0 0 -16px; border-radius: 8px; box-shadow: 0 0 0 2px var(--border-strong), 0 3px 10px color-mix(in srgb, var(--shadow) 55%, transparent); transition: transform 0.15s ease; }
.smv-pin.big .logo { --sz: 42px !important; margin: -21px 0 0 -21px; }
.smv-pin:hover .logo { transform: scale(1.15); }
.smv-pin .logo img { padding: 8%; }   /* โลโก้เต็มกรอบมากขึ้น (เดิมเว้นขอบ 12%) */
.smv-pin[data-tone="up"] .logo { box-shadow: 0 0 0 2px var(--positive), 0 3px 10px color-mix(in srgb, var(--shadow) 55%, transparent); }
.smv-pin[data-tone="down"] .logo { box-shadow: 0 0 0 2px var(--negative), 0 3px 10px color-mix(in srgb, var(--shadow) 55%, transparent); }
.smv-label { position: absolute; top: 19px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; text-align: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; }
.smv-pin.big .smv-label { top: 25px; }
.smv-nm { display: none; color: var(--text-dim); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.smv-pin.big .smv-nm, .smv-pin:hover .smv-nm { display: block; }
.smv-pct { font-family: var(--font-mono); }
.smv-pin[data-tone="up"] .smv-pct { color: var(--positive); }
.smv-pin[data-tone="down"] .smv-pct { color: var(--negative); }
.smv-cl { width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ring) 80%, transparent); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px color-mix(in srgb, var(--shadow) 50%, transparent); transition: transform 0.15s ease; }
.smv-cl:hover { transform: scale(1.1); border-color: #fff; }
.smv-legend { position: absolute; left: 10px; top: 56px; z-index: 7; display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--text-secondary); background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px;
  font-family: var(--font-mono); pointer-events: none; }
.smv-search { position: absolute; left: 10px; top: 10px; z-index: 8; width: min(360px, calc(100% - 70px)); }
.smv-search input { width: 100%; box-sizing: border-box; background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font: inherit; font-size: 13px; padding: 8px 10px; outline: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow) 40%, transparent);
  transition: border-color 0.15s ease; }
.smv-search input:focus { border-color: var(--accent-teal); }
.smv-results { margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 55%, transparent); max-height: 340px; overflow-y: auto; animation: smvPop 0.12s ease; }
@keyframes smvPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.smv-res { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: none;
  border-bottom: 1px solid var(--border); color: var(--text-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.smv-res:last-child { border-bottom: none; }
.smv-res:hover, .smv-res.active { background: var(--surface-hover); }
.smv-res-main { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.smv-res-main b { font-family: var(--font-mono); color: var(--accent-teal); }
.smv-res-sub { display: block; font-size: 11px; color: var(--text-dim); }
.smv-res-empty { padding: 10px; font-size: 12.5px; color: var(--text-dim); }
/* ป้ายรายรัฐ/จังหวัด (โหมดรายรัฐ) — วางบนตัวรัฐ ขนาดล็อกตามที่วัดไว้ (js/stockmap.js smvRegionLabels) */
.smv-rl { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: auto; box-sizing: border-box; padding: 2px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; white-space: nowrap; line-height: 1.15;
  border-radius: 8px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 35%, transparent); color: var(--text-primary); font: inherit; cursor: pointer;
  transition: scale 0.15s ease, border-color 0.15s ease; }
.smv-rl b { font-size: 12px; font-weight: 700; }
.smv-rl-top { display: flex; align-items: baseline; gap: 5px; }
.smv-rl-pct { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.smv-rl-n { font-size: 10px; color: var(--text-secondary); }
.smv-rl:hover { z-index: 5; border-color: var(--accent-teal); }
.smv-rl:active { scale: 0.95; }
.moving .smv-rl { transition: none; }
.smv-labels text.off { display: none !important; }   /* รัฐที่มีป้ายแล้ว ไม่ต้องมีชื่อย่อซ้ำ */
.smv-hint { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 7; pointer-events: none; white-space: nowrap;
  font-size: 12px; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 30%, transparent); }
/* ตอบสนองตอนกด: ยุบเล็กน้อย */
.smv-cl:active { transform: scale(0.92); }
.smv-pin:active .logo { transform: scale(0.92); }
.smv-pin.found { z-index: 6; }
/* หมุดที่ไม่มีที่ว่างพอ -> จุดเล็กสีตาม % (กด/ชี้ได้) ซูมเข้าต่อจะกลายเป็นโลโก้ */
.smv-pin.mini { z-index: 0; }
.smv-pin.mini .logo, .smv-pin.mini .smv-label { display: none; }
.smv-pin.mini::before { content: ""; position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--text-secondary); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bg) 90%, transparent); }
.smv-pin.mini[data-tone="up"]::before { background: var(--positive); }
.smv-pin.mini[data-tone="down"]::before { background: var(--negative); }
.smv-pin.mini:hover .smv-label { display: block; top: 8px; }
.smv-pin.found .logo { animation: smvFound 1s ease-out 4; box-shadow: 0 0 0 3px var(--accent-amber), 0 3px 10px color-mix(in srgb, var(--shadow) 55%, transparent); }
.smv-pin.found .smv-nm { display: block; }
@keyframes smvFound { 0% { box-shadow: 0 0 0 3px var(--accent-amber), 0 0 0 3px color-mix(in srgb, var(--accent-amber) 60%, transparent); }
  100% { box-shadow: 0 0 0 3px var(--accent-amber), 0 0 0 22px color-mix(in srgb, var(--accent-amber) 0%, transparent); } }
.smv-map .smv-markers, .smv-map svg { transition: opacity 0.18s ease; }
.smv-map.fading .smv-markers, .smv-map.fading svg { opacity: 0; }
.smv-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.smv-ctrl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 7; }
.smv-ctrl button { width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); font-size: 17px; cursor: pointer; }
.smv-ctrl button:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.smv-foot { position: absolute; left: 10px; bottom: 8px; right: 10px; display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--text-dim); pointer-events: none; z-index: 7; flex-wrap: wrap; }
.smv-foot span { background: color-mix(in srgb, var(--bg) 75%, transparent); padding: 2px 6px; border-radius: 4px; }
.smv-side { padding: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); min-height: 460px; }
.smv-emoji { font-size: 16px; }
#smvSession { font-size: 14px; margin-bottom: 10px; }
#smvOverall { font-size: 14px; padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
#smvOverall b { font-family: var(--font-mono); font-size: 18px; margin-left: 6px; }
.smv-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; color: var(--text-dim); }
#smvRegions { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.smv-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 70px; gap: 8px; align-items: center; width: 100%; padding: 6px 4px;
  background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text-primary); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; }
.smv-row:hover { background: var(--surface-hover); }
.smv-rname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smv-rn { font-size: 11px; }
.smv-rpct { font-family: var(--font-mono); text-align: right; }
@media (max-width: 900px) {
  .smv-layout { grid-template-columns: minmax(0, 1fr); }
  .smv-map { height: 62vh; min-height: 360px; }
  .smv-side { max-height: none; min-height: 0; }
  #smvRegions { max-height: 50vh; }
}

/* ---------- Earning Season ---------- */
.er-home { cursor: pointer; }
.wl-home, .home-news, .sm-home, .er-home { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s ease; }
.wl-home:hover, .home-news:hover, .sm-home:hover, .er-home:hover {
  transform: translateY(-2px); box-shadow: var(--card-shadow-hover); border-color: color-mix(in srgb, var(--accent-teal) 40%, var(--border)); }

.er-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center;
  width: 100%; padding: 10px 6px; background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.er-row:last-child { border-bottom: none; }
.er-row:hover { background: var(--surface-hover); border-radius: var(--radius); }
.er-stock { display: flex; align-items: center; gap: 10px; min-width: 0; }
.er-id { display: flex; flex-direction: column; min-width: 0; }
.er-sym { font-family: var(--font-sans); font-weight: 700; color: var(--accent-teal); }
.er-mine { color: var(--accent-amber); }
.er-name { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-when { display: flex; flex-direction: column; font-size: 13px; }
.er-sub { font-size: 11.5px; color: var(--text-dim); }
.er-num { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 13px; }
.er-k { font-family: var(--font-sans); font-size: 10.5px; color: var(--text-dim); }
.er-val { font-weight: 600; }
main#viewEarnings { max-width: 1200px; }
.er-layout { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.er-cal-card { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 90px); }
.er-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.er-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.er-wd { text-align: center; font-size: 11px; color: var(--text-dim); padding-bottom: 4px; }
.er-day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-dim);
  font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
}
.er-day.has { background: color-mix(in srgb, var(--accent-teal) 8%, transparent); border-color: color-mix(in srgb, var(--accent-teal) 25%, transparent); color: var(--text-primary); cursor: pointer; }
.er-day.has:hover { border-color: var(--accent-teal); }
.er-day.today { outline: 1px solid var(--accent-amber); outline-offset: -1px; }
.er-day.selected { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-accent); }
.er-day.selected .er-cnt { color: var(--on-accent); }
.er-day.past:not(.has) { opacity: 0.4; }
.er-dn { font-size: 13px; font-weight: 600; line-height: 1; }
.er-cnt { font-size: 10px; font-family: var(--font-mono); color: var(--accent-teal); line-height: 1; }
.er-all { width: 100%; margin-top: 12px; }
.er-more, .cb-ev-more { width: 100%; margin-top: 10px; }
.wl-more { margin-top: 8px; font-size: 12.5px; color: var(--accent-teal); text-align: center; padding: 8px 0 2px; }
.er-all.active { border-color: var(--accent-teal); color: var(--accent-teal); }
.er-list-card { padding-top: 6px; }
.er-group-head { position: sticky; top: 0; background: var(--surface); z-index: 1; padding: 12px 6px 6px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); }
#erList { max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
@media (max-width: 900px) {
  .er-layout { grid-template-columns: minmax(0, 1fr); }
  .er-cal-card { position: static; }
  #erList { max-height: none; }
  .er-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
}

/* ---------- หุ้นเด่นวันนี้ (Top Gainers / Losers / Most Active) ---------- */
.mv-head { flex-wrap: wrap; gap: 8px; }
.mv-ctrls { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 28px; }
.mv-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 72px 74px; gap: 10px; align-items: center;
  width: 100%; padding: 8px 6px; background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.mv-row:hover { background: var(--surface-hover); border-radius: var(--radius); }
.mv-rank { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; text-align: right; }
.mv-num { font-family: var(--font-mono); font-size: 13px; text-align: right; white-space: nowrap; }
.mv-pct { font-weight: 600; }
.mv-vol { color: var(--text-secondary); font-size: 12px; }
.mv-vol small { display: block; color: var(--text-dim); font-family: var(--font-sans); font-size: 10px; }
@media (max-width: 900px) {
  .mv-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 520px) {
  .mv-row { grid-template-columns: 18px minmax(0, 1fr) 64px 66px; }
  .mv-row .mv-price { display: none; }
}

/* ---------- ธนาคารกลาง (แท็บข่าว) ---------- */
.cb-card { margin-bottom: 16px; }
.cb-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 12px; margin-bottom: 18px; }
.cb-card .cb-top { margin-bottom: 0; }
.cb-head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
main#viewCentralbank { max-width: 1200px; }
.cb-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.cb-k { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; margin-bottom: 6px; }
.cb-big { font-size: 22px; font-weight: 600; line-height: 1.25; }
.cb-mono { font-family: var(--font-mono); }
.cb-count { color: var(--accent-amber); font-family: var(--font-mono); font-size: 13px; margin-top: 2px; }
.cb-count.live { color: var(--accent-teal); }
.cb-sub { color: var(--text-secondary); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.cb-tag { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-secondary); margin-left: 4px; vertical-align: 1px; }
.cb-news { display: block; width: 100%; background: transparent; border: none; padding: 0; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; }
.cb-news:hover .cb-news-t { color: var(--accent-teal); }
.cb-about { color: var(--text-secondary); font-size: 12px; line-height: 1.55; margin-top: 6px; }
.cb-meet { display: inline; padding: 0; border: none; background: none; font: inherit; color: var(--accent-teal); cursor: pointer; text-align: left; font-weight: 600; }
.cb-meet:hover { text-decoration: underline; }
.cb-meet-news { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; font-weight: 400; }
.cb-news-t { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-sec { font-size: 13px; font-weight: 600; margin: 4px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cb-sec small { color: var(--text-dim); font-weight: 400; font-size: 11.5px; }
.cb-cal { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 20px; }
.cb-cal .er-day { font-size: 12px; }
.cb-ev-list { max-height: 330px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; border: 1px solid var(--border); border-radius: var(--radius); }
.cb-ev-list .er-group-head { padding: 8px 10px 6px; }
.cb-ev { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cb-ev:last-child { border-bottom: none; }
.cb-ev-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.cb-ev-name { min-width: 0; }
.cb-ev-name small { display: block; color: var(--text-dim); font-size: 11px; }
.cb-ev-desc { display: block; color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.cb-ev-nums { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 12px; text-align: right; }
.cb-ev-nums span { display: flex; flex-direction: column; min-width: 52px; }
.cb-ev-nums i { font-style: normal; font-family: var(--font-sans); font-size: 10px; color: var(--text-dim); }
.cb-ev.bank { background: color-mix(in srgb, var(--accent-amber) 7%, transparent); }
.cb-chart { position: relative; height: 200px; margin-bottom: 14px; }
.cb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cb-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 12.5px; }
.cb-stat b { font-size: 13px; }
.cb-stat .cb-sub { margin-top: 4px; }
.cb-table-wrap { overflow-x: auto; }
.cb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cb-table th { text-align: left; color: var(--text-dim); font-weight: 500; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-table td.num, .cb-table th.num { text-align: right; font-family: var(--font-mono); }
.cb-table tr.chg td:first-child { box-shadow: inset 2px 0 0 var(--accent-amber); }
/* สีของมติใช้ส้ม/เขียวน้ำทะเล ไม่ใช้เขียว/แดง (เขียว/แดงสงวนไว้สำหรับราคาขึ้น/ลง) */
.cb-dec.up { color: var(--accent-amber); }
.cb-dec.down { color: var(--accent-teal); }
.cb-dec.hold { color: var(--text-secondary); }
.cb-votes { color: var(--text-secondary); font-size: 12px; }
.cb-more { width: 100%; margin-top: 10px; }
.cb-foot { color: var(--text-dim); font-size: 11px; margin-top: 12px; line-height: 1.6; }
@media (max-width: 900px) {
  .cb-top { grid-template-columns: minmax(0, 1fr); }
  .cb-cal { grid-template-columns: minmax(0, 1fr); }
  .cb-stats { grid-template-columns: minmax(0, 1fr); }
  .cb-ev { grid-template-columns: 66px minmax(0, 1fr); }
  .cb-ev-time { white-space: nowrap; }
  .cb-ev-nums { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* ---------- ข่าวไฮไลต์ (บนสุดของแท็บข่าว) เลื่อนซ้าย/ขวาแบบเดียวกับภาพรวมตลาด ---------- */
.hl-card { margin-bottom: 16px; }
.hl-hint { color: var(--text-dim); font-size: 11px; }
.mk-slide.hl-slide { flex-direction: row; gap: 18px; align-items: center; cursor: pointer; padding: 2px; }
.hl-slide:hover .hl-title { color: var(--accent-teal); }
.nw-thumb.hl-thumb { width: 260px; height: 146px; font-size: 34px; }
.hl-body { min-width: 0; flex: 1; }
.hl-cat { display: inline-block; font-size: 11px; font-weight: 600; color: var(--on-accent); background: var(--accent-amber); border-radius: 4px; padding: 2px 8px; margin-bottom: 8px; }
.hl-title { font-size: 19px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.15s ease; }
.hl-meta { color: var(--text-dim); font-size: 12px; margin: 8px 0 10px; }
.hl-meta .nw-src { color: var(--accent-teal); }
.hl-body .nw-impact { margin-bottom: 0; }
.hl-msg { color: var(--text-dim); font-size: 13px; text-align: center; padding: 40px 16px; width: 100%; }
.hl-dots { display: flex; gap: 8px; align-items: center; }
.hl-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; cursor: pointer; }
.hl-dot.active { background: var(--accent-amber); border-color: var(--accent-amber); }
.nw-row-meta .nw-src { color: var(--accent-teal); }
.nw-ai-dot { color: var(--accent-amber); margin-left: 4px; }
main#viewNews { max-width: 1200px; }
/* แท็บข่าว: 2 กล่องข้างกัน สูงเท่ากัน (แถวสูงคงที่ 6 แถว) ไม่เลื่อนในกล่อง + การ์ดสรุปข่าวเต็มความกว้างด้านล่าง */
.nw-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.nw-box { display: flex; flex-direction: column; cursor: pointer; margin-bottom: 0; }
.nw-box .card-label-row { flex-wrap: wrap; gap: 8px; }
.nw-box-body { min-height: calc(var(--nw-row-h) * 6); }
.nw-box-body .nw-row { height: var(--nw-row-h); align-items: center; padding-block: 8px; }
.nw-box-body .pfn-list { display: block; }
.nw-box-body .pfn-why { -webkit-line-clamp: 1; }
.nw-box-more { margin-top: auto; padding-top: 12px; color: var(--accent-teal); font-size: 12.5px; text-decoration: none; text-align: right; }
.nw-box:hover .nw-box-more { text-decoration: underline; }
:root { --nw-row-h: 100px; }
.nw-fulllist .nw-row { padding-block: 12px; }
.nw-fulllist.nw-grid, .nw-fulllist .pfn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); column-gap: 18px; }
.nw-fulllist.nw-grid .nw-row:last-child { border-bottom: 1px solid var(--border); }
.nw-back { display: inline-block; color: var(--accent-teal); font-size: 13px; text-decoration: none; margin-bottom: 6px; }
.nw-back:hover { text-decoration: underline; }
.nw-article-card { scroll-margin-top: 80px; }
.nw-article-card.has-article { min-height: calc(100vh - 110px); }   /* เปิดข่าวแล้ว: สูงพอให้เลื่อนขอบบนไปชิดหัวเว็บได้พอดี */
.nw-art-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.nw-art-left .nw-cover { max-height: none; height: auto; object-fit: contain; }   /* รูปเต็มรูป ไม่ครอป */
.nw-art-left .nw-impact { margin-bottom: 0; }
@media (max-width: 900px) {
  .nw-art-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .nw-art-left .nw-impact { margin-bottom: 14px; }
}
.nw-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 14px; display: block; }
.nw-meta { color: var(--text-dim); font-size: 12px; margin-bottom: 8px; }
.nw-meta a { color: var(--accent-teal); text-decoration: none; font-weight: 600; }
.nw-meta a:hover { text-decoration: underline; }
.nw-title { font-size: 20px; line-height: 1.45; margin: 0 0 12px; font-weight: 600; }
.nw-orig { color: var(--text-dim); font-size: 12px; margin: -6px 0 12px; }
.nw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.nw-summary ul { margin: 0 0 14px; padding-left: 20px; }
.nw-summary li { line-height: 1.75; margin-bottom: 6px; font-size: 14.5px; }
.nw-summary strong { color: var(--text-primary); font-weight: 700; }
.nw-why { background: color-mix(in srgb, var(--accent-teal) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent-teal) 30%, transparent); border-radius: var(--radius); padding: 10px 12px; font-size: 13.5px; line-height: 1.7; margin-bottom: 12px; }
.nw-why b { color: var(--accent-teal); }
/* คำศัพท์ยากในบทสรุปภาษาไทย + ความหมายแบบง่าย (จาก AI: glossary_th) */
.nw-gloss { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.nw-gloss-h { font-weight: 650; color: var(--text-secondary); margin-bottom: 6px; }
.nw-gloss dl { margin: 0; }
.nw-gloss dl > div { padding: 5px 0; border-top: 1px dashed var(--border); }
.nw-gloss dl > div:first-child { border-top: 0; }
.nw-gloss dt { display: inline; font-weight: 650; color: var(--text-primary); }
.nw-gloss dt::after { content: " — "; font-weight: 400; color: var(--text-dim); }
.nw-gloss dd { display: inline; margin: 0; color: var(--text-secondary); }
.nw-full { display: inline-block; text-decoration: none; margin: 4px 0 14px; }
.nw-excerpt { color: var(--text-secondary); font-size: 13.5px; line-height: 1.7; margin-bottom: 12px; }
.nw-foot { color: var(--text-dim); font-size: 11.5px; line-height: 1.6; border-top: 1px solid var(--border); padding-top: 10px; }
.nw-foot a { color: var(--accent-teal); text-decoration: none; }
.nw-foot a:hover { text-decoration: underline; }
/* แถวล่าง: watchlist กับ heat map คนละครึ่ง สูงเท่ากัน */
.home-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.home-bottom .card { margin-bottom: 16px; }
.home-bottom #homeHeatmap { height: 250px; }

/* กราฟดัชนีแบบเลื่อนซ้าย/ขวา: track ยาวเท่าจำนวนสไลด์ เลื่อนด้วย translateX */
/* การ์ดยืดลงมาเท่าขอบล่างของคอลัมน์ขวา (grid stretch) แล้วส่งความสูงที่เหลือต่อให้กราฟด้วย flex */
#marketCard { display: flex; flex-direction: column; }
.mk-viewport { overflow: hidden; touch-action: pan-y; user-select: none; flex: 1 1 auto; display: flex; min-height: 0; }
.mk-track { display: flex; transition: transform 0.35s ease; flex: 1 1 auto; width: 100%; }
.mk-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; }
.mk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-name { font-size: 20px; font-weight: 600; }
.mk-open { cursor: pointer; }
.mk-more { font-size: 11.5px; font-weight: 500; color: var(--accent-teal); margin-left: 6px; white-space: nowrap; }
.mk-open:hover .mk-more { text-decoration: underline; }
.mk-meta { color: var(--text-dim); font-size: 11.5px; margin-top: 4px; }
.mk-price-block { text-align: right; }
.mk-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-change { font-family: var(--font-mono); font-size: 13px; margin-top: 4px; color: var(--text-secondary); }
.mk-unit { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-secondary); }
/* canvas วางแบบ absolute: ไม่ให้ขนาดกราฟไปดันความสูงการ์ด ไม่งั้นการ์ดกับกราฟขยายตามกันวนไม่จบ */
.chart-box.mk-chart { height: auto; flex: 1 1 0; min-height: 480px; }
.chart-box.mk-chart canvas { position: absolute; top: 0; left: 0; }
.mk-slide-msg { color: var(--text-dim); font-size: 13px; text-align: center; padding: 120px 20px; }
.mk-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.mk-arrow {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); font-size: 16px; line-height: 1; padding: 5px 12px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mk-arrow:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.mk-arrow:disabled { opacity: 0.3; cursor: default; border-color: var(--border); color: var(--text-secondary); }
.mk-dots { display: flex; gap: 8px; }
.mk-dot {
  border: 1px solid var(--border); background: transparent; border-radius: 999px; cursor: pointer;
  color: var(--text-dim); font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px;
}
.mk-dot.active { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-accent); font-weight: 600; }
.mk-note { color: var(--text-dim); font-size: 11px; margin-top: 10px; text-align: center; }

/* รายการหุ้น (watchlist / พอร์ต) บนหน้าหลัก — กดทั้งแถวเพื่อไปหน้าหุ้นตัวนั้น */
/* watchlist สูงคงที่ = 4 แถว (เกินนั้นเลื่อนดู) ทำให้คอลัมน์ขวาสูงคงที่ -> ภาพรวมตลาดที่ยืดตาม + heat map คงที่ด้วย
   ทุกแถวสูงเท่ากันเสมอ (ไม่ว่าจะมีบรรทัดราคานอกเวลาหรือไม่) จะได้เห็นพอดี 4 แถว */
#homeWatchlist { --ql-row-h: 74px; height: calc(var(--ql-row-h) * 4); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#homeWatchlist::-webkit-scrollbar { width: 6px; }
#homeWatchlist::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
#homeWatchlist .ql-row { height: var(--ql-row-h); }
.ql-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-bottom: 1px solid var(--border); color: inherit;
  padding: 10px 4px; cursor: pointer; text-align: left; font: inherit;
}
.ql-row:last-child { border-bottom: none; }
.ql-row:hover { background: var(--surface-hover); border-radius: var(--radius); }
.ql-left { min-width: 0; }
.ql-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-id { display: flex; align-items: center; gap: 10px; }
.pf-open { cursor: pointer; }
.pf-open:hover .pf-sym { text-decoration: underline; }
.ql-sym { font-family: var(--font-sans); font-weight: 700; color: var(--accent-teal); font-size: 13px; }
.ql-name { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ql-right { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ql-price { font-size: 13px; }
.ql-pct { font-size: 12px; margin-top: 2px; color: var(--text-secondary); }
.ql-err { font-family: var(--font-sans); font-size: 11px; color: var(--negative); white-space: normal; max-width: 160px; }
.ql-empty { color: var(--text-dim); font-size: 12.5px; text-align: center; padding: 18px 8px; line-height: 1.6; }

/* ---------- แท็บนักลงทุน/กองทุน ---------- */
.iv-search-wrap { position: relative; }
.iv-search-wrap input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; outline: none;
}
.iv-search-wrap input:focus { border-color: var(--accent-teal); }
.iv-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow) 45%, transparent);
}
.iv-sg {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: none;
  border-bottom: 1px solid var(--border); color: var(--text-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.iv-sg:last-child { border-bottom: none; }
.iv-sg:hover, .iv-sg.active { background: var(--surface-hover); }
.iv-sg .iv-flag { font-size: 15px; }
.iv-sg .iv-sg-main { flex: 1; min-width: 0; }
.iv-sg .iv-sg-sub { color: var(--text-dim); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-sg-status { color: var(--text-dim); font-size: 12px; padding: 9px 12px; }
.iv-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--accent-teal);
  border: 1px solid color-mix(in srgb, var(--accent-teal) 40%, transparent); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap;
}
.iv-badge.stale { color: var(--accent-amber); border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent); }
.iv-notes { color: var(--text-secondary); font-size: 12px; margin-bottom: 12px; line-height: 1.6; }
.iv-notes:empty { display: none; }
.iv-pf-tabs { margin-bottom: 16px; flex-wrap: wrap; }
.iv-exited { color: var(--text-dim); font-size: 12px; padding: 10px 4px 0; line-height: 1.7; }
.iv-exited:empty { display: none; }
.iv-exited .iv-ex-item { display: inline-block; margin-right: 12px; font-family: var(--font-mono); }
.iv-trades { min-width: 760px; }
.iv-trades td { vertical-align: middle; }
.iv-trades th:nth-child(2), .iv-trades td:nth-child(2), .iv-trades th:nth-child(3), .iv-trades td:nth-child(3) { text-align: left; }
.iv-featured-label { color: var(--text-dim); font-size: 11.5px; margin: 14px 0 8px; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-chip {
  background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary);
  font-family: var(--font-sans); font-size: 12px; padding: 6px 12px; cursor: pointer; text-align: left;
}
.iv-chip:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.iv-chip small { color: var(--text-dim); margin-left: 4px; }
.iv-date {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px; padding: 6px 8px;
}
.iv-table { min-width: 760px; }
.iv-others { color: var(--text-dim); font-size: 12px; padding: 10px 4px 0; }
.iv-others:empty { display: none; }

/* ---------- Heat map (treemap): กล่องวางแบบ absolute ตามตำแหน่งที่คำนวณใน JS ---------- */
.hm-box { position: relative; height: 260px; }
/* หน้าพอร์ต: วงแหวนสัดส่วน (ซ้าย) กับ heat map (ขวา) คนละครึ่ง */
.pf-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.pf-charts .card { margin-bottom: 0; }
.hm-tile {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--bg); border-radius: 3px; padding: 2px; cursor: pointer;
  color: #F4F1EA; font-family: var(--font-mono); text-align: center; line-height: 1.25;
  transition: filter 0.15s ease;
}
.hm-tile:hover { filter: brightness(1.25); outline: 1px solid var(--text-secondary); z-index: 1; }
.hm-sym { font-weight: 700; white-space: nowrap; }
.hm-pct { opacity: 0.9; white-space: nowrap; }
.hm-empty { color: var(--text-dim); font-size: 12.5px; text-align: center; padding: 40px 8px; line-height: 1.6; }
.hm-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; color: var(--text-dim); font-size: 11px; }
.hm-scale { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); }
.hm-scale-bar { width: 140px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--heat-neg), var(--heat-mid), var(--heat-pos)); }

@media (max-width: 900px) {
  /* minmax(0, ...) ไม่ใช่ 1fr เฉยๆ — ไม่งั้นคอลัมน์ขยายตามขนาดกราฟ แล้วกราฟก็ขยายตามคอลัมน์วนไม่จบ */
  /* ซ้อนเป็นแนวเดียว: การ์ดมีระยะขอบล่าง 16px อยู่แล้ว ไม่ต้องมีช่องว่างแนวตั้งของ grid ซ้ำ (ไม่งั้นห่าง 32px) */
  .home-grid, .home-bottom { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .nw-boxes { grid-template-columns: minmax(0, 1fr); }
  .mk-slide.hl-slide { flex-direction: column; align-items: stretch; gap: 12px; }
  .nw-thumb.hl-thumb { width: 100%; height: 150px; }
  .hl-title { font-size: 16.5px; }

  .chart-box.mk-chart { min-height: 260px; }
  .home-news-empty { min-height: 160px; }
  .pf-charts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- หน้าพอร์ตจำลอง ---------- */
.pf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.pf-sub { color: var(--text-secondary); font-size: 13.5px; margin-top: 6px; }
.pf-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pf-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.pf-btn:hover:not(:disabled) { border-color: var(--accent-teal); color: var(--accent-teal); background: var(--surface-hover); }
.pf-btn:focus-visible, .icon-btn:focus-visible, .btn-group button:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 2px; }
.pf-btn:disabled { opacity: 0.5; cursor: default; }
.pf-btn.primary { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-teal) 28%, transparent); }
.pf-btn.primary:hover:not(:disabled) { opacity: 0.9; color: var(--on-accent); background: var(--accent-teal); }

.warn-box {
  display: none;
  color: var(--accent-amber);
  font-size: 12.5px;
  line-height: 1.6;
  background: color-mix(in srgb, var(--accent-amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.warn-box.visible { display: block; }
.warn-box ul { margin: 0; padding-left: 18px; }

.pf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--card-shadow); }
.pf-card-label { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
.pf-card-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-card-sub { font-family: var(--font-mono); font-size: 12px; margin-top: 4px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pf-card-value.pl-up, .pf-card-sub.pl-up { color: var(--positive); }
.pf-card-value.pl-down, .pf-card-sub.pl-down { color: var(--negative); }
.pl-up { color: var(--positive); }
.pl-down { color: var(--negative); }

.pf-form { display: grid; grid-template-columns: 130px 1.2fr 1fr 1.3fr auto; gap: 10px; align-items: end; }
.pf-field label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.pf-field input, .pf-field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
}
.pf-field input:focus, .pf-field select:focus { border-color: var(--accent-teal); }
.pf-hint { color: var(--text-dim); font-size: 11.5px; margin-top: 10px; }
.pf-form-error { margin: 10px 0 0; }

.table-wrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.pf-table th {
  text-align: right; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pf-table td {
  text-align: right; padding: 12px 10px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  vertical-align: top; white-space: nowrap;
}
.pf-table th:first-child, .pf-table td:first-child { text-align: left; }
.pf-table tbody tr:last-child td { border-bottom: none; }
.pf-sym { font-weight: 600; color: var(--accent-teal); }
.pf-mkt { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; margin-left: 6px; }
.pf-name { font-family: var(--font-sans); font-size: 11px; color: var(--text-dim); max-width: 170px; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.pf-sub-line { font-size: 11px; margin-top: 3px; }
.pf-muted { color: var(--text-dim); }
.pf-row-error { text-align: left !important; color: var(--negative); font-family: var(--font-sans); }
.pf-icon-btn {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); font-size: 12px; padding: 3px 8px; cursor: pointer; margin-left: 4px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pf-icon-btn:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.pf-icon-btn.danger:hover { border-color: var(--negative); color: var(--negative); }
.pf-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 28px 12px; display: none; }
/* วัน-เวลาที่ซื้อ (ใต้ชื่อหุ้น) + ส่วนที่แสดงเฉพาะการ์ดมือถือ (จอคอมซ่อน) */
.pf-added { font-family: var(--font-sans); font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.m-only, .pf-chev { display: none; }
/* ประวัติการขาย (หุ้นที่เอาออกจากพอร์ต) */
.pf-sold-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: start;
  padding: 11px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pf-sold-row:last-child { border-bottom: none; }
.pf-sold-row.head { color: var(--text-secondary); font-size: 12px; padding-top: 0; }
.pf-sold-row .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pf-sold-row .pf-name { max-width: none; }
.pf-sold-k { display: none; }
.pf-sold-more { margin-top: 8px; }

/* ---------- ข่าวหุ้นในพอร์ต (แท็บข่าว) ---------- */
#pfnFilter[hidden], #pfnAllFilter[hidden] { display: none; }
#pfnFilter, #pfnAllFilter { flex-wrap: wrap; }
.pfn-cnt { font-family: var(--font-mono); font-size: 11px; opacity: 0.75; }
.pfn-tag.hot { border-color: color-mix(in srgb, var(--accent-amber) 50%, transparent); color: var(--accent-amber); font-weight: 600; }
.pfn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); column-gap: 18px; }
.pfn-list .nw-row { border-bottom: 1px solid var(--border); }
.pfn-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pfn-tag { font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.pfn-tag b { font-family: var(--font-mono); font-weight: 600; margin-right: 4px; color: var(--text-primary); }
.pfn-tag.direct { border-color: color-mix(in srgb, var(--accent-teal) 45%, transparent); color: var(--accent-teal); }
.pfn-tag.indirect { border-color: color-mix(in srgb, var(--accent-blue) 45%, transparent); color: var(--accent-blue); }
.pfn-why { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--text-secondary); margin-top: 5px; line-height: 1.5; }
.nw-row-meta .pfn-tag { margin-left: 6px; font-size: 11px; padding: 0 7px; }
.pfn-note { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; }
.pfn-more { display: block; width: 100%; margin-top: 10px; }
.pfn-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 24px 12px; }
.pfn-empty a { color: var(--accent-teal); }
.chart-box.alloc { height: 260px; }
.pf-disclaimer {
  font-size: 11.5px; line-height: 1.7; color: var(--accent-amber);
  background: color-mix(in srgb, var(--accent-amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent);
  border-radius: var(--radius); padding: 10px 14px;
}

/* 761–900px (iPad แนวตั้ง / หน้าต่างแคบ): โลโก้+เมนู+ค้นหา+ปุ่มภาษา/ธีม ยาวเกินแถวเดียว -> ช่องค้นหาลงแถวสอง */
@media (min-width: 761px) and (max-width: 900px) {
  header { flex-wrap: wrap; row-gap: 10px; }
  .search-wrap { flex-basis: 100%; max-width: none; order: 4; }
}
@media (max-width: 760px) {
  .pf-form { grid-template-columns: 1fr 1fr; }
  /* มือถือ: แถว 1 = โลโก้ + ปุ่มธีม, แถว 2 = เมนู (เลื่อนซ้าย/ขวาได้), แถว 3 = ช่องค้นหา */
  header { flex-wrap: wrap; row-gap: 10px; }
  .wordmark { order: 1; }
  .hd-actions { order: 2; }
  .main-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
  .main-nav::-webkit-scrollbar { display: none; }
  .search-wrap { flex-basis: 100%; max-width: none; order: 4; }
}

@media (max-width: 640px) {
  header { padding: 12px 16px; gap: 10px; }
  .card { padding: 16px; border-radius: 14px; }
  .wordmark { font-size: 13px; }
  main { padding: 20px 16px 60px; }
  .price-block { text-align: left; }
  .ticker-head { flex-direction: column; }
}

/* ---------- ความลื่นไหล: เปลี่ยนหน้า / กดปุ่ม / โหลด / ตัวเลขเปลี่ยน / สลับธีม ---------- */
/* หน้าเฟดขึ้นทุกครั้งที่เปิด (animation เล่นใหม่เมื่อ main เปลี่ยนจาก hidden เป็นแสดง) */
main:not([hidden]) { animation: viewIn 0.32s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ปุ่มยุบเล็กน้อยตอนกด ให้รู้สึกว่ากดติด */
.btn-group button:active, .expand-btn:active, .pf-btn:active:not(:disabled), .mk-arrow:active:not(:disabled),
.fin-chip:active, .iv-chip:active, .icon-btn:active, .nav-tab:active, .refresh-btn:active:not(:disabled), .modal-btn:active,
.ov-btn:active, .star-btn:active:not(:disabled), .pf-icon-btn:active, .smv-ctrl button:active { transform: scale(0.95); }
.er-row:active, .mv-row:active, .ql-row:active, .nw-row:active, .smv-row:active { background: var(--border); }
/* โครงรอข้อมูล (skeleton) แทนวงหมุน: แถบสีเทาที่มีแสงวิ่งผ่าน */
.sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-hover) 40%, var(--surface-2) 80%);
  background-size: 220% 100%; animation: skShine 1.3s ease-in-out infinite; }
@keyframes skShine { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.sk-row:last-child { border-bottom: none; }
.sk-ico { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sk-num { width: 64px; flex: 0 0 auto; }
/* ตัวเลขราคากะพริบเขียว/แดงเมื่อเปลี่ยนตอนอัปเดต */
.flash-up { animation: flashUp 1.1s ease-out; }
.flash-down { animation: flashDown 1.1s ease-out; }
@keyframes flashUp { 0% { background: color-mix(in srgb, var(--positive) 32%, transparent); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: color-mix(in srgb, var(--negative) 32%, transparent); } 100% { background: transparent; } }
.flash-up, .flash-down { border-radius: 4px; }
/* สลับธีม: เปลี่ยนสีแบบค่อยๆ เฉพาะตอนกดสลับ (ใส่ class ชั่วคราว ไม่ให้ transition ถ่วงตอนใช้งานปกติ) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, box-shadow 0.35s ease !important; }
html { scroll-behavior: smooth; }


/* =====================================================================
   จอสัมผัสทุกขนาด (มือถือ แท็บเล็ต iPad) และจอแคบ ≤ 760px: ไม่มีกล่องที่เลื่อนในตัวเองซ้อนในหน้า
   (รวมจอแคบด้วย เพราะเครื่องมือจำลองมือถือบางตัวย่อจออย่างเดียว ไม่ได้บอกว่าเป็นจอสัมผัส)
   เหตุผล: ปัดนิ้วบนกล่องแบบนั้น กล่องจะเลื่อนแทนหน้า -> ผู้ใช้เลื่อนไปดูส่วนอื่นไม่ได้ ("ติด" อยู่ในกล่อง)
   แทนด้วยรายการยาวตามเนื้อหา + ปุ่ม "ดูทั้งหมด/แสดงเพิ่ม" — จอคอม (เมาส์) ยังเป็นกล่องเลื่อนแบบเดิม
   ===================================================================== */
.wl-more, .sn-more { display: none; }

/* ---------- บัญชีผู้ใช้: ปุ่มบนหัวเว็บ / เมนู / หน้าเข้าสู่ระบบ ---------- */
.hd-actions [hidden] { display: none !important; }
.login-btn { width: auto; padding: 0 14px; gap: 7px; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-accent); }
.login-btn:hover { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-accent); opacity: 0.88; }
.login-btn svg { display: none; }
.login-btn:hover svg, .user-btn:hover svg { transform: none; }
.user-btn { width: auto; padding: 0 12px 0 6px; gap: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-teal) 18%, transparent); color: var(--accent-teal); font-size: 12.5px; font-weight: 700; }
.user-avatar.lg { width: 56px; height: 56px; font-size: 24px; }
.user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu { position: absolute; top: calc(100% + 6px); right: 16px; width: min(270px, calc(100vw - 24px)); padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  z-index: 60; animation: popIn 0.18s var(--ease); }
.user-menu[hidden] { display: none; }
.um-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.um-head b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-head small { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.um-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: var(--radius);
  color: var(--text-primary); font-family: var(--font-sans); font-size: 13.5px; text-decoration: none; cursor: pointer; }
.um-item:hover { background: var(--surface-hover); }
.um-item.danger { color: var(--negative); }
.error-msg.ok { color: var(--positive); background: color-mix(in srgb, var(--positive) 8%, transparent); border-color: color-mix(in srgb, var(--positive) 30%, transparent); }
.auth-wrap { max-width: 440px; margin: 0 auto; }
.auth-wrap.wide { max-width: 640px; }
.auth-card { padding: 28px 28px 24px; }
.auth-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.auth-sub { margin: 0 0 20px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.auth-field input { width: 100%; box-sizing: border-box; padding: 11px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-sans); font-size: 14.5px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.auth-field input:focus { border-color: var(--accent-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-teal) 18%, transparent); }
.auth-hint { margin-top: 6px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 68px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--text-secondary); font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; }
.pw-toggle:hover { color: var(--accent-teal); }
/* เงื่อนไขรหัสผ่าน: ขึ้น ✓ สีเขียวทีละข้อเมื่อผ่าน */
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px 12px; font-size: 12px; color: var(--text-dim); }
.pw-rules li { display: flex; align-items: baseline; gap: 6px; }
.pw-rules li::before { content: "○"; flex: 0 0 auto; width: 12px; text-align: center; }
.pw-rules li.ok { color: var(--positive); }
.pw-rules li.ok::before { content: "✓"; font-weight: 700; }
.pw-rules.show-bad li:not(.ok) { color: var(--negative); }
.auth-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 16px; font-size: 13px; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--accent-teal); }
.auth-link { padding: 0; border: 0; background: none; color: var(--accent-teal); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-submit { display: block; width: 100%; padding: 12px; font-size: 14.5px; text-align: center; text-decoration: none; box-sizing: border-box; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-dim); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; }
.google-btn:hover { background: var(--surface-hover); }
.google-btn svg { width: 18px; height: 18px; }
.auth-foot { margin-top: 18px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.auth-legal { margin: 14px 0 0; color: var(--text-dim); font-size: 11.5px; line-height: 1.55; text-align: center; }
.auth-err:empty { display: none; }
.acct-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acct-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.acct-who { flex: 1 1 200px; min-width: 0; }
.acct-email { color: var(--text-secondary); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.acct-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acct-badge { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.acct-badge.ok { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 40%, transparent); }
.acct-badge.warn { color: var(--accent-amber); border-color: color-mix(in srgb, var(--accent-amber) 40%, transparent); }
.acct-inline { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.acct-inline .auth-field { flex: 1 1 220px; margin-bottom: 0; }
.acct-inline .pf-btn { padding: 11px 16px; font-size: 13px; }
.acct-list { margin: 0 0 14px; padding: 0; list-style: none; }
.acct-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.acct-list li:last-child { border-bottom: 0; }
.acct-list .yes { color: var(--positive); font-weight: 600; } .acct-list .no { color: var(--text-dim); }
.acct-danger { border-color: color-mix(in srgb, var(--negative) 35%, var(--border)); }
.acct-danger summary { cursor: pointer; color: var(--negative); font-weight: 600; font-size: 13.5px; }
.pf-btn.danger { background: var(--negative); border-color: var(--negative); color: #fff; font-weight: 600; }
.pf-btn.danger:hover:not(:disabled) { opacity: 0.88; color: #fff; border-color: var(--negative); }
/* ยังไม่ได้เข้าสู่ระบบ: หน้าพอร์ตแสดงการ์ดชวนเข้าสู่ระบบแทนเนื้อหา */
.login-gate { display: none; text-align: center; padding: 44px 24px; }
.gated > .login-gate { display: block; }
.gated > :not(.login-gate) { display: none !important; }
.login-gate h2 { margin: 12px 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.login-gate p { max-width: 460px; margin: 0 auto 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.login-gate .lg-icon { width: 52px; height: 52px; margin: 0 auto; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-teal) 14%, transparent); color: var(--accent-teal); }
.login-gate .lg-icon svg { width: 26px; height: 26px; }
.lg-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lg-actions .pf-btn { padding: 10px 20px; font-size: 13.5px; text-decoration: none; }
.auth-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-teal) 35%, var(--border)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-teal) 6%, transparent); font-size: 13.5px; }
.auth-cta span { color: var(--text-secondary); }
.auth-cta .pf-btn { text-decoration: none; }
.pfn-gate { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pfn-gate .pf-btn { text-decoration: none; }
.wlm-list.demo .wlm-handle, .wlm-list.demo .wlm-star { visibility: hidden; }
.flash-toast { cursor: default; }

@media (pointer: coarse), (max-width: 760px) {
  .home-news-body { flex: 0 0 auto; min-height: 0; container-type: normal; overflow: visible; }
  .home-news-body .nw-row { height: auto; }
  .home-news-body .nw-row:nth-child(n+7) { display: none; }   /* 6 ข่าวล่าสุด ที่เหลือกด "ดูข่าวทั้งหมด" */
  .nw-row-meta { display: block; }
  #homeWatchlist { height: auto; max-height: none; overflow: visible; padding-right: 0; }
  #homeWatchlist .ql-row:nth-child(n+6) { display: none; }  /* 5 ตัวแรก ที่เหลือกด "ดูทั้งหมด" (เปิด watchlist จอใหญ่) */
  .wl-more { display: block; }
  .nw-list, .nw-list.sn-list { max-height: none; overflow: visible; }
  .sn-list.sn-collapsed .nw-row:nth-child(n+9) { display: none; }
  .sn-more { display: block; width: 100%; margin-top: 8px; }
  #erList, .cb-ev-list, #smvRegions, .wlm-list { max-height: none; overflow: visible; }
  .smv-side { max-height: none; }
  .fin-all-wrap { max-height: none; }   /* เลื่อนซ้าย/ขวาได้ (ตารางกว้าง) แต่ไม่เลื่อนขึ้นลงในกล่อง */
}

/* ---------- สถิติผู้เข้าชม (#stats — เฉพาะเจ้าของระบบ, js/stats.js) ----------
   grid แบบ auto-fit: จอกว้างเรียงหลายคอลัมน์ จอแคบ/มือถือเหลือ 1–2 คอลัมน์เอง ไม่ต้องมีกฎแยกใน mobile.css */
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3, 12px); margin-bottom: var(--sp-4, 16px); }
.st-cards .card { margin: 0; }
.st-k { color: var(--text-secondary); font-size: 12.5px; }
.st-v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--text-primary); }
.st-chart { position: relative; height: 240px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4, 16px); align-items: start; margin-top: var(--sp-4, 16px); }
.st-grid .card { margin: 0; min-width: 0; }
.st-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 8px; font-size: 13px; overflow: hidden; }
.st-row + .st-row { margin-top: 4px; }
.st-bar { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-radius: 8px; z-index: 0; }
.st-name { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.st-num { position: relative; z-index: 1; flex: none; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }
.st-num small { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.st-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 24px 12px; }
#viewStats .pf-head { flex-wrap: wrap; gap: 12px; }
/* ข้อความแจ้งเรื่องสถิติ (ท้ายหน้าหลัก) */
.site-note { color: var(--text-dim); font-size: 11.5px; text-align: center; margin: var(--sp-4, 16px) 0 0; line-height: 1.6; }
.acct-owner .pf-btn { display: inline-flex; text-decoration: none; }