/* =========================================
1. RESET & ROOT
========================================= */

:root {
–bg: #111615;
–bg-soft: #181d1c;
–bg-card: #1b201f;
–bg-card-hover: #222827;

–border: #303837;
–border-light: #3a4543;

–text: #e8e2da;
–text-muted: #9ba19e;
–text-dark: #737b78;

–primary: #df8958;
–primary-hover: #ee9d6d;
–primary-soft: rgba(223, 137, 88, 0.12);

–green: #76b69c;
–green-soft: rgba(70, 150, 115, 0.2);

–yellow: #dca95f;
–red: #d77979;
–blue: #8fa9cc;

–radius-sm: 10px;
–radius-md: 16px;
–radius-lg: 22px;

–container: 1280px;

–transition: all 0.2s ease;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
background: var(–bg);
color: var(–text);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
“Segoe UI”,
Roboto,
Arial,
sans-serif;
font-size: 15px;
line-height: 1.6;
}

button,
input,
select {
font: inherit;
}

button {
cursor: pointer;
}

a {
color: inherit;
text-decoration: none;
}

.container {
width: min(
calc(100% – 40px),
var(–container)
);
margin: 0 auto;
}

/* =========================================
2. HEADER
========================================= */

.site-header {
border-bottom: 1px solid var(–border);
background: rgba(17, 22, 21, 0.9);
backdrop-filter: blur(12px);
}

.site-header .container {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.logo {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.5px;
}

.main-menu {
display: flex;
align-items: center;
gap: 28px;
}

.main-menu a {
color: var(–text-muted);
font-size: 14px;
transition: var(–transition);
}

.main-menu a:hover {
color: var(–primary);
}

/* =========================================
3. HERO
========================================= */

.hero {
padding: 36px 0 18px;
}

.hero-inner {
display: grid;
grid-template-columns: auto minmax(280px, 1fr) auto auto;
align-items: center;
gap: 36px;

padding: 28px 32px;

background:
linear-gradient(
100deg,
rgba(223, 137, 88, 0.16),
rgba(29, 35, 34, 0.9) 35%,
rgba(223, 137, 88, 0.13)
);

border: 1px solid var(–border);
border-radius: var(–radius-lg);
}

.hero-icon {
width: 76px;
height: 76px;

display: flex;
align-items: center;
justify-content: center;

font-size: 38px;

border: 1px solid #515a57;
border-radius: 22px;

background:
linear-gradient(
145deg,
#2a2f2e,
#1a1f1e
);
}

.hero-content {
min-width: 0;
}

.hero-badge {
display: inline-flex;
padding: 4px 12px;

margin-bottom: 8px;

border-radius: 999px;

background: rgba(223, 137, 88, 0.1);

color: var(–primary);

font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
}

.hero h1 {
font-size: clamp(25px, 3vw, 34px);
line-height: 1.2;
letter-spacing: -0.8px;
margin-bottom: 4px;
}

.hero p {
max-width: 550px;
color: var(–text-muted);
font-size: 14px;
}

.hero-stats {
display: flex;
align-items: center;
gap: 34px;
}

.hero-stat {
display: flex;
flex-direction: column;
gap: 2px;
white-space: nowrap;
}

.hero-stat strong {
font-size: 17px;
font-weight: 800;
}

.hero-stat span {
color: var(–text-muted);
font-size: 12px;
}

.hero-button,
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 52px;
padding: 0 26px;

border-radius: 14px;

background:
linear-gradient(
135deg,
var(–primary),
#efa875
);

color: #fff7f0;

font-weight: 800;
white-space: nowrap;

box-shadow:
0 10px 30px
rgba(223, 137, 88, 0.16);

transition: var(–transition);
}

.hero-button:hover,
.cta-button:hover {
transform: translateY(-2px);

background:
linear-gradient(
135deg,
var(–primary-hover),
#f3b17d
);
}

/* =========================================
4. KEYBOARD TESTER
========================================= */

.keyboard-tester {
padding: 0 0 70px;
}

.test-summary,
.keyboard-panel,
.tested-keys-section {
background: var(–bg-soft);
border: 1px solid var(–border);
border-radius: var(–radius-lg);
}

