.hero{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .hero-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative} .hero-title{text-transform: uppercase;width:100%;margin-top:50px;font-family:"Julius Sans One";font-size:clamp(28px,3.3vw,44px);font-weight:700;line-height:1.2;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .hero-intro{padding:0 10px;margin-top:20px;font-size:var(--font-size-5);font-weight:300;line-height:1.3;color:#d9f7ff} .hero-footer{ width:100%;height:auto;position:relative;margin-top:-30px;user-select:none;pointer-events:none;} .hero-footer img{width:100%;z-index:1;user-select:none;pointer-events:none;} @media (min-width :768px){ .hero-title{margin-top:80px;font-size:clamp(32px,4.5vw,44px);line-height:1.1;} .hero-intro{padding:0 50px;line-height:1.5;} } @media (min-width :992px){ .hero-intro{padding:0 80px;} } .filter { margin-bottom: 30px;} .filter-form { width: 100%;} .filter-row { display: flex;flex-wrap: wrap;align-items: stretch;gap: 12px;} .filter-item { display: flex;align-items: center;flex: 1;min-width: 140px;} .filter-item .form-select, .filter-item .form-input { height: 45px;padding: 0 30px 0 15px;font-size: var(--font-size-3);color: #333;background: #fff;border: 1px solid #ddd;border-radius: 5px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;width: 100%;min-width: 0;flex: 1;} .filter-item .form-select:hover, .filter-item .form-select:focus, .filter-item .form-input:hover, .filter-item .form-input:focus { border-color: var(--color-main);outline: none;} .filter-item.filter-keyword { flex: 1;} .filter-item .form-input { background-image: none;cursor: text;} .filter-item .form-select option { font-size: var(--font-size-3);padding: 8px;} .filter-group { display: flex;align-items: stretch;gap: 15px;flex: 1;} .filter-group .form-input { flex: 1;} .filter-group .search-button { height: 45px;padding: 0 20px;font-size: var(--font-size-3);border: none;border-radius: 5px;cursor: pointer;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;gap: 8px;transition: background-color 0.3s ease;color: #fff;background-color: #5a32ff;} .filter-group .search-button .iconfont { font-size: var(--font-size-5);} @media (max-width: 768px) { .filter-row { flex-direction: column;align-items: stretch;} .filter-item, .filter-item .form-select { width: 100%;} .filter-group { flex-direction: row;width: 100%;} .filter-group .form-input { flex: 1;min-width: 0;} } .heading-title{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:var(--font-size-8);color:var(--color-main);padding:0 0 var(--gap) 0;margin-bottom:var(--gap);} .tag-list{width:100%;display:grid;grid-template-columns:repeat(1, 1fr);gap:var(--gap);} @media (min-width:768px){ .tag-list{grid-template-columns:repeat(2, 1fr);} } @media (min-width:992px){ .tag-list{grid-template-columns:repeat(3, 1fr);} } .tag-list .tag-item{ width:100%;height:auto;overflow:hidden;border-radius:5px;border:1px solid #DDD;background:#fff;box-shadow:var(--shadow-main);color:#333;text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease;} .tag-list .tag-item:hover{ box-shadow:0 8px 20px -8px rgba(90,50,180,.45);transform:translateY(-2px);} .tag-list .tag-item .item-image-wrap{ width:100%;max-height:200px;overflow:hidden;background:#fafafa;display:flex;align-items:center;justify-content:center;} .tag-list .tag-item .item-image{ width:100%;height:auto;max-height:200px;object-fit:cover;display:block;transition:transform 1s ease;} .tag-list .tag-item:hover .item-image{transform:scale(1.08);} .tag-list .tag-item .item-title{ width:100%;min-height:0;font-size:var(--font-size-4);font-weight:400;line-height:1.5;color:inherit;margin:0;padding:15px 15px 10px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;} .related-tags{padding-bottom:10px} .related-title{font-size:var(--font-size-7);color:var(--color-main);padding:0 0 10px 0;} .pagination { display: flex;padding-left: 0;list-style: none;margin: 0;gap: 5px;} .page-link { position: relative;display: block;padding: 6px 12px;font-size: 16px;color: var(--color-main, #0b2239);text-decoration: none;background-color: #fff;border: 1px solid #d5dee8;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;} @media (prefers-reduced-motion: reduce) { .page-link { transition: none;} } .page-link:hover { z-index: 2;color: var(--color-main, #0b2239);background-color: #f5f7fa;border-color: #d5dee8;} .page-link:focus { z-index: 3;color: var(--color-main, #0b2239);background-color: #fff;outline: 0;box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);} .page-link.active, .active > .page-link { z-index: 3;color: #fff;background-color: var(--color-button, #0d6efd);border-color: var(--color-button, #0d6efd);} .page-link.disabled, .disabled > .page-link { color: #8a97a6;pointer-events: none;background-color: #f1f4f7;border-color: #d5dee8;} .page-item{ min-width: 40px;display: flex;} .page-item > .page-link{ width: 100%;text-align: center;} .page-item:not(:first-child) .page-link { margin-left: -1px;} .page-item:first-child .page-link { border-top-left-radius: 4px;border-bottom-left-radius: 4px;} .page-item:last-child .page-link { border-top-right-radius: 4px;border-bottom-right-radius: 4px;} #pagination{ margin-top: 20px;display: flex;justify-content: flex-end;align-items: center;}