/*
 * เครดิตเว็บ (footer) ศูนย์ดำรงธรรมจังหวัดสุรินทร์ — ทุกหน้า
 * โทน bento: การ์ดขาว, ฟ้า #2563eb, Noto Sans Thai, ชิปช่องทางติดต่อมีไอคอน
 */

.footer--surindr.site-credit {
    padding: 0 !important;
    margin: 28px 0 8px !important;
    color: #475467 !important;
    font-size: 13px;
}

.site-credit__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 22px 24px 18px;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    border: 1px solid #eaecf0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    text-align: center;
}

/* ===== แบรนด์ ===== */
.site-credit__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}
.site-credit__logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}
.site-credit__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.35;
}
.site-credit__title strong {
    font-size: 17px;
    font-weight: 800;
    color: #101828;
}
.site-credit__slogan {
    font-size: 13.5px;
    font-weight: 600;
    color: #2563eb;
}
.site-credit__slogan-en {
    font-size: 12px;
    color: #98a2b3;
    font-style: italic;
}
.site-credit__badge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}
.site-credit__badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .18);
}

/* ===== ช่องทางติดต่อ (ชิป) ===== */
.site-credit__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 0 auto 14px;
}
.site-credit__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e7e9ee;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease, color .15s ease;
}
a.site-credit__chip:hover {
    border-color: #2563eb;
    background: #f5f9ff;
    color: #1456b8;
    transform: translateY(-1px);
}
.site-credit__chip svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}
/* ชิปสายด่วน — เด่นสีแดง */
.site-credit__chip--hot {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
}
a.site-credit__chip--hot:hover {
    border-color: #f04438;
    background: #fee4e2;
    color: #b42318;
}
/* สีไอคอนแต่ละช่องทาง */
.site-credit__chip--fb svg { color: #2563eb; }
.site-credit__chip--line svg { color: #06c755; }
.site-credit__chip--web svg { color: #2563eb; }
.site-credit__chip--phone svg { color: #6938ef; }
.site-credit__chip--hot svg { color: #f04438; }
.site-credit__chip--traffy svg { color: #f79009; }

/* ===== ลิขสิทธิ์ ===== */
.site-credit__copy {
    margin: 0 !important;
    padding-top: 12px;
    border-top: 1px solid #f0f1f4;
    color: #98a2b3;
    font-size: 12.5px;
}

/* จอเล็ก */
@media screen and (max-width: 600px) {
    .site-credit__brand { flex-direction: column; gap: 10px; }
    .site-credit__title { align-items: center; text-align: center; }
}

/* ===== ซ่อนแถบ Powered by HESK/SysAid (อาร์มสั่ง 7 ก.ค. 2026)
 * หมายเหตุ: ซ่อนด้วย CSS เท่านั้น — โค้ดไลเซนส์ใน footer.inc.php ยังอยู่ครบ ไม่แตะต้อง ===== */
footer.footer:not(.footer--surindr) { display: none !important; }

/* ===== แจ้งเตือนผลการทำงาน (Error/Success/Notice) -> toast ลอยขวาบน หายเอง =====
 * js/ux-enhance.js (flashToasts) เป็นคนใส่ .is-toast + จับเวลาปิด */
.main__content.notice-flash.is-toast {
    position: fixed;
    top: calc(96px + var(--toast-offset, 0px));
    right: 22px;
    z-index: 1700;
    width: min(420px, calc(100vw - 40px));
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: noticeToastIn .28s cubic-bezier(.21, 1.02, .73, 1);
}
@media screen and (max-width: 899px) {
    .main__content.notice-flash.is-toast { top: calc(14px + var(--toast-offset, 0px)); right: 14px; }
}
.main__content.notice-flash.is-toast .notification {
    position: relative;
    margin: 0;
    padding: 14px 44px 14px 16px;
    border-radius: 14px;
    border: 1px solid #dde7f5;
    background: #fff;
    color: #22314f;
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .14);
}
.main__content.notice-flash.is-toast .notification.red    { border-color: #fecdd3; background: #fff5f6; color: #9f1239; }
.main__content.notice-flash.is-toast .notification.green  { border-color: #bbe5cb; background: #f2fbf6; color: #14532d; }
.main__content.notice-flash.is-toast .notification.orange { border-color: #fde4bd; background: #fffaf1; color: #92400e; }
.main__content.notice-flash.is-toast .notification.blue   { border-color: #e2e5ea; background: #fafbfc; color: #334155; }

.main__content.notice-flash.is-toast .notice-flash__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.main__content.notice-flash.is-toast .notice-flash__close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.main__content.notice-flash.is-hiding {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .32s ease, transform .32s ease;
    pointer-events: none;
}

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

/* ===== กล่องแจ้งเตือนกลางหน้าจอ (แทน toast มุมจอ) — มินิมอลธีม zinc ===== */
.ux-alert {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ux-alert__back {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 11, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: uxAlertFade .18s ease;
}
.ux-alert__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 30px 28px 26px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(16, 24, 40, .28);
    animation: uxAlertIn .22s cubic-bezier(.21, 1.02, .73, 1);
}
.ux-alert__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ux-alert__icon svg { width: 26px; height: 26px; }
.ux-alert--success .ux-alert__icon { background: #22314f; color: #fff; }
.ux-alert--error   .ux-alert__icon { background: #fee2e2; color: #dc2626; }
.ux-alert--info    .ux-alert__icon { background: #eff4fc; color: #3f5680; }
.ux-alert__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: #22314f;
}
.ux-alert__msg {
    margin: 0 0 6px;
    font-size: 14px;
    color: #51648c;
    line-height: 1.65;
    word-break: break-word;
}
.ux-alert__msg a { color: #22314f; font-weight: 600; }
.ux-alert__btn {
    min-width: 132px;
    height: 42px;
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    background: #22314f;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.ux-alert__btn:hover { background: #3f5680; }
.ux-alert.is-hiding { opacity: 0; transition: opacity .2s; }
@keyframes uxAlertFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uxAlertIn { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }

/* ============================================================
   เลเยอร์มือถือ (จอ < 900px): ใช้งานเป็นเว็บแอปเต็มรูปแบบ
   ============================================================ */

/* แถบเมนูล่างแบบแอป — สร้างโดย ux-enhance.js */
.ux-mtab { display: none; }
@media screen and (max-width: 899px) {
    .ux-mtab {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid #dde7f5;
        box-shadow: 0 -6px 24px rgba(16, 24, 40, .08);
    }
    .ux-mtab__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #7286a3;
        font-size: 10.5px;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .ux-mtab__icon { display: flex; }
    .ux-mtab__icon svg { width: 22px; height: 22px; }
    .ux-mtab__item.is-current { color: #22314f; font-weight: 800; }
    .ux-mtab__item:active { color: #22314f; }

    /* เนื้อหาเว้นที่ให้แถบล่างทุกหน้า */
    body .main__content { padding-bottom: 96px !important; }

    /* ปุ่ม/ช่องกรอก นิ้วกดง่าย */
    .btn { min-height: 44px; }
    .form-control { min-height: 44px; font-size: 16px; }   /* 16px กัน iOS ซูมเอง */

    /* ตารางเรื่องร้องเรียน: เลื่อนแนวนอนลื่นๆ ไม่ล้นจอ */
    .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 720px; }

    /* แถบเครื่องมือ (ร่างเรื่องใหม่/ค้นหา) เต็มความกว้าง เรียงแนวตั้งถ้าแคบมาก */
    .hesk-list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
    .hesk-list-toolbar .btn { flex: 1 1 45%; justify-content: center; }

    /* หน้าเรื่องร้องเรียน: แผงข้างย้ายลงล่าง เรียงคอลัมน์เดียว */
    .ticket.ticket--merged, .main__content.ticket { display: block !important; }
    .ticket__params { width: 100% !important; max-width: none !important; margin: 16px 0 0 !important; }
    .ticket__body { width: 100% !important; max-width: none !important; }

    /* ป๊อบอัพค้นหา: เต็มจอแบบแอป */
    .hesk-search-modal { padding: 0 !important; }
    .hesk-search-modal__dialog {
        width: 100% !important;
        min-height: 100vh;
        border-radius: 0 !important;
        border: 0 !important;
    }
    .hesk-search-modal__body { max-height: none !important; padding: 16px 14px 120px !important; }
    .hesk-search-modal__body .search-option { grid-template-columns: 1fr; }
    .hesk-search-modal__body .selectize-control { max-width: none; }

    /* มินิแชท: เต็มความกว้างเหนือแถบล่าง */
    .ux-mc {
        right: 8px !important;
        left: 8px !important;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: min(430px, 62vh) !important;
    }

    /* กล่องแจ้งเตือนกลางจอ: ชิดขอบพองาม */
    .ux-alert__card { max-width: none; margin: 0 6px; }

    /* ปุ่มกลับขึ้นบน หลบแถบล่าง */
    .ux-to-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); right: 14px; }

    /* หน้าโปรไฟล์: การ์ดคอลัมน์เดียว ระยะบนพอดีเมนูมือถือ */
    body:not(.cust-help) .main__content.profile { padding: 84px 12px 110px !important; }

    /* แผงตั้งค่าก่อนพิมพ์ (หน้าปริ้นท์) ไม่บังเนื้อหา */
    .print-settings { position: static !important; width: auto !important; margin: 10px; }

    /* แชทหลัก: คอลัมน์เดียว รายชื่อ/ห้องสลับกันตามที่ HESK จัด แต่กว้างเต็มจอ */
    .main__content.chat-page { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ============================================================
   ธีมม่วง "ศูนย์ดำรงธรรม" — เลเยอร์ไล่เฉด (อิงดีไซน์แอปที่อาร์มเลือก)
   โหลดท้ายสุด ชนะทุกไฟล์ · ยกเว้นหน้ากระดาษพิมพ์ (ขาวดำเหมือนเดิม)
   ============================================================ */
:root {
    --vp: #2563eb;
    --vp-deep: #1d4ed8;
    --vp-soft: #dbeafe;
    --vp-grad: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    --vp-green: #10b981;
    --vp-green-grad: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

/* ---- ปุ่มหลัก (CTA) = ไล่เฉดม่วง มุมแคปซูล ---- */
.hesk-list-toolbar .hesk-draft-open,
.hesk-search-modal__body .btn.btn-full,
.surin-profile-grid .right-bar.is-inline .right-bar__footer .btn,
.ux-alert__btn,
.ux-mc__send,
.btn.btn-full.save,
button.btn.btn-full[type="submit"] {
    background: var(--vp-grad) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}
.hesk-list-toolbar .hesk-draft-open:hover,
.hesk-search-modal__body .btn.btn-full:hover,
.surin-profile-grid .right-bar.is-inline .right-bar__footer .btn:hover,
.ux-alert__btn:hover,
.ux-mc__send:hover,
.btn.btn-full.save:hover,
button.btn.btn-full[type="submit"]:hover {
    background: var(--vp-grad) !important;
    filter: brightness(1.07);
}
/* ปุ่มรอง: ขาว ขอบม่วงอ่อน ตัวหนังสือม่วง */
.hesk-list-toolbar .hesk-search-open {
    border: 1px solid #bcd3f7 !important;
    color: var(--vp) !important;
    border-radius: 999px !important;
    background: #fff !important;
}
.hesk-list-toolbar .hesk-search-open .icon { fill: currentColor !important; }

/* ---- ปุ่มกลับขึ้นบน + มินิแชท ---- */
.ux-to-top { background: var(--vp-grad); box-shadow: 0 10px 26px rgba(37, 99, 235, .38); }
.ux-to-top:hover { background: var(--vp-grad); filter: brightness(1.08); }
.ux-mc__b--me { background: var(--vp-grad); }
.ux-mc__ava { background: var(--vp-grad); }
.ux-mc__in:focus { border-color: var(--vp); }

/* ---- กล่องแจ้งเตือนกลางจอ: สำเร็จ=เขียว (แบบราคาในแอปตัวอย่าง) / ข้อมูล=ม่วง ---- */
.ux-alert--success .ux-alert__icon { background: var(--vp-green-grad); color: #fff; }
.ux-alert--info .ux-alert__icon { background: var(--vp-soft); color: var(--vp); }

/* ---- Dock (จอคอม): แท็บที่เปิดอยู่เป็นแคปซูลม่วงอ่อน ไอคอน/ป้ายม่วง ---- */
.main-menu .navbar__list > .listitem.current { background: var(--vp-soft) !important; }
.main-menu .navbar__list > .listitem.current .listitem__icon svg.icon,
.main-menu .navbar__list > .listitem.current .icon { fill: var(--vp) !important; }
.main-menu .navbar__list > .listitem.current .dock-label { color: var(--vp) !important; }

/* ---- หัวหมวด/เส้นคั่นสำคัญ เป็นม่วง ---- */
.surin-profile-grid .ux-sec-head::before { background: var(--vp); }
.surin-profile-grid .right-bar.is-inline h3 a { border-bottom-color: var(--vp); }

/* ---- แถบเมนูล่างมือถือ: แท็บที่เปิดอยู่ = วงกลมไล่เฉดลอยขึ้น (เหมือนแอปตัวอย่าง) ---- */
@media screen and (max-width: 899px) {
    .ux-mtab__item.is-current { color: var(--vp); }
    .ux-mtab__item.is-current .ux-mtab__icon {
        width: 44px;
        height: 44px;
        margin-top: -22px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--vp-grad);
        color: #fff;
        box-shadow: 0 10px 22px rgba(37, 99, 235, .38), 0 0 0 4px #fff;
    }
}

/* ---- เลขแจ้งเตือนคงสีแดงเพื่อการมองเห็น (ไม่แตะ) ---- */

/* ============================================================
   โปรไฟล์ v3 — ธีมม่วง จัดระเบียบช่องไฟสม่ำเสมอ
   ============================================================ */
.surin-profile-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    max-width: 900px !important;
}
.surin-profile-grid > * { margin: 0 !important; max-width: none !important; width: auto !important; }

/* การ์ดบัญชี = ฮีโร่ไล่เฉดม่วง (แบบแอปตัวอย่าง) */
.surin-profile-grid > .surin-profile-card:first-child {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, .28) !important;
    padding: 26px 28px !important;
    color: #fff;
}
.surin-profile-grid > .surin-profile-card:first-child h3,
.surin-profile-grid > .surin-profile-card:first-child .surin-profile-eyebrow { color: #fff !important; }
.surin-profile-grid > .surin-profile-card:first-child .surin-profile-eyebrow { opacity: .85; }
.surin-profile-grid > .surin-profile-card:first-child .info--mail a,
.surin-profile-grid > .surin-profile-card:first-child .surin-profile-meta { color: rgba(255, 255, 255, .88) !important; }
.surin-profile-grid > .surin-profile-card:first-child .surin-profile-avatar {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.surin-profile-grid > .surin-profile-card:first-child .profile-log-out {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    font-weight: 700;
}
.surin-profile-grid > .surin-profile-card:first-child .profile-log-out svg { fill: #fff !important; }
.surin-profile-grid > .surin-profile-card:first-child .profile-log-out:hover { background: rgba(255, 255, 255, .26); }

/* การ์ด MFA เต็มแถว บาง สะอาด */
.surin-profile-grid > .surin-profile-mfa {
    grid-column: 1 / -1;
    border-radius: 18px !important;
    border: 1px solid #dde7f5 !important;
    padding: 20px 24px !important;
}
.surin-profile-grid > .surin-profile-mfa .btn {
    background: #fff !important;
    border: 1px solid #bcd3f7 !important;
    color: #2563eb !important;
    border-radius: 999px !important;
    font-weight: 700;
    min-height: 42px;
}
.surin-profile-grid > .surin-profile-mfa .btn:hover { background: #e7f0fe !important; }

/* การ์ดฟอร์ม: มุม/ช่องไฟเท่ากันทุกใบ */
.surin-profile-grid .right-bar.is-inline {
    border-radius: 20px !important;
    border: 1px solid #dde7f5 !important;
    box-shadow: 0 4px 18px rgba(74, 58, 140, .06) !important;
}
.surin-profile-grid .right-bar.is-inline .right-bar__body { padding: 26px 30px 30px !important; }
.surin-profile-grid .right-bar.is-inline h3 a {
    color: #22314f !important;
    border-bottom: 3px solid #2563eb !important;
    font-size: 19px !important;
}
/* แบบฟอร์ม: ป้าย/ช่องกรอกจังหวะเดียวกันหมด */
.surin-profile-grid .right-bar.is-inline .form-group { margin-bottom: 16px !important; }
.surin-profile-grid .right-bar.is-inline .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #51648c;
}
.surin-profile-grid .right-bar.is-inline .form-control {
    width: 100%;
    border: 1px solid #dde7f5 !important;
    border-radius: 12px !important;
    background: #fafcff !important;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.surin-profile-grid .right-bar.is-inline .form-control:focus {
    border-color: #2563eb !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    outline: none;
}
.surin-profile-grid .right-bar.is-inline input[type="checkbox"],
.surin-profile-grid .right-bar.is-inline input[type="radio"] { accent-color: #2563eb; }
/* กล่องอัปโหลดรูปโปรไฟล์เป็นแผงม่วงอ่อน */
.surin-profile-grid .surin-avatar-upload {
    background: #f5f8fd !important;
    border: 1px dashed #bcd3f7;
    border-radius: 14px;
    padding: 16px !important;
    margin-bottom: 6px;
}
/* แถบวัดความแข็งแรงรหัสผ่าน มุมโค้ง */
.surin-profile-grid #progressBar2 { border-radius: 999px; }
.surin-profile-grid .right-bar.is-inline .form-group div[style*="height: 14px"] {
    border: 0 !important;
    background: #ecf2fb;
    border-radius: 999px;
    overflow: hidden;
}

/* ============================================================
   ป๊อบอัพบัญชี (dock): ดูโปรไฟล์ + ออกจากระบบ ธีมม่วง
   ============================================================ */
.profile__menu .profile--view .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
}
.profile__menu .profile--view .btn:hover { filter: brightness(1.07); }
.profile__menu .profile--logout a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 8px;
    border: 1px solid #dde7f5 !important;
    border-radius: 999px !important;
    color: #51648c !important;
    font-weight: 600;
    text-decoration: none;
}
.profile__menu .profile--logout a:hover { border-color: #bcd3f7 !important; color: #2563eb !important; background: #f5f8fd; }
.profile__menu .profile--logout a .icon { fill: currentColor !important; }

/* ===== มือถือ: ไม่ใช้เมนูแฮมเบอร์เกอร์แล้ว (มีแถบล่างแทน) ===== */
@media screen and (max-width: 899px) {
    .header__mobile .header__menu { display: none !important; }   /* ปุ่มเปิดเมนูบนหัว */
    .main-menu { display: none !important; }                       /* เมนูสไลด์เดิม */

    /* กระดิ่งแจ้งเตือน = แท็บในแถบล่าง */
    .ux-mtab__slot { flex: 1 1 0; display: flex; }
    .ux-mtab .hesk-notif {
        position: relative !important;
        display: flex !important;
        width: 100%;
        margin: 0 !important;
    }
    .ux-mtab .hesk-notif__toggle {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none !important;
        border: 0 !important;
        color: #7286a3;
        font-size: 10.5px;
        font-weight: 600;
        padding: 0 !important;
    }
    .ux-mtab .hesk-notif__toggle .icon { width: 22px !important; height: 22px !important; fill: #7286a3 !important; }
    .ux-mtab .hesk-notif__toggle::after { content: "แจ้งเตือน"; }
    .ux-mtab .hesk-notif.has-unread .hesk-notif__toggle .icon { fill: #2563eb !important; }
    .ux-mtab .hesk-notif__badge {
        position: absolute !important;
        top: 4px !important;
        right: calc(50% - 22px) !important;
        left: auto !important;
    }
    /* แผงแจ้งเตือนเด้งขึ้นเหนือแถบล่าง เต็มความกว้าง */
    .hesk-notif__panel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 16px !important;
        box-shadow: 0 -10px 40px rgba(23, 43, 77, .25) !important;
        z-index: 2100 !important;
    }
}

/* ===== มือถือ: หน้ารายการเรื่อง กะทัดรัด ===== */
@media screen and (max-width: 899px) {
    .main__content.tickets { padding: 10px 10px 96px !important; }

    /* แถวกรองเรื่อง: ชิปเล็ก เลื่อนแนวนอนแถวเดียว (แบบแอป) */
    section.quick-links {
        padding: 10px 12px !important;
        margin: 0 0 10px !important;
        border-radius: 14px !important;
    }
    section.quick-links .filters__listing {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding: 2px 0 4px;
        scrollbar-width: none;
    }
    section.quick-links .filters__listing::-webkit-scrollbar { display: none; }
    section.quick-links .filters__listing .btn {
        flex: 0 0 auto;
        min-height: 34px !important;
        padding: 5px 13px !important;
        font-size: 12.5px !important;
        border-radius: 999px !important;
        white-space: nowrap;
    }
    section.quick-links label,
    section.quick-links .checkbox-custom label { font-size: 12.5px !important; }

    /* แถบเครื่องมือ: ปุ่มเตี้ยลง ตัวหนังสือเล็กลง */
    .hesk-list-toolbar { margin-bottom: 10px !important; gap: 8px !important; }
    .hesk-list-toolbar .btn {
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 0 14px !important;
    }

    /* ตารางเรื่อง: แน่นขึ้น อ่านได้มากขึ้นต่อจอ */
    .main__content.tickets .table-wrap { border-radius: 14px !important; }
    .main__content.tickets .table-wrap table { font-size: 13px !important; }
    .main__content.tickets .table-wrap th,
    .main__content.tickets .table-wrap td { padding: 8px 10px !important; }

    /* การ์ดครอบต่างๆ ของ bento ลด padding ให้พอดีจอ */
    .main__content.tickets > div { border-radius: 14px !important; }
}

/* ===== มือถือ: ใช้หัวเว็บแบรนด์ตัวเดียวกับจอคอม (การ์ดแคปซูล โลโก้+สโลแกน) ===== */
@media screen and (max-width: 899px) {
    header.header {
        display: block !important;
        position: fixed;          /* ลอยเห็นตลอดเหมือนจอคอม (sticky หลุดเพราะ container ภายใน) */
        top: 0;
        left: 0;
        right: 0;
        z-index: 1400;
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, .95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #dde7f5;
        box-shadow: 0 4px 18px rgba(23, 43, 77, .06);
    }
    /* โชว์เฉพาะแบรนด์ ซ่อนช่องค้นหา/ปุ่มอื่นของ header จอคอม */
    header.header .header__left > *:not(.hesk-brand),
    header.header .header__right,
    header.header .header__mobile { display: none !important; }
    body { padding-top: 64px !important; }   /* กันเนื้อหามุดใต้ header ลอย */

    header.header .header__left {
        display: block !important;
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0 !important;
        margin: 0 !important;
    }
    .hesk-brand {
        max-width: calc(100% - 20px);
        padding: 4px 14px 4px 5px;
        gap: 9px;
    }
    .hesk-brand__seal { width: 38px; height: 38px; }
    .hesk-brand__title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hesk-brand__sub { white-space: nowrap; overflow: hidden; }
}

/* ===== มือถือ: แท็บบัญชีตรงกลาง = รูปโปรไฟล์ยกลอย + การ์ดรายการเรื่อง ===== */
@media screen and (max-width: 899px) {
    /* บัญชี: วงกลมรูปโปรไฟล์ ลอยเหนือแถบ (จุดโฟกัสกลาง) */
    .ux-mtab__item--account .ux-mtab__icon {
        width: 48px;
        height: 48px;
        margin-top: -22px;
        border-radius: 50%;
        overflow: hidden;
        background: linear-gradient(135deg, #60a5fa, #2563eb);
        color: #fff;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 22px rgba(37, 99, 235, .35), 0 0 0 4px #fff;
    }
    .ux-mtab__item--account .ux-mtab__icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .ux-mtab__item--account.is-current .ux-mtab__icon {
        box-shadow: 0 10px 22px rgba(37, 99, 235, .45), 0 0 0 3px #2563eb, 0 0 0 6px #fff;
        margin-top: -22px;   /* คงตำแหน่ง ไม่เด้งซ้ำกับสไตล์ is-current ปกติ */
        width: 48px;
        height: 48px;
    }

    /* ตารางเรื่อง -> การ์ด */
    .ux-table-hidden { display: none !important; }
    .ux-tcards { display: grid; gap: 10px; margin-bottom: 12px; }
    .ux-tcard {
        display: block;
        padding: 12px 14px 11px;
        background: #fff;
        border: 1px solid #dde7f5;
        border-radius: 14px;
        text-decoration: none;
        color: #22314f;
        box-shadow: 0 1px 2px rgba(23, 43, 77, .05);
        -webkit-tap-highlight-color: transparent;
    }
    .ux-tcard:active { background: #fafcff; }
    .ux-tcard__top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
    }
    .ux-tcard__top h4 {
        margin: 0;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.4;
        color: #22314f;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ux-tcard__st {
        flex: 0 0 auto;
        padding: 3px 11px;
        border-radius: 999px;
        background: #e7f0fe;
        color: #2563eb;
        font-size: 11.5px;
        font-weight: 700;
        white-space: nowrap;
    }
    .ux-tcard__meta,
    .ux-tcard__meta--unit {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 12.5px;
        color: #7286a3;
        line-height: 1.6;
    }
    .ux-tcard__meta--unit { color: #51648c; font-weight: 600; }
    .ux-tcard__from { color: #93a6c1; }
}

/* ===== มือถือ v2: ชิปกรองเรื่องเรียบขึ้น + การ์ดเรื่องมีหัวข้อย่อย ===== */
@media screen and (max-width: 899px) {
    /* ชิปกรอง: ไร้เส้นขอบ พื้นอ่อน แถวเดียวปัดได้ มีเงาเฟดบอกว่ามีต่อ */
    section.quick-links { position: relative; }
    section.quick-links .filters__listing {
        -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
        mask-image: linear-gradient(90deg, #000 92%, transparent);
    }
    section.quick-links .filters__listing .btn {
        border: 0 !important;
        background: #eff4fc !important;
        color: #51648c !important;
        min-height: 32px !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
    section.quick-links .filters__listing .btn.is-bold,
    section.quick-links .filters__listing .btn.active,
    section.quick-links .filters__listing .btn[class*="current"] {
        background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
        color: #fff !important;
    }
    /* เลขนับ: ตัวบางๆ ไม่ต้องเป็นเม็ด */
    section.quick-links .filters__listing .btn span,
    section.quick-links .filters__listing .btn i {
        background: none !important;
        color: inherit !important;
        opacity: .75;
        padding: 0 !important;
        font-size: 11px !important;
    }

    /* ---- การ์ดเรื่อง v2 ---- */
    .ux-tcard { padding: 11px 14px 10px; }
    .ux-tcard__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 4px;
    }
    .ux-tcard__id {
        font-size: 12px;
        font-weight: 700;
        color: #2563eb;
        background: #e7f0fe;
        border-radius: 7px;
        padding: 1px 8px;
        letter-spacing: .02em;
    }
    .ux-tcard__st { max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
    .ux-tcard__title {
        margin: 0 0 8px;
        font-size: 15.5px;
        font-weight: 800;
        line-height: 1.45;
        color: #22314f;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* หัวข้อย่อย 2 คอลัมน์ — จอแคบมากยุบเป็นแถวเดียว */
    .ux-tcard__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        padding: 8px 0 7px;
        border-top: 1px solid #ecf2fb;
    }
    @media screen and (max-width: 360px) { .ux-tcard__grid { grid-template-columns: 1fr; } }
    .ux-tcard__grid small {
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        color: #93a6c1;
        margin-bottom: 1px;
    }
    .ux-tcard__grid b {
        font-size: 13px;
        font-weight: 700;
        color: #33497e;
        display: block;
        white-space: normal;        /* ชื่อยาวตัดขึ้นบรรทัดใหม่ในคอลัมน์ตัวเอง ไม่เบียดคอลัมน์ข้าง */
        word-break: break-word;
        line-height: 1.45;
    }
    .ux-tcard__by {
        margin: -4px 0 8px;
        font-size: 12.5px;
        color: #7286a3;
    }
    .ux-tcard__foot {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding-top: 6px;
        border-top: 1px solid #ecf2fb;
        font-size: 11.5px;
        color: #93a6c1;
    }
    .ux-tcard__foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== มือถือ: กันการ์ดเรื่องล้นขอบขวา (เห็นมุมโค้งครบ) ===== */
@media screen and (max-width: 899px) {
    html, body { max-width: 100vw; overflow-x: hidden !important; }
    .main__content.tickets,
    .main__content.tickets #t_list { max-width: 100% !important; min-width: 0 !important; }
    /* กล่องข้อความระบบที่ใช้ margin ติดลบบนจอคอม -> ทำหน้ากว้างเกินจอมือถือ */
    .main__content.tickets > div[style*="margin-left"],
    .main__content.tickets > div[style*="margin-right"] { margin-left: 0 !important; margin-right: 0 !important; }
    .main__content.tickets #t_list > * { max-width: 100% !important; min-width: 0 !important; }
    .ux-tcards { max-width: 100%; }
    .ux-tcard { max-width: 100%; box-sizing: border-box; }
}

/* ===== มือถือรอบเก็บ: header แสดงชัวร์ + กล่องจัดการหลายรายการ + แชทแบบสองหน้า ===== */
@media screen and (max-width: 899px) {
    /* header: ชนะทุกกฎซ่อนของธีมเดิม */
    body .wrapper header.header,
    body header.header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px;
        z-index: 1400;
        transform: none !important;
    }
    body .wrapper header.header .header__left { display: block !important; }
    body .wrapper header.header .hesk-brand { display: flex !important; }

    /* กล่อง "กระทำกับรายที่เลือก / มอบหมาย" ใต้ตาราง: ย่อ+เรียงระเบียบ */
    .tickets__legend {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        padding: 12px 14px !important;
        margin: 10px 0 0 !important;
        background: #fff;
        border: 1px solid #dde7f5;
        border-radius: 14px;
        font-size: 12.5px !important;
    }
    .tickets__legend > * { margin: 0 !important; }
    .tickets__legend a,
    .tickets__legend label,
    .tickets__legend span { font-size: 12.5px !important; line-height: 1.5; }
    .tickets__legend a { color: #2563eb; }
    .tickets__legend select,
    .tickets__legend .dropdown-select {
        min-height: 38px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        max-width: 100%;
    }
    .tickets__legend .btn,
    .tickets__legend input[type="submit"],
    .tickets__legend button {
        min-height: 38px !important;
        width: auto !important;
        padding: 0 18px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
        align-self: flex-start;
    }

    /* แชทมือถือ: จอเดียวสลับสองหน้า — กำหนดความสูงเองไม่อิงเลย์เอาต์จอคอม */
    .main__content.chat-page { padding: 8px 8px 90px !important; }
    .main__content.chat-page .chat {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* โหมดรายชื่อ (ไม่มี ?with=) */
    body:not(.ux-chat-thread) .main__content.chat-page .chat__thread { display: none !important; }
    body:not(.ux-chat-thread) .main__content.chat-page .chat__list {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 235px);
        min-height: 320px;
        border-right: 0 !important;
    }
    .main__content.chat-page .chat__convs { flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
    /* โหมดห้องสนทนา (มี ?with=) */
    body.ux-chat-thread .main__content.chat-page .chat__list { display: none !important; }
    body.ux-chat-thread .main__content.chat-page .chat__thread {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 235px);
        min-height: 320px;
    }
    .main__content.chat-page .chat__messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
    .chat__back {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        color: #2563eb;
        background: #e7f0fe;
        margin-right: 8px;
        flex: 0 0 auto;
    }
    .chat__back svg { width: 20px; height: 20px; }
    .chat__new-btn { display: inline-flex !important; }
    /* (ช่องพิมพ์ไม่ต้องหลบเอง — พื้นที่ล่างถูกกันไว้ที่ระดับหน้าแล้ว) */
}

/* ============================================================
   MOBILE COMFORT LAYER — จังหวะเดียวกันทุกหน้า ให้หายใจได้
   (โหลดท้ายสุด ชนะกฎย่อยก่อนหน้า · เฉพาะจอ < 900px)
   ============================================================ */
@media screen and (max-width: 899px) {
    body { font-size: 15px; line-height: 1.65; padding-top: 72px !important; }

    /* ระยะหน้ากระดาษเดียวกันทุกหน้า: ขอบ 14px บนโปร่ง ล่างพ้นแถบเมนู */
    body .main__content { padding: 16px 14px 108px !important; }
    body .main__content > * + * { margin-top: 12px; }

    /* หัวข้อไม่อึดอัด */
    .main__content h1 { font-size: 20px; line-height: 1.45; }
    .main__content h2 { font-size: 18px; line-height: 1.45; }
    .main__content h3 { font-size: 16.5px; line-height: 1.5; }

    /* การ์ด/บล็อกทุกชนิด: มุมโค้ง เงานุ่ม อากาศภายใน 16px */
    .main__content article,
    .main__content section,
    .main__content .table-wrap,
    .ticket__body_block,
    .profile__wrapper,
    .tickets__legend,
    .ux-tcard {
        border-radius: 16px !important;
    }
    .ticket__body_block {
        padding: 16px !important;
        margin: 0 0 12px !important;
        box-shadow: 0 1px 3px rgba(23, 43, 77, .06) !important;
    }
    .ux-tcard { padding: 14px 16px 12px; }
    .ux-tcards { gap: 12px; }

    /* หน้าเรื่องร้องเรียน: หัวบล็อก/ปุ่ม เรียงลงบรรทัดใหม่แทนการเบียด */
    .ticket__body_block .block--head {
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        align-items: center;
    }
    .ticket__body_block .block--head .contact { flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
    .ticket__params { width: 100% !important; margin: 4px 0 0 !important; padding: 4px 2px !important; }
    .ticket__params .params--bar { flex-wrap: wrap !important; gap: 8px !important; white-space: normal !important; }
    .ticket--merged .dropdown-select { max-width: 100% !important; }
    .ticket--merged .dropdown-select .label { white-space: normal !important; }

    /* ฟอร์มทุกหน้า: ช่องเต็มกว้าง ระยะห่างคงที่ อ่านง่าย */
    .form-group { margin-bottom: 16px !important; }
    .form-group label { margin-bottom: 6px; display: inline-block; font-size: 13.5px; }
    .form-control, select.form-control, textarea.form-control {
        width: 100% !important;
        border-radius: 12px !important;
    }
    .btn { border-radius: 12px; }

    /* โปรไฟล์: การ์ดชิดจังหวะเดียวกัน */
    .surin-profile-grid { gap: 12px !important; }
    .surin-profile-grid .right-bar.is-inline .right-bar__body { padding: 20px 16px 24px !important; }
    body:not(.cust-help) .main__content.profile { padding: 16px 14px 116px !important; }

    /* ป๊อบอัพค้นหา: ระยะสบายตา */
    .hesk-search-modal__body { padding: 16px 14px 130px !important; }
    .hesk-search-modal__body .ticket-query-card { padding: 16px !important; }
    .hesk-search-modal__body .search-option { padding: 13px 2px !important; }

    /* กระดิ่ง/กล่องแจ้งเตือน/มินิแชท ระยะเท่ากัน */
    .ux-alert__card { padding: 26px 22px 22px; }

    /* ชิปกรอง: สูงขึ้นนิดให้กดสบาย (แต่ยังชิดกันเป็นแถวเดียว) */
    section.quick-links { padding: 12px 14px !important; }
    section.quick-links .filters__listing .btn { min-height: 36px !important; padding: 6px 14px !important; }

    /* แถบเครื่องมือบนสุด: สองปุ่มเต็มแถวหายใจได้ */
    .hesk-list-toolbar { gap: 10px !important; margin-bottom: 4px !important; }
    .hesk-list-toolbar .btn { min-height: 46px !important; font-size: 14px !important; }

    /* หัวเว็บ: เงาอ่อนลง ไม่ทึบ */
    body .wrapper header.header { box-shadow: 0 2px 14px rgba(23, 43, 77, .07); }

    /* ตาราง (หน้าอื่นที่ยังเป็นตาราง): แถวสูงขึ้น อ่านง่าย */
    .table-wrap th, .table-wrap td { padding: 10px 12px !important; }

    /* กันความรู้สึก "ติดขอบ" — องค์ประกอบลอยทั้งหมดเว้นขอบเท่ากัน */
    .ux-mc { right: 10px !important; left: 10px !important; }
    .ux-to-top { right: 14px; }
}

/* ===== กันการแสดงซ้อน (ของเก่าวาบก่อนแล้วของใหม่ทับ) =====
 * ซ่อนของเก่าด้วย CSS ตั้งแต่ยังไม่วาดเฟรมแรก — JS แค่สร้างของใหม่ ไม่ต้องวาดทิ้ง 1 รอบ */
@media screen and (max-width: 899px) {
    /* ตารางเดิมซ่อนก็ต่อเมื่อการ์ดสร้างเสร็จเท่านั้น (JS ติดคลาส ux-cards-on ให้ body)
       ไฟล์เวอร์ชันไหนก็ไม่มีทางรายการเรื่องหาย */
    body.ux-cards-on .main__content.tickets .table-wrap { display: none !important; }
    /* เมนูเดิมทุกชิ้น: ตายตั้งแต่ CSS ไม่ต้องรอ JS */
    .main-menu,
    .header__mobile,
    .header__mobile .header__menu { display: none !important; }
}

/* ===== header มือถือแบบใหม่ (JS สร้าง .ux-mhead แล้วย้ายแบรนด์จริงเข้ามา) ===== */
@media screen and (max-width: 899px) {
    body header.header { display: none !important; }   /* ตัวเดิมเลิกใช้บนมือถือ */
    .ux-mhead {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1400;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid #dde7f5;
        box-shadow: 0 2px 14px rgba(23, 43, 77, .07);
        padding: 0 10px;
    }
    .ux-mhead .hesk-brand {
        position: static !important;
        transform: none !important;
        max-width: 100% !important;
        display: flex !important;
    }
    .ux-mhead .hesk-brand__title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ux-mhead .hesk-brand__sub { white-space: nowrap; overflow: hidden; }
    .ux-mhead .hesk-brand__seal { width: 38px; height: 38px; }
    .ux-mhead__txt { text-align: center; line-height: 1.3; }
    .ux-mhead__txt b { display: block; font-size: 15px; color: #22314f; }
    .ux-mhead__txt span { font-size: 11.5px; color: #7286a3; }

    /* ===== กล่อง "แท็ก/มอบหมาย/กระทำกับรายที่เลือก" — ดีไซน์ใหม่เด็ดขาด ===== */
    .tickets__legend br { display: none !important; }
    .tickets__legend {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 14px !important;
        background: #fff !important;
        border: 1px solid #dde7f5 !important;
        border-radius: 16px !important;
        font-size: 13px !important;
        line-height: 1.6;
        color: #7286a3;
    }
    /* ลิงก์การกระทำ (แท็ก/มอบหมายให้ตัวฉัน/ท่านอื่น) -> ชิปแถวเดียวกดง่าย */
    .tickets__legend a {
        display: inline-flex;
        align-items: center;
        padding: 8px 15px;
        margin: 0 6px 4px 0;
        background: #eff4fc !important;
        border-radius: 999px;
        color: #1e40af !important;
        font-size: 12.5px !important;
        font-weight: 700;
        text-decoration: none !important;
    }
    /* ตัวเลือก/รายการเลือก เต็มความกว้าง */
    .tickets__legend select,
    .tickets__legend .dropdown-select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }
    /* ปุ่มยืนยัน (ดำเนินการ/มอบหมาย) แคปซูลม่วงเต็มแถว */
    .tickets__legend .btn,
    .tickets__legend button,
    .tickets__legend input[type="submit"] {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
    }
}

/* ===== กันซ้ำซ้อนถาวร: การ์ดเรื่อง = มือถือเท่านั้น / ตาราง = จอคอมเท่านั้น =====
 * (การ์ดอาจถูกสร้างไว้ถ้าเคยย่อจอ/ซูม — จอคอมสั่งซ่อนทิ้งเสมอ ไม่มีทางเห็นคู่กัน) */
@media screen and (min-width: 900px) {
    .ux-tcards { display: none !important; }
    .main__content.tickets .table-wrap { display: block !important; }
}

/* กันเศษหัวมือถือโผล่บนจอคอมช่วงเสี้ยววินาทีก่อนรีโหลดข้ามจอ */
@media screen and (min-width: 900px) {
    .ux-mhead, .ux-mtab { display: none !important; }
}

/* ===== มือถือ: กล่องจัดการหลายรายการ — 2 กลุ่มเรียงบรรทัดเดียว + ซ่อนคำอธิบายสัญลักษณ์ ===== */
@media screen and (max-width: 899px) {
    /* ซ่อนแถวสัญลักษณ์ แท็ก/มอบหมายให้ตัวฉัน/มอบหมายเจ้าหน้าที่ท่านอื่น */
    .tickets__legend > div:first-child { display: none !important; }

    /* สองกลุ่ม (กระทำกับรายที่เลือก | มอบหมายที่เลือกให้แก่) คู่กันในแถวเดียว */
    .tickets__legend .bulk-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        margin: 0 !important;
    }
    .tickets__legend .bulk-actions__group {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        margin: 0 !important;
        padding: 10px !important;
        background: #f8fafd;
        border: 1px solid #e6edf8;
        border-radius: 12px;
    }
    .tickets__legend .bulk-actions__title {
        font-size: 11.5px !important;
        font-weight: 700;
        color: #51648c;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tickets__legend .bulk-actions__title .icon { width: 13px; height: 13px; flex: 0 0 auto; }
    .tickets__legend .bulk-actions__controls {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
    }
    .tickets__legend .bulk-actions__controls .inline-bottom { display: block; width: 100%; }
    .tickets__legend .bulk-actions__controls select {
        width: 100% !important;
        min-height: 38px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }
    .tickets__legend .bulk-actions__controls .btn,
    .tickets__legend .bulk-actions__controls button {
        width: 100% !important;
        min-height: 38px !important;
        font-size: 12.5px !important;
        padding: 0 8px !important;
        margin: 0 !important;
    }
}

/* ===== มือถือ: กริดช่องที่อยู่ในฟอร์มร่างเรื่อง ===== */
@media screen and (max-width: 899px) {
    .ux-addr-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
        padding: 14px;
        margin: 4px 0 16px;
        background: #f8fafd;
        border: 1px solid #e6edf8;
        border-radius: 14px;
    }
    .ux-addr-grid__head {
        grid-column: 1 / -1;
        font-size: 13.5px;
        font-weight: 800;
        color: #22314f;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .ux-addr-grid__head::before {
        content: "";
        width: 4px;
        height: 16px;
        border-radius: 2px;
        background: linear-gradient(180deg, #60a5fa, #2563eb);
    }
    .ux-addr-grid .form-group { margin: 0 !important; min-width: 0; }
    .ux-addr-grid .form-group.ux-full { grid-column: 1 / -1; }
    .ux-addr-grid .form-group label {
        display: block;
        margin-bottom: 5px;
        font-size: 12.5px !important;
        font-weight: 700;
        color: #51648c;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ux-addr-grid .form-control {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        background: #fff;
    }
}

/* ===== มือถือ: ปุ่มนำทางฟอร์มร่างเรื่อง (ย้อนกลับ | ถัดไป/บันทึก) บรรทัดเดียว ===== */
@media screen and (max-width: 899px) {
    .ticket-create .wiz-foot {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 10px;
    }
    .ticket-create .wiz-foot .wiz-back {
        flex: 0 0 auto;
        width: auto !important;
        min-height: 46px !important;
        padding: 0 22px !important;
        margin: 0 !important;
    }
    .ticket-create .wiz-spacer { flex: 1 1 auto; }
    .ticket-create .wiz-foot .wiz-next {
        flex: 1 1 55% !important;
        width: auto !important;
        min-height: 46px !important;
        margin: 0 !important;
    }
}

/* ===== กล่องซ้อนทับ: select ต้นฉบับที่ปลั๊กอิน (select2/selectize) ซ่อนไว้
 * ต้องซ่อนสนิทเสมอ — กันกฎมือถือ (min-height/width !important) ไปบังคับโชว์ ===== */
select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}
select.selectized { display: none !important; }

@media screen and (max-width: 899px) {
    /* เงื่อนไขความเป็นส่วนตัว: ช่องไฟหายใจ */
    .ticket-create .ux-privacy {
        padding: 14px 16px !important;
        background: #f8fafd;
        border: 1px solid #e6edf8;
        border-radius: 14px;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
    }
    .ticket-create .ux-privacy label { line-height: 1.7 !important; padding: 4px 0; }
    .ticket-create .ux-privacy .radio-custom,
    .ticket-create .ux-privacy .checkbox-custom { margin: 8px 0 !important; }

    /* ชั้นความเร็ว | ชั้นความลับ แถวเดียว */
    .ticket-create .ux-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }
    .ticket-create .ux-row2 .form-group { margin: 0 !important; min-width: 0; }
    .ticket-create .ux-row2 label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

    /* สถานะ (เรื่องเข้าใหม่): เด่นเป็นชิปน้ำเงิน */
    .ticket-create .ux-status-view {
        padding: 12px 14px !important;
        background: linear-gradient(135deg, #f0f6ff, #e7f0fe);
        border: 1px solid #d8e6fa;
        border-radius: 14px;
        margin-bottom: 16px !important;
    }
    .ticket-create .ux-status-view label { color: #51648c; font-weight: 700; }
    .ticket-create .ux-status-view select,
    .ticket-create .ux-status-view .dropdown-select,
    .ticket-create .ux-status-view input[readonly] {
        background: #fff !important;
        border: 1.5px solid #2563eb !important;
        color: #1e40af !important;
        font-weight: 800 !important;
        border-radius: 999px !important;
        text-align: center;
    }

    /* กำหนดรายงานผล: เฟรมแยกเด่น + วันที่ที่เลือกเป็นชิปสวย + ปุ่ม × ไม่ถูกบัง */
    .ticket-create .ux-due {
        padding: 14px 16px !important;
        background: #fff;
        border: 1.5px solid #bcd3f7;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(23, 43, 77, .06);
        margin-bottom: 16px !important;
        overflow: visible !important;
    }
    .ticket-create .ux-due > label {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-weight: 800 !important;
        color: #1e40af !important;
        margin-bottom: 10px;
    }
    .ticket-create .ux-due > label::before {
        content: "";
        width: 4px;
        height: 16px;
        border-radius: 2px;
        background: linear-gradient(180deg, #60a5fa, #2563eb);
    }
    .ticket-create .ux-due .calendar--button button {
        width: 46px;
        height: 46px;
        border-radius: 12px !important;
        border: 1px solid #bcd3f7 !important;
        background: #f0f6ff !important;
    }
    .ticket-create .ux-due .calendar--button .icon-calendar { fill: #2563eb !important; }
    /* วันที่ที่เลือก: ชิปน้ำเงิน + × วงกลมชัดเจน กดง่าย */
    .ticket-create .ux-due .calendar--value {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding: 8px 10px 8px 16px !important;
        background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
        color: #fff !important;
        border-radius: 999px !important;
        position: static !important;
        overflow: visible !important;
        box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
    }
    .ticket-create .ux-due .calendar--value span {
        color: #fff !important;
        font-weight: 800;
        font-size: 14.5px;
    }
    .ticket-create .ux-due .calendar--value .close {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .25);
        cursor: pointer;
        flex: 0 0 auto;
    }
    .ticket-create .ux-due .calendar--value .close .icon { width: 12px; height: 12px; fill: #fff !important; }
}

/* ===== มือถือ: หน้าแสดงรายเรื่อง/ผลค้นหา — ตรึงซ้าย + ช่องไฟไม่ชิดขอบ ===== */
@media screen and (max-width: 899px) {
    /* ตรึงเนื้อหาไว้ฝั่งซ้ายเสมอ ไม่มีทางถูกดันล้นขวา */
    html, body { overflow-x: clip !important; }
    .wrapper, main.main, .main__content {
        max-width: 100vw !important;
        overflow-x: clip !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
    /* หน้าเรื่อง/ผลค้นหา: ขอบหายใจรอบด้าน (ทับกฎ 10px เดิม) */
    .main__content.tickets { padding: 16px 14px 108px !important; }
    .main__content.tickets > div[style] { margin-left: 0 !important; margin-right: 0 !important; }
    .main__content.tickets .ux-tcards { margin-top: 2px; }
    /* แถวสรุป/หน้าเพจจิเนชันในผลค้นหาไม่ชิดขอบ */
    .main__content.tickets .pagination__amount { padding: 0 2px; }
}

/* ===== มือถือ: เก็บงานฟอร์มร่างเรื่อง (ตามรีวิวอาร์ม รอบ 2) ===== */
@media screen and (max-width: 899px) {
    /* step ข้อมูลผู้ร้อง: เอากรอบใน (การ์ดพื้นหลัง) ออก — คงระยะกริดไว้ */
    .ticket-create .ux-addr-grid,
    .ticket-create .ux-privacy {
        background: none !important;
        border: 0 !important;
        padding: 4px 0 !important;
        box-shadow: none !important;
    }

    /* สถานะ (เรื่องเข้าใหม่): กรอบเดียวพอ + ตัวเลือกอยู่กึ่งกลาง */
    .ticket-create .ux-status-view {
        background: none !important;
        border: 0 !important;
        padding: 6px 0 !important;
        text-align: center;
    }
    .ticket-create .ux-status-view label {
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }
    .ticket-create .ux-status-view select,
    .ticket-create .ux-status-view .dropdown-select,
    .ticket-create .ux-status-view input[readonly] {
        display: inline-block !important;
        width: auto !important;
        min-width: 220px;
        margin: 0 auto !important;
    }

    /* หน่วยงานรับผิดชอบ: เหลือช่องค้นหาได้ช่องเดียว
       (ซ่อนวิดเจ็ตซ้ำทุกชนิดในกลุ่มที่มี selectize/select2 แล้ว) */
    .ticket-create .form-group:has(.selectize-control) > select,
    .ticket-create .form-group:has(.selectize-control) .dropdown-select > .label,
    .ticket-create .form-group:has(.selectize-control) .dropdown-select > ul,
    .ticket-create .form-group:has(.select2-container) > select,
    .ticket-create .form-group:has(.select2-container) .dropdown-select > .label {
        display: none !important;
    }
    .ticket-create .selectize-control { width: 100% !important; }
    .ticket-create .selectize-input {
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center;
        border-radius: 12px !important;
        font-size: 16px !important;
    }
    .ticket-create .selectize-input .item { position: static !important; opacity: 1 !important; }

    /* ครบกำหนดรายงานผล: ไอคอนปฏิทินไร้กรอบ จัดแถวเดียวเป็นระเบียบ */
    .ticket-create .ux-due {
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 6px 0 !important;
    }
    .ticket-create .ux-due .calendar--button { display: inline-flex; align-items: center; gap: 10px; }
    .ticket-create .ux-due .calendar--button button {
        width: 44px !important;
        height: 44px !important;
        border: 0 !important;
        background: none !important;
        padding: 0 !important;
    }
    .ticket-create .ux-due .calendar--button .icon-calendar {
        width: 30px !important;
        height: 30px !important;
        fill: #2563eb !important;
    }

    /* เจ้าหน้าที่ผู้รับผิดชอบ / เสนอพิจารณา / ทุก select ในฟอร์ม: กว้างเท่าช่องหนังสือส่ง (เต็มแถว) */
    .ticket-create .wiz-panel select,
    .ticket-create .wiz-panel .dropdown-select,
    .ticket-create .wiz-panel .selectize-control,
    .ticket-create .wiz-panel input[type="text"]:not(.datepicker) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px;
        box-sizing: border-box;
    }
}

/* ============================================================
   PASTEL-BLUE SKIN — มือถือทั้งระบบ (< 900px)
   ภาษาดีไซน์แอปเงิน: แบนไม่ไล่เฉด การ์ดขาวมน 20-24px เงาเบา
   สีหลัก = น้ำเงิน #2563eb · เขียว/ส้ม/แดง ใช้สื่อความหมายเท่านั้น
   (CSS ล้วน โหลดท้ายไฟล์ = ชนะกฎไล่เฉดก่อนหน้า · จอคอมไม่เปลี่ยน)
   ============================================================ */
@media screen and (max-width: 899px) {
    :root {
        --pb: #2563eb;
        --pb-soft: #E7F0FE;
        --pb-ink: #1C1C1E;
        --pb-sub: #8E8E93;
        --pb-card-shadow: 0 4px 20px rgba(0, 0, 0, .04);
    }
    body, .wrapper { background: #F2F3F5 !important; }

    /* ---- ปุ่มหลักทุกตัว: น้ำเงินแบน ---- */
    .hesk-list-toolbar .hesk-draft-open,
    .hesk-search-modal__body .btn.btn-full,
    .surin-profile-grid .right-bar.is-inline .right-bar__footer .btn,
    .ux-alert__btn,
    .ux-mc__send,
    .btn.btn-full.save,
    button.btn.btn-full[type="submit"],
    .ticket-create .wiz-next,
    .tickets__legend .bulk-actions__controls .btn,
    .tickets__legend .bulk-actions__controls button {
        background: var(--pb) !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, .22) !important;
        border: 0 !important;
        color: #fff !important;
    }
    .hesk-list-toolbar .hesk-draft-open:hover,
    .ux-alert__btn:hover,
    .ux-mc__send:hover { background: #1d4ed8 !important; filter: none !important; }
    /* ปุ่มรอง: ขาวแบน */
    .hesk-list-toolbar .hesk-search-open {
        background: #fff !important;
        border: 0 !important;
        color: var(--pb) !important;
        box-shadow: var(--pb-card-shadow) !important;
    }

    /* ---- การ์ดทุกใบ: ขาว มน เงาเบา ไร้เส้นขอบ ---- */
    .ux-tcard,
    section.quick-links,
    .tickets__legend,
    .tickets__legend .bulk-actions__group,
    .ticket__body_block,
    .profile__wrapper,
    .surin-profile-grid .right-bar.is-inline,
    .ux-mc,
    .hesk-notif__panel,
    .ux-addr-grid .form-control,
    .chat__list, .chat__thread {
        border: 0 !important;
        box-shadow: var(--pb-card-shadow) !important;
    }
    .ux-tcard { border-radius: 20px !important; }
    .ux-tcard__id { background: var(--pb-soft); color: var(--pb); }
    .ux-tcard__st { background: var(--pb-soft); color: var(--pb); }
    .ux-tcard__title { color: var(--pb-ink); }
    .ux-tcard__grid small { color: #B5B5BA; }
    .ux-tcard__grid b { color: #3A3A3C; }
    .ux-tcard__foot { color: #B5B5BA; border-top-color: #F0F0F2; }
    .ux-tcard__grid { border-top-color: #F0F0F2; }

    /* ---- ชิปกรอง: ขาวลอย / ที่เลือกน้ำเงินแบน ---- */
    section.quick-links .filters__listing .btn {
        background: #fff !important;
        color: var(--pb-sub) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
    }
    section.quick-links .filters__listing .btn.is-bold,
    section.quick-links .filters__listing .btn.is-selected {
        background: var(--pb) !important;
        color: #fff !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, .25) !important;
    }

    /* ---- แถบเมนูล่าง: ขาวสะอาด ตัวเลือกปัจจุบัน = วงกลมน้ำเงินแบน ---- */
    .ux-mtab { background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 20px rgba(0, 0, 0, .05); }
    .ux-mtab__item { color: #98989D; }
    .ux-mtab__item.is-current { color: var(--pb); }
    .ux-mtab__item.is-current .ux-mtab__icon {
        background: var(--pb) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .3), 0 0 0 4px #fff !important;
    }
    .ux-mtab__item--account .ux-mtab__icon {
        background: var(--pb) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .3), 0 0 0 4px #fff !important;
    }
    .ux-mtab__item--account.is-current .ux-mtab__icon {
        box-shadow: 0 8px 18px rgba(37, 99, 235, .4), 0 0 0 3px var(--pb), 0 0 0 6px #fff !important;
    }
    .ux-mtab .hesk-notif.has-unread .hesk-notif__toggle .icon { fill: var(--pb) !important; }

    /* ---- หัวเว็บมือถือ ---- */
    .ux-mhead { box-shadow: 0 2px 14px rgba(0, 0, 0, .05); border-bottom: 0; }
    .ux-mhead .hesk-brand { background: none; border: 0; box-shadow: none; }

    /* ---- มินิแชท + แชทหลัก: bubble เราน้ำเงินแบน ---- */
    .ux-mc__b--me { background: var(--pb) !important; }
    .ux-mc__ava { background: var(--pb) !important; }
    .ux-mc__in:focus { border-color: var(--pb) !important; }
    .chat__back { background: var(--pb-soft) !important; color: var(--pb) !important; }

    /* ---- กล่องแจ้งเตือนกลางจอ: แบน ---- */
    .ux-alert__card { border-radius: 24px; }
    .ux-alert--success .ux-alert__icon { background: #34A853 !important; }
    .ux-alert--error .ux-alert__icon { background: #FBEAEA !important; color: #D64545 !important; }
    .ux-alert--info .ux-alert__icon { background: var(--pb-soft) !important; color: var(--pb) !important; }

    /* ---- ปุ่มกลับขึ้นบน: น้ำเงินแบน ---- */
    .ux-to-top { background: var(--pb) !important; box-shadow: 0 8px 20px rgba(37, 99, 235, .3) !important; }

    /* ---- หัวหมวด/เส้นสำคัญ ---- */
    .surin-profile-grid .ux-sec-head::before { background: var(--pb); }
    .ux-addr-grid__head::before { background: var(--pb) !important; }

    /* ---- ฟอร์ม: input พื้นอ่อนมน ---- */
    .form-control { border-color: #F0F0F2 !important; background: #F8F8FA; }
    .form-control:focus { border-color: var(--pb) !important; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important; }
}

/* ===== มือถือ: ป้ายกำหนดรายงานผล บนการ์ดเรื่อง ===== */
@media screen and (max-width: 899px) {
    .ux-tcard .ux-due-badge { margin: 0 0 0 6px; font-size: 11px; padding: 2px 9px; }
}

/* มือถือ: ป้ายหน่วยงานร่วมบนการ์ดเรื่อง */
@media screen and (max-width: 899px) {
    .ux-tcard .ux-unit-badge { display: inline-block; margin: 0 0 0 6px; padding: 2px 9px; font-size: 11px; }
}