/* Course landing page — the .std-* design system.
 *
 * Lifted verbatim out of templates/standard.php (it was one 39 KB inline
 * <style> block, re-sent on every course view and never cacheable). The
 * <link> that replaces it sits in exactly the same place in the document, so
 * the cascade order is unchanged.
 *
 * The per-course colour tone (--primary*, --cta*, --hero-glow-rgb) is the one
 * thing that cannot be static; it stays inline in the template as a small
 * :root block right after this file loads. Those token names deliberately do
 * not appear here, so neither can overwrite the other.
 *
 * Also loaded by the /training landing pages, which use the same components.
 */

:root{
    --ink:#0B1220;
    --ink-soft:#1E293B;
    --muted:#64748B;
    --line:#E5E7EB;
    --bg:#FAFAF7;
    --surface:#FFFFFF;
    --gold:#C8A24A;
    --gold-soft:#F5EBC8;
    --success:#10B981;
    /* คู่แฝดเวอร์ชัน "ตัวอักษร" ของสองสีแบรนด์ — ตัวเดิมสว่างเกินกว่าจะอ่านออก
       เมื่อเป็นข้อความบนพื้นสว่าง (คอนทราสต์ 2.3-2.5 ตกเกณฑ์ WCAG AA)
       สีเดิมยังใช้กับเส้น/พื้น/ไอคอนที่ไม่ต้องอ่าน ส่วนตัวนี้ใช้ตอนเป็นตัวหนังสือ */
    --gold-ink:#7A5B0F;
    --success-ink:#0E7C5A;
    --danger:#DC2626;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow-md:0 4px 14px rgba(15,23,42,.06), 0 10px 30px rgba(15,23,42,.08);
    --shadow-lg:0 12px 40px rgba(15,23,42,.10), 0 30px 80px rgba(15,23,42,.12);
    --nav-h:64px;
    --container-x:24px;
    --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:'Prompt','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.container{max-width:1240px;margin:0 auto;padding:0 var(--container-x)}

/* Hide scrollbar but allow scroll (used by tabs) */
.std-noscrollbar{scrollbar-width:none;-ms-overflow-style:none}
.std-noscrollbar::-webkit-scrollbar{display:none}

/* ── Navbar ─────────────────────────────────────────────── */
.std-nav{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid rgba(15,23,42,.06);
}
.std-nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--nav-h);gap:14px;
}
.std-logo{
    font-family:'Inter',sans-serif;font-weight:900;
    font-size:clamp(1.15rem,3vw,1.35rem);
    letter-spacing:-.03em;color:#0B1D33;flex-shrink:0;
}
/* Brand colors pinned to match the homepage logo — never the per-course tone vars */
.std-logo span{color:#1E40AF}
.std-nav-links{display:flex;gap:28px;list-style:none}
.std-nav-links a{color:var(--ink-soft);font-weight:500;font-size:.94rem;transition:color .2s}
.std-nav-links a:hover{color:var(--primary)}
.std-cta-nav{
    padding:10px 20px;border-radius:12px;
    font-weight:700;font-size:.92rem;
    background:var(--ink);color:#fff;
    transition:transform .15s,box-shadow .15s;
    border:1px solid var(--ink);
    cursor:pointer;flex-shrink:0;
    white-space:nowrap;
}
/* Several CTAs are <button data-ask-open> rather than <a> (they open the ask
   dialog, they don't navigate). Buttons don't inherit the page font and
   re-apply their own chrome — iOS in particular reshapes a push-button. */
button.std-cta-nav,
button.std-btn{font-family:inherit;-webkit-appearance:none;appearance:none;line-height:inherit}
.std-cta-nav:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.std-cta-nav.is-success{background:var(--success);border-color:var(--success)}
.std-cta-nav.is-muted{background:#5F6E85;border-color:#5F6E85;cursor:not-allowed}
@media (max-width:880px){.std-nav-links{display:none}}

/* ── Hero ───────────────────────────────────────────────── */
.std-hero{
    position:relative;overflow:hidden;
    background:
        radial-gradient(900px 400px at 80% -10%, rgba(var(--hero-glow-rgb),.08), transparent 60%),
        radial-gradient(700px 360px at -10% 110%, rgba(var(--cta-rgb),.10), transparent 60%),
        linear-gradient(180deg,#FFFFFF 0%, #FAFAF7 100%);
    padding:clamp(36px,5vw,64px) 0 clamp(32px,4vw,56px);
    border-bottom:1px solid var(--line);
}
.std-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:"head head" "copy media";
    column-gap:clamp(28px,4vw,56px);row-gap:clamp(8px,1.2vw,14px);
    align-items:center;
}
.std-hero-head{grid-area:head}
.std-hero-head .std-h1{margin-bottom:0}
.std-hero-copy{grid-area:copy;align-self:start}
.std-hero-media{grid-area:media}
@media (max-width:980px){
    .std-hero-grid{grid-template-columns:1fr;grid-template-areas:none;gap:28px}
    .std-hero-head,.std-hero-copy,.std-hero-media{grid-area:auto}
    .std-hero-head{margin-bottom:-12px} /* gap 28px → effective ~16px under the title */
}

.std-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--cta-soft);
    color:var(--cta-text);
    padding:7px 14px;border-radius:999px;
    font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    margin-bottom:18px;
    max-width:100%;
}
.std-h1{
    font-size:clamp(1.55rem,3.2vw + 0.5rem,2.6rem);
    font-weight:800;letter-spacing:-.02em;line-height:1.2;
    color:var(--ink);
    margin-bottom:16px;
    word-break:break-word;
}
.std-h1 em{font-style:normal;background:linear-gradient(120deg,var(--primary) 0%,var(--primary-glow) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* หัวข้อ H1 อยู่บรรทัดเดียวทุกขนาดจอ — js/course-title-fit.js วัดความกว้างจริง
   แล้วคำนวณ font-size ให้พอดี ก่อนติดคลาส .is-fitted ไว้ที่ H1
   ไม่มี JS หรือจอแคบจนตัวหนังสือเล็กเกินอ่าน = ตกกลับไปตัดบรรทัดแบบเดิม */
.std-h1.is-fitted{white-space:nowrap;word-break:normal;overflow-wrap:normal}
/* จอแคบจนบรรทัดเดียวเล็กเกินอ่าน → หักสองบรรทัดตามรอย " : " จัดกึ่งกลาง
   (สคริปต์เดียวกันเป็นคนติดคลาสและย่อ font-size ให้บรรทัดยาวสุดพอดีจอ) */
.std-h1.is-split{text-align:center;word-break:normal;overflow-wrap:normal}
.std-h1.is-split .t-seg{display:block;white-space:nowrap}
.std-h1.is-split .t-sep{display:none}
.std-h1-probe{
    position:absolute!important;left:-99999px!important;top:0!important;
    visibility:hidden!important;pointer-events:none;
    white-space:nowrap!important;width:auto!important;max-width:none!important;
    margin:0!important;padding:0!important;
}
.std-tagline{font-size:clamp(.96rem,1.4vw + 0.4rem,1.075rem);color:var(--muted);margin-bottom:24px;max-width:62ch}

/* แถบเครื่องมือ AI ใต้คำโปรย — ชิปขาวเรียบ จุดสีตามแบรนด์ของแต่ละเครื่องมือ
   (มีไฟล์โลโก้จริงเมื่อไหร่ เปลี่ยน .dot เป็น <img> ในชิปเดิมได้เลย) */
.std-hero-tools{margin:-6px 0 24px}
.std-hero-tools-label{
    display:block;font-size:.74rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);margin-bottom:9px
}
.std-hero-tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.std-hero-tools li{
    display:inline-flex;align-items:center;gap:6px;
    background:#fff;border:1px solid var(--line);border-radius:999px;
    padding:7px 12px;font-size:.83rem;font-weight:600;color:var(--ink-soft);
    box-shadow:var(--shadow-sm)
}
.std-hero-tools .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

/* แถบนี้ต้องจบในบรรทัดเดียว (เจ้าของขอ 2026-08-31) — ชิป 5 ใบเป็นชุดตายตัว
   แต่คอลัมน์ซ้ายของฮีโร่กว้างไม่เท่ากันในแต่ละจอ พอไม่พอดีก็ตกไปบรรทัดสอง
   ทำให้ "Google Drive" ไปห้อยอยู่ใบเดียว

   ช่วงจอโน้ตบุ๊ก (769-1279px) คอลัมน์แคบสุด จึงย่อชิปลงอีกขั้นเฉพาะช่วงนั้น
   วัดจริง: 1024px เหลือที่ว่าง 8px / 1152px เหลือ 63px — พอดีทั้งคู่
   ต่ำกว่า 769px ฮีโร่เปลี่ยนเป็นคอลัมน์เดียว ที่กว้างเหลือเฟือ ชิปจึงคงขนาดเดิม
   flex-wrap ยังอยู่เป็นตาข่ายกันตก — แคบผิดคาดเมื่อไหร่ยอมให้ตกบรรทัด ดีกว่าล้นจอ */
@media (min-width: 769px) and (max-width: 1279px) {
    .std-hero-tools ul{gap:4px}
    .std-hero-tools li{padding:6px 9px;gap:5px;font-size:.75rem}
    .std-hero-tools .dot{width:8px;height:8px}
}

.std-hero-meta{
    display:flex;flex-wrap:wrap;gap:14px 20px;
    padding:16px 18px;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-sm);
    margin-bottom:22px;
}
.std-meta-item{
    display:flex;align-items:center;gap:10px;
    font-size:.9rem;color:var(--ink-soft);
    min-width:0;
}
.std-meta-item .ico{
    width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
    background:linear-gradient(135deg,var(--primary-soft),var(--primary-soft-2));color:var(--primary);font-size:1rem;
}
.std-meta-item strong{font-weight:700;color:var(--ink)}
.std-stars{color:var(--gold);letter-spacing:1px;font-size:.92rem}

