/* ---- p_28_pf-skills.css ---- */
/* =====================================================================
   MY SKILLS (.sk-sl) - phiếu năng lực / bảng kỹ thuật.
   Ngôn ngữ: giấy kẻ ô li (lưới 20px, vạch đậm mỗi 100px), thước đo chạy dưới thanh đầu trang, nhãn kỹ thuật in nhỏ,
   điểm đánh dấu + vòng tròn đo, thanh nhịp (tick) 0-100, góc cắt (crop mark). Nền kem, chữ đen, điểm nhấn cam.
   Khối tối (.sl-dk) xen kẽ như mặt đồng hồ. Hệ màu: cam #ff6a13 / đen / trắng (+ xám, cam nhạt, giấy #f5f4f1). Một font Be Vietnam Pro.
   Mobile trước; mở rộng ở 700px, 900px, 1025px.
   ===================================================================== */
.sk-sl{
  --bg:#f5f4f1;--bg2:#ecebe6;--card:#fff;--ink:#0a0a0c;--mut:#55555d;--ln:rgba(10,10,12,.16);--ln2:rgba(10,10,12,.36);
  --ac:#ff6a13;--ac2:#ff8c42;--aci:#0a0a0c;--r:3px;--bw:1px;--sh:none;--hfw:800;--hls:-.035em;
  --g1:rgba(10,10,12,.05);--g2:rgba(10,10,12,.11);--lo:#ffc59a;
  --c1:#ff6a13;--c2:#ffc59a;--c3:#0a0a0c;--c4:#8b8b92;--c5:#d9d7d2;
  font-variant-numeric:tabular-nums
}
:where(.sk-sl) :is(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
:where(.sk-sl) :is(ul,ol){padding:0;list-style:none}
:where(.sk-sl) button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.sk-sl :focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sk-sl .btn{border-radius:var(--r)}
.sk-sl .btn-g{background:transparent}
.sk-sl .s-sec{padding-block:clamp(40px,7vw,104px)}
.sk-sl .s-sec.tight{padding-block:clamp(32px,5vw,72px)}
.sk-sl .s-head{margin-bottom:clamp(20px,3.4vw,44px)}
.sk-sl .s-h{font-size:clamp(26px,6.6vw,54px);line-height:1.12;text-wrap:balance}
.sk-sl .s-h.sm{font-size:clamp(24px,5.4vw,40px)}
.sk-sl .s-lead{font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.6;margin-top:12px}
.sl-s3,.sl-s6,.sl-s8{background-image:linear-gradient(var(--g1) 1px,transparent 1px),linear-gradient(90deg,var(--g1) 1px,transparent 1px);background-size:20px 20px}
.sk-sl .s-sec.alt{background-color:var(--bg2);background-image:radial-gradient(rgba(10,10,12,.2) 1.1px,transparent 1.6px);background-size:18px 18px;border-block:1px solid var(--ln)}

/* khối tối: mặt đồng hồ đo */
.sl-dk{--bg:#0a0a0c;--bg2:#111115;--card:#16161b;--ink:#fff;--mut:#a7a7b0;--ln:rgba(255,255,255,.16);--ln2:rgba(255,255,255,.38);--line:rgba(255,255,255,.14);--g1:rgba(255,255,255,.04);--g2:rgba(255,255,255,.085);
  background-color:var(--bg);color:var(--ink);background-image:linear-gradient(var(--g1) 1px,transparent 1px),linear-gradient(90deg,var(--g1) 1px,transparent 1px);background-size:20px 20px}

/* nhãn đầu mục: vòng tròn đo + thước */
.sk-sl .sl-tag{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase}
.sl-tag i{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;font-style:normal;font-size:12px;letter-spacing:0;position:relative}
.sl-tag i::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed currentColor;opacity:.35}
.sl-tag::after{content:"";flex:1;max-width:200px;height:9px;opacity:.5;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) 0 100%/100% 5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}

/* góc cắt (crop mark) dùng chung */
.sl-plot::before,.sl-card::before,.sl-plot2::before{content:"";position:absolute;inset:-7px;pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 14px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 100% 0/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 14px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 0 100%/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 14px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 100% 100%/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 14px no-repeat}

/* =====================  1 · HERO  ===================== */
.sl-hero{padding:clamp(100px,9vw,132px) 0 clamp(30px,5vw,64px);background-color:var(--bg);
  background-image:linear-gradient(var(--g2) 1px,transparent 1px),linear-gradient(90deg,var(--g2) 1px,transparent 1px),linear-gradient(var(--g1) 1px,transparent 1px),linear-gradient(90deg,var(--g1) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-1px -1px}
.sl-hero::before{content:"";position:absolute;inset:0 0 auto;height:calc(78px + env(safe-area-inset-top,0px));background:#0a0a0c;z-index:-1}
.sl-hero::after{content:"";position:absolute;left:0;right:0;top:calc(78px + env(safe-area-inset-top,0px));height:16px;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(10,10,12,.62) 0 1px,transparent 1px 50px) 0 0/100% 14px no-repeat,repeating-linear-gradient(90deg,rgba(10,10,12,.42) 0 1px,transparent 1px 10px) 0 0/100% 7px no-repeat}
.sl-hero .s-crumb{margin-bottom:12px}
.sl-hero .s-crumb a{position:relative}
.sl-hero .s-crumb a::after{content:"";position:absolute;inset:-14px -6px}
.sl-hg{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "fig" "cd";gap:clamp(20px,5vw,30px);align-items:start}
.sl-hd{grid-area:hd;min-width:0}
.sl-fig{grid-area:fig;position:relative;min-width:0}
.sl-card{grid-area:cd}
.sk-sl .sl-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 12px;font:600 12px/1.4 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sl-meta span:first-child{color:var(--ink)}
.sl-meta span:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--ac)}
.sk-sl .sl-title{font-size:clamp(54px,15.5vw,104px);line-height:.94;letter-spacing:-.05em}
.sl-title em{font-style:normal;padding-inline:.03em;background:linear-gradient(var(--ac),var(--ac)) 0 90%/100% .2em no-repeat}
.sk-sl .sl-hd .s-sub{font-size:clamp(16px,1.6vw,19px);margin-top:16px;max-width:46ch}
.sl-hero .s-btns{gap:8px;margin-top:18px}
.sl-hero .btn{padding-inline:12px;letter-spacing:.04em}

