/*
 * ปรับ UI ส่วน admin: ช่องไฟ layout, ปุ่มมุมขวาบนให้เข้าชุด, ตาราง ticket ไม่ให้ล้นแนวนอน
 * โหลดต่อจาก bento-theme.css
 */

@media screen and (min-width: 900px) {

    /* ===== Task: เพิ่มช่องไฟระหว่างเมนูซ้าย กับ กรอบคอนเทนต์ขวา ===== */
    body:not(.cust-help) .main__content {
        padding-top: 26px !important;
        padding-right: 28px !important;
        padding-bottom: 0 !important;
        padding-left: 32px !important;
    }

    /* ===== Task: จัดปุ่มมุมขวาบนให้เป็นชุดเดียวกัน =====
       เพิ่มเรื่องใหม่ | ร่างเรื่องใหม่ ‖ แจ้งเตือน | เมล  */
    .header__right {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }

    /* ปุ่ม action สองตัว: สูง/มุม/ตัวอักษรเท่ากัน ไม่ตัดบรรทัด */
    .header__right .header-action-btn {
        min-height: 42px !important;
        height: 42px;
        padding: 0 16px !important;
        white-space: nowrap;
    }

    /* กลุ่มไอคอน (แจ้งเตือน/เมล) แยกด้วยเส้นบาง ๆ ให้ดูเป็นหมวด */
    .header__right .profile {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 0 2px;
        padding-left: 14px;
        border-left: 1px solid #dde7f5;
    }

    .header__right .profile__item {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ไอคอนปุ่ม -> กล่องสี่เหลี่ยมมน 42x42 เข้าชุดกับปุ่ม "ร่างเรื่องใหม่" */
    .header__right .profile__item .btn {
        width: 42px;
        height: 42px;
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: 1px solid #dde7f5 !important;
        border-radius: 10px !important;
        background: #fff !important;
        transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
    }

    .header__right .profile__item .btn:hover {
        border-color: #93a6c1 !important;
        background: #fafcff !important;
        transform: translateY(-1px);
    }

    .header__right .profile__item .btn .icon {
        width: 19px;
        height: 19px;
        fill: #3f5680;
    }

    .header__right .profile__item .btn:hover .icon {
        fill: var(--bento-primary, #2563eb);
    }

    /* ป้ายตัวเลข (badge) ของแจ้งเตือน/เมล ให้ลอยมุมขวาบนสวย ๆ ไม่โดนกล่องบัง */
    .header__right .profile__item .profile__item_rel {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header__right .profile__item .badge,
    .header__right .profile__item .hesk-notif__badge {
        top: -9px;
        right: -9px;
    }

    /* ===== Task: ตาราง ticket ไม่ให้ล้นจนต้องเลื่อนขวา ===== */
    .tickets--table-actions .table-wrap {
        overflow-x: auto;            /* คงไว้เป็น safety เผื่อจอแคบจริง ๆ */
    }

    .tickets--table-actions .ticket-list {
        min-width: 0 !important;     /* เดิม 920px -> บังคับให้พอดีกรอบ */
        width: 100% !important;
        table-layout: auto;
        font-size: 12.5px;
    }

    /* หัวตาราง: อ่านได้ในบรรทัดเดียว ไม่ตัดคำ */
    .tickets--table-actions .ticket-list thead th {
        padding: 12px 10px !important;
        white-space: nowrap !important;
        vertical-align: middle;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2;
    }

    .tickets--table-actions .ticket-list thead th .sort span {
        white-space: nowrap;
    }

    /* เนื้อตาราง: ตัดบรรทัดได้ ไม่ดันความกว้าง */
    .tickets--table-actions .ticket-list tbody td {
        padding: 12px 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
    }

    /* เส้นแบ่งคอลัมน์บาง ๆ ให้ดูเป็นระเบียบ */
    .tickets--table-actions .ticket-list th:not(:last-child),
    .tickets--table-actions .ticket-list td:not(:last-child) {
        border-right: 1px solid #f0f1f4;
    }

    .tickets--table-actions .ticket-list thead th:not(:last-child) {
        border-right: 1px solid #e7e9ee;
    }

    /* คอลัมน์หัวเรื่อง: ยืดหยุ่น + กว้างพอประมาณ */
    .tickets--table-actions .ticket-list .subject {
        min-width: 200px !important;
        max-width: none !important;
    }

    /* ช่องเช็กบ็อกซ์/ลำดับ ให้แคบ ไม่กินพื้นที่ */
    .tickets--table-actions .ticket-list .table__first_th {
        width: 38px !important;
    }

    /* ===== หัวตารางจัดกึ่งกลางช่อง ===== */
    .tickets--table-actions .ticket-list thead th {
        text-align: center !important;
    }
    .tickets--table-actions .ticket-list thead th .sort,
    .tickets--table-actions .ticket-list thead th > a {
        justify-content: center !important;
    }

    /* ===== ปรับความกว้างคอลัมน์ให้เหมาะสม =====
       ลำดับ: 1=เช็ก 2=No. 3=วันที่ 4=ID 5=เรื่อง 6=ผู้ร้อง 7=สถานะ 8=หน่วยงาน 9=เจ้าหน้าที่ */

    /* No. / วันที่ / ID / สถานะ : เนื้อหาสั้น -> จัดกลางด้วย */
    .tickets--table-actions .ticket-list td:nth-child(2),
    .tickets--table-actions .ticket-list td:nth-child(3),
    .tickets--table-actions .ticket-list td:nth-child(4),
    .tickets--table-actions .ticket-list td:nth-child(7) {
        text-align: center;
    }

    /* สถานะ (7) — เดิมเล็กไป ขยาย */
    .tickets--table-actions .ticket-list th:nth-child(7),
    .tickets--table-actions .ticket-list td:nth-child(7) {
        min-width: 104px !important;
        white-space: nowrap !important;
    }

    /* หน่วยงานที่เกี่ยวข้อง (8) — เดิมใหญ่ไป ลดลง + ตัดบรรทัด */
    .tickets--table-actions .ticket-list th:nth-child(8),
    .tickets--table-actions .ticket-list td:nth-child(8) {
        width: 200px !important;
        max-width: 200px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* เจ้าหน้าที่ (9) — เดิมเล็กไป ขยาย */
    .tickets--table-actions .ticket-list th:nth-child(9),
    .tickets--table-actions .ticket-list td:nth-child(9) {
        min-width: 130px !important;
    }

    /* ID (4) แคบพอดี */
    .tickets--table-actions .ticket-list th:nth-child(4),
    .tickets--table-actions .ticket-list td:nth-child(4) {
        width: 70px !important;
    }
}

/* ===== ป๊อปอัพค้นหาเรื่องร้องเรียน (แยกฟอร์มค้นหาที่ยาวออกจากหน้า) ===== */
body.hesk-modal-open {
    overflow: hidden;
}

.hesk-list-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
}

/* ร่างเรื่องใหม่ (ซ้าย) + ค้นหา (ขวา) แถวเดียวกัน */
.hesk-list-toolbar--split {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ปุ่ม "ร่างเรื่องใหม่" (ซ้าย) — สไตล์หลักน้ำเงิน */
.hesk-draft-open {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px !important;
    border: 1px solid #2563eb !important;
    border-radius: 10px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.hesk-draft-open .icon {
    width: 17px;
    height: 17px;
    fill: #fff;
}

.hesk-draft-open:hover {
    background: #1565d8 !important;
    border-color: #1565d8 !important;
    transform: translateY(-1px);
}

.hesk-search-open {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #22314f !important;
    font-weight: 700;
}

.hesk-search-open .icon {
    width: 17px;
    height: 17px;
    fill: #3f5680;
}

.hesk-search-open:hover {
    border-color: #93a6c1 !important;
    background: #fafcff !important;
}

.hesk-search-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.hesk-search-modal[hidden] {
    display: none;
}

.hesk-search-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 11, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: heskFadeIn .15s ease;
}

.hesk-search-modal__dialog {
    position: relative;
    width: min(920px, 100%);
    margin: auto;
    overflow: hidden;
    border: 1px solid #dde7f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .24);
    animation: heskModalIn .18s ease;
}

.hesk-search-modal__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #ecf2fb;
    background: #fff;
}

.hesk-search-modal__head h3 {
    margin: 0;
    color: #22314f;
    font-size: 18px;
    font-weight: 800;
}

.hesk-search-modal__close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #7286a3;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.hesk-search-modal__close:hover {
    background: #eff4fc;
    color: #22314f;
}

.hesk-search-modal__body {
    max-height: calc(100vh - 200px);
    padding: 18px 20px 22px;
    overflow-y: auto;
}

@keyframes heskFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes heskModalIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ===== จัดระเบียบฟอร์มในป๊อบอัพค้นหา v2 (อาร์มสั่ง 7 ก.ค. 2026 — เน้นช่องไฟ) =====
 * - เนื้อหา/ปุ่ม ห้ามชิดขอบกรอบ: การ์ดหมวดมี padding 22-24px, แถวปุ่มมีเส้นคั่น+ระยะหายใจ
 * - สองหมวดใหญ่ (แสดงรายเรื่อง / ค้นหาฯ) เป็นการ์ดขาวแยกชัด หัวหมวดใหญ่
 * - แถวเงื่อนไข = ตาราง ป้ายซ้าย/ตัวเลือกขวา · ชิปลิงก์ · checkbox แนวนอน
 * - ตัวเลือกเพิ่มเติม เป็นแผงพื้นอ่อนขอบประ แยกจากส่วนหลักชัดเจน */
.hesk-search-modal__head { padding: 18px 26px; }
.hesk-search-modal__head h3 { font-size: 21px; }

.hesk-search-modal__body {
    padding: 22px 26px 28px !important;
    background: #f5f8fd;
}

/* หัวหมวด */
.hesk-search-modal__body .ticket-query-title { margin: 24px 2px 10px !important; }
.hesk-search-modal__body .ticket-query-title:first-child { margin-top: 0 !important; }
.hesk-search-modal__body .ticket-query-toggle > span:first-child {
    font-size: 17px;
    font-weight: 800;
    color: #22314f;
}

/* การ์ดหมวด: ช่องไฟภายในเหลือเฟือ ไม่มีอะไรชิดขอบ */
.hesk-search-modal__body .ticket-query-card {
    padding: 20px 24px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    overflow: visible !important;
}

/* แถวปุ่ม (แสดงรายเรื่อง / ค้นหาฯ / ตัวเลือกเพิ่มเติม / ยุบคืน): คั่นเส้น + เว้นจากเนื้อหา */
.hesk-search-modal__body .ticket-query-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px !important;
    padding: 16px 2px 2px !important;
    border-top: 1px solid #ecf2fb;
}
.hesk-search-modal__body .ticket-query-actions .btn,
.hesk-search-modal__body .ticket-query-advanced .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px !important;
    border-radius: 11px !important;
    font-size: 14px;
    font-weight: 700 !important;
    width: auto !important;
}
/* ปุ่มหลัก (แสดงรายเรื่อง/ค้นหาฯ) ดำเข้าธีม · ปุ่มรอง ขาวขอบเทา */
.hesk-search-modal__body .btn.btn-full {
    background: #1e3a8a !important;
    border: 1px solid #1e3a8a !important;
    color: #fff !important;
    flex: 0 0 auto !important;
}
.hesk-search-modal__body .btn.btn-full:hover { background: #16233c !important; }
.hesk-search-modal__body .btn.btn--blue-border {
    background: #fff !important;
    border: 1px solid #cfdcee !important;
    color: #3f5680 !important;
}
.hesk-search-modal__body .btn.btn--blue-border:hover {
    border-color: #93a6c1 !important;
    background: #eff4fc !important;
}
.hesk-search-modal__body .btn .icon { width: 15px; height: 15px; fill: currentColor; }

/* แผง "ตัวเลือกเพิ่มเติม": พื้นอ่อน ขอบประ แยกส่วนชัด + ช่องไฟรอบด้าน */
.hesk-search-modal__body .ticket-query-advanced {
    margin-top: 16px;
    padding: 16px 18px 12px !important;
    border: 1px dashed #dcdce0;
    border-radius: 12px;
    background: #fafcff;
}

.hesk-search-modal__body .search-option {
    display: grid;
    grid-template-columns: 175px minmax(0, 1fr);
    gap: 4px 18px;
    align-items: start;
    padding: 15px 6px;
    border-bottom: 1px solid #f2f2f4;
    margin: 0;
}
.hesk-search-modal__body .search-option:last-child { border-bottom: 0; }

.hesk-search-modal__body .search-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #3f5680;
    line-height: 1.5;
    padding-top: 6px;
}
/* ลิงก์ เลือกหมด/ไม่เลือก/สลับ -> ชิปเล็กแนวนอน */
.hesk-search-modal__body .search-name br { display: none; }
.hesk-search-modal__body .search-name .plain_link {
    display: inline-block;
    margin: 6px 4px 0 0;
    padding: 2px 9px;
    border: 1px solid #dde7f5;
    border-radius: 999px;
    background: #fafcff;
    color: #51648c;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
}
.hesk-search-modal__body .search-name .plain_link:hover {
    border-color: #93a6c1;
    color: #22314f;
}

