/* ============================================================
 * form-controls.css — มาตรฐาน dropdown ของระบบ (อาร์มสั่ง 9 ส.ค. 2569)
 *
 * ต้นแบบ: dropdown "เรื่องนี้ได้รับการมอบหมายให้:" ในหน้ารายละเอียดเรื่อง
 * ใช้ :where() เพื่อให้ค่าน้ำหนัก (specificity) = ต่ำสุด
 *   -> เป็นแค่ "ค่าเริ่มต้น" ของทั้งระบบ
 *   -> กฎเดิมที่เจาะจงหน้าไหนไว้แล้ว ยังชนะเสมอ ไม่ไปทับของเก่าให้พัง
 *
 * ยกเว้น select ที่ปลั๊กอินยึดไปแล้ว (select2 / selectize)
 * และ list box (multiple / size) ซึ่งไม่ใช่ dropdown
 * ============================================================ */

select:where(:not(.select2-hidden-accessible):not(.selectized):not([multiple]):not([size])) {
    width: 100%;
    min-height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid #cfdcee;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237286a3'><path d='M7 10l5 5 5-5z'/></svg>") right 8px center/18px no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #22314f;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
select:where(:not(.select2-hidden-accessible):not(.selectized):not([multiple]):not([size])):hover {
    border-color: #93a6c1;
}
select:where(:not(.select2-hidden-accessible):not(.selectized):not([multiple]):not([size])):focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
select:where(:disabled) {
    background-color: #f5f7fa;
    color: #93a6c1;
    cursor: not-allowed;
}

/* ---- หน่วยดำเนินการ: ใช้ทรงมาตรฐานเดียวกัน (เลิกทรงแคปซูล) ---- */
.ux-sel select,
.ux-sel--add select {
    min-height: 40px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid #cfdcee !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    background-position: right 8px center !important;
    background-size: 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #22314f !important;
}
.ux-sel select:hover,
.ux-sel--add select:hover { border-color: #93a6c1 !important; }
.ux-sel select:focus,
.ux-sel--add select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
}
/* dropdown ผลดำเนินการ กว้างพอให้อ่านข้อความเต็ม ไม่ถูกบีบ */
.ux-unit__ctl { min-width: 210px; }
.ux-unit__ctl .ux-sel { flex: 1 1 auto; min-width: 0; }
@media screen and (max-width: 899px) {
    .ux-unit__ctl { min-width: 0; width: 100%; }
}

/* ============================================================
 * รอบปรับปรุง 10 ส.ค. 2569
 * ============================================================ */

/* ---- การ์ดจัดการเรื่อง: 4 ช่องบรรทัดเดียว (สถานะ / เจ้าภาพ / ความเร็ว / ไทม์ไลน์) ---- */
.ticket--merged .params--block.params {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ticket--merged .params--block.params > .row.ux-tlrow {
    grid-column: auto !important;
    order: 4 !important;
    display: flex !important;
    align-items: flex-end;
}
/* ปุ่มไทม์ไลน์ย่อให้สูงเท่า dropdown ข้างๆ ตัดบรรทัดคำอธิบายออก */
.ticket--merged .ux-tlrow .ux-tlbtn {
    width: 100%;
    min-height: 40px;
    gap: 9px;
    padding: 0 12px;
    border-radius: 10px;
}
.ticket--merged .ux-tlrow .ux-tlbtn__ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}
.ticket--merged .ux-tlrow .ux-tlbtn__ico svg { width: 14px; height: 14px; }
.ticket--merged .ux-tlrow .ux-tlbtn__tx b { font-size: 13.5px; white-space: nowrap; }
.ticket--merged .ux-tlrow .ux-tlbtn__tx i { display: none; }   /* คำอธิบายรอง: ไม่ต้องมีในแถวเดียว */
.ticket--merged .ux-tlrow .ux-tlbtn__go { font-size: 19px; }

@media screen and (max-width: 1279px) {
    .ticket--merged .params--block.params { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 899px) {
    .ticket--merged .params--block.params { grid-template-columns: 1fr !important; }
}

/* ---- ฟอร์มตอบกลับ: dropdown ระดับชั้นความเร็ว มีกรอบชั้นเดียว ---- */
.block--reply .checkbox-custom .dropdown-select,
.block--reply .checkbox-custom .dropdown-select.priority,
.ticket--merged .checkbox-custom .dropdown-select {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    max-width: 260px;
}
/* ใช้ dropdown แบบวิดเจ็ตของธีม (มีกรอบรายการสวย) เหมือนกันทั้งระบบ */

/* ============================================================
 * การ์ด "ตัวเลือกก่อนส่ง" — ให้กรอบ/ช่องไฟเป็นมาตรฐานเดียวกับการ์ดอื่น
 * (การ์ดขาว ขอบ #dde7f5 มุม 16px เงาบาง หัวข้อ 15px มีเส้นคั่น)
 * ============================================================ */
.block--checkboxs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px !important;
    margin: 0 0 16px !important;
    padding: 16px 18px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.block--checkboxs::before {
    content: "ตัวเลือกก่อนส่ง";
    flex: 1 1 100%;
    margin: 0 0 4px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef3fa;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #22314f !important;
}

/* แต่ละตัวเลือก = ชิปทรงเดียวกับปุ่ม/ช่องกรอกของระบบ (สูง 40px มุม 10px) */
.block--checkboxs .checkbox-custom {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.block--checkboxs .checkbox-custom:hover { border-color: #93a6c1 !important; }
.block--checkboxs .checkbox-custom:has(input:checked) {
    border-color: #bcd3f7 !important;
    background: #F5F9FF !important;
    box-shadow: inset 0 0 0 1px #bcd3f7;
}
.block--checkboxs .checkbox-custom label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #51648c !important;
}
.block--checkboxs .checkbox-custom:has(input:checked) label { color: #1e40af !important; }

/* ชิปที่มี dropdown ระดับชั้นความเร็ว — ช่องไฟด้านขวาแคบลงให้พอดีกรอบ */
.block--checkboxs .checkbox-custom:has(.dropdown-select) { padding-right: 6px !important; }
.block--checkboxs .dropdown-select {
    margin: 0 !important;
    max-width: 180px;
}
.block--checkboxs .dropdown-select select,
.block--checkboxs select {
    min-height: 32px !important;
    padding: 0 30px 0 11px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 8px !important;
    background-position: right 7px center !important;
    background-size: 16px !important;
    font-size: 12.5px !important;
}

@media screen and (max-width: 899px) {
    .block--checkboxs { padding: 14px !important; gap: 8px !important; }
    .block--checkboxs .checkbox-custom { flex: 1 1 100%; justify-content: flex-start; }
    .block--checkboxs .checkbox-custom label { white-space: normal; }
    .block--checkboxs .dropdown-select { flex: 1 1 auto; max-width: none; }
}

/* ============================================================
 * สถานะเรื่องร้องเรียน: บังคับบรรทัดเดียวเสมอ
 * ข้อความยาวสุดคือ "เสนอผู้บังคับบัญชาพิจารณา" จึงให้ช่องสถานะกว้างกว่าช่องอื่น
 * และล้มกฎ white-space: normal ของธีมเดิม (footer-credit.css บรรทัด 1122)
 * ============================================================ */
.ticket--merged .params--block.params {
    grid-template-columns: 1.75fr 1fr 1fr 1.05fr !important;
}
.ticket--merged .params--block.params > .row.ts .dropdown-select,
.ticket--merged .params--block.params > .row.ts .value,
.ticket--merged .params--block.params > .row.ts form { min-width: 0; }

/* บรรทัดเดียวเสมอ — แต่ "ห้าม" ใส่ overflow:hidden ที่กล่องครอบ
   เพราะกล่องนั้นคือ .dropdown-select ที่มีรายการตัวเลือก (ul) ซ้อนอยู่ข้างใน
   ถ้าซ่อนส่วนเกิน รายการที่กางออกมาจะถูกตัดจนมองไม่เห็นทั้งหมด
   (นี่คือสาเหตุที่กด dropdown สถานะแล้วไม่มีอะไรแสดง — อาร์มแจ้ง 10 ส.ค. 2569)
   -> ตัดข้อความด้วย … เฉพาะตัวข้อความข้างในเท่านั้น */
.ticket--merged .params--block.params > .row.ts select,
.ticket--merged .params--block.params > .row.ts .dropdown-select > .label,
.ticket--merged .params--block.params > .row.ts .dropdown-select li,
.ticket--merged .params--block.params > .row.ts .value {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
.ticket--merged .params--block.params > .row.ts .dropdown-select > .label > span,
.ticket--merged .params--block.params > .row.ts select {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* กล่องครอบต้องไม่ตัดส่วนเกิน ไม่งั้นรายการตัวเลือกจะถูกซ่อน */
.ticket--merged .params--block.params > .row.ts,
.ticket--merged .params--block.params > .row.ts .value,
.ticket--merged .params--block.params > .row.ts .dropdown-select {
    overflow: visible !important;
}
/* ป้ายหัวช่องก็ห้ามตก 2 บรรทัด */
.ticket--merged .params--block.params > .row.ts .title,
.ticket--merged .params--block.params > .row.ts .title label {
    white-space: nowrap !important;
}
/* รายการตัวเลือกที่กางออกมา ต้องกว้างพอ ไม่ถูกบีบตามความกว้างช่อง */
.ticket--merged .params--block.params > .row.ts .dropdown-select ul {
    min-width: max-content;
    white-space: nowrap !important;
}

@media screen and (max-width: 1279px) {
    .ticket--merged .params--block.params { grid-template-columns: 1.4fr 1fr !important; }
}
@media screen and (max-width: 899px) {
    .ticket--merged .params--block.params { grid-template-columns: 1fr !important; }
}

/* ============================================================
 * มาตรฐาน dropdown แบบวิดเจ็ตของธีม (.dropdown-select) — ใช้ทั้งระบบ
 * ต้นแบบ: "เรื่องนี้ได้รับการมอบหมายให้:"
 *   .label        = ตัวช่องที่เห็นตอนยังไม่กด
 *   .dropdown-list = กรอบรายการที่กางออกมาตอนกด
 * ============================================================ */

/* ---- ตัวช่อง ---- */
.dropdown-select > .label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px !important;
    border: 1px solid #cfdcee !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-family: inherit;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #22314f !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dropdown-select > .label > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.dropdown-select > .label:hover { border-color: #93a6c1 !important; }
.dropdown-select.active > .label {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.dropdown-select > .label .icon-chevron-down {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin: 0 !important;
    fill: #7286a3;
    transition: transform .15s ease;
}
.dropdown-select.active > .label .icon-chevron-down { transform: rotate(180deg); }

/* ---- กรอบรายการที่กางออกมา ---- */
/* margin-top/padding ย้ายไปคุมที่ css/dropdown-unify.css แล้ว
   (ห้ามใส่ !important ที่นี่: jQuery slideUp เขียน padding/margin แบบ inline ตอนย่อ
    ถ้าเราล็อกด้วย !important ลิสต์จะยุบไม่สุด เหลือเป็นแถบบาง ๆ ค้างอยู่) */
.dropdown-select .dropdown-list {
    border: 1px solid #dde7f5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .12) !important;
    max-height: 320px;
    overflow-y: auto;
}
.dropdown-select .dropdown-list > li {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: none !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #51648c !important;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.dropdown-select .dropdown-list > li:hover,
.dropdown-select .dropdown-list > li:focus {
    background: #F1F6FE !important;
    color: #22314f !important;
}
.dropdown-select .dropdown-list > li.selected {
    background: #E7F0FE !important;
    color: #1e40af !important;
}

/* ---- หน่วยดำเนินการ: ใช้วิดเจ็ตเดียวกัน (เลิกจัดทรง select ดิบ) ---- */
.ux-sel { position: relative; }
.ux-sel > .label { min-height: 40px; }
.ux-sel .dropdown-list { min-width: 100%; }
.ux-unit__ctl { min-width: 230px; }

/* ---- ตัวเลือกก่อนส่ง: ย่อวิดเจ็ตให้พอดีในชิป ---- */
.block--checkboxs .dropdown-select > .label {
    min-height: 32px;
    padding: 0 10px !important;
    border-color: #dde7f5 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
}

/* ============================================================
 * ตัวเลือกก่อนส่ง: บังคับให้ชิปทั้งหมดอยู่บรรทัดเดียว
 * flex-basis: 0 + min-width: 0 -> ทุกชิปแบ่งความกว้างกันเอง ไม่ตกบรรทัด
 * (หัวข้อยังกินเต็มบรรทัดบนของตัวเอง)
 * ============================================================ */
.block--checkboxs .checkbox-custom {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}
/* ชิประดับชั้นความเร็วมี dropdown อยู่ข้างใน จึงขอพื้นที่มากกว่าเพื่อน */
.block--checkboxs .checkbox-custom:has(.dropdown-select) { flex: 1.45 1 0 !important; }
.block--checkboxs .checkbox-custom > label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
.block--checkboxs .dropdown-select { flex: 1 1 auto; min-width: 0; max-width: none !important; }

@media screen and (max-width: 1199px) {
    .block--checkboxs .checkbox-custom { flex: 1 1 46% !important; }
    .block--checkboxs .checkbox-custom:has(.dropdown-select) { flex: 1 1 46% !important; }
}
@media screen and (max-width: 899px) {
    .block--checkboxs .checkbox-custom,
    .block--checkboxs .checkbox-custom:has(.dropdown-select) { flex: 1 1 100% !important; }
    .block--checkboxs .checkbox-custom > label { white-space: normal !important; }
}

/* ============================================================
 * ระดับชั้นความเร็ว: ดอทสีตามระดับต้องไม่ถูกกฎมาตรฐานทับ
 * (priority.css กำหนดระยะเว้นซ้ายไว้ให้ดอท — กันไม่ให้ padding มาตรฐานไปทับ)
 * ============================================================ */
.dropdown-select.priority > .label > span {
    position: relative;
    padding-left: 18px !important;
}
.dropdown-select.priority .dropdown-list > li[data-option] {
    padding: 9px 14px 9px 32px !important;
    min-height: 36px;
}
.dropdown-select.priority .dropdown-list > li[data-option]::before {
    left: 13px;
}

/* ============================================================
 * ปรับสัดส่วนชิป: ให้ "เปลี่ยนระดับชั้นความเร็ว" กว้างพอ
 * โดยบีบชิป "ไม่ส่งอีเมลแจ้งผู้ร้อง" ซึ่งไม่มี dropdown อยู่ข้างใน
 * ============================================================ */
.block--checkboxs .checkbox-custom:has(.dropdown-select) { flex: 2 1 0 !important; }
.block--checkboxs .checkbox-custom:has(#no_notify) { flex: .82 1 0 !important; }
.block--checkboxs .checkbox-custom:has(#signature) { flex: .95 1 0 !important; }

/* ---- ข้อความในช่อง dropdown ให้อยู่กึ่งกลางแนวตั้งพอดี ---- */
.dropdown-select > .label > span {
    display: flex;
    align-items: center;
    line-height: 1.2;
}
.dropdown-select.priority > .label > span::before {
    top: 50% !important;
    margin-top: -4.5px !important;
}
.block--checkboxs .dropdown-select > .label {
    display: flex !important;
    align-items: center;
    line-height: 1.2;
}

@media screen and (max-width: 1199px) {
    .block--checkboxs .checkbox-custom:has(.dropdown-select),
    .block--checkboxs .checkbox-custom:has(#no_notify),
    .block--checkboxs .checkbox-custom:has(#signature) { flex: 1 1 46% !important; }
}
@media screen and (max-width: 899px) {
    .block--checkboxs .checkbox-custom:has(.dropdown-select),
    .block--checkboxs .checkbox-custom:has(#no_notify),
    .block--checkboxs .checkbox-custom:has(#signature) { flex: 1 1 100% !important; }
}

/* ============================================================
 * กล่องในหน้า (แทนหน้าต่างป๊อบอัพแยก) — ใช้ซ้ำได้กับกล่องอื่นในอนาคต
 * ============================================================ */
.ux-dlg {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    transition: opacity .18s ease-out;
}
.ux-dlg.is-show { opacity: 1; }
.ux-dlg__box {
    width: 100%;
    max-width: 460px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease-out;
}
.ux-dlg.is-show .ux-dlg__box { transform: none; }
.ux-dlg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef3fa;
}
.ux-dlg__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #22314f;
}
.ux-dlg__x {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid #e6edf7;
    border-radius: 9px;
    background: #fff;
    color: #7286a3;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ux-dlg__x:hover { background: #F1F6FE; color: #22314f; }
.ux-dlg__body { padding: 16px 18px; overflow-y: auto; }
.ux-dlg__load { padding: 18px 0; text-align: center; font-size: 13.5px; color: #93a6c1; }
.ux-dlg__foot {
    padding: 12px 18px 16px;
    border-top: 1px solid #eef3fa;
    text-align: right;
}
.ux-dlg__ok {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.ux-dlg__ok:hover { background: #1d4ed8; }

/* ---- เนื้อหาข้อจำกัดไฟล์ ---- */
.ux-flim { display: grid; gap: 10px; }
.ux-flim__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid #e6edf7;
    border-radius: 12px;
    background: #FAFCFF;
}
.ux-flim__ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #E7F0FE;
    color: #2563eb;
    font-size: 15px;
    font-weight: 800;
}
.ux-flim__row b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #7286a3;
}
.ux-flim__row i {
    display: block;
    margin-top: 1px;
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    color: #22314f;
}
.ux-flim__types {
    padding: 12px 13px;
    border: 1px solid #e6edf7;
    border-radius: 12px;
}
.ux-flim__types > b {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #7286a3;
}
.ux-flim__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-flim__chips span {
    padding: 3px 10px;
    border-radius: 999px;
    background: #F1F6FE;
    color: #3f5680;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---- ระดับชั้นความเร็ว: ย่อแถบ dropdown ให้กะทัดรัด ---- */
.block--checkboxs .checkbox-custom:has(.dropdown-select) { flex: 1.35 1 0 !important; }
.block--checkboxs .checkbox-custom:has(#no_notify) { flex: 1 1 0 !important; }
.block--checkboxs .checkbox-custom:has(#signature) { flex: 1 1 0 !important; }
.block--checkboxs .dropdown-select {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 146px !important;
}
.block--checkboxs .dropdown-select > .label {
    min-height: 30px;
    padding: 0 8px !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 12px !important;
}
.block--checkboxs .dropdown-select > .label .icon-chevron-down { width: 8px; height: 8px; }
.block--checkboxs .dropdown-select.priority > .label > span { padding-left: 15px !important; }
.block--checkboxs .dropdown-select.priority > .label > span::before { width: 8px; height: 8px; margin-top: -4px !important; }
.block--checkboxs .dropdown-select .dropdown-list { min-width: 168px; }

/* ---- แก้หน่วยงานผู้ตอบ (ในหน้าแก้ไขการตอบกลับ) ---- */
.ux-asunit .ux-asrole__lbl em {
    font-style: normal;
    font-weight: 700;
    color: #93a6c1;
}
.ux-sel--unitfix { max-width: 340px; margin-top: 8px; }

/* ============================================================
 * การ์ดตอบกลับของเจ้าหน้าที่หน่วยงาน: เน้นชื่อคน · หน่วยงานเป็นข้อมูลรอง
 * (ผู้บังคับบัญชา/ศูนย์ดำรงธรรมฯ ยังขึ้นชื่อองค์กรก่อนเหมือนเดิม)
 * ============================================================ */
.ux-head2.is-person .ux-head2__primary {
    font-size: 15px;
    font-weight: 800;
    color: #22314f;
}
.ux-head2.is-person .ux-head2__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12.5px;
    color: #7286a3;
}
.ux-head2.is-person .ux-head2__unit {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    background: #F1F6FE;
    color: #51648c;
    font-size: 11.5px;
    font-weight: 700;
}
/* ชื่อคนที่กดแชทได้ ให้เด่นขึ้นเมื่อเป็นบรรทัดหลัก */
.ux-head2.is-person .ux-head2__primary .ux-chat-name {
    color: #22314f;
    cursor: pointer;
}
.ux-head2.is-person .ux-head2__primary .ux-chat-name:hover { color: #2563eb; }
/* รูปโปรไฟล์ใหญ่ขึ้นเล็กน้อย ให้สมกับที่ชื่อคนเป็นตัวเอก */
.ux-head2.is-person .hesk-avatar {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* ============================================================
 * ตัวเลือกก่อนส่ง: ชิปกว้างพอดีข้อความ (เลิกบังคับแบ่งเท่ากัน)
 * ข้อความสั้นลงแล้ว จึงอยู่บรรทัดเดียวได้เองโดยไม่ต้องยืด
 * ============================================================ */
.block--checkboxs .checkbox-custom,
.block--checkboxs .checkbox-custom:has(.dropdown-select),
.block--checkboxs .checkbox-custom:has(#no_notify),
.block--checkboxs .checkbox-custom:has(#signature) {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}
.block--checkboxs .checkbox-custom > label { overflow: visible; }

@media screen and (max-width: 899px) {
    .block--checkboxs .checkbox-custom,
    .block--checkboxs .checkbox-custom:has(.dropdown-select),
    .block--checkboxs .checkbox-custom:has(#no_notify),
    .block--checkboxs .checkbox-custom:has(#signature) { flex: 1 1 100% !important; }
}

/* ============================================================
 * ปุ่มอัปโหลดไฟล์ + ข้อความข้อจำกัด — จัดกึ่งกลาง
 * ============================================================ */
.ux-upload-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    text-align: center;
}
.ux-upload-act .btn.fileinput-button {
    width: auto !important;
    min-width: 220px;
    padding: 0 24px;
}
.ux-upload-act .ux-file-limit-hint {
    margin: 0 !important;
    font-size: 12.5px;
    color: #7286a3;
}
.ux-upload-act > a.link {
    font-size: 12.5px;
    font-weight: 700;
    color: #2563eb !important;
    text-decoration: none;
    border-bottom: 1px dotted #93c5fd;
}

/* ============================================================
 * ตัวเลือกก่อนส่ง: ชิปทั้งแถวเริ่มจากแกนกลาง แล้วขยายออกสองข้าง
 * และ dropdown ในชิปต้องอยู่ในบรรทัดเดียวกัน ไม่หล่นลงล่าง
 * ============================================================ */
.block--checkboxs { justify-content: center !important; }
.block--checkboxs::before { text-align: center; }

.block--checkboxs .checkbox-custom {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
/* ล้างระยะขอบบนที่ทำให้ dropdown ตกลงไปชิดขอบล่างของชิป */
.block--checkboxs .checkbox-custom .dropdown-select,
.block--checkboxs .checkbox-custom .dropdown-select.priority {
    margin: 0 !important;
    align-self: center !important;
    position: relative;
    top: 0;
}
.block--checkboxs .checkbox-custom > label {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    line-height: 1.3;
}
.block--checkboxs .checkbox-custom > input[type="checkbox"] { align-self: center; }

/* ---- ซ่อนชิป "เปลี่ยนระดับชั้นความเร็ว" ในฟอร์มตอบกลับ ----
 * ซ้ำกับช่องระดับชั้นความเร็วในการ์ด "การจัดการเรื่องร้องเรียน" ด้านบน (อาร์มสั่ง)
 * ซ่อนด้วย CSS เท่านั้น ไม่ตัดโค้ดออก -> ช่องติ๊กไม่ถูกเลือก ระบบจึงไม่เปลี่ยนระดับให้เอง */
.block--checkboxs .checkbox-custom:has(.dropdown-select) { display: none !important; }

/* ============================================================
 * "บันทึกเป็นสถานะ" (#submit-as-div) — รายการล้นออกนอกจอด้านซ้าย
 * มีผลทั้งจอคอมและมือถือ (อาร์มสั่ง 10 ส.ค. 2569)
 * ============================================================ */
#submit-as-div { position: relative; }
#submit-as-div > .label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px !important;
    border: 1px solid #cfdcee !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #22314f !important;
    cursor: pointer;
}
#submit-as-div.active > .label {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
/* จุดสำคัญ: ตรึงรายการให้เริ่มจากขอบซ้ายของปุ่ม แล้วกว้างไม่เกินจอ */
#submit-as-div .dropdown-list {
    left: 0 !important;
    right: auto !important;
    transform: none !important;   /* ล้าง translateX(-50%) ของคลาส .center ไม่งั้นลิสต์เลื่อนไปทางซ้าย */
    min-width: 100% !important;
    max-width: min(340px, calc(100vw - 24px)) !important;
    margin-top: 6px !important;
    padding: 6px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14) !important;
    z-index: 130 !important;
}
#submit-as-div .dropdown-list > li {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #51648c !important;
    white-space: normal;
}
#submit-as-div .dropdown-list > li:hover { background: #F1F6FE !important; color: #22314f !important; }
#submit-as-div .dropdown-list > li.selected { background: #E7F0FE !important; color: #1e40af !important; }

/* ============================================================
 * เมนู "บัญชี" ใน dock — ให้เปิดตรงกลางเหนือไอคอน
 * เหมือนแผงแจ้งเตือน (อาร์มสั่ง 10 ส.ค. 2569)
 *
 * เดิม: ยึดขอบขวาของปุ่มบัญชี (right: 0) -> เยื้องไปข้างเดียว
 * ใหม่: ยึดกึ่งกลางปุ่ม แล้วดึงกลับครึ่งหนึ่งของความกว้าง
 *       ใช้วิธีเดียวกับ .hesk-notif__panel ใน dock-nav.css
 * ไฟล์นี้โหลดหลัง dock-nav.css จึงทับค่าเดิมได้
 * ============================================================ */
@media screen and (min-width: 900px) {
    .ux-account-dock .profile__menu {
        left: 50% !important;
        right: auto !important;
        width: 264px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: -132px !important;
        transform-origin: bottom center !important;
    }
    /* ลูกศรเล็กชี้ลงหาไอคอนบัญชี ให้รู้ว่าเมนูนี้มาจากปุ่มไหน */
    .ux-account-dock .profile__menu::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -7px;
        border: 7px solid transparent;
        border-top-color: #fff;
        filter: drop-shadow(0 2px 2px rgba(16, 24, 40, .06));
    }
    /* ปิดตอนยังไม่เปิดเมนู กันลูกศรค้างบนจอ */
    .ux-account-dock:not(.account-open) .profile__menu::after { display: none; }
}

/* ---- ป้าย "แจ้งเตือนครั้งที่ N" บนหัวการ์ดตอบกลับ ---- */
.ux-remind-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 8px;
    background: #FFF4E5;
    color: #9A5B22;
    font-size: 11.5px;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
.ux-asremind .ux-asrole__lbl em { font-style: normal; font-weight: 700; color: #93a6c1; }
.ux-sel--remind { max-width: 220px; margin-top: 8px; }

/* ---- หน้าเจ้าหน้าที่: ช่อง "จัดการ" ไม่ให้ปุ่มล้นออกนอกจอ ---- */
.main__content.team .ux-th-act { width: 1%; white-space: nowrap; text-align: center; }
.main__content.team .ux-td-act { width: 1%; }
.main__content.team .ux-td-act > p {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 !important;
    white-space: nowrap;
}
.main__content.team .ux-td-act a,
.main__content.team .ux-td-act .tooltype { flex: 0 0 auto; margin: 0 !important; }
.main__content.team table { table-layout: auto; }
.main__content.team .table-wrap { overflow-x: auto; }

/* ---- ป้ายมาร์ค "แจ้งเตือนครั้งที่ N" — กดได้บนหัวการ์ด ---- */
a.ux-remind-badge {
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ux-remind-badge.is-set { background: #FFF4E5; color: #9A5B22; }
a.ux-remind-badge.is-set:hover { background: #FFE8CC; color: #7C4A16; }
/* ยังไม่ได้มาร์ค: ปุ่มจาง ๆ ไม่แย่งสายตา แต่หาเจอ */
.ux-remind-badge.is-add {
    background: #F1F6FE;
    color: #7286a3;
    font-weight: 600;
    border: 1px dashed #cfdcee;
}
a.ux-remind-badge.is-add:hover { background: #E7F0FE; color: #2563eb; border-color: #2563eb; }

/* ---- ปุ่มเดียวที่เอาออกมาแทนเมนู "เพิ่มเติม" ---- */
.ux-onlybtn > a,
a.ux-delbtn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px !important;
    border: 1px solid #F0D0CB !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #C0392B !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}
.ux-onlybtn > a:hover,
a.ux-delbtn:hover { background: #FDF2F1 !important; border-color: #E5A9A1 !important; }
.ux-onlybtn > a svg,
a.ux-delbtn svg { width: 15px; height: 15px; fill: #C0392B; }

/* ===== ลิงก์คู่มือการใช้งาน ในหน้าเข้าสู่ระบบ =====
   .login-actions ปกติเป็นกริด 2 คอลัมน์ (ลืมรหัสผ่าน | ลงทะเบียน)
   แถวคู่มือมีปุ่มเดียว จึงต้องบังคับเป็น flex กึ่งกลาง ไม่งั้นจะไปกองซ้าย */
.wrapper.login .login-actions.ux-manual-row,
.ux-manual-row{
    display:flex !important;
    grid-template-columns:none !important;
    justify-content:center !important;
    align-items:center;
    margin-top:10px;
    padding-top:12px;
    border-top:1px solid rgba(148,163,184,.32);
}
.wrapper.login .login-action.ux-manual-link,
a.ux-manual-link{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:auto; min-width:210px; max-width:100%;
    padding:9px 22px;
    font-weight:600; line-height:1.4; text-align:center;
    color:#2563eb; text-decoration:none;
    background:#fff; border:1px solid #dbe3ef; border-radius:999px;
}
.wrapper.login .login-action.ux-manual-link:hover,
a.ux-manual-link:hover{
    background:#eff6ff; border-color:#bfdbfe; text-decoration:none;
}

/* ===== แก้บั๊ก: บนมือถือ กล่อง "แสดงรายเรื่อง / ค้นหาเรื่องร้องเรียนฯ" ไม่แสดง =====
   สาเหตุ: กฎซ่อนตารางเรื่องตอนใช้มุมมองการ์ด
   (body.ux-cards-on .main__content.tickets .table-wrap {display:none})
   ไปโดนพาเนลในหน้าต่างค้นหาที่ใช้คลาส .table-wrap ร่วมกันด้วย */
@media screen and (max-width: 899px) {
    /* คืนพาเนลให้แสดงได้ แต่ต้อง "เคารพสถานะกาง/ยุบ" ของปุ่มหัวข้อ
       (เดิมใช้ display:block !important ทับหมด ทำให้กดยุบไม่ได้เลย) */
    body.ux-cards-on .main__content.tickets .ticket-query-title:has(> [aria-expanded="true"]) + .table-wrap.ticket-query-card,
    body .hesk-search-modal .ticket-query-title:has(> [aria-expanded="true"]) + .table-wrap {
        display: block !important;
    }
    body.ux-cards-on .main__content.tickets .ticket-query-title:has(> [aria-expanded="false"]) + .table-wrap.ticket-query-card,
    body .hesk-search-modal .ticket-query-title:has(> [aria-expanded="false"]) + .table-wrap {
        display: none !important;
    }
}

/* ===== ป๊อบอัพแจ้งเตือนลอย (ใช้ในหน้าล็อกอิน แทนกล่องข้อความในการ์ด) ===== */
.ux-flash-host {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.ux-flash {
    position: static;
    opacity: 1;
    animation-fill-mode: both;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    padding: 11px 16px;
    border-radius: 999px;
    background: #0f2547;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(15, 37, 71, .3);
    pointer-events: auto;
    cursor: pointer;
    animation: ux-flash-in .24s cubic-bezier(.2, .9, .3, 1.2);
}
.ux-flash.is-out { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
.ux-flash__ic { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; }
.ux-flash__ic svg { width: 20px; height: 20px; }
.ux-flash--ok   { background: #12683f; }
.ux-flash--warn { background: #8a5a04; }
.ux-flash--err  { background: #9b1c1c; }
@keyframes ux-flash-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ux-flash { animation: none; }
}

/* ไอคอนคู่มือในหน้าล็อกอิน (วาดด้วย SVG แทน emoji) */
a.ux-manual-link .ux-manual-ic { width: 18px; height: 18px; flex: 0 0 18px; }

/* ===== ตอนพิมพ์: ไม่ต้องมีองค์ประกอบของสกินมือถือ =====
   (แถบหัว/แถบเมนูล่างเป็น fixed จะไปทับเนื้อหาบนกระดาษ) */
@media print {
    .ux-mhead,
    .ux-mtab,
    .nt-appbar,
    .ux-flash-host,
    #ux-cloak-spin { display: none !important; }
    body.has-mhead .main__content,
    body.has-mtab .main__content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ===== ป้าย/ช่องเลือก "การแจ้งเตือน" ระดับเรื่อง (แยกจากสถานะเรื่อง) ===== */
.ux-remind-badge.is-none {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}
/* ในตารางเรื่อง: อยู่คนละบรรทัดกับสถานะ ไม่ให้ดูปนกัน */
.ux-remind-badge--cell {
    display: inline-flex;
    margin-top: 5px;
    font-size: 11px;
    white-space: nowrap;
}
.tickets .ux-remind-badge--cell { display: flex; width: fit-content; }

/* (สไตล์ช่องวันที่อยู่ใน css/new-ticket.css ที่เดียว — บล็อก .param.calendar
   ซึ่งจัด [ไอคอน][ช่องวันที่][ค่าที่เลือก + ปุ่มลบ] เป็นแถวเดียวกันในกรอบเดียว) */

/* =========================================================================
   ช่องไฟระหว่างป้ายชื่อช่องกับกล่องกรอก — เดิมติดกันจนดูอึดอัด
   (ไม่แตะป้ายของ checkbox/radio ซึ่งต้องอยู่บรรทัดเดียวกับปุ่ม)
   ========================================================================= */
html body:not(.cust-help) .main__content .form-group > label,
html body:not(.cust-help) .main__content .param > label,
html body:not(.cust-help) .main__content .param > .title,
html body:not(.cust-help) .main__content .ux-addr-grid > .form-group > label {
    display: block;
    margin-bottom: 7px;
    line-height: 1.4;
}
html body:not(.cust-help) .main__content .checkbox-custom label,
html body:not(.cust-help) .main__content .radio-custom label,
html body:not(.cust-help) .main__content .item--section .checkbox-custom > label {
    display: inline;
    margin-bottom: 0;
}