/* Trang Kho báu: hero tối kiểu landing (huy hiệu phát sáng, cung sáng cam-tím, thẻ nổi lên khi cuộn), màu LANHMAR. Khác trang Cộng đồng. */
   thẻ dạng vé có bóng cứng, tab thanh trượt, thẻ dạng hàng, số mục lớn. Dùng token của site.css (LANHMAR). */
a:focus-visible,button:focus-visible{outline:3px solid var(--purple-mid);outline-offset:3px}


/* nút dùng chung */
.kb-b{display:inline-block;font:800 14px Montserrat;padding:11px 20px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.2s}
.kb-b:hover{transform:translateY(-3px) scale(1.03)}
.kb-b[hidden]{display:none}
.kb-b-or{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.kb-b-or:hover{box-shadow:0 0 0 5px rgba(255,122,69,.38)}
.kb-b-ol{background:transparent;color:var(--fg);border-color:color-mix(in srgb,var(--fg) 55%,transparent)}
.kb-b-ol:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.kb-mini{display:inline-flex;align-items:center;gap:6px;background:var(--orange-soft);color:var(--orange-text);font:700 13px Montserrat;padding:9px 18px;border-radius:999px;text-decoration:none;transition:.2s}
.kb-mini:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}

/* hero cuộn: nền sáng → tối, sao Hải Vương 3D nhô lên từ chân trời (kho-bau-hero.js điều khiển các biến --n, --rise, --c1, --c2, --cp) */
.kb-hero{--n:1;--cp:1;--rise:.5;--c1:1;--c2:0;--ex:0;--fg:color-mix(in srgb,#fff calc(var(--n) * 100%),#241F45);--fg2:color-mix(in srgb,#E7E2FB calc(var(--n) * 100%),#55507A);position:relative;height:270vh;height:270svh;text-align:center;color:var(--fg)}
.kb-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#FBF9FF 0%,#E9E4FB 100%)}
.kb-stage::before{content:"";position:absolute;inset:0;z-index:-2;opacity:var(--n);background:radial-gradient(900px 480px at 50% -10%,rgba(106,92,255,.34),transparent 70%),#080614}
.kb-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(var(--n) * var(--n));scale:calc(1 + var(--ex) * 1.4);animation:kbTw 5s ease-in-out infinite alternate;
  background:radial-gradient(1.6px 1.6px at 8% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 17% 61%,#cfd8ff,transparent),radial-gradient(1.8px 1.8px at 26% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 34% 38%,#ffd9c4,transparent),radial-gradient(1.6px 1.6px at 43% 8%,#fff,transparent),radial-gradient(1.2px 1.2px at 52% 30%,#cfd8ff,transparent),radial-gradient(1.8px 1.8px at 61% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 69% 52%,#fff,transparent),radial-gradient(1.6px 1.6px at 77% 24%,#ffd9c4,transparent),radial-gradient(1.2px 1.2px at 85% 9%,#fff,transparent),radial-gradient(1.8px 1.8px at 92% 44%,#cfd8ff,transparent),radial-gradient(1.2px 1.2px at 12% 82%,#fff,transparent),radial-gradient(1.6px 1.6px at 88% 78%,#fff,transparent),radial-gradient(1.2px 1.2px at 4% 46%,#fff,transparent),radial-gradient(1.2px 1.2px at 56% 66%,#cfd8ff,transparent)}
@keyframes kbTw{from{filter:brightness(.55)}to{filter:brightness(1.35)}}
.kb-planet{position:absolute;left:50%;top:100%;z-index:0;width:min(1180px,150vw);height:auto;aspect-ratio:1;translate:-50% calc(var(--rise) * -100%);scale:calc(1 + var(--ex) * .6);opacity:calc(1 - var(--ex) * .65);transform-origin:50% 50%;pointer-events:none;display:block}
.kb-copy{position:absolute;left:0;right:0;top:clamp(116px,17svh,176px);margin:0 auto;z-index:1}
.kb-copy1{opacity:var(--c1);transform:translateY(calc((1 - var(--c1)) * -46px))}
.kb-copy2{opacity:calc(var(--c2) * (1 - var(--ex)));transform:translateY(calc((1 - var(--c2)) * 34px));visibility:hidden}
.kb-copy2 h2{color:#fff;font-size:clamp(32px,5.4vw,68px);line-height:1.05;letter-spacing:-.03em;margin:14px auto 0;max-width:820px}
.kb-copy2 h2 em{display:block;font-style:normal;background:linear-gradient(90deg,#FFC1A3,#FF7A45 45%,#B9B4FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.kb-tag2{display:inline-block;margin:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:var(--orange-soft);font:800 12px Montserrat;letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:999px}

/* huy hiệu phát sáng */
.kb-pill{position:relative;width:112px;height:56px;margin:0 auto 26px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#2a2370,#171238);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 6px rgba(36,31,69,.06),0 0 46px rgba(255,122,69,.55),0 0 90px rgba(106,92,255,.5),inset 0 1px 0 rgba(255,255,255,.3);animation:kbPillIn .9s cubic-bezier(.2,.8,.2,1) both,kbPillGlow 3.6s ease-in-out .9s infinite}
.kb-pill b{font-size:26px;line-height:1;color:var(--orange);text-shadow:0 0 16px rgba(255,122,69,.95),0 0 34px rgba(255,122,69,.7)}
@keyframes kbPillIn{from{opacity:0;transform:translateY(-24px) scale(.8)}to{opacity:1;transform:none}}
@keyframes kbPillGlow{0%,100%{box-shadow:0 0 0 6px rgba(255,255,255,.04),0 0 36px rgba(255,122,69,.45),0 0 80px rgba(106,92,255,.4),inset 0 1px 0 rgba(255,255,255,.3)}50%{box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 64px rgba(255,122,69,.8),0 0 120px rgba(106,92,255,.65),inset 0 1px 0 rgba(255,255,255,.4)}}

/* chữ: hiện dần từng dòng */
.kb-hero h1{color:var(--fg);font-size:clamp(38px,6.6vw,76px);line-height:1.04;letter-spacing:-.025em;margin:0 auto;max-width:880px;animation:kbUp .8s cubic-bezier(.2,.8,.2,1) .15s both}
.kb-hero h1 em{display:block;font-style:normal;text-decoration:none;background:linear-gradient(90deg,#FF7A45,#E0629A 55%,#7B6CFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:kbUp .8s cubic-bezier(.2,.8,.2,1) .35s both}
.kb-lead{color:var(--fg2);max-width:560px;font-size:16.5px;margin:20px auto 0;animation:kbUp .8s cubic-bezier(.2,.8,.2,1) .55s both}
.kb-cta{margin-top:30px;display:grid;justify-items:center;gap:16px;animation:kbUp .8s cubic-bezier(.2,.8,.2,1) .75s both}
@keyframes kbUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.kb-cta-main{position:relative;display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:#fff;font:800 15px Montserrat;padding:6px 6px 6px 22px;border-radius:14px;text-decoration:none;box-shadow:0 12px 40px rgba(36,31,69,.35),0 0 0 1px rgba(255,255,255,.2);transition:.25s}
.kb-cta-main i{width:40px;height:40px;border-radius:10px;background:var(--orange);color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:16px;transition:.25s}
.kb-cta-main:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(255,122,69,.55)}
.kb-cta-main:hover i{transform:translate(2px,-2px)}
.kb-hlinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}

/* ba thẻ nổi lên khi hành tinh đã lên cao (tiến độ cuộn --cp); thẻ giữa cao hơn */
.kb-hcards{position:absolute;left:50%;bottom:clamp(18px,5svh,56px);z-index:2;width:min(940px,calc(100% - 48px));translate:-50% 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end;text-align:left;pointer-events:none}
.kb-hc{pointer-events:auto;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#fff;background:linear-gradient(180deg,rgba(32,26,86,.92),rgba(18,14,46,.94));border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(8,6,30,.55),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(6px);opacity:calc(var(--cp) * (1 - var(--ex) * .85));translate:0 calc((1 - var(--cp)) * 80px - var(--ex) * 40px);transition:transform .25s,border-color .25s}
.kb-hc:nth-child(2){margin-bottom:34px;padding:22px 20px;border-color:rgba(255,122,69,.6);box-shadow:0 18px 60px rgba(255,122,69,.28),0 0 0 1px rgba(255,122,69,.25),inset 0 1px 0 rgba(255,255,255,.16)}
.kb-hc:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.4)}
.kb-hc:nth-child(2):hover{border-color:var(--orange)}
.kb-hc-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,122,69,.16);color:var(--orange);font:800 16px Montserrat;box-shadow:0 0 22px rgba(255,122,69,.35)}
.kb-hc-k{font:800 11px/1 Montserrat;letter-spacing:.12em;color:var(--orange-soft);opacity:.9;margin-top:2px}
.kb-hc h3{margin:0;font-size:16px;color:#fff}
.kb-hc p{margin:0;font-size:13px;line-height:1.5;color:var(--lav-200);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-hc-go{margin-top:4px;font:800 12px Montserrat;color:var(--orange-soft)}
@media(max-width:760px){.kb-planet{width:min(1180px,200vw)}.kb-hcards{grid-template-columns:1fr;width:min(420px,calc(100% - 40px))}.kb-hc:nth-child(1),.kb-hc:nth-child(3){display:none}.kb-hc:nth-child(2){margin-bottom:0}}
.kb-hero.kb-static{height:100svh;--n:1}
.kb-hero.kb-static .kb-hcards{display:none}

/* ruy băng chạy */
.kb-ribbon{overflow:hidden;background:var(--orange);color:var(--ink);border-block:3px solid var(--ink);margin-top:0}
.kb-ribbon-track{display:flex;width:max-content;animation:kbRun 40s linear infinite;font:800 14px Montserrat;letter-spacing:.14em;text-transform:uppercase;padding:9px 0}
.kb-ribbon-track span{padding:0 22px;white-space:nowrap}
@keyframes kbRun{to{transform:translateX(-50%)}}

/* khoá học: banner cam nổi bật ngay dưới hero */
.kb-spot{padding:34px 0 6px}
.kb-spot[hidden]{display:none}
.kb-course{position:relative;overflow:hidden;display:grid;grid-template-columns:150px 1fr 250px;gap:28px;align-items:center;background:var(--orange);color:var(--ink);border:3px solid var(--ink);border-radius:34px;padding:clamp(24px,4vw,40px);box-shadow:0 22px 54px rgba(255,122,69,.45),8px 8px 0 var(--ink)}
.kb-course::before{content:"";position:absolute;right:-70px;top:-90px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.22);pointer-events:none}
.kb-course>*{position:relative}
.kb-course-mascot{width:150px;height:150px;border-radius:50%;border:5px solid #fff;object-fit:cover;box-shadow:0 10px 26px rgba(36,31,69,.3);animation:bob 4s ease-in-out infinite}
.kb-course-tag{display:inline-block;background:var(--ink);color:#fff;font:800 12px Montserrat;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.kb-course h2{color:var(--ink);font-size:clamp(24px,3.4vw,38px);margin:12px 0 10px}
.kb-course p{color:var(--ink);font-size:15px;font-weight:500;margin:0 0 10px}
.kb-course-pts{list-style:none;padding:0;margin:14px 0 12px;display:grid;gap:8px}
.kb-course-pts li{position:relative;padding-left:30px;font-size:14.5px;font-weight:700;color:var(--ink)}
.kb-course-pts li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--purple-deep);display:grid;place-items:center;font-size:13px;font-weight:800}
.kb-course-info{background:rgba(255,255,255,.6);border-radius:14px;padding:8px 14px;font-weight:700;font-size:14px}
.kb-course p.kb-course-note{font-size:12.5px;margin:6px 0 0}
.kb-course-note a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.kb-course-cta{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:20px;text-align:center;display:grid;gap:10px;justify-items:center;box-shadow:6px 6px 0 var(--ink)}
.kb-course-cta b{font-size:14px;line-height:1.3;color:var(--ink)}
.kb-course-cta small{color:var(--ink-soft);font-size:12px}
.kb-course-badge{background:var(--orange);color:var(--ink);font:800 12px Montserrat;padding:4px 12px;border-radius:999px}
.kb-qr{width:150px;height:150px;padding:8px;background:#fff;border:2px solid var(--lav-300);border-radius:14px}
.kb-qr svg{width:100%;height:100%;display:block}
.kb-go{display:block;width:100%;background:var(--purple-deep);color:#fff;font:800 15px Montserrat;padding:13px 18px;border-radius:999px;text-decoration:none;transition:.2s}
.kb-go:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(45,47,239,.45)}
.kb-ref{font:700 10px Montserrat;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text);background:var(--orange-soft);padding:3px 12px;border-radius:999px}
@media(max-width:900px){.kb-course{grid-template-columns:1fr;box-shadow:0 18px 40px rgba(255,122,69,.4),5px 5px 0 var(--ink)}.kb-course-mascot{width:96px;height:96px}.kb-course-cta{justify-self:stretch}}

/* tiêu đề mục: số lớn viền + gạch chân đậm */
.kb-sec{padding:38px 0 18px}
.kb-head{display:flex;align-items:baseline;gap:16px;border-bottom:3px solid var(--ink);padding-bottom:10px;margin:0 0 22px}
.kb-no{font:800 clamp(34px,5vw,54px)/1 Montserrat;color:transparent;-webkit-text-stroke:2px var(--purple-mid)}
.kb-head h2{margin:0}

/* chip, badge, nút dùng chung */
.kb-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kb-chip{background:var(--orange);color:var(--ink);font:800 11px Montserrat;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.kb-badge{background:var(--lav-200);color:var(--purple-deep);border:1px solid var(--lav-400);font:700 11px Montserrat;letter-spacing:.04em;padding:3px 12px;border-radius:999px}
.kb-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.kb-act .btn{padding:10px 20px}
.kb-join{display:inline-flex;align-items:center;background:transparent;color:var(--ink-soft);border:2px dashed var(--lav-400);font:700 14px Montserrat;padding:9px 20px;border-radius:999px;cursor:default}
.kb-blank{display:grid;place-items:center;height:100%;color:var(--orange);font-size:44px;background:var(--lav-200)}

/* mới và nổi bật: thẻ dạng vé (viền đậm, bóng cứng, đường đục lỗ giữa ảnh và nội dung) */
.kb-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px;padding:4px 10px 10px 4px}
.kb-fcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 var(--purple-mid);transition:transform .25s,box-shadow .25s}
.kb-fcard:nth-child(odd){transform:rotate(-.6deg)}.kb-fcard:nth-child(even){transform:rotate(.6deg)}
.kb-fimg{position:relative;aspect-ratio:960/504;background:var(--lav-200);border-bottom:3px dashed var(--ink)}
.kb-fimg img{width:100%;height:100%;object-fit:cover}
.kb-stamp{position:absolute;top:12px;right:12px;background:var(--orange);color:var(--ink);font:800 11px Montserrat;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:2px solid var(--ink);transform:rotate(4deg)}
.kb-fbody{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.kb-fbody h3{font-size:24px;margin:0;color:var(--purple-deep)}
.kb-fbody p{margin:0;font-size:14.5px;color:var(--ink-soft)}
@media (hover:hover){.kb-fcard:hover{transform:rotate(0) translateY(-5px);box-shadow:12px 12px 0 var(--purple-mid)}.kb-card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--lav-400)}}

/* tab lọc: thanh trượt */
.kb-tabs{display:flex;gap:4px;background:var(--lav-200);border:2px solid var(--lav-300);padding:5px;border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;margin:0 0 22px}
.kb-tab{flex:none;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--ink);font:700 13.5px Montserrat;padding:9px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.kb-tab small{background:#fff;color:var(--purple-deep);font:800 11px Montserrat;min-width:22px;text-align:center;padding:1px 7px;border-radius:999px}
.kb-tab i{font-style:normal;font:700 10.5px Montserrat;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-text)}
.kb-tab:hover{background:rgba(255,255,255,.7)}
.kb-tab.on{background:var(--purple-deep);color:#fff;box-shadow:0 6px 14px rgba(45,47,239,.35)}
.kb-tab.on small{background:#fff;color:var(--purple-deep)}.kb-tab.on i{color:var(--orange-soft)}
.kb-tab.soon:not(.on){color:var(--ink-soft)}

/* thư viện: thẻ dạng hàng (ảnh trái, nội dung phải) */
.kb-grid{display:grid;gap:18px}
.kb-card{display:grid;grid-template-columns:minmax(200px,32%) 1fr;align-items:center;background:#fff;border:2px solid var(--lav-300);border-radius:22px;overflow:hidden;box-shadow:5px 5px 0 var(--lav-300);transition:transform .25s,box-shadow .25s}
.kb-cimg{aspect-ratio:960/504;background:var(--lav-200)}
.kb-cimg img{width:100%;height:100%;object-fit:cover}
.kb-cbody{display:flex;flex-direction:column;gap:10px;padding:18px 22px 20px;height:100%}
.kb-cbody h3{font-size:21px;margin:0}.kb-cbody p{margin:0;font-size:14.5px}
.kb-soonbox{background:var(--paper);border:2px dashed var(--lav-400);border-radius:22px;padding:28px;text-align:center}
.kb-soonbox b{display:block;color:var(--purple-deep);font-size:19px;margin-bottom:6px}
.kb-soonbox p{margin:0 auto 14px;max-width:460px}
@media(max-width:640px){.kb-card{grid-template-columns:1fr}.kb-cbody{height:auto}}

/* bản đầy đủ + ủng hộ: khối tím đặc */
.kb-end{padding:38px 0 18px}
.kb-full{position:relative;overflow:hidden;background:linear-gradient(160deg,#2a2bd0,#1f1fa8);color:#fff;border:3px solid var(--ink);border-radius:30px;padding:clamp(26px,5vw,46px);box-shadow:0 22px 50px rgba(45,47,239,.35),8px 8px 0 var(--ink)}
.kb-full::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px 260px at 100% 100%,rgba(255,122,69,.26),transparent),radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.7px) 0 0/22px 22px}
.kb-full>*{position:relative}
.kb-flabel{display:inline-block;background:var(--orange-soft);color:var(--orange-text);font:800 12px Montserrat;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin:0 0 12px!important}
.kb-full .kb-flabel{color:var(--orange-text);background:var(--orange-soft);max-width:none}
.kb-full h2{color:#fff;margin-bottom:12px}
.kb-full p{color:var(--lav-200);max-width:680px;font-size:15.5px}
.kb-full ul:not(.don-steps){margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px;max-width:680px}
.kb-full ul:not(.don-steps) li{position:relative;padding-left:24px;color:#fff;font-size:14.5px;font-weight:500}
.kb-full ul:not(.don-steps) li::before{content:"★";position:absolute;left:0;color:var(--orange-soft)}
.kb-scope{display:inline-block;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);color:#fff!important;border-radius:14px;padding:8px 14px;font-size:13.5px!important;font-weight:600;margin:0 0 6px}
.kb-full .small{font-size:13px;color:var(--lav-200)}
.kb-full .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.kb-ghost{color:var(--orange-soft);font:700 14px Montserrat;text-decoration:underline;text-underline-offset:4px}
.kb-don{max-width:680px;margin:2px 0 12px}
.kb-don .don{display:block}
.kb-don .don-steps{padding-left:22px;color:var(--lav-200);font-size:14px}
.kb-don .don-steps li{margin:6px 0}.kb-don .don-steps b{color:#fff}

/* cộng đồng: dải gọn, viền đứt */
.kb-comm{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--paper);border:2px dashed var(--lav-400);border-radius:24px;padding:22px 26px}
.kb-comm p{margin:0;max-width:520px}
.kb-comm-btns{display:flex;gap:10px;flex-wrap:wrap}

/* hộp chi tiết */
#kbDlg{border:0;border-radius:26px;padding:0;max-width:min(760px,calc(100vw - 24px));width:100%;max-height:calc(100vh - 32px);background:var(--paper);color:var(--ink-soft);box-shadow:0 30px 80px rgba(36,31,69,.4);overflow:auto}
#kbDlg::backdrop{background:rgba(36,31,69,.55);backdrop-filter:blur(3px)}
#kbDlgBody{padding:clamp(20px,4vw,34px)}
.kb-x{position:sticky;top:12px;float:right;margin:12px 12px 0 0;z-index:2;width:38px;height:38px;border-radius:50%;border:2px solid var(--purple-deep);background:#fff;color:var(--purple-deep);font:700 20px/1 Montserrat;cursor:pointer}
.kb-dtop h2{font-size:clamp(24px,4vw,32px);margin:10px 0 8px}.kb-dtop p{margin:0}
#kbDlg h3{font-size:16px;margin:22px 0 8px}#kbDlg h4{font-size:14.5px;margin:0 0 4px}
.kb-dpts{margin:0;padding-left:20px}.kb-dpts li{margin:4px 0;font-size:14.5px}
.kb-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0 0;font-size:13.5px}
.kb-meta dt{font-weight:700;color:var(--orange-text);letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding-top:2px}
.kb-meta dd{margin:0;color:var(--ink);font-weight:600}
.kb-dnote{margin:10px 0 0;font-size:13px;border-left:3px solid var(--orange);padding-left:10px}
.kb-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.kb-step{background:#fff;border:2px solid var(--lav-300);border-radius:18px;padding:14px}
.kb-step b.n{width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;font-weight:800;margin-bottom:8px}
.kb-step p{margin:0;font-size:13.5px}
.kb-lab{margin:14px 0 4px;font:700 11px Montserrat;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
.kb-code{margin:0;background:var(--ink);color:var(--orange-soft);border-radius:14px;padding:14px 16px;font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre}
.kb-lic{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.kb-lbox{background:#fff;border:2px solid var(--lav-300);border-radius:18px;padding:16px}
.kb-lbox h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px}
.kb-lbox h4 i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px}
.kb-lbox.yes h4 i{background:var(--purple-deep);color:#fff}.kb-lbox.no h4 i{background:var(--orange-soft);color:var(--orange-text)}
.kb-lbox ul{margin:0;padding-left:18px}.kb-lbox li{margin:3px 0;font-size:13.5px}
.kb-lnote{margin:12px 0 0;font-size:13px}.kb-lnote a{color:var(--purple-deep);font-weight:700}
.kb-dact{margin-top:20px}

/* khối nội dung trong hộp chi tiết dựng từ dữ liệu */
.kb-callout{margin:16px 0 0;background:var(--orange-soft);color:var(--orange-text);border-radius:16px;padding:12px 16px;font-size:14px;font-weight:600}
.kb-tbl{overflow-x:auto;margin:8px 0 0;border:2px solid var(--lav-300);border-radius:16px;background:#fff}
.kb-tbl table{border-collapse:collapse;width:100%;min-width:480px}
.kb-tbl th{background:var(--purple-deep);color:#fff;text-align:left;font:700 12px Montserrat;letter-spacing:.06em;text-transform:uppercase;padding:10px 14px}
.kb-tbl td{padding:10px 14px;font-size:13.5px;vertical-align:top;border-top:1px solid var(--lav-300)}
.kb-tbl td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
@media(max-width:560px){.kb-tbl td:first-child{white-space:normal}}

/* ví dụ kết quả trong hộp chi tiết */
.kb-demo{margin:18px 0 0;background:var(--lav-200);border:2px solid var(--lav-300);border-radius:20px;padding:6px 16px 14px}
#kbDlg .kb-demo h3{margin:12px 0 10px;color:var(--purple-deep)}
.kb-rcp{display:grid;gap:12px}
.kb-rc{display:grid;grid-template-columns:minmax(180px,46%) 1fr;gap:14px;align-items:stretch;background:#fff;border:2px solid var(--lav-300);border-radius:16px;padding:10px}
.kb-slide{position:relative;margin:0;align-self:start;border-radius:12px;overflow:hidden;border:2px solid var(--lav-300);box-shadow:0 8px 18px rgba(45,47,239,.18)}
.kb-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.kb-slide figcaption{background:var(--ink);color:#fff;font:700 10px Montserrat;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px}
.kb-rt p{margin:6px 0 0;font-size:13.5px;color:var(--ink)}
.kb-time{display:inline-block;background:var(--orange);color:var(--ink);font:800 11px Montserrat;letter-spacing:.06em;padding:3px 10px;border-radius:999px}
.kb-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.kb-ba .kb-code{font-size:12px;white-space:pre-wrap;word-break:break-word;margin:0}
.kb-ba .kb-before{background:#fff;color:var(--ink-soft);border:2px dashed var(--lav-400)}
.kb-arrow{font:800 22px Montserrat;color:var(--orange-text)}
@media(max-width:640px){.kb-rc{grid-template-columns:1fr}.kb-ba{grid-template-columns:1fr}.kb-arrow{transform:rotate(90deg);justify-self:center}}

/* thông báo nhỏ */
.kb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;border-left:5px solid var(--orange);border-radius:14px;padding:10px 18px;font:600 14px Montserrat;z-index:60;max-width:calc(100vw - 32px);transition:.25s}
.kb-toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:700px){.kb-fbody{padding:18px}.kb-head{gap:12px}}
@media (prefers-reduced-motion:reduce){.kb-fcard,.kb-card,.kb-tab,.kb-toast,.kb-b,.kb-go{transition:none}.kb-ribbon-track,.kb-course-mascot,.kb-pill,.kb-stage::after{animation:none}.kb-fcard:nth-child(odd),.kb-fcard:nth-child(even){transform:none}}

/* ====== Giao diện tối kiểu Redsun: nền đêm, ánh cam, thẻ kính viền cam, đèn rọi theo chuột, chữ khổng lồ chân trang ====== */
@property --kba{syntax:"<angle>";inherits:false;initial-value:0deg}
body.kb-dark{background:#060910;color:#cfcbe8}
body.kb-dark::before,body.kb-dark::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.5}
body.kb-dark::before{left:-12vw;top:30vh;width:46vw;height:46vw;background:rgba(255,122,69,.28);animation:kbDrift 22s ease-in-out infinite alternate}
body.kb-dark::after{right:-14vw;top:70vh;width:50vw;height:50vw;background:rgba(106,92,255,.3);animation:kbDrift 28s ease-in-out -9s infinite alternate-reverse}
@keyframes kbDrift{to{transform:translate(8vw,-12vh) scale(1.15)}}
.kb-dark .kb-sec h2,.kb-dark .kb-sec h3,.kb-dark .kb-end h2{color:#fff}
.kb-dark .kb-sec p{color:var(--lav-300)}

/* hiện dần: trượt lên + hết mờ, so le theo thẻ */
.kb-dark .reveal{opacity:0;transform:translateY(34px) scale(.98);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),filter .9s ease var(--d,0ms)}
.kb-dark .reveal.in{opacity:1;transform:none;filter:none}

/* tiêu đề mục */
.kb-dark .kb-head{border-bottom:1px solid rgba(255,255,255,.12);position:relative}
.kb-dark .kb-head::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--orange),#ffb08a,transparent);transition:width 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.kb-dark .kb-head.in::after{width:min(320px,60%)}
.kb-dark .kb-no{-webkit-text-stroke:2px var(--orange);filter:drop-shadow(0 0 14px rgba(255,122,69,.55))}

/* thẻ kính: nền mờ, viền cam nhạt, bóng trong ánh cam, vệt sáng theo chuột */
.kb-dark .kb-fcard,.kb-dark .kb-card,.kb-dark .kb-comm,.kb-dark .kb-soonbox{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,122,69,.22);box-shadow:inset 0 0 44px rgba(255,122,69,.07),0 20px 50px rgba(0,0,0,.35);transform:none;backdrop-filter:blur(6px)}
.kb-dark .kb-fcard::before,.kb-dark .kb-card::before,.kb-dark .kb-comm::before,.kb-dark .kb-hc::before,.kb-dark .kb-soonbox::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;background:radial-gradient(360px circle at var(--x,50%) var(--y,0),rgba(255,122,69,.2),transparent 65%)}
.kb-dark .kb-fcard:hover::before,.kb-dark .kb-card:hover::before,.kb-dark .kb-comm:hover::before,.kb-dark .kb-hc:hover::before,.kb-dark .kb-soonbox:hover::before{opacity:1}
.kb-dark .kb-fcard>*,.kb-dark .kb-card>*{position:relative}
.kb-dark .kb-fcard:nth-child(odd),.kb-dark .kb-fcard:nth-child(even){transform:none}
@media (hover:hover){.kb-dark .kb-fcard:hover,.kb-dark .kb-card:hover{transform:translateY(-6px);border-color:rgba(255,122,69,.55);box-shadow:inset 0 0 60px rgba(255,122,69,.12),0 26px 60px rgba(255,122,69,.18)}}
.kb-dark .kb-fimg{border-bottom:1px dashed rgba(255,122,69,.4);background:rgba(255,255,255,.04)}
.kb-dark .kb-fimg img,.kb-dark .kb-cimg img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.kb-dark .kb-fcard:hover .kb-fimg img,.kb-dark .kb-card:hover .kb-cimg img{transform:scale(1.05)}
.kb-dark .kb-cimg{background:rgba(255,255,255,.04);overflow:hidden}
.kb-dark .kb-fbody h3,.kb-dark .kb-cbody h3{color:#fff}
.kb-dark .kb-fbody p,.kb-dark .kb-cbody p{color:var(--lav-300)}
.kb-dark .kb-badge{background:rgba(255,255,255,.08);color:var(--lav-200);border-color:rgba(255,255,255,.2)}
.kb-dark .kb-stamp{border-color:var(--orange);box-shadow:0 0 22px rgba(255,122,69,.5)}
.kb-dark .kb-join{color:var(--lav-300);border-color:rgba(255,255,255,.25)}

/* nút trong thẻ: chính = cam sáng, phụ = viền mờ */
.kb-dark .kb-sec .kb-act .btn,.kb-dark .kb-comm-btns .btn{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.kb-dark .kb-sec .kb-act .btn:hover,.kb-dark .kb-comm-btns .btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.kb-dark .kb-sec .kb-act .btn.dark,.kb-dark .kb-comm-btns .btn.dark{background:linear-gradient(180deg,#FFA77F,#FF7A45);color:var(--ink);border-color:#FF7A45;box-shadow:0 8px 24px rgba(255,122,69,.4)}
.kb-dark .kb-sec .kb-act .btn.dark:hover,.kb-dark .kb-comm-btns .btn.dark:hover{box-shadow:0 12px 34px rgba(255,122,69,.65)}

/* tab lọc */
.kb-dark .kb-tabs{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.kb-dark .kb-tab{color:var(--lav-200)}
.kb-dark .kb-tab small{background:rgba(255,255,255,.12);color:#fff}
.kb-dark .kb-tab:hover{background:rgba(255,255,255,.1)}
.kb-dark .kb-tab.on{background:linear-gradient(180deg,#FFA77F,#FF7A45);color:var(--ink);box-shadow:0 6px 20px rgba(255,122,69,.45)}
.kb-dark .kb-tab.on small{background:var(--ink);color:#fff}.kb-dark .kb-tab.on i{color:var(--ink)}
.kb-dark .kb-tab.soon:not(.on){color:var(--lav-400)}
.kb-dark .kb-soonbox b{color:#fff}

/* khoá học: banner cam toả sáng trên nền tối */
.kb-dark .kb-course{border:1px solid rgba(255,255,255,.35);box-shadow:0 0 90px rgba(255,122,69,.38),0 24px 60px rgba(0,0,0,.45)}
.kb-dark .kb-course-cta{border:1px solid rgba(36,31,69,.25);box-shadow:0 14px 34px rgba(36,31,69,.35)}
.kb-dark .kb-course::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--x,80%) var(--y,0),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .4s}
.kb-dark .kb-course:hover::after{opacity:1}

/* ủng hộ: thẻ giữa nổi bật, viền sáng chạy quanh */
.kb-dark .kb-full{background:linear-gradient(160deg,rgba(45,47,239,.32),rgba(20,16,56,.8) 55%,rgba(255,122,69,.12));border:1px solid rgba(255,122,69,.4);box-shadow:inset 0 0 70px rgba(255,122,69,.1),0 0 80px rgba(255,122,69,.18),0 24px 60px rgba(0,0,0,.45)}
.kb-dark .kb-full::before{background:radial-gradient(500px 260px at 100% 100%,rgba(255,122,69,.22),transparent),radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.7px) 0 0/22px 22px}
.kb-dark .kb-full::after{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--kba),transparent 0 70%,rgba(255,170,120,.95) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:kbBeam 6s linear infinite}
@keyframes kbBeam{to{--kba:360deg}}
.kb-dark .kb-comm{border-style:solid}

/* chữ khổng lồ ở chân trang */
.kb-mark{overflow:hidden;text-align:center;line-height:.8;margin:30px 0 -.1em;user-select:none}
.kb-mark span{display:block;font:800 clamp(64px,19vw,260px)/.85 Montserrat;letter-spacing:-.04em;background:linear-gradient(180deg,rgba(255,170,120,.9),rgba(255,122,69,.25) 55%,transparent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.08em}
body.kb-dark footer{background:#03050a;border-top:1px solid rgba(255,122,69,.18)}

@media (prefers-reduced-motion:reduce){body.kb-dark::before,body.kb-dark::after,.kb-dark .kb-full::after{animation:none}.kb-dark .reveal{opacity:1;transform:none;filter:none;transition:none}.kb-dark .kb-head::after{width:min(320px,60%);transition:none}}

/* ====== chuyển cảnh ====== */
.kb-fade{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:2;pointer-events:none;opacity:var(--ex);background:linear-gradient(180deg,transparent,#060910 85%)}
/* tiêu đề mục: từng chữ trồi lên khỏi mặt nạ */
.kb-head h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .14em;margin:-.04em 0 -.14em}
.kb-head h2 .w>span{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + 180ms)}
.kb-head.in h2 .w>span{transform:none}
/* đổi tab: thẻ mới lướt vào lần lượt */
.kb-swap{animation:kbSwap .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes kbSwap{from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(6px)}}
/* hộp chi tiết: bật lên / thu xuống mượt */
#kbDlg[open]{animation:kbPop .45s cubic-bezier(.2,.8,.2,1)}
#kbDlg[open]::backdrop{animation:kbBd .4s ease}
#kbDlg.closing{animation:kbPopOut .24s ease forwards}
#kbDlg.closing::backdrop{opacity:0;transition:opacity .24s}
@keyframes kbPop{from{opacity:0;transform:translateY(34px) scale(.95)}}
@keyframes kbPopOut{to{opacity:0;transform:translateY(20px) scale(.97)}}
@keyframes kbBd{from{opacity:0}}
/* liên kết # trong trang: đích hiện lên có vệt sáng ngắn */
.kb-landed{animation:kbLand 1.2s ease-out}
@keyframes kbLand{0%{box-shadow:0 0 0 0 rgba(255,122,69,.0)}25%{box-shadow:0 0 0 10px rgba(255,122,69,.28),0 0 70px rgba(255,122,69,.4)}100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}
@media (prefers-reduced-motion:reduce){.kb-head h2 .w>span{transform:none;transition:none}.kb-swap,#kbDlg[open],#kbDlg[open]::backdrop,.kb-landed{animation:none}#kbDlg.closing{animation:none}.kb-fade{display:none}}