/* Sections */
.sec{padding:54px 0 10px}
.sec h2{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:600;margin-bottom:22px;flex-wrap:wrap}
.ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(46,123,255,.16);border:1px solid var(--line2);font-size:20px}
.ico.hot{background:rgba(255,46,77,.14);border-color:rgba(255,46,77,.4)}
.sec h2 small{font-size:14px;color:var(--dim);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s;display:block}
.card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 18px 44px -14px rgba(2,6,20,.9),0 0 30px -8px rgba(46,123,255,.4)}
.thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#102a6b,#1c1b45 55%,#3a1233);display:grid;place-items:center;color:var(--dim);font-size:13px;position:relative}
.rank{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:'Chakra Petch',sans-serif;font-weight:700;background:rgba(4,6,15,.75);border:1px solid var(--line2)}
.rank.r1{background:linear-gradient(135deg,#FFD874,#E09B12);color:#3b2600;border:0}
.rank.r2{background:linear-gradient(135deg,#F2F6FF,#8FA3C4);color:#1a2333;border:0}
.rank.r3{background:linear-gradient(135deg,#F0B27A,#96551F);color:#2a1200;border:0}
.badge{position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:999px;background:var(--hot);font-size:12px;font-weight:600}
.info{padding:14px 16px 16px}
.info h3{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;justify-content:space-between;margin-top:8px;color:var(--dim);font-size:13px}
.meta .h{color:#FF6B80}

/* Pager */
.pager{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:36px 0 10px}
.pager a{min-width:42px;height:42px;padding:0 12px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-weight:500;transition:.2s}
.pager a:hover{border-color:var(--cyan)}
.pager a.on{background:var(--grad);color:#04112e;border:0}