/* CSS cho nav và footer */
nav, footer {
    background-color: #d4f2f4;
    color: #0b0848;
    text-align: center;
    padding: 20px;
}

nav a {
    text-decoration: none;
    color: #0b0848;
    margin: 0 15px;
    font-size: 20px;
}

nav a:hover {
    color: #f1a3de;
    font-weight: bold;
    text-decoration: underline;
    transition: 0.2s;
}

/* CSS cho div */
#gioi-thieu {
    background-color: #F3FDE8;
    padding: 20px;
}

#giao-luu {
    background-image: url("anh5.jpg");
    background-repeat: repeat;
    text-align: center;
    color: beige;
    padding: 30px;
}

/* CSS cho h1-h4 */
h1, h2, h3, h4 {
    font-size: 24px;
    color: rgb(255, 197, 222);
    -webkit-text-stroke: 1px rgb(0, 0, 0);
}

/* CSS cho bảng */
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 10px;
    text-align: center;
}

/* Nút gửi thông tin */
.btn-submit {
    background-color: #b5d08d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s ease;
}

.btn-submit:hover {
    background-color: #ecffca;
    color: #000000;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Toàn bộ form */
form {
    font-size: 18px;
}

/* Input, textarea, select */
form input, 
form textarea, 
form select {
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Option trong select */
form select option {
    font-size: 16px;
    padding: 5px;
}

/*BT3*/

/* Nút lên đầu trang */
#backToTop {
    display: none;
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #b5d08d;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    padding: 15px;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

#backToTop:hover {
    background-color: #91b57b;
}

/* Thông báo lỗi */
#error-message {
    color: red;
    font-weight: bold;
    font-size: 16px;
    margin-top: 5px;
}

/* Khi checkbox được tick, hàng đổi màu và gạch ngang */
/* chuyển nền và gạch ngang khi hoàn thành */
#goals tr.completed td {
    background-color: #c6f5c6;
    text-decoration: line-through;
    transition: background-color 0.2s ease;
}

/* chỉ để đảm bảo nhìn rõ phần chữ */
#goals td {
    padding: 8px;
}

/* Ảnh đại diện hiệu ứng scale */
/* avatar scale + border */
#avatar {
  transition: transform 0.25s ease, border-color 0.25s ease;
  border-radius: 10px;
  border: 3px solid transparent;
  display: inline-block;
  cursor: pointer;
  will-change: transform;
}

/* trạng thái hover / focus */
#avatar.hovered,
#avatar:focus {
  transform: scale(1.05);
  border-color: #f1a3de;
  outline: none;
}

/* nhẹ khi nhấn */
#avatar:active {
  transform: scale(1.02);
}