/* =====================================================================
   CT SMART SCHOOL — Portal styles
   1) ตัวแปรและคอมโพเนนต์ที่ใช้ร่วมกัน (การ์ด, สถิติ, เมนูแอป)
   2) เว็บไซต์สาธารณะ (แถบบน, เมนู, Hero, หน้าแรก, ส่วนท้าย)
   3) ระบบหลังบ้าน (แบนเนอร์, เมนูด้านข้าง, แถบเครื่องมือ, Dashboard)
   ใช้ตัวแปรสีจาก app.css (--ctss-*) จึงรองรับโหมดมืดอัตโนมัติ
   ===================================================================== */

:root{
  --pt-ink:#1E1B4B;                 /* ครามเข้ม: แถบบน/แบนเนอร์/เมนูข้าง/ส่วนท้าย */
  --pt-ink-2:#2E1F6B;
  --pt-ink-3:#3B2A8C;
  --pt-gold:#F5B841;                /* สีทองสำหรับจุดเน้น */
  --pt-gold-dark:#B7791F;
  --pt-side-text:#CFCBF2;
  --pt-side-muted:#8F89C9;
  --pt-gap:1.15rem;
  --pt-panel-radius:18px;
  --pt-tone-violet:#7C3AED;
  --pt-tone-blue:#2563EB;
  --pt-tone-cyan:#0891B2;
  --pt-tone-amber:#D97706;
  --pt-tone-green:#059669;
  --pt-tone-red:#DC2626;
  --pt-tint:9%;                     /* ความเข้มของพื้นสีอ่อนในการ์ด */
}
[data-theme="dark"]{
  --pt-ink:#0F0D24;
  --pt-ink-2:#17133A;
  --pt-ink-3:#221B57;
  --pt-tone-violet:#A78BFA;
  --pt-tone-blue:#60A5FA;
  --pt-tone-cyan:#22D3EE;
  --pt-tone-amber:#FBBF24;
  --pt-tone-green:#34D399;
  --pt-tone-red:#F87171;
  --pt-tint:16%;
}

/* =====================================================================
   1) คอมโพเนนต์ที่ใช้ร่วมกัน
   ===================================================================== */
.pt-wrap{ width:100%; max-width:1280px; margin-left:auto; margin-right:auto; padding-left:1.25rem; padding-right:1.25rem; }

.pt-panel{
  background:var(--ctss-surface); border:1px solid var(--ctss-border);
  border-radius:var(--pt-panel-radius); box-shadow:var(--ctss-shadow); padding:1.25rem 1.35rem 1.35rem;
  min-width:0;
}
.pt-panel-flex{ display:flex; flex-direction:column; }
.pt-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.pt-panel-head h2, .adm-h2{ font-weight:700; font-size:1.15rem; margin:0; color:var(--ctss-text); display:flex; align-items:center; gap:.6rem; }
.pt-panel-head h2 i, .adm-h2 i{ color:var(--ctss-primary); font-size:1rem; }
.pt-panel-head p{ margin:.1rem 0 0; font-size:.85rem; color:var(--ctss-text-muted); }
.pt-panel-foot{ margin-top:auto; padding-top:1rem; }
.pt-eyebrow{ display:flex; align-items:center; gap:.45rem; margin-bottom:.25rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; color:var(--pt-gold-dark); }
[data-theme="dark"] .pt-eyebrow{ color:var(--pt-gold); }

/* โทนสีของการ์ด */
.tone-violet{ --tone:var(--pt-tone-violet); }
.tone-blue{   --tone:var(--pt-tone-blue); }
.tone-cyan{   --tone:var(--pt-tone-cyan); }
.tone-amber{  --tone:var(--pt-tone-amber); }
.tone-green{  --tone:var(--pt-tone-green); }
.tone-red{    --tone:var(--pt-tone-red); }

