:root{ --bg:#0b1220; --card:#121a2a; --ink:#e8eefc; --muted:#9fb0d0; --line:#22304a; --brand:#3b82f6; --ok:#10b981; --warn:#f59e0b; --info:#60a5fa; --role-ceo:#a78bfa; --role-head:#60a5fa; --role-lead:#34d399; } /* พื้นหลังหลัก */ .bg-app{ background:var(--bg); color:var(--ink); } .text-brand{ color:var(--brand); } /* container org chart */ .org{ --gap:24px;padding: 15px 0; } /* level = แถวของการ์ด */ .org .org-level{ display:grid; gap:var(--gap); justify-content:center; align-items:start; } /* ค่าเริ่มต้น: 3 คอลัมน์ */ .org .org-cols-3{ grid-template-columns:repeat(3,minmax(220px,1fr)); } /* Tablet: เหลือ 2 คอลัมน์ */ @media (max-width: 991px){ .org .org-cols-3{ grid-template-columns:repeat(2,minmax(220px,1fr)); } } /* Mobile: เหลือ 1 คอลัมน์ */ @media (max-width: 576px){ .org .org-cols-3{ grid-template-columns:1fr; } } /* เส้นเชื่อมระหว่าง level */ .org .org-line{ height:28px; position:relative; margin:8px 0 24px 0; } .org .org-line::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:70%; max-width:880px; height:100%; background:linear-gradient(90deg, transparent 0, var(--line) 10%, var(--line) 90%, transparent 100%); mask:linear-gradient(#000,#000); opacity:.9; } /* Card node */ .org-card{ background:var(--card); border-radius:16px; padding:14px; min-width:220px; box-shadow:0 6px 24px rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.05); position:relative; overflow:hidden; } .org-card::after{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--brand); opacity:.85; } .org-role-ceo::after{ background:var(--role-ceo); } .org-role-head::after{ background:var(--role-head); } .org-role-lead::after{ background:var(--role-lead); } /* header */ .org-card__header{ display:flex; gap:12px; align-items:center; } .org-avatar{ width:96px; height:96px; border-radius:14px; object-fit:cover; flex:0 0 48px; border:1px solid rgba(255,255,255,.1); } .org-meta{ min-width:0; } .org-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .org-title{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* footer */ .org-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; } .org-card .btn.btn-xs{ padding:2px 8px; font-size:12px; line-height:1.2; border-radius:999px; } /* tags */ .org-tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:8px 0 0; margin:0; } .org-tags li{ font-size:12px; padding:2px 8px; border-radius:999px; background:#0e1729; color:#cfe1ff; border:1px solid rgba(255,255,255,.06); } /* Collapsed state */ .org-collapsed + .org-line + .org-level{ display:none; } /* ---------- THEME: LIGHT (เปิดด้วย หรือ JS toggle) ---------- */ .theme-light { --bg:#f6f8fb; --card:#ffffff; --ink:#0f172a; --muted:#667085; --line:#d0d7e2; --brand:#2563eb; --ok:#059669; --warn:#b45309; --info:#2563eb; --role-ceo:#7c3aed; --role-head:#2563eb; --role-lead:#059669; } .theme-light .bg-app { background:var(--bg); color:var(--ink); } .theme-light .card, .theme-light .org-card { box-shadow:0 6px 24px rgba(2,8,23,.06); border-color:#e6e9f1; } .theme-light .org-tags li { background:#f3f5f9; color:#0f172a; border-color:#e6e9f1; } .theme-light .text-brand { color:var(--brand); } /* ---------- COMPACT MODE ---------- */ .org--compact .org-card{ padding:10px; } .org--compact .org-avatar{ width:40px; height:40px; border-radius:10px; } .org--compact .org{ --gap:16px; } .org--compact .org .org-cols-3{ grid-template-columns:repeat(3,minmax(200px,1fr)); } @media (max-width: 991px){ .org--compact .org .org-cols-3{ grid-template-columns:repeat(2,minmax(200px,1fr)); } } @media (max-width: 576px){ .org--compact .org .org-cols-3{ grid-template-columns:1fr; } } /* ---------- SEARCH HIGHLIGHT / HIDE ---------- */ .org-hit { outline:2px solid var(--brand); outline-offset:2px; } .org-hidden { display:none !important; } /* ---------- ZOOM (ด้วย CSS variable) ---------- */ #org-root { transform-origin: top center; } .org-zoom-90 #org-root { transform: scale(0.90); } .org-zoom-95 #org-root { transform: scale(0.95); } .org-zoom-100 #org-root { transform: scale(1); } .org-zoom-110 #org-root { transform: scale(1.10); } .org-zoom-125 #org-root { transform: scale(1.25); } /* ---------- PRINT ---------- */ @media print { body { background:#fff !important; color:#000 !important; } .bg-app { background:#fff !important; color:#000 !important; } .card, .org-card { box-shadow:none !important; border:1px solid #ccc !important; } .org-line::before { background:linear-gradient(90deg, transparent 0, #999 10%, #999 90%, transparent 100%); } } /* spacing สำหรับแถวปุ่ม */ .btn-wrap .btn { margin-right: .5rem; margin-bottom: .5rem; } .btn-wrap .btn:last-child { margin-right: 0; } /* ====== Org-card buttons: theme-aware ====== */ /* โหมดมืด (ค่าเดิม ทำให้เส้น/ตัวอักษรอ่านง่ายบนพื้นมืด) */ .org-card .btn-outline-light{ color:#e2e8f0; /* slate-100 */ border-color:#94a3b8; /* slate-400 */ background:transparent; border-width:2px; border-radius:999px; padding:.35rem .9rem; } .org-card .btn-outline-light:hover, .org-card .btn-outline-light:focus{ background:#e2e8f0; color:#0f172a; /* slate-900 */ border-color:#e2e8f0; box-shadow:0 0 0 .2rem rgba(226,232,240,.25); } /* โหมดสว่าง – เปลี่ยนจาก "light" เป็นเส้นเข้ม/ตัวอักษรเข้มให้อ่านชัด */ .theme-light .org-card .btn-outline-light{ color:#334155; /* slate-700 */ border-color:#cbd5e1; /* slate-300 */ background:#ffffff; } .theme-light .org-card .btn-outline-light:hover, .theme-light .org-card .btn-outline-light:focus{ background:#e2e8f0; /* slate-200 */ color:#0f172a; /* slate-900 */ border-color:#e2e8f0; box-shadow:0 0 0 .2rem rgba(148,163,184,.25); } /* สถานะ disabled ให้ยังมองเห็นได้ทั้งสองธีม */ .org-card .btn-outline-light:disabled{ opacity:1; color:#cbd5e1; border-color:#e5e7eb; background:#f8fafc; cursor:not-allowed; } .theme-light .org-card .btn-outline-light:disabled{ color:#94a3b8; border-color:#e5e7eb; background:#f8fafc; } /* ให้ badge ดูชัดในทั้งสองธีม */ .theme-light .org-card .badge{ color:#0f172a; background:#e0f2fe; /* sky-100 */ border:1px solid #bae6fd; /* sky-200 */ } /* ========== 1) เส้นเชื่อมให้บางลงครึ่งหนึ่ง ========== */ /* ========== 2) Hover animation ให้การ์ดลอยขึ้นนิด ๆ ========== */ .org-card{ transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1), border-color .22s ease; will-change: transform; } .org-card:hover{ transform: translateY(-4px); /* ลอยขึ้นนิด ๆ */ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18); border-color: rgba(255,255,255,.15); } .theme-light .org-card:hover{ box-shadow: 0 12px 28px rgba(2,8,23,.10), 0 2px 10px rgba(2,8,23,.06); border-color: #d9e0ec; } /* เสริมความสดใสด้วยแสงไฮไลท์บาง ๆ เวลา hover */ .org-card::before{ content:""; position:absolute; inset:auto 10% 0 10%; height:6px; border-radius:999px; background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%); opacity:0; transition: opacity .22s ease; } .org-card:hover::before{ opacity:.35; } .theme-light .org-card:hover::before{ opacity:.25; } /* Avatar & ปุ่มให้ตอบสนองนิดหน่อย */ .org-avatar{ transition: transform .22s ease, box-shadow .22s ease; } .org-card:hover .org-avatar{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.25); } .org-card .btn{ transition: transform .15s ease; } .org-card .btn:active{ transform: translateY(1px); } /* โฟกัสด้วยคีย์บอร์ดให้เอฟเฟกต์เดียวกับ hover */ .org-card:focus-within{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18); outline: 2px solid color-mix(in oklab, var(--brand), white 30%); outline-offset: 2px; } .theme-light .org-card:focus-within{ box-shadow: 0 12px 28px rgba(2,8,23,.10), 0 2px 10px rgba(2,8,23,.06); outline-color: color-mix(in oklab, var(--brand), black 20%); } /* เคารพผู้ใช้ที่ปิด motion */ @media (prefers-reduced-motion: reduce){ .org-card, .org-avatar, .org-card::before { transition:none !important; } .org-card:hover, .org-card:focus-within { transform:none; } } .org-role-ceo { padding: 20px; /* เพิ่ม padding */ min-width: 260px; /* กว้างกว่าการ์ดปกติ */ } /* ===== CEO: ใหญ่ขึ้นอัตโนมัติเมื่อจอ ≥ Tablet ===== */ /* Mobile: คงเดิม (ไม่ใส่อะไรเป็นพิเศษ) */ /* Tablet ขึ้นไป */ @media (min-width: 768px){ /* ให้การ์ด CEO กว้างขึ้น และอยู่กลาง */ #org-root .org-level:first-child .org-card.org-role-ceo{ /* โตตามขนาดจอ แต่มีเพดานไม่ให้เว่อร์ */ width: clamp(320px, 34vw, 560px); margin-inline: auto; /* จัดกึ่งกลางในกริด */ } /* ขยาย avatar ทุกการ์ดเล็กน้อยให้สมดุล */ #org-root .org-card .org-avatar{ width: 86; height: 86px; border-radius: 14px; } /* CEO เด่นกว่าอีกนิด */ #org-root .org-level:first-child .org-role-ceo .org-avatar{ width: 128px; height: 128px; } } /* Desktop ใหญ่ขึ้นอีกหน่อย (จอ ≥ 1200px) */ @media (min-width: 1200px){ #org-root .org-level:first-child .org-card.org-role-ceo{ width: clamp(360px, 28vw, 640px); } } /* ===== Avatar overlay (Lightbox) ===== */ .org-avatar { cursor: zoom-in; } .org-lightbox{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.8); z-index: 1050; } .org-lightbox.show{ display: flex; } .org-lightbox__img{ max-width: min(90vw, 960px); max-height: 86vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); } .org-lightbox__close{ position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.35); color: #fff; font-weight: 700; line-height: 1; border-radius: 999px; padding: .5rem .8rem; cursor: pointer; } .org-lightbox__close:hover{ background: rgba(255,255,255,.25); } /* เคารพ reduced motion */ @media (prefers-reduced-motion:no-preference){ .org-lightbox.show{ animation: orgLbFade .16s ease-out; } @keyframes orgLbFade{ from{ opacity: 0; } to{ opacity: 1; } } } /* ---------- LIGHT THEME : Bright Silver Hi-Tech ---------- */ .theme-light { --bg:#f9fafc; /* พื้นหลังรวมขาวอมฟ้า */ --card:#f2f5f9; /* การ์ดเงินสว่าง */ --ink:#111827; /* ข้อความดำเข้ม */ --muted:#4b5563; /* ข้อความรอง */ --line:#d4dae3; /* เส้นคั่นสีเงินอ่อน */ --brand:#0ea5e9; /* accent ฟ้า hi-tech */ --role-ceo:#6366f1; /* violet accent */ --role-head:#0ea5e9; --role-lead:#10b981; } /* การ์ดเน้น metallic silver + glow */ .theme-light .org-card { background: linear-gradient(145deg,#ffffff,#eef2f7); border:1px solid #d1d5db; box-shadow: 0 4px 12px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.8); transition: all .25s ease; } /* hover = แวววาวขึ้น */ .theme-light .org-card:hover { background: linear-gradient(145deg,#ffffff,#e5e9f0); box-shadow: 0 8px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9); border-color: #cbd5e1; } /* ปุ่ม outline silver */ .theme-light .org-card .btn-outline-light { color:#1e293b; border-color:#cbd5e1; background:linear-gradient(180deg,#ffffff,#f1f5f9); } .theme-light .org-card .btn-outline-light:hover { background:linear-gradient(180deg,#f8fafc,#e2e8f0); border-color:#94a3b8; color:#0f172a; } /* badge modern hi-tech */ .theme-light .org-card .badge { border:1px solid #dbeafe; background:linear-gradient(180deg,#eff6ff,#dbeafe); color:#1e3a8a; } /* ---------- ROLE COLORS (สำหรับโครงสร้างใหม่) ---------- */ .org-role-ceo::after { background: var(--role-ceo, #6366f1); } .org-role-director::after { background: #0ea5e9; } /* ฟ้า hi-tech */ .org-role-mgr::after { background: #10b981; } /* เขียว modern */ .org-role-team::after { background: #f59e0b; } /* เหลือง soft */ /* ===== org-role-head: 2 ใบ/แถว แบบไม่ยืดเต็ม ===== */ .org-level.org-cols-2-head{ display:grid; grid-auto-flow: row; grid-template-columns: repeat(2, max-content); /* คอลัมน์กว้างเท่าการ์ด */ justify-content:center; /* จัดทั้งแถวให้อยู่กลาง */ justify-items:center; /* จัดแต่ละการ์ดให้อยู่กลางคอลัมน์ */ gap: var(--gap, 24px); } /* บังคับความกว้างการ์ด head ให้สไตล์ col-4 (ไม่เต็มแถว) */ .org-level.org-cols-2-head .org-card.org-role-head{ width: clamp(340px, 32vw, 520px); /* ปรับตามจอ แต่มีกรอบบน/ล่าง */ } /* Tablet ลงไป: เหลือ 1 ใบ/แถว เพื่ออ่านง่าย */ @media (max-width: 991px){ .org-level.org-cols-2-head{ grid-template-columns: 1fr; } .org-level.org-cols-2-head .org-card.org-role-head{ width: min(640px, 100%); /* ไม่เกินความกว้างคอนเทนเนอร์ */ } } /* ========== CEO card col-4 centered ========== */ .org .org-cols-1-center { display: grid; grid-template-columns: repeat(1, minmax(25%, 1fr)); /* ประมาณ col-4 */ justify-content: center; /* จัดการ์ดไว้ตรงกลาง */ } .org .org-cols-1-center .org-card.org-role-ceo { width: 100%; /* ให้การ์ดกินเต็ม col-4 ที่กำหนด */ max-width: 420px; /* กันไม่ให้กว้างเกินไป */ }