/* =========================================
5. TEST SUMMARY
========================================= */

.test-summary {
padding: 16px;
margin-bottom: 12px;
}

.section-heading {
display: flex;
align-items: center;
justify-content: space-between;

gap: 30px;

padding-bottom: 16px;
margin-bottom: 16px;

border-bottom: 1px solid var(–border);
}

.section-heading h2 {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.4px;
}

.section-heading p {
margin-top: 2px;

color: var(–text-muted);
font-size: 13px;
}

.reset-button,
.sound-toggle,
.expand-button {
min-height: 46px;

padding: 0 18px;

border: 1px solid var(–border-light);
border-radius: 14px;

background:
linear-gradient(
180deg,
#252b2a,
#1c2221
);

color: var(–text);

font-weight: 700;

transition: var(–transition);
}

.reset-button:hover,
.sound-toggle:hover,
.expand-button:hover {
border-color: var(–primary);
color: var(–primary);
}

.test-stats {
display: grid;
grid-template-columns:
minmax(220px, 1.35fr)
repeat(5, minmax(120px, 1fr));

gap: 10px;
}

.stat-card {
min-height: 86px;

padding: 15px 14px;

display: flex;
flex-direction: column;
justify-content: space-between;

border: 1px solid var(–border);
border-radius: var(–radius-md);

background:
linear-gradient(
145deg,
#1d2221,
#181d1c
);
}

.stat-label {
color: #b9bfbc;
font-size: 13px;
font-weight: 700;
}

.stat-number {
font-size: 25px;
line-height: 1;
font-weight: 800;
color: var(–green);
}

.progress-card {
justify-content: flex-start;
}

.stat-header {
display: flex;
justify-content: space-between;
align-items: center;

margin-bottom: 12px;

font-size: 14px;
}

.stat-header strong {
font-weight: 800;
}

#progressPercent {
color: var(–primary);
font-weight: 800;
}

.progress-bar {
width: 100%;
height: 8px;

overflow: hidden;

border-radius: 999px;

background: #353d3b;
}

.progress-value {
width: 0%;
height: 100%;

border-radius: inherit;

background:
linear-gradient(
90deg,
var(–primary),
#efad79
);

transition: width 0.25s ease;
}

.test-status {
margin-top: 14px;
padding: 10px 16px;

min-height: 42px;

display: flex;
align-items: center;
justify-content: center;

border: 1px dashed #3b4543;
border-radius: 12px;

color: var(–text-muted);
font-size: 13px;
}

/* =========================================
6. KEYBOARD PANEL
========================================= */

.keyboard-panel {
padding: 16px;
overflow: hidden;
}

.keyboard-controls {
display: flex;
align-items: center;
gap: 12px;

padding-bottom: 14px;
}

.layout-selector {
display: flex;
align-items: center;
gap: 14px;
}

