/* ============================================================
 * mobile-trip.css — สกินมือถือ ระบบศูนย์ดำรงธรรมจังหวัดสุรินทร์
 *
 * กฎเหล็ก: ทุกบรรทัดอยู่ใน @media screen and (max-width: 899px) เท่านั้น
 *          หน้าจอคอมพิวเตอร์ไม่ถูกแตะโดยโครงสร้าง
 *
 * บทเรียนรอบก่อน (10 ส.ค. 2569):
 *   app.css ตั้ง body { display: flex } ไว้
 *   แถบหัว .ux-mhead ถูก appendChild เข้า body โดยตรง
 *   ถ้าไม่ถอดมันออกจากการไหลของ flex มันจะกลายเป็น "คอลัมน์ข้าง"
 *   แย่งความกว้างจากเนื้อหา -> ทั้งหน้าถูกบีบเหลือแถบแคบ ๆ ทางซ้าย
 *   จึงต้องรีเซ็ตโครงเป็น block ก่อนเสมอ แล้วค่อยจัดสไตล์
 * ============================================================ */

@media screen and (max-width: 899px) {

    :root {
        --tp-bg: #F2F3F5;
        --tp-card: #FFFFFF;
        --tp-primary: #2563eb;
        --tp-primary-dark: #1d4ed8;
        --tp-primary-soft: #E7F0FE;
        --tp-text: #1C1C1E;
        --tp-text-2: #8E8E93;
        --tp-line: #EDEFF3;
        --tp-green: #34A853;
        --tp-red: #D64545;
        /* มุมมน: การ์ดใหญ่ / กล่องย่อย / ปุ่ม-ช่องกรอก / ป้ายเล็ก
           ไม่ใช้ 999px ที่ไหนอีก — อาร์มสั่ง "ไม่เอาวงรี" */
        --tp-r-card: 20px;
        --tp-r-box: 14px;
        --tp-r-ctl: 12px;
        --tp-r-chip: 9px;
        --tp-shadow: 0 2px 12px rgba(16, 24, 40, .06);
        --tp-head-h: 60px;
        --tp-tab-h: 68px;
    }

    /* ============================================================
     * 0) รีเซ็ตโครงหน้า — ต้องมาก่อนทุกอย่าง
     * ============================================================ */
    html, body { max-width: 100%; overflow-x: hidden; }

    body:not(.cust-help) {
        display: block !important;      /* ยกเลิก flex ของ app.css กันคอลัมน์แปลกปลอมแย่งที่ */
        width: 100% !important;
        background: var(--tp-bg) !important;
        color: var(--tp-text);
    }
    body:not(.cust-help) .wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        background: var(--tp-bg) !important;
    }
    body:not(.cust-help) main.main,
    body:not(.cust-help) .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--tp-bg) !important;
    }
    /* เมนูข้างของจอคอม: ไม่ใช้บนมือถือ (มีแถบล่างแทน) */
    body:not(.cust-help) .main-menu,
    body:not(.cust-help) .header,
    body:not(.cust-help) .right-bar:not(.is-inline) { display: none !important; }
    /* แถบเครดิตยังต้องแสดง (อาร์มสั่งไว้ตั้งแต่รอบเดสก์ท็อป) — ย่อให้พอดีมือถือ */
    body:not(.cust-help) .footer {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 14px calc(var(--tp-tab-h) + 20px) !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--tp-text-2) !important;
        font-size: 11.5px !important;
        line-height: 1.7;
        text-align: center;
    }
    body:not(.cust-help) .footer * { font-size: 11.5px !important; }
    /* หน้าไหนมีแถบเครดิตแล้ว เนื้อหาไม่ต้องเว้นที่ให้แถบเมนูซ้ำ */
    body:not(.cust-help).has-mtab .main__content:has(+ .footer) { padding-bottom: 14px !important; }

    body:not(.cust-help) .main__content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: calc(var(--tp-head-h) + 14px) 14px calc(var(--tp-tab-h) + 26px) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* ทุกอย่างห้ามล้นออกนอกจอ */
    body:not(.cust-help) .main__content * { max-width: 100%; }
    body:not(.cust-help) .main__content img { height: auto; }

    body:not(.cust-help) .main__content > h1,
    body:not(.cust-help) .main__content > h2 {
        margin: 0 2px 14px !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.4;
        color: var(--tp-text) !important;
    }

    /* ============================================================
     * 1) แถบหัว — fixed เท่านั้น (sticky ใช้ไม่ได้เพราะเป็นลูกของ body)
     * ============================================================ */
    .ux-mhead {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 80;
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100% !important;
        min-height: var(--tp-head-h);
        margin: 0 !important;
        padding: 8px 14px calc(8px + env(safe-area-inset-top, 0px)) !important;
        border-radius: 0 !important;
        background: var(--tp-card) !important;
        box-shadow: 0 1px 10px rgba(16, 24, 40, .07) !important;
    }
    .ux-mhead img,
    .ux-mhead .hesk-brand img { flex: 0 0 auto; height: 34px; width: auto; }
    .ux-mhead .hesk-brand {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-width: 0;
        margin: 0 !important;
        text-decoration: none !important;
    }
    .ux-mhead__txt,
    .ux-mhead .hesk-brand__txt {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .ux-mhead__txt b,
    .ux-mhead .hesk-brand b {
        font-size: 14px;
        font-weight: 700;
        color: var(--tp-text);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ux-mhead__txt span,
    .ux-mhead .hesk-brand span {
        font-size: 11px;
        color: var(--tp-text-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ============================================================
     * 2) แถบเมนูล่าง
     * ============================================================ */
    .ux-mtab {
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        display: flex !important;
        align-items: stretch;
        width: 100%;
        min-height: var(--tp-tab-h);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 !important;
        background: var(--tp-card);
        box-shadow: 0 -1px 12px rgba(16, 24, 40, .08);
    }
    .ux-mtab__item,
    .ux-mtab__slot {
        flex: 1 1 0;
        min-width: 0;
    }
    .ux-mtab__item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px !important;
        border-radius: var(--tp-r-chip) !important;
        background: none !important;
        color: var(--tp-text-2) !important;
        font-size: 10px;
        font-weight: 600;
        text-decoration: none !important;
    }
    /* ไฮไลต์อยู่ใต้ไอคอนเท่านั้น — ไม่ทำวงกลมทับทั้งปุ่ม */
    .ux-mtab__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 28px;
        border-radius: 10px;
        transition: background-color .15s ease;
    }
    .ux-mtab__item svg { width: 20px; height: 20px; }
    .ux-mtab__item.is-current { color: var(--tp-primary) !important; }
    .ux-mtab__item.is-current .ux-mtab__icon { background: var(--tp-primary-soft); }
    .ux-mtab__item--account img {
        width: 22px; height: 22px;
        border-radius: 50%;
        object-fit: cover;
    }
    .ux-mtab__slot { display: flex; align-items: center; justify-content: center; }

    /* ============================================================
     * 3) การ์ดกลาง — ทุกกล่องในระบบทรงเดียวกัน
     * ============================================================ */
    body:not(.cust-help) .main__content .params--block,
    body:not(.cust-help) .main__content .params--bar,
    body:not(.cust-help) .main__content .block--reply,
    body:not(.cust-help) .main__content .ux-units,
    body:not(.cust-help) .main__content .block--checkboxs,
    body:not(.cust-help) .main__content .ticket__body_block,
    body:not(.cust-help) .main__content .table-wrap,
    body:not(.cust-help) .main__content .tickets__legend,
    body:not(.cust-help) .main__content .ux-sumpage__head,
    body:not(.cust-help) .main__content .ux-periodbar,
    body:not(.cust-help) .main__content .ux-sumsheet,
    body:not(.cust-help) .main__content .wiz-panel,
    body:not(.cust-help) .main__content .wiz-steps,
    body:not(.cust-help) .main__content .card {
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 16px !important;
        border: 0 !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }

    /* ============================================================
     * 4) ปุ่ม / ช่องกรอก — สี่เหลี่ยมมุมมน ไม่ใช่วงรี
     * ============================================================ */
    body:not(.cust-help) .main__content .btn,
    body:not(.cust-help) .main__content .btn-full,
    body:not(.cust-help) .main__content .btn-border,
    body:not(.cust-help) .main__content input[type="submit"],
    body:not(.cust-help) .main__content button[type="submit"],
    body:not(.cust-help) .main__content .ux-btn-print,
    body:not(.cust-help) .main__content .ux-btn-table,
    body:not(.cust-help) .main__content .ux-btn-debug,
    body:not(.cust-help) .main__content .ux-btn-ghost {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 18px !important;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-primary) !important;
        color: #fff !important;
        font-family: inherit;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: none !important;
    }
    body:not(.cust-help) .main__content .btn-border,
    body:not(.cust-help) .main__content .ux-btn-table,
    body:not(.cust-help) .main__content .ux-btn-ghost {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
    }
    body:not(.cust-help) .main__content .ux-btn-debug {
        background: var(--tp-bg) !important;
        color: #6B6B70 !important;
    }
    body:not(.cust-help) .main__content .btn .icon,
    body:not(.cust-help) .main__content .btn svg { flex: 0 0 auto; width: 17px; height: 17px; }

    body:not(.cust-help) .main__content input[type="text"],
    body:not(.cust-help) .main__content input[type="email"],
    body:not(.cust-help) .main__content input[type="tel"],
    body:not(.cust-help) .main__content input[type="number"],
    body:not(.cust-help) .main__content input[type="date"],
    body:not(.cust-help) .main__content input[type="password"],
    body:not(.cust-help) .main__content input[type="search"],
    body:not(.cust-help) .main__content textarea,
    body:not(.cust-help) .main__content .form-control {
        display: block;
        width: 100% !important;
        min-height: 46px;
        padding: 11px 14px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        font-family: inherit;
        font-size: 16px !important;   /* 16px กัน iOS ซูมเองตอนจิ้มช่อง */
        line-height: 1.5;
        color: var(--tp-text) !important;
        box-shadow: none !important;
    }
    body:not(.cust-help) .main__content input:focus,
    body:not(.cust-help) .main__content textarea:focus,
    body:not(.cust-help) .main__content .form-control:focus {
        outline: 0 !important;
        border-color: var(--tp-primary) !important;
        background: #fff !important;
    }
    body:not(.cust-help) .main__content textarea { min-height: 120px; }

    /* dropdown ของธีม */
    body:not(.cust-help) .main__content .dropdown-select {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    body:not(.cust-help) .main__content .dropdown-select > .label {
        width: 100%;
        min-height: 46px !important;
        padding: 0 14px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        font-size: 15px !important;
        color: var(--tp-text) !important;
    }
    body:not(.cust-help) .main__content .dropdown-select.active > .label {
        border-color: var(--tp-primary) !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    body:not(.cust-help) .main__content .dropdown-select .dropdown-list {
        width: 100%;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        box-shadow: 0 10px 30px rgba(16, 24, 40, .16) !important;
    }
    body:not(.cust-help) .main__content .dropdown-select .dropdown-list > li {
        min-height: 44px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
    }
    body:not(.cust-help) .main__content select:not(.select2-hidden-accessible):not(.selectized) {
        width: 100% !important;
        min-height: 46px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: var(--tp-r-ctl) !important;
        background-color: var(--tp-bg) !important;
        font-size: 16px !important;
    }

    /* ป้ายกำกับช่องกรอก */
    body:not(.cust-help) .main__content .form-group > label,
    body:not(.cust-help) .main__content .row > .title,
    body:not(.cust-help) .main__content .row > .title label {
        display: block;
        width: 100%;
        margin: 0 0 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        white-space: normal !important;
    }
    body:not(.cust-help) .main__content .form-group { margin-bottom: 14px !important; }

    /* ============================================================
     * 5) รายการเรื่องร้องเรียน
     * ============================================================ */
    .ux-tcards {
        display: grid !important;
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ux-tcard {
        display: block;
        width: 100% !important;
        padding: 15px !important;
        border: 0 !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
        color: inherit;
        text-decoration: none !important;
    }
    .ux-tcard__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }
    .ux-tcard__id {
        padding: 3px 9px;
        border-radius: var(--tp-r-chip);
        background: var(--tp-bg);
        color: var(--tp-text-2);
        font-size: 11.5px;
        font-weight: 700;
    }
    .ux-tcard__st {
        flex: 0 1 auto;
        padding: 3px 10px;
        border-radius: var(--tp-r-chip);
        background: var(--tp-primary-soft);
        color: var(--tp-primary);
        font-size: 11.5px;
        font-weight: 700;
        text-align: right;
        line-height: 1.5;
    }
    .ux-tcard__title {
        margin: 0 0 3px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }
    .ux-tcard__by { font-size: 12.5px; color: var(--tp-text-2); overflow-wrap: anywhere; }
    .ux-tcard__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }
    .ux-tcard__grid > * {
        max-width: 100%;
        padding: 4px 9px;
        border-radius: var(--tp-r-chip);
        background: var(--tp-bg);
        color: #5B5B60;
        font-size: 11.5px;
        font-weight: 600;
        overflow-wrap: anywhere;
    }
    .ux-tcard__foot {
        margin-top: 10px;
        padding-top: 9px;
        border-top: 1px solid var(--tp-line);
        font-size: 11.5px;
        color: var(--tp-text-2);
    }

    /* ปุ่มด้านบนหน้ารายการ + ชิปกรอง */
    body:not(.cust-help) .tickets__legend {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    body:not(.cust-help) .tickets__legend a {
        display: inline-flex;
        align-items: center;
        width: auto !important;
        min-height: 36px;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: var(--tp-bg) !important;
        color: #5B5B60 !important;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none !important;
    }
    body:not(.cust-help) .tickets__legend a.is-active,
    body:not(.cust-help) .tickets__legend a.active {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
    }

    /* ============================================================
     * 6) หน้ารายละเอียดเรื่อง
     * ============================================================ */
    .ticket--merged .ux-topline {
        display: block !important;
        margin-bottom: 12px;
    }
    /* หมายเหตุ: การจัดวางแถวบน (มอบหมาย + ปุ่มแก้ไข/พิมพ์/ลบ) ย้ายไปทำที่หมวด 22.1
       ซึ่งวางทั้งสองส่วนไว้บรรทัดเดียวกัน — บล็อกนี้เหลือไว้เฉพาะที่ไม่ขัดกัน */
    .ticket--merged .ux-topline .assignment-highlight {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .ticket--merged .ux-topline .assignment-highlight::before { display: none; }
    .ticket--merged .params--block.params {
        display: block !important;
        grid-template-columns: none !important;
    }
    .ticket--merged .params--block.params > .row {
        display: block !important;
        width: 100%;
        margin: 0 0 14px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    .ticket--merged .params--block.params > .row:last-child { margin-bottom: 0 !important; }
    .ticket--merged .params--block.params .ux-section-title {
        margin: 0 0 12px !important;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--tp-line);
        font-size: 16px !important;
    }
    /* แถบปุ่มดำเนินการ: เลื่อนแนวนอนในการ์ด */
    .ticket--merged .params--bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 12px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ticket--merged .params--bar::-webkit-scrollbar { display: none; }
    .ticket--merged .params--bar > a,
    .ticket--merged .params--bar > .dropdown {
        flex: 0 0 auto;
        width: auto !important;
        min-height: 38px;
        padding: 0 14px !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        color: #5B5B60 !important;
        font-size: 13px;
        white-space: nowrap;
    }
    /* ปุ่มพิมพ์ไทม์ไลน์ */
    .ticket--merged .ux-tlbtn {
        width: 100%;
        min-height: 46px;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        border: 0 !important;
    }
    .ticket--merged .ux-tlbtn__ico { width: 28px; height: 28px; border-radius: 8px; }

    /* การ์ดตอบกลับ */
    .ticket--merged .ux-head2 { gap: 10px; }
    .ticket--merged .ux-head2__primary { font-size: 14.5px !important; }
    .ticket--merged .ux-head2__meta { font-size: 12px !important; }

    /* หน่วยดำเนินการ */
    .ux-units__head { gap: 8px; }
    .ux-unit {
        display: block !important;
        width: 100%;
        padding: 13px !important;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-bg) !important;
    }
    .ux-unit__info { display: block; }
    .ux-unit__ctl { display: flex; gap: 8px; width: 100%; min-width: 0; margin-top: 10px; }
    .ux-unit__ctl .ux-sel { flex: 1 1 auto; min-width: 0; }
    .ux-unit__del { flex: 0 0 auto; width: 46px !important; height: 46px !important; border-radius: var(--tp-r-ctl) !important; }
    .ux-units__add { display: block !important; }
    .ux-units__add .ux-sel--add { width: 100%; margin-bottom: 8px; }

    /* ตัวเลือกก่อนส่ง */
    .block--checkboxs { justify-content: flex-start !important; }
    .block--checkboxs .checkbox-custom {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 46px !important;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
    }
    .block--checkboxs .checkbox-custom:has(input:checked) {
        background: var(--tp-primary-soft) !important;
        box-shadow: none !important;
    }
    .block--checkboxs .checkbox-custom:has(input:checked) label { color: var(--tp-primary) !important; }
    .block--checkboxs::before { text-align: left; }

    /* ============================================================
     * 7) ร่างเรื่องใหม่ (wizard)
     * ============================================================ */
    .wiz-steps {
        display: flex !important;
        gap: 8px;
        padding: 12px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .wiz-steps::-webkit-scrollbar { display: none; }
    .wiz-step {
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        width: auto !important;
        min-height: 36px;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        color: #5B5B60 !important;
        font-family: inherit;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }
    .wiz-step__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px; height: 20px;
        border-radius: 6px;
        background: #D6D6DB;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }
    .wiz-step.is-active, .wiz-step.active {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
    }
    .wiz-step.is-active .wiz-step__num, .wiz-step.active .wiz-step__num { background: var(--tp-primary); }
    .wiz-step.is-done .wiz-step__num { background: var(--tp-green); }
    .wiz-step__label { display: none; }   /* บนมือถือใช้เลขอย่างเดียว ไม่ให้แถบยาวเกิน */
    .wiz-step.is-active .wiz-step__label,
    .wiz-step.active .wiz-step__label { display: inline; }

    .wiz-close {
        position: static !important;
        flex: 0 0 auto;
        width: 36px !important;
        height: 36px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        color: #5B5B60 !important;
    }
    .wiz-panel__title {
        margin: 0 0 14px !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid var(--tp-line) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-align: left !important;
        color: var(--tp-text) !important;
    }
    .wiz-panel fieldset,
    .wiz-panel .inner-box { border: 0 !important; background: none !important; padding: 0 !important; }
    /* แถบปุ่มท้าย wizard: อยู่ในสายเนื้อหา ไม่ลอยทับช่องกรอก */
    .wiz-foot {
        position: static !important;
        display: flex !important;
        gap: 10px;
        width: 100%;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    .wiz-foot > * { flex: 1 1 0; width: auto !important; }
    .wiz-spacer { display: none !important; }

    /* ============================================================
     * 8) แชท
     * ============================================================ */
    body:not(.cust-help) .main__content.chat-page {
        padding: var(--tp-head-h) 0 var(--tp-tab-h) !important;
    }
    .chat {
        display: block !important;
        width: 100% !important;
        height: calc(100vh - var(--tp-head-h) - var(--tp-tab-h)) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--tp-bg) !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    .chat__list {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: 100%;
        border: 0 !important;
        background: var(--tp-bg) !important;
    }
    .chat.is-thread .chat__list,
    body.ux-chat-thread .chat__list { display: none !important; }
    .chat__list_head {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px !important;
        border: 0 !important;
        background: var(--tp-bg) !important;
    }
    .chat__list_head h3 { margin: 0 !important; font-size: 19px !important; font-weight: 700 !important; }
    .chat__new-btn {
        flex: 0 0 auto;
        width: 40px !important;
        height: 40px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-primary) !important;
        color: #fff !important;
    }
    .chat__new-btn svg { stroke: #fff !important; }
    .chat__search { padding: 0 14px 10px !important; }
    .chat__search input {
        width: 100% !important;
        min-height: 44px;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-card) !important;
        font-size: 16px !important;
    }
    .chat__convs { flex: 1 1 auto; padding: 0 14px 14px !important; overflow-y: auto; }
    .chat__conv {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-bottom: 8px;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }
    .chat__conv.is-active { background: var(--tp-primary-soft) !important; }
    .chat__ava { flex: 0 0 auto; }

    .chat__thread { display: none; }
    .chat.is-thread .chat__thread,
    body.ux-chat-thread .chat__thread {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: 100%;
        border: 0 !important;
        background: var(--tp-bg) !important;
    }
    .chat__thread_head {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--tp-line) !important;
        background: var(--tp-card) !important;
    }
    .chat__back {
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: var(--tp-r-ctl);
        background: var(--tp-bg);
    }
    .chat__msgs { flex: 1 1 auto; overflow-y: auto; padding: 12px !important; }
    .chat__composer {
        flex: 0 0 auto;
        display: flex !important;
        align-items: flex-end;
        gap: 8px;
        padding: 10px 12px !important;
        border: 0 !important;
        border-top: 1px solid var(--tp-line) !important;
        background: var(--tp-card) !important;
    }
    .chat__composer textarea {
        flex: 1 1 auto;
        min-height: 44px !important;
        max-height: 120px;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        font-size: 16px !important;
    }
    .chat__composer button,
    .chat__composer .btn {
        flex: 0 0 auto;
        width: 46px !important;
        height: 46px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
    }

    /* ============================================================
     * 9) หน้ารายงาน
     * ============================================================ */
    .main__content.metta-report .container,
    .main__content.metta-report .container-fluid,
    .main__content.metta-report .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .main__content.metta-report [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin-bottom: 12px;
    }
    .ux-report-btns { display: block !important; }
    .ux-report-btns > * { margin-bottom: 8px; }
    .ux-maker {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0 0 12px !important;
        padding: 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }
    .ux-maker__ava {
        flex: 0 0 auto;
        width: 42px; height: 42px;
        border-radius: var(--tp-r-ctl);
        background: var(--tp-primary);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 700;
    }
    .ux-maker__txt { display: flex; flex-direction: column; min-width: 0; }
    .ux-maker__txt small { font-size: 11.5px; color: var(--tp-text-2); }
    .ux-maker__txt strong { font-size: 15px; font-weight: 700; }
    .ux-scope {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 12px !important;
        padding: 11px 14px !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
        font-size: 12.5px !important;
    }
    .ux-scope b { white-space: normal; }
    .ux-periodbar {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ux-periodbar::-webkit-scrollbar { display: none; }
    .ux-pbtn {
        flex: 0 0 auto;
        width: auto !important;
        min-height: 36px;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: var(--tp-bg) !important;
        color: #5B5B60 !important;
        font-weight: 600;
        white-space: nowrap;
    }
    .ux-pbtn.is-active { background: var(--tp-primary-soft) !important; color: var(--tp-primary) !important; }
    .ux-customrange { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; }
    .ux-sumsheet { padding: 8px !important; overflow-x: auto; }
    .ux-sumtable { min-width: 700px; }

    /* ============================================================
     * 10) โปรไฟล์ / เจ้าหน้าที่
     * ============================================================ */
    .surin-profile-grid {
        display: block !important;
        width: 100%;
    }
    .surin-profile-grid > .profile__wrapper,
    .surin-profile-grid .right-bar.is-inline,
    .profile__wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 16px !important;
        border: 0 !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }
    .profile__wrapper * { overflow-wrap: anywhere; }
    .surin-profile-grid .right-bar.is-inline h3 {
        margin: 0 0 12px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    body .main__content.team table { min-width: 620px; }
    body .main__content.team .table-wrap { padding: 8px !important; overflow-x: auto; }
    body .main__content.team thead th {
        border: 0 !important;
        background: var(--tp-bg) !important;
        color: var(--tp-text-2) !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    body .main__content.team tbody td {
        border: 0 !important;
        border-bottom: 1px solid var(--tp-line) !important;
        font-size: 13.5px;
    }
    body .main__content.team tbody tr.ux-group-row td {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
        font-weight: 700 !important;
    }

    /* ============================================================
     * 11) กล่องในหน้า -> แผ่นเลื่อนขึ้นจากล่าง
     * ============================================================ */
    .ux-dlg { align-items: flex-end; padding: 0; }
    .ux-dlg__box {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        border-radius: var(--tp-r-card) var(--tp-r-card) 0 0;
        transform: translateY(100%);
        transition: transform .24s cubic-bezier(.32, .72, 0, 1);
    }
    .ux-dlg.is-show .ux-dlg__box { transform: none; }
    .ux-dlg__head { position: relative; padding-top: 22px; }
    .ux-dlg__head::before {
        content: "";
        position: absolute;
        top: 9px; left: 50%;
        width: 38px; height: 4px;
        margin-left: -19px;
        border-radius: 4px;
        background: #D6D6DB;
    }
    .ux-dlg__foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .ux-dlg__ok { width: 100%; min-height: 46px; border-radius: var(--tp-r-ctl); }

    /* ============================================================
     * 12) เบ็ดเตล็ด
     * ============================================================ */
    .ux-upload-act .btn.fileinput-button { width: 100% !important; min-width: 0; }
    .dropzone {
        border: 2px dashed #DCE1E9 !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-bg) !important;
    }
    /* ปุ่มกลับขึ้นบน ยกให้พ้นแถบเมนู */
    .ux-top-btn, #uxScrollTop, .scroll-top { bottom: calc(var(--tp-tab-h) + 14px) !important; }
    /* ตารางที่ยังไม่ถูกแปลงเป็นการ์ด: เลื่อนแนวนอนแทนดันหน้าเบี้ยว */
    body:not(.cust-help) .main__content .table-wrap { overflow-x: auto; }
    /* หน้าเข้าสู่ระบบของผู้ร้อง (ไม่มีเมนู) */
    body.cust-help .main__content { padding-bottom: 30px !important; }

    /* ============================================================
     * 13) แก้จากการทดสอบจริงบนเครื่อง (10 ส.ค. 2569)
     *     ทุกข้อยืนยันด้วยการวัดค่าจากเบราว์เซอร์ ไม่ได้เดา
     * ============================================================ */

    /* --- 13.1 หัวเว็บของจอคอมยังโผล่ทับแถบหัวมือถือ ทำให้เห็นเป็นแถบขาวว่าง ---
       footer-credit.css มีกฎ `body .wrapper header.header { display:block !important }`
       ซึ่งน้ำหนักสูงกว่ากฎเดิมของเรา จึงต้องเจาะจงให้สูงกว่า */
    html body:not(.cust-help) .wrapper header.header,
    html body:not(.cust-help) .wrapper .header,
    html body:not(.cust-help) header.header {
        display: none !important;
    }

    /* --- 13.2 ตัวกรองเรื่อง: เรียงแนวนอนเป็นชิป ไม่ใช่เรียงลงมาเต็มความกว้าง --- */
    html body:not(.cust-help) .main__content .tickets__legend {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center;
    }
    html body:not(.cust-help) .main__content .tickets__legend > a {
        flex: 0 1 auto !important;
        width: auto !important;
        min-height: 38px;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: var(--tp-bg) !important;
        color: #5B6270 !important;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
    }
    html body:not(.cust-help) .main__content .tickets__legend > a.is-active,
    html body:not(.cust-help) .main__content .tickets__legend > a.active {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
    }

    /* --- 13.3 wizard: ปุ่มปิดล้นออกนอกจอและทับเลขขั้นตอน ---
       เดิมแถบเลื่อนแนวนอนแล้วปุ่ม × ไหลตามไปจนหลุดขอบ
       แก้: ซ่อนชื่อขั้นตอน เหลือเลข -> ทั้ง 5 ขั้น + ปุ่มปิด พอดีจอ ไม่ต้องเลื่อน */
    .wiz-steps {
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        gap: 6px !important;
        overflow: visible !important;
        padding: 10px !important;
    }
    .wiz-step__label { display: none !important; }
    .wiz-step {
        flex: 0 0 auto !important;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        justify-content: center;
        border-radius: var(--tp-r-chip) !important;
    }
    .wiz-step__num {
        width: 22px;
        height: 22px;
        border-radius: var(--tp-r-chip);
        font-size: 12px;
    }
    .wiz-close {
        flex: 0 0 auto !important;
        width: 38px;
        height: 38px;
        margin-left: auto !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: var(--tp-bg) !important;
        color: #5B6270 !important;
        font-size: 20px;
        line-height: 1;
    }

    /* --- 13.4 เลิกวงรีให้หมด (อาร์มสั่ง) — เหลือมุมมนสี่เหลี่ยม
       ยกเว้นรูปคน/ตราสัญลักษณ์ ซึ่งต้องกลมตามธรรมชาติ */
    .ux-units__count,
    .ux-units__done,
    .ux-unit__tag,
    .ux-tcard__st,
    .ux-tcard__grid > *,
    .ux-asrole__opt,
    .ux-pbtn,
    .ux-btn-print,
    .ux-btn-table,
    .ux-btn-debug,
    .ux-dlg__ok,
    .ux-units__addbtn,
    .chat__new-btn,
    .chat__back,
    .ux-upload-act .btn.fileinput-button,
    body:not(.cust-help) .main__content .btn,
    body:not(.cust-help) .main__content .btn-full,
    body:not(.cust-help) .main__content .btn-border,
    body:not(.cust-help) .main__content input[type="submit"],
    body:not(.cust-help) .main__content button[type="submit"] {
        border-radius: var(--tp-r-ctl) !important;
    }
    .ux-units__count,
    .ux-units__done,
    .ux-unit__tag,
    .ux-tcard__st,
    .ux-tcard__grid > * { border-radius: var(--tp-r-chip) !important; }
    /* รูปคน/ตรา = กลมได้ */
    .hesk-brand__seal,
    .ux-head2__seal,
    .ux-head2__seal img,
    .hesk-avatar,
    .chat__ava,
    .ux-mtab__item--account img { border-radius: 50% !important; }

    /* --- 13.5 ช่องว่างใต้แถบหัวซ้ำซ้อน ---
       สกินมือถือเดิมดัน body/wrapper ลงมา 72px เพื่อเว้นที่ให้แถบหัว
       ของเราก็เว้นซ้ำอีกชั้น รวมเป็น ~146px กลายเป็นที่ว่างโล่ง
       -> ล้างของเดิม แล้วคุมระยะที่เดียว */
    html body:not(.cust-help),
    html body:not(.cust-help) .wrapper,
    html body:not(.cust-help) main.main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    html body:not(.cust-help) .main__content {
        padding-top: calc(var(--tp-head-h) + 12px) !important;
    }

    /* --- 13.6 แถบเมนูล่าง: ไอคอนวงกลมใหญ่ลอยพ้นแถบ ---
       สกินเดิมทำไอคอนที่เลือกเป็นวงกลม 44-48px แล้วดันขึ้น -22px
       อาร์มไม่เอาวงรี และมันล้นออกนอกแถบ -> ปรับเป็นแผ่นมุมมนในแถบ */
    html body .ux-mtab .ux-mtab__item .ux-mtab__icon,
    html body .ux-mtab .ux-mtab__item.is-current .ux-mtab__icon,
    html body .ux-mtab .ux-mtab__item--account .ux-mtab__icon {
        width: 44px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    html body .ux-mtab .ux-mtab__item.is-current .ux-mtab__icon {
        background: var(--tp-primary-soft) !important;
    }
    html body .ux-mtab .ux-mtab__item svg { width: 20px !important; height: 20px !important; }
    html body .ux-mtab .ux-mtab__item--account img {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        object-fit: cover;
    }
    html body .ux-mtab .ux-mtab__item.is-current { color: var(--tp-primary) !important; }
    html body .ux-mtab .ux-mtab__item { align-self: center; }
    /* กระดิ่งในแถบ: ขนาดเท่าไอคอนอื่น */
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle {
        width: 44px !important;
        height: 30px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: none !important;
        box-shadow: none !important;
    }
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle .icon,
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* --- 13.7 "ตอบในฐานะ": ยังเป็นวงรีและสีเลือกเป็นกรมท่า ไม่เข้าธีม --- */
    html body .ux-asrole .ux-asrole__opt,
    html body .ux-asrole .ux-asrole__opt.is-plain,
    html body .ux-asrole .ux-asrole__opt.is-boss,
    html body .ux-asrole .ux-asrole__opt.is-center {
        min-height: 46px;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        color: var(--tp-text) !important;
        box-shadow: none !important;
        font-size: 13.5px;
        font-weight: 600;
    }
    html body .ux-asrole .ux-asrole__opt:has(input:checked) {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
        box-shadow: inset 0 0 0 1.5px var(--tp-primary) !important;
    }
    html body .ux-asrole .ux-asrole__lbl {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 700;
        color: var(--tp-text-2);
    }
    html body .ux-asrole .ux-asrole__opts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* --- 13.8 แถบปุ่มท้าย wizard เกยแถบเมนูล่าง --- */
    .wiz-foot {
        bottom: calc(var(--tp-tab-h) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* บล็อกเดิมของหน้าโปรไฟล์ถูกย้ายไป css/admin-ui.css แล้ว (ใช้ทั้งสองจอ)
       ลบออกจากที่นี่เพราะไฟล์นี้โหลดทีหลัง จะไปทับดีไซน์ใหม่
       (การ์ดหัวกลายเป็นสีน้ำเงินทึบแทนที่จะเป็นการ์ดขาวตามแบบ) */

    /* --- 13.10 กันภาพระเบิดเต็มจอทุกหน้า (ภาพไม่ได้กำหนดขนาดจะกินทั้งความกว้าง) --- */
    html body:not(.cust-help) .main__content img:not([class*="seal"]):not([class*="ava"]) {
        max-width: 100%;
        height: auto;
    }
    html body:not(.cust-help) .main__content .profile__wrapper img { max-height: 120px; }

    /* --- 13.11 รายการแชท: ชื่อ/เวลา/ข้อความ แยกบรรทัดชัด --- */
    .chat__conv {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }
    .chat__conv_main {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        gap: 2px;
    }
    .chat__conv_top {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }
    .chat__conv_name {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--tp-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat__conv_time { flex: 0 0 auto; font-size: 11.5px; color: var(--tp-text-2); }
    .chat__conv_preview {
        font-size: 12.5px;
        color: var(--tp-text-2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat__ava { flex: 0 0 auto; width: 44px; height: 44px; }

    /* --- 13.12 การ์ดอื่นในหน้าโปรไฟล์: ชิดซ้าย ปุ่มเต็มความกว้าง --- */
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type),
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type) .profile__info_list {
        text-align: left !important;
        align-items: stretch !important;
    }
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type) h3 { text-align: left !important; }
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type) p { margin: 0 0 14px; font-size: 13.5px; }
    html body:not(.cust-help) .main__content .profile__control,
    html body:not(.cust-help) .main__content .profile__edit { width: 100%; padding: 0 !important; }
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type) .btn,
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type) button[type="submit"],
    html body:not(.cust-help) .main__content .surin-profile-card:not(:first-of-type) input[type="submit"] {
        width: 100% !important;
        margin: 0 !important;
    }
    html body:not(.cust-help) .main__content .form-group { margin-bottom: 14px !important; }
    html body:not(.cust-help) .main__content .form-group > label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--tp-text-2);
    }

    /* --- 13.13 กล่องแบรนด์ในแถบหัวยังเป็นทรงแคปซูลจากสกินเดิม --- */
    html body .ux-mhead .hesk-brand {
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* ============================================================
     * 14) รอบแก้ตามที่อาร์มไล่ดูจริงบนมือถือ (10 ส.ค. 2569 รอบ 2)
     * ============================================================ */

    /* --- 14.1 ตัวกรองเรื่อง ---
       ลิงก์ตัวกรองเป็น <a class="btn btn-transparent"> ซ้อนอยู่ใน <div>
       กฎปุ่มทั่วไปของเราเลยจับไปทำเป็นปุ่มน้ำเงินเต็มความกว้าง
       (นี่คือ "แถบน้ำเงิน เรื่องเปิดอยู่ 57" ที่มีสีขาวโผล่ทางขวา
        สีขาวคือป้ายตัวเลข .filters__btn-value นั่นเอง) */
    html body:not(.cust-help) .main__content .tickets__legend .btn.btn-transparent {
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        width: auto !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: var(--tp-bg) !important;
        color: #5B6270 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
    html body:not(.cust-help) .main__content .tickets__legend .btn.btn-transparent.is-selected,
    html body:not(.cust-help) .main__content .tickets__legend .btn.btn-transparent.is-bold {
        background: var(--tp-primary-soft) !important;
        color: var(--tp-primary) !important;
    }
    html body:not(.cust-help) .main__content .tickets__legend .filters__btn-value {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 20px;
        padding: 0 6px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: rgba(0, 0, 0, .06) !important;
        color: inherit !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }
    html body:not(.cust-help) .main__content .tickets__legend .btn.is-selected .filters__btn-value {
        background: #fff !important;
        color: var(--tp-primary) !important;
    }
    /* กล่องห่อชั้นในของแถบกรอง ไม่ต้องเป็นการ์ดซ้อนการ์ด */
    html body:not(.cust-help) .main__content .tickets__legend > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* --- 14.2 การ์ดเรื่อง: ป้ายด้านบนต้องขึ้นบรรทัดใหม่ ไม่ล้นขวา --- */
    .ux-tcard__head {
        flex-wrap: wrap !important;
        row-gap: 6px;
    }
    .ux-tcard__head > * { max-width: 100%; }
    .ux-tcard__st { white-space: normal; }

    /* --- 14.3 แถบปุ่มท้าย wizard: สองปุ่มกว้างเท่ากัน ไม่ล้น --- */
    .wiz-foot > *,
    .wiz-foot > .btn,
    .wiz-foot > button,
    .wiz-foot > input,
    .wiz-foot > a {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* --- 14.4 รายการ dropdown ต้องลอยเหนือแถบหัว และไม่ล้นออกนอกจอ --- */
    .dropdown-select.active .dropdown-list,
    .dropdown.active .dropdown-list,
    .dropdown-select .dropdown-list,
    .dropdown .dropdown-list {
        z-index: 120 !important;
        max-width: calc(100vw - 28px) !important;
    }

    /* --- 14.5 หน้ารายงาน: ปุ่มแบน ไม่มีวงกลม/เงาซ้อนหลังปุ่ม --- */
    html body .ux-report-btns {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 14px !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }
    html body .ux-report-btns > .ux-btn-print,
    html body .ux-report-btns > .ux-btn-table,
    html body .ux-report-btns > .ux-btn-debug {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        box-shadow: none !important;
        filter: none !important;
        overflow: hidden;
    }
    html body .ux-report-btns > *::before,
    html body .ux-report-btns > *::after { display: none !important; content: none !important; }
    html body .ux-report-btns .fas {
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    html body .ux-btn-print { background: var(--tp-primary) !important; color: #fff !important; }
    html body .ux-btn-table { background: var(--tp-primary-soft) !important; color: var(--tp-primary) !important; }
    html body .ux-btn-debug { background: var(--tp-bg) !important; color: #5B6270 !important; }

    /* --- 14.6 กล่องกระทำ/มอบหมายรายที่เลือก: แยกโซนให้ชัด --- */
    html body .bulk-actions,
    html body .tickets__legend .bulk-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    html body .bulk-actions__group,
    html body .bulk-actions > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px !important;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-bg) !important;
    }
    html body .bulk-actions label,
    html body .bulk-actions .bulk-actions__label {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--tp-text-2);
    }
    html body .bulk-actions .btn,
    html body .bulk-actions button[type="submit"] {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: var(--tp-r-ctl) !important;
    }

    /* --- 14.7 ส่วน "ที่ชื่นชอบ / ค่าเริ่มต้น / การแจ้งเตือน" ในหน้าโปรไฟล์ --- */
    html body:not(.cust-help) .main__content fieldset,
    html body:not(.cust-help) .main__content .profile__section {
        margin: 0 0 12px !important;
        padding: 16px !important;
        border: 0 !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }
    html body:not(.cust-help) .main__content legend,
    html body:not(.cust-help) .main__content .form__title {
        display: block;
        width: 100%;
        margin: 0 0 12px !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid var(--tp-line);
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
    }
    /* ช่องติ๊ก/ตัวเลือกในโปรไฟล์ = แถวกดง่าย */
    html body:not(.cust-help) .main__content .checkbox-custom,
    html body:not(.cust-help) .main__content .radio-custom {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        margin: 0 0 8px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-bg) !important;
    }
    html body:not(.cust-help) .main__content .checkbox-custom label,
    html body:not(.cust-help) .main__content .radio-custom label {
        margin: 0 !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--tp-text) !important;
        line-height: 1.4;
    }
    html body:not(.cust-help) .main__content .checkbox-custom:has(input:checked),
    html body:not(.cust-help) .main__content .radio-custom:has(input:checked) {
        background: var(--tp-primary-soft) !important;
    }

    /* --- 14.8 select2 / selectize: แผงตัวเลือกต้องลอยเหนือทุกอย่าง ---
       (หน้าค้นหาเรื่องกด dropdown แล้วไม่มีอะไรแสดง) */
    /* ยกเฉพาะตอน "เปิดอยู่" เท่านั้น — ถ้ายก .select2-container ทุกตัวตลอดเวลา
       ช่องหน่วยงานจะไปบังลิสต์ของ dropdown ตัวอื่นที่อยู่เหนือมันในหน้าเดียวกัน */
    .select2-container--open,
    .selectize-dropdown {
        z-index: 2147482000 !important;
    }
    .select2-container--open .select2-dropdown,
    .select2-dropdown,
    .selectize-dropdown {
        max-width: calc(100vw - 20px) !important;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        background: #fff !important;
        box-shadow: 0 12px 34px rgba(16, 24, 40, .18) !important;
    }
    .select2-results__option,
    .selectize-dropdown .option {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        font-size: 14.5px;
    }
    .select2-container--default .select2-selection--single,
    .selectize-input {
        min-height: 48px !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: var(--tp-bg) !important;
        display: flex !important;
        align-items: center;
        box-shadow: none !important;
    }
    .select2-container { width: 100% !important; }

    /* --- 14.9 ขั้นตอน "การจัดการ" ในหน้าร่างเรื่อง: จัดระเบียบใหม่ --- */
    .wiz-panel .form-group,
    .wiz-panel .row,
    .wiz-panel > div {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        text-align: left !important;
    }
    .wiz-panel label,
    .wiz-panel .title {
        display: block !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        text-align: left !important;
    }
    .wiz-panel .value,
    .wiz-panel .dropdown-select,
    .wiz-panel .form-control { width: 100% !important; margin: 0 !important; }
    /* ปุ่มไอคอนปฏิทิน/เปิดปิด ที่ลอยเกะกะ -> ให้อยู่ในบรรทัดกับช่องกรอก */
    .wiz-panel .icon-calendar,
    .wiz-panel .datepicker-toggle,
    .wiz-panel img[src*="calendar"] {
        width: 22px !important;
        height: 22px !important;
        margin: 0 0 0 8px !important;
        vertical-align: middle;
    }
    .wiz-panel .ux-clear-btn,
    .wiz-panel button.clear,
    .wiz-panel .btn-clear {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: var(--tp-r-chip) !important;
        background: var(--tp-bg) !important;
        color: #5B6270 !important;
        box-shadow: none !important;
    }

    /* --- 14.10 ตัวกรองเรื่องหายไปทั้งแถบ ---
       footer-credit.css บรรทัด 1278 สั่ง
         .tickets__legend > div:first-child { display: none !important }
       ซึ่งถ้าลิงก์ตัวกรองอยู่ในกล่องแรก มันจะถูกซ่อนไปทั้งชุด
       -> เปิดคืนเฉพาะกล่องที่มีปุ่มตัวกรองอยู่จริง */
    html body:not(.cust-help) .main__content .tickets__legend > div:first-child:has(.btn),
    html body:not(.cust-help) .main__content .tickets__legend > div:has(.btn-transparent) {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    html body:not(.cust-help) .main__content .tickets__legend .btn.btn-transparent > span {
        display: inline !important;
        visibility: visible !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* --- 14.11 ปุ่มในหน้ารายงานต้องไม่มีขีดเส้นใต้แบบลิงก์ --- */
    html body .ux-report-btns > a,
    html body .ux-report-btns > a:hover { text-decoration: none !important; }

    /* --- 14.12 แก้ให้ตรงกับ markup จริง (ตรวจแล้วรอบสรุป) ---
       ก่อนหน้านี้ผมเขียนเจาะ fieldset/legend ซึ่งหน้าโปรไฟล์ไม่ได้ใช้
       ของจริงคือ <section class="item--section ..."><h4>หัวข้อ</h4> */
    html body:not(.cust-help) .main__content .item--section {
        margin: 0 0 12px !important;
        padding: 16px !important;
        border: 0 !important;
        border-radius: var(--tp-r-card) !important;
        background: var(--tp-card) !important;
        box-shadow: var(--tp-shadow) !important;
    }
    html body:not(.cust-help) .main__content .item--section > h4 {
        display: block;
        margin: 0 0 12px !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid var(--tp-line) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
    }
    html body:not(.cust-help) .main__content .item--section > p {
        margin: 0 0 12px !important;
        font-size: 13px;
        color: var(--tp-text-2);
    }

    /* กล่องกระทำ/มอบหมาย: ใช้ชื่อคลาสจริงของ HESK */
    html body:not(.cust-help) .main__content .bulk-actions__title {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin: 0 0 4px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text-2) !important;
    }
    html body:not(.cust-help) .main__content .bulk-actions__title .icon { width: 16px; height: 16px; }
    html body:not(.cust-help) .main__content .bulk-actions__controls {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    html body:not(.cust-help) .main__content .bulk-actions__controls .inline-bottom {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    html body:not(.cust-help) .main__content .bulk-actions__controls .btn,
    html body:not(.cust-help) .main__content .bulk-actions__controls button {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: var(--tp-r-ctl) !important;
    }

    /* ============================================================
     * 15) ขั้นตอน "การจัดการ" ในหน้าร่างเรื่อง — ยกเครื่องใหม่
     *     ล้มสกินเดิมใน footer-credit.css (บรรทัด ~1424-1470)
     *     ซึ่งเป็นคนละธีม: พื้นไล่เฉด ขอบสีฟ้า ปุ่มแคปซูล
     * ============================================================ */

    /* ชิ้นส่วนซ้ำที่ JS ทำเครื่องหมายไว้ */
    .ticket-create .ux-hide-dup,
    .ticket-create .ux-dup-text { display: none !important; }

    /* --- กล่องย่อยทุกกลุ่มในสเต็ปนี้ ใช้ทรงเดียวกันหมด --- */
    .ticket-create .ux-privacy,
    .ticket-create .ux-status-view,
    .ticket-create .ux-due,
    .ticket-create .ux-row2 {
        margin: 0 0 14px !important;
        padding: 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-box) !important;
        background: var(--tp-bg) !important;
        background-image: none !important;
        box-shadow: none !important;
        line-height: 1.6 !important;
    }
    .ticket-create .ux-privacy label,
    .ticket-create .ux-status-view label,
    .ticket-create .ux-due label,
    .ticket-create .ux-row2 label {
        display: block !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* --- ชั้นความเร็ว | ชั้นความลับ: สองช่องเท่ากัน หัวตรงกัน --- */
    .ticket-create .ux-row2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: start;
        gap: 12px !important;
    }
    .ticket-create .ux-row2 .form-group {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        min-width: 0;
    }
    .ticket-create .ux-row2 label { min-height: 34px; }   /* ป้ายสองบรรทัดก็ยังตรงแถว */

    /* --- สถานะ: เหลือกล่องเดียว ไม่ซ้อน ไม่แคปซูล --- */
    .ticket-create .ux-status-view select,
    .ticket-create .ux-status-view .dropdown-select > .label,
    .ticket-create .ux-status-view input[readonly] {
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: var(--tp-r-ctl) !important;
        background: #fff !important;
        color: var(--tp-text) !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    /* --- ครบกำหนดรายงานผล: ปฏิทิน + ปุ่มล้างค่า อยู่แถวเดียว ไม่ทับกัน --- */
    .ticket-create .ux-due { position: relative; }

    .ticket-create .ux-due-row input[type="text"],

    .ticket-create .ux-due-row img,

    .ticket-create .ux-due-row button,


    /* --- เงื่อนไขความเป็นส่วนตัว: ตัวเลือกเป็นแถวกดง่าย --- */
    .ticket-create .ux-privacy .radio-custom,
    .ticket-create .ux-privacy .checkbox-custom {
        margin: 0 0 8px !important;
        background: #fff !important;
    }
    .ticket-create .ux-privacy .radio-custom:last-child,
    .ticket-create .ux-privacy .checkbox-custom:last-child { margin-bottom: 0 !important; }

    /* --- ป้ายหัวข้อย่อยสีแดง/จัดกึ่งกลางของธีมเดิม -> ชิดซ้ายสีเดียวกับป้ายอื่น --- */
    .ticket-create .wiz-panel .form-group > label,
    .ticket-create .wiz-panel .form-group > .title {
        color: var(--tp-text-2) !important;
        text-align: left !important;
        font-weight: 600 !important;
    }
    .ticket-create .wiz-panel .form-group > label span,
    .ticket-create .wiz-panel .form-group > label b { color: inherit !important; font-weight: inherit !important; }
    /* เครื่องหมาย * ยังต้องเห็นว่าเป็นช่องบังคับ */
    .ticket-create .wiz-panel label .required,
    .ticket-create .wiz-panel label span[style*="red"] { color: #D64545 !important; }

    /* หมายเหตุ: ดีไซน์หน้าโปรไฟล์ย้ายไปอยู่ที่ css/admin-ui.css แล้ว
       เพราะอาร์มสั่งให้ใช้ทั้งหน้าจอมือถือและหน้าจอคอมพิวเตอร์ (10 ส.ค. 2569)
       ไฟล์นี้ยังคงไว้เฉพาะสกินมือถือตามเดิม */

    /* ---- หน้าโปรไฟล์โดนแถบหัวทับ ----
       footer-credit.css มีกฎเจาะจงหน้านี้ไว้ว่า
         body:not(.cust-help) .main__content.profile { padding: 16px 14px 116px !important }
       ซึ่งน้ำหนักสูงกว่ากฎกลางของสกินมือถือ -> เว้นด้านบนแค่ 16px
       แต่แถบหัวเป็น fixed สูง 60px เนื้อหาจึงมุดอยู่ใต้แถบ
       -> เขียนเจาะจงกว่าเพื่อคืนระยะเว้นให้ถูกต้อง */
    html body:not(.cust-help) .main__content.profile {
        padding-top: calc(var(--tp-head-h) + 14px) !important;
        padding-bottom: calc(var(--tp-tab-h) + 26px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ============================================================
     * 16) ปุ่มแชทบนแถบหัวมือถือ (ย้ายออกจากแถบล่างเพื่อให้เหลือ 5 แท็บ)
     * ============================================================ */
    .ux-mhead__chat {
        margin-left: auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 13px;
        background: #eff6ff;
        color: #2563eb !important;
        text-decoration: none !important;
    }
    .ux-mhead__chat svg { width: 20px; height: 20px; }
    .ux-mhead__chat:active { background: #dbeafe; }

    /* เลขแจ้งเตือนบนกระดิ่งในแถบล่าง — เกาะมุมไอคอน ไม่ลอยแยกออกมา
       (กฎเดิมใน footer-credit.css ตั้ง right: calc(50% - 22px) ไว้ตอนแถบมี 6 ช่อง
        พอเหลือ 5 ช่อง ช่องกว้างขึ้น เลขเลยหลุดไปอยู่ข้าง ๆ ไอคอน) */
    .ux-mtab .profile__item_rel { position: relative !important; }
    .ux-mtab .hesk-notif__badge {
        position: absolute !important;
        top: -5px !important;
        right: -7px !important;
        left: auto !important;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 18px;
        border: 2px solid #fff;
    }

    /* เลขข้อความค้างอ่านบนปุ่มแชท */
    .ux-mhead__chat { position: relative; }
    .ux-mhead__chat .ux-chat-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #ef4444 !important;
        color: #fff !important;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(239, 68, 68, .4);
    }

    /* ============================================================
     * 17) หน้าร่างเรื่องร้องเรียน — หน้าตาแบบแอปมือถือ
     *     แถบหัวน้ำเงิน · ขั้นตอนเป็นจุดไข่ปลา · ช่องกรอกขาวมนเท่ากันทุกช่อง
     * ============================================================ */
    .nt-appbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 95;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: var(--tp-head-h);
        padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px));
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e40af 100%);
        color: #fff;
        box-shadow: 0 2px 12px rgba(29, 78, 216, .28);
    }
    .nt-appbar__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px; flex: 0 0 36px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .16);
        color: #fff !important;
        text-decoration: none !important;
    }
    .nt-appbar__back svg { width: 20px; height: 20px; }
    .nt-appbar__title {
        flex: 1;
        text-align: center;
        font-size: 17px;
        font-weight: 700;
        color: #fff;
    }
    .nt-appbar__sp { width: 36px; flex: 0 0 36px; }
    .nt-appbar__close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px; flex: 0 0 36px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .16);
        color: #fff !important;
        text-decoration: none !important;
    }
    .nt-appbar__close svg { width: 18px; height: 18px; }
    .nt-appbar__close:active { background: rgba(255, 255, 255, .28); }

    /* หน้านี้ใช้แถบน้ำเงินแทนแถบหัวขาว */
    body.has-ntbar .ux-mhead { display: none !important; }
    body.has-ntbar .main__content.ticket-create {
        padding-top: calc(var(--tp-head-h) + 12px) !important;
    }

    /* ---- กรอบเนื้อหา: ตัดกล่องซ้อนกล่องออก ---- */
    .main__content.ticket-create > .table-wrap {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .main__content.ticket-create > .table-wrap > h3,
    .main__content.ticket-create > .table-wrap > h4 { display: none !important; }

    /* ---- ขั้นตอน: จุดไข่ปลาเชื่อมเส้น ---- */
    .ticket-create .wiz-steps {
        display: flex !important;
        align-items: center;
        gap: 0;
        margin: 2px 0 16px !important;
        padding: 0 4px !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .ticket-create .wiz-steps .wiz-step {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }
    .ticket-create .wiz-steps .wiz-step:last-of-type { flex: 0 0 auto; }
    .ticket-create .wiz-step__num,
    .ticket-create .wiz-step__label { display: none !important; }
    /* จุด */
    .ticket-create .wiz-steps .wiz-step::before {
        content: "";
        width: 10px; height: 10px;
        border-radius: 50%;
        background: #22c55e;                 /* ผ่านมาแล้ว */
        flex: 0 0 10px;
        z-index: 1;
    }
    /* เส้นเชื่อมไปจุดถัดไป */
    .ticket-create .wiz-steps .wiz-step::after {
        content: "";
        position: absolute;
        left: 50%; right: -50%;
        height: 3px;
        border-radius: 3px;
        background: #22c55e;
    }
    .ticket-create .wiz-steps .wiz-step:last-of-type::after { display: none; }
    /* ขั้นปัจจุบัน */
    .ticket-create .wiz-steps .wiz-step.is-active::before {
        width: 13px; height: 13px; flex-basis: 13px;
        background: #16a34a;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
    }
    /* ขั้นที่ยังไม่ถึง */
    .ticket-create .wiz-steps .wiz-step.is-active ~ .wiz-step::before { background: #d7dee9; }
    .ticket-create .wiz-steps .wiz-step.is-active::after,
    .ticket-create .wiz-steps .wiz-step.is-active ~ .wiz-step::after { background: #e5eaf2; }
    .ticket-create .wiz-close {
        position: absolute !important;
        top: calc(var(--tp-head-h) + -46px);
        right: 12px;
        display: none !important;            /* มีปุ่มย้อนกลับบนแถบหัวแล้ว */
    }

    /* ---- แผงคำถามแต่ละขั้น ---- */
    .ticket-create .wiz-panel {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .ticket-create .wiz-panel__title {
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: 16.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
        text-align: left !important;
    }
    .ticket-create .wiz-panel__title::after { display: none !important; }

    /* ---- ช่องกรอก: ขาว มน ขนาดเท่ากันทุกช่อง ---- */
    .ticket-create .form-group { margin-bottom: 13px !important; }
    html body .main__content.ticket-create .form-group > label,
    html body .main__content.ticket-create .wiz-panel .form-group > label {
        display: block !important;
        margin: 0 0 6px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
        text-align: left !important;
    }
    .ticket-create .nt-req { color: #ef4444; font-style: normal; margin-left: 3px; }

    html body .main__content.ticket-create input[type="text"],
    html body .main__content.ticket-create input[type="email"],
    html body .main__content.ticket-create input[type="tel"],
    html body .main__content.ticket-create input[type="number"],
    html body .main__content.ticket-create input[type="date"],
    html body .main__content.ticket-create textarea,
    html body .main__content.ticket-create textarea.form-control,
    html body .main__content.ticket-create input.form-control,
    html body .main__content.ticket-create .form-control,
    html body .main__content.ticket-create .selectize-input,
    html body .main__content.ticket-create .dropdown-select > .label {
        min-height: 48px !important;
        padding: 12px 14px !important;
        border: 1px solid #e4e9f2 !important;
        border-radius: 14px !important;
        background: #fff !important;
        font-size: 15px !important;
        color: var(--tp-text) !important;
        box-shadow: none !important;
    }
    .ticket-create textarea { min-height: 110px !important; line-height: 1.6; }
    .ticket-create input::placeholder,
    .ticket-create textarea::placeholder { color: #9aa6b8 !important; }
    .ticket-create input:focus,
    .ticket-create textarea:focus,
    .ticket-create .selectize-input.focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
    }

    /* ปุ่มเลือกหน่วยดำเนินการ: ให้ดูเป็น "ช่องข้อมูล" ไม่ใช่ปุ่มน้ำเงินเต็มแถบ */
    html body .main__content.ticket-create .change_category {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border: 1px solid #e4e9f2 !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--tp-text) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-align: left !important;
        box-shadow: none !important;
    }
    .ticket-create .change_category svg,
    .ticket-create .change_category .icon { flex: 0 0 auto; color: #2563eb; }

    /* ---- ช่องวันที่ (section.param.calendar): เดิมป้ายกับปุ่มซ้อนกันจนอ่านไม่ออก ---- */
    html body .main__content.ticket-create section.param.calendar {
        display: block !important;
        margin-bottom: 13px !important;
        text-align: left !important;
    }
    html body .main__content.ticket-create section.param.calendar > label {
        display: block !important;
        margin: 0 0 6px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
        text-align: left !important;
    }
    html body .main__content.ticket-create section.param.calendar > label .important { color: #ef4444 !important; }
    html body .main__content.ticket-create .calendar--button {
        position: relative !important;
        display: block !important;
        min-height: 48px !important;
        width: 100% !important;
    }
    html body .main__content.ticket-create .calendar--button > button {
        position: absolute !important;
        left: 12px; top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 24px; height: 24px;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html body .main__content.ticket-create .calendar--button > button .icon {
        width: 20px !important; height: 20px !important;
        fill: #2563eb !important;
    }
    html body .main__content.ticket-create input.datepicker {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 14px 12px 44px !important;
        border: 1px solid #e4e9f2 !important;
        border-radius: 14px !important;
        background: #fff !important;
        font-size: 15px !important;
        color: var(--tp-text) !important;
    }
    /* กรอบช่องวันที่ = .calendar--button (ไอคอนซ้าย + ข้อความว่าง/ค่าที่เลือก) */







    /* ---- ปุ่มถัดไป/ย้อนกลับ: ติดล่างจอเหนือแถบเมนู ---- */
    .ticket-create .wiz-foot {
        position: sticky;
        bottom: calc(var(--tp-tab-h) + 6px);
        z-index: 60;
        display: flex !important;
        gap: 10px;
        margin: 16px 0 0 !important;
        padding: 10px 0 !important;
        border: 0 !important;
        background: linear-gradient(180deg, rgba(244,246,250,0) 0%, var(--tp-bg) 40%);
    }
    .ticket-create .wiz-spacer { display: none !important; }
    .ticket-create .wiz-foot .btn {
        flex: 1 1 0;
        min-height: 50px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    .ticket-create .wiz-foot .wiz-back {
        background: #fff !important;
        color: #2563eb !important;
        border: 1px solid #d7e3fb !important;
    }
    .ticket-create .wiz-foot .wiz-back[style*="hidden"] { display: none !important; }

    /* ============================================================
     * 18) จัดระเบียบมือถือรอบเก็บงาน (18 ส.ค. 69)
     *     18.1 แถบเมนูล่าง — ทุกช่องกว้างเท่ากัน ไอคอน/ตัวอักษรขนาดเดียว
     * ============================================================ */
    html body .ux-mtab {
        gap: 0 !important;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
    html body .ux-mtab > * {
        flex: 1 1 20% !important;     /* 5 ช่อง = 20% เท่ากันเป๊ะทุกช่อง */
        width: 20% !important;
        min-width: 0 !important;
        align-self: stretch !important;
    }
    /* ใช้กริดแถวคงที่ (ไอคอน 24px / ป้าย 14px) เพื่อให้ทุกช่องอยู่ระนาบเดียวกันเป๊ะ
       ไม่ว่าป้ายจะเป็น <span> (แท็บลิงก์) หรือ ::after (กระดิ่ง) */
    html body .ux-mtab .ux-mtab__item,
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle {
        display: grid !important;
        grid-template-rows: 24px 14px !important;
        align-content: center !important;
        align-items: center !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 4px 2px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 14px !important;
        text-align: center !important;
    }
    /* ป้ายชื่อ: สูงคงที่เท่ากันทุกช่อง ไม่ให้ตัวอักษรที่มีสระบน/ล่างดันบรรทัด */
    html body .ux-mtab .ux-mtab__item > span:last-child,
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle::after {
        display: block !important;
        height: 14px !important;
        line-height: 14px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    html body .ux-mtab .ux-mtab__slot { display: flex !important; align-items: stretch !important; }
    html body .ux-mtab .ux-mtab__slot .hesk-notif { width: 100% !important; display: flex !important; }
    /* ไอคอนทุกช่องขนาดเดียวกัน */
    html body .ux-mtab .ux-mtab__icon,
    html body .ux-mtab .ux-mtab__slot .profile__item_rel {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 24px !important;
        height: 24px !important;
    }
    html body .ux-mtab .ux-mtab__icon svg,
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle .icon,
    html body .ux-mtab .ux-mtab__slot .hesk-notif__toggle svg {
        width: 22px !important;
        height: 22px !important;
    }
    html body .ux-mtab .ux-mtab__icon img {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50%;
        object-fit: cover;
    }

    /* ============================================================
     * 18.2 หน้าเรื่อง — ปุ่ม "ร่างเรื่องใหม่" + "ค้นหาเรื่องร้องเรียน" บรรทัดเดียว
     * ============================================================ */
    html body .main__content.tickets .hesk-list-toolbar--split {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html body .main__content.tickets .hesk-list-toolbar--split > .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;   /* ทั้งสองปุ่มให้เนื้อหาอยู่กลางการ์ดเหมือนกัน */
        text-align: center !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 14px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }
    html body .main__content.tickets .hesk-list-toolbar--split > .btn > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    html body .main__content.tickets .hesk-list-toolbar--split .icon {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px;
    }
    /* ปุ่มค้นหา: รองลงมา ไม่ให้แย่งสายตากับปุ่มหลัก */
    html body .main__content.tickets .hesk-list-toolbar--split .hesk-search-open {
        justify-content: center !important;
        background: #fff !important;
        color: #2563eb !important;
        border: 1px solid #d7e3fb !important;
        box-shadow: none !important;
    }
    html body .main__content.tickets .hesk-list-toolbar--split .hesk-search-open .icon { fill: #2563eb !important; }
    /* ตัวบอกใบ้ "/" บนปุ่มค้นหา ไม่ต้องมีบนมือถือ */
    html body .main__content.tickets .hesk-list-toolbar--split .hesk-search-open kbd,
    html body .main__content.tickets .hesk-list-toolbar--split .hesk-search-open .kbd,
    html body .main__content.tickets .hesk-list-toolbar--split .hesk-search-open::after {
        display: none !important;
        content: none !important;
    }

    /* ============================================================
     * 18.3 แถบกรองเรื่อง — ชิปเล็ก เลื่อนซ้าย-ขวาได้ และมีเงาบอกว่ายังมีต่อ
     * ============================================================ */
    html body .main__content.tickets .quick-links {
        position: relative;
        margin: 0 0 12px !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    /* เงาจาง ๆ ขอบขวา = ยังมีชิปต่อไปอีก */
    html body .main__content.tickets .quick-links::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0; right: -2px;
        width: 26px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(244,246,250,0) 0%, var(--tp-bg) 78%);
        z-index: 2;
    }
    html body .main__content.tickets .filters__listing {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 2px 26px 2px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    html body .main__content.tickets .filters__listing::-webkit-scrollbar { display: none; }
    html body .main__content.tickets .filters__listing > .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #fff !important;
        border: 1px solid var(--tp-line) !important;
        color: var(--tp-text-2) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        scroll-snap-align: start;
    }
    html body .main__content.tickets .filters__listing > .btn .badge,
    html body .main__content.tickets .filters__listing > .btn .count {
        position: static !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        margin-left: 5px;
        padding: 0 5px;
        border-radius: 999px;
        background: #eef2f8 !important;
        color: var(--tp-text-2) !important;
        font-size: 11px;
        font-weight: 700;
    }
    html body .main__content.tickets .filters__listing > .btn.is-selected {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #fff !important;
    }
    html body .main__content.tickets .filters__listing > .btn.is-selected .badge,
    html body .main__content.tickets .filters__listing > .btn.is-selected .count {
        background: rgba(255, 255, 255, .24) !important;
        color: #fff !important;
    }

    /* ============================================================
     * 18.4 ป้ายบนการ์ดเรื่อง — เรียงบรรทัด: สถานะ · กำหนดรายงาน · หน่วยยุติแล้ว
     * ============================================================ */
    html body .ux-tcard .ux-tcard__head {
        display: grid !important;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 4px 8px;
        margin-bottom: 8px !important;
    }
    html body .ux-tcard .ux-tcard__id {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }
    html body .ux-tcard .ux-tcard__head > :not(.ux-tcard__id) {
        grid-column: 2;
        justify-self: end;
    }
    html body .ux-tcard .ux-tcard__st { order: 1; }
    html body .ux-tcard .ux-remind-badge--cell { order: 2; }
    html body .ux-tcard .ux-due-badge { order: 3; }
    html body .ux-tcard .ux-unit-badge { order: 4; }
    html body .ux-tcard .ux-tcard__st,
    html body .ux-tcard .ux-remind-badge--cell,
    html body .ux-tcard .ux-due-badge,
    html body .ux-tcard .ux-unit-badge {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;                     /* flex กลืนช่องว่างระหว่าง <b>0/2</b> กับข้อความ */
        min-height: 22px;
        padding: 2px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }

    /* ============================================================
     * 18.5 การ์ด "กระทำกับรายที่เลือก / มอบหมายที่เลือกให้แก่" — ย่อให้กระชับ
     * ============================================================ */
    html body .main__content.tickets .bulk-actions {
        display: grid !important;
        gap: 10px !important;
        margin: 14px 0 0 !important;
        padding: 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    html body .main__content.tickets .bulk-actions__group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: stretch !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }
    html body .main__content.tickets .bulk-actions__group + .bulk-actions__group {
        padding-top: 10px !important;
        border-top: 1px dashed var(--tp-line) !important;
    }
    html body .main__content.tickets .bulk-actions__title {
        display: flex !important;
        align-items: center;
        gap: 6px;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
    }
    html body .main__content.tickets .bulk-actions__title .icon {
        width: 16px !important; height: 16px !important; fill: #2563eb !important;
    }
    html body .main__content.tickets .bulk-actions__controls {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 8px !important;
        margin: 0 !important;
    }
    html body .main__content.tickets .bulk-actions__controls > .inline-bottom,
    html body .main__content.tickets .bulk-actions__controls > .selectize-control,
    html body .main__content.tickets .bulk-actions__controls > select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    html body .main__content.tickets .bulk-actions__controls .inline-bottom > *,
    html body .main__content.tickets .bulk-actions .selectize-control,
    html body .main__content.tickets .bulk-actions .inline-bottom select {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    html body .main__content.tickets .bulk-actions .selectize-input,
    html body .main__content.tickets .bulk-actions select {
        min-height: 42px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        border: 1px solid var(--tp-line) !important;
        background: #fff !important;
        font-size: 13.5px !important;
    }
    html body .main__content.tickets .bulk-actions .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 92px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }
    html body .main__content.tickets .bulk-actions .btn .icon { width: 16px !important; height: 16px !important; }

    /* ============================================================
     * 19) หน้าต่าง "ค้นหาเรื่องร้องเรียน" บนมือถือ — จัดใหม่ให้อ่านง่าย กดง่าย
     * ============================================================ */
    /* --- หัวข้อพับได้: ทั้งแถวกดได้ มีพื้นหลัง และลูกศรหมุนตามสถานะ --- */
    html body .hesk-search-modal .ticket-query-title {
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        font-size: inherit !important;
    }
    html body .hesk-search-modal .ticket-query-title::before,
    html body .hesk-search-modal .ticket-query-title::marker { content: none !important; display: none !important; }
    html body .hesk-search-modal .ticket-query-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100% !important;
        min-height: 48px;
        margin: 0 !important;
        padding: 10px 14px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--tp-text) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-align: left !important;
        box-shadow: none !important;
    }
    html body .hesk-search-modal .ticket-query-toggle[aria-expanded="true"] {
        border-color: #cfe0fd !important;
        background: #f5f9ff !important;
        color: #1d4ed8 !important;
    }
    html body .hesk-search-modal .ticket-query-toggle__icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 26px; height: 26px;
        flex: 0 0 26px;
        border-radius: 50%;
        background: #eef2f8;
        transition: transform .18s ease;
    }
    /* กาง = ลูกศรชี้ลง · ยุบ = ลูกศรชี้ขวา (ธีมเดิมหมุน 180 องศาไว้ ต้องล้างก่อน) */
    html body .hesk-search-modal .ticket-query-toggle[aria-expanded="true"] .ticket-query-toggle__icon,
    html body .hesk-search-modal .ticket-query-toggle[aria-expanded="true"] .ticket-query-toggle__icon .icon {
        transform: none !important;
    }
    html body .hesk-search-modal .ticket-query-toggle[aria-expanded="false"] .ticket-query-toggle__icon {
        transform: rotate(-90deg) !important;
    }
    html body .hesk-search-modal .ticket-query-toggle[aria-expanded="false"] .ticket-query-toggle__icon .icon {
        transform: none !important;
    }
    html body .hesk-search-modal .ticket-query-toggle__icon .icon { width: 11px !important; height: 11px !important; fill: #475467 !important; }

    /* --- กล่องเนื้อหาใต้หัวข้อ: กรอบเดียว ไม่ซ้อนกล่อง --- */
    html body .hesk-search-modal .ticket-query-card {
        margin: 0 0 14px !important;
        padding: 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    html body .hesk-search-modal .ticket-query-card .search-option {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    html body .hesk-search-modal .ticket-query-card .search-name {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: auto !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--tp-text) !important;
        text-align: left !important;
    }
    html body .hesk-search-modal .ticket-query-card .search-name br { display: none !important; }
    html body .hesk-search-modal .ticket-query-card .search-name .plain_link {
        padding: 4px 10px;
        border: 1px solid var(--tp-line);
        border-radius: 999px;
        background: #f8fafc;
        color: #2563eb !important;
        font-size: 11.5px;
        font-weight: 600;
        text-decoration: none !important;
    }
    html body .hesk-search-modal .ticket-query-card .search-options {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- สถานะ: ชิป 2 คอลัมน์เต็มความกว้าง ไม่เหลือที่ว่างครึ่งจอ ---
       โครงจริงคือ .search-options > .checkbox-list > .row > .checkbox-custom
       จึงต้องวางกริดที่ .row ไม่ใช่ที่ .search-options */
    html body .hesk-search-modal .ticket-query-card .search-options .checkbox-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;   /* ธีมเดิมไหลเป็นคอลัมน์ ทำให้เรียงสลับไปมา */
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* กล่องห่อชั้นกลาง (.checkbox-group / .row) ทำให้ชิปตกไปคอลัมน์เดียว
       -> ยุบทิ้งด้วย display:contents ให้ชิปทุกใบไหลเข้ากริดเดียวกัน */
    html body .hesk-search-modal .ticket-query-card .search-options .checkbox-list .checkbox-group,
    html body .hesk-search-modal .ticket-query-card .search-options .checkbox-list .row,
    html body .hesk-search-modal .ticket-query-card .search-options .checkbox-list > *:not(.checkbox-custom) {
        display: contents !important;
    }
    html body .hesk-search-modal .ticket-query-card .checkbox-custom {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* ป้ายสถานะ: กล่องติ๊กของธีมเป็น ::before วางมุมซ้ายบน -> เลื่อนมากึ่งกลางแนวตั้ง
       ไม่งั้นจะทับตัวหนังสือ (เป็นสาเหตุที่เห็นติ๊กซ้อนข้อความ) */
    html body .hesk-search-modal .ticket-query-card .checkbox-custom label {
        position: relative !important;
        display: block !important;
        width: 100%;
        min-height: 46px;
        margin: 0 !important;
        padding: 13px 10px 13px 38px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        font-size: 12.5px !important;
        font-weight: 600;
        line-height: 1.35;
    }
    html body .hesk-search-modal .ticket-query-card .checkbox-custom label::before {
        left: 11px !important;
        top: calc(50% - 8px) !important;
    }
    html body .hesk-search-modal .ticket-query-card .checkbox-custom label::after {
        left: 13px !important;
        top: calc(50% - 6px) !important;
    }
    html body .hesk-search-modal .ticket-query-card .checkbox-custom input:checked + label {
        border-color: #cfe0fd !important;
        background: #f5f9ff !important;
    }

    /* --- ช่องกรอกในหน้าต่างค้นหา --- */
    html body .hesk-search-modal .ticket-query-card input[type="text"],
    html body .hesk-search-modal .ticket-query-card input[type="search"],
    html body .hesk-search-modal .ticket-query-card select,
    html body .hesk-search-modal .ticket-query-card .selectize-input {
        width: 100% !important;
        min-height: 46px !important;
        padding: 11px 13px !important;
        border: 1px solid #e4e9f2 !important;
        border-radius: 13px !important;
        background: #fff !important;
        font-size: 14.5px !important;
    }

    /* --- ปุ่มท้ายกล่อง: หลัก + รอง อยู่บรรทัดเดียว --- */
    html body .hesk-search-modal .ticket-query-card .ticket-query-actions,
    html body .hesk-search-modal .ticket-query-card .search-buttons,
    html body .hesk-search-modal .ticket-query-card .buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin: 12px 0 0 !important;
        padding: 12px 0 0 !important;
        border-top: 1px dashed var(--tp-line) !important;
    }
    html body .hesk-search-modal .ticket-query-card .btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 13px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }
    html body .hesk-search-modal .ticket-query-card .btn--blue-border {
        background: #fff !important;
        color: #2563eb !important;
        border: 1px solid #d7e3fb !important;
    }
    html body .hesk-search-modal .ticket-query-card .btn .icon { width: 16px !important; height: 16px !important; }

    /* ============================================================
     * 20) หน้ารายละเอียดเรื่อง — เนื้อหาแถวแรกมุดใต้แถบหัว
     *     ต้นเหตุ: ticket-view.css ตั้ง
     *       body:not(.cust-help) .main__content.ticket.ticket--merged { padding: 20px !important }
     *     น้ำหนักสูงกว่ากฎกลางของสกินมือถือ (เว้นหัว = --tp-head-h + 14px)
     *     -> การ์ด "เรื่องนี้ได้รับการมอบหมายให้: / ไม่มอบหมาย" จึงมุดอยู่ใต้แถบหัวที่เป็น fixed
     *     (ไฟล์นั้นเผื่อค่าไว้เฉพาะ min-width:900px ไม่ได้เผื่อจอมือถือ)
     * ============================================================ */
    html body:not(.cust-help) .main__content.ticket,
    html body:not(.cust-help) .main__content.ticket.ticket--merged {
        padding-top: calc(var(--tp-head-h) + 14px) !important;
        padding-right: 14px !important;
        padding-bottom: calc(var(--tp-tab-h) + 26px) !important;
        padding-left: 14px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* --- ตัวแผ่นเอง: สูงตามเนื้อหา ไม่ทิ้งพื้นที่ว่างครึ่งจอ --- */
    html body .hesk-search-modal__body {
        height: auto !important;          /* เดิมสูงคงที่ ทำให้เหลือพื้นที่ว่างครึ่งจอ */
        max-height: 84vh !important;
        overflow-y: auto !important;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--tp-bg) !important;
    }

    /* ============================================================
     * 21) ช่องเลือกแบบพิมพ์ค้นหาได้ (selectize) — ให้ทุกช่องหน้าตาเดียวกัน
     *     แก้: กล่องข้างในไม่เต็มความกว้าง · กรอบสี่เหลี่ยมของช่องพิมพ์โผล่มาทับ ·
     *          ลูกศร v โดนทับ
     * ============================================================ */
    html body .main__content .selectize-control { width: 100% !important; }
    html body .main__content .selectize-control > .selectize-input {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 44px !important;
        padding: 9px 34px 9px 13px !important;   /* เว้นที่ให้ลูกศร */
        border: 1px solid #e4e9f2 !important;
        border-radius: 12px !important;
        background: #fff !important;
        font-size: 13.5px !important;
        line-height: 1.4;
        box-shadow: none !important;
    }
    html body .main__content .selectize-control > .selectize-input.focus,
    html body .main__content .selectize-control > .selectize-input.dropdown-active {
        border-color: #2563eb !important;
        border-radius: 12px !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
    }
    html body .main__content .selectize-control > .selectize-input > .item {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* ช่องพิมพ์ค้นหาที่ซ้อนอยู่: ไม่ต้องมีกรอบ/พื้นของตัวเอง */
    html body .main__content .selectize-control > .selectize-input input {
        flex: 1 1 auto;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 13.5px !important;
        line-height: 1.4 !important;
    }
    /* ลูกศร v วางเองให้ตรงกลางแนวตั้ง ไม่ทับข้อความ */
    html body .main__content .selectize-control.single > .selectize-input::after {
        right: 14px !important;
        margin-top: 0 !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
    /* รายการที่กางออกมา */
    html body .main__content .selectize-dropdown {
        margin-top: 6px !important;
        border: 1px solid #e4e9f2 !important;
        border-radius: 12px !important;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(16, 24, 40, .14) !important;
    }
    html body .main__content .selectize-dropdown .option {
        padding: 11px 13px !important;
        font-size: 13.5px !important;
    }

    /* ============================================================
     * 22) หน้ารายละเอียดเรื่อง (มือถือ) — จัดระเบียบชุดใหญ่ 19 ส.ค. 69
     * ============================================================ */

    /* --- 22.1 แถวบน: "มอบหมายให้" + ปุ่มแก้ไข/พิมพ์/ลบ อยู่การ์ดเดียวบรรทัดเดียว --- */
    html body .main__content.ticket .ux-topline {
        display: flex !important;
        flex-direction: row !important;   /* ธีมตั้ง column ไว้ -> flex-basis กลายเป็นความสูง 190px */
        flex-wrap: wrap;
        align-items: center;
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    html body .main__content.ticket .ux-topline .ux-assign-banner {
        flex: 1 1 160px !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        min-height: 0 !important;
        height: auto !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    /* ไอคอนตกแต่งของธีมดันความสูงการ์ดเป็น 190px บนมือถือ — ซ่อนไว้ */
    html body .main__content.ticket .ux-topline .ux-assign-banner::before,
    html body .main__content.ticket .ux-topline .ux-assign-banner::after {
        content: none !important;
        display: none !important;
    }
    /* จอแคบ: ย่อป้ายยาว "เรื่องนี้ได้รับการมอบหมายให้:" เหลือ "มอบหมาย:"
       เพื่อให้ชื่อเจ้าหน้าที่มีที่พอ ไม่ถูกตัดเหลือ "นาย…" */
    html body .main__content.ticket .ux-topline .ux-assign-banner > .title {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: var(--tp-text-2) !important;
        white-space: nowrap;
    }
    html body .main__content.ticket .ux-topline .ux-assign-banner > .title > label,
    html body .main__content.ticket .ux-topline .ux-assign-banner > .title > * { display: none !important; }
    html body .main__content.ticket .ux-topline .ux-assign-banner > .title::after {
        content: "มอบหมาย:";
        display: inline-block;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--tp-text-2);
    }
    @media screen and (min-width: 480px) {
        html body .main__content.ticket .ux-topline .ux-assign-banner > .title::after { content: "มอบหมายให้:"; }
    }
    html body .main__content.ticket .ux-topline .ux-assign-banner form {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    /* ชื่อยาวต้องไม่ขาด: ให้ช่องยืดเต็มที่แล้วค่อยตัดด้วย … */
    html body .main__content.ticket .ux-topline .dropdown-select { width: 100% !important; min-width: 0 !important; }
    html body .main__content.ticket .ux-topline .dropdown-select > .label { padding-right: 30px !important; }
    html body .main__content.ticket .ux-topline .dropdown-select > .label > span {
        display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* ปุ่มแก้ไข/พิมพ์/ลบ: เม็ดเล็ก ชิดขวา */
    html body .main__content.ticket .ux-topline .params--bar {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    /* จอแคบ: ปุ่มเหลือไอคอนล้วน เพื่อให้ทั้งแถวอยู่บรรทัดเดียวกับช่องมอบหมาย */
    html body .main__content.ticket .ux-topline .params--bar > a,
    html body .main__content.ticket .ux-topline .params--bar .ux-onlybtn > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 38px;
        min-height: 38px;
        padding: 0 !important;
        font-size: 0 !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        color: var(--tp-text) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        white-space: nowrap;
    }
    html body .main__content.ticket .ux-topline .params--bar .ux-onlybtn > a {
        border-color: #fbd5d5 !important; background: #fff5f5 !important; color: #c53030 !important;
    }
    html body .main__content.ticket .ux-topline .params--bar .icon { width: 15px !important; height: 15px !important; }


    /* --- 22.2 การ์ดจัดการเรื่อง: สถานะ + หน่วยงานเจ้าภาพ บรรทัดเดียว --- */
    html body .main__content.ticket .row.ts,
    html body .main__content.ticket .row.ux-unitrow { margin: 0 !important; }
    html body .main__content.ticket .ux-mgline {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        margin: 0 0 10px !important;
    }
    html body .main__content.ticket .ux-mgline > .row {
        display: block !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    html body .main__content.ticket .ux-mgline > .row > .title {
        margin: 0 0 5px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        white-space: nowrap;
    }
    html body .main__content.ticket .ux-mgline .dropdown-select { width: 100% !important; }

    /* --- 22.3 แถวเครื่องมือ: ไทม์ไลน์ · ครบกำหนด · ชั้นความเร็ว · มอบหมายให้ตนเอง --- */
    html body .main__content.ticket .ux-mgtools {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        align-items: end;
        margin: 0 !important;
    }
    html body .main__content.ticket .ux-mgtools > * {
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    html body .main__content.ticket .ux-mgtools .title {
        margin: 0 0 5px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        white-space: nowrap;
    }
    html body .main__content.ticket .ux-mgtools .ux-tlbtn,
    html body .main__content.ticket .ux-mgtools .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }
    html body .main__content.ticket .ux-mgtools .dropdown-select,
    html body .main__content.ticket .ux-mgtools input[type="text"] { width: 100% !important; }

    /* --- 22.4 dropdown ที่กางออกมาต้องอยู่บนสุด ไม่โดนการ์ดถัดไปทับ --- */
    html body .main__content.ticket .dropdown-select { position: relative; }
    html body .main__content.ticket .dropdown-select.out-close.active,
    html body .main__content.ticket .dropdown-select:focus-within { z-index: 60 !important; }
    html body .main__content.ticket .dropdown-select > .dropdown-list {
        z-index: 70 !important;
        max-height: 46vh;
        overflow-y: auto;
        border-radius: 12px !important;
        box-shadow: 0 14px 34px rgba(16, 24, 40, .18) !important;
    }
    html body .main__content.ticket .params--block,
    html body .main__content.ticket .ticket__body_block { overflow: visible !important; }

    /* --- 22.5 การ์ดหน่วยดำเนินการ: ช่องเลือก + ปุ่มเพิ่ม เชื่อมเป็นชุดเดียว --- */
    html body .main__content.ticket .ux-units__add {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 0 !important;
        margin: 10px 0 0 !important;
        border: 1px solid var(--tp-line);
        border-radius: 13px;
        overflow: hidden;
        background: #fff;
    }
    html body .main__content.ticket .ux-units__add .ux-sel--add,
    html body .main__content.ticket .ux-units__add .dropdown-select {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .ux-units__add .ux-units__addbtn {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 40% !important;
    }
    html body .main__content.ticket .ux-units__add .dropdown-select > .label {
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    html body .main__content.ticket .ux-units__add .ux-units__addbtn,
    html body .main__content.ticket .ux-units__add .btn {
        flex: 0 0 auto !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 0 !important;
        border-left: 1px solid var(--tp-line) !important;
        border-radius: 0 !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }
    /* แถวหน่วยงาน: ชื่อ + ป้ายเจ้าของเรื่อง + สถานะ อยู่ชุดเดียวกัน */
    html body .main__content.ticket .ux-unit {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 7px !important;
        margin: 0 0 8px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 13px !important;
        background: #fff !important;
    }
    html body .main__content.ticket .ux-unit__name {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }
    html body .main__content.ticket .ux-unit__info { min-width: 0; }
    html body .main__content.ticket .ux-unit__ctl {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 8px !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .ux-unit__ctl .dropdown-select,
    html body .main__content.ticket .ux-unit__ctl .ux-sel {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    /* ฟอร์มลบหน่วยงาน: ปุ่มถังขยะเล็ก ไม่ยืดเต็มแถว */
    html body .main__content.ticket .ux-unit form:not(.ux-unit__ctl) { flex: 0 0 auto !important; margin: 0 !important; }
    html body .main__content.ticket .ux-unit .ux-unit__del,
    html body .main__content.ticket .ux-unit button:not(.dropdown-select),
    html body .main__content.ticket .ux-unit form:not(.ux-unit__ctl) button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 1px solid #fbd5d5 !important;
        border-radius: 11px !important;
        background: #fff5f5 !important;
        font-size: 0 !important;
    }
    html body .main__content.ticket .ux-unit form:not(.ux-unit__ctl) button .icon,
    html body .main__content.ticket .ux-unit .ux-unit__del .icon { width: 16px !important; height: 16px !important; fill: #c53030 !important; }
    /* ให้ชื่อหน่วยงาน + ตัวควบคุม อยู่แถวเดียวถ้ากว้างพอ */
    html body .main__content.ticket .ux-unit {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    @media screen and (min-width: 430px) {
        html body .main__content.ticket .ux-unit {
            grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) !important;
            align-items: center;
        }
        html body .main__content.ticket .ux-unit .ux-unit__info { grid-column: 1; }
        html body .main__content.ticket .ux-unit .ux-unit__ctl { grid-column: 2; }
    }

    /* --- 22.6 การ์ดรายละเอียด/ข้อมูลประกอบเรื่อง: กระชับลง --- */
    html body .main__content.ticket .ticket__body_block,
    html body .main__content.ticket .params--block {
        padding: 13px 14px !important;
        border-radius: 16px !important;
    }
    html body .main__content.ticket .ux-fieldgrid,
    html body .main__content.ticket .ticket__custom_fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    html body .main__content.ticket .ux-field,
    html body .main__content.ticket .ticket__custom_fields > div {
        min-width: 0;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f8 !important;
    }
    html body .main__content.ticket .ux-field .title,
    html body .main__content.ticket .ticket__custom_fields > div .title,
    html body .main__content.ticket .ux-field > small {
        margin: 0 0 2px !important;
        font-size: 11px !important;
        color: var(--tp-text-2) !important;
        line-height: 1.35;
    }
    html body .main__content.ticket .ux-field .value,
    html body .main__content.ticket .ticket__custom_fields > div .value {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.4;
        word-break: break-word;
    }
    /* หัวข้อกลุ่ม (ข้อมูลประกอบเรื่อง / ข้อมูลการดำเนินการ) เล็กลง */
    html body .main__content.ticket .ux-sechead,
    html body .main__content.ticket .ticket__body_block > h3,
    html body .main__content.ticket .ticket__body_block > h4 {
        margin: 0 0 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--tp-text-2) !important;
    }

    /* --- 22.7 การ์ดตอบกลับ: ปุ่มเป็นไอคอนล้วนมุมขวาบน --- */
    html body .main__content.ticket .block--head {
        position: relative;
        display: flex !important;
        align-items: flex-start;
        gap: 10px;
        padding-right: 118px !important;
    }
    /* ชุดปุ่มมุมขวาบน: วางเป็นแถวเดียว ไม่ทับกัน */
    html body .main__content.ticket .block--head .ux-replyacts {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex !important;
        align-items: center;
        gap: 6px !important;
    }
    html body .main__content.ticket .block--head .ux-replyacts > * {
        position: static !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .block--head .more.dropdown > a,
    html body .main__content.ticket .block--head .ux-onlybtn > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        padding: 0 !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        font-size: 0 !important;          /* เหลือแค่ไอคอน */
        text-decoration: none !important;
    }
    html body .main__content.ticket .block--head .ux-onlybtn > a {
        border-color: #fbd5d5 !important; background: #fff5f5 !important;
    }
    html body .main__content.ticket .block--head .more.dropdown > a .icon,
    html body .main__content.ticket .block--head .ux-onlybtn > a .icon {
        width: 17px !important; height: 17px !important;
    }
    html body .main__content.ticket .block--head .ux-onlybtn > a .icon { fill: #c53030 !important; }

    /* --- 22.8 โซนไฟล์แนบ: การ์ดเส้นประ ไม่ใช่แปะลอย --- */
    html body .main__content.ticket .attachments,
    html body .main__content.ticket .ux-upload-act {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px !important;
        margin: 10px 0 0 !important;
        padding: 14px 12px !important;
        border: 1px dashed #c9d6ea !important;
        border-radius: 14px !important;
        background: #f8fbff !important;
        text-align: center;
    }
    html body .main__content.ticket .attachments .btn,
    html body .main__content.ticket .ux-upload-act .btn {
        width: auto !important;
        min-height: 42px !important;
        padding: 0 18px !important;
        border-radius: 12px !important;
        font-size: 13.5px !important;
    }
    html body .main__content.ticket .attachments small,
    html body .main__content.ticket .ux-upload-act small,
    html body .main__content.ticket .attachments .ux-filehint {
        font-size: 11.5px !important;
        color: var(--tp-text-2) !important;
        line-height: 1.5;
    }

    /* --- 22.11 ตัวเลือกก่อนส่ง: ระดับชั้นความเร็วบรรทัดเดียว dropdown ชิดขวา --- */
    html body .main__content.ticket .ux-prio-row,
    html body .main__content.ticket .block--checkboxs .ux-priorow {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    html body .main__content.ticket .ux-prio-row > label,
    html body .main__content.ticket .ux-prio-row > .title {
        flex: 1 1 auto; min-width: 0;
        font-size: 13px !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html body .main__content.ticket .ux-prio-row .dropdown-select {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 132px !important;
        margin-left: auto !important;
    }

    /* --- 22.12 ปุ่มส่ง: บันทึก · บันทึกไว้ทำต่อ · บันทึกเป็นสถานะ บรรทัดเดียว --- */
    html body .main__content.ticket .ux-submitrow,
    html body .main__content.ticket form[name="form1"] .buttons {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px !important;
        margin: 12px 0 0 !important;
    }
    html body .main__content.ticket .ux-submitrow > *,
    html body .main__content.ticket form[name="form1"] .buttons > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .ux-submitrow .btn,
    html body .main__content.ticket form[name="form1"] .buttons .btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 13.5px !important;
        white-space: nowrap;
    }
    /* dropdown "บันทึกเป็นสถานะ" ต้องกางเข้าในจอ ไม่จมซ้าย */
    html body .main__content.ticket #submit-as-div,
    html body .main__content.ticket .submit-as {
        position: relative !important;
        flex: 1 1 100% !important;
    }
    html body .main__content.ticket #submit-as-div .dropdown-list,
    html body .main__content.ticket .submit-as .dropdown-list {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: 46vh;
        overflow-y: auto;
    }

    /* --- 22.13 หัวข้อพับได้: ข้อความซ้าย ลูกศรขวา --- */
    html body .main__content.ticket .accordion-title {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 10px;
        width: 100%;
        text-align: left !important;
    }
    html body .main__content.ticket .accordion-title > span {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html body .main__content.ticket .accordion-title > .icon,
    html body .main__content.ticket .accordion-title svg.icon {
        flex: 0 0 auto;
        margin-left: auto !important;
    }

    /* --- 22.14 ช่องว่างท้ายหน้าก่อนเครดิต --- */
    html body:not(.cust-help) .main__content.ticket { padding-bottom: 16px !important; }
    html body:not(.cust-help) .main__content.ticket + .footer { padding-top: 6px !important; }

    /* ============================================================
     * 23) หน้ารายงานบนมือถือ
     * ============================================================ */
    html body .ux-report-btns--under {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 10px 0 14px !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }
    html body .ux-report-btns--under > * {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }
    html body .ux-report-btns--under .ux-btn-print { grid-column: 1 / -1; }
    html body .ux-report-btns--under .ux-rbtn__ic { display: inline-flex; width: 17px; height: 17px; flex: 0 0 17px; }
    html body .ux-report-btns--under .ux-rbtn__ic svg { width: 17px; height: 17px; }

    /* กรองข้อมูลตามช่วงเวลา: วันที่เริ่มต้น + วันที่สิ้นสุด บรรทัดเดียว */
    html body .main__content #startDate,
    html body .main__content #endDate { width: 100% !important; }
    html body .main__content .row:has(> .col-md-4 #startDate),
    html body .main__content .row:has(> .col-md-4 #endDate) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    html body .main__content .row:has(> .col-md-4 #startDate) > .col-md-4,
    html body .main__content .row:has(> .col-md-4 #endDate) > .col-md-4 {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* ปุ่ม "แสดงข้อมูล" เต็มความกว้างใต้ช่องวันที่ */
    html body .main__content .row:has(> .col-md-4 #startDate) > .col-md-4:last-child { grid-column: 1 / -1; }

    /* ============================================================
     * 24) ข้อมูลประกอบเรื่อง / ข้อมูลการดำเนินการ — การ์ดเล็ก 2 คอลัมน์
     *     (เดิมแต่ละช่องสูง 93px กินพื้นที่มาก)
     * ============================================================ */
    html body .main__content.ticket .ticket__body_block table.ux-ftable {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 10px !important;
    }
    html body .main__content.ticket .ticket__body_block table.ux-ftable tbody,
    html body .main__content.ticket .ticket__body_block table.ux-ftable thead { display: contents !important; }
    html body .main__content.ticket .ticket__body_block table.ux-ftable tr {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 1px solid #eef2f8 !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
    }
    html body .main__content.ticket .ticket__body_block table.ux-ftable tr.ux-wide { grid-column: 1 / -1; }
    html body .main__content.ticket .ticket__body_block table.ux-ftable td {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    html body .main__content.ticket .ticket__body_block table.ux-ftable .custom-field-title,
    html body .main__content.ticket .ticket__body_block table.ux-ftable td:first-child {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        line-height: 1.35 !important;
    }
    html body .main__content.ticket .ticket__body_block table.ux-ftable td:last-child,
    html body .main__content.ticket .ticket__body_block table.ux-ftable td:last-child span {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--tp-text) !important;
        line-height: 1.45 !important;
        word-break: break-word;
    }
    /* เนื้อความยาว (รายละเอียดเรื่อง) ให้อ่านสบายแต่ไม่ใหญ่เกิน */
    html body .main__content.ticket .ticket__body_block .message,
    html body .main__content.ticket .ticket__body_block > p,
    html body .main__content.ticket .original-message p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    /* ============================================================
     * 25) การ์ดรายละเอียดเรื่อง — ลำดับความสำคัญ: ชื่อเรื่องเด่นสุด
     * ============================================================ */
    html body .main__content.ticket .ticket__body_block.original-message > h3 {
        margin: 0 0 8px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        color: var(--tp-text) !important;
    }
    /* แถวข้อมูลผู้ร้อง = ข้อมูลรอง */
    html body .main__content.ticket .ticket__body_block.original-message > .block--head {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px !important;
        margin: 0 0 10px !important;
        padding: 0 0 10px !important;
        border-bottom: 1px dashed var(--tp-line) !important;
        font-size: 12.5px !important;
        color: var(--tp-text-2) !important;
    }
    html body .main__content.ticket .ticket__body_block.original-message > .block--head b,
    html body .main__content.ticket .ticket__body_block.original-message > .block--head strong {
        font-size: 13px !important;
        color: var(--tp-text) !important;
    }
    /* หัวข้อกลุ่มในการ์ด */
    html body .main__content.ticket .ticket__body_block .ux-sechead,
    html body .main__content.ticket .ticket__body_block > .title {
        margin: 12px 0 8px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text-2) !important;
    }
    html body .main__content.ticket .block--description {
        margin: 4px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f8 !important;
    }

    /* ============================================================
     * 26) ระยะท้ายหน้า: หน้าที่มีแถบเครดิตอยู่แล้ว ไม่ต้องเว้นที่ให้แถบเมนูซ้ำ
     *     (เดิมเว้น 94px + เครดิตอีกชั้น เลยห่างกันเกินไป)
     * ============================================================ */
    html body:not(.cust-help).has-mtab .main__content.ticket,
    html body:not(.cust-help).has-mtab .main__content.tickets,
    html body:not(.cust-help).has-mtab .main__content.profile,
    html body:not(.cust-help).has-mtab .hm {
        padding-bottom: 14px !important;
    }
    html body:not(.cust-help) .footer { padding-top: 8px !important; }

    /* ============================================================
     * 27) ตอบในฐานะ + แม่แบบรายงานผล (มือถือ) — ตามโครงจริงของหน้า
     *     .ux-asrole > .ux-asrole__lbl + .ux-asrole__opts > label.ux-asrole__opt
     *     section.canned-options > .canned-header + .options
     * ============================================================ */
    html body .main__content.ticket .ux-asrole {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 14px !important;
        background: #fff !important;
    }
    html body .main__content.ticket .ux-asrole__lbl {
        display: block !important;
        margin: 0 0 7px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--tp-text-2) !important;
    }
    /* ตัวเลือกอยู่ "บรรทัดเดียว" — เลื่อนแนวนอนได้ถ้าจอแคบ */
    html body .main__content.ticket .ux-asrole__opts {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 2px 2px 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    html body .main__content.ticket .ux-asrole__opts::-webkit-scrollbar { display: none; }
    html body .main__content.ticket .ux-asrole .ux-asrole__opt {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    html body .main__content.ticket .ux-asrole .ux-asrole__opt:has(input:checked) {
        border-color: #2563eb !important;
        background: #eff6ff !important;
        color: #1d4ed8 !important;
    }
    html body .main__content.ticket .ux-asrole .ux-asrole__opt input { margin: 0 !important; }

    /* --- แม่แบบรายงานผล: ผูกเป็นชุดเดียวและต่อกับกล่องพิมพ์ข้อความ --- */
    html body .main__content.ticket .canned-options {
        margin: 0 !important;
        padding: 11px 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-bottom: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        background: #f8fafc !important;
        box-shadow: none !important;
    }
    html body .main__content.ticket .canned-options .canned-header {
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text-2) !important;
        text-align: left !important;
    }
    html body .main__content.ticket .canned-options .options {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    /* ช่องเลือกแม่แบบขึ้นก่อน (สิ่งที่ต้องเลือกจริง) แล้วค่อยเป็นวิธีแทรก */
    html body .main__content.ticket .canned-options .options > .form-group { order: 1; margin: 0 !important; }
    html body .main__content.ticket .canned-options .options > div:not(.form-group) { order: 2; }
    html body .main__content.ticket .canned-options .form-group > label {
        display: block !important;
        margin: 0 0 5px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
    }
    /* วิธีแทรก: ปุ่มแบบแบ่งส่วน (segmented) บรรทัดเดียว */
    html body .main__content.ticket .canned-options .options > div:not(.form-group) {
        display: flex !important;
        gap: 6px !important;
    }
    html body .main__content.ticket .canned-options .radio-custom {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .canned-options .radio-custom label {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 11px !important;
        background: #fff !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* ซ่อนวงกลม radio ที่โผล่นอกปุ่ม — ใช้สีของปุ่มบอกสถานะแทน */
    html body .main__content.ticket .canned-options .radio-custom input {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none;
    }
    html body .main__content.ticket .canned-options .radio-custom input:checked + label {
        border-color: #2563eb !important;
        background: #eff6ff !important;
        color: #1d4ed8 !important;
    }
    /* กล่องพิมพ์ข้อความต่อจากแม่แบบแบบไร้รอยต่อ */
    html body .main__content.ticket .canned-options + .block--message .tox-tinymce,
    html body .main__content.ticket .canned-options ~ #message-block .tox-tinymce {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /* ============================================================
     * 28) เก็บงานรอบ 19 ส.ค. 69 (มือถือ)
     * ============================================================ */

    /* --- 28.1 selectize ต้องกางลงล่างเหมือน dropdown ตัวอื่น --- */
    html body .main__content .selectize-control .selectize-dropdown {
        top: 100% !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }

    /* --- 28.2 แถวบนหน้ารายละเอียด: ให้ dropdown ลอยเหนือการ์ดถัดไป --- */
    html body .main__content.ticket .ux-topline { position: relative; z-index: 80 !important; }
    html body .main__content.ticket .ux-topline .dropdown-select { position: relative; z-index: 81 !important; }
    html body .main__content.ticket .ux-topline .dropdown-list {
        z-index: 120 !important;
        max-height: 44vh;
        overflow-y: auto;
    }
    /* ปุ่มไอคอน: สัญลักษณ์อยู่กลางกรอบพอดี */
    html body .main__content.ticket .ux-topline .params--bar > a,
    html body .main__content.ticket .ux-topline .params--bar .ux-onlybtn > a {
        gap: 0 !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    html body .main__content.ticket .ux-topline .params--bar .icon {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
    }

    /* --- 28.3 แถวเครื่องมือ: ให้เป็นมาตรฐานเดียวกับสถานะ/หน่วยงานเจ้าภาพ --- */
    html body .main__content.ticket .ux-mgtools > * {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    html body .main__content.ticket .ux-mgtools .ux-tlbtn,
    html body .main__content.ticket .ux-mgtools .btn,
    html body .main__content.ticket .ux-mgtools input[type="text"],
    html body .main__content.ticket .ux-mgtools .dropdown-select > .label {
        min-height: 46px !important;
        padding: 10px 14px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 14px !important;
        background: #fff !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--tp-text) !important;
        box-shadow: none !important;
    }
    html body .main__content.ticket .ux-mgtools .ux-tlbtn { justify-content: flex-start !important; }
    html body .main__content.ticket .ux-mgtools .ux-duerow input[type="text"] { text-align: left; }

    /* --- 28.4 หน่วยดำเนินการ: dropdown ไม่โดนตัด + ปุ่มเพิ่มเป็นปุ่มมนแยกกรอบ --- */
    html body .main__content.ticket .ux-units__add {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        gap: 8px !important;
        position: relative;
        z-index: 20;
    }
    html body .main__content.ticket .ux-units__add .ux-sel--add > .label {
        border: 1px solid var(--tp-line) !important;
        border-radius: 13px !important;
        background: #fff !important;
        min-height: 46px !important;
    }
    html body .main__content.ticket .ux-units__add .dropdown-list {
        z-index: 130 !important;
        max-height: 44vh;
        overflow-y: auto;
    }
    html body .main__content.ticket .ux-units__add .ux-units__addbtn {
        min-height: 46px !important;
        padding: 0 18px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: #2563eb !important;
        color: #fff !important;
    }
    html body .main__content.ticket .ux-units { overflow: visible !important; }

    /* --- 28.5 แม่แบบ: ปุ่มตัวเลือกทรงเดียวกับ "ตอบในฐานะ" + dropdown เต็มช่อง --- */
    html body .main__content.ticket .canned-options .radio-custom {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
    }
    html body .main__content.ticket .canned-options .radio-custom label {
        min-height: 38px !important;
        border-radius: 999px !important;
        background: #fff !important;
        font-size: 12.5px !important;
        gap: 8px !important;
    }
    /* input ถูกย้ายเข้าในป้ายแล้ว -> แสดงวงกลมจริงเหมือนชิป "ตอบในฐานะ" */
    html body .main__content.ticket .canned-options .radio-custom label input {
        position: static !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        margin: 0 !important;
        pointer-events: auto;
    }
    html body .main__content.ticket .canned-options .radio-custom label::before,
    html body .main__content.ticket .canned-options .radio-custom label::after {
        content: none !important;
        display: none !important;
    }
    html body .main__content.ticket .canned-options .selectize-control { width: 100% !important; }
    html body .main__content.ticket .canned-options .selectize-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* --- 28.6 ปุ่มบันทึก: กึ่งกลางจอ + dropdown ตรงตำแหน่งปุ่ม --- */
    html body .main__content.ticket .ux-submitrow {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body .main__content.ticket .ux-submitrow > * { flex: 1 1 0 !important; }
    html body .main__content.ticket .ux-submitrow #submit-as-div,
    html body .main__content.ticket .ux-submitrow .submit-as { position: relative !important; }
    html body .main__content.ticket .ux-submitrow .dropdown-list {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        transform: none !important;
        z-index: 140 !important;
    }

    /* --- 28.7 ปุ่มบนการ์ดตอบกลับ: ไอคอนกลางกรอบ เว้นระยะ --- */
    html body .main__content.ticket .block--head .ux-replyacts { gap: 8px !important; }
    html body .main__content.ticket .block--head .ux-replyacts > * > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    html body .main__content.ticket .block--head .ux-replyacts .icon {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
    }

    /* --- 28.8 ไฟล์แนบในการตอบกลับ: การ์ดรายการไฟล์ ไม่ใช่ลิงก์เปล่า --- */
    html body .main__content.ticket .block--message .attachments a,
    html body .main__content.ticket .ticket__reply .attachments a,
    html body .main__content.ticket .block--body .attachments a {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin: 6px 0 0 !important;
        padding: 9px 12px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        color: var(--tp-text) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        word-break: break-word;
    }
    html body .main__content.ticket .block--message .attachments a .icon,
    html body .main__content.ticket .block--body .attachments a .icon { width: 16px !important; height: 16px !important; fill: #2563eb !important; }

    /* ============================================================
     * 29) เก็บงานรอบสอง 19 ส.ค. 69 (มือถือ)
     * ============================================================ */

    /* --- 29.1 dropdown ต้องลอยเหนือแถบเครดิต/การ์ดอื่นเสมอ --- */
    html body .main__content .selectize-dropdown { z-index: 2000 !important; }
    html body .main__content.tickets .bulk-actions { position: relative; z-index: 40; }
    html body:not(.cust-help) .footer { position: relative; z-index: 1 !important; }

    /* --- 29.2 แถวบน: ให้เหนือกว่า dropdown ของหน่วยงานเจ้าภาพ --- */
    html body .main__content.ticket .ux-topline { z-index: 200 !important; }
    html body .main__content.ticket .ux-topline .dropdown-select { z-index: 201 !important; }
    html body .main__content.ticket .ux-topline .dropdown-list { z-index: 2100 !important; }

    /* --- 29.3 ปุ่มแก้ไข/พิมพ์/ลบ: ให้ทั้งสามกรอบเหมือนกันเป๊ะ --- */
    html body .main__content.ticket .ux-topline .params--bar > .dropdown,
    html body .main__content.ticket .ux-topline .params--bar > .more,
    html body .main__content.ticket .ux-topline .params--bar > .ux-onlybtn {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    html body .main__content.ticket .ux-topline .params--bar > a,
    html body .main__content.ticket .ux-topline .params--bar > .dropdown > a,
    html body .main__content.ticket .ux-topline .params--bar > .more > a,
    html body .main__content.ticket .ux-topline .params--bar .ux-onlybtn > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        font-size: 0 !important;
        line-height: 0 !important;
        box-shadow: none !important;
    }
    html body .main__content.ticket .ux-topline .params--bar .ux-onlybtn > a {
        border-color: #fbd5d5 !important;
        background: #fff5f5 !important;
    }

    /* --- 29.4 แถวเครื่องมือ: ชั้นความเร็ว · ไทม์ไลน์ · ครบกำหนด --- */
    html body .main__content.ticket .ux-mgtools { align-items: start !important; }
    html body .main__content.ticket .ux-mgtools > .row:has(.priority),
    html body .main__content.ticket .ux-mgtools > .row.ux-priorow { order: 1; }
    html body .main__content.ticket .ux-mgtools > .ux-tlrow { order: 2; }
    html body .main__content.ticket .ux-mgtools > .ux-duerow { order: 3; grid-column: 1 / -1; }
    /* ทุกตัวควบคุมกว้างเต็มช่องเท่ากับ dropdown สถานะ */
    html body .main__content.ticket .ux-mgtools > * > .value,
    html body .main__content.ticket .ux-mgtools .dropdown-select { width: 100% !important; }

    /* --- 29.5 ครบกำหนดรายงานผล: แถวเดียว ปุ่มบันทึก/ยกเลิกไม่เกะกะ --- */
    html body .main__content.ticket .ux-duerow > .value {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px !important;
    }
    html body .main__content.ticket .ux-duerow #toggleDP {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        min-height: 46px;
        padding: 10px 14px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: var(--tp-text) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    html body .main__content.ticket .ux-duerow #modifyduedate { flex: 1 1 100%; }
    html body .main__content.ticket .ux-duerow #modifyduedate .form,
    html body .main__content.ticket .ux-duerow #modifyduedate form {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 8px !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .ux-duerow #modifyduedate .param.calendar {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .ux-duerow #modifyduedate input[type="text"] {
        width: 100% !important;
        min-height: 46px !important;
        padding: 10px 14px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 14px !important;
        background: #fff !important;
        font-size: 13.5px !important;
    }
    html body .main__content.ticket .ux-duerow #modifyduedate .btn,
    html body .main__content.ticket .ux-duerow #modifyduedate button,
    html body .main__content.ticket .ux-duerow #modifyduedate a.btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap;
    }
    /* ปฏิทินต้องลอยเหนือ dropdown อื่น */
    html body .datepickers-container,
    html body .datepicker { z-index: 3000 !important; }

    /* --- 29.6 หัวการ์ดรายละเอียด: ทำให้เป็นหัวเรื่องที่เด่นจริง --- */
    html body .main__content.ticket .ticket__body_block.original-message > h3 {
        display: block;
        margin: 0 0 10px !important;
        padding: 0 0 10px !important;
        border-bottom: 2px solid #e8effb !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        color: #16233a !important;
    }
    html body .main__content.ticket .ticket__body_block.original-message > .block--head {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important;
        gap: 6px 10px !important;
        margin: 0 0 12px !important;
        padding: 10px 12px !important;
        border: 1px solid #eef2f8 !important;
        border-radius: 12px !important;
        background: #fafbfd !important;
        font-size: 12.5px !important;
        color: var(--tp-text-2) !important;
    }
    /* เวลาไปอยู่ท้ายแถวเดียวกับชื่อผู้ร้อง ไม่ตกลงไปลอยกลางบรรทัดใหม่ */
    html body .main__content.ticket .ticket__body_block.original-message > .block--head > time {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 0 0 auto !important;
        text-align: right !important;
        color: #98a2b3 !important;
        font-size: 12.5px !important;
    }
    html body .main__content.ticket .ticket__body_block.original-message > .block--head .contact {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px !important;
        min-width: 0;
    }
    html body .main__content.ticket .ticket__body_block.original-message > .block--head .contact > span:first-child {
        color: #98a2b3 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    html body .main__content.ticket .ticket__body_block.original-message > .block--head .contact .dropdown > label span {
        color: #16233a !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }
    html body .main__content.ticket .ticket__body_block.original-message > .block--head b,
    html body .main__content.ticket .ticket__body_block.original-message > .block--head strong,
    html body .main__content.ticket .ticket__body_block.original-message > .block--head .dropdown-select {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #16233a !important;
    }

    /* --- 29.7 ข้อมูลการดำเนินการ: สองคอลัมน์เหมือนข้อมูลประกอบเรื่อง --- */
    html body .main__content.ticket .ticket-extra-fields__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    html body .main__content.ticket .ticket-extra-fields__item {
        min-width: 0;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 1px solid #eef2f8 !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
    }
    html body .main__content.ticket .ticket-extra-fields__item.is-wide { grid-column: 1 / -1; }
    html body .main__content.ticket .ticket-extra-fields__item .custom-field-title {
        display: block;
        margin-bottom: 2px;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--tp-text-2) !important;
        line-height: 1.35 !important;
    }
    html body .main__content.ticket .ticket-extra-fields__item > span:last-child {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        word-break: break-word;
    }
    html body .main__content.ticket .ticket-extra-fields > h4 {
        margin: 12px 0 8px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--tp-text-2) !important;
    }

    /* --- 29.8 ชิปแม่แบบ: เงาเท่ากับ "ตอบในฐานะ" (ไม่มีเงาใหญ่) --- */
    html body .main__content.ticket .canned-options .radio-custom label,
    html body .main__content.ticket .canned-options .radio-custom input:checked + label,
    html body .main__content.ticket .canned-options .radio-custom label:has(input:checked) {
        box-shadow: none !important;
        outline: 0 !important;
    }
    html body .main__content.ticket .canned-options .radio-custom label:has(input:checked) {
        border-color: #2563eb !important;
        background: #eff6ff !important;
        color: #1d4ed8 !important;
    }

    /* ============================================================
     * 30) เก็บงานรอบสาม 19 ส.ค. 69
     *     ผูกกฎกับโครงจริงของหน้า (.assignment-highlight / .params--bar)
     *     ไม่พึ่งคลาส .ux-topline ที่สร้างด้วย JS — ถ้าสคริปต์ยังไม่อัปเดต
     *     หรือโหลดไม่ทัน กฎเดิมจะไม่จับเลย (เป็นเหตุที่แก้แล้วยังไม่เปลี่ยน)
     * ============================================================ */

    /* --- 30.1 dropdown "มอบหมายให้" ต้องอยู่เหนือการ์ดถัดไปเสมอ --- */
    html body .main__content.ticket .row.assignment-highlight,
    html body .main__content.ticket .ux-assign {
        position: relative !important;
        z-index: 300 !important;
    }
    html body .main__content.ticket .row.assignment-highlight .dropdown-select,
    html body .main__content.ticket .ux-assign .dropdown-select { z-index: 301 !important; }
    html body .main__content.ticket .row.assignment-highlight .dropdown-list,
    html body .main__content.ticket .ux-assign .dropdown-list {
        z-index: 3200 !important;
        min-width: 220px !important;      /* ชื่อยาวไม่ถูกตัด */
    }
    /* การ์ดที่อยู่ถัดลงไปต้องไม่สร้างชั้นซ้อนแข่ง */
    html body .main__content.ticket .params--block,
    html body .main__content.ticket .ux-manage { z-index: 1 !important; }

    /* --- 30.2 ปุ่มแก้ไข/พิมพ์/ลบ: ผูกกับ .params--bar ตรง ๆ --- */
    html body .main__content.ticket .params--bar {
        display: flex !important;
        align-items: center;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    html body .main__content.ticket .params--bar > .dropdown,
    html body .main__content.ticket .params--bar > .more,
    html body .main__content.ticket .params--bar > .ux-onlybtn {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    html body .main__content.ticket .params--bar > a,
    html body .main__content.ticket .params--bar > .dropdown > a,
    html body .main__content.ticket .params--bar > .more > a,
    html body .main__content.ticket .params--bar .ux-onlybtn > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        font-size: 0 !important;
        line-height: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    html body .main__content.ticket .params--bar a .icon,
    html body .main__content.ticket .params--bar a svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
    html body .main__content.ticket .params--bar .ux-onlybtn > a,
    html body .main__content.ticket .params--bar > .dropdown > a {
        border-color: #fbd5d5 !important;
        background: #fff5f5 !important;
    }

    /* --- 30.3 จับคู่บรรทัดในการ์ดจัดการ ---
       แถว 1: มอบหมายให้ตนเอง | พิมพ์ไทม์ไลน์
       แถว 2: ระดับชั้นความเร็ว | ครบกำหนดรายงานผล */
    html body .main__content.ticket .ux-mgtools {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: start !important;
    }
    html body .main__content.ticket .ux-mgtools.has-self > .ux-t-self     { order: 1 !important; }
    html body .main__content.ticket .ux-mgtools.has-self > .ux-t-timeline { order: 2 !important; }
    html body .main__content.ticket .ux-mgtools.has-self > .ux-t-prio     { order: 3 !important; }
    html body .main__content.ticket .ux-mgtools.has-self > .ux-t-due      { order: 4 !important; grid-column: auto !important; }
    /* ไม่มีปุ่มมอบหมายให้ตนเอง (เรื่องมีเจ้าของแล้ว) -> ไทม์ไลน์ขึ้นคู่กับชั้นความเร็ว */
    html body .main__content.ticket .ux-mgtools:not(.has-self) > .ux-t-prio     { order: 1 !important; }
    html body .main__content.ticket .ux-mgtools:not(.has-self) > .ux-t-timeline { order: 2 !important; }
    html body .main__content.ticket .ux-mgtools:not(.has-self) > .ux-t-due      { order: 3 !important; grid-column: 1 / -1 !important; }
    /* ทุกตัวควบคุมเต็มช่องของตัวเอง */
    html body .main__content.ticket .ux-mgtools > * ,
    html body .main__content.ticket .ux-mgtools > * > .value,
    html body .main__content.ticket .ux-mgtools > * > form,
    html body .main__content.ticket .ux-mgtools .dropdown-select,
    html body .main__content.ticket .ux-mgtools .ux-tlbtn,
    html body .main__content.ticket .ux-mgtools .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    html body .main__content.ticket .ux-mgtools > * > .value > a,
    html body .main__content.ticket .ux-mgtools > * > .value > button,
    html body .main__content.ticket .ux-mgtools > * > form > a,
    html body .main__content.ticket .ux-mgtools > * > form > button {
        width: 100% !important;
        min-width: 0 !important;
    }
    html body .main__content.ticket .ux-mgtools .ux-tlbtn,
    html body .main__content.ticket .ux-mgtools .btn,
    html body .main__content.ticket .ux-mgtools > * > .value > a,
    html body .main__content.ticket .ux-mgtools > * > .value > button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 46px !important;
        border-radius: 14px !important;
    }

    /* --- 30.4 dropdown ของ "กระทำกับรายที่เลือก / มอบหมายที่เลือกให้แก่" อยู่บนสุด --- */
    html body .main__content.tickets .bulk-actions { isolation: isolate; z-index: 60; }
    html body .selectize-dropdown,
    html body .main__content .selectize-dropdown { z-index: 4000 !important; }

    /* ============================================================
     * 31) แก้หน้าร่างเรื่อง "ขั้นที่ 4 การจัดการ" + dropdown โดนขอบการ์ดตัด
     * ============================================================ */

    /* --- 31.1 กล่อง <select> ตัวจริงต้องซ่อนเสมอเมื่อธีมสร้าง widget แล้ว
           (กฎช่องกรอกของสกินมือถือไปทำให้มันโผล่ กลายเป็นสองกล่องซ้อนกัน) --- */
    html body .main__content .dropdown-select > select,
    html body .main__content .selectize-control + select,
    html body .main__content select.select2-hidden-accessible,
    html body .main__content select.selectized {
        display: none !important;
    }

    /* --- 31.2 dropdown ต้องไม่ถูกขอบการ์ดตัด (เป็นทุกหน้า ไม่เฉพาะหน้านี้) --- */
    html body .main__content .wiz-panel,
    html body .main__content .wiz-panels,
    html body .main__content .form-group,
    html body .main__content .params--block,
    html body .main__content .ticket__body_block,
    html body .main__content .bulk-actions,
    html body .main__content .bulk-actions__group,
    html body .main__content .bulk-actions__controls,
    html body .main__content .table-wrap,
    html body .main__content .ux-units,
    html body .main__content .block--checkboxs,
    html body .main__content .canned-options {
        overflow: visible !important;
    }
    html body .main__content .dropdown-select.active,
    html body .main__content .selectize-control.dropdown-active,
    html body .main__content .select2-container--open { z-index: 4200 !important; }
    html body .select2-container--open .select2-dropdown,
    html body .select2-dropdown { z-index: 4300 !important; }

    /* --- 31.3 ช่องเลือกหน่วยงาน (select2 หลายค่า) ให้หน้าตาเท่าช่องอื่น --- */
    html body .main__content.ticket-create .select2-container { width: 100% !important; }
    /* หน้าตาของกล่องนี้ย้ายไปคุมรวมที่ css/new-ticket.css (ชุด v2) แล้ว
       ของเดิมตรงนี้ใช้ !important + specificity สูงกว่า จึงทับ v2 ทำให้แก้ที่เดียวไม่ขึ้น
       เหลือไว้เฉพาะกฎที่จำเป็นกับสกินมือถือจริง ๆ */
    html body .main__content.ticket-create .select2-search--inline .select2-search__field,
    html body .main__content.ticket-create .select2-container .select2-search__field,
    html body .main__content.ticket-create .select2-container input.select2-search__field {
        width: auto !important;
        min-width: 60px !important;
        min-height: 0 !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-family: inherit !important;
        font-size: 14px !important;
    }

    /* --- 31.4 ครบกำหนดรายงานผลในหน้าร่างเรื่อง: ไอคอน + ช่องวันที่ แถวเดียว --- */




    html body .main__content.ticket-create .wiz-panel .ux-due-row > button,






    /* --- 31.5 ขั้นที่ 4: กล่องย่อยให้เป็นระเบียบเดียวกัน --- */
    html body .main__content.ticket-create .wiz-panel .form-group.ts,
    html body .main__content.ticket-create .wiz-panel .form-group[class*="ux-"] {
        margin-bottom: 13px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    html body .main__content.ticket-create .wiz-panel .dropdown-select > .label { width: 100% !important; }

    /* ============================================================
     * 32) เก็บงานหน้าร่างเรื่อง ขั้นที่ 4 (20 ส.ค. 69)
     * ============================================================ */

    /* --- 32.1 ช่องติ๊ก: กล่องติ๊กของธีมเป็น ::before วางมุมซ้ายบน -> ทับตัวหนังสือ --- */
    html body .main__content.ticket-create .checkbox-custom { margin: 0 0 8px !important; }
    html body .main__content.ticket-create .checkbox-custom label {
        position: relative !important;
        display: block !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 12px 12px 12px 40px !important;
        border: 1px solid var(--tp-line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        font-size: 13.5px !important;
        font-weight: 600;
        line-height: 1.4;
    }
    html body .main__content.ticket-create .checkbox-custom label::before {
        left: 12px !important;
        top: calc(50% - 8px) !important;
    }
    html body .main__content.ticket-create .checkbox-custom label::after {
        left: 14px !important;
        top: calc(50% - 6px) !important;
    }
    html body .main__content.ticket-create .checkbox-custom input:checked + label {
        border-color: #cfe0fd !important;
        background: #f5f9ff !important;
    }

    /* --- 32.2 dropdown ในวิซาร์ด: กรอบชั้นเดียว (เดิมกรอบนอก+กรอบใน ซ้อนกัน) --- */
    html body .main__content.ticket-create .wiz-panel .dropdown-select {
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    html body .main__content.ticket-create .wiz-panel .dropdown-select > .label {
        min-height: 48px !important;
        padding: 12px 14px !important;
        border: 1px solid #e4e9f2 !important;
        border-radius: 14px !important;
        background: #fff !important;
    }
    html body .main__content.ticket-create .wiz-panel .dropdown-select.active > .label {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
    }

    /* --- 32.3 รายการที่กางออกต้องอยู่เหนือช่องถัดไปเสมอ --- */
    html body .main__content.ticket-create .wiz-panel .form-group,
    html body .main__content.ticket-create .wiz-panel section.param { position: relative; }
    html body .main__content.ticket-create .wiz-panel .form-group:has(.dropdown-select.active),
    html body .main__content.ticket-create .wiz-panel .form-group:has(.selectize-control.dropdown-active),
    html body .main__content.ticket-create .wiz-panel .form-group:has(.select2-container--open) { z-index: 4400 !important; }
    html body .main__content.ticket-create .wiz-panel .dropdown-list { z-index: 4500 !important; }

    /* --- 32.4 แถบหัวสีน้ำเงินต้องอยู่เหนือเนื้อหา ปุ่ม ✕ จะได้กดได้ --- */
    .nt-appbar { z-index: 1200 !important; }
    .nt-appbar__back,
    .nt-appbar__close { position: relative; z-index: 2; }
    /* ห้ามตั้ง z-index ให้ .main__content — จะกลายเป็นชั้นซ้อนใหม่
       แล้ว dropdown ข้างในจะไปอยู่ใต้แถบเครดิต (z-index:1) ทันที */

    /* --- 32.5 แถบเครดิตต้องไม่ลอยทับ dropdown --- */
    html body:not(.cust-help) .footer,
    html body:not(.cust-help) .footer--surindr { z-index: auto !important; }

    /* --- 32.6 รายการที่กางออกต้องไม่ล้นขอบจอด้านขวา --- */
    html body .main__content .dropdown-list {
        max-width: calc(100vw - 28px) !important;
        box-sizing: border-box;
    }
    /* ในวิซาร์ดช่องกว้างเต็มแถว -> ให้รายการกว้างเท่าช่องพอดี
       (เคยลองยึดขอบขวา แล้วรายการที่กว้างกว่าช่องจะทะลุออกนอกจอด้านซ้ายแทน) */
    html body .main__content.ticket-create .wiz-panel .dropdown-list {
        left: 0 !important;
        right: auto !important;
        /* ธีมสั่ง .center -> left:50% + translateX(-50%)
           ถ้าบังคับ left:0 แต่ลืมล้าง transform ลิสต์จะถูกเลื่อนไปทางซ้ายครึ่งความกว้าง
           (ตอนอนิเมชันเปิดยังตรงอยู่ พออนิเมชันจบถึงกระโดดออกนอกจอ) */
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* --- 32.7 หน้าร่างเรื่องตั้ง .main__content เป็น fixed z-index:3000
           แถบหัวจึงต้องสูงกว่านั้น ไม่งั้นปุ่ม ✕ / ‹ กดไม่ได้ --- */
    .nt-appbar { z-index: 3200 !important; }

    /* --- 32.8 กฎกลาง: กล่องไหนที่ "กำลังมี dropdown เปิดอยู่"
           ต้องไม่ตัดขอบและต้องลอยเหนือทุกอย่างในหน้า
           (ครอบทุกหน้า ทุกชนิดของ dropdown — เดิมต้องไล่เขียนทีละการ์ด
            ทำให้ยังมีจุดที่ตกหล่นอยู่เรื่อย ๆ) --- */
    html body .main__content *:has(.selectize-control.dropdown-active),
    html body .main__content *:has(.select2-container--open),
    html body .main__content *:has(.dropdown-select.active) {
        overflow: visible !important;
        clip-path: none !important;
    }
    html body .main__content *:has(> .selectize-control.dropdown-active),
    html body .main__content *:has(> .select2-container--open),
    html body .main__content *:has(> .dropdown-select.active),
    html body .main__content *:has(> * > .selectize-control.dropdown-active),
    html body .main__content *:has(> * > .select2-container--open),
    html body .main__content *:has(> * > .dropdown-select.active) {
        position: relative;
        z-index: 4400 !important;
    }
}