/* =========================================================================
   MerdLive V1.2.0 — เมนูซ้าย (PC) + ลิ้นชัก (มือถือ) + กระดิ่งแจ้งเตือน
   ใช้ร่วมกับ modern-theme.css (ตัวแปรสี --mp-*)
   ========================================================================= */
:root {
    --ml-sb-w: 252px;
    --ml-top-h: 60px;
    --ml-sb-bg: #1E293B;
    --ml-sb-bg2: #0F172A;
    --ml-sb-text: rgba(255,255,255,.72);
    --ml-sb-muted: rgba(255,255,255,.42);
    --ml-sb-hover: rgba(255,255,255,.08);
    --ml-sb-active: rgba(14,165,233,.16);
}

/* ---------- Sidebar ---------- */
.ml-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
    width: var(--ml-sb-w);
    background: linear-gradient(180deg, var(--ml-sb-bg) 0%, var(--ml-sb-bg2) 100%);
    display: flex; flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06);
    transition: transform .22s ease;
}
.ml-sb-head {
    height: var(--ml-top-h); flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.ml-brand {
    display: flex; align-items: center; gap: .5rem; text-decoration: none;
    font-family: var(--mp-font-display); font-weight: 700; font-size: 1.12rem;
    color: #fff; letter-spacing: -.02em; white-space: nowrap;
}
.ml-brand:hover { color: #fff; }
.ml-brand-sub { color: #fff; font-weight: 400; opacity: .85; }
.ml-brand-mark {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0EA5E9, #0369A1); color: #fff; font-size: 1rem;
}
.ml-sb-close { background: none; border: none; color: var(--ml-sb-text); font-size: 1.15rem; padding: .35rem; }

.ml-sb-nav { flex: 1; overflow-y: auto; padding: .75rem .6rem; }
.ml-sb-nav::-webkit-scrollbar { width: 6px; }
.ml-sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.ml-sb-nav ul { list-style: none; margin: 0; padding: 0; }
.ml-sec {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ml-sb-muted); padding: .9rem .75rem .35rem;
}
.ml-sec:first-child { padding-top: .2rem; }
.ml-link, .ml-grp > summary {
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem .75rem; margin: 1px 0; border-radius: 9px;
    color: var(--ml-sb-text); text-decoration: none; font-weight: 500; font-size: .92rem;
    cursor: pointer; transition: background .15s, color .15s; list-style: none;
}
.ml-link i, .ml-grp > summary i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.ml-link:hover, .ml-grp > summary:hover { background: var(--ml-sb-hover); color: #fff; }
.ml-link.active { background: var(--ml-sb-active); color: #fff; box-shadow: inset 3px 0 0 #0EA5E9; }
.ml-link.active i { color: #38BDF8; }
.ml-link .ml-count {
    margin-left: auto; min-width: 20px; padding: 0 .4rem; border-radius: 999px;
    background: #F59E0B; color: #1E293B; font-size: .72rem; font-weight: 700; text-align: center; line-height: 20px;
}
.ml-grp > summary::-webkit-details-marker { display: none; }
.ml-grp > summary .ml-caret { margin-left: auto; font-size: .75rem; transition: transform .15s; width: auto; }
.ml-grp[open] > summary .ml-caret { transform: rotate(90deg); }
.ml-grp .ml-sub { padding-left: 1.1rem; margin: 2px 0 4px; border-left: 1px solid rgba(255,255,255,.08); margin-left: 1.35rem; }
.ml-grp .ml-sub .ml-link { font-size: .87rem; padding: .45rem .7rem; }
.ml-grp.ml-preview > summary { color: #FBBF24; }
.ml-plat-1 i { color: #4285F4; } .ml-plat-2 i { color: #1877F2; } .ml-plat-3 i { color: #06C755; } .ml-plat-4 i { color: #e5e7eb; }

.ml-sb-user {
    flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.06);
    padding: .75rem .9rem; display: flex; align-items: center; gap: .65rem;
}
.ml-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(14,165,233,.22); color: #7DD3FC; font-weight: 700;
}
.ml-sb-user .ml-u-name { color: #fff; font-weight: 600; font-size: .88rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-sb-user .ml-u-role { color: var(--ml-sb-muted); font-size: .74rem; }
.ml-logout {
    margin-left: auto; color: rgba(248,113,113,.9); font-size: 1.15rem; padding: .3rem .4rem; border-radius: 8px;
}
.ml-logout:hover { background: rgba(239,68,68,.18); color: #FCA5A5; }

/* ---------- Topbar ---------- */
.ml-topbar {
    position: fixed; top: 0; right: 0; left: var(--ml-sb-w); z-index: 1030;
    height: var(--ml-top-h);
    display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mp-border);
}
.ml-icon-btn {
    position: relative; width: 40px; height: 40px; border-radius: 10px; border: none;
    background: transparent; color: var(--mp-text); font-size: 1.35rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ml-icon-btn:hover, .ml-icon-btn[aria-expanded="true"] { background: var(--mp-surface-alt); }
.ml-top-user { display: flex; align-items: center; gap: .55rem; padding-left: .5rem; font-size: .88rem; color: var(--mp-text-muted); }
.ml-top-user .ml-avatar { width: 30px; height: 30px; font-size: .85rem; background: var(--mp-primary-light); color: var(--mp-primary-dark); }

/* ---------- กระดิ่ง ---------- */
.ml-bell .bi-bell-fill { display: none; }
.ml-bell.has-new .bi-bell { display: none; }
.ml-bell.has-new .bi-bell-fill { display: inline; color: var(--mp-text); animation: mlRing 1.6s ease 1; transform-origin: 50% 2px; }
@keyframes mlRing { 0%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-12deg)} 30%{transform:rotate(9deg)} 40%{transform:rotate(-6deg)} 50%{transform:rotate(0)} }
.ml-bell-count {
    position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #EF4444; color: #fff; font-size: .68rem; font-weight: 700;
    line-height: 18px; text-align: center; border: 2px solid #fff;
}
.ml-bell-menu {
    width: 380px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden;
    border: 1px solid var(--mp-border); border-radius: 14px; box-shadow: var(--mp-shadow-xl);
}
.ml-bell-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--mp-border); }
.ml-bell-head strong { font-family: var(--mp-font-display); }
.ml-bell-list { max-height: min(70vh, 460px); overflow-y: auto; }
.ml-nt {
    display: flex; gap: .7rem; padding: .7rem 1rem; text-decoration: none; color: var(--mp-text);
    border-bottom: 1px solid var(--mp-surface-alt); position: relative;
}
.ml-nt:hover { background: var(--mp-surface-alt); color: var(--mp-text); }
.ml-nt.unseen { background: rgba(14,165,233,.06); }
.ml-nt.unseen::after { content: ''; position: absolute; right: 12px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #0EA5E9; }
.ml-nt-ico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ml-nt-ico.t-danger  { background: #FEE2E2; color: #DC2626; }
.ml-nt-ico.t-warning { background: #FEF3C7; color: #B45309; }
.ml-nt-ico.t-success { background: #D1FAE5; color: #047857; }
.ml-nt-ico.t-info    { background: #E0F2FE; color: #0369A1; }
.ml-nt-title { font-weight: 600; font-size: .87rem; line-height: 1.35; padding-right: 14px; }
.ml-nt-detail { font-size: .8rem; color: var(--mp-text-muted); line-height: 1.4; }
.ml-nt-time { font-size: .72rem; color: var(--mp-text-light); margin-top: .1rem; }
.ml-bell-empty { padding: 2.2rem 1rem; text-align: center; color: var(--mp-text-muted); font-size: .88rem; }
.ml-bell-empty i { font-size: 2rem; display: block; margin-bottom: .4rem; color: #10B981; }

/* ---------- เนื้อหา ---------- */
.ml-shell .mp-main { margin-left: var(--ml-sb-w); padding-top: calc(var(--ml-top-h) + 1.5rem); }
.ml-backdrop { display: none; }

/* ---------- มือถือ / แท็บเล็ต (< 992px): เมนูเป็นลิ้นชัก ---------- */
@media (max-width: 991.98px) {
    :root { --ml-top-h: 56px; }
    .ml-sidebar { transform: translateX(-102%); width: min(84vw, 300px); box-shadow: 0 0 40px rgba(0,0,0,.35); z-index: 1060; }
    body.ml-sb-open .ml-sidebar { transform: translateX(0); }
    .ml-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(15,23,42,.5);
        opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    body.ml-sb-open .ml-backdrop { opacity: 1; pointer-events: auto; }
    body.ml-sb-open { overflow: hidden; }
    .ml-topbar { left: 0; padding: 0 .5rem; background: #1E293B; border-bottom-color: rgba(255,255,255,.08); }
    .ml-topbar .ml-icon-btn { color: #fff; }
    .ml-topbar .ml-icon-btn:hover, .ml-topbar .ml-icon-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); }
    .ml-bell.has-new .bi-bell-fill { color: #fff; }
    .ml-bell-count { border-color: #1E293B; }
    .ml-top-user { display: none; }
    .ml-brand-top { font-size: 1.05rem; }
    .ml-link, .ml-grp > summary { padding: .7rem .8rem; font-size: .96rem; }   /* นิ้วกดง่าย */
    .ml-shell .mp-main { margin-left: 0; padding-top: calc(var(--ml-top-h) + 1rem); }
    .ml-bell-menu { position: fixed !important; top: calc(var(--ml-top-h) + 4px) !important; left: 8px !important; right: 8px !important;
        transform: none !important; width: auto; max-width: none; }
}

/* ---------- ไม่ได้ล็อกอิน (หน้า Login) — ไม่มีเมนู ---------- */
.ml-shell.ml-nosb .ml-sidebar, .ml-shell.ml-nosb .ml-backdrop { display: none; }
.ml-shell.ml-nosb .ml-topbar { left: 0; background: #1E293B; }
.ml-shell.ml-nosb .ml-topbar .ml-icon-btn { display: none !important; }
.ml-shell.ml-nosb .ml-brand-top { display: flex !important; }
.ml-shell.ml-nosb .mp-main { margin-left: 0; }

/* ---------- มีอยู่เดิมใน master ---------- */
.mp-privacy-notice {
    text-align: center; font-size: .78rem; color: #94a3b8; padding: .6rem 1rem .8rem; margin-top: .75rem;
    border-top: 1px solid var(--mp-border, #e2e8f0); background: var(--mp-surface, #f8fafc);
}
.mp-privacy-notice i { color: #64748b; }
.mp-privacy-notice strong { color: #64748b; }

/* ============================================================
   V1.2.0 แถบ "กำลังทำข้อมูลลูกค้า" (MasterPage) — ติดด้านบนขณะเลื่อน
   ============================================================ */
.ml-ctx {
    position: sticky; top: calc(var(--ml-top-h) + 8px); z-index: 1020;
    display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
    background: #EFF6FF; border: 1px solid #BFDBFE; border-left: 4px solid #2563EB;
    border-radius: var(--mp-radius-lg); padding: .55rem .8rem; margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
}
.ml-ctx-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: #1D4ED8;
               text-decoration: none; padding: .3rem .55rem; border-radius: 8px; background: #fff; border: 1px solid #BFDBFE; white-space: nowrap; }
.ml-ctx-back:hover { background: #DBEAFE; color: #1E40AF; text-decoration: none; }
.ml-ctx-who { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1 1 220px; }
.ml-ctx-ic { flex: 0 0 34px; height: 34px; border-radius: 50%; background: #2563EB; color: #fff; display: flex; align-items: center; justify-content: center; }
.ml-ctx-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ml-ctx-lbl { font-size: .72rem; color: #1E40AF; font-weight: 600; }
.ml-ctx-name { font-family: var(--mp-font-display); font-size: 1rem; font-weight: 700; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-ctx-name small { font-size: .75rem; font-weight: 500; color: var(--mp-text-muted); }
.ml-ctx-st { font-family: var(--mp-font-body); font-size: .68rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; vertical-align: 2px; }
.ml-ctx-st.on { background: #DCFCE7; color: #166534; } .ml-ctx-st.off { background: #FEE2E2; color: #991B1B; }
.ml-ctx-steps { display: flex; gap: .3rem; flex-wrap: wrap; }
.ml-ctx-step { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: #334155; text-decoration: none;
               padding: .3rem .6rem; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid transparent; white-space: nowrap; }
.ml-ctx-step:hover { border-color: #93C5FD; color: #1D4ED8; text-decoration: none; }
.ml-ctx-step.on { background: #2563EB; color: #fff; }
@media (max-width: 991px) {
    .ml-ctx { top: calc(var(--ml-top-h) + 4px); padding: .5rem .6rem; gap: .45rem .6rem; }
    .ml-ctx-back span { display: none; }
    .ml-ctx-name { white-space: normal; }
    .ml-ctx-steps { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ml-ctx-steps::-webkit-scrollbar { display: none; }
}

/* ============================================================
   V1.2.0 เมนูซ้ายแบบย่อ (PC ≥ 992px) — html.ml-mini · ชี้เมาส์ที่เมนู = กางชั่วคราว (ทับเนื้อหา)
   ============================================================ */
@media (min-width: 992px) {
    html.ml-mini { --ml-sb-w: 68px; }
    .ml-sidebar { transition: width .18s ease, box-shadow .18s ease; }
    html.ml-mini .ml-sidebar { width: 68px; overflow: hidden; }
    html.ml-mini .ml-sidebar:hover { width: 252px; box-shadow: 8px 0 30px rgba(15,23,42,.28); transition-delay: .12s; }
    html.ml-mini .ml-sidebar:not(:hover) .ml-brand > span:not(.ml-brand-mark),
    html.ml-mini .ml-sidebar:not(:hover) .ml-link > span:not(.ml-count),
    html.ml-mini .ml-sidebar:not(:hover) .ml-grp > summary > span,
    html.ml-mini .ml-sidebar:not(:hover) .ml-caret,
    html.ml-mini .ml-sidebar:not(:hover) .ml-link > .bi-box-arrow-up-right,
    html.ml-mini .ml-sidebar:not(:hover) .ml-sub,
    html.ml-mini .ml-sidebar:not(:hover) .ml-sb-user > div,
    html.ml-mini .ml-sidebar:not(:hover) .ml-logout { display: none; }
    html.ml-mini .ml-sidebar:not(:hover) .ml-sb-head { justify-content: center; padding: 0; }
    html.ml-mini .ml-sidebar:not(:hover) .ml-sec { font-size: 0; padding: 0; margin: .5rem .55rem; border-top: 1px solid rgba(255,255,255,.1); }
    html.ml-mini .ml-sidebar:not(:hover) .ml-link,
    html.ml-mini .ml-sidebar:not(:hover) .ml-grp > summary { justify-content: center; padding: .62rem 0; position: relative; }
    html.ml-mini .ml-sidebar:not(:hover) .ml-link .ml-count { position: absolute; top: 2px; right: 6px; min-width: 16px; line-height: 16px; font-size: .62rem; padding: 0 .25rem; }
    html.ml-mini .ml-sidebar:not(:hover) .ml-sb-user { justify-content: center; padding: .75rem 0; }
    html.ml-mini .ml-sidebar .ml-link > span, html.ml-mini .ml-sidebar .ml-grp > summary > span { white-space: nowrap; }
    .ml-shell .mp-main, .ml-topbar { transition: margin-left .18s ease, left .18s ease; }
    .ml-mini-btn .ml-ic-mini { display: none; }
    html.ml-mini .ml-mini-btn .ml-ic-mini { display: inline; }
    html.ml-mini .ml-mini-btn .ml-ic-full { display: none; }
}

/* V1.2.0 แผงแจ้งเตือนเรื่องงบ มุมขวาล่าง — ธีม MerdLive (สีเดียวกับเมนูซ้าย + สีแจ้งเตือนของกระดิ่ง) */
.ml-ntp { position: fixed; right: 16px; bottom: 16px; z-index: 1090; width: min(440px, calc(100vw - 32px));
    background: linear-gradient(180deg, var(--ml-sb-bg) 0%, var(--ml-sb-bg2) 100%); color: #fff;
    border: 1px solid rgba(255,255,255,.08); border-radius: var(--mp-radius-lg, 14px); overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .35); font-family: var(--mp-font-body); font-size: .86rem; animation: mlNtpIn .2s ease-out; }
.ml-ntp-h { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; background: rgba(15, 23, 42, .55);
    border-bottom: 1px solid rgba(255,255,255,.06); }
.ml-ntp-bell { color: #38BDF8; margin-right: 4px; font-size: 1rem; }
.ml-ntp-chip { border: 0; color: #fff; font-family: var(--mp-font-body); font-weight: 700; font-size: .78rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; line-height: 1.3; }
.ml-ntp-chip.ty-g { background: #DC2626; } .ml-ntp-chip.ty-m { background: #0284C7; }
.ml-ntp-tag { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; margin-bottom: 3px; }
.ml-ntp-tag.ty-g { background: rgba(248, 113, 113, .16); color: #FCA5A5; }
.ml-ntp-tag.ty-m { background: rgba(56, 189, 248, .16); color: #7DD3FC; }
.ml-ntp-chip:hover { filter: brightness(1.12); }
.ml-ntp-tog { margin-left: auto; border: 0; background: none; color: var(--ml-sb-text); font-size: 1rem; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.ml-ntp-tog:hover { color: #fff; background: var(--ml-sb-hover); }
.ml-ntp-tog .bi { display: inline-block; transition: transform .15s; }
.ml-ntp.collapsed .ml-ntp-tog .bi { transform: rotate(180deg); }
.ml-ntp.collapsed .ml-ntp-list { display: none; }
.ml-ntp.collapsed .ml-ntp-h { border-bottom: 0; }
.ml-ntp-list { max-height: min(50vh, 420px); overflow-y: auto; scrollbar-color: rgba(255,255,255,.25) transparent; }
.ml-ntp-it { display: flex; gap: 10px; align-items: flex-start; padding: 12px 10px 12px 14px; border-top: 1px solid rgba(255,255,255,.06); }
.ml-ntp-it:first-child { border-top: 0; }
.ml-ntp-it:hover { background: var(--ml-sb-hover); }
.ml-ntp-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.ml-ntp-ico.t-danger { background: rgba(220, 38, 38, .18); color: #F87171; }
.ml-ntp-ico.t-warning { background: rgba(217, 119, 6, .2); color: #FBBF24; }
.ml-ntp-b { flex: 1; min-width: 0; line-height: 1.45; }
.ml-ntp-t { font-family: var(--mp-font-display); font-weight: 700; color: #fff; }
.ml-ntp-d { color: var(--ml-sb-text); margin-top: 2px; font-size: .8rem; }
.ml-ntp-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 3px 10px; border-radius: 999px;
    background: var(--ml-sb-active); color: #7DD3FC; text-decoration: none; font-weight: 700; font-size: .78rem; }
.ml-ntp-go:hover { background: rgba(14,165,233,.28); color: #fff; }
.ml-ntp-x { border: 0; background: none; color: var(--ml-sb-muted); font-size: 1.3rem; line-height: 1; padding: 0 4px; border-radius: 6px; cursor: pointer; }
.ml-ntp-x:hover { color: #fff; background: var(--ml-sb-hover); }
@keyframes mlNtpIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 575.98px) { .ml-ntp { right: 8px; left: 8px; bottom: 8px; width: auto; } .ml-ntp-list { max-height: 40vh; } }
/* V1.2.0 เรื่องใหม่: ส่วน "ใหม่" ในกระดิ่ง + ป้าย/ขอบในแผงมุมขวาล่าง */
.ml-nt-sec { padding: .45rem 1rem .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .03em; color: var(--mp-text-muted, #64748B); text-transform: uppercase; background: var(--mp-surface, #fff); }
.ml-ntp-it.is-new { background: rgba(56, 189, 248, .10); box-shadow: inset 3px 0 0 #38BDF8; }
.ml-ntp-new { display: inline-block; font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-bottom: 3px; background: #38BDF8; color: #0F172A; }