/* ===== ระบบนิเทศ (native) — สไตล์ nitedx ===== */
.sv-wrap { --sv-blue:#2563eb; --sv-ink:#1a5077; }
.min-w-0 { min-width:0; }
.sv-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.sv-title { font-size:1.55rem; font-weight:800; color:#1a5077; margin:0; }
.sv-sub { color:#64748b; margin:4px 0 0; font-size:.92rem; }
.sv-link { color:inherit; text-decoration:none; }

/* ปุ่ม */
.sv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:12px; border:1px solid #dbe4f0; background:#fff; color:#1a5077; font-weight:700; font-size:.92rem; cursor:pointer; font-family:inherit; transition:.18s; text-decoration:none; }
.sv-btn:hover { background:#f4f8ff; }
.sv-btn-primary { background:#1f3b8f; color:#fff; border:0; }
.sv-btn-primary:hover { background:#1a327c; filter:none; }
.sv-btn-ok { background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
.sv-btn:disabled { opacity:.6; cursor:not-allowed; }
.sv-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid #e2e9f3; background:#fff; color:#475569; font-size:.82rem; font-weight:700; cursor:pointer; font-family:inherit; text-decoration:none; }
.sv-chip-ok { background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
.sv-chip-danger { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.sv-chip:disabled { opacity:.5; }

/* tabs */
.sv-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.sv-tab { padding:8px 16px; border-radius:999px; border:1px solid #e2e9f3; background:#fff; color:#475569; font-weight:700; font-size:.88rem; text-decoration:none; }
.sv-tab.active { background:#1a5077; color:#fff; border-color:#1a5077; }

/* badge สถานะ (solid) */
.sv-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:999px; font-size:.78rem; font-weight:800; color:#fff; }
.sv-badge.open { background:#16a34a; }
.sv-badge.full { background:#f59e0b; }
.sv-badge.closed { background:#ef4444; }
.sv-badge.done { background:#94a3b8; }

/* สถิติ (hub) */
.sv-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:18px; }
.sv-stat { background:#fff; border:1px solid #e8eef7; border-radius:16px; padding:16px 18px; display:flex; align-items:center; gap:13px; }
.sv-stat-ic { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; flex-shrink:0; }
.sv-stat-val { font-size:1.6rem; font-weight:800; color:#1a5077; line-height:1; }
.sv-stat-lb { color:#64748b; font-size:.84rem; font-weight:600; margin-top:3px; }

/* ===== การ์ดกิจกรรม (Image 3) ===== */
.sv-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:20px; }
.sv-cards-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media(max-width:900px){ .sv-cards-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px){ .sv-cards-3{ grid-template-columns:1fr; } }
.sv-c { background:#fff; border:1px solid #eaeef5; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 22px rgba(26,80,119,.07); transition:.2s; }
.sv-c:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(26,80,119,.14); }
.sv-c-cover { position:relative; display:block; aspect-ratio:16/9; background:linear-gradient(135deg,#dbeafe,#cffafe); overflow:hidden; }
.sv-c-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.sv-c-cover-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#7da7d8; font-size:2.4rem; }
.sv-c-cover-badge { position:absolute; top:10px; right:10px; }
.sv-c-mytag { position:absolute; top:10px; left:10px; background:#1f3b8f; color:#fff; font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px; display:inline-flex; gap:5px; align-items:center; }
.sv-c-body { padding:14px 16px 6px; display:flex; flex-direction:column; gap:7px; flex:1; }
.sv-c-title { font-size:1.05rem; font-weight:800; color:#16233f; line-height:1.35; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sv-c-title:hover { color:#2563eb; }
.sv-c-desc { color:#64748b; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.sv-c-meta { display:flex; align-items:center; gap:9px; color:#475569; font-size:.88rem; }
.sv-c-meta i { width:18px; color:#2563eb; text-align:center; flex:0 0 auto; }
.sv-left { color:#16a34a; font-weight:700; } .sv-fulltxt { color:#c2410c; font-weight:700; }
.sv-c-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.sv-tag { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:#64748b; background:#f1f5fb; padding:4px 10px; border-radius:8px; }
.sv-c-foot { margin-top:auto; padding:12px 16px; border-top:1px solid #f1f5fb; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sv-c-sup { display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; }
.sv-c-ava { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#e8eef7; }
.sv-c-ava-ph { display:flex; align-items:center; justify-content:center; color:#94a3b8; }
.sv-c-sup-name { font-size:.82rem; font-weight:700; color:#16233f; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sv-c-sup-role { font-size:.72rem; color:#94a3b8; }
.sv-c-reg { background:#1f3b8f; color:#fff !important; font-weight:800; font-size:.85rem; padding:9px 16px; border-radius:10px; text-decoration:none; flex:0 0 auto; }
.sv-c-reg:hover { background:#1a327c; color:#fff !important; }

/* ===== ปฏิทิน (Image 1) ===== */
.sv-cal-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.sv-cal, .sv-mlist { background:#fff; border:1px solid #e8eef7; border-radius:20px; padding:18px; box-shadow:0 8px 24px rgba(26,80,119,.06); }
.sv-cal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.sv-cal-title { font-weight:800; color:#1a5077; font-size:1.1rem; display:flex; align-items:center; gap:8px; }
.sv-cal-nav { display:inline-flex; gap:6px; align-items:center; }
.sv-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:auto; grid-auto-rows:68px; gap:6px; overflow:visible; }
.sv-cal-dow { text-align:center; font-size:.76rem; font-weight:800; color:#5b73a8; padding:2px 0 4px; }
.sv-cal-cell { position:relative; height:100%; border:1px solid #e6edf8; border-radius:10px; padding:5px 6px; display:flex; flex-direction:column; gap:2px; overflow:visible; background:#fbfcff; }
.sv-cal-cell.has-ev { background:#f5f9ff; cursor:pointer; }
.sv-cal-cell.has-ev:hover { border-color:#93c5fd; z-index:65; }
/* จุด marker บอกกิจกรรม (ไม่โชว์ชื่อในช่อง) */
.sv-cal-dots { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:auto; }
.sv-dot { width:9px; height:9px; border-radius:50%; background:#2563eb; display:inline-block; flex:0 0 auto; }
.sv-dot.open { background:#16a34a; } .sv-dot.full { background:#f59e0b; } .sv-dot.closed { background:#ef4444; } .sv-dot.done { background:#94a3b8; }
.sv-cal-more { font-size:.64rem; font-weight:800; color:#64748b; }
/* popup เมื่อ hover ช่องที่มีกิจกรรม */
.sv-cal-pop { display:none; position:absolute; z-index:80; left:0; top:calc(100% + 5px); min-width:210px; max-width:min(280px,72vw); background:#fff; border:1px solid #e2e9f3; border-radius:12px; box-shadow:0 18px 44px rgba(15,35,86,.22); padding:10px; text-align:left; }
.sv-cal-cell:hover .sv-cal-pop { display:block; }
.sv-cal-pop-head { font-size:.72rem; font-weight:800; color:#0f2356; border-bottom:1px solid #f1f5fb; padding-bottom:5px; margin-bottom:6px; }
.sv-cal-pop-item { display:grid; grid-template-columns:auto 1fr; gap:3px 7px; align-items:start; padding:5px; border-radius:8px; text-decoration:none; }
.sv-cal-pop-item:hover { background:#f4f8ff; }
.sv-cal-pop-item .sv-dot { margin-top:5px; }
.sv-cal-pop-title { font-weight:700; color:#0f2356; font-size:.8rem; line-height:1.3; }
.sv-cal-pop-meta { grid-column:2; color:#64748b; font-size:.72rem; }
.sv-cal-cell.empty { background:#fafcff; border-style:dashed; }
.sv-cal-cell.today { border-color:#2563eb; box-shadow:0 0 0 1px #2563eb inset; background:#eef5ff; }
.sv-cal-cell.today .sv-cal-day { color:#1d4ed8; }
.sv-cal-day { font-weight:700; color:#475569; font-size:.78rem; }
.sv-cal-chip { position:relative; display:block; font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; cursor:pointer; }
.sv-cal-chip.open { background:#dcfce7; color:#15803d; }
.sv-cal-chip.full { background:#fef3c7; color:#b45309; }
.sv-cal-chip.closed { background:#fee2e2; color:#b91c1c; }
.sv-cal-chip.done { background:#f1f5f9; color:#64748b; }
.sv-cal-chip.more { background:#eef5ff; color:#2563eb; }
/* tooltip รายละเอียดกิจกรรม (hover) */
.sv-cal-tip { display:none; position:absolute; z-index:60; left:0; top:calc(100% + 5px); width:230px; max-width:60vw; background:#0f172a; color:#fff; border-radius:10px; padding:10px 12px; font-size:.72rem; font-weight:500; line-height:1.55; white-space:normal; text-overflow:clip; overflow:visible; box-shadow:0 14px 36px rgba(2,6,23,.32); }
.sv-cal-tip b { color:#fff; font-size:.78rem; }
.sv-cal-tip .sv-tip-row { color:#cbd5e1; display:block; margin-top:3px; }
.sv-cal-chip:hover .sv-cal-tip { display:block; }
.sv-cal-chip.more:hover .sv-cal-tip, .sv-cal-chip.more .sv-cal-tip { display:none; }
.sv-cal-legend { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid #f1f5fb; }
.sv-cal-legend-lb { font-size:.82rem; font-weight:700; color:#64748b; }
.sv-cal-legend .sv-badge { font-size:.72rem; padding:4px 11px; }

/* รายการกิจกรรมของเดือน (ขวา) */
.sv-mlist { display:flex; flex-direction:column; min-height:0; }
.sv-mlist-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid #f1f5fb; }
.sv-mlist-head span { font-weight:800; color:#1a5077; font-size:1rem; }
.sv-mlist-body { display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:0; max-height:430px; overflow-y:auto; padding-right:4px; }
.sv-mlist-item { display:block; border:1px solid #eef2f8; border-radius:14px; padding:12px 14px; text-decoration:none; transition:.15s; }
.sv-mlist-item:hover { border-color:#bcd3f0; background:#f7faff; }
.sv-mlist-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.sv-mlist-date { font-size:.78rem; font-weight:800; color:#2563eb; background:#eef5ff; padding:3px 10px; border-radius:8px; }
.sv-mlist-cap { font-size:.76rem; color:#64748b; font-weight:600; }
.sv-mlist-title { font-weight:800; color:#16233f; font-size:.95rem; line-height:1.4; }
.sv-mlist-time { color:#64748b; font-size:.82rem; margin-top:5px; display:flex; align-items:center; gap:6px; }
.sv-mlist-all { display:block; text-align:center; margin-top:14px; padding:11px; border-radius:12px; background:#f4f8ff; color:#1f3b8f; font-weight:800; text-decoration:none; font-size:.9rem; }
.sv-mlist-all:hover { background:#e8f0ff; }
.sv-mlist-empty { text-align:center; color:#94a3b8; padding:34px 10px; }
.sv-mlist-empty i { font-size:2rem; display:block; margin-bottom:8px; color:#cbd5e1; }

/* ===== หน้ารายละเอียด (Image 2) ===== */
.sv-detail { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px; align-items:start; margin-top:12px; }
.sv-detail-main { background:#fff; border:1px solid #eaeef5; border-radius:20px; overflow:hidden; box-shadow:0 8px 24px rgba(26,80,119,.06); }
.sv-detail-cover { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#dbeafe,#cffafe); }
.sv-detail-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.sv-detail-cover-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#7da7d8; font-size:3.4rem; }
.sv-detail-cover-badge { position:absolute; top:14px; right:14px; }
.sv-detail-title { font-size:1.7rem; font-weight:800; color:#16233f; line-height:1.3; margin:0; padding:22px 24px 0; }
.sv-detail-meta { display:flex; flex-wrap:wrap; gap:10px 22px; padding:14px 24px 0; }
.sv-detail-meta span { display:inline-flex; align-items:center; gap:8px; color:#334155; font-weight:600; font-size:.95rem; }
.sv-detail-meta i { color:#2563eb; }
.sv-detail-note { margin:16px 24px 0; background:#eff6ff; border:1px solid #dbeafe; color:#1d4ed8; font-size:.88rem; font-weight:600; padding:10px 14px; border-radius:12px; display:flex; align-items:center; gap:8px; }
.sv-detail-h2 { font-size:1.2rem; font-weight:800; color:#16233f; margin:22px 24px 0; }
.sv-detail-desc { padding:10px 24px 26px; color:#334155; line-height:1.85; white-space:pre-wrap; }
.sv-detail-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }

/* การ์ดลงทะเบียน */
.sv-reg { background:#fff; border:1px solid #eaeef5; border-radius:20px; padding:22px; box-shadow:0 8px 24px rgba(26,80,119,.06); text-align:center; }
.sv-reg-num { font-size:2.6rem; font-weight:800; color:#1f3b8f; line-height:1; }
.sv-reg-num span { color:#94a3b8; font-size:1.5rem; font-weight:700; }
.sv-reg-lb { color:#64748b; font-size:.9rem; margin-top:4px; }
.sv-reg-left { display:inline-block; margin-top:10px; background:#dcfce7; color:#15803d; font-weight:800; font-size:.84rem; padding:5px 14px; border-radius:999px; }
.sv-reg-left.zero { background:#fee2e2; color:#b91c1c; }
.sv-reg-bar { height:8px; border-radius:999px; background:#eef2f8; overflow:hidden; margin:16px 0 0; }
.sv-reg-bar > div { height:100%; border-radius:999px; background:linear-gradient(90deg,#1f3b8f,#3b82f6); }
.sv-reg-actions { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.sv-reg-main { width:100%; padding:14px; font-size:1rem; }
.sv-reg-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sv-reg-msg { margin-top:10px; font-size:.85rem; color:#475569; }

/* การ์ดศึกษานิเทศก์ */
.sv-sup-card { background:#fff; border:1px solid #eaeef5; border-radius:20px; padding:18px 20px; box-shadow:0 8px 24px rgba(26,80,119,.06); }
.sv-sup-head { font-weight:800; color:#1a5077; font-size:1rem; margin-bottom:12px; }
.sv-sup-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sv-sup-ava { width:54px; height:54px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#e8eef7; }
.sv-sup-ava-ph { display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:1.3rem; }
.sv-sup-name { font-weight:800; color:#16233f; font-size:1rem; }
.sv-sup-role { font-size:.84rem; color:#475569; }
.sv-sup-org { font-size:.8rem; color:#94a3b8; }
.sv-sup-contact { display:flex; align-items:center; gap:9px; color:#475569; font-size:.88rem; text-decoration:none; padding:5px 0; }
.sv-sup-contact i { color:#2563eb; width:18px; text-align:center; }
.sv-sup-contact:hover { color:#2563eb; }

/* ===== หน้าจัดการ (ศน.) — ยังใช้ sv-card เดิม ===== */
.sv-card { background:#fff; border:1px solid #e8eef7; border-radius:18px; box-shadow:0 8px 24px rgba(26,80,119,.06); }
.sv-card-cat { font-size:.72rem; font-weight:800; color:#2563eb; }
.sv-card-title { font-size:1.02rem; font-weight:800; color:#16233f; line-height:1.35; }
.sv-meta { display:flex; align-items:center; gap:8px; color:#475569; font-size:.86rem; }
.sv-meta i { color:#2563eb; }
.sv-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.sv-table th { text-align:left; padding:9px 12px; color:#64748b; font-weight:700; border-bottom:2px solid #eef2f8; font-size:.82rem; }
.sv-table td { padding:9px 12px; border-bottom:1px solid #f1f5fb; color:#334155; }

.sv-empty { text-align:center; padding:48px 20px; color:#94a3b8; }
.sv-empty i { font-size:2.6rem; color:#cbd5e1; margin-bottom:10px; display:block; }

@media(max-width:900px){
  .sv-cal-layout { grid-template-columns:1fr; }
  .sv-detail { grid-template-columns:1fr; }
  .sv-detail-side { position:static; }
}
@media(max-width:640px){ .sv-cal-grid{ grid-template-rows:auto; grid-auto-rows:52px; gap:3px; } .sv-cal-tip{ width:180px; } .sv-detail-title{ font-size:1.35rem; } }