/* ===== Concept B · THƯỚC 9 KHÂU =====
   Khách: nút có ô số khâu to (khâu 1) đứng trên thước 9 khâu, ghim «Bạn bắt đầu ở đây». Nút 3D có môi đáy, bấm thì lún xuống (cảm giác bấm thật).
   FREE: bảng lộ trình chuẩn (khâu đang ở, bài, máy PRO mở thêm) + cột giá riêng. PRO: nút học tiếp khâu đang ở + thước tiến độ. */
.nb{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:100%}
.nb-btn{display:inline-flex;align-items:center;gap:16px;min-height:78px;padding:8px 24px 8px 8px;border-radius:18px;background:var(--nut-cam);color:var(--cta-chu);text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 5px 0 #b85a08,0 16px 28px rgba(240,138,36,.32);transition:transform .12s,box-shadow .12s}
.nb-so{flex:none;width:62px;height:62px;border-radius:13px;background:var(--than);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 30px/1 var(--font);transition:background .2s}
.nb-so small{font:800 9px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--hong-300);margin-bottom:4px}
.nb-btn-t{display:flex;align-items:center;gap:10px;min-width:0}
.nb-btn-t b{display:block;font:800 20px/1.15 var(--font);letter-spacing:-.01em}
.nb-btn-t small{display:block;font:600 13px/1.3 var(--font);color:rgba(30,14,21,.8);margin-top:4px}
.nb-btn>.ic{width:22px;height:22px;stroke-width:2.6;transition:transform .2s}
.nb-btn:hover,.nb-btn.is-hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 7px 0 #b85a08,0 20px 32px rgba(240,138,36,.4)}
.nb-btn:hover .nb-so,.nb-btn.is-hover .nb-so{background:var(--hong-600)}
.nb-btn:hover>.ic,.nb-btn.is-hover>.ic{transform:translateX(4px)}
.nb-btn:active,.nb-btn.is-bam{transform:translateY(5px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 #b85a08,0 4px 8px rgba(240,138,36,.3)}
.nb-btn:focus-visible,.nb-btn.is-focus{outline:3px solid var(--vang);outline-offset:4px}
.nb-btn.dang-tai .nb-so{animation:nbNhip .8s ease-in-out infinite}
.nb-btn.dang-tai>.ic{display:none}
@keyframes nbNhip{50%{background:var(--hong-600);transform:scale(.92)}}
/* thước */
.nb-thuoc{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(9,1fr);position:relative;width:min(640px,100%)}
.nb-thuoc::before{content:"";position:absolute;left:calc(100%/18);right:calc(100%/18);top:11px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--hong-400) calc((var(--toi) - 1)/8*100%),rgba(255,255,255,.16) 0)}
.nb-thuoc li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px}
.nb-cham{position:relative;z-index:1;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font:800 11px/1 var(--font);background:var(--than-2);color:rgba(255,255,255,.62);box-shadow:0 0 0 2px rgba(255,72,158,.4)}
.nb-thuoc li.qua .nb-cham{background:var(--hong-500);color:#fff;box-shadow:none}
.nb-thuoc li.day .nb-cham{background:var(--cam);color:var(--cta-chu);box-shadow:0 0 0 4px rgba(250,149,36,.28)}
.nb-ten{font:600 11px/1.25 var(--font);text-align:center;color:var(--chu-toi-2);opacity:0;transition:opacity .2s;max-width:9em}
.nb-thuoc li.day .nb-ten{opacity:1;font-weight:800;color:#fff}
.nb-thuoc:hover .nb-ten,.nb-btn:hover+.nb-thuoc .nb-ten{opacity:1}
.nb-ghim{position:absolute;bottom:100%;left:calc(50% - 14px);margin-bottom:8px;padding:5px 9px;border-radius:7px;background:var(--hong-500);color:#fff;font:700 11.5px/1 var(--font);white-space:nowrap}
.nb-ghim::after{content:"";position:absolute;left:9px;top:100%;border:5px solid transparent;border-top-color:var(--hong-500)}
.sang .nb-thuoc::before,.nb-bang .nb-thuoc::before{background:linear-gradient(90deg,var(--hong-500) calc((var(--toi) - 1)/8*100%),rgba(157,15,91,.14) 0)}
.sang .nb-cham,.nb-bang .nb-cham{background:#fff;color:var(--chu-3);box-shadow:0 0 0 2px rgba(206,30,120,.25)}
.sang .nb-ten,.nb-bang .nb-ten{color:var(--chu-2)}
.sang .nb-thuoc li.day .nb-ten,.nb-bang .nb-thuoc li.day .nb-ten{color:var(--chu)}
.nb.ngang .nb-thuoc,.nb.lon .nb-thuoc{width:min(860px,100%)}
.nb.ngang .nb-ten,.nb.lon .nb-ten{opacity:1}
.nb.lon{align-items:center}.nb.lon .nb-btn{min-height:90px}.nb.lon .nb-so{width:72px;height:72px;font-size:36px}.nb.lon .nb-btn-t b{font-size:24px}
.giua-c .nb{align-items:center}
.nb-thuoc.nho{margin-top:14px}.nb-thuoc.nho .nb-cham{width:20px;height:20px;font-size:10px}.nb-thuoc.nho::before{top:9px}
.nb-pro .nb-thuoc.nho:has(.nb-ghim){margin-top:38px}
/* mini header */
.nb-mini{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;height:44px;padding:0 16px;border-radius:12px;background:var(--nut-cam);color:var(--cta-chu);text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 3px 0 #b85a08,0 8px 16px rgba(240,138,36,.3);transition:transform .12s,box-shadow .12s}
.nb-mini-t{display:inline-flex;align-items:center;gap:7px;font:800 14px/1 var(--font);white-space:nowrap}
.nb-mini-t small{font:700 11px/1 var(--font);opacity:.72}
.nb-mini-cham{display:flex;gap:3px}
.nb-mini-cham i{width:9px;height:3px;border-radius:2px;background:rgba(30,14,21,.2)}
.nb-mini-cham i.on{background:var(--than)}
.nb-mini:hover{transform:translateY(-1px)}
.nb-mini:active{transform:translateY(3px);box-shadow:0 0 0 #b85a08,0 2px 6px rgba(240,138,36,.3)}
.nb-mini:focus-visible{outline:3px solid var(--vang);outline-offset:3px}
.nb-mini.dang-tai .nb-mini-cham i{animation:nbChay 1s infinite}
.nb-mini.dang-tai .nb-mini-cham i:nth-child(n){animation-delay:calc(var(--d,0)*1s)}
@keyframes nbChay{50%{background:var(--than)}}
/* nút chuẩn */
.nb-nut{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;border-radius:12px;font:800 15px/1.2 var(--font);text-decoration:none;text-align:center;transition:transform .12s,box-shadow .12s,background .15s}
.nb-nut .ic{transition:transform .2s}
.nb-nut.cam{background:var(--nut-cam);color:var(--cta-chu);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 0 #b85a08,0 10px 20px rgba(240,138,36,.28)}
.nb-nut.cam:hover,.nb-nut.cam.is-hover{transform:translateY(-1px)}.nb-nut:hover .ic,.nb-nut.is-hover .ic{transform:translateX(3px)}
.nb-nut.cam:active,.nb-nut.cam.is-bam{transform:translateY(4px);box-shadow:0 0 0 #b85a08,0 3px 6px rgba(240,138,36,.25)}
.nb-nut.vien{color:inherit;box-shadow:0 0 0 1.5px currentColor inset}
.nb-nut.vien:hover{background:rgba(255,255,255,.08)}
.nb-nut:focus-visible,.nb-nut.is-focus{outline:3px solid var(--vang);outline-offset:3px}
.nb-nut.dang-tai .ic{display:none}
.toi .nb-pro .nb-nut.vien{color:#fff}
/* bảng lộ trình (FREE) */
.nb-bang{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);background:#fff;color:var(--chu);border-radius:20px;overflow:hidden;max-width:980px;box-shadow:0 30px 60px rgba(10,2,6,.32)}
.sang .nb-bang{box-shadow:0 18px 40px rgba(102,10,59,.12),0 0 0 1px var(--vien)}
.nb-trai{padding:22px 24px;min-width:0}
.nb-bang-dau b{display:block;font:800 18px/1.25 var(--font)}
.nb-bang-dau span{display:block;font:500 13.5px/1.4 var(--font);color:var(--chu-2);margin-top:3px}
.nb-bang table{width:100%;border-collapse:collapse;margin-top:16px;font:500 13.5px/1.35 var(--font)}
.nb-bang th,.nb-bang td{padding:10px 8px;border-bottom:1px solid var(--vien);text-align:left;vertical-align:middle}
.nb-bang thead th{font:800 10.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--chu-3);padding-top:4px}
.nb-bang tbody th{font-weight:700}
.nb-bang tbody th .nb-cham{display:inline-grid;width:20px;height:20px;font-size:10px;margin-right:8px;vertical-align:-5px}
.nb-bang tr.day{background:var(--hong-50)}
.nb-bang tr.day .nb-cham{background:var(--cam);color:var(--cta-chu);box-shadow:none}
.nb-bang tr.day em{display:block;font:700 11.5px/1.2 var(--font);font-style:normal;color:var(--hong-600);margin:3px 0 0 28px}
.nb-bang tr.them td{color:var(--chu-3);font-size:13px;border-bottom:0}
.nb-ke{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px;border-radius:12px;background:#fff8fb;border:1px dashed var(--hong-200)}
.nb-th{width:150px;border-radius:8px}
.nb-ke i{display:block;font:800 10.5px/1 var(--font);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--chu-3);margin-bottom:5px}
.nb-ke b{display:block;font:700 14px/1.35 var(--font)}
.nb-ke small{display:block;font:500 12.5px/1.3 var(--font);color:var(--chu-2);margin-top:3px}
.nb-phai{background:var(--hat),radial-gradient(80% 60% at 100% 0%,rgba(244,30,146,.22),transparent 70%),var(--than-2);color:#fff;padding:24px 22px;display:flex;flex-direction:column;gap:11px}
.nb-phai .tag-pro{height:30px;align-self:flex-start}
.nb-goi{font:600 13px/1.3 var(--font);color:var(--chu-toi-2)}
.nb-gia{font:900 34px/1 var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.nb-han{font:500 13px/1.35 var(--font);color:var(--chu-toi-2)}.nb-han b{color:var(--vang)}
.nb-lo{display:flex;gap:9px;margin:2px 0;padding:10px 12px;border-radius:10px;background:rgba(255,72,158,.13);font:500 13.5px/1.45 var(--font);color:var(--chu-toi-2)}
.nb-lo .ic{stroke:var(--hong-300);margin-top:1px}.nb-lo b{color:#fff}
.nb-phai .nb-nut.vien{color:#fff}
.nb-phai .dam{color:var(--chu-toi-2)}.nb-phai .dam b{color:#fff}.nb-phai .dam .ic{stroke:var(--xanh-toi)}
.nb-bang.gon{display:block;padding:20px 22px;max-width:780px}
.nb-chan{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.nb-chan .dam{color:var(--chu-2)}.nb-chan .dam b{color:var(--chu)}.nb-chan .dam .ic{stroke:var(--xanh)}
.giua-c .nb-bang,.giua-c .nb-bang.gon{margin-inline:auto;text-align:left}
@media (max-width:860px){.nb-bang{grid-template-columns:1fr}}
@media (max-width:600px){
  .nb,.nb-btn{width:100%}
  .nb-btn{gap:12px;padding:7px 14px 7px 7px;min-height:70px}.nb-so{width:54px;height:54px;font-size:26px}
  .nb-btn-t b{font-size:17px}.nb-btn-t small{font-size:12px}
  .nb.lon .nb-btn-t b{font-size:18px}.nb.lon .nb-so{width:58px;height:58px;font-size:28px}
  .nb-ten{display:none}
  .nb-thuoc li.day .nb-ten{display:block;position:absolute;top:31px;left:0;white-space:nowrap;text-align:left;max-width:none}
  .nb-thuoc li.day:first-child .nb-ten{left:0}
  .nb-thuoc:has(li.day .nb-ten){margin-bottom:18px}
  .nb-thuoc.nho:has(li.day .nb-ten){margin-bottom:16px}
  .nb-thuoc.nho li.day .nb-ten{top:26px}
  .nb-trai{padding:18px 16px}.nb-bang table{font-size:12.5px}.nb-bang th,.nb-bang td{padding:9px 5px}
  .nb-ke{flex-direction:column;align-items:flex-start}.nb-th{width:100%}
  .nb-mini{height:40px;padding:0 12px}.nb-mini-t small{display:none}
  .nb-chan .nb-nut{width:100%}
}
@media (max-width:600px){
  .nb-bang thead{display:none}
  .nb-bang tbody tr{display:grid;grid-template-columns:1fr;gap:3px;padding:10px 8px;border-bottom:1px solid var(--vien)}
  .nb-bang tbody th,.nb-bang tbody td{padding:0;border:0}
  .nb-bang tbody td:nth-of-type(1){font-size:12.5px;color:var(--chu-2);padding-left:28px}
  .nb-bang tbody td:nth-of-type(2){padding-left:28px}
  .nb-bang tbody td:nth-of-type(2)::before{content:"PRO mở thêm máy: ";font-weight:500;color:var(--chu-2)}
  .nb-bang tr.them td{padding-left:0}
}