/* ===== Sidebar/Topbar shell — port จาก dtc-eportfolio/inc/layout.php ===== */
:root{
  --app-menu-w:286px;--app-menu-bg:#ffffff;--app-menu-soft:#f7fbff;--app-menu-line:#e5edf8;
  --app-menu-text:#243247;--app-menu-muted:#7b8aa0;--app-menu-blue:#2f80ed;--app-menu-cyan:#36c5f0;
}
body,.main-sidebar,.navbar,.app-menu,.content-wrapper{font-weight:400!important}
strong,b,.font-weight-bold,.content-header h1,.card-title{font-weight:500!important}
.app-sidebar{width:var(--app-menu-w)!important;background:linear-gradient(180deg,#fff 0%,#fbfdff 65%,#f6faff 100%)!important;border-right:1px solid var(--app-menu-line)!important;box-shadow:0 18px 42px rgba(47,128,237,.07)!important;overflow:hidden!important}
.app-brand{min-height:76px!important;padding:15px 16px!important;display:flex!important;align-items:center!important;gap:10px!important;background:#fff!important;border-bottom:1px solid var(--app-menu-line)!important;color:var(--app-menu-text)!important}
.app-brand .brand-image{width:38px!important;height:38px!important;border-radius:15px!important;background:#fff!important;border:1px solid #dbeafe!important;padding:6px!important;margin:0!important;box-shadow:0 9px 22px rgba(47,128,237,.10)!important}
.app-brand .brand-text{display:block!important;color:var(--app-menu-text)!important;font-size:1.02rem!important;line-height:1.08!important;font-weight:500!important;white-space:nowrap!important}
.app-brand-sub{display:block!important;color:var(--app-menu-muted)!important;font-size:.70rem!important;line-height:1.1!important;font-weight:400!important;max-width:190px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.app-menu{height:calc(100vh - 76px);overflow-y:auto;padding:14px 12px 22px}
.app-menu::-webkit-scrollbar{width:6px}
.app-menu::-webkit-scrollbar-thumb{background:#d8e6f7;border-radius:999px}
.app-menu-heading{margin:13px 10px 7px;color:#8a99ad;font-size:.70rem;letter-spacing:.08em;text-transform:uppercase}
.app-menu-link,.app-menu-summary,.app-sub-link{text-decoration:none!important;display:flex;align-items:center;width:100%;border:0;outline:0;color:#344256!important;border-radius:16px;min-height:44px;padding:8px 10px;font-size:.94rem;font-weight:400!important;transition:all .18s ease;cursor:pointer}
.app-menu-summary{list-style:none}
.app-menu-summary::-webkit-details-marker{display:none}
.app-menu-link:hover,.app-menu-summary:hover,.app-sub-link:hover{background:#f4f9ff!important;color:var(--app-menu-blue)!important;transform:translateX(2px)}
.app-menu-link.active,.app-menu-group.active>.app-menu-summary,.app-sub-link.active{background:linear-gradient(135deg,var(--app-menu-blue),var(--app-menu-cyan))!important;color:#fff!important;box-shadow:0 12px 26px rgba(47,128,237,.16)}
.app-menu-icon{width:34px;height:34px;min-width:34px;border-radius:14px;background:#f1f7ff;border:1px solid #dbeafe;display:inline-flex;align-items:center;justify-content:center;margin-right:11px;color:var(--app-menu-blue)}
.app-menu-link.active .app-menu-icon,.app-menu-group.active>.app-menu-summary .app-menu-icon{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.20);color:#fff}
.app-menu-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-menu-chevron{font-size:.72rem;color:#8fa1b8;transition:transform .2s ease}
.app-menu-group[open]>.app-menu-summary .app-menu-chevron{transform:rotate(180deg)}
.app-sub-menu{margin:6px 0 8px 25px;padding-left:13px;border-left:1px dashed #cfdef3}
.app-sub-link{min-height:36px;padding:7px 9px;border-radius:13px;color:#5a677a!important;font-size:.90rem}
.app-sub-link i{width:16px;min-width:16px;margin-right:8px;color:#9aacbf;font-size:.82rem}
.app-sub-dot{width:7px;height:7px;border-radius:50%;background:#b7cff5;margin-right:9px;box-shadow:0 0 0 4px rgba(183,207,245,.16)}
.app-sub-link.active .app-sub-dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.app-topbar{height:64px!important;border-bottom:1px solid var(--app-menu-line)!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 26px rgba(15,23,42,.035)!important}
.app-topbar .nav-link{color:#4a5568!important;font-weight:400!important}
.app-topbar-title{display:inline-flex;align-items:center;gap:8px;padding:.46rem .82rem;border-radius:999px;background:#f4f9ff;color:var(--app-menu-blue);border:1px solid #dbeafe}
.app-topbar-user{display:flex;align-items:center;gap:.7rem}
.app-topbar-user img{width:38px;height:38px;border-radius:14px;object-fit:cover;border:2px solid #e6f0ff}
.app-topbar-user-meta{display:flex;flex-direction:column;line-height:1.06}
.app-topbar-user-name{font-size:.87rem;color:#243247;font-weight:500;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-topbar-user-role{font-size:.72rem;color:#718096;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-topbar-logout{display:inline-flex;align-items:center;gap:6px;background:#fff7f7;border:1px solid #ffe2e2;color:#d94a4a!important;padding:.5rem .78rem;border-radius:999px;margin-left:.45rem}
.app-sidebar-backdrop{display:none}
@media(min-width:992px){
  body:not(.layout-top-nav) .main-sidebar.app-sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;transform:none!important}
  body:not(.layout-top-nav) .content-wrapper,body:not(.layout-top-nav) .main-footer,body:not(.layout-top-nav) .main-header{margin-left:var(--app-menu-w)!important}
  body.sidebar-collapse .main-sidebar.app-sidebar,body.sidebar-collapse .main-sidebar.app-sidebar:hover{width:var(--app-menu-w)!important}
}
@media(max-width:991.98px){
  body:not(.layout-top-nav) .content-wrapper,body:not(.layout-top-nav) .main-footer,body:not(.layout-top-nav) .main-header{margin-left:0!important}
  .main-sidebar.app-sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;height:100vh!important;transform:translateX(-105%)!important;transition:transform .24s ease!important;z-index:1050!important;border-radius:0 24px 24px 0!important}
  body.sidebar-open .main-sidebar.app-sidebar{transform:translateX(0)!important}
  .app-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.28);backdrop-filter:blur(3px);z-index:1040}
  body.sidebar-open .app-sidebar-backdrop{display:block!important}
  .app-topbar{margin-left:0!important;left:0!important;right:0!important;width:100%!important}
}
@media(max-width:575.98px){
  :root{--app-menu-w:268px}
  .app-brand{min-height:62px!important;padding:.75rem .82rem!important}
  .app-brand .brand-image{width:34px!important;height:34px!important;border-radius:13px!important}
  .app-brand-sub{display:none!important}
  .app-menu{height:calc(100vh - 62px);padding:11px 9px 18px}
  .app-menu-link,.app-menu-summary{min-height:42px;padding:7px 8px;border-radius:14px;font-size:.90rem}
  .app-menu-icon{width:30px;height:30px;min-width:30px;border-radius:12px;margin-right:9px}
  .app-sub-menu{margin-left:18px;padding-left:11px}
  .app-topbar{height:56px!important}
  .app-topbar-user{display:none!important}
  .app-topbar-title .app-topbar-title-text{display:none!important}
  .app-topbar-logout{font-size:0!important;padding:.43rem .6rem}
  .app-topbar-logout i{font-size:.95rem}
}
html.app-menu-open-lock,html.app-menu-open-lock body{overflow:hidden!important}

/* 📱 แถบเมนูล่างแบบแอปมือถือ (MobileTabBar) — โชว์เฉพาะจอ <992px */
.app-mobile-tabbar{display:none}
@media(max-width:991.98px){
  .app-mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:95000;display:flex;align-items:stretch;
    height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid #e6f0fb;
    box-shadow:0 -8px 24px rgba(15,23,42,.08)}
  /* กันเนื้อหา/footer โดน tab bar บัง */
  .content-wrapper{padding-bottom:calc(70px + env(safe-area-inset-bottom))!important}
  .main-footer{margin-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* ยกปุ่มแชทลอย + panel ให้พ้น tab bar */
  .dm-fab{bottom:calc(74px + env(safe-area-inset-bottom))!important}
  .dm-panel{bottom:calc(138px + env(safe-area-inset-bottom))!important;max-height:min(560px,calc(100vh - 200px))!important}
}
@media(min-width:1400px){:root{--app-menu-w:296px}}
@media(min-width:992px) and (max-width:1199.98px){
  :root{--app-menu-w:270px}
  .app-brand .brand-text{font-size:.98rem!important}
  .app-brand-sub{max-width:170px!important}
  .app-menu-link,.app-menu-summary{font-size:.91rem!important}
}
@media(max-width:991.98px){:root{--app-menu-w:min(286px,86vw)}.app-sidebar{width:var(--app-menu-w)!important;max-width:86vw!important}}
@media(max-width:575.98px){:root{--app-menu-w:min(268px,88vw)}.app-sidebar{width:var(--app-menu-w)!important;max-width:88vw!important}}
@media(max-width:380px){:root{--app-menu-w:min(250px,90vw)}.app-sidebar{width:var(--app-menu-w)!important;max-width:90vw!important}.app-menu-text{font-size:.86rem!important}}
@media(min-width:992px){
  body.app-sidebar-hidden .main-sidebar.app-sidebar{transform:translateX(-105%)!important}
  body.app-sidebar-hidden .content-wrapper,body.app-sidebar-hidden .main-footer,body.app-sidebar-hidden .main-header{margin-left:0!important}
  .main-sidebar.app-sidebar{transition:transform .24s ease!important}
  .content-wrapper,.main-footer,.main-header{transition:margin-left .24s ease}
  /* hover peek (PUSH) — ดันเนื้อหาทุกโมดูลย่อเข้ามา; ต้องอยู่ "หลัง" กฎ hidden (dashboard.css โหลดท้ายสุด) ถึงจะชนะ */
  body.app-sidebar-hidden.app-sidebar-peek .main-sidebar.app-sidebar,
  body.app-sidebar-peek .main-sidebar.app-sidebar{transform:translateX(0)!important;z-index:1050!important;box-shadow:10px 0 36px rgba(15,23,42,.12)!important}
  body.app-sidebar-hidden.app-sidebar-peek .content-wrapper,body.app-sidebar-hidden.app-sidebar-peek .main-footer,body.app-sidebar-hidden.app-sidebar-peek .main-header,
  body.app-sidebar-peek .content-wrapper,body.app-sidebar-peek .main-footer,body.app-sidebar-peek .main-header{margin-left:var(--app-menu-w)!important}
}

/* ===== Dashboard content — port จาก dtc-eportfolio/dashboard.php ===== */
:root{--ink:#152238;--muted:#64748b;--line:#dbeafe;--soft:#f8fbff;--blue:#3b82f6;--sky:#38bdf8;--green:#22c55e;--teal:#14b8a6;--red:#fb7185;--orange:#fb923c;--yellow:#facc15;--purple:#a855f7;--pink:#ec4899;--shadow:0 22px 48px rgba(30,64,175,.10)}
html,body{font-family:Sarabun,Arial,sans-serif;color:var(--ink)}
.content-wrapper{background-color:#ffffff!important;background-image:linear-gradient(rgba(59,130,246,.065) 1px, transparent 1px),linear-gradient(90deg, rgba(59,130,246,.065) 1px, transparent 1px);background-size:30px 30px}
.dash-page{padding-bottom:30px}
.fade-up{animation:fadeUp .58s ease both}.fade-up-2{animation:fadeUp .78s ease both}.fade-up-3{animation:fadeUp .96s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.premium-dashboard{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:stretch;margin-bottom:24px}
.profile-showcase{background:#fff;border:1px solid rgba(219,234,254,.96);border-radius:34px;box-shadow:var(--shadow);padding:18px;overflow:hidden;position:relative}
.profile-showcase::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:radial-gradient(circle at 20% 10%, rgba(59,130,246,.20), transparent 28%),linear-gradient(135deg,rgba(59,130,246,.13),rgba(56,189,248,.10));pointer-events:none}
.profile-photo-wrap{position:relative;z-index:2;margin-top:10px;border-radius:30px;overflow:hidden;background:#fff;border:5px solid #fff;box-shadow:0 18px 40px rgba(30,64,175,.16)}
.profile-photo{width:100%;height:255px;display:block;object-fit:cover;object-position:center top}
.profile-mini-info{position:relative;z-index:3;padding:16px 4px 2px;text-align:center}
.profile-mini-name{font-size:1.22rem;font-weight:700;color:var(--ink);line-height:1.28;margin-bottom:5px}
.profile-mini-role{color:var(--muted);font-size:.92rem;line-height:1.45}
.profile-complete{margin-top:14px;border-radius:20px;padding:12px;background:#f8fbff;border:1px solid #e5efff}
.profile-complete-top{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:#334155;margin-bottom:8px;font-weight:600}
.profile-progress{height:10px;border-radius:999px;overflow:hidden;background:#e8f1ff}
.profile-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--sky))}
.welcome-panel{position:relative;overflow:hidden;border-radius:34px;background:linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.84) 42%, rgba(255,255,255,.50) 100%),url('/portal/login-bg.webp') center center / cover no-repeat;border:1px solid rgba(219,234,254,.96);box-shadow:var(--shadow);padding:30px;min-height:100%}
.welcome-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 25%),linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));pointer-events:none}
.welcome-panel::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;bottom:-110px;background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(56,189,248,.04));backdrop-filter:blur(3px)}
.welcome-inner{position:relative;z-index:2}
.welcome-kicker{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 14px;background:#eef6ff;border:1px solid #dbeafe;color:#2563eb;font-size:.9rem;font-weight:600;margin-bottom:15px}
.welcome-title{margin:0;color:#0f2356;font-size:2.45rem;line-height:1.10;font-weight:700;letter-spacing:-.035em;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.welcome-sub{margin:14px 0 0;color:#4b5e7a;line-height:1.75;font-size:1.02rem;max-width:760px;text-shadow:0 1px 0 rgba(255,255,255,.42)}
.welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.dash-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:16px;padding:11px 16px;text-decoration:none!important;font-weight:600;transition:.2s ease;border:1px solid rgba(209,228,255,.96);background:rgba(255,255,255,.84);color:#2563eb;backdrop-filter:blur(8px);box-shadow:0 10px 20px rgba(37,99,235,.07)}
.dash-btn.primary{color:#fff;border:0;background:linear-gradient(135deg,#2563eb,#38bdf8);box-shadow:0 16px 30px rgba(37,99,235,.20)}
.dash-btn:hover{transform:translateY(-2px);box-shadow:0 15px 26px rgba(37,99,235,.13)}
.welcome-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.tag-card{border-radius:22px;padding:15px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.66);backdrop-filter:blur(10px);box-shadow:0 12px 28px rgba(37,99,235,.06)}
.tag-card i{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#eef6ff;color:#2563eb;margin-bottom:10px}
.tag-card strong{display:block;color:var(--ink);font-weight:700;font-size:.98rem}
.tag-card span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.quick-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.quick-tile{position:relative;overflow:hidden;min-height:104px;border-radius:22px;padding:15px;color:#fff;box-shadow:0 12px 26px rgba(15,23,42,.13);transition:.22s ease}
.quick-tile:hover{transform:translateY(-4px)}
.quick-tile::before{content:"";position:absolute;width:98px;height:98px;right:-18px;top:16px;border-radius:50%;background:rgba(255,255,255,.14)}
.quick-tile::after{content:"";position:absolute;width:128px;height:128px;right:-32px;bottom:-60px;border-radius:50%;background:rgba(255,255,255,.12)}
.quick-tile.blue{background:linear-gradient(135deg,#4f8ff0,#35b7f3)}.quick-tile.green{background:linear-gradient(135deg,#43d06f,#35caa8)}.quick-tile.yellow{background:linear-gradient(135deg,#f4c126,#f7b51d)}.quick-tile.purple{background:linear-gradient(135deg,#9d4edd,#d94b9d)}
.quick-tile-icon{position:relative;z-index:2;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.19);border:1px solid rgba(255,255,255,.22);margin-bottom:8px;font-size:.9rem}
.quick-tile-value{position:relative;z-index:2;font-size:1.8rem;line-height:1;font-weight:700;letter-spacing:-.04em}
.quick-tile-label{position:relative;z-index:2;margin-top:5px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.96)}
.metric-showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.metric-card{position:relative;overflow:hidden;border-radius:32px;min-height:176px;padding:24px;color:#fff;box-shadow:0 22px 44px rgba(15,23,42,.14);transition:.22s ease}
.metric-card:hover{transform:translateY(-5px);box-shadow:0 30px 58px rgba(15,23,42,.18)}
.metric-card::before{content:"";position:absolute;right:-18px;top:18px;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.13)}
.metric-card::after{content:"";position:absolute;right:-42px;bottom:-68px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12)}
.metric-card.green{background:linear-gradient(135deg,#2ecc71 0%,#23c6a4 100%)}.metric-card.red{background:linear-gradient(135deg,#ff758c 0%,#ff5f6d 100%)}.metric-card.orange{background:linear-gradient(135deg,#ff9f1c 0%,#ffbf36 100%)}.metric-card.yellow{background:linear-gradient(135deg,#f9c80e 0%,#f59e0b 100%)}
.metric-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.metric-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);font-size:.84rem;font-weight:700}
.metric-icon{width:46px;height:46px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.96);flex-shrink:0}
.metric-value{position:relative;z-index:2;margin:14px 0 6px;font-size:3.22rem;line-height:1;font-weight:700;letter-spacing:-.05em;text-shadow:0 2px 8px rgba(0,0,0,.08)}
.metric-title{position:relative;z-index:2;font-size:1.08rem;font-weight:700}
.metric-note{position:relative;z-index:2;margin-top:6px;max-width:95%;color:rgba(255,255,255,.93);font-size:.86rem;line-height:1.45}
.metric-line{position:absolute;left:24px;right:24px;bottom:18px;height:8px;border-radius:999px;background:rgba(255,255,255,.34);z-index:2;overflow:hidden}
.metric-line span{display:block;height:100%;border-radius:999px;background:rgba(255,255,255,.76)}
/* 🧱 กันข้อความยาวล้นกรอบทั้งระบบ (กฎถาวร 2026-07-29) — ยาวเกิน = ขึ้นบรรทัดใหม่ ไม่ดันกล่องแตก
   overflow-wrap:anywhere ทำให้ min-content ของข้อความยาวไม่บังคับความกว้าง (สำคัญกับไทยที่ไม่มีเว้นวรรค)
   + min-width:0 ให้ลูกใน flex/grid หดได้ (ค่าเริ่ม auto = ไม่ยอมหด → ต้นเหตุกล่องล้น) */
.dash-card-body,.dash-card-head,.sv-card,.metric-card,.quick-tile{overflow-wrap:anywhere}
.dash-card-body>*,.dash-card-body>*>*,.dash-card-head>*{min-width:0}
/* overflow:visible (เดิม hidden) — กัน dropdown/autocomplete ในการ์ดโดนตัด (กฎถาวร 2026-07-28) · มุมโค้งย้ายไปตัดที่ head/body แทน */
.dash-card{overflow:visible;background:#fff;border:1px solid rgba(219,234,254,.96);border-radius:30px;box-shadow:0 22px 48px rgba(37,99,235,.10)}
.dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid #dbeafe;background:linear-gradient(180deg,#ffffff,#f7fbff);border-radius:29px 29px 0 0}
.dash-card-head:has(+ *:last-child.dash-card-body){border-radius:29px 29px 0 0}
.dash-card>.dash-card-body:first-child{border-radius:29px 29px 0 0}
.dash-card>.dash-card-body:last-child{border-radius:0 0 29px 29px}
.dash-card-title{display:flex;align-items:center;gap:12px;font-size:1.10rem;font-weight:700;color:#0f2356}
.dash-card-title i{width:40px;height:40px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#eef6ff;color:#2563eb}
.dash-card-desc{font-size:.86rem;color:var(--muted);margin-top:4px}
.dash-card-body{padding:18px 20px}
.chart-box,.chart-box.small{height:330px;position:relative}
.latest-list{display:flex;flex-direction:column;gap:10px}
.latest-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;border:1px solid #e8f0fb;background:#fff;box-shadow:0 10px 24px rgba(37,99,235,.06);transition:.2s ease}
.latest-item:hover{transform:translateX(4px);box-shadow:0 14px 28px rgba(37,99,235,.08)}
.latest-icon{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#4f8ff0,#35b7f3)}
.latest-icon.green{background:linear-gradient(135deg,#43d06f,#35caa8)}.latest-icon.yellow{background:linear-gradient(135deg,#f4c126,#f7b51d)}.latest-icon.purple{background:linear-gradient(135deg,#9d4edd,#d94b9d)}
.latest-title{margin:0;font-size:.96rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-meta{margin:3px 0 0;font-size:.82rem;color:var(--muted)}
.empty-state{text-align:center;color:var(--muted);padding:38px 10px}
.empty-state i{font-size:48px;color:#93c5fd;margin-bottom:12px}
.profile-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-pill{border:1px solid #e8f0fb;background:#fbfdff;border-radius:18px;padding:12px}
.profile-pill small{display:block;color:var(--muted);margin-bottom:4px}
.profile-pill span{font-size:.94rem;color:var(--ink);font-weight:600}
.min-w-0{min-width:0}
@media(max-width:1399.98px){.premium-dashboard{grid-template-columns:300px 1fr}}
@media(max-width:1199.98px){.premium-dashboard{grid-template-columns:1fr}.quick-stack{grid-template-columns:repeat(4,1fr)}.metric-showcase{grid-template-columns:repeat(2,1fr)}.welcome-tags{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.profile-showcase,.welcome-panel,.quick-tile,.metric-card,.dash-card{border-radius:24px}.profile-photo{height:240px}.welcome-title{font-size:1.62rem}.welcome-tags,.metric-showcase{grid-template-columns:1fr}.quick-stack{grid-template-columns:repeat(2,1fr)}.metric-card{min-height:160px;padding:20px}.metric-value{font-size:3rem}.metric-note{max-width:100%}.chart-box,.chart-box.small{height:275px}.profile-list{grid-template-columns:1fr}.welcome-actions .dash-btn{width:100%}}

/* บริการ Nited Connect (services grid บน dashboard) */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc-card{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:18px;background:#fff;border:1px solid #e6f0fb;box-shadow:0 8px 20px rgba(37,99,235,.06);text-decoration:none!important;transition:.18s ease;min-width:0}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(37,99,235,.12);border-color:#bcd8fb}
.svc-ic{width:44px;height:44px;min-width:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;background:linear-gradient(135deg,#2563eb,#38bdf8)}
.svc-name{display:flex;flex-direction:column;min-width:0;font-size:.96rem;font-weight:700;color:#0f2356;line-height:1.3}
.svc-name small{font-weight:400;font-size:.74rem;color:#7b8ba7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1199.98px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767.98px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.svc-grid{grid-template-columns:1fr}}

/* ปุ่ม pg-btn (ใช้ใน AvatarUpload — port จาก dles) */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;padding:9px 16px;font-family:Sarabun,Arial,sans-serif;font-weight:700;font-size:.92rem;cursor:pointer;border:1px solid #dbeafe;background:#fff;color:#2563eb;transition:.18s ease}
.pg-btn:hover{background:#eff6ff}
.pg-btn:disabled{opacity:.6;cursor:not-allowed}
.pg-btn-primary{background:#2563eb;color:#fff;border:0}
.pg-btn-primary:hover{background:#1d4ed8}
.pg-btn-secondary{background:#fff;color:#2563eb}
.pg-btn-ghost{background:transparent;border:0;color:#64748b}
.pg-btn-ghost:hover{background:#f1f5f9}
.pg-btn-sm{padding:7px 12px;font-size:.86rem}

/* Embed iframe (โมดูล) */
.embed-fullscreen-container{position:relative;width:100%;height:calc(100vh - 96px);min-height:460px;background:#fff;border:1px solid #e6f0fb;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(37,99,235,.08)}
.embed-fullscreen-iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:991.98px){.embed-fullscreen-container{height:calc(100vh - 120px)}}