/* มือถือ (จอสัมผัส) ทั้งหมดอยู่ในไฟล์นี้ — จอคอมไม่ได้รับผลจากไฟล์นี้ (ดูเงื่อนไข @media)
   (แยกออกจาก index.html ต.ค. 2026 — ลำดับไฟล์มีผล: theme → base → pages → mobile) */
/* =====================================================================
   มือถือ: layout เฉพาะจอสัมผัสที่เล็ก (แนวตั้ง ≤ 760px หรือแนวนอนที่สูง ≤ 520px)
   จอคอม (เมาส์) ไม่เข้าเงื่อนไขนี้ -> เห็นแบบเดิมทุกอย่าง แม้ย่อหน้าต่างให้แคบ
   ===================================================================== */
.mnav, .hd-search-btn, .m-k { display: none; }
@media (pointer: coarse) and (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  html { -webkit-tap-highlight-color: transparent; }
  /* หัวเว็บ: แถวเดียว (โลโก้ / ค้นหา / ภาษา / ธีม) — เมนูย้ายไปแถบล่าง */
  header { padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    gap: 8px; flex-wrap: wrap; row-gap: 8px; }
  .main-nav { display: none; }
  .wordmark { order: 1; font-size: 16px; }
  /* ปุ่มย้อนกลับมุมซ้ายบน — มีปุ่มนี้แล้วซ่อนชื่อเว็บ (เหลือไอคอน) ให้หัวเว็บยังอยู่แถวเดียว */
  .icon-btn.hd-back { display: inline-flex; order: 0; }
  .hh-title { font-size: 22px; } .hh-sub { font-size: 14px; } .hh-big { font-size: 30px; } .hh-card { min-height: 0; padding: var(--sp-5); }
  .icon-btn.hd-back[hidden] { display: none; }
  header:has(.hd-back:not([hidden])) .wordmark-text { display: none; }
  /* ล็อกอินแล้วมีกระดิ่ง + ปุ่มบัญชีเพิ่ม: ชื่อ "An Investor" ยาวเกินแถวเดียวบนมือถือ -> เหลือไอคอนโลโก้ */
  @media (max-width: 480px) { header:has(#userBtn:not([hidden])) .wordmark-text { display: none; } }
  .hd-actions { order: 2; gap: 6px; }
  .hd-search-btn { display: inline-flex; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; display: none; }
  header.search-open .search-wrap { display: block; animation: popIn 0.18s var(--ease); }
  #searchInput { font-size: 16px; }   /* ต่ำกว่า 16px iPhone จะซูมหน้าเองตอนแตะช่องพิมพ์ */
  #searchResults { max-height: 60vh; overflow-y: auto; }
  .result-item { padding: 12px 14px; }
  .icon-btn { width: 40px; height: 40px; }
  .lang-switch button { padding: 8px 10px; }
  .bell-panel { position: fixed; left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top, 0px)); width: auto; max-height: calc(100dvh - 140px); }
  .bell-toasts { left: 12px; right: 12px; width: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .bell-item { padding-block: 12px; }
  .user-menu { position: fixed; left: auto; right: 8px; top: calc(56px + env(safe-area-inset-top, 0px)); }
  .user-btn { padding: 0; width: 40px; justify-content: center; }
  .user-name { display: none; }
  .login-btn { width: 40px; padding: 0; justify-content: center; }
  .login-btn span { display: none; }
  .login-btn svg { display: block; }
  .auth-card { padding: 22px 18px 20px; }
  .auth-field input, .acct-inline input { font-size: 16px; }   /* ต่ำกว่า 16px iPhone จะซูมหน้าเอง */
  .pw-toggle { padding: 10px; }
  .um-item { padding-block: 13px; }
  /* จอแคบมาก: ซ่อนชื่อเว็บ เหลือไอคอน ให้ปุ่มบนหัวเว็บ (ค้นหา/ภาษา/กระดิ่ง/ธีม) อยู่แถวเดียว ไม่ตกเป็น 2 แถว */
  @media (max-width: 370px) {
    .wordmark-text { display: none; }
    header:has(.hd-back:not([hidden])) .wordmark { display: none; }   /* จอแคบมาก: มีปุ่มย้อนกลับแล้วซ่อนโลโก้ */
    /* ล็อกอินแล้วมีปุ่มเพิ่ม (กระดิ่ง + บัญชี) — ย่อปุ่มเล็กน้อยให้ยังอยู่แถวเดียวที่จอ 320px */
    .hd-actions { gap: 4px; }
    .icon-btn, .user-btn, .login-btn { width: 36px; height: 36px; }
    .lang-switch button { padding: 8px 8px; }
  }
  @media (max-width: 340px) {   /* จอ 320px + ล็อกอิน + มีปุ่มย้อนกลับ = 6 ปุ่ม -> ย่ออีกนิดให้อยู่แถวเดียว (ยังกดง่าย ≥ 30px) */
    header { gap: 6px; }
    .hd-actions { gap: 3px; }
    .icon-btn, .user-btn, .login-btn { width: 32px; height: 32px; }
    .lang-switch button { padding: 7px 6px; }
  }
  /* แถบเมนูล่าง (กดด้วยนิ้วโป้งได้) */
  .mnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--border); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  .mnav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; padding: 0 2px;
    border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;
    transition: color 0.15s ease; white-space: nowrap; }
  .mnav-btn svg { width: 22px; height: 22px; transition: transform 0.2s var(--ease); }
  .mnav-btn.active { color: var(--accent-teal); font-weight: 600; }
  .mnav-btn.active svg { transform: translateY(-1px) scale(1.08); }
  .mnav-btn:active svg { transform: scale(0.88); }
  main { padding: 14px max(12px, env(safe-area-inset-right, 0px)) calc(84px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  /* การ์ดและหัวข้อ */
  .card, .pf-card { border-radius: 14px; }
  .card { padding: 14px; margin-bottom: 12px; }
  .home-grid > .card, .home-bottom .card, .pf-charts { margin-bottom: 12px; }
  .home-grid, .home-bottom, .pf-charts { gap: 12px; }
  .card-label, .card-label-row { margin-bottom: 12px; }
  .pf-head { margin-bottom: 14px; gap: 10px; align-items: flex-start; }
  .pf-title { font-size: 23px; }
  .pf-sub { font-size: 12.5px; }
  /* ปุ่มใหญ่พอให้นิ้วกด (≥ 36px) */
  .btn-group button { padding: 8px 12px; min-height: 36px; }
  .expand-btn, .pf-btn, .refresh-btn, .modal-btn { min-height: 38px; padding: 8px 12px; }
  .mk-arrow { min-width: 42px; min-height: 36px; }
  .star-btn, .ov-btn { min-height: 36px; min-width: 36px; padding: 6px 12px; }
  .sr-help { width: 30px; height: 30px; line-height: 28px; font-size: 13px; }
  .pf-icon-btn { min-width: 38px; min-height: 38px; font-size: 14px; }
  .fin-chip, .iv-chip { padding: 8px 13px; }
  .hl-dot, .mk-dot, .er-day { position: relative; }
  .hl-dot::after { content: ""; position: absolute; inset: -12px -6px; }   /* จุดเล็กแต่พื้นที่กดใหญ่ */
  .nw-more { padding: 8px 0; }
  .wordmark { min-height: 40px; }
  .imp-chip { padding: 7px 11px; min-height: 32px; }
  .fin-compare-head select { min-height: 38px; font-size: 14px; }
  .iv-chip small { font-size: 11.5px; }
  .smv-rl-n { font-size: 11px; }
  /* ตัวหนังสือเล็กสุด 11.5px (เดิมบางจุด 10px อ่านยากบนมือถือ) */
  .er-k, .er-cnt, .cb-ev-nums i, .mv-vol small, .mv-rank, .sm-note, .hm-legend, .mk-note, .nw-row-meta, .sr-k, .sr-pct,
  .source-badge, .pf-mkt, .smv-foot, .smv-legend, .smv-rn, .cb-k, .fin-legend-note, .hl-hint, .er-wd, .iv-badge, .pf-name,
  .ql-name, .er-name, .er-sub, .cb-tag, .pf-sub-line, .nw-impact-note, .fin-explain, .ov-fk, .ov-ceo-k, .exp-box-label { font-size: 11.5px; }
  /* แถวปุ่มยาว: ขึ้นบรรทัดใหม่ (เดิมเลื่อนซ้าย/ขวา แต่ปุ่มท้ายแถวดูเหมือนถูกตัดที่ขอบจอ ผู้ใช้ไม่รู้ว่าปัดได้) */
  .mk-dots, .fin-chips, .iv-pf-tabs { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .mk-dots { flex: 1 1 auto; justify-content: center; row-gap: 6px; }
  .mv-ctrls { width: 100%; flex-wrap: wrap; }
  #mvTab { flex: 1 1 auto; } #mvTab button { flex: 1 1 auto; }
  /* กลุ่มปุ่มห้ามกว้างเกินจอ (จอ 320px: แท็บหุ้นเด่น 3 ปุ่ม / แท็บพอร์ตนักลงทุนข้อความยาว ดันทั้งหน้ากว้างเกินจอ)
     ปุ่มย่อได้และตัดบรรทัดได้แทน */
  .btn-group { max-width: 100%; }
  .btn-group button { min-width: 0; }
  #ivPfTabs button { white-space: normal; text-align: center; line-height: 1.35; }
  @media (max-width: 370px) {
    .btn-group button { white-space: normal; line-height: 1.3; }
    #mvTab button { flex: 1 1 0; padding-inline: 6px; }
  }
  .fin-chip { flex: 0 0 auto; }
  .mk-dot { white-space: nowrap; padding: 7px 12px; font-size: 11.5px; flex: 0 0 auto; }
  .mk-nav { gap: 8px; }
  /* หน้าหลัก */
  .chart-box.mk-chart { min-height: 220px; }
  .mk-name { font-size: 18px; }
  .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; }
  .nw-thumb { width: 84px; height: 58px; }
  .nw-row-meta { display: block; }   /* span ต้องเป็น block ถึงจะตัดท้ายด้วย … ได้ (ไม่งั้นดันหน้ากว้างเกินจอ มือถือซูมออก) */
  .home-bottom #homeHeatmap, .hm-box { height: 220px; }
  #homeWatchlist { height: auto; max-height: calc(var(--ql-row-h) * 5); }
  .er-row { padding: 12px 2px; gap: 8px 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mv-row { padding: 10px 2px; grid-template-columns: 18px minmax(0, 1fr) 70px 66px; }
  .mv-row .mv-price { display: none; }
  .sm-box { height: 250px; }
  /* หน้าหุ้น: ชื่อ -> ราคา -> แนวรับ/แนวต้าน (ราคาสำคัญสุด ขึ้นก่อน) */
  .ticker-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: var(--sp-4); margin-bottom: 14px; }
  .ticker-symbol { font-size: 26px; }
  .price-block { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .price-block .price-value, .price-block .live-head { flex-basis: 100%; }
  .price-block .price-change { margin-top: 0; }   /* ป้ายเปลี่ยนแปลงราคา = ขนาดพอดีข้อความ ไม่ยืดเต็มแถว */
  .price-value { font-size: 32px; }
  .source-badge, .refresh-btn { margin: 4px 0 0; }
  .controls { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; }
  #periodGroup { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #periodGroup button { padding: 8px 0; }
  #chartTypeGroup { align-self: flex-start; }
  .chart-box { height: 260px; }
  .chart-box.volume { height: 100px; }
  .chart-box.fin-chart { height: 220px; }
  .sr-cell { padding: 0 6px; }
  .sr-v { font-size: 15px; }
  /* พอร์ต: สรุป 2x2 / ฟอร์ม 2 คอลัมน์ / ตารางหุ้นกลายเป็นการ์ดทีละตัว */
  .pf-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pf-card { padding: 12px; }
  .pf-card-value { font-size: 17px; }
  .pf-form { grid-template-columns: 1fr 1fr; }
  .pf-form .pf-btn.primary { grid-column: 1 / -1; }
  .pf-field input, .pf-field select { font-size: 16px; min-height: 42px; }
  .pf-table:has(#pfBody) { min-width: 0; }
  .pf-table:has(#pfBody) thead { display: none; }
  /* การ์ดหุ้น 1 ตัว: เห็นแค่ กำไร/ขาดทุนรวม · ราคาปัจจุบัน · ราคาต้นทุน — แตะการ์ดเพื่อดูรายละเอียดอื่น (tr.open) */
  #pfBody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #pfBody tr:last-child { border-bottom: none; }
  #pfBody td { display: block; padding: 0; border: none; text-align: left; white-space: normal; min-width: 0; }
  #pfBody td.pf-c-id { grid-column: 1 / -1; order: 0; }
  #pfBody td.pf-c-pl { order: 1; }
  #pfBody td.pf-c-price { order: 2; }
  #pfBody td.pf-c-cost { order: 3; }
  #pfBody td.pf-x { order: 10; display: none; }
  #pfBody tr.open td.pf-x { display: block; animation: popIn 0.2s ease; }
  #pfBody tr.open { background: color-mix(in srgb, var(--surface-hover) 60%, transparent); border-radius: var(--radius); padding-inline: 8px; }
  #pfBody td.pf-c-act { grid-column: 1 / -1; order: 20; display: none; gap: 8px; }
  #pfBody tr.open td.pf-c-act { display: flex; flex-wrap: wrap; }
  #pfBody td.pf-c-act .pf-icon-btn { margin: 0; min-height: 38px; padding: 6px 14px; font-size: 13px; font-family: var(--font-sans); }
  #pfBody td.pf-c-act .m-only { display: inline-block; }
  #pfBody td.pf-c-act .pf-btn-txt { margin-left: 6px; }
  #pfBody td.pf-row-error { grid-column: 1 / -1; order: 4; }
  #pfBody .pf-src { justify-content: flex-start; }
  #pfBody .pf-c-pl .pf-v { font-size: 15px; font-weight: 600; }
  #pfBody .pf-id { pointer-events: none; }   /* แตะชื่อหุ้น = เปิด/ปิดรายละเอียด (ไปหน้าหุ้นใช้ปุ่มในรายละเอียด) */
  #pfBody .pf-id .pf-name { max-width: none; }
  #pfBody .pf-c-id .pf-added { display: none; }
  .pf-chev { display: block; float: right; color: var(--text-dim); font-size: 14px; transition: transform 0.2s ease; margin-top: 6px; }
  #pfBody tr.open .pf-chev { transform: rotate(180deg); }
  #pfBody td.m-only { display: none; order: 11; }
  #pfBody tr.open td.m-only { display: block; }
  #pfBody td.pf-c-added { grid-column: span 2; font-family: var(--font-sans); }
  .m-k { display: block; font-family: var(--font-sans); font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; }
  /* ตารางเปรียบเทียบงบ (หน้าหุ้น): 4 คอลัมน์กว้างเกินจอ -> การ์ดทีละรายการ ชื่อรายการด้านบน + งวดเก่า · งวดใหม่ · เปลี่ยนแปลง */
  .fin-compare .table-wrap { overflow: visible; }
  .fin-compare .pf-table { min-width: 0; }
  .fin-compare .pf-table thead { display: none; }
  .fin-compare .pf-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .fin-compare .pf-table tr:last-child { border-bottom: none; }
  .fin-compare .pf-table td { display: block; padding: 0; border: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .fin-compare .pf-table td.fin-name { grid-column: 1 / -1; font-weight: 500; }
  /* ตารางที่ผ่าน labelCells() (นักลงทุน: หุ้นที่ถือ/ประวัติซื้อขาย, ธนาคารกลาง: ผลการประชุม) -> การ์ด 2 คอลัมน์ */
  .table-wrap:has(> table.m-cards), .cb-table-wrap:has(> table.m-cards) { overflow: visible; }
  table.m-cards { min-width: 0 !important; width: 100%; }
  table.m-cards thead { display: none; }
  table.m-cards tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  table.m-cards tbody tr:last-child { border-bottom: none; }
  table.m-cards td { display: block; padding: 0 !important; border: none !important; text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
  table.m-cards td:first-child, table.m-cards td[colspan] { grid-column: 1 / -1; }
  /* ประวัติการขาย: 2 คอลัมน์ พร้อมหัวข้อในแต่ละช่อง */
  .pf-sold-row { grid-template-columns: 1fr 1fr; }
  .pf-sold-row > :first-child { grid-column: 1 / -1; }
  .pf-sold-row.head { display: none; }
  .pf-sold-k { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; font-family: var(--font-sans); }
  /* ข่าว: กล่องข่าวแสดง 5 ข่าว แถวสูงตามเนื้อหา (กล่องเรียงลงมา ไม่ต้องสูงเท่ากัน) */
  .nw-box-body { min-height: 0; }
  .nw-box-body .nw-row { height: auto; }
  /* รายการข่าวบนมือถือ: แสดงข้อความเต็ม ไม่ตัดท้ายด้วย … (บนจอแคบ ข้อความที่ถูกตัดชิดขอบดูเหมือนเลยขอบจอ — ผู้ใช้แจ้ง)
     พาดหัว/เหตุผล/บรรทัดแหล่งข่าว ขึ้นบรรทัดใหม่ได้ทั้งหมด — จอคอมยังตัดเหมือนเดิม (กล่องสูงเท่ากัน) */
  .nw-row-title, .pfn-why { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
  .nw-row-meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .nw-row-meta .pfn-tag { display: inline-block; margin-top: 3px; }
  .nw-back { padding: 8px 0; font-size: 14px; margin-bottom: 0; }
  .nw-box-body .nw-row:nth-child(n+6), .nw-box-body .pfn-list .nw-row:nth-child(n+6) { display: none; }
  .nw-box-more { text-align: center; padding: 12px 0 2px; font-size: 13.5px; }
  .nw-article-card.has-article { min-height: calc(100dvh - 61px - 57px - env(safe-area-inset-bottom, 0px) - 24px); }
  .nw-thumb.hl-thumb { height: 170px; }
  .hl-title { font-size: 17px; }
  /* หน้าอื่นๆ */
  .smv-map { height: 58vh; min-height: 320px; }
  .smv-search { width: calc(100% - 66px); }
  .smv-rl { padding: 2px 5px; border-radius: 6px; }
  .smv-rl b { font-size: 11.5px; }
  .smv-rl-pct { font-size: 11px; }
  .smv-hint { bottom: 46px; font-size: 11.5px; }   /* อยู่เหนือแถบสี (legend) ที่ย้ายลงล่างบนมือถือ */
  .smv-foot { display: none; }   /* วิธีใช้/จำนวนบริษัท มีอยู่แล้วที่หัวหน้า — ไม่ให้ทับแผนที่ */
  .smv-legend { top: auto; bottom: 10px; }
  .smv-legend > span:last-child { display: none; }
  .smv-search input { font-size: 16px; }
  .cb-big { font-size: 20px; }
  .er-cal-card, .cb-cal > div:first-child { max-width: 420px; }
  .iv-search-wrap input { font-size: 16px; }
  .sr-pop-backdrop { padding: calc(env(safe-area-inset-top, 0px) + 12px) 8px 12px; }
  .sr-pop { padding: 16px; border-radius: 14px; }
  .modal-overlay { padding: 0; }
  .modal-card { border-radius: 0; max-height: none; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* มือถือแนวนอน (จอเตี้ย): หัวเว็บไม่ติดค้างด้านบน + แถบล่างเตี้ยลง ให้เนื้อหามีที่มากที่สุด */
@media (pointer: coarse) and (max-height: 520px) {
  header { position: static; }
  .mnav-btn { height: 46px; flex-direction: row; gap: 7px; font-size: 12.5px; }
  .mnav-btn svg { width: 19px; height: 19px; }
  main { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .chart-box { height: min(260px, 62vh); }
  .chart-box.mk-chart { min-height: 0; height: min(240px, 60vh); flex: 0 0 auto; }
  .smv-map { height: 78vh; min-height: 0; }
  .home-bottom #homeHeatmap, .hm-box { height: 200px; }
  .nw-thumb.hl-thumb { width: 200px; height: 112px; }
  .mk-slide.hl-slide { flex-direction: row; align-items: center; }
  .home-bottom, .pf-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* จอกว้าง: วางการ์ดคู่กัน */
  .pf-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  main:not([hidden]), #searchResults.open, .flash-up, .flash-down { animation: none; }
  .sk { animation-duration: 2.6s; }
  html { scroll-behavior: auto; }
  .wl-home:hover, .home-news:hover, .sm-home:hover, .er-home:hover { transform: none; }
}