/* radar hero */
.sl-plot{position:relative;aspect-ratio:1;width:100%;max-width:640px;margin-inline:auto}
.sl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--ink)}
.sl-sp{fill:none;stroke:var(--ink);stroke-opacity:.1;stroke-width:.18}
.sl-rg circle{stroke:var(--ink);stroke-opacity:.22;stroke-width:.2}
.sl-rg circle:last-child{stroke-opacity:.6;stroke-width:.32}
.sl-bz1{stroke:var(--ink);stroke-width:2.2;stroke-dasharray:.3 .8938;opacity:.5;transform:rotate(-90deg);transform-origin:50px 52px}
.sl-bz2{stroke:var(--ink);stroke-width:3.2;stroke-dasharray:.45 5.606;opacity:.9;transform:rotate(-90deg);transform-origin:50px 52px}
.sl-axl{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:.3}
.sl-pg{fill:var(--ac);fill-opacity:.17;stroke:var(--ac);stroke-width:.85;stroke-linejoin:round}
.sl-mk g{transform-box:fill-box;transform-origin:center}
.sl-md{fill:var(--ink)}
.sl-mr{fill:none;stroke:var(--ac);stroke-width:.4;stroke-dasharray:.9 .9;transform-box:fill-box;transform-origin:center}
.sl-ct{fill:var(--ink)}
.sl-hl,.sl-ax{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px 0 9px;border:1px solid var(--ink);border-radius:var(--r);background:var(--card);color:var(--ink);font:600 12.5px/1.15 var(--fb);text-align:left;cursor:pointer;touch-action:manipulation;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.sl-hl b,.sl-ax b{font:800 22px/1 var(--fb);letter-spacing:-.04em;min-width:1.5ch}
.sl-hl span,.sl-ax span{display:block}
.sl-h0{--i:0;left:50%;top:14.6%;transform:translate(-50%,-100%)}
.sl-h1{--i:1;right:0;top:38.8%;transform:translateY(-100%)}
.sl-h2{--i:2;left:71.8%;top:83%;transform:translateX(-50%)}
.sl-h3{--i:3;left:28.2%;top:83%;transform:translateX(-50%)}
.sl-h4{--i:4;left:0;top:38.8%;transform:translateY(-100%)}
.sl-hl.is-cur{background:var(--ink);color:#fff}
.sl-hl.is-cur b{color:var(--ac)}
.sl-rd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:8px 12px;margin-top:clamp(14px,3vw,22px);padding-top:12px;border-top:1px solid var(--ln2)}
.sl-rd-k{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase}
.sl-rd-k i{width:8px;height:8px;border-radius:50%;background:var(--ac)}
.sl-rd-n{font:800 15px/1.2 var(--ff);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-rd-vv{display:inline-flex;align-items:baseline;gap:3px}
.sl-rd-v{font:800 26px/1 var(--ff);letter-spacing:-.04em}
.sl-rd-vv small{font:600 13px var(--fb);color:var(--mut)}
.sl-rd-nd{grid-column:1/-1;position:relative;display:block;height:18px;
  background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1.5px 12px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 5%) 0 100%/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 10%) 0 100%/100% 12px no-repeat}
.sl-rd-nd i{position:absolute;left:calc(var(--v)*100%);top:-3px;width:0;height:0;margin-left:-6px;border:6px solid transparent;border-top:10px solid var(--ac);transition:left .7s cubic-bezier(.2,.9,.25,1)}
.sl-rd-sc{grid-column:1/-1;display:flex;justify-content:space-between;font:600 12px/1 var(--fb);color:var(--mut)}
.sl-rd-sc em{font-style:normal}

