:root{--abc-sticky-offset:90px}

@media(min-width:769px){
  .abc-sticky{
    position:sticky;
    top:var(--abc-sticky-offset);
    z-index:50;
    background:#fff;
    padding:20px 0;
    margin-bottom:30px;
  }
}
@media(max-width:768px){.abc-sticky{position:static}}

.abc-search input{width:100%;padding:12px;border-radius:30px;border:1px solid #ddd;margin-bottom:15px}

.abc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.abc-tag{padding:4px 10px;font-size:12px;border-radius:14px;background:#eee;border:none;cursor:pointer}

.abc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:1024px){.abc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.abc-cards{grid-template-columns:1fr}}

.abc-post{border:1px solid #ddd;background:#fff;display:flex;flex-direction:column}

.abc-thumb{position:relative}
.abc-thumb img{width:100%;height:200px;object-fit:cover}
.abc-thumb-link{display:block}

.abc-cat-label{position:absolute;top:12px;left:12px;background:#000;color:#fff;font-size:12px;padding:6px 10px;border-radius:4px}

.abc-body{padding:16px;display:flex;flex-direction:column;flex:1}

.abc-title a{color:#000;text-decoration:none}
.abc-title a:hover{text-decoration:underline}

.abc-meta{font-size:12px;color:#666;display:flex;gap:12px;margin-bottom:10px}

.abc-readmore{margin-top:15px;background:#019b44;color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;text-decoration:none;align-self:flex-start}

.abc-dropdown{position:relative}
.abc-dropdown-toggle{padding:10px 18px;min-width:200px;border-radius:30px;border:1px solid #ddd;background:#fff;cursor:pointer}
.abc-dropdown-menu{position:absolute;top:110%;left:0;min-width:250px;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:8px;display:none;z-index:10}
.abc-dropdown.open .abc-dropdown-menu{display:block}

.abc-load-more{margin:40px auto;display:block;padding:14px 30px;background:#222;color:#fff;border-radius:30px;border:none;cursor:pointer}