/* ============ Theme tokens ============ */
:root,[data-bs-theme="light"]{
  --zb-pink:#F06292; --zb-purple:#9C6ADE; --zb-sky:#29B6F6; --zb-blue:#4169E1; --zb-green:#43A047; --zb-orange:#FFA726;
  --zb-bg:#EEF1FB; --zb-surface:#FFFFFF; --zb-surface-2:#F4F6FD; --zb-border:#DCE1F2;
  --zb-text:#263238; --zb-muted:#6B7C93;
  --zb-head:#E8ECFA; --zb-head-text:#3F51B5; --zb-row-alt:#F8F9FE; --zb-row-hover:#EEF3FF;
  --zb-shadow:0 8px 24px rgba(65,105,225,.10),0 1px 3px rgba(38,50,56,.06);
  --zb-glow-a:rgba(240,98,146,.16); --zb-glow-b:rgba(65,105,225,.14); --zb-glow-c:rgba(41,182,246,.10);
  --zb-stripe:rgba(255,255,255,.55);
  --zb-ok-bg:rgba(67,160,71,.12); --zb-ok-fg:#2E7D32; --zb-bad-bg:rgba(229,57,53,.09); --zb-bad-fg:#C62828;
  --zb-zoom-bg:rgba(41,182,246,.09); --zb-unread:rgba(240,98,146,.09);
  --zb-radius:18px;
}
[data-bs-theme="dark"]{
  --zb-bg:#0F1220; --zb-surface:#1A1E31; --zb-surface-2:#222742; --zb-border:#2E3556;
  --zb-text:#E6E9F7; --zb-muted:#9AA6CC;
  --zb-head:#242B4D; --zb-head-text:#A9B8FF; --zb-row-alt:#1E2338; --zb-row-hover:#283055;
  --zb-shadow:0 10px 28px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
  --zb-glow-a:rgba(240,98,146,.14); --zb-glow-b:rgba(65,105,225,.18); --zb-glow-c:rgba(156,106,222,.14);
  --zb-stripe:rgba(255,255,255,.14);
  --zb-ok-bg:rgba(67,160,71,.18); --zb-ok-fg:#81C784; --zb-bad-bg:rgba(229,57,53,.18); --zb-bad-fg:#EF9A9A;
  --zb-zoom-bg:rgba(41,182,246,.12); --zb-unread:rgba(240,98,146,.14);
  color-scheme:dark;
}
:root,[data-bs-theme="light"],[data-bs-theme="dark"]{
  --bs-font-sans-serif:'Noto Sans Thai','Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-body-color:var(--zb-text); --bs-body-bg:var(--zb-surface);
  --bs-secondary-color:var(--zb-muted); --bs-tertiary-bg:var(--zb-surface-2); --bs-secondary-bg:var(--zb-surface-2);
  --bs-border-color:var(--zb-border); --bs-emphasis-color:var(--zb-text);
  --bs-primary:#4169E1; --bs-primary-rgb:65,105,225; --bs-link-color:#4169E1; --bs-link-hover-color:#2F52C4;
}
[data-bs-theme="dark"]{--bs-link-color:#8FA8FF;--bs-link-hover-color:#B3C3FF}

/* ============ Base ============ */
body{
  font-family:var(--bs-body-font-family);color:var(--zb-text);line-height:1.65;min-height:100vh;
  background:
    radial-gradient(900px 420px at 8% -8%,var(--zb-glow-a),transparent 62%),
    radial-gradient(800px 400px at 96% 0%,var(--zb-glow-b),transparent 60%),
    radial-gradient(700px 500px at 50% 110%,var(--zb-glow-c),transparent 60%),
    var(--zb-bg);
  background-attachment:fixed;
}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em}
.text-muted{color:var(--zb-muted)!important}
code{color:#D63384}[data-bs-theme="dark"] code{color:#FF9EC4}
.app-body{transition:background-color .25s}

/* ============ Navbar ============ */
.app-nav{background:color-mix(in srgb,var(--zb-surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 16px rgba(38,50,56,.08);border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--zb-pink),var(--zb-purple),var(--zb-sky),var(--zb-blue),var(--zb-green)) 1}
.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--zb-pink),var(--zb-purple));color:#fff;display:grid;place-items:center;font-size:1.25rem;box-shadow:0 6px 14px rgba(156,106,222,.35)}
.app-nav .navbar-brand,.app-nav .navbar-brand strong{color:var(--zb-text)}
.app-nav .nav-link{color:var(--zb-text);border-radius:12px;padding:.5rem .9rem;font-weight:500;transition:background .15s}
.app-nav .nav-link:hover{background:var(--zb-surface-2)}
.app-nav .nav-link.active{background:linear-gradient(135deg,rgba(240,98,146,.18),rgba(156,106,222,.18));color:#9C3FD0}
[data-bs-theme="dark"] .app-nav .nav-link.active{color:#E1C2FF}
.app-nav .navbar-toggler{color:var(--zb-text)}
.nav-bell,.theme-toggle{width:42px;height:42px;display:grid;place-items:center;padding:0}

/* ============ Components ============ */
.card{background:var(--zb-surface);color:var(--zb-text);border:1px solid var(--zb-border);border-radius:var(--zb-radius);box-shadow:var(--zb-shadow)}
.card-header{background:transparent;border-bottom:1px solid var(--zb-border);font-weight:600}
.btn{border-radius:12px;font-weight:500}
.btn-brand{color:#fff;border:0;background:linear-gradient(135deg,var(--zb-pink),var(--zb-purple));box-shadow:0 6px 16px rgba(156,106,222,.30);transition:filter .15s,transform .15s}
.btn-brand:hover,.btn-brand:focus{color:#fff;filter:brightness(1.07);transform:translateY(-1px)}
.btn-light{--bs-btn-color:var(--zb-text);--bs-btn-bg:var(--zb-surface-2);--bs-btn-border-color:var(--zb-border);--bs-btn-hover-color:var(--zb-text);--bs-btn-hover-bg:var(--zb-row-hover);--bs-btn-hover-border-color:var(--zb-border);--bs-btn-active-bg:var(--zb-row-hover);--bs-btn-active-color:var(--zb-text);--bs-btn-active-border-color:var(--zb-border);--bs-btn-disabled-bg:var(--zb-surface-2);--bs-btn-disabled-color:var(--zb-muted)}
.btn-dark{--bs-btn-color:var(--zb-surface);--bs-btn-bg:var(--zb-text);--bs-btn-border-color:var(--zb-text);--bs-btn-hover-color:var(--zb-surface);--bs-btn-hover-bg:var(--zb-text);--bs-btn-hover-border-color:var(--zb-text);--bs-btn-active-bg:var(--zb-text);--bs-btn-active-color:var(--zb-surface)}
.form-control,.form-select{border-radius:12px;border-color:var(--zb-border);background-color:var(--zb-surface);color:var(--zb-text);padding:.6rem .85rem}
.form-control::placeholder{color:var(--zb-muted);opacity:.7}
.form-control:focus,.form-select:focus{background-color:var(--zb-surface);color:var(--zb-text);border-color:var(--zb-purple);box-shadow:0 0 0 .2rem rgba(156,106,222,.22)}
.form-control:disabled,.form-control[readonly]{background-color:var(--zb-surface-2)}
.input-group-text{background:var(--zb-surface-2);border-color:var(--zb-border);color:var(--zb-muted)}
[data-bs-theme="dark"] input,[data-bs-theme="dark"] select,[data-bs-theme="dark"] textarea{color-scheme:dark}
.form-label{font-weight:500}
.form-check-input:checked{background-color:var(--zb-purple);border-color:var(--zb-purple)}
.modal-content{background:var(--zb-surface);color:var(--zb-text);border:1px solid var(--zb-border)!important;border-radius:var(--zb-radius)}
.dropdown-menu{background:var(--zb-surface);border:1px solid var(--zb-border)!important;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.20)!important}
.dropdown-item{border-radius:8px;color:var(--zb-text)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--zb-row-hover);color:var(--zb-text)}
.dropdown-divider{border-color:var(--zb-border)}
.list-group-item{background:transparent;color:var(--zb-text);border-color:var(--zb-border)}
.page-link{background:var(--zb-surface);border-color:var(--zb-border);color:var(--zb-text)}
.page-item.active .page-link{background:var(--zb-purple);border-color:var(--zb-purple);color:#fff}
.page-item.disabled .page-link{background:var(--zb-surface-2);color:var(--zb-muted)}
.section-title{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--zb-border)}
.section-title .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.page-title{display:flex;align-items:center;gap:.7rem;margin-bottom:1.25rem}
.page-title .ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:1.4rem;background:linear-gradient(135deg,var(--zb-pink),var(--zb-purple));box-shadow:0 8px 18px rgba(156,106,222,.35)}
.badge-status,.badge-dept{font-weight:600;padding:.45em .75em;border-radius:999px}
.stat-card{position:relative;overflow:hidden;padding:1.1rem 1.2rem;border-left:5px solid var(--zb-purple)}
.stat-card .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.5rem;box-shadow:0 8px 16px rgba(0,0,0,.16)}
.stat-card .num{font-size:1.9rem;font-weight:700;line-height:1.1}
.row > [class*="col"]:nth-child(1) > .stat-card{border-left-color:#4169E1}
.row > [class*="col"]:nth-child(2) > .stat-card{border-left-color:#FFA726}
.row > [class*="col"]:nth-child(3) > .stat-card{border-left-color:#43A047}
.row > [class*="col"]:nth-child(4) > .stat-card{border-left-color:#9C6ADE}
.row > [class*="col"]:nth-child(5) > .stat-card{border-left-color:#78909C}
.table-zb{--bs-table-bg:transparent;--bs-table-color:var(--zb-text);--bs-table-border-color:var(--zb-border)}
.table-zb thead th{background:var(--zb-head);color:var(--zb-head-text);border:0;font-weight:600;white-space:nowrap}
.table-zb thead th:first-child{border-radius:12px 0 0 12px}.table-zb thead th:last-child{border-radius:0 12px 12px 0}
.table-zb tbody td{vertical-align:middle;border-color:var(--zb-border)}
.table-zb tbody tr:nth-child(even){background:var(--zb-row-alt)}
.table-zb tbody tr:hover{background:var(--zb-row-hover)}
.table-zb a.sort{color:inherit;text-decoration:none}
.legend-dot{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:.35rem;vertical-align:-1px}
.zoom-box{border:1px dashed var(--zb-sky);background:var(--zb-zoom-bg);border-radius:14px;padding:1rem}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--zb-muted)}
.empty-state i{font-size:3rem;opacity:.5}
.avail-box{border-radius:14px;padding:.8rem 1rem;font-size:.95rem}
.avail-ok{background:var(--zb-ok-bg);color:var(--zb-ok-fg)}
.avail-bad{background:var(--zb-bad-bg);color:var(--zb-bad-fg)}
.avail-info{background:var(--zb-surface-2);color:var(--zb-muted)}
.app-footer{border-top:1px solid var(--zb-border);margin-top:2rem}
.notif-item{border-left:4px solid transparent}
.notif-item.unread{border-left-color:var(--zb-pink);background:var(--zb-unread)}
.alert{border-radius:14px}
:focus-visible{outline:3px solid rgba(65,105,225,.5);outline-offset:2px}

/* ============ FullCalendar ============ */
#calendar{
  --fc-border-color:var(--zb-border);--fc-page-bg-color:transparent;--fc-neutral-bg-color:var(--zb-surface-2);--fc-neutral-text-color:var(--zb-muted);
  --fc-today-bg-color:rgba(41,182,246,.12);--fc-list-event-hover-bg-color:var(--zb-row-hover);--fc-non-business-color:rgba(120,144,156,.08);
  --fc-button-bg-color:#4169E1;--fc-button-border-color:#4169E1;--fc-button-hover-bg-color:#3558C4;--fc-button-hover-border-color:#3558C4;
  --fc-button-active-bg-color:#9C6ADE;--fc-button-active-border-color:#9C6ADE;--fc-more-link-bg-color:var(--zb-surface-2);
  color:var(--zb-text);font-size:.92rem}
#calendar a{color:inherit;text-decoration:none}
#calendar .fc-theme-standard td,#calendar .fc-theme-standard th,#calendar .fc-theme-standard .fc-scrollgrid{border-color:var(--zb-border)}
#calendar .fc-col-header-cell{background:var(--zb-head);color:var(--zb-head-text)}
#calendar .fc-col-header-cell-cushion,#calendar .fc-daygrid-day-number{font-weight:500}
.fc .fc-toolbar-title{font-size:1.25rem;font-weight:700}
.fc .fc-button{border-radius:10px;text-transform:none;font-family:inherit}
.fc-event{cursor:pointer;border-radius:8px;padding:1px 3px;border-width:2px}
#calendar .fc-daygrid-event{padding:2px 4px;margin:1px 3px;white-space:nowrap}
.fc-event.ev-pending{border-style:dashed;background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--zb-stripe) 6px 9px)}
.fc-event.ev-off{opacity:.8;text-decoration:line-through}
.fc-event.ev-completed{opacity:.8}
.fc-list{border-color:var(--zb-border)}
.fc-list-day-cushion{background:var(--zb-head)!important}
.fc-list-event{cursor:pointer}
.fc-list-event td{border-color:var(--zb-border)}

