/* รีเซ็ตค่าเริ่มต้น */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: #f4f4f4; color: #333; line-height: 1.6; } /* HEADER */ header { background: #0073e6; color: #fff; padding: 20px; text-align: center; } nav { display: flex; justify-content: center; gap: 15px; margin-top: 10px; } nav a { color: #fff; text-decoration: none; font-weight: bold; padding: 10px 15px; background: rgba(255, 255, 255, 0.2); border-radius: 5px; transition: 0.3s; } nav a:hover { background: rgba(255, 255, 255, 0.5); } .btn-login { margin-left: right; /* ปุ่ม Login จะไปอยู่ที่ขวาสุด */ background-color: #4CAF50; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; } .btn-login:hover { background-color: #45a049; } /* SEARCH BAR */ form { display: inline-flex; margin-top: 10px; } input[type="text"] { padding: 8px; border: none; border-radius: 5px 0 0 5px; width: 200px; } button { padding: 8px 12px; border: none; background: #ff5722; color: white; border-radius: 0 5px 5px 0; cursor: pointer; transition: 0.3s; } button:hover { background: #e64a19; } /* SECTION */ section { max-width: 800px; margin: 30px auto; background: white; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; } h2 { color: #0073e6; text-align: center; margin-bottom: 15px; } /* TOUR LIST */ ul { list-style: none; } ul li { background: #fff; padding: 15px; margin: 10px 0; border-left: 5px solid #0073e6; display: flex; justify-content: space-between; align-items: center; } ul li a { text-decoration: none; color: #0073e6; font-weight: bold; } ul li a:hover { text-decoration: underline; } /* BUTTONS */ .btn-create, .btn-edit, .btn-delete { padding: 8px 12px; border: none; color: white; border-radius: 5px; text-decoration: none; cursor: pointer; transition: 0.3s; } .btn-create { background: #28a745; } .btn-edit { background: #ffc107; } .btn-delete { background: #dc3545; } .btn-create:hover { background: #218838; } .btn-edit:hover { background: #e0a800; } .btn-delete:hover { background: #c82333; } /* FOOTER */ footer { text-align: center; padding: 20px; background: #333; color: white; margin-top: 30px; }