body {
           min-height: 100vh;
           background: linear-gradient(to bottom, #8fdaff, #dce1e2);
           font-family: 'Noto Sans', sans-serif;
       }

       .cloud-svg {
           position: absolute;
           fill: white;
           opacity: 0.85;
           z-index: -99;
       }

       .cloud-1 {
           top: 18%;
           right: 25%;
           width: 120px;
           animation: floatCloud1 4s ease-in-out infinite alternate;
       }

       .cloud-2 {
           top: 8%;
           left: 10%;
           width: 100px;
           animation: floatCloud2 6s ease-in-out infinite alternate;
       }

       .cloud-3 {
           top: 40%;
           right: 15%;
           width: 150px;
           opacity: 0.5;
           animation: floatCloud3 5s ease-in-out infinite alternate;
       }

       .cloud-4 {
           bottom: 5%;
           left: 30%;
           width: 140px;
           opacity: 0.4;
           animation: floatCloud4 7s ease-in-out infinite alternate;
       }

       @keyframes floatCloud1 {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(20px);
           }
       }

       @keyframes floatCloud2 {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(-15px);
           }
       }

       @keyframes floatCloud3 {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(12px);
           }
       }

       @keyframes floatCloud4 {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(-10px);
           }
       }

        .description::after {
           content: "";
           display: block;
           width: 25%;
           height: 7px;
           background-color: #003355;
           margin: 10px auto 0;
       }

       .header {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 20px;
       }

        .header .brand-link{
            display:flex;              /* xếp logo + chữ trên một hàng */
            align-items:center;
            gap:12px;
            text-decoration:none;      /* bỏ gạch chân */
            color:inherit;             /* giữ nguyên màu chữ hiện có */
            }
            .header .brand-link:hover{
            opacity:.85;               /* hiệu ứng nhẹ khi rê chuột */
            }

       .title {
           font-family: 'Montserrat', sans-serif;
           font-size: 4.5rem;
           font-weight: 700;
           letter-spacing: 2px;
       }

       .title-chat {
           font-family: 'Montserrat', sans-serif;
           font-size: 1.5rem;
           font-weight: 700;
           letter-spacing: 2px;
       }

       .intro-block {
           margin: 0 auto;
       }

       .chat-log {
           display: flex;
           flex-direction: column;
           padding-bottom: 10px;
       }

       .chat-log::-webkit-scrollbar {
           width: 6px;
       }

       .chat-log::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.4);
           border-radius: 3px;
       }

       .bot-message,
       .user-message,
       .bot-real-message {
           background: #ffffff81;
           padding: 10px 14px;
           border-radius: 12px !important;;
           margin-bottom: 5px;
           max-width: 80%;
           word-wrap: break-word;
           align-self: flex-end;
           text-align: right;
           transition: height 0.2s;
       }

       .bot-message {
           align-self: flex-start;
           text-align: left;
       }
       .bot-real-message {
           align-self: flex-start;
           text-align: left;
       }
        /* thêm vào file styles.css */
        .bot-message::after{
        content:'';
        display:inline-block;
        width:2px; height:0.8em;
        background:chartreuse;         /* cùng màu chữ */
        margin-left:2px;
        animation:blink 1s steps(1) infinite;
        }
        @keyframes blink{50%{opacity:0}}

 
.chat-input-box {
    display: flex;
    gap: 10px;
}

.chat-input-wrapper {
    position: relative;
    flex: 1;
    border: 3px solid transparent; /* luôn có border để không thay đổi kích thước */
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Làm nổi bật khi focus */
.chat-input-wrapper:focus-within {
    border: 3px solid rgba(28, 183, 255, 0.212);
}

.chat-input-wrapper input {
    width: 100%;
    padding: 10px 45px 10px 16px;
    border-radius: 12px;
    border: none;
    outline: none;
    font-size: 1rem;
    background: #ffffff;
    color: #000816;
}

/* Nút gửi ban đầu ẩn, chỉ hiện khi có focus hoặc text */
.chat-input-wrapper button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #0077ff;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* Hiện nút gửi khi input focus hoặc có nội dung */
.chat-input-wrapper:focus-within button,
.chat-input-wrapper input:not(:placeholder-shown) + button {
    opacity: 1;
}


       .chat-input-wrapper input:not(:placeholder-shown)+button {
           opacity: 1;
       }

       .footer {
           margin-top: 30px;
           font-size: 0.85rem;
           text-align: center;
           opacity: 0.7;
       }

       .footer-links a {
           color: #003366;
           margin: 0 6px;
           transition: color 0.3s;
       }

       .footer-links a:hover {
           color: #007BFF;
           text-decoration: underline;
       }

            /* Nút hiển thị như link bình thường */
            .top-link button {
                background: none;    
                text-decoration: underline;    /* bỏ nền xám mặc định của button */
                border: none;            /* bỏ viền */
                padding: 0;              /* bỏ khoảng đệm */
                margin: 0;
                color: #003366;          /* màu chữ mặc định như trước */
                font: inherit;           /* giữ font cha */
                cursor: pointer;         /* tay trỏ giống link */
            }

            /* Hiệu ứng hover */
            .top-link button:hover,
            .top-link button:focus {     /* focus để hỗ trợ bàn phím */
                color: #007BFF;
                text-decoration: underline;
                outline: none;           /* tránh viền xanh đậm mặc định của Chrome */
            }


       @media (max-width: 480px) {
           .logo img {
               width: 60px;
               height: auto;
           }

           .title {
               font-size: 3.5rem;
           }

           .cloud-1 {
               top: 10%;
               right: 10%;
               width: 80px;
           }

           .cloud-2 {
               top: 22%;
               left: 5%;
               width: 65px;
           }

           .cloud-3 {
               top: 38%;
               right: 15%;
               width: 90px;
           }

           .cloud-4 {
               bottom: 8%;
               left: 12%;
               width: 70px;
           }
       }