/* Thành phần chung cho trang hội viên / xếp hạng / giải đấu (dùng kèm style.css + pages.css) */
.c-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.c-tab { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font: 600 .95rem var(--font-body); padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.c-tab:hover { color: #fff; }
.c-tab.is-on { color: var(--orange-2); border-color: var(--orange); }
.c-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.c-chip { border: 1.5px solid var(--line); background: #111; color: #ddd; font: 600 .85rem var(--font-body); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.c-chip:hover { border-color: var(--orange); }
.c-chip.is-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.c-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.c-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.c-table th { text-align: left; font: 600 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.c-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.c-table tr:last-child td { border-bottom: 0; }
.c-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.c-table a { color: #fff; text-decoration: none; font-weight: 600; }
.c-table a:hover { color: var(--orange-2); }
.c-table tr.is-me td { background: rgba(255,106,19,.14); }
.c-table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.c-tier { display: inline-block; font: 700 .72rem var(--font-head); letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; background: #262626; color: #fff; border: 1px solid #3a3a3a; }
.c-medal { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 .85rem var(--font-head); color: #1a1714; background: #444; }
.c-medal--1 { background: linear-gradient(135deg, #ffe27a, #d9a21b); }
.c-medal--2 { background: linear-gradient(135deg, #f1f1f1, #a9adb3); }
.c-medal--3 { background: linear-gradient(135deg, #f0b27a, #b0682a); }
.c-note { color: var(--muted); font-size: .88rem; }
.c-alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; border: 1px solid var(--orange); background: rgba(255,106,19,.12); }
.c-alert--ok { border-color: #2fa86a; background: rgba(47,168,106,.14); }
.c-alert--err { border-color: #e5484d; background: rgba(229,72,77,.12); }
.c-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.c-cert { background: linear-gradient(160deg, #221a14, #151515); border: 1px solid #3a2a1c; border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; align-content: start; }
.c-cert__type { font: 700 1.05rem var(--font-head); text-transform: uppercase; color: var(--orange-2); }
.c-cert__code { font: 600 .85rem monospace; color: var(--muted); }
.c-cert__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.c-h { font-size: 1.15rem; text-transform: uppercase; margin: 28px 0 12px; }
@media (max-width: 480px) { .c-tab { padding: 9px 10px; font-size: .88rem; } .c-table th, .c-table td { padding: 9px 10px; } }