/* กลุ่ม checkbox เป็นชิปแนวนอน */
.hesk-search-modal__body .checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 4px;
}

/* หัวหมวด "ตัวเลือกเพิ่มเติม" จาก data-title */
.hesk-search-modal__body .ticket-query-advanced[data-title]::before {
    content: attr(data-title);
    display: block;
    margin: 16px 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: #22314f;
}

/* select ในป๊อบอัพ (รวม select2) ให้เต็มกว้าง เข้าธีม */
.hesk-search-modal__body select,
.hesk-search-modal__body .select2-container { width: 100% !important; max-width: 420px; }
.hesk-search-modal__body .select2-container--default .select2-selection--single {
    min-height: 42px;
    border: 1px solid #cfdcee;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 8px;
}
.hesk-search-modal__body input[type="text"] {
    width: 100%;
    max-width: 420px;
    min-height: 42px;
    border: 1px solid #cfdcee;
    border-radius: 10px;
    padding: 0 14px;
}

/* ===== dropdown (selectize) ที่พิมพ์ค้นหาได้ — ทำให้เห็นชัดว่าพิมพ์ได้ (อาร์มสั่ง 7 ก.ค.) =====
 * ux-enhance.js ใส่ class .ux-searchable ให้ dropdown ที่ตัวเลือก >= 8 */
/* ตอนกางลิสต์: ช่องพิมพ์กว้างเห็นชัด + placeholder "พิมพ์ค้นหา…" + ค่าเดิมจางลง */
.selectize-control.ux-searchable .selectize-input.dropdown-active input {
    min-width: 160px !important;
    font-size: 13.5px;
    color: #22314f;
}
.selectize-control.ux-searchable .selectize-input.dropdown-active input::placeholder {
    color: #98a2b3;
    opacity: 1;
}
/* ตอนกางลิสต์ = โหมดค้นหา: ซ่อนค่าเดิมชั่วคราว ให้เหลือช่องพิมพ์ชัด ๆ (ปิดลิสต์แล้วค่าเดิมกลับมา) */
.selectize-control.ux-searchable .selectize-input.dropdown-active .item {
    display: none;
}
/* ลูกศรสามเหลี่ยม -> ไอคอนแว่นขยาย ตอนกางลิสต์ (บอกว่าโหมดค้นหา) */
.selectize-control.ux-searchable.single .selectize-input.dropdown-active::after {
    border: 0 !important;
    width: 15px;
    height: 15px;
    margin-top: -7px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='5'/%3E%3Cpath d='M14 14l-4-4'/%3E%3C/svg%3E") center / 15px no-repeat;
}
/* แถบบอกใบ้บนหัวลิสต์ อ่านแล้วรู้ทันทีว่าพิมพ์ได้ */
.selectize-control.ux-searchable .selectize-dropdown::before {
    content: "พิมพ์เพื่อค้นหาได้เลย";   /* ไม่ใช้ emoji ตามกฎบริษัท */
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid #ecf2fb;
    background: #fafcff;
    color: #7286a3;
    font-size: 12px;
    font-weight: 600;
}

