/* SnapAcademy. Every rule is scoped under .sa so the site template stays untouched.
   Palette 2 "Creme & Noir" + brand orange. */
.sa{
  --sa-bg:#f7f5f1;--sa-surface:#fff;--sa-ink:#1a1a1a;--sa-ink-2:#4a4a48;--sa-muted:#8a857e;
  --sa-line:#eceae5;--sa-brand:#ea7318;--sa-brand-ink:#b8560a;--sa-brand-soft:#fdebd9;
  --sa-sage:#5f8a6a;--sa-sage-soft:#e3ede5;--sa-sand:#efe9e0;--sa-sand-2:#e4dbcd;
  --sa-shadow:0 6px 22px rgba(40,30,20,.06);
  --sa-serif:'Fraunces',Georgia,serif;--sa-label:'Poppins','Segoe UI',sans-serif;
  --sa-body:'DM Sans','Segoe UI',system-ui,sans-serif;--sa-thai:'Sarabun','Leelawadee UI',Tahoma,sans-serif;
  background:var(--sa-bg);color:var(--sa-ink);font:15px/1.55 var(--sa-body);
  padding-bottom:40px;overflow-x:clip;
}
.sa *,.sa *::before,.sa *::after{box-sizing:border-box}
.sa a{color:inherit;text-decoration:none}
.sa p{margin:0}
.sa h1,.sa h2,.sa h3{font-family:var(--sa-serif);font-weight:700;color:var(--sa-ink);text-wrap:balance;margin:0;letter-spacing:-.01em;text-transform:none}
.sa :focus-visible{outline:2px solid var(--sa-brand);outline-offset:2px}
.sa [hidden]{display:none!important}
.sa-wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.sa .sa-th{font-family:var(--sa-thai)}
.sa-eyebrow{display:inline-block;font:600 11px/1.3 var(--sa-label);letter-spacing:.12em;text-transform:uppercase;color:var(--sa-brand-ink)}
.sa-small{font-size:13px;color:var(--sa-ink-2)}
.sa-small a{color:var(--sa-brand-ink);text-decoration:underline}
.sa-i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sa-i-xs{width:12px;height:12px}

