/* ============================================================
   SJS Theme — home.css  (เฉพาะหน้าแรก)
   Modern Indigo + Amber
   ============================================================ */

/* ดึง hero ขึ้นชิดบนสุด (ล้าง block-gap margin ที่ WP ใส่ให้ <main>) */
.sjs-main-home{margin-block-start:0}
.sjs-home{overflow-x:hidden}
.sjs-home .sjs-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sjs-home .sjs-serif{font-family:var(--sjs-serif)}
.sjs-home .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.sjs-home .rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sjs-home .rv{opacity:1;transform:none;transition:none}
  .sjs-marq-track,.sjs-hero-dot,.sjs-hero-scroll svg{animation:none!important}
}

/* ── HERO ── */
.sjs-hero{min-height:100svh;display:flex;background:
  linear-gradient(to right,rgba(11,16,52,.84) 0%,rgba(19,27,77,.5) 52%,rgba(19,27,77,.14) 100%),
  linear-gradient(to top,rgba(11,16,52,.7) 0%,transparent 34%),
  url("https://web.sjs.ac.th/wp-content/uploads/2026/03/Login_Background-2-scaled-1.jpg") center 20%/cover no-repeat}
.sjs-hero-content{width:100%;max-width:1400px;margin:0 auto;padding:140px 48px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.sjs-hero-text{max-width:680px}
.sjs-hero-eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:500;color:rgba(255,255,255,.85);letter-spacing:.05em;margin-bottom:26px}
.sjs-hero-rule{width:48px;height:1px;background:var(--sjs-amber);flex-shrink:0}
.sjs-hero h1{font-family:var(--sjs-serif);font-size:clamp(42px,6vw,82px);font-weight:600;color:#fff;line-height:1.12;letter-spacing:-.5px;margin:0 0 26px}
.sjs-hero h1 em{font-style:normal;color:var(--sjs-amber-soft)}
.sjs-hero-desc{font-size:16px;color:rgba(255,255,255,.84);line-height:1.85;margin:0 0 36px;max-width:560px}
.sjs-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.sjs-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--sjs-amber);color:var(--sjs-deep);padding:17px 32px;border-radius:100px;font-size:15.5px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}
.sjs-btn-primary:hover{background:var(--sjs-amber-soft);transform:translateY(-2px);box-shadow:0 12px 32px rgba(245,158,11,.4);color:var(--sjs-deep)}
.sjs-btn-ghost{display:inline-flex;align-items:center;gap:9px;background:rgba(11,16,52,.4);color:#fff;padding:17px 28px;border-radius:100px;font-size:15px;font-weight:700;border:1.5px solid rgba(255,255,255,.55);transition:background .2s,border-color .2s;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(0,0,0,.3)}
.sjs-btn-ghost:hover{background:rgba(11,16,52,.62);border-color:rgba(255,255,255,.85);color:#fff}
.sjs-hero-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sjs-hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:9px 18px;font-size:13px;font-weight:500;color:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.sjs-hero-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:sjsPulse 2s infinite}
@keyframes sjsPulse{0%,100%{opacity:1}50%{opacity:.35}}
.sjs-hero-scroll{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.6);letter-spacing:.08em}
.sjs-hero-scroll svg{animation:sjsBounce 2s infinite}
@keyframes sjsBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── MARQUEE ── */
.sjs-marq{overflow:hidden;background:var(--sjs-deep);padding:18px 0}
.sjs-marq-track{display:flex;align-items:center;gap:44px;width:max-content;animation:sjsMarq 36s linear infinite}
.sjs-marq-track span{font-family:var(--sjs-serif);font-size:17px;font-weight:500;color:rgba(255,255,255,.9);white-space:nowrap;letter-spacing:.03em}
.sjs-marq-track i{font-style:normal;color:var(--sjs-amber);font-size:12px}
@keyframes sjsMarq{to{transform:translateX(-50%)}}