.control-label {
color: var(–text-muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.layout-buttons {
display: flex;
gap: 5px;

padding: 5px;

border-radius: 16px;

background: #2b3230;
}

.layout-button {
min-width: 92px;
min-height: 36px;

padding: 0 15px;

border: 0;
border-radius: 10px;

background: transparent;

color: var(–text-muted);

font-size: 13px;
font-weight: 700;

transition: var(–transition);
}

.layout-button:hover {
color: var(–text);
}

.layout-button.active {
background: #1a201f;
color: var(–text);

box-shadow:
0 2px 8px
rgba(0, 0, 0, 0.25);
}

.sound-selector {
margin-left: auto;

display: flex;
align-items: center;
gap: 8px;
}

.sound-selector label {
color: var(–text-muted);
font-size: 12px;
font-weight: 700;
}

.sound-selector select {
min-width: 220px;
height: 44px;

padding: 0 14px;

outline: none;

border: 1px solid var(–border);
border-radius: 12px;

background: #1b201f;
color: var(–text);

font-weight: 700;
}

.sound-selector select:focus {
border-color: var(–primary);
}

/* =========================================
7. KEYBOARD WRAPPER
========================================= */

.keyboard-wrapper {
overflow-x: auto;

padding: 12px 0 0;
}

.keyboard {
min-width: 980px;

padding: 16px;

border-top: 1px solid rgba(255, 255, 255, 0.03);

background:
linear-gradient(
180deg,
#242a28,
#1c2220
);
}

.keyboard-row {
display: flex;
align-items: center;

gap: 5px;

margin-bottom: 5px;
}

.keyboard-row:last-child {
margin-bottom: 0;
}

.keyboard-row-function {
margin-bottom: 10px;
}

/* =========================================
8. KEY STYLE
========================================= */

.key {
width: 54px;
height: 48px;

flex: 0 0 auto;

display: flex;
align-items: center;
justify-content: center;

padding: 5px;

border: 1px solid #3a4441;
border-radius: 11px;

background:
linear-gradient(
145deg,
#232a28,
#1a201e
);

color: #dedbd4;

font-size: 13px;
font-weight: 700;

box-shadow:
inset 0 1px 0
rgba(255, 255, 255, 0.025);

transition:
background 0.12s ease,
border-color 0.12s ease,
transform 0.08s ease,
box-shadow 0.12s ease;
}

.key:hover {
border-color: #596562;
}

.key:active,
.key.is-pressed {
transform: translateY(2px);

border-color: var(–primary);

background:
linear-gradient(
145deg,
#d88152,
#bb6740
);

color: #fff;
}

.key.is-tested {
border-color: #43806b;

background:
linear-gradient(
145deg,
#24473b,
#1d362e
);

color: #9dd4bd;
}

.key.is-tested.is-pressed {
border-color: var(–primary);

background:
linear-gradient(
145deg,
#df8958,
#c87346
);

color: #fff;
}

/* KEY SIZES */

.key-backspace {
width: 120px;
}

.key-tab {
width: 82px;
}

.key-slash {
width: 78px;
}

.key-caps {
width: 100px;
}

.key-enter {
width: 112px;
}

.key-shift {
width: 132px;
}

.key-ctrl {
width: 70px;
}

.key-win {
width: 70px;
}

.key-alt {
width: 70px;
}

.key-space {
width: 340px;
}

.key-spacer {
width: 22px;
flex: 0 0 22px;
}

.key-spacer.small {
width: 10px;
flex-basis: 10px;
}

/* =========================================
9. TESTED KEYS
========================================= */

.tested-keys-section {
margin-top: 12px;
padding: 22px;
}

.tested-keys-section h2 {
margin-bottom: 14px;
font-size: 17px;
}

.tested-keys {
min-height: 50px;

display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;

color: var(–text-muted);
font-size: 13px;
}

.tested-key {
display: inline-flex;
align-items: center;

padding: 6px 11px;

border: 1px solid #3e6759;
border-radius: 8px;

background: var(–green-soft);

color: #9cd4bb;

font-weight: 700;
}

/* =========================================
10. SECTION COMMON
========================================= */

.how-to-use,
.features,
.faq,
.bottom-cta {
padding: 80px 0;
}

.section-title {
max-width: 720px;
margin: 0 auto 42px;

text-align: center;
}

.section-title > span {
display: inline-block;

margin-bottom: 10px;

color: var(–primary);

font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}

.section-title h2 {
font-size: clamp(26px, 4vw, 38px);
line-height: 1.25;
letter-spacing: -0.8px;
}

/* =========================================
11. HOW TO USE
========================================= */

.how-to-use {
background: #151a19;
border-top: 1px solid var(–border);
border-bottom: 1px solid var(–border);
}

.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

.step {
padding: 28px;

background: var(–bg-soft);

border: 1px solid var(–border);
border-radius: var(–radius-lg);
}

.step-number {
display: inline-flex;
align-items: center;
justify-content: center;

width: 46px;
height: 46px;

margin-bottom: 22px;

border-radius: 12px;

background: var(–primary-soft);

color: var(–primary);

font-size: 14px;
font-weight: 900;
}

.step h3 {
margin-bottom: 8px;
font-size: 19px;
}

.step p {
color: var(–text-muted);
}

/* =========================================
12. FEATURES
========================================= */

.feature-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.feature-item {
padding: 24px;

border: 1px solid var(–border);
border-radius: var(–radius-lg);

background:
linear-gradient(
145deg,
#1c2220,
#171c1b
);

transition: var(–transition);
}

.feature-item:hover {
transform: translateY(-4px);
border-color: #4a5652;
}

.feature-icon {
width: 50px;
height: 50px;

display: flex;
align-items: center;
justify-content: center;

margin-bottom: 20px;

border-radius: 14px;

background: var(–primary-soft);

font-size: 24px;
}

.feature-item h3 {
margin-bottom: 8px;
font-size: 17px;
}

.feature-item p {
color: var(–text-muted);
font-size: 14px;
}

/* =========================================
13. FAQ
========================================= */

.faq {
background: #151a19;
border-top: 1px solid var(–border);
}

.faq-list {
max-width: 900px;
margin: 0 auto;
}

.faq-item {
margin-bottom: 10px;

border: 1px solid var(–border);
border-radius: 14px;

background: var(–bg-soft);

overflow: hidden;
}

.faq-item summary {
position: relative;

padding: 20px 52px 20px 20px;

cursor: pointer;
list-style: none;

font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary::after {
content: “+”;

position: absolute;

top: 50%;
right: 20px;

transform: translateY(-50%);

color: var(–primary);

font-size: 24px;
font-weight: 400;
}

.faq-item[open] summary::after {
content: “−”;
}

.faq-item p {
padding:
0
20px
20px;

color: var(–text-muted);
}

/* =========================================
14. CTA
========================================= */

.bottom-cta {
padding: 70px 0;
}

.cta-content {
padding: 60px 30px;

text-align: center;

border: 1px solid var(–border);
border-radius: 28px;

background:
radial-gradient(
circle at top center,
rgba(223, 137, 88, 0.18),
transparent 45%
),
linear-gradient(
145deg,
#202624,
#171c1b
);
}

.cta-content h2 {
margin-bottom: 10px;

font-size: clamp(28px, 4vw, 42px);
line-height: 1.2;
}

.cta-content p {
max-width: 600px;

margin:
0 auto
28px;

color: var(–text-muted);
}

.cta-button {
min-height: 54px;
}

/* =========================================
15. FOOTER
========================================= */

.site-footer {
padding: 50px 0 24px;

border-top: 1px solid var(–border);

background: #0d1110;
}

.footer-logo {
margin-bottom: 6px;

font-size: 20px;
font-weight: 900;
}

.site-footer > .container > p {
color: var(–text-muted);
font-size: 14px;
}

.footer-bottom {
margin-top: 36px;
padding-top: 20px;

display: flex;
align-items: center;
justify-content: space-between;

border-top: 1px solid #252c2a;

color: var(–text-dark);
font-size: 13px;
}

.footer-bottom nav {
display: flex;
gap: 22px;
}

.footer-bottom a {
transition: var(–transition);
}

.footer-bottom a:hover {
color: var(–primary);
}

/* =========================================
16. SCROLLBAR
========================================= */

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: #111615;
}

::-webkit-scrollbar-thumb {
border: 2px solid #111615;
border-radius: 999px;

background: #3a4542;
}

::-webkit-scrollbar-thumb:hover {
background: #4a5753;
}

/* =========================================
17. RESPONSIVE – TABLET
========================================= */

@media (max-width: 1100px) {

.hero-inner {
grid-template-columns: auto 1fr;
}

.hero-stats {
grid-column: 2;
}

.hero-button {
grid-column: 1 / -1;
}

.test-stats {
grid-template-columns:
repeat(3, 1fr);
}

.progress-card {
grid-column: span 3;
}

.keyboard-controls {
flex-wrap: wrap;
}

.sound-selector {
margin-left: 0;
}

.feature-list {
grid-template-columns:
repeat(2, 1fr);
}

}

/* =========================================
18. RESPONSIVE – MOBILE
========================================= */

@media (max-width: 768px) {

.container {
width: min(
calc(100% – 28px),
var(–container)
);
}

.site-header .container {
min-height: 62px;
}

.main-menu {
display: none;
}

.hero {
padding-top: 18px;
}

.hero-inner {
grid-template-columns: 1fr;

gap: 20px;

padding: 24px;
}

.hero-icon {
width: 64px;
height: 64px;
}

.hero-stats {
grid-column: auto;

display: grid;
grid-template-columns: repeat(3, 1fr);

gap: 12px;
}

.hero-stat strong {
font-size: 15px;
}

.hero-stat span {
font-size: 11px;
}

.hero-button {
grid-column: auto;

width: 100%;
}

.section-heading {
align-items: flex-start;
flex-direction: column;
}

.reset-button {
width: 100%;
}

.test-stats {
grid-template-columns:
repeat(2, 1fr);
}

.progress-card {
grid-column: span 2;
}

.keyboard-panel {
padding: 12px;
}

.keyboard-controls {
align-items: stretch;
flex-direction: column;
}

.layout-selector {
align-items: flex-start;
flex-direction: column;
}

.layout-buttons {
width: 100%;
}

.layout-button {
flex: 1;
min-width: 0;
}

.sound-selector {
width: 100%;

align-items: stretch;
flex-direction: column;
}

.sound-selector select {
width: 100%;
}

.sound-toggle,
.expand-button {
width: 100%;
}

.steps {
grid-template-columns: 1fr;
}

.feature-list {
grid-template-columns: 1fr;
}

.how-to-use,
.features,
.faq,
.bottom-cta {
padding: 55px 0;
}

.footer-bottom {
align-items: flex-start;
flex-direction: column;

gap: 16px;
}

.footer-bottom nav {
flex-wrap: wrap;
gap: 12px 20px;
}

}

/* =========================================
19. RESPONSIVE – SMALL MOBILE
========================================= */

@media (max-width: 480px) {

.hero-stats {
grid-template-columns: 1fr;
}

.test-stats {
grid-template-columns: 1fr;
}

.progress-card {
grid-column: auto;
}

.stat-card {
min-height: 74px;
}

.cta-content {
padding: 42px 20px;
}

}

⌨


ĐỪNG ĐOÁN NỮA!

Bàn phím của bạn gặp vấn đề?

Gõ thử bàn phím ngay trên web, không cần cài đặt phần mềm.
Kiểm tra phản hồi của từng phím trực tiếp trên trình duyệt.

500+
Sound profile
12.6K+
Người trải nghiệm
Miễn phí
Ngay trên web


Khám phá thử ngay →

Kết quả tổng quan

Tiến độ test và các lỗi phát hiện trong quá trình kiểm tra.


Đã test:
0
/
104

0%


OK


0


Đang nhấn


0


Nghi lỗi


0


Kẹt phím


0


Loạn phím


0

Sẵn sàng kiểm tra bàn phím


Chọn layout










































Phím đã kiểm tra

Chưa có phím nào được kiểm tra.

Hướng dẫn sử dụng

Kiểm tra bàn phím trong 3 bước


01

Chọn layout

Chọn loại bàn phím phù hợp với bàn phím bạn đang sử dụng.


02

Bắt đầu gõ

Nhấn lần lượt các phím trên bàn phím vật lý của bạn.


03

Xem kết quả

Theo dõi các phím đã được ghi nhận trực tiếp trên màn hình.

Keyboard Tester

Kiểm tra bàn phím trực tiếp trên trình duyệt

⚡

Phản hồi tức thì

Phím được hiển thị ngay khi người dùng thao tác.

🔊

Âm thanh bàn phím

Có thể bật hoặc tắt âm thanh phản hồi khi nhấn phím.

⌨

Nhiều layout

Hỗ trợ Fullsize, TKL và layout bàn phím 60%.

🌐

Không cần cài đặt

Sử dụng trực tiếp trên trình duyệt mà không cần phần mềm.

Câu hỏi thường gặp

FAQ về công cụ Keyboard Tester

Keyboard Tester là gì?

Đây là công cụ giúp ghi nhận các phím được nhấn trực tiếp trên trình duyệt.

Tôi có cần cài đặt phần mềm không?

Không. Công cụ hoạt động trực tiếp trên trình duyệt web.

Công cụ có hỗ trợ bàn phím laptop không?

Có. Công cụ có thể ghi nhận các sự kiện bàn phím được trình duyệt hỗ trợ.

Sẵn sàng kiểm tra bàn phím?

Bắt đầu gõ và theo dõi các phím được ghi nhận ngay trên màn hình.


Bắt đầu kiểm tra →