/*
* Action Search Bar — สไตล์ช่องค้นหาทั้งระบบ
* อิง 21st.dev/kokonutd/action-search-bar : input ไอคอนแว่นซ้าย + โฟกัสริงฟ้า + คีย์ฮินต์ "/"
*/
/* ===== ปุ่มเปิดค้นหาเรื่องหลัก -> ทำให้ดูเป็น "แถบค้นหา" ===== */
.hesk-search-open {
justify-content: flex-start !important;
gap: 10px !important;
min-width: 320px;
min-height: 46px !important;
padding: 0 14px !important;
border: 1px solid #e4e7ec !important;
border-radius: 12px !important;
background: #fff !important;
color: #667085 !important; /* ดูเป็น placeholder */
font-weight: 500 !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.hesk-search-open .icon {
width: 18px !important;
height: 18px !important;
fill: #98a2b3 !important;
}
.hesk-search-open span { font-weight: 500 !important; }
.hesk-search-open::after {
content: "/";
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border: 1px solid #e4e7ec;
border-radius: 6px;
background: #f9fafb;
color: #98a2b3;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.hesk-search-open:hover,
.hesk-search-open:focus {
border-color: #1877f2 !important;
color: #475467 !important;
box-shadow: 0 0 0 3px rgba(24, 119, 242, .12) !important;
}
/* ===== ช่องค้นหาแบบ input ทั่วระบบ -> ไอคอนแว่นซ้าย + โฟกัสริง ===== */
input[type="search"],
input[name="q"],
.searchfield,
#search-for-user,
#kb_largesearch,
.select2-search--dropdown .select2-search__field {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 13px center;
background-color: #fff;
padding-left: 42px !important;
border: 1px solid #d0d5dd !important;
border-radius: 10px !important;
color: #1d2939;
font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="search"]:focus,
input[name="q"]:focus,
.searchfield:focus,
#search-for-user:focus,
#kb_largesearch:focus,
.select2-search--dropdown .select2-search__field:focus {
outline: 0;
border-color: #1877f2 !important;
box-shadow: 0 0 0 3px rgba(24, 119, 242, .15) !important;
}
/* ===== หัวป๊อปอัพค้นหา + ช่องคำค้นเด่นขึ้น ===== */
.hesk-search-modal__body input[name="q"] {
min-height: 46px;
font-size: 15px;
}
/* ===== ผลลัพธ์ค้นหา (dropdown แนะนำ) สไตล์ action-bar: ไอคอน + label + หมวด ===== */
.ui-autocomplete,
.hesk-suggest-list {
margin-top: 6px !important;
padding: 6px !important;
border: 1px solid #e4e4e7 !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: 0 10px 30px rgba(16, 24, 40, .12), 0 2px 8px rgba(16, 24, 40, .06) !important;
list-style: none;
}
.ui-autocomplete .ui-menu-item,
.hesk-suggest-list > li { list-style: none; }
.ui-autocomplete .ui-menu-item-wrapper,
.hesk-suggest-list > li > a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px !important;
border-radius: 9px !important;
color: #344054 !important;
font-size: 14px;
text-decoration: none;
border: 0 !important;
background: transparent !important;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover,
.hesk-suggest-list > li > a:hover {
background: #1877f2 !important;
color: #fff !important;
margin: 0 !important;
}
/* =========================================================================
ค้นหาแบบละเอียด (ux_search_adv) — แถวละเงื่อนไข ติ๊กหน้าแถวเพื่อเลือกใช้
========================================================================= */
/* ฟอร์มค้นหาเป็นกริด ๒ คอลัมน์ — บล็อกนี้ต้องกินเต็มความกว้าง ไม่งั้นช่องกรอกจะแคบมาก */
.advs {
grid-column: 1 / -1;
width: 100%;
margin: 0 0 14px;
}
.advs__head {
display: flex; flex-direction: column; gap: 2px;
margin: 0 0 10px; padding: 0 0 9px;
border-bottom: 1px solid #eef2f8;
}
.advs__head b { color: #16233a; font-size: 15px; font-weight: 800; }
.advs__head span { color: #8fa0b8; font-size: 12.5px; }
.advs__row {
display: grid;
grid-template-columns: 26px 190px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 5px 0;
}
.advs__row + .advs__row { border-top: 1px solid #f4f7fb; }
.advs__pick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.advs__pick input { width: 17px; height: 17px; accent-color: #2563eb; cursor: pointer; }
.advs__label { color: #51648c; font-size: 13.5px; font-weight: 700; text-align: right; }
.advs__field { min-width: 0; }
.advs__field .form-control,
.advs__field select { width: 100%; }
.advs__inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.advs__inline > select,
.advs__inline > .form-control { flex: 1 1 130px; min-width: 0; width: auto; }
.advs__to { color: #8fa0b8; font-size: 13px; font-weight: 700; }
/* ช่วงวันที่: ช่อง "วันที่" แคบกว่าเดือน/ปี เพื่อให้ ๖ ช่องอยู่ในแถวเดียว */
.advs__inline > select[name="s_d1"],
.advs__inline > select[name="s_d2"] { flex: 0 1 92px; }
.advs__hint { margin-top: 6px; color: #97a2b6; font-size: 11.5px; }
/* แถวที่ติ๊กแล้ว = เน้นให้เห็นว่ากำลังใช้เงื่อนไขนี้ */
.advs__row:has(.advs__pick input:checked) { background: #f7faff; border-radius: 10px; }
.advs__row:has(.advs__pick input:checked) .advs__label { color: #1d4ed8; }
/* แถบปุ่มท้ายฟอร์ม */
.advs__actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #eef2f8;
}
.advs__actions .btn {
min-height: 40px;
padding: 0 22px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.advs__actions .btn-full { flex: 0 0 auto; }
.advs__actions .btn--blue-border { background: #fff; }
/* แถบสลับสีอ่อน ๆ ให้กวาดตาตามแถวได้ง่าย */
.advs__row:nth-child(even of .advs__row) { background: #fbfcfe; border-radius: 10px; }
@media screen and (max-width: 899px) {
.advs__row {
grid-template-columns: 24px minmax(0, 1fr);
align-items: start;
gap: 6px 9px;
padding: 9px 0;
}
.advs__label { grid-column: 2; text-align: left; font-size: 14px; }
.advs__field { grid-column: 2; }
.advs__inline > select,
.advs__inline > .form-control { flex: 1 1 46%; }
.advs__actions { flex-direction: column; align-items: stretch; }
}
/* =========================================================================
ในหน้าต่าง "ค้นหาเรื่องร้องเรียน": ให้เหลือเฉพาะฟอร์มค้นหาแบบละเอียด
ของเดิมเป็นแผงตัวกรองของ HESK (ติ๊กสถานะ · เรียงลำดับ · จัดกลุ่ม ฯลฯ)
ซึ่งซ้ำซ้อนกับแถวเงื่อนไขชุดใหม่ และทำให้หน้าต่างรก
หมายเหตุ: ซ่อนเฉย ๆ ไม่ได้ลบ — ค่าที่ธีมตั้งไว้ยังถูกส่งไปกับฟอร์มเหมือนเดิม
========================================================================= */
.hesk-search-modal #ticket-browse-panel,
.hesk-search-modal .ticket-query-title:has(> [data-toggle-panel="ticket-browse-panel"]),
.hesk-search-modal .ticket-query-title:has(> [data-toggle-panel="ticket-search-panel"]),
.hesk-search-modal #ticket-search-panel .search-option,
.hesk-search-modal #ticket-search-panel #topSubmit2,
.hesk-search-modal #ticket-search-panel #divShow2 {
display: none !important;
}
/* การ์ดที่เหลือ: ไม่ต้องมีกรอบซ้อนกับกรอบหน้าต่าง */
.hesk-search-modal #ticket-search-panel {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.hesk-search-modal #ticket-search-panel .ticket-query-form {
display: block !important;
}
.hesk-search-modal .advs { margin-bottom: 0; }
/* แจ้งเตือนเมื่อไฟล์ฟอร์มค้นหาแบบใหม่ยังไม่ครบ (จะได้รู้ว่าต้องอัปไฟล์ไหน ไม่ใช่เจอหน้าว่าง) */
.advs__warn {
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid #fde68a;
border-radius: 10px;
background: #fffbeb;
color: #92400e;
font-size: 13px;
line-height: 1.5;
}
.advs__warn code {
padding: 1px 5px;
border-radius: 5px;
background: #fef3c7;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12.5px;
}
/* ป้ายจังหวัดที่ล็อกไว้ (ฐานข้อมูลมีเฉพาะสุรินทร์) */
.advs__fixed {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border: 1px solid #e6ebf3;
border-radius: 10px;
background: #f4f7fb;
color: #51648c;
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
}
/* ไม่พบผลการค้นหา */
.ux-noresult {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 18px auto;
padding: 34px 24px;
max-width: 520px;
border: 1px solid #e8edf5;
border-radius: 18px;
background: #fff;
text-align: center;
}
.ux-noresult svg { width: 40px; height: 40px; color: #b9c7dd; }
.ux-noresult b { color: #16233a; font-size: 17px; font-weight: 800; }
.ux-noresult span { color: #8fa0b8; font-size: 13.5px; line-height: 1.6; }
.ux-noresult .btn { margin-top: 6px; min-height: 40px; padding: 0 22px !important; border-radius: 999px !important; }
/* =========================================================================
ป๊อบอัพ "ค้นหาเรื่องร้องเรียน" ให้พอดีหน้าจอ (อาร์มแจ้ง ๒๗ ส.ค. ๒๕๖๙)
ปัญหาเดิม: กล่องสูงเกินจอ ต้องเลื่อนขึ้นลงกว่าจะกดปุ่ม "ค้นหา" ได้
แก้: กล่องสูงไม่เกินจอ · เนื้อหาเลื่อนอยู่ภายใน · ปุ่มค้นหาติดขอบล่างตลอด
(ไฟล์นี้โหลดหลัง admin-ui.css จึงเขียนทับกฎเดิมได้)
========================================================================= */
.hesk-search-modal {
align-items: center !important;
padding: 22px 14px !important;
overflow: hidden !important; /* ไม่ให้ทั้งป๊อบอัพเลื่อน — ให้เลื่อนเฉพาะเนื้อใน */
}
.hesk-search-modal__dialog {
display: flex;
flex-direction: column;
max-height: calc(100vh - 44px);
margin: auto;
overflow: hidden;
}
.hesk-search-modal__head { flex: 0 0 auto; }
.hesk-search-modal__body {
flex: 1 1 auto;
min-height: 0;
max-height: none !important; /* ของเดิมล็อกไว้ 100vh - 200px ทำให้เกินจอ */
padding: 16px 20px 0 !important;
overflow-y: auto;
}
/* แถบปุ่มค้นหา: ติดขอบล่างของกล่อง กดได้เสมอไม่ต้องเลื่อนหา */
.hesk-search-modal__body .advs__actions {
position: sticky;
bottom: 0;
z-index: 2;
margin: 14px -20px 0 !important;
padding: 12px 20px !important;
border-top: 1px solid #eef2f8;
background: rgba(255, 255, 255, .97);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* บีบระยะในฟอร์มให้เห็นเงื่อนไขได้มากขึ้นต่อหนึ่งหน้าจอ */
.hesk-search-modal__body .advs__row { padding: 9px 0 !important; }
@media screen and (max-width: 899px) {
.hesk-search-modal { padding: 0 !important; }
.hesk-search-modal__dialog {
width: 100% !important;
max-height: 100vh;
height: 100vh;
border: 0;
border-radius: 0;
}
}
/* ---- ลดขนาดกล่องค้นหาลงอีก + เก็บงานจอมือถือ (วัดจากเบราว์เซอร์แล้ว) ---- */
.hesk-search-modal__dialog { width: min(760px, 100%) !important; }
.hesk-search-modal__head { padding: 13px 18px !important; }
.hesk-search-modal__head h3 { font-size: 16.5px !important; }
.hesk-search-modal__body { padding: 13px 18px 0 !important; }
.hesk-search-modal__body .advs__head { margin-bottom: 8px !important; }
.hesk-search-modal__body .advs__row { padding: 7px 0 !important; }
.hesk-search-modal__body .advs__actions { margin: 10px -18px 0 !important; padding: 10px 18px !important; }
/* ปุ่มในแถบล่าง: อยู่แถวเดียวกัน ไม่ซ้อนกันจนกินพื้นที่ */
.hesk-search-modal__body .advs__actions {
display: flex !important;
align-items: center;
gap: 9px;
}
.hesk-search-modal__body .advs__actions .btn {
width: auto !important;
min-height: 42px !important;
margin: 0 !important;
}
.hesk-search-modal__body .advs__actions .btn-full { flex: 1 1 auto; }
@media screen and (max-width: 899px) {
/* ให้พอดีจอจริง ๆ (100vh บนมือถือรวมแถบเบราว์เซอร์ จึงเผื่อ dvh ไว้ด้วย) */
.hesk-search-modal__dialog {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
}
.hesk-search-modal__body .advs__actions .btn { min-height: 46px !important; }
}
/* วัดบนมือถือแล้ว: ปุ่มถูกบังคับกว้าง 311px ทั้งสองปุ่ม (กฎของสกินมือถือ)
อยู่ในแถบกว้าง 375px จึงล้นและทับเนื้อหา · และแถบยังไม่ชิดขอบล่าง (เหลือ 18px) */
html body .hesk-search-modal__body .advs__actions {
margin-bottom: 0 !important;
padding-bottom: 12px !important;
flex-wrap: nowrap !important;
}
html body .hesk-search-modal__body .advs__actions > .btn,
html body .hesk-search-modal__body .advs__actions > button,
html body .hesk-search-modal__body .advs__actions > a {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* ปุ่มค้นหาให้เด่นกว่าปุ่มล้างเงื่อนไข */
html body .hesk-search-modal__body .advs__actions > .btn-full { flex: 1.6 1 0 !important; }
/* ยังไม่จบ — วัดซ้ำแล้วพบอีก ๓ จุด
๑) แถบปุ่มถูกสกินมือถือสั่งเป็นแนวตั้ง (ปุ่มซ้อนกัน)
๒) พื้นหลังแถบโปร่ง เห็นเนื้อหาทะลุ
๓) แถบติดค้างสูงกว่าขอบล่าง ๑๗px เพราะ