/*
 * ช่องค้นหาหุ้น (ช่อง input + ปุ่ม + dropdown แนะนำคำ) + หัวหน้ามาตรฐาน (โลโก้+ช่องค้นหา+เมนูท้ายแถว) กลาง
 * ของทั้งเว็บ — คู่กับ assets/search-box.js + lib/search_box.php (renderSearchForm()) และ
 * lib/page_head.php (renderPageHead())
 *
 * รูปแบบกล่อง input+ปุ่ม (.search-bar/.search-form/.search-field/.search-input/.search-submit) ยึด
 * view_np.php เป็นมาตรฐาน (ช่อง input ทรงเม็ดยา + ปุ่ม "ค้นหา" แยกกล่องต่างหาก) — เดิมมีอีกแบบคู่ขนาน
 * (.search-box กรอบเดียวรวม icon+input+ปุ่มในกล่องเดียว ใช้ใน 7 ไฟล์ตระกูล tv) แต่ตัดสินใจเลือกแบบเดียว
 * ไม่ทำ 2 variant คู่ขนานแบบ metric-bar
 *
 * ส่วน dropdown แนะนำคำ (.autocomplete-list/.autocomplete-item) ยึดตระกูล tv เพราะใช้ตัวแปรสี var(--...)
 * ครบและมี dark mode สมบูรณ์กว่าตระกูล np เดิม (ที่เคย hardcode #eef1f5 เป็นสี hover ตรงๆ)
 *
 * .search-bar เป็น flex row มาตรฐานของ "หัวหน้า" ทั้งเว็บด้วย (2026-09-06) — โลโก้ (.brand-label) + ช่อง
 * ค้นหา (flex:1 ยืด/หดตามพื้นที่ที่เหลือ) + เมนูท้ายแถว (เช่นปุ่มสลับธีม, หรือไม่มีก็ได้) เรียงแถวเดียวกัน
 * เดิม view_np.php เขียน override .search-bar { display:flex } ไว้เอง ตอนนี้ย้ายมาเป็นค่ากลางแล้ว เพราะ
 * ตกลงกันว่าทุกหน้าจะใช้หัวแบบเดียวกันหมด
 *
 * ต้องมี assets/site-theme.css โหลดอยู่ด้วย (var(--card-bg)/var(--border)/var(--border-strong)/
 * var(--accent)/var(--accent-hover)/var(--text-primary)/var(--text-secondary)/var(--text-muted)/
 * var(--shadow)/var(--shadow-sm)/var(--radius-box)/var(--autocomplete-hover-bg)/var(--autocomplete-hover-text))
 * และ assets/site-fonts.css (var(--font-main)/var(--font-brand)) — หน้าที่ยังไม่ migrate ธีมกลาง ต้องมี
 * ตัวแปรพวกนี้ใน :root ท้องถิ่นของตัวเองด้วย เหมือน assets/metric-bar.css
 */
.search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.search-bar .search-form { flex: 1; }
/* โลโก้ "9hoon" ของหัวหน้า (คนละอันกับ .chart-card .brand-label/.calc-card .brand-label ที่เป็น badge
"9hoon.com" มุมกราฟ — scope คนละที่ ไม่ชนกัน) */
.brand-label {
    display: flex; align-items: center; font-family: var(--font-brand); font-weight: 600;
    font-size: 42px; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; flex-shrink: 0;
    text-decoration: none; cursor: pointer;
}
@media (max-width: 480px) { .brand-label { font-size: 26px; } }
/* สีไล่ตามตัวอักษร 9-h-o-o-n (ปรับจากสไตล์โลโก้ Google มาเป็นชุดสีของเราเอง) — ใช้ร่วมกันทั้ง .brand-label
(หัวหน้าปกติ) และ .landing-brand (โลโก้ใหญ่หน้า landing ของ view_np.php ที่ยังเป็นดีไซน์เฉพาะหน้า) */
.g-blue { color: #2a78d6; }
.g-red { color: #CF2C1E; }
.g-yellow { color: #FBB034; }
.g-green { color: #40916c; }
/* ชื่อหน้า (h2) แทนช่องค้นหาในแถวหัวเว็บ — renderSiteHeader() ใช้เมื่อส่ง $inlineTitle มา (ประหยัดพื้นที่
แนวตั้ง ไม่ต้องมี renderPageTitle() แยกอีกแถวข้างล่าง) ตัดด้วย ellipsis กันยาวเกินจนชน $trailing ตอนจอแคบ —
ฟอนต์/สีอ้างอิง .title-bar h2 ของ assets/page-title.css ให้หน้าตาตรงกันแม้ไม่ได้โหลดไฟล์นั้นก็ตาม (คนละที่ใช้
กันคนละบริบท ไม่อยากให้ต้อง require lib/page_title.php เพิ่มแค่เพื่อสไตล์เดียวนี้) — ค่าเริ่มต้น flex:1
สำหรับตอน $showSearch=false (กินพื้นที่ว่างทั้งหมดแทนช่องค้นหา) */
.header-inline-title {
    flex: 1; min-width: 0; margin: 0 0 0 12px; font-size: 20px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* (2026-09-17) ใช้ร่วมกับ $showSearch=true — h2 ย่อเหลือแค่พอดีเนื้อหา (ไม่ยึดพื้นที่ทั้งหมดแบบด้านบน) ให้
ช่องค้นหาที่ตามมาได้พื้นที่ไปเต็มๆ แทน (flex:1 อยู่ที่ .search-bar .search-form อยู่แล้ว) ยังตัด ellipsis ถ้า
จอแคบจนไม่พอที่อยู่ดี (min-width:0 ยังคงไว้จาก .header-inline-title เดิม) */
.header-inline-title-compact { flex: 0 1 auto; margin-right: 4px; }
.search-form { display: flex; gap: 10px; }
.search-field { flex: 1; position: relative; }
.search-input {
    width: 100%; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--card-bg); font-family: var(--font-main); font-size: 16px; color: var(--text-primary);
    box-shadow: 0 1px 2px var(--shadow-sm);
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-submit {
    padding: 12px 22px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent);
    color: #fff; font-family: var(--font-main); font-size: 15px; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: background .15s;
}
.search-submit:hover { background: var(--accent-hover); }

.autocomplete-list {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-box);
    overflow: hidden; z-index: 20; box-shadow: 0 8px 24px var(--shadow); max-height: 260px; overflow-y: auto;
    font-family: var(--font-main);
}
.autocomplete-list.show { display: block; }
.autocomplete-item {
    padding: 9px 14px; font-size: 14px; cursor: pointer; color: var(--text-secondary);
    display: flex; align-items: baseline; gap: 8px;
}
.autocomplete-item .ac-symbol { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.autocomplete-item .ac-name {
    color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.autocomplete-item:hover, .autocomplete-item.active { background: var(--autocomplete-hover-bg); color: var(--autocomplete-hover-text); }
.autocomplete-item:hover .ac-name, .autocomplete-item.active .ac-name { color: inherit; }
.autocomplete-item + .autocomplete-item { border-top: 1px solid var(--border); }