.pg-courses .c-hero{padding:var(--sp-16) 0 var(--sp-12);border-bottom:1px solid var(--line)}.pg-courses .c-hero-grid{gap:var(--sp-12);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;display:grid}.pg-courses .c-hero h1{letter-spacing:-.02em;margin:var(--sp-3) 0 var(--sp-4);font-size:clamp(38px,5.4vw,64px);line-height:1.1}.pg-courses .c-hero h1 .g{color:var(--volt-hi)}.pg-courses .nw{display:inline-block}.pg-courses .c-hero .lead{font-size:var(--fs-lg);color:var(--muted);max-width:540px;margin-bottom:var(--sp-6)}.pg-courses .goal{padding:var(--sp-6)}.pg-courses .goal h4{font-family:var(--display);font-size:var(--fs-md);color:var(--ink);font-weight:600}.pg-courses .goal .count{font-family:var(--mono);font-weight:700;font-size:var(--fs-h2);margin:var(--sp-2) 0 0;line-height:1.1}.pg-courses .goal .count small{font-size:var(--fs-lg);color:var(--muted);font-weight:400}.pg-courses .goal-track{border-radius:var(--r-pill);background:var(--soft);border:1px solid var(--line);height:14px;margin:var(--sp-3) 0 var(--sp-2);overflow:hidden}.pg-courses .goal-track i{background:var(--grad);transform-origin:0;width:100%;height:100%;display:block}.pg-courses .goal p{font-size:var(--fs-ui);color:var(--muted)}.pg-courses .perks{gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px dashed var(--soft);font-size:var(--fs-ui);flex-direction:column;list-style:none;display:flex}.pg-courses .perks li{gap:var(--sp-2);grid-template-columns:18px 1fr;align-items:start;display:grid}.pg-courses .perks svg{border-radius:var(--r-sm);background:var(--grad);color:#fff;width:18px;height:18px;margin-top:3px;padding:3px}.pg-courses .vote-grid{gap:var(--sp-5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.pg-courses .cc{padding:var(--sp-6);gap:var(--sp-3);flex-direction:column;display:flex;position:relative}.pg-courses .cc.mine{box-shadow:var(--shadow);border-color:#3b9bff66}.pg-courses .cc.lead-c:before{content:"นำอยู่";top:-12px;right:var(--sp-5);background:var(--grad);color:#fff;font-family:var(--mono);font-size:var(--fs-xs);padding:2px var(--sp-2);border-radius:var(--r-pill);font-weight:700;position:absolute}.pg-courses .cc-top{gap:var(--sp-3);align-items:start;display:flex}.pg-courses .cc-ic{border-radius:var(--r-lg);background:var(--code-bg);width:52px;height:52px;color:var(--volt-hi);border:1px solid var(--line);flex:none;place-items:center;display:grid}.pg-courses .cc-ic svg{width:24px;height:24px}.pg-courses .cc h3{font-size:var(--fs-xl);line-height:1.3}.pg-courses .cc .tags{gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap;display:flex}.pg-courses .cc p{color:var(--muted);font-size:var(--fs-md)}.pg-courses .mods{counter-reset:m;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-ui);grid-template-columns:1fr 1fr;list-style:none;display:grid}.pg-courses .mods li{counter-increment:m;grid-template-columns:24px 1fr;display:grid}.pg-courses .mods li:before{content:counter(m, decimal-leading-zero);font-family:var(--mono);font-size:var(--fs-xs);color:var(--volt);padding-top:2px}.pg-courses .cc-price{align-items:baseline;gap:var(--sp-2);font-family:var(--mono);flex-wrap:wrap;display:flex}.pg-courses .cc-price b{font-size:var(--fs-2xl)}.pg-courses .cc-price s{color:var(--muted);font-size:var(--fs-ui)}.pg-courses .cc-price small{color:var(--volt-soft);font-size:var(--fs-xs);font-weight:700}.pg-courses .vbar{gap:var(--sp-2);padding-top:var(--sp-2);grid-template-columns:1fr auto;align-items:center;margin-top:auto;display:grid}.pg-courses .vtrack{border-radius:var(--r-pill);background:var(--soft);border:1px solid var(--line);height:10px;overflow:hidden}.pg-courses .vtrack i{background:var(--grad);transform-origin:0;width:100%;height:100%;transition:transform .4s var(--ease);display:block}.pg-courses .vbar span{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}.pg-courses .rm-tabs{gap:var(--sp-2);flex-wrap:wrap;display:flex}.pg-courses .rm{gap:var(--sp-6);grid-template-columns:minmax(0,1fr) 380px;align-items:start;display:grid}.pg-courses .rm-track{padding:var(--sp-6)}.pg-courses .rm-head{justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);flex-wrap:wrap;display:flex}.pg-courses .rm-head b{font-size:var(--fs-lg)}.pg-courses .rm-head .mono{font-size:var(--fs-sm);color:var(--muted)}.pg-courses .rm-prog{border-radius:var(--r-pill);background:var(--soft);height:8px;margin-bottom:var(--sp-6);overflow:hidden}.pg-courses .rm-prog i{background:var(--grad);transform-origin:0;width:100%;height:100%;display:block}.pg-courses .nodes{flex-direction:column;list-style:none;display:flex}.pg-courses .node{position:relative}.pg-courses .node:not(:last-child):after{content:"";background:var(--soft);width:2px;position:absolute;top:46px;bottom:-2px;left:21px}.pg-courses .node.done:not(:last-child):after{background:var(--action)}.pg-courses .node button{all:unset;cursor:pointer;gap:var(--sp-4);box-sizing:border-box;grid-template-columns:44px 1fr;width:100%;display:grid}.pg-courses .node-dot{border:1px solid var(--line);width:44px;height:44px;font-family:var(--mono);font-weight:700;font-size:var(--fs-ui);background:var(--card);z-index:1;border-radius:50%;place-items:center;display:grid;position:relative}.pg-courses .node-dot svg{width:18px;height:18px}.pg-courses .node.done .node-dot{background:var(--grad);color:#fff;border-color:#0000}.pg-courses .node.soon .node-dot{color:var(--muted);border-style:dashed}.pg-courses .node-body{padding:var(--sp-2) var(--sp-3) var(--sp-5);border-radius:var(--r-md);margin:-2px 0 var(--sp-2)}.pg-courses .node.sel .node-body{background:var(--soft)}.pg-courses .node button:focus-visible .node-body{outline:2px solid var(--volt)}.pg-courses .node-body b{font-size:var(--fs-md);display:block}.pg-courses .node-body small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}.pg-courses .node-body .st{font-family:var(--mono);font-size:var(--fs-xs);padding:1px var(--sp-2);border-radius:var(--r-pill);margin-left:var(--sp-2);vertical-align:2px;display:inline-block}.pg-courses .st.free{color:var(--volt-soft);background:#3b9bff29}.pg-courses .st.course{color:var(--sky-soft);background:#5b8cff24}.pg-courses .st.ok{color:var(--ok-soft);background:#34d39924}.pg-courses .detail{padding:var(--sp-6);top:calc(var(--sticky-top) + var(--sp-2));gap:var(--sp-3);flex-direction:column;display:flex;position:sticky}.pg-courses .detail-meta{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}.pg-courses .detail h3{font-size:var(--fs-2xl);line-height:1.3}.pg-courses .detail p{color:var(--muted);font-size:var(--fs-md)}.pg-courses .detail p.in-course{margin-top:var(--sp-1)}.pg-courses .detail p.in-course b{color:var(--ink)}.pg-courses .detail h5{font-family:var(--display);font-size:var(--fs-md);color:var(--ink);font-weight:600}.pg-courses .learn{font-size:var(--fs-md);gap:var(--sp-1);flex-direction:column;padding-left:1.2em;display:flex}.pg-courses .res{gap:var(--sp-2);flex-direction:column;display:flex}.pg-courses .res a,.pg-courses .res span{justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-ui);align-items:center;font-weight:600;display:flex}.pg-courses .res a:hover{background:var(--soft)}.pg-courses .res small{gap:var(--sp-1);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;align-items:center;font-weight:400;display:inline-flex}.pg-courses .res small svg{width:14px;height:14px}.pg-courses .res span{color:var(--muted);border-style:dashed}.pg-courses .how{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.pg-courses .how div{padding:var(--sp-5);border-right:1px solid var(--line)}.pg-courses .how div:last-child{border-right:none}.pg-courses .how b{font-family:var(--mono);font-size:var(--fs-2xl);margin-bottom:var(--sp-2);color:var(--volt-hi);display:block}.pg-courses .how h4{font-size:var(--fs-lg);margin-bottom:var(--sp-1)}.pg-courses .how p{color:var(--muted);font-size:var(--fs-ui)}.pg-courses .wl{border-radius:var(--r-xl);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0;padding:0;display:grid;overflow:clip}.pg-courses .wl-side{background:var(--grad);color:#fff;padding:var(--sp-10);gap:var(--sp-4);flex-direction:column;display:flex}.pg-courses .wl-side h2{font-size:clamp(28px,3.6vw,40px);line-height:1.2}.pg-courses .wl-side p{opacity:.9}.pg-courses .wl-count{margin-top:auto}.pg-courses .wl-side .big{font-family:var(--mono);font-size:clamp(40px,5vw,56px);font-weight:700;line-height:1}.pg-courses .wl-side small{font-family:var(--mono);font-size:var(--fs-sm);opacity:.85}.pg-courses .wl-main{padding:var(--sp-8)}.pg-courses .wl-fields{gap:var(--sp-5);flex-direction:column;display:flex}.pg-courses .wl-fields .btn-volt{min-height:var(--h-control-lg);font-size:var(--fs-md)}.pg-courses .fine{font-size:var(--fs-sm);color:var(--muted)}.pg-courses .fine a{text-underline-offset:3px;text-decoration:underline}.pg-courses .joined{gap:var(--sp-4);flex-direction:column;display:flex}.pg-courses .joined-lbl{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted)}.pg-courses .joined h3{font-size:var(--fs-3xl)}.pg-courses .joined p{color:var(--muted)}.pg-courses .pos{font-family:var(--mono);font-size:var(--fs-h2);color:var(--volt-hi);font-weight:700}.pg-courses .ref{gap:var(--sp-2);display:flex}.pg-courses .ref .ui-input{font-family:var(--mono);font-size:var(--fs-sm)}.pg-courses .ref .btn{flex:none}@media (max-width:1000px){.pg-courses .c-hero-grid,.pg-courses .rm,.pg-courses .wl{grid-template-columns:minmax(0,1fr)}.pg-courses .detail{position:static}.pg-courses .how{grid-template-columns:1fr 1fr}.pg-courses .how div:nth-child(2){border-right:none}.pg-courses .how div:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media (max-width:700px){.pg-courses .c-hero{padding:var(--sp-10) 0}.pg-courses .vote-grid,.pg-courses .mods,.pg-courses .how{grid-template-columns:minmax(0,1fr)}.pg-courses .how div{border-right:none;border-bottom:1px solid var(--line)}.pg-courses .how div:last-child{border-bottom:none}.pg-courses .rm-track,.pg-courses .wl-side,.pg-courses .wl-main,.pg-courses .cc{padding:var(--sp-5)}.pg-courses .ref{flex-direction:column}}