body { font-family: Arial, sans-serif; background: #f0f8ff; margin: 0; padding: 20px; text-align: center; }
.card { background: white; padding: 20px; border-radius: 15px; display: inline-block; box-shadow: 0 8px 20px rgba(0,0,0,0.1); max-width: 90%;width: 400px;}
input, button, select { padding: 10px; margin: 10px; font-size: 16px; }
#result { margin-top: 20px; font-size: 18px; }
#timer { font-size: 20px; color: red; margin-top: 10px; }
.hint { font-size: 14px; color: gray; }
body {font-family: 'Poppins', sans-serif;background: linear-gradient(to right, #c9d6ff, #e2e2e2);padding: 20px;margin: 0;min-height: 80vh;display: flex;justify-content: center;align-items: center;overflow-x: hidden;}
.card {background: white;padding: 30px 20px;border-radius: 20px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);width: 90%;max-width: 400px;text-align: center;}
button {width: 47%;padding: 15px;margin: 10px 0;font-size: 18px;border: 1px solid #ddd;border-radius: 10px;}
button {background-color: #4CAF50;color: white;font-weight: bold;cursor: pointer;}
button:hover {background-color: #45a049;}
#timer {font-size: 22px;color: #ff4d4f;margin-top: 10px;gap: 20%;}
.hint {font-size: 14px;color: gray;}
.controls {display: flex;justify-content: space-between;align-items: center;gap: 10px;margin-bottom: 20px;}
.controls div {flex: 1;max-width: 180px;}
.controls label {display: block;margin-bottom: 5px;font-weight: bold;}
.select-container {display: flex;justify-content: center;gap: 10px;margin-bottom: 20px;}
.container {position: relative;display: flex;flex-direction: row;justify-content:space-between;}
.button124{position: relative;display: flex;flex-direction: row;justify-content:space-between;}
.select-container select {padding: 8px;font-size: 16px;border-radius: 8px;border: 1px solid #ccc;}
button#anthan {max-width: 12%;}
input, select { width: 100%; padding: 12px; margin: 8px 0; font-size: 18px; border-radius: 8px;border: 1px solid #ccc;box-sizing: border-box;}
#result { margin-top: 20px; font-size: 30px; }
ruby rt { font-size: 0.6em; color: #555; }.left {padding-right: 10px;}.left1 {padding-right: 10px;}#check{background-color: #ff4d4f;}
#question {border: 1px solid #ccc;background-color: #fff;border-radius: 8px;padding: 25px;margin: 10px 0 10px 0;font-size: large;font-weight: bold;display: block;}
.btn-chuyen-trang {background-color: #3498db;color: white;border: none;padding: 12px 24px;border-radius: 8px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;margin: 10px 0;}
.btn-chuyen-trang:hover {background-color: #2980b9;