/* หน้าวิชา: ชิ้นจากหน้าแรกและ Method (โหลดคู่กับ method.css) · แถบรูปติวเตอร์โค้ง · การ์ดคำพูดซ้อน · บอร์ด MiSubject บนแคนวาส www */
.hs .cmpsec{padding-top:120px}
.hs .hm{margin-top:120px}
.s3-no{color:#B5B0AD;font-weight:600}
.hs #compare .cmp{grid-template-columns:210px 250px repeat(3,190px)}
.hs #compare .cmp-head{white-space:normal;text-align:center}
.hs #compare .cmp-alt svg{stroke:#1F9D63;color:#1F9D63}
.hs #compare .cmp-alt svg *{stroke:#1F9D63}
.hs #compare .cmp-scroll{padding-bottom:48px}
@media (max-width:640px){.hs #compare .grad.v3-nw{white-space:normal;display:inline}.hs #compare .cmp{grid-template-columns:150px 170px repeat(3,140px);justify-content:start}}
.sq-demo .qbt-opt{cursor:pointer}
.hs .sq-h1 .sq-cream,.hs .sq-h2 .sq-grad,.hs .cmpsec .grad{animation:hs-shine 8s cubic-bezier(.4,0,.6,1) infinite;background-repeat:no-repeat}
.hs .sq-h1 .sq-cream{background-image:linear-gradient(100deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.96) 50%,rgba(255,255,255,0) 72%),linear-gradient(90deg,#FFF3C4 0%,#FFE055 60%);background-size:45% 100%,100% 100%;background-position:-82% 0,0 0}
.hs .sq-h2 .sq-grad,.hs .cmpsec .grad{background-image:linear-gradient(100deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.96) 50%,rgba(255,255,255,0) 72%),linear-gradient(90deg,#ED2609 0%,#FC4013 50%,#FF8A3D 100%);background-size:45% 100%,100% 100%;background-position:-82% 0,0 0}
@keyframes hs-shine{0%,6%{background-position:-82% 0,0 0}34%,100%{background-position:182% 0,0 0}}
@supports (animation-timeline:view()){.s3-rev>*{animation:s3in linear both;animation-timeline:view();animation-range:entry 0% entry 30%}}
@keyframes s3in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){.hm-bars .mt-bar span:nth-child(2) i,.hm-ckr .pg-bar i,.hm-ar-bar i{transform-origin:left;animation:hmgrow 1.6s cubic-bezier(.2,.8,.3,1) both;animation-timeline:view();animation-range:entry 0% entry 100%}}
.hm-trk .qbt-head{animation:hmhop 2.6s ease-in-out infinite}
.hm-route span i{animation:hmhop 3s ease-in-out infinite}
.hm-route span:nth-child(2) i{animation-delay:.3s}.hm-route span:nth-child(3) i{animation-delay:.6s}.hm-route span:nth-child(4) i{animation-delay:.9s}
@media (prefers-reduced-motion:reduce){.hs .sq-h1 .sq-cream,.hs .sq-h2 .sq-grad,.hs .cmpsec .grad,.s3-rev>*,.hm-bars i,.hm-ckr .pg-bar i,.hm-ar-bar i,.hm-trk .qbt-head,.hm-route span i{animation:none!important}}
@media (max-width:640px){.hs .cmpsec{padding-top:80px}.hs .hm{margin-top:80px}}

.s5-sec{text-align:center}
.s5-stack{position:relative;width:1080px;max-width:100%;height:600px;margin:56px auto 0;text-align:left}
.s5-c{--x:0px;--px:0px;--py:0px;--r:-6deg;position:absolute;left:0;top:34px;display:flex;flex-direction:column;width:400px;height:520px;box-sizing:border-box;padding:28px;border-radius:28px;border:1px solid rgba(31,30,29,.08);box-shadow:0 24px 50px rgba(68,7,6,.14);overflow:hidden;cursor:default;transform-origin:center;transform:translate3d(calc(var(--x) + var(--px)),var(--py),0) rotate(var(--r));transition:transform .34s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.s5-c:nth-child(1){--x:0px;--r:-5deg;z-index:1}
.s5-c:nth-child(2){--x:340px;--r:3deg;z-index:2}
.s5-c:nth-child(3){--x:680px;--r:-3deg;z-index:3}
.s5-c.is-dark{background:#160F0C;color:#FFFFFF}
.s5-c.is-cream{background:radial-gradient(#F2DCCD 1.2px,transparent 1.3px) 0 0/14px 14px,#FFF8F2;color:#1F1E1D}
.s5-c.is-brand{background:linear-gradient(150deg,#D42C07,#E8360A);color:#FFFFFF}
.s5-mas{position:absolute;right:18px;top:18px;width:84px;height:auto;animation:sqf 4.6s ease-in-out infinite}
.s5-c:nth-child(2) .s5-mas{animation-delay:-1.5s}.s5-c:nth-child(3) .s5-mas{animation-delay:-3s}
.s5-q{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.s5-q>span{display:block;height:44px;font-size:72px;line-height:1;font-weight:700;color:#FC4013}
.s5-c.is-brand .s5-q>span{color:#FFE055}
.s5-q p{margin:0;padding-right:8px;font-size:30px;line-height:1.28;font-weight:600;letter-spacing:-0.01em;text-wrap:balance}
.s5-a{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid currentColor;border-top-color:rgba(127,127,127,.3)}
.s5-a b{font-size:14px;font-weight:700;color:#C4180A}
.s5-c.is-dark .s5-a b{color:#FF8A5C}.s5-c.is-brand .s5-a b{color:#FFE055}
.s5-a p{margin:0;font-size:15px;line-height:1.55}
.s5-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:14px;opacity:.95}
.s5-t img{height:34px;width:auto}
@media (min-width:1101px){.s5-c:not(:last-child) .s5-q p,.s5-c:not(:last-child) .s5-a p{padding-right:44px}.s5-c:not(:last-child) .s5-mas{right:64px}.s5-c:is(:hover,:focus-visible,.is-on) .s5-q p,.s5-c:is(:hover,:focus-visible,.is-on) .s5-a p{padding-right:0}.s5-c:is(:hover,:focus-visible,.is-on) .s5-mas{right:18px}}
@media (hover:hover) and (min-width:1101px){
  .s5-c:is(:hover,:focus-visible,.is-on){--r:0deg;--py:-30px;z-index:9;transform:translate3d(var(--x),-30px,0) rotate(0deg) scale(1.035);box-shadow:0 40px 70px rgba(68,7,6,.26);transition:transform .5s cubic-bezier(.22,1.6,.32,1),box-shadow .4s}
  .s5-c:is(:hover,:focus-visible,.is-on) ~ .s5-c{--px:54px;--py:10px}
  .s5-c:has(~ .s5-c:is(:hover,:focus-visible,.is-on)){--px:-54px;--py:-10px}
}
@media (max-width:1100px){
  .s5-stack{width:100%;max-width:640px;height:auto;display:flex;flex-direction:column;margin-top:40px}
  .s5-c{position:relative;top:auto;width:100%;height:auto;min-height:0;transform:rotate(var(--r))}
  .s5-c:nth-child(1){--r:-1.2deg}.s5-c:nth-child(2){--r:1deg;margin-top:-14px}.s5-c:nth-child(3){--r:-.8deg;margin-top:-14px}
  .s5-q{padding:12px 0 24px}.s5-q p{padding-right:84px}
}
@media (max-width:640px){.s5-c{padding:22px;border-radius:24px}.s5-q p{font-size:25px;padding-right:0}.s5-q{padding-top:48px}.s5-mas{width:68px;right:14px;top:14px}}
@media (prefers-reduced-motion:reduce){.s5-c{transition:none}.s5-mas{animation:none}}

.hs .sq-pan.s4-pan + .sq-pan.s4-pan::before{display:none}
.hs .sq-pan.pn3 .s4-say{right:auto;border-radius:18px 18px 18px 6px;align-self:stretch;width:100%;box-sizing:border-box}
.s4-mut{color:#8A8481}
.s4-note{margin:0;font-size:14px;color:#716C69}
.s4-detlogo{display:block;height:56px;width:auto;margin-bottom:12px}
.hm .s4-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}
.hm .s4-grid .mx-t{min-height:430px;padding-bottom:0}
.s4-grid .mi-rp{display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.4}
.s4-grid .mi-rp span{display:flex;gap:7px;align-items:flex-start}
.s4-grid .mi-rp span i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#1F9D63;color:#FFFFFF}
.s4-grid .mi-rp .n{padding-top:7px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
.s4-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
@media (max-width:1100px){.hm .s4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm .s4-grid{display:flex}.hm .s4-grid .mx-t{min-height:400px}.s4-cta{flex-direction:column}.s4-cta .sq-btn{justify-content:center}}

.hs .sq-hero{padding-bottom:0}
.s2-goals{margin-top:112px}
@media (max-width:860px){.s2-goals{margin-top:80px}}
.s4-grid .pg-bars .mt-bar{grid-template-columns:84px minmax(0,1fr) 36px}
/* นักสืบในส่วน Highskill Method */
.hm .hw-spot{position:relative;margin-top:44px;padding:40px 44px;gap:48px;border-radius:28px;border:1.5px solid rgba(255,255,255,.08);background:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px) 0 0/14px 14px,radial-gradient(620px 420px at 12% 0%,rgba(252,64,19,.26),transparent 70%),#211814;color:#FFFFFF}
.hm .hw-spot .hd-stage{display:block;margin:0 0 12px;font-size:14px}
.hm .hw-spot .s4-detlogo{height:60px;margin-bottom:0}
.hm .hw-spot-t h3{color:#FFFFFF;font-size:38px;letter-spacing:-.01em}
.hm .hw-spot-t>p{color:rgba(255,255,255,.8)}
.hm .hw-steps span{background:rgba(255,255,255,.1);color:#FFFFFF}
.hm .hw-spot-img{position:absolute;right:0;top:-8px;width:96px;margin:0;filter:drop-shadow(0 12px 16px rgba(0,0,0,.4))}
.hm .hw-spot+.mx-grid{margin-top:14px}
@media (max-width:1100px){.hm .hw-spot{grid-template-columns:minmax(0,1fr);padding:32px 24px;gap:28px}.hm .hw-spot-img{display:block;width:84px}}
@media (max-width:640px){.hm .hw-spot{padding:24px 6px 8px;border-radius:24px}.hm .hw-spot-t{padding:0 12px}.hm .hw-spot-t h3{font-size:28px}.hm .hw-spot .s4-detlogo{height:48px}.hm .hw-spot-img{width:68px;top:-4px}.hm .hw-frame{padding:4px;border-radius:24px}}
/* กรอบโจทย์โทนมืดในส่วน Highskill Method ใช้ธีมมืดของหน้าทำข้อสอบ */
.hm .hw-frame{background-color:#160F0C;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.hm .sq-demo{--q-bg:transparent;--q-surface:#2C211B;--q-text:#FFFFFF;--q-sub:rgba(255,255,255,.8);--q-muted:rgba(255,255,255,.6);--q-line:rgba(255,255,255,.14);--q-field:#2C211B;--q-field-line:rgba(255,255,255,.14);background:transparent;box-shadow:none}
.hm .sq-demo .qbt-count{text-align:center}
.hm .sq-demo .qbt-stage{color:#FF8A5C}
.hm .sq-demo .qbt-num span{color:rgba(255,255,255,.6)}
.hm .sq-demo .qbt-dot{background:rgba(255,255,255,.14)}
.hm .sq-demo .qbt-dot.is-done{background:#FC4013}
.hm .sq-demo .qbt-dot.is-cur{background:#2C211B}
.hm .sq-demo .qbt-qcard{background:transparent;box-shadow:none;padding:6px 0 0}
.hm .sq-demo .qbt-topic-tag{align-self:flex-start;background:rgba(252,64,19,.18);color:#FFB59A}
.hm .sq-demo .qbt-stem{font-size:19px}
.hm .sq-demo .qbt-opt{color:#FFFFFF;background:#2C211B}
.hm .sq-demo .qbt-opt:hover{border-color:rgba(255,255,255,.4)}
.hm .sq-demo .qbt-let,.hm .sq-demo .qbt-opt .qbt-let{border-color:rgba(255,255,255,.24);color:#FFFFFF}
.hm .sq-demo .qbt-opt[aria-pressed="true"]{background:rgba(252,64,19,.18);border-color:#FC4013}
.hm .sq-demo .qbt-opt.sq-ok{background:rgba(31,157,99,.2);border-color:#2FBF7C;box-shadow:inset 0 0 0 1px #2FBF7C}
.hm .sq-demo .qbt-opt.sq-ok .qbt-let{background:#1F9D63;border-color:#1F9D63}
.hm .sq-demo .qbt-opt.sq-ok .qbt-tick{display:inline-flex!important;background:#1F9D63;color:#FFFFFF}
.hm .sq-demo .qbt-opt.sq-bad{background:rgba(237,38,9,.2);border-color:#FF5A3C;box-shadow:inset 0 0 0 1px #FF5A3C}
.hm .sq-demo .qbt-opt.sq-bad .qbt-let{background:#ED2609;border-color:#ED2609}
.hm .sq-demo .sq-btn-p:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.hm .sq-demo .sq-btn-o{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.3)}
.hm .sq-demo .sq-btn-o:hover{border-color:#FFFFFF}
.hm .sq-demo .sq-fb{background:#2C211B;color:#FFFFFF;box-shadow:none}
.hm .sq-demo .sq-fb-h p{color:#1F1E1D}
.hm .sq-demo .sq-fb.is-ok{background:rgba(31,157,99,.2)}
.hm .sq-demo .sq-fb.is-ok b{color:#8BEDBD}
.hm .sq-demo .qbt-x-miss{background:rgba(252,64,19,.14);border-color:rgba(244,165,138,.5);color:#FFFFFF}
.hm .sq-demo .qbt-x-flag{background:#FFE055;color:#1F1E1D}
.hm .sq-demo .qbt-x-work,.hm .sq-demo .qbt-x-eq,.hm .sq-demo .qbt-x-opt{background:rgba(255,255,255,.08);color:#FFFFFF}
.hm .sq-demo .qbt-x-why,.hm .sq-demo .qbt-x-eq small{color:rgba(255,255,255,.8)}
.hm .sq-demo .qbt-x-why b{color:#FFFFFF}
.hm .sq-demo mark.qbt-x-mk{background:rgba(252,64,19,.28);color:#FFC7B3}
.hm .sq-demo .qbt-x-final{background:rgba(31,157,99,.2);color:#8BEDBD}
.hm .sq-demo .qbt-flag{color:#FF8A5C}
.hm .sq-demo .qbt-x-st::before{background:rgba(255,255,255,.14)}
.hm .sq-demo .qbt-x-st.is-miss>span{background:#FFE055;color:#1F1E1D}
.hm .sq-demo .qbt-x-eq .e{color:rgba(255,255,255,.6)}
.hm .sq-demo mark.qbt-x-mk.is-k1{background:rgba(61,139,242,.28);color:#BBD6FB}
.hm .sq-demo mark.qbt-x-mk.is-k2{background:rgba(31,157,99,.28);color:#A9EBC9}
.hm .sq-demo .qbt-x-opt.is-ok{background:rgba(31,157,99,.2)}
.hm .sq-demo .qbt-x-opt.is-pick{background:rgba(252,64,19,.14);border-color:rgba(244,165,138,.5)}