/*
 * สลับหมวดหลัก "ภาพรวมตลาด" (Market) / "หุ้นรายตัว" (Stock) — คู่กับ lib/main_nav.php
 * v3 (2026-09-16 เย็น): ตัวสลับโลกเปลี่ยนจากลิงก์เดี่ยว (.main-nav-switch เดิม v2) เป็นปุ่ม dropdown
 * (.main-nav-world-switch, <details>/<summary>) รองรับกรณีมีโลกมากกว่า 2 ในอนาคต — ปุ่มกว้างเท่าเดิมไม่ว่า
 * ลิสต์ข้างในจะยาวแค่ไหน ต่างจากทำเป็นแท็บ/ลิงก์เรียงกันที่ยิ่งเพิ่มโลกยิ่งกว้าง
 * v2 เดิม: รวมแท็บสลับหมวด + เมนูย่อย 6 หน้า Market ให้เหลือแถวเดียว (.main-nav-row) แทนที่จะเป็น
 * .main-nav-tabs 2 ปุ่ม + เมนูย่อยคนละแถว (v1 เดิม) — ตอนนี้ roll out ครบทั้ง 6 หน้า Market แล้ว (2026-09-16)
 *
 * .link-section (เมนูย่อย 6 ลิงก์) ใช้ style เดิมจาก assets/nav-menu.css ตรงๆ (สไตล์ pill เดียวกับเมนู
 * 11 ลิงก์ของหน้า Stock) ไม่สร้าง style ซ้ำ — ต้องโหลด assets/nav-menu.css คู่กันด้วย
 *
 * .main-nav-world-menu ทำสไตล์ตาม .autocomplete-list ของ assets/search-box.css (กล่อง dropdown ลอย เงา
 * var(--shadow) แบบเดียวกัน) ให้หน้าตาสอดคล้องกับ dropdown อื่นในเว็บ ไม่ออกแบบใหม่แยก
 */
/* v4 (2026-09-19): ปุ่มสลับโลกย้ายมาซ้ายสุดของแถว คั่นเส้นแล้วตามด้วยเมนูย่อย (เดิม v3 อยู่ขวาสุดด้วย
   justify-content:space-between) — เอาเส้นคั่น (เดิมอยู่ที่ .main-nav-world-switch เพราะมันอยู่ขวา) มาไว้ที่
   .link-section แทน (ตอนนี้อยู่หลังปุ่มสลับโลก) และเลิกใช้ space-between (ดันสองฝั่งไปสุดขอบ) เป็น flex-start
   ธรรมดา ให้ปุ่ม+เมนูย่อยอยู่ติดกันเป็นกลุ่มเดียวชิดซ้าย */
.main-nav-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 16px; margin-bottom: 16px;
}
.main-nav-row .link-section {
    margin-bottom: 0; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--border);
}
/* ลิงก์เมนูย่อยของหน้าปัจจุบัน (ใน .link-section) ไฮไลต์แยกจาก hover ปกติ */
.link-section a.active { border-color: var(--accent); color: var(--accent); background: var(--autocomplete-hover-bg); }

.main-nav-world-switch { flex-shrink: 0; position: relative; }
/* มุมซ้ายบนของ home.php (.main-nav-corner) — เมนูกางออกจากขอบซ้าย ไม่ใช่ขอบขวา (ปุ่มอยู่ใกล้ขอบจอซ้าย
   right:0 แบบปกติจะทำให้กล่องล้นออกนอกจอ) ไม่เกี่ยวกับเส้นคั่น (ย้ายไปที่ .link-section ด้านบนแล้ว) แค่
   ตำแหน่งกล่อง dropdown เอง */
.main-nav-corner .main-nav-world-menu { right: auto; left: 0; }
.main-nav-world-switch summary {
    list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--card-bg); font-family: var(--font-main); font-size: 14px; font-weight: 700;
    color: var(--text-secondary); white-space: nowrap; transition: border-color .15s, color .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.main-nav-world-switch summary::-webkit-details-marker { display: none; }
.main-nav-world-switch summary::after { content: '▾'; }
.main-nav-world-switch summary:hover { border-color: var(--accent); color: var(--accent); }
.main-nav-world-switch[open] summary { border-color: var(--accent); color: var(--accent); }
.main-nav-world-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px;
    background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-box);
    box-shadow: 0 8px 24px var(--shadow); overflow: hidden; z-index: 20; padding: 4px;
    display: flex; flex-direction: column; gap: 2px;
}
.main-nav-world-menu a, .main-nav-world-menu .current {
    padding: 8px 10px; border-radius: 6px; font-family: var(--font-main); font-size: 14px; font-weight: 600;
    text-decoration: none; color: var(--text-secondary);
    display: flex; align-items: center; gap: 8px;
}
.main-nav-world-menu a:hover { background: var(--autocomplete-hover-bg); color: var(--autocomplete-hover-text); }
.main-nav-world-menu .current { color: var(--accent); font-weight: 700; cursor: default; }
/* ไอคอนต่อโลก (SVG inline, currentColor อยู่แล้ว) — ขนาดคงที่ ไม่บีบ/ยืดตามความยาวข้อความข้างๆ */
.main-nav-world-switch summary svg, .main-nav-world-menu svg { width: 16px; height: 16px; flex-shrink: 0; }