/* Highskill Method — หน้า /method/* และส่วนบนหน้าแรก (แปลงจากแคนวาส www บอร์ด Method* อนุมัติ 2026-11-02)
   คลาสนำหน้า sq- hw- pg- hm- fv- mt- · ส่วนท้าย "qbt" คัดจาก assets/css/qb_test.css + hs_math.css ของระบบหลัก (ชิ้นเดียวกับหน้าทำโจทย์ของน้อง) */
.mt-logo{display:block}
.mt-bars{display:flex;flex-direction:column;gap:9px}
.mt-bar{display:grid;grid-template-columns:86px minmax(0,1fr) 38px;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.8)}
.mt-bar span:nth-child(2){height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.mt-bar span:nth-child(2) i{display:block;height:100%;border-radius:99px}
.mt-bar b{font-weight:600;text-align:right}

.sq{font-family:'Anuphan','Noto Sans Thai',sans-serif;color:#1F1E1D;background:#FFFFFF;line-height:1.6;font-size:16px;overflow-x:hidden;overflow-x:clip}
.sq *{box-sizing:border-box}
:where(.sq) a{color:inherit}
.sq .mt-logo{display:block}
.sq-grad{background:linear-gradient(90deg,#ED2609 0%,#FC4013 50%,#FF8A3D 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sq-eb{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:6px 14px 6px 10px;border-radius:999px;background:#FFF3ED;color:#C4180A}
.sq-eb svg{color:#FC4013}
.sq-eb.is-w{background:rgba(255,255,255,.1);color:#FFFFFF}
.sq-h2{margin:16px 0 0;font-size:52px;line-height:1.2;font-weight:600;letter-spacing:-0.015em;text-wrap:balance}
.sq-h2.is-w{color:#FFFFFF}
.sq-btns{display:flex;gap:12px;flex-wrap:wrap}
.sq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border-radius:999px;font-family:inherit;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;box-shadow:none;transition:transform .15s,background .2s}
.sq-btn:active{transform:scale(.98)}
.sq-btn:focus-visible,.sq a:focus-visible,.qbt-opt:focus-visible{outline:3px solid #3D8BF2;outline-offset:3px}
.sq-btn-p{background:#FC4013;color:#FFFFFF}.sq-btn-p:hover{background:#ED2609;color:#FFFFFF}
.sq-btn-p:disabled{background:#F1D3C6;color:#FFFFFF;cursor:default}
.sq-btn-o{background:#FFFFFF;color:#1F1E1D;border-color:#D2D0CF}.sq-btn-o:hover{border-color:#1F1E1D}
.sq-btn-w{background:#FFFFFF;color:#1F1E1D}.sq-btn-w:hover{background:#FFF3ED;color:#1F1E1D}
.sq-btn-g{background:rgba(255,255,255,.1);color:#FFFFFF;border-color:rgba(255,255,255,.4)}.sq-btn-g:hover{background:rgba(255,255,255,.2)}
.sq-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
/* hero */
.sq-hero{position:relative;overflow:hidden;background:linear-gradient(321deg,#FC4013 0%,#FF5B10 100%);color:#FFFFFF;padding:72px 24px 96px;border-radius:0 0 48px 48px}
.sq-blob.b1{width:640px;height:640px;left:-300px;bottom:-200px;background:radial-gradient(circle,rgba(237,38,9,.55),rgba(237,38,9,0) 70%)}
.sq-blob.b2{width:760px;height:760px;right:-260px;top:-340px;background:radial-gradient(circle,rgba(255,224,85,.7),rgba(255,224,85,.25) 40%,rgba(255,224,85,0) 70%)}
.sq-blob.b3{width:900px;height:420px;left:50%;bottom:-260px;margin-left:-450px;background:radial-gradient(ellipse,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.sq-hin{position:relative;z-index:2;max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.sq-crumb{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:14px;color:rgba(255,255,255,.88)}
.sq-crumb a{color:#FFFFFF;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55)}
.sq-logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:22px}
.sq-logo small{font-size:16px;font-weight:600;color:#FFFFFF}
.sq-cream{background:linear-gradient(90deg,#FFFFFF 0%,#FFF3C4 45%,#FFE055 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sq-nw{white-space:nowrap}
.sq-h1{margin:20px 0 0;font-size:64px;line-height:1.18;font-weight:600;letter-spacing:-0.02em;text-wrap:balance}
.sq-sub{margin:20px 0 0;max-width:620px;font-size:18px;line-height:1.65;color:#FFFFFF}
.sq-hin .sq-btns{justify-content:center;margin-top:30px}
.sq-stage{position:relative;z-index:2;max-width:1180px;height:560px;margin:56px auto 0}
.sq-center{color:#1F1E1D;position:absolute;left:50%;top:0;width:380px;margin-left:-190px}
.sq-peek{position:absolute;left:-60px;top:150px;width:64px;height:auto;z-index:0}
.sq-center .sq-qbt{position:relative;z-index:1}
.sq-qbt{border-radius:32px;background:#FFF6EE;padding-bottom:16px;box-shadow:0 40px 80px rgba(124,20,10,.3),0 0 0 8px #FFFFFF}
.sq-qbt .qbt-top{padding-top:16px}
.sq-qbody{padding:10px 14px 0}
.sq-qbt .qbt-qcard{box-shadow:none}
.sq-qbt .qbt-stem{font-size:19px}
.sq-qbt .qbt-opts,.sq-demo .qbt-opts{display:flex!important;flex-direction:column;gap:10px}
.sq-qbt .qbt-opt{min-height:52px;font-size:17px}
.sq-qbt .qbt-topic-tag{background:#FFF3ED;color:#C4180A}
.sq-qbt .qbt-track{margin-top:44px}
.sq-fl{position:absolute;z-index:3;color:#1F1E1D;background:#FFFFFF;border-radius:24px;padding:16px;box-shadow:0 24px 50px rgba(124,20,10,.14);display:flex;flex-direction:column;gap:8px}
.sq-fl small{font-size:13px;color:#716C69;line-height:1.5}
.sq-fl b{font-size:16px}
.sq-fl-k{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#716C69}
.sq-fl-k i{width:8px;height:8px;border-radius:50%}
.sq-fl-l{left:40px;top:70px;width:290px;transform:rotate(-4deg)}
.sq-qbox{display:flex;gap:8px;align-items:center;padding:12px;border-radius:14px;background:#FFF3ED;border:1px solid #FFC4A9;font-size:14px}
.sq-qbox b{font-size:14px}
.sq-flbtn{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:10px;background:#FC4013;color:#FFFFFF;font-weight:700;font-size:14px}
.sq-fl-r{right:30px;top:250px;width:300px;flex-direction:row;align-items:center;gap:12px;transform:rotate(3deg)}
.sq-fl-r > div{display:flex;flex-direction:column;gap:4px}
.sq-dots{display:flex;gap:4px;margin-top:2px}
.sq-dots i{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#1F9D63;color:#FFFFFF}
.sq-dots i svg{width:12px;height:12px}
.sq-dots i.is-x{background:#ED2609}
.sq-chip{position:absolute;z-index:4;color:#1F1E1D;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#FFFFFF;font-size:14px;font-weight:600;box-shadow:0 12px 28px rgba(124,20,10,.12);white-space:nowrap}
.sq-chip i{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#FC4013;color:#FFFFFF}
.sq-chip.c1{left:120px;top:400px}
.sq-chip.c2{right:110px;top:150px}.sq-chip.c2 i{background:#06C755}
.sq-chip.c3{right:200px;top:450px}.sq-chip.c3 i{background:#1F1E1D}
.sq-spk{position:absolute;z-index:1}
.sq-spk.s1{left:340px;top:30px;width:34px;height:34px}
.sq-spk.s2{right:360px;top:500px;width:22px;height:22px}
@keyframes sqf{0%,100%{translate:0 0}50%{translate:0 -10px}}
.sq-fl-l,.sq-chip.c2{animation:sqf 6s ease-in-out infinite}
.sq-fl-r,.sq-chip.c1{animation:sqf 7s ease-in-out infinite;animation-delay:-3s}
.sq-chip.c3,.sq-spk{animation:sqf 5s ease-in-out infinite;animation-delay:-1s}
/* sections */
.sq-sec{max-width:1180px;margin:0 auto;padding:120px 24px 0;text-align:center}
.sq-pans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px;text-align:left}
.sq-pan{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:32px}
.sq-pan.pn1{background:#E9F7EF}.sq-pan.pn2{background:#FFF6D6}.sq-pan.pn3{background:#FFEDEA}
.sq-day{align-self:flex-start;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;background:#FFFFFF}
.sq-pimg{position:relative;height:210px;display:flex;align-items:flex-end;justify-content:center}
.sq-pimg img{width:160px;height:auto}
.sq-say{position:absolute;left:0;top:0;max-width:62%;margin:0;padding:10px 14px;border-radius:18px 18px 18px 6px;background:#FFFFFF;font-size:15px;font-weight:700;line-height:1.4;box-shadow:0 8px 20px rgba(31,30,29,.08)}
.sq-pan.pn3 .sq-say{left:auto;right:0;border-radius:18px 18px 6px 18px}
.sq-pcap{margin:0;font-size:16px;line-height:1.55;font-weight:500}
.sq-pan + .sq-pan::before{content:attr(data-gap);position:absolute;left:0;top:50%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:#1F1E1D;color:#FFE055;font-size:13px;font-weight:700;white-space:nowrap;border:3px solid #FFFFFF;z-index:2}
.sq-why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:20px;padding:36px;border-radius:32px;border:1px solid #EFE3DA;text-align:left}
.sq-tag{display:inline-flex;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;background:#1F1E1D;color:#FFE055}
.sq-why h3{margin:14px 0 0;font-size:28px;line-height:1.35;font-weight:600}
.sq-why p{margin:12px 0 0;font-size:16px;line-height:1.65;color:#524E4C}
.sq-leg{display:flex;gap:18px;margin-top:18px;font-size:14px;color:#524E4C}
.sq-leg span{display:inline-flex;align-items:center;gap:8px}
.sq-leg i{width:22px;height:5px;border-radius:3px}
.sq-why figure{margin:0}
.sq-chart{display:block;width:100%;height:auto}
.sq-why figcaption{margin-top:6px;font-size:13px;color:#8C8784;text-align:right}
/* how */
.sq-how{margin:120px 12px 0;border-radius:48px;background:#FFF6EE;padding:104px 16px 112px}
.sq-howin{max-width:1180px;margin:0 auto;text-align:center}
.sq-rows{display:flex;flex-direction:column;gap:96px;margin-top:64px;text-align:left}
.sq-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.sq-row.is-flip .sq-txt{order:2}
.sq-txt{position:relative;max-width:500px;justify-self:end}
.sq-row.is-flip .sq-txt{justify-self:start}
.sq-time{display:inline-flex;font-size:14px;font-weight:700;color:#C4180A;padding:4px 12px;border-radius:999px;background:#FFFFFF}
.sq-n{position:absolute;right:0;top:-30px;font-size:120px;line-height:1;font-weight:700;color:#FFE3D6;z-index:0}
.sq-txt h3{position:relative;z-index:1;margin:14px 0 0;font-size:34px;line-height:1.3;font-weight:600}
.sq-txt > p{position:relative;z-index:1;margin:14px 0 0;font-size:17px;line-height:1.65;color:#524E4C}
.sq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sq-chips .sq-chip{position:static;animation:none;box-shadow:none;border:1px solid #EFE3DA}
.sq-vis{position:relative;display:flex;justify-content:center}
.sq-row:not(.is-flip) .sq-vis{justify-content:flex-start}
.sq-row.is-flip .sq-vis{justify-content:flex-end}
.lnw.is-tall .fx-block.fx-body > .fx-box > .fx-box:nth-child(2){padding-bottom:20px!important}
.sq-deco{position:absolute;pointer-events:none}
.sq-deco.m1{left:300px;bottom:-30px;width:120px;height:auto}
.sq-spk.s3{right:60px;top:20px;width:40px;height:40px}
.sq-trywrap{position:relative;margin-top:24px;padding-left:34px}
.sq-trypk{position:absolute;left:0;top:50%;margin-top:-37px;width:46px;height:75px;z-index:0}
.sq-try{position:relative;z-index:1;display:flex;gap:12px;align-items:center;padding:16px 20px;border-radius:22px;background:#1F1E1D;color:#FFFFFF}
.sq-try p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.85)}
.sq-try b{display:block;font-size:17px;color:#FFE055}
.sq-demo{width:390px;max-width:100%}
.sq-demo .qbt-opt{transition:background .2s,border-color .2s}
.qbt-opt.sq-ok{border-color:#1F9D63;background:#E9F7EF;box-shadow:0 4px 0 #1F9D63}
.qbt-opt.sq-ok .qbt-tick{display:inline-flex;background:#1F9D63}
.qbt-opt.sq-bad{border-color:#ED2609;background:#FFEDEA;box-shadow:0 4px 0 #ED2609}
.qbt-opt.sq-bad .qbt-tick{background:#ED2609}
.qbt-opt.sq-dim{opacity:.55}
.sq-fb{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:14px;border-radius:22px;background:#FFFFFF;animation:sqin .35s ease-out}
@keyframes sqin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sq-fb.is-ok{flex-direction:row;align-items:center;gap:12px;background:#E9F7EF}
.sq-fb.is-ok b{display:block;font-size:18px;color:#136B42}
.sq-fb.is-ok p{margin:4px 0 0;font-size:15px;line-height:1.5}
.sq-fb-h{display:flex;gap:10px;align-items:center}
.sq-fb-h p{margin:0;padding:8px 12px;border-radius:16px 16px 16px 6px;background:#FFE055;font-size:15px;font-weight:700;line-height:1.4}
.sq-fb .qbt-x-steps{margin:0}
.sq-dbtn{display:flex;justify-content:center;margin-top:14px}
.sq-dbtn .sq-btn{width:100%}
/* ส่วนหลังคาบ แบบการ์ดชิ้นส่วนสำคัญ (ตามภาพอ้างอิงที่ผู้ใช้ส่ง 1 พ.ย.) */
.hw{max-width:1180px;margin:0 auto;padding:120px 24px 0}
.hw-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;text-align:left}
.hw-head .sq-h2{font-size:48px}
.hw-headr p{margin:0 0 24px;font-size:17px;line-height:1.7;color:#524E4C;max-width:480px}
.sq-btn-d{background:#1F1E1D;color:#FFFFFF}.sq-btn-d:hover{background:#3E3D3B;color:#FFFFFF}
.hw-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;text-align:left}
.hw-card{display:flex;flex-direction:column;gap:20px;padding:14px 14px 26px;border-radius:32px;background:#FFFFFF;border:1px solid #EFE3DA}
.hw-card.is-hi{border:2px solid transparent;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(140deg,#FC4013,#FFC21A) border-box;box-shadow:0 30px 60px rgba(252,64,19,.16);transform:translateY(-12px)}
.hw-vis{position:relative;height:290px;border-radius:22px;padding:22px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px;
  background-color:#FFF8F2;background-image:radial-gradient(#F2DCCD 1.2px,transparent 1.3px);background-size:14px 14px}
.hw-vis::after{content:"";position:absolute;inset:auto 0 0 0;height:40px;background:linear-gradient(180deg,rgba(255,248,242,0),#FFF8F2);pointer-events:none}
.hw-txt{padding:0 12px}
.hw-time{display:inline-flex;font-size:13px;font-weight:700;color:#C4180A;padding:3px 10px;border-radius:999px;background:#FFF3ED}
.hw-txt h3{margin:10px 0 6px;font-size:21px;font-weight:600;line-height:1.35}
.hw-txt p{margin:0;font-size:15px;line-height:1.6;color:#524E4C}
.hw-tag{position:absolute;left:18px;top:16px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#FFFFFF;font-size:12px;font-weight:700;box-shadow:0 6px 14px rgba(124,20,10,.08)}
.hw-tag i{width:8px;height:8px;border-radius:50%}
.hw-rep{align-self:flex-start;margin-top:26px;padding:10px 14px;border-radius:16px 16px 16px 6px;background:#FFFFFF;box-shadow:0 8px 20px rgba(124,20,10,.08)}
.hw-rep small{font-size:11px;font-weight:700;color:#716C69}
.hw-rep p{margin:2px 0 0;font-size:14px}
.hw-rep mark{background:#FFE3D6;color:#C4180A;border-radius:4px;padding:0 3px;font-weight:700}
.hw-link{width:40px;height:30px;margin:-8px 0 -8px 30px}
.hw-qbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border-radius:18px;background:#FFFFFF;border:1.5px solid #FFC4A9;box-shadow:0 16px 30px rgba(252,64,19,.14)}
.hw-qbox b{display:block;font-size:15px}
.hw-qbox small{display:block;font-size:12px;font-weight:700;color:#C4180A}
.hw-go{flex:1 1 100%;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;background:#FC4013;color:#FFFFFF;font-size:14px;font-weight:700}
.hw-vis .qbt{margin-bottom:6px}
.hw-vis .qbt-track{margin:40px 2px 4px}
.hw-opt{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:16px;background:#FFFFFF;font-size:16px;border:2px solid #EFE3DA}
.hw-opt .qbt-let{width:32px;height:32px;font-size:15px;border-radius:10px}
.hw-opt b{flex:1}
.hw-opt i{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#FFFFFF}
.hw-opt i svg{width:13px;height:13px}
.hw-opt.is-bad{border-color:#ED2609;background:#FFEDEA}.hw-opt.is-bad i{background:#ED2609}
.hw-opt.is-ok{border-color:#1F9D63;background:#E9F7EF}.hw-opt.is-ok i{background:#1F9D63}
.hw-miss{margin:-4px 0 0 18px;padding:8px 12px;border-radius:12px;background:#FFFFFF;border:1.5px dashed #F4A58A;font-size:13px;line-height:1.45}
.hw-miss span{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:2px 8px;border-radius:999px;background:#1F1E1D;color:#FFE055;font-size:11px;font-weight:700}
.hw-miss span svg{width:12px;height:12px}
.hw-hub{justify-content:flex-end}
.hw-arcs{position:absolute;left:50%;top:22px;width:300px;height:200px;margin-left:-150px}
.hw-who{position:absolute;top:22px;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px;background:#FFFFFF;font-size:13px;font-weight:700;box-shadow:0 8px 18px rgba(124,20,10,.1)}
.hw-who img{width:30px;height:30px;border-radius:50%;background:#FFF3ED;object-fit:contain}
.hw-who.w1{left:16px}.hw-who.w2{right:16px}
.hw-res{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:#FFFFFF;box-shadow:0 16px 30px rgba(124,20,10,.12)}
.hw-res b{font-size:15px}
.hw-rows{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.hw-rows span{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:#FFFFFF;font-size:13px}
.hw-rows em{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.hw-rows em.is-g{background:#DDF4E8;color:#136B42}.hw-rows em.is-r{background:#FFE3D6;color:#9C1510}
.hw-spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:96px;padding:56px;border-radius:40px;background:#FFF6EE;text-align:left}
.hw-spot-t{position:relative}
.hw-spot-t h3{margin:16px 0 0;font-size:40px;line-height:1.2;font-weight:600}
.hw-spot-t > p{margin:14px 0 0;font-size:17px;line-height:1.7;color:#524E4C;max-width:460px}
.hw-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hw-steps span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#FFFFFF;font-size:14px;font-weight:600}
.hw-steps i{font-style:normal;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#FC4013;color:#FFFFFF;font-size:13px}
.hw-spot-img{display:block;width:130px;height:auto;margin-top:28px}
.hw-frame{justify-self:center;padding:14px;border-radius:40px;background-color:#FFFFFF;background-image:radial-gradient(#F2DCCD 1.2px,transparent 1.3px);background-size:14px 14px}
.hw-frame .sq-demo{background:transparent;box-shadow:none;padding-bottom:4px}
.hw-frame .sq-demo .qbt-qcard{box-shadow:0 20px 44px rgba(124,20,10,.12)}
.hw-frame .sq-demo .sq-fb{box-shadow:0 12px 30px rgba(124,20,10,.1)}
@media (max-width:1100px){
  .hw-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .hw-cards{grid-template-columns:minmax(0,1fr);max-width:520px;margin-left:auto;margin-right:auto}
  .hw-card.is-hi{transform:none}
  .hw-spot{grid-template-columns:minmax(0,1fr);padding:32px 20px}
  .hw-spot-img{display:none}
}
@media (max-width:640px){
  .hw{padding:80px 16px 0}
  .hw-head .sq-h2{font-size:32px}
  .hw-headr .sq-btn{width:100%}
  .hw-spot{margin-top:64px;padding:24px 12px;border-radius:28px}
  .hw-spot-t h3{font-size:28px}
  .hw-frame{padding:8px;border-radius:32px}
}

/* bento */
.sq-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:16px;margin-top:52px;text-align:left}
.sq-b{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:32px;background:#F6F2EF}
.sq-b h3{margin:0;font-size:22px;line-height:1.35;font-weight:600;position:relative;z-index:1}
.sq-b > p{margin:0;font-size:15px;line-height:1.6;color:#524E4C;max-width:420px;position:relative;z-index:1}
.sq-bimg{position:absolute;right:14px;top:14px;width:104px;height:auto}
.sq-b .mt-logo{align-self:flex-start}
.sq-b.has-img h3,.sq-b.has-img > p{padding-right:112px}
.sqb-match{grid-column:span 4;background:#FFF3ED}
.sqb-track{grid-column:span 2;background:#E6F0FE}
.sqb-det{grid-column:span 2;grid-row:span 2;background:#1F1E1D;color:#FFFFFF}
.sqb-det > p{color:rgba(255,255,255,.75)}
.sqb-det .mt-logo{margin-top:120px}
.sqb-det .qbt{margin-top:auto}
.sqb-star{grid-column:span 2;background:#FFF6D6}
.sqb-tutor{grid-column:span 2;background:#E9F7EF}
.sqb-set{grid-column:span 4;background:#F3ECFF}
.sqb-set > p{max-width:520px}
.sq-flow{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px}
.sq-rep{flex:1;min-width:0;padding:14px 16px;border-radius:18px;background:#FFFFFF}
.sq-rep small{font-size:12px;font-weight:700;color:#716C69}
.sq-rep p{margin:4px 0 0;font-size:15px;line-height:1.55}
.sq-rep mark{background:#FFE3D6;color:#C4180A;border-radius:4px;padding:0 3px;font-weight:700}
.sq-arr{flex:none;width:40px;height:40px;border-radius:50%;background:#FC4013;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.sq-tags{display:flex;flex-direction:column;gap:8px}
.sq-tags .qbt-topic-tag{font-size:14px;color:#1F1E1D;background:#FFFFFF;padding:8px 14px}
.sqb-track .qbt{margin-top:auto;padding:4px 0 8px}
.sqb-track .qbt-track{margin:46px 6px 4px}
.sqb-star .qbt{margin-top:auto}
.sq-tlist{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:12px}
.sq-trow{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 10px;border-radius:12px;background:#FFFFFF}
.sq-trow i{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#1F9D63;color:#FFFFFF;flex:none}
.sq-trow i svg{width:12px;height:12px}
.sq-trow i.is-x{background:#ED2609}
.sq-setpill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;padding:10px 16px;border-radius:999px;background:#FFFFFF;font-size:14px;font-weight:600}
.sq-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:15px;font-weight:600;color:#FF8A5C;text-decoration:none}
/* band */
.sq-band{position:relative;overflow:hidden;margin:120px 12px 0;border-radius:48px;background:#160F0C;color:#FFFFFF;padding:88px 24px}
.sq-blob.b4{width:700px;height:700px;right:-160px;top:-260px;background:radial-gradient(circle,rgba(252,64,19,.45),rgba(252,64,19,0) 68%)}
.sq-band-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}
.sq-band p{margin:16px 0 0;max-width:560px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.78)}
.sq-band .sq-btns{margin-top:28px}
.sq-fam{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sq-fam a{display:flex;align-items:center;height:52px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.sq-fam a.is-on{border-color:#FC4013;background:rgba(252,64,19,.16)}
.sq-band-img{width:300px;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4))}
@media (max-width:1100px){
  .sq-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:10px}
  .sq-center{position:relative;left:auto;margin:0;width:380px;max-width:100%}
  .sq-fl{position:relative;left:auto!important;right:auto!important;top:auto!important;transform:none;width:380px;max-width:100%}
  .sq-fl-l{order:-1}
  .sq-chip.c1,.sq-chip.c3,.sq-spk.s1,.sq-spk.s2,.sq-peek{display:none}
  .sq-chip.c2{right:auto;left:50%;top:-6px;transform:translateX(40px)}
  .sq-row,.sq-row.is-flip{grid-template-columns:minmax(0,1fr);gap:32px}
  .sq-row.is-flip .sq-txt{order:0}
  .sq-txt,.sq-row.is-flip .sq-txt{justify-self:center;max-width:640px}
  .sq-row .sq-vis,.sq-row.is-flip .sq-vis{justify-content:center}
  .sq-deco.m1{left:auto;right:0}
  .sq-why{grid-template-columns:minmax(0,1fr)}
  .sq-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sqb-match,.sqb-set{grid-column:span 2}
  .sqb-det{grid-column:span 1;grid-row:span 2}
  .sqb-track,.sqb-star,.sqb-tutor{grid-column:span 1}
  .sq-band-in{grid-template-columns:minmax(0,1fr)}
  .sq-band-img{display:none}
}
@media (max-width:860px){
  .sq-h1{font-size:44px}.sq-h2{font-size:36px}
  .sq-pans{grid-template-columns:minmax(0,1fr);max-width:480px;margin-left:auto;margin-right:auto}
  .sq-pan + .sq-pan::before{left:50%;top:0}
  .sq-how,.sq-band{border-radius:32px}
}
@media (max-width:640px){
  .sq-hero{padding:48px 16px 72px;border-radius:0 0 32px 32px}
  .sq-h1{font-size:34px}.sq-h2{font-size:32px}.sq-sub{font-size:16px}
  .sq-chip.c2,.sq-center{display:none}
  .sq-hin .sq-btns .sq-btn,.sq-band .sq-btn{flex:1 1 100%}
  .sq-sec{padding:80px 16px 0}
  .sq-why{padding:22px}.sq-why h3{font-size:22px}
  .sq-how{padding:72px 12px 80px;margin-top:80px}
  .sq-rows{gap:64px}
  .sq-txt h3{font-size:26px}.sq-n{font-size:88px;top:-16px}
  .lnw{width:100%;max-width:340px}
  .sq-deco.m1{display:none}
  .sq-bento{grid-template-columns:minmax(0,1fr)}
  .sqb-match,.sqb-set,.sqb-det,.sqb-track,.sqb-star,.sqb-tutor{grid-column:span 1;grid-row:auto}
  .sqb-det .mt-logo{margin-top:96px}
  .sq-flow{flex-direction:column;align-items:stretch}
  .sq-arr{transform:rotate(90deg);align-self:center}
  .sq-band{padding:64px 18px;margin-top:80px}
  .sq-fam{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .sq-fam a{flex:none;height:46px}
}


.hb-word{font-size:30px;font-weight:700;letter-spacing:-0.01em}
.pg-box{width:420px;max-width:100%;padding:18px;border-radius:28px;background:#FFFFFF;box-shadow:0 30px 60px rgba(124,20,10,.14);display:flex;flex-direction:column;gap:12px;text-align:left;color:#1F1E1D}
.pg-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.pg-tab{flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:8px 14px;border-radius:14px;border:1.5px solid #EFE3DA;background:#FFFFFF;font-family:inherit;font-size:14px;font-weight:700;color:#1F1E1D;cursor:pointer;line-height:1.3}
.pg-tab small{font-size:11px;font-weight:500;color:#716C69}
.pg-tab.is-on{border-color:#FC4013;background:#FFF3ED}
.pg-tab:focus-visible,.pg-prob:focus-visible,.pg-reset:focus-visible{outline:3px solid #3D8BF2;outline-offset:2px}
.pg-detc{display:flex;flex-direction:column;gap:10px;animation:sqin .35s ease-out}
.pg-stem{margin:0;font-size:17px;font-weight:600;line-height:1.5}
.pg-detc .fd-ex-ans,.fd-ex-ans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fd-ex-ans > div{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:14px;font-size:14px;font-weight:600;line-height:1.4}
.fd-ex-ans i{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFFFFF;margin-top:2px}
.fd-ex-ans i svg{width:12px;height:12px}
.fd-ex-ans small{display:block;font-size:11px;font-weight:700}
.fd-ex-ans .is-bad{background:#FFEDEA}.fd-ex-ans .is-bad i{background:#ED2609}.fd-ex-ans .is-bad small{color:#9C1510}
.fd-ex-ans .is-good{background:#E9F7EF}.fd-ex-ans .is-good i{background:#1F9D63}.fd-ex-ans .is-good small{color:#136B42}
.pg-detc .qbt-x-steps{margin:0}
.pg-big{font-size:34px;line-height:1.1}
.pg-plain{transform:rotate(-4deg)}
.pg-detwrap{width:400px;margin-left:-200px}
.pg-detwrap .qbt-det{box-shadow:0 40px 80px rgba(80,10,0,.4),0 0 0 8px #FFFFFF}
.pg-vs{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:16px;align-items:center;margin-top:24px;text-align:left}
.pg-vs > div:not(.pg-vs-mid){padding:28px;border-radius:32px;display:flex;flex-direction:column;gap:14px}
.pg-vs-a{background:#F6F2EF}.pg-vs-b{background:#FFF3ED;border:2px solid #FFC4A9}
.pg-vs p{margin:0;font-size:15px;line-height:1.6;color:#524E4C}
.pg-vs-mid{width:64px;height:64px;border-radius:50%;background:#1F1E1D;color:#FFE055;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.pg-tag-o{background:#FC4013;color:#FFFFFF}
.pg-plaincard{padding:16px;border-radius:20px;background:#FFFFFF}
.pg-plaincard small{font-size:12px;color:#716C69}
.pg-plaincard p{margin:4px 0 10px;font-size:15px;color:#1F1E1D}
.pg-plaincard b{display:inline-flex;padding:6px 12px;border-radius:10px;background:#E9F7EF;color:#136B42;font-size:15px}
.pg-vs-b .qbt{background:#FFFFFF;border-radius:20px;padding:14px}
.pg-vs-b .qbt-x-steps{margin:0}
.pg-ask{padding:14px;border-radius:16px;background:#FFFFFF;box-shadow:0 8px 20px rgba(124,20,10,.08)}
.pg-ask small{font-size:12px;font-weight:700;color:#C4180A}
.pg-ask p{margin:4px 0 0;font-size:15px;line-height:1.5}
.pg-facts{display:flex;flex-direction:column;gap:6px}
.pg-facts span{display:flex;align-items:center;gap:8px;font-size:14px}
.pg-facts b{font-size:12px;padding:3px 10px;border-radius:999px;background:#FFE3D6;color:#C4180A}
.pg-fork{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-fork span{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;font-size:12px;font-weight:700}
.pg-fork span b{font-size:16px;color:#1F1E1D}
.pg-fork .is-b{background:#FFF0EA;border:1.5px dashed #F4A58A;color:#9C1510}.pg-fork .is-g{background:#E9F7EF;border:1.5px solid #9ED9B9;color:#136B42}
.pg-fbq{display:flex;align-items:center;gap:8px;font-size:15px}
.pg-fbb{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-fbb span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-radius:12px;background:#FFFFFF;border:2px solid #FFC4A9;color:#C4180A;font-size:14px;font-weight:700}
.pg-fbb span.is-on{border-color:#1F9D63;color:#136B42;background:#E9F7EF}
.pg-fbr{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:#FFFFFF}
.pg-fbr small{font-size:12px;color:#716C69}
.pg-fbr span{font-size:13px;padding:5px 10px;border-radius:10px;background:#F6F2EF}
.pg-wh{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.pg-wh a{display:flex;align-items:center;height:52px;padding:0 14px;border-radius:16px;background:#FFFFFF}
.pg-rev{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:12px}
.pg-rev span{display:flex;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#FFFFFF;font-size:14px;font-weight:600}
.pg-rev i{font-style:normal;color:#A39C98}
.pg-tut{display:flex;align-items:center;gap:12px;margin-top:auto;padding:12px;border-radius:18px;background:rgba(255,255,255,.08)}
.pg-tut img{flex:none;width:72px;height:auto}
.pg-tut span{font-size:14px;line-height:1.5;color:rgba(255,255,255,.8)}
.pg-tut b{display:block;color:#FFE055}
.sqb-det .pg-tut{background:rgba(255,255,255,.08)}
.pg-subj{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.pg-subj span{padding:6px 12px;border-radius:999px;background:#FFFFFF;font-size:14px;font-weight:600}
/* check */
.pg-ck{display:flex;flex-direction:column;gap:12px;animation:sqin .35s ease-out}
.pg-ck-hero{width:400px;padding:20px;border-radius:28px;background:#FFFFFF;box-shadow:0 40px 80px rgba(124,20,10,.3),0 0 0 8px #FFFFFF;text-align:left}
.pg-ckwrap{width:400px;margin-left:-200px}
.pg-ck-top{display:flex;align-items:center;gap:14px}
.pg-ck-top small{display:block;font-size:13px;color:#716C69}
.pg-ck-top b{display:block;font-size:20px;margin-top:2px}
.pg-crow{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:#F6F2EF;text-align:left}
.pg-crow-h{display:flex;align-items:center;gap:8px;font-size:14px}
.pg-crow-h b{flex:1;font-weight:600}
.pg-crow-h span{color:#524E4C;font-weight:600}
.pg-crow-h em{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.is-up{background:#DDF4E8;color:#136B42}.is-eq{background:#EFEBE8;color:#524E4C}.is-new{background:#E6F0FE;color:#2763C4}
.pg-bar{position:relative;height:10px;border-radius:5px;background:#FFFFFF}
.pg-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#1E8BFF,#3DDC84)}
.pg-bar b{position:absolute;top:-4px;width:3px;height:18px;margin-left:-1px;border-radius:2px;background:#1F1E1D}
.pg-note{margin:0;font-size:12px;color:#716C69}
.pg-lessons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pg-lessons span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#716C69}
.pg-lessons i{font-style:normal;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1F9D63;color:#FFFFFF}
.pg-lessons i svg{width:14px;height:14px}
.pg-lessons .is-cur i{background:#1E8BFF;box-shadow:0 0 0 5px rgba(30,139,255,.2);font-weight:700}
.pg-mix{flex-direction:row;align-items:center;gap:14px}
.pg-leg{display:flex;flex-direction:column;gap:10px}
.pg-leg span{display:flex;flex-direction:column;font-size:13px;color:#524E4C;padding-left:18px;position:relative}
.pg-leg i{position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:3px}
.pg-leg b{font-size:18px;color:#1F1E1D}
.pg-two{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.pg-two span{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:#FFFFFF;font-size:14px;font-weight:600}
.pg-two span.is-on{background:#FC4013;color:#FFFFFF}
.pg-gapline{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font-size:12px;font-weight:700}
.pg-gapline i{flex:1;border-top:2px dashed #2763C4}
.pg-gapline span{padding:4px 8px;border-radius:999px;background:#FFFFFF}
.pg-gapline b{padding:4px 8px;border-radius:999px;background:#2763C4;color:#FFFFFF;white-space:nowrap}
.pg-mini-map{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.pg-mini-map span{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:12px;background:#FFFFFF;font-size:14px}
.pg-stars{font-style:normal;display:inline-flex;gap:1px;color:#F2B200}
.pg-stars svg.is-off{color:#E2DCD8}
/* map */
.pg-mapwrap{width:400px;margin-left:-200px;padding:20px;border-radius:28px;background:#FFFFFF;box-shadow:0 40px 80px rgba(124,20,10,.3),0 0 0 8px #FFFFFF;text-align:left;display:flex;flex-direction:column;gap:12px}
.pg-maphead{display:flex;flex-direction:column;gap:2px}
.pg-maphead small{font-size:13px;color:#716C69}
.pg-maphead .mt-logo{align-self:flex-start}
.pg-map{display:flex;flex-direction:column;gap:6px}
.pg-mrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:#F6F2EF;font-size:14px}
.pg-mrow.is-solo{background:#FFFFFF;margin-top:auto}
.pg-lv{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pg-lv.is-m{background:#DDF4E8;color:#136B42}.pg-lv.is-n{background:#FFF1C9;color:#7A5300}.pg-lv.is-d{background:#FFE3D6;color:#9C1510}.pg-lv.is-f{background:#EFEBE8;color:#524E4C}
.pg-pri{padding:12px 14px;border-radius:16px;background:#FFF3ED;font-size:14px;line-height:1.5}
.pg-pri b{display:block;font-size:13px;color:#C4180A}
.pg-pri.is-big ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.pg-pri.is-big small{font-size:12px;font-weight:600;color:#716C69;margin-left:6px}
.pg-score{transform:rotate(-4deg)}
.pg-flow3{align-items:center}
.pg-src{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pg-src span{display:flex;align-items:center;height:40px;padding:0 10px;border-radius:12px;background:#FFFFFF;box-shadow:0 6px 14px rgba(124,20,10,.08)}
.pg-funnel{width:60px;height:36px}
.pg-into{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 22px;border-radius:18px;background:#FFFFFF;border:2px solid #9EE6BE;box-shadow:0 14px 30px rgba(31,203,107,.18)}
.pg-into small{font-size:12px;font-weight:700;color:#136B42}
.pg-sim{gap:14px}
.pg-sim-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pg-sim-h small{display:block;font-size:12px;color:#716C69}
.pg-sim-h b{font-size:22px}
.pg-sim-h .pg-lv{font-size:14px;padding:6px 14px}
.pg-sim-stars{display:flex;gap:6px;justify-content:center;padding:8px 0}
.pg-sim-stars span{color:#E2DCD8;transition:color .3s,transform .3s}
.pg-sim-stars span.is-on{color:#F2B200;transform:scale(1.08)}
.pg-sim-k{margin:0;font-size:13px;font-weight:700;color:#716C69}
.pg-sim-dots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.pg-sim-dots i{font-style:normal;aspect-ratio:1;max-height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#FFFFFF;background:#F6F2EF;border:1.5px dashed #D2D0CF}
.pg-sim-dots i.is-ok{background:#1F9D63;border:0}.pg-sim-dots i.is-x{background:#ED2609;border:0}
.pg-sim-dots.is-sm i{font-size:14px;border-radius:10px}
.pg-sim-sum{margin:0;font-size:15px;font-weight:700}
.pg-sim-why{margin:0;padding:10px 12px;border-radius:14px;background:#F6F2EF;font-size:14px;line-height:1.55;color:#524E4C;min-height:64px}
.pg-sim-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-sim-btns .sq-btn{min-height:50px;padding:0 12px;font-size:15px;color:#FFFFFF}
.pg-sim-btns .sq-btn svg{width:16px;height:16px}
.pg-ok{background:#1F9D63}.pg-ok:hover{background:#178452}
.pg-bad{background:#ED2609}.pg-bad:hover{background:#C4180A}
.pg-reset{align-self:center;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:#716C69;text-decoration:underline;cursor:pointer;min-height:44px}
.pg-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:14px}
.pg-levels span{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:#FFFFFF;font-size:13px;color:#524E4C}
.pg-levels .pg-lv{align-self:flex-start}
.pg-week{margin-top:auto;padding:14px;border-radius:18px;background:rgba(255,255,255,.08);position:relative;z-index:1;max-width:70%}
.pg-week small{font-size:12px;color:#FFE055;font-weight:700}
.pg-week p{margin:4px 0 0;font-size:15px;line-height:1.55;color:#FFFFFF}
.pg-week b{color:#3DDC84;margin:0 4px}
.pg-weekimg{position:absolute;right:10px;bottom:10px;width:110px;height:auto}
/* streak */
.fv-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.fv-week > span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:#716C69}
.fv-week > span > i{font-style:normal;font-size:11px;font-weight:700;width:100%;aspect-ratio:1;max-width:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#F6F2EF;color:#B5B0AD}
.fv-week > span.is-on > i{background:linear-gradient(160deg,#FF3D8B,#FF7A3D);color:#FFFFFF}
.fv-week > span.is-rest > i{background:#E6F0FE;color:#2763C4}
.fv-week > span.is-today > i{background:#FFFFFF;border:2px dashed #FF3D8B;color:#FF3D8B}
.hw-vis .fv-week > span > i{background-color:#FFFFFF}
.hw-vis .fv-week > span.is-on > i{background:linear-gradient(160deg,#FF3D8B,#FF7A3D)}
.hw-vis .fv-week > span.is-rest > i{background:#E6F0FE}

.pg-stkwrap{width:400px;margin-left:-200px}
.pg-stk{width:100%}
.pg-stkwrap .pg-stk{box-shadow:0 40px 80px rgba(124,20,10,.3),0 0 0 8px #FFFFFF}
.pg-stk-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pg-stk-h .mt-logo,.pg-maphead .mt-logo,.pg-ans .mt-logo,.pg-feat .mt-logo,.pg-wh .mt-logo,.pg-src .mt-logo,.pg-into .mt-logo{flex:none;max-width:none}
.pg-stk-n{display:inline-flex;align-items:baseline;gap:6px;font-size:14px;font-weight:600;color:#524E4C}
.pg-stk-n b{font-size:40px;line-height:1;background:linear-gradient(160deg,#FF3D8B,#FF7A3D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pg-wk > span > i{position:relative}
.pg-wk span i em{font-style:normal;font-size:11px;font-weight:700}
.pg-wk > span:not(.is-on) .pg-fl{display:none}
.pg-wk > span.is-pop > i{animation:pgpop .5s ease-out}
@keyframes pgpop{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:none}}
.pg-mis{display:flex;flex-direction:column;gap:6px}
.pg-mis span{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:12px;background:#F6F2EF;font-size:14px}
.pg-mis b{font-size:13px}
.hw-vis .pg-mis span{background:#FFFFFF}
.pg-full{width:100%;background:linear-gradient(90deg,#FF3D8B,#FF7A3D)}
.pg-full:hover{filter:brightness(.95);background:linear-gradient(90deg,#FF3D8B,#FF7A3D)}
.pg-medal{align-items:center}
.pg-med{flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#FFD65A,#F2A100);color:#FFFFFF;font-weight:700;font-size:22px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.pg-cap{margin:6px 0 0;font-size:13px;font-weight:600;color:#524E4C;text-align:center}
.pg-medals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pg-medals span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#716C69}
.pg-medals i{font-style:normal;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#EFEBE8;color:#A39C98;font-size:18px}
.pg-medals .is-got i{background:linear-gradient(160deg,#FFD65A,#F2A100);color:#FFFFFF;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.pg-times{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.pg-times span{padding:8px 12px;border-radius:12px;background:#FFFFFF;font-size:14px;font-weight:600}
.pg-times span.is-on{background:#FF3D8B;color:#FFFFFF}

.pg-ex{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:16px}
.pg-ex-k{font-size:12px;font-weight:700;color:#FFE055}
.pg-ex-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:#FFFFFF;color:#1F1E1D}
.pg-ex-row span{flex:1;font-size:13px;color:#524E4C;line-height:1.4}
.pg-ex-row b{display:block;font-size:15px;color:#1F1E1D}
.pg-ex-row i{flex:none;width:26px;height:26px;border-radius:50%;background:#1F9D63;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.pg-ex-row i svg{width:14px;height:14px}
.pg-ex-arr{display:flex;justify-content:center;color:#FF7A3D}
.pg-ex-fire{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:linear-gradient(120deg,#FF3D8B,#FF7A3D);color:#FFFFFF}
.pg-ex-fl{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.pg-ex-fire span{font-size:13px;line-height:1.4}
.pg-ex-fire b{display:block;font-size:16px}
.pg-ex-wk{margin-top:4px;padding-right:70px}
.pg-ex-wk > span{color:rgba(255,255,255,.7)}
.pg-ex-wk > span > i{background:rgba(255,255,255,.1)!important}
.pg-ex-wk > span.is-on > i{background:linear-gradient(160deg,#FF3D8B,#FF7A3D)!important}
.pg-ex-wk > span.is-now > i{box-shadow:0 0 0 3px #FFE055}
.pg-ex-img{position:absolute;right:-6px;bottom:-14px;width:84px;height:auto}

.pg-ex-row i.is-x{background:#ED2609}
.pg-ex .qbt-x-miss{margin:0}
.pg-ex-ok{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(61,220,132,.14);color:#BFF5D6;font-size:13px;font-weight:600;padding-right:80px}
.pg-ex-ok i{flex:none;width:22px;height:22px;border-radius:50%;background:#1F9D63;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.pg-ex-ok i svg{width:12px;height:12px}
.pg-ex .sq-more{margin-top:2px}

.pg-done{display:inline-flex;align-items:center;gap:4px;color:#136B42}
.pg-done svg{width:13px;height:13px;padding:2px;border-radius:50%;background:#1F9D63;color:#FFFFFF}
.pg-stk .pg-ex-fire{margin-top:2px}
.pg-medfl{width:330px}
.pg-medals.is-sm{gap:6px;margin-top:6px}
.pg-medals.is-sm i{width:40px;height:40px;font-size:14px}
.pg-medals.is-sm span{font-size:11px}
@media (min-width:1101px){
  .sq-stage.pg-st-stk{height:490px}
  .pg-st-stk .sq-fl-l{top:70px}.pg-st-stk .sq-fl-r{top:240px}
  .pg-st-stk .sq-chip.c1{left:170px;top:330px}.pg-st-stk .sq-chip.c2{right:130px;top:150px}.pg-st-stk .sq-chip.c3{left:auto;right:200px;top:420px}
  .pg-st-stk .sq-spk.s2{right:340px;top:470px}
  .sq-stage.pg-st-ck{height:460px}
  .pg-st-ck .sq-fl-l{top:50px}.pg-st-ck .sq-fl-r{top:220px}
  .pg-st-ck .sq-chip.c1{left:160px;top:330px}.pg-st-ck .sq-chip.c2{right:140px;top:120px}.pg-st-ck .sq-chip.c3{right:260px;top:390px}
  .pg-st-ck .sq-spk.s2{right:240px;top:440px}
  .sq-stage.pg-st-map{height:500px}
  .pg-st-map .sq-fl-l{top:60px}.pg-st-map .sq-fl-r{top:240px}
  .pg-st-map .sq-chip.c1{left:170px;top:340px}.pg-st-map .sq-chip.c2{right:150px;top:130px}.pg-st-map .sq-chip.c3{right:250px;top:420px}
  .pg-st-map .sq-spk.s2{right:230px;top:470px}
}

/* iPad: การ์ดกลางซ้าย การ์ดเสริม 2 ใบเรียงขวา (แทนการต่อกันเป็นแถวยาวคนละขนาด) */
@media (min-width:641px) and (max-width:1100px){
  .sq-stage:not(:has(.pg-orbit)){display:grid;grid-template-columns:400px 300px;grid-template-rows:auto 1fr;justify-content:center;align-items:start;gap:20px;height:auto}
  .sq-stage:not(:has(.pg-orbit)) .sq-center{grid-column:1;grid-row:1 / span 2;width:400px;margin:0}
  .sq-stage:not(:has(.pg-orbit)) .sq-fl{width:100%!important;max-width:none;transform:none}
  .sq-stage:not(:has(.pg-orbit)) .sq-fl-l{grid-column:2;grid-row:1}
  .sq-stage:not(:has(.pg-orbit)) .sq-fl-r{grid-column:2;grid-row:2;flex-direction:column;align-items:flex-start}
  .sq-stage .sq-chip{display:none!important}
  .pg-medfl .pg-medals.is-sm{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.pg-wr{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;background:#FFFFFF;color:#1F1E1D;margin-right:40px}
.pg-wr-h{display:flex;flex-direction:row!important;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid #F1ECE8}
.pg-wr-h > span{flex:none;display:flex}
.pg-wr-h .mt-logo{height:20px!important;width:auto!important;margin:0!important}
.pg-wr-h b{flex:1}
.pg-wr-h b{font-size:14px}
.pg-wr-row{display:flex;justify-content:space-between;font-size:13px;color:#524E4C}
.pg-wr-row b{color:#1F1E1D}
.pg-wr-fl{display:inline-flex;align-items:center;gap:3px;color:#FF3D8B!important}
.pg-wr-fl svg{width:13px;height:13px}
.pg-wr-up{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;background:#F6F2EF;font-size:13px;font-weight:600}
.pg-wr-up span{flex:1}
.pg-wr-up i{font-style:normal;color:#716C69}
.pg-wr-sum{margin:2px 0 0;font-size:13px;line-height:1.55;color:#524E4C}
.pg-wr-btn{display:flex;align-items:center;justify-content:center;min-height:38px;border-radius:10px;background:#FC4013;color:#FFFFFF;font-size:13px;font-weight:700;margin-top:2px}
@media (max-width:640px){.pg-wr{margin-right:0}}
/* hub */
.pg-orbit{position:relative;width:600px;height:560px;margin:0 auto}
.pg-ring{position:absolute;left:0;top:-20px;width:600px;height:600px}
.pg-core{position:absolute;left:50%;top:50%;width:250px;margin:-150px 0 0 -125px;padding:20px;border-radius:32px;background:#FFFFFF;color:#1F1E1D;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 40px 80px rgba(124,20,10,.3)}
.pg-core img{width:130px;height:auto;margin-top:-70px}
.pg-core b{font-size:20px}
.pg-core small{font-size:14px;color:#716C69}
.pg-orb{position:absolute;display:flex;align-items:center;height:52px;padding:0 14px;border-radius:16px;background:#FFFFFF;box-shadow:0 14px 30px rgba(124,20,10,.2);animation:sqf 6s ease-in-out infinite}
.pg-orb.o0{left:240px;top:-20px}.pg-orb.o1{left:430px;top:40px;animation-delay:-1s}.pg-orb.o2{left:520px;top:200px;animation-delay:-2s}.pg-orb.o3{left:450px;top:390px;animation-delay:-3s}
.pg-orb.o4{left:250px;top:470px;animation-delay:-4s}.pg-orb.o5{left:40px;top:390px;animation-delay:-5s}.pg-orb.o6{left:-30px;top:200px;animation-delay:-2.5s}.pg-orb.o7{left:40px;top:40px;animation-delay:-1.5s}
.pg-cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-cards4 .hw-vis{height:220px}
.pg-bars{width:100%;display:flex;flex-direction:column;gap:10px}
.pg-bars .mt-bar{display:grid;align-items:center;gap:8px;font-size:12px}
.pg-bars .mt-bar b{text-align:right}
.pg-bars .mt-bar{grid-template-columns:60px minmax(0,1fr) 36px;color:#524E4C}
.pg-bars .mt-bar span:nth-child(2){background:#FFFFFF;height:8px;border-radius:99px;overflow:hidden}
.pg-bars .mt-bar span:nth-child(2) i{display:block;height:100%}
.pg-route{position:relative;display:flex;justify-content:space-between;padding-top:6px}
.pg-route::before{content:"";position:absolute;left:8px;right:20px;top:15px;border-top:2px dashed #A97CFF}
.pg-route span{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:#524E4C}
.pg-route span i{width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:3px solid #8B4DFF;margin-top:3px}
.pg-route .is-goal i{width:24px;height:24px;margin-top:-2px;border:0;background:#FFC21A;display:flex;align-items:center;justify-content:center;color:#1F1E1D}
.pg-route .is-goal{font-weight:700;color:#1F1E1D}
.pg-probs{display:flex;flex-wrap:wrap;gap:8px}
.pg-prob{border:1.5px solid #EFE3DA;background:#FFFFFF;border-radius:999px;padding:9px 14px;font-family:inherit;font-size:14px;font-weight:600;color:#1F1E1D;cursor:pointer;min-height:44px}
.pg-prob.is-on{border-color:#FC4013;background:#FC4013;color:#FFFFFF}
.pg-ans{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:22px;background:#FFF6EE;text-decoration:none;color:#1F1E1D;animation:sqin .35s ease-out}
.pg-ans-k{font-size:12px;font-weight:700;color:#C4180A}
.pg-ans p{margin:0;font-size:16px;line-height:1.55}
.pg-ans .sq-more{color:#C4180A;margin-top:0}
.pg-ans .mt-logo{align-self:flex-start}
.pg-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:48px;text-align:left}
.pg-feat{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:26px;background:#F6F2EF;text-decoration:none;color:#1F1E1D;border:1.5px solid transparent;transition:border-color .2s,transform .2s}
.pg-feat:hover{border-color:#FC4013;transform:translateY(-2px)}
.pg-feat .mt-logo{align-self:flex-start}
.pg-feat small{font-size:14px;line-height:1.55;color:#524E4C}
.pg-feat span{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#C4180A}
@media (max-width:1100px){
  .pg-vs{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto}
  .pg-vs-mid{justify-self:center}
  .pg-detwrap,.pg-ckwrap,.pg-mapwrap,.pg-stkwrap{margin-left:0}
  .pg-orbit{width:100%;max-width:600px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:90px}
  .pg-ring{display:none}
  .pg-core{position:relative;left:auto;top:auto;margin:0 0 20px;width:100%;max-width:300px;order:-1}
  .pg-orb{position:static;animation:none}
  .pg-cards4,.pg-feats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
@media (max-width:640px){
  .pg-box{padding:14px;border-radius:24px}
  .pg-ck-hero,.pg-mapwrap{width:100%}
  .pg-cards4,.pg-feats{grid-template-columns:minmax(0,1fr)}
  .pg-detc .fd-ex-ans,.fd-ex-ans{grid-template-columns:1fr}
  .pg-week{max-width:100%}.pg-weekimg{display:none}
  .pg-orb{height:44px;padding:0 10px}
}


.hm{position:relative;overflow:hidden;margin:24px 12px 0;border-radius:44px;background:#140D0A;color:#FFFFFF;padding:104px 24px 112px}
.hm-g1{width:700px;height:700px;right:-200px;top:-260px;background:radial-gradient(circle,rgba(252,64,19,.42),rgba(252,64,19,0) 68%)}
.hm-g2{width:620px;height:620px;left:-260px;bottom:-260px;background:radial-gradient(circle,rgba(237,38,9,.3),rgba(237,38,9,0) 70%)}
.hm-in{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.hm-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
.hm-head .sq-h2{font-size:50px}
.hm-headr{position:relative}
.hm-headr p{margin:0 0 22px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.78);max-width:440px}
.hm-mas{position:absolute;right:0;top:-120px;width:120px;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.4))}
.hm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.hm-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#FFFFFF;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.hm-tab i{font-style:normal;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);font-size:12px}
.hm-tab:hover{border-color:rgba(255,255,255,.5)}
.hm-tab.is-on{background:#FFFFFF;color:#1F1E1D;border-color:#FFFFFF}
.hm-tab.is-on i{background:#FC4013;color:#FFFFFF}
.hm-tab:focus-visible,.hm-c:focus-visible{outline:3px solid #3D8BF2;outline-offset:3px}
.hm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.hm-c{display:flex;flex-direction:column;gap:14px;padding:12px 12px 22px;border-radius:28px;background:#FFFFFF;color:#1F1E1D;text-decoration:none;transition:opacity .3s,transform .3s,box-shadow .3s}
.hm-c.is-dim{opacity:.28;transform:scale(.98)}
.hm-c.is-hl{box-shadow:0 0 0 3px #FC4013,0 24px 50px rgba(252,64,19,.3)}
.hm-big{grid-column:span 2;grid-row:span 2;border:2px solid transparent;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(140deg,#FC4013,#FFC21A) border-box}
.hm-w{grid-column:span 2}
.hm-vis{position:relative;height:150px;border-radius:20px;padding:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px;
  background-color:#FFF8F2;background-image:radial-gradient(#F2DCCD 1.2px,transparent 1.3px);background-size:14px 14px}
.hm-big .hm-vis{height:auto;flex:1;min-height:330px;padding:22px}
.hm-t{display:flex;flex-direction:column;gap:6px;padding:0 10px}
.hm-t .mt-logo{align-self:flex-start;margin-top:2px}
.hm-st{font-size:12px;font-weight:700;color:#C4180A}
.hm-t h3{margin:2px 0 0;font-size:19px;font-weight:600;line-height:1.35}
.hm-big .hm-t h3{font-size:28px}
.hm-t p{margin:0;font-size:14px;line-height:1.55;color:#524E4C}
.hm-big .hm-t p{font-size:16px;max-width:460px}
.hm-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:600;color:#C4180A}
.hm-more svg{width:16px;height:16px;transition:transform .2s}
.hm-c:hover .hm-more svg{transform:translateX(3px)}
.hm-bars .mt-bar{grid-template-columns:54px minmax(0,1fr) 34px}
.hm-route{margin-top:6px}
.hm-det{position:relative;display:flex;flex-direction:column;gap:10px;width:100%}
.hm-q{margin:0;font-size:18px;font-weight:600;line-height:1.45}
.hm-det .hw-miss{margin-left:0}
.hm-fbb span{min-height:38px;font-size:13px}
@media (max-width:1100px){.hm-fbb,.hm-det .hw-opt.is-ok{display:none!important}}
.hm-detimg{position:absolute;right:0;top:-54px;width:96px;height:auto}
.hm-trk{margin:-6px 0 0}
.hm-trk .qbt-track{margin:34px 4px 2px}
.hm-dots{align-items:center}
.hm-dots b{margin-left:6px;font-size:14px}
.hm-wk{gap:4px}
.hm-wk > span{font-size:10px}
.hm-wk > span > i{max-width:34px;border-radius:9px;font-size:9px}
.hm-ck{display:flex;align-items:center;gap:16px}
.hm-ckr{flex:1;display:flex;flex-direction:column;gap:6px}
.hm-ckr .pg-crow{background:#FFFFFF;padding:8px 10px}
.hm-map{gap:5px}
.hm-map .pg-mrow{background:#FFFFFF;padding:6px 10px;font-size:13px}
.hm-map .pg-lv{font-size:11px;padding:2px 8px}
.hm-ar{display:flex;flex-direction:column;gap:10px}
.hm-ar-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.hm-timer{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#FFE3E3;color:#C4180A;font-weight:700}
.hm-ar-bar{height:8px;border-radius:4px;background:#FFFFFF}
.hm-ar-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#FF3B3B,#FFC21A)}
.hm-ar-tags{display:flex;flex-wrap:wrap;gap:5px}
.hm-ar-tags span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:#FFFFFF}

/* การ์ดโทนมืด (ผู้ใช้ขอ 2 พ.ย.) */
.hm-c{background:#211814;color:#FFFFFF;border:1px solid rgba(255,255,255,.08)}
.hm-big{border:1px solid rgba(255,255,255,.08);background:#211814}
.hm-vis{background-color:#2C211B;background-image:radial-gradient(rgba(255,255,255,.08) 1.2px,transparent 1.3px);color:#FFFFFF}
.hm-st,.hm-more{color:#FF8A5C}
.hm-t p{color:rgba(255,255,255,.7)}
.hm-q{color:#FFFFFF}
.hm-det .hw-opt,.hm-det .hw-miss,.hm-det .pg-fork,.hm-det .pg-fbb{color:#1F1E1D}
.hm-bars .mt-bar{color:rgba(255,255,255,.8)}
.hm-bars .mt-bar span:nth-child(2){background:rgba(255,255,255,.12)}
.hm-route span{color:rgba(255,255,255,.75)}
.hm-route .is-goal{color:#FFFFFF}
.hm-route span i{background:#211814}
.hm-dots b{color:#FFFFFF}
.hm-trk .qbt-dot{background:rgba(255,255,255,.14)}
.hm-trk .qbt-dot.is-done{background:#FC4013}
.hm-trk .qbt-dot.is-cur{background:#2C211B}
.hm-wk > span{color:rgba(255,255,255,.6)}
.hm-wk > span > i{background:rgba(255,255,255,.08)}
.hm-wk > span.is-on > i{background:linear-gradient(160deg,#FF3D8B,#FF7A3D)}
.hm-wk > span.is-rest > i{background:rgba(61,139,242,.22);color:#9CC3FF}
.hm-wk > span.is-today > i{background:transparent}
.hm-ck svg circle:first-child{stroke:rgba(255,255,255,.14)}
.hm-ck svg text{fill:#FFFFFF}
.hm-ckr .pg-crow,.hm-map .pg-mrow{background:rgba(255,255,255,.07);color:#FFFFFF}
.hm-ckr .pg-crow-h span{color:rgba(255,255,255,.7)}
.hm-ckr .pg-bar{background:rgba(255,255,255,.12)}
.hm-ckr .pg-bar b{background:#FFFFFF}
.hm-map .pg-stars svg.is-off{color:rgba(255,255,255,.2)}
.hm-ar-h{color:#FFFFFF}
.hm-ar-bar{background:rgba(255,255,255,.12)}
.hm-ar-tags span{background:rgba(255,255,255,.1);color:#FFFFFF}
.hm-timer{background:rgba(255,59,59,.2);color:#FFB3B3}

/* ชี้การ์ด: การ์ดอยู่นิ่ง สีเดิม ชิ้นส่วน UI ข้างในขยับแทน (ผู้ใช้ขอ 2 พ.ย.) */
.hm-c,.hm-c:hover,.hm-c:focus{color:#FFFFFF;text-decoration:none}
@keyframes hmgrow{from{transform:scaleX(.12)}to{transform:none}}
@keyframes hmhop{0%,100%{transform:none}45%{transform:translateY(-7px)}}
@keyframes hmpop{0%,100%{transform:none}45%{transform:scale(1.22)}}
@keyframes hmshake{0%,100%{transform:none}25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
@keyframes hmslide{from{transform:translateX(-10px);opacity:.3}to{transform:none;opacity:1}}
@keyframes hmwig{0%,100%{transform:none}30%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
@keyframes hmring{from{stroke-dashoffset:150}to{stroke-dashoffset:0}}
.hm-bars .mt-bar span:nth-child(2) i,.hm-ckr .pg-bar i,.hm-ar-bar i{transform-origin:left center}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hm-c:hover .hm-bars .mt-bar span:nth-child(2) i{animation:hmgrow .7s cubic-bezier(.2,.8,.3,1) both}
  .hm-c:hover .hm-bars .mt-bar:nth-child(2) span:nth-child(2) i{animation-delay:.08s}
  .hm-c:hover .hm-bars .mt-bar:nth-child(3) span:nth-child(2) i{animation-delay:.16s}
  .hm-c:hover .hm-route span i{animation:hmhop .45s ease-out both}
  .hm-c:hover .hm-route span:nth-child(2) i{animation-delay:.1s}
  .hm-c:hover .hm-route span:nth-child(3) i{animation-delay:.2s}
  .hm-c:hover .hm-route span:nth-child(4) i{animation:hmpop .5s ease-out .3s both}
  .hm-c:hover .hm-detimg{animation:hmwig .7s ease-in-out both}
  .hm-c:hover .hm-det .hw-opt.is-bad{animation:hmshake .4s ease-in-out both}
  .hm-c:hover .hm-det .hw-miss{animation:hmslide .45s ease-out .15s both}
  .hm-c:hover .hm-det .hw-opt.is-ok i{animation:hmpop .5s ease-out .3s both}
  .hm-c:hover .hm-trk .qbt-head{animation:hmhop .5s ease-out both}
  .hm-c:hover .hm-dots i{animation:hmpop .4s ease-out both}
  .hm-c:hover .hm-dots i:nth-child(2){animation-delay:.07s}
  .hm-c:hover .hm-dots i:nth-child(3){animation-delay:.14s}
  .hm-c:hover .hm-dots i:nth-child(4){animation-delay:.21s}
  .hm-c:hover .hm-dots i:nth-child(5){animation-delay:.28s}
  .hm-c:hover .hm-wk > span > i{animation:hmpop .4s ease-out both}
  .hm-c:hover .hm-wk > span:nth-child(2) > i{animation-delay:.06s}
  .hm-c:hover .hm-wk > span:nth-child(3) > i{animation-delay:.12s}
  .hm-c:hover .hm-wk > span:nth-child(4) > i{animation-delay:.18s}
  .hm-c:hover .hm-wk > span:nth-child(5) > i{animation-delay:.24s}
  .hm-c:hover .hm-wk > span:nth-child(6) > i{animation-delay:.3s}
  .hm-c:hover .hm-wk > span:nth-child(7) > i{animation-delay:.36s}
  .hm-c:hover .hm-ck svg circle:nth-child(2){animation:hmring .8s cubic-bezier(.2,.8,.3,1) both}
  .hm-c:hover .hm-ckr .pg-bar i{animation:hmgrow .7s cubic-bezier(.2,.8,.3,1) both}
  .hm-c:hover .hm-ckr .pg-crow:nth-child(2) .pg-bar i{animation-delay:.1s}
  .hm-c:hover .hm-map .pg-stars svg{animation:hmpop .4s ease-out both}
  .hm-c:hover .hm-map .pg-mrow:nth-child(2) .pg-stars svg{animation-delay:.1s}
  .hm-c:hover .hm-map .pg-mrow:nth-child(3) .pg-stars svg{animation-delay:.2s}
  .hm-c:hover .hm-ar-bar i{animation:hmgrow .8s cubic-bezier(.2,.8,.3,1) both}
  .hm-c:hover .hm-timer svg{animation:hmwig .5s ease-in-out both}
}
@media (max-width:1100px){
  .hm-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .hm-mas{top:auto;bottom:0;width:96px}
  .hm-headr p{padding-right:110px}
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-big{grid-row:auto}
  .hm-big .hm-vis{min-height:300px}
}
@media (max-width:640px){
  .hm{padding:72px 14px 80px;border-radius:32px}
  .hm-head .sq-h2{font-size:32px}
  .hm-headr p{padding-right:0;font-size:16px}
  .hm-mas{display:none}
  .hm-headr .sq-btn{width:100%}
  .hm-tabs{flex-wrap:nowrap;overflow-x:auto;margin:32px -14px 0;padding:0 14px 6px}
  .hm-tab{flex:none}
  .hm-grid{gap:10px}
  .hm-big,.hm-w{grid-column:span 2}
  .hm-big .hm-vis{min-height:0;padding:16px}
  .hm-big .hm-t h3{font-size:22px}
  .hm-detimg{width:70px;right:-12px;top:-30px}
  .hm-q{font-size:16px;padding-right:64px}
  .hm-s{padding:10px 10px 16px}
  .hm-s .hm-vis,.hm-s .hm-t p{display:none}
  .hm-s .hm-t{padding:0 4px}
  .hm-s .hm-t h3{font-size:15px}
  .hm-w .hm-ck svg{width:76px;height:76px}
}

/* บนเว็บจริง: แถบเมนูลอยทับหัวส้ม (เว้นที่ให้แถบเมนู) */
.hs .sq-hero{padding-top:150px}
.sq-faq .faq{text-align:left}
/* ส่วน Highskill Method บนหน้าแรก (views/home.php) ระยะเท่าส่วนพื้นเข้มอื่นของหน้าแรก */
.hs .hm{margin-top:120px}
/* กล่องที่กดลองได้ไม่ล้นจอมือถือ (ช่อง grid ขยายตามกล่องกว้าง 420px) */
.hw-spot > *{min-width:0}
.hw-frame{max-width:100%}
@media (max-width:640px){.hs .sq-hero{padding-top:112px}.hs .hm{margin-top:80px .hw-frame .pg-box,.hw-frame .sq-demo{width:100%}}}

/* ---- คัดจากหน้าทำโจทย์ของระบบหลัก ---- */
.qbt{--q-bg: #FFF6EE;
    --q-surface: #FFFFFF;
    --q-text: #1F1E1D;
    --q-sub: #524E4C;
    --q-muted: #716C69;
    --q-line: #EFE3DA;
    --q-accent: #FC4013;
    --q-accent-hover: #ED2609;
    --q-accent-dark: #C4180A;
    --q-accent-soft: #FFF3ED;
    --q-accent-text: #C4180A;
    --q-field: #FFFFFF;
    --q-field-line: #E7E6E6;
    --q-focus: #3D8BF2;
    --q-r-card: 26px;
    --q-r-btn: 18px;
    font-family: 'Anuphan', 'Noto Sans Thai', sans-serif;
    color: var(--q-text);}
.qbt[data-age="teen"]{--q-bg: #121110;
    --q-surface: #1F1E1D;
    --q-text: #F6F5F5;
    --q-sub: #D2D0CF;
    --q-muted: #B5B0AD;
    --q-line: #3E3D3B;
    --q-accent-soft: rgba(252, 64, 19, .14);
    --q-accent-text: #FF8A5C;
    --q-field: #151413;
    --q-field-line: #3E3D3B;
    --q-focus: #FFE055;
    --q-r-card: 22px;
    --q-r-btn: 999px;
    color-scheme: dark;}
.qbt *,.qbt *::before,.qbt *::after{box-sizing: border-box;}
@keyframes qbt-in{ from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qbt-wave{ 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg); } 20% { transform: rotate(5deg); } 30% { transform: rotate(0); } }
@keyframes qbt-peek{ 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
.qbt-top{display: flex; align-items: center; gap: 8px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;}
.qbt-icon{width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--q-line); background: var(--q-surface); color: var(--q-sub); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;}
.qbt-icon > svg{width: 20px; height: 20px; stroke: currentColor;}
.qbt-icon.is-ghost{border-color: transparent; background: transparent;}
.qbt-icon:disabled{opacity: .3; cursor: default;}
.qbt-icon:focus-visible{outline: 3px solid var(--q-focus); outline-offset: 2px;}
.qbt[data-age="teen"] .qbt-icon{border-radius: 50%; border-width: 1px; background: transparent;}
.qbt[data-age="teen"] .qbt-icon.is-ghost{border-color: transparent;}
.qbt-count{flex: 1; min-width: 0; text-align: center; line-height: 1.25;}
.qbt-stage{font-size: 13px; font-weight: 600; color: #C4180A;}
.qbt-num{font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;}
.qbt-num span{color: #8A8481; font-weight: 500;}
.qbt[data-age="teen"] .qbt-count{text-align: left;}
.qbt-starpill{position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: #FFE98A; color: #7A4B00; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 #EDBA22; flex-shrink: 0;}
.qbt-starpill.is-big{height: auto; padding: 5px 12px; font-size: 15px; background: #FFE055; box-shadow: none;}
@keyframes qbt-plus{ 0% { transform: translateY(10px) scale(.6); opacity: 0; } 25% { transform: none; opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
.qbt-track{position: relative; display: flex; align-items: center; gap: 3px; height: 14px; margin: 46px 18px 6px;}
.qbt-dot{flex: 1; height: 10px; border-radius: 5px; background: #EFE3DA; transition: background-color .35s ease, height .25s ease, border-color .25s ease;}
.qbt-dot.is-done{background: #FC4013;}
.qbt-dot.is-cur{height: 14px; background: #FFFFFF; border: 2.5px solid #FC4013;}
.qbt-flag{position: absolute; top: -24px; width: 20px; height: 20px; margin-left: -10px; color: #C4180A;}
.qbt-flag{transition: color .3s ease; transform-origin: 20% 100%;}
.qbt-flag.is-got{color: #1F9D63; animation: qbt-flag .7s ease-out;}
@keyframes qbt-flag{ 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(-12deg); } 60% { transform: scale(1.1) rotate(6deg); } 100% { transform: none; } }
.qbt-flag svg{display: block;}
.qbt-head{position: absolute; top: -38px; width: 44px; height: auto; margin-left: -22px; transition: left .55s cubic-bezier(.3, 1.4, .5, 1);}
.qbt-qcard{display: flex; flex-direction: column; gap: 16px; background: var(--q-surface); border-radius: var(--q-r-card); padding: 20px 18px; box-shadow: 0 10px 30px rgba(124, 20, 10, .08);}
.qbt[data-age="teen"] .qbt-qcard{background: transparent; box-shadow: none; padding: 8px 0 0; gap: 18px;}
.qbt-topic-tag{align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--q-muted); padding: 4px 10px; border-radius: 999px; background: var(--q-surface);}
.qbt-stem{margin: 0; font-size: 21px; font-weight: 600; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere;}
.qbt[data-age="teen"] .qbt-stem{font-size: 20px; color: #FFFFFF;}
.qbt-opts{display: flex; flex-direction: column; gap: 10px;}
.qbt-opts.has-img{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.qbt-opts.has-img .qbt-opt{position: relative; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px;}
.qbt-opts.has-img .qbt-let{align-self: flex-start;}
.qbt-opts.has-img .qbt-opt-text{text-align: center; font-size: 16px;}
.qbt-opts.has-img .qbt-tick{position: absolute; top: 10px; right: 10px;}
.qbt-opt{display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px 10px 10px; border: 2px solid var(--q-line); border-radius: 18px; background: var(--q-surface); font-family: inherit; font-size: 19px; font-weight: 600; color: var(--q-text); text-align: left; cursor: pointer; box-shadow: 0 4px 0 var(--q-line); overflow-wrap: anywhere;}
.qbt-opt:focus-visible{outline: 3px solid var(--q-focus); outline-offset: 2px;}
.qbt-opt[aria-pressed="true"]{border-color: #FC4013; background: #FFF3ED; box-shadow: 0 4px 0 #FC4013; animation: qbt-pop .35s ease-out;}
@keyframes qbt-pop{ 40% { transform: scale(1.03); } }
.qbt-let{width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #FFFFFF; flex-shrink: 0; background: #FF6A2B;}
.qbt-opt:nth-child(2) .qbt-let{background: #3D8BF2;}
.qbt-opt:nth-child(3) .qbt-let{background: #1F9D63;}
.qbt-opt:nth-child(4) .qbt-let{background: #8B5CF6;}
.qbt-opt-text{min-width: 0; flex: 1;}
.qbt-tick{display: none; width: 28px; height: 28px; border-radius: 50%; background: #FC4013; color: #FFFFFF; align-items: center; justify-content: center; flex-shrink: 0;}
.qbt-tick > svg{width: 16px; height: 16px; stroke: currentColor; stroke-width: 3;}
.qbt-opt[aria-pressed="true"] .qbt-tick{display: inline-flex;}
.qbt[data-age="teen"] .qbt-opt{border-width: 1px; border-radius: 16px; min-height: 56px; font-size: 18px; box-shadow: none;}
.qbt[data-age="teen"] .qbt-opt[aria-pressed="true"]{border-color: #FC4013; background: rgba(252, 64, 19, .14); box-shadow: inset 0 0 0 1px #FC4013; animation: none;}
.qbt[data-age="teen"] .qbt-let,.qbt[data-age="teen"] .qbt-opt .qbt-let{width: 34px; height: 34px; border-radius: 10px; border: 1px solid #4A4846; background: transparent; color: #B5B0AD; font-size: 15px;}
.qbt[data-age="teen"] .qbt-opt[aria-pressed="true"] .qbt-let{background: #FC4013; border-color: #FC4013; color: #FFFFFF;}
.qbt[data-age="teen"] .qbt-tick{display: none !important;}
@keyframes qbt-toast{ from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qbt-fall{ to { transform: translateY(110vh) rotate(540deg); } }
@keyframes qbt-jump{ 50% { transform: translateY(-10px); } }
@keyframes qbt-spin{ to { transform: rotate(360deg); } }
@keyframes qbt-badge{ from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px){.qbt-track{margin-left: 26px; margin-right: 26px;}}
@media (min-width: 960px){.qbt{--gut: max(32px, calc((100% - 1140px) / 2));}
.qbt-top{padding-left: 0; padding-right: 0;}
.qbt-track{margin-left: 8px; margin-right: 8px;}
.qbt-qcard{padding: 28px 32px; gap: 20px;}
.qbt-stem{font-size: 24px;}
.qbt[data-age="teen"] .qbt-stem{font-size: 24px;}
.qbt-opts{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}}
.qbt-opt,.qbt-icon{transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;}
.qbt-icon:active{transform: scale(.97);}
.qbt-opt:active{transform: translateY(2px);}
@media (hover: hover){.qbt-opt:hover{border-color: #F5B79C;}
.qbt[data-age="teen"] .qbt-opt:hover{border-color: #6B6663;}}
@keyframes qbt-chip{ 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes qbt-bump{ 40% { transform: scale(1.18) rotate(-4deg); } }
@keyframes qbt-rise{ from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes qbt-fade{ from { opacity: 0; } to { opacity: 1; } }
@keyframes qbt-fadeout{ to { opacity: 0; } }
@keyframes qbt-zoom{ from { opacity: 0; transform: scale(.6) translateY(20px); } 70% { transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes qbt-peekin{ from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qbt-in-next{ from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes qbt-in-prev{ from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes qbt-sheet{ from { transform: translateY(100%); } to { transform: none; } }
@keyframes qbt-toastout{ to { opacity: 0; transform: translateY(16px); } }
@keyframes qbt-ring{ from { stroke-dasharray: 0 277; } }
@keyframes qbt-grow-y{ from { transform: scaleY(0); } }
@keyframes qbt-grow-x{ from { transform: scaleX(0); } }
@keyframes qbt-reveal{ from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); } }
@media (prefers-reduced-motion: reduce){.qbt,.qbt *{animation: none !important; transition: none !important;}}
.qbt-det{border-radius: 24px; background: #1F1E1D; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 10px; color: #1F1E1D;}
.qbt-det-top{display: flex; align-items: center; gap: 10px;}
.qbt-det-top img{flex-shrink: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4));}
.qbt-det-top b{display: block; font-size: 19px; font-weight: 800; color: #FFE055; line-height: 1.3;}
.qbt-det-top small{display: block; font-size: 13px; color: #B5B0AD;}
.qbt-det-bub{align-self: flex-start; max-width: 94%; margin: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #FFFFFF; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere;}
.qbt-det-bub.is-ask{background: #FFE055; font-weight: 700;}
.qbt-det-tb{border-radius: 18px; background: #FFFFFF; padding: 12px; display: flex; flex-direction: column; gap: 10px;}
.qbt-det-tl{align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #1F1E1D; color: #FFE055; font-size: 13px; font-weight: 800;}
.qbt-det-fstart{padding: 10px 12px; border-radius: 12px; background: #F6F2EF; font-size: 15px; line-height: 1.5;}
.qbt-det-arm{display: block; width: 200px; max-width: 100%; height: 22px; margin: -4px auto; fill: none; stroke: #B5B0AD; stroke-width: 2; stroke-linecap: round;}
.qbt-det-fsplit{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.qbt-det-fcol{display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; min-width: 0;}
.qbt-det-fcol small{font-size: 13px; font-weight: 800;}
.qbt-det-fcol p{margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;}
.qbt-det-end{display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 10px; font-size: 15px; font-weight: 800; color: #FFFFFF; overflow-wrap: anywhere;}
.qbt-det-end > svg{width: 13px; height: 13px; stroke: currentColor; stroke-width: 3.4; flex-shrink: 0;}
.qbt-det-fcol.is-bad{background: #FFF0EA; border: 1.5px dashed #F4A58A;}
.qbt-det-fcol.is-bad small{color: #9C1510;}
.qbt-det-fcol.is-bad .qbt-det-end{background: #ED2609;}
.qbt-det-fcol.is-good{background: #E9F7EF; border: 1.5px solid #9ED9B9;}
.qbt-det-fcol.is-good small{color: #136B42;}
.qbt-det-fcol.is-good .qbt-det-end{background: #1F9D63;}
@media (max-width: 480px){.qbt-det{padding: 14px 10px 12px; margin: 0 -2px;}
.qbt-det-tb{padding: 10px;}}
.qbt-x-steps{display: flex; flex-direction: column;}
.qbt-x-st{display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 18px;}
.qbt-x-st::before{content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: #F1ECE8;}
.qbt-x-st:last-child{padding-bottom: 0;}
.qbt-x-st:last-child::before{display: none;}
.qbt-x-st > span{width: 30px; height: 30px; border-radius: 50%; background: #FC4013; color: #FFFFFF; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center;}
.qbt-x-st.is-miss > span{background: #1F1E1D; color: #FFE055;}
.qbt-x-stb{display: flex; flex-direction: column; gap: 8px; min-width: 0;}
.qbt-x-stt{margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; padding-top: 2px;}
.qbt-x-work{padding: 8px 12px; border-radius: 10px; background: #F6F2EF; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.7; overflow-wrap: anywhere;}
.qbt-x-eq{display: grid; grid-template-columns: fit-content(55%) 18px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: #F6F2EF; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; overflow-x: auto;}
.qbt-x-eq .l{text-align: right; overflow-wrap: anywhere;}
.qbt-x-eq .e{text-align: center; color: #524E4C;}
.qbt-x-eq .r{overflow-wrap: anywhere; text-wrap: balance;}
.qbt-x-eq small{grid-column: 1 / -1; font-size: 14px; font-weight: 600; line-height: 1.5; color: #524E4C; text-align: left;}
mark.qbt-x-mk{padding: 0 4px; border-radius: 5px; background: #FFE3D6; color: #C42B0B; font-weight: 800;}
mark.qbt-x-mk.is-k1{background: #DCE9FD; color: #1D4FA0;}
mark.qbt-x-mk.is-k2{background: #DDF3E6; color: #13603C;}
mark.qbt-x-mk.is-from{outline: 1.5px dashed currentColor; outline-offset: -1.5px;}
.qbt-x-why{margin: 0; font-size: 15px; line-height: 1.65; color: #524E4C; overflow-wrap: anywhere;}
.qbt-x-why b{color: #1F1E1D;}
.qbt-x-miss{display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #FFF0EA; border: 1.5px dashed #F4A58A; font-size: 15px; line-height: 1.6;}
.qbt-x-flag{align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: #1F1E1D; color: #FFE055; font-size: 13px; font-weight: 800;}
.qbt-x-flag > svg{width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.6;}
.qbt-x-opts{display: flex; flex-direction: column; gap: 6px;}
.qbt-x-opt{display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 12px; background: #F6F2EF; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere;}
.qbt-x-opt > i{width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: #8F8A87; margin-top: 1px; font-style: normal; font-size: 13px; font-weight: 800;}
.qbt-x-opt > i > svg{width: 13px; height: 13px; stroke: currentColor; stroke-width: 3.2;}
.qbt-x-opt .qbt-x-flag{display: flex; margin-top: 6px;}
.qbt-x-opt.is-ok{background: #E9F7EF;}
.qbt-x-opt.is-ok > i{background: #1F9D63;}
.qbt-x-opt.is-pick{background: #FFF0EA; border: 1.5px dashed #F4A58A;}
.qbt-x-opt.is-pick > i{background: #ED2609;}
.qbt-x-final{display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #E7F6EE; color: #13603C; font-size: 16px; font-weight: 700; line-height: 1.6;}
.qbt-x-final > i{width: 24px; height: 24px; border-radius: 50%; background: #1F9D63; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;}
.qbt-x-final > i > svg{width: 14px; height: 14px; stroke: currentColor; stroke-width: 3;}


/* เฉลยแบบไล่ตัวเลือกในตัวอย่างของหน้าเหล่านี้ */
.qbt-x-opt > span > b{display: block;}