:root{
  --ph-pink:#F472A8; --ph-pink-soft:#FFF0F5; --ph-orange:#FF914D; --ph-orange-soft:#FFF1E6;
  --ph-bg:#FFFAFC; --ph-text:#333333; --ph-card:#ffffff; --ph-border:rgba(244,114,168,.18);
  --ph-grad:linear-gradient(135deg,var(--ph-pink),var(--ph-orange));
  --ph-radius:20px; --ph-shadow:0 8px 30px rgba(244,114,168,.14);
}
[data-bs-theme=dark]{
  --ph-bg:#17121a; --ph-text:#f1e9ee; --ph-card:#241b28; --ph-pink-soft:#2c2030; --ph-orange-soft:#2e2320; --ph-border:rgba(244,114,168,.25);
  --ph-shadow:0 8px 30px rgba(0,0,0,.4);
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Prompt',sans-serif;background:var(--ph-bg);color:var(--ph-text);min-height:100vh}
a{color:var(--ph-pink)} a:hover{color:var(--ph-orange)}
.text-gradient{background:var(--ph-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-ph{background:var(--ph-grad);color:#fff!important;border:0;border-radius:999px;padding:.55rem 1.4rem;font-weight:500;box-shadow:0 6px 18px rgba(244,114,168,.35);transition:.25s}
.btn-ph:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,145,77,.4);filter:brightness(1.05)}
.btn-ph-outline{border:2px solid var(--ph-pink);color:var(--ph-pink);border-radius:999px;background:transparent;font-weight:500;padding:.5rem 1.3rem}
.btn-ph-outline:hover{background:var(--ph-pink);color:#fff}
.btn-theme-toggle{border:0;background:var(--ph-pink-soft);color:var(--ph-pink);border-radius:50%;width:36px;height:36px}
.form-control,.form-select{border-radius:12px;border-color:var(--ph-border);background-color:var(--ph-card);color:var(--ph-text)}
.form-control:focus,.form-select:focus{border-color:var(--ph-pink);box-shadow:0 0 0 .2rem rgba(244,114,168,.2)}
.input-group-text{background:var(--ph-pink-soft);border-color:var(--ph-border);color:var(--ph-pink)}
.card-ph,.glass-card{background:var(--ph-card);border:1px solid var(--ph-border);border-radius:var(--ph-radius);box-shadow:var(--ph-shadow)}
.glass-card{backdrop-filter:blur(14px);background:color-mix(in srgb,var(--ph-card) 88%,transparent)}
.card-hover{transition:.3s}.card-hover:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(255,145,77,.22)}

/* loader */
#phb-loader{position:fixed;inset:0;background:var(--ph-bg);z-index:3000;display:flex;align-items:center;justify-content:center;transition:opacity .4s,visibility .4s}
#phb-loader.hide{opacity:0;visibility:hidden}
.loader-ring{width:56px;height:56px;border-radius:50%;border:5px solid var(--ph-pink-soft);border-top-color:var(--ph-pink);border-right-color:var(--ph-orange);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* nav */
.phb-nav{background:color-mix(in srgb,var(--ph-card) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--ph-border)}
.phb-nav .nav-link{color:var(--ph-text);border-radius:999px;padding:.45rem .9rem!important;transition:.2s}
.phb-nav .nav-link:hover{background:var(--ph-pink-soft);color:var(--ph-pink)}
.brand-logo{height:42px;width:auto;max-width:120px;object-fit:contain;border-radius:10px}
.modal-logo{height:64px;max-width:180px;object-fit:contain}
.footer-logo{height:48px;max-width:150px;object-fit:contain}

/* hero */
.hero{position:relative;overflow:hidden;padding:5rem 0 4rem;background:radial-gradient(circle at 10% 10%,var(--ph-pink-soft),transparent 55%),radial-gradient(circle at 90% 80%,var(--ph-orange-soft),transparent 55%)}
.hero h1{font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:1.25}
.hero-art{position:relative;height:340px}
.hero-blob{position:absolute;border-radius:50%;filter:blur(2px);animation:float 6s ease-in-out infinite}
.hero-blob.b1{width:260px;height:260px;background:var(--ph-grad);top:20px;left:50%;transform:translateX(-50%);opacity:.9}
.hero-blob.b2{width:90px;height:90px;background:var(--ph-orange);top:10px;right:12%;animation-delay:-2s;opacity:.7}
.hero-blob.b3{width:60px;height:60px;background:var(--ph-pink);bottom:20px;left:12%;animation-delay:-4s;opacity:.7}
.hero-cam{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8rem;color:#fff;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-cam{animation-name:floatc}
@keyframes floatc{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
.hero-blob.b1{animation-name:floatb}
@keyframes floatb{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-14px)}}

/* sections */
.section{padding:4rem 0}
.section-title{font-weight:700;text-align:center;margin-bottom:.4rem}
.section-sub{text-align:center;color:#888;margin-bottom:2.5rem}
.stat-card{padding:1.5rem;text-align:center}
.stat-card .ico{width:56px;height:56px;border-radius:16px;background:var(--ph-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:.6rem}
.stat-card .num{font-size:2.2rem;font-weight:700}
.step-card{padding:1.6rem;text-align:center;position:relative;height:100%}
.step-card .no{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:var(--ph-grad);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.step-card i{font-size:2.2rem;color:var(--ph-pink)}
.service-card{padding:1.4rem;text-align:center;height:100%}
.service-card .ico{width:60px;height:60px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin-bottom:.6rem}

/* status */
.badge-status{display:inline-block;padding:.25rem .75rem;border-radius:999px;font-size:.8rem;font-weight:500;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);white-space:nowrap}
.table-ph thead th{background:var(--ph-pink-soft);color:var(--ph-text);border:0;font-weight:600;white-space:nowrap}
.table-ph{--bs-table-bg:transparent}
.table-ph tbody tr{transition:.15s}.table-ph tbody tr:hover{background:var(--ph-pink-soft)}

/* calendar */
.fc{--fc-button-bg-color:var(--ph-pink);--fc-button-border-color:var(--ph-pink);--fc-button-hover-bg-color:var(--ph-orange);--fc-button-hover-border-color:var(--ph-orange);--fc-button-active-bg-color:var(--ph-orange);--fc-today-bg-color:var(--ph-orange-soft);--fc-border-color:var(--ph-border);--fc-page-bg-color:transparent}
.fc .fc-event{cursor:pointer;border-radius:6px;padding:1px 3px}
.fc .fc-bg-event{opacity:.35}
.legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px}

/* admin */
.admin-wrap{display:flex;min-height:100vh}
.admin-side{width:250px;background:var(--ph-card);border-right:1px solid var(--ph-border);padding:1rem;position:sticky;top:0;height:100vh;overflow:auto;flex-shrink:0}
.admin-side .brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;font-weight:600}
.admin-side a.item{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:12px;color:var(--ph-text);text-decoration:none;margin-bottom:.2rem;transition:.2s}
.admin-side a.item:hover{background:var(--ph-pink-soft);color:var(--ph-pink)}
.admin-side a.item.active{background:var(--ph-grad);color:#fff}
.admin-main{flex:1;padding:1.5rem;min-width:0}
@media(max-width:991px){.admin-wrap{flex-direction:column}.admin-side{width:100%;height:auto;position:static;display:flex;flex-wrap:wrap;gap:.3rem}.admin-side .brand{width:100%}}
.kpi{padding:1.2rem;display:flex;gap:1rem;align-items:center}
.kpi .ico{width:52px;height:52px;border-radius:14px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--ph-grad)}
.kpi .n{font-size:1.8rem;font-weight:700;line-height:1}
.page-fade{animation:fadeUp .6s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(24px);transition:.7s}.reveal.show{opacity:1;transform:none}
.footer{background:var(--ph-grad);color:#fff;padding:2.5rem 0 1rem;margin-top:3rem}
.footer a{color:#fff}
.logo-preview{max-height:90px;max-width:100%;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 50%/16px 16px;border-radius:12px;padding:8px}
.auth-tabs .nav-link{border-radius:999px;color:var(--ph-text)}
.auth-tabs .nav-link.active{background:var(--ph-grad)}
@media print{.phb-nav,.footer,.no-print,.admin-side{display:none!important}body{background:#fff}.admin-main{padding:0}}

/* มือถือ: กันเนื้อหาล้นจอ */
.hero .badge{white-space:normal;text-align:left;line-height:1.4}
.fc .fc-toolbar{flex-wrap:wrap;gap:.5rem;justify-content:center}
.fc .fc-toolbar-title{font-size:1.15rem}
@media(max-width:575px){.fc .fc-button{padding:.3rem .5rem;font-size:.8rem}.hero{padding:3rem 0 2rem}.hero-art{height:240px}.hero-blob.b1{width:190px;height:190px}.hero-cam{font-size:5.5rem}}

/* ===== แถบเมนู (จัดใหม่) ===== */
.phb-nav{padding:.55rem 0}
.phb-nav .brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.phb-nav .brand-text strong{font-size:1.05rem;white-space:nowrap}
.phb-nav .brand-text small{color:#8a7f86;font-size:.72rem;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phb-nav .nav-links .nav-link{white-space:nowrap;font-size:.95rem}
.phb-nav .nav-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.btn-sm-pill{padding:.42rem 1.05rem!important;font-size:.9rem;white-space:nowrap}
.btn-theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.user-pill{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ph-border);background:var(--ph-card);color:var(--ph-text);border-radius:999px;padding:.22rem .8rem .22rem .25rem;max-width:210px;transition:.2s}
.user-pill:hover{border-color:var(--ph-pink);background:var(--ph-pink-soft)}
.user-pill .avatar{width:32px;height:32px;border-radius:50%;background:var(--ph-grad);color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.user-pill .uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;min-width:0}
.user-pill.dropdown-toggle::after{margin-left:.15rem;flex-shrink:0}
.user-menu{border-radius:16px;border:1px solid var(--ph-border);min-width:250px;padding:.5rem}
.user-menu .dropdown-item{border-radius:10px;padding:.5rem .75rem}
.user-menu .dropdown-item i{width:1.3rem;display:inline-block;color:var(--ph-pink)}
.user-menu .dropdown-item.text-danger i{color:inherit}
.user-menu .dropdown-item:hover{background:var(--ph-pink-soft)}
.user-menu .dropdown-header{white-space:normal}
@media(max-width:991.98px){
  .phb-nav .navbar-collapse{padding:.8rem 0 .4rem}
  .phb-nav .nav-links{gap:.15rem;margin-bottom:.7rem}
  .phb-nav .nav-actions{flex-wrap:wrap}
  .phb-nav .nav-actions .dropdown{flex:1 1 100%;order:3}
  .user-pill{max-width:none;width:100%}
  .user-menu{width:100%}
}
@media(min-width:992px) and (max-width:1199.98px){
  .phb-nav .nav-links .nav-link{padding:.45rem .6rem!important;font-size:.9rem}
  .phb-nav .brand-text strong{font-size:.98rem}
  .user-pill{max-width:150px}
}

/* ===== กล้องหน้า Hero (SVG) ===== */
.hero .hero-art{position:relative;height:auto!important;max-width:540px;margin-inline:auto}
.hero-svg{width:100%;height:auto;display:block;overflow:visible}
.hero-svg .svg-box{transform-box:fill-box;transform-origin:center}
.hc-cam{animation:hcPop .9s cubic-bezier(.2,.9,.3,1.2) both,hcBob 5.5s ease-in-out .9s infinite}
@keyframes hcPop{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@keyframes hcBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-.6deg)}}
.hc-glow{transform-box:fill-box;transform-origin:center;animation:hcBreath 6s ease-in-out infinite}
@keyframes hcBreath{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
.hc-float{animation:hcFloat 6.5s ease-in-out infinite}
.hc-float.f2{animation-duration:7.5s;animation-delay:-2.5s}
@keyframes hcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hc-spin{animation:hcSpin 22s linear infinite}
.hc-spin-rev{animation:hcSpin 30s linear infinite reverse}
@keyframes hcSpin{to{transform:rotate(360deg)}}
.hc-pulse{animation:hcPulse 2.8s ease-out infinite}
@keyframes hcPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.hc-blink{animation:hcBlink 1.6s steps(1) infinite}
@keyframes hcBlink{50%{opacity:.15}}
.hc-shutter{animation:hcPress 4.5s ease-in-out infinite}
@keyframes hcPress{0%,6%,16%,100%{transform:translateY(0)}10%{transform:translateY(4px)}}
.hc-burst{opacity:0;animation:hcBurst 4.5s ease-out infinite}
@keyframes hcBurst{0%,8%{opacity:0;transform:scale(.4)}11%{opacity:1;transform:scale(1.6)}30%{opacity:0;transform:scale(5)}100%{opacity:0;transform:scale(5)}}
.hc-flash-glow{animation:hcFlashGlow 4.5s ease-out infinite}
@keyframes hcFlashGlow{0%,8%{opacity:.25}11%{opacity:1}35%,100%{opacity:.25}}
.hc-tw{animation:hcTwinkle 3s ease-in-out infinite}
.hc-tw.t2{animation-delay:-1s}.hc-tw.t3{animation-delay:-2s}.hc-tw.t4{animation-delay:-.5s;animation-duration:3.6s}
@keyframes hcTwinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.hero-svg *{animation:none!important}.hc-burst{opacity:0}}
@media(max-width:575px){.hero .hero-art{max-width:360px}}

/* ===== ตัวเลขแจ้งเตือนคำขอรออนุมัติ (หลังบ้าน) ===== */
.admin-side a.item{position:relative}
.count-badge{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#EF4444;color:#fff;font-size:.75rem;font-weight:600;line-height:22px;text-align:center;box-shadow:0 0 0 3px color-mix(in srgb,#EF4444 25%,transparent)}
.admin-side a.item.active .count-badge{background:#fff;color:#EF4444;box-shadow:none}
.count-badge.pulse{animation:badgePulse 1.2s ease-out 3}
@keyframes badgePulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{transform:scale(1.25);box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{transform:scale(1)}}
.count-badge-inline{margin-left:.4rem;vertical-align:middle;font-size:.7rem;min-width:18px;height:18px;line-height:18px;padding:0 5px}

/* ===== ปฏิทิน (สีตามประเภทกิจกรรม) ===== */
.fc{--fc-neutral-bg-color:var(--ph-orange-soft);--fc-list-event-hover-bg-color:var(--ph-orange-soft);font-size:.92rem}
.fc .fc-toolbar-title{font-weight:700;background:linear-gradient(90deg,var(--ph-pink),var(--ph-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.fc .fc-button{border-radius:999px;font-weight:600;box-shadow:none!important;text-transform:none}
.fc .fc-button-group>.fc-button{border-radius:0}.fc .fc-button-group>.fc-button:first-child{border-radius:999px 0 0 999px}.fc .fc-button-group>.fc-button:last-child{border-radius:0 999px 999px 0}
.fc .fc-scrollgrid{border-radius:14px;overflow:hidden;border-color:var(--ph-border)}
.fc .fc-col-header-cell{padding:.55rem 0;background:var(--ph-orange-soft);font-weight:700}
.fc .fc-col-header-cell-cushion{text-decoration:none;color:inherit}
.fc .fc-daygrid-day{transition:background .15s}.fc .fc-daygrid-day:hover{background:rgba(255,145,77,.07);cursor:pointer}
.fc .fc-daygrid-day-number{text-decoration:none;color:inherit;padding:.35rem .5rem;font-weight:600}
.fc .fc-day-sun .fc-daygrid-day-number,.fc .fc-day-sun .fc-col-header-cell-cushion{color:#ef4444}
.fc .fc-day-today{background:var(--ph-orange-soft)!important}
.fc .fc-day-today .fc-daygrid-day-number{background:linear-gradient(135deg,var(--ph-pink),var(--ph-orange));color:#fff!important;border-radius:999px;min-width:1.9rem;text-align:center;margin:.25rem;padding:.15rem .35rem}
.fc .fc-daygrid-event.fc-event,.fc .fc-timegrid-event.fc-event{border:0;border-left:4px solid rgba(0,0,0,.28);border-radius:7px;padding:1px 4px;margin:1px 3px;box-shadow:0 1px 3px rgba(0,0,0,.12);color:#fff;transition:transform .12s,box-shadow .12s}
.fc .fc-daygrid-event.fc-event:hover,.fc .fc-timegrid-event.fc-event:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.fc .fc-daygrid-event.st-pending,.fc .fc-timegrid-event.st-pending{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px)}
.fc .fc-daygrid-event.st-completed,.fc .fc-timegrid-event.st-completed{opacity:.62}
.fc .fc-daygrid-event .fc-event-main,.fc .fc-timegrid-event .fc-event-main{color:#fff}
.phev{color:#fff;display:flex;align-items:center;gap:.3rem;overflow:hidden;white-space:nowrap;font-size:.8rem;line-height:1.5;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.phev-ic{font-size:.75rem;flex:none}.phev-t{font-weight:700;flex:none}.phev-n{overflow:hidden;text-overflow:ellipsis}
.fc .fc-daygrid-more-link{font-weight:700;color:var(--ph-orange)}
.fc .fc-popover{border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.fc .fc-list{border-radius:14px;overflow:hidden;border-color:var(--ph-border)}
.fc .fc-list-day-cushion{background:var(--ph-orange-soft)!important}
.fc .fc-list-event td{padding:.6rem .75rem}
.fc .fc-list-event .phev{color:inherit;text-shadow:none;white-space:normal;font-size:.9rem}
.fc .fc-list-event .phev-ic{color:var(--ph-orange)}
.fc .fc-list-event .fc-list-event-dot{border-width:6px}
.fc .fc-timegrid-event.fc-event{margin:0}
.cal-legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center;font-size:.82rem;margin-bottom:1rem;padding:.6rem .8rem;border-radius:12px;background:var(--ph-orange-soft)}
.cal-legend .lg-item{display:inline-flex;align-items:center;white-space:nowrap}
.cal-legend .lg-item i{margin-right:4px;color:var(--ph-orange)}
.cal-legend .lg-sep{width:1px;height:16px;background:var(--ph-border)}
[data-bs-theme=dark] .fc .fc-col-header-cell,[data-bs-theme=dark] .fc .fc-list-day-cushion{background:rgba(255,255,255,.06)!important}
@media(max-width:767px){
 .fc .fc-toolbar{gap:.4rem}.fc .fc-toolbar-title{font-size:1.05rem}
 .fc .fc-button{padding:.3rem .65rem;font-size:.8rem}
 .fc .fc-col-header-cell{font-size:.78rem}
 .phev{font-size:.7rem}.phev-t{display:none}
 .fc .fc-daygrid-day-number{padding:.2rem .3rem;font-size:.8rem}
 .cal-legend{font-size:.76rem;gap:.3rem .6rem}.cal-legend .lg-sep{display:none}
}