:root{--accent:#5678ff;--accent-hover:#486cff;--ink:#101828;--muted:#667085;--line:#d0d5dd;--paper:#f7f9fc;--card:#fff;--mint:#7cffb2;--mint2:#d7ffe7;--blue:#5678ff;--shadow:0 18px 50px rgba(16,24,40,.1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}button,input{font:inherit}a{color:inherit}.ks-skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;padding:10px 14px}.ks-skip:focus{top:12px}.ks-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1240px;margin:auto;padding:18px 24px;background:rgba(247,249,252,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(208,213,221,.8)}.ks-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:-.04em;font-size:1.2rem}.ks-brand__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--mint)}.ks-nav{display:flex;gap:26px}.ks-nav a{text-decoration:none;font-weight:700;font-size:.92rem}.ks-menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-weight:800}.ks-hero{max-width:1240px;margin:0 auto;padding:72px 24px 38px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}.ks-eyebrow,.ks-page-head>span,.ks-article header span,.ks-faq header span{display:inline-block;font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#344054}.ks-hero h1{font-size:clamp(2.7rem,7vw,5.4rem);line-height:.92;letter-spacing:-.075em;margin:12px 0 22px;max-width:820px}.ks-hero p{max-width:720px;font-size:1.12rem;color:var(--muted);margin:0}.ks-hero__badge{min-width:220px;background:var(--ink);color:#fff;border-radius:20px;padding:22px;box-shadow:var(--shadow)}.ks-hero__badge span,.ks-hero__badge small{display:block;color:#98a2b3;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.ks-hero__badge strong{display:block;color:var(--mint);font-size:1.25rem;margin:10px 0}.ks-tester{max-width:1240px;margin:0 auto 54px;background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}.ks-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;background:var(--ink);color:#fff}.ks-toolbar>div{display:flex;align-items:center;gap:10px}.ks-toolbar button{border:1px solid #475467;background:#1d2939;color:#fff;border-radius:9px;padding:8px 12px;cursor:pointer}.ks-dot{width:9px;height:9px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 5px rgba(124,255,178,.12)}.ks-live-grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.ks-live-grid article{padding:18px 20px;border-right:1px solid var(--line)}.ks-live-grid article:last-child{border:0}.ks-live-grid span{display:block;color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.ks-live-grid strong{display:block;margin-top:5px;font-size:1.18rem;overflow-wrap:anywhere}.ks-capture{margin:22px 22px 16px;padding:15px;border:2px dashed #98a2b3;border-radius:16px;background:#f9fafb}.ks-capture:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(86,120,255,.12)}.ks-capture span{display:block;font-size:.8rem;font-weight:800;color:var(--muted);margin-bottom:8px}.ks-capture input{width:100%;border:0;background:transparent;outline:0;font-size:1.05rem}.ks-progress{padding:0 22px 20px}.ks-progress div{display:flex;justify-content:space-between;font-weight:800;font-size:.86rem}.ks-progress progress{width:100%;height:10px;accent-color:var(--blue)}.ks-keyboard{padding:24px;background:#e9eef6;border-top:1px solid var(--line);overflow-x:auto}.ks-key-row{display:flex;gap:6px;min-width:970px;margin-bottom:6px}.ks-key{flex:var(--u) 1 0;min-width:0;height:50px;border:1px solid #b9c0ca;border-bottom-width:4px;border-radius:8px;background:#fff;color:var(--ink);font-size:.76rem;font-weight:800;cursor:pointer;transition:.08s transform,.08s background,.08s border}.ks-key.is-tested{background:#eef3ff;border-color:var(--accent);color:var(--ink)}.ks-key.is-down{transform:translateY(3px);border-bottom-width:1px;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(86,120,255,.18),inset 0 1px 0 rgba(255,255,255,.15)}.ks-details{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border-top:1px solid var(--line)}.ks-details>div{padding:24px}.ks-details>div+div{border-left:1px solid var(--line)}.ks-details h2{font-size:1rem;margin:0 0 16px}.ks-details dl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0}.ks-details dl div{background:#f2f4f7;padding:12px;border-radius:12px}.ks-details dt{font-size:.7rem;color:var(--muted);font-weight:800;text-transform:uppercase}.ks-details dd{margin:4px 0 0;font-weight:850;overflow-wrap:anywhere}/* Modifier keys: Ctrl, Alt, Shift, Meta */
.ks-modifiers{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.ks-modifiers span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:52px;
    min-height:40px;
    padding:8px 13px;
    border:1px solid #e4e7ec;
    border-radius:999px;
    background:#f3f5fb;
    color:#667085;
    font-size:.9rem;
    font-weight:800;
    line-height:1;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.ks-modifiers span.is-on{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    box-shadow:0 6px 18px rgba(86,120,255,.22);
}

.ks-modifiers span.is-on:hover{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
    color:#fff;
}

.ks-modifiers span.is-on:active{
    transform:translateY(1px);
}#eventMessage{color:var(--muted);margin-bottom:0}.ks-help{max-width:1240px;margin:0 auto 54px;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.ks-help>div{background:var(--ink);color:#fff;border-radius:22px;padding:28px}.ks-help>div:nth-child(2){background:var(--mint);color:var(--ink)}.ks-help>div>span{font-size:2rem;font-weight:900;opacity:.45}.ks-help h2{margin:8px 0 12px}.ks-help li+li{margin-top:7px}.ks-article,.ks-faq,.ks-page-card{max-width:940px;margin:0 auto 64px;padding:0 24px}.ks-article header,.ks-faq header{margin-bottom:24px}.ks-article h2,.ks-faq h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em;margin:8px 0}.ks-article article,.ks-page-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(24px,5vw,52px)}.ks-article article h2,.ks-prose h2{font-size:1.55rem;margin-top:2em}.ks-article article h3,.ks-prose h3{font-size:1.15rem;margin-top:1.6em}.ks-article article p,.ks-prose p{color:#344054}.ks-article article table,.ks-prose table{width:100%;border-collapse:collapse}.ks-article th,.ks-article td,.ks-prose th,.ks-prose td{border:1px solid var(--line);padding:10px;text-align:left}.ks-faq details,.ks-page-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px}.ks-faq summary,.ks-page-faq summary{font-weight:850;cursor:pointer}.ks-faq p,.ks-page-faq p{color:var(--muted)}.ks-page-head{max-width:940px;margin:0 auto;padding:70px 24px 28px}.ks-page-head h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1;letter-spacing:-.065em;margin:12px 0}.ks-page-head p{color:var(--muted);font-size:1.1rem;max-width:700px}.ks-page-card{padding:clamp(24px,5vw,52px)}.ks-footer{max-width:1240px;margin:0 auto;padding:34px 24px 50px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px}.ks-footer p{color:var(--muted);margin:5px 0}.ks-footer nav{display:flex;gap:18px;flex-wrap:wrap}.ks-footer small{color:var(--muted)}.ks-toast{position:fixed;right:18px;bottom:18px;transform:translateY(20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;transition:.2s}.ks-toast.is-show{transform:none;opacity:1}.ks-mobile[hidden]{display:none}.ks-mobile{position:fixed;inset:0;z-index:60}.ks-mobile__shade{position:absolute;inset:0;border:0;background:rgba(16,24,40,.55)}.ks-mobile__panel{position:absolute;right:0;top:0;height:100%;width:min(360px,88vw);background:#fff;padding:20px}.ks-mobile__panel>div{display:flex;justify-content:space-between}.ks-mobile__panel button{border:0;background:none;font-size:2rem}.ks-mobile__panel nav{display:grid;margin-top:24px}.ks-mobile__panel a{padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:800}.ks-menu-open{overflow:hidden}.ks-compact .ks-keyboard{display:none}
@media(max-width:800px){.ks-nav{display:none}.ks-menu-btn{display:block}.ks-header{padding:14px 18px}.ks-hero{padding:48px 18px 28px;grid-template-columns:1fr}.ks-hero h1{font-size:3.3rem}.ks-hero__badge{min-width:0}.ks-tester{margin:0 12px 40px;border-radius:18px}.ks-live-grid{grid-template-columns:1fr 1fr}.ks-live-grid article:nth-child(2){border-right:0}.ks-live-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.ks-toolbar{align-items:flex-start}.ks-toolbar>div:last-child{flex-wrap:wrap;justify-content:flex-end}.ks-details{grid-template-columns:1fr}.ks-details>div+div{border-left:0;border-top:1px solid var(--line)}.ks-details dl{grid-template-columns:1fr 1fr}.ks-help{grid-template-columns:1fr;padding:0 12px}.ks-article,.ks-faq,.ks-page-head,.ks-page-card{padding-left:16px;padding-right:16px}.ks-footer{grid-template-columns:1fr}.ks-footer nav{order:3}}
@media(max-width:480px){.ks-brand{font-size:1rem}.ks-live-grid article{padding:14px}.ks-live-grid strong{font-size:1rem}.ks-capture{margin:14px}.ks-progress{padding:0 14px 14px}.ks-toolbar{padding:13px}.ks-toolbar button{padding:7px 9px;font-size:.78rem}.ks-details dl{grid-template-columns:1fr}.ks-page-card{margin-left:12px;margin-right:12px;padding:22px}}
/* KeyboardTest.id V2 */
.ks-controlbar{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid var(--line);background:#fff}.ks-control{display:grid;gap:7px}.ks-control>b{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.ks-segment{display:flex;gap:5px}.ks-segment button,.ks-single,.ks-actions button{border:0;background:#f3f1f8;color:#686477;border-radius:9px;padding:9px 13px;font-weight:750;cursor:pointer}.ks-history-count b{
    background:var(--accent);
}

.ks-segment button.is-active,
.ks-single.is-active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

.ks-segment button.is-active:hover,
.ks-single.is-active:hover{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
}.ks-actions{margin-left:auto;display:flex;gap:7px}.ks-actions button{background:#fff}.ks-actions .is-danger{background:#ffe8e8;color:#e43f3f}.ks-capture{display:flex;align-items:center;gap:12px}.ks-capture input{flex:1}.ks-capture>span{margin:0;white-space:nowrap}.ks-capture>span b:first-child{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#8b2be2;color:#fff}.ks-keyboard-wrap{overflow:auto;border-top:1px solid var(--line);background:#fbfbfd}.ks-keyboard{--scale:1;width:max-content;min-width:100%;padding:20px;transform-origin:left top}.ks-key-row{min-width:1280px}.ks-key-gap{flex:var(--u) 1 0}.ks-key small{display:block;font-size:.67em;line-height:1}.ks-keyboard.is-laptop .numpad{display:none}.ks-keyboard.is-laptop .ks-key-row{min-width:980px}.ks-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px;background:#fff;border-top:1px solid var(--line)}.ks-stats,.ks-performance{border:1px solid var(--line);border-radius:16px;padding:14px}.ks-stats h2,.ks-performance h2{font-size:.9rem;margin:0 0 12px}.ks-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.ks-stat-grid article{background:#f4f2f8;border-radius:9px;padding:10px}.ks-stat-grid span{display:block;font-size:.66rem;color:var(--muted)}.ks-stat-grid strong{display:block;margin-top:6px}.ks-statusline{margin:8px 0 0;background:#f4f2f8;padding:10px;border-radius:9px;font-size:.76rem}.ks-chart{position:relative;height:264px;border:1px solid var(--accent);border-radius:10px;overflow:hidden;background:#faf9fe}.ks-chart canvas{width:100%;height:100%}.ks-chart-badges{position:absolute;right:8px;top:8px;display:flex;gap:7px}.ks-chart-badges span{display:grid;gap:2px;min-width:48px;text-align:center;background:#fff;border:1px solid #e4deed;border-radius:6px;padding:5px;font-size:.62rem}.ks-chart-badges strong{font-size:1rem;color:var(--accent)}.ks-keyboard:fullscreen,.ks-tester:fullscreen{overflow:auto;background:#fff}.ks-tester:fullscreen .ks-hero{display:none}
@media(max-width:900px){.ks-controlbar{gap:14px}.ks-actions{margin-left:0;width:100%}.ks-dashboard{grid-template-columns:1fr}.ks-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ks-stat-grid{grid-template-columns:1fr 1fr}.ks-actions{overflow:auto}.ks-controlbar{align-items:stretch}.ks-control{width:100%}.ks-segment{overflow:auto}.ks-dashboard{padding:12px}.ks-capture{align-items:flex-start;flex-direction:column}.ks-capture>span{align-self:flex-end}}

/* KeyboardTest.id V3: real 100% / 80% / 60% layouts + laptop mouse test */
.ks-history{display:flex;align-items:center;gap:6px;min-height:54px;padding:9px 14px;border-bottom:1px solid var(--line);overflow-x:auto;background:#fff;white-space:nowrap}.ks-history-empty{font-style:italic;color:var(--muted);font-size:.86rem}.ks-history-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border-radius:8px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:850}.ks-history-chip.is-mouse{background:var(--blue)}.ks-history-count{margin-left:auto;color:var(--muted);font-size:.78rem}.ks-history-count b{display:inline-grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff}.ks-keyboard-wrap{padding:16px;background:#fbfbfd}.ks-keyboard{width:100%;min-width:0;margin:auto;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;transform:none}.ks-key-row{display:flex;gap:6px;min-width:0;margin-bottom:6px}.ks-key{position:relative;height:48px;flex:var(--u) var(--u) 0;min-width:36px}.ks-key-gap{flex:var(--u) var(--u) 0;min-width:0}.ks-press-count{position:absolute;right:5px;bottom:2px;color:var(--accent);font-size:.58rem;line-height:1;font-weight:700}.ks-key.is-tested{background:#eef3ff;border-color:var(--accent);color:var(--ink)}.ks-key.is-down{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(86,120,255,.18),inset 0 1px 0 rgba(255,255,255,.15)}
.ks-keyboard.layout-100{max-width:1200px}.ks-keyboard.layout-80{max-width:980px}.ks-keyboard.layout-60{max-width:790px}
.ks-keyboard.layout-80 .numpad,.ks-keyboard.layout-80 .numpad-gap{display:none}.ks-keyboard.layout-60 .function,.ks-keyboard.layout-60 .nav,.ks-keyboard.layout-60 .nav-gap,.ks-keyboard.layout-60 .numpad,.ks-keyboard.layout-60 .numpad-gap{display:none}.ks-keyboard.layout-60 .ks-key-row:first-child{display:none}
.ks-keyboard.type-laptop .numpad,.ks-keyboard.type-laptop .numpad-gap{display:none}.ks-keyboard.type-laptop{max-width:980px}.ks-keyboard.type-laptop.layout-60{max-width:790px}.ks-mouse-row{display:flex;justify-content:center;gap:8px;padding-top:10px}.ks-mouse-row[hidden]{display:none}.ks-mouse-key{position:relative;min-width:120px;height:40px;border:1px solid #b9c0ca;border-bottom-width:3px;border-radius:8px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}.ks-mouse-key small{position:absolute;right:6px;bottom:2px;color:var(--accent);font-weight:700}.ks-mouse-key.is-tested{background:#eef3ff;border-color:var(--accent);color:var(--ink)}.ks-mouse-key.is-down{transform:translateY(2px);border-bottom-width:1px;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(86,120,255,.18),inset 0 1px 0 rgba(255,255,255,.15)}
@media(max-width:900px){.ks-controlbar{align-items:stretch;gap:14px}.ks-actions{margin-left:0;width:100%;flex-wrap:wrap}.ks-keyboard-wrap{overflow:auto;padding:10px}.ks-keyboard{width:max-content;min-width:760px}.ks-keyboard.layout-100{min-width:1150px}.ks-keyboard.layout-80,.ks-keyboard.type-laptop{min-width:930px}.ks-keyboard.layout-60,.ks-keyboard.type-laptop.layout-60{min-width:740px}.ks-dashboard{grid-template-columns:1fr}.ks-history{position:relative}.ks-history-count{position:sticky;right:0;background:#fff;padding-left:8px}}
@media(max-width:600px){.ks-segment button,.ks-single,.ks-actions button{padding:8px 10px}.ks-stat-grid{grid-template-columns:repeat(2,1fr)}.ks-mouse-key{min-width:105px}.ks-history-chip{font-size:.72rem}}

/* V5: pusatkan tombol ArrowUp tepat di atas ArrowDown. */
.ks-key.arrow-up-key{z-index:1}

/* KeyboardTest.id V7: stable V5 geometry + locked laptop size */
.ks-segment.is-disabled{opacity:.58}
.ks-segment.is-disabled button{cursor:not-allowed}
.ks-segment.is-disabled button.is-active{opacity:1;background:#f0e9ff;color:#8427db}
/* Keep the up arrow centered over the down arrow in the navigation cluster. */
.ks-key.arrow-up-key{position:relative;left:0}

/* KeyboardTest.id V8 — chuẩn hoá thứ tự và hình học bàn phím 100% / 80% */
.ks-keyboard-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  padding:16px;
}
.ks-keyboard{
  --key-w:46px;
  --key-h:48px;
  --key-gap:6px;
  width:max-content;
  min-width:0;
  max-width:none!important;
  padding:16px;
}
.ks-board-grid{
  display:grid;
  grid-template-columns:max-content max-content max-content;
  align-items:start;
  gap:26px;
}
.ks-main-cluster,.ks-nav-cluster,.ks-numpad-cluster{min-width:0}
.ks-function-row{
  display:flex;
  align-items:center;
  gap:var(--key-gap);
  margin-bottom:6px;
}
.ks-function-row .ks-key,
.ks-nav-cluster .ks-key,
.ks-numpad-cluster .ks-key{
  flex:none;
  width:var(--key-w);
}
.ks-function-gap{display:block;width:18px;flex:none}
.ks-alpha-block{display:grid;gap:6px}
.ks-key-row{
  display:flex;
  gap:var(--key-gap);
  min-width:0;
  margin:0;
}
.ks-key-row .ks-key{
  width:calc(var(--key-w) * var(--u) + (var(--u) - 1) * var(--key-gap));
  flex:none;
}
.ks-key{
  height:var(--key-h);
  min-width:0;
  box-sizing:border-box;
}
.ks-nav-cluster{display:grid;gap:6px}
.ks-nav-top,.ks-nav-row{display:grid;grid-template-columns:repeat(3,var(--key-w));gap:var(--key-gap)}
.ks-arrow-block{
  display:grid;
  grid-template-columns:repeat(3,var(--key-w));
  grid-template-rows:var(--key-h) var(--key-h);
  gap:var(--key-gap);
  margin-top:50px;
}
.ks-arrow-block .arrow-up-key{grid-column:2;grid-row:1;position:static;left:auto}
.ks-arrow-block [data-code="ArrowLeft"]{grid-column:1;grid-row:2}
.ks-arrow-block [data-code="ArrowDown"]{grid-column:2;grid-row:2}
.ks-arrow-block [data-code="ArrowRight"]{grid-column:3;grid-row:2}
.ks-numpad-cluster{
  display:grid;
  grid-template-columns:repeat(4,var(--key-w));
  grid-template-rows:repeat(5,var(--key-h));
  gap:var(--key-gap);
}
.ks-numpad-cluster .np-r1c1{grid-column:1;grid-row:1}.ks-numpad-cluster .np-r1c2{grid-column:2;grid-row:1}.ks-numpad-cluster .np-r1c3{grid-column:3;grid-row:1}.ks-numpad-cluster .np-r1c4{grid-column:4;grid-row:1}
.ks-numpad-cluster .np-r2c1{grid-column:1;grid-row:2}.ks-numpad-cluster .np-r2c2{grid-column:2;grid-row:2}.ks-numpad-cluster .np-r2c3{grid-column:3;grid-row:2}.ks-numpad-cluster .np-r2c4{grid-column:4;grid-row:2/span 2;height:auto}
.ks-numpad-cluster .np-r3c1{grid-column:1;grid-row:3}.ks-numpad-cluster .np-r3c2{grid-column:2;grid-row:3}.ks-numpad-cluster .np-r3c3{grid-column:3;grid-row:3}
.ks-numpad-cluster .np-r4c1{grid-column:1;grid-row:4}.ks-numpad-cluster .np-r4c2{grid-column:2;grid-row:4}.ks-numpad-cluster .np-r4c3{grid-column:3;grid-row:4}.ks-numpad-cluster .np-r4c4{grid-column:4;grid-row:4/span 2;height:auto}
.ks-numpad-cluster .np-r5c1{grid-column:1/span 2;grid-row:5;width:auto}.ks-numpad-cluster .np-r5c3{grid-column:3;grid-row:5}
.ks-keyboard.layout-80 .ks-board-grid{grid-template-columns:max-content max-content}
.ks-keyboard.layout-80 .ks-numpad-cluster{display:none}
.ks-keyboard.layout-60 .ks-board-grid{grid-template-columns:max-content}
.ks-keyboard.layout-60 .ks-function-row,.ks-keyboard.layout-60 .ks-nav-cluster,.ks-keyboard.layout-60 .ks-numpad-cluster{display:none}
.ks-keyboard.type-laptop .ks-board-grid{grid-template-columns:max-content max-content}
.ks-keyboard.type-laptop .ks-numpad-cluster{display:none}
.ks-mouse-row{margin-top:12px}
@media(min-width:1180px){
  .ks-keyboard-wrap{overflow-x:hidden}
  .ks-keyboard{margin-inline:auto}
}
@media(max-width:1179px){
  .ks-keyboard-wrap{overflow-x:auto}
  .ks-keyboard{margin:0}
}
@media(max-width:900px){
  .ks-keyboard{--key-w:44px;--key-h:46px;min-width:0!important}
}

/* KeyboardTest.id V9 — turunkan blok numpad satu baris agar sejajar dengan baris angka */
.ks-numpad-cluster{
  margin-top:calc(var(--key-h) + var(--key-gap));
}


/* KeyboardTest.id — đồng bộ trạng thái phím với accent #5678ff */
.ks-key.is-tested,
.ks-mouse-key.is-tested{
  background:#eef3ff;
  border-color:var(--accent);
  color:var(--ink);
}

.ks-key.is-down,
.ks-mouse-key.is-down{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:
    0 0 0 3px rgba(86,120,255,.18),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.ks-key.is-down{
  transform:translateY(3px);
  border-bottom-width:1px;
}

.ks-mouse-key.is-down{
  transform:translateY(2px);
  border-bottom-width:1px;
}

.ks-press-count,
.ks-mouse-key small{
  color:var(--accent);
  font-weight:700;
}

.ks-key.is-down .ks-press-count,
.ks-mouse-key.is-down small{
  color:#fff;
}

/* KeyboardTest.id V10 — bar tombol fungsi dan multimedia */
.ks-specialbar{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:62px;
  padding:10px 16px;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  background:#fff;
  scrollbar-width:thin;
}
.ks-special-group{display:flex;align-items:center;gap:7px;flex:none}
.ks-special-group+.ks-special-group{padding-left:18px;border-left:1px solid #e4e7ec}
.ks-special-key{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:38px;
  padding:0 12px;
  border:1px solid #b9c0ca;
  border-bottom-width:3px;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:.88rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .08s ease,background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
}
.ks-special-key:hover{border-color:var(--accent);background:#f5f7ff}
.ks-special-key.is-tested{background:#eef3ff;border-color:var(--accent);color:var(--ink)}
.ks-special-key.is-down{transform:translateY(2px);border-bottom-width:1px;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(86,120,255,.18)}
.ks-special-count{position:absolute;right:6px;bottom:1px;color:var(--accent);font-size:.56rem;font-weight:800}
.ks-special-key.is-down .ks-special-count{color:#fff}
.ks-history-chip.is-special{background:var(--accent)}
.ks-special-group--fn .ks-special-key{min-width:82px}
.ks-special-group--apps{margin-left:auto}
@media(max-width:900px){.ks-specialbar{gap:12px}.ks-special-group+.ks-special-group{padding-left:12px}.ks-special-group--apps{margin-left:0}}

/* KeyboardTest.id V11 — ikon SVG đồng nhất cho hàng multimedia */
.ks-special-key svg{
  display:block;
  width:19px;
  height:19px;
  flex:0 0 19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.ks-special-key svg rect,
.ks-special-key svg circle,
.ks-special-key svg path{vector-effect:non-scaling-stroke}
.ks-special-key--fn{gap:5px}
.ks-special-key__fn{font-size:.77rem;font-weight:850;line-height:1;white-space:nowrap}
.ks-special-key:hover svg{transform:scale(1.04)}
.ks-special-key svg{transition:transform .12s ease}
.ks-special-key.is-down svg{transform:scale(.94)}

/* KeyboardTest.id V12 — riwayat multimedia memakai SVG dan status tombol jelas */
.ks-history-chip.is-special{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:34px;
  padding:0 9px;
  background:var(--accent);
  color:#fff;
}
.ks-history-special-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  line-height:1;
}
.ks-history-special-icon svg{
  display:block;
  width:17px;
  height:17px;
  flex:0 0 17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ks-history-special-icon .ks-special-key__fn{
  font-size:.7rem;
  font-weight:850;
}
.ks-special-key.is-tested:not(.is-down){
  background:#eef3ff;
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(86,120,255,.08);
}
.ks-special-key.is-down{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}


/* V14: bàn phím chính chỉ dùng để hiển thị input vật lý */
.ks-key[data-code]{
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
.ks-key[data-code]:hover{
  filter:none;
}


/* KeyboardTest.id V15 — toàn bộ bàn phím trực quan không nhận click */
.ks-keyboard,
.ks-specialbar,
.ks-mouse-row{
  user-select:none;
}

.ks-key,
.ks-special-key,
.ks-mouse-key{
  cursor:default;
}

/* Không cho chuột tác động trực tiếp vào phím, SVG hoặc touchpad minh họa. */
.ks-keyboard .ks-key,
.ks-specialbar .ks-special-key,
.ks-mouse-row .ks-mouse-key{
  pointer-events:none;
}

/* Hover không được tạo cảm giác các nút multimedia có thể click. */
.ks-special-key:hover{
  background:#fff;
  border-color:#b9c0ca;
}

.ks-special-key.is-tested:hover{
  background:#eef3ff;
  border-color:var(--accent);
}

.ks-special-key:hover svg{
  transform:none;
}


/* KeyboardTest.id V16 — unified blue product theme */
.ks-brand__icon{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(145deg,#6685ff 0%,var(--accent) 58%,#486cff 100%);
  color:#fff;
  font-size:1.2rem;
  font-weight:950;
  letter-spacing:-.05em;
  box-shadow:0 9px 22px rgba(86,120,255,.25),inset 0 1px 0 rgba(255,255,255,.28);
}

.ks-hero__badge{
  position:relative;
  overflow:hidden;
  min-width:220px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(145deg,#6685ff 0%,var(--accent) 58%,#486cff 100%);
  color:#fff;
  box-shadow:0 18px 42px rgba(86,120,255,.25);
}
.ks-hero__badge::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-52px;
  top:-62px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}
.ks-hero__badge span,
.ks-hero__badge small{color:rgba(255,255,255,.74)}
.ks-hero__badge strong{
  position:relative;
  z-index:1;
  color:#fff;
}

.ks-help{
  max-width:1240px;
  margin:0 auto 54px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.ks-help>div,
.ks-help>div:nth-child(2){
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:30px;
  border:1px solid #e1e7f2;
  border-radius:22px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 14px 38px rgba(16,24,40,.07);
}
.ks-help>div::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--accent),#7790ff);
}
.ks-help>div::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-85px;
  top:-90px;
  border-radius:50%;
  background:rgba(86,120,255,.07);
}
.ks-help-number{
  display:inline-grid!important;
  place-items:center;
  width:42px;
  height:30px;
  border-radius:999px;
  background:#eef3ff;
  color:var(--accent)!important;
  font-size:.78rem!important;
  font-weight:900!important;
  line-height:1;
  opacity:1!important;
}
.ks-help-icon{
  position:absolute;
  top:26px;
  right:28px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
  box-shadow:0 8px 20px rgba(86,120,255,.2);
}
.ks-help h2{
  margin:18px 0 13px;
  font-size:1.25rem;
  letter-spacing:-.025em;
}
.ks-help ol,.ks-help ul{margin:0;padding-left:21px;color:#344054}
.ks-help li::marker{color:var(--accent);font-weight:900}
.ks-help li+li{margin-top:8px}

@media(max-width:800px){
  .ks-help{grid-template-columns:1fr;padding:0 12px}
}