/* Buttons and badges */
.sa .sa-btn{display:inline-flex;align-items:center;gap:8px;border-radius:26px;padding:11px 22px;font:600 14px/1 var(--sa-label);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
.sa .sa-btn:hover{transform:translateY(-1px)}
.sa .sa-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sa .sa-btn-primary{background:var(--sa-brand);color:#fff}
.sa .sa-btn-dark{background:var(--sa-ink);color:#fff}
.sa .sa-btn-outline{border-color:var(--sa-ink);color:var(--sa-ink);background:transparent}
.sa .sa-btn-done{background:var(--sa-sage-soft);color:var(--sa-sage);cursor:default}
.sa .sa-btn-done:hover{transform:none}
.sa .sa-btn:disabled{opacity:1}
.sa-badge{display:inline-flex;align-items:center;gap:5px;border-radius:18px;padding:4px 10px;font:600 10.5px/1.2 var(--sa-label);letter-spacing:.02em}
.sa-badge svg{stroke:currentColor;fill:none;stroke-width:2}
.sa-b-soft{background:var(--sa-brand-soft);color:var(--sa-brand-ink)}
.sa-b-sage{background:var(--sa-sage-soft);color:var(--sa-sage)}
.sa-b-ink{background:var(--sa-ink);color:#fff}
.sa-b-line{border:1px solid var(--sa-line);color:var(--sa-ink-2)}

/* Sub-navigation (sits under the site header, does not replace it) */
.sa-nav{background:var(--sa-surface);border-bottom:1px solid var(--sa-line)}
.sa-nav .sa-wrap{display:flex;align-items:center;gap:24px;min-height:54px;overflow-x:auto;scrollbar-width:none}
.sa-nav .sa-wrap::-webkit-scrollbar{display:none}
.sa-nav a{font:500 13px var(--sa-label);color:var(--sa-ink-2);white-space:nowrap}
.sa-nav a:hover{color:var(--sa-ink)}
.sa .sa-brand{display:flex;align-items:center;gap:8px;font:700 17px var(--sa-serif);color:var(--sa-ink)}
.sa-mark{width:26px;height:26px;border-radius:8px;background:var(--sa-brand);display:grid;place-items:center;color:#fff}
.sa-mark svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linejoin:round}

/* Hero */
.sa-hero{padding-block:40px 24px}
.sa-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch}
.sa-hero h1{font-size:clamp(30px,4.4vw,48px);line-height:1.06;margin-top:12px}
.sa-hero h1 em{font-style:normal;color:var(--sa-brand)}
.sa .sa-th-sub{font-size:17px;color:var(--sa-ink-2);margin-top:10px}
.sa-lead{color:var(--sa-ink-2);max-width:54ch;margin:14px 0 22px!important}
.sa-ctas{display:flex;gap:10px;flex-wrap:wrap}
.sa-facts{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
.sa-facts div{font:500 12px var(--sa-label);color:var(--sa-muted)}
.sa-facts strong{display:block;font:700 22px var(--sa-serif);color:var(--sa-ink);font-variant-numeric:tabular-nums}

.sa-resume{background:var(--sa-surface);border-radius:18px;box-shadow:var(--sa-shadow);padding:20px;display:flex;flex-direction:column;gap:14px}
.sa-resume-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sa-resume .sa-thumb{aspect-ratio:16/9}
.sa-resume h3{font-size:19px}
.sa .sa-muted-th{color:var(--sa-ink-2);font-size:14px}
.sa-resume-meta{display:flex;justify-content:space-between;gap:10px;font:500 12px var(--sa-label);color:var(--sa-muted)}
.sa-resume-intro{justify-content:center}
.sa-how{margin:0;padding-left:20px;display:grid;gap:12px;color:var(--sa-ink-2)}
.sa-how strong{color:var(--sa-ink);font-weight:700}
.sa-promo{position:relative;border-radius:14px;overflow:hidden;background:#f9f5ef;aspect-ratio:4/3}
.sa-promo video{display:block;width:100%;height:100%;object-fit:cover}
.sa .sa-promo-snd{position:absolute;right:10px;top:10px;width:40px!important;height:40px!important;min-width:0!important;padding:0!important;margin:0;border:0!important;border-radius:50%!important;background:rgba(31,41,46,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.sa .sa-promo-snd:hover,.sa .sa-promo-snd:focus-visible{background:var(--sa-brand)}
.sa-promo-snd .sa-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sa-promo-snd[aria-pressed="true"] .sa-snd-off,.sa-promo-snd[aria-pressed="false"] .sa-snd-on{display:none}
.sa-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sa-progress{height:6px;background:var(--sa-sand);border-radius:6px;overflow:hidden}
.sa-progress i{display:block;height:100%;background:var(--sa-brand);border-radius:6px;transition:width .4s}
.sa-progress-sm{height:4px}

/* Thumbnails: tinted ground + line art */
.sa-thumb{position:relative;border-radius:14px;overflow:hidden;background:var(--sa-sand);max-width:100%}
.sa-art{position:absolute;inset:0;display:grid;place-items:center}
.sa-art svg{width:34%;height:auto;stroke:var(--sa-ink);opacity:.78;fill:none;stroke-width:1.4;stroke-linejoin:round}
.sa-thumb.t1{background:linear-gradient(135deg,#f6dcc2,#efe9e0)}
.sa-thumb.t2{background:linear-gradient(135deg,#dfe9e1,#efe9e0)}
.sa-thumb.t3{background:linear-gradient(135deg,#efe3cf,#e8dccb)}
.sa-thumb.t4{background:linear-gradient(135deg,#f3e3d6,#e9dfd3)}
.sa-dur{position:absolute;right:10px;bottom:10px;background:rgba(26,26,26,.82);color:#fff;border-radius:10px;padding:3px 8px;font:600 10.5px var(--sa-label)}
.sa-play{position:absolute;left:12px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--sa-brand);display:grid;place-items:center}
.sa-play svg{width:12px;height:12px;fill:#fff;margin-left:2px}

/* Sections */
.sa-block{padding-block:26px}
.sa-sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sa-sec-head h2{font-size:26px}
.sa-sec-head p{color:var(--sa-ink-2);margin-top:6px;max-width:60ch}

/* OTOP path */
.sa-path{background:var(--sa-surface);border-radius:18px;box-shadow:var(--sa-shadow);padding:24px}
.sa-path-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.sa-path-top h2{font-size:22px;margin-top:4px}
.sa .sa-h-th{font:600 16px var(--sa-thai);color:var(--sa-ink-2);margin-left:6px}
.sa-sub{color:var(--sa-muted);font-size:13px;margin-top:4px!important}
.sa-steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));list-style:none;margin:0;padding:0}
.sa-steps li{position:relative;padding-right:12px}
.sa-steps li::before{content:"";position:absolute;top:17px;left:36px;right:0;height:2px;background:var(--sa-line)}
.sa-steps li:last-child::before{display:none}
.sa-steps li.done::before{background:var(--sa-brand)}
.sa-dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--sa-label);background:var(--sa-bg);border:2px solid var(--sa-line);color:var(--sa-muted);position:relative;z-index:1}
.sa-dot svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sa-steps .done .sa-dot{background:var(--sa-brand);border-color:var(--sa-brand)}
.sa-steps .now .sa-dot{border-color:var(--sa-brand);color:var(--sa-brand-ink);background:var(--sa-brand-soft)}
.sa .sa-steps h3{font:600 14px/1.3 var(--sa-label);margin:12px 0 3px;letter-spacing:0}
.sa-steps h3 a:hover{color:var(--sa-brand-ink)}
.sa-steps .sa-th{font-size:13px;color:var(--sa-ink-2)}
.sa-m{font:500 11.5px var(--sa-label);color:var(--sa-muted);margin-top:6px!important}
.sa-path-foot{display:flex;gap:14px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--sa-line);flex-wrap:wrap;font-size:13px;color:var(--sa-ink-2)}
.sa-cert{display:flex;align-items:center;gap:10px}
.sa-cert strong{font:600 13px var(--sa-label);color:var(--sa-ink)}
.sa-seal{width:40px;height:40px;border-radius:50%;border:2px dashed var(--sa-brand);display:grid;place-items:center;color:var(--sa-brand-ink)}
.sa-seal svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round}
.sa-cert.is-earned .sa-seal{background:var(--sa-brand);border-style:solid;color:#fff}
.sa-push{margin-left:auto}

/* Catalogue */
.sa-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sa .sa-chip{border:1px solid var(--sa-line);background:var(--sa-surface);color:var(--sa-ink-2);border-radius:20px;padding:7px 14px;font:500 12.5px var(--sa-label);cursor:pointer}
.sa .sa-chip[aria-pressed="true"]{background:var(--sa-ink);color:#fff;border-color:var(--sa-ink)}
.sa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sa-card{background:var(--sa-surface);border-radius:16px;box-shadow:var(--sa-shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s}
.sa-card:hover{transform:translateY(-2px)}
.sa-card .sa-thumb{border-radius:0;aspect-ratio:16/10}
.sa-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.sa-tags{display:flex;gap:6px;flex-wrap:wrap}
.sa .sa-card h3{font:600 15.5px/1.3 var(--sa-label);letter-spacing:0}
.sa-card .sa-th{font-size:13px;color:var(--sa-ink-2);line-height:1.4}
.sa-card-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--sa-line);font:500 11.5px var(--sa-label);color:var(--sa-muted)}
.sa-pts{color:var(--sa-brand-ink);display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.sa-pts svg{stroke:currentColor;fill:none;stroke-width:2}

/* Live + coordinators */
.sa-two{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.sa-live{background:var(--sa-ink);color:#f3efe8;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px}
.sa-live .sa-eyebrow{color:var(--sa-brand)}
.sa .sa-live h3{font-size:23px;color:#fff}
.sa-live p{opacity:.82}
.sa-live-date{display:flex;gap:16px;align-items:center}
.sa-cal{width:62px;border-radius:12px;background:#f7f5f1;color:var(--sa-ink);text-align:center;overflow:hidden;flex:none}
.sa-cal span{display:block;background:var(--sa-brand);color:#fff;font:600 10px/1 var(--sa-label);padding:5px 0;letter-spacing:.1em}
.sa-cal b{display:block;font:700 26px/1.3 var(--sa-serif)}
.sa-agenda{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;opacity:.9}
.sa-teach{border:1.5px dashed var(--sa-sand-2);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sa-teach h3{font-size:20px}
.sa-teach p{color:var(--sa-ink-2)}

/* Lesson page */
.sa-crumbs{font:500 12.5px var(--sa-label);color:var(--sa-muted);padding-block:18px 10px}
.sa-crumbs a:hover{color:var(--sa-ink)}
.sa-course-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.sa-player{border-radius:18px;overflow:hidden;background:#1a1a1a;aspect-ratio:16/9;position:relative;max-width:100%}
.sa-player iframe,.sa-player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.sa-player .sa-thumb{position:absolute;inset:0;border-radius:0}
.sa-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:20px;text-align:center}
.sa-soon span{display:inline-flex;align-items:center;gap:8px;background:rgba(26,26,26,.86);color:#fff;border-radius:20px;padding:8px 16px;font:600 13px var(--sa-label)}
.sa-soon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.sa-soon small{font:500 12px var(--sa-label);color:var(--sa-ink-2);background:rgba(255,255,255,.75);border-radius:10px;padding:3px 10px}
.sa-lesson-head{margin-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.sa-lesson-head h1{font-size:clamp(24px,3vw,32px);margin-top:4px}
.sa .sa-h1-th{font-size:16px;color:var(--sa-ink-2);margin-top:6px}
.sa-lesson-nav{display:flex;gap:8px;flex-wrap:wrap}
.sa .sa-lesson-nav svg{width:15px;height:15px}
.sa-flash{margin-top:14px!important;background:var(--sa-sage-soft);color:var(--sa-ink);border-radius:12px;padding:10px 14px;font-size:14px}
.sa-flash a{color:var(--sa-brand-ink);text-decoration:underline;font-weight:600}
.sa-lesson-body{padding-top:20px;display:grid;gap:16px}
.sa-lesson-body > p{color:var(--sa-ink-2);max-width:70ch;font-size:15.5px}
.sa-todo{background:var(--sa-surface);border-radius:16px;box-shadow:var(--sa-shadow);padding:18px 20px}
.sa .sa-todo h2{font:600 14.5px var(--sa-label);margin-bottom:12px;display:flex;align-items:center;gap:8px;letter-spacing:0}
.sa-todo-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sa-todo-cols:has(> ol:only-child){grid-template-columns:1fr}
.sa-todo ol{margin:0;padding-left:20px;display:grid;gap:7px;color:var(--sa-ink-2);font-size:14px}
.sa-action{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--sa-brand-soft);border-radius:16px;padding:16px 20px}
.sa-action strong{font:600 14.5px var(--sa-label);display:block}
.sa-action span{font-size:13px;color:var(--sa-ink-2)}
.sa-next{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;border:1px solid var(--sa-line);border-radius:14px;padding:14px 18px;background:var(--sa-surface)}
.sa-next span{font:600 11px var(--sa-label);letter-spacing:.1em;text-transform:uppercase;color:var(--sa-muted)}
.sa-next strong{font:600 15px var(--sa-label);grid-column:1}
.sa-next svg{grid-row:1/span 2;grid-column:2;width:20px;height:20px;stroke:var(--sa-brand);fill:none;stroke-width:2}
.sa-next:hover{border-color:var(--sa-brand)}

.sa-syllabus{background:var(--sa-surface);border-radius:18px;box-shadow:var(--sa-shadow);overflow:hidden;position:sticky;top:90px}
.sa-syl-head{padding:18px 20px;border-bottom:1px solid var(--sa-line)}
.sa-syl-head h2{font-size:17px;margin-top:6px}
.sa-syl-head .sa-th{font-size:13.5px;color:var(--sa-ink-2);margin-top:2px}
.sa-syl-m{display:flex;justify-content:space-between;font:500 12px var(--sa-label);color:var(--sa-muted);margin:12px 0 8px}
.sa-module{border-bottom:1px solid var(--sa-line)}
.sa-module:last-of-type{border-bottom:0}
.sa-module summary{list-style:none;padding:13px 20px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;font:600 13.5px var(--sa-label)}
.sa-module summary::-webkit-details-marker{display:none}
.sa-module summary small{font-weight:500;color:var(--sa-muted);white-space:nowrap}
.sa-module ul{list-style:none;margin:0;padding:0 0 8px}
.sa-module li a{display:flex;gap:10px;align-items:center;padding:8px 20px;font-size:13.5px;color:var(--sa-ink-2)}
.sa-module li a:hover{background:var(--sa-bg)}
.sa-module li.cur a{background:var(--sa-brand-soft);color:var(--sa-ink);font-weight:500}
.sa-lt{flex:1}
.sa-tm{font:500 11.5px var(--sa-label);color:var(--sa-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sa-st{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--sa-sand-2);flex:none;display:grid;place-items:center}
.sa-st.ok{background:var(--sa-sage);border-color:var(--sa-sage)}
.sa-st.ok svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sa-st.go{border-color:var(--sa-brand);background:var(--sa-brand)}
.sa-st.go svg{width:8px;height:8px;fill:#fff;margin-left:1px}
.sa-syl-foot{padding:14px 20px;background:var(--sa-bg);display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--sa-ink-2);border-top:1px solid var(--sa-line)}
.sa-syl-foot svg{width:16px;height:16px;stroke:var(--sa-brand);fill:none;stroke-width:1.8;flex:none}

/* Super User edit form */
.sa-edit{margin-top:26px;border:1.5px dashed var(--sa-sand-2);border-radius:16px;padding:14px 18px;background:var(--sa-surface)}
.sa-edit summary{cursor:pointer;font:600 13px var(--sa-label);display:flex;gap:8px;align-items:center;color:var(--sa-ink-2)}
.sa-edit summary svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.sa-edit form{margin-top:14px;display:grid;gap:14px;justify-items:start}
.sa-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.sa-edit label{display:grid;gap:4px;font:500 12px var(--sa-label);color:var(--sa-ink-2)}
.sa-edit .sa-span2{grid-column:span 2}
.sa-edit .sa-check{display:flex;align-items:center;gap:8px;align-self:end}
.sa-edit input[type=text],.sa-edit input[type=url],.sa-edit input[type=number],.sa-edit textarea{width:100%;border:1px solid var(--sa-line);border-radius:10px;padding:8px 10px;font:14px var(--sa-body);color:var(--sa-ink);background:var(--sa-bg)}

@media (max-width:980px){
  .sa-grid{grid-template-columns:repeat(2,1fr)}
  .sa-hero-grid,.sa-two,.sa-course-grid{grid-template-columns:1fr}
  .sa-syllabus{position:static}
  .sa-steps{grid-template-columns:1fr;gap:18px}
  .sa-steps li{display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:0}
  .sa-steps li::before{top:36px;bottom:-18px;left:17px;right:auto;width:2px;height:auto}
  .sa-steps li .sa-dot{grid-row:span 3}
  .sa .sa-steps h3{margin-top:7px}
}
@media (max-width:600px){
  .sa-wrap{padding-inline:16px}
  .sa-grid,.sa-todo-cols,.sa-edit-grid{grid-template-columns:1fr}
  .sa-edit .sa-span2{grid-column:auto}
  .sa-push{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.sa .sa-btn,.sa-card,.sa-progress i{transition:none}}

/* Voice switch under the player (Thai / English) */
.sa .sa-vlang{display:flex;align-items:center;gap:6px;margin-top:10px;font:600 12px var(--label,Poppins,sans-serif);color:var(--muted,#8a857e)}
.sa .sa-vlang>span{margin-right:4px;text-transform:uppercase;letter-spacing:.08em}
.sa .sa-vlang button{border:1px solid var(--line,#eceae5);background:var(--surface,#fff);color:var(--ink-2,#4a4a48);border-radius:16px;padding:5px 14px;font:inherit;cursor:pointer}
.sa .sa-vlang button.on{background:var(--ink,#1a1a1a);border-color:var(--ink,#1a1a1a);color:#fff}

/* Language switch in the SnapAcademy bar (same choice as the seller dashboard) */
.sa-nav .sa-lang{margin-left:auto;display:flex;flex:none;border:1px solid var(--sa-line);border-radius:18px;overflow:hidden}
.sa-nav .sa-lang a{padding:5px 13px;font:600 12px var(--sa-label);color:var(--sa-ink-2)}
.sa-nav .sa-lang a[lang="th"]{font-family:var(--sa-thai);font-size:13px}
.sa-nav .sa-lang a.on{background:var(--sa-ink);color:#fff}

/* Thai page: Thai font everywhere (Fraunces/Poppins have no Thai glyphs), no letter-spacing on Thai capitals */
.sa.sa-lang-th :is(h1,h2,h3,h4,p,li,a,button,span,strong,small,summary,label,div){font-family:var(--sa-thai)}
.sa.sa-lang-th :is(h1,h2,h3){font-weight:600;line-height:1.35}
.sa.sa-lang-th .sa-eyebrow{letter-spacing:0;text-transform:none;font-size:13px}
.sa.sa-lang-th p,.sa.sa-lang-th li{line-height:1.75}
.sa.sa-lang-th .sa-brand{font-family:var(--sa-serif,'Fraunces',Georgia,serif)}

/* Course thumbnail picture (images/snapacademy/thumbs/<slug>.jpg) */
.sa .sa-thumb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sa .sa-thumb-img .sa-dur,.sa .sa-thumb-img .sa-play{z-index:1}

/* Help-centre search under the SnapAcademy bar */
.sa-search{background:var(--sa-surface);border-bottom:1px solid var(--sa-line);padding:12px 0}
.sa-search-box{position:relative;max-width:640px}
.sa-search-box>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--sa-muted);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.sa-search-box input{width:100%;box-sizing:border-box;border:1px solid var(--sa-line);border-radius:24px;padding:11px 16px 11px 42px;font:500 14px var(--sa-body);color:var(--sa-ink);background:var(--sa-bg)}
.sa-search-box input:focus{outline:none;border-color:var(--sa-brand);background:#fff;box-shadow:0 0 0 3px var(--sa-brand-soft)}
.sa-search-res{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--sa-line);border-radius:16px;box-shadow:0 14px 40px rgba(40,30,20,.14);z-index:30;max-height:70vh;overflow:auto;padding:6px}
.sa-search-res a{display:block;padding:10px 14px;border-radius:10px;color:var(--sa-ink);text-decoration:none}
.sa-search-res a:hover,.sa-search-res a.on{background:var(--sa-brand-soft)}
.sa-search-res small{display:block;font:600 11px var(--sa-label);color:var(--sa-brand-ink);margin-bottom:2px}
.sa-search-res strong{display:block;font:600 14.5px var(--sa-label)}
.sa-search-res span{display:block;font-size:13px;color:var(--sa-ink-2);margin-top:3px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sa-search-res mark{background:#fde7c7;color:inherit;border-radius:3px;padding:0 1px}
.sa-search-none{margin:0;padding:14px;color:var(--sa-muted);font-size:13.5px}
.sa.sa-lang-th .sa-search-box input,.sa.sa-lang-th .sa-search-res strong,.sa.sa-lang-th .sa-search-res small{font-family:var(--sa-thai)}

/* ── Two learning paths: tabs, banner, path ───────────────────────────── */
.sa-track-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 22px}
.sa .sa-track-tabs button{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 18px!important;border-radius:16px!important;
  border:2px solid var(--sa-line)!important;background:var(--sa-surface)!important;color:var(--sa-ink)!important;cursor:pointer;box-shadow:var(--sa-shadow);min-width:0}
.sa .sa-track-tabs button[aria-selected="true"]{border-color:var(--sa-brand)!important;background:var(--sa-brand-soft)!important}
.sa-track-tabs img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--sa-sand);flex-shrink:0}
.sa-track-tabs strong{display:block;font:600 17px var(--sa-label)}
.sa-track-tabs small{display:block;font-size:13px;color:var(--sa-muted);margin-top:2px}
.sa-track[hidden]{display:none}
.sa-banner{position:relative;display:grid;grid-template-columns:1fr 300px;align-items:end;border-radius:22px;overflow:hidden;margin-bottom:22px;min-height:330px}
.sa-banner-txt{padding:34px 0 34px 38px;position:relative;z-index:1;align-self:center}
.sa .sa-banner h2{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:10px 0 10px;max-width:22ch}
.sa .sa-banner p{max-width:56ch;margin:0 0 16px}
.sa-banner-chips{list-style:none;margin:0 0 20px!important;padding:0!important;display:flex;flex-wrap:wrap;gap:8px}
.sa-banner-chips li{display:inline-flex;align-items:center;gap:6px;border-radius:30px;padding:6px 12px;font:500 13px var(--sa-label)}
.sa-banner-img{width:300px;height:auto;display:block;align-self:end;position:relative;z-index:1}
/* OTOP : memes tons chauds que la banniere de /otop, logo OTOP, photo de producteurs a droite */
.sa-banner-otop{background:linear-gradient(110deg,#fff8ef 0%,#fbecd9 45%,#f6dcc0 100%);color:#3b2418;grid-template-columns:1fr 46%;align-items:stretch}
.sa .sa-banner-otop h2{color:#3b2418}
.sa .sa-banner-otop p{color:#5c4334}
.sa .sa-banner-otop .sa-eyebrow{color:var(--sa-brand-ink)}
.sa-banner-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sa-banner-logo img{width:56px;height:56px;border-radius:50%;display:block}
.sa-banner-logo span{font:600 15px var(--sa-label);color:#5a3424;letter-spacing:.5px}
.sa-banner-otop .sa-banner-chips li{background:#fff;color:#5a3424;box-shadow:0 2px 8px rgba(90,52,36,.08)}
.sa-banner-otop .sa-banner-chips .sa-i{stroke:var(--sa-brand)}
.sa .sa-banner-otop .sa-btn-light{border-color:#5a3424;color:#5a3424}
.sa-banner-photo{width:100%;height:100%;min-height:330px;object-fit:cover;object-position:30% 50%;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.sa-track-tabs img.is-logo{object-fit:contain;background:none}
/* Vendeurs : creme et orange de la marque */
.sa-banner-seller{background:linear-gradient(120deg,#fdebd9 0%,#f7f5f1 55%,#e3ede5 100%);color:var(--sa-ink)}
.sa-banner-seller .sa-banner-chips li{background:#fff;color:var(--sa-ink-2);box-shadow:0 2px 8px rgba(40,30,20,.06)}
.sa-banner-seller .sa-banner-chips .sa-i{stroke:var(--sa-sage)}
.sa-banner-seller::after{content:"";position:absolute;right:20px;bottom:-140px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.7)}
/* catalogue : un cours d'un seul parcours n'apparait que dans ce parcours */
.sa-grid[data-active="otop"] .sa-card[data-track="general"],.sa-grid[data-active="seller"] .sa-card[data-track="otop"]{display:none}
@media (max-width:760px){
  .sa-track-tabs{grid-template-columns:1fr}
  .sa-banner{grid-template-columns:1fr;min-height:0}
  .sa-banner-txt{padding:26px 22px 0}
  .sa-banner-img{width:190px;justify-self:end;margin-top:-10px}
  .sa-banner-otop{grid-template-columns:1fr}
  .sa-banner-photo{min-height:200px;height:220px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%);mask-image:linear-gradient(180deg,transparent 0,#000 25%)}
}
/* parcours de plus de 5 cours : toujours sur une ligne, texte un peu plus petit */
.sa .sa-steps.is-long h3{font-size:13px}
.sa-steps.is-long .sa-m{font-size:12px}