.std-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.std-btn{
    display:inline-flex;align-items:center;gap:10px;justify-content:center;
    padding:14px 24px;border-radius:14px;
    font-weight:700;font-size:1rem;font-family:inherit;
    border:none;cursor:pointer;text-align:center;line-height:1.2;
    transition:transform .15s ease,box-shadow .2s ease,filter .2s;
    min-height:48px; /* tap target */
}
.std-btn-primary{
    background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);
    color:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.std-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,23,42,.28)}
/* ปุ่มซื้อ: ส้มอำพันชุดเดียวกับปุ่มเข้าระบบบนแถบบน (.nmq-login-btn ใน navbar.css)
   — สดกว่าทองแบรนด์บนพื้นขาว และลูกค้าคุ้นสีนี้ในความหมาย "กดแล้วได้เข้า" */
.std-btn-gold{
    background:linear-gradient(135deg,#F59E0B 0%,#EA580C 100%);
    color:#fff;
    box-shadow:0 8px 22px rgba(234,88,12,.30);
}
.std-btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(234,88,12,.42)}
.std-btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.std-btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.std-btn-success{background:linear-gradient(135deg,#10B981,#059669);color:#fff;box-shadow:0 8px 22px rgba(16,185,129,.30)}
.std-btn-block{width:100%}
.std-btn[disabled],.std-btn.is-disabled{background:#5F6E85 !important;cursor:not-allowed;box-shadow:none;color:#fff}

/* Social proof — overlapping student avatars + trust line under the CTA */
.std-social-proof{display:flex;align-items:center;gap:12px;margin-top:16px}
.std-sp-avatars{display:flex;flex-shrink:0}
.std-sp-avatars img{
    width:38px;height:38px;border-radius:50%;object-fit:cover;
    border:2px solid #fff;box-shadow:var(--shadow-sm);
    margin-left:-10px;background:#E2E8F0;
}
.std-sp-avatars img:first-child{margin-left:0}
.std-sp-text{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
.std-sp-text strong{color:var(--ink);font-weight:800}
.std-instructor-row{display:flex;align-items:center;gap:12px;margin-top:16px}
.std-instructor-avatar{
    width:42px;height:42px;border-radius:50%;
    background:linear-gradient(135deg,#0F172A,#475569);
    color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem;
    border:2px solid #fff;box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.std-instructor-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.std-instructor-row small{color:var(--muted);font-size:.82rem;display:block}
.std-instructor-row strong{color:var(--ink);font-size:.96rem}

/* Hero media (video / image) */
.std-hero-media{
    position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;
    background:#0F172A;
    box-shadow:var(--shadow-lg);
}
.std-hero-media iframe,.std-hero-media video{width:100%;height:100%;border:0;display:block}
.std-hero-media .std-poster{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    transition:transform .4s ease;
}
.std-play-btn{
    position:absolute;inset:0;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(15,23,42,.05) 0%,rgba(15,23,42,.45) 100%);
    cursor:pointer;border:none;width:100%;
}
.std-play-btn .pulse{
    width:88px;height:88px;border-radius:50%;
    background:rgba(255,255,255,.95);color:#0F172A;
    display:grid;place-items:center;font-size:2rem;
    box-shadow:0 16px 40px rgba(0,0,0,.30);
    transition:transform .15s;
}
.std-play-btn:hover .pulse{transform:scale(1.06)}
.std-hero-media .badge-pill{
    position:absolute;left:16px;top:16px;
    padding:6px 12px;border-radius:999px;
    background:rgba(15,23,42,.78);color:#fff;
    font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    backdrop-filter:blur(8px);
}

/* ── Sticky local nav (anchors) ─────────────────────────── */
.std-tabs{
    position:sticky;top:var(--nav-h);z-index:30;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.std-tabs-inner{
    display:flex;gap:4px;overflow-x:auto;padding:4px 0;
    scrollbar-width:none;-ms-overflow-style:none;
}
.std-tabs-inner::-webkit-scrollbar{display:none}
.std-tab{
    padding:14px 18px;font-weight:600;font-size:.94rem;
    color:var(--muted);white-space:nowrap;
    border-bottom:2.5px solid transparent;
    transition:color .15s,border-color .15s;
    cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;
    font-family:inherit;
    flex-shrink:0;
}
.std-tab.is-active,.std-tab:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── Body Layout ────────────────────────────────────────── */
.std-body{padding:clamp(28px,4vw,48px) 0 clamp(40px,6vw,80px)}
.std-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,3vw,42px);align-items:start}
@media (max-width:980px){.std-grid{grid-template-columns:1fr}}

.std-section{margin-bottom:clamp(32px,4vw,48px);scroll-margin-top:calc(var(--nav-h) + 80px)}
.std-section h2{
    font-size:clamp(1.25rem,1.5vw + 0.5rem,1.65rem);
    font-weight:800;letter-spacing:-.01em;
    margin-bottom:16px;color:var(--ink);
    position:relative;padding-left:14px;line-height:1.3;
}
.std-section h2::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;
    background:linear-gradient(180deg,var(--gold) 0%,var(--primary) 100%);border-radius:4px;
}

/* Description card */
.std-prose{
    background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:clamp(20px,3vw,28px);box-shadow:var(--shadow-sm);
    color:var(--ink-soft);font-size:clamp(.96rem,1vw + 0.5rem,1.02rem);
}
.std-prose p{margin-bottom:14px}
.std-prose p:last-child{margin-bottom:0}

/* Feature highlights pulled from short_description */
.std-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
@media (max-width:560px){.std-features{grid-template-columns:1fr}}
.std-feature{
    display:flex;gap:12px;align-items:flex-start;
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.std-feature .ico{
    flex-shrink:0;width:36px;height:36px;border-radius:10px;
    background:var(--primary-tint);color:var(--primary);
    display:grid;place-items:center;font-size:1.05rem;
}
.std-feature p{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.5}

/* Curriculum (modules + lessons) */
.std-curric-summary{
    display:flex;gap:18px;flex-wrap:wrap;
    color:var(--muted);font-size:.92rem;margin-bottom:18px;
}
.std-curric-summary strong{color:var(--ink)}
.std-curric-summary span{display:inline-flex;align-items:center;gap:6px}

.std-module{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    margin-bottom:12px;overflow:hidden;transition:box-shadow .2s;
}
.std-module:hover{box-shadow:var(--shadow-sm)}
.std-module.is-open{box-shadow:var(--shadow-md)}
.std-module-head{
    display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;
    user-select:none;background:#fff;border:none;width:100%;text-align:left;font-family:inherit;
    transition:background .15s;
    min-width:0;
}
.std-module-head:hover{background:#FBFBF7}
.std-module-num{
    flex-shrink:0;width:32px;height:32px;border-radius:10px;
    background:var(--ink);color:#fff;display:grid;place-items:center;
    font-weight:700;font-size:.9rem;
}
.std-module-title{
    flex:1;min-width:0;
    font-weight:700;color:var(--ink);font-size:clamp(.95rem,1vw + 0.4rem,1.02rem);
    line-height:1.4;word-break:break-word;
}
.std-module-meta{color:var(--muted);font-size:.82rem;flex-shrink:0;white-space:nowrap}
.std-module-icon{transition:transform .25s;color:var(--muted);font-size:.95rem;flex-shrink:0}
.std-module.is-open .std-module-icon{transform:rotate(180deg)}
.std-lessons{
    list-style:none;border-top:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.std-module.is-open .std-lessons{max-height:2400px}
.std-lessons li{
    display:flex;align-items:center;gap:12px;padding:12px 18px;
    border-bottom:1px solid #F1F5F9;color:var(--ink-soft);font-size:.92rem;
    line-height:1.45;
}
.std-lessons li:last-child{border-bottom:none}
.std-lessons li .lesson-ico{
    width:28px;height:28px;border-radius:8px;
    background:#F1F5F9;color:var(--muted);
    display:grid;place-items:center;font-size:.85rem;
}
.std-lessons li.is-bonus{background:#FFFBEB}
.std-lessons li.is-bonus .lesson-ico{background:var(--gold);color:#fff}

/* ─── Bonus sections (Modules + Resources) ─── */
.std-section-bonus{
    background:linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%);
    border:1px solid var(--gold-soft);border-radius:18px;
    padding:clamp(20px,3vw,28px);box-shadow:var(--shadow-sm);
    position:relative;overflow:hidden;
}
/* Subtle decorative orb in the corner */
.std-section-bonus::after{
    content:"";position:absolute;top:-60px;right:-60px;
    width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(244,197,90,.35) 0%,rgba(244,197,90,0) 70%);
    pointer-events:none;
}
.std-section-bonus h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#7A5B0F;position:relative;z-index:1}
.std-section-bonus h2::before{
    background:linear-gradient(180deg,var(--gold) 0%,#92400E 100%);
}
.bonus-tag{
    display:inline-flex;align-items:center;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#C8962E,#F4C55A);color:#0B1D33;
    padding:3px 10px;border-radius:99px;
    font-size:.65rem;font-weight:800;letter-spacing:.6px;
    box-shadow:0 2px 6px rgba(200,150,46,.3);
}
/* Premium shine sweep across the EXCLUSIVE pill */
.bonus-tag::before{
    content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);
    animation:bonus-shine 3.5s ease-in-out infinite;
}
@keyframes bonus-shine{
    0%,40%   { left:-100%; }
    60%,100% { left:200%;  }
}
.bonus-tag-soft{
    background:#FEF3C7;color:#92400E;border:1px solid var(--gold);
    box-shadow:none;
}
.bonus-tag-soft::before{display:none}
.bonus-intro{color:#7A5B0F;font-size:.92rem;margin-bottom:16px;line-height:1.55;position:relative;z-index:1}

/* Bonus module heads — gold accent (overrides std-module bg) */
.std-module.is-bonus{background:#fff;border-color:var(--gold-soft);position:relative;z-index:1}
.std-module.is-bonus .std-module-head{background:#fff}
.std-module.is-bonus .std-module-head:hover{background:#FFFDF5}
.std-module.is-bonus .bonus-num{
    background:linear-gradient(135deg,var(--gold),#92400E);color:#fff;
    font-size:.95rem;box-shadow:0 2px 8px rgba(200,150,46,.35);
}
.bonus-pill{
    display:inline-block;margin-left:8px;
    background:linear-gradient(135deg,#C8962E,#F4C55A);color:#0B1D33;
    padding:2px 9px;border-radius:99px;
    font-size:.65rem;font-weight:800;letter-spacing:.6px;vertical-align:middle;
}

/* Bonus Resources list */
.bonus-resource-list{list-style:none;display:grid;gap:12px;padding:0;margin:0;position:relative;z-index:1}
.bonus-resource-item{
    display:flex;gap:14px;align-items:flex-start;
    background:#fff;border:1px solid var(--gold-soft);border-radius:14px;
    padding:14px 16px;
    transition:box-shadow .25s ease,transform .2s ease,border-color .25s ease;
    cursor:default;
}
.bonus-resource-item:hover{
    box-shadow:0 8px 24px rgba(200,150,46,.18);
    transform:translateY(-2px);
    border-color:var(--gold);
}
.bonus-resource-item:hover .br-type-ico{
    transform:scale(1.06) rotate(-3deg);
    box-shadow:0 4px 14px rgba(200,150,46,.45);
}
.br-type-ico{
    flex-shrink:0;width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,var(--gold),#92400E);color:#fff;
    display:grid;place-items:center;font-size:1.25rem;
    transition:transform .25s ease,box-shadow .25s ease;
    box-shadow:0 2px 8px rgba(200,150,46,.3);
}
.br-body{flex:1;min-width:0}
.br-title{font-weight:700;color:var(--ink);font-size:1rem;line-height:1.35;margin-bottom:4px;word-break:break-word}
.br-desc{color:var(--ink-soft);font-size:.86rem;line-height:1.55;margin-bottom:8px}
.br-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.br-type-tag{
    display:inline-flex;align-items:center;gap:5px;
    background:#F1F5F9;color:var(--ink-soft);
    padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:600;
}
.br-access{
    display:inline-flex;align-items:center;
    padding:3px 10px;border-radius:99px;
    font-size:.72rem;font-weight:700;letter-spacing:.3px;
}
.br-access.access-free{background:#DCFCE7;color:#166534}
.br-access.access-paid{background:#FEF3C7;color:#92400E}
.br-access.access-exclusive{background:linear-gradient(135deg,#0F172A,#475569);color:#F4C55A}

/* ─── Premium reveal animation (sections + items fade-up on scroll) ─── */
.std-reveal{
    opacity:0;transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease;
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform;
}
.std-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
    .std-reveal{opacity:1;transform:none;transition:none}
    .bonus-tag::before{animation:none;display:none}
    .bonus-resource-item:hover{transform:none}
}

/* Active-state highlight for sticky nav links */
.std-nav-links a.is-active{color:var(--ink);font-weight:700}

/* No-JS fallback — keep content visible if JS is disabled */
.no-js .std-reveal{opacity:1;transform:none}

/* Empty curriculum state */
.std-empty{
    text-align:center;padding:36px 22px;
    background:#fff;border:1.5px dashed var(--line);border-radius:14px;
    color:var(--muted);
}

/* Instructor card */
.std-instructor-card{
    display:flex;gap:22px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:clamp(20px,3vw,26px);box-shadow:var(--shadow-sm);
}
.std-instructor-card .avatar-lg{
    width:clamp(64px,8vw,84px);height:clamp(64px,8vw,84px);border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#0F172A,#475569);
    color:#fff;display:grid;place-items:center;
    font-weight:700;font-size:clamp(1.4rem,3vw,1.85rem);
    box-shadow:var(--shadow-sm);overflow:hidden;
}
.std-instructor-card .avatar-lg img{width:100%;height:100%;object-fit:cover;display:block}
.std-instructor-card h3{font-size:clamp(1.05rem,1.5vw + 0.3rem,1.2rem);margin-bottom:4px;font-weight:800;color:var(--ink)}
.std-instructor-card .role{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.std-instructor-card .desc{color:var(--ink-soft);font-size:.92rem;line-height:1.65}
@media (max-width:560px){.std-instructor-card{flex-direction:column;text-align:center;gap:16px}}

/* Reviews */
.std-rev-summary{
    display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:clamp(20px,3vw,26px);box-shadow:var(--shadow-sm);margin-bottom:16px;
}
.std-rev-big{text-align:center;min-width:0}
.std-rev-big .num{font-size:clamp(2.4rem,4vw,3rem);font-weight:800;line-height:1;color:var(--ink)}
.std-rev-big .stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-top:6px}
.std-rev-big small{color:var(--muted);font-size:.85rem;display:block;margin-top:4px}
.std-rev-bars{display:flex;flex-direction:column;gap:6px;min-width:0}
.std-rev-bar-row{display:grid;grid-template-columns:28px 1fr 36px;gap:10px;align-items:center;font-size:.84rem;color:var(--muted)}
.std-rev-bar{height:8px;background:#F1F5F9;border-radius:99px;overflow:hidden;min-width:0}
.std-rev-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#A88431);border-radius:99px}
@media (max-width:560px){
    .std-rev-summary{grid-template-columns:1fr;gap:18px;text-align:center}
    .std-rev-big{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px}
    .std-rev-big .num{font-size:2.2rem}
    .std-rev-big small{margin-top:0}
}

.std-rev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:680px){.std-rev-grid{grid-template-columns:1fr}}
/* ผนังรีวิวที่สลับใบไปเรื่อย ๆ (js/course-reviews-rotate.js)
   ทุกใบถูกพิมพ์ลงหน้า แต่โชว์เฉพาะใบที่มี is-shown ซึ่งฝั่ง PHP ใส่มาให้แล้ว
   ปิด JS ไว้จึงยังเห็นชุดแรกครบและนิ่ง — ไม่ใช่ตารางว่าง
   ใบในแถวเดียวกันสูงเท่ากัน เวลาสลับความสูงแถวจึงไม่กระตุก */
.std-rev-grid[data-rev-rotate]{align-items:stretch}
.std-rev-grid[data-rev-rotate] .std-rev-card{
    display:none;height:100%;
    opacity:1;transform:translateY(0);
    transition:opacity .56s ease, transform .56s ease
}
.std-rev-grid[data-rev-rotate] .std-rev-card.is-shown{display:block}
.std-rev-grid[data-rev-rotate] .std-rev-card.is-fading{opacity:0;transform:translateY(7px)}
@media (prefers-reduced-motion:reduce){
    .std-rev-grid[data-rev-rotate] .std-rev-card{transition:none}
}
.std-rev-card{
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;
    box-shadow:var(--shadow-sm);
}
.std-rev-card .head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.std-rev-card .std-rev-avatar{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-glow));
    color:#fff;font-weight:800;font-size:1.05rem;
    border:2px solid #fff;box-shadow:var(--shadow-sm);
}
.std-rev-card .std-rev-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.std-rev-card .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.std-rev-card .name{font-weight:700;color:var(--ink);font-size:.95rem}
.std-rev-card .stars{color:var(--gold);font-size:.92rem;letter-spacing:1px}
.std-rev-card .title{font-weight:600;color:var(--ink);font-size:.98rem;margin-bottom:6px}
.std-rev-card .body{color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.std-rev-card .reply{
    margin-top:12px;padding:12px 14px;border-radius:10px;
    background:#F8FAFC;border-left:3px solid var(--primary);
    font-size:.88rem;color:var(--ink-soft);
}
.std-rev-card .reply strong{color:var(--primary)}

/* ── Review spotlight (overview) — premium cards tinted to the course tone ──
   Accents ride the per-course --primary/--primary-glow (so Etsy = orange, etc.)
   and the dark panel is built from the page's own ink, not the homepage navy. */
.std-vox{
    /* Light card washed faintly with the course tone (not a lone dark band),
       so it stays in the page's light rhythm. Top margin separates it from
       the feature row above. */
    margin:clamp(28px,4vw,44px) 0 clamp(24px,3.5vw,36px);
    background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 6%,#fff) 0%,#fff 100%);
    border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
    box-shadow:var(--shadow-sm);
    border-radius:20px;padding:clamp(26px,3.5vw,40px) clamp(18px,2.5vw,32px);
    position:relative;overflow:hidden;
}
.std-vox::before{
    content:"";position:absolute;top:-40%;right:-10%;width:420px;height:420px;
    background:radial-gradient(circle,color-mix(in srgb,var(--primary) 12%,transparent) 0%,transparent 70%);
    pointer-events:none;
}
.std-vox-eyebrow{text-align:center;color:var(--primary);font-weight:800;font-size:.78rem;letter-spacing:3px;margin-bottom:10px;position:relative}
.std-vox-title{text-align:center;color:var(--ink);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.3;margin:0 0 clamp(22px,3vw,32px);position:relative}
.std-vox-title em{font-style:normal;font-weight:900;background:linear-gradient(120deg,var(--primary) 0%,var(--primary-glow) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.std-vox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
@media (max-width:1024px){.std-vox-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.std-vox-grid{grid-template-columns:1fr}}
.std-vox-card{
    padding:20px;background:#fff;
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.std-vox-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(15,23,42,.10);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.std-vox-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.std-vox-avatar{
    width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;
    border:2px solid color-mix(in srgb,var(--primary) 40%,transparent);display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-glow));color:#fff;font-weight:800;
}
.std-vox-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.std-vox-who{flex:1;min-width:0}
.std-vox-name{font-weight:800;font-size:.92rem;color:var(--ink);line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.std-vox-role{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.std-vox-stars{color:var(--gold);font-size:.82rem;letter-spacing:1px;margin-bottom:10px}
.std-vox-quote{font-size:.88rem;color:var(--ink-soft);line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.std-vox-more{
    display:flex;width:fit-content;align-items:center;gap:7px;
    margin:clamp(22px,3vw,30px) auto 0;
    color:#fff;background:linear-gradient(120deg,var(--primary) 0%,var(--primary-glow) 100%);font-weight:800;font-size:.9rem;
    padding:11px 24px;border-radius:99px;text-decoration:none;
    box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 40%,transparent);transition:transform .2s ease,box-shadow .25s ease;
}
.std-vox-more:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 55%,transparent)}

/* ── Side: Pricing Card ────────────────────────────────── */
.std-aside{position:sticky;top:calc(var(--nav-h) + 76px)}
.std-pricing-card{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    box-shadow:var(--shadow-md);
    overflow:hidden;
}
.std-pricing-media{
    aspect-ratio:16/10;background:#0F172A;
    background-size:cover;background-position:center;
    position:relative;
}
.std-pricing-media .corner-badge{
    position:absolute;left:14px;top:14px;
    padding:6px 12px;border-radius:99px;
    background:rgba(255,255,255,.95);color:var(--ink);
    font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
}
.std-pricing-body{padding:clamp(20px,3vw,24px)}
.std-price-stack{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.std-price-now{font-size:2rem;font-weight:800;color:var(--ink);line-height:1}
.std-price-now.is-free{color:var(--success-ink)}
.std-price-old{color:#94A3B8;text-decoration:line-through;font-size:1rem;font-weight:500}
.std-price-savings{color:var(--danger);font-size:.85rem;font-weight:700;margin-bottom:18px}
.std-pricing-meta{
    display:flex;gap:8px;flex-wrap:wrap;
    margin-bottom:18px;
    padding:12px 14px;border-radius:12px;
    background:#FBFBF7;border:1px solid var(--line);
    font-size:.86rem;color:var(--ink-soft);
}
.std-pricing-meta span{display:inline-flex;align-items:center;gap:6px}
.std-pricing-meta strong{color:var(--ink)}

.std-coupon{margin-bottom:14px}
.std-coupon-row{display:flex;gap:8px}
.std-coupon-row input{
    flex:1;padding:12px 14px;
    border:1.5px solid var(--line);border-radius:12px;
    background:#fff;color:var(--ink);
    font-family:inherit;font-size:.92rem;
    text-transform:uppercase;letter-spacing:.5px;
}
.std-coupon-row input:focus{outline:none;border-color:var(--primary)}
.std-coupon-apply{
    padding:0 18px;background:var(--ink);color:#fff;border:none;
    border-radius:12px;font-weight:700;font-family:inherit;cursor:pointer;
    transition:opacity .15s;
}
.std-coupon-apply:hover{opacity:.85}
.std-coupon-msg{margin-top:8px;padding:8px 12px;border-radius:8px;font-size:.84rem;font-weight:600}
.std-coupon-msg.ok{background:rgba(16,185,129,.10);color:#047857}
.std-coupon-msg.err{background:rgba(220,38,38,.08);color:#B91C1C}

/* Offer stack — "สิ่งที่คุณได้รับ" นั่งเหนือปุ่มซื้อ ให้คนเห็นของก่อนเห็นปุ่ม.
   ต่อรายการมี หัวข้อ / คำอธิบาย / มูลค่า(ถ้ากรอก) */
.std-offer{
    margin:0 0 18px;padding:16px 16px 14px;
    border:1px solid var(--line);border-radius:14px;background:#FBFBF7;
}
.std-offer-head{
    font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:12px;
}
.std-offer-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.std-offer-list li{display:flex;align-items:flex-start;gap:10px}
.std-offer-list li > i{color:var(--success);font-size:1rem;line-height:1.45;flex-shrink:0}
.std-offer-text{flex:1;min-width:0}
.std-offer-text strong{display:block;font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.45}
.std-offer-text span{display:block;margin-top:2px;font-size:.82rem;color:var(--ink-soft);line-height:1.55}
.std-offer-value{
    flex-shrink:0;font-style:normal;font-size:.82rem;font-weight:700;
    color:var(--ink-soft);white-space:nowrap;
}

.std-pricing-feats{list-style:none;margin-top:20px}
.std-pricing-feats li{
    display:flex;align-items:flex-start;gap:10px;
    padding:8px 0;color:var(--ink-soft);font-size:.92rem;
}
.std-pricing-feats li::before{
    content:"✓";color:var(--success);font-weight:800;flex-shrink:0;
    width:20px;text-align:center;
}
/* ย้ายมาอยู่ใต้ปุ่มซื้อ + อ่านออกจริง — เดิมเป็นบรรทัดจาง ๆ ล่างสุดของการ์ด */
.std-guarantee{
    margin-top:14px;padding:13px 14px;border-radius:12px;
    background:linear-gradient(135deg,#F0FDF4,#DCFCE7);
    border:1px solid #BBF7D0;color:#166534;
    font-size:.84rem;line-height:1.55;font-weight:500;
    display:flex;align-items:flex-start;gap:9px;text-align:left;
}
.std-guarantee > i{font-size:1.05rem;line-height:1.4;flex-shrink:0}
.std-guarantee strong{display:block;font-weight:800}

/* ── Mobile sticky CTA bar ─────────────────────────────── */
.std-mobile-bar{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:10px 16px calc(10px + var(--safe-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(15,23,42,.10);
    align-items:center;gap:12px;justify-content:space-between;
}
.std-mobile-bar .price{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.std-mobile-bar .price strong{font-size:1.05rem;font-weight:800;color:var(--ink)}
.std-mobile-bar .price small{color:var(--muted);font-size:.72rem}
.std-mobile-bar .std-btn{padding:11px 18px;font-size:.92rem;min-height:44px;flex-shrink:0}
@media (max-width:980px){
    .std-mobile-bar{display:flex}
    .std-aside{position:static;top:auto}
    /* leave room for the floating bar so content isn't covered */
    body.has-mobile-bar{padding-bottom:84px}
}

/* ── Footer ────────────────────────────────────────────── */
.std-footer{
    background:linear-gradient(180deg,#0F172A 0%,#0B1220 100%);
    color:#94A3B8;padding:clamp(28px,4vw,40px) 0 calc(clamp(24px,3vw,32px) + var(--safe-bottom));
    text-align:center;
    margin-top:clamp(40px,6vw,60px);
}
.std-footer .logo{color:#fff;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:6px}
.std-footer .logo span{color:var(--gold)}
.std-footer p{font-size:.85rem}

/* When the mobile bar is on, leave room so content isn't covered */
body.has-mobile-bar .std-footer{margin-bottom:0}

/* ── Tablet / Mobile fine-tuning ──────────────────────── */
@media (max-width:768px){
    :root{--container-x:18px}
    .std-tabs-inner{padding:2px 0}
    .std-tab{padding:13px 16px;font-size:.9rem}
    .std-hero-meta{padding:14px 16px;gap:12px 18px}
    .std-meta-item{font-size:.88rem}
    .std-meta-item .ico{width:32px;height:32px;font-size:.95rem}
    .std-prose,.std-instructor-card,.std-rev-summary{border-radius:14px}
    .std-pricing-card{border-radius:16px}
    .std-pricing-feats li{font-size:.9rem}
    .std-section h2{padding-left:12px}
    .std-section h2::before{top:4px;bottom:4px;width:3.5px}
}
@media (max-width:480px){
    :root{--container-x:14px;--nav-h:58px}
    .std-nav-inner{gap:10px}
    .std-cta-nav{padding:9px 14px;font-size:.84rem}
    .std-eyebrow{font-size:.72rem;padding:6px 12px;margin-bottom:14px}
    .std-h1{margin-bottom:14px}
    .std-tagline{margin-bottom:18px}
    /* Tighten hero meta — keep it readable but compact */
    .std-hero-meta{padding:12px 14px;gap:10px 14px;border-radius:12px}
    .std-hero-meta .std-meta-item{font-size:.85rem}
    .std-hero-meta .std-meta-item .ico{width:30px;height:30px;border-radius:8px;font-size:.9rem}
    /* Buttons go full width but stay tappable */
    .std-hero-cta{gap:8px}
    .std-hero-cta .std-btn{flex:1 1 100%;padding:13px 18px;font-size:.95rem}
    /* Module head: shrink chrome, hide redundant lesson count */
    .std-module-head{padding:14px 14px;gap:10px}
    .std-module-num{width:28px;height:28px;font-size:.82rem;border-radius:8px}
    .std-module-meta{font-size:.78rem}
    .std-lessons li{padding:11px 14px;font-size:.88rem}
    .std-lessons li .lesson-ico{width:24px;height:24px;font-size:.78rem}
    /* Pricing card: hide hero-image to save vertical space (already shown above) */
    .std-pricing-media{display:none}
    .std-price-now{font-size:1.7rem}
    .std-pricing-meta{font-size:.82rem;padding:10px 12px}
    .std-pricing-feats li{padding:6px 0;font-size:.88rem}
    .std-offer{padding:14px 14px 12px}
    .std-offer-list{gap:10px}
    .std-offer-text strong{font-size:.88rem}
    .std-offer-text span{font-size:.8rem}
    /* Reviews - tighter cards */
    .std-rev-card{padding:16px;border-radius:12px}
    .std-rev-card .head{flex-wrap:wrap;gap:6px}
    .std-rev-card .body{font-size:.88rem}
    .std-rev-bar-row{grid-template-columns:24px 1fr 28px;font-size:.78rem}
    /* Hide nav links + show shorter CTA */
    .std-cta-nav .icon-only-on-narrow{display:none}
}
@media (max-width:360px){
    .std-hero-meta .std-meta-item:nth-child(n+3){display:none} /* keep first 2 only */
}

/* ── Premium polish ─────────────────────────────────────── */
/* Mobile: eyebrow badge on top, then preview video/image, text after.
   Desktop keeps the original layout (badge above title, media on the right). */
.std-eyebrow-mobile{display:none}
@media (max-width:980px){
    .std-hero-media{order:-1}
    .std-eyebrow-mobile{display:inline-flex;order:-2;justify-self:start;margin-bottom:-14px}
    .std-hero-head .std-eyebrow{display:none}
}

/* Gold CTA: recurring shine sweep pulls the eye to the buy button */
.std-btn-gold{position:relative;overflow:hidden}
.std-btn-gold::before{
    content:"";position:absolute;top:0;left:-150%;width:55%;height:100%;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
    transform:skewX(-18deg);
    animation:std-cta-shine 3.2s ease-in-out infinite;
    pointer-events:none;
}
@keyframes std-cta-shine{
    0%,55%  { left:-150%; }
    90%,100%{ left:250%;  }
}

/* Editorial kicker label above section headings */
.std-kicker{
    display:block;font-family:'Inter',sans-serif;
    font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-ink);margin-bottom:4px;
}

/* Trust badges under the buy button */
.std-trust-row{
    display:flex;justify-content:center;flex-wrap:wrap;gap:8px 14px;
    margin-top:12px;color:var(--muted);
    font-size:.76rem;font-weight:600;
}
.std-trust-row span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.std-trust-row i{color:var(--success);font-size:.85rem}

/* Pricing card: gold hairline + top accent — the page's decision point */
.std-pricing-card{
    position:relative;
    border-color:rgba(200,162,74,.45);
    box-shadow:0 18px 50px rgba(15,23,42,.14),0 4px 14px rgba(15,23,42,.06);
}
.std-pricing-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
    background:linear-gradient(90deg,var(--gold) 0%,#F4C55A 50%,var(--gold) 100%);
}

/* Mobile sticky bar: show anchor price + discount, not just the number */
.std-mobile-bar .price-line{display:flex;align-items:baseline;gap:7px;min-width:0}
.std-mobile-bar .price-line s{color:#94A3B8;font-size:.76rem;font-weight:500}
.std-mobile-bar .price-line .off{
    background:#FEE2E2;color:#DC2626;
    font-size:.66rem;font-weight:800;
    padding:2px 6px;border-radius:6px;line-height:1.2;
}

/* Course FAQ accordion (markup from faq_render, restyled for this page) */
.std-faq-list{display:grid;gap:10px}
.std-faq-list .faq-item{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    overflow:hidden;transition:box-shadow .2s;
}
.std-faq-list .faq-item.is-open{box-shadow:var(--shadow-md)}
.std-faq-list .faq-question{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 18px;cursor:pointer;user-select:none;
}
.std-faq-list .faq-question:hover{background:#FBFBF7}
.std-faq-list .faq-question h3{
    font-size:.97rem;font-weight:700;color:var(--ink);line-height:1.45;margin:0;
}
.std-faq-list .faq-icon{
    flex-shrink:0;width:26px;height:26px;border-radius:8px;
    background:#F1F5F9;color:var(--muted);
    display:grid;place-items:center;font-weight:700;
    transition:transform .25s,background .2s,color .2s;
}
.std-faq-list .faq-item.is-open .faq-icon{
    transform:rotate(45deg);background:var(--ink);color:#fff;
}
.std-faq-list .faq-answer{
    max-height:0;overflow:hidden;transition:max-height .35s ease;
    color:var(--ink-soft);font-size:.92rem;line-height:1.65;
}
.std-faq-list .faq-item.is-open .faq-answer{max-height:800px}
.std-faq-list .faq-answer p{padding:0 18px 16px;margin:0}

/* Hero slider (hero_gallery ≥ 2 images) */
.std-slider{position:absolute;inset:0}
.std-slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    opacity:0;transition:opacity .8s ease;
    transform:scale(1.04);
}
.std-slide.is-active{
    opacity:1;
    transform:scale(1);
    transition:opacity .8s ease,transform 5s ease-out; /* slow Ken Burns settle */
}
.std-slider-dots{
    position:absolute;left:0;right:0;bottom:12px;
    display:flex;justify-content:center;gap:7px;z-index:2;
}
.std-slider-dot{
    width:8px;height:8px;border-radius:99px;border:none;cursor:pointer;padding:0;
    background:rgba(255,255,255,.45);
    transition:background .25s,width .25s;
}
.std-slider-dot.is-active{background:#fff;width:22px}

@media (prefers-reduced-motion:reduce){
    .std-btn-gold::before{animation:none;display:none}
    .std-slide{transition:none;transform:none}
    .std-slide.is-active{transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   ส่วนที่ช่วยตัดสินใจ — เหมาะกับใคร / ผลลัพธ์ / บล็อกเพิ่มเติม / การรับประกัน
   ทุกส่วนซ่อนตัวเองเมื่อยังไม่กรอกข้อมูล จึงไม่กระทบคอร์สที่ไม่ได้เขียนอะไรเพิ่ม
   ใช้ตัวแปรสีชุดเดียวกับหน้าอื่น ๆ ปรับธีมทีเดียวติดทั้งหน้า
   ═══════════════════════════════════════════════════════════════════ */

/* ── เหมาะกับใคร / ไม่เหมาะกับใคร ── */
.std-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.std-fit-col{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:20px 22px;box-shadow:var(--shadow-sm)
}
.std-fit-col h3{
    display:flex;align-items:center;gap:8px;
    font-size:1rem;font-weight:800;margin-bottom:12px;letter-spacing:-.01em
}
.std-fit-yes{border-top:3px solid var(--success)}
.std-fit-yes h3{color:var(--success-ink)}
.std-fit-no{border-top:3px solid var(--muted)}
.std-fit-no h3{color:var(--muted)}
.std-fit-col ul{list-style:none;display:grid;gap:9px}
.std-fit-col li{
    position:relative;padding-left:18px;
    font-size:.93rem;line-height:1.65;color:var(--ink-soft)
}
.std-fit-col li::before{
    content:'';position:absolute;left:0;top:.62em;
    width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.32
}

/* ── เรียนจบแล้วทำอะไรได้ ── */
.std-outcomes{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.std-outcomes li{
    display:flex;gap:11px;align-items:flex-start;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:15px 17px;box-shadow:var(--shadow-sm)
}
.std-outcomes li i{color:var(--gold);font-size:1.05rem;line-height:1.5;flex:0 0 auto}
.std-outcomes li span{font-size:.94rem;line-height:1.62;color:var(--ink-soft)}

/* ── บล็อกที่เขียนเพิ่มเองต่อคอร์ส ── */
.std-more{display:grid;gap:14px}
.std-more-item{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:20px 22px;box-shadow:var(--shadow-sm)
}
.std-more-item h3{
    font-size:1.02rem;font-weight:800;color:var(--ink);
    margin-bottom:8px;letter-spacing:-.01em
}
.std-more-item p{font-size:.94rem;line-height:1.75;color:var(--ink-soft)}

/* ── การรับประกัน ── */
.std-guarantee{
    display:flex;gap:16px;align-items:flex-start;
    background:linear-gradient(180deg,#FFFDF6,var(--surface));
    border:1px solid var(--gold-soft);border-radius:18px;
    padding:22px 24px;box-shadow:var(--shadow-sm)
}
.std-guarantee-ico{
    flex:0 0 auto;width:44px;height:44px;border-radius:12px;
    display:grid;place-items:center;
    background:var(--gold-soft);color:#8A6D1F;font-size:1.3rem
}
.std-guarantee-body{font-size:.95rem;line-height:1.78;color:var(--ink-soft)}

@media (max-width:600px){
    .std-fit-col,.std-more-item{padding:17px 18px}
    .std-guarantee{padding:18px;gap:13px}
}

/* ── แถบตัดสินใจกลางหน้า (partials/course/cta_band.php) ──
   หน้าขายยาว 8-9 ส่วน แต่เดิมมีปุ่มแค่บนสุดกับกล่องข้าง แถบนี้เอาราคา+ปุ่ม
   มาไว้ตรงจุดที่คนเพิ่งอ่านรีวิวจบ ตำแหน่งที่พร้อมตัดสินใจที่สุด */
.std-ctaband-wrap{scroll-margin-top:calc(var(--nav-h) + 60px)}
.std-ctaband{
    display:grid;grid-template-columns:1.35fr .85fr;gap:28px;align-items:center;
    background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);
    border-radius:22px;padding:30px 32px;
    box-shadow:var(--shadow-lg);color:#fff;
    position:relative;overflow:hidden;
}
/* แสงสีของโทนคอร์สจาง ๆ ที่มุมขวาบน ให้แถบไม่ใช่กล่องดำทึบ */
.std-ctaband::after{
    content:'';position:absolute;top:-40%;right:-12%;
    width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(var(--cta-rgb),.34) 0%,transparent 70%);
    pointer-events:none
}
.std-ctaband-copy,.std-ctaband-act{position:relative;z-index:1}
.std-ctaband-kicker{
    display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:8px
}
.std-ctaband .std-ctaband-title{
    font-size:1.34rem;font-weight:800;line-height:1.4;letter-spacing:-.01em;
    color:#fff;margin:0 0 14px;
    /* กล่องนี้เป็น h2 ที่อยู่ใน .std-section ด้วย จึงต้องล้างชุดหัวข้อส่วน
       (สีหมึกเข้ม + แถบทองซ้าย) ที่ specificity สูงกว่าออกให้หมด */
    padding-left:0
}
.std-ctaband .std-ctaband-title::before{display:none}
.std-ctaband-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.std-ctaband-price strong{font-size:2rem;font-weight:800;line-height:1;color:#fff}
.std-ctaband-price strong.is-free{color:#6EE7B7}
.std-ctaband-price s{color:rgba(255,255,255,.62);font-size:.95rem}
.std-ctaband-price em{
    font-style:normal;font-size:.78rem;font-weight:800;
    background:rgba(var(--cta-rgb),.9);color:#fff;
    padding:3px 9px;border-radius:999px
}
.std-ctaband-price span{flex:1 0 100%;font-size:.86rem;color:rgba(255,255,255,.86)}
.std-ctaband-points{list-style:none;display:grid;gap:7px}
.std-ctaband-points li{
    display:flex;gap:9px;align-items:flex-start;
    font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.96)
}
.std-ctaband-points i{color:#7DEEC1;font-size:.95rem;line-height:1.55;flex:0 0 auto}
.std-ctaband-act{display:grid;gap:10px}
.std-ctaband-act .std-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.24)}
.std-ctaband-act .std-btn-ghost:hover{background:rgba(255,255,255,.15);border-color:#fff}
.std-ctaband-soon{
    display:block;text-align:center;font-size:.86rem;font-weight:700;
    color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.34);
    border-radius:12px;padding:10px 14px
}
.std-ctaband-note{
    margin:2px 0 0;text-align:center;
    font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.85)
}
.std-ctaband-note i{color:#7DEEC1;margin-right:4px}
.std-ctaband-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){
    .std-ctaband{grid-template-columns:1fr;gap:20px;padding:24px 22px}
    .std-ctaband .std-ctaband-title{font-size:1.18rem}
    .std-ctaband-price strong{font-size:1.75rem}
}

/* ── คำมั่นจากผู้ก่อตั้ง ปิดท้ายหน้าขาย (partials/course/founder_promise.php) ──
   ตั้งใจให้ไม่เหมือนบล็อกเดียวกันบนหน้าแรก: หน้าแรกเป็นการ์ดสองคอลัมน์ +
   เหรียญทองใหญ่ + แสงฟุ้ง ที่นี่เป็นจดหมายคอลัมน์เดียวบนกระดาษอุ่น ๆ
   มีเส้นทองบาง ๆ คาดหัว และตราคืนเงินย่อเป็นชิปคาดอยู่กับประโยค */
.std-promise-letter{
    position:relative;
    background:linear-gradient(180deg,#FFFDF7 0%,var(--surface) 62%);
    border:1px solid var(--gold-soft);border-radius:20px;
    padding:clamp(24px,4vw,38px) clamp(20px,4vw,44px);
    box-shadow:var(--shadow-sm);
    max-width:760px;margin:0 auto;
    text-align:center;
}
/* เส้นทองคาดบนสุด — ใช้แทน "กรอบทอง" ที่หนักเกินไปสำหรับหน้าที่มีกล่องราคาอยู่ข้าง */
.std-promise-letter::before{
    content:'';position:absolute;left:50%;top:-1px;transform:translateX(-50%);
    width:min(180px,45%);height:3px;border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent)
}
.std-promise-intro{font-size:1rem;line-height:1.85;color:var(--ink-soft)}
.std-promise-lead{margin-top:18px;font-weight:800;color:var(--ink);font-size:1rem}
.std-promise-conds{
    list-style:none;display:inline-grid;gap:9px;
    margin:14px auto 0;text-align:left
}
.std-promise-conds li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.65;color:var(--ink-soft)}
.std-promise-conds i{
    flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:50%;
    display:grid;place-items:center;font-size:.8rem;
    background:var(--success);color:#fff
}
/* ตราคืนเงิน: ชิปกลม ๆ เล็ก คาดอยู่กับประโยค ไม่ใช่เหรียญลอยเดี่ยวแบบหน้าแรก */
.std-promise-refund{
    display:flex;gap:16px;align-items:center;text-align:left;
    margin:24px 0 0;padding:16px 20px;border-radius:16px;
    background:linear-gradient(135deg,#FBF4DE 0%,#FFFDF7 100%);
    border:1px solid var(--gold-soft)
}
.std-promise-seal{
    flex:0 0 auto;width:64px;height:64px;border-radius:50%;
    display:grid;place-items:center;line-height:1;
    background:radial-gradient(circle at 35% 30%,#F3DE9C 0%,var(--gold) 55%,#9C7A2A 100%);
    color:#3A2C08;box-shadow:0 6px 16px rgba(160,124,42,.28), inset 0 0 0 3px rgba(255,255,255,.42)
}
.std-promise-seal strong{display:block;font-size:1.42rem;font-weight:800;letter-spacing:-.02em}
.std-promise-seal small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;margin-top:1px}
.std-promise-refund p{font-size:.94rem;line-height:1.7;color:var(--ink-soft);margin:0}
.std-promise-refund strong{display:block;color:var(--ink);font-weight:800}
.std-promise-refund a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.std-promise-closing{
    margin-top:24px;font-style:italic;font-size:.98rem;line-height:1.9;
    color:var(--muted)
}
.std-promise-sign{
    display:flex;gap:14px;align-items:center;justify-content:center;
    margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
    text-align:left
}
.std-promise-photo{
    width:52px;height:52px;border-radius:50%;overflow:hidden;flex:0 0 auto;
    border:2px solid #fff;box-shadow:var(--shadow-sm);background:#E2E8F0
}
.std-promise-photo img{width:100%;height:100%;object-fit:cover;display:block}
.std-promise-name{font-weight:800;color:var(--ink);letter-spacing:.02em}
.std-promise-role{font-size:.85rem;color:var(--muted)}
.std-promise-act{margin-top:24px}
.std-promise-act .std-btn{min-width:min(280px,100%)}

@media (max-width:600px){
    .std-promise-refund{flex-direction:column;align-items:flex-start;gap:12px;padding:15px 16px}
    .std-promise-sign{flex-direction:column;text-align:center;gap:10px}
    .std-promise-act .std-btn{width:100%}
}

/* ── ผู้สอน = เรื่องราวผู้ก่อตั้ง (partials/course/instructor.php) ──
   เนื้อหาชุดเดียวกับหน้าแรก แต่คอลัมน์นี้แคบกว่ามากเพราะมีกล่องราคาอยู่ข้าง ๆ
   จึงเป็นหัวโปรไฟล์ + ไทม์ไลน์เส้นเดียวลงมา ไม่ใช่สองคอลัมน์แบบหน้าแรก */
/* คำที่เน้นในหัวข้อ ("คุณพ่อคนหนึ่ง") ใช้ไล่สีโทนของคอร์สแบบเดียวกับ H1 บนฮีโร่
   ไม่ปล่อยให้ <em> เป็นตัวเอียงเปล่า ๆ ซึ่งดูเหมือนพิมพ์ผิดมากกว่าตั้งใจเน้น */
#instructor h2 em{
    font-style:normal;
    background:linear-gradient(120deg,var(--primary) 0%,var(--primary-glow) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent
}
.std-origin-head{
    display:flex;gap:24px;align-items:center;
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    padding:20px 22px;box-shadow:var(--shadow-sm)
}
.std-origin-photo{position:relative;flex:0 0 auto;width:108px}
.std-origin-photo img{
    width:108px;height:108px;border-radius:26px;object-fit:cover;display:block;
    border:3px solid #fff;box-shadow:var(--shadow-md);background:#E2E8F0
}
/* ป้ายจำนวนปีคาบเกี่ยวมุมรูป — หน้าแรกเป็นวงกลมลอยใหญ่ ที่นี่ย่อเป็นชิปมุมล่าง */
.std-origin-years{
    position:absolute;right:-10px;bottom:-8px;
    display:grid;place-items:center;line-height:1;
    padding:7px 10px;border-radius:12px;
    background:linear-gradient(135deg,var(--gold) 0%,#A9862F 100%);
    color:#fff;box-shadow:0 6px 14px rgba(160,124,42,.32);
    border:2px solid #fff
}
.std-origin-years strong{font-size:.95rem;font-weight:800;letter-spacing:-.02em}
.std-origin-years small{font-size:.58rem;font-weight:700;letter-spacing:.04em;margin-top:2px}
.std-origin-name{font-size:1.1rem;font-weight:800;color:var(--ink);letter-spacing:.01em}
.std-origin-role{font-size:.85rem;color:var(--muted);margin-top:2px}
.std-origin-lead{margin-top:12px;font-size:.94rem;line-height:1.85;color:var(--ink-soft)}

/* ไทม์ไลน์: เส้นตั้งเชื่อมไอคอน เล่าเป็นลำดับเวลาให้ต่างจากการ์ดเรียงของหน้าแรก */
.std-origin-steps{list-style:none;position:relative;margin:30px 0 0;padding:0}
.std-origin-steps::before{
    content:'';position:absolute;left:19px;top:14px;bottom:14px;width:2px;
    background:linear-gradient(180deg,var(--line),var(--gold-soft),var(--line))
}
.std-origin-steps li{position:relative;display:flex;gap:18px;padding:0 0 28px}
.std-origin-steps li:last-child{padding-bottom:0}
.std-origin-ico{
    position:relative;z-index:1;flex:0 0 auto;
    width:40px;height:40px;border-radius:50%;
    display:grid;place-items:center;font-size:1.1rem;
    background:var(--surface);border:1.5px solid var(--line);
    box-shadow:var(--shadow-sm)
}
.std-origin-steps strong{display:block;font-size:1rem;font-weight:800;color:var(--ink);margin-bottom:8px;line-height:1.5}
.std-origin-steps p{font-size:.93rem;line-height:1.85;color:var(--ink-soft)}
/* จุดเปลี่ยนของเรื่อง — ให้น้ำหนักต่างจากสามข้อแรกด้วยพื้นอุ่นกับเส้นทอง */
.std-origin-steps li.is-turning-point > div{
    background:linear-gradient(135deg,#FFFBEF 0%,var(--surface) 100%);
    border:1px solid var(--gold-soft);border-left:3px solid var(--gold);
    border-radius:14px;padding:15px 17px;margin-top:-9px
}
.std-origin-steps li.is-turning-point .std-origin-ico{
    border-color:var(--gold);background:var(--gold-soft)
}
.std-origin-quote{
    margin-top:30px;padding:18px 22px;
    border-left:3px solid var(--gold);
    background:linear-gradient(90deg,#FFFDF6,transparent);
    font-style:italic;font-size:.98rem;line-height:1.8;color:var(--ink-soft)
}

@media (max-width:600px){
    .std-origin-head{flex-direction:column;text-align:center;gap:22px;padding:20px 18px}
    .std-origin-photo{width:96px;margin:0 auto}
    .std-origin-photo img{width:96px;height:96px}
    .std-origin-years{right:-6px}
    .std-origin-steps li{gap:12px}
    .std-origin-steps::before{left:16px}
    .std-origin-ico{width:34px;height:34px;font-size:1rem}
}

/* ── เรื่องราวเบื้องหลังคอร์ส (partials/course/course_origin.php) ──
   เป็นเรื่องเล่าเสียงคนเดียวยาว ๆ ไม่ใช่ลิสต์ จึงอ่านง่ายที่สุดเมื่อเป็นคอลัมน์
   ข้อความแคบ ๆ แบบหน้าหนังสือ ไม่ใช่การ์ดเรียง — และตั้งใจให้ต่างจากส่วน "ผู้สอน"
   ที่อยู่ติดกันด้านบน ซึ่งเป็นไทม์ไลน์มีไอคอน */
.std-cstory{
    position:relative;
    max-width:68ch;
    padding-left:clamp(16px,3vw,26px);
    border-left:2px solid var(--gold-soft)
}
.std-cstory > p{
    font-size:1rem;line-height:1.95;color:var(--ink-soft);
    margin-bottom:22px
}
.std-cstory > p:last-of-type{margin-bottom:0}
/* ประโยคที่อยากให้คนจำ — ตัวใหญ่ขึ้น สีเข้มขึ้น หยุดสายตากลางเรื่อง */
.std-cstory-pull{
    font-size:clamp(1.06rem,2.1vw,1.22rem) !important;
    font-weight:700;line-height:1.68 !important;
    color:var(--ink) !important;
    margin:28px 0 26px !important;
    padding:18px 22px;
    background:linear-gradient(135deg,#FFFBEF 0%,var(--surface) 100%);
    border:1px solid var(--gold-soft);border-radius:14px
}
.std-cstory-sign{
    margin-top:28px;padding-top:18px;border-top:1px dashed var(--line);
    font-size:.95rem;color:var(--muted)
}
.std-cstory-sign strong{color:var(--ink);font-weight:800}

/* สไลด์ประกอบกลางเรื่องเล่า (บรรทัด [slides] ใน lp_origin) — เฟดสลับใบเรียบ ๆ
   js/course-origin-slides.js เป็นคนสลับคลาส is-on ยังไม่มีรูป = โชว์กรอบ mockup */
.std-cstory-slides{
    position:relative;margin:26px 0;border-radius:16px;overflow:hidden;
    aspect-ratio:16/9;background:#F4F1EA;border:1px solid var(--line);
    box-shadow:var(--shadow-sm)
}
.std-cslide{
    position:absolute;inset:0;margin:0;opacity:0;
    transition:opacity .9s ease
}
.std-cslide.is-on{opacity:1}
.std-cslide img{width:100%;height:100%;object-fit:cover;display:block}
.std-cslide.is-mock{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:repeating-linear-gradient(45deg,#F6F3EC 0 14px,#EFEBE1 14px 28px);
    color:var(--muted);font-weight:700;letter-spacing:.02em
}
.std-cslide.is-mock small{font-weight:500;font-size:.78rem;letter-spacing:0}

@media (max-width:600px){
    .std-cstory{padding-left:14px}
    .std-cstory > p{font-size:.96rem;line-height:1.88}
    .std-cstory-pull{padding:14px 16px}
}

/* หัวข้อใน "สิ่งที่คุณได้รับ" ที่กดดูของจริงได้ (partials ผ่าน course_offer_items)
   รายการที่อ้างถึงระบบแล้วกดไม่ได้คือคำโฆษณา ที่กดเข้าไปเห็นเพดานจริงคือหลักฐาน */
.std-offer-link{display:inline-flex;align-items:baseline;gap:5px;color:inherit}
.std-offer-link strong{text-decoration:underline;text-decoration-color:rgba(15,23,42,.28);text-underline-offset:3px}
.std-offer-link i{font-size:.72rem;color:var(--gold-ink);flex:0 0 auto}
.std-offer-link:hover strong{text-decoration-color:var(--gold-ink)}

/* ป้าย "อัปเดตล่าสุด" ต่อท้ายบรรทัดลิขสิทธิ์ในฟุตเตอร์หน้าขายคอร์ส
   หน้านี้โหลดแค่ course-standard.css จึงต้องมีสไตล์ของตัวเอง — กติกาเดียว
   กับที่ใช้ในฟุตเตอร์หน้าแรก (css/index.css) */
.std-footer p .footer-updated{
    display:inline-block;margin-left:10px;padding-left:10px;
    border-left:1px solid currentColor;opacity:.75
}

@media (max-width: 520px) {

    .std-footer p .footer-updated{
        display:block;margin-left:0;padding-left:0;border-left:0;margin-top:6px
    }
}