/* Toàn bộ giao diện tối */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 20px;
     background-color: #121212;
     /* Màu nền tối chủ đạo */
     color: #e0e0e0;
     /* Màu chữ sáng nhẹ tránh mỏi mắt */
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Container bọc ngoài để cố định độ rộng đẹp mắt trên mọi thiết bị */
 .container {
     width: 100%;
     max-width: 600px;
     box-sizing: border-box;
 }

 h1 {
     text-align: center;
     color: #ffffff;
     font-size: 24px;
     margin-bottom: 20px;
 }

 /* Ô nhập liệu dạng tối */
 input {
     width: 100%;
     padding: 12px;
     margin: 10px 0;
     border: 1px solid #333333;
     border-radius: 6px;
     background-color: #1e1e1e;
     color: #ffffff;
     font-size: 16px;
     box-sizing: border-box;
     transition: border-color 0.3s;
 }

 input:focus {
     outline: none;
     border-color: #5cb85c;
     /* Đổi màu viền khi click vào */
 }

 /* Nút bấm nổi bật */
 button {
     width: 100%;
     padding: 12px;
     background-color: #2ea44f;
     color: white;
     border: none;
     border-radius: 6px;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 button:hover {
     background-color: #2c974b;
 }

 /* Khung kết quả linh động có thanh cuộn (Scrollbar) */
 #result {
     margin-top: 20px;
     padding: 15px;
     background-color: #1e1e1e;
     border: 1px solid #2d2d2d;
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     box-sizing: border-box;
     line-height: 1.6;
     font-size: 16px;

     /* Logic tạo scrollbar linh động */
     max-height: 50vh;
     /* Chiều cao tối đa bằng 50% chiều cao màn hình thiết bị */
     overflow-y: auto;
     /* Tự động hiện thanh cuộn dọc khi nội dung vượt quá chiều cao */
     word-wrap: break-word;
     /* Tự động xuống dòng nếu từ quá dài */
 }

 /* Tùy biến thanh cuộn (Scrollbar) mượt mà cho các trình duyệt hiện đại (Chrome, Safari, Edge) */
 #result::-webkit-scrollbar {
     width: 8px;
 }

 #result::-webkit-scrollbar-track {
     background: #1e1e1e;
     border-radius: 6px;
 }

 #result::-webkit-scrollbar-thumb {
     background: #444444;
     border-radius: 6px;
 }

 #result::-webkit-scrollbar-thumb:hover {
     background: #555555;
 }