/* danh thiếp SKILLSET v10 */
.sl-card{position:relative;width:100%;max-width:460px;padding:16px 16px 6px;background:var(--card);border:1px solid var(--ink);border-radius:var(--r);box-shadow:0 26px 30px -26px rgba(10,10,12,.7);rotate:-1deg}
.sl-cd-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sl-cd-tag{display:inline-block;padding:7px 10px 6px;background:var(--ink);color:#fff;font:700 12px/1 var(--fb);letter-spacing:.22em;text-transform:uppercase}
.sk-sl .sl-cd-v{display:inline-block;font:400 46px/1 var(--fd);text-transform:none;letter-spacing:.01em;padding:.06em .1em 0;background:linear-gradient(var(--ac),var(--ac)) 0 90%/100% .26em no-repeat}
.sk-sl .sl-cd-nm{font:800 22px/1.15 var(--ff);letter-spacing:-.03em}
.sk-sl .sl-cd-rl{margin-top:2px;font-size:14px;color:var(--mut)}
.sl-cd-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--ln2)}
.sl-cd-st b{display:block;font:800 24px/1 var(--ff);letter-spacing:-.04em}
.sl-cd-st span{display:block;margin-top:5px;font-size:12px;line-height:1.25;color:var(--mut)}
.sl-cd-ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px;margin-top:12px;border-top:1px solid var(--ln)}
.sl-cd-ft a{display:inline-flex;align-items:center;min-height:46px;font:700 16px var(--fb);letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--ac);text-underline-offset:4px;text-decoration-thickness:2px}
.sl-cd-ft span{font-size:14px;color:var(--mut)}