/* แถว "ครบกำหนดรายงานผล" (ครบกำหนด ณ / ครบกำหนดใน N วัน) — เดิมคุมด้วย style เก่าจนล้นเฟรม */
.hesk-search-modal__body .search-option:has(#duedate_range) .radio-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hesk-search-modal__body .search-option:has(#duedate_range) .radio-custom {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
.hesk-search-modal__body .search-option:has(#duedate_range) .radio-custom label { white-space: nowrap; }
.hesk-search-modal__body #duedate_amount_value {
    width: 76px !important;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cfdcee;
    border-radius: 10px;
    text-align: center;
}
/* dropdown "วัน/สัปดาห์" ให้กว้างพอดี ไม่ดันจนล้น */
.hesk-search-modal__body .search-option:has(#duedate_range) .selectize-control {
    width: 130px !important;
    min-width: 130px;
    margin: 0 !important;
}
.hesk-search-modal__body .search-option:has(#duedate_range) .param.calendar { display: inline-flex; align-items: center; }

/* ปุ่ม "รีเซ็ตมุมมองเริ่มต้น" เป็นชิปเล็กเข้าธีม (เดิมเป็นลิงก์ในวงเล็บ) */
.hesk-search-modal__body .ux-reset-view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 11px;
    border: 1px solid #dde7f5;
    border-radius: 999px;
    background: #fafcff;
    color: #51648c !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.hesk-search-modal__body .ux-reset-view:hover {
    border-color: #93a6c1;
    background: #eff4fc;
    color: #22314f !important;
}
.hesk-search-modal__body .ux-reset-view::before { content: "↺"; font-size: 13px; }

/* จอเล็ก: ป้ายขึ้นบรรทัดบน */
@media screen and (max-width: 640px) {
    .hesk-search-modal__body .search-option { grid-template-columns: 1fr; }
    .hesk-search-modal__body .search-name { padding-top: 0; }
}

/* หัว "แสดงรายเรื่อง" (ตัวพับฟอร์มรายการ) ให้ใหญ่อ่านง่าย */
.ticket-query-toggle > span:first-child {
    font-size: 18px;
    font-weight: 800;
    color: #22314f;
}

/* ป้ายบอกลิมิตไฟล์แนบ (ใต้ปุ่มอัพโหลด) */
.ux-file-limit-hint {
    margin: 8px 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: #7286a3;
}

/* ===== กล่องพิมพ์ข้อความ (TinyMCE) เข้าธีม — ใช้ทุกหน้าแอดมิน ===== */
.tox-tinymce {
    border: 1px solid #dde7f5 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
    background: #fafcff !important;
    border-bottom: 1px solid #ececef !important;
}
.tox .tox-tbtn {
    border-radius: 8px !important;
    color: #3f5680 !important;
}
.tox .tox-tbtn svg { fill: #51648c !important; }
.tox .tox-tbtn:hover { background: #ececef !important; }
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover { background: #dde7f5 !important; }
.tox .tox-statusbar {
    border-top: 1px solid #ecf2fb !important;
    background: #fff !important;
}
.tox .tox-statusbar a,
.tox .tox-statusbar__branding { display: none !important; }   /* ไม่โชว์แบรนด์ Tiny */

/* ===== ปุ่มกรอง (ผลการกรอง/มอบหมายให้ฉัน/ผู้อื่น/ยังไม่มอบหมาย/ใกล้ครบ/เกินกำหนด/ร่างรอ) ===== */
@media screen and (min-width: 900px) {
    .tickets--table-actions .quick-links .filters__listing {
        display: flex !important;
        flex-wrap: nowrap !important;     /* บรรทัดเดียว */
        gap: 7px;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        padding: 4px;
        border-radius: 12px;
        background: #f6f7f9;              /* แถบแดชบอร์ด */
        overflow-x: auto;                 /* เผื่อจอแคบมาก ค่อยเลื่อน (ปกติพอดี) */
        scrollbar-width: thin;
    }

    .tickets--table-actions .filters__listing .btn {
        flex: 1 1 auto !important;        /* พอดีเนื้อหา + เฉลี่ยพื้นที่ */
        min-width: max-content;           /* ข้อความครบ ไม่ตัด */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: 38px;
        padding: 0 12px !important;
        border-radius: 9px !important;
        background: transparent;
        color: #475467;
        font-size: clamp(11.5px, 0.9vw, 13px) !important;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap !important;   /* ข้อความบรรทัดเดียว เต็ม */
    }

    .tickets--table-actions .filters__listing .btn:hover {
        background: #eef0f3;
        color: #1f2937;
    }

    /* ปุ่มที่เลือกอยู่ = การ์ดขาวเด่น */
    .tickets--table-actions .filters__listing .btn.is-selected {
        background: #fff;
        color: #1d4ed8;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    }

    .tickets--table-actions .filters__listing .btn > span:first-child {
        white-space: nowrap;
    }

    /* ตัวเลขนับ = ป้ายชิป */
    .tickets--table-actions .filters__listing .filters__btn-value {
        flex: 0 0 auto;
        min-width: 20px;
        padding: 1px 7px;
        border-radius: 999px;
        background: #e4e7ec;
        color: #344054;
        font-size: 11px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .tickets--table-actions .filters__listing .btn.is-selected .filters__btn-value {
        background: #2563eb;
        color: #fff;
    }

    /* ปุ่มสีพิเศษ (ใกล้ครบ/เกินกำหนด) คงโทนเตือน */
    .tickets--table-actions .filters__listing .btn.is-due-soon { color: #b54708; }
    .tickets--table-actions .filters__listing .btn.is-overdue { color: #b42318; }

    /* ===== ย่อขนาดแถบ "กระทำกับรายการที่เลือก / มอบหมายที่เลือก" ให้พอดีตามธีม ===== */
    .tickets--table-actions .bulk-actions {
        min-width: min(100%, 460px);
    }

    .tickets--table-actions .bulk-actions__group {
        padding: 7px 9px;
        gap: 8px;
        grid-template-columns: minmax(116px, auto) minmax(0, 1fr);
    }

    .tickets--table-actions .bulk-actions__title {
        font-size: 11.5px;
    }

    .tickets--table-actions .bulk-actions__controls .inline-bottom,
    .tickets--table-actions .bulk-actions__controls .selectize-control {
        min-width: 150px;
    }

    .tickets--table-actions .tickets__legend .btn-full {
        min-width: 92px;
        height: 34px !important;
        font-size: 12.5px;
    }
}

/* ===== แก้ dropdown ของ bulk-actions จมล่างจอ -> เปิดขึ้นบน + จำกัดสูง + เลื่อนได้ ===== */
.tickets__legend .bulk-actions .selectize-control .selectize-input {
    min-height: 34px;
}

.tickets__legend .bulk-actions .selectize-dropdown,
.tickets__legend .bulk-actions .dropdown-list {
    top: auto !important;
    bottom: calc(100% + 6px) !important;   /* เปิดขึ้นด้านบน เพราะอยู่ท้ายหน้า */
    max-height: 280px;
    overflow-y: auto;
}

/* ===== แบรนด์หัวเว็บ (ศูนย์ดำรงธรรมจังหวัดสุรินทร์) ===== */
/* header: ให้แบรนด์อยู่กึ่งกลางจอ */
.header { position: relative; }

.hesk-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 230px);
    padding: 6px 20px 6px 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f6f8fc);
    border: 1px solid #eaeef4;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* โลโก้เหรียญตรากลม — เด่นเหมือน badge */
.hesk-brand__seal {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 3px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 0 0 1px #e7ebf2;
}
.hesk-brand__text { min-width: 0; line-height: 1.25; text-align: left; }
.hesk-brand__title {
    margin: 0;
    color: #0f1b2d;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.hesk-brand__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    white-space: nowrap;
}
.hesk-brand__slogan {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}
.hesk-brand__dot { color: #cbd2dc; font-size: 11px; }
.hesk-brand__sys {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 400;
}

@media screen and (max-width: 760px) {
    .hesk-brand__dot, .hesk-brand__sys { display: none; }   /* จอเล็ก: เหลือสโลแกน */
}
@media screen and (max-width: 640px) {
    .hesk-brand { padding: 5px 14px 5px 6px; gap: 9px; }
    .hesk-brand__seal { width: 36px; height: 36px; }
    .hesk-brand__title { font-size: 15px; white-space: normal; }
    .hesk-brand__sub { white-space: normal; }
}

/* =========================================================================
   ปุ่มกรองสถิติ (เรื่องเปิด/มอบหมาย/ใกล้ครบ/เกินกำหนด) — เอาสีฉูดฉาดออก ให้เข้าธีม
   (ทับ app.css ที่ใส่พื้นเหลือง #ffc / ขอบแดง #e64342 ด้วย !important)
   ========================================================================= */
.tickets--table-actions .filters__listing .btn.is-due-soon,
.tickets--table-actions .filters__listing .btn.is-overdue {
    background-color: transparent !important;
    border: 0 !important;
}
.tickets--table-actions .filters__listing .btn.is-due-soon:hover,
.tickets--table-actions .filters__listing .btn.is-overdue:hover {
    background-color: #f4f5f7 !important;
}
.tickets--table-actions .filters__listing .btn.is-due-soon,
.tickets--table-actions .filters__listing .btn.is-due-soon:hover { color: #b54708 !important; }
.tickets--table-actions .filters__listing .btn.is-overdue,
.tickets--table-actions .filters__listing .btn.is-overdue:hover { color: #b42318 !important; }

/* ป้ายตัวเลขนับ — สีอ่อนตามประเภท (subtle) */
.tickets--table-actions .filters__listing .btn.is-due-soon .filters__btn-value {
    background: #fef0c7 !important;
    color: #b54708 !important;
}
.tickets--table-actions .filters__listing .btn.is-overdue .filters__btn-value {
    background: #fee4e2 !important;
    color: #b42318 !important;
}

/* ที่เลือกอยู่ = การ์ดขาวเงาบาง (ไม่ใช่พื้นเข้มฉูดฉาด) */
.tickets--table-actions .filters__listing .btn.is-due-soon.is-selected,
.tickets--table-actions .filters__listing .btn.is-overdue.is-selected {
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12) !important;
}
.tickets--table-actions .filters__listing .btn.is-due-soon.is-selected .filters__btn-value { background: #b54708 !important; color: #fff !important; }
.tickets--table-actions .filters__listing .btn.is-overdue.is-selected .filters__btn-value { background: #b42318 !important; color: #fff !important; }

/* =========================================================================
   หน้าเจ้าหน้าที่ (manage_users / .main__content.team) — ตารางการ์ดขาวเข้าธีม
   ========================================================================= */
.main__content.team .team__head {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.main__content.team .team__head h2 {
    margin: 0;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #101828 !important;
}
.main__content.team .team__head .btn {
    border: 1px solid #2563eb !important;
    border-radius: 10px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-weight: 700;
    min-height: 42px;
    padding: 0 18px !important;
}
.main__content.team .team__head .btn:hover { background: #1567d8 !important; }

.main__content.team .table-wrap {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.main__content.team #default-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
.main__content.team #default-table thead th {
    padding: 13px 16px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #eaecf0 !important;
    color: #667085 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: nowrap;
}
.main__content.team #default-table tbody td {
    padding: 13px 16px !important;
    border-bottom: 1px solid #f2f4f7 !important;
    color: #344054 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}
.main__content.team #default-table tbody tr:last-child td { border-bottom: 0 !important; }
.main__content.team #default-table tbody tr:hover td { background: #f9fbff !important; }
.main__content.team #default-table tbody td a { color: #1d2939; font-weight: 600; text-decoration: none; }
.main__content.team #default-table tbody td a:hover { color: #2563eb; text-decoration: underline; }
/* ป้ายบทบาท/สถานะให้ดูเป็นชิป */
.main__content.team #default-table .label,
.main__content.team #default-table .badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e7f0fe;
    color: #1456b8;
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================================
   กล่องแจ้งเตือน/หมายเหตุ (.notification) — โทนนุ่มเข้าธีม (ทับสไตล์ HESK เดิม)
   ========================================================================= */
.notification {
    font-family: inherit !important;
    padding: 14px 16px 14px 18px !important;
    border-radius: 12px !important;
    border: 1px solid #eaecf0 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    color: #475467 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
}
.notification::before {
    width: 4px !important;
    border-radius: 12px 0 0 12px;
}
.notification b, .notification strong { color: #1d2939; font-weight: 800; }

.notification.orange { background: #fffaeb !important; border-color: #fde9b8 !important; color: #b54708 !important; }
.notification.orange::before { background: #f79009 !important; }
.notification.orange b { color: #93370d; }
.notification.blue { background: #eff5ff !important; border-color: #d6e4ff !important; color: #1456b8 !important; }
.notification.blue::before { background: #2563eb !important; }
.notification.blue b { color: #1456b8; }
.notification.green { background: #ecfdf3 !important; border-color: #c7f0d8 !important; color: #027a48 !important; }
.notification.green::before { background: #12b76a !important; }
.notification.green b { color: #027a48; }
.notification.red { background: #fef3f2 !important; border-color: #fecdca !important; color: #b42318 !important; }
.notification.red::before { background: #f04438 !important; }
.notification.red b { color: #b42318; }

/* notice-flash ที่เป็น .main__content ตัวถัดมา ไม่ต้องเว้น dock ซ้ำ */
.main__content + .main__content { padding-top: 0 !important; }

/* ===== select2 (เช่น หน่วยดำเนินการ ในหน้าเรื่อง) ให้เข้าธีมเดียวกับ dropdown อื่น ===== */
.select2-container--default .select2-selection--single {
    min-height: 38px !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    padding: 0 6px 0 8px;
    border: 1px solid #cfdcee !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #22314f !important;
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal !important;
    padding-right: 26px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #93a6c1 !important;
}

/* แผงลิสต์ที่กางออก */
.select2-dropdown {
    border: 1px solid #dde7f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .16) !important;
    overflow: hidden;
}
/* ช่องพิมพ์ค้นหาในลิสต์ */
.select2-container--default .select2-search--dropdown { padding: 8px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 36px;
    padding: 0 12px !important;
    border: 1px solid #cfdcee !important;
    border-radius: 9px !important;
    font-family: inherit;
    font-size: 13px;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #51648c !important;
}
/* รายการตัวเลือก */
.select2-results { padding: 4px !important; }
.select2-results__option {
    padding: 9px 12px !important;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #26282a !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #eff4fc !important;
    color: #22314f !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: #fafcff !important;
    font-weight: 800;
}

/* ===== ป๊อบอัพค้นหา: แก้ dropdown โดนบีบ/ตัดคำ (พิสูจน์สดบนเว็บเทสต์ 10 ก.ค. 2026) =====
 * ต้นเหตุ: selectize สืบทอดความกว้างตายตัว (100-130px) จาก <select> เดิมของ HESK */
.hesk-search-modal__body .selectize-control {
    width: 100% !important;
    min-width: 0;
    max-width: 340px;
}
.hesk-search-modal__body .selectize-input {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
}
.hesk-search-modal__body .selectize-input .item { white-space: nowrap; overflow: visible; }
/* แถวครบกำหนด (จำนวน+หน่วย) คงขนาดกะทัดรัดเดิม */
.hesk-search-modal__body .search-option:has(#duedate_range) .selectize-control { width: 130px !important; }

/* จอแคบ: ป้ายหัวข้อขึ้นบรรทัดของตัวเอง กันโดนบีบจนตัวอักษรเรียงตั้ง */
@media screen and (max-width: 760px) {
    .hesk-search-modal__body .search-option { grid-template-columns: 1fr; }
}

/* ช่องพิมพ์ค้นหาใน dropdown โผล่เฉพาะตอนเปิดเท่านั้น
 * (กัน placeholder "พิมพ์ค้นหา…" ล้นมาต่อท้ายค่าเป็นตัวอักษรแปลกๆ + อาการข้อความสั่น) */
.selectize-input:not(.dropdown-active) > input {
    width: 1px !important;
    min-width: 0 !important;
    opacity: 0 !important;
}

/* ===== หน้าโปรไฟล์: จัดกึ่งกลาง + ฟอร์มแสดงในหน้าเลย (เลิกใช้แผงเลื่อนข้าง) ===== */
body:not(.cust-help) .main__content.profile {
    padding: 205px clamp(16px, 4vw, 48px) 190px !important;   /* เว้นบนพ้น header+เมนูลอย และล่างพ้น dock (specificity เท่ากฎ bento แต่โหลดทีหลัง = ชนะ) */
}
.surin-profile-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
    align-items: stretch;
}
@media screen and (max-width: 900px) {
    .surin-profile-grid { grid-template-columns: 1fr; }
}
.surin-profile-grid > .profile__wrapper { margin: 0 !important; }

/* แผง right-bar เดิม -> การ์ดปกติในหน้า เต็มแถว */
.surin-profile-grid .right-bar.is-inline {
    grid-column: 1 / -1;
    position: static !important;
    display: block !important;
    visibility: visible !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff;
    border: 1px solid #dde7f5;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 0;
    z-index: auto !important;
}
.surin-profile-grid .right-bar.is-inline .right-bar__body {
    position: static !important;
    width: auto !important;
    max-width: 640px;
    height: auto !important;
    margin: 0 auto;
    padding: 26px 28px 30px !important;
    overflow: visible !important;
}
/* หัวการ์ด: ตัดลูกศรย้อนกลับ + กันคลิกแล้วแผงถูกซ่อน */
.surin-profile-grid .right-bar.is-inline h3 { margin: 0 0 14px; }
.surin-profile-grid .right-bar.is-inline h3 a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #22314f;
    font-size: 18px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid #22314f;
}
.surin-profile-grid .right-bar.is-inline h3 .icon-back { display: none; }
/* ฉากหลังขาวของ footer แผงเลื่อนข้างเดิม — ถ้าไม่ปิด มันจะกางทับทั้งหน้า (ต้นเหตุหน้าขาวว่าง) */
.surin-profile-grid .right-bar.is-inline .right-bar__footer::before,
.surin-profile-grid .right-bar.is-inline .right-bar__footer::after {
    content: none !important;
    display: none !important;
}
.surin-profile-grid .right-bar.is-inline .right-bar__footer {
    position: static !important;
    padding: 18px 0 0 !important;
    margin-top: 6px;
    border-top: 1px solid #ecf2fb;
    background: none !important;
    box-shadow: none !important;
}
.surin-profile-grid .right-bar.is-inline .right-bar__footer .btn {
    background: #22314f !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 11px !important;
    min-height: 44px;
    font-weight: 700;
    width: auto !important;
    padding: 0 26px !important;
}
.surin-profile-grid .right-bar.is-inline .right-bar__footer .btn:hover { background: #3f5680 !important; }
.surin-profile-grid .right-bar.is-inline .form-group { margin-bottom: 14px; }
.surin-profile-grid .right-bar.is-inline .form-control { border-radius: 10px; }

/* ===== ฟอร์มโปรไฟล์: แสดงทุกหมวดพร้อมกัน ไม่แยกสเต็ป ===== */
.surin-profile-grid .right-bar.is-inline .step-bar { display: none !important; }
.surin-profile-grid .right-bar.is-inline .step-slider {
    display: block !important;
    width: auto !important;
    margin-top: 0 !important;
    transform: none !important;
    overflow: visible !important;
}
.surin-profile-grid .right-bar.is-inline .step-item {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* หัวหมวด (ข้อมูลส่วนตัว / ลายเซ็น / การแจ้งเตือน ฯลฯ) */
.surin-profile-grid .ux-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: #22314f;
}
.surin-profile-grid .ux-sec-head::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: #22314f;
}
.surin-profile-grid .ux-sec-head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #dde7f5;
}
.surin-profile-grid .right-bar.is-inline textarea.form-control { width: 100%; min-height: 120px; border-radius: 10px; }

/* ===== ป้ายแจ้งเตือนแบบฝังในหน้า (notice/info ที่ไม่ใช่ toast) — ทิ้งหน้าตา HESK เดิม ===== */
.main__content .notification.browser-default,
.main__content .notice-flash:not(.notice-flash--event) .notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px !important;
    border: 0 !important;
    border-left: 4px solid #F5A623 !important;
    border-radius: 14px !important;
    background: #FFF9EF !important;
    color: #7A5C1E !important;
    font-size: 13.5px;
    line-height: 1.65;
    box-shadow: 0 1px 3px rgba(23, 43, 77, .05);
}
.main__content .notice-flash:not(.notice-flash--event) .notification.red {
    border-left-color: #D64545 !important;
    background: #FBEAEA !important;
    color: #8C2B2B !important;
}
.main__content .notice-flash:not(.notice-flash--event) .notification.blue {
    border-left-color: #2563eb !important;
    background: #E7F0FE !important;
    color: #1e40af !important;
}
.main__content .notice-flash:not(.notice-flash--event) .notification.green {
    border-left-color: #34A853 !important;
    background: #E3F2E7 !important;
    color: #1F6B33 !important;
}
.main__content .notice-flash:not(.notice-flash--event) .notification b { font-weight: 800; }

/* ===== แผงเพิ่ม/แก้ไขสมาชิก (team-create): กันอาการเปิดแล้วขาวโล่ง + ให้อยู่บนสุดเสมอ ===== */
.right-bar.team-create { z-index: 4200 !important; }
.right-bar.team-create .right-bar__footer::before,
.right-bar.team-create .right-bar__footer::after {
    content: none !important;
    display: none !important;
}
/* มือถือ: แผงเต็มจอแบบชีท เลื่อนได้ ปุ่มไม่โดนแถบล่างบัง */
@media screen and (max-width: 899px) {
    .right-bar.team-create {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }
    .right-bar.team-create .right-bar__body {
        width: auto !important;
        max-width: none !important;
        padding: 20px 16px 140px !important;
    }
    .right-bar.team-create .right-bar__footer {
        position: sticky !important;
        bottom: 0;
        background: #fff !important;
        padding: 12px 0 !important;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .06) !important;
    }
}

/* ===== ป้ายกำหนดรายงานผล ในคอลัมน์สถานะ — แถบคล้ายปุ่ม โทนพาสเทล ===== */
.ux-status-cell { white-space: normal !important; }
.ux-due-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
}
/* พาสเทล: ครบวันนี้ = พีช · ใกล้ครบ = ครีมเหลือง · ยังมีเวลา = ฟ้าอ่อน */
.ux-due-badge.is-today { background: #FFE8D6; color: #9A5B22; }
.ux-due-badge.is-soon  { background: #FFF4CC; color: #8A6A15; }
.ux-due-badge.is-ok    { background: #DCEAFB; color: #2F5A8F; }
/* เกินกำหนด = แดงเน้น (ข้อยกเว้นเดียว) */
.ux-due-badge.is-over  { background: #E03B3B; color: #fff; box-shadow: 0 2px 8px rgba(224, 59, 59, .25); }

/* คอลัมน์กำหนดรายงานผล (คอลัมน์ท้าย หลังชื่อเจ้าหน้าที่) */
.ux-due-th { white-space: nowrap; }
.ux-due-th .sort { cursor: default; }
.ux-due-cell { white-space: nowrap; text-align: center; }
.ux-due-cell .ux-due-badge { margin-top: 0; }
.ux-due-none { color: #C7CEDB; font-size: 13px; }
/* รายงานผลเข้ามาแล้วในรอบนี้ — เขียวพาสเทล */
.ux-due-badge.is-done { background: #DFF3E4; color: #2C6E49; }

/* ============================================================
   หน้าเจ้าหน้าที่ (manage_users) — ธีมสไตล์ trip (pastel iOS)
   การ์ดขาวมน ช่องไฟกว้าง เส้นคั่นบาง ป้ายบทบาทเป็น pill
   ============================================================ */
body .main__content.team { background: #F2F3F5; padding: 22px clamp(14px, 3vw, 32px) 90px !important; }
body .main__content.team h2 { font-size: 20px; font-weight: 800; color: #1C1C1E; }

/* ปุ่มเพิ่มสมาชิก = pill ฟ้า iOS */
body .main__content.team [data-action="team-create"] {
    min-height: 44px;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #007AFF !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 122, 255, .25);
}
body .main__content.team [data-action="team-create"]:hover { background: #0069DE !important; }

/* กล่องตาราง = การ์ดขาวมน */
body .main__content.team .table-wrap {
    background: #fff !important;
    border: 0 !important;
    border-radius: 24px !important;
    padding: 6px 4px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04) !important;
    overflow-x: auto;
}
body .main__content.team table { border-collapse: separate; border-spacing: 0; width: 100%; }

/* หัวตาราง: เบา ไม่มีพื้นหนัก */
body .main__content.team thead th {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #F0F0F2 !important;
    padding: 14px 18px !important;
    color: #98989D !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: left;
    white-space: nowrap;
}

/* แถว: ช่องไฟกว้าง เส้นคั่นบาง hover ฟ้าจาง */
body .main__content.team tbody td {
    border: 0 !important;
    border-bottom: 1px solid #F5F5F7 !important;
    padding: 15px 18px !important;
    font-size: 14px;
    color: #1C1C1E;
    vertical-align: middle;
    background: transparent !important;
}
body .main__content.team tbody tr:last-child td { border-bottom: 0 !important; }
body .main__content.team tbody tr:hover td { background: #F8FAFF !important; }

/* ชื่อ + รูป */
body .main__content.team tbody td:first-child { font-weight: 700; }
body .main__content.team .avatar,
body .main__content.team .user__ava,
body .main__content.team img.avatar {
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px #F0F4FA;
}

/* ป้ายบทบาท (ผู้ดูแลระบบ / เจ้าหน้าที่) เป็น pill พาสเทล */
body .main__content.team tbody td:nth-child(5) {
    font-size: 12.5px;
    font-weight: 700;
}
body .main__content.team .role-pill,
body .main__content.team .badge {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 999px;
    background: #E5F1FF;
    color: #007AFF;
    font-size: 12px;
    font-weight: 700;
}

/* ปุ่มการกระทำ (แก้ไข/ลบ) = วงกลมเบาๆ */
body .main__content.team td a.edit,
body .main__content.team td a.delete,
body .main__content.team td .actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F5F6F8;
    margin: 0 3px;
    transition: background .15s;
}
body .main__content.team td a.edit:hover { background: #E5F1FF; }
body .main__content.team td a.delete:hover { background: #FBEAEA; }
body .main__content.team td a.edit .icon { fill: #007AFF; }
body .main__content.team td a.delete .icon { fill: #D64545; }

/* สถานะออนไลน์ */
body .main__content.team .icon.is-online { fill: #34A853 !important; }
body .main__content.team .icon.is-offline { fill: #D1D1D6 !important; }

/* หัวข้อ/ตัวคั่นส่วน */
body .main__content.team section.team__head,
body .main__content.team .table__head {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 14px !important;
}

/* มือถือ: ตารางเลื่อนแนวนอนได้ลื่น + ช่องไฟกระชับ */
@media screen and (max-width: 899px) {
    body .main__content.team { padding: 16px 12px 110px !important; }
    body .main__content.team .table-wrap { border-radius: 18px !important; -webkit-overflow-scrolling: touch; }
    body .main__content.team table { min-width: 720px; }
    body .main__content.team thead th { padding: 12px 14px !important; }
    body .main__content.team tbody td { padding: 13px 14px !important; font-size: 13.5px; }
}

/* หัวกลุ่มหน่วยงาน + ป้ายบทบาท ในหน้าเจ้าหน้าที่ */
body .main__content.team tbody tr.ux-group-row td {
    background: #F8FAFF !important;
    border-bottom: 1px solid #EDF2FA !important;
    padding: 11px 18px !important;
}
body .main__content.team tbody tr.ux-group-row:hover td { background: #F8FAFF !important; }
body .main__content.team .ux-group-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: #007AFF;
    letter-spacing: .01em;
}
body .main__content.team .ux-group-name::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #007AFF;
}
body .main__content.team .ux-role {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 999px;
    background: #F0F0F2;
    color: #6B6B70;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
body .main__content.team .ux-role.is-admin { background: #E5F1FF; color: #007AFF; }

/* ป้ายความคืบหน้าหน่วยงานร่วม (คอลัมน์กำหนดรายงาน) */
.ux-unit-badge {
    display: block;
    margin-top: 5px;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}
.ux-unit-badge b { font-weight: 800; }
.ux-unit-badge.is-none { background: #F0F4FA; color: #51648c; }
.ux-unit-badge.is-part { background: #FFF4CC; color: #8A6A15; }
.ux-unit-badge.is-all  { background: #DFF3E4; color: #2C6E49; }

/* ป้ายเตือน "ค้างรับเรื่อง" (เรื่องเข้าใหม่เกินเกณฑ์) */
.ux-due-badge.is-newlate {
    background: #4B5563;
    color: #fff;
    margin-bottom: 5px;
    display: block;
}

/* คอลัมน์กำหนดรายงาน: ป้ายเดียว + ป้ายหน่วยงานเล็กลง ไม่ให้ตารางรก */
.ux-due-cell .ux-unit-badge {
    margin-top: 4px;
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 700;
    opacity: .95;
}
.ux-due-badge { max-width: 100%; }

/* หน้าเจ้าหน้าที่: ขยายช่องชื่อ-นามสกุล (หลังซ่อนคอลัมน์ RATING) */
body .main__content.team .ux-th-name { min-width: 220px; }
body .main__content.team tbody td:first-child {
    min-width: 220px;
    white-space: nowrap;
}
body .main__content.team tbody td:nth-child(2) { min-width: 170px; }   /* หน่วยงาน */
@media screen and (max-width: 899px) {
    body .main__content.team .ux-th-name,
    body .main__content.team tbody td:first-child { min-width: 170px; }
}

/* =========================================================================
   กล่องข้อความของระบบ (แจ้งเตือน / สำเร็จ / ผิดพลาด / หมายเหตุ) — ออกแบบใหม่
   อาร์มแจ้ง 10 ส.ค. 2569: "ไม่พบข้อมูลที่ตรงตามเงื่อนไขครับ!" ยังเป็นธีมเก่า

   ของเดิม (app.css) เป็นแถบสี่เหลี่ยมมีขีดสีหนา 8px ชิดซ้าย + เงาเข้ม
   ของใหม่: การ์ดมนตามธีมระบบ + ไอคอนวงกลมประจำชนิดข้อความ
   ใช้ ::before ที่มีอยู่แล้วมาแปลงเป็นไอคอน จึงไม่ต้องแก้ HTML ที่ใดเลย
   -> มีผลทุกหน้าที่เรียก hesk_show_notice / error / success / info
   ========================================================================= */
.notice-flash {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.notification {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    padding: 18px 20px !important;
    border: 1px solid #dde7f5 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    color: #51648c !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}
.notification b,
.notification strong {
    display: block;
    margin-bottom: 2px;
    color: #22314f !important;
    font-size: 15.5px;
    font-weight: 800 !important;
}

/* ขีดสีเดิม -> ไอคอนวงกลมประจำชนิด */
.notification::before {
    content: "" !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}

/* หมายเหตุ / ไม่พบข้อมูล — ส้มอ่อน */
.notification.orange {
    border-color: #F5DFB8 !important;
    background: #FFFBF3 !important;
    color: #8A6A15 !important;
}
.notification.orange b { color: #7C5E12 !important; }
.notification.orange::before {
    background-color: #FFF0D6 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7791F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") !important;
}

/* ข้อมูลทั่วไป — ฟ้าตามธีมหลัก */
.notification.blue {
    border-color: #cfe0fb !important;
    background: #F5F9FF !important;
    color: #3f5680 !important;
}
.notification.blue b { color: #1e40af !important; }
.notification.blue::before {
    background-color: #E7F0FE !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>") !important;
}

/* สำเร็จ — เขียว */
.notification.green {
    border-color: #BFE6CE !important;
    background: #F3FBF6 !important;
    color: #2C6E49 !important;
}
.notification.green b { color: #22603F !important; }
.notification.green::before {
    background-color: #DFF3E4 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6E49' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") !important;
}

/* ผิดพลาด — แดง */
.notification.red {
    border-color: #F3C9C4 !important;
    background: #FDF5F4 !important;
    color: #B4231C !important;
}
.notification.red b { color: #9B1C16 !important; }
.notification.red::before {
    background-color: #FBEAEA !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8v5M12 17h.01'/><path d='M10.3 3.9L2.6 17a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z'/></svg>") !important;
}

/* จอเล็ก */
@media screen and (max-width: 899px) {
    .notification { padding: 15px 16px !important; gap: 12px; font-size: 14px !important; }
    .notification::before { width: 34px !important; height: 34px !important; background-size: 19px 19px !important; }
    .notification b, .notification strong { font-size: 14.5px; }
}

/* ---- กรอบที่ห่อกล่องข้อความ ----
   hesk_show_notice() ห่อข้อความไว้ใน <div class="main__content notice-flash">
   ซึ่งไปกินกฎของ .main__content ที่ dock-nav.css ตั้ง padding-top: 190px ไว้
   (ระยะเว้นให้แถบเมนูด้านบน) ผลคือกล่องข้อความลอยห่างจากเนื้อหา ~190px
   และห่างกันเอง ~300px จนดูเหมือนหลุดจากหน้า
   -> กล่องข้อความไม่ต้องเว้นระยะแถบบนซ้ำ ยกเว้นตอนที่มันเป็นชิ้นแรกของหน้าจริงๆ */
html body:not(.cust-help) .main__content.notice-flash {
    padding: 0 28px 0 32px !important;
    margin: 0 !important;
    min-height: 0 !important;
}
html body:not(.cust-help) .main__content.notice-flash:first-of-type {
    padding-top: 190px !important;
}
html body:not(.cust-help) .main__content.notice-flash .notification {
    margin-bottom: 12px !important;
}

@media screen and (max-width: 899px) {
    html body:not(.cust-help) .main__content.notice-flash {
        padding: 0 14px !important;
    }
    html body:not(.cust-help) .main__content.notice-flash:first-of-type {
        padding-top: calc(var(--tp-head-h, 60px) + 12px) !important;
    }
}

/* =========================================================================
   หน้าโปรไฟล์ — ออกแบบใหม่ตามภาพตัวอย่างที่อาร์มส่งมา (10 ส.ค. 2569)
   ใช้ทั้งหน้าจอคอมพิวเตอร์และมือถือ

   โครง: การ์ดหัว (รูป + ชื่อ + อีเมล + ปุ่มหลัก)
         -> รายการหัวข้อเป็นแถวการ์ด (ไอคอนซ้าย · ลูกศรขวา)
         -> เนื้อหาของหัวข้อในการ์ดขาว
   ปุ่มใช้มุมมนสี่เหลี่ยม ไม่ใช้แคปซูล (ตามที่อาร์มสั่งไว้)
   ========================================================================= */

/* คอลัมน์เดียว จัดกึ่งกลาง เหมือนหน้าแอปในตัวอย่าง */
body:not(.cust-help) .main__content .surin-profile-grid {
    display: block !important;
    width: 100%;
    max-width: 640px;
    margin: 0 auto !important;
}
body:not(.cust-help) .main__content .surin-profile-grid > * { margin-bottom: 14px !important; }

/* พื้นหลังไล่สีอ่อนด้านบน */
body:not(.cust-help) .main__content:has(.surin-profile-grid) {
    background: linear-gradient(180deg, #E7F0FE 0%, #F5F8FD 300px) !important;
}

/* ---------- การ์ดหัวโปรไฟล์ ---------- */
body:not(.cust-help) .main__content .surin-profile-card {
    padding: 24px 22px 22px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07) !important;
}
body:not(.cust-help) .main__content .surin-profile-card:first-of-type { text-align: center; }
body:not(.cust-help) .main__content .surin-profile-summary {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
body:not(.cust-help) .main__content .surin-profile-avatar {
    width: 96px !important;
    height: 96px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff !important;
    border-radius: 50% !important;
    background: #F2F3F5 !important;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .12) !important;
    overflow: hidden;
}
body:not(.cust-help) .main__content .surin-profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}
body:not(.cust-help) .main__content .surin-profile-avatar span {
    font-size: 34px;
    font-weight: 700;
    color: #2563eb;
}
body:not(.cust-help) .main__content .profile__info_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}
body:not(.cust-help) .main__content .surin-profile-card .surin-profile-eyebrow {
    margin: 13px 0 0 !important;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: .3px;
    color: #8E8E93 !important;
}
body:not(.cust-help) .main__content .surin-profile-card:first-of-type h3 {
    margin: 3px 0 5px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1C1C1E !important;
}
body:not(.cust-help) .main__content .surin-profile-card .info--mail a {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #8E8E93 !important;
    text-decoration: none !important;
    word-break: break-all;
}
body:not(.cust-help) .main__content .surin-profile-card .surin-profile-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px !important;
    padding: 5px 13px;
    border-radius: 9px;
    background: #F2F3F5;
    color: #5B6270 !important;
    font-size: 12.5px !important;
    font-weight: 600;
}
body:not(.cust-help) .main__content .surin-profile-card .surin-profile-meta::before {
    content: "";
    width: 15px; height: 15px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M5 20v-1a5 5 0 015-5h4a5 5 0 015 5v1'/></svg>") center/contain no-repeat;
}

/* ปุ่มหลักในการ์ดหัว */
body:not(.cust-help) .main__content .surin-profile-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 18px !important;
    padding: 0 !important;
}
body:not(.cust-help) .main__content .profile-log-out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 26px;
    border: 0 !important;
    border-radius: 14px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
    transition: background-color .15s ease;
}
body:not(.cust-help) .main__content .profile-log-out:hover { background: #1d4ed8 !important; }
body:not(.cust-help) .main__content .profile-log-out .icon { width: 17px; height: 17px; fill: #fff; }

/* ---------- รายการหัวข้อ: แท็บเดิม -> แถวการ์ด ---------- */
body:not(.cust-help) .main__content .step-bar {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 640px;
    margin: 18px auto 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    list-style: none;
    overflow: visible !important;
}
body:not(.cust-help) .main__content .step-bar li {
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100% !important;
    min-height: 62px;
    margin: 0 !important;
    padding: 0 16px 0 14px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .06) !important;
    color: #1C1C1E !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease;
}
body:not(.cust-help) .main__content .step-bar li:hover { box-shadow: 0 4px 18px rgba(16, 24, 40, .10) !important; }
body:not(.cust-help) .main__content .step-bar li:active { transform: scale(.995); }
body:not(.cust-help) .main__content .step-bar li::before {
    content: "";
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 12px;
    background-color: #E7F0FE;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px 21px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
}
body:not(.cust-help) .main__content .step-bar li::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B4BD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
}
body:not(.cust-help) .main__content .step-bar li.active,
body:not(.cust-help) .main__content .step-bar li.current,
body:not(.cust-help) .main__content .step-bar li.is-active {
    box-shadow: 0 0 0 1.5px #2563eb, 0 2px 12px rgba(16, 24, 40, .06) !important;
    color: #2563eb !important;
}

/* ไอคอนประจำหัวข้อ: ข้อมูลส่วนตัว · ลายเซ็น · ที่ชื่นชอบ · การแจ้งเตือน · สิทธิ์ */
body:not(.cust-help) .main__content .step-bar li:nth-child(1)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1'/></svg>");
}
body:not(.cust-help) .main__content .step-bar li:nth-child(2)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17c3-1 4-5 7-5s3 3 5 3 3-2 6-3'/><path d='M4 20h16'/></svg>");
}
body:not(.cust-help) .main__content .step-bar li:nth-child(3)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4l2.3 4.9 5.2.7-3.8 3.6.9 5.3L12 16l-4.6 2.5.9-5.3L4.5 9.6l5.2-.7z'/></svg>");
}
body:not(.cust-help) .main__content .step-bar li:nth-child(4)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M10.5 21a2 2 0 003 0'/></svg>");
}
body:not(.cust-help) .main__content .step-bar li:nth-child(5)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 4v5c0 4.5-3 8-7 9-4-1-7-4.5-7-9V7z'/></svg>");
}

/* ---------- เนื้อหาของแต่ละหัวข้อ ---------- */
body:not(.cust-help) .main__content .step-slider {
    width: 100%;
    max-width: 640px;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
body:not(.cust-help) .main__content .step-item {
    padding: 20px 18px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .06) !important;
}
body:not(.cust-help) .main__content .step-item .form-group { margin-bottom: 16px !important; }
body:not(.cust-help) .main__content .step-item > label,
body:not(.cust-help) .main__content .step-item .form-group > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #8E8E93;
}

@media screen and (max-width: 899px) {
    body:not(.cust-help) .main__content .surin-profile-card { padding: 22px 18px 20px !important; }
    body:not(.cust-help) .main__content .surin-profile-avatar { width: 88px !important; height: 88px !important; }
    body:not(.cust-help) .main__content .surin-profile-card:first-of-type h3 { font-size: 20px !important; }
    body:not(.cust-help) .main__content .step-bar li { min-height: 58px; font-size: 14.5px !important; }
}

/* ---- (เลิกใช้) บล็อกบังคับจัดกึ่งกลางการ์ดหัวโปรไฟล์ ----
   หน้าโปรไฟล์ย้ายไปใช้เลย์เอาต์ bento ใน css/profile.css แล้ว
   กฎชุดนี้ใช้ !important + specificity สูง จึงล็อกการ์ดให้เป็นแนวตั้งกึ่งกลางตลอด แก้ที่อื่นไม่ขึ้น */

/* =========================================================================
   เมนู "บัญชี" (ป๊อปอัพเมื่อกดที่ชื่อผู้ใช้ใน dock) — ออกแบบใหม่
   อาร์มแจ้ง 10 ส.ค. 2569: ปุ่มดูโปรไฟล์กับออกจากระบบยังไม่สวย

   ของเดิม: ปุ่มมีกรอบยัดอยู่ในกล่อง + ลิงก์ออกจากระบบจัดกึ่งกลาง
            ดูเป็น "ปุ่มซ้อนอยู่ในป๊อปอัพ" ไม่เข้ากับที่อื่นในระบบ
   ของใหม่: แถวเมนูแบบเดียวกับหน้าโปรไฟล์ (ไอคอนซ้าย · ข้อความ · ลูกศรขวา)
            แถวออกจากระบบเป็นสีแดงและไม่มีลูกศร เพราะเป็นการกระทำ ไม่ใช่การไปหน้าอื่น
   ========================================================================= */
html body .sidebar-account .profile__menu {
    padding: 6px !important;
    border: 1px solid #e6edf7 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .14) !important;
    overflow: hidden;
}

/* กล่องห่อเดิมไม่ต้องมีระยะขอบของตัวเอง */
html body .sidebar-account .profile--view,
html body .sidebar-account .profile--logout {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
/* เส้นคั่นระหว่างกลุ่มนำทางกับกลุ่มการกระทำ */
html body .sidebar-account .profile--logout {
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px solid #f0f3f8 !important;
}

/* แถวเมนู — ใช้ทรงเดียวกันทั้งสองแถว */
html body .sidebar-account .profile--view a,
html body .sidebar-account .profile--logout a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;
    justify-content: flex-start !important;
    transition: background-color .13s ease;
}

/* ไอคอนในกล่องมน */
html body .sidebar-account .profile--view a::before,
html body .sidebar-account .profile--logout a::before {
    content: "";
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 9px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
}
html body .sidebar-account .profile--view a::before {
    background-color: #E7F0FE;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1'/></svg>");
}
html body .sidebar-account .profile--logout a::before {
    background-color: #FBEAEA;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 17l5-5-5-5'/><path d='M20 12H9'/><path d='M12 20H6a2 2 0 01-2-2V6a2 2 0 012-2h6'/></svg>");
}

/* ลูกศรเฉพาะแถวที่พาไปหน้าอื่น */
html body .sidebar-account .profile--view a::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 16px; height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B4BD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
}

/* สี + สถานะชี้ */
html body .sidebar-account .profile--view a { color: #22314f !important; }
html body .sidebar-account .profile--view a:hover { background: #F1F6FE !important; }
html body .sidebar-account .profile--logout a { color: #C0392B !important; }
html body .sidebar-account .profile--logout a:hover { background: #FDF2F1 !important; }

/* ไอคอนเดิมของธีม (svg ในลิงก์) ไม่ใช้แล้ว — ใช้ไอคอนจาก ::before แทน */
html body .sidebar-account .profile--logout a .icon,
html body .sidebar-account .profile--logout a svg { display: none !important; }
html body .sidebar-account .profile--view a .icon,
html body .sidebar-account .profile--view a svg { display: none !important; }
/* เอฟเฟกต์ ripple ของธีมเดิมไม่ต้องมีในแถวเมนู */
html body .sidebar-account .profile__menu .ripple--container { display: none !important; }

/* ---- กล่องข้อความ: หัวข้อต้องไม่ถูกบีบจนแตกทีละตัวอักษร ----
   .notification เป็น flex row -> <b> กลายเป็น flex item ที่ยุบตัวได้
   บนจอแคบจึงถูกบีบจนตัวอักษรตกบรรทัดทีละตัว ("E / r / r / o / r")
   หัวข้อสั้นอยู่แล้ว จึงล็อกไม่ให้ยุบและไม่ให้ตัดคำ */
.notification b,
.notification strong {
    flex: 0 0 auto !important;
    display: inline !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
}
.notification { flex-wrap: wrap; row-gap: 2px; }

/* ---- แก้ตามที่วัดจากเบราว์เซอร์ ----
   footer-credit.css มีกฎ `.profile__menu .profile--view .btn` (3 คลาส) ใส่พื้นไล่สีน้ำเงิน
   ซึ่งน้ำหนักสูงกว่ากฎก่อนหน้าของเรา -> แถว "ดูโปรไฟล์" ยังเป็นปุ่มน้ำเงิน
   และ .btn มี overflow:hidden ทำให้ข้อความถูกไอคอนบัง
   -> เพิ่ม .profile__menu เข้าไปในตัวเลือกเพื่อให้น้ำหนักสูงกว่า */
html body .sidebar-account .profile__menu .profile--view a,
html body .sidebar-account .profile__menu .profile--view a.btn,
html body .sidebar-account .profile__menu .profile--view a.btn-border {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    color: #22314f !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-shadow: none !important;
    justify-content: flex-start !important;
    min-height: 48px;
    padding: 0 10px !important;
    border-radius: 11px !important;
}
html body .sidebar-account .profile__menu .profile--view a:hover,
html body .sidebar-account .profile__menu .profile--view a.btn:hover {
    background: #F1F6FE !important;
    background-image: none !important;
    color: #22314f !important;
}
html body .sidebar-account .profile__menu .profile--logout a { overflow: visible !important; }

/* ไอคอนของแถวเมนูต้องกินพื้นที่จริง (ธีมเดิมตั้ง .btn::before เป็น absolute
   ทำให้ไอคอนลอยทับตัวหนังสือ ข้อความจึงถูกบังไปครึ่งคำ) */
html body .sidebar-account .profile__menu .profile--view a::before,
html body .sidebar-account .profile__menu .profile--logout a::before {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    content: "" !important;
}

/* =========================================================================
   เมนูบัญชี: เพิ่มแถว "คู่มือการใช้งาน" (๒๖ ส.ค. ๒๕๖๙)
   เมนูรูปโปรไฟล์มี ๓ แถว = โปรไฟล์ · คู่มือการใช้งาน · ออกจากระบบ
   ลิงก์คู่มือเปลี่ยนตามสิทธิ์ (แอดมิน -> manual.php · สมาชิกทั่วไป -> manual_user.php)
   ใช้ทรงเดียวกับแถว "โปรไฟล์" ทุกประการ เปลี่ยนแค่ไอคอนเป็นรูปหนังสือ
   ========================================================================= */
html body .sidebar-account .profile--manual {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
html body .sidebar-account .profile__menu .profile--manual a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;
    justify-content: flex-start !important;
    color: #22314f !important;
    transition: background-color .13s ease;
}
html body .sidebar-account .profile__menu .profile--manual a:hover {
    background: #F1F6FE !important;
}
/* ไอคอนหนังสือในกล่องมน — ต้องกินพื้นที่จริง ไม่ลอยทับตัวหนังสือ */
html body .sidebar-account .profile__menu .profile--manual a::before {
    content: "" !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 9px;
    background-color: #EAF3EC;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23207A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5A1.5 1.5 0 0 1 5.5 4H10a2.5 2.5 0 0 1 2 1 2.5 2.5 0 0 1 2-1h4.5A1.5 1.5 0 0 1 20 5.5v12a1.5 1.5 0 0 1-1.5 1.5H14a2.5 2.5 0 0 0-2 1 2.5 2.5 0 0 0-2-1H5.5A1.5 1.5 0 0 1 4 17.5z'/><path d='M12 6v14'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
}
/* ลูกศรขวา (เป็นแถวที่พาไปหน้าอื่น เหมือนแถวโปรไฟล์) */
html body .sidebar-account .profile__menu .profile--manual a::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 16px; height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B4BD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
}
html body .sidebar-account .profile__menu .profile--manual a .icon,
html body .sidebar-account .profile__menu .profile--manual a svg { display: none !important; }

/* ============================================================
   เมนูบัญชี: แถว "ตั้งค่า · เครื่องมือผู้ดูแล" (แอดมินเท่านั้น)
   หน้าตาเหมือนแถวคู่มือการใช้งาน ต่างที่ไอคอนเฟืองสีน้ำเงิน
   (อาร์มสั่ง ๑ ก.ย. ๒๕๖๙)
   ============================================================ */
html body .sidebar-account .profile--tools {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
html body .sidebar-account .profile__menu .profile--tools a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;
    justify-content: flex-start !important;
    color: #22314f !important;
    transition: background-color .13s ease;
}
html body .sidebar-account .profile__menu .profile--tools a:hover { background: #F1F6FE !important; }
html body .sidebar-account .profile__menu .profile--tools a::before {
    content: "" !important;
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 9px;
    background-color: #E8F0FF;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.2'/><path d='M12 2.6v3M12 18.4v3M2.6 12h3M18.4 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}
html body .sidebar-account .profile__menu .profile--tools a::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 16px; height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B4BD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
}
html body .sidebar-account .profile__menu .profile--tools a .icon,
html body .sidebar-account .profile__menu .profile--tools a svg { display: none !important; }