/* ============ Login ============ */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.login-art{background:linear-gradient(145deg,#F06292 0%,#9C6ADE 55%,#4169E1 100%);color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
[data-bs-theme="dark"] .login-art{background:linear-gradient(145deg,#B03A67 0%,#6B43A8 55%,#2B47A5 100%)}
.login-art:before,.login-art:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.login-art:before{width:380px;height:380px;right:-120px;top:-120px}.login-art:after{width:260px;height:260px;left:-80px;bottom:-80px}
.login-logo{width:96px;height:96px;border-radius:26px;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--zb-purple);font-size:2.8rem;margin-bottom:1.5rem;box-shadow:0 12px 30px rgba(0,0,0,.2);overflow:hidden}
.login-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.login-chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.18);border-radius:999px;padding:.35rem .9rem;margin:.25rem .25rem 0 0;font-size:.9rem}
.login-form{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--zb-surface);position:relative}
.login-theme{position:absolute;top:14px;right:14px}
@media (max-width:991.98px){.login-wrap{grid-template-columns:1fr}.login-art{padding:2rem 1.5rem}.login-form{padding:3.5rem 1rem 3rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ SweetAlert2 ============ */
.swal2-popup{background:var(--zb-surface)!important;color:var(--zb-text)!important;border:1px solid var(--zb-border);border-radius:20px!important;font-family:var(--bs-body-font-family)!important}
.swal2-title,.swal2-html-container,.swal2-input-label{color:var(--zb-text)!important}
.swal2-input,.swal2-textarea,.swal2-select{background:var(--zb-surface)!important;color:var(--zb-text)!important;border-color:var(--zb-border)!important}
.swal2-timer-progress-bar{background:rgba(156,106,222,.5)!important}

.booking-info{display:grid;gap:.25rem;margin:.25rem 0 .5rem;font-size:.95rem}
.booking-info i{color:var(--zb-purple);margin-right:.25rem}

/* ============ Landing / login popup ============ */
.landing-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--zb-pink) 12%,var(--zb-surface)),color-mix(in srgb,var(--zb-blue) 12%,var(--zb-surface)));position:relative;overflow:hidden}
.landing-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--zb-glow-a),transparent 70%)}
.login-chip-lite{display:inline-flex;align-items:center;gap:.5rem;background:var(--zb-surface);border:1px solid var(--zb-border);border-radius:999px;padding:.45rem 1rem;font-size:.92rem;box-shadow:var(--zb-shadow)}
.login-chip-lite i{color:var(--zb-purple)}
.login-modal-head{position:relative;background:linear-gradient(145deg,#F06292 0%,#9C6ADE 55%,#4169E1 100%)}
[data-bs-theme="dark"] .login-modal-head{background:linear-gradient(145deg,#B03A67 0%,#6B43A8 55%,#2B47A5 100%)}

/* ============ โลโก้ ============ */
.brand-mark.has-logo{background:var(--zb-surface);border:1px solid var(--zb-border);padding:3px;box-shadow:none}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.logo-preview{width:120px;height:120px;border-radius:24px;border:1px dashed var(--zb-border);background:var(--zb-surface-2);display:grid;place-items:center;overflow:hidden;font-size:2.6rem;color:var(--zb-purple)}
.logo-preview img{width:100%;height:100%;object-fit:contain;padding:8px}

/* ============ Landing: hero + animations ============ */
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatY2{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(10px) rotate(1deg)}}
@keyframes blobMove{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.12)}66%{transform:translate(-30px,25px) scale(.94)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes speak{0%,100%{box-shadow:0 0 0 0 rgba(67,160,71,.7)}50%{box-shadow:0 0 0 7px rgba(67,160,71,0)}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popIn{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

.hero{position:relative;border-radius:28px;overflow:hidden;color:#fff;margin-top:.25rem;
  background:linear-gradient(120deg,#F06292,#9C6ADE,#4169E1,#29B6F6,#9C6ADE,#F06292);background-size:300% 300%;animation:gradShift 16s ease infinite;
  box-shadow:0 24px 60px rgba(98,64,190,.35)}
[data-bs-theme="dark"] .hero{background:linear-gradient(120deg,#8E2E58,#5B3A9A,#2B47A5,#1F7AA8,#5B3A9A,#8E2E58);background-size:300% 300%;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero .blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;animation:blobMove 14s ease-in-out infinite}
.hero .b1{width:340px;height:340px;right:-90px;top:-100px;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%)}
.hero .b2{width:280px;height:280px;left:-70px;bottom:-60px;background:radial-gradient(circle,rgba(41,182,246,.7),transparent 70%);animation-delay:-5s}
.hero .b3{width:220px;height:220px;left:42%;top:-60px;background:radial-gradient(circle,rgba(255,167,38,.55),transparent 70%);animation-delay:-9s}
.hero .grid-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.2px);background-size:26px 26px;mask-image:linear-gradient(120deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(120deg,transparent 30%,#000 100%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:3.2rem 3rem 5.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.4rem 1rem;font-size:.9rem;margin-bottom:1rem}
.hero-title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;line-height:1.2;margin-bottom:1rem;text-shadow:0 4px 24px rgba(0,0,0,.18)}
.grad-text{background:linear-gradient(90deg,#FFF59D,#FFFFFF,#B3E5FC,#FFF59D);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
.hero-sub{font-size:1.1rem;opacity:.95;max-width:560px;margin-bottom:1.5rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:2rem}
.hero .btn-light{--bs-btn-color:#9C3FD0;--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-bg:#fff;--bs-btn-hover-color:#9C3FD0;font-weight:700}
.hero .btn-outline-light{--bs-btn-hover-color:#9C3FD0}
.hero .btn{transition:transform .2s,box-shadow .2s}.hero .btn:hover{transform:translateY(-3px)}
.cta-pulse{animation:pulseRing 2.2s infinite}
.hero-stats{display:flex;flex-wrap:wrap;gap:1rem}
.hero-stats>div{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);border-radius:18px;padding:.7rem 1.1rem;min-width:130px;transition:transform .25s}
.hero-stats>div:hover{transform:translateY(-4px)}
.hero-stats b{display:block;font-size:1.9rem;line-height:1.1}.hero-stats span{font-size:.82rem;opacity:.9}
.hero-visual{position:relative;min-height:330px;display:grid;place-items:center}
.vc-window{width:min(100%,340px);background:rgba(20,24,48,.82);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:.8rem;box-shadow:0 24px 50px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.float-a{animation:floatY 6s ease-in-out infinite}
.vc-bar{display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem}.vc-bar span{width:10px;height:10px;border-radius:50%;background:#ff5f57}.vc-bar span:nth-child(2){background:#febc2e}.vc-bar span:nth-child(3){background:#28c840}
.vc-bar em{margin-left:auto;font-size:.78rem;font-style:normal;opacity:.7}
.vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.vc-tile{aspect-ratio:4/3;border-radius:12px;display:grid;place-items:center;font-size:2.2rem;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.vc-tile.speaking{animation:speak 1.6s infinite}
.vc-controls{display:flex;justify-content:center;gap:.7rem;margin-top:.7rem}
.vc-controls i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);font-size:.95rem}.vc-controls i.end{background:#e53935}
.chip-float{position:absolute;display:inline-flex;align-items:center;gap:.5rem;background:var(--zb-surface);color:var(--zb-text);border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.chip-float i{color:var(--zb-pink)}
.float-b{top:6%;right:-2%;animation:floatY2 5s ease-in-out infinite}
.float-c{bottom:8%;left:-2%;animation:floatY 7s ease-in-out infinite;animation-delay:-2s}.float-c i{color:var(--zb-green)}
.hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:60px}.hero-wave path{fill:var(--zb-bg)}
@media (max-width:991.98px){.hero-inner{grid-template-columns:1fr;padding:2.2rem 1.4rem 4.5rem}.hero-visual{min-height:280px}.float-b{right:2%}.float-c{left:2%}}

/* section heads + chips */
.section-anchor{scroll-margin-top:84px}
.section-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.sh-ico{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.4rem;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#9C6ADE));box-shadow:0 8px 18px color-mix(in srgb,var(--c) 40%,transparent)}
.dept-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .7rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 14%,var(--zb-surface));transition:transform .2s,box-shadow .2s}
.dept-chip i{color:var(--c)}.dept-chip:hover{transform:translateY(-2px);box-shadow:0 6px 14px color-mix(in srgb,var(--c) 30%,transparent)}

/* scroll reveal (เฉพาะเมื่อมี JS) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .reveal-right{opacity:0;transform:translateX(40px) scale(.96);transition:opacity .9s ease .2s,transform .9s cubic-bezier(.2,.7,.2,1) .2s}
.js .reveal.in,.js .reveal-right.in{opacity:1;transform:none}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.step{position:relative;text-align:center;padding-top:1.6rem}
.step:not(:last-child):after{content:"";position:absolute;top:2.35rem;left:calc(50% + 28px);width:calc(100% - 56px + 1rem);height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent));transform-origin:left;transform:scaleX(0);transition:transform .8s ease .45s}
.step.in:not(:last-child):after{transform:scaleX(1)}
.step-num{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}
.step-num span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 8px 16px color-mix(in srgb,var(--c) 45%,transparent);border:3px solid var(--zb-bg)}
.step.in .step-num span{animation:popIn .6s cubic-bezier(.2,.9,.3,1.3) .3s both}
.step-body{background:var(--zb-surface);border:1px solid var(--zb-border);border-radius:20px;padding:2rem 1rem 1.1rem;height:100%;box-shadow:var(--zb-shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.step-body:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 18px 36px color-mix(in srgb,var(--c) 28%,transparent)}
.step-ico{width:54px;height:54px;border-radius:16px;margin:0 auto .6rem;display:grid;place-items:center;font-size:1.5rem;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--zb-surface));transition:transform .35s}
.step-body:hover .step-ico{transform:rotate(-8deg) scale(1.12)}
@media (max-width:991.98px){.steps{grid-template-columns:1fr;gap:1.1rem}.step{padding-top:0;padding-left:3.2rem;text-align:left}.step-num{left:0;top:.6rem;transform:none}.step-body{padding:1rem 1rem 1rem 1.2rem}.step-ico{margin:0 0 .5rem}.step:not(:last-child):after{display:none}}

/* FAQ */
.faq .accordion-item{background:var(--zb-surface);border:1px solid var(--zb-border);border-radius:16px!important;margin-bottom:.6rem;overflow:hidden;box-shadow:var(--zb-shadow)}
.faq .accordion-button{background:transparent;color:var(--zb-text);font-weight:600;box-shadow:none}
.faq .accordion-button:not(.collapsed){background:color-mix(in srgb,var(--zb-purple) 10%,var(--zb-surface));color:var(--zb-text)}
.faq .accordion-body{color:var(--zb-text)}
[data-bs-theme="dark"] .accordion-button::after{filter:invert(1) grayscale(1) brightness(1.6)}

/* CTA band */
.cta-band{border-radius:26px;overflow:hidden;color:#fff;background:linear-gradient(120deg,#4169E1,#9C6ADE,#F06292,#4169E1);background-size:300% 300%;animation:gradShift 14s ease infinite;box-shadow:0 18px 44px rgba(98,64,190,.3)}
[data-bs-theme="dark"] .cta-band{background:linear-gradient(120deg,#2B47A5,#5B3A9A,#8E2E58,#2B47A5);background-size:300% 300%}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:2rem 2.2rem}
.cta-band .btn-light{--bs-btn-color:#9C3FD0;font-weight:700}

/* subtle motion on cards across site */
.card{transition:box-shadow .25s,transform .25s}
@media (prefers-reduced-motion:reduce){.js .reveal,.js .reveal-right{opacity:1!important;transform:none!important}.step:not(:last-child):after{transform:none!important}}

/* ============ Navbar (refined) ============ */
.app-nav{padding-top:.55rem;padding-bottom:.55rem}
.app-nav .navbar-nav{align-items:center}
.app-nav .nav-link{position:relative;display:flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.55rem .95rem;border-radius:999px;font-size:.95rem;transition:background .2s,color .2s,transform .2s}
.app-nav .nav-link i{font-size:1.05rem;color:var(--zb-purple);transition:transform .25s,color .2s}
.app-nav .nav-link:hover{background:var(--zb-surface-2)}
.app-nav .nav-link:hover i{transform:translateY(-1px) scale(1.12)}
.app-nav .nav-link.active{background:linear-gradient(135deg,rgba(240,98,146,.20),rgba(156,106,222,.22));color:#8E2FC5;font-weight:600;box-shadow:inset 0 0 0 1px rgba(156,106,222,.25)}
[data-bs-theme="dark"] .app-nav .nav-link.active{color:#EBD3FF;box-shadow:inset 0 0 0 1px rgba(200,160,255,.28)}
.app-nav .nav-link.active i{color:var(--zb-pink)}
.app-nav .dropdown-toggle::after{margin-left:.15rem;transition:transform .2s}
.app-nav .dropdown-toggle.show::after{transform:rotate(180deg)}
.nav-sep{width:1px;height:26px;background:var(--zb-border);margin:0 .5rem}
.nav-menu{min-width:230px;padding:.5rem;margin-top:.5rem!important}
.nav-menu .dropdown-item{display:flex;align-items:center;gap:.65rem;padding:.55rem .8rem;border-radius:10px;font-size:.95rem}
.nav-menu .dropdown-item i{width:1.3rem;text-align:center;color:var(--zb-purple)}
.nav-menu .dropdown-item.active{background:linear-gradient(135deg,rgba(240,98,146,.18),rgba(156,106,222,.2));color:var(--zb-text);font-weight:600}
.nav-right .btn.rounded-circle{border:1px solid var(--zb-border)}
.nav-right .theme-toggle:hover i{transform:rotate(25deg)}
.nav-right .theme-toggle i{transition:transform .3s}
.user-chip,.nav-right .rounded-pill{border:1px solid var(--zb-border)}
.user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.app-nav .navbar-brand{margin-right:1.2rem}
@media (max-width:1199.98px){
  .navbar-expand-xl .navbar-collapse{margin-top:.6rem;padding:.6rem;border:1px solid var(--zb-border);border-radius:18px;background:var(--zb-surface);box-shadow:var(--zb-shadow)}
  .navbar-expand-xl .navbar-nav .nav-link{border-radius:12px}
  .navbar-expand-xl .nav-menu{box-shadow:none!important;border:0!important;background:var(--zb-surface-2);margin-top:.25rem!important}
  .navbar-expand-xl .nav-right{border-top:1px solid var(--zb-border);padding-top:.7rem}
}
@media (max-width:991.98px){
  .navbar-expand-lg .navbar-collapse{margin-top:.6rem;padding:.6rem;border:1px solid var(--zb-border);border-radius:18px;background:var(--zb-surface);box-shadow:var(--zb-shadow)}
  .navbar-expand-lg .navbar-nav .nav-link{border-radius:12px}
  .navbar-expand-lg .nav-right{border-top:1px solid var(--zb-border);padding-top:.7rem}
}