/* =====================  2 · RADAR TƯƠNG TÁC  ===================== */
.sl-s2{scroll-margin-top:0}
.sl-lab{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.sl-lab-bar{display:grid;gap:10px;min-width:0}
.sl-sw{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%;min-height:50px;padding:0;border:1px solid var(--ln2);border-radius:99px;background:rgba(255,255,255,.05);cursor:pointer;overflow:hidden;touch-action:manipulation}
.sl-sw span{position:relative;z-index:1;display:grid;place-items:center;min-height:48px;padding:0 6px;font:700 13px/1.15 var(--fb);letter-spacing:.05em;text-transform:uppercase;text-align:center;transition:color .35s}
.sl-sw-k{position:absolute;z-index:0;left:0;top:0;bottom:0;width:50%;border-radius:99px;background:var(--ac);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.sl-sw[aria-checked=true] .sl-sw-k{transform:translateX(100%)}
.sl-sw .sl-sw-a{color:#0a0a0c}.sl-sw .sl-sw-b{color:#fff}
.sl-sw[aria-checked=true] .sl-sw-a{color:#fff}.sl-sw[aria-checked=true] .sl-sw-b{color:#0a0a0c}
.sl-lg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;line-height:1.3;color:var(--mut)}
.sl-lg span{display:inline-flex;align-items:center;gap:8px}
.sl-lg span::before{content:"";width:22px;height:0;border-top:3px solid var(--ac)}
.sl-lg .sl-lg-g::before{border-top:2px dashed #fff}
.sl-lg .sl-lg-r::before{height:8px;border:0;background:repeating-linear-gradient(90deg,var(--mut) 0 1px,transparent 1px 5px) 0 100%/100% 100% no-repeat}
.sl-plot2{position:relative;aspect-ratio:1;width:100%;max-width:580px;margin-inline:auto}
.sl-plot2::before{opacity:.5}
.sl-plot2 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sl-plot2 .sl-sp{stroke:#fff;stroke-opacity:.1}
.sl-plot2 .sl-rg circle{stroke:#fff;stroke-opacity:.2}
.sl-plot2 .sl-rg circle:last-child{stroke-opacity:.55}
.sl-plot2 .sl-axl{stroke:#fff;stroke-opacity:.4}
.sl-wedge{fill:var(--ac);fill-opacity:.12;transition:opacity .3s}
.sl-tkd{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:.3}
.sl-tko{fill:none;stroke:var(--ac);stroke-width:.5;stroke-linecap:round}
.sl-gp{fill:#fff;fill-opacity:.07;stroke:#fff;stroke-width:.55;stroke-dasharray:1.4 1.1;stroke-linejoin:round;opacity:0;transition:opacity .4s}
.sl-plot2.is-goal .sl-gp{opacity:1}
.sl-np{fill:var(--ac);fill-opacity:.2;stroke:var(--ac);stroke-width:.9;stroke-linejoin:round}
.sl-v{fill:#fff;stroke:var(--ac);stroke-width:.55}
.sl-vg{fill:#0a0a0c;stroke:#fff;stroke-width:.4;opacity:0;transition:opacity .4s}
.sl-plot2.is-goal .sl-vg{opacity:1}
.sl-ms{fill:none;stroke:var(--ac);stroke-width:.4;stroke-dasharray:1 .9;transform-box:fill-box;transform-origin:center}
.sl-ax{border-color:var(--ln2);background:#16161b;color:#fff}
.sl-ax.is-sel{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.sl-ax.is-sel b{color:#0a0a0c}
.sl-ax-d{position:absolute;right:-6px;top:-10px;padding:3px 6px 2px;border-radius:99px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb);font-style:normal;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.2,1.4,.3,1)}
.sl-plot2.is-goal .sl-ax-d{opacity:1;transform:none}
.sl-plot2.is-goal .sl-ax.is-sel .sl-ax-d{background:#fff}
.sl-detail{position:relative;padding:16px 14px 16px;border:1px solid var(--ln2);border-radius:var(--r);background:rgba(255,255,255,.045);min-width:0}
.sl-dt-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sk-sl .sl-dt-n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sk-sl .sl-dt-t{margin-top:6px;font-size:clamp(22px,5.6vw,30px);line-height:1.15;letter-spacing:-.03em}
.sl-dt-sc{flex:none;display:flex;align-items:baseline;gap:4px}
.sl-dt-sc b{font:800 clamp(44px,12vw,64px)/.9 var(--ff);letter-spacing:-.06em;color:var(--ac)}
.sl-dt-sc em{font-style:normal;font-size:14px;color:var(--mut)}
.sl-dt-gl{display:none;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--mut)}
.sl-lab.is-goal .sl-dt-gl{display:flex}
.sl-dt-gl b{font:800 20px/1 var(--ff);color:#fff}
.sl-dt-gl u{text-decoration:none;padding:3px 7px 2px;border-radius:99px;background:var(--ac);color:#0a0a0c;font:800 12px/1.2 var(--fb)}
.sl-mt{position:relative;height:44px;margin:10px 0 14px;--now:0;--goal:0}
.sl-mt-f{position:absolute;left:0;bottom:22px;height:8px;width:calc(var(--now)*1%);background:var(--ac);transition:width .8s cubic-bezier(.2,.9,.25,1)}
.sl-mt::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:14px;pointer-events:none;
  background:linear-gradient(#fff,#fff) 0 100%/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 1px,transparent 1px 5%) 0 100%/100% 6px no-repeat,repeating-linear-gradient(90deg,#fff 0 1.5px,transparent 1.5px 10%) 0 100%/100% 12px no-repeat}
.sl-mt::after{content:"";position:absolute;right:0;bottom:22px;width:1.5px;height:12px;background:#fff}
.sl-mt-g{position:absolute;left:calc(var(--goal)*1%);bottom:28px;width:14px;height:14px;margin-left:-7px;border:2px solid #fff;background:#0a0a0c;transform:rotate(45deg);opacity:0;transition:left .8s cubic-bezier(.2,.9,.25,1),opacity .35s}
.sl-lab.is-goal .sl-mt-g{opacity:1}
.sl-mt-n{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:600 12px/1 var(--fb);color:var(--mut)}
.sl-mt-n em{font-style:normal}
.sl-dt-cols{display:grid;gap:12px}
.sk-sl .sl-dt-l{margin-bottom:6px;font:700 12px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.sl-dt-l small{font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--mut);font-weight:500}
.sk-sl .sl-dt-u{font-size:15px;line-height:1.55;color:#ececf0}
.sl-dt-ev li{position:relative;padding:8px 0 8px 28px;border-top:1px solid var(--ln);font-size:15px;line-height:1.5;color:#ececf0}
.sl-dt-ev li:last-child{border-bottom:1px solid var(--ln)}
.sl-dt-ev li::before{content:"";position:absolute;left:3px;top:13px;width:13px;height:7px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg)}
.sl-dt-go{margin-top:14px;width:100%}

/* =====================  3 · BẠN ĐANG CẦN…  ===================== */
.sl-need{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.sl-nq{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sl-nb{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border:1px solid var(--ln2);border-radius:var(--r);background:var(--card);font:700 15px/1.2 var(--fb);text-align:left;cursor:pointer;touch-action:manipulation;transition:background-color .3s,color .3s,border-color .3s}
.sl-nb:last-child{grid-column:1/-1}
.sl-nb .s-ico{flex:none;width:34px;height:34px;margin:0;background:var(--bg2);color:var(--ink);border-radius:50%}
.sl-nb .s-ico svg{width:18px;height:18px}
.sl-nb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sl-nb.on .s-ico{background:var(--ac);color:#0a0a0c}
.sl-nres{min-width:0}
.sl-nlist{display:block}
.sl-nrow{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ln2)}
.sl-nrk{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;font:800 13px/1 var(--fb)}
.sl-nrow[data-pos="1"] .sl-nrk{background:var(--ink);color:#fff}
.sl-nnm{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.sl-nnm b{font:700 15.5px/1.25 var(--fb)}
.sl-nnm em{font:700 12px/1.2 var(--fb);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.sl-nrow[data-role="lead"] .sl-nnm em{color:var(--ink);background:linear-gradient(var(--ac),var(--ac)) 0 100%/100% 35% no-repeat}
.sl-nv{font:800 22px/1 var(--ff);letter-spacing:-.04em}
.sl-nbar{grid-column:2/-1;position:relative;display:block;height:12px;border:1px solid var(--ln2);background:var(--card);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--ln) calc(10% - 1px) 10%)}
.sl-nbar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0)*100%);background:var(--ink);transition:width .8s cubic-bezier(.2,.9,.25,1)}
.sl-nrow[data-role="lead"] .sl-nbar i{background:var(--ac)}
.sl-nrow[data-role="aid"] .sl-nbar i{background:var(--lo)}
.sl-nrow[data-role="ref"] .sl-nbar i{background:repeating-linear-gradient(135deg,var(--c4) 0 2px,var(--card) 2px 5px)}
.sl-nrec{margin-top:14px;padding:14px;background:var(--ink);color:#fff;border-radius:var(--r)}
.sl-rec-k{font:700 12px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.sl-rec-k small{font-size:12px;letter-spacing:.04em;text-transform:none;color:#a7a7b0;font-weight:500}
.sk-sl .sl-rec-t{margin-top:6px;font-size:15.5px;line-height:1.55;color:#f2f2f4}
.sl-rec-b{display:grid;gap:8px;margin-top:12px}
.sk-sl .sl-nrec .btn-g{border-color:rgba(255,255,255,.45);color:#fff}
.sk-sl .sl-nrec .btn{width:100%}

/* =====================  4 · BỘ CÔNG CỤ  ===================== */
.sl-tt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sl-tt button{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px 6px 6px;border:1px solid var(--ln2);border-radius:var(--r);background:var(--card);font:700 14.5px/1.2 var(--fb);text-align:left;cursor:pointer;touch-action:manipulation;transition:background-color .3s,color .3s,border-color .3s}
.sl-tt button b{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:2px;background:var(--bg2);font:800 13px/1 var(--fb)}
.sl-tt button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sl-tt button[aria-selected=true] b{background:var(--ac);color:#0a0a0c}
.sl-tp{position:relative;margin-top:12px;padding:12px;border:1px solid var(--ln2);border-radius:var(--r);background:var(--card)}
.sl-tp::before{content:"";position:absolute;left:14px;top:-1px;width:44px;height:3px;background:var(--ac)}
.sl-chs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sl-ch{display:flex;align-items:center;gap:0;min-height:52px;padding:0 10px 0 0;border:1px solid var(--ln2);border-radius:2px;background:var(--card);font:600 14px/1.2 var(--fb);text-align:left;cursor:pointer;touch-action:manipulation;transition:background-color .3s,color .3s,border-color .3s}
.sl-ch i{align-self:stretch;display:grid;place-items:center;flex:none;min-width:44px;margin-right:9px;border-right:1px solid var(--ln2);background:var(--bg2);font:700 12px/1 var(--fb);font-style:normal;letter-spacing:.04em}
.sl-ch[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sl-ch[aria-pressed=true] i{background:var(--ac);color:#0a0a0c;border-color:var(--ac)}
.sk-sl .sl-td{margin-top:14px;padding:12px 14px;border-left:3px solid var(--ac);background:var(--bg);font-size:15.5px;line-height:1.6;min-height:96px}
.sl-td b{display:block;margin-bottom:2px;font:800 16px/1.3 var(--ff)}

/* =====================  5 · CẤP ĐỘ  ===================== */
.sl-lv-list{position:relative;display:grid;gap:10px;padding-left:46px;--p:0}
.sl-lv-list::before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.34) 0 2px,transparent 2px 8px)}
.sl-lv-list::after{content:"";position:absolute;left:15px;top:10px;width:2px;height:calc((100% - 20px)*var(--p));background:var(--ac);box-shadow:0 0 12px rgba(255,106,19,.55)}
.sl-lv-i{position:relative;padding:12px 12px 12px 14px;border:1px solid var(--ln);border-radius:var(--r);background:rgba(255,255,255,.04);transition:opacity .5s,border-color .5s,background-color .5s}
.sl-lv-n{position:absolute;left:-46px;top:12px;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ln2);border-radius:50%;background:#0a0a0c;font:800 12px/1 var(--fb);transition:background-color .4s,color .4s,border-color .4s}
.sl-lv-i.is-on{border-color:rgba(255,106,19,.55);background:rgba(255,106,19,.07)}
.sl-lv-i.is-on .sl-lv-n{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.sl-lv-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.sk-sl .sl-lv-t h3{font-size:20px;line-height:1.2;letter-spacing:-.025em}
.sl-lv-r{padding:3px 8px 2px;border:1px solid var(--ln2);border-radius:99px;font:700 12px/1.3 var(--fb);letter-spacing:.06em;color:var(--mut)}
.sl-sg{margin-left:auto;width:30px;height:18px;fill:rgba(255,255,255,.22)}
.sl-sg .on{fill:var(--ac)}
.sk-sl .sl-lv-b>p{margin-top:6px;font-size:15px;line-height:1.5;color:#e4e4e8}
.sl-lv-p{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sl-lv-p:empty{display:none}
.sl-lv-p span{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 6px 0 11px;border-radius:99px;background:var(--ac);color:#0a0a0c;font:700 12.5px/1 var(--fb)}
.sl-lv-p b{display:grid;place-items:center;min-width:26px;height:22px;padding:0 5px;border-radius:99px;background:#0a0a0c;color:#fff;font:800 12px/1 var(--fb)}

/* =====================  6 · HỌC ĐANG THỰC HÀNH  ===================== */
.sl-learn{display:grid;gap:12px;min-width:0}
.sl-lc{position:relative;border:1px solid var(--ln2);border-radius:var(--r);background:var(--card);overflow:hidden}
.sl-lc-h{display:grid;grid-template-columns:52px minmax(0,1fr) auto 24px;gap:12px;align-items:center;width:100%;min-height:80px;padding:12px 14px 10px;border:0;background:none;text-align:left;cursor:pointer;touch-action:manipulation}
.sl-lc-ic{width:52px;height:52px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sl-lc-ic .bx{fill:var(--ac);stroke:var(--ink);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 100%}
.sl-lc-ic .cl{fill:none;stroke:var(--ink);stroke-width:1.6}
.sl-lc-ic .cl.hot{fill:var(--ac)}
.sl-lc-ic circle{stroke:var(--ac);stroke-width:2.4}
.sl-lc-tt{display:block;min-width:0}
.sl-lc-tt b{display:block;font:800 17px/1.2 var(--ff);letter-spacing:-.02em}
.sl-lc-tt small{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--mut)}
.sl-lc-pc{font:800 24px/1 var(--ff);letter-spacing:-.04em}
.sl-lc-ch{position:relative;width:24px;height:24px;border:1px solid var(--ln2);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/10px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 10px no-repeat;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sl-lc.open .sl-lc-ch{transform:rotate(135deg);background-color:var(--ac);border-color:var(--ac)}
.sl-lc-bar{position:relative;height:16px;margin:0 14px 14px;border:1px solid var(--ink);background:var(--card)}
.sl-lc-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0)*100%);background:var(--ac);transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.sl-lc-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--ink) calc(25% - 1px) 25%)}
.sl-lc-pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.sl-lc.open .sl-lc-pn{grid-template-rows:1fr}
.sl-lc-pn>div{overflow:hidden;min-height:0}
.sk-sl .sl-lc-g{padding:0 14px;font-size:15px;line-height:1.6;color:var(--mut)}
.sl-mls{padding:10px 14px 16px}
.sl-mls li{position:relative;padding:9px 0 9px 32px;border-top:1px dashed var(--ln2);font-size:15px;line-height:1.4}
.sl-mls li::before{content:"";position:absolute;left:2px;top:11px;width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;background:var(--card)}
.sl-mls li[data-s=done]::before{background:var(--ac);border-color:var(--ac)}
.sl-mls li[data-s=done]::after{content:"";position:absolute;left:8px;top:15px;width:7px;height:4px;border-left:2px solid #0a0a0c;border-bottom:2px solid #0a0a0c;transform:rotate(-45deg)}
.sl-mls li[data-s=now]::before{border-color:var(--ac);background:radial-gradient(var(--ac) 0 3px,var(--card) 3.5px)}
.sl-mls li[data-s=todo]{color:var(--mut)}
.sl-mls li[data-s=now]{font-weight:700}

/* =====================  7 · THẺ BÀI  ===================== */
.sl-cards{display:flex;gap:12px;overflow-x:auto;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 14px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;perspective:none}
.sl-cards::-webkit-scrollbar{display:none}
.sl-cards .card{flex:0 0 min(78%,320px);scroll-snap-align:start;border-radius:var(--r);background:var(--card);border-color:var(--line)}
.sl-cards .card-img{aspect-ratio:16/9}
.sl-cards .card-body{padding:14px 54px 16px 16px}
.sl-cards .card-body em{font-size:12px}
.sl-cards .card-body h3{font-size:16.5px;color:#fff}
.sl-cards .card-body small{font-size:12.5px;color:var(--mut)}

/* =====================  8 · HỎI NHANH  ===================== */
.sl-fqw{align-items:start;gap:clamp(22px,5vw,64px)}
.sl-fql .s-lead{max-width:44ch}
.sk-sl .sl-hot{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:16px;padding-top:6px;border-top:1px solid var(--ln2)}
.sl-hot a{display:inline-flex;align-items:center;min-height:46px;font:800 17px var(--fb);text-decoration:underline;text-decoration-color:var(--ac);text-underline-offset:4px;text-decoration-thickness:2px}
.sl-hot span{font-size:14px;color:var(--mut)}
.sk-sl .fq-q{min-height:56px;font-size:clamp(16px,1.6vw,19px);padding:16px 0}
.sk-sl .fq-a p{font-size:15.5px;line-height:1.65}

/* related / pager / cta gọn lại cho mobile */
.sk-sl .s-relw{padding-block:clamp(26px,5vw,60px)}
.sk-sl .s-relw .s-head{margin-bottom:clamp(14px,3vw,30px)}
.sk-sl .s-rel a{min-height:84px;padding:14px 16px;gap:8px;border-radius:var(--r)}
.sk-sl .s-rel b{font-size:clamp(18px,2vw,24px)}
.sk-sl .s-pager{gap:10px;padding-block:8px 26px}
.sk-sl .s-pager a{padding:14px 16px;border-radius:var(--r)}
.sk-sl .s-cta{padding-block:clamp(40px,7vw,96px)}
.sk-sl .s-cta.inv{background-image:linear-gradient(rgba(10,10,12,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,12,.1) 1px,transparent 1px);background-size:24px 24px;--ln:rgba(10,10,12,.3)}
.sk-sl .s-cta.inv .s-h{font-size:clamp(26px,6.6vw,54px);max-width:18ch}
.sk-sl .s-cta .s-btns{gap:10px}

/* =====================  CHUYỂN ĐỘNG  ===================== */
@media(prefers-reduced-motion:no-preference){
  /* hero: radar vẽ dần */
  .kx-js .sl-fig.is-arm .sl-rg circle{stroke-dasharray:1;stroke-dashoffset:1}
  .kx-js .sl-fig.is-arm .sl-pg{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
  .kx-js .sl-fig.is-arm .sl-sp,.kx-js .sl-fig.is-arm .sl-axl,.kx-js .sl-fig.is-arm .sl-bz,.kx-js .sl-fig.is-arm .sl-mk g,.kx-js .sl-fig.is-arm .sl-hl,.kx-js .sl-fig.is-arm .sl-rd,.kx-js .sl-fig.is-arm .sl-ct{opacity:0}
  .kx-js .sl-fig.is-in .sl-sp{animation:slFade .9s .1s both}
  .kx-js .sl-fig.is-in .sl-rg circle{animation:slDraw 1.2s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.15s + var(--i)*.13s)}
  .kx-js .sl-fig.is-in .sl-bz{animation:slFade 1s .25s both}
  .kx-js .sl-fig.is-in .sl-bz2{animation:slFade 1s .25s both,slSpin 160s linear 1.3s infinite}
  .kx-js .sl-fig.is-in .sl-axl{animation:slFade .7s .7s both}
  .kx-js .sl-fig.is-in .sl-ct{animation:slFade .4s .5s both}
  .kx-js .sl-fig.is-in .sl-pg{animation:slDraw 1.5s cubic-bezier(.45,.1,.2,1) .95s both,slFill .9s 2s both}
  .kx-js .sl-fig.is-in .sl-mk g{animation:slPop .6s cubic-bezier(.2,1.4,.3,1) both;animation-delay:calc(1.35s + var(--i)*.14s)}
  .kx-js .sl-fig.is-in .sl-hl{animation:slTag .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(1.15s + var(--i)*.1s)}
  .kx-js .sl-fig.is-in .sl-rd{animation:slFade .8s 2.1s both}
  .sl-mr{animation:slSpin 14s linear infinite}
  .sl-title em{background-size:0 .2em;animation:slHl .9s cubic-bezier(.2,.8,.2,1) 1.1s forwards}
  .sl-cd-v{background-size:0 .26em;animation:slHl .8s cubic-bezier(.2,.8,.2,1) 1.4s forwards}
  .sl-rd-k i{animation:slBlink 1.6s ease-in-out infinite}
  /* radar tương tác */
  .kx-js .sl-plot2.is-arm .sl-rg circle{stroke-dasharray:1;stroke-dashoffset:1}
  .kx-js .sl-plot2.is-arm .sl-np{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
  .kx-js .sl-plot2.is-arm .sl-vs,.kx-js .sl-plot2.is-arm .sl-ax,.kx-js .sl-plot2.is-arm .sl-wedge,.kx-js .sl-plot2.is-arm .sl-axl,.kx-js .sl-plot2.is-arm .sl-sp{opacity:0}
  .kx-js .sl-plot2.is-in .sl-sp,.kx-js .sl-plot2.is-in .sl-axl,.kx-js .sl-plot2.is-in .sl-wedge{animation:slFade .8s .3s both}
  .kx-js .sl-plot2.is-in .sl-rg circle{animation:slDraw 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.05s + var(--i)*.1s)}
  .kx-js .sl-plot2.is-in .sl-np{animation:slDraw 1.3s cubic-bezier(.45,.1,.2,1) .6s both,slFill2 .8s 1.6s both}
  .kx-js .sl-plot2.is-in .sl-vs{animation:slFade .5s 1.3s both}
  .kx-js .sl-plot2.is-in .sl-ax{animation:slTag .55s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(.9s + var(--i)*.09s)}
  .sl-plot2 svg.is-pick .sl-tko,.sl-plot2 svg.is-pick .sl-tkd{stroke-dasharray:1;animation:slDraw .9s cubic-bezier(.3,.7,.2,1) both}
  .sl-plot2 svg.is-pick .sl-tkd{animation-delay:.12s}
  .sl-plot2 svg.is-pick .sl-wedge{animation:slFade .5s both}
  .sl-plot2 svg.is-pick .sl-ms{animation:slRing .7s cubic-bezier(.2,.9,.25,1) both,slSpin 9s linear .7s infinite}
  .sl-ms{animation:slSpin 9s linear infinite}
  .sl-detail.is-swap .sl-dt-hd,.sl-detail.is-swap .sl-dt-cols{animation:slSwap .5s cubic-bezier(.16,1,.3,1) both}
  .sl-detail.is-swap .sl-dt-cols{animation-delay:.08s}
  /* nhu cầu */
  .kx-js .sl-nlist.is-arm:not(.is-in) .sl-nbar i{width:0}
  .sl-nrec.is-swap{animation:slSwap .5s cubic-bezier(.16,1,.3,1) both}
  /* công cụ */
  .sl-ch.is-new{animation:slChip .45s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i)*45ms)}
  .sl-td.is-swap{animation:slType .6s cubic-bezier(.16,1,.3,1) both}
  /* cấp độ */
  .kx-js .sl-lv.is-arm .sl-lv-i:not(.is-on){opacity:.42}
  /* học */
  .sl-lc.is-in .lf,.sl-lc.is-in .vn,.sl-lc.is-in .ln{stroke-dasharray:1;animation:slDraw 1.2s cubic-bezier(.3,.7,.2,1) both}
  .sl-lc.is-in .vn{animation-delay:.3s}
  .sl-lc.is-in .bx{animation:slRise .8s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(var(--k,0)*.12s)}
  .sl-lc.is-in .bx:nth-of-type(2){--k:1}.sl-lc.is-in .bx:nth-of-type(3){--k:2}.sl-lc.is-in .bx:nth-of-type(4){--k:3}
  .sl-lc.is-in .cl.hot{animation:slCell 1.6s ease-in-out .6s infinite alternate}
  .sl-mls li[data-s=now]::before{animation:slBlink 1.8s ease-in-out infinite}
  @keyframes slDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes slFill{from{fill-opacity:0}to{fill-opacity:.17}}
  @keyframes slFill2{from{fill-opacity:0}to{fill-opacity:.2}}
  @keyframes slFade{from{opacity:0}to{opacity:1}}
  @keyframes slPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
  @keyframes slTag{from{opacity:0;margin-top:10px}to{opacity:1;margin-top:0}}
  @keyframes slSpin{to{transform:rotate(360deg)}}
  @keyframes slHl{to{background-size:100% .2em}}
  @keyframes slBlink{50%{opacity:.35}}
  @keyframes slRing{from{opacity:0;stroke-width:2.4}to{opacity:1;stroke-width:.4}}
  @keyframes slSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes slChip{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes slType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  @keyframes slRise{from{transform:scaleY(0)}to{transform:none}}
  @keyframes slCell{from{opacity:1}to{opacity:.25}}
}
@media(prefers-reduced-motion:reduce){
  .sk-sl *,.sk-sl *::before,.sk-sl *::after{animation:none!important;transition-duration:.01ms!important}
}
@media(hover:hover) and (pointer:fine){
  .sl-hl:hover,.sl-ax:hover{border-color:var(--ac)}
  .sl-nb:hover,.sl-tt button:hover,.sl-ch:hover{border-color:var(--ac)}
  .sl-lc-h:hover .sl-lc-ch{border-color:var(--ac)}
  .sl-card{transition:rotate .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
  .sl-card:hover{rotate:0deg;box-shadow:0 34px 36px -26px rgba(10,10,12,.75)}
}

/* =====================  RESPONSIVE  ===================== */
@media(max-width:420px){
  .sl-rd{gap:8px}
  .sl-rd-n{font-size:14.5px}
}
@media(max-width:380px){
  .sl-hl,.sl-ax{padding:0 7px 0 7px;gap:5px;font-size:12px}
  .sl-hl b,.sl-ax b{font-size:20px}
  .sl-rd-k{font-size:0;gap:0}
}
@media(min-width:700px){
  .sk-sl .sl-title{font-size:clamp(60px,9.4vw,80px)}
  .sl-rd-n{font-size:17px}
  .sl-hg{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"hd cd" "fig fig";gap:28px 36px}
  .sl-card{align-self:end;max-width:none}
  .sl-plot{max-width:560px}
  .sl-hl,.sl-ax{font-size:13.5px;gap:9px;padding:0 12px 0 11px}
  .sl-hl b,.sl-ax b{font-size:26px}
  .sl-nq{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sl-nb:last-child{grid-column:auto}
  .sl-tt{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sl-dt-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .sl-rec-b{grid-template-columns:1fr 1fr}
  .sl-learn{grid-template-columns:minmax(0,1fr)}
  .sl-cards .card{flex-basis:min(46%,340px)}
  .sl-dt-go{width:auto}
  .sl-chs{display:flex;flex-wrap:wrap}
  .sl-ch{min-height:46px;font-size:14.5px;padding-right:14px}
}
@media(min-width:900px){
  .sl-hg{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"hd fig" "cd fig";gap:34px clamp(32px,4vw,64px);align-items:center}
  .sl-card{align-self:start;max-width:440px}
  .sl-plot{max-width:620px}
  .sk-sl .sl-title{font-size:clamp(64px,7.7vw,84px)}
  .sl-need{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,44px);align-items:start}
  .sl-tools{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:20px;align-items:start}
  .sl-tt{grid-template-columns:minmax(0,1fr)}
  .sl-tp{margin-top:0}
  .sl-nq{grid-template-columns:minmax(0,1fr)}
  .sl-nb{min-height:62px}
  .sl-fqw{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sl-fql{position:sticky;top:112px}
}
@media(min-width:1025px){
  .sk-sl .s-h{font-size:clamp(34px,3.9vw,54px)}
  .sl-lab{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-areas:"bar bar" "plot detail";gap:22px clamp(28px,3.4vw,56px);align-items:start}
  .sl-lab-bar{grid-area:bar;grid-template-columns:minmax(0,420px) 1fr;align-items:center;gap:20px}
  .sl-plot2{grid-area:plot;max-width:580px}
  .sl-detail{grid-area:detail;padding:24px 24px 24px}
  .sl-dt-cols{grid-template-columns:1fr;gap:16px}
  .sl-learn{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
  .sl-lc-h{cursor:default;min-height:92px;padding:16px 18px 10px}
  .sl-lc-ch{display:none}
  .sl-lc-bar{margin:2px 18px 16px}
  .sk-sl .sl-lc-g{padding:0 18px}
  .sl-mls{padding:12px 18px 18px}
  .sl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible;margin:0;padding:10px 0 0}
  .sl-cards .card{flex:none}
  .sl-tt button{min-height:60px;font-size:15.5px}
  /* cấp độ: bậc thang ngang */
  .sl-lv-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:52px 0 0}
  .sl-lv-list::before{left:0;right:0;top:15px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 2px,transparent 2px 8px)}
  .sl-lv-list::after{left:0;top:15px;width:calc(100%*var(--p));height:2px}
  .sl-lv-i{margin-top:calc((4 - var(--i))*30px);padding:16px 16px 16px}
  .sl-lv-n{left:12px;top:calc(-52px - (4 - var(--i))*30px)}
}
@media(min-width:1200px){
  .sl-hg{grid-template-columns:minmax(0,5fr) minmax(0,6.2fr)}
  .sk-sl .sl-title{font-size:96px}
  .sl-hl,.sl-ax{font-size:14.5px;gap:10px;padding:0 13px 0 12px}
  .sl-hl b,.sl-ax b{font-size:29px}
}