#thai-keyboard {
        --key-width: 38px;
        --key-height: 42px;
        --gap: 2px;

        display: flex;
        flex-direction: column;
        gap: var(--gap);

        width: max-content;
        max-width: 100%;
        padding: 10px;
    }

    .keyboard-row {
        display: flex;
        gap: var(--gap);
        width: 100%;
    }
    
    .keyboard-row:nth-child(1) {
		margin-left: 0;
	}

	.keyboard-row:nth-child(2) {
	    margin-left: calc(var(--key-width) * 0.5);
	}

	.keyboard-row:nth-child(3) {
	    margin-left: calc(var(--key-width) * 0.75);
	}
	
	.keyboard-row:nth-child(4) {
	    margin-left: calc(var(--key-width) * -.25);
	}
	
	.keyboard-row:nth-child(5) {
	    justify-content: space-around;
	}

    .key {
        position: relative;
        width: var(--key-width);
        height: var(--key-height);
        flex: 0 0 var(--key-width);
        padding: 0;
        border: 1px solid #999;
        border-radius: 5px;
        background: #f5f5f5;
        box-sizing: border-box;
       	font-family: "Noto Sans Thai", "Noto Sans", sans-serif;
	}

    .key-char {
        position: absolute;
        display: block;
        padding: 2px 2px;
        font-size: 15px;
        width: 100%;
        line-height: 1;
        border-radius: 3px;
        box-sizing: border-box;		
    }    
    
    .key-char.normal {
        bottom: 2px;
		text-align: left;
        padding-left: 30%;
    }

    .key-char.shift {
        top: 2px;
        text-align: right;       
        padding-right: 30%;
    }

    .key-char.highlight {
		background-color: #6FC7E6;
		animation: pulse 1.5s 2 ease-in-out; 
    }
    
    @keyframes pulse {
		0% {background-color: #6FC7E6;}
		50% {background-color: #B7E3F2;}
		100% {background-color: #6FC7E6;}
	}

    .highlight-key {
		background-color: #6FC7E6;
    }

    .key.wide {
        width: calc(var(--key-width) * 1.5 + var(--gap) * 0.5);
        flex-basis: calc(var(--key-width) * 1.5 + var(--gap) * 0.5);
    }

    .key.extra-wide {
        width: calc(var(--key-width) * 2.2 + var(--gap) * 1.2);
        flex-basis: calc(var(--key-width) * 2.2 + var(--gap) * 1.2);
    }

    .key.space {
        width: calc(var(--key-width) * 6 + var(--gap) * 5);
        flex-basis: calc(var(--key-width) * 6 + var(--gap) * 5);
    }

    .special-label {
        font-size: 13px;
        color: #333;
    }