/* ── STATS ── */
.sjs-stats{background:var(--sjs-surface);padding:64px 32px;border-bottom:1px solid var(--sjs-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.sjs-stats-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.sjs-stat{text-align:center;padding:8px 16px;border-left:1px solid var(--sjs-line)}
.sjs-stat:first-child{border-left:none}
.sjs-stat-num{font-family:var(--sjs-serif);font-size:52px;font-weight:600;color:var(--sjs-indigo);letter-spacing:-1px;line-height:1}
.sjs-stat-label{font-size:13.5px;color:var(--sjs-muted);margin-top:10px;font-weight:500}

/* ── section header pattern ── */
.sjs-sec-tag{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--sjs-muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px}
.sjs-sec-no{font-family:var(--sjs-serif);color:var(--sjs-amber);font-size:13px;font-weight:600;letter-spacing:0}
.sjs-sec-no::after{content:'';display:inline-block;width:30px;height:1px;background:var(--sjs-amber);margin-left:10px;vertical-align:middle}
.sjs-sec-hdr{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-bottom:52px}
.sjs-sec-hdr h2{font-size:clamp(30px,3.6vw,48px);color:var(--sjs-ink);line-height:1.15;margin:0}
.sjs-sec-hdr-right{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.sjs-sec-hdr-right p{font-size:15px;color:var(--sjs-muted);line-height:1.8;margin:0}
.sjs-link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--sjs-indigo);border-bottom:1.5px solid var(--sjs-amber);padding-bottom:4px;transition:gap .2s,color .2s}
.sjs-link-arrow:hover{gap:13px;color:var(--sjs-blue)}

/* ── ABOUT ── */
.sjs-about{padding:110px 0;background:var(--sjs-bg)}
.sjs-about-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.sjs-about-head h2{font-size:clamp(32px,3.8vw,52px);color:var(--sjs-ink);line-height:1.18;margin:0 0 24px}
.sjs-about-head p{font-size:15.5px;color:var(--sjs-muted);line-height:1.9;margin:0 0 30px}
.sjs-about-bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:230px 230px;gap:14px}
.sjs-bc{border-radius:var(--sjs-radius-lg);overflow:hidden;position:relative;background-size:cover;background-position:center}
.sjs-bc-tall{grid-row:span 2}
.sjs-bc-ol{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,16,52,.74) 0%,transparent 52%);padding:24px;display:flex;align-items:flex-end}
.sjs-bc-ol span{color:#fff;font-size:17px;font-weight:700;line-height:1.4}

/* ── QUOTE ── */
.sjs-quote{background:linear-gradient(135deg,var(--sjs-deep),var(--sjs-indigo));padding:110px 0;position:relative;overflow:hidden}
.sjs-quote::before{content:'';position:absolute;top:-140px;right:-140px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(59,79,196,.32),transparent 65%)}
.sjs-quote .sjs-wrap{text-align:center;position:relative}
.sjs-quote-mark{font-family:var(--sjs-serif);font-size:110px;line-height:.6;color:var(--sjs-amber);margin-bottom:16px}
.sjs-quote-text{font-family:var(--sjs-serif);font-size:clamp(26px,3.6vw,46px);color:#fff;line-height:1.45;max-width:880px;margin:0 auto 26px;font-weight:500}
.sjs-quote-text em{font-style:normal;color:var(--sjs-amber-soft)}
.sjs-quote-cite{font-size:14px;color:rgba(255,255,255,.65);letter-spacing:.08em;margin-bottom:56px}
.sjs-values{display:flex;justify-content:center;border-top:1px solid rgba(255,255,255,.16);max-width:980px;margin:0 auto}
.sjs-value{flex:1;min-width:150px;padding:26px 18px 6px;font-size:16.5px;font-weight:600;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;border-left:1px solid rgba(255,255,255,.16)}
.sjs-value:first-child{border-left:none}
.sjs-value span{font-family:var(--sjs-serif);font-size:12px;color:var(--sjs-amber);letter-spacing:.1em}

/* ── PROGRAMS ── */
.sjs-prog{padding:110px 0;background:var(--sjs-surface)}
.sjs-prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.sjs-prog-card{position:relative;background:var(--sjs-bg);border:1px solid var(--sjs-line);border-radius:var(--sjs-radius-lg);padding:30px 26px 70px;display:block;transition:transform .25s,box-shadow .25s,border-color .25s}
.sjs-prog-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(15,21,48,.1);border-color:rgba(59,79,196,.4)}
.sjs-prog-no{font-family:var(--sjs-serif);font-size:14px;font-weight:600;color:var(--sjs-amber);margin-bottom:22px}
.sjs-prog-no::after{content:'';display:block;width:34px;height:1px;background:var(--sjs-amber);margin-top:10px}
.sjs-prog-name{font-size:19.5px;font-weight:800;color:var(--sjs-ink);margin-bottom:5px;font-family:var(--sjs-serif)}
.sjs-prog-grade{font-size:13px;color:var(--sjs-blue);font-weight:700;margin-bottom:14px}
.sjs-prog-card p{font-size:14px;color:var(--sjs-muted);line-height:1.75;margin:0}
.sjs-prog-arr{position:absolute;left:26px;bottom:24px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--sjs-line);display:flex;align-items:center;justify-content:center;color:var(--sjs-indigo);transition:background .2s,color .2s,border-color .2s}
.sjs-prog-card:hover .sjs-prog-arr{background:var(--sjs-indigo);color:#fff;border-color:var(--sjs-indigo)}
.sjs-prog-special{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--sjs-bg);border:1px solid var(--sjs-line);border-radius:var(--sjs-radius-lg);padding:20px 26px}
.sjs-prog-special-lbl{font-size:13px;font-weight:700;color:var(--sjs-muted);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0}
.sjs-prog-special-chips{display:flex;gap:8px;flex-wrap:wrap}
.sjs-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--sjs-ink);background:var(--sjs-surface);border:1px solid var(--sjs-line);border-radius:100px;padding:8px 16px;font-weight:500}
.sjs-chip b{color:var(--sjs-indigo);font-weight:800}

