:root{--primary:#5c6bc0;--text:#333;--bg:#fff;--card:#fff}.search-container{max-width:700px;margin:20px auto;padding:10px}@media(max-width:768px){.search-container{position:sticky;top:0;background:var(--bg);z-index:999}}.search-box{position:relative}#searchInput{width:100%;padding:12px 40px 12px 15px;border-radius:10px;border:1px solid #ddd;font-size:16px;transition:.25s}#searchInput:focus{border-color:var(--primary);box-shadow:0 0 6px rgba(92,107,192,.2);outline:none}#clearBtn{position:absolute;right:110px;top:50%;transform:translateY(-50%);font-size:18px;cursor:pointer;color:#999}#clearBtn:hover{color:#000}#results{transition:opacity .2s ease}.fade-out{opacity:0}.fade-in{opacity:1}.no-result{text-align:center;padding:20px;color:red;font-weight:500}.result-card{display:flex;gap:12px;padding:10px;border-bottom:1px solid #eee;text-decoration:none;background:var(--card);color:var(--text);animation:fadeIn .3s ease}.result-card:hover{background:#f5f5f5}.result-img{width:80px;height:60px;object-fit:cover;border-radius:6px}.result-content{flex:1}.result-title{font-weight:600;font-size:16px;color:var(--primary)}.result-desc{font-size:13px;color:#555}.result-date{font-size:12px;color:#999}.search-banner-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:15px}.search-banner-card{display:block;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:.3s ease;text-decoration:none;background:#fff}.search-banner-card:hover{transform:translateY(-6px);box-shadow:0 10px 25px rgba(0,0,0,.2)}.search-banner-img{position:relative;height:200px;overflow:hidden}.search-banner-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.search-banner-card:hover img{transform:scale(1.1)}.search-banner-overlay{position:absolute;bottom:0;width:100%;padding:12px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}.search-banner-overlay h3{color:#fff;font-size:15px;margin:0;line-height:1.3}mark{background:#ffeb3b;padding:0 3px;border-radius:2px}.search-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:var(--primary);color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:.3s}.search-btn:hover{background:#3f51b5}.recent-box{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.recent-item{background:#eee;padding:6px 10px;border-radius:20px;font-size:13px;cursor:pointer;transition:.2s}.recent-item:hover{background:var(--primary);color:#fff}.search-banner-card-wrap{position:relative}.remove-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:14px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:.2s}.remove-btn:hover{background:red}@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.search-banner-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.search-banner-list{grid-template-columns:1fr}.search-banner-img{height:170px}.search-banner-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:15px}}