/* เมนูแอป/ระบบงาน */
.pt-apps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:.85rem; }
.pt-app{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.2rem;
  padding:1.15rem .75rem 1rem; border-radius:16px; color:var(--ctss-text);
  background:var(--ctss-surface); border:1px solid var(--ctss-border);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.pt-app:hover{ transform:translateY(-4px); box-shadow:var(--ctss-shadow-lg); border-color:var(--tone); color:var(--ctss-text); }
.pt-app:focus-visible{ outline:2px solid var(--tone); outline-offset:2px; }
.pt-app-icon{
  width:54px; height:54px; border-radius:15px; margin-bottom:.55rem; font-size:1.35rem; color:var(--tone);
  background:color-mix(in srgb, var(--tone) 14%, var(--ctss-surface));
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background-color .2s ease, color .2s ease;
}
a.pt-app:hover .pt-app-icon{ transform:scale(1.08) rotate(-5deg); background:var(--tone); color:#fff; }
[data-theme="dark"] a.pt-app:hover .pt-app-icon{ color:#12131E; }
.pt-app-title{ font-weight:600; font-size:.95rem; line-height:1.35; }
.pt-app-desc{ font-size:.76rem; line-height:1.4; color:var(--ctss-text-muted); }
.pt-app-lock{
  position:absolute; top:.55rem; right:.55rem; width:24px; height:24px; border-radius:50%;
  background:var(--ctss-surface-alt); border:1px solid var(--ctss-border); color:var(--ctss-text-muted);
  font-size:.62rem; display:flex; align-items:center; justify-content:center;
}

/* การ์ดสถิติ */
.pt-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.85rem; }
.pt-kpi{
  position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:.85rem;
  padding:1.1rem 1.15rem 1.2rem; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--tone) 22%, var(--ctss-border));
  background:linear-gradient(135deg, var(--ctss-surface) 30%, color-mix(in srgb, var(--tone) var(--pt-tint), var(--ctss-surface)) 100%);
  box-shadow:var(--ctss-shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.pt-kpi:hover{ transform:translateY(-3px); box-shadow:var(--ctss-shadow-lg); }
.pt-kpi-icon{
  width:46px; height:46px; flex-shrink:0; border-radius:14px; font-size:1.15rem; color:var(--tone);
  background:color-mix(in srgb, var(--tone) 15%, var(--ctss-surface));
  display:flex; align-items:center; justify-content:center;
}
.pt-kpi-body{ min-width:0; }
.pt-kpi-label{ font-weight:600; font-size:.9rem; line-height:1.35; color:var(--ctss-text); }
.pt-kpi-value{ margin-top:.25rem; font-weight:700; font-size:2rem; line-height:1.1; color:var(--tone); font-variant-numeric:tabular-nums; }
.pt-kpi-value small{ font-weight:500; font-size:.85rem; margin-left:.4rem; color:var(--ctss-text-muted); }
.pt-kpi-bars{ position:absolute; right:.9rem; bottom:.9rem; display:flex; align-items:flex-end; gap:3px; height:18px; }
.pt-kpi-bars i{ display:block; width:4px; border-radius:2px; background:var(--tone); opacity:.6; }
.pt-kpi-bars i:nth-child(1){ height:35%; } .pt-kpi-bars i:nth-child(2){ height:55%; }
.pt-kpi-bars i:nth-child(3){ height:78%; } .pt-kpi-bars i:nth-child(4){ height:100%; }

/* =====================================================================
   2) เว็บไซต์สาธารณะ
   ===================================================================== */

/* ---------- แถบข้อมูลด้านบน ---------- */
.pt-utility{ background:var(--pt-ink); color:#DAD7F7; font-size:.8rem; }
.pt-utility-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; }
.pt-utility-left{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.pt-utility-left img{ width:22px; height:22px; object-fit:contain; background:#fff; border-radius:50%; padding:1px; flex-shrink:0; }
.pt-utility-left span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-utility-right{ display:flex; align-items:center; gap:1.1rem; flex-shrink:0; }
.pt-utility-link{ align-items:center; gap:.4rem; color:#DAD7F7; white-space:nowrap; }
a.pt-utility-link:hover{ color:#fff; }
.pt-utility-link i{ color:var(--pt-gold); font-size:.75rem; }
.pt-utility-font{ display:flex; align-items:center; gap:.1rem; }
.pt-utility-font button, .pt-utility-theme{
  background:transparent; border:0; color:#fff; font-size:.8rem; font-weight:500; line-height:1;
  min-width:28px; height:28px; border-radius:8px; padding:0 .3rem;
}
.pt-utility-font button:hover, .pt-utility-theme:hover{ background:rgba(255,255,255,.14); }
.pt-utility-font button:focus-visible, .pt-utility-theme:focus-visible{ outline:2px solid var(--pt-gold); outline-offset:1px; }

/* ---------- ส่วนหัว + เมนูหลัก ---------- */
.pt-header{ border-bottom:1px solid var(--ctss-border); box-shadow:0 4px 18px rgba(31,35,51,.06); }
.pt-header .navbar{ padding:.65rem 0; }
.pt-header-inner{ display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem; }
.pt-header .navbar-brand{ margin:0; gap:.75rem; min-width:0; }
.pt-header .navbar-brand img{ width:54px; height:54px; }
.pt-header .navbar-brand .name{ font-size:1.12rem; font-weight:700; white-space:normal; }
.pt-header .navbar-brand .name small{ font-size:.78rem; font-weight:500; letter-spacing:.01em; }
.pt-header .navbar-nav{ gap:.15rem; }
.pt-header .nav-link{ font-weight:500; font-size:.95rem; padding:.5rem .85rem !important; border-radius:10px; white-space:nowrap; transition:background-color .15s ease, color .15s ease; }
.pt-header .nav-link:hover{ background:color-mix(in srgb, var(--ctss-primary) 8%, transparent); color:var(--ctss-primary); }
.pt-header .nav-link.active{ background:color-mix(in srgb, var(--pt-gold) 26%, var(--ctss-surface)); color:var(--ctss-text); font-weight:600; }
.pt-toggler{ width:42px; height:42px; border:1px solid var(--ctss-border); border-radius:12px; color:var(--ctss-text); background:var(--ctss-surface-alt); display:none; align-items:center; justify-content:center; padding:0; }
.pt-toggler:focus{ box-shadow:0 0 0 .2rem color-mix(in srgb, var(--ctss-primary) 25%, transparent); }
.pt-nav-auth{ margin-left:.75rem; }
.pt-login{
  display:inline-flex; align-items:center; gap:.65rem; padding:.45rem 1rem .45rem .5rem; border-radius:12px;
  background:var(--pt-ink); color:#fff; font-weight:600; font-size:.92rem; line-height:1.2; white-space:nowrap;
  box-shadow:0 6px 16px rgba(30,27,75,.25); transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
[data-theme="dark"] .pt-login{ background:var(--pt-ink-3); border:1px solid rgba(255,255,255,.16); }
.pt-login:hover{ color:#fff; background:var(--pt-ink-3); transform:translateY(-2px); box-shadow:0 10px 22px rgba(30,27,75,.3); }
.pt-login small{ display:block; font-weight:400; font-size:.72rem; opacity:.8; }
.pt-login-icon{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.14); color:var(--pt-gold); display:flex; align-items:center; justify-content:center; }
.pt-user{ color:var(--ctss-text) !important; }

/* ---------- Hero ---------- */
.pt-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(110deg, var(--pt-ink) 0%, var(--pt-ink-3) 55%, var(--ctss-secondary) 100%);
}
.pt-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pt-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(22,19,60,.93) 0%, rgba(22,19,60,.72) 34%, rgba(22,19,60,.18) 68%, rgba(22,19,60,.05) 100%),
    rgba(22,19,60,var(--pt-hero-scrim, .3));
}
.pt-hero.no-photo::before{ background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.14), transparent 45%); }
.pt-hero-inner{ position:relative; z-index:2; padding-top:4.25rem; padding-bottom:6.5rem; }
.pt-hero-eyebrow{ display:flex; align-items:center; gap:.8rem; font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--pt-gold); margin-bottom:.9rem; }
.pt-hero-eyebrow span{ width:42px; height:2px; background:var(--pt-gold); flex-shrink:0; }
.pt-hero h1{ font-weight:700; font-size:2.6rem; line-height:1.3; margin:0 0 .6rem; max-width:17em; text-shadow:0 2px 14px rgba(0,0,0,.35); animation:fxFadeUp .8s ease both; }
.pt-hero-lead{ font-size:1.1rem; line-height:1.7; max-width:32em; margin:0 0 1.75rem; opacity:.95; animation:fxFadeUp .8s .12s ease both; }
.pt-hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; animation:fxFadeUp .8s .24s ease both; }
.pt-hero-btn{
  display:inline-flex; align-items:center; gap:.8rem; padding:.6rem 1.1rem .6rem .65rem; border-radius:14px;
  font-weight:600; font-size:.98rem; line-height:1.25; transition:transform .2s ease, box-shadow .2s ease;
}
.pt-hero-btn small{ display:block; font-weight:400; font-size:.74rem; opacity:.85; }
.pt-hero-btn .ic{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.pt-hero-btn > i{ font-size:.8rem; margin-left:.35rem; transition:transform .2s ease; }
.pt-hero-btn:hover{ transform:translateY(-3px); }
.pt-hero-btn:hover > i{ transform:translateX(4px); }
.pt-hero-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.pt-hero-btn.gold{ background:linear-gradient(135deg, #FFD470, var(--pt-gold)); color:#2A2052; box-shadow:0 10px 24px rgba(245,184,65,.35); }
.pt-hero-btn.gold:hover{ color:#2A2052; box-shadow:0 14px 30px rgba(245,184,65,.45); }
.pt-hero-btn.gold .ic{ background:rgba(42,32,82,.14); }
.pt-hero-btn.blue{ background:linear-gradient(135deg, #2563EB, #7C3AED); color:#fff; border:1px solid rgba(255,255,255,.28); box-shadow:0 10px 24px rgba(37,99,235,.35); }
.pt-hero-btn.blue:hover{ color:#fff; }
.pt-hero-btn.blue .ic{ background:rgba(255,255,255,.18); }

/* ---------- เนื้อหาหน้าแรก ---------- */
.pt-page{ display:flex; flex-direction:column; gap:var(--pt-gap); }
.pt-stats{ position:relative; z-index:3; margin-top:-3.1rem; }
.pt-stats .pt-kpi{ box-shadow:0 14px 34px rgba(31,35,51,.12); background:linear-gradient(135deg, var(--ctss-surface) 45%, color-mix(in srgb, var(--tone) var(--pt-tint), var(--ctss-surface)) 100%); }

.pt-grid-2{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--pt-gap); align-items:stretch; }

.news-featured-grid{ display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:1.1rem; align-items:stretch; }
.news-featured-grid.single{ grid-template-columns:1fr; }
.news-featured{ position:relative; border-radius:var(--ctss-radius); overflow:hidden; display:block; min-height:340px; }
.news-featured img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.news-featured-badge{ position:absolute; top:14px; left:14px; z-index:1; background:var(--ctss-primary); color:#fff; font-size:.75rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; }
.news-featured-overlay{ position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1.25rem 1.1rem; background:linear-gradient(to top, rgba(0,0,0,.88) 10%, rgba(0,0,0,0) 100%); color:#fff; }
.news-featured-overlay h3{ font-weight:700; font-size:1.15rem; margin-bottom:.35rem; line-height:1.4; }
.news-featured-overlay .date{ font-size:.82rem; opacity:.9; }
.news-list{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.news-list-item{ display:flex; gap:.8rem; align-items:center; padding:.5rem; border-radius:14px; min-width:0; }
.news-list-item:hover{ background:color-mix(in srgb, var(--ctss-primary) 8%, transparent); }
.news-list-item img{ width:76px; height:62px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.news-list-item-body{ min-width:0; }
.news-list-item-body h6{ font-weight:600; font-size:.9rem; color:var(--ctss-text); margin:0 0 .25rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-list-item-body .date{ font-size:.76rem; color:var(--ctss-text-muted); }

.pt-events{ display:flex; flex-direction:column; gap:.6rem; }
.pt-event{ display:flex; align-items:center; gap:.85rem; padding:.6rem; border-radius:14px; background:var(--ctss-surface-alt); border:1px solid var(--ctss-border); }
.pt-event-date{ width:56px; flex-shrink:0; border-radius:12px; padding:.4rem .2rem; text-align:center; color:#fff; line-height:1.2; }
.pt-event-date b{ display:block; font-size:1.25rem; font-weight:700; }
.pt-event-date span{ font-size:.7rem; white-space:nowrap; }
.pt-event-body{ min-width:0; }
.pt-event-title{ font-weight:600; font-size:.93rem; line-height:1.4; color:var(--ctss-text); }
.pt-event-when{ font-size:.78rem; color:var(--ctss-text-muted); }

.pt-gallery{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; }
.pt-gallery .news-card{ box-shadow:none; }
.pt-gallery .news-card:hover{ box-shadow:var(--ctss-shadow-lg); }
.pt-gallery .news-card img{ height:165px; }
.pt-gallery .news-card h5{ font-size:.98rem; line-height:1.45; }

/* ---------- ส่วนท้าย ---------- */
.pt-footer{ background:var(--pt-ink); border-top:3px solid var(--pt-gold); }
.pt-footer h6{ position:relative; padding-bottom:.55rem; }
.pt-footer h6::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--pt-gold); }
.pt-footer .bottom-bar{ background:rgba(0,0,0,.3); }
.pt-footer iframe{ display:block; width:100%; max-width:100%; }

/* ---------- Responsive (เว็บไซต์สาธารณะ) ---------- */
@media (max-width:1199.98px){
  .pt-toggler{ display:inline-flex; }
  .pt-header .navbar-collapse{ flex-basis:100%; }
  .pt-header .navbar-nav{ padding:.6rem 0 .3rem; gap:.1rem; }
  .pt-nav-auth{ margin:.6rem 0 0; }
  .pt-grid-2{ grid-template-columns:1fr; }
  .pt-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pt-gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:767.98px){
  .pt-utility-left span{ display:none; }
  .pt-hero-inner{ padding-top:2.6rem; padding-bottom:5rem; }
  .pt-hero h1{ font-size:1.75rem; }
  .pt-hero-lead{ font-size:1rem; margin-bottom:1.35rem; }
  .pt-hero::before{ background:linear-gradient(180deg, rgba(22,19,60,.82) 0%, rgba(22,19,60,.7) 100%); }
  .pt-hero-btn{ flex:1 1 100%; }
  .pt-hero-btn > i{ margin-left:auto; }
  .news-featured-grid{ grid-template-columns:1fr; }
  .news-featured{ min-height:240px; }
  .pt-panel{ padding:1.05rem 1rem 1.1rem; }
  .pt-header .navbar-brand img{ width:46px; height:46px; }
  .pt-header .navbar-brand .name{ font-size:1rem; }
}
@media (max-width:575.98px){
  .pt-wrap{ padding-left:.9rem; padding-right:.9rem; }
  .pt-apps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pt-kpis{ gap:.65rem; }
  .pt-kpi{ flex-direction:column; gap:.55rem; padding:.9rem .85rem 1rem; }
  .pt-kpi-value{ font-size:1.6rem; }
  .pt-gallery{ grid-template-columns:1fr; }
}

/* =====================================================================
   3) ระบบหลังบ้าน (Admin)
   ===================================================================== */
.adm-body{ min-height:100vh; display:flex; flex-direction:column; }

/* ---------- แบนเนอร์โรงเรียน ---------- */
.adm-banner{
  position:relative; overflow:hidden; color:#fff; flex-shrink:0;
  background:linear-gradient(100deg, var(--pt-ink) 0%, var(--pt-ink-3) 55%, var(--pt-ink-2) 100%);
  border-bottom:3px solid var(--pt-gold);
}
.adm-banner-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.adm-banner::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(30,27,75,.95) 0%, rgba(30,27,75,.55) 34%, rgba(30,27,75,.22) 60%, rgba(30,27,75,.92) 100%);
}
.adm-banner-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.35rem 1.75rem; min-height:132px; }
.adm-brand{ display:flex; align-items:center; gap:1.1rem; color:#fff; min-width:0; }
.adm-brand:hover{ color:#fff; }
.adm-brand-logo{
  width:86px; height:86px; flex-shrink:0; border-radius:50%; background:#fff; padding:7px;
  box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.adm-brand-logo img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.adm-brand-text{ display:flex; flex-direction:column; min-width:0; }
.adm-brand-th{ font-weight:700; font-size:1.75rem; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.adm-brand-en{ font-weight:500; font-size:1.05rem; opacity:.95; }
.adm-banner-sys{ display:flex; align-items:center; gap:1rem; text-align:right; flex-shrink:0; }
.adm-banner-sys > i{ font-size:2.1rem; color:var(--pt-gold); }
.adm-sys-name{ font-weight:700; font-size:1.35rem; line-height:1.3; }
.adm-sys-tag{ font-size:.86rem; opacity:.9; max-width:20rem; }
/* แบบย่อ สำหรับหน้าทำงาน */
.adm-banner.compact .adm-banner-inner{ min-height:0; padding:.6rem 1.5rem; }
.adm-banner.compact .adm-brand-logo{ width:46px; height:46px; padding:4px; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.adm-banner.compact .adm-brand{ gap:.8rem; }
.adm-banner.compact .adm-brand-th{ font-size:1.1rem; }
.adm-banner.compact .adm-brand-en{ font-size:.8rem; }
.adm-banner.compact .adm-sys-name{ font-size:1rem; }
.adm-banner.compact .adm-sys-tag{ display:none; }
.adm-banner.compact .adm-banner-sys > i{ font-size:1.4rem; }

/* ---------- โครงหน้า ---------- */
.adm-shell{ display:flex; flex:1 1 auto; min-width:0; }
.adm-shell .ctss-main, .adm-shell .ctss-main.expanded{ margin-left:0; flex:1 1 0; min-width:0; min-height:0; }

/* ---------- เมนูด้านข้าง ---------- */
.adm-shell .ctss-sidebar{
  position:static; height:auto; width:262px; flex-shrink:0; display:block; z-index:auto;
  background:linear-gradient(180deg, var(--pt-ink) 0%, var(--pt-ink-2) 100%); color:var(--pt-side-text);
  transition:width .2s ease;
}
.adm-side-inner{ position:sticky; top:0; max-height:100vh; display:flex; flex-direction:column; }
.adm-side-head{
  display:flex; align-items:center; gap:.9rem; width:100%; padding:.95rem 1.3rem; flex-shrink:0;
  background:rgba(0,0,0,.2); border:0; border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff; font-weight:600; font-size:.9rem; text-align:left;
}
.adm-side-head:hover{ background:rgba(0,0,0,.32); }
.adm-side-head i{ width:22px; text-align:center; }
.adm-shell .ctss-sidebar .brand{ display:none; }
.adm-shell .ctss-sidebar nav{ padding:.45rem 0 .8rem; }
.adm-shell .ctss-sidebar .nav-section-title{ color:var(--pt-side-muted); font-weight:600; padding:1rem 1.3rem .35rem; }
.adm-shell .ctss-sidebar .nav-link{
  gap:.9rem; padding:.68rem 1.3rem; color:var(--pt-side-text); font-size:.93rem; border-left:0;
  transition:background-color .15s ease, color .15s ease;
}
.adm-shell .ctss-sidebar .nav-link i{ width:22px; text-align:center; font-size:1rem; color:var(--pt-side-muted); transition:color .15s ease; }
.adm-shell .ctss-sidebar .nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.adm-shell .ctss-sidebar .nav-link:hover i{ color:#fff; }
.adm-shell .ctss-sidebar .nav-link.active{
  color:#fff; font-weight:600;
  background:linear-gradient(90deg, var(--ctss-primary) 0%, var(--ctss-secondary) 100%);
  box-shadow:inset -4px 0 0 var(--pt-gold);
}
.adm-shell .ctss-sidebar .nav-link.active i{ color:#fff; }
.adm-shell .ctss-sidebar .nav-link:focus-visible, .adm-side-head:focus-visible{ outline:2px solid var(--pt-gold); outline-offset:-2px; }
.adm-side-card{
  margin:.5rem 1rem 1rem; padding:1rem; border-radius:16px; text-align:center; flex-shrink:0;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
}
.adm-side-card img{ width:48px; height:48px; object-fit:contain; background:#fff; border-radius:50%; padding:4px; margin-bottom:.5rem; }
.adm-side-card-name{ color:#fff; font-weight:600; font-size:.92rem; }
.adm-side-card-sub{ font-size:.76rem; color:var(--pt-side-muted); }

@media (min-width:992px){
  .adm-shell .ctss-sidebar.collapsed{ width:76px; }
  .adm-shell .ctss-sidebar.collapsed .nav-link, .adm-shell .ctss-sidebar.collapsed .adm-side-head{ justify-content:center; padding-left:0; padding-right:0; }
  .adm-shell .ctss-sidebar.collapsed .nav-link .badge-ctss{ display:none; }
  .adm-shell .ctss-sidebar.collapsed .nav-section-title{ display:block; height:1px; padding:0; margin:.55rem 1rem; overflow:hidden; background:rgba(255,255,255,.12); }
}
@media (max-width:991.98px){
  .adm-shell .ctss-sidebar{
    position:fixed; top:0; left:0; bottom:0; height:100%; width:min(290px, 86vw); z-index:1045;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .adm-shell .ctss-sidebar.show{ transform:translateX(0); }
  .adm-shell .sidebar-backdrop{ z-index:1040; background:rgba(10,8,30,.55); }
  .adm-side-inner{ max-height:100%; height:100%; }
  .adm-shell .ctss-sidebar .brand{ display:flex; }
  .adm-side-head{ display:none; }
  .adm-banner-inner, .adm-banner.compact .adm-banner-inner{ min-height:0; padding:.8rem 1rem; }
  .adm-brand-logo{ width:54px; height:54px; padding:5px; }
  .adm-brand-th{ font-size:1.15rem; }
  .adm-brand-en{ font-size:.82rem; }
  .adm-banner-sys{ display:none; }
}

/* ---------- แถบเครื่องมือ ---------- */
.adm-shell .ctss-topbar{ min-height:58px; padding:.55rem 1.5rem; gap:.75rem; box-shadow:0 2px 10px rgba(31,35,51,.04); }
.adm-topbar-left{ min-width:0; flex:1 1 auto; }
.adm-crumb{ display:flex; align-items:center; gap:.6rem; min-width:0; font-size:.9rem; color:var(--ctss-text-muted) !important; }
.adm-crumb > a:first-child{ color:var(--ctss-primary) !important; }
.adm-crumb-mid{ color:var(--ctss-text-muted) !important; white-space:nowrap; }
a.adm-crumb-mid:hover{ color:var(--ctss-primary) !important; }
.adm-crumb-sep{ font-size:.6rem; opacity:.7; }
.adm-crumb-current{ margin:0; font-size:.98rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-tools{ flex-shrink:0; }
.adm-date{ align-items:center; gap:.5rem; font-size:.88rem; color:var(--ctss-text); padding-right:.4rem; white-space:nowrap; }
.adm-date i{ color:var(--ctss-primary); }
.adm-icon-btn{
  width:38px; height:38px; flex-shrink:0; border-radius:12px; border:1px solid var(--ctss-border);
  background:var(--ctss-surface-alt); color:var(--ctss-text); display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width:767.98px){
  .adm-shell .ctss-topbar{ padding:.5rem .9rem; }
  .adm-crumb-mid, .adm-crumb-mid + .adm-crumb-sep{ display:none; }
  .adm-shell .ctss-content{ padding:1rem .9rem; }
}

/* ---------- Dashboard ---------- */
.adm-dash{ display:flex; flex-direction:column; gap:var(--pt-gap); }
.adm-greet{
  position:relative; overflow:hidden; color:#fff; border-radius:var(--pt-panel-radius);
  background:var(--ctss-gradient); box-shadow:0 12px 28px rgba(124,58,237,.22);
  padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem 1.5rem; flex-wrap:wrap;
}
.adm-greet::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 10% 0%, rgba(255,255,255,.2), transparent 42%), radial-gradient(circle at 92% 120%, rgba(255,255,255,.18), transparent 45%);
}
.adm-greet > *{ position:relative; z-index:1; }
.adm-greet h4{ font-weight:700; font-size:1.3rem; margin:0 0 .15rem; }
.adm-greet p{ margin:0; opacity:.93; font-size:.95rem; }
.adm-greet-role{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); font-size:.85rem; font-weight:500; white-space:nowrap; }
.adm-kpis{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
.adm-kpis .pt-kpi{ flex-direction:column; gap:.6rem; padding:1rem 1rem 1.1rem; }
.adm-kpis .pt-kpi-value{ font-size:1.85rem; }
.adm-charts{ display:grid; gap:var(--pt-gap); }
.adm-charts.three{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.adm-charts.two{ grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); }
.adm-charts .pt-panel-head{ margin-bottom:.4rem; }
@media (max-width:1399.98px){
  .adm-kpis{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .adm-charts.three{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .adm-charts.three > :last-child{ grid-column:1 / -1; }
}
@media (max-width:991.98px){
  .adm-charts.three, .adm-charts.two{ grid-template-columns:1fr; }
  .adm-charts.three > :last-child{ grid-column:auto; }
}
@media (max-width:575.98px){
  .adm-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .adm-greet{ padding:1rem 1.1rem; }
  .adm-greet h4{ font-size:1.1rem; }
}

/* ---------- ทั่วไป ---------- */
@media (prefers-reduced-motion: reduce){
  .pt-app, .pt-app-icon, .pt-kpi, .pt-hero-btn, .pt-hero-btn > i, .pt-login, .adm-shell .ctss-sidebar{ transition:none; }
  .pt-hero h1, .pt-hero-lead, .pt-hero-actions{ animation:none; }
}
@media print{
  .pt-utility, .pt-header, .adm-banner, .adm-shell .ctss-sidebar, .adm-shell .ctss-topbar, .adm-footer, .sidebar-backdrop{ display:none !important; }
}

/* โหมดมืด: ปุ่มไอคอนบนแถบเครื่องมือหลังบ้าน */
[data-theme="dark"] .adm-shell .ctss-topbar .btn-light{ background:var(--ctss-surface-alt); color:var(--ctss-text); }

/* =====================================================================
   4) หน้าแรก: ผลงานเด่น / อาคารสถานที่ / ภาพกิจกรรม + บุคลากร / Popup
   ===================================================================== */
.pt-grid-2.single, .pt-gs.single{ grid-template-columns:1fr !important; }
.pt-hero.no-stats .pt-hero-inner{ padding-bottom:4.25rem; }

/* ---------- ผลงานเด่นและความภาคภูมิใจ ---------- */
.pt-pride{
  position:relative; overflow:hidden; border-radius:24px; padding:2rem 2rem 1.6rem; color:#fff;
  background:radial-gradient(circle at 85% -10%, rgba(245,184,65,.16), transparent 40%), linear-gradient(135deg, var(--pt-ink) 0%, var(--pt-ink-3) 100%);
  box-shadow:0 18px 40px rgba(30,27,75,.22);
}
.pt-pride-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.pt-pride-eyebrow{ display:flex; align-items:center; gap:.5rem; color:var(--pt-gold); font-size:.85rem; font-weight:500; letter-spacing:.04em; margin-bottom:.3rem; }
.pt-pride h2{ font-weight:700; font-size:1.85rem; margin:0 0 .2rem; color:#fff; }
.pt-pride-head p{ margin:0; color:#CFCBF2; font-size:.92rem; }
.pt-pride-filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pt-pride-filters button{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .95rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; font-size:.88rem; font-weight:500;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pt-pride-filters button b{ font-size:.72rem; font-weight:600; min-width:1.5rem; padding:.05rem .45rem; border-radius:999px; background:rgba(255,255,255,.16); }
.pt-pride-filters button:hover{ background:rgba(255,255,255,.14); }
.pt-pride-filters button.active{ background:var(--pt-gold); border-color:var(--pt-gold); color:#2A2052; font-weight:600; }
.pt-pride-filters button.active b{ background:rgba(42,32,82,.14); }
.pt-pride-filters button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.pt-pride-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.1rem; }
.pt-award{
  display:flex; flex-direction:column; min-width:0; border-radius:18px; overflow:hidden;
  background:var(--ctss-surface); color:var(--ctss-text); box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pt-award[hidden]{ display:none; }
.pt-award:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.28); }
.pt-award-media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--pt-ink-2); border-bottom:3px solid var(--ctss-secondary); }
.pt-award-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pt-award:hover .pt-award-media img{ transform:scale(1.05); }
.pt-award-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:var(--pt-gold); }
.pt-award-cat, .pt-award-star{
  position:absolute; top:.8rem; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .75rem; border-radius:999px;
  font-size:.76rem; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.pt-award-cat{ left:.8rem; background:#FFD470; color:#2A2052; }
.pt-award-star{ right:.8rem; background:rgba(15,13,36,.82); color:#fff; }
.pt-award-star i{ color:var(--pt-gold); }
.pt-award-body{ display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem 1.05rem; flex:1; min-width:0; }
.pt-award-body h3{ font-size:1.02rem; font-weight:700; line-height:1.45; margin:0; }
.pt-award-body h3 a{ color:var(--ctss-text); }
.pt-award-body h3 a:hover{ color:var(--ctss-primary); }
.pt-award-who{ font-size:.86rem; color:var(--ctss-text-muted); }
.pt-award-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.15rem; }
.pt-award-chips span{ font-size:.74rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; }
.pt-award-chips .lv{ background:color-mix(in srgb, var(--ctss-secondary) 12%, var(--ctss-surface)); color:var(--ctss-secondary); }
.pt-award-chips .aw{ background:color-mix(in srgb, var(--pt-gold) 26%, var(--ctss-surface)); color:var(--pt-gold-dark); }
[data-theme="dark"] .pt-award-chips .aw{ color:var(--pt-gold); }
.pt-award-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.6rem; font-size:.8rem; color:var(--ctss-text-muted); }
.pt-award-foot a{ color:var(--ctss-secondary); font-weight:600; white-space:nowrap; }
.pt-award-foot a i{ font-size:.7rem; margin-left:.2rem; transition:transform .2s ease; }
.pt-award-foot a:hover i{ transform:translateX(3px); }
/* การ์ดใหญ่ (ผลงานแรก) */
.pt-award.wide{ grid-column:span 2; flex-direction:row; }
.pt-award.wide .pt-award-media{ flex:0 0 53%; aspect-ratio:auto; min-height:300px; border-bottom:0; border-right:4px solid var(--pt-gold); }
.pt-award.wide .pt-award-body{ padding:1.6rem 1.6rem 1.4rem; gap:.5rem; }
.pt-award.wide .pt-award-body h3{ font-size:1.45rem; }
.pt-award.wide .pt-award-who{ font-size:.95rem; }
.pt-pride-more{ text-align:center; margin-top:1.3rem; }
.pt-pride-more a{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:500; padding:.55rem 1.3rem; border-radius:999px; border:1px solid rgba(255,255,255,.3); }
.pt-pride-more a:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- อาคารสถานที่และแหล่งเรียนรู้ ---------- */
.pt-campus{ min-width:0; }
.pt-campus-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin:0 .2rem 1rem; }
.pt-campus-head h2{ font-weight:700; font-size:1.6rem; margin:0; color:var(--ctss-text); }
.pt-campus-head p{ margin:.1rem 0 0; font-size:.88rem; color:var(--ctss-text-muted); }
.pt-campus-head a{ color:var(--ctss-secondary); font-weight:600; font-size:.92rem; white-space:nowrap; }
.pt-campus-head a i{ font-size:.8rem; margin-left:.3rem; }
.pt-campus-grid{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 1fr); gap:1.1rem; align-items:stretch; }
.pt-campus-stage{ position:relative; overflow:hidden; border-radius:22px; min-height:480px; background:var(--pt-ink); box-shadow:0 18px 40px rgba(30,27,75,.22); isolation:isolate; }
.pt-campus-progress{ position:absolute; top:0; left:0; right:0; height:4px; z-index:4; background:rgba(255,255,255,.15); }
.pt-campus-progress i{ display:block; height:100%; background:var(--pt-gold); transform:scaleX(0); transform-origin:left center; }
.pt-campus-slide{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s linear .9s; }
.pt-campus-slide.is-active{ opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s; z-index:1; }
.pt-campus-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.2); }
.pt-campus-slide.is-active img{ animation:ptZoomOut var(--pt-zoom-ms, 7500ms) cubic-bezier(.25,.6,.3,1) both; }
@keyframes ptZoomOut{ from{ transform:scale(1.22); } to{ transform:scale(1); } }
.pt-campus-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,13,36,.9) 0%, rgba(15,13,36,.45) 32%, rgba(15,13,36,0) 60%); pointer-events:none; }
.pt-campus-slide figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.6rem 1.8rem 1.6rem; color:#fff; }
.pt-campus-slide.is-active figcaption{ animation:fxFadeUp .8s .2s ease both; }
.pt-campus-type{ color:var(--pt-gold); font-size:.85rem; font-weight:600; margin-bottom:.2rem; }
.pt-campus-slide h3{ font-weight:700; font-size:2rem; margin:0 0 .3rem; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.pt-campus-slide p{ margin:0 0 .75rem; max-width:44em; font-size:.98rem; opacity:.95; }
.pt-campus-meta{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pt-campus-meta span{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); font-size:.84rem; backdrop-filter:blur(4px); }
.pt-campus-pause{
  position:absolute; top:1rem; right:1rem; z-index:4; width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(15,13,36,.7); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.pt-campus-pause:hover{ background:rgba(15,13,36,.9); }
.pt-campus-pause:focus-visible{ outline:2px solid var(--pt-gold); outline-offset:2px; }
.pt-campus-list{ display:flex; flex-direction:column; gap:.65rem; min-width:0; }
.pt-campus-item{
  display:flex; align-items:center; gap:.85rem; width:100%; padding:.6rem; border-radius:16px; text-align:left;
  border:1px solid var(--ctss-border); background:var(--ctss-surface); color:var(--ctss-text); box-shadow:var(--ctss-shadow);
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pt-campus-item:hover{ transform:translateX(-3px); }
.pt-campus-item img{ width:92px; height:66px; border-radius:11px; object-fit:cover; flex-shrink:0; }
.pt-campus-item span{ min-width:0; display:flex; flex-direction:column; }
.pt-campus-item b{ font-weight:600; font-size:.93rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pt-campus-item small{ font-size:.78rem; color:var(--ctss-text-muted); }
.pt-campus-item.is-active{ background:var(--pt-ink); border-color:var(--pt-ink); color:#fff; box-shadow:0 12px 26px rgba(30,27,75,.3); }
[data-theme="dark"] .pt-campus-item.is-active{ background:var(--pt-ink-3); border-color:var(--pt-ink-3); }
.pt-campus-item.is-active small{ color:var(--pt-gold); }
.pt-campus-item:focus-visible, .pt-campus-chip:focus-visible{ outline:2px solid var(--ctss-primary); outline-offset:2px; }
.pt-campus-chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.pt-campus-chip{ display:inline-flex; align-items:baseline; gap:.5rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--ctss-border); background:var(--ctss-surface); color:var(--ctss-text); font-size:.88rem; box-shadow:var(--ctss-shadow); }
.pt-campus-chip small{ color:var(--ctss-text-muted); font-size:.76rem; }
.pt-campus-chip:hover{ border-color:var(--ctss-primary); }
.pt-campus-chip.is-active{ background:var(--pt-ink); border-color:var(--pt-ink); color:#fff; }
.pt-campus-chip.is-active small{ color:var(--pt-gold); }

/* ---------- ภาพกิจกรรม (3) + แนะนำบุคลากร (1) ---------- */
.pt-gs{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 1fr); gap:var(--pt-gap); align-items:stretch; }
.pt-gs .pt-gallery{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.pt-gs.single .pt-gallery{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pt-gallery-noimg{ height:165px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; background:linear-gradient(135deg, var(--ctss-primary), var(--ctss-secondary)); }

.pt-staff{ display:flex; flex-direction:column; }
.pt-staff-count{ font-size:.82rem; color:var(--ctss-text-muted); background:var(--ctss-surface-alt); border:1px solid var(--ctss-border); padding:.2rem .65rem; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pt-staff-count b{ color:var(--ctss-primary); }
.pt-staff-stage{ display:grid; flex:1; }
.pt-staff-card{
  grid-area:1 / 1; margin:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.98);
  transition:opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.pt-staff-card.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .6s ease, transform .6s ease, visibility 0s; }
.pt-staff-photo{
  position:relative; width:100%; max-width:230px; aspect-ratio:4/5; border-radius:20px; overflow:hidden; padding:5px;
  background:linear-gradient(160deg, var(--pt-gold), var(--ctss-primary) 55%, var(--ctss-secondary));
  box-shadow:0 14px 30px rgba(30,27,75,.2);
}
.pt-staff-photo img, .pt-staff-nophoto{ width:100%; height:100%; border-radius:16px; object-fit:cover; object-position:center 20%; background:var(--ctss-surface-alt); }
.pt-staff-nophoto{ display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--ctss-primary); }
.pt-staff-card figcaption{ margin-top:.9rem; display:flex; flex-direction:column; gap:.15rem; }
.pt-staff-card figcaption b{ font-weight:700; font-size:1.05rem; color:var(--ctss-text); line-height:1.4; }
.pt-staff-card figcaption span{ font-size:.88rem; color:var(--ctss-primary); font-weight:500; }
.pt-staff-card figcaption small{ font-size:.78rem; color:var(--ctss-text-muted); }
.pt-staff-controls{ display:flex; align-items:center; gap:.6rem; margin-top:1rem; }
.pt-staff-controls button{ width:36px; height:36px; flex-shrink:0; border-radius:50%; border:1px solid var(--ctss-border); background:var(--ctss-surface-alt); color:var(--ctss-text); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.pt-staff-controls button:hover{ background:var(--ctss-primary); border-color:var(--ctss-primary); color:#fff; }
.pt-staff-controls button:focus-visible{ outline:2px solid var(--ctss-primary); outline-offset:2px; }
.pt-staff-bar{ flex:1; height:4px; border-radius:4px; background:var(--ctss-border); overflow:hidden; }
.pt-staff-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--ctss-primary), var(--ctss-secondary)); transform:scaleX(0); transform-origin:left center; }
.pt-staff-all{ display:block; text-align:center; margin-top:.85rem; font-size:.88rem; font-weight:600; color:var(--ctss-secondary); }
.pt-staff-all i{ font-size:.75rem; margin-left:.25rem; }

/* ---------- Popup หน้าแรก ---------- */
html.pt-popup-open{ overflow:hidden; }
.pt-popup{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:rgba(10,8,30,.62); backdrop-filter:blur(5px); opacity:0; transition:opacity .25s ease;
}
.pt-popup[hidden]{ display:none; }
.pt-popup.show{ opacity:1; }
.pt-popup-dialog{
  position:relative; width:min(1080px, 100%); max-height:calc(100vh - 2rem); display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden; background:var(--ctss-surface); border:2px solid var(--pt-gold);
  box-shadow:0 30px 80px rgba(0,0,0,.45); transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.pt-popup.show .pt-popup-dialog{ transform:none; }
.pt-popup-img{ display:block; background:var(--pt-ink); min-height:0; flex:1 1 auto; overflow:hidden; }
.pt-popup-img img{ display:block; width:100%; height:100%; max-height:68vh; object-fit:contain; }
.pt-popup-caption{ padding:.9rem 1.3rem 1rem; background:linear-gradient(90deg, var(--pt-ink), var(--pt-ink-3)); color:#fff; }
.pt-popup-caption small{ display:block; font-size:.76rem; color:var(--pt-gold); }
.pt-popup-caption b{ font-weight:600; font-size:1.02rem; }
.pt-popup-foot{ display:flex; justify-content:flex-end; align-items:center; gap:.6rem; padding:.7rem 1rem; }
.pt-popup-skip{ border:0; background:transparent; color:var(--ctss-text-muted); font-size:.86rem; padding:.4rem .6rem; border-radius:8px; }
.pt-popup-skip:hover{ color:var(--ctss-text); background:var(--ctss-surface-alt); }
.pt-popup-close{ border:1px solid var(--ctss-border); background:var(--ctss-surface); color:var(--ctss-text); font-weight:600; padding:.45rem 1.2rem; border-radius:10px; }
.pt-popup-close:hover{ background:var(--ctss-surface-alt); }
.pt-popup-x{
  position:absolute; top:.8rem; right:.8rem; z-index:2; width:44px; height:44px; border-radius:12px;
  border:2px solid var(--pt-gold); background:rgba(15,13,36,.8); color:#fff; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
}
.pt-popup-x:hover{ background:var(--pt-ink-3); }
.pt-popup button:focus-visible, .pt-popup a:focus-visible{ outline:2px solid var(--pt-gold); outline-offset:2px; }

/* ---------- Responsive (ส่วนใหม่) ---------- */
@media (max-width:1199.98px){
  .pt-pride-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pt-campus-grid{ grid-template-columns:1fr; }
  .pt-campus-list{ flex-direction:row; overflow-x:auto; padding-bottom:.3rem; scroll-snap-type:x mandatory; }
  .pt-campus-item{ flex:0 0 250px; scroll-snap-align:start; }
  .pt-campus-item:hover{ transform:none; }
  .pt-gs{ grid-template-columns:1fr; }
  .pt-staff-stage{ min-height:0; }
  .pt-staff-card{ flex-direction:row; text-align:left; gap:1.2rem; }
  .pt-staff-photo{ max-width:150px; }
  .pt-staff-card figcaption{ margin-top:0; }
}
@media (max-width:767.98px){
  .pt-pride{ padding:1.4rem 1.1rem 1.2rem; border-radius:20px; }
  .pt-pride h2{ font-size:1.45rem; }
  .pt-pride-grid{ grid-template-columns:1fr; }
  .pt-award.wide{ grid-column:auto; flex-direction:column; }
  .pt-award.wide .pt-award-media{ flex:none; aspect-ratio:16/10; min-height:0; border-right:0; border-bottom:3px solid var(--pt-gold); }
  .pt-award.wide .pt-award-body{ padding:1rem 1.1rem 1.05rem; }
  .pt-award.wide .pt-award-body h3{ font-size:1.1rem; }
  .pt-campus-stage{ min-height:340px; border-radius:18px; }
  .pt-campus-slide figcaption{ padding:1.1rem 1.1rem 1.2rem; }
  .pt-campus-slide h3{ font-size:1.35rem; }
  .pt-campus-slide p{ font-size:.88rem; }
  .pt-campus-head h2{ font-size:1.35rem; }
  .pt-gs .pt-gallery, .pt-gs.single .pt-gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pt-popup-foot{ justify-content:space-between; }
}
@media (max-width:575.98px){
  .pt-gs .pt-gallery, .pt-gs.single .pt-gallery{ grid-template-columns:1fr; }
  .pt-staff-photo{ max-width:120px; }
}
@media (prefers-reduced-motion: reduce){
  .pt-campus-slide.is-active img{ animation:none; transform:none; }
  .pt-campus-slide, .pt-staff-card, .pt-award, .pt-popup, .pt-popup-dialog{ transition:none; }
  .pt-campus-slide.is-active figcaption{ animation:none; }
}
.pt-award-desc{ display:none; margin:.2rem 0 0; font-size:.9rem; line-height:1.65; color:var(--ctss-text-muted); }
.pt-award.wide .pt-award-desc{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- หน้าผลงานทั้งหมด / รายละเอียดผลงาน / อาคารสถานที่ ---------- */
.ach-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ach-tabs a{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem 1rem; border-radius:999px; border:1px solid var(--ctss-border); background:var(--ctss-surface); color:var(--ctss-text); font-weight:500; font-size:.92rem; }
.ach-tabs a b{ font-size:.72rem; padding:.05rem .45rem; border-radius:999px; background:var(--ctss-surface-alt); }
.ach-tabs a.active{ background:var(--pt-ink); border-color:var(--pt-ink); color:#fff; }
.ach-tabs a.active b{ background:var(--pt-gold); color:#2A2052; }
.ach-list .pt-award{ border:1px solid var(--ctss-border); box-shadow:var(--ctss-shadow); }
.ach-detail{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:1.75rem; padding:1.5rem; }
.ach-detail-img{ display:block; border-radius:16px; overflow:hidden; background:var(--ctss-surface-alt); }
.ach-detail-img img{ width:100%; height:auto; display:block; }
.ach-detail h2{ font-weight:700; font-size:1.6rem; line-height:1.4; margin:.3rem 0 1rem; }
.ach-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.ach-pill.cat{ background:#FFD470; color:#2A2052; }
.ach-pill.star{ background:var(--pt-ink); color:#fff; }
.ach-pill.star i{ color:var(--pt-gold); }
.ach-facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem; margin:0 0 1.2rem; }
.ach-facts div{ padding:.7rem .9rem; border-radius:12px; background:var(--ctss-surface-alt); border:1px solid var(--ctss-border); }
.ach-facts dt{ font-size:.76rem; font-weight:500; color:var(--ctss-text-muted); }
.ach-facts dd{ margin:0; font-weight:600; }
.ach-desc{ line-height:1.8; color:var(--ctss-text); }
.campus-list{ display:flex; flex-direction:column; gap:1.25rem; }
.campus-row{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:1.5rem; align-items:center; padding:1rem; }
.campus-row:nth-child(even) .campus-row-img{ order:2; }
.campus-row-img{ border-radius:16px; overflow:hidden; aspect-ratio:16/10; background:var(--ctss-surface-alt); }
.campus-row-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.campus-row:hover .campus-row-img img{ transform:scale(1.04); }
.campus-row-type{ color:var(--pt-gold-dark); font-weight:600; font-size:.88rem; }
[data-theme="dark"] .campus-row-type{ color:var(--pt-gold); }
.campus-row h2{ font-weight:700; font-size:1.5rem; margin:.2rem 0 .5rem; }
.campus-row p{ color:var(--ctss-text-muted); line-height:1.75; }
.campus-row-meta{ display:flex; flex-wrap:wrap; gap:.5rem; }
.campus-row-meta span{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem; border-radius:999px; background:var(--ctss-surface-alt); border:1px solid var(--ctss-border); font-size:.85rem; }
.campus-row-meta i{ color:var(--ctss-primary); }
@media (max-width:991.98px){
  .ach-detail, .campus-row{ grid-template-columns:1fr; }
  .campus-row:nth-child(even) .campus-row-img{ order:0; }
}
@media (max-width:575.98px){ .ach-facts{ grid-template-columns:1fr; } }