/* ── NEWS ── */
.sjs-news{padding:110px 0;background:var(--sjs-bg)}
.sjs-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sjs-nc{border-radius:var(--sjs-radius-lg);overflow:hidden;position:relative;height:380px;display:block;transition:transform .25s,box-shadow .25s}
.sjs-nc:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(15,21,48,.16)}
.sjs-nc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sjs-nc:hover .sjs-nc-bg{transform:scale(1.05)}
.sjs-nc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,16,52,.92) 0%,rgba(11,16,52,.3) 48%,rgba(11,16,52,.08) 75%)}
.sjs-nc-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px}
.sjs-nc-head{display:flex;justify-content:space-between;align-items:center}
.sjs-nc-date{font-size:12px;color:rgba(255,255,255,.82);font-weight:500;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);border-radius:100px;padding:5px 12px}
.sjs-nc-arr{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;backdrop-filter:blur(6px);transition:background .2s}
.sjs-nc:hover .sjs-nc-arr{background:var(--sjs-amber)}
.sjs-nc-foot{color:#fff}
.sjs-nc-cat{font-size:11px;font-weight:700;color:var(--sjs-amber-soft);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:9px}
.sjs-nc-title{font-size:18.5px;font-weight:800;line-height:1.4;margin-bottom:8px;color:#fff;font-family:var(--sjs-serif)}
.sjs-nc-excerpt{font-size:13px;color:rgba(255,255,255,.74);line-height:1.65}

/* ── CAMPUS ── */
.sjs-campus{padding:110px 0;background:var(--sjs-surface)}
.sjs-campus-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.sjs-cp{height:300px;border-radius:var(--sjs-radius-lg);background-size:cover;background-position:center;position:relative;overflow:hidden}
.sjs-cp::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,16,52,.58),transparent 45%)}
.sjs-cp span{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em}
.sjs-fac{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.sjs-fac-item{font-size:13px;color:var(--sjs-ink);background:var(--sjs-bg);border:1px solid var(--sjs-line);border-radius:100px;padding:9px 18px;font-weight:500}

/* ── PORTAL ── */
.sjs-portal{padding:110px 0;background:var(--sjs-bg)}
.sjs-portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.sjs-pcard{border-radius:var(--sjs-radius-lg);overflow:hidden;min-height:270px;position:relative;transition:transform .25s,box-shadow .25s;display:block}
.sjs-pcard:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(15,21,48,.18)}
.sjs-pcard-bg{position:absolute;inset:0}
.sjs-pcard-body{position:relative;z-index:2;padding:28px 38px;height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:#fff}
.sjs-pcard-icon{width:50px;height:50px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin-bottom:18px;backdrop-filter:blur(8px)}
.sjs-pcard-icon svg{width:25px;height:25px}
.sjs-pcard-title{font-family:var(--sjs-serif);font-size:27px;font-weight:600;margin-bottom:9px}
.sjs-pcard-desc{font-size:14px;color:rgba(255,255,255,.78);line-height:1.7;max-width:380px;margin-bottom:24px}
.sjs-pcard-btn{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);border-radius:100px;padding:11px 22px;font-size:14px;font-weight:600;color:#fff;transition:background .2s;align-self:flex-start;backdrop-filter:blur(6px)}
.sjs-pcard:hover .sjs-pcard-btn{background:rgba(255,255,255,.28)}
.sjs-quicklinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sjs-ql{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--sjs-indigo);background:var(--sjs-surface);border:1px solid var(--sjs-line);border-radius:100px;padding:11px 20px;transition:background .2s,color .2s,border-color .2s}
.sjs-ql:hover{background:var(--sjs-indigo);color:#fff;border-color:var(--sjs-indigo)}

/* ── CTA ── */
.sjs-ctasec{padding:0 0 110px;background:var(--sjs-bg)}
.sjs-cta-box{background:linear-gradient(120deg,var(--sjs-deep) 0%,var(--sjs-indigo) 55%,var(--sjs-blue) 100%);border-radius:28px;padding:64px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.sjs-cta-box::before{content:'';position:absolute;bottom:-160px;right:-100px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.28),transparent 65%)}
.sjs-cta-eyebrow{font-size:13px;font-weight:700;color:var(--sjs-amber-soft);text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.sjs-cta-text h2{font-family:var(--sjs-serif);font-size:clamp(26px,3.2vw,40px);color:#fff;line-height:1.3;margin:0 0 16px}
.sjs-cta-text p{font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.8;max-width:480px;margin:0}
.sjs-cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-end;position:relative;z-index:2}
.sjs-cta-phone{display:inline-flex;align-items:center;gap:12px;font-family:var(--sjs-serif);font-size:30px;font-weight:600;color:#fff;letter-spacing:.02em;transition:color .2s}
.sjs-cta-phone:hover{color:var(--sjs-amber-soft)}
.sjs-cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--sjs-amber);color:var(--sjs-deep);padding:16px 34px;border-radius:100px;font-size:15.5px;font-weight:800;transition:transform .2s,background .2s,box-shadow .2s}
.sjs-cta-btn:hover{background:var(--sjs-amber-soft);transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,158,11,.38);color:var(--sjs-deep)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .sjs-prog-grid{grid-template-columns:1fr 1fr}
  .sjs-about-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:768px){
  .sjs-home .sjs-wrap{padding:0 20px}
  .sjs-hero-content{padding:120px 22px 36px}
  .sjs-hero-desc{font-size:15px}
  .sjs-hero-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .sjs-hero-scroll{display:none}
  .sjs-stats{padding:44px 20px}
  .sjs-stats-inner{grid-template-columns:1fr 1fr;gap:32px 0}
  .sjs-stat:nth-child(3){border-left:none}
  .sjs-stat-num{font-size:40px}
  .sjs-about,.sjs-quote,.sjs-prog,.sjs-news,.sjs-campus,.sjs-portal{padding:68px 0}
  .sjs-ctasec{padding:0 0 68px}
  .sjs-sec-hdr{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
  .sjs-about-bento{grid-template-columns:1fr;grid-template-rows:none}
  .sjs-bc{min-height:230px}
  .sjs-bc-tall{grid-row:auto}
  .sjs-values{flex-direction:column;border-top:none}
  .sjs-value{flex-direction:row;justify-content:flex-start;border-left:none;border-top:1px solid rgba(255,255,255,.16);padding:16px 4px}
  .sjs-prog-grid{grid-template-columns:1fr}
  .sjs-prog-special{flex-direction:column;align-items:flex-start;gap:12px}
  .sjs-news-grid{grid-template-columns:1fr}
  .sjs-nc{height:320px}
  .sjs-campus-strip{grid-template-columns:1fr}
  .sjs-cp{height:220px}
  .sjs-portal-grid{grid-template-columns:1fr}
  .sjs-cta-box{grid-template-columns:1fr;padding:40px 26px;gap:28px}
  .sjs-cta-actions{align-items:flex-start}
}
@media(max-width:480px){
  .sjs-hero-cta{flex-direction:column;align-items:stretch}
  .sjs-btn-primary,.sjs-btn-ghost{justify-content:center}
  .sjs-cta-phone{font-size:25px}
}