:root {
    --bg: #0a0a0a;
    --bg-soft: #131313;
    --red: #e6141f;
    --red-glow: #ff2a2a;
    --white: #f5f5f5;
    --gray: #9a9a9a;
    --border: #2a2a2a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: radial-gradient(circle at 50% -10%, #1a0505 0%, var(--bg) 55%);
    color: var(--white);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}
:where(html[data-theme="light"]) body:not(.admin-body) { background: radial-gradient(circle at 50% -10%, #fae6e6 0%, var(--bg) 55%); }

a { color: inherit; text-decoration: none; }

/* HEADER */
.site-header {
    background: rgba(10,10,10,0.9);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(6px);
}
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: 1px; }
.brand-logo { width: 30px; height: 27px; filter: drop-shadow(0 0 6px var(--red-glow)); }
.brand-logo-img { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.brand strong { color: var(--red); }
.main-nav { display: flex; align-items: center; gap: 18px; }
.main-nav a { font-size: 14px; color: var(--gray); transition: color .2s; }
.main-nav a:hover { color: var(--white); }
.nav-user { font-size: 14px; color: var(--gray); }
.nav-user-link { display: flex; align-items: center; gap: 8px; color: var(--white) !important; font-size: 14px; }
.avatar-mini { width: 26px; height: 26px; font-size: 12px; margin-right: 0; }
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--white);
    font-size: 20px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-outline, .btn-solid {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--red);
}
.btn-outline { color: var(--white) !important; }
.btn-outline:hover { background: rgba(230,20,31,0.15); }
.btn-solid {
    background: linear-gradient(135deg, var(--red), #a30d15);
    color: #fff !important;
    box-shadow: 0 0 14px rgba(230,20,31,0.5);
}
.btn-solid:hover { filter: brightness(1.15); }

/* HERO */
.hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 20px 40px;
    text-align: center;
}
.hero-logo { width: 130px; margin-bottom: 20px; filter: drop-shadow(0 0 20px var(--red-glow)); }
.hero-logo-img { width: auto; max-width: 220px; height: auto; max-height: 100px; }
.hero h1 {
    font-size: 40px;
    margin: 0 0 10px;
    letter-spacing: 2px;
}
.hero h1 span { color: var(--red); }
.hero p { color: var(--gray); font-size: 17px; max-width: 600px; margin: 0 auto 26px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; }

/* STATS */
.stats {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.stat-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    border-radius: 10px;
    text-align: center;
    padding: 24px 10px;
}
.stat-card .num { font-size: 32px; font-weight: 700; color: var(--red); }
.stat-card .label { color: var(--gray); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* SECTIONS */
.section { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.section h2 { border-left: 4px solid var(--red); padding-left: 12px; font-size: 24px; margin-bottom: 24px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.feature-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}
.feature-card h3 { margin-top: 0; color: var(--red); font-size: 17px; }
.feature-card p { color: var(--gray); font-size: 14px; margin-bottom: 0; }

/* FORMS */
.form-wrap {
    max-width: 420px;
    margin: 60px auto;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    border-radius: 12px;
    padding: 32px;
}
.form-wrap h1 { text-align: center; font-size: 24px; margin-top: 0; }
.form-wrap .sub { text-align: center; color: var(--gray); font-size: 13px; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--gray); margin-bottom: 6px; }
.field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #1c1c1c;
    color: var(--white);
    font-size: 14px;
}
:where(html[data-theme="light"] body:not(.admin-body)) .field input { background: #ffffff; }
.field input:focus { outline: none; border-color: var(--red); }
.form-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--red), #a30d15);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(230,20,31,0.5);
}
.form-submit:hover { filter: brightness(1.1); }
.form-alt { text-align: center; margin-top: 16px; font-size: 13px; color: var(--gray); }
.form-alt a { color: var(--red); font-weight: 600; }

.alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}
.alert-error { background: rgba(230,20,31,0.15); border: 1px solid var(--red); color: #ff9797; }
:where(html[data-theme="light"] body:not(.admin-body)) .alert-error { color: #b91c1c; }
.alert-success { background: rgba(30,180,90,0.15); border: 1px solid #1eb45a; color: #7cf0a8; }
:where(html[data-theme="light"] body:not(.admin-body)) .alert-success { color: #15803d; }

/* MEMBERS TABLE */
.members-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.members-search-input { padding: 8px 12px; border-radius: 6px; border: 1px solid #2a2a2a; background: #1c1c1c; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .members-search-input { border: 1px solid #e5e7eb; background: #ffffff; color: #111827; }
.members-count { color: var(--gray); font-size: 14px; }
table.members-table { width: 100%; border-collapse: collapse; background: var(--bg-soft); border-radius: 10px; overflow: hidden; }
table.members-table th, table.members-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
table.members-table th { color: var(--red); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
table.members-table tr:hover td { background: rgba(230,20,31,0.06); }
.avatar-circle {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #4a0508);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; margin-right: 10px; font-size: 14px;
    vertical-align: middle;
    flex-shrink: 0;
}
.member-link { display: inline-flex; align-items: center; color: var(--white) !important; font-weight: 600; }
.badge-role {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(230,20,31,0.2);
    color: #ff8f8f;
    text-transform: uppercase;
    white-space: nowrap;
}
:where(html[data-theme="light"] body:not(.admin-body)) .badge-role { color: #b80000; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }
.table-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* FOOTER */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 40px;
    padding: 26px 20px;
    text-align: center;
}
.footer-inner p { margin: 4px 0; font-size: 13px; }
.muted { color: var(--gray); }

/* ================= NEWS ================= */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.news-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: block;
    transition: transform .15s, border-color .15s;
}
.news-card:hover { transform: translateY(-3px); border-color: var(--red); }
.news-thumb { height: 150px; background-size: cover; background-position: center; background-color: #1c1c1c; }
:where(html[data-theme="light"] body:not(.admin-body)) .news-thumb { background-color: #ffffff; }
.news-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--red); font-weight: 700; letter-spacing: 2px; font-size: 14px;
    background: linear-gradient(135deg, #1c1c1c, #2a0505);
}
:where(html[data-theme="light"] body:not(.admin-body)) .news-thumb-placeholder { background: linear-gradient(135deg, #ffffff, #fae6e6); }
.news-card-body { padding: 16px; }
.news-card-body h3 { margin: 0 0 8px; font-size: 16px; color: var(--white); }
.news-card-body p { margin: 0 0 12px; font-size: 13px; color: var(--gray); }
.news-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); }
.news-detail-image { width: 100%; max-width: 100%; border-radius: 12px; margin-bottom: 20px; display: block; }
.news-content { font-size: 15px; line-height: 1.8; color: #e0e0e0; }
:where(html[data-theme="light"] body:not(.admin-body)) .news-content { color: #111827; }
.admin-inline-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.admin-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.current-image-preview { margin-top: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.current-image-preview img { width: 90px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.remove-image-label { font-size: 13px; color: var(--gray); display: flex; align-items: center; gap: 6px; }

/* ================= BADGES ================= */
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: color-mix(in srgb, var(--badge-color, var(--red)) 18%, #000);
    border: 1px solid var(--badge-color, var(--red));
    color: #fff;
}
:where(html[data-theme="light"] body:not(.admin-body)) .badge-chip { background: color-mix(in srgb, var(--badge-color, var(--red)) 18%, #f3f4f6); }
.badge-chip-sm { padding: 2px 6px; font-size: 14px; border-radius: 50%; }
.badge-icon { font-size: 14px; }
.badge-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.badge-manage-item { background: #1c1c1c; border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .badge-manage-item { background: #ffffff; }
.badge-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.badge-checkbox-item { display: flex; align-items: center; gap: 8px; background: #1c1c1c; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .badge-checkbox-item { background: #ffffff; }
.badge-checkbox-item input { accent-color: var(--red); }

/* ================= PROFILE PAGE ================= */
.profile-page { max-width: 1000px; }
.profile-cover {
    height: 130px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(120deg, #3a3a3a, #1a1a1a);
    position: relative;
}
:where(html[data-theme="light"] body:not(.admin-body)) .profile-cover { background: linear-gradient(120deg, #e5e7eb, #ffffff); }
.profile-avatar-wrap { position: absolute; left: 30px; bottom: -40px; }
.profile-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; font-weight: 700; color: #fff;
    border: 4px solid var(--bg);
}
:where(html[data-theme="light"] body:not(.admin-body)) .profile-avatar { color: #111827; }
.profile-main { background: var(--bg-soft); border: 1px solid var(--border); border-top: none; border-radius: 0 0 16px 16px; padding: 56px 30px 30px; }
.profile-name { margin: 0 0 10px; font-size: 26px; }
.profile-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; font-size: 13px; }
.rank-pill { padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 1px solid; }

.rank-progress-wrap { margin-bottom: 26px; }
.rank-progress-bar { height: 10px; border-radius: 20px; background: #1c1c1c; overflow: hidden; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .rank-progress-bar { background: #ffffff; }
.rank-progress-fill { height: 100%; border-radius: 20px; transition: width .4s; }
.rank-progress-label { font-size: 12px; color: var(--gray); margin-top: 8px; }

.profile-card { background: #161616; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
:where(html[data-theme="light"] body:not(.admin-body)) .profile-card { background: #ffffff; }
.profile-card h2 { font-size: 15px; color: var(--red); margin: 0 0 12px; }
.profile-card textarea {
    width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border);
    background: #1c1c1c; color: var(--white); font-size: 14px; font-family: inherit; resize: vertical;
}
:where(html[data-theme="light"] body:not(.admin-body)) .profile-card textarea { background: #ffffff; }

.badge-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 14px; }
.badge-showcase-item { text-align: center; background: #1c1c1c; border: 1px solid var(--badge-color, var(--border)); border-radius: 10px; padding: 14px 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .badge-showcase-item { background: #ffffff; }
.badge-showcase-icon { font-size: 28px; margin-bottom: 6px; filter: drop-shadow(0 0 6px var(--badge-color, var(--red))); }
.badge-showcase-name { font-size: 11px; color: var(--gray); }

/* --- Rank tiers: màu sắc & hiệu ứng riêng theo nhóm cấp bậc (Đồng → Chiến Thần) --- */
.rank-unranked    { --r1: #8a8a8a; --r2: #3f3f3f; --glow: rgba(138,138,138,0); }
.rank-bronze      { --r1: #d49a6a; --r2: #7a4a1c; --glow: rgba(212,154,106,.35); }
.rank-silver      { --r1: #e3e9f0; --r2: #7d8a9c; --glow: rgba(227,233,240,.35); }
.rank-gold        { --r1: #ffd76a; --r2: #b8860b; --glow: rgba(255,215,106,.45); }
.rank-platinum    { --r1: #6ee7d8; --r2: #1f7f86; --glow: rgba(110,231,216,.45); }
.rank-diamond     { --r1: #8fd8ff; --r2: #5b5ff0; --glow: rgba(143,216,255,.5); }
.rank-master      { --r1: #d19bff; --r2: #7e22ce; --glow: rgba(209,155,255,.5); }
.rank-champion    { --r1: #ff7a93; --r2: #be123c; --glow: rgba(255,122,147,.55); }
.rank-grandmaster { --r1: #ffb347; --r2: #e8590c; --r3: #ffe066; --glow: rgba(255,179,71,.6); }
.rank-dominator   { --r1: #ff4d4d; --r2: #7f1d1d; --r3: #ff9f43; --glow: rgba(255,77,77,.6); }
.rank-supreme     { --r1: #fff3b0; --r2: #f59e0b; --r3: #ffffff; --r4: #fbbf24; --glow: rgba(255,230,120,.7); }
.rank-godofwar    { --r1: #ff3d3d; --r2: #ffcf3d; --r3: #3dd1ff; --r4: #a970ff; --glow: rgba(255,255,255,.6); }

/* Nhãn hạng */
.rank-pill { color: var(--r1, #ccc); border-color: var(--r1, #555); box-shadow: 0 0 10px var(--glow, transparent); white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .rank-pill { color: var(--r1, #374151); border-color: var(--r1, #d1d5db); }
.rank-pill-sm { padding: 2px 9px; font-size: 11px; }
.rank-pill.rank-unranked { box-shadow: none; }
.rank-pill.rank-master, .rank-pill.rank-champion {
    color: #fff; background: linear-gradient(90deg, var(--r1), var(--r2));
}
:where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-master, :where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-champion { color: #111827; }
.rank-pill.rank-grandmaster, .rank-pill.rank-dominator {
    color: #fff; border: none; background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r1));
    background-size: 300% 100%; animation: rankShift 4s linear infinite;
}
:where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-grandmaster, :where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-dominator { color: #111827; }
.rank-pill.rank-supreme, .rank-pill.rank-godofwar {
    color: #1a1a1a; border: none;
    background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r1));
    background-size: 300% 100%; animation: rankShift 3s linear infinite, rankPulse 2s ease-in-out infinite;
}
.rank-pill.rank-godofwar { color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.6); }
:where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-godofwar { color: #111827; text-shadow: 0 0 6px rgba(0,0,0,0.18); }

/* Ảnh bìa hồ sơ */
.profile-cover[class*="rank-"] { background: linear-gradient(120deg, var(--r1), var(--r2)); box-shadow: 0 0 30px var(--glow, transparent); }
.profile-cover.rank-grandmaster, .profile-cover.rank-dominator,
.profile-cover.rank-supreme, .profile-cover.rank-godofwar {
    background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4, var(--r1)), var(--r1));
    background-size: 300% 100%; animation: rankShift 5s linear infinite;
}

/* Thanh tiến trình */
.rank-progress-fill[class*="rank-"] { background: linear-gradient(90deg, var(--r2), var(--r1)); box-shadow: 0 0 8px var(--glow, transparent); }
.rank-progress-fill.rank-grandmaster, .rank-progress-fill.rank-dominator,
.rank-progress-fill.rank-supreme, .rank-progress-fill.rank-godofwar {
    background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4, var(--r1)), var(--r1));
    background-size: 300% 100%; animation: rankShift 3s linear infinite;
}

@keyframes rankPulse {
    0%, 100% { box-shadow: 0 0 8px var(--glow); }
    50% { box-shadow: 0 0 20px var(--glow); }
}

@keyframes rankShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ================= CHAT MODULE (kiểu Zalo) ================= */
.chat-page { max-width: 820px; }
.chat-box {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(230,20,31,.14), transparent 70%); }
.chat-head-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(230,20,31,.18); border: 1px solid rgba(230,20,31,.45); }
.chat-head-title { font-weight: 700; font-size: 15px; }
.chat-head-sub { font-size: 12px; color: var(--gray); }
.chat-messages {
    height: 520px;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: auto;
}
.chat-empty { text-align: center; color: var(--gray); padding: 30px 10px; margin: auto; font-size: 14px; }
.cm-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: #777; font-size: 11px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-day { color: #6b7280; }
.cm-day::before, .cm-day::after { content: ""; flex: 1; height: 1px; background: #242424; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-day::before, :where(html[data-theme="light"] body:not(.admin-body)) .cm-day::after { background: #f3f4f6; }
.cm-day span { background: #1a1a1a; border: 1px solid #262626; border-radius: 20px; padding: 2px 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-day span { background: #ffffff; border: 1px solid #f3f4f6; }

.cm-row { display: flex; align-items: flex-end; gap: 8px; position: relative; margin-top: 10px; }
.cm-row.cm-cont { margin-top: 2px; }
.cm-me { justify-content: flex-end; }
.cm-col { display: flex; flex-direction: column; max-width: min(72%, 520px); min-width: 0; }
.cm-me .cm-col { align-items: flex-end; }
.cm-avatar, .cm-avatar-space { width: 32px; height: 32px; flex-shrink: 0; }
.cm-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-avatar { color: #111827; }
.cm-avatar-link { flex-shrink: 0; line-height: 0; }
.cm-name { font-size: 11px; color: var(--gray); margin: 0 0 3px 4px; display: flex; align-items: center; gap: 6px; }
.cm-name .badge-role { font-size: 9px; padding: 1px 6px; }
.cm-bubble {
    position: relative;
    background: #1f1f1f; border: 1px solid #2a2a2a;
    color: #f0f0f0; font-size: 14px; line-height: 1.45;
    padding: 7px 12px; border-radius: 16px;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
:where(html[data-theme="light"] body:not(.admin-body)) .cm-bubble { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
.cm-other .cm-bubble { border-top-left-radius: 16px; }
.cm-other.cm-cont .cm-bubble { border-top-left-radius: 6px; }
.cm-other:not(.cm-last) .cm-bubble { border-bottom-left-radius: 6px; }
.cm-me .cm-bubble { background: linear-gradient(135deg, #c3111b, #8e0b12); border-color: #d0141f; color: #fff; }
.cm-me.cm-cont .cm-bubble { border-top-right-radius: 6px; }
.cm-me:not(.cm-last) .cm-bubble { border-bottom-right-radius: 6px; }
.cm-bubble a { color: inherit; text-decoration: underline; }
.cm-bubble.cm-emoji { background: none !important; border: none !important; font-size: 34px; line-height: 1.15; padding: 0 2px; }
.cm-time { display: block; font-size: 10px; color: rgba(255,255,255,.45); margin-top: 3px; text-align: right; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-time { color: rgba(17,24,39,0.45); }
.cm-other .cm-time { color: #777; text-align: left; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-other .cm-time { color: #6b7280; }
.cm-emoji .cm-time { font-size: 10px; color: #777; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-emoji .cm-time { color: #6b7280; }
.cm-pending .cm-bubble { opacity: .6; }
.cm-failed .cm-bubble { background: #3a1212 !important; border-color: #b91c1c !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-failed .cm-bubble { background: #f8e8e8 !important; }
.cm-del {
    align-self: center; background: none; border: none; color: #666; cursor: pointer;
    font-size: 14px; padding: 4px 6px; opacity: 0; transition: opacity .15s;
}
:where(html[data-theme="light"] body:not(.admin-body)) .cm-del { color: #6b7280; }
.cm-me .cm-del { order: -1; }
.cm-row:hover .cm-del, .cm-del:focus { opacity: 1; }
.cm-del:hover { color: var(--red); }
@media (hover: none) { .cm-del { opacity: .5; } }

.chat-new-pill {
    position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
    background: var(--red); color: #fff; border: none; border-radius: 20px; padding: 6px 14px;
    font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5); z-index: 3;
}
:where(html[data-theme="light"] body:not(.admin-body)) .chat-new-pill { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: #111; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-form { background: #ffffff; }
.chat-form textarea {
    flex: 1; resize: none; min-height: 40px; max-height: 120px;
    padding: 10px 14px; border-radius: 20px; border: 1px solid var(--border);
    background: #1c1c1c; color: var(--white); font-size: 14px; font-family: inherit; line-height: 1.4;
}
:where(html[data-theme="light"] body:not(.admin-body)) .chat-form textarea { background: #ffffff; }
.chat-form textarea:focus { outline: none; border-color: var(--red); }
.chat-icon-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: #1c1c1c; font-size: 20px; cursor: pointer; line-height: 1; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-icon-btn { background: #ffffff; }
.chat-icon-btn:hover { border-color: var(--red); }
.chat-send { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer; color: #fff; font-size: 16px; background: linear-gradient(135deg, var(--red), #a30d15); box-shadow: 0 0 12px rgba(230,20,31,.45); }
.chat-send:hover { filter: brightness(1.15); }

.emoji-panel { border-top: 1px solid var(--border); background: #141414; }
:where(html[data-theme="light"] body:not(.admin-body)) .emoji-panel { background: #ffffff; }
.emoji-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .emoji-tabs { border-bottom: 1px solid #f3f4f6; }
.emoji-tab { background: none; border: none; border-bottom: 2px solid transparent; font-size: 18px; padding: 6px 10px; cursor: pointer; opacity: .6; }
.emoji-tab.active { opacity: 1; border-bottom-color: var(--red); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; padding: 8px; max-height: 190px; overflow-y: auto; }
.emoji-btn { background: none; border: none; border-radius: 8px; font-size: 22px; padding: 4px 0; cursor: pointer; line-height: 1.3; }
.emoji-btn:hover { background: #262626; }
:where(html[data-theme="light"] body:not(.admin-body)) .emoji-btn:hover { background: #f3f4f6; }
.emoji-empty { grid-column: 1 / -1; color: var(--gray); font-size: 12px; text-align: center; margin: 12px 0; }

/* ================= MODULE MANAGER ================= */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.module-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.module-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.module-card-head h3 { margin: 0; font-size: 15px; }
.module-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.module-status { font-size: 12px; font-weight: 600; }
.module-status-on { color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .module-status-on { color: #15803d; }
.module-status-off { color: #888; }
:where(html[data-theme="light"] body:not(.admin-body)) .module-status-off { color: #6b7280; }

.module-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.module-toggle input { opacity: 0; width: 0; height: 0; }
.module-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #333; border-radius: 24px; transition: .2s;
}
:where(html[data-theme="light"] body:not(.admin-body)) .module-toggle-slider { background: #e5e7eb; }
.module-toggle-slider::before {
    content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: .2s;
}
.module-toggle input:checked + .module-toggle-slider { background: var(--red); }
.module-toggle input:checked + .module-toggle-slider::before { transform: translateX(18px); }

/* ================= ADMIN PANEL ================= */
.admin-body { background: var(--bg); }
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
    padding: 24px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.admin-brand { display: block; font-size: 18px; letter-spacing: 1px; margin-bottom: 4px; }
.admin-brand strong { color: var(--red); }
.admin-role-tag {
    display: inline-block;
    font-size: 11px;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: 20px;
    padding: 2px 10px;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav a {
    color: var(--gray);
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    transition: all .15s;
}
.admin-nav a:hover { background: rgba(230,20,31,0.1); color: var(--white); }
.admin-nav a.active { background: linear-gradient(135deg, var(--red), #a30d15); color: #fff; font-weight: 600; }
.admin-nav-sep { height: 1px; background: var(--border); margin: 12px 0; }

.admin-main { flex: 1; padding: 30px 40px; max-width: 1000px; }
.admin-topbar { color: var(--gray); font-size: 14px; margin-bottom: 24px; }
.admin-main h1 { margin: 0 0 6px; font-size: 26px; }
.admin-sub { color: var(--gray); font-size: 14px; margin-bottom: 24px; }

.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.admin-stat-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
}
.admin-stat-card .num { font-size: 26px; font-weight: 700; color: var(--red); }
.admin-stat-card .label { font-size: 12px; color: var(--gray); text-transform: uppercase; }

.admin-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.admin-card h2 { font-size: 16px; color: var(--red); margin: 0 0 16px; }
.admin-card textarea, .admin-card input[type=text] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #1c1c1c;
    color: var(--white);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
:where(html[data-theme="light"] body:not(.admin-body)) .admin-card textarea, :where(html[data-theme="light"] body:not(.admin-body)) .admin-card input[type=text] { background: #ffffff; }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.admin-quicklinks { display: flex; gap: 14px; flex-wrap: wrap; }

.role-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #1c1c1c;
    color: var(--white);
    font-size: 13px;
}
:where(html[data-theme="light"] body:not(.admin-body)) .role-select { background: #ffffff; }
.btn-danger {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #b91c1c;
    background: rgba(185,28,28,0.15);
    color: #ff9797;
    font-size: 13px;
    cursor: pointer;
}
:where(html[data-theme="light"] body:not(.admin-body)) .btn-danger { color: #b91c1c; }
.btn-danger:hover { background: rgba(185,28,28,0.3); }

@media (max-width: 900px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: static; padding: 16px; }
    .admin-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 4px; }
    .admin-nav a { white-space: nowrap; }
    .admin-nav-sep { display: none; }
    .admin-stats, .admin-grid-3 { grid-template-columns: 1fr; }
    .admin-main { padding: 20px; max-width: 100%; }
}

/* ============ TỐI ƯU DI ĐỘNG TOÀN SITE ============ */
@media (max-width: 780px) {
    .header-inner { padding: 12px 16px; position: relative; }
    .nav-toggle { display: block; }
    .main-nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--bg-soft);
        border-bottom: 1px solid var(--border);
        padding: 14px 16px;
        z-index: 20;
    }
    .main-nav.open { display: flex; }
    .main-nav a, .main-nav .nav-user-link { width: 100%; padding: 10px 4px; }
    .btn-outline, .btn-solid { text-align: center; }

    .hero { padding: 40px 16px 30px; }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 15px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-logo { width: 90px; }

    .stats { grid-template-columns: 1fr; padding: 16px; }
    .section { padding: 26px 16px; }
    .section h2 { font-size: 20px; }

    .form-wrap { margin: 30px auto; padding: 22px; width: calc(100% - 24px); }

    .members-toolbar { flex-direction: column; align-items: stretch; }
    .members-toolbar form { width: 100%; }
    .members-toolbar input { flex: 1; }

    .news-grid { grid-template-columns: 1fr; }
    .admin-header-row { flex-direction: column; align-items: stretch; }
    .admin-header-row a.btn-solid { text-align: center; }

    .profile-avatar-wrap { left: 16px; bottom: -34px; }
    .profile-avatar { width: 74px; height: 74px; font-size: 28px; }
    .profile-main { padding: 46px 16px 20px; }
    .profile-cover { height: 100px; }
    .profile-name { font-size: 21px; }

    .badge-manage-grid, .badge-checkbox-grid, .badge-showcase { grid-template-columns: repeat(2, 1fr); }
    .chat-messages { height: calc(100vh - 290px); min-height: 320px; padding: 10px; }
    .cm-col { max-width: 80%; }
    .chat-page { padding-left: 8px; padding-right: 8px; }
    .module-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .brand span { font-size: 16px; }
    .brand-logo { width: 24px; height: 22px; }
    .hero h1 { font-size: 22px; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .badge-manage-grid, .badge-checkbox-grid, .badge-showcase { grid-template-columns: 1fr 1fr; }
}

img { max-width: 100%; height: auto; }

/* ================= HỒ SƠ MỞ RỘNG ================= */
img.avatar-img { object-fit: cover; padding: 0; background: #1c1c1c; }
:where(html[data-theme="light"] body:not(.admin-body)) img.avatar-img { background: #ffffff; }
img.avatar-circle { display: inline-block; }
.profile-avatar.avatar-img { display: block; }
.profile-avatar-sm { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; flex-shrink: 0; border: 2px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .profile-avatar-sm { color: #111827; }

.profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.profile-head-info { min-width: 0; flex: 1; }
.profile-head-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }

/* Nút thả tim */
.heart-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 30px; cursor: pointer;
    background: #1c1c1c; border: 1px solid #3a2a2c; color: var(--white);
    font-size: 16px; font-weight: 700; font-family: inherit;
    transition: background .2s, border-color .2s, transform .1s;
}
:where(html[data-theme="light"] body:not(.admin-body)) .heart-btn { background: #ffffff; border: 1px solid #d4c4c6; }
.heart-btn:hover { border-color: #ff4d6d; background: rgba(255,77,109,.1); }
.heart-btn:active { transform: scale(.95); }
.heart-btn .heart-icon { font-size: 20px; line-height: 1; color: #ff4d6d; }
:where(html[data-theme="light"] body:not(.admin-body)) .heart-btn .heart-icon { color: #be123c; }
.heart-btn.is-hearted { background: linear-gradient(135deg, #ff4d6d, #c9184a); border-color: #ff4d6d; box-shadow: 0 0 14px rgba(255,77,109,.5); }
.heart-btn.is-hearted .heart-icon { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .heart-btn.is-hearted .heart-icon { color: #111827; }
.heart-btn-static { cursor: default; }
.heart-btn.pop .heart-icon { animation: heartPop .45s ease; }
.heart-caption { font-size: 11px; color: var(--gray); }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.heart-count-cell { color: #ff6b85; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .heart-count-cell { color: #be123c; }

.hearters { display: flex; align-items: center; gap: 10px; margin: -12px 0 22px; font-size: 12px; }
.hearters-stack { display: flex; }
.hearters-stack a { margin-left: -8px; }
.hearters-stack a:first-child { margin-left: 0; }
.hearters-stack .avatar-circle { margin-right: 0; border: 2px solid var(--bg-soft); }

/* Mạng xã hội */
.profile-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; }
.social-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #1c1c1c; border: 1px solid var(--border); color: var(--white) !important; transition: border-color .2s, background .2s; }
:where(html[data-theme="light"] body:not(.admin-body)) .social-btn { background: #ffffff; }
.social-btn svg { width: 16px; height: 16px; }
.social-facebook svg { color: #4c8dff; }
:where(html[data-theme="light"] body:not(.admin-body)) .social-facebook svg { color: #0043b8; }
.social-tiktok svg { color: #25f4ee; filter: drop-shadow(1px 1px 0 #fe2c55); }
:where(html[data-theme="light"] body:not(.admin-body)) .social-tiktok svg { color: #0e7490; }
.social-youtube svg { color: #ff3b3b; }
:where(html[data-theme="light"] body:not(.admin-body)) .social-youtube svg { color: #c8101a; }
.social-btn:hover { border-color: var(--red); background: rgba(230,20,31,.08); }

/* Bố cục 2 cột */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.profile-grid-single { grid-template-columns: 1fr; }
.profile-bio { margin: 0; white-space: normal; word-break: break-word; }

/* Video */
.video-card { padding: 16px; }
.video-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.video-tab { flex: 1; padding: 6px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--gray); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .video-tab { background: #ffffff; }
.video-tab.active { color: #fff; border-color: var(--red); background: rgba(230,20,31,.15); }
:where(html[data-theme="light"] body:not(.admin-body)) .video-tab.active { color: #111827; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
:where(html[data-theme="light"] body:not(.admin-body)) .video-frame { background: #f3f4f6; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-pane .tiktok-embed { border-radius: 8px; overflow: hidden; }

/* QR donate */
.qr-card { text-align: center; }
.qr-thumb { display: block; margin: 0 auto; padding: 8px; background: #fff; border: none; border-radius: 10px; cursor: zoom-in; width: 160px; max-width: 100%; }
.qr-thumb img { display: block; width: 100%; height: auto; border-radius: 4px; }
.qr-note { margin: 10px 0 2px; font-size: 13px; font-weight: 600; word-break: break-word; }
.qr-hint { font-size: 11px; margin: 4px 0 0; }
.qr-dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); color: var(--white); padding: 20px; text-align: center; max-width: min(92vw, 440px); }
.qr-dialog::backdrop { background: rgba(0,0,0,.75); }
.qr-dialog img { background: #fff; padding: 10px; border-radius: 10px; width: 100%; max-width: 380px; }
.qr-dialog p { margin: 10px 0; font-weight: 600; }

/* Khu vực chỉnh sửa của chủ hồ sơ */
.profile-edit { margin-top: 10px; border: 1px dashed var(--border); border-radius: 10px; padding: 0 16px; }
.profile-edit[open] { padding-bottom: 6px; }
.profile-edit summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--white); list-style: none; }
.profile-edit summary::-webkit-details-marker { display: none; }
.profile-edit summary:hover { color: var(--red); }
.profile-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-edit-grid .profile-card { margin-bottom: 0; }
.profile-card input[type=text], .profile-card input[type=file] { width: 100%; }
.profile-card input[type=file] { font-size: 12px; color: var(--gray); }
.edit-avatar-row { display: flex; gap: 14px; align-items: center; }
.edit-avatar-row > div { min-width: 0; flex: 1; }
.edit-qr-preview { width: 72px; height: auto; background: #fff; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.field-hint { font-size: 11px; margin: 6px 0 0; }
.edit-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.edit-actions .btn-solid { border: none; cursor: pointer; font-family: inherit; }

/* Admin: điểm & kiểm duyệt */
.points-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.points-admin-grid .admin-card input[type=number] { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .points-admin-grid .admin-card input[type=number] { background: #ffffff; }
.rank-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.rank-table-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .rank-table-row { border-bottom: 1px solid #f3f4f6; }
.points-plus { color: #4ade80; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .points-plus { color: #15803d; }
.points-minus { color: #f87171; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .points-minus { color: #b91c1c; }
.moderation-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.moderation-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #161616; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .moderation-item { background: #ffffff; }
.moderation-qr { width: 70px; background: #fff; padding: 3px; border-radius: 4px; }

@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; }
    .points-admin-grid, .moderation-row { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .profile-head { flex-direction: column; gap: 12px; }
    .profile-head-actions { flex-direction: row; align-items: center; gap: 10px; }
    .profile-edit-grid { grid-template-columns: 1fr; }
    .rank-table { grid-template-columns: 1fr; }
}
.qr-card h2 { text-align: left; }
.rank-pill.rank-grandmaster, .rank-pill.rank-dominator { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
:where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-grandmaster, :where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-dominator { text-shadow: 0 1px 2px rgba(0,0,0,0.17); }
@media (max-width: 780px) {
    .profile-card h2 { font-size: 15px; }
}

/* ================= ĐĂNG NHẬP / ĐĂNG KÝ ================= */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; opacity: .5; padding: 4px 6px; }
.password-toggle.is-on, .password-toggle:hover { opacity: 1; }
.remember-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gray); margin: 4px 0 18px; cursor: pointer; line-height: 1.4; }
.remember-row input { accent-color: var(--red); margin-top: 2px; }
.pw-meter { height: 4px; background: #1c1c1c; border-radius: 4px; margin-top: 6px; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .pw-meter { background: #ffffff; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ================= CHẾ ĐỘ KHÁCH & PHÂN TRANG ================= */
.guest-lock { max-width: 520px; margin: 30px auto; text-align: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 40px 24px; }
.guest-lock-icon { font-size: 42px; margin-bottom: 8px; }
.guest-lock .profile-name { margin-bottom: 8px; }
.guest-lock-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.guest-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(230,20,31,.08); border: 1px solid rgba(230,20,31,.35); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.guest-banner .btn-solid, .guest-banner .btn-outline { padding: 6px 14px; font-size: 13px; }
.guest-banner .btn-solid { margin-left: auto; }
.guest-name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.guest-name-item { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-name-item:hover { border-color: var(--red); }
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.pagination a { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-soft); font-size: 13px; }
.pagination a:hover { border-color: var(--red); }
.pagination a.active { background: var(--red); border-color: var(--red); color: #fff; }
.pagination .muted { margin-left: 8px; font-size: 12px; }
@media (max-width: 780px) { .guest-banner .btn-solid { margin-left: 0; } }

/* ================= CHÍNH SÁCH CỘNG ĐỒNG ================= */
.policy-page { max-width: 820px; }
.policy-title { font-size: 28px; margin: 0 0 6px; }
.policy-updated { font-size: 12px; margin: 0 0 20px; }
.policy-body { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; line-height: 1.7; color: #dcdcdc; margin-bottom: 20px; }
:where(html[data-theme="light"] body:not(.admin-body)) .policy-body { color: #374151; }
.policy-body h2 { font-size: 17px; color: var(--red); border-left: 3px solid var(--red); padding-left: 10px; margin: 26px 0 10px; }
.policy-body h2:first-child { margin-top: 0; }
.policy-body ul { padding-left: 22px; margin: 8px 0; }
.policy-body li { margin-bottom: 6px; }
.policy-body strong { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .policy-body strong { color: #111827; }
.footer-links { font-size: 13px; }
.footer-links a { color: var(--gray); }
.footer-links a:hover { color: var(--red); }
@media (max-width: 780px) { .policy-body { padding: 18px 16px; } .policy-title { font-size: 22px; } }

/* ================= ADMIN: THÀNH VIÊN MẪU ================= */
.demo-notes { font-size: 12px; padding-left: 18px; margin: 0 0 16px; }
.demo-notes li { margin-bottom: 4px; }
.demo-sample { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.demo-sample-item { display: flex; align-items: center; gap: 4px; background: #161616; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.5; }
:where(html[data-theme="light"] body:not(.admin-body)) .demo-sample-item { background: #ffffff; }
.demo-sample-item:hover { border-color: var(--red); }
.member-demo-tag { font-size: 10px; color: #9a9a9a; border: 1px dashed #555; border-radius: 10px; padding: 1px 6px; margin-left: 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .member-demo-tag { color: #4b5563; border: 1px dashed #d1d5db; }
.muted-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1f1f1f; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .muted-row { border-bottom: 1px solid #f3f4f6; }
.chat-notice { margin: 0 14px 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(230,20,31,.12); border: 1px solid rgba(230,20,31,.45); color: #ffb3b3; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-notice { color: #b91c1c; }
.chat-notice.info { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #fcd34d; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-notice.info { color: #a16207; }
.chat-form textarea:disabled { opacity: .5; cursor: not-allowed; }
[hidden] { display: none !important; }

/* ================= CHUÔNG THÔNG BÁO ================= */
.main-nav { order: 2; margin-left: auto; }
.nav-bell { order: 3; margin-left: 16px; position: relative; }
.nav-toggle { order: 4; }
.bell-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: #161616; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-btn { background: #ffffff; }
.bell-btn svg { width: 20px; height: 20px; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { border-color: var(--red); }
.bell-btn.ring svg { animation: bellRing .8s ease; transform-origin: 50% 10%; }
@keyframes bellRing { 0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.bell-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; max-width: calc(100vw - 24px); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.6); z-index: 30; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-panel { box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bell-sound { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 14px; padding: 2px 8px; }
.bell-chat { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); background: rgba(230,20,31,.08); }
.bell-chat:hover { background: rgba(230,20,31,.16); }
.bell-list { max-height: 340px; overflow-y: auto; }
.bell-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1f1f1f; font-size: 13px; line-height: 1.4; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-item { border-bottom: 1px solid #f3f4f6; }
.bell-item:hover { background: #1b1b1b; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-item:hover { background: #ffffff; }
.bell-item.unread { background: rgba(230,20,31,.07); }
.bell-item.unread strong::before { content: "● "; color: var(--red); font-size: 10px; }
.bell-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-av { color: #111827; }
.bell-text { min-width: 0; }
.bell-text em { display: block; font-style: normal; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-text small { color: #666; font-size: 11px; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-text small { color: #6b7280; }
.bell-empty { color: var(--gray); font-size: 13px; text-align: center; padding: 18px 10px; margin: 0; }
.bell-readall { width: 100%; background: none; border: none; border-top: 1px solid var(--border); color: var(--gray); padding: 10px; cursor: pointer; font-size: 12px; font-family: inherit; }
.bell-readall:hover { color: var(--white); }
@media (max-width: 780px) {
    .nav-bell { margin-left: auto; margin-right: 10px; }
    .bell-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ================= CHAT: TRẢ LỜI & NHẮC TÊN ================= */
.cm-actions { display: flex; flex-direction: row; gap: 0; align-self: center; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.cm-me .cm-actions { order: -1; }
.cm-row:hover .cm-actions, .cm-actions:focus-within { opacity: 1; }
@media (hover: none) { .cm-actions { opacity: .55; } }
.cm-actions .cm-del { opacity: 1; align-self: auto; }
.cm-reply { background: none; border: none; color: #777; cursor: pointer; font-size: 14px; padding: 4px 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-reply { color: #6b7280; }
.cm-reply:hover { color: var(--white); }
.cm-quote { display: block; border-left: 3px solid rgba(255,255,255,.45); background: rgba(0,0,0,.22); border-radius: 6px; padding: 4px 8px; margin: 0 0 6px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-quote { border-left: 3px solid rgba(0,0,0,0.315); background: rgba(0,0,0,0.033); }
.cm-other .cm-quote { border-left-color: var(--red); background: rgba(255,255,255,.04); }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-other .cm-quote { background: rgba(0,0,0,0.028); }
.cm-quote strong { display: block; font-size: 11px; }
.cm-quote span { opacity: .8; }
.cm-quote-gone { font-style: italic; opacity: .7; cursor: default; }
.cm-mention { color: #ffb4b8; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-mention { color: #b8000a; }
.cm-me .cm-mention { color: #fff; text-decoration: underline; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-me .cm-mention { color: #111827; }
.cm-mention-me { background: rgba(255,200,0,.18); color: #ffd76a !important; border-radius: 4px; padding: 0 2px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-mention-me { color: #a16207 !important; }
.cm-to-me .cm-bubble { box-shadow: 0 0 0 1px #d4a017, 0 0 12px rgba(212,160,23,.25); }
.cm-name[data-user] { cursor: pointer; }
.cm-name[data-user]:hover { color: var(--white); }
.cm-flash .cm-bubble { animation: cmFlash 1.6s ease; }
@keyframes cmFlash { 0%, 40% { box-shadow: 0 0 0 3px rgba(255,215,106,.9); } 100% { box-shadow: none; } }
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 14px 8px; padding: 8px 12px; border-left: 3px solid var(--red); background: #1a1a1a; border-radius: 8px; }
:where(html[data-theme="light"] body:not(.admin-body)) .reply-bar { background: #ffffff; }
.reply-bar-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.reply-bar-text strong { display: block; color: var(--red); }
.reply-bar-text span { display: block; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar-close { background: none; border: none; color: var(--gray); cursor: pointer; font-size: 14px; }
.reply-bar-close:hover { color: var(--white); }

/* ================= ICON SVG TỐI GIẢN ================= */
.ico { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.btn-outline .ico, .btn-solid .ico, .section-link .ico, .read-more .ico { vertical-align: -2px; }

/* ================= TIÊU ĐỀ KHỐI TRANG CHỦ ================= */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-link { color: var(--gray); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.section-link:hover { color: var(--red); }

/* Hero có ảnh nền */
.hero-has-image { position: relative; max-width: none; padding-top: 90px; padding-bottom: 80px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-has-image > * { position: relative; }

/* ================= CHIA SẺ ================= */
.share-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.share-label { font-size: 12px; color: var(--gray); margin-right: 4px; text-transform: uppercase; letter-spacing: 1px; }
.share-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #161616; color: #cfcfcf; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s, background .2s; padding: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .share-btn { background: #ffffff; color: #374151; }
.share-btn:hover { border-color: var(--red); color: #fff; background: rgba(230,20,31,.12); }
:where(html[data-theme="light"] body:not(.admin-body)) .share-btn:hover { color: #111827; }
.share-btn.copied { border-color: #22c55e; color: #22c55e; }
:where(html[data-theme="light"] body:not(.admin-body)) .share-btn.copied { color: #15803d; }
.share-compact .share-btn { width: 30px; height: 30px; }

/* ================= TIN TỨC MỚI NHẤT (TRANG CHỦ) ================= */
.home-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-news-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.home-news-card:hover { border-color: rgba(230,20,31,.6); transform: translateY(-3px); }
.home-news-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #1a1a1a; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .home-news-thumb { background: #ffffff; }
.home-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.home-news-card:hover .home-news-thumb img { transform: scale(1.04); }
.home-news-thumb .article-cat { position: absolute; left: 12px; top: 12px; }
.home-news-thumb .news-thumb-placeholder { display: flex; height: 100%; }
.home-news-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.home-news-body h3 { font-size: 17px; line-height: 1.4; margin: 8px 0; }
.home-news-body h3 a:hover { color: var(--red); }
.home-news-body p { color: var(--gray); font-size: 14px; margin: 0 0 14px; flex: 1; }
.home-news-body .news-meta { justify-content: flex-start; gap: 14px; }
.home-news-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #222; padding-top: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .home-news-foot { border-top: 1px solid #f3f4f6; }
.read-more { color: var(--red); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ================= GAME CỘNG ĐỒNG ================= */
.games-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.game-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background-size: cover !important; background-position: center !important; border: 1px solid rgba(255,255,255,.06); display: flex; align-items: flex-end; transition: transform .25s, box-shadow .25s; }
.game-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85)); }
.game-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(230,20,31,.25); }
.game-tile-icon { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.55); z-index: 1; }
.game-tile-info { position: relative; z-index: 1; padding: 14px; }
.game-tile-info span { display: block; font-size: 11px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 1px; }
.game-tile-info strong { font-size: 15px; line-height: 1.3; }

/* ================= BẢNG XẾP HẠNG ================= */
.top-list { display: grid; gap: 10px; }
.top-item { display: grid; grid-template-columns: 40px 44px 1fr auto 110px; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; transition: border-color .2s; }
.top-item:hover { border-color: rgba(230,20,31,.6); }
.top-pos { font-size: 20px; font-weight: 800; color: #555; text-align: center; }
.top-1 .top-pos { color: #ffd76a; }
:where(html[data-theme="light"] body:not(.admin-body)) .top-1 .top-pos { color: #a16207; } .top-2 .top-pos { color: #d7dde5; }
:where(html[data-theme="light"] body:not(.admin-body)) .top-2 .top-pos { color: #374151; } .top-3 .top-pos { color: #d49a6a; }
:where(html[data-theme="light"] body:not(.admin-body)) .top-3 .top-pos { color: #9a3412; }
.top-1 { background: linear-gradient(90deg, rgba(255,215,106,.1), var(--bg-soft) 40%); }
.top-avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; object-fit: cover; }
:where(html[data-theme="light"] body:not(.admin-body)) .top-avatar { color: #111827; }
.top-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-points { text-align: right; color: var(--gray); font-size: 13px; font-weight: 600; }

/* ================= KHOẢNH KHẮC ================= */
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 12px; }
.gallery-item { position: relative; border: none; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .gallery-item { background: #ffffff; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 10px; font-size: 12px; font-weight: 600; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
:where(html[data-theme="light"] body:not(.admin-body)) .gallery-item span { color: #111827; }
.gallery-wide { grid-column: span 2; grid-row: span 2; }
.gallery-lightbox { border: none; background: transparent; max-width: 94vw; max-height: 94vh; padding: 0; color: #fff; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .gallery-lightbox { color: #111827; }
.gallery-lightbox::backdrop { background: rgba(0,0,0,.88); }
.gallery-lightbox img { max-width: 94vw; max-height: 82vh; border-radius: 10px; }
.gallery-lightbox form { position: fixed; top: 16px; right: 16px; }
.gallery-lightbox button { background: rgba(0,0,0,.6); border: 1px solid #444; color: #fff; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .gallery-lightbox button { border: 1px solid #d1d5db; color: #111827; }

/* ================= KHỐI KÊU GỌI THAM GIA ================= */
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; border-radius: 18px; border: 1px solid rgba(230,20,31,.4);
    background: linear-gradient(110deg, rgba(20,4,6,.94) 30%, rgba(20,4,6,.6)), radial-gradient(circle at 85% 30%, rgba(230,20,31,.45), transparent 55%); background-size: cover; background-position: center; }
.cta-banner h2 { border: none; padding: 0; margin: 0 0 8px; font-size: 26px; }
.cta-banner p { color: #d4d4d4; margin: 0; max-width: 560px; }
.cta-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ================= DANH SÁCH TIN TỨC ================= */
.page-title { font-size: 30px; margin: 0; }
.news-list-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.news-search { display: flex; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: #161616; }
:where(html[data-theme="light"] body:not(.admin-body)) .news-search { background: #ffffff; }
.news-search input { background: none; border: none; color: var(--white); padding: 9px 16px; font-size: 14px; width: 240px; outline: none; }
.news-search button { background: none; border: none; color: var(--gray); padding: 0 14px; cursor: pointer; }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.cat-chips a { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); font-size: 13px; color: var(--gray); }
.cat-chips a.active, .cat-chips a:hover { border-color: var(--red); color: #fff; background: rgba(230,20,31,.12); }
:where(html[data-theme="light"] body:not(.admin-body)) .cat-chips a.active, :where(html[data-theme="light"] body:not(.admin-body)) .cat-chips a:hover { color: #111827; }
.cat-chips small { opacity: .6; margin-left: 2px; }
.article-cat { display: inline-block; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 4px; }
.article-cat.small { font-size: 10px; padding: 2px 8px; }
.news-featured { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 26px; transition: border-color .2s; }
.news-featured:hover { border-color: rgba(230,20,31,.6); }
.news-featured-img { aspect-ratio: 16 / 9; background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .news-featured-img { background: #ffffff; }
.news-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.news-featured-img .news-thumb-placeholder { height: 100%; display: flex; }
.news-featured-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.news-featured-body h2 { border: none; padding: 0; margin: 0; font-size: 24px; line-height: 1.35; }
.news-featured-body p { color: var(--gray); margin: 0; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-thumb { aspect-ratio: 16 / 9; height: auto !important; }
.news-card-body .article-cat { margin-bottom: 8px; }

/* ================= CHI TIẾT BÀI VIẾT ================= */
.news-detail { max-width: 820px; }
.breadcrumbs { font-size: 13px; color: var(--gray); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs span { opacity: .5; }
.article-head h1 { font-size: 34px; line-height: 1.3; margin: 12px 0; }
.article-lead { font-size: 18px; color: #cfcfcf; line-height: 1.6; margin: 0 0 16px; }
:where(html[data-theme="light"] body:not(.admin-body)) .article-lead { color: #374151; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--gray); font-size: 13px; margin-bottom: 16px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-head .share-bar { padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.article-cover { margin: 0 0 26px; }
.article-cover img { width: 100%; border-radius: 14px; display: block; }
.article-toc { background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 10px; padding: 14px 20px; margin-bottom: 26px; }
.article-toc summary { font-weight: 700; cursor: pointer; }
.article-toc ol { margin: 10px 0 0; padding-left: 20px; }
.article-toc li { margin: 4px 0; font-size: 14px; }
.article-toc .toc-h3 { margin-left: 18px; list-style: circle; }
.article-toc a { color: #d4d4d4; }
:where(html[data-theme="light"] body:not(.admin-body)) .article-toc a { color: #374151; } .article-toc a:hover { color: var(--red); }
.article-body { font-size: 17px; line-height: 1.85; color: #e2e2e2; }
:where(html[data-theme="light"] body:not(.admin-body)) .article-body { color: #111827; }
.article-body h2 { font-size: 24px; border-left: 4px solid var(--red); padding-left: 12px; margin: 34px 0 14px; scroll-margin-top: 80px; }
.article-body h3 { font-size: 20px; margin: 26px 0 10px; scroll-margin-top: 80px; }
.article-body p { margin: 0 0 16px; }
.article-body a { color: #ff5a63; text-decoration: underline; }
:where(html[data-theme="light"] body:not(.admin-body)) .article-body a { color: #c8101a; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 0 auto; }
.article-body figure { margin: 22px 0; }
.article-body figcaption { text-align: center; font-size: 13px; color: var(--gray); margin-top: 6px; }
.article-body blockquote { border-left: 3px solid var(--red); margin: 20px 0; padding: 10px 18px; background: #151515; border-radius: 0 8px 8px 0; font-style: italic; color: #cfcfcf; }
:where(html[data-theme="light"] body:not(.admin-body)) .article-body blockquote { background: #ffffff; color: #374151; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 0 0 16px; }
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 10px; }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 18px; }
.tag-chip { font-size: 13px; color: var(--gray); background: #161616; border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tag-chip { background: #ffffff; }
.tag-chip:hover { color: #fff; border-color: var(--red); }
:where(html[data-theme="light"] body:not(.admin-body)) .tag-chip:hover { color: #111827; }
.article-share-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 32px; font-weight: 600; }
.related-news h2 { font-size: 20px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; }

/* ================= TRÌNH SOẠN THẢO BÀI VIẾT (ADMIN) ================= */
.news-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.news-editor-side { position: sticky; top: 16px; }
.news-editor-layout .admin-card h2 { display: flex; align-items: center; gap: 8px; }
.news-editor-layout input[type=datetime-local], .role-select.full { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font-size: 14px; color-scheme: dark; }
:where(html[data-theme="light"] body:not(.admin-body)) .news-editor-layout input[type=datetime-local], :where(html[data-theme="light"] body:not(.admin-body)) .role-select.full { background: #ffffff; }
.block-btn { display: block; text-align: center; margin-top: 10px; }
.counter { float: right; font-size: 11px; color: #777; }
:where(html[data-theme="light"] body:not(.admin-body)) .counter { color: #6b7280; }
.counter.over { color: #f87171; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .counter.over { color: #b91c1c; }
.slug-row { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; background: #1c1c1c; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .slug-row { background: #ffffff; }
.slug-prefix { font-size: 12px; color: #777; padding-left: 10px; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .slug-prefix { color: #6b7280; }
.slug-row input { border: none !important; background: none !important; padding-left: 4px !important; }
.rte { border: 1px solid var(--border); border-radius: 8px; background: #141414; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte { background: #ffffff; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: #1a1a1a; position: sticky; top: 0; z-index: 2; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-toolbar { background: #ffffff; }
.rte-toolbar button { min-width: 34px; height: 32px; padding: 0 8px; border-radius: 6px; border: 1px solid transparent; background: none; color: #d4d4d4; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-toolbar button { color: #374151; }
.rte-toolbar button:hover, .rte-toolbar button.active { background: #262626; border-color: #333; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-toolbar button:hover, :where(html[data-theme="light"] body:not(.admin-body)) .rte-toolbar button.active { background: #f3f4f6; border-color: #e5e7eb; color: #111827; }
.rte-sep { width: 1px; background: #333; margin: 4px 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-sep { background: #e5e7eb; }
.rte-area { min-height: 380px; max-height: 70vh; overflow-y: auto; padding: 18px 20px; outline: none; font-size: 16px; line-height: 1.75; color: #e8e8e8; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-area { color: #111827; }
.rte-area:empty::before { content: attr(data-placeholder); color: #666; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-area:empty::before { color: #6b7280; }
.rte-area h2 { font-size: 22px; border-left: 3px solid var(--red); padding-left: 10px; }
.rte-area h3 { font-size: 18px; }
.rte-area blockquote { border-left: 3px solid var(--red); margin: 12px 0; padding: 6px 14px; background: #1b1b1b; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-area blockquote { background: #ffffff; color: #374151; }
.rte-area img { max-width: 100%; border-radius: 8px; }
.rte-area a { color: #ff5a63; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-area a { color: #c8101a; }
.rte-source { width: 100%; min-height: 380px; border: none !important; border-radius: 0 !important; font-family: Consolas, monospace !important; font-size: 13px !important; padding: 16px !important; background: #0f0f0f !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-source { background: #f3f4f6 !important; }
.rte-status { font-size: 12px; color: #777; padding: 6px 12px; border-top: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .rte-status { color: #6b7280; }
.serp-preview { background: #fff; border-radius: 10px; padding: 14px 16px; margin: 6px 0 16px; font-family: Arial, sans-serif; }
.serp-label { font-size: 11px; color: #70757a; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
:where(html[data-theme="light"] body:not(.admin-body)) .serp-label { color: #6b7280; }
.serp-url { font-size: 12px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-title { font-size: 19px; color: #1a0dab; margin: 3px 0; line-height: 1.3; }
.serp-desc { font-size: 13px; color: #4d5156; line-height: 1.5; }
.seo-score-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 6px; }
.seo-bar { height: 8px; border-radius: 6px; background: #222; overflow: hidden; margin-bottom: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .seo-bar { background: #f3f4f6; }
.seo-bar span { display: block; height: 100%; width: 0; transition: width .3s, background .3s; }
.seo-checks { list-style: none; padding: 0; margin: 0; font-size: 13px; columns: 2; column-gap: 20px; }
.seo-checks li { padding: 3px 0 3px 22px; position: relative; break-inside: avoid; }
.seo-checks li::before { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.seo-checks li.ok { color: #cfe9d6; }
:where(html[data-theme="light"] body:not(.admin-body)) .seo-checks li.ok { color: #298e44; } .seo-checks li.ok::before { content: "✓"; background: #14532d; color: #4ade80; }
.seo-checks li.bad { color: #999; }
:where(html[data-theme="light"] body:not(.admin-body)) .seo-checks li.bad { color: #4b5563; } .seo-checks li.bad::before { content: "!"; background: #3f1d1d; color: #f87171; }
:where(html[data-theme="light"] body:not(.admin-body)) .seo-checks li.bad::before { background: #f5eaea; color: #b91c1c; }
.thumb-drop { display: block; border: 1px dashed #444; border-radius: 10px; min-height: 150px; cursor: pointer; overflow: hidden; text-align: center; background: #151515; }
:where(html[data-theme="light"] body:not(.admin-body)) .thumb-drop { border: 1px dashed #d1d5db; background: #ffffff; }
.thumb-drop:hover { border-color: var(--red); }
.thumb-drop img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb-hint { display: block; padding: 30px 12px; color: var(--gray); font-size: 13px; }

/* ================= ADMIN: NỘI DUNG TRANG CHỦ ================= */
.admin-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hero-admin { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.hero-admin-preview { aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--border); background: radial-gradient(circle at 50% 0, #2a0808, #0a0a0a) center / cover; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 12px; }
.games-admin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.game-admin-item { display: flex; flex-direction: column; gap: 6px; background: #161616; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .game-admin-item { background: #ffffff; }
.game-admin-item input[type=file] { font-size: 11px; color: var(--gray); max-width: 100%; }
.game-admin-thumb { aspect-ratio: 3 / 4; border-radius: 8px; background-size: cover !important; background-position: center !important; }
.gallery-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gallery-add input[type=text] { flex: 1; min-width: 200px; }
.gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.gallery-admin-item { display: flex; flex-direction: column; gap: 6px; background: #161616; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
:where(html[data-theme="light"] body:not(.admin-body)) .gallery-admin-item { background: #ffffff; }
.gallery-admin-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* Menu: trang đang xem */
.main-nav a.active { color: var(--white); }
.main-nav a.active:not(.btn-outline):not(.btn-solid):not(.nav-user-link) { box-shadow: inset 0 -2px 0 var(--red); padding-bottom: 4px; }

/* ================= RESPONSIVE: MÁY TÍNH BẢNG (iPad) ================= */
@media (max-width: 1180px) {
    .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .games-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-editor-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
/* Thu gọn menu thành nút ☰ từ khổ iPad trở xuống (menu nhiều mục sẽ tràn dòng) */
@media (max-width: 1100px) {
    .header-inner { position: relative; padding: 12px 20px; }
    .nav-toggle { display: block; }
    .main-nav {
        display: none; flex-direction: column; align-items: stretch; gap: 2px;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--bg-soft); border-bottom: 1px solid var(--border);
        padding: 12px 20px 16px; z-index: 20; box-shadow: 0 16px 30px rgba(0,0,0,.5);
    }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav { box-shadow: 0 16px 30px rgba(0,0,0,0.15); }
    .main-nav.open { display: flex; }
    .main-nav a, .main-nav .nav-user-link { padding: 12px 6px; font-size: 15px; border-bottom: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav a, :where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-user-link { border-bottom: 1px solid #f3f4f6; }
    .main-nav a.btn-outline, .main-nav a.btn-solid { text-align: center; margin-top: 8px; border-bottom: 1px solid var(--red); }
    .main-nav a.active:not(.btn-outline):not(.btn-solid):not(.nav-user-link) { box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
    .nav-bell { margin-left: auto; margin-right: 10px; }
    .nav-toggle { min-width: 42px; min-height: 42px; }
}
@media (min-width: 781px) and (max-width: 1100px) {
    .main-nav { display: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    .main-nav.open { display: flex; }
    .main-nav a, .main-nav .nav-user-link { border-bottom: none; padding: 10px 12px; }
    .main-nav a.btn-outline, .main-nav a.btn-solid { margin-top: 0; }
    .bell-panel { position: absolute; left: auto; right: 0; top: calc(100% + 10px); width: 360px; }
}
@media (min-width: 781px) and (max-width: 1024px) {
    .section { padding: 34px 28px; }
    .hero { padding-left: 28px; padding-right: 28px; }
    .hero h1 { font-size: 40px; }
    .stats { padding-left: 28px; padding-right: 28px; }
    .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-news-grid .home-news-card:first-child { grid-column: span 2; flex-direction: row; }
    .home-news-grid .home-news-card:first-child .home-news-thumb { width: 55%; aspect-ratio: auto; min-height: 260px; }
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 160px; }
    .top-item { grid-template-columns: 34px 40px 1fr auto 90px; gap: 12px; }
    .profile-page { padding-left: 24px; padding-right: 24px; }
    .chat-page { padding-left: 24px; padding-right: 24px; }
    .chat-messages { height: calc(100vh - 330px); min-height: 420px; }
    .members-table th, .members-table td { padding: 12px 10px; }
    .cta-banner { padding: 30px; }
    .article-head h1 { font-size: 30px; }
    .news-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .news-editor-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
    .news-editor-side .admin-card:first-child { grid-column: span 2; }
    .seo-checks { columns: 1; }
    .form-wrap { max-width: 480px; }
    /* Vùng chạm lớn hơn cho màn hình cảm ứng */
    .btn-outline, .btn-solid { padding: 10px 18px; }
    .cm-actions { opacity: .6; }
}
@media (max-width: 900px) {
    .news-featured { grid-template-columns: 1fr; }
    .cta-banner { flex-direction: column; align-items: flex-start; }
    .hero-admin { grid-template-columns: 1fr; }
    .admin-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .home-news-grid { grid-template-columns: 1fr; }
    .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
    .top-item { grid-template-columns: 28px 38px 1fr auto; padding: 10px 12px; gap: 10px; }
    .top-points { display: none; }
    .top-avatar { width: 38px; height: 38px; }
    .page-title { font-size: 24px; }
    .news-search input { width: 100%; }
    .news-search { width: 100%; }
    .article-head h1 { font-size: 25px; }
    .article-lead { font-size: 16px; }
    .article-body { font-size: 16px; }
    .news-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .news-editor-side { position: static; }
    .seo-checks { columns: 1; }
    .games-admin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cta-banner { padding: 24px; }
    .cta-actions { flex-direction: column; width: 100%; }
    .cta-banner h2 { font-size: 21px; }
}
@media (hover: none) { .cm-actions { opacity: .6; } }
/* Icon SVG trong các nút */
.heart-btn .heart-icon { display: inline-flex; }
.heart-btn.is-hearted .heart-icon svg, .heart-btn-static .heart-icon svg { fill: currentColor; }
.heart-count-cell .ico { color: #ff6b85; vertical-align: -2px; }
:where(html[data-theme="light"] body:not(.admin-body)) .heart-count-cell .ico { color: #be123c; }
.guest-lock-icon { color: var(--red); }
.guest-banner .ico { color: var(--red); }
.chat-head-icon { color: #ff5a63; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-head-icon { color: #c8101a; }
.chat-icon-btn { color: #bbb; display: flex; align-items: center; justify-content: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-icon-btn { color: #4b5563; }
.chat-icon-btn:hover { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-icon-btn:hover { color: #111827; }
.chat-send { display: flex; align-items: center; justify-content: center; }
.chat-new-pill { display: inline-flex; align-items: center; gap: 6px; }
.chat-new-pill[hidden] { display: none !important; }
.cm-reply, .cm-del { display: inline-flex; align-items: center; }
.reply-bar-close { display: flex; }
.emoji-tab .ico { vertical-align: -3px; color: #bbb; }
:where(html[data-theme="light"] body:not(.admin-body)) .emoji-tab .ico { color: #4b5563; }
.bell-sound { display: inline-flex; align-items: center; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-sound { color: #374151; }
.bell-chat { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; align-items: center; justify-content: center; }
.password-toggle { display: flex; align-items: center; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .password-toggle { color: #374151; }
.profile-edit summary { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) { .nav-toggle { display: inline-flex; } }
.rte-area h2, .rte-area h3 { color: var(--white); margin: 18px 0 10px; }
.news-editor-layout .admin-card h2 .ico { color: var(--red); }

/* ================= VAI TRÒ CỘNG ĐỒNG & TÊN TRONG CHAT ================= */
.role-tag { --role-color: #9a9a9a; display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; color: var(--role-color); border: 1px solid var(--role-color); background: rgba(255,255,255,.04); background: color-mix(in srgb, var(--role-color) 14%, transparent); white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .role-tag { background: rgba(0,0,0,0.028); }
.cm-name { flex-wrap: wrap; gap: 5px; }
.cm-name-text { font-weight: 700; font-size: 12px; color: #d4d4d4; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-name-text { color: #374151; }
.cm-name[data-user] .cm-name-text { cursor: pointer; }
.rank-pill-xs { padding: 0 7px; font-size: 9.5px; line-height: 16px; border-width: 1px; border-style: solid; }
.cm-badges { display: inline-flex; align-items: center; gap: 3px; }
.cm-badge { --badge-color: #888; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 1; background: #1c1c1c; border: 1px solid var(--badge-color); background: color-mix(in srgb, var(--badge-color) 22%, #111); border: 1px solid color-mix(in srgb, var(--badge-color) 60%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-badge { background: #ffffff; background: color-mix(in srgb, var(--badge-color) 22%, #ffffff); }
.cm-badge.rarity-3 { box-shadow: 0 0 6px color-mix(in srgb, var(--badge-color) 60%, transparent); }
.cm-badge.rarity-4 { box-shadow: 0 0 8px var(--badge-color); animation: badgeGlow 2.4s ease-in-out infinite; }
@keyframes badgeGlow { 50% { box-shadow: 0 0 2px var(--badge-color); } }
.cm-badge-more { font-size: 10px; font-weight: 700; color: #aaa; background: #1f1f1f; border: 1px solid #333; border-radius: 10px; padding: 0 5px; line-height: 16px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-badge-more { color: #4b5563; background: #f3f4f6; border: 1px solid #e5e7eb; }
/* Quản trị vai trò & huy hiệu */
.color-input, .field input.color-input { width: 64px !important; height: 40px; padding: 3px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .color-input, :where(html[data-theme="light"] body:not(.admin-body)) .field input.color-input { background: #ffffff; }
.color-input.small { width: 42px !important; height: 34px; }
.roles-table { display: grid; gap: 8px; }
.roles-row { display: grid; grid-template-columns: 42px 190px minmax(0, 1fr) 60px 150px 60px 58px; gap: 10px; align-items: center; }
.roles-row .role-tag { max-width: 150px; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
.roles-row input[type=text], .roles-row input[type=number] { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .roles-row input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .roles-row input[type=number] { background: #ffffff; }
.roles-count { font-size: 12px; white-space: nowrap; }
.holders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.holder-item { display: flex; align-items: center; gap: 4px; background: #161616; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .holder-item { background: #ffffff; }
.holder-name { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.small-btn { padding: 4px 8px !important; background: none; cursor: pointer; display: inline-flex; }
.rarity-select { width: 100%; margin: 6px 0; }
.rarity-select.rarity-2 { border-color: #3b82f6; } .rarity-select.rarity-3 { border-color: #a855f7; } .rarity-select.rarity-4 { border-color: #f59e0b; }
@media (max-width: 900px) {
    .roles-row { grid-template-columns: 42px 1fr 64px; }
    .roles-row .roles-desc { grid-column: 1 / -1; }
    .roles-row .role-tag, .roles-row .roles-count { display: none; }
}

.bell-gift { color: #ffd76a; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-gift { color: #a16207; }
.bell-text small { display: block; }

/* Admin: kiểm duyệt bình luận */
.comment-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.comment-filter input[type=text] { flex: 1; min-width: 180px; }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; flex-wrap: wrap; }
.mod-comments { display: flex; flex-direction: column; }
.mod-comment { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .mod-comment { border-bottom: 1px solid #f3f4f6; }
.mod-comment.is-hidden { opacity: .55; }
.mod-check { margin-top: 10px; accent-color: var(--red); }
.mod-comment-body { flex: 1; min-width: 0; font-size: 14px; }
.mod-comment-head { font-size: 13px; margin-bottom: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mod-comment-text { color: #ddd; word-break: break-word; }
:where(html[data-theme="light"] body:not(.admin-body)) .mod-comment-text { color: #374151; }
.mod-comment-link { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.mod-comment-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ================= CẢM XÚC & BÌNH LUẬN BÀI VIẾT ================= */
.engage { margin: 8px 0 34px; }
.react-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.react-summary { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #ccc; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .react-summary { color: #374151; }
.react-emojis { display: inline-flex; }
.react-emojis span { width: 24px; height: 24px; border-radius: 50%; background: #1c1c1c; border: 2px solid var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-left: -6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .react-emojis span { background: #ffffff; }
.react-emojis span:first-child { margin-left: 0; }
.react-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.react-btn { --rx-color: #ccc; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: #161616; color: #bbb; cursor: pointer; font-size: 13px; font-family: inherit; transition: border-color .15s, background .15s, transform .1s; }
:where(html[data-theme="light"] body:not(.admin-body)) .react-btn { background: #ffffff; color: #4b5563; }
.react-btn:hover { border-color: var(--rx-color); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .react-btn:hover { color: #111827; }
.react-btn .react-emoji { font-size: 17px; line-height: 1; transition: transform .15s; }
.react-btn:hover .react-emoji { transform: scale(1.25); }
.react-btn.active { border-color: var(--rx-color); color: var(--rx-color); font-weight: 700; background: rgba(255,255,255,.05); }
:where(html[data-theme="light"] body:not(.admin-body)) .react-btn.active { background: rgba(0,0,0,0.035); }
.react-btn.pop .react-emoji { animation: heartPop .45s ease; }

.comments-title { display: flex; align-items: center; gap: 8px; font-size: 20px; border: none !important; padding: 0 !important; margin: 0 0 18px; }
.comments-title .ico { color: var(--red); }
.comment-form { display: flex; gap: 12px; margin-bottom: 22px; }
.comment-input-wrap { flex: 1; min-width: 0; background: #161616; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-input-wrap { background: #ffffff; }
.comment-input-wrap:focus-within { border-color: var(--red); }
.comment-input-wrap textarea { width: 100%; border: none; background: none; color: var(--white); font-family: inherit; font-size: 15px; padding: 12px 14px; resize: vertical; min-height: 56px; outline: none; }
.comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-top: 1px solid #222; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-form-foot { border-top: 1px solid #f3f4f6; }
.comment-form-foot a { color: var(--red); }
.comment-send { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; font-family: inherit; padding: 7px 14px; }
.comment-login { background: #161616; border: 1px dashed #333; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; color: #ccc; display: flex; align-items: center; gap: 8px; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-login { background: #ffffff; border: 1px dashed #e5e7eb; color: #374151; }
.comment-login a { color: var(--red); font-weight: 700; }
.comment-notice { margin: -8px 0 16px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(230,20,31,.12); border: 1px solid rgba(230,20,31,.45); color: #ffb3b3; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-notice { color: #b91c1c; }
.comment-notice.ok { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #fcd34d; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-notice.ok { color: #a16207; }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; object-fit: cover; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-avatar { color: #111827; }
.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment { display: flex; gap: 10px; scroll-margin-top: 90px; }
.comment-body { flex: 1; min-width: 0; }
.comment-bubble { display: inline-block; max-width: 100%; background: #1a1a1a; border: 1px solid #262626; border-radius: 14px; padding: 8px 14px 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-bubble { background: #ffffff; border: 1px solid #f3f4f6; }
.comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; }
.comment-name { font-weight: 700; font-size: 13px; color: #e5e5e5; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-name { color: #111827; }
.comment-text { font-size: 15px; line-height: 1.55; color: #e8e8e8; word-break: break-word; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-text { color: #111827; }
.comment-text a { color: #ff5a63; text-decoration: underline; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-text a { color: #c8101a; }
.comment-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; margin: 4px 0 0 12px; }
.comment-actions button { background: none; border: none; padding: 0; color: #9a9a9a; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-actions button { color: #4b5563; }
.comment-actions button:hover { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-actions button:hover { color: #111827; }
.comment-actions .c-like.active { color: #4da3ff; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-actions .c-like.active { color: #1d4ed8; }
.comment-actions .c-del:hover { color: var(--red); }
.comment-time { color: #777; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-time { color: #6b7280; }
.comment-replies { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-left: 4px; border-left: 2px solid #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-replies { border-left: 2px solid #f3f4f6; }
.comment-reply { padding-left: 12px; }
.comment-reply .comment-avatar { width: 32px; height: 32px; font-size: 13px; }
.comment-flash .comment-bubble { animation: cmFlash 1.8s ease; }
.comment-empty { padding: 10px 0; }
@media (max-width: 780px) {
    .react-picker { width: 100%; justify-content: space-between; }
    .react-btn { padding: 6px 9px; }
    .react-btn .react-label { display: none; }
    .react-btn .react-emoji { font-size: 20px; }
    .comment-form .comment-avatar { display: none; }
    .comment-avatar { width: 34px; height: 34px; }
}

/* ================= HUY HIỆU: KHUNG TRÒN CỐ ĐỊNH, KHÔNG MÉO / LẤN VIỀN ================= */
/* Emoji mỗi hệ điều hành rộng khác nhau -> đặt khung vuông cố định, cỡ chữ ~58% khung, cắt phần thừa */
.cm-badge, .badge-chip-sm, .badge-showcase-icon, .badge-icon, .vg-badge-dot {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    flex: 0 0 auto; aspect-ratio: 1 / 1; box-sizing: border-box; overflow: hidden;
    display: inline-grid !important; place-items: center; line-height: 1 !important; text-align: center;
    border-radius: 50% !important; padding: 0 !important; vertical-align: middle; white-space: nowrap;
}
.cm-badge { width: 20px; height: 20px; min-width: 20px; font-size: 11.5px; }
.badge-chip-sm { width: 26px; height: 26px; min-width: 26px; font-size: 14px; gap: 0; margin-right: 2px; }
.badge-icon { width: 20px; height: 20px; font-size: 12px; background: rgba(0,0,0,.25); }
:where(html[data-theme="light"] body:not(.admin-body)) .badge-icon { background: rgba(0,0,0,0.037); }
.badge-showcase-icon { width: 52px; height: 52px; font-size: 28px; margin: 0 auto 8px !important;
    background: color-mix(in srgb, var(--badge-color, #888) 20%, #111); border: 2px solid var(--badge-color, #555); filter: none; box-shadow: 0 0 10px color-mix(in srgb, var(--badge-color, #e6141f) 40%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .badge-showcase-icon { background: color-mix(in srgb, var(--badge-color, #9ca3af) 20%, #ffffff); border: 2px solid var(--badge-color, #d1d5db); }
.cm-badges { flex-wrap: nowrap; }
.cm-badge-more { flex: 0 0 auto; }

/* Tên trong Chat nằm trong bong bóng — giống bình luận tin tức */
.cm-bubble .cm-name { margin: 0 0 4px; font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.cm-bubble .cm-name-text { font-size: 13px; }
.cm-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.cm-text-emoji { font-size: 30px; line-height: 1.2; }
.cm-bubble.cm-emoji .cm-text-emoji { font-size: 34px; }
@media (max-width: 480px) {
    .cm-badge { width: 18px; height: 18px; min-width: 18px; font-size: 10.5px; }
    .rank-pill-xs { font-size: 9px; padding: 0 6px; }
    .badge-showcase-icon { width: 46px; height: 46px; font-size: 24px; }
}
.cm-bubble { white-space: normal; }

/* ================= POPUP MỜI VÀO KÊNH CHAT ================= */
.chat-popup { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 360px; max-width: calc(100vw - 24px); display: flex; gap: 14px; padding: 18px 18px 16px; border-radius: 16px;
    background: linear-gradient(145deg, #1b0709, #121212 60%); border: 1px solid rgba(230,20,31,.5); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 24px rgba(230,20,31,.18);
    opacity: 0; transform: translateY(18px); transition: opacity .25s, transform .25s; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-popup { background: linear-gradient(145deg, #f9e7e8, #ffffff 60%); box-shadow: 0 18px 40px rgba(0,0,0,0.18), 0 0 24px rgba(230,20,31,.18); }
.chat-popup.show { opacity: 1; transform: none; }
.chat-popup-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #888; cursor: pointer; padding: 4px; display: flex; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-popup-close { color: #6b7280; }
.chat-popup-close:hover { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-popup-close:hover { color: #111827; }
.chat-popup-icon { position: relative; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--red), #7a0a10); box-shadow: 0 0 16px rgba(230,20,31,.5); }
.chat-popup-live { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #1b0709; animation: livePulse 1.6s infinite; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-popup-live { border: 2px solid #eaaeb4; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.2); } }
.chat-popup-body strong { display: block; font-size: 16px; margin: 2px 24px 4px 0; }
.chat-popup-body p { margin: 0 0 10px; color: #cfcfcf; font-size: 13px; line-height: 1.5; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-popup-body p { color: #374151; }
.chat-popup-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray); margin-bottom: 12px; }
.chat-popup-faces { display: flex; }
.chat-popup-faces .avatar-circle { margin: 0 0 0 -6px; border: 2px solid #1b0709; }
:where(html[data-theme="light"] body:not(.admin-body)) .chat-popup-faces .avatar-circle { border: 2px solid #eaaeb4; }
.chat-popup-faces .avatar-circle:first-child { margin-left: 0; }
.chat-popup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-popup-actions a { padding: 8px 14px; font-size: 13px; }
@media (max-width: 480px) { .chat-popup { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ================= BẢN 8: MENU "CỘNG ĐỒNG", 404, SEO, NHẬT KÝ ================= */
.nav-group { position: relative; }
.nav-group-btn { background: none; border: 0; color: var(--gray); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.nav-group-btn:hover, .nav-group.active > .nav-group-btn { color: var(--white); }
.nav-group.active > .nav-group-btn { box-shadow: inset 0 -2px 0 var(--red); padding-bottom: 4px; }
.nav-group-btn .ico { transition: transform .2s; }
.nav-drop {
    display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    min-width: 190px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
    padding: 6px; box-shadow: 0 16px 36px rgba(0,0,0,.55); z-index: 30; flex-direction: column;
}
:where(html[data-theme="light"] body:not(.admin-body)) .nav-drop { box-shadow: 0 16px 36px rgba(0,0,0,0.17); }
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; }
.nav-drop a:hover { background: #1d1d1d; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-drop a:hover { background: #ffffff; }
.main-nav .nav-drop a.active:not(.btn-outline) { box-shadow: inset 3px 0 0 var(--red); padding-bottom: 9px; color: var(--white); }
/* Menu thả xuống chỉ dùng ở màn hình rộng. Rê chuột chỉ áp dụng cho thiết bị CÓ chuột (hover: hover) —
   trên iPad/điện thoại, :hover lúc chạm làm menu đổi bố cục ngay dưới ngón tay -> bấm nhầm mục khác. */
@media (min-width: 1101px) {
    .nav-group.open .nav-drop { display: flex; }
    .nav-group.open .nav-group-btn .ico { transform: rotate(180deg); }
}
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
    .nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: flex; }
    .nav-group:hover .nav-group-btn .ico { transform: rotate(180deg); }
}
@media (max-width: 1100px) {
    .nav-group-btn { display: none; }
    .nav-group { display: contents; }
    .nav-group .nav-drop, .nav-group.open .nav-drop { display: contents; }
    .nav-drop::before { display: none; }
    .main-nav .nav-drop a { border-radius: 0; padding: 12px 6px; font-size: 15px; border-bottom: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-drop a { border-bottom: 1px solid #f3f4f6; }
    .main-nav .nav-drop a:hover { background: none; }
    .main-nav .nav-drop a.active:not(.btn-outline) { padding: 12px 6px 12px 12px; }
}
@media (min-width: 781px) and (max-width: 1100px) {
    .main-nav .nav-drop a { padding: 10px 12px; border-bottom: none; }
    .main-nav .nav-drop a.active:not(.btn-outline) { padding: 10px 12px; }
}

.notfound { text-align: center; max-width: 860px; margin: 0 auto; }
.notfound-code {
    font-size: clamp(90px, 22vw, 180px); font-weight: 900; line-height: 1; letter-spacing: -4px;
    background: linear-gradient(180deg, #fff 10%, var(--red) 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 60px rgba(230,20,31,.25);
}
.notfound h1 { margin: 6px 0 8px; }
.notfound-search { display: flex; gap: 8px; max-width: 460px; margin: 22px auto; }
.notfound-search input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--white); }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.notfound-sub { margin: 40px 0 16px; font-size: 18px; text-align: left; }
.notfound .news-grid { text-align: left; }

.pill-ok, .pill-warn { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-ok { background: rgba(46,204,113,.15); color: #2ecc71; border: 1px solid rgba(46,204,113,.4); }
:where(html[data-theme="light"] body:not(.admin-body)) .pill-ok { color: #15803d; }
.pill-warn { background: rgba(241,196,15,.12); color: #f1c40f; border: 1px solid rgba(241,196,15,.35); }
:where(html[data-theme="light"] body:not(.admin-body)) .pill-warn { color: #a16207; }
.seo-status { font-size: 14px; }
.seo-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; cursor: pointer; }
.seo-check input { margin-top: 4px; }
.admin-card code { background: #1c1c1c; padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-card code { background: #ffffff; }
.audit-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.audit-filter select { padding: 9px 10px; }
.audit-table td { vertical-align: top; font-size: 13px; }
.audit-details { max-width: 420px; word-break: break-word; color: #cfcfcf; }
:where(html[data-theme="light"] body:not(.admin-body)) .audit-details { color: #374151; }
.audit-area { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #1f1f1f; font-size: 12px; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .audit-area { background: #f3f4f6; }
.nowrap { white-space: nowrap; }
.audit-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; }

/* ---- Báo cáo vi phạm ---- */
.cm-report { background: none; border: none; color: #777; cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-report { color: #6b7280; }
.cm-report:hover { color: #f1c40f; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-report:hover { color: #a16207; }
.comment-actions .c-report:hover { color: #f1c40f; }
:where(html[data-theme="light"] body:not(.admin-body)) .comment-actions .c-report:hover { color: #a16207; }
.report-link { background: none; border: 1px solid var(--border); color: var(--gray); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.report-link:hover { color: #f1c40f; border-color: rgba(241,196,15,.5); }
:where(html[data-theme="light"] body:not(.admin-body)) .report-link:hover { color: #a16207; }
.profile-report { margin-top: 10px; display: flex; justify-content: flex-end; }
.article-share-bottom .report-link { margin-left: auto; }
.report-dialog { background: var(--bg-soft); color: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 22px; width: min(440px, calc(100vw - 32px)); }
.report-dialog::backdrop { background: rgba(0,0,0,.65); }
.report-dialog h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.report-dialog h3 .ico { color: #f1c40f; }
:where(html[data-theme="light"] body:not(.admin-body)) .report-dialog h3 .ico { color: #a16207; }
.report-dialog p.muted { font-size: 13px; margin: 0 0 12px; }
.report-reasons { display: grid; gap: 6px; margin-bottom: 12px; }
.report-reason { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.report-reason:has(input:checked) { border-color: var(--red); background: rgba(230,20,31,.08); }
.report-dialog textarea { width: 100%; background: #0f0f0f; color: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font: inherit; resize: vertical; }
:where(html[data-theme="light"] body:not(.admin-body)) .report-dialog textarea { background: #f3f4f6; }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.report-actions button { cursor: pointer; }
.report-msg { font-size: 13px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; }
.report-msg.ok { background: rgba(46,204,113,.12); color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .report-msg.ok { color: #15803d; }
.report-msg.err { background: rgba(230,20,31,.12); color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .report-msg.err { color: #c81e1e; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.admin-tabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--gray); font-size: 13px; }
.admin-tabs a.active, .admin-tabs a:hover { color: var(--white); border-color: var(--red); background: rgba(230,20,31,.1); }
.report-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.report-snapshot { background: #0f0f0f; border: 1px solid var(--border); border-left: 3px solid #f1c40f; border-radius: 8px; padding: 10px 12px; font-size: 14px; word-break: break-word; max-height: 180px; overflow: auto; }
:where(html[data-theme="light"] body:not(.admin-body)) .report-snapshot { background: #f3f4f6; }
.report-meta { font-size: 13px; margin: 10px 0; line-height: 1.7; }
.report-meta a { color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .report-meta a { color: #c81e1e; }
.report-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; }
.report-form select, .report-form input[type=text] { padding: 8px 10px; }
.report-form input[type=text] { flex: 1; min-width: 180px; }
.report-form label { font-size: 13px; display: flex; gap: 6px; align-items: center; }

/* ---- Trang con cộng đồng (Nhiệm vụ, Tìm đồng đội, Giải đấu) ---- */
.section-kicker { display: inline-block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 6px; }
.page-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-hero h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 34px); }
.page-hero p { margin: 0; max-width: 620px; }

.quests-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 22px; }
.quests-hero h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 34px); }
.quests-hero p { margin: 0; max-width: 560px; }
.quests-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.quests-stats > div { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.quests-stats strong { font-size: 20px; }
.quests-stats span:last-child { font-size: 12px; color: var(--gray); }
.quests-claim-all { margin-bottom: 16px; }
.quests-claim-all .btn-solid { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; }
.quests-group { margin-bottom: 28px; }
.quests-group-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.quests-group-head h2 { margin: 0; font-size: 20px; }
.quests-group-head .muted { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.quests-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.quest-item { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.quest-item.is-done { border-color: rgba(230,20,31,.6); box-shadow: 0 0 0 1px rgba(230,20,31,.25), 0 8px 24px rgba(230,20,31,.12); }
.quest-item.is-claimed { opacity: .6; }
.quest-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #1d1d1d; color: var(--red); }
:where(html[data-theme="light"] body:not(.admin-body)) .quest-icon { background: #ffffff; }
.quest-item.is-claimed .quest-icon { color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .quest-item.is-claimed .quest-icon { color: #15803d; }
.quest-main { flex: 1; min-width: 0; }
.quest-title { font-weight: 600; font-size: 14.5px; margin-bottom: 7px; }
.quest-bar { height: 6px; background: #242424; border-radius: 99px; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .quest-bar { background: #f3f4f6; }
.quest-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #ff6a3d); border-radius: 99px; }
.quest-item.is-claimed .quest-bar span { background: #2ecc71; }
.quest-meta { font-size: 12px; margin-top: 6px; }
.quest-action { flex-shrink: 0; }
.quest-action .btn-solid, .quest-action .btn-outline { padding: 8px 14px; font-size: 13px; border: 0; cursor: pointer; white-space: nowrap; }
.quest-action .btn-outline { border: 1px solid var(--red); }
.quest-claimed { font-size: 12px; color: #2ecc71; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .quest-claimed { color: #15803d; }
@media (max-width: 480px) {
    .quest-item { flex-wrap: wrap; }
    .quest-action { width: 100%; }
    .quest-action .btn-solid, .quest-action .btn-outline { width: 100%; text-align: center; display: block; }
}

/* ---- Tìm đồng đội ---- */
.lfg-new-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 11px 18px; }
.lfg-form { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 22px; }
.lfg-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.lfg-form select, .lfg-form input, .lfg-form textarea { width: 100%; }
.lfg-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; }
.lfg-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--gray); font-size: 13px; white-space: nowrap; }
.lfg-chip span { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #262626; color: var(--white); font-size: 11px; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-chip span { background: #f3f4f6; }
.lfg-chip.active, .lfg-chip:hover { color: var(--white); border-color: var(--red); background: rgba(230,20,31,.1); }
.lfg-empty { text-align: center; padding: 50px 20px; color: var(--gray); border: 1px dashed var(--border); border-radius: 16px; }
.lfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.lfg-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.lfg-card:target { border-color: var(--red); box-shadow: 0 0 0 2px rgba(230,20,31,.3); }
.lfg-card.is-full { opacity: .75; }
.lfg-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lfg-game { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(230,20,31,.14); color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-game { color: #c81e1e; }
.lfg-mode { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: #222; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-mode { background: #f3f4f6; color: #374151; }
.lfg-left { margin-left: auto; font-size: 12px; }
.lfg-owner { display: flex; align-items: center; gap: 10px; }
.lfg-owner .avatar-circle { width: 40px; height: 40px; flex-shrink: 0; }
.lfg-owner-name { font-weight: 700; display: block; margin-bottom: 2px; }
.lfg-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #d0d0d0; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-specs { color: #374151; }
.lfg-specs span { display: inline-flex; align-items: center; gap: 5px; }
.lfg-note { margin: 0; font-size: 14px; color: #e0e0e0; word-break: break-word; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-note { color: #111827; }
.lfg-slots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lfg-slot { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed #3a3a3a; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-slot { border: 2px dashed #e5e7eb; }
.lfg-slot.filled { border-style: solid; border-color: var(--red); background: rgba(230,20,31,.25); }
.lfg-slots .avatar-mini { width: 26px !important; height: 26px !important; }
.lfg-slot-text { font-size: 12px; margin-left: 4px; }
.lfg-requests { background: #0f0f0f; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-requests { background: #f3f4f6; }
.lfg-req { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lfg-req-user { display: inline-flex; align-items: center; gap: 8px; }
.lfg-req form { display: flex; gap: 6px; }
.lfg-mini { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #1b1b1b; color: #ccc; cursor: pointer; display: grid; place-items: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-mini { background: #ffffff; color: #374151; }
.lfg-mini.ok { border-color: rgba(46,204,113,.5); color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-mini.ok { color: #15803d; }
.lfg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.lfg-actions form { margin: 0; }
.lfg-actions .btn-solid, .lfg-actions .btn-outline { border: 0; cursor: pointer; font-size: 13px; padding: 8px 14px; }
.lfg-actions .btn-outline { border: 1px solid var(--red); background: none; }
.lfg-actions-right { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.lfg-state { font-size: 13px; color: var(--gray); display: inline-flex; align-items: center; gap: 5px; }
.lfg-state.ok { color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .lfg-state.ok { color: #15803d; }
.lfg-link { background: none; border: 0; color: var(--gray); text-decoration: underline; cursor: pointer; font-size: 12px; }
@media (max-width: 780px) { .lfg-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .lfg-form-grid { grid-template-columns: 1fr; } }

/* ---- Giải đấu ---- */
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.tour-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.tour-card:hover { transform: translateY(-3px); border-color: rgba(230,20,31,.5); }
.tour-card-img { aspect-ratio: 16 / 7; background: linear-gradient(135deg, #3a0508, #0b0b0b) center / cover; position: relative; }
.tour-card-img .tour-status { position: absolute; top: 10px; left: 10px; }
.tour-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.tour-card-body h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.tour-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.tour-card-meta span, .tour-prize { display: inline-flex; align-items: center; gap: 5px; }
.tour-prize { font-size: 13px; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-prize { color: #a16207; }
.tour-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(0,0,0,.65); border: 1px solid #444; color: #ddd; letter-spacing: .3px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-status { border: 1px solid #d1d5db; color: #374151; }
.tour-status.st-open { border-color: #2ecc71; color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-status.st-open { color: #15803d; }
.tour-status.st-ongoing { border-color: var(--red); color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-status.st-ongoing { color: #c81e1e; }
.tour-status.st-finished { border-color: #f5c451; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-status.st-finished { color: #a16207; }
.tour-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 12px; }
.tour-hero { border: 1px solid var(--border); border-radius: 18px; padding: 28px; background: linear-gradient(135deg, #2a0306, #0c0c0c) center / cover; }
.tour-hero h1 { margin: 10px 0 12px; font-size: clamp(24px, 4vw, 36px); max-width: 720px; }
.tour-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #ddd; }
.tour-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tour-champion { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(245,196,81,.12); border: 1px solid rgba(245,196,81,.45); color: #f5c451; font-size: 15px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-champion { color: #a16207; }
.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 20px; align-items: start; }
.tour-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.tour-block h2 { margin: 0 0 12px; font-size: 18px; }
.tour-block p { margin: 0 0 8px; color: #ddd; line-height: 1.65; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-block p { color: #374151; }
.tour-side { position: sticky; top: 90px; scroll-margin-top: 90px; }
.tour-rewards { list-style: none; padding: 0; margin: 8px 0; }
.tour-rewards li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #222; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-rewards li { border-bottom: 1px solid #f3f4f6; }
.tour-rewards strong { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-rewards strong { color: #a16207; }
.tour-reg-form input { width: 100%; }
.tour-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.tour-team { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tour-team.mine { border-color: var(--red); }
.tour-team.champ { border-color: #f5c451; background: rgba(245,196,81,.06); }
.tour-team-members { display: flex; flex-wrap: wrap; gap: 4px; }
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket { display: flex; gap: 26px; min-width: max-content; }
.bracket-round { display: flex; flex-direction: column; width: 200px; }
.bracket-round-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 10px; text-align: center; }
.bracket-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 14px; }
.bracket-match { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #111; position: relative; }
:where(html[data-theme="light"] body:not(.admin-body)) .bracket-match { background: #ffffff; }
.bracket-round:not(:last-child) .bracket-match::after { content: ""; position: absolute; right: -27px; top: 50%; width: 26px; border-top: 1px solid #333; }
:where(html[data-theme="light"] body:not(.admin-body)) .bracket-round:not(:last-child) .bracket-match::after { border-top: 1px solid #e5e7eb; }
.bm-team { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; }
.bm-team + .bm-team { border-top: 1px solid #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .bm-team + .bm-team { border-top: 1px solid #f3f4f6; }
.bm-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-team em { color: #666; font-style: normal; }
:where(html[data-theme="light"] body:not(.admin-body)) .bm-team em { color: #6b7280; }
.bm-team b { min-width: 18px; text-align: right; }
.bm-team.win { background: rgba(230,20,31,.14); font-weight: 700; }
.bm-team.lose { opacity: .55; }
.bm-team.mine span { color: #ff8a8f; }
:where(html[data-theme="light"] body:not(.admin-body)) .bm-team.mine span { color: #b80008; }
.home-tour { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.home-tour .tour-card { flex-direction: row; }
.home-tour .tour-card-img { aspect-ratio: auto; width: 38%; min-height: 150px; flex-shrink: 0; }
@media (max-width: 900px) { .tour-layout { grid-template-columns: 1fr; } .tour-side { position: static; } }
@media (max-width: 480px) { .tour-hero { padding: 20px 16px; } .home-tour .tour-card { flex-direction: column; } .home-tour .tour-card-img { width: 100%; min-height: 120px; } }
.admin-bracket { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.admin-bracket-round { min-width: 230px; display: flex; flex-direction: column; gap: 10px; }
.admin-bracket-round h3 { margin: 0; font-size: 13px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.admin-match { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: #121212; display: flex; flex-direction: column; gap: 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-match { background: #ffffff; }
.admin-match.done { border-color: rgba(46,204,113,.35); }
.am-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.am-row.win span { color: #2ecc71; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .am-row.win span { color: #15803d; }
.am-row input { width: 58px; padding: 5px 6px; }
.am-actions { display: flex; align-items: center; gap: 8px; }
.am-actions .btn-outline { padding: 5px 10px; font-size: 12px; }

/* ---- Biểu cảm tin nhắn Kênh Chat ---- */
.cm-react-btn { background: none; border: none; color: #777; cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-react-btn { color: #6b7280; }
.cm-react-btn:hover { color: #fbbf24; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-react-btn:hover { color: #b45309; }
.cm-col { display: flex; flex-direction: column; }
.cm-rx {
    align-self: flex-end; margin: -7px 6px 2px 0; position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px 1px 3px; min-height: 22px;
    background: #1e1e1e; border: 1px solid #333; border-radius: 999px; cursor: pointer; font: inherit; color: #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
:where(html[data-theme="light"] body:not(.admin-body)) .cm-rx { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.cm-me .cm-rx { align-self: flex-start; margin: -7px 0 2px 6px; }
.cm-rx span { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 13px; line-height: 1; width: 16px; text-align: center; }
.cm-rx b { font-size: 11px; font-weight: 600; margin-left: 3px; color: #bbb; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-rx b { color: #4b5563; }
.cm-rx.mine { border-color: rgba(230,20,31,.6); }
.cm-rx:hover { border-color: #555; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-rx:hover { border-color: #d1d5db; }
.cm-rx-picker {
    position: fixed; z-index: 200; display: flex; gap: 2px; padding: 5px 6px;
    background: #1b1b1b; border: 1px solid #333; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.6);
    animation: rxIn .15s ease-out;
}
:where(html[data-theme="light"] body:not(.admin-body)) .cm-rx-picker { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
.cm-rx-picker[hidden] { display: none !important; }
.cm-rx-picker button {
    width: 38px; height: 38px; border: 0; background: none; border-radius: 50%; cursor: pointer; padding: 0;
    font-size: 24px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    transition: transform .12s, background .12s;
}
.cm-rx-picker button:hover { transform: scale(1.3) translateY(-3px); }
.cm-rx-picker button.active { background: rgba(230,20,31,.22); }
@keyframes rxIn { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .cm-rx-picker button { width: 40px; height: 40px; font-size: 25px; } }

/* ---- PWA & thông báo đẩy ---- */
.bell-push { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: rgba(230,20,31,.08); border: 0; border-top: 1px solid var(--border); color: #ff8a8f; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-push { color: #b80008; }
.bell-push.on { color: #2ecc71; background: rgba(46,204,113,.07); }
:where(html[data-theme="light"] body:not(.admin-body)) .bell-push.on { color: #15803d; }
.bell-push:disabled { color: var(--gray); cursor: default; background: none; }
.pwa-install { margin: 10px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--red); background: none; color: var(--white); font: inherit; font-size: 13px; cursor: pointer; }
.pwa-install:hover { background: rgba(230,20,31,.12); }
.report-actions .btn-outline { background: none; color: var(--white); border: 1px solid var(--border); padding: 8px 16px; border-radius: 6px; font: inherit; font-size: 14px; }
.report-actions .btn-solid { border: 0; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 700; }
@media (min-width: 781px) { .admin-sidebar { overflow-y: auto; max-height: 100vh; scrollbar-width: thin; } }

/* ---- Bản 9: quyền riêng tư ---- */
.privacy-card form { margin: 10px 0 0; }
.danger-zone { margin-top: 16px; border: 1px solid rgba(230,20,31,.35); border-radius: 12px; padding: 10px 14px; }
.danger-zone summary { cursor: pointer; color: #ff6b6b; font-weight: 600; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .danger-zone summary { color: #c81e1e; }
.danger-zone .btn-danger { cursor: pointer; }

/* ---- Bản 9: giải đấu — popup, lời mời, thư cảm ơn ---- */
.tour-popup { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.tour-popup.show { opacity: 1; }
.tour-popup-card { position: relative; width: min(520px, 100%); background: var(--bg-soft); border: 1px solid rgba(230,20,31,.45); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(230,20,31,.18); transform: translateY(14px) scale(.97); transition: transform .25s; max-height: calc(100vh - 32px); overflow-y: auto; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-popup-card { box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 0 40px rgba(230,20,31,.18); }
.tour-popup.show .tour-popup-card { transform: none; }
.tour-popup-card .chat-popup-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.55); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
.tour-popup-img { aspect-ratio: 16 / 7; background: linear-gradient(135deg, #3a0508, #0b0b0b) center / cover; position: relative; }
.tour-popup-img .tour-status { position: absolute; left: 14px; bottom: 12px; }
.tour-popup-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.tour-popup-body h3 { margin: 0; font-size: 21px; line-height: 1.3; }
.tour-popup-body .section-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tour-popup-count { font-size: 14px; color: #ddd; background: rgba(230,20,31,.1); border: 1px dashed rgba(230,20,31,.45); border-radius: 10px; padding: 8px 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-popup-count { color: #374151; }
.tour-popup-count strong { color: #ff6b6b; font-variant-numeric: tabular-nums; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-popup-count strong { color: #c81e1e; }
.tour-invite { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(230,20,31,.16), rgba(230,20,31,.04)); border: 1px solid rgba(230,20,31,.55); scroll-margin-top: 90px; }
.tour-invite-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: rgba(230,20,31,.2); color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-invite-icon { color: #c81e1e; }
.tour-invite-body { flex: 1; min-width: 0; font-size: 15px; }
.tour-invite-body p { margin: 6px 0 12px; font-size: 13.5px; }
.tour-invite-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tour-invite-actions button { cursor: pointer; border: 0; font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.tour-invite-actions .btn-outline { border: 1px solid var(--red); background: none; color: var(--white); }
.tour-invite-actions button:disabled { opacity: .5; cursor: not-allowed; }
.tour-roster { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13.5px; }
.tour-roster li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-roster li { border-bottom: 1px solid #f3f4f6; }
.tour-roster em { font-style: normal; font-size: 12px; }
.tour-roster li.st-accepted em { color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-roster li.st-accepted em { color: #15803d; }
.tour-roster li.st-pending em { color: #f1c40f; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-roster li.st-pending em { color: #a16207; }
.tour-roster li.st-declined { opacity: .6; }
.tour-roster li.st-declined em { color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-roster li.st-declined em { color: #c81e1e; }
.tour-letter { margin-top: 16px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(245,196,81,.5); background: linear-gradient(180deg, rgba(245,196,81,.08), var(--bg-soft) 40%); scroll-margin-top: 90px; }
.tour-letter-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: rgba(245,196,81,.12); color: #f5c451; font-weight: 700; letter-spacing: .3px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-letter-head { color: #a16207; }
.tour-letter-body { padding: 18px 22px 20px; line-height: 1.7; color: #e6e6e6; }
:where(html[data-theme="light"] body:not(.admin-body)) .tour-letter-body { color: #111827; }
.tour-letter-body p { margin: 0 0 10px; }
@media (max-width: 480px) { .tour-invite { flex-direction: column; } .tour-popup-body { padding: 16px; } }

/* ---- Bản 10: banner đầu trang có ảnh trình chiếu / video ---- */
.hero-has-media { position: relative; overflow: hidden; background: none !important; isolation: isolate; }
.hero-tall { min-height: min(78vh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0a0a0a; }
.hero-slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease; transform: scale(1.04); }
.hero-slide.active { opacity: 1; animation: heroZoom 12s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.hero-yt { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.hero-yt iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%) scale(1.15); border: 0; }
.hero-media.video-on .hero-video, .hero-media.video-on .hero-yt { opacity: 1; }
.hero-media.video-on .hero-poster { opacity: 0; }
.hero-overlay { position: absolute; inset: 0; }
.hero-pause { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 1; }
.hero-pause:hover { background: rgba(230,20,31,.6); }
.hero-pause .i-play, .hero-pause.is-paused .i-pause { display: none; }
.hero-pause.is-paused .i-play { display: inline; }
.hero-has-media h1, .hero-has-media p { text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.hero-has-media p { color: #d6d6d6; }
@media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide.active { animation: none; transition: none; } }
.hero-admin-types { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-admin-types label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; }
.hero-admin-types label:has(input:checked) { border-color: var(--red); background: rgba(230,20,31,.1); }
.hero-admin-block { border: 1px dashed var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.hero-admin-block h3 { margin: 0 0 8px; font-size: 15px; }
.hero-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.hero-thumb { width: 150px; }
.hero-thumb div { aspect-ratio: 16 / 9; border-radius: 8px; background: #111 center / cover; border: 1px solid var(--border); margin-bottom: 4px; }
.hero-thumb label { font-size: 12px; display: flex; gap: 6px; align-items: center; }
.hero-admin-preview video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* ---- Bản 10: Vinh danh thành viên ---- */
.home-hof { position: relative; }
.hof-head .section-kicker { display: inline-flex; align-items: center; gap: 6px; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-head .section-kicker { color: #a16207; }
.hof-sub { margin: 4px 0 0; }
.hof-featured { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hof-card { position: relative; border-radius: 18px; overflow: visible; background: #111; border: 1px solid #2a2a2a; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-card { background: #ffffff; border: 1px solid #e5e7eb; }
.hof-card:hover { transform: translateY(-5px); }
.hof-img { position: relative; aspect-ratio: 3 / 4; border-radius: 17px 17px 0 0; overflow: hidden; background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-img { background: #ffffff; }
.hof-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hof-card:hover .hof-photo { transform: scale(1.06); }
.hof-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.95)); }
.hof-initial { display: grid !important; place-items: center; font-size: 64px; font-weight: 800; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-initial { color: #111827; }
.hof-num { position: absolute; top: 10px; left: 10px; z-index: 1; font-weight: 900; font-size: 15px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-num { border: 1px solid rgba(0,0,0,0.140); }
.hof-info { position: relative; padding: 0 14px 14px; margin-top: -58px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.hof-title { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; background: rgba(245,196,81,.15); color: #f5c451; border: 1px solid rgba(245,196,81,.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-title { color: #a16207; }
.hof-info h3 { margin: 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.hof-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hof-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.hof-socials { display: inline-flex; gap: 5px; }
.hof-social { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1f1f1f; color: #ddd; border: 1px solid #333; transition: background .2s, color .2s; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-social { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.hof-social:hover { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-social:hover { color: #111827; }
.hof-facebook:hover { background: #1877f2; border-color: #1877f2; }
.hof-tiktok:hover { background: #111; border-color: #25f4ee; color: #25f4ee; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-tiktok:hover { background: #ffffff; color: #0e7490; }
.hof-youtube:hover { background: #ff0033; border-color: #ff0033; }
.hof-share-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid #3a3a3a; color: #ddd; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-share-btn { border: 1px solid #e5e7eb; color: #374151; }
.hof-share-btn:hover, .hof-share-btn[aria-expanded="true"] { border-color: var(--red); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-share-btn:hover, :where(html[data-theme="light"] body:not(.admin-body)) .hof-share-btn[aria-expanded="true"] { color: #111827; }
.hof-share-sm { padding: 5px 7px; }
.hof-share-pop { position: absolute; right: 10px; bottom: calc(100% - 50px); z-index: 5; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-share-pop { box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.hof-share-pop .share-bar { margin: 0; }
.hof-pos-1 { border-color: rgba(245,196,81,.7); box-shadow: 0 0 0 1px rgba(245,196,81,.35), 0 14px 40px rgba(245,196,81,.18); }
.hof-pos-1 .hof-num { background: linear-gradient(135deg, #f5c451, #b8860b); color: #111; border: 0; }
.hof-pos-2 { border-color: rgba(200,210,220,.6); }
.hof-pos-2 .hof-num { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #111; border: 0; }
.hof-pos-3 { border-color: rgba(205,127,50,.65); }
.hof-pos-3 .hof-num { background: linear-gradient(135deg, #e3a06a, #9a5b2c); color: #111; border: 0; }
.hof-pos-1::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; background: linear-gradient(135deg, #f5c451, transparent 40%, transparent 60%, #f5c451); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: hofShine 4s linear infinite; background-size: 300% 300%; }
@keyframes hofShine { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.hof-top-title { margin: 30px 0 14px; font-size: 18px; }
.hof-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hof-mini { position: relative; display: flex; gap: 10px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 10px; transition: border-color .2s; }
.hof-mini:hover { border-color: rgba(230,20,31,.5); }
.hof-mini-num { position: absolute; top: -8px; left: -6px; font-size: 11px; font-weight: 800; background: var(--red); color: #fff; border-radius: 999px; padding: 2px 7px; }
.hof-mini-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #333; font-size: 22px !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-mini-photo { border: 2px solid #e5e7eb; }
.hof-mini-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hof-mini-body strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-mini-sub { font-size: 11.5px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-mini .hof-social { width: 24px; height: 24px; }
.hof-mini .hof-social .ico { width: 13px; height: 13px; }
.hof-mini .hof-share-pop { bottom: calc(100% + 4px); }
@media (max-width: 1180px) { .hof-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .hof-featured { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 12px; margin: 0 -2px; scrollbar-width: thin; }
    .hof-card { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
    .hof-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .hof-top { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hof-pos-1::before { animation: none; } .hof-card, .hof-photo { transition: none; } }
.hof-admin-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hof-admin-item { display: flex; flex-direction: column; gap: 6px; background: #161616; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-admin-item { background: #ffffff; }
.hof-admin-item input[type=file] { font-size: 11px; color: var(--gray); max-width: 100%; }
.hof-admin-thumb { aspect-ratio: 1; border-radius: 8px; background: #0f0f0f center / cover; border: 1px solid var(--border); position: relative; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-admin-thumb { background: #f3f4f6 center / cover; }
.hof-admin-thumb.tall { aspect-ratio: 3 / 4; }
.hof-admin-thumb span { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 999px; }
@media (max-width: 1100px) { .hof-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hof-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Bản 10: Kênh chat đội ---- */
.tc-page .chat-head { flex-wrap: wrap; }
.tc-members { margin-left: auto; display: flex; gap: 2px; }
.tc-members .avatar-mini { width: 26px !important; height: 26px !important; }
.tc-paused { text-align: center; font-size: 13px; color: var(--gray); padding: 8px; background: #151515; border-top: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .tc-paused { background: #ffffff; }
.tc-open { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.tc-badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #fff; color: var(--red); font-size: 11px; font-weight: 800; text-align: center; }
.hof-share-btn { white-space: nowrap; flex-shrink: 0; }
.hof-actions { min-width: 0; }
@media (min-width: 901px) and (max-width: 1280px) { .hof-card .hof-share-label { display: none; } .hof-card .hof-share-btn { padding: 6px 8px; } }
@media (max-width: 600px) {
    .hof-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .hof-mini { flex-direction: column; text-align: center; padding: 14px 8px 10px; }
    .hof-mini-photo { width: 60px; height: 60px; }
    .hof-mini-body { width: 100%; align-items: center; }
    .hof-mini-body strong, .hof-mini-sub { max-width: 100%; }
    .hof-mini .hof-actions { justify-content: center; gap: 6px; flex-wrap: wrap; }
    .hof-mini .hof-share-pop { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---- Bản 10: chân trang đầy đủ & trang Giới thiệu ---- */
.site-footer { text-align: left; padding: 44px 20px 20px; background: linear-gradient(180deg, transparent, rgba(230,20,31,.04)); }
.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: 28px; }
.footer-col h4 { margin: 4px 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-col h4 { color: #111827; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul a { color: var(--gray); font-size: 14px; transition: color .2s; }
.footer-col ul a:hover { color: var(--red); }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: 1px; }
.footer-logo img { max-height: 40px; max-width: 180px; }
.footer-logo strong { color: var(--red); }
.footer-tagline { color: #fff; font-weight: 600; margin: 12px 0 6px; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-tagline { color: #111827; }
.footer-about { color: var(--gray); font-size: 13.5px; line-height: 1.65; margin: 0 0 14px; max-width: 360px; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #171717; border: 1px solid var(--border); color: #ddd; transition: background .2s, border-color .2s, color .2s, transform .2s; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-socials a { background: #ffffff; color: #374151; }
.footer-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
.footer-contact { margin-top: 16px !important; }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--gray); }
.footer-contact li .ico { flex-shrink: 0; margin-top: 3px; color: var(--red); }
.footer-founders ul { gap: 12px; }
.footer-founders li { display: flex; align-items: center; gap: 10px; }
.footer-founder-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #2d2d2d; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-founder-img { border: 2px solid #e5e7eb; }
.founder-initial { display: grid !important; place-items: center; color: #fff; font-weight: 800; }
:where(html[data-theme="light"] body:not(.admin-body)) .founder-initial { color: #111827; }
.footer-founders li span { display: flex; flex-direction: column; min-width: 0; }
.footer-founders strong { font-size: 14px; }
.footer-founders small { color: var(--gray); font-size: 12px; }
.footer-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; color: var(--red); }
.footer-bottom { max-width: 1100px; margin: 34px auto 0; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: 13px; }
.footer-bottom-actions { display: flex; align-items: center; gap: 10px; }
.footer-bottom .pwa-install { margin: 0; }
.footer-top { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-top { color: #374151; }
.footer-top:hover { border-color: var(--red); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-top:hover { color: #111827; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
}
.about-page { max-width: 1000px; }
.about-hero { text-align: center; padding: 20px 0 30px; }
.about-hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 6px 0 8px; }
.about-tagline { color: var(--gray); font-size: 17px; margin: 0 0 22px; }
.about-stats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.about-stats div { min-width: 140px; padding: 14px 18px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; flex-direction: column; }
.about-stats strong { font-size: 26px; color: var(--red); }
.about-stats span { font-size: 12.5px; color: var(--gray); }
.about-story { max-width: 760px; margin: 10px auto 10px; }
.about-team-title { text-align: center; margin: 40px 0 20px; scroll-margin-top: 90px; }
.founders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.founder-card { text-align: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 24px 18px 20px; transition: transform .25s, border-color .25s; }
.founder-card:hover { transform: translateY(-4px); border-color: rgba(230,20,31,.5); }
.founder-photo-wrap { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--red), #f5c451); }
.founder-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--bg-soft); font-size: 42px; }
.founder-card h3 { margin: 0 0 4px; font-size: 18px; }
.founder-role { display: inline-block; font-size: 12px; font-weight: 700; color: #f5c451; letter-spacing: .4px; text-transform: uppercase; }
:where(html[data-theme="light"] body:not(.admin-body)) .founder-role { color: #a16207; }
.founder-card p { color: #cfcfcf; font-size: 14px; line-height: 1.6; margin: 10px 0 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .founder-card p { color: #374151; }
.founder-links { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.founder-profile { font-size: 12.5px; color: var(--red); display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.about-contact { margin: 40px auto 0; max-width: 760px; padding: 20px 22px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--border); }
.about-contact h2 { margin: 0 0 10px; font-size: 20px; }
.about-contact .footer-socials { margin-top: 14px; }
.founders-admin textarea { font-size: 13px; }
.section h2.about-team-title { border-left: 0; padding-left: 0; }
.section h2.about-team-title::after { content: ""; display: block; width: 56px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #f5c451); }
.about-contact ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---- Nhật ký cập nhật ---- */
.updates-page { max-width: 860px; }
.upd-timeline { list-style: none; padding: 0; margin: 10px 0 0; position: relative; }
.upd-timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--red), #2a2a2a 60%); }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-timeline::before { background: linear-gradient(180deg, var(--red), #e5e7eb 60%); }
.upd-item { position: relative; padding-left: 40px; margin-bottom: 18px; scroll-margin-top: 90px; }
.upd-dot { position: absolute; left: 4px; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-dot { border: 3px solid #d1d5db; }
.upd-item.is-latest .upd-dot { border-color: var(--red); box-shadow: 0 0 0 4px rgba(230,20,31,.2); }
.upd-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; }
.upd-item.is-latest .upd-card { border-color: rgba(230,20,31,.5); }
.upd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upd-version { font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #222; border: 1px solid #333; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-version { background: #f3f4f6; border: 1px solid #e5e7eb; }
.upd-item.is-latest .upd-version { background: var(--red); border-color: var(--red); color: #fff; }
.upd-latest { font-size: 11px; font-weight: 700; color: #2ecc71; text-transform: uppercase; letter-spacing: .5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-latest { color: #15803d; }
.upd-date { margin-left: auto; font-size: 12.5px; }
.section .upd-card h2 { border: 0; padding: 0; margin: 10px 0 10px; font-size: 18px; }
.upd-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.upd-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-card li { color: #374151; }
.upd-tag { flex-shrink: 0; min-width: 64px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-top: 2px; }
.upd-new { background: rgba(46,204,113,.14); color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-new { color: #15803d; }
.upd-improve { background: rgba(77,163,255,.14); color: #4da3ff; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-improve { color: #1d4ed8; }
.upd-fix { background: rgba(241,196,15,.14); color: #f1c40f; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-fix { color: #a16207; }
.upd-security { background: rgba(230,20,31,.14); color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-security { color: #c81e1e; }
.upd-note { text-align: center; margin-top: 26px; font-size: 13.5px; }
.footer-version { color: var(--gray); text-decoration: underline; }
@media (max-width: 480px) { .upd-card li { gap: 8px; font-size: 14px; } .upd-tag { min-width: 0; } .upd-card { padding: 14px 14px; } }

/* ---- Bản 10.2: menu quản trị theo nhóm, góp ý ---- */
.admin-nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #6b6b6b; padding: 14px 12px 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav-group { color: #6b7280; }
.admin-nav-group:first-child { padding-top: 4px; }
.admin-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-count { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.5; }
.admin-nav a.active .nav-count { background: #fff; color: var(--red); }
.admin-tabs .nav-count { margin-left: 4px; }
@media (max-width: 780px) { .admin-nav-group { display: none; } }
.module-cat-title { margin: 26px 0 12px; font-size: 16px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .module-cat-title { color: #374151; }
.module-dep-warn { font-size: 12.5px; color: #f1c40f; display: flex; gap: 6px; align-items: center; margin: 6px 0 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .module-dep-warn { color: #a16207; }
.upd-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #222; flex-wrap: wrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-admin-row { border-bottom: 1px solid #f3f4f6; }
.upd-admin-main { min-width: 0; flex: 1; }
.upd-admin-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.upd-admin-tags .upd-tag { min-width: 0; }
.upd-admin-actions { display: flex; gap: 6px; }
.upd-admin-actions form { margin: 0; }
.fb-box { margin-top: 34px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 22px; scroll-margin-top: 90px; }
.fb-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.section .fb-head h2 { border: 0; padding: 0; margin: 0 0 4px; font-size: 20px; }
.fb-head p { margin: 0; font-size: 14px; }
.fb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fb-cats label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; }
.fb-cats label:has(input:checked) { border-color: var(--red); background: rgba(230,20,31,.1); }
.fb-form textarea { width: 100%; background: #0f0f0f; color: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font: inherit; resize: vertical; }
:where(html[data-theme="light"] body:not(.admin-body)) .fb-form textarea { background: #f3f4f6; }
.fb-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.fb-actions .btn-solid { border: 0; cursor: pointer; }
.fb-mine { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.fb-mine h3 { margin: 0 0 10px; font-size: 15px; }
.fb-mine-item { padding: 10px 0; border-bottom: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .fb-mine-item { border-bottom: 1px solid #f3f4f6; }
.fb-mine-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-mine-item p { margin: 6px 0 0; font-size: 14px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .fb-mine-item p { color: #374151; }
.fb-reply { margin-top: 8px; padding: 8px 12px; border-left: 3px solid #2ecc71; background: rgba(46,204,113,.06); border-radius: 6px; font-size: 13.5px; }
.about-hero .btn-outline { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; }

/* ===== Bản 10.3 — Đơn vị đồng hành ===== */
.home-sponsors .section-kicker, .sp-hero .section-kicker { display: inline-flex; align-items: center; gap: 6px; }
.sp-sub { margin: 4px 0 0; }
.sp-marquee { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sp-track { display: flex; gap: 16px; width: max-content; animation: sp-scroll var(--sp-dur, 40s) linear infinite; }
.sp-marquee:hover .sp-track, .sp-marquee:focus-within .sp-track { animation-play-state: paused; }
@keyframes sp-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
    .sp-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .sp-track { animation: none; }
    .sp-track > [aria-hidden="true"] { display: none; }
}
.sp-card { flex: 0 0 auto; width: 200px; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 14px 12px;
    background: linear-gradient(160deg, #181818, #101010); border: 1px solid var(--border); border-radius: 14px; text-align: center; transition: border-color .2s, transform .2s, background .2s; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-card { background: linear-gradient(160deg, #ffffff, #f3f4f6); }
a.sp-card:hover { border-color: rgba(245, 196, 81, .55); transform: translateY(-2px); }
.sp-logo { height: 64px; width: 100%; display: flex; align-items: center; justify-content: center; }
.sp-logo img { max-height: 64px; max-width: 160px; width: auto; height: auto; object-fit: contain; transition: transform .25s; }
a.sp-card:hover .sp-logo img { transform: scale(1.05); }
.sp-textlogo { font-weight: 800; font-size: 19px; letter-spacing: .5px; color: #f5f5f5; line-height: 1.15; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-textlogo { color: #111827; }
.sp-name { font-size: 13px; font-weight: 600; color: #ddd; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-name { color: #374151; }
.sp-tier { font-size: 11px; color: #f5c451; text-transform: uppercase; letter-spacing: .6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-tier { color: #a16207; }
.sp-has-logo .sp-name { font-size: 12px; color: var(--gray); font-weight: 500; }
.sp-open { border-style: dashed; border-color: rgba(230, 20, 31, .45); background: rgba(230, 20, 31, .04); }
.sp-open .sp-logo { color: var(--red); }
.sp-open .sp-logo .ico { padding: 10px; border: 1px dashed rgba(230, 20, 31, .6); border-radius: 50%; width: 48px; height: 48px; }
.sp-open .sp-tier { color: var(--red); }
a.sp-open:hover { border-color: var(--red); background: rgba(230, 20, 31, .09); }

.sp-cta { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 22px; align-items: center; padding: 20px 22px;
    border: 1px solid rgba(245, 196, 81, .28); border-radius: 16px; background: radial-gradient(circle at 0% 0%, rgba(245, 196, 81, .10), transparent 55%), linear-gradient(135deg, #171210, #0f0f0f); }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-cta { background: radial-gradient(circle at 0% 0%, rgba(245, 196, 81, .10), transparent 55%), linear-gradient(135deg, #ffffff, #f3f4f6); }
.sp-cta h3 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 8px; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-cta h3 { color: #a16207; }
.sp-cta p { margin: 0; color: #c8c8c8; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-cta p { color: #374151; }
.sp-stats { display: flex; gap: 18px; }
.sp-stats div { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.sp-stats strong { font-size: 22px; line-height: 1.1; }
.sp-stats span { font-size: 12px; color: var(--gray); }
.sp-cta-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 1000px) { .sp-cta { grid-template-columns: 1fr; text-align: left; } .sp-stats { justify-content: flex-start; } .sp-cta-btn { justify-content: center; } }
@media (max-width: 600px) {
    .sp-card { width: 156px; min-height: 116px; }
    .sp-logo, .sp-logo img { max-height: 50px; }
    .sp-logo { height: 50px; }
    .sp-stats { gap: 10px; flex-wrap: wrap; }
    .sp-cta { padding: 16px; }
}

/* Trang Hợp tác & Tài trợ */
.sp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.sp-hero-actions a { display: inline-flex; align-items: center; gap: 8px; }
.sp-h2 { margin: 34px 0 14px; font-size: 21px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp-grid .sp-card { width: auto; }
.sp-benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.sp-benefits li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; font-size: 14.5px; }
.sp-check { flex: 0 0 auto; display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(46, 204, 113, .14); color: #2ecc71; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-check { color: #15803d; }
.sp-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.sp-package { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 6px; }
.sp-package.is-main { border-color: rgba(245, 196, 81, .5); background: linear-gradient(160deg, rgba(245, 196, 81, .08), var(--bg-soft) 60%); }
.sp-package h3 { margin: 4px 0 0; font-size: 17px; }
.sp-package p { margin: 0; color: #bdbdbd; font-size: 14px; flex: 1; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-package p { color: #4b5563; }
.sp-package-ic { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-package-ic { color: #a16207; }
.sp-package .read-more { margin-top: 6px; }
.sp-form-box { margin-top: 34px; }
.sp-form .field { margin-bottom: 12px; }
.sp-form label { display: block; font-size: 13px; color: #cfcfcf; margin-bottom: 5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-form label { color: #374151; }
.sp-form input[type=text], .sp-form input[type=email], .sp-form input[type=tel], .sp-form select, .sp-form textarea {
    width: 100%; padding: 10px 12px; background: #0e0e0e; border: 1px solid var(--border); border-radius: 10px; color: var(--white); font: inherit; font-size: 14.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-form input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .sp-form input[type=email], :where(html[data-theme="light"] body:not(.admin-body)) .sp-form input[type=tel], :where(html[data-theme="light"] body:not(.admin-body)) .sp-form select, :where(html[data-theme="light"] body:not(.admin-body)) .sp-form textarea { background: #f3f4f6; }
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus { outline: none; border-color: var(--red); }
.sp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sp-form-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.sp-human { margin: 0 !important; max-width: 200px; }
.sp-form-foot .btn-solid { border: none; cursor: pointer; font: inherit; font-weight: 700; }
@media (max-width: 640px) { .sp-form-grid { grid-template-columns: 1fr; } .sp-form-foot .btn-solid { width: 100%; } .sp-human { max-width: none; width: 100%; } }

/* Quản trị — Đơn vị đồng hành */
.sp-admin-list { display: grid; gap: 10px; }
.sp-admin-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #0f0f0f; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-admin-row { background: #f3f4f6; }
.sp-admin-row.is-new { border-style: dashed; }
.sp-admin-logo { height: 70px; border-radius: 10px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 12px; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-admin-logo { background: #ffffff; }
.sp-admin-logo img { max-width: 100px; max-height: 60px; object-fit: contain; }
.sp-admin-fields { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 70px; gap: 8px; align-items: center; }
.sp-admin-fields input[type=file] { grid-column: span 2; font-size: 12.5px; }
.sp-admin-checks { grid-column: span 2; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.sp-admin-checks label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.sp-admin-checks .danger { color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-admin-checks .danger { color: #c81e1e; }
.sp-rq-contact { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; margin: 8px 0; }
.sp-rq-contact a, .sp-rq-contact span { display: inline-flex; align-items: center; gap: 6px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-rq-contact a, :where(html[data-theme="light"] body:not(.admin-body)) .sp-rq-contact span { color: #374151; }
.sp-rq-contact a:hover { color: var(--red); }
@media (max-width: 900px) {
    .sp-admin-row { grid-template-columns: 1fr; }
    .sp-admin-fields { grid-template-columns: 1fr 70px; }
    .sp-admin-fields input[type=file], .sp-admin-checks { grid-column: 1 / -1; }
}
.sp-admin-fields input[type=url], .sp-admin-fields input[type=number], .sp-content-form input[type=email], .sp-content-form input[type=number], .sp-content-form select {
    width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font-size: 14px; font-family: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .sp-admin-fields input[type=url], :where(html[data-theme="light"] body:not(.admin-body)) .sp-admin-fields input[type=number], :where(html[data-theme="light"] body:not(.admin-body)) .sp-content-form input[type=email], :where(html[data-theme="light"] body:not(.admin-body)) .sp-content-form input[type=number], :where(html[data-theme="light"] body:not(.admin-body)) .sp-content-form select { background: #ffffff; }

/* ===== Bản 10.5 — Thời gian vinh danh (tinh tế) ===== */
.hof-period { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: #b9a15a; letter-spacing: .2px; }
.hof-period .ico { opacity: .8; flex: 0 0 auto; }
.hof-period > span { line-height: 1.3; }
.hof-until-soon { color: #e6a23c; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-until-soon { color: #a36a15; }
.hof-mini .hof-period { font-size: 11px; margin-top: 3px; }
.hof-admin-dates { display: flex; gap: 8px; }
.hof-admin-dates label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--gray); }
.hof-admin-dates input[type=date] { padding: 7px 8px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font: inherit; font-size: 13px; color-scheme: dark; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-admin-dates input[type=date] { background: #ffffff; }

/* =====================================================================
   BẢN 11 — GIAO DIỆN KIỂU ỨNG DỤNG CHO ĐIỆN THOẠI & IPAD DỌC
   (tham khảo bố cục Grab / Chợ Tốt / Xanh SM: tab đáy + nút giữa nổi bật,
   header gọn có ô tìm kiếm, lưới icon dịch vụ, dải cuộn ngang, bottom sheet)
   Khổ "app": ≤900px, hoặc ≤1100px khi màn hình dọc. iPad ngang & máy tính giữ menu ngang.
   ===================================================================== */
.app-only, .sheet-backdrop, .app-sheet { display: none; }
:root { --tabbar-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); }

@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }

    /* ---- Header gọn: logo + ô tìm kiếm + chuông (kiểu Chợ Tốt) ---- */
    /* bỏ backdrop-filter: nó biến header thành khung chứa của phần tử position:fixed (bảng chuông) */
    .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0b0b0b; z-index: 50; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-header { background: #f3f4f6; }
    .site-header .header-inner { padding: 10px 14px; gap: 10px; justify-content: flex-start; }
    .site-header .nav-toggle, .site-header .main-nav { display: none !important; }
    .site-header .brand { flex-shrink: 0; }
    .site-header .nav-bell { margin: 0 !important; flex-shrink: 0; }
    .app-search-btn {
        display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; height: 40px; padding: 0 14px;
        border-radius: 999px; background: #1a1a1a; border: 1px solid var(--border); color: #8d8d8d;
        font: inherit; font-size: 14px; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
    }
:where(html[data-theme="light"] body:not(.admin-body)) .app-search-btn { background: #ffffff; color: #6b7280; }
    .app-search-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .app-search-btn .ico { flex-shrink: 0; color: #bbb; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-search-btn .ico { color: #4b5563; }
    .app-search-btn:active { background: #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-search-btn:active { background: #f3f4f6; }

    /* ---- Thanh tab dưới đáy ---- */
    .app-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 4px var(--safe-b);
        background: #0e0e0e; background: rgba(14,14,14,.94);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
    }
:where(html[data-theme="light"] body:not(.admin-body)) .app-tabbar { background: #f3f4f6; }
    .app-tab {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        position: relative; color: #8a8a8a; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .1px;
        background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
:where(html[data-theme="light"] body:not(.admin-body)) .app-tab { color: #6b7280; }
    .app-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .app-tab-ico { position: relative; display: flex; align-items: center; justify-content: center; height: 26px; transition: transform .15s; }
    .app-tab:active .app-tab-ico { transform: scale(.9); }
    .app-tab.active { color: var(--white); }
    .app-tab.active .app-tab-ico { color: var(--red-glow); }
    .app-tab.active::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--red); border-radius: 0 0 3px 3px; box-shadow: 0 0 8px var(--red-glow); }
    .app-tab-avatar { width: 24px !important; height: 24px !important; font-size: 11px !important; margin: 0 !important; }
    .app-tab.active .app-tab-avatar { box-shadow: 0 0 0 2px var(--red); }
    .app-tab-badge {
        position: absolute; top: -3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
        background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #0e0e0e;
    }
:where(html[data-theme="light"] body:not(.admin-body)) .app-tab-badge { box-shadow: 0 0 0 2px #f3f4f6; }
    /* Nút giữa nổi bật (kiểu "Đăng tin" Chợ Tốt) */
    .app-tab-center .app-tab-ico {
        width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; color: #fff;
        background: linear-gradient(145deg, var(--red-glow), #a30d15);
        box-shadow: 0 6px 18px rgba(230,20,31,.45), 0 0 0 5px var(--bg);
    }
    .app-tab-center.active .app-tab-ico { color: #fff; box-shadow: 0 6px 22px rgba(255,42,42,.65), 0 0 0 5px var(--bg); }
    .app-tab-center::before { display: none; }
    .app-tab-center .app-tab-label { color: var(--white); }

    /* ---- Bottom sheet ---- */
    .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .25s; }
    .sheet-backdrop.show { opacity: 1; }
    .app-sheet {
        display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
        max-height: 86vh; max-height: 86dvh; padding-bottom: var(--safe-b);
        background: var(--bg-soft); border: 1px solid var(--border); border-bottom: 0; border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0,0,0,.6); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
    }
:where(html[data-theme="light"] body:not(.admin-body)) .app-sheet { box-shadow: 0 -12px 40px rgba(0,0,0,0.18); }
    .app-sheet.show { transform: translateY(0); }
    .sheet-handle { display: flex; justify-content: center; padding: 10px 0 6px; cursor: grab; touch-action: none; flex-shrink: 0; }
    .sheet-handle span { width: 42px; height: 5px; border-radius: 3px; background: #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-handle span { background: #d1d5db; }
    .sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 16px 20px; }
    html.sheet-lock, html.sheet-lock body { overflow: hidden; }
    .sheet-profile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #1e1e1e, #161616); border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-profile { background: linear-gradient(135deg, #f3f4f6, #ffffff); }
    .sheet-avatar { width: 50px !important; height: 50px !important; font-size: 19px !important; margin: 0 !important; }
    .sheet-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .sheet-profile-text strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sheet-profile-text small { color: var(--gray); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sheet-profile + .sheet-group { margin-top: 12px; }
    .sheet-title { margin: 20px 4px 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gray); }
    .sheet-group { background: #181818; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-group { background: #ffffff; }
    .sheet-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 14px; font-size: 15px; border-bottom: 1px solid #232323; -webkit-tap-highlight-color: transparent; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-row { border-bottom: 1px solid #f3f4f6; }
    .sheet-row:last-child { border-bottom: 0; }
    .sheet-row > span:nth-child(2) { flex: 1; min-width: 0; }
    .sheet-row:active { background: #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-row:active { background: #f3f4f6; }
    .sheet-row-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(230,20,31,.12); color: #ff4d55; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-row-ico { color: #c8101a; }
    .sheet-row-go { color: #555; }
    .sheet-row.active { background: #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-row.active { background: #f3f4f6; }
    .sheet-row.active .sheet-row-ico { background: var(--red); color: #fff; }
    .sheet-guest { padding: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(230,20,31,.2), rgba(230,20,31,.04)); border: 1px solid rgba(230,20,31,.35); }
    .sheet-guest strong { font-size: 17px; }
    .sheet-guest p { margin: 6px 0 14px; font-size: 14px; }
    .sheet-guest-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .sheet-guest-btns a { text-align: center; padding: 11px 10px; }
    .sheet-install { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed #444; background: none; color: var(--white); font: inherit; font-size: 14px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-install { border: 1px dashed #d1d5db; }
    .sheet-logout { display: block; margin-top: 14px; padding: 13px; border-radius: 12px; text-align: center; font-weight: 600; color: #ff6b6b; background: #1a1010; border: 1px solid #3a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-logout { color: #c81e1e; background: #ffffff; border: 1px solid #dfb9b9; }
    /* Tìm kiếm */
    .sheet-search-box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 14px; background: #1c1c1c; border: 1px solid #333; color: var(--gray); }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-search-box { background: #ffffff; border: 1px solid #e5e7eb; }
    .sheet-search-box:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,20,31,.18); }
    .sheet-search-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px; }
    .sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .sheet-chip { padding: 7px 15px; border-radius: 999px; border: 1px solid #333; background: #1a1a1a; color: #ccc; font: inherit; font-size: 13.5px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-chip { border: 1px solid #e5e7eb; background: #ffffff; color: #374151; }
    .sheet-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
    .sheet-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .sheet-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: #1a1a1a; border: 1px solid var(--border); font-size: 13.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-tag { background: #ffffff; }
    .sheet-tag .ico { color: #ff4d55; }
:where(html[data-theme="light"] body:not(.admin-body)) .sheet-tag .ico { color: #c8101a; }

    /* Chuông thông báo → dạng bottom sheet */
    .site-header .bell-panel {
        position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto !important; max-width: none;
        display: flex; flex-direction: column; max-height: 78vh; max-height: 78dvh; z-index: 62; padding-bottom: var(--safe-b);
        border-radius: 20px 20px 0 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 0 -12px 40px rgba(0,0,0,.6);
    }
:where(html[data-theme="light"] body:not(.admin-body)) .site-header .bell-panel { box-shadow: 0 0 0 100vmax rgba(0,0,0,0.17), 0 -12px 40px rgba(0,0,0,0.18); }
    .site-header .bell-panel::before { content: ""; display: block; width: 42px; height: 5px; border-radius: 3px; background: #444; margin: 9px auto 0; flex-shrink: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-header .bell-panel::before { background: #d1d5db; }
    .site-header .bell-list { max-height: none; flex: 1; min-height: 120px; }

    /* ---- Trang chủ ---- */
    .hero { padding: 26px 16px 22px; }
    .hero-logo { width: 64px; margin-bottom: 10px; }
    .hero-logo-img { max-height: 60px; max-width: 160px; }
    .hero h1 { font-size: 24px; letter-spacing: 1.5px; }
    .hero p { font-size: 14px; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-cta { flex-direction: row; justify-content: center; gap: 10px; }
    .hero-cta a { flex: 1; max-width: 220px; padding: 11px 12px; }
    .hero-cta-user { display: none; }
    .hero:has(.hero-cta-user) p { margin-bottom: 0; }
    .hero-has-media { margin: 12px 14px 0; border-radius: 18px; border: 1px solid var(--border); }
    .hero-tall { min-height: 46vh; }

    .app-home-top { display: block; max-width: 1100px; margin: 0 auto; padding: 14px 14px 0; }
    .app-greet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #1d1d1d, #141414); border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .app-greet { background: linear-gradient(135deg, #ffffff, #ffffff); }
    .app-greet-avatar { width: 44px !important; height: 44px !important; font-size: 17px !important; margin: 0 !important; grid-row: span 2; }
    .app-greet-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .app-greet-text small { color: var(--gray); font-size: 12px; }
    .app-greet-text strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-greet-rank { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
    .app-greet-rank small { color: var(--gray); font-size: 11.5px; white-space: nowrap; }
    .app-greet-bar { grid-column: 2 / -1; height: 5px; border-radius: 3px; background: #2a2a2a; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-greet-bar { background: #e5e7eb; }
    .app-greet-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ff7a45); }

    /* Lưới icon dịch vụ (kiểu Grab / Xanh SM) */
    .app-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; margin-top: 12px; padding: 16px 6px 14px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--border); }
    .app-svc { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; -webkit-tap-highlight-color: transparent; }
    .app-svc-ico { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #ff4d55; background: rgba(230,20,31,.12); border: 1px solid rgba(230,20,31,.24); transition: transform .15s, background .15s; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-svc-ico { color: #c8101a; }
    .app-svc:active .app-svc-ico { transform: scale(.9); background: rgba(230,20,31,.24); }
    .app-svc-label { font-size: 12px; font-weight: 600; line-height: 1.25; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-svc-label { color: #374151; }

    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px 0; }
    .stat-card { padding: 12px 6px; border-top-width: 2px; border-radius: 12px; }
    .stat-card .num { font-size: 22px; line-height: 1.2; }
    .stat-card .label { font-size: 10.5px; letter-spacing: .6px; }

    .section { padding: 24px 14px; }
    .section h2 { font-size: 19px; }
    .section-head { flex-wrap: nowrap; margin-bottom: 12px; align-items: flex-end; }
    .section-head .section-link { font-size: 13px; white-space: nowrap; flex-shrink: 0; }

    /* Dải cuộn ngang có nam châm (thay lưới dọc dài) */
    .home-news-grid, .games-grid, .home-tour, .feature-grid, .hof-top {
        display: flex !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        gap: 12px; margin-left: -14px; margin-right: -14px; padding: 2px 14px 12px; scroll-padding: 0 14px; scrollbar-width: none;
    }
    .home-news-grid::-webkit-scrollbar, .games-grid::-webkit-scrollbar, .home-tour::-webkit-scrollbar, .feature-grid::-webkit-scrollbar, .hof-top::-webkit-scrollbar { display: none; }
    .home-news-grid > *, .games-grid > *, .home-tour > *, .feature-grid > *, .hof-top > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
    .games-grid > * { flex-basis: 40%; }
    .feature-grid > * { flex-basis: 74%; }
    .hof-top > * { flex-basis: 44%; }
    .home-tour .tour-card { flex-direction: column; }
    .home-tour .tour-card-img { width: 100%; min-height: 130px; }
    .game-tile:hover { transform: none; }

    /* Popup & trang chat tránh thanh tab */
    .chat-popup { bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px) !important; }
    .chat-messages { height: calc(100vh - 290px - var(--tabbar-h)); height: calc(100dvh - 290px - var(--tabbar-h)); }
    .footer-top { display: none; }
    .site-footer nav.footer-col { display: none; } /* "Khám phá" đã có ở thanh tab & sheet Tôi */
}
/* iPad dọc: rộng hơn → lưới 8 ô, thẻ cuộn nhỏ lại, sheet nằm giữa */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait), (min-width: 600px) and (max-width: 900px) {
    .app-services { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .home-news-grid > * { flex-basis: 46%; }
    .games-grid > * { flex-basis: 23%; }
    .home-tour > * { flex-basis: 62%; }
    .feature-grid > * { flex-basis: 40%; }
    .hof-top > * { flex-basis: 30%; }
    .app-sheet { left: calc(50% - 300px); right: calc(50% - 300px); }
    .app-tabbar { justify-content: center; }
    .app-tab { max-width: 132px; }
    .site-header .bell-panel { left: calc(50% - 300px) !important; right: calc(50% - 300px) !important; }
    .section, .app-home-top, .stats { padding-left: 24px; padding-right: 24px; }
    .home-news-grid, .games-grid, .home-tour, .feature-grid, .hof-top { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; scroll-padding: 0 24px; }
}
/* Điện thoại nhỏ: ẩn chữ thương hiệu để ô tìm kiếm đủ rộng */
@media (max-width: 480px) {
    .site-header .brand > span { display: none; }
    .site-header .brand-logo-img { max-width: 90px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-sheet, .sheet-backdrop { transition: none; }
}

/* =====================================================================
   BẢN 11.1 — VINH DANH: khung sáng chạy quanh thẻ chính + dải thẻ phụ tự trượt
   ===================================================================== */
@property --hof-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hof-card { --hof-c: #e6141f; --hof-c2: #ff7a45; isolation: isolate; }
.hof-pos-1 { --hof-c: #f5c451; --hof-c2: #fff3c4; }
.hof-pos-2 { --hof-c: #cfd6df; --hof-c2: #ffffff; }
.hof-pos-3 { --hof-c: #e3a06a; --hof-c2: #ffd7b0; }
.hof-card { border-color: rgba(255,255,255,.07); background: #0f0f0f; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-card { border-color: rgba(0,0,0,0.049); background: #f3f4f6; }
.hof-pos-1 { box-shadow: 0 16px 44px rgba(245,196,81,.16); }
/* viền: tia sáng xoay quanh (conic-gradient + @property); trình duyệt cũ hiện viền tĩnh */
.hof-card::before, .hof-card::after {
    content: ""; position: absolute; inset: -2px; border-radius: 20px; padding: 2px; pointer-events: none; z-index: 2;
    background: linear-gradient(135deg, var(--hof-c), transparent 45%, transparent 55%, var(--hof-c));
    background: conic-gradient(from var(--hof-a), transparent 0deg 250deg, var(--hof-c) 300deg, var(--hof-c2) 335deg, var(--hof-c) 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: hofSpin 4.5s linear infinite; background-size: auto;
}
.hof-card::after { inset: -3px; padding: 4px; filter: blur(7px); opacity: .85; z-index: 1; }
.hof-pos-2::before, .hof-pos-2::after { animation-delay: -1.1s; }
.hof-pos-3::before, .hof-pos-3::after { animation-delay: -2.2s; }
.hof-pos-4::before, .hof-pos-4::after { animation-delay: -3.3s; animation-duration: 5.5s; }
.hof-pos-5::before, .hof-pos-5::after { animation-delay: -.6s; animation-duration: 5.5s; }
.hof-pos-1::before, .hof-pos-1::after { animation-duration: 3.6s; }
@keyframes hofSpin { to { --hof-a: 360deg; } }
.hof-card:hover::before, .hof-card:hover::after { animation-duration: 2s; }
.hof-card .hof-info, .hof-card .hof-img { z-index: 3; }
.hof-img { position: relative; }

/* Máy tính: bục vinh danh — #1 ở giữa, lớn hơn */
@media (min-width: 901px) {
    .hof-featured { align-items: end; gap: 16px; }
    .hof-count-5 { grid-template-columns: 1fr 1.08fr 1.22fr 1.08fr 1fr; }
    .hof-count-5 .hof-pos-4 { order: 1; } .hof-count-5 .hof-pos-2 { order: 2; } .hof-count-5 .hof-pos-1 { order: 3; }
    .hof-count-5 .hof-pos-3 { order: 4; } .hof-count-5 .hof-pos-5 { order: 5; }
    .hof-count-3 { grid-template-columns: 1fr 1.2fr 1fr; max-width: 820px; margin: 0 auto; }
    .hof-count-3 .hof-pos-2 { order: 1; } .hof-count-3 .hof-pos-1 { order: 2; } .hof-count-3 .hof-pos-3 { order: 3; }
    .hof-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hof-count-2 { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
    .hof-count-1 { grid-template-columns: minmax(0, 300px); justify-content: center; }
    .hof-pos-1 .hof-info h3 { font-size: 19px; }
    .hof-count-5 .hof-pos-4, .hof-count-5 .hof-pos-5 { margin-bottom: 18px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .hof-featured { gap: 12px; }
    .hof-card .hof-info { padding: 0 11px 12px; }
    .hof-card .hof-info h3 { font-size: 15px; }
}

/* Thẻ vinh danh phụ: dải nhỏ tự trượt */
.hof-top-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 34px 0 12px; }
.hof-top-head .hof-top-title { margin: 0; font-size: 17px; }
.hof-top-hint { display: none; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.hof-rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 10px 2px 6px; outline: none; }
.hof-rail::-webkit-scrollbar { display: none; }
.hof-rail-track { display: flex; gap: 12px; width: max-content; margin: 0 auto; }
.hof-rail.is-auto { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hof-rail.is-auto .hof-rail-track { margin: 0; }
.hof-rail:focus-visible { box-shadow: 0 0 0 2px rgba(230,20,31,.5); border-radius: 14px; }
.hof-rail .hof-mini {
    flex: 0 0 232px; width: 232px; flex-direction: row; text-align: left; align-items: center; gap: 10px;
    padding: 10px 12px 10px 10px; border-radius: 14px; background: linear-gradient(135deg, #171717, #121212); border: 1px solid #262626;
}
:where(html[data-theme="light"] body:not(.admin-body)) .hof-rail .hof-mini { background: linear-gradient(135deg, #ffffff, #ffffff); border: 1px solid #f3f4f6; }
.hof-rail .hof-mini:hover { border-color: rgba(245,196,81,.45); }
.hof-rail .hof-mini-photo { width: 44px; height: 44px; font-size: 18px !important; border: 2px solid rgba(245,196,81,.35); }
.hof-rail .hof-mini-body { align-items: flex-start; width: auto; gap: 1px; }
.hof-mini-name { font-size: 13.5px; font-weight: 700; color: var(--white); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-mini-name:hover { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-mini-name:hover { color: #a16207; }
.hof-rail .hof-mini-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #c9b27a; max-width: 100%; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-rail .hof-mini-sub { color: #8e7129; }
.hof-rail .hof-mini-sub .ico { flex-shrink: 0; }
.hof-rail .hof-period { margin-top: 1px; font-size: 10.5px; }
.hof-rail .hof-period .ico { width: 11px; height: 11px; }
.hof-mini-socials { flex-direction: column; gap: 4px; margin-left: auto; }
.hof-rail .hof-social { width: 24px; height: 24px; }
.hof-rail .hof-social .ico { width: 12px; height: 12px; }
.hof-rail .hof-mini-num { top: -7px; left: 8px; font-size: 10px; padding: 1px 7px; background: linear-gradient(135deg, #e6141f, #a30d15); box-shadow: 0 2px 8px rgba(230,20,31,.4); }

/* Điện thoại & iPad dọc */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .hof-featured { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -14px; padding: 10px 16px 16px; scroll-padding: 0 16px; scrollbar-width: none; }
    .hof-featured::-webkit-scrollbar { display: none; }
    .hof-card { flex: 0 0 64%; max-width: 250px; scroll-snap-align: start; }
    .hof-card.hof-pos-1 { flex-basis: 72%; max-width: 280px; }
    .hof-card:hover { transform: none; }
    .hof-card::after { filter: blur(5px); }
    .hof-top-head { margin-top: 18px; }
    .hof-top-hint { display: inline-flex; }
    .hof-rail { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
    .hof-rail .hof-mini { flex-basis: 214px; width: 214px; }
    .hof-rail .hof-mini-socials { flex-direction: row; }
    .hof-rail .hof-mini-socials { display: none; }
}
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait), (min-width: 600px) and (max-width: 900px) {
    .hof-featured { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
    .hof-card { flex-basis: 34%; } .hof-card.hof-pos-1 { flex-basis: 38%; }
    .hof-rail { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hof-card::before, .hof-card::after { animation: none; }
}
@media (max-width: 599px) {
    .hof-card { flex-basis: 54%; }
    .hof-card.hof-pos-1 { flex-basis: 62%; }
    .hof-card .hof-img { aspect-ratio: 4 / 5; }
    .hof-card .hof-info { padding: 0 11px 11px; margin-top: -50px; gap: 5px; }
    .hof-card .hof-info h3 { font-size: 15px; }
    .hof-card .hof-title { font-size: 10px; padding: 2px 7px; }
    .hof-card .hof-share-label { display: none; }
    .hof-card .hof-share-btn { padding: 6px 8px; }
    .hof-card .hof-social { width: 26px; height: 26px; }
}
.hof-top-head:has(+ .hof-rail:not(.is-auto)) .hof-top-hint { display: none; }

/* =====================================================================
   BẢN 11.2 — VINH DANH: BỘ THẺ BÀI (lật sang trái, ánh kim hologram)
   ===================================================================== */
.hof-stage { --card-w: 300px; }
.hof-stage.has-deck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px 48px; align-items: center; }
.hof-deck-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hof-featured.hof-deck { display: grid !important; grid-template-columns: var(--card-w) !important; width: var(--card-w); margin: 0 150px 0 0; padding: 8px 0 0; overflow: visible; gap: 0; align-items: stretch; }
.hof-stage:not(.has-deck) .hof-featured.hof-deck { margin: 0 auto; }
.hof-deck .hof-card {
    grid-area: 1 / 1; width: var(--card-w); max-width: none !important; flex: none !important; margin: 0 !important; order: 0 !important;
    transform-origin: 50% 100%; will-change: transform; touch-action: pan-y; -webkit-user-select: none; user-select: none;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .45s, filter .45s;
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck .hof-card { box-shadow: 0 18px 40px rgba(0,0,0,0.17); }
.hof-deck .hof-card:hover { transform: none; }
.hof-deck .hof-photo { -webkit-user-drag: none; }
.hof-deck.is-js .hof-card[data-pos="0"] { z-index: 6; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hof-deck.is-js .hof-card[data-pos="1"] { z-index: 5; transform: translateX(20%) scale(.9) rotate(5deg); filter: brightness(.62); }
.hof-deck.is-js .hof-card[data-pos="2"] { z-index: 4; transform: translateX(36%) scale(.81) rotate(10deg); filter: brightness(.48); }
.hof-deck.is-js .hof-card[data-pos="3"] { z-index: 3; transform: translateX(50%) scale(.73) rotate(15deg); filter: brightness(.38); }
.hof-deck.is-js .hof-card[data-pos="4"] { z-index: 2; transform: translateX(61%) scale(.66) rotate(19deg); filter: brightness(.3); }
.hof-deck.is-js .hof-card:not([data-pos="0"]) { cursor: pointer; }
.hof-deck:not(.is-js) .hof-card:not(:first-child) { visibility: hidden; }
.hof-deck .hof-card.tilt { transition: transform .12s linear, opacity .45s, filter .45s; }
.hof-deck .hof-card.dragging { transition: none !important; cursor: grabbing; }
.hof-deck .hof-card.fly-left { z-index: 7 !important; transform: translateX(-135%) rotate(-24deg) rotateY(35deg) !important; opacity: 0; transition: transform .38s cubic-bezier(.5,0,.8,.4), opacity .38s; }
.hof-deck .hof-card.fly-right { z-index: 7 !important; transform: translateX(135%) rotate(24deg) !important; opacity: 0; transition: transform .38s ease-in, opacity .38s; }
.hof-deck .hof-card.from-left { transform: translateX(-135%) rotate(-24deg) !important; opacity: 0; transition: none !important; }
.hof-deck .hof-card:not([data-pos="0"])::before, .hof-deck .hof-card:not([data-pos="0"])::after { animation-play-state: paused; opacity: .3; }
.hof-deck .hof-card[data-pos="0"]::after { opacity: 1; }
.hof-deck .hof-num { z-index: 4; }

/* Ánh kim hologram + chói sáng như thẻ bài cao cấp */
.hof-holo, .hof-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; }
.hof-holo {
    opacity: 0; mix-blend-mode: color-dodge; transition: opacity .4s;
    background: repeating-linear-gradient(115deg, transparent 0%, rgba(255,0,140,.42) 7%, rgba(0,238,255,.42) 14%, rgba(255,230,0,.38) 21%, transparent 28%);
    background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%);
}
.hof-glare { opacity: 0; mix-blend-mode: overlay; transition: opacity .3s; background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.55), transparent 48%); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-glare { background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(0,0,0,0.385), transparent 48%); }
.hof-deck .hof-card[data-pos="0"] .hof-holo { opacity: .16; animation: hofHolo 7s ease-in-out infinite alternate; }
.hof-deck .hof-card.hof-pos-1[data-pos="0"] .hof-holo { opacity: .24; }
.hof-deck .hof-card.tilt .hof-holo { animation: none; opacity: .38; }
.hof-deck .hof-card.tilt .hof-glare { opacity: 1; }
@keyframes hofHolo { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
/* khung trong như thẻ bài */
.hof-deck .hof-img { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck .hof-img { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); }
.hof-deck .hof-card.hof-pos-1 .hof-img::before, .hof-deck .hof-card.hof-pos-2 .hof-img::before, .hof-deck .hof-card.hof-pos-3 .hof-img::before {
    content: ""; position: absolute; inset: 8px; z-index: 2; border-radius: 12px; pointer-events: none; border: 1px solid var(--hof-c); opacity: .55;
}

/* Điều khiển */
.hof-deck-ctrl { display: flex; align-items: center; gap: 14px; margin-left: calc(var(--card-w) / 2 - 76px); }
.hof-deck-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #161616; border: 1px solid #333; color: #eee; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-btn { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; }
.hof-deck-btn:hover { border-color: #f5c451; background: #1d1a12; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-btn:hover { background: #ffffff; }
.hof-deck-btn:active { transform: scale(.92); }
.hof-deck-count { min-width: 44px; text-align: center; font-size: 13px; color: var(--gray); }
.hof-deck-count b { color: #f5c451; font-size: 16px; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-count b { color: #a16207; }

/* Danh sách chọn thẻ */
.hof-deck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hof-deck-item {
    --c: #e6141f; position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: 34px 46px minmax(0, 1fr); align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 14px; background: #131313; border: 1px solid #242424; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: border-color .25s, background .25s, transform .25s;
}
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-item { background: #ffffff; border: 1px solid #f3f4f6; }
.hof-li-1 { --c: #f5c451; } .hof-li-2 { --c: #cfd6df; } .hof-li-3 { --c: #e3a06a; }
.hof-deck-item:hover { border-color: #3a3a3a; transform: translateX(3px); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-item:hover { border-color: #e5e7eb; }
.hof-deck-item.on { border-color: var(--c); background: #1a1712; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, #131313), #131313 70%); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-item.on { background: #ffffff; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, #ffffff), #ffffff 70%); }
.hof-li-num { font-weight: 900; font-size: 15px; color: var(--c); }
.hof-li-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #2e2e2e; font-size: 18px !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-li-photo { border: 2px solid #e5e7eb; }
.hof-deck-item.on .hof-li-photo { border-color: var(--c); }
.hof-li-text { display: flex; flex-direction: column; min-width: 0; }
.hof-li-text strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-li-text small { font-size: 12px; color: #b9a15a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-li-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.hof-li-bar i { display: block; height: 100%; width: 0; background: var(--c); }
.bar-run .hof-deck-item.on .hof-li-bar i { animation: hofBar 5s linear forwards; }
.hof-stage:hover .hof-li-bar i { animation-play-state: paused !important; }
@keyframes hofBar { to { width: 100%; } }

@media (min-width: 901px) and (max-width: 1100px) { .hof-stage { --card-w: 270px; } .hof-featured.hof-deck { margin-right: 130px; } .hof-stage.has-deck { gap: 30px; } }

/* Điện thoại & iPad dọc: bộ bài ở giữa, danh sách thành hàng avatar */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .hof-stage { --card-w: min(62vw, 280px); }
    .hof-stage.has-deck { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
    .hof-deck-wrap { align-items: center; }
    .hof-featured.hof-deck { margin: 0 auto !important; padding: 8px 0 0 !important; transform: translateX(calc(var(--card-w) * -0.2)); }
    .hof-deck.is-js .hof-card[data-pos="1"] { transform: translateX(16%) scale(.9) rotate(4deg); }
    .hof-deck.is-js .hof-card[data-pos="2"] { transform: translateX(29%) scale(.81) rotate(8deg); }
    .hof-deck.is-js .hof-card[data-pos="3"] { transform: translateX(40%) scale(.73) rotate(12deg); }
    .hof-deck.is-js .hof-card[data-pos="4"] { transform: translateX(49%) scale(.66) rotate(15deg); }
    .hof-deck-ctrl { margin: 0; }
    .hof-deck-list { flex-direction: row; justify-content: center; gap: 6px; width: 100%; }
    .hof-deck-list li { flex: 0 1 64px; }
    .hof-deck-item { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 8px 2px 10px; background: none; border-color: transparent; }
    .hof-deck-item:hover { transform: none; border-color: transparent; }
    .hof-deck-item.on { background: #151515; background: color-mix(in srgb, var(--c) 10%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .hof-deck-item.on { background: #ffffff; }
    .hof-li-photo { width: 48px; height: 48px; order: 1; }
    .hof-li-num { order: 2; font-size: 12px; }
    .hof-li-text { display: none; }
    .hof-deck-item.on .hof-li-photo { box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
}
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait), (min-width: 600px) and (max-width: 900px) {
    .hof-stage { --card-w: 300px; }
    .hof-deck-list li { flex-basis: 110px; }
    .hof-li-text { display: flex; align-items: center; order: 3; } .hof-li-text small { display: none; } .hof-li-text strong { font-size: 12.5px; max-width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
    .hof-deck .hof-card, .hof-holo { transition: none !important; animation: none !important; }
}

/* =====================================================================
   BẢN 11.3 — CHÂN TRANG GỌN (điện thoại & iPad dọc) + CÀI ỨNG DỤNG iPHONE
   ===================================================================== */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .site-footer { padding: 22px 14px 14px; background: #0c0c0c; border-top: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-footer { background: #f3f4f6; border-top: 1px solid #f3f4f6; }
    .footer-grid { display: flex !important; flex-direction: column; gap: 14px; }
    .footer-brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
    .footer-logo { font-size: 16px; }
    .footer-logo svg { width: 28px; height: 26px; }
    .footer-logo img { max-height: 32px; }
    .footer-tagline { grid-column: 1; margin: 0; font-size: 12.5px; color: var(--gray); font-weight: 500; }
    .footer-about { display: none; }
    .footer-socials { grid-column: 1 / -1; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
    .footer-socials a { width: 32px; height: 32px; border-radius: 9px; }
    .footer-socials a:hover { transform: none; }
    /* Liên kết pháp lý + liên hệ: dạng thẻ nhỏ xếp dòng */
    .footer-col h4 { display: none; }
    .footer-col ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .footer-col ul a { display: inline-block; padding: 6px 11px; border-radius: 999px; background: #151515; border: 1px solid #242424; font-size: 12.5px; color: #bdbdbd; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-col ul a { background: #ffffff; border: 1px solid #f3f4f6; color: #4b5563; }
    .footer-contact { margin-top: 8px !important; }
    .footer-contact li { align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #151515; border: 1px solid #242424; font-size: 12.5px; max-width: 100%; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-contact li { background: #ffffff; border: 1px solid #f3f4f6; }
    .footer-contact li a, .footer-contact li span { padding: 0; border: 0; background: none; font-size: 12.5px; color: #bdbdbd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-contact li a, :where(html[data-theme="light"] body:not(.admin-body)) .footer-contact li span { color: #4b5563; }
    .footer-contact li .ico { margin: 0; width: 13px; height: 13px; }
    /* Đội ngũ sáng lập: hàng avatar chồng nhau */
    .footer-founders { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #131313; border: 1px solid #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-founders { background: #ffffff; border: 1px solid #f3f4f6; }
    .footer-founders::before { content: "Đội ngũ sáng lập"; font-size: 12.5px; color: var(--gray); white-space: nowrap; }
    .footer-founders ul { flex-direction: row; flex-wrap: nowrap; gap: 0; }
    .footer-founders li { gap: 0; }
    .footer-founders li + li { margin-left: -9px; }
    .footer-founders li span { display: none; }
    .footer-founder-img { width: 30px; height: 30px; border: 2px solid #131313; font-size: 12px !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-founder-img { border: 2px solid #ffffff; }
    .footer-more { margin: 0 0 0 auto; white-space: nowrap; font-size: 12.5px; }
    .footer-bottom { margin-top: 14px; padding-top: 12px; flex-direction: column-reverse !important; align-items: stretch !important; gap: 10px; border-top-color: #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .footer-bottom { border-top-color: #f3f4f6; }
    .footer-bottom p { font-size: 11.5px; text-align: center; line-height: 1.5; }
    .footer-bottom-actions { justify-content: center; }
    .footer-bottom .pwa-install { width: 100%; justify-content: center; }
}
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait), (min-width: 600px) and (max-width: 900px) {
    .site-footer { padding: 26px 24px 16px; }
    .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-about { display: block; grid-column: 1; margin: 2px 0 0; font-size: 12.5px; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .footer-socials { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-content: flex-end; max-width: 240px; }
    .footer-founders { align-self: start; }
    .footer-bottom .pwa-install { width: auto; }
}
/* Đang chạy như ứng dụng: chừa vùng tai thỏ, nút quay lại, ẩn nút cài */
.app-back { display: none; }
.is-standalone .site-header { padding-top: env(safe-area-inset-top, 0px); }
.is-standalone #pwaInstall, .is-standalone .pwa-install-btn, .is-standalone #installBanner { display: none !important; }
.is-standalone .app-back:not([hidden]) { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: -2px; border-radius: 50%; background: #161616; border: 1px solid var(--border); color: #eee; flex-shrink: 0; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .is-standalone .app-back:not([hidden]) { background: #ffffff; color: #111827; }
.is-standalone body { -webkit-user-select: none; user-select: none; }
.is-standalone input, .is-standalone textarea, .is-standalone [contenteditable], .is-standalone .cm-text, .is-standalone article { -webkit-user-select: text; user-select: text; }

/* Sheet dùng được ở mọi khổ màn hình (hướng dẫn cài ứng dụng) */
.sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .25s; }
.sheet-backdrop.show { opacity: 1; }
.app-sheet.sheet-global {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
    max-height: 88vh; max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-soft); border: 1px solid var(--border); border-bottom: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.6); transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
:where(html[data-theme="light"] body:not(.admin-body)) .app-sheet.sheet-global { box-shadow: 0 -12px 40px rgba(0,0,0,0.18); }
.app-sheet.sheet-global.show { transform: translateY(0); }
.app-sheet.sheet-global .sheet-handle { display: flex; justify-content: center; padding: 10px 0 6px; cursor: grab; touch-action: none; flex-shrink: 0; }
.app-sheet.sheet-global .sheet-handle span { width: 42px; height: 5px; border-radius: 3px; background: #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-sheet.sheet-global .sheet-handle span { background: #d1d5db; }
.app-sheet.sheet-global .sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 22px; }
@media (min-width: 640px) {
    .app-sheet.sheet-global { left: calc(50% - 250px); right: calc(50% - 250px); bottom: 24px; border-radius: 20px; border-bottom: 1px solid var(--border); transform: translateY(calc(100% + 40px)); }
}
html.sheet-lock, html.sheet-lock body { overflow: hidden; }
.inst-head { display: flex; align-items: center; gap: 14px; }
.inst-icon { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 6px 18px rgba(230,20,31,.3); }
.inst-head strong { display: block; font-size: 18px; }
.inst-head small { color: var(--gray); font-size: 13px; }
.inst-perks { list-style: none; margin: 14px 0 4px; padding: 12px 14px; display: grid; gap: 8px; border-radius: 14px; background: #181818; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-perks { background: #ffffff; }
.inst-perks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #d6d6d6; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-perks li { color: #374151; }
.inst-perks .ico { color: #ff4d55; flex-shrink: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-perks .ico { color: #c8101a; }
.inst-guide h4 { margin: 18px 2px 10px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.inst-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 8px; }
.inst-steps li { counter-increment: st; display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 12px; background: #161616; border: 1px solid #242424; font-size: 14px; line-height: 1.45; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-steps li { background: #ffffff; border: 1px solid #f3f4f6; }
.inst-steps li[hidden] { display: none; }
.inst-ico { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(0,122,255,.14); color: #4ea3ff; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-ico { color: #0058b8; }
.inst-ico::after { content: counter(st); position: absolute; top: -6px; left: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.inst-inline { vertical-align: -3px; color: #4ea3ff; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-inline { color: #0058b8; }
.inst-steps b { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-steps b { color: #111827; }
.sheet-install .inst-only-26 { display: none; }
.sheet-install.is-ios26 .inst-only-26 { display: flex; }
.sheet-install.is-ios26 .inst-only-old { display: none; }
.inst-note { font-size: 12.5px; margin: 10px 2px 0; }
.inst-warn { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: #f5c451; font-size: 13.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-warn { color: #a16207; }
.inst-copy { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; font: inherit; font-weight: 600; cursor: pointer; }
.inst-copied { text-align: center; color: #4ade80; font-size: 13px; margin: 10px 0 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-copied { color: #15803d; }
.inst-pointer { position: fixed; z-index: 62; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); left: 50%; margin-left: -20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #0a84ff; color: #fff; box-shadow: 0 6px 20px rgba(10,132,255,.6); animation: instBounce 1s ease-in-out infinite; pointer-events: none; }
.inst-pointer.at-right { left: auto; right: 14px; margin-left: 0; }
@keyframes instBounce { 50% { transform: translateY(8px); } }
/* Banner mời cài */
.inst-banner {
    position: fixed; z-index: 45; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
    border-radius: 16px; background: #171717; background: rgba(23,23,23,.97); border: 1px solid #2e2e2e; box-shadow: 0 12px 34px rgba(0,0,0,.6);
    transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
:where(html[data-theme="light"] body:not(.admin-body)) .inst-banner { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 12px 34px rgba(0,0,0,0.18); }
.inst-banner.show { transform: none; opacity: 1; }
.inst-banner img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.inst-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inst-banner-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-banner-text small { font-size: 12px; color: var(--gray); }
.inst-banner-go { padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.inst-banner-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; color: #999; cursor: pointer; flex-shrink: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .inst-banner-x { color: #4b5563; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .inst-banner { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); }
}
@media (min-width: 640px) { .inst-banner { left: auto; right: 20px; width: 380px; } }
@media (prefers-reduced-motion: reduce) { .inst-pointer { animation: none; } .inst-banner, .app-sheet.sheet-global { transition: none; } }

/* Danh sách thành viên (bản 11.3): điện thoại & iPad dọc → mỗi người 1 hàng gọn, không lướt ngang */
.members-table .mc-date .ico { display: none; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .table-scroll { overflow: visible; }
    .table-scroll table.members-table { min-width: 0; }
    table.members-table, table.members-table tbody { display: block; background: none; border-radius: 0; overflow: visible; }
    table.members-table thead { display: none; }
    table.members-table tr.mrow {
        position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
        min-height: 64px; padding: 10px 12px 10px 64px; margin-bottom: 8px;
        background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px;
    }
    table.members-table tr.mrow:hover td { background: none; }
    table.members-table tr.mrow:active { background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) table.members-table tr.mrow:active { background: #ffffff; }
    table.members-table tr.mrow td { display: flex; align-items: center; padding: 0; border: 0; font-size: 12.5px; min-width: 0; }
    /* hàng 1: tên ........ hạng */
    .mrow .mc-name { order: 1; flex: 1 1 0; }
    table.members-table tr.mrow::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
    .mrow .mc-name .member-link { min-width: 0; max-width: 100%; }
    .mrow .mc-name .member-link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } /* cả hàng bấm được */
    .mrow .mc-name .avatar-circle { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; margin: 0; font-size: 16px; }
    .mrow .mc-name span { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mrow .mc-rank { order: 2; margin-left: auto; }
    .mrow .mc-rank .rank-pill { font-size: 10.5px; padding: 1px 8px; }
    /* hàng 2: @username · vai trò · ngày ........ tim · huy hiệu */
    .mrow .mc-user { order: 4; color: var(--gray); max-width: 38%; }
    .mrow .mc-user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; }
    .mrow .mc-role { order: 5; }
    .mrow .mc-role .role-tag { font-size: 10px; padding: 1px 7px; }
    .mrow .mc-date { order: 6; gap: 3px; color: #7d7d7d; font-size: 11.5px !important; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .mrow .mc-date { color: #6b7280; }
    .mrow .mc-date .ico { display: inline; }
    .mrow .mc-heart { order: 7; margin-left: auto; gap: 3px; color: #ff6b81; font-size: 12px !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .mrow .mc-heart { color: #b8001b; }
    .mrow .mc-badges { order: 8; gap: 2px; }
    .mrow .mc-badges .badge-chip-sm { width: 20px; height: 20px; font-size: 11px; padding: 0; display: inline-grid; place-items: center; }
    .mrow .mc-badges .muted { font-size: 11px; }
    .mrow .mc-badges:has(> .muted:only-child) { display: none; }
    .mrow a, .mrow button { position: relative; z-index: 1; }
    .mrow .mc-name .member-link { position: static; }
}
@media (max-width: 380px) { .mrow .mc-date { display: none !important; } }
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait), (min-width: 600px) and (max-width: 900px) {
    table.members-table tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    table.members-table tr.mrow { margin: 0; }
}

/* =====================================================================
   BẢN 12 — THẺ BÀI & BỘ SƯU TẬP
   ===================================================================== */
.tcard { --rc: #9ca3af; --rc2: #e5e7eb; position: relative; display: block; width: 100%; border-radius: 14px; isolation: isolate; color: #fff; text-decoration: none;
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tcard.tilt { transition: transform .1s linear; }
.tcard-frame { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #0f0f12; border: 2px solid var(--rc); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.tcard-art { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 35%, #111), #0b0b0e 70%); background: #16161a; }
.tcard-art img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.tcard-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(6,6,8,.92)); pointer-events: none; }
.tcard-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 900; color: rgba(255,255,255,.18); }
.tcard-holo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s;
    background: repeating-linear-gradient(115deg, transparent 0%, rgba(255,0,140,.4) 7%, rgba(0,238,255,.4) 14%, rgba(255,230,0,.35) 21%, transparent 28%); background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); }
.tcard.tilt .tcard-holo { opacity: .35; }
.tcard-code { position: absolute; top: 8px; left: 8px; z-index: 3; min-width: 26px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-align: center;
    color: #111; background: var(--rc); box-shadow: 0 2px 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.tcard-count { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2); }
.tcard-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; padding: 8px 10px 9px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.tcard-info strong { font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-info small { font-size: 11px; color: var(--rc2); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tcard.is-locked .tcard-frame { border-style: dashed; border-color: #333; filter: grayscale(1); opacity: .55; }
.tcard.is-locked .tcard-code { background: #333; color: #aaa; box-shadow: none; }
/* Viền sáng chạy quanh (cấp Sử thi trở lên) — dùng lại @property --hof-a */
.tcard.rar-3::before, .tcard.rar-4::before, .tcard.rar-5::before, .tcard.rar-6::before, .tcard.rar-7::before, .tcard.rar-8::before,
.tcard.rar-5::after, .tcard.rar-6::after, .tcard.rar-7::after, .tcard.rar-8::after {
    content: ""; position: absolute; inset: -2px; border-radius: 16px; padding: 2px; pointer-events: none; z-index: 4;
    background: linear-gradient(135deg, var(--rc), transparent 45%, transparent 55%, var(--rc));
    background: conic-gradient(from var(--hof-a), transparent 0deg 250deg, var(--rc) 300deg, var(--rc2) 335deg, var(--rc) 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: hofSpin 5s linear infinite;
}
.tcard.rar-5::after, .tcard.rar-6::after, .tcard.rar-7::after, .tcard.rar-8::after { inset: -4px; padding: 4px; filter: blur(7px); opacity: .8; z-index: -1; }
.tcard.rar-4::before { animation-duration: 4.4s; }
.tcard.rar-5::before, .tcard.rar-5::after { animation-duration: 3.8s; }
.tcard.rar-6::before, .tcard.rar-6::after { animation-duration: 3.2s; }
.tcard.rar-7::before, .tcard.rar-7::after { animation-duration: 2.6s; }
.tcard.rar-7 .tcard-holo { opacity: .14; animation: hofHolo 7s ease-in-out infinite alternate; }
/* SSS+: viền cầu vồng + hologram liên tục */
.tcard.rar-8 .tcard-frame { border-color: transparent; background: linear-gradient(#0f0f12, #0f0f12) padding-box, linear-gradient(120deg, #ff3cac, #784ba0, #2b86c5, #7df9ff, #f5c451, #ff3cac) border-box; }
.tcard.rar-8::before, .tcard.rar-8::after { background: conic-gradient(from var(--hof-a), #ff3cac, #f5c451, #7df9ff, #784ba0, #ff3cac); animation-duration: 2.2s; }
.tcard.rar-8 .tcard-holo { opacity: .22; animation: hofHolo 5s ease-in-out infinite alternate; }
.tcard.rar-8 .tcard-code { background: linear-gradient(120deg, #ff3cac, #f5c451, #7df9ff); }
.tcard.is-locked::before, .tcard.is-locked::after { display: none; }
.tcard-sm .tcard-info strong { font-size: 11.5px; } .tcard-sm .tcard-info small { font-size: 9.5px; } .tcard-sm .tcard-info { padding: 5px 6px 6px; }
.tcard-sm .tcard-code { top: 5px; left: 5px; font-size: 9px; padding: 1px 6px; min-width: 0; } .tcard-sm .tcard-frame { border-width: 1.5px; border-radius: 10px; }
.tcard-sm::before, .tcard-sm::after { border-radius: 12px !important; }
.tcard-lg .tcard-info strong { font-size: 19px; } .tcard-lg .tcard-info small { font-size: 12.5px; } .tcard-lg .tcard-code { font-size: 13px; padding: 3px 10px; }
.rar-text-8 { background: linear-gradient(120deg, #ff3cac, #f5c451, #7df9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 16px; }
@media (prefers-reduced-motion: reduce) { .tcard::before, .tcard::after, .tcard-holo { animation: none !important; } }

/* Shop */
.cards-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px; margin-bottom: 20px; border-radius: 18px;
    background: radial-gradient(circle at 85% 10%, rgba(168,85,247,.18), transparent 45%), radial-gradient(circle at 10% 90%, rgba(230,20,31,.16), transparent 50%), var(--bg-soft); border: 1px solid var(--border); }
.cards-hero h1 { margin: 6px 0 6px; font-size: 30px; }
.cards-hero p { margin: 0; max-width: 560px; }
.cards-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cards-wallet { text-align: right; } .cards-wallet span { display: block; font-size: 12px; color: var(--gray); } .cards-wallet strong { font-size: 28px; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .cards-wallet strong { color: #a16207; }
.cards-hero-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cards-hero-links a { display: inline-flex; align-items: center; gap: 6px; } .cards-hero-links small { color: var(--gray); }
.cards-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 34px; }
.pack-card { --rc: #3b82f6; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); transition: border-color .25s, transform .25s; }
.pack-card:hover { border-color: var(--rc); transform: translateY(-3px); }
.pack-art { position: relative; height: 170px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 45%, #111), #0b0b0e 70%); background-color: #141418; }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-art { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 45%, #ffffff), #f3f4f6 70%); background-color: #ffffff; }
.pack-art img { width: 100%; height: 100%; object-fit: cover; }
.pack-fan { position: relative; width: 90px; height: 120px; }
.pack-fan i { position: absolute; inset: 0; border-radius: 10px; border: 2px solid var(--rc); background: linear-gradient(160deg, #1e1e24, #0e0e12); box-shadow: 0 10px 24px rgba(0,0,0,.5); transform-origin: 50% 110%; }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-fan i { background: linear-gradient(160deg, #f3f4f6, #f3f4f6); box-shadow: 0 10px 24px rgba(0,0,0,0.15); }
.pack-fan i:nth-child(1) { transform: rotate(-16deg) translateX(-16px); opacity: .7; } .pack-fan i:nth-child(2) { transform: rotate(16deg) translateX(16px); opacity: .7; }
.pack-fan i:nth-child(3) { display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 55%, #111), #0e0e12); }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-fan i:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 55%, #ffffff), #f3f4f6); }
.pack-fan i:nth-child(3)::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; font-weight: 900; color: rgba(255,255,255,.85); font-style: normal; }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-fan i:nth-child(3)::after { color: rgba(17,24,39,0.85); }
.pack-card:hover .pack-fan i:nth-child(1) { transform: rotate(-24deg) translateX(-26px); } .pack-card:hover .pack-fan i:nth-child(2) { transform: rotate(24deg) translateX(26px); }
.pack-fan i { transition: transform .3s; }
.pack-count { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 12px; font-weight: 700; }
.pack-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.pack-body h3 { margin: 0; font-size: 18px; } .pack-body p { margin: 0; font-size: 13.5px; }
.pack-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pack-tag { --rc: #555; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rc) 60%, #333); border-color: #333; color: #ccc; background: #151515; }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-tag { border: 1px solid color-mix(in srgb, var(--rc) 60%, #e5e7eb); border-color: #e5e7eb; color: #374151; background: #ffffff; }
.pack-odds summary { cursor: pointer; font-size: 13px; color: var(--gray); }
.pack-odds ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; }
.pack-odds li { display: flex; align-items: center; gap: 6px; } .pack-odds li b { margin-left: auto; }
.rar-dot { --rc: #777; width: 9px; height: 9px; border-radius: 50%; background: var(--rc); flex-shrink: 0; box-shadow: 0 0 6px var(--rc); }
.pack-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; font: inherit; font-weight: 700; cursor: pointer; }
.pack-btn:disabled, .shop-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
button.is-confirm { background: #f5c451 !important; border-color: #f5c451 !important; color: #111 !important; box-shadow: 0 0 14px rgba(245,196,81,.5) !important; }
.rar-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rar-filter button { --rc: #555; padding: 6px 13px; border-radius: 999px; border: 1px solid #333; background: #151515; color: #ccc; font: inherit; font-size: 13px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .rar-filter button { border: 1px solid #e5e7eb; background: #ffffff; color: #374151; }
.rar-filter button[style] { border-color: color-mix(in srgb, var(--rc) 50%, #333); }
:where(html[data-theme="light"] body:not(.admin-body)) .rar-filter button[style] { border-color: color-mix(in srgb, var(--rc) 50%, #e5e7eb); }
.rar-filter button.on { background: var(--rc, var(--red)); border-color: var(--rc, var(--red)); color: #111; font-weight: 700; }
.rar-filter button[data-rar="0"].on { background: var(--red); border-color: var(--red); color: #fff; }
.shop-grid { margin-bottom: 34px; }
.shop-item .tcard-actions { justify-content: space-between; }
.shop-owned { font-size: 11.5px; color: #4ade80; display: inline-flex; align-items: center; gap: 3px; }
:where(html[data-theme="light"] body:not(.admin-body)) .shop-owned { color: #15803d; }
.shop-stock { font-size: 11.5px; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .shop-stock { color: #a16207; }
.shop-btn { width: 100%; text-align: center; padding: 8px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; display: block; }
.shop-btn.is-off { opacity: .5; cursor: default; }
.confirm-form { width: 100%; margin: 0; }
.rar-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rar-legend-item { --rc: #999; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 60px; border-radius: 14px; background: #141414; border: 1px solid color-mix(in srgb, var(--rc) 45%, #222); border-color: #262626; }
:where(html[data-theme="light"] body:not(.admin-body)) .rar-legend-item { background: #ffffff; border: 1px solid color-mix(in srgb, var(--rc) 45%, #f3f4f6); border-color: #f3f4f6; }
.rar-legend-code { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 12px; color: #111; background: var(--rc); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 50%, transparent); }
.rar-legend-item.rar-8 .rar-legend-code { background: linear-gradient(120deg, #ff3cac, #f5c451, #7df9ff); }
.cards-note { margin-top: 18px; font-size: 13px; }

/* Mở gói: lật thẻ */
.pack-reveal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
    background: radial-gradient(circle at 50% 40%, rgba(40,20,60,.92), rgba(0,0,0,.95)); animation: fadeIn .3s; }
@keyframes fadeIn { from { opacity: 0; } }
.pack-reveal.glow-5 { background: radial-gradient(circle at 50% 40%, rgba(245,196,81,.35), rgba(0,0,0,.95)); }
.pack-reveal.glow-6 { background: radial-gradient(circle at 50% 40%, rgba(255,122,69,.38), rgba(0,0,0,.95)); }
.pack-reveal.glow-7 { background: radial-gradient(circle at 50% 40%, rgba(255,42,79,.42), rgba(0,0,0,.95)); }
.pack-reveal.glow-8 { background: radial-gradient(circle at 50% 40%, rgba(125,249,255,.35), rgba(255,60,172,.2) 40%, rgba(0,0,0,.95)); }
.pack-reveal-inner { width: min(1000px, 100%); text-align: center; }
.pack-reveal h2 { margin: 0 0 4px; }
.reveal-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0 20px; perspective: 1200px; }
.reveal-slot { position: relative; width: min(170px, 28vw); aspect-ratio: 3 / 4.25; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1);
    animation: dealIn .5s both; animation-delay: calc(var(--i) * .12s); }
@keyframes dealIn { from { transform: translateY(40px) rotate(-6deg); opacity: 0; } }
.reveal-back, .reveal-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.reveal-back { display: grid; place-items: center; border-radius: 14px; border: 2px solid #444; background: repeating-linear-gradient(45deg, #1b1b22 0 10px, #15151b 10px 20px); box-shadow: 0 10px 26px rgba(0,0,0,.6); }
:where(html[data-theme="light"] body:not(.admin-body)) .reveal-back { border: 2px solid #d1d5db; background: repeating-linear-gradient(45deg, #f3f4f6 0 10px, #ffffff 10px 20px); box-shadow: 0 10px 26px rgba(0,0,0,0.18); }
.reveal-slot:not(.flipped):hover .reveal-back { border-color: #888; transform: translateY(-4px); }
:where(html[data-theme="light"] body:not(.admin-body)) .reveal-slot:not(.flipped):hover .reveal-back { border-color: #9ca3af; }
.reveal-back-logo { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--red), #6b0a10); box-shadow: 0 0 18px rgba(230,20,31,.5); }
.reveal-slot.burst .reveal-front::after { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--rc), transparent 65%); opacity: 0; animation: burst 1.2s ease-out; }
@keyframes burst { 20% { opacity: .9; } to { opacity: 0; transform: scale(1.4); } }
.reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.reveal-actions > * { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; }

/* Bộ sưu tập */
.coll-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 24px; padding: 20px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--border); margin-bottom: 14px; }
.coll-owner { display: flex; align-items: center; gap: 12px; }
.coll-avatar { width: 56px !important; height: 56px !important; font-size: 22px !important; margin: 0 !important; }
.coll-owner span { display: flex; flex-direction: column; } .coll-owner small { color: var(--gray); } .coll-owner strong { font-size: 20px; }
.coll-stats { display: flex; gap: 26px; justify-content: center; }
.coll-stats div { display: flex; flex-direction: column; align-items: center; } .coll-stats strong { font-size: 24px; } .coll-stats strong small { font-size: 14px; color: var(--gray); } .coll-stats span { font-size: 12px; color: var(--gray); }
.coll-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .coll-actions a { display: inline-flex; align-items: center; gap: 6px; }
.coll-progress { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 5px; background: #242424; }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-progress { background: #f3f4f6; }
.coll-progress span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--red), #f5c451); }
.coll-progress em { position: absolute; right: 0; top: 12px; font-style: normal; font-size: 12px; color: var(--gray); }
.coll-rars { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 14px; }
.coll-rar { --rc: #777; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: #141414; border: 1px solid #262626; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-rar { background: #ffffff; border: 1px solid #f3f4f6; color: #374151; }
.coll-rar b { color: var(--rc); }
.coll-filter { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.coll-filter .rar-filter { margin-bottom: 14px; }
.coll-filter-right { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.coll-filter-right select { padding: 7px 10px; border-radius: 8px; background: #151515; border: 1px solid #333; color: #eee; font: inherit; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-filter-right select { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; }
.coll-only { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #ccc; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-only { color: #374151; }
.coll-item.is-owned { cursor: pointer; border-radius: 14px; outline: none; }
.coll-item.is-owned:focus-visible { box-shadow: 0 0 0 3px rgba(230,20,31,.6); }
.card-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.78); }
.card-modal-box { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; width: min(700px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; border-radius: 20px; background: var(--bg-soft); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,.7); }
:where(html[data-theme="light"] body:not(.admin-body)) .card-modal-box { box-shadow: 0 24px 60px rgba(0,0,0,0.21); }
.card-modal-x { position: absolute; top: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1d1d1d; border: 1px solid #333; color: #ddd; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-modal-x { background: #ffffff; border: 1px solid #e5e7eb; color: #374151; }
.card-modal-info h3 { margin: 4px 0 4px; font-size: 22px; }
.card-modal-meta { margin: 0 0 10px; font-size: 13px; }
.card-modal-desc { font-size: 14px; color: #ccc; margin: 0 0 12px; white-space: pre-line; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-modal-desc { color: #374151; }
.card-modal-copies { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.copy-chip { padding: 2px 8px; border-radius: 999px; background: #1a1a1a; border: 1px solid #333; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-chip { background: #ffffff; border: 1px solid #e5e7eb; } .copy-chip.is-locked { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-chip.is-locked { color: #a16207; }
.card-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Tặng & đổi */
.trade-title { margin: 4px 0 0; font-size: 26px; }
.trade-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.trade-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 14px; color: var(--gray); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.trade-tabs a.on { color: #fff; border-bottom-color: var(--red); }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-tabs a.on { color: #111827; }
.trade-to { max-width: 520px; margin-bottom: 16px; } .trade-to label { display: block; font-size: 13px; color: var(--gray); margin-bottom: 6px; }
.trade-to-row { display: flex; gap: 8px; } .trade-to-row input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid #333; background: #151515; color: #fff; font: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-to-row input { border: 1px solid #e5e7eb; background: #ffffff; color: #111827; }
.trade-to-row button { font: inherit; cursor: pointer; }
.trade-with { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--border); margin-bottom: 16px; }
.trade-with > div:nth-child(2) { display: flex; flex-direction: column; }
.trade-mode { margin-left: auto; display: flex; gap: 6px; }
.trade-mode a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid #333; font-size: 13px; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-mode a { border: 1px solid #e5e7eb; color: #374151; }
.trade-mode a.on { background: var(--red); border-color: var(--red); color: #fff; }
.trade-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.trade-cols.is-trade { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.trade-col h3 { font-size: 15px; margin: 0 0 10px; }
.trade-swap-icon { align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1a1a1a; border: 1px solid #333; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-swap-icon { background: #ffffff; border: 1px solid #e5e7eb; color: #a16207; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pick-card { position: relative; display: block; cursor: pointer; border-radius: 12px; transition: transform .15s; }
.pick-card input { position: absolute; top: 6px; right: 6px; z-index: 6; width: 18px; height: 18px; accent-color: var(--red); }
.pick-card.on { transform: translateY(-3px); } .pick-card.on .tcard-frame { box-shadow: 0 0 0 3px var(--red), 0 8px 20px rgba(230,20,31,.35); }
.trade-submit { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.trade-submit input { flex: 1; min-width: 200px; padding: 10px 12px; border-radius: 8px; border: 1px solid #333; background: #151515; color: #fff; font: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-submit input { border: 1px solid #e5e7eb; background: #ffffff; color: #111827; }
.trade-submit button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; cursor: pointer; padding: 10px 18px; }
.trade-submit button:disabled { opacity: .45; cursor: not-allowed; }
.trade-hint { font-size: 12.5px; margin-top: 8px; }
.trade-empty { padding: 30px 0; text-align: center; }
.trade-card { padding: 14px 16px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--border); margin-bottom: 12px; }
.trade-card header { display: flex; align-items: center; gap: 10px; } .trade-card header > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trade-card header .avatar-circle { margin: 0; }
.trade-status { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #1d1d1d; border: 1px solid #333; }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-status { background: #ffffff; border: 1px solid #e5e7eb; }
.st-accepted .trade-status { color: #4ade80; border-color: rgba(74,222,128,.4); }
:where(html[data-theme="light"] body:not(.admin-body)) .st-accepted .trade-status { color: #15803d; } .st-pending .trade-status { color: #f5c451; border-color: rgba(245,196,81,.4); }
:where(html[data-theme="light"] body:not(.admin-body)) .st-pending .trade-status { color: #a16207; }
.trade-msg { margin: 10px 0 0; font-style: italic; color: #ccc; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .trade-msg { color: #374151; }
.trade-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.trade-sides h4 { margin: 0 0 8px; font-size: 13px; color: var(--gray); font-weight: 600; }
.trade-sides .pick-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.trade-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.trade-btns form { margin: 0; width: auto; } .trade-btns button { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.card-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.card-log li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 14px; }
.card-log-text { flex: 1; min-width: 0; } .card-log small { white-space: nowrap; font-size: 12px; }

/* Hồ sơ: khối bộ sưu tập */
.profile-cards-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.profile-cards-head h2 { margin: 0; }
.profile-cards-stats { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; font-size: 13px; color: var(--gray); }
.profile-cards-stats .coll-progress { flex: 1; grid-column: auto; height: 6px; }
.profile-cards-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.profile-cards-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-cards-actions a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .cards-hero { padding: 18px 16px; } .cards-hero h1 { font-size: 24px; }
    .cards-hero-side { align-items: stretch; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
    .cards-wallet { text-align: left; } .cards-wallet strong { font-size: 22px; }
    .tcard-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; }
    .coll-head { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
    .coll-stats { justify-content: space-between; gap: 10px; }
    .coll-actions { justify-content: stretch; } .coll-actions a { flex: 1; justify-content: center; }
    .card-modal-box { grid-template-columns: 1fr; padding: 18px; } .card-modal-card { width: min(240px, 70%); margin: 0 auto; }
    .trade-cols.is-trade, .trade-sides { grid-template-columns: 1fr; } .trade-swap-icon { justify-self: center; transform: rotate(90deg); }
    .trade-mode { margin-left: 0; width: 100%; } .trade-mode a { flex: 1; justify-content: center; }
    .profile-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .tcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reveal-slot { width: calc(33.33% - 10px); }
    .reveal-row.n1 .reveal-slot, .reveal-row.n2 .reveal-slot { width: 42%; }
    .rar-legend { grid-template-columns: 1fr 1fr; }
    .rar-legend-item { padding-left: 54px; } .rar-legend-code { width: 32px; height: 32px; font-size: 10.5px; }
}
.tcard-limited { position: absolute; top: 9px; right: -30px; z-index: 3; width: 110px; padding: 2px 0; transform: rotate(35deg); text-align: center; font-size: 9.5px; font-weight: 900; letter-spacing: 1.5px;
    color: #111; background: linear-gradient(90deg, #f5c451, #fff3c4, #f5c451); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tcard-limited.is-unique { background: linear-gradient(90deg, #ff3cac, #f5c451, #7df9ff); font-size: 11px; }
.tcard-limited ~ .tcard-count { top: auto; bottom: 46px; }
.tcard-frame { overflow: hidden; }
.tcard-sm .tcard-limited { top: 6px; right: -34px; font-size: 7.5px; letter-spacing: 1px; }

/* Danh sách thành viên (bản 12): sắp lại thẻ — hàng 1 danh tính (tên + vai trò … hạng), hàng 2 thông tin phụ (@username · ngày … huy hiệu · tim) */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    table.members-table tr.mrow { gap: 4px 6px; padding: 11px 12px 11px 66px; }
    .mrow .mc-name { order: 1; flex: 0 1 auto; max-width: calc(100% - 150px); }
    .mrow .mc-role { order: 2; }
    .mrow .mc-role.is-plain { display: none !important; }
    .mrow .mc-rank { order: 3; margin-left: auto; }
    table.members-table tr.mrow::before { order: 4; }
    .mrow .mc-user { order: 5; max-width: 45%; font-size: 12px; }
    .mrow .mc-date { order: 6; }
    .mrow .mc-date::before { content: "·"; margin-right: 3px; color: #555; }
    .mrow .mc-date .ico { display: none !important; }
    .mrow .mc-badges { order: 7; margin-left: auto; }
    .mrow .mc-heart { order: 8; margin-left: 0; padding-left: 6px; }
    .mrow:has(.mc-badges > .muted:only-child) .mc-heart, .mrow:not(:has(.mc-badges)) .mc-heart { margin-left: auto; }
    .mrow .mc-name span { font-size: 15px; }
}
/* Menu quản trị: tiêu đề nhóm tô đỏ, nổi bật */
.admin-nav-group { color: #ff3b3b; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; padding: 18px 12px 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav-group { color: #c8101a; }
.admin-nav-group:first-child { padding-top: 6px; }
/* Quản trị thẻ bài */
.card-admin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card-admin-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.card-admin-form h2 { margin-top: 0; }
.card-admin-preview { width: 180px; margin: 0 auto 16px; }
.card-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.card-admin-form select, .card-admin-form textarea, .card-admin-form input[type=number], .card-admin-form input[type=text], .card-admin-form input[type=file] { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font: inherit; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-admin-form select, :where(html[data-theme="light"] body:not(.admin-body)) .card-admin-form textarea, :where(html[data-theme="light"] body:not(.admin-body)) .card-admin-form input[type=number], :where(html[data-theme="light"] body:not(.admin-body)) .card-admin-form input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .card-admin-form input[type=file] { background: #ffffff; }
.card-admin-form small { display: block; margin-top: 4px; font-size: 11.5px; }
.card-admin-checks { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; font-size: 14px; }
.card-admin-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.card-admin-btns { display: flex; gap: 8px; } .card-admin-btns > * { font: inherit; cursor: pointer; padding: 10px 18px; }
.card-admin-list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-admin-list-head h2 { margin: 0; } .card-admin-rf { margin: 0; } .card-admin-rf a { padding: 5px 10px; font-weight: 700; }
.card-admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.card-admin-item { display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: #161616; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .card-admin-item { background: #ffffff; }
.card-admin-item.is-off { opacity: .55; }
.card-admin-thumb { width: 78px; flex-shrink: 0; }
.card-admin-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-admin-info small { color: var(--gray); font-size: 12px; }
.card-admin-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; } .card-admin-acts form { margin: 0; }
.card-admin-sub { font-size: 14px; margin: 8px 0 10px; }
.card-odds-grid { display: grid; gap: 6px; margin-bottom: 14px; }
.card-odds-grid label { --rc: #999; display: grid; grid-template-columns: 1fr 100px 60px; align-items: center; gap: 8px; font-size: 13px; }
.card-odds-grid label b { color: var(--rc); } .card-odds-grid em { font-style: normal; color: var(--gray); text-align: right; font-size: 12px; }
.card-pack-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.card-pack-row.is-off { opacity: .55; } .card-pack-row small { display: block; }
.card-pack-pct { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .card-pack-pct span { --rc: #999; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid #333; color: var(--rc); }
:where(html[data-theme="light"] body:not(.admin-body)) .card-pack-pct span { border: 1px solid #e5e7eb; }
.card-revoke-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.card-revoke-item { display: flex; flex-direction: column; gap: 6px; } .card-revoke-item form { margin: 0; } .card-revoke-item button { width: 100%; }
.quest-card-reward { display: inline-flex; align-items: center; gap: 3px; color: #c4a5ff; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .quest-card-reward { color: #3f00b8; }
.quest-card-select { max-width: 200px; padding: 6px; border-radius: 6px; background: #1c1c1c; color: #fff; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .quest-card-select { background: #ffffff; color: #111827; }
@media (max-width: 1100px) { .card-admin-layout { grid-template-columns: minmax(0, 1fr); } .card-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Lật thẻ: không phụ thuộc backface-visibility (thẻ bên trong có transform riêng) -> đổi mặt ở giữa vòng quay */
.reveal-front { opacity: 0; transition: opacity 0s .32s; }
.reveal-back { transition: opacity 0s .32s, transform .2s, border-color .2s; }
.reveal-slot.flipped .reveal-front { opacity: 1; }
.reveal-slot.flipped .reveal-back { opacity: 0; }
.shop-meta { display: flex; justify-content: space-between; gap: 6px; width: 100%; min-height: 17px; font-size: 11.5px; color: var(--gray); }
button.btn-outline { background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.card-admin-stats .admin-stat-card { text-align: left; }
.card-admin-stats .admin-stat-card strong { display: block; font-size: 24px; color: var(--white); }
.card-admin-stats .admin-stat-card span { font-size: 12.5px; color: var(--gray); }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .cards-wallet span { white-space: nowrap; }
    .cards-hero-links { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   BẢN 13 — MENU QUẢN TRỊ GỌN: nhóm gập/mở có biểu tượng, tìm chức năng, thu gọn thanh biểu tượng, ngăn kéo điện thoại
   ===================================================================== */
.admin-sidebar { width: 256px; padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: width .2s; z-index: 30; }
.admin-side-top { display: flex; align-items: center; gap: 8px; padding: 16px 14px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.admin-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; }
.admin-brand img { height: 26px; width: auto; }
.admin-brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--red), #6b0a10); }
.admin-rail-btn, .admin-drawer-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: none; border: 1px solid var(--border); color: #bbb; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-rail-btn, :where(html[data-theme="light"] body:not(.admin-body)) .admin-drawer-btn { color: #4b5563; }
.admin-rail-btn:hover, .admin-drawer-btn:hover { color: #fff; border-color: #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-rail-btn:hover, :where(html[data-theme="light"] body:not(.admin-body)) .admin-drawer-btn:hover { color: #111827; border-color: #d1d5db; }
.admin-drawer-btn { display: none; }
.admin-side-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 14px; scrollbar-width: thin; display: flex; flex-direction: column; }
.admin-me { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; }
.admin-me-av { width: 34px !important; height: 34px !important; margin: 0 !important; font-size: 14px !important; }
.admin-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .admin-me-text strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-me-text small { font-size: 11px; color: var(--red-glow); text-transform: uppercase; letter-spacing: .8px; }
.admin-nav-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin: 0 2px 10px; border-radius: 9px; background: #1a1a1a; border: 1px solid var(--border); color: #888; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav-search { background: #ffffff; color: #6b7280; }
.admin-nav-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav-search input { color: #111827; }
.admin-nav-search:focus-within { border-color: var(--red); }
.admin-nav { gap: 2px; }
.admin-nav .admin-nav-group { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; font: inherit;
    color: #ff3b3b; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-align: left; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav .admin-nav-group { color: #c8101a; }
.admin-nav .admin-nav-group:hover { background: rgba(230,20,31,.08); }
.admin-nav .admin-nav-group .ico { flex-shrink: 0; }
.admin-nav-group .admin-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-nav-chev { color: #777; transition: transform .2s; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav-chev { color: #6b7280; }
.admin-nav-sec.open .admin-nav-chev { transform: rotate(180deg); }
.admin-nav-items { display: none; flex-direction: column; gap: 1px; padding: 2px 0 8px; }
.admin-nav-sec.open .admin-nav-items, .admin-nav.is-search .admin-nav-items { display: flex; }
.admin-nav a.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 8px; font-size: 13.5px; color: #b5b5b5; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav a.admin-nav-item { color: #4b5563; }
.admin-nav a.admin-nav-item .ico { color: #777; flex-shrink: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav a.admin-nav-item .ico { color: #6b7280; }
.admin-nav a.admin-nav-item .admin-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-nav a.admin-nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav a.admin-nav-item:hover { background: rgba(0,0,0,0.035); color: #111827; }
.admin-nav a.admin-nav-item.active { background: linear-gradient(135deg, var(--red), #a30d15); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(230,20,31,.3); }
.admin-nav a.admin-nav-item.active .ico { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav a.admin-nav-item.active .ico { color: #111827; }
.admin-nav-sec.is-current > .admin-nav-group { color: #ff5a5a; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav-sec.is-current > .admin-nav-group { color: #b80000; }
.admin-nav a.admin-nav-sub { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 30px; border-radius: 8px; font-size: 12.5px; color: #9a9a9a; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav a.admin-nav-sub { color: #4b5563; }
.admin-nav a.admin-nav-sub[hidden] { display: none; }
.admin-nav a.admin-nav-sub:hover { background: rgba(255,255,255,.05); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-nav a.admin-nav-sub:hover { background: rgba(0,0,0,0.035); color: #111827; }
.admin-nav a.admin-nav-sub .admin-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-nav-empty { font-size: 13px; padding: 8px 12px; }
/* Bản 18.0: thanh tab tự động của mục gộp (vd Thẻ bài, Nhiệm vụ, V-Point & Điểm) */
.admin-page-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding: 4px; border-radius: 12px; background: #141414; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-page-tabs { background: #ffffff; }
.admin-page-tabs::-webkit-scrollbar { display: none; }
.admin-page-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 13.5px; color: #b5b5b5; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-page-tabs a { color: #4b5563; }
.admin-page-tabs a:hover { color: #fff; background: rgba(255,255,255,.05); }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-page-tabs a:hover { color: #111827; background: rgba(0,0,0,0.035); }
.admin-page-tabs a.on { background: linear-gradient(135deg, var(--red), #a30d15); color: #fff; font-weight: 600; }
.admin-side-foot { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.admin-side-foot a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 8px; font-size: 11.5px; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-side-foot a { color: #4b5563; }
.admin-side-foot a:hover { background: rgba(255,255,255,.05); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-side-foot a:hover { background: rgba(0,0,0,0.035); color: #111827; }
/* Thu gọn thành thanh biểu tượng (máy tính) */
@media (min-width: 901px) {
    html.admin-rail .admin-sidebar { width: 68px; }
    html.admin-rail .admin-brand-text, html.admin-rail .admin-brand img, html.admin-rail .admin-me-text, html.admin-rail .admin-nav-search, html.admin-rail .admin-nav-label,
    html.admin-rail .admin-nav-chev, html.admin-rail .admin-nav-items, html.admin-rail .admin-nav-group .nav-count { display: none !important; }
    html.admin-rail .admin-side-top { flex-direction: column; padding: 14px 8px; }
    html.admin-rail .admin-me { justify-content: center; padding: 4px 0 12px; }
    html.admin-rail .admin-nav .admin-nav-group { justify-content: center; padding: 11px 0; }
    html.admin-rail .admin-nav-sec.is-current > .admin-nav-group { background: rgba(230,20,31,.15); }
    html.admin-rail .admin-side-foot { flex-direction: column; }
}
/* Điện thoại / máy tính bảng: thanh trên + ngăn kéo */
@media (max-width: 900px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { position: sticky; top: 0; width: 100%; height: auto; max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
    .admin-side-top { border-bottom: 0; padding: 10px 14px; }
    .admin-rail-btn { display: none; } .admin-drawer-btn { display: grid; }
    .admin-side-body { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 70; background: var(--bg-soft); border-right: 1px solid var(--border);
        transform: translateX(-102%); transition: transform .25s cubic-bezier(.2,.8,.2,1); padding-top: 18px; box-shadow: 12px 0 40px rgba(0,0,0,.5); }
:where(html[data-theme="light"] body:not(.admin-body)) .admin-side-body { box-shadow: 12px 0 40px rgba(0,0,0,0.15); }
    html.admin-drawer-open .admin-side-body { transform: none; }
    html.admin-drawer-open { overflow: hidden; }
    .admin-drawer-mask { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.55); }
    .admin-nav { flex-direction: column; overflow: visible; }
    .admin-nav a.admin-nav-item { white-space: normal; }
}

/* Popup thông báo tùy chỉnh (bản 13) */
.site-popup { --pp: #e6141f; position: fixed; z-index: 130; }
.site-popup.pos-center { inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.site-popup.pos-center.show { opacity: 1; }
.site-popup-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 18px; background: var(--bg-soft);
    border: 1px solid color-mix(in srgb, var(--pp) 55%, #333); border-color: #333; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--pp) 22%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup-card { border: 1px solid color-mix(in srgb, var(--pp) 55%, #e5e7eb); border-color: #e5e7eb; box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 0 40px color-mix(in srgb, var(--pp) 22%, transparent); }
.site-popup.pos-center .site-popup-card { transform: translateY(16px) scale(.97); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.site-popup.pos-center.show .site-popup-card { transform: none; }
.site-popup-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pp); z-index: 2; }
.site-popup-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); color: #eee; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup-x { border: 1px solid rgba(0,0,0,0.105); color: #111827; }
.site-popup-img { aspect-ratio: 9 / 5; overflow: hidden; background: #111; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup-img { background: #ffffff; } .site-popup-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-popup-body { padding: 18px 20px 20px; }
.site-popup-title { display: block; font-size: 19px; line-height: 1.3; margin-bottom: 8px; padding-right: 30px; }
.site-popup-text { font-size: 14.5px; color: #cfcfcf; line-height: 1.6; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup-text { color: #374151; } .site-popup-text a { color: var(--pp); text-decoration: underline; }
.site-popup-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.site-popup-btn { flex: 1; min-width: 140px; text-align: center; padding: 11px 16px; border-radius: 10px; font-weight: 700; color: #fff; background: var(--pp); box-shadow: 0 6px 18px color-mix(in srgb, var(--pp) 45%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup-btn { color: #111827; }
.site-popup[style*="f5c451"] .site-popup-btn { color: #111; }
.site-popup-later { padding: 11px 14px; border-radius: 10px; background: none; border: 1px solid #333; color: #aaa; font: inherit; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup-later { border: 1px solid #e5e7eb; color: #4b5563; }
.site-popup.pos-corner { right: 18px; bottom: 18px; width: min(360px, calc(100vw - 24px)); transform: translateY(20px); opacity: 0; transition: transform .3s, opacity .3s; }
.site-popup.pos-corner.show { transform: none; opacity: 1; }
.site-popup.pos-corner .site-popup-title { font-size: 16px; } .site-popup.pos-corner .site-popup-text { font-size: 13.5px; }
.site-popup.pos-top { left: 0; right: 0; top: 0; transform: translateY(-100%); transition: transform .3s; }
.site-popup.pos-top.show { transform: none; }
.site-popup.pos-top .site-popup-card { width: 100%; max-height: none; border-radius: 0; border: 0; border-bottom: 1px solid #333; display: flex; }
:where(html[data-theme="light"] body:not(.admin-body)) .site-popup.pos-top .site-popup-card { border-bottom: 1px solid #e5e7eb; }
.site-popup.pos-top .site-popup-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 56px 10px 16px; width: 100%; justify-content: center; }
.site-popup.pos-top .site-popup-title { margin: 0; font-size: 14.5px; padding: 0; } .site-popup.pos-top .site-popup-text { font-size: 13.5px; }
.site-popup.pos-top .site-popup-actions { margin: 0; } .site-popup.pos-top .site-popup-btn { min-width: 0; padding: 6px 14px; flex: none; font-size: 13px; }
.site-popup.pos-top .site-popup-x { top: 50%; transform: translateY(-50%); width: 30px; height: 30px; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .site-popup.pos-corner { left: 12px; right: 12px; width: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
}
.pp-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.pp-preview-wrap { position: sticky; top: 20px; }
.pp-preview-label { font-size: 12px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.pp-preview { --pp: #e6141f; padding: 20px; border-radius: 16px; background: repeating-linear-gradient(45deg, #111 0 12px, #141414 12px 24px); }
:where(html[data-theme="light"] body:not(.admin-body)) .pp-preview { background: repeating-linear-gradient(45deg, #ffffff 0 12px, #ffffff 12px 24px); }
.pp-preview .site-popup-card { width: 100%; }
.pp-pages { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; } .pp-pages label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.pp-list { display: grid; gap: 8px; }
.pp-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #161616; border: 1px solid var(--border); flex-wrap: wrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .pp-row { background: #ffffff; }
.pp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pp-row-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; } .pp-row-main small { font-size: 12px; }
.pp-status { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid #333; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .pp-status { border: 1px solid #e5e7eb; }
.pp-status.st-on { color: #4ade80; border-color: rgba(74,222,128,.4); }
:where(html[data-theme="light"] body:not(.admin-body)) .pp-status.st-on { color: #15803d; } .pp-status.st-wait { color: #f5c451; border-color: rgba(245,196,81,.4); }
:where(html[data-theme="light"] body:not(.admin-body)) .pp-status.st-wait { color: #a16207; } .pp-status.st-end, .pp-status.st-off { color: #888; }
:where(html[data-theme="light"] body:not(.admin-body)) .pp-status.st-end, :where(html[data-theme="light"] body:not(.admin-body)) .pp-status.st-off { color: #6b7280; }
.admin-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-admin-form input[type=datetime-local] { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font: inherit; font-size: 14px; color-scheme: dark; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-admin-form input[type=datetime-local] { background: #ffffff; }
@media (max-width: 1100px) { .pp-admin-layout { grid-template-columns: 1fr; } .pp-preview-wrap { position: static; } }

/* Hộp thư (bản 13) */
.nav-inbox { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); color: var(--white); margin-right: 8px; flex-shrink: 0; }
.nav-inbox:hover { border-color: var(--red); }
.nav-inbox .bell-badge { position: absolute; top: -4px; right: -4px; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) { .site-header .nav-inbox { display: none; } }
.profile-dm-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.inbox-page { max-width: 1100px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inbox-head h1 { margin: 0; font-size: 24px; display: flex; align-items: center; gap: 8px; }
.inbox-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); }
.inbox-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 14px; color: var(--gray); }
.inbox-tabs a.on { background: var(--red); color: #fff; } .inbox-tabs a.on .cards-dot { background: #fff; color: var(--red); }
.inbox-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 220px); min-height: 480px; border-radius: 16px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); }
.inbox-list { border-right: 1px solid var(--border); overflow-y: auto; padding: 10px; }
.inbox-new label { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: #1a1a1a; border: 1px solid var(--border); color: #888; margin-bottom: 8px; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-new label { background: #ffffff; color: #6b7280; }
.inbox-new input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-new input { color: #111827; }
.inbox-nf { margin: 0 4px 8px; }
.inbox-empty { font-size: 13.5px; padding: 12px 6px; }
.inbox-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.inbox-item:hover { background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-item:hover { background: #ffffff; } .inbox-item.on { background: rgba(230,20,31,.12); }
.inbox-av { width: 42px !important; height: 42px !important; margin: 0 !important; font-size: 16px !important; }
.inbox-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-item-top { display: flex; justify-content: space-between; gap: 6px; } .inbox-item-top strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-item-top small { font-size: 11px; color: var(--gray); white-space: nowrap; }
.inbox-item-prev { font-size: 13px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-item-prev em { font-style: normal; color: #777; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-item-prev em { color: #6b7280; }
.inbox-item.is-unread .inbox-item-prev { color: #eee; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-item.is-unread .inbox-item-prev { color: #111827; }
.inbox-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.inbox-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inbox-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #666; padding: 40px 20px; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-placeholder { color: #6b7280; }
.inbox-placeholder p { margin: 6px 0 0; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-placeholder p { color: #4b5563; }
.inbox-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.inbox-back { display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-back { color: #374151; }
.inbox-peer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .inbox-peer span { display: flex; flex-direction: column; min-width: 0; } .inbox-peer strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-peer small { font-size: 12px; }
.inbox-menu { position: relative; }
.inbox-menu-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: none; border: 1px solid var(--border); color: #ddd; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-menu-btn { color: #374151; }
.inbox-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; padding: 6px; border-radius: 12px; background: #1a1a1a; border: 1px solid #333; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-menu-pop { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.inbox-menu-pop a, .inbox-menu-pop button, .inbox-report .report-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 8px; background: none; border: 0; color: #ddd; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-menu-pop a, :where(html[data-theme="light"] body:not(.admin-body)) .inbox-menu-pop button, :where(html[data-theme="light"] body:not(.admin-body)) .inbox-report .report-link { color: #374151; }
.inbox-menu-pop a:hover, .inbox-menu-pop button:hover { background: #242424; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-menu-pop a:hover, :where(html[data-theme="light"] body:not(.admin-body)) .inbox-menu-pop button:hover { background: #f3f4f6; }
.inbox-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.inbox-hello { margin: auto; text-align: center; }
.inbox-day { align-self: center; margin: 10px 0 6px; } .inbox-day span { font-size: 11.5px; color: var(--gray); padding: 3px 10px; border-radius: 999px; background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-day span { background: #ffffff; }
.inbox-msg { display: flex; } .inbox-msg.mine { justify-content: flex-end; }
.inbox-bubble { max-width: min(75%, 520px); padding: 8px 12px 6px; border-radius: 16px 16px 16px 6px; background: #222; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-bubble { background: #f3f4f6; }
.inbox-msg.mine .inbox-bubble { background: linear-gradient(135deg, var(--red), #a30d15); border-radius: 16px 16px 6px 16px; }
.inbox-bubble a { color: inherit; text-decoration: underline; }
.inbox-bubble time { display: block; text-align: right; font-size: 10.5px; opacity: .65; margin-top: 2px; }
.inbox-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.inbox-compose textarea { flex: 1; min-height: 42px; max-height: 140px; resize: none; padding: 10px 14px; border-radius: 20px; background: #1a1a1a; border: 1px solid #333; color: #fff; font: inherit; font-size: 15px; line-height: 1.4; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-compose textarea { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; }
.inbox-compose textarea:focus { outline: none; border-color: var(--red); }
.inbox-send { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--red); color: #fff; cursor: pointer; }
.inbox-send:disabled { opacity: .5; }
.inbox-err { margin: 0; padding: 0 16px 10px; color: #ff6b6b; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-err { color: #c81e1e; }
.inbox-blocked { padding: 14px 16px; border-top: 1px solid var(--border); color: #aaa; font-size: 14px; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .inbox-blocked { color: #4b5563; }
.inbox-blocked button { background: none; border: 0; color: var(--red-glow); font: inherit; cursor: pointer; text-decoration: underline; }
.sys-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sys-toolbar p { margin: 0; font-size: 13.5px; }
.sys-list { display: grid; gap: 8px; }
.sys-item { border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden; }
.sys-item.is-unread { border-color: rgba(230,20,31,.5); }
.sys-item-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sys-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: rgba(230,20,31,.14); color: #ff4d55; }
:where(html[data-theme="light"] body:not(.admin-body)) .sys-ico { color: #c8101a; }
.sys-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sys-item-main strong { font-size: 15px; } .sys-item-main small { font-size: 12px; }
.sys-item.is-unread .sys-item-main strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 2px; }
.sys-new { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--red); color: #fff; }
.sys-chev { color: #777; transition: transform .2s; }
:where(html[data-theme="light"] body:not(.admin-body)) .sys-chev { color: #6b7280; } .sys-item.open .sys-chev { transform: rotate(180deg); }
.sys-item-body { display: none; padding: 0 16px 16px 66px; } .sys-item.open .sys-item-body { display: block; }
.sys-text { font-size: 14.5px; line-height: 1.65; color: #d4d4d4; }
:where(html[data-theme="light"] body:not(.admin-body)) .sys-text { color: #374151; } .sys-text a { color: var(--red-glow); text-decoration: underline; }
.sys-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .sys-actions > * { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .inbox-head h1 { font-size: 20px; } .inbox-tabs { width: 100%; } .inbox-tabs a { flex: 1; justify-content: center; }
    .inbox-layout { grid-template-columns: 1fr; height: calc(100dvh - 250px - var(--tabbar-h)); height: calc(100vh - 250px - var(--tabbar-h)); min-height: 380px; }
    .inbox-page:not(.has-thread) .inbox-thread { display: none; }
    .inbox-page.has-thread .inbox-list { display: none; }
    .inbox-page.has-thread .inbox-head { display: none; }
    .inbox-page.has-thread .inbox-layout { height: calc(100dvh - 130px - var(--tabbar-h)); }
    .inbox-back { display: grid; }
    .sys-item-body { padding-left: 16px; }
}
.msg-modes { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; margin-bottom: 10px; } .msg-modes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.msg-pick { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px; border-radius: 10px; background: #161616; border: 1px solid var(--border); margin-bottom: 10px; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .msg-pick { background: #ffffff; }
.msg-pick label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .msg-pick textarea { width: 100%; }
.msg-count { font-size: 13px; min-height: 18px; }
.msg-history { display: grid; gap: 8px; }
.msg-h-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: #161616; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .msg-h-row { background: #ffffff; }
.msg-h-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .msg-h-row small { font-size: 12px; } .msg-h-row form { margin: 0; flex-shrink: 0; }
.msg-h-bar { display: block; height: 4px; border-radius: 2px; background: #2a2a2a; margin-top: 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .msg-h-bar { background: #e5e7eb; } .msg-h-bar i { display: block; height: 100%; border-radius: 2px; background: #4ade80; }
.msg-admin-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .msg-admin-layout { grid-template-columns: 1fr; } }

/* Bộ thẻ (bản 13) */
.series-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 30px; }
.series-card { --sa: #e6141f; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.series-card:hover { transform: translateY(-3px); border-color: var(--sa); }
.series-cover { display: block; height: 120px; background: #141418 center / cover; box-shadow: inset 0 -40px 40px -20px var(--bg-soft); }
.series-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; border-top: 3px solid var(--sa); }
.series-body strong { font-size: 16px; } .series-body small { font-size: 12.5px; color: var(--gray); }
.series-prog { display: block; height: 6px; border-radius: 3px; background: #262626; margin-top: 4px; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .series-prog { background: #f3f4f6; }
.series-prog i { display: block; height: 100%; border-radius: 3px; background: var(--sa, var(--red)); }
.pack-series { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.65); font-size: 11.5px; font-weight: 700; }
.coll-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 18px 0 0; }
.coll-series-chip { --sa: #e6141f; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #141414; border: 1px solid var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-series-chip { background: #ffffff; }
.coll-series-chip strong { font-size: 13.5px; } .coll-series-chip small { font-size: 11.5px; color: var(--gray); }
.coll-series-chip.on { border-color: var(--sa); background: #1a1a1a; box-shadow: 0 0 0 1px var(--sa); }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-series-chip.on { background: #ffffff; }
.coll-series-chip.is-done small { color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .coll-series-chip.is-done small { color: #15803d; }
.series-admin-list { display: grid; gap: 10px; }
.series-admin-item { --sa: #e6141f; display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: #161616; border: 1px solid var(--border); border-left: 3px solid var(--sa); }
:where(html[data-theme="light"] body:not(.admin-body)) .series-admin-item { background: #ffffff; }
.series-admin-item.is-off { opacity: .55; }
.series-admin-cover { width: 110px; height: 70px; flex-shrink: 0; border-radius: 8px; background: #111 center / cover; }
:where(html[data-theme="light"] body:not(.admin-body)) .series-admin-cover { background: #ffffff center / cover; }
.series-admin-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .series-admin-info small { font-size: 12px; }
.series-rar { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; } .series-rar span { font-weight: 700; }
.card-admin-sf select { padding: 6px 8px; border-radius: 8px; background: #1c1c1c; color: #fff; border: 1px solid var(--border); font: inherit; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-admin-sf select { background: #ffffff; color: #111827; }
@media (max-width: 480px) { .series-strip { grid-template-columns: 1fr; } .series-admin-cover { width: 80px; height: 56px; } }
/* Header máy tính: biểu tượng Hộp thư đứng cạnh chuông (bên phải), menu không xuống dòng */
.site-header .nav-inbox { order: 3; margin: 0 0 0 14px; }
.site-header .nav-inbox + .nav-bell { margin-left: 8px; }
.main-nav a, .nav-group-btn, .nav-user-link { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1320px) { .main-nav { gap: 13px; } .nav-user-link .role-tag, .nav-user-link .badge-role { display: none; } }
@media (max-width: 1100px) { .site-header .nav-inbox { margin-left: auto; } .site-header .nav-inbox + .nav-bell { margin-left: 8px; } }
.site-header .brand { white-space: nowrap; flex-shrink: 0; }
html.admin-drawer-open .admin-sidebar { z-index: 80; } html.admin-drawer-open .admin-drawer-mask { z-index: 75; }
@media (max-width: 900px) { .admin-sidebar { z-index: 40; } html.admin-drawer-open .admin-side-body { z-index: 90; } }

/* ===== Bản 13.1: số seri thẻ ===== */
.tcard-serial { display: block; margin-top: 3px; font: 600 9.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; color: #fff; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0,0,0,.45); border-radius: 4px; padding: 1px 4px; align-self: flex-start; max-width: 100%; }
.tcard-sm .tcard-serial { font-size: 7.5px; letter-spacing: .02em; padding: 1px 3px; margin-top: 2px; }
.tcard-lg .tcard-serial { font-size: 12px; padding: 2px 6px; }
.copy-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px 6px 0; }
.copy-chip code { font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-chip code { color: #111827; }
.copy-chip small { color: #999; font-size: 11px; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-chip small { color: #4b5563; } .copy-chip em { font-style: normal; font-size: 11px; }
.card-modal-copies { max-height: 180px; overflow-y: auto; }
.series-code-grid { grid-template-columns: 1fr 120px; }
.series-code-input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.series-code-hint { font-size: 12.5px; margin: -4px 0 12px; } .series-code-hint code { color: #fff; background: #1a1a1a; padding: 1px 5px; border-radius: 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .series-code-hint code { color: #111827; background: #ffffff; }
.series-code-badge { font: 700 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--sa, #e6141f); color: #fff; padding: 2px 6px; border-radius: 5px; vertical-align: middle; }
.serial-found { display: flex; gap: 14px; align-items: flex-start; } .serial-found p { margin: 0 0 6px; font-size: 14px; } .serial-found .tcard { flex: 0 0 140px; width: 140px; } .serial-found > div { min-width: 0; flex: 1; }
@media (max-width: 600px) { .series-code-grid { grid-template-columns: 1fr 96px; } }
.series-code-grid > .field { min-width: 0; } .series-code-grid input { width: 100%; min-width: 0; }

/* ===== Bản 13.2: công cụ thẻ bài hàng loạt + tra cứu seri ===== */
.card-admin-acts { flex-wrap: wrap; }
.card-admin-item { position: relative; }
.card-admin-item.is-picked { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.card-admin-tick { position: absolute; top: 8px; left: 8px; z-index: 5; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(0,0,0,.7); cursor: pointer; }
.card-admin-tick input, .card-pick input, .card-bulk-all input { width: 17px; height: 17px; accent-color: var(--red); cursor: pointer; }
.card-bulk-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 12px; background: #1b1b1b; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .card-bulk-bar { background: #ffffff; }
.card-bulk-bar select, .card-bulk-bar input[type=text] { min-width: 0; flex: 1 1 170px; padding: 8px 10px; border-radius: 8px; background: #111; border: 1px solid var(--border); color: #fff; font: inherit; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-bulk-bar select, :where(html[data-theme="light"] body:not(.admin-body)) .card-bulk-bar input[type=text] { background: #ffffff; color: #111827; }
.card-bulk-all { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.card-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 12px; }
.card-pick { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: border-color .15s, background .15s; }
.card-pick input { position: absolute; top: 12px; left: 12px; z-index: 6; }
.card-pick.is-picked { border-color: var(--red); background: rgba(230,20,31,.1); }
.card-pick .tcard { width: 100%; }
.card-pick-owner { font-size: 12px; color: #bbb; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-pick-owner { color: #4b5563; }
.pick-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #161616; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .pick-bar { background: #ffffff; }
.pick-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pick-go input[type=text], .pick-inline-reason { flex: 1 1 200px; min-width: 0; padding: 9px 11px; border-radius: 8px; background: #111; border: 1px solid var(--border); color: #fff; font: inherit; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .pick-go input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .pick-inline-reason { background: #ffffff; color: #111827; }
.pick-notify { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #ccc; cursor: pointer; margin: 4px 12px 4px 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .pick-notify { color: #374151; }
.pick-go button[disabled] { opacity: .45; cursor: not-allowed; }
.danger-zone { margin-top: 16px; border: 1px solid rgba(230,20,31,.4); border-radius: 12px; padding: 10px 14px; background: rgba(230,20,31,.05); }
.danger-zone summary { cursor: pointer; color: #ff6b6b; font-weight: 700; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .danger-zone summary { color: #c81e1e; }
.danger-zone form { margin-top: 10px; }
.grant-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.grant-modes label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: #161616; font-size: 13.5px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .grant-modes label { background: #ffffff; }
.grant-modes label:has(input:checked) { border-color: var(--red); background: rgba(230,20,31,.14); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .grant-modes label:has(input:checked) { color: #111827; }
.grant-modes input { accent-color: var(--red); }
.card-admin-tips { margin: 0; padding-left: 18px; color: #bbb; font-size: 14px; line-height: 1.7; }
:where(html[data-theme="light"] body:not(.admin-body)) .card-admin-tips { color: #4b5563; }
.owners-top { margin: 6px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.8; } .owners-top b { float: right; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .owners-top b { color: #111827; }
.owners-table tr.is-off { opacity: .55; }
.log-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.log-filter input, .log-filter select { flex: 1 1 150px; min-width: 0; padding: 8px 10px; border-radius: 8px; background: #111; border: 1px solid var(--border); color: #fff; font: inherit; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .log-filter input, :where(html[data-theme="light"] body:not(.admin-body)) .log-filter select { background: #ffffff; color: #111827; }
.log-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.revoke-layout > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .revoke-layout .admin-card { margin: 0; }
.serial-found form { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-modal-copies a { text-decoration: none; } .card-modal-copies a:hover code { text-decoration: underline; }
/* Trang tra cứu seri công khai */
.serial-page { max-width: 920px; margin: 0 auto; }
.serial-box { text-align: center; padding: 26px 18px; border-radius: 18px; background: radial-gradient(120% 140% at 50% 0%, rgba(230,20,31,.18), transparent 60%), #121212; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-box { background: radial-gradient(120% 140% at 50% 0%, rgba(230,20,31,.18), transparent 60%), #ffffff; }
.serial-box h1 { margin: 8px 0 6px; font-size: clamp(24px, 4vw, 34px); }
.serial-box p { max-width: 560px; margin: 0 auto 16px; }
.serial-search { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
.serial-search input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 12px; background: #0b0b0b; border: 1px solid var(--border); color: #fff; font: 600 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-search input { background: #f3f4f6; color: #111827; }
.serial-search input:focus { outline: none; border-color: var(--red); }
.serial-msg { margin-top: 16px; }
.serial-result { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 22px; padding: 22px; border-radius: 18px; background: #121212; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-result { background: #ffffff; }
.serial-card .tcard { width: 100%; }
.serial-ok { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 4px 10px; border-radius: 999px; background: rgba(34,197,94,.14); color: #4ade80; font-size: 13px; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-ok { color: #15803d; }
.serial-info h2 { margin: 4px 0 14px; }
.serial-info dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 18px; font-size: 15px; }
.serial-info dt { color: #888; }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-info dt { color: #6b7280; } .serial-info dd { margin: 0; min-width: 0; }
.serial-info code { font: 700 15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; color: #fff; background: #1c1c1c; padding: 2px 8px; border-radius: 6px; word-break: break-all; }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-info code { color: #111827; background: #ffffff; }
.serial-owner { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .serial-owner { color: #111827; }
.serial-avatar { width: 28px; height: 28px; font-size: 12px; }
.serial-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
    .serial-result { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
    .serial-card { max-width: 240px; margin: 0 auto; width: 100%; }
    .serial-search { flex-direction: column; }
    .card-pick-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
/* Bảng trong khu quản trị: giữ dạng bảng cuộn ngang ở khổ app (khối 11.3 chỉ dành cho danh sách thành viên công khai) */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .admin-main .table-scroll { overflow-x: auto; max-width: 100%; }
    .admin-main table.members-table { display: table; min-width: 560px; }
    .admin-main table.members-table thead { display: table-header-group; }
    .admin-main table.members-table tbody { display: table-row-group; }
}

/* ===================== BẢN 14.0 — ĐỢT 1 MỞ RỘNG THẺ BÀI ===================== */
/* Thẻ: Foil, sao, nhãn */
.tcard.is-foil .tcard-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
    background: linear-gradient(115deg, transparent 20%, rgba(255,0,170,.55) 32%, rgba(0,220,255,.55) 44%, rgba(120,255,120,.5) 56%, rgba(255,230,0,.5) 68%, transparent 80%);
    background-size: 260% 260%; animation: vgFoil 4.5s linear infinite; }
@keyframes vgFoil { 0% { background-position: 0% 50%; } 100% { background-position: 260% 50%; } }
@media (prefers-reduced-motion: reduce) { .tcard.is-foil .tcard-frame::after { animation: none; background-position: 50% 50%; } }
.tcard.stars-2 .tcard-frame { border-color: #cfd8e3; } .tcard.stars-3 .tcard-frame { border-color: #5eead4; box-shadow: 0 0 0 1px #5eead4, 0 10px 26px rgba(0,0,0,.5); }
.tcard.stars-4 .tcard-frame { border-color: #c084fc; box-shadow: 0 0 0 2px #c084fc, 0 0 18px rgba(192,132,252,.45); }
.tcard.stars-5 .tcard-frame { border-color: #fde047; box-shadow: 0 0 0 2px #fde047, 0 0 26px rgba(253,224,71,.55); }
.tcard-stars { display: block; font-size: 12px; line-height: 1; letter-spacing: 1px; color: #fde047; text-shadow: 0 0 6px rgba(253,224,71,.7); margin-bottom: 2px; }
.tcard-sm .tcard-stars { font-size: 9px; }
.tcard-tags { position: absolute; top: 34px; left: 8px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tcard-sm .tcard-tags { top: 26px; left: 5px; }
.tcard-tag { padding: 1px 6px; border-radius: 5px; font-size: 9px; font-weight: 900; letter-spacing: .6px; color: #111; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.tcard-sm .tcard-tag { font-size: 7px; padding: 1px 4px; }
.tag-foil { background: linear-gradient(90deg, #ff6ad5, #7df9ff, #b4ff9f, #ffe56a); }
.tag-excl { background: #fde047; } .tag-event { background: #f97316; color: #fff; } .tag-person { background: #38bdf8; } .tag-nice { background: #111; color: #fde047; border: 1px solid #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .tag-nice { background: #ffffff; color: #a16207; }
.reveal-foil { position: absolute; top: -12px; right: -10px; z-index: 8; padding: 3px 9px; border-radius: 999px; font-weight: 900; font-size: 12px; color: #111; background: linear-gradient(90deg, #ff6ad5, #7df9ff, #b4ff9f, #ffe56a); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
:where(html[data-theme="light"] body:not(.admin-body)) .reveal-foil { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.reveal-front { position: relative; }

/* Thanh điều hướng các trang thẻ */
.cards-subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding-bottom: 2px; }
.cards-subnav::-webkit-scrollbar { display: none; }
.cards-subnav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #141414; color: #ccc; text-decoration: none; font-size: 14px; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .cards-subnav a { background: #ffffff; color: #374151; }
.cards-subnav a:hover { color: #fff; border-color: #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .cards-subnav a:hover { color: #111827; border-color: #d1d5db; }
.cards-subnav a.on { background: var(--red); border-color: var(--red); color: #fff; }

/* Quà hôm nay */
.daily-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 26px; }
.daily-card { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 16px; background: #141414; border: 1px solid var(--border); color: #fff; text-decoration: none; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .daily-card { background: #ffffff; color: #111827; }
.daily-card.is-ready { border-color: color-mix(in srgb, var(--red) 70%, #333); box-shadow: 0 0 0 1px rgba(230,20,31,.35), 0 8px 24px rgba(230,20,31,.18); }
:where(html[data-theme="light"] body:not(.admin-body)) .daily-card.is-ready { border-color: color-mix(in srgb, var(--red) 70%, #e5e7eb); }
.daily-ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(230,20,31,.14); color: var(--red); }
.daily-body { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.daily-body strong { font-size: 15px; } .daily-body small { color: #aaa; font-size: 12.5px; line-height: 1.4; }
:where(html[data-theme="light"] body:not(.admin-body)) .daily-body small { color: #4b5563; }
.daily-card form { margin: 0; }
.daily-streak { grid-column: span 2; }
.streak-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; list-style: none; margin: 0; padding: 0; flex: 1 1 100%; order: 3; }
.streak-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: #1b1b1b; border: 1px solid #2a2a2a; font-size: 10.5px; color: #999; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .streak-days li { background: #ffffff; border: 1px solid #e5e7eb; color: #4b5563; }
.streak-days li b { font-size: 13px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .streak-days li b { color: #374151; }
.streak-days li.done { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.45); color: #86efac; }
:where(html[data-theme="light"] body:not(.admin-body)) .streak-days li.done { color: #15803d; }
.streak-days li.today { border-color: var(--red); background: rgba(230,20,31,.14); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .streak-days li.today { color: #111827; }
.streak-days li.big b { color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .streak-days li.big b { color: #a16207; }
.daily-streak form { order: 4; margin-left: auto; }
.daily-pity .series-prog { margin-top: 6px; }
@media (max-width: 640px) { .daily-streak { grid-column: auto; } .daily-hub { grid-template-columns: 1fr; } }

/* Sự kiện */
.event-banner, .home-event { --ea: #e6141f; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px; border-radius: 18px; margin-bottom: 24px; color: #fff; text-decoration: none;
    background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ea) 55%, transparent), transparent 60%), #120c0c; border: 1px solid color-mix(in srgb, var(--ea) 55%, #333); }
.event-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; z-index: 0; }
.event-banner > *:not(.event-bg), .home-event > *:not(.event-bg) { position: relative; z-index: 1; }
.event-kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ea); background: rgba(0,0,0,.45); padding: 3px 9px; border-radius: 999px; }
.event-banner h2 { margin: 8px 0 4px; font-size: 24px; } .event-banner p { margin: 0; color: #ddd; max-width: 560px; }
.event-cd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .event-cd small { color: #ccc; }
.cd { font-variant-numeric: tabular-nums; font-weight: 800; }
.cd-big { font-size: 26px; letter-spacing: 1px; }
.home-event { padding: 16px 18px; margin-bottom: 14px; } .home-event strong { font-size: 18px; flex: 1 1 200px; }
.home-event .event-cd { flex-direction: row; align-items: baseline; gap: 6px; }
.pack-event { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; background: #f97316; color: #fff; }
.pack-odds li.is-soldout { opacity: .55; text-decoration: line-through; } .pack-odds li.is-soldout b { text-decoration: none; color: #f87171; }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-odds li.is-soldout b { color: #b91c1c; }

/* Bảng tin thẻ hiếm */
.feed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 26px; }
.feed-item { --rc: #f5c451; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #141414; border: 1px solid var(--border); border-left: 3px solid var(--rc); min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .feed-item { background: #ffffff; }
.feed-av .avatar-circle { width: 36px; height: 36px; font-size: 14px; }
.feed-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.feed-card { color: var(--rc); font-weight: 700; } .feed-card i { font-style: normal; font-size: 10.5px; font-weight: 900; padding: 1px 6px; border-radius: 999px; background: var(--rc); color: #111; }
.feed-card em, .ticker-item em { font-style: normal; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 5px; color: #111; background: linear-gradient(90deg, #ff6ad5, #7df9ff, #ffe56a); }
.feed-text small { display: block; color: #777; font-size: 11.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .feed-text small { color: #6b7280; }
.feed-cheer { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid #333; background: #1b1b1b; color: #ccc; font: inherit; font-size: 13px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .feed-cheer { border: 1px solid #e5e7eb; background: #ffffff; color: #374151; }
.feed-cheer.on { border-color: #fde047; color: #fde047; background: rgba(253,224,71,.1); }
:where(html[data-theme="light"] body:not(.admin-body)) .feed-cheer.on { color: #a16207; } .feed-cheer[disabled] { cursor: default; opacity: .7; }
.home-cards .section-head h2 { display: flex; align-items: center; gap: 8px; }
.feed-ticker { overflow: hidden; border-radius: 999px; background: #121212; border: 1px solid var(--border); margin-bottom: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .feed-ticker { background: #ffffff; }
.feed-track { display: inline-flex; gap: 28px; padding: 10px 28px 10px 0; white-space: nowrap; will-change: transform; animation: vgTicker 40s linear infinite; }
.feed-ticker:hover .feed-track { animation-play-state: paused; }
@keyframes vgTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 15.0.1: luôn tự chạy (kể cả máy tắt hiệu ứng chuyển động) — chỉ chậm lại; không hiện thanh cuộn */
@media (prefers-reduced-motion: reduce) { .feed-track { animation-duration: 70s; } .feed-ticker { overflow: hidden; } }
.ticker-item { --rc: #f5c451; font-size: 13.5px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .ticker-item { color: #374151; } .ticker-item i { font-style: normal; font-weight: 900; color: var(--rc); }
.home-collectors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hc-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #141414; border: 1px solid var(--border); color: #fff; text-decoration: none; font-size: 13.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .hc-item { background: #ffffff; color: #111827; }
.hc-item em { font-style: normal; font-weight: 900; color: #fde047; margin-left: 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .hc-item em { color: #a16207; } .hc-item.top2 em { color: #e5e7eb; }
:where(html[data-theme="light"] body:not(.admin-body)) .hc-item.top2 em { color: #111827; } .hc-item.top3 em { color: #f59e0b; }
:where(html[data-theme="light"] body:not(.admin-body)) .hc-item.top3 em { color: #b45309; }
.hc-item .avatar-circle { width: 28px; height: 28px; font-size: 12px; } .hc-item small { color: #999; }
:where(html[data-theme="light"] body:not(.admin-body)) .hc-item small { color: #4b5563; }

/* Tủ trưng bày */
.showcase-box { padding: 16px; border-radius: 18px; margin-bottom: 20px; background: radial-gradient(120% 140% at 50% 0%, rgba(253,224,71,.08), transparent 60%), #121212; border: 1px solid #2c2a1d; }
:where(html[data-theme="light"] body:not(.admin-body)) .showcase-box { background: radial-gradient(120% 140% at 50% 0%, rgba(253,224,71,.08), transparent 60%), #ffffff; border: 1px solid #d6d4c2; }
.showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.showcase-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .showcase-head h2 { color: #a16207; }
.showcase-like { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid #333; background: #1b1b1b; color: #ccc; font: inherit; font-size: 13.5px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .showcase-like { border: 1px solid #e5e7eb; background: #ffffff; color: #374151; }
.showcase-like.on { color: #ff4d6d; border-color: #ff4d6d; background: rgba(255,77,109,.1); }
:where(html[data-theme="light"] body:not(.admin-body)) .showcase-like.on { color: #be123c; } .showcase-like[disabled] { cursor: default; }
.showcase-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.showcase-slot { position: relative; display: block; }
.showcase-x { position: absolute; top: -8px; right: -8px; z-index: 9; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #111; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 0 0 2px #333; }
:where(html[data-theme="light"] body:not(.admin-body)) .showcase-x { background: #ffffff; color: #111827; box-shadow: 0 0 0 2px #e5e7eb; }
.profile-showcase { margin-bottom: 18px; }
@media (max-width: 700px) { .showcase-row { grid-template-columns: repeat(5, 150px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .showcase-slot { scroll-snap-align: start; } }

/* Hoàn thành bộ + thành tựu */
.set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 18px; }
.set-item { --sa: #e6141f; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #141414; border: 1px solid var(--border); border-left: 3px solid var(--sa); }
:where(html[data-theme="light"] body:not(.admin-body)) .set-item { background: #ffffff; }
.set-item > div { min-width: 0; flex: 1; } .set-item strong { display: block; } .set-item small { display: block; color: #999; font-size: 12.5px; margin: 2px 0 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .set-item small { color: #4b5563; }
.set-item.is-ready { border-color: #fde047; box-shadow: 0 0 18px rgba(253,224,71,.18); } .set-item form { margin: 0; }
.set-done { display: inline-flex; align-items: center; gap: 4px; color: #86efac; font-size: 13px; font-weight: 700; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .set-done { color: #15803d; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ach-item { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #141414; border: 1px solid var(--border); opacity: .55; }
:where(html[data-theme="light"] body:not(.admin-body)) .ach-item { background: #ffffff; }
.ach-item.is-got { opacity: 1; border-color: #3b3520; background: linear-gradient(135deg, rgba(253,224,71,.08), #141414); }
:where(html[data-theme="light"] body:not(.admin-body)) .ach-item.is-got { border-color: #dbd4bd; background: linear-gradient(135deg, rgba(253,224,71,.08), #ffffff); }
.ach-ico { grid-row: span 2; font-size: 26px; text-align: center; } .ach-item strong { font-size: 14px; } .ach-item small { color: #999; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ach-item small { color: #4b5563; }
.copy-chip.is-foil { border-color: #7df9ff; }
.copy-stars { font-style: normal; color: #fde047; font-size: 11px; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-stars { color: #a16207; } .copy-foil, .copy-nice { font-style: normal; font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 5px; color: #111; background: #7df9ff; } .copy-nice { background: #fde047; }
.copy-pin { border: 0; background: none; color: #999; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-pin { color: #4b5563; } .copy-pin.on { color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .copy-pin.on { color: #a16207; }
.cards-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 12px; background: #1f1f1f; border: 1px solid #333; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); }
:where(html[data-theme="light"] body:not(.admin-body)) .cards-toast { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.cards-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) { .cards-toast { bottom: calc(var(--tabbar-h, 64px) + var(--safe-b, 0px) + 12px); } }

/* Chợ thẻ */
.market-kpis { display: flex; flex-wrap: wrap; gap: 8px; } .market-kpis span { padding: 5px 10px; border-radius: 999px; background: #1a1a1a; border: 1px solid #2a2a2a; font-size: 12.5px; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-kpis span { background: #ffffff; border: 1px solid #e5e7eb; color: #4b5563; } .market-kpis b { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-kpis b { color: #111827; }
.market-tabs { margin-bottom: 16px; }
.market-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.market-filter input[type=search], .market-filter select { flex: 1 1 150px; min-width: 0; padding: 9px 11px; border-radius: 10px; background: #111; border: 1px solid var(--border); color: #fff; font: inherit; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-filter input[type=search], :where(html[data-theme="light"] body:not(.admin-body)) .market-filter select { background: #ffffff; color: #111827; }
.market-filter label { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-filter label { color: #374151; }
.market-price { display: block; font-size: 13px; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-price { color: #4b5563; } .market-price b { font-size: 17px; color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-price b { color: #a16207; }
.market-meta, .market-seller { display: block; font-size: 11.5px; color: #888; line-height: 1.4; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-meta, :where(html[data-theme="light"] body:not(.admin-body)) .market-seller { color: #6b7280; }
.market-grid .tcard-actions form { margin: 4px 0 0; }
.market-card-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px; border-radius: 18px; background: #121212; border: 1px solid var(--border); margin-bottom: 18px; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-card-head { background: #ffffff; }
.market-card-info h2 { margin: 2px 0 4px; }
.price-spark { margin: 14px 0 6px; color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .price-spark { color: #a16207; } .price-spark svg { width: 100%; height: 80px; background: #0e0e0e; border-radius: 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .price-spark svg { background: #f3f4f6; }
.price-spark figcaption { font-size: 12.5px; margin-top: 4px; }
.price-hist summary { cursor: pointer; color: #ccc; margin: 6px 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .price-hist summary { color: #374151; }
.market-sell-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #1a1a1a; border: 1px solid var(--border); margin-bottom: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-sell-bar { background: #ffffff; }
.market-sell-bar > div { min-width: 0; flex: 1 1 220px; } .market-sell-bar strong { margin-right: 6px; }
.market-sell-price input { width: 130px; padding: 8px 10px; border-radius: 8px; background: #111; border: 1px solid var(--border); color: #fff; font: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-sell-price input { background: #ffffff; color: #111827; }
.market-pick input[type=radio] { position: absolute; top: 6px; right: 6px; z-index: 6; width: 18px; height: 18px; accent-color: var(--red); }
.market-empty { padding: 24px; text-align: center; background: #121212; border-radius: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .market-empty { background: #ffffff; }
.market-h { font-size: 18px; margin: 22px 0 12px; }
@media (max-width: 700px) { .market-card-head { grid-template-columns: 1fr; } .market-card-art { max-width: 220px; margin: 0 auto; } .market-sell-bar { top: 56px; } }

/* Xưởng thẻ */
.ws-note { font-size: 13.5px; color: #bbb; background: #121212; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ws-note { color: #4b5563; background: #ffffff; }
.ws-quick { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(230,20,31,.12), #141414); border: 1px solid rgba(230,20,31,.4); margin-bottom: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ws-quick { background: linear-gradient(135deg, rgba(230,20,31,.12), #ffffff); }
.ws-quick > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; } .ws-quick small { font-size: 12.5px; }
.ws-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #1a1a1a; border: 1px solid var(--border); margin-bottom: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ws-bar { background: #ffffff; }
.ws-bar .rar-filter { margin: 0; flex: 1 1 100%; }
.rar-filter a { --rc: #555; padding: 5px 11px; border-radius: 999px; border: 1px solid #333; background: #151515; color: #ccc; font-size: 12.5px; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .rar-filter a { border: 1px solid #e5e7eb; background: #ffffff; color: #374151; }
.rar-filter a.on { background: var(--rc, var(--red)); border-color: var(--rc, var(--red)); color: #111; font-weight: 700; } .rar-filter a:not([style]).on { background: var(--red); color: #fff; }
.ws-bar button[disabled] { opacity: .45; cursor: not-allowed; }
.ws-val { display: block; text-align: center; font-size: 11px; color: #a5b4fc; margin-top: 3px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ws-val { color: #0624b2; }
.ws-missing { color: #fca5a5; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .ws-missing { color: #b91c1c; }
.shop-item.is-focus .tcard-frame { box-shadow: 0 0 0 3px #fde047, 0 10px 26px rgba(0,0,0,.5); }
@media (max-width: 700px) { .ws-bar { top: 56px; } }

/* BXH */
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #141414; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-row { background: #ffffff; }
.lb-row.is-me { border-color: var(--red); }
.lb-rank { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #1f1f1f; color: #bbb; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-rank { background: #f3f4f6; color: #4b5563; }
.lb-row.top1 .lb-rank { background: #fde047; color: #111; } .lb-row.top2 .lb-rank { background: #e5e7eb; color: #111; } .lb-row.top3 .lb-rank { background: #f59e0b; color: #111; }
.lb-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-who { color: #111827; } .lb-who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-av { width: 36px; height: 36px; font-size: 14px; flex: 0 0 auto; }
.lb-score { display: flex; flex-direction: column; align-items: flex-end; } .lb-score b { font-size: 16px; color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-score b { color: #a16207; } .lb-score small { font-size: 11.5px; color: #888; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-score small { color: #6b7280; }

/* Kênh Chat: tin hệ thống */
.cm-sys { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 10px auto; max-width: 92%; padding: 8px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(253,224,71,.12), rgba(230,20,31,.1)); border: 1px solid rgba(253,224,71,.35); text-align: center; font-size: 13.5px; }
.cm-sys a { color: #fde68a; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-sys a { color: #92400e; } .cm-sys .cm-time { color: #888; font-size: 11px; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .cm-sys .cm-time { color: #6b7280; }

/* Quản trị */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; margin-bottom: 14px; }
.card-admin-grid > .field { min-width: 0; } .card-admin-form input[type=datetime-local] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.card-admin-grid:not(.series-code-grid) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ================= Bản 15: Khu Thẻ bài — Trung tâm thẻ (phương án C) ================= */
.cards-zone { font-family: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif; }
.cards-zone button, .cards-zone input, .cards-zone select, .cards-zone textarea { font-family: inherit; }
.cz-page { max-width: 1180px; }
.cz-top { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 6px 0; }
.cz-back { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: #141414; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-back { background: #ffffff; color: #374151; }
.cz-back:hover { color: #fff; border-color: #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-back:hover { color: #111827; border-color: #d1d5db; }
.cz-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-wallet { display: flex; gap: 6px; flex: 0 0 auto; }
.cz-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: #151515; font-size: 14px; font-weight: 700; color: #f4f4f5; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-chip { background: #ffffff; color: #111827; }
.cz-chip small { font-size: 11px; font-weight: 700; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-chip small { color: #4b5563; }
.cz-chip i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cz-vp i { background: radial-gradient(circle at 35% 35%, #ffe7a3, #f5c451 55%, #b7861d); box-shadow: 0 0 8px rgba(245,196,81,.5); }
.cz-vp { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-vp { color: #a16207; }
.cz-dust i { background: radial-gradient(circle at 35% 35%, #efe7ff, #c4b5fd 55%, #7c5cf0); box-shadow: 0 0 8px rgba(196,181,253,.45); }
.cz-dust { color: #c4b5fd; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-dust { color: #6d28d9; }
.cz-chip:hover { border-color: #444; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-chip:hover { border-color: #d1d5db; }
@media (max-width: 480px) { .cz-title { font-size: 18px; } .cz-chip { padding: 0 10px; height: 32px; font-size: 13px; } .cz-dust { display: none; } }

.cz-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: 14px; background: #121212; border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tabs { background: #ffffff; }
.cz-tabs::-webkit-scrollbar { display: none; }
.cz-tabs a { flex: 1 0 auto; text-align: center; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #a1a1aa; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tabs a { color: #4b5563; }
.cz-tabs a:hover { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tabs a:hover { color: #111827; }
.cz-tabs a.on { background: #f4f4f5; color: #111; }
.cz-tabs a b { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; }
.cz-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
.cz-chips::-webkit-scrollbar { display: none; }
.cz-chips a { flex: 0 0 auto; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border); background: #151515; font-size: 13px; font-weight: 700; color: var(--rc, #d4d4d8); }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-chips a { background: #ffffff; color: var(--rc, #374151); }
.cz-chips a.on { background: #f4f4f5; border-color: #f4f4f5; color: #111; }
.cz-kpis { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -4px 0 14px; font-size: 13px; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-kpis { color: #4b5563; }
.cz-kpis b { color: #f4f4f5; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-kpis b { color: #111827; }
.cz-lead { margin: -6px 0 14px; }
.cz-h2 { font-size: 17px; font-weight: 800; margin: 22px 0 12px; }
.cz-empty { padding: 24px 0; }
.cz-empty-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 34px 18px; border-radius: 18px; border: 1px dashed #333; color: #d4d4d8; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-empty-card { border: 1px dashed #e5e7eb; color: #374151; }
.cz-pity { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; background: #141414; border: 1px solid var(--border); font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-pity { background: #ffffff; }
.cz-legend { margin: 6px 0 20px; }
.cz-legend > summary { cursor: pointer; font-weight: 700; color: #d4d4d8; padding: 8px 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-legend > summary { color: #374151; }
.cz-legend .rar-legend { margin-top: 10px; }

/* Trung tâm */
.cz-hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cz-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e6141f; }
.cz-hub-title { margin: 4px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.cz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.cz-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #141414; border: 1px solid var(--border); min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat { background: #ffffff; }
.cz-stat:hover { border-color: #3a3a3a; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat:hover { border-color: #e5e7eb; }
.cz-stat small { font-size: 12px; color: #a1a1aa; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat small { color: #4b5563; }
.cz-stat strong { font-size: 24px; font-weight: 800; line-height: 1.2; }
.cz-stat strong span { font-size: 15px; color: #71717a; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat strong span { color: #6b7280; }
.cz-stat em { font-style: normal; font-size: 12px; color: #a1a1aa; display: inline-flex; align-items: center; gap: 2px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat em { color: #4b5563; }
.cz-stat-vp strong { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat-vp strong { color: #a16207; }
.cz-stat-dust strong { color: #c4b5fd; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat-dust strong { color: #6d28d9; }
.cz-stat-coll strong { color: #86efac; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-stat-coll strong { color: #15803d; }
@media (max-width: 480px) { .cz-stats { gap: 8px; } .cz-stat { padding: 10px 12px; } .cz-stat strong { font-size: 19px; } .cz-stat em { display: none; } .cz-hub-title { font-size: 24px; } }
.cz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
@media (min-width: 820px) { .cz-tiles { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1180px) { .cz-tiles { grid-template-columns: repeat(9, 1fr); } .cz-tile { min-height: 112px; } }
.cz-tile { --tc: #a1a1aa; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 14px 6px; border-radius: 16px; background: #141414; border: 1px solid var(--border); text-align: center; transition: transform .15s, border-color .15s; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tile { background: #ffffff; }
.cz-tile:hover { border-color: #3f3f46; border-color: color-mix(in srgb, var(--tc) 55%, #2a2a2a); transform: translateY(-2px); }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tile:hover { border-color: #d1d5db; border-color: color-mix(in srgb, var(--tc) 55%, #e5e7eb); }
.cz-tile-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--tc); background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--tc) 16%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tile-ico { background: rgba(0,0,0,0.042); }
.cz-tile-label { font-size: 13px; font-weight: 700; line-height: 1.25; color: #e4e4e7; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-tile-label { color: #111827; }
.cz-tile[data-c=red] { --tc: #f43f5e; } .cz-tile[data-c=gold] { --tc: #f5c451; } .cz-tile[data-c=blue] { --tc: #60a5fa; }
.cz-tile[data-c=purple] { --tc: #a78bfa; } .cz-tile[data-c=green] { --tc: #4ade80; } .cz-tile[data-c=orange] { --tc: #fb923c; }
.cz-tile[data-c=yellow] { --tc: #facc15; } .cz-tile[data-c=pink] { --tc: #f472b6; } .cz-tile[data-c=gray] { --tc: #a1a1aa; }
.cz-badge { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.cz-badge.is-live { background: #f97316; animation: czPulse 1.6s infinite; }
@keyframes czPulse { 50% { box-shadow: 0 0 0 5px rgba(249,115,22,.18); } }
.cz-event { display: flex; margin-bottom: 22px; }
.cz-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.cz-sec-head h2 { margin: 0; font-size: 18px; font-weight: 800; }

/* Ví V-Point */
.cz-balance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 20px; margin-bottom: 18px; border: 1px solid #3a2f12; background: radial-gradient(circle at 0 0, rgba(245,196,81,.16), transparent 60%), #141414; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-balance { border: 1px solid #e7d8b1; background: radial-gradient(circle at 0 0, rgba(245,196,81,.16), transparent 60%), #ffffff; }
.cz-balance-main { display: flex; align-items: center; gap: 14px; }
.cz-coin { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: #3b2a05; background: radial-gradient(circle at 35% 30%, #fff1c4, #f5c451 55%, #b7861d); box-shadow: 0 0 22px rgba(245,196,81,.35); }
.cz-balance-main small { display: block; color: #a1a1aa; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-balance-main small { color: #4b5563; }
.cz-balance-main strong { font-size: 34px; font-weight: 800; color: #f5c451; line-height: 1.1; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-balance-main strong { color: #a16207; }
.cz-balance-side { display: flex; gap: 20px; }
.cz-balance-side small { display: block; font-size: 12px; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-balance-side small { color: #4b5563; }
.cz-balance-side b { font-size: 17px; }
.is-in { color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .is-in { color: #15803d; } .is-out { color: #f87171; }
:where(html[data-theme="light"] body:not(.admin-body)) .is-out { color: #b91c1c; }
.cz-wallet-grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .cz-wallet-grid { grid-template-columns: 1fr 1fr; } }
.cz-panel { padding: 16px 18px; border-radius: 18px; background: #141414; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-panel { background: #ffffff; }
.cz-panel .cz-h2 { margin-top: 0; }
.cz-earn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cz-earn li { display: flex; align-items: center; gap: 12px; }
.cz-earn li > svg { flex: 0 0 auto; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-earn li > svg { color: #a16207; }
.cz-earn li div { flex: 1 1 auto; min-width: 0; }
.cz-earn b { display: block; font-size: 14px; }
.cz-earn small { color: #a1a1aa; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-earn small { color: #4b5563; }
.cz-earn a { flex: 0 0 auto; font-size: 13px; }
.alert-warn { background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.45); color: #fde68a; }
:where(html[data-theme="light"] body:not(.admin-body)) .alert-warn { color: #92400e; }
.cz-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cz-warn svg { flex: 0 0 auto; margin-top: 2px; }
.cz-exchange { display: flex; flex-direction: column; gap: 10px; }
.cz-exchange label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.cz-exchange input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: #0e0e0e; color: #fff; font-size: 16px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-exchange input { background: #f3f4f6; color: #111827; }
.cz-exchange p { margin: 0; font-size: 13px; }
.cz-ledger { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.cz-ledger li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid #1d1d1d; background: #121212; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-ledger li { border-top: 1px solid #ffffff; background: #ffffff; }
.cz-ledger li:first-child { border-top: 0; }
.cz-ledger li > div { flex: 1 1 auto; min-width: 0; }
.cz-ledger b { display: block; font-size: 14px; }
.cz-ledger small { color: #8a8a8a; font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-ledger small { color: #6b7280; }
.cz-ledger-ico { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: #1a1a1a; }
:where(html[data-theme="light"] body:not(.admin-body)) .cz-ledger-ico { background: #ffffff; }
.cz-ledger-amt { text-align: right; font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.cz-ledger-amt small { font-weight: 500; }

/* ================= Bản 15: Bảng xếp hạng ================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lb-page { max-width: 860px; }
.lb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.lb-head h1 { margin: 4px 0 0; font-size: 28px; }
.lb-pick { flex: 1 1 280px; max-width: 380px; }
.lb-select { position: relative; display: flex; align-items: center; height: 48px; border-radius: 14px; border: 1px solid #3a3a3a; background: #151515; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-select { border: 1px solid #e5e7eb; background: #ffffff; }
.lb-select > svg:first-child { position: absolute; left: 14px; color: var(--red); pointer-events: none; }
.lb-select select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 40px 0 44px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; text-align-last: left; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-select select { color: #111827; }
.lb-select select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 14px; }
.lb-select select option, .lb-select select optgroup { background: #151515; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-select select option, :where(html[data-theme="light"] body:not(.admin-body)) .lb-select select optgroup { background: #ffffff; color: #111827; }
.lb-caret { position: absolute; right: 14px; pointer-events: none; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-caret { color: #4b5563; }
.lb-desc { margin: 4px 0 14px; font-size: 14px; }
.lb-periods { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #121212; border: 1px solid var(--border); margin-bottom: 16px; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-periods { background: #ffffff; }
.lb-periods a { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-periods a { color: #4b5563; }
.lb-periods a.on { background: #f4f4f5; color: #111; }
.lb-mine { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; margin-bottom: 18px; border: 1px solid rgba(230,20,31,.45); background: linear-gradient(90deg, rgba(230,20,31,.14), rgba(230,20,31,.03)); }
.lb-mine > div { flex: 1 1 auto; }
.lb-mine small { display: block; color: #a1a1aa; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-mine small { color: #4b5563; }
.lb-mine strong { font-size: 20px; }
.lb-mine-score b { font-size: 18px; }
.lb-guest { margin: 0 0 16px; }
.lb-empty { text-align: center; padding: 40px 16px; border: 1px dashed #333; border-radius: 18px; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-empty { border: 1px dashed #e5e7eb; color: #4b5563; }
.lb-podium { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.lb-pod { flex: 1 1 0; max-width: 210px; }
.lb-pod a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 8px 14px; border-radius: 18px 18px 12px 12px; background: #141414; border: 1px solid var(--border); min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-pod a { background: #ffffff; }
.lb-pod strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lb-pod-av { position: relative; }
.lb-pod-av .avatar-circle { width: 58px; height: 58px; }
.lb-pod-av i { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px; color: #111; background: #a1a1aa; border: 2px solid #141414; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-pod-av i { border: 2px solid #ffffff; }
.lb-pod-score { font-weight: 800; font-size: 17px; }
.lb-pod-score small { font-weight: 600; font-size: 11px; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-pod-score small { color: #4b5563; }
.lb-pod.p1 a { padding-top: 26px; border-color: rgba(245,196,81,.55); background: radial-gradient(circle at 50% 0, rgba(245,196,81,.18), transparent 70%), #141414; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-pod.p1 a { background: radial-gradient(circle at 50% 0, rgba(245,196,81,.18), transparent 70%), #ffffff; }
.lb-pod.p1 .lb-pod-av .avatar-circle { width: 74px; height: 74px; box-shadow: 0 0 0 3px #f5c451, 0 0 22px rgba(245,196,81,.4); }
.lb-pod.p1 .lb-pod-av i { background: #f5c451; } .lb-pod.p1 .lb-pod-score { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .lb-pod.p1 .lb-pod-score { color: #a16207; }
.lb-pod.p2 .lb-pod-av .avatar-circle { box-shadow: 0 0 0 3px #d4d4d8; } .lb-pod.p2 .lb-pod-av i { background: #d4d4d8; }
.lb-pod.p3 .lb-pod-av .avatar-circle { box-shadow: 0 0 0 3px #d08b52; } .lb-pod.p3 .lb-pod-av i { background: #d08b52; }
.lb-pod.is-me a { outline: 2px solid var(--red); }
.lb-list2 { max-width: none; }
.lb-list2 .lb-who > span { display: flex; flex-direction: column; min-width: 0; }
.lb-list2 .lb-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list2 .lb-who small { font-size: 12px; }
.lb-foot { font-size: 12px; margin-top: 14px; }
@media (max-width: 480px) { .lb-head h1 { font-size: 24px; } .lb-pick { max-width: none; } .lb-podium { gap: 6px; } .lb-pod a { padding: 12px 4px 10px; } .lb-pod-av .avatar-circle { width: 46px; height: 46px; } .lb-pod.p1 .lb-pod-av .avatar-circle { width: 58px; height: 58px; } .lb-pod-score { font-size: 15px; } }
@media (max-width: 640px) {
    .cz-hub .series-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; }
    .cz-hub .series-strip::-webkit-scrollbar { display: none; }
    .cz-hub .series-card { flex: 0 0 72%; scroll-snap-align: start; }
    .cz-hub .series-cover { height: 90px; }
}

/* ================= Bản 15: Huy hiệu — ảnh tải lên + viền hiệu ứng theo độ hiếm ================= */
@property --bdg-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.bdg { --bw: 2px; }
.cm-badge.bdg, .badge-icon.bdg { --bw: 1.5px; }
.bdg img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.bdg.bdg-img { font-size: 0 !important; }
.bdg-r1 { border: var(--bw) solid #555 !important; border: var(--bw) solid color-mix(in srgb, var(--badge-color, #777) 70%, #333) !important; box-shadow: none !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .bdg-r1 { border: var(--bw) solid #d1d5db !important; border: var(--bw) solid color-mix(in srgb, var(--badge-color, #9ca3af) 70%, #e5e7eb) !important; }
.bdg-r2 { border: var(--bw) solid var(--badge-color, #3b82f6) !important; animation: bdgGlow 2.6s ease-in-out infinite; }
@keyframes bdgGlow { 0%, 100% { box-shadow: 0 0 1px var(--badge-color, #3b82f6); } 50% { box-shadow: 0 0 10px var(--badge-color, #3b82f6); } }
.bdg-r3, .bdg-r4 { border: var(--bw) solid transparent !important; animation: bdgSpin 3.2s linear infinite; }
.bdg-r3 { background: linear-gradient(#141418, #141418) padding-box, conic-gradient(from var(--bdg-a, 0deg), #22d3ee, #6366f1, #a855f7, #22d3ee) border-box !important; box-shadow: 0 0 8px rgba(99,102,241,.45) !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .bdg-r3 { background: linear-gradient(#ffffff, #ffffff) padding-box, conic-gradient(from var(--bdg-a, 0deg), #22d3ee, #6366f1, #a855f7, #22d3ee) border-box !important; }
.bdg-r4 { position: relative; background: linear-gradient(#1a1406, #1a1406) padding-box, conic-gradient(from var(--bdg-a, 0deg), #fff4c2, #f5c451, #b7791f, #fde68a, #f59e0b, #fff4c2) border-box !important;
    animation: bdgSpin 2.4s linear infinite, bdgGold 2.4s ease-in-out infinite; }
@keyframes bdgSpin { to { --bdg-a: 360deg; } }
@keyframes bdgGold { 0%, 100% { box-shadow: 0 0 6px rgba(245,196,81,.45); } 50% { box-shadow: 0 0 16px rgba(245,196,81,.85); } }
.bdg-r4::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) no-repeat; background-size: 250% 100%; animation: bdgShine 3.2s ease-in-out infinite; }
:where(html[data-theme="light"] body:not(.admin-body)) .bdg-r4::after { background: linear-gradient(115deg, transparent 30%, rgba(0,0,0,0.385) 45%, transparent 60%) no-repeat; }
@keyframes bdgShine { 0% { background-position: 150% 0; } 55%, 100% { background-position: -100% 0; } }
.badge-showcase-item.bdg-item-r3 { border-color: rgba(99,102,241,.55); }
.badge-showcase-item.bdg-item-r4 { border-color: rgba(245,196,81,.6); background: radial-gradient(circle at 50% 0, rgba(245,196,81,.14), transparent 70%), #1c1c1c; }
:where(html[data-theme="light"] body:not(.admin-body)) .badge-showcase-item.bdg-item-r4 { background: radial-gradient(circle at 50% 0, rgba(245,196,81,.14), transparent 70%), #ffffff; }
.bdg-preview { display: flex; align-items: center; gap: 10px; }
.bdg-preview .badge-showcase-icon { margin: 0 !important; width: 48px; height: 48px; }
.bdg-img-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.bdg-img-form input[type=file] { max-width: 100%; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .bdg-r2, .bdg-r3, .bdg-r4, .bdg-r4::after { animation: none !important; } }

/* Bản 15.0.2: lật thẻ thuần 2D (co giãn ngang 1 → 0 → 1, đổi mặt ở giữa) — không dùng xoay 3D nên chữ không thể bị ngược trên bất kỳ trình duyệt / card đồ họa nào */
.pack-reveal .reveal-slot, .pack-reveal .reveal-slot.flipped { transform: none; transform-style: flat; transition: none; perspective: none; }
.pack-reveal .reveal-back, .pack-reveal .reveal-front { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.pack-reveal .reveal-front { opacity: 0; transition: opacity 0s .3s; }
.pack-reveal .reveal-back { transition: opacity 0s .3s, border-color .2s; }
.pack-reveal .reveal-slot.flipped .reveal-front { opacity: 1; }
.pack-reveal .reveal-slot.flipped .reveal-back { opacity: 0; pointer-events: none; }
.pack-reveal .reveal-slot:not(.flipped):hover { transform: translateY(-4px); transition: transform .2s; }
.pack-reveal .reveal-slot.flipped { animation: revealFlip2 .6s ease-in-out; }
@keyframes revealFlip2 { 0% { transform: scaleX(1); } 50% { transform: scaleX(0) scaleY(1.04); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pack-reveal .reveal-slot.flipped { animation: none; } .pack-reveal .reveal-front, .pack-reveal .reveal-back { transition: none; } }

/* Bản 15.0.3: mở nhiều gói + quay lại đúng gói vừa mở */
.pack-card, .shop-item { scroll-margin-top: 90px; }
.pack-multi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pack-multi form { margin: 0; }
.pack-btn-x { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pack-btn-x b { color: #f5c451; font-weight: 900; }
:where(html[data-theme="light"] body:not(.admin-body)) .pack-btn-x b { color: #a16207; }
.pack-btn-x:disabled { opacity: .45; cursor: not-allowed; }
.pack-multi.one { grid-template-columns: 1fr; }

/* Bản 15.1: khu quản trị trên điện thoại không tràn ngang (flex item thiếu min-width:0 làm cả trang giãn theo bảng/ô nhập) */
.admin-main { min-width: 0; }
@media (max-width: 900px) {
    .admin-main .admin-card, .admin-main form, .admin-main .field, .admin-main label { min-width: 0; max-width: 100%; }
    .admin-main input:not([type=checkbox]):not([type=radio]), .admin-main select, .admin-main textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
    .admin-main [class*="grid"] > * { min-width: 0; }
    .admin-grid-2, .admin-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
    .admin-main > table, .admin-main .admin-card > table, .admin-main form > table { display: block; max-width: 100%; overflow-x: auto; }
    .badge-manage-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Bản 16: Hồ sơ — khung tương tác gọn + Tài sản ================= */
.pf-panel { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 12px; border-radius: 16px; background: #121212; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-panel { background: #ffffff; }
.pf-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.pf-act, .pf-acts .heart-btn { box-sizing: border-box; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px; border: 1px solid #2c2c2c; background: #181818; color: #e4e4e7; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-act, :where(html[data-theme="light"] body:not(.admin-body)) .pf-acts .heart-btn { border: 1px solid #e5e7eb; background: #ffffff; color: #111827; }
.pf-act:hover { border-color: #444; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-act:hover { border-color: #d1d5db; color: #111827; }
.pf-acts .heart-btn .heart-count { font-size: 16px; font-weight: 800; }
.pf-acts .heart-btn small { font-size: 12px; font-weight: 600; color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-acts .heart-btn small { color: #4b5563; }
.pf-acts .heart-btn.is-hearted small { color: #ffe4ea; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-acts .heart-btn.is-hearted small { color: #b80029; }
.pf-act-dm { background: var(--red); border-color: var(--red); color: #fff; }
.pf-act-dm:hover { background: #ff2a35; }
.pf-act-rep { color: #a1a1aa; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-act-rep { color: #4b5563; }
.pf-act-rep span { display: inline; }
.pf-hearters { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #181818; border: 1px solid #242424; font-size: 12.5px; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-hearters { background: #ffffff; border: 1px solid #f3f4f6; }
.pf-hearters .hearters-stack { display: flex; flex: 0 0 auto; }
.pf-hearters .hearters-stack a { margin-left: -8px; } .pf-hearters .hearters-stack a:first-child { margin-left: 0; }
.pf-hearters .avatar-circle { border: 2px solid #181818; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-hearters .avatar-circle { border: 2px solid #ffffff; }
.pf-assets { margin: 0 0 22px; }
.pf-assets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pf-assets-head h2 { margin: 0; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }
.pf-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pf-asset { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: #141414; border: 1px solid var(--border); color: inherit; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset { background: #ffffff; }
a.pf-asset:hover { border-color: #3a3a3a; }
:where(html[data-theme="light"] body:not(.admin-body)) a.pf-asset:hover { border-color: #e5e7eb; }
.pf-asset small { font-size: 12px; color: #a1a1aa; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset small { color: #4b5563; }
.pf-asset strong { font-size: 22px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-asset em { font-style: normal; font-size: 12px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset em { color: #6b7280; }
.pf-asset.is-vp strong { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset.is-vp strong { color: #a16207; } .pf-asset.is-val strong { color: #c4b5fd; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset.is-val strong { color: #6d28d9; } .pf-asset.is-cards strong { color: #86efac; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset.is-cards strong { color: #15803d; } .pf-asset.is-pts strong { color: #fde047; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-asset.is-pts strong { color: #a16207; }
@media (max-width: 900px) {
    .pf-assets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pf-asset { padding: 10px 12px; } .pf-asset strong { font-size: 19px; }
}
@media (min-width: 600px) and (max-width: 1100px) { .pf-assets-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .pf-act, .pf-acts .heart-btn { font-size: 13px; padding: 0 8px; } .pf-acts .heart-btn small { display: none; } }

/* ================= Bản 16: Trang Tính năng ================= */
.ft-page { max-width: 1000px; }
.ft-head h1 { margin: 4px 0 6px; font-size: 28px; }
.ft-head p { margin: 0 0 18px; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ft-card { --tc: #a1a1aa; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: #141414; border: 1px solid var(--border); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-card { background: #ffffff; }
.ft-card:hover { transform: translateY(-2px); border-color: #3f3f46; border-color: color-mix(in srgb, var(--tc) 55%, #2a2a2a); }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-card:hover { border-color: #d1d5db; border-color: color-mix(in srgb, var(--tc) 55%, #e5e7eb); }
.ft-ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--tc); background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--tc) 16%, transparent); }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-ico { background: rgba(0,0,0,0.042); }
.ft-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ft-body strong { font-size: 18px; }
.ft-body small { color: #a1a1aa; font-size: 13px; line-height: 1.4; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-body small { color: #4b5563; }
.ft-body em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--tc); }
.ft-go { color: #71717a; flex: 0 0 auto; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-go { color: #6b7280; }
.ft-card[data-c=red] { --tc: #f43f5e; } .ft-card[data-c=gold] { --tc: #f5c451; } .ft-card[data-c=blue] { --tc: #60a5fa; } .ft-card[data-c=purple] { --tc: #a78bfa; }
.ft-card[data-c=green] { --tc: #4ade80; } .ft-card[data-c=orange] { --tc: #fb923c; } .ft-card[data-c=pink] { --tc: #f472b6; }
.ft-empty { margin-top: 16px; }
@media (max-width: 640px) { .ft-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ft-card { padding: 14px; } .ft-ico { width: 48px; height: 48px; } .ft-head h1 { font-size: 24px; } }
.ws-note.ws-note-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ws-rates { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ws-rates i { font-style: normal; font-weight: 700; font-size: 13px; }

/* ===== Bản 16.1: Hòm quà (gb-) · Nhập mã quà (gc-) · Bộ soạn phần thưởng (rw-) ===== */
.gb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.gb-toolbar p { margin: 0; font-size: 14px; flex: 1 1 260px; min-width: 0; }
.gb-tools { display: flex; gap: 8px; flex-wrap: wrap; } .gb-tools form { margin: 0; }
.gb-tools .btn-solid, .gb-tools .btn-outline, .gb-actions .btn-solid, .gb-actions .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.gb-list { display: grid; gap: 12px; }
.gb-item { border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--border); padding: 14px 16px; min-width: 0; }
.gb-item.is-open { border-color: rgba(244,114,182,.45); background: linear-gradient(135deg, rgba(244,114,182,.08), rgba(19,19,19,1) 55%); }
.gb-item.is-expired { opacity: .6; }
.gb-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gb-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(244,114,182,.14); color: #f472b6; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-ico { color: #be185d; }
.gb-item.is-claimed .gb-ico { background: #1d1d1d; color: #777; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-item.is-claimed .gb-ico { background: #ffffff; color: #6b7280; }
.gb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gb-main strong { font-size: 15px; overflow-wrap: anywhere; } .gb-main small { font-size: 12.5px; }
.gb-exp { color: #fbbf24; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-exp { color: #b45309; }
.gb-tag { flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #222; color: #a1a1aa; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-tag { background: #f3f4f6; color: #4b5563; }
.gb-tag-new { background: #f472b6; color: #1a0610; } .gb-tag-exp { background: #3a2a0a; color: #fbbf24; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-tag-exp { background: #faf3e6; color: #b45309; }
.gb-body { margin: 10px 0 0; font-size: 14px; color: #d4d4d8; overflow-wrap: anywhere; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-body { color: #374151; }
.gb-rewards { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gb-rewards li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; background: #1b1b1b; border: 1px solid #2c2c2c; font-size: 13.5px; font-weight: 600; max-width: 100%; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li { background: #ffffff; border: 1px solid #e5e7eb; }
.gb-rewards li span { overflow-wrap: anywhere; min-width: 0; }
.gb-rewards li[data-t=vp] svg { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li[data-t=vp] svg { color: #a16207; } .gb-rewards li[data-t=points] svg { color: #60a5fa; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li[data-t=points] svg { color: #1d4ed8; } .gb-rewards li[data-t=badge] svg { color: #a78bfa; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li[data-t=badge] svg { color: #6d28d9; }
.gb-rewards li[data-t=card] svg, .gb-rewards li[data-t=pack] svg { color: #f43f5e; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li[data-t=card] svg, :where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li[data-t=pack] svg { color: #be123c; } .gb-rewards li[data-t=item] svg { color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-rewards li[data-t=item] svg { color: #15803d; }
.gb-result { margin: 10px 0 0; font-size: 13px; color: #86efac; display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
:where(html[data-theme="light"] body:not(.admin-body)) .gb-result { color: #15803d; }
.gb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .gb-actions form { margin: 0; }
.gb-item.is-open .gb-actions .btn-solid { background: #f472b6; border-color: #f472b6; color: #1a0610; font-weight: 700; }

.gc-page { max-width: 760px; margin: 0 auto; }
.gc-hero { text-align: center; padding: 28px 20px; border-radius: 22px; margin-top: 10px; background: radial-gradient(circle at 50% 0%, rgba(244,114,182,.18), transparent 65%), #121212; border: 1px solid #2a2a2a; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-hero { background: radial-gradient(circle at 50% 0%, rgba(244,114,182,.18), transparent 65%), #ffffff; border: 1px solid #e5e7eb; }
.gc-hero h1 { margin: 10px 0 6px; font-size: clamp(24px, 5vw, 32px); }
.gc-hero > p { margin: 0 auto 18px; max-width: 520px; font-size: 14.5px; }
.gc-hero-ico { display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(135deg, #f472b6, #e6141f); color: #fff; box-shadow: 0 10px 30px rgba(244,114,182,.3); }
.gc-alert { max-width: 520px; margin: 0 auto 14px; text-align: left; }
.gc-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.gc-form input { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 13px 14px; border-radius: 14px; background: #0c0c0c; border: 1px solid #3a3a3a; color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-form input { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
.gc-form input:focus { outline: none; border-color: #f472b6; box-shadow: 0 0 0 3px rgba(244,114,182,.2); }
.gc-form input::placeholder { letter-spacing: .02em; font-weight: 500; color: #555; }
.gc-form .btn-solid { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border-radius: 14px; padding: 0 20px; }
.gc-box-link { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 14px auto 0; padding: 12px 14px; border-radius: 14px; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.35); text-align: left; }
.gc-box-link > svg:first-child { color: #a78bfa; flex-shrink: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-box-link > svg:first-child { color: #6d28d9; } .gc-box-link span { flex: 1; display: flex; flex-direction: column; min-width: 0; } .gc-box-link small { color: var(--gray); }
.gc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.gc-steps div { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 13.5px; min-width: 0; }
.gc-steps b { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f472b6; color: #1a0610; font-size: 13px; }
.gc-steps em { font-style: normal; font-weight: 700; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-steps em { color: #111827; }
.gc-h2 { font-size: 18px; margin: 24px 0 10px; }
.gc-hist { display: grid; gap: 8px; }
.gc-hist-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); min-width: 0; }
.gc-hist-item code { flex-shrink: 0; font-weight: 700; color: #f472b6; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-hist-item code { color: #be185d; }
.gc-hist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gc-hist-main strong { font-size: 13.5px; overflow-wrap: anywhere; } .gc-hist-main small { font-size: 12px; }
@media (max-width: 600px) {
    .gc-form { flex-direction: column; } .gc-form .btn-solid { justify-content: center; padding: 13px; }
    .gc-steps { grid-template-columns: minmax(0, 1fr); }
    .gc-hist-item { gap: 10px; padding: 10px 12px; } .gc-hist-item code { max-width: 38%; overflow-wrap: anywhere; font-size: 12px; }
    .inbox-tabs { width: 100%; } .inbox-tabs a { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13.5px; }
    .gb-item { padding: 12px; } .gb-actions .btn-solid, .gb-actions form { width: 100%; } .gb-actions .btn-solid { justify-content: center; }
}

/* Quản trị: bộ soạn phần thưởng, đối tượng, đợt mã */
.rw-editor { display: grid; gap: 8px; }
.rw-rows { display: grid; gap: 8px; }
.rw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: #161616; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .rw-row { background: #ffffff; }
.rw-row select, .rw-row input { min-width: 0; }
.rw-row .rw-type { flex: 0 0 170px; } .rw-row .rw-n { flex: 0 0 110px; } .rw-row .rw-f { flex: 1 1 200px; }
.rw-row [hidden] { display: none !important; }
.rw-del { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: #1c1c1c; color: #aaa; cursor: pointer; display: grid; place-items: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .rw-del { background: #ffffff; color: #4b5563; }
.rw-del:hover { color: #fff; border-color: var(--red); }
:where(html[data-theme="light"] body:not(.admin-body)) .rw-del:hover { color: #111827; }
.rw-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.rw-hint { font-size: 12.5px; margin: 0; }
.aud-box { display: grid; gap: 8px; } .aud-box textarea { width: 100%; } .aud-pane[hidden] { display: none; }
.gc-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gc-admin-actions form { margin: 0; }
.danger-btn { color: #fca5a5 !important; border-color: rgba(248,113,113,.45) !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .danger-btn { color: #b91c1c !important; }
.gc-stats { margin: 12px 0; }
.gc-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.gc-dl dt { color: var(--gray); } .gc-dl dd { margin: 0; overflow-wrap: anywhere; }
.gc-code { font-weight: 700; color: #f9a8d4; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-code { color: #ac0c63; } .gc-codes { max-height: 460px; overflow: auto; }
.gc-copy, .gc-x { border: 0; background: none; color: #888; cursor: pointer; padding: 2px 4px; vertical-align: middle; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-copy, :where(html[data-theme="light"] body:not(.admin-body)) .gc-x { color: #6b7280; } .gc-copy.ok { color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-copy.ok { color: #15803d; } .gc-x:hover { color: #f87171; }
:where(html[data-theme="light"] body:not(.admin-body)) .gc-x:hover { color: #b91c1c; }
.gc-gen { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; } .gc-gen input { flex: 1 1 110px; min-width: 0; }
.gc-share { font-size: 12.5px; overflow-wrap: anywhere; }
.gc-item-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; } .gc-item-form input[type=text] { flex: 1 1 140px; min-width: 0; }
@media (max-width: 600px) { .gc-dl { grid-template-columns: minmax(0, 1fr); } .gc-dl dd { margin-bottom: 6px; } .rw-row .rw-type, .rw-row .rw-n { flex: 1 1 45%; } }
.card-admin-form input[type=radio], .card-admin-form input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
.card-admin-form .grant-modes label { justify-content: flex-start; text-align: left; }
.card-admin-checks { display: flex; align-items: center; gap: 8px; }
.card-admin-form label.card-admin-checks { display: flex; flex-direction: row; justify-content: flex-start; text-align: left; }

/* ===== Bản 17: Hoạt động nổi bật (sc-) ===== */
.sc-section { padding-top: 10px; }
.sc-head { margin-bottom: 18px; } .sc-head h2 { margin: 6px 0 4px; } .sc-head p { margin: 0; }
.sc-grid { display: grid; gap: 16px; align-items: stretch; }
.sc-l1 { grid-template-columns: minmax(0, 1fr); }
.sc-l1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-l1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sc-l2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sc-l1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-l2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-cell { position: relative; min-width: 0; border-radius: 18px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); }
.sc-empty { display: none; }
.sc-intro { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 24px; background: radial-gradient(circle at 0% 0%, rgba(230,20,31,.16), transparent 60%), var(--bg-soft); }
.sc-intro h3 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; }
.sc-intro p { margin: 0; color: #c9c9c9; font-size: 15px; line-height: 1.6; }
:where(html[data-theme="light"] body:not(.admin-body)) .sc-intro p { color: #374151; }
.sc-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.sc-banner { display: block; min-height: 200px; }
.sc-banner img { display: block; width: 100%; height: 100%; min-height: 200px; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s; }
.sc-l1 .sc-banner img { aspect-ratio: 21 / 8; }
a.sc-banner:hover img { transform: scale(1.03); }
.sc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; font-weight: 700; font-size: 15px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.sc-video { display: flex; flex-direction: column; background: #000; }
:where(html[data-theme="light"] body:not(.admin-body)) .sc-video { background: #f3f4f6; }
.sc-frame { position: relative; width: 100%; aspect-ratio: var(--ar, 16/9); }
.sc-frame.is-tall { max-height: 640px; width: auto; height: 100%; min-height: 420px; margin: 0 auto; }
.sc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sc-vt { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 14px; font-weight: 600; background: var(--bg-soft); }
.sc-live { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; padding: 20px; text-align: center; background: radial-gradient(circle, rgba(230,20,31,.25), transparent 70%), #0e0e0e; }
:where(html[data-theme="light"] body:not(.admin-body)) .sc-live { background: radial-gradient(circle, rgba(230,20,31,.25), transparent 70%), #f3f4f6; }
.sc-live-dot { padding: 3px 10px; border-radius: 6px; background: var(--red); font-weight: 800; font-size: 12px; letter-spacing: .08em; animation: scPulse 1.6s infinite; }
.sc-live small { color: var(--gray); display: inline-flex; gap: 4px; align-items: center; }
@keyframes scPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sc-live-dot { animation: none; } a.sc-banner:hover img { transform: none; } }
/* Máy tính bảng: 1/3+2/3 và 2/3+1/3 xếp dọc; 3 cột -> 2 cột, ô cuối trải rộng */
@media (max-width: 900px) {
    .sc-l1-2, .sc-l2-1 { grid-template-columns: minmax(0, 1fr); }
    .sc-l1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-l1-1-1 > :nth-child(3) { grid-column: 1 / -1; }
    .sc-frame.is-tall { min-height: 380px; }
}
/* Điện thoại: xếp dọc, hoặc vuốt ngang */
@media (max-width: 600px) {
    .sc-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; } .sc-l1-1-1 > :nth-child(3) { grid-column: auto; }
    .sc-m-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
    .sc-m-scroll::-webkit-scrollbar { display: none; }
    .sc-m-scroll > .sc-cell { flex: 0 0 86%; scroll-snap-align: start; }
    .sc-intro { padding: 20px 18px; }
    .sc-banner, .sc-banner img { min-height: 170px; }
    .sc-frame.is-tall { min-height: 0; width: 100%; max-height: 78vh; }
}

/* ===== Bản 17: quản trị (dt- dọn dữ liệu · as- tài sản · av- hoạt động · cq- nhiệm vụ sự kiện · scp- sơ đồ bố cục) ===== */
.danger-solid { background: #b91c1c !important; border-color: #b91c1c !important; }
.dt-list { display: grid; gap: 6px; margin: 10px 0 14px; }
.dt-item, .dt-all { display: flex !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #161616; border: 1px solid var(--border); cursor: pointer; text-align: left; }
:where(html[data-theme="light"] body:not(.admin-body)) .dt-item, :where(html[data-theme="light"] body:not(.admin-body)) .dt-all { background: #ffffff; }
.dt-all { background: transparent; border-style: dashed; }
.dt-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dt-item small { font-size: 12.5px; }
.dt-item em { flex-shrink: 0; font-style: normal; font-size: 12.5px; color: #fca5a5; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .dt-item em { color: #b91c1c; }
.dt-item.is-na { opacity: .5; } .dt-item input { margin-top: 3px !important; }
.dt-season { padding: 8px 0; border-bottom: 1px solid var(--border); } .dt-season summary { cursor: pointer; } .dt-season ol { margin: 8px 0 0; padding-left: 22px; font-size: 14px; }
.as-head { display: flex; align-items: center; gap: 14px; } .as-head h2 { margin: 0; } .as-av { width: 54px !important; height: 54px !important; flex-shrink: 0; }
.as-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .as-who .avatar-circle { width: 34px; height: 34px; flex-shrink: 0; } .as-who span { display: flex; flex-direction: column; min-width: 0; }
.as-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .as-filter input[type=text] { flex: 1 1 200px; min-width: 0; } .as-filter select { flex: 0 1 200px; min-width: 0; }
.as-filter .btn-outline { display: inline-flex; align-items: center; gap: 6px; }
.as-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.as-badge { display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: #161616; border: 1px solid var(--border); cursor: pointer; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .as-badge { background: #ffffff; }
.as-badge:has(input:checked) { border-color: var(--red); background: rgba(230,20,31,.1); } .as-badge small { font-size: 12px; overflow-wrap: anywhere; }
.as-cards { max-height: 520px; overflow: auto; } .as-foil { font-style: normal; font-size: 10px; font-weight: 800; color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .as-foil { color: #a16207; }
.as-gift { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .as-gift form { margin: 0; } .as-gift > div { min-width: 0; overflow-wrap: anywhere; }
.av-kpis strong small { font-size: 60%; color: var(--gray); font-weight: 500; }
.av-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; } .av-2col > .admin-card { margin: 0; }
.av-svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.av-grid { stroke: #262626; stroke-width: 1; } .av-base { stroke: #3a3a3a; stroke-width: 1; }
.av-ax { fill: #8a8a8a; font-size: 11px; font-family: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-ax { fill: #6b7280; }
.av-hit:hover rect[fill="transparent"] { fill: rgba(255,255,255,.04); }
:where(html[data-theme="light"] body:not(.admin-body)) .av-hit:hover rect[fill="transparent"] { fill: rgba(17,24,39,0.04); }
.av-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: #c3c2b7; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-legend { color: #4b5563; }
.av-legend span { display: inline-flex; align-items: center; gap: 6px; } .av-legend i { width: 10px; height: 10px; border-radius: 3px; }
.av-table { margin-top: 10px; font-size: 13px; } .av-table summary { cursor: pointer; color: var(--gray); }
.av-bars { display: grid; gap: 8px; }
.av-bar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.av-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-bl { color: #374151; }
.av-bt { height: 10px; border-radius: 0 4px 4px 0; background: #1c1c1c; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-bt { background: #ffffff; } .av-bt i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.av-bar b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.av-heat { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10.5px; color: #8a8a8a; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-heat { color: #6b7280; }
.av-heat i { aspect-ratio: 1; border-radius: 3px; min-height: 10px; } .av-heat i:hover { outline: 2px solid #fff; }
.av-hx { text-align: left; white-space: nowrap; } .av-hy { display: flex; align-items: center; }
.av-ramp { display: flex; align-items: center; gap: 3px; margin-top: 10px; font-size: 11.5px; color: #8a8a8a; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-ramp { color: #6b7280; } .av-ramp i { width: 16px; height: 10px; border-radius: 2px; } .av-ramp small:first-child { margin-right: 4px; } .av-ramp small:last-child { margin-left: 4px; }
.av-mix { display: flex; gap: 2px; min-width: 120px; height: 10px; } .av-mix i { border-radius: 2px; min-width: 3px; }
.av-feed { display: grid; gap: 0; max-height: 620px; overflow: auto; }
.av-fi { display: grid; grid-template-columns: 10px 86px minmax(0, 160px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #1f1f1f; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-fi { border-bottom: 1px solid #f3f4f6; }
.av-fi > i { width: 8px; height: 8px; border-radius: 50%; } .av-ft { color: #8a8a8a; font-variant-numeric: tabular-nums; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-ft { color: #6b7280; } .av-fw { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .av-fd { color: #c9c9c9; overflow-wrap: anywhere; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-fd { color: #374151; }
.av-tip { position: fixed; z-index: 9999; pointer-events: none; padding: 8px 10px; border-radius: 8px; background: #0b0b0b; border: 1px solid #3a3a3a; font-size: 12.5px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 240px; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-tip { background: #f3f4f6; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.av-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; }
.av-mini div { padding: 10px 12px; border-radius: 12px; background: #161616; border: 1px solid var(--border); display: flex; flex-direction: column; }
:where(html[data-theme="light"] body:not(.admin-body)) .av-mini div { background: #ffffff; } .av-mini strong { font-size: 22px; } .av-mini span { font-size: 12px; color: var(--gray); }
.av-today { font-size: 13px; margin: 10px 0 0; }
.cq-list { display: grid; gap: 10px; }
.cq-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #161616; border: 1px solid var(--border); flex-wrap: wrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-row { background: #ffffff; }
.cq-row-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cq-row-main small { font-size: 12.5px; overflow-wrap: anywhere; }
.cq-opt { color: var(--gray); font-weight: 400; } .cq-hint { font-size: 12.5px; margin: -4px 0 12px; }
.cq-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(245,196,81,.15); color: #f5c451; vertical-align: 2px; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-tag { color: #a16207; }
.cq-desc { font-size: 13px; margin: 2px 0 4px; }
.cq-rw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cq-rw span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; background: #1b1b1b; border: 1px solid #2c2c2c; font-size: 12.5px; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span { background: #ffffff; border: 1px solid #e5e7eb; }
.cq-rw span[data-t=vp] svg { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span[data-t=vp] svg { color: #a16207; } .cq-rw span[data-t=points] svg { color: #60a5fa; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span[data-t=points] svg { color: #1d4ed8; } .cq-rw span[data-t=badge] svg { color: #a78bfa; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span[data-t=badge] svg { color: #6d28d9; } .cq-rw span[data-t=card] svg, .cq-rw span[data-t=pack] svg { color: #f43f5e; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span[data-t=card] svg, :where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span[data-t=pack] svg { color: #be123c; } .cq-rw span[data-t=item] svg { color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .cq-rw span[data-t=item] svg { color: #15803d; }
.cq-item { border-color: rgba(245,196,81,.35); }
.sc-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sc-lay { display: flex !important; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: #161616; cursor: pointer; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .sc-lay { background: #ffffff; }
.sc-lay input { position: absolute; opacity: 0; pointer-events: none; } .sc-lay:has(input:checked) { border-color: var(--red); background: rgba(230,20,31,.12); } .sc-lay small { font-size: 12px; }
.scp { display: grid; gap: 3px; width: 72px; height: 44px; flex-shrink: 0; } .scp i { background: #3a3a3a; border-radius: 3px; }
:where(html[data-theme="light"] body:not(.admin-body)) .scp i { background: #e5e7eb; } .sc-lay:has(input:checked) .scp i { background: var(--red); }
.scp-1 { grid-template-columns: 1fr; } .scp-1-1 { grid-template-columns: 1fr 1fr; } .scp-1-2 { grid-template-columns: 1fr 2fr; } .scp-2-1 { grid-template-columns: 2fr 1fr; } .scp-1-1-1 { grid-template-columns: 1fr 1fr 1fr; } .scp-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sc-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; }
.sc-cellf { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin: 0; min-width: 0; } .sc-cellf legend { padding: 0 6px; font-weight: 700; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .sc-cellf legend { color: #111827; }
.sc-cellf[hidden], .sc-f[hidden] { display: none !important; }
.sc-imgprev { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sc-imgprev img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; }
.sc-hint { font-size: 12px; margin: 0; }
@media (max-width: 900px) { .av-2col, .sc-cells { grid-template-columns: minmax(0, 1fr); } .av-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .av-fi { grid-template-columns: 10px 70px minmax(0, 1fr); } .av-fd { grid-column: 2 / -1; } .av-bar { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; } .av-heat { font-size: 9px; grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 1px; } .av-heat i { min-height: 8px; border-radius: 2px; } }

/* ===== Bản 17.1: giải đấu theo game — đăng ký kèm ID, tính điểm nhiều vòng, trao giải ===== */
.tp-mode { color: var(--text-muted, #aaa); font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-mode { color: var(--text-muted, #4b5563); }
.tp-reg .tour-reg-form { display: grid; gap: 12px; }
.tp-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.tp-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; background: rgba(255,255,255,.02); }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-row { background: rgba(0,0,0,0.014); }
.tp-row.sub { border-style: dashed; opacity: .92; }
.tp-row legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-row legend { color: #111827; }
.tp-row legend small { font-weight: 400; color: #999; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-row legend small { color: #4b5563; }
.tp-row label { display: grid; gap: 4px; font-size: 12px; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-row label { color: #4b5563; }
.tp-row input { width: 100%; min-width: 0; }
.tp-extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0 12px; }
.tp-note { font-size: 12.5px; margin-top: 10px !important; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tp-chips a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-chips a { color: #374151; }
.tp-chips a.on { background: #e6141f; border-color: #e6141f; color: #fff; }
.tp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--border); }
.tp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 440px; }
.tp-table th, .tp-table td { padding: 9px 10px; text-align: center; border-bottom: 1px solid #222; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-table th, :where(html[data-theme="light"] body:not(.admin-body)) .tp-table td { border-bottom: 1px solid #f3f4f6; }
.tp-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #999; background: rgba(255,255,255,.03); }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-table th { color: #4b5563; background: rgba(0,0,0,0.021); }
.tp-table .tp-name { text-align: left; white-space: normal; min-width: 140px; }
.tp-table tr:last-child td { border-bottom: 0; }
.tp-table tr.mine td { background: rgba(230,20,31,.10); }
.tp-rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 13px; background: #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-rank { background: #f3f4f6; }
.tp-table tr.top1 .tp-rank { background: #f5c451; color: #1a1214; }
.tp-table tr.top2 .tp-rank { background: #cdd5de; color: #1a1214; }
.tp-table tr.top3 .tp-rank { background: #d68e5c; color: #1a1214; }
.tp-group { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(230,20,31,.14); color: #ff6b73; vertical-align: middle; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-group { color: #b8000a; }
.tp-round { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.tp-round > summary { cursor: pointer; padding: 10px 14px; font-size: 14px; list-style-position: inside; }
.tp-round > .tp-table-wrap { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.tp-wwcd { font-size: 12px; color: #f5c451; margin-left: 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-wwcd { color: #a16207; }
.tp-pen { color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-pen { color: #c81e1e; }
.tp-players { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.tp-player { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.tp-player.sub { opacity: .75; }
.tp-pname { color: #eee; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-pname { color: #111827; }
.tp-ign { color: #aaa; font-size: 12.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-ign { color: #4b5563; }
.tp-ign::before { content: "🎮 "; font-size: 11px; }
.tp-gid { color: #f1c40f; font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-gid { color: #a16207; }
.tp-role { font-size: 10.5px; padding: 0 6px; border-radius: 6px; background: #2a2a2a; color: #bbb; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-role { background: #e5e7eb; color: #4b5563; }
.tp-role.cap { background: rgba(230,20,31,.18); color: #ff6b73; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-role.cap { color: #b8000a; }
.tour-teams.tp-teams { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tp-podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; align-items: end; }
.tp-pod { text-align: center; border-radius: 14px; padding: 14px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); display: grid; gap: 4px; justify-items: center; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-pod { background: rgba(0,0,0,0.028); }
.tp-pod strong { font-size: 15px; overflow-wrap: anywhere; }
.tp-pod small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-pod small { color: #4b5563; }
.tp-pod.p1 { padding: 22px 10px; border-color: #f5c451; background: linear-gradient(180deg, rgba(245,196,81,.14), rgba(245,196,81,.02)); }
.tp-pod.p1 strong { font-size: 18px; }
.tp-medal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #1a1214; background: #d68e5c; }
.tp-pod.p1 .tp-medal { background: #f5c451; width: 42px; height: 42px; font-size: 18px; }
.tp-pod.p2 .tp-medal { background: #cdd5de; }
.tp-podium-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tp-edit > summary { cursor: pointer; font-size: 13px; color: #ccc; margin: 6px 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-edit > summary { color: #374151; }
/* admin */
.tp-admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg, #0a0a0a); }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-admin-nav { background: var(--bg, #f3f4f6); }
.tp-admin-nav a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-admin-nav a { color: #374151; }
.tp-admin-nav a:hover { border-color: #e6141f; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-admin-nav a:hover { color: #111827; }
.tp-fs { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 4px; margin: 14px 0; min-width: 0; }
.tp-fs legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.tp-points-only[hidden] { display: none; }
.tp-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.tp-card-head h2 { margin: 0; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tp-card-head .tp-actions { margin-top: 0; }
.tp-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; font-size: 13.5px; }
.tp-inline-form input, .tp-inline-form select { width: auto; min-width: 0; }
.tp-add-round input { flex: 1 1 140px; }
.tp-admin-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tp-admin-roster li { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(90px, 1fr) minmax(90px, 1fr); gap: 8px; }
.tp-team-table td { vertical-align: top; }
.tp-edit-form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02); min-width: 460px; white-space: normal; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-edit-form { background: rgba(0,0,0,0.014); }
.tp-edit-top { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-edit-top label, .tp-edit-extra { display: grid; gap: 4px; font-size: 12px; color: #aaa; flex: 1 1 140px; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-edit-top label, :where(html[data-theme="light"] body:not(.admin-body)) .tp-edit-extra { color: #4b5563; }
.tp-edit-row { display: grid; grid-template-columns: minmax(90px, 1fr) 1fr 1fr 90px; gap: 6px; align-items: center; font-size: 13px; }
.tp-edit-row input, .tp-edit-row select { min-width: 0; width: 100%; }
.tp-round-admin { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.tp-round-admin > summary { cursor: pointer; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-round-admin[open] > summary { border-bottom: 1px solid var(--border); }
.tp-round-admin > form, .tp-round-admin > .tp-table-wrap { padding: 12px 14px; }
.tp-round-admin > .tp-table-wrap { margin: 12px 14px; padding: 0; }
.tp-res-table input { width: 72px; min-width: 0; text-align: center; }
.admin-main table.members-table.tp-res-table { min-width: 0; }
.tp-award select { width: 100%; }
.tp-announce { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tp-result-img img { width: 100%; border-radius: 12px; border: 1px solid var(--border); display: block; }
@media (max-width: 900px) {
    .tp-announce { grid-template-columns: 1fr; }
    .tp-edit-form { min-width: 0; }
    .tp-edit-row { grid-template-columns: 1fr 1fr; }
    .tp-edit-row strong { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .tp-podium { grid-template-columns: 1fr; }
    .tp-pod.p1 { order: -1; }
    .tp-admin-roster li { grid-template-columns: 1fr; gap: 0; padding-bottom: 4px; border-bottom: 1px dashed #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-admin-roster li { border-bottom: 1px dashed #f3f4f6; }
}
.tour-layout > * { min-width: 0; }
/* 17.1: ô chọn / số trong khu giải đấu dùng giao diện tối */
.tp-fs select, #thong-tin select, .tp-award select, .tp-inline-form select, .tp-inline-form input, .tp-edit-form input, .tp-edit-form select, .tp-round-form select,
.tp-res-table input, .tp-row input, .tp-reg .field input, .tour-reg-form .field input {
    padding: 9px 11px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: var(--white); font-size: 14px; box-sizing: border-box;
}
:where(html[data-theme="light"] body:not(.admin-body)) .tp-fs select, :where(html[data-theme="light"] body:not(.admin-body)) #thong-tin select, :where(html[data-theme="light"] body:not(.admin-body)) .tp-award select, :where(html[data-theme="light"] body:not(.admin-body)) .tp-inline-form select, :where(html[data-theme="light"] body:not(.admin-body)) .tp-inline-form input, :where(html[data-theme="light"] body:not(.admin-body)) .tp-edit-form input, :where(html[data-theme="light"] body:not(.admin-body)) .tp-edit-form select, :where(html[data-theme="light"] body:not(.admin-body)) .tp-round-form select, :where(html[data-theme="light"] body:not(.admin-body)) .tp-res-table input, :where(html[data-theme="light"] body:not(.admin-body)) .tp-row input, :where(html[data-theme="light"] body:not(.admin-body)) .tp-reg .field input, :where(html[data-theme="light"] body:not(.admin-body)) .tour-reg-form .field input { background: #ffffff; }
.tp-fs select, #thong-tin select, .tp-award select, .tp-edit-form select, .tp-round-form select { width: 100%; min-height: 40px; }
.tp-res-table input { padding: 6px 8px; }
.tp-row input:focus, .tp-res-table input:focus, .tp-edit-form input:focus, .tp-inline-form input:focus { outline: none; border-color: var(--red); }
.tp-row.sub input { background: #171717; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-row.sub input { background: #ffffff; }
@media (max-width: 900px) { .admin-grid-3 > [style*="grid-column"] { grid-column: 1 / -1 !important; } }

/* ===== Bản 17.2: Overlay Streamer ===== */
.tp-admin-nav a.on { background: #e6141f; border-color: #e6141f; color: #fff; }
.ovs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; margin-top: 18px; }
.ovs-grid > * { min-width: 0; }
.ovs-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0c0c0c; border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-frame { background: #f3f4f6; }
.ovs-frame.r916 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.ovs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ovs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.ovs-head h2 { margin: 0; }
.ovs-bgs { display: flex; flex-wrap: wrap; gap: 6px; }
.ovs-bgs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: #ccc; font: inherit; font-size: 13px; cursor: pointer; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-bgs button { color: #374151; }
.ovs-bgs button.on { background: #e6141f; border-color: #e6141f; color: #fff; }
.ovs-link { display: flex; gap: 8px; }
.ovs-link input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font-size: 13px; font-family: ui-monospace, Consolas, monospace; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-link input { background: #ffffff; color: #111827; }
.ovs-link .btn-solid { flex: none; white-space: nowrap; }
.ovs-help { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.ovs-help summary { cursor: pointer; font-weight: 600; }
.ovs-help ol { margin: 10px 0 2px; padding-left: 20px; color: #ccc; line-height: 1.7; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-help ol { color: #374151; }
.ovs-form select, .ovs-form textarea, .ovs-form input[type=url] { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font: inherit; font-size: 14px; box-sizing: border-box; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-form select, :where(html[data-theme="light"] body:not(.admin-body)) .ovs-form textarea, :where(html[data-theme="light"] body:not(.admin-body)) .ovs-form input[type=url] { background: #ffffff; color: #111827; }
.ovs-form .field { margin-bottom: 12px; }
.ovs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ovs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.ovs-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 4px 0 14px; font-size: 13.5px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-checks { color: #374151; }
.ovs-checks label { display: flex; align-items: center; gap: 6px; }
.ovs-checks input { width: auto; }
.ovs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ovs-demo { margin: 0; }
.ovs-demo .ovs-frame.r916 { max-width: 200px; }
.ovs-demo figcaption { margin-top: 8px; font-size: 14px; }
.ovs-demo iframe { pointer-events: none; }
.ov-req-form { display: grid; gap: 6px; min-width: 220px; }
.ov-req-form select, .ov-req-form input { width: 100%; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font-size: 13px; }
.ov-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.ov-tpl { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); }
.ov-tpl.off { opacity: .7; }
.ov-tpl .ovs-frame { border: 0; border-radius: 0; }
.ov-tpl .ovs-frame.r916 { max-width: none; aspect-ratio: 16 / 9; }
.ov-tpl iframe { pointer-events: none; }
.ov-tpl-body { padding: 12px 14px; }
.ov-designer .ov-d-preview .ovs-frame.r916 { max-width: 380px; }
.ov-designer select, .ov-designer input[type=number], .ov-designer textarea { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font-size: 14px; box-sizing: border-box; }
.ov-designer .field select, .ov-designer textarea { width: 100%; }
.ov-designer input[type=color] { width: 100%; height: 40px; padding: 2px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; }
.ov-designer input[type=range] { width: 100%; }
.ov-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; font-size: 14px; }
.ov-lay-table input[type=number] { width: 84px; padding: 6px 8px; }
.ov-lay-table td { white-space: nowrap; }
.admin-main table.members-table.ov-lay-table { min-width: 0; }
.ov-rbtn.on { background: #e6141f !important; border-color: #e6141f !important; color: #fff !important; }
.ov-savebar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 0; background: var(--bg, #0a0a0a); }
.ov-brand-pv { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; margin-bottom: 14px; border-radius: 999px; background: #1a1012; border: 1px solid var(--border); font: 700 13px/1 "Oswald", sans-serif; letter-spacing: 1.5px; }
.ov-brand-pv img { border-radius: 50%; }
@media (max-width: 900px) { .ovs-grid { grid-template-columns: 1fr; } .ovs-3 { grid-template-columns: 1fr 1fr; } }
.ov-d-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important; }
.ov-d-grid > * { min-width: 0; }
@media (max-width: 1100px) { .ov-d-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.ov-lay-table th, .ov-lay-table td { padding: 8px 6px !important; }
.ov-lay-table td:first-child { white-space: normal; min-width: 100px; font-size: 13px; }
.ov-lay-table input[type=number] { width: 66px; padding: 6px; }
/* 17.3: trình thiết kế overlay mở rộng */
.ov-h3 { margin: 18px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #aaa); border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.ov-h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ov-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 12px; }
.ov-colors .field { margin: 0; }
.ov-colors input[type=color] { width: 100%; height: 38px; padding: 2px; border-radius: 8px; cursor: pointer; }
.ov-checks3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: 14px; margin-bottom: 8px; }
.ov-checks3 label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ov-val { color: var(--primary, #ff2d55); }
.ov-blocks { display: grid; gap: 12px; margin: 10px 0; }
.ov-blk { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; margin: 0; background: rgba(255,255,255,.02); }
.ov-blk legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.ov-blk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.ov-blk-grid .field { margin: 0; }
.ov-blk-grid .full { grid-column: 1 / -1; }
.ov-blk-img { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.ov-blk-img img { max-width: 120px; max-height: 80px; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#333 0 25%, #222 0 50%) 0 0/16px 16px; }
.ov-blk-del { margin-top: 10px; color: #ff6b6b; }
.ovs-vis { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.ovs-vis label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ov-blk-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted, #aaa); }
.ov-blk-grid label.ck { flex-direction: row; align-items: center; gap: 8px; color: inherit; }
.ov-blk-grid input[type=number], .ov-blk-grid select { padding: 6px 8px; }
.ov-blk-grid input[type=color] { width: 100%; height: 34px; padding: 2px; }
.ov-blk legend input { width: 180px; max-width: 60vw; padding: 4px 8px; font-weight: 600; }
/* 17.3: Phân quyền Ban quản trị */
.staff-add { align-items: end; }
.staff-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.staff-inline select { padding: 6px 8px; max-width: 220px; }
.staff-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.staff-preset { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.02); }
:where(html[data-theme="light"] body:not(.admin-body)) .staff-preset { border: 1px solid rgba(0,0,0,0.070); background: rgba(0,0,0,0.014); }
.staff-preset small { font-size: 12.5px; flex: 1; }
.staff-preset button { align-self: flex-start; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 12px 0; }
.staff-grp { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .staff-grp { border: 1px solid rgba(0,0,0,0.084); }
.staff-grp legend { padding: 0 6px; font-weight: 700; color: var(--primary, #ff2d55); }
:where(html[data-theme="light"] body:not(.admin-body)) .staff-grp legend { color: var(--primary, #b80023); }
.staff-grp label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.staff-note { font-size: 13px; }
.staff-add .role-select { width: 100%; padding: 10px 12px; font-size: 14px; }
.staff-inline .role-select { padding: 7px 8px; }
.ovs-vis input[type=checkbox] { width: auto; padding: 0; margin: 0; flex: none; }
.ovs-vis label { margin: 0; font-weight: 500; color: inherit; }
/* 17.4: Clan */
.clan-logo { display: inline-grid; place-items: center; flex: none; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--clan-c, #e6141f) 22%, #111); border: 2px solid var(--clan-c, #e6141f); color: #fff; font-weight: 800; letter-spacing: .5px; vertical-align: middle; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-logo { background: color-mix(in srgb, var(--clan-c, #e6141f) 22%, #ffffff); }
.clan-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clan-logo.is-text { font-family: "Oswald", sans-serif; }
.clan-logo-xl { border-radius: 24px; border-width: 3px; box-shadow: 0 10px 34px color-mix(in srgb, var(--clan-c) 45%, transparent); }
.clan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--clan-c) 60%, transparent); background: color-mix(in srgb, var(--clan-c) 16%, transparent); color: #fff; font-size: 13px; text-decoration: none; max-width: 100%; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-chip { color: #111827; }
.clan-chip .clan-logo { border-radius: 50%; border-width: 1px; }
.clan-chip b { color: var(--clan-c); filter: brightness(1.35); }
.clan-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.clan-chip em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.1); white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-chip em { background: rgba(0,0,0,0.070); }
.clan-chip:hover { background: color-mix(in srgb, var(--clan-c) 26%, transparent); }
.clan-tabs, .clan-rank-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.clan-tabs a, .clan-rank-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: #ddd; text-decoration: none; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-tabs a, :where(html[data-theme="light"] body:not(.admin-body)) .clan-rank-tabs a { color: #374151; }
.clan-tabs a.on, .clan-rank-tabs a.on { background: var(--red, #e6141f); border-color: var(--red, #e6141f); color: #fff; }
.clan-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.clan-filter input, .clan-filter select { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; min-width: 0; flex: 1 1 180px; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-filter input, :where(html[data-theme="light"] body:not(.admin-body)) .clan-filter select { background: #ffffff; color: #111827; }
.clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.clan-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--clan-c) 14%, var(--bg-soft, #141414)), var(--bg-soft, #141414) 60%); color: #fff; text-decoration: none; transition: transform .15s, border-color .15s; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-card { background: linear-gradient(135deg, color-mix(in srgb, var(--clan-c) 14%, var(--bg-soft, #ffffff)), var(--bg-soft, #ffffff) 60%); color: #111827; }
.clan-card:hover { transform: translateY(-2px); border-color: var(--clan-c); }
.clan-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clan-card-body strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; }
.clan-card-body em { font-style: normal; color: #bbb; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-card-body em { color: #4b5563; }
.clan-card-body small { font-size: 12.5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.clan-tag { color: var(--clan-c); filter: brightness(1.35); }
.clan-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clan-rank li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-soft, #141414); }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li { background: var(--bg-soft, #ffffff); }
.clan-rank li.mine { border-color: var(--clan-c); }
.clan-rank li.top1 { background: linear-gradient(90deg, rgba(255,200,61,.16), var(--bg-soft, #141414) 70%); border-color: rgba(255,200,61,.5); }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li.top1 { background: linear-gradient(90deg, rgba(255,200,61,.16), var(--bg-soft, #ffffff) 70%); }
.clan-rank li.top2 { background: linear-gradient(90deg, rgba(200,210,225,.13), var(--bg-soft, #141414) 70%); }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li.top2 { background: linear-gradient(90deg, rgba(200,210,225,.13), var(--bg-soft, #ffffff) 70%); }
.clan-rank li.top3 { background: linear-gradient(90deg, rgba(205,127,50,.15), var(--bg-soft, #141414) 70%); }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li.top3 { background: linear-gradient(90deg, rgba(205,127,50,.15), var(--bg-soft, #ffffff) 70%); }
.clan-rank-no { width: 32px; text-align: center; font: 700 20px/1 "Oswald", sans-serif; color: #aaa; flex: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank-no { color: #4b5563; }
.clan-rank li.top1 .clan-rank-no { color: #ffc83d; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li.top1 .clan-rank-no { color: #b45309; } .clan-rank li.top2 .clan-rank-no { color: #d7dde8; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li.top2 .clan-rank-no { color: #294d8e; } .clan-rank li.top3 .clan-rank-no { color: #e0955a; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank li.top3 .clan-rank-no { color: #9b541d; }
.clan-rank-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #fff; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank-name { color: #111827; }
.clan-rank-name > span { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.clan-rank-name small { font-size: 12px; }
.clan-rank-score { text-align: right; font: 700 18px/1.1 "Oswald", sans-serif; flex: none; }
.clan-rank-score small { display: block; font: 500 11px "Be Vietnam Pro", sans-serif; color: #999; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-rank-score small { color: #4b5563; }
.clan-create { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.clan-steps { margin: 0 0 10px; padding-left: 20px; line-height: 1.7; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-steps { color: #374151; }
.clan-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clan-form textarea, .clan-form select, .clan-join textarea { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font: inherit; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-form textarea, :where(html[data-theme="light"] body:not(.admin-body)) .clan-form select, :where(html[data-theme="light"] body:not(.admin-body)) .clan-join textarea { background: #ffffff; color: #111827; }
.clan-pending { display: flex; align-items: center; gap: 12px; }
.clan-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 22px; border-radius: 20px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--clan-c) 45%, var(--border)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--clan-c) 30%, transparent), transparent 60%), var(--bg-soft, #141414); }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-hero { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--clan-c) 30%, transparent), transparent 60%), var(--bg-soft, #ffffff); }
.clan-hero-info { flex: 1 1 260px; min-width: 0; }
.clan-hero-info h1 { margin: 2px 0 4px; font-size: clamp(24px, 4vw, 34px); word-break: break-word; }
.clan-tag-lg { font: 700 15px/1 "Oswald", sans-serif; letter-spacing: 2px; color: var(--clan-c); filter: brightness(1.35); }
.clan-slogan { margin: 0 0 8px; color: #ccc; font-style: italic; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-slogan { color: #374151; }
.clan-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #bbb; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-meta { color: #4b5563; }
.clan-meta span, .clan-meta a { display: inline-flex; align-items: center; gap: 5px; }
.clan-meta a { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-meta a { color: #111827; }
.clan-hero-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex: 0 1 260px; }
.clan-hero-act form { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.clan-you { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--clan-c) 25%, transparent); border: 1px solid var(--clan-c); font-size: 13px; font-weight: 600; }
.clan-staff-link { font-size: 12.5px; color: #ffc83d; display: inline-flex; gap: 4px; align-items: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-staff-link { color: #b45309; }
.clan-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.clan-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-soft, #141414); color: #fff; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-stat { background: var(--bg-soft, #ffffff); color: #111827; }
.clan-stat small { color: #aaa; font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-stat small { color: #4b5563; }
.clan-stat strong { font: 700 24px/1.1 "Oswald", sans-serif; color: var(--clan-c); filter: brightness(1.3); }
.clan-stat em { font-style: normal; font-size: 12.5px; color: #bbb; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-stat em { color: #4b5563; }
.clan-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.clan-recruit { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--clan-c) 14%, transparent); border-left: 3px solid var(--clan-c); }
.clan-members, .clan-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.clan-members li, .clan-reqs li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.clan-members li > div, .clan-reqs li > div:not(.clan-req-act) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1; }
.clan-members small, .clan-reqs small { width: 100%; font-size: 12px; }
.clan-reqs p { width: 100%; margin: 4px 0 0; font-size: 13px; color: #ccc; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-reqs p { color: #374151; }
.clan-mname { color: #fff; font-weight: 600; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-mname { color: #111827; }
.clan-role { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.clan-role.r-owner { background: var(--clan-c); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-role.r-owner { color: #111827; }
.clan-role.r-vice { background: rgba(255,255,255,.12); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-role.r-vice { background: rgba(0,0,0,0.084); color: #111827; }
.clan-title { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--clan-c) 55%, transparent); color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-title { color: #111827; }
.clan-mbadge { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 12px; vertical-align: middle; }
.clan-mbadge img { width: 100%; height: 100%; object-fit: contain; }
.clan-req-act { display: flex; gap: 6px; flex: none; }
.clan-manage { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border); }
.clan-manage-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 20px; margin: 0 0 14px; }
.clan-manage-h small { font-size: 12.5px; font-weight: 400; }
.clan-mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.clan-mtable th, .clan-mtable td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.clan-mtable th { font-size: 12px; color: #999; text-transform: uppercase; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-mtable th { color: #4b5563; }
.clan-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clan-inline input[type=text], .clan-inline select { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; min-width: 0; max-width: 200px; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-inline input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .clan-inline select { background: #ffffff; color: #111827; }
.clan-logo-edit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clan-danger { border-color: rgba(230,20,31,.35); }
.clan-log ul { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
.clan-log summary { cursor: pointer; font-weight: 600; }
.pf-clan-card { display: flex; gap: 14px; align-items: center; color: #fff; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-clan-card { color: #111827; }
.pf-clan-card > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-clan-card b { font-size: 16px; }
.pf-clan-card small { font-size: 13px; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-clan-card small { color: #374151; }
.clan-app { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.clan-app-head { display: flex; gap: 12px; align-items: center; }
.clan-app-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clan-app-act input { flex: 1 1 240px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-app-act input { background: #ffffff; color: #111827; }
.clan-afilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.clan-afilter input { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .clan-afilter input { background: #ffffff; color: #111827; }
.clan-alog { padding-left: 18px; font-size: 13px; line-height: 1.8; margin: 0; }
@media (max-width: 900px) {
  .clan-create, .clan-cols { grid-template-columns: 1fr; }
  .clan-hero-act { align-items: stretch; flex: 1 1 100%; }
  .clan-hero-act form { align-items: stretch; }
}
@media (max-width: 520px) { .clan-form-2 { grid-template-columns: 1fr; } .clan-hero { padding: 16px; } .clan-hero .clan-logo-xl { width: 84px !important; height: 84px !important; } }
/* 17.4: ID game trên hồ sơ + chọn đồng đội từ clan */
.pf-gid-form { grid-column: 1 / -1; }
.pf-gid-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 8px 0; }
.pf-gid-row { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 10px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
.pf-gid-row legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.pf-gid-row input, .pf-gid-row select { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-gid-row input, :where(html[data-theme="light"] body:not(.admin-body)) .pf-gid-row select { background: #ffffff; color: #111827; }
.pf-gid-row select { grid-column: 1 / -1; }
.pf-gid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-gid-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.pf-gid-game { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-gid-game { background: rgba(0,0,0,0.056); }
.pf-gid-list code { font-size: 13px; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .pf-gid-list code { background: rgba(0,0,0,0.042); }
.tp-clan-pick { grid-column: 1 / -1; }
.tp-clan-pick select { width: 100%; padding: 9px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, #ffc83d 45%, var(--border)); background: #1c1c1c; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .tp-clan-pick select { background: #ffffff; color: #111827; }
.clan-manage .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 640px) {
  .clan-mtable thead { display: none; }
  .clan-mtable, .clan-mtable tbody, .clan-mtable tr, .clan-mtable td { display: block; width: 100%; }
  .clan-mtable tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .clan-mtable td { border: 0; padding: 4px 0; }
  .clan-inline input[type=text], .clan-inline select { max-width: none; flex: 1 1 140px; }
}
.clan-form .seo-check input, .clan-form .field input[type=checkbox] { width: auto; }
.clan-card-body small { display: block; line-height: 1.5; }
.clan-card-body small svg { vertical-align: -2px; }
/* 17.5: quà tặng & giọng đọc (trang Overlay Streamer) */
.ovs-gift .ovs-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ovs-gift .ovs-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.ovs-gift code { font-size: 12px; background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-gift code { background: rgba(0,0,0,0.056); }
.ovs-gift input[type=range] { width: 100%; }
.ovs-gift select { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; font-size: 14px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ovs-gift select { background: #ffffff; color: #111827; }
/* 17.6: Giọng đọc quà tặng (module voice) */
.vc-pv { width: 100%; height: 230px; border: 1px solid var(--border); border-radius: 12px; background: #111; display: block; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-pv { background: #ffffff; }
.vc-quota ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.vc-quota li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 6px; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-quota li { border-bottom: 1px solid rgba(0,0,0,0.042); }
.vc-quota li span { color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-quota li span { color: #4b5563; } .vc-quota li b { text-align: right; }
.vc-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 8px; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-bar { background: rgba(0,0,0,0.056); }
.vc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2ecc71, #ffc83d, #ff4d4d); }
.vc-link-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(160,90,255,.1); border: 1px solid rgba(160,90,255,.35); font-size: 13.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vc-link-note a { color: #c9a6ff; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-link-note a { color: #4800b8; }
.vc-grant-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; align-items: end; margin-top: 10px; }
.vc-grant-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #aaa; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-grant-form label { color: #4b5563; }
.vc-grant-form label.ck { flex-direction: row; align-items: center; gap: 8px; color: inherit; }
.vc-grant-form .full { grid-column: 1 / -1; }
.vc-grant-form input[type=text], .vc-grant-form input[type=number] { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: #1c1c1c; color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-grant-form input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .vc-grant-form input[type=number] { background: #ffffff; color: #111827; }
.vc-grant-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.vc-grant-head small { width: 100%; }

/* 17.7 — Bộ kit giọng Windows miễn phí (voice.php#kit) */
.vc-kit { margin-top: 18px; }
.vc-kit .ovs-head h2 { display: flex; align-items: center; gap: 8px; }
.vc-kit-steps { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vc-kit-steps li { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(124,58,237,.06); min-width: 0; }
.vc-kit-steps li > b { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--primary, #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.vc-kit-steps li > div { display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.vc-kit-steps li strong { font-size: 14px; }
.vc-kit-steps li small { color: var(--muted, #999); font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-kit-steps li small { color: var(--muted, #4b5563); }
.vc-kit-steps .btn-solid { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; }
.vc-kit-act { border-top: 1px solid var(--border); padding-top: 14px; }
.vc-kit-stat { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-kit-stat { background: rgba(0,0,0,0.035); }
.vc-kit-stat.ok { background: rgba(22,163,74,.15); color: #4ade80; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-kit-stat.ok { color: #15803d; } .vc-kit-stat.warn { background: rgba(234,179,8,.14); color: #facc15; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-kit-stat.warn { color: #a16207; } .vc-kit-stat.bad { background: rgba(220,38,38,.14); color: #f87171; }
:where(html[data-theme="light"] body:not(.admin-body)) .vc-kit-stat.bad { color: #b91c1c; }
.vc-kit-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vc-kit-list label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; overflow-wrap: anywhere; }
.vc-kit-list label.on { border-color: var(--primary, #7c3aed); background: rgba(124,58,237,.12); }
.vc-kit-list label.off { opacity: .55; cursor: not-allowed; }
.vc-kit-list input { width: auto; flex: 0 0 auto; margin: 0; }
.vc-kit .ovs-help ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.vc-kit-act .form-submit:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) { .vc-kit-steps { grid-template-columns: 1fr; } }

/* 17.8 — Sự kiện thẻ & đổi thưởng (sukien.php) */
.tag-prize { background: linear-gradient(135deg, #fff3c4, #f5c451); color: #3a2600; } .tag-redeemed { background: #14532d; color: #bbf7d0; }
.sk-page { display: grid; gap: 18px; }
.sk-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px; border-radius: 16px; border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sk) 22%, transparent), transparent 60%), rgba(255,255,255,.02); }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-hero { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sk) 22%, transparent), transparent 60%), rgba(0,0,0,0.014); }
.sk-hero h1 { margin: 6px 0 8px; font-size: clamp(24px, 4vw, 36px); text-wrap: balance; }
.sk-hero p { margin: 0 0 6px; color: var(--muted, #aaa); max-width: 62ch; line-height: 1.6; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-hero p { color: var(--muted, #4b5563); }
.sk-cd small { color: var(--muted, #aaa); }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-cd small { color: var(--muted, #4b5563); } .sk-cd b { font-variant-numeric: tabular-nums; }
.sk-hero-stats { display: grid; gap: 8px; }
.sk-hero-stats div { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--border); }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-hero-stats div { background: rgba(0,0,0,0.037); }
.sk-hero-stats b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--sk); min-width: 64px; }
.sk-hero-stats span { font-size: 13px; color: var(--muted, #aaa); }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-hero-stats span { color: var(--muted, #4b5563); }
.sk-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sk-main, .sk-side { display: grid; gap: 18px; min-width: 0; }
.sk-code { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-code input { flex: 1 1 200px; min-width: 0; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px; }
.sk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-small { font-size: 12.5px; }
.sk-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.sk-card { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.sk-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sk-slot { border: 1px dashed var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; display: grid; gap: 2px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.sk-slot b { font-size: 13px; color: var(--muted, #aaa); }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-slot b { color: var(--muted, #4b5563); }
.sk-slot.taken { border: 2px solid #f5c451; background: rgba(245,196,81,.08); }
.sk-slot.taken b { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-slot.taken b { color: #a16207; } .sk-slot small { color: var(--muted, #aaa); font-size: 11.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-slot small { color: var(--muted, #4b5563); }
.sk-claim { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.sk-claim label { display: grid; gap: 4px; font-size: 13px; color: var(--muted, #aaa); flex: 1 1 180px; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-claim label { color: var(--muted, #4b5563); }
.sk-claim input { padding: 10px 12px; }
.sk-prize-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sk-mine { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.sk-stock { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sk-stock th, .sk-stock td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.sk-stock th { color: var(--muted, #aaa); font-weight: 500; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-stock th { color: var(--muted, #4b5563); }
.sk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rc); margin-right: 6px; }
.sk-win { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.sk-win li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13.5px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sk-win li span { overflow-wrap: anywhere; } .sk-win li b { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-win li b { color: #a16207; } .sk-win li small { grid-column: 1 / -1; color: var(--muted, #aaa); font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-win li small { color: var(--muted, #4b5563); }
.sk-rules { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.card-admin-prize { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.card-admin-prize summary { cursor: pointer; }
.cp-claims .gc-item-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 900px) { .sk-hero, .sk-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sk-prize-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   Bản 18.0 — Header mới: nút Sự kiện đang diễn ra, mega menu Tính năng có ảnh, menu tài khoản
   ===================================================================== */
.nav-live { order: 3; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: 14px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
    color: #fff; background: rgba(230,20,31,.16); border: 1px solid rgba(230,20,31,.55); white-space: nowrap; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-live { color: #111827; }
.nav-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff2d3a; box-shadow: 0 0 0 0 rgba(255,45,58,.7); animation: navLive 1.6s infinite; }
.nav-live:hover { background: rgba(230,20,31,.3); }
@keyframes navLive { 0% { box-shadow: 0 0 0 0 rgba(255,45,58,.7); } 70% { box-shadow: 0 0 0 9px rgba(255,45,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,58,0); } }
@media (prefers-reduced-motion: reduce) { .nav-live i { animation: none; } }
.nav-drop a .ico { color: #8a8a8a; margin-right: 4px; vertical-align: -2px; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-drop a .ico { color: #6b7280; }
.nav-mega-drop { width: min(720px, 92vw); padding: 12px; }
.nav-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.main-nav .nav-mega-item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; white-space: normal; }
.main-nav .nav-mega-item:hover, .main-nav .nav-mega-item.active { background: #1d1d1d; box-shadow: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-mega-item:hover, :where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-mega-item.active { background: #ffffff; }
.nav-mega-img { position: relative; flex: 0 0 auto; width: 76px; height: 43px; border-radius: 8px; overflow: hidden; background: #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-mega-img { background: #f3f4f6; }
.nav-mega-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-mega-img .ft-badge { position: absolute; top: 3px; left: 3px; font-size: 9px; padding: 1px 5px; }
.nav-mega-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nav-mega-txt strong { color: #eee; font-size: 13.5px; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-mega-txt strong { color: #111827; }
.nav-mega-txt small { color: #8a8a8a; font-size: 11.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-mega-txt small { color: #6b7280; }
.main-nav .nav-mega-all { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; padding: 9px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--red-glow, #ff5a63); font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-mega-all { color: var(--red-glow, #c8101a); }
.nav-me-btn { gap: 8px !important; }
.nav-me-btn .avatar-mini { margin: 0; }
.nav-me-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-me-drop { left: auto !important; right: 0; transform: none !important; min-width: 220px; }
.nav-me-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; line-height: 1.35; }
.nav-me-head small { display: block; color: #8a8a8a; font-size: 12px; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-me-head small { color: #6b7280; }
.nav-me-head strong { color: #fff; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-me-head strong { color: #111827; }
.main-nav .nav-me-out { color: #ff7a82; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-me-out { color: #b8000b; }
@media (min-width: 1101px) and (max-width: 1320px) { .nav-me-name { display: none; } .nav-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
    .nav-live { margin-left: auto; margin-right: 8px; }
    .nav-live + .nav-toggle { margin-left: 0; }
    .nav-mega-grid { display: contents; }
    .main-nav .nav-mega-item { padding: 10px 6px; border-radius: 0; border-bottom: 1px solid #1f1f1f; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav .nav-mega-item { border-bottom: 1px solid #f3f4f6; }
    .nav-mega-img { width: 56px; height: 32px; }
    .main-nav .nav-mega-all, .nav-me-head { display: none; }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .site-header .nav-live { order: 0; margin: 0; padding: 6px 10px; font-size: 12px; }
    .site-header .nav-live + .nav-toggle { display: none !important; }
}
/* Thanh tab: ô sự kiện nhấp nháy */
.app-tab-live .app-tab-ico::after { content: ""; position: absolute; top: 2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ff2d3a; box-shadow: 0 0 0 2px #0b0b0b; }
:where(html[data-theme="light"] body:not(.admin-body)) .app-tab-live .app-tab-ico::after { box-shadow: 0 0 0 2px #f3f4f6; }
/* Trang Tính năng (bản 18.0): thẻ có ảnh minh họa 16:9, nhóm, nhãn */
.ft-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #fff; background: #52525b; text-transform: uppercase; line-height: 1.5; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-badge { color: #111827; background: #d1d5db; }
.ft-badge-new { background: #16a34a; } .ft-badge-hot { background: #e6141f; } .ft-badge-event { background: linear-gradient(135deg, #f59e0b, #e6141f); }
.ft-group-title { margin: 26px 0 12px; font-size: 16px; font-weight: 700; color: #eee; display: flex; align-items: center; gap: 8px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-group-title { color: #111827; }
.ft-group-title:first-of-type { margin-top: 6px; }
.ft-group-title small { color: #777; font-weight: 500; font-size: 13px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-group-title small { color: #6b7280; }
.ft-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ft-tile { --tc: #a1a1aa; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #141414; border: 1px solid var(--border); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; min-width: 0; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-tile { background: #ffffff; }
.ft-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 55%, #2a2a2a); }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-tile:hover { border-color: color-mix(in srgb, var(--tc) 55%, #e5e7eb); }
.ft-tile-img { position: relative; aspect-ratio: 16 / 9; background: #1c1c1c; overflow: hidden; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-tile-img { background: #ffffff; }
.ft-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ft-tile:hover .ft-tile-img img { transform: scale(1.04); }
.ft-tile-img .ft-badge { position: absolute; top: 10px; left: 10px; }
.ft-tile-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ft-tile-body strong { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.ft-tile-body strong .ico { color: var(--tc); }
.ft-tile-body small { color: #9a9a9a; font-size: 13px; line-height: 1.5; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-tile-body small { color: #4b5563; }
.ft-tile-body em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--tc); }
@media (max-width: 560px) { .ft-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ft-tile-body { padding: 10px 11px 12px; } .ft-tile-body strong { font-size: 14px; } .ft-tile-body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; } }
.ft-tile[data-c=red] { --tc: #f43f5e; } .ft-tile[data-c=gold] { --tc: #f5c451; } .ft-tile[data-c=blue] { --tc: #60a5fa; } .ft-tile[data-c=purple] { --tc: #a78bfa; }
.ft-tile[data-c=green] { --tc: #4ade80; } .ft-tile[data-c=orange] { --tc: #fb923c; } .ft-tile[data-c=pink] { --tc: #f472b6; }
/* Quản trị → Menu & Tính năng (bản 18.0) */
.nav-admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.nav-admin-row select, .nav-admin-row input[type=text] { padding: 9px 11px; min-width: 170px; }
.nav-admin-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #222; font-size: 12px; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .nav-admin-no { background: #f3f4f6; }
.nav-admin-items { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0 0 34px; font-size: 13px; }
.nav-admin-items[hidden], .nav-admin-row [hidden] { display: none; }
.nav-admin-custom { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.nav-admin-custom input { flex: 1; min-width: 140px; padding: 9px 11px; }
.ft-admin-list { display: flex; flex-direction: column; }
.ft-admin-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ft-admin-row > img { width: 128px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #222; }
:where(html[data-theme="light"] body:not(.admin-body)) .ft-admin-row > img { background: #f3f4f6; }
.ft-admin-row.is-hidden > img { opacity: .4; }
.ft-admin-main { flex: 1; min-width: 0; }
.ft-admin-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font-size: 13px; align-items: center; }
.ft-admin-fields label { display: inline-flex; align-items: center; gap: 6px; }
.ft-admin-fields input[type=text], .ft-admin-fields select { padding: 7px 9px; }
@media (max-width: 600px) { .ft-admin-row { flex-direction: column; } .ft-admin-row > img { width: 100%; height: auto; aspect-ratio: 16/9; } }
.nav-mega-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Bản 18.0: menu thu gọn (☰) khổ 781–1100px ngang — bảng có cấu trúc: liên kết · nhóm có tiêu đề · tính năng có ảnh · tài khoản */
@media (min-width: 781px) and (max-width: 1100px) {
    .site-header .brand { margin-right: auto; }
    .site-header .nav-bell { margin-left: 0; margin-right: 6px; }
    .site-header .nav-live { margin-left: 6px; margin-right: 8px; }
    .main-nav.open { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; align-items: start; max-height: calc(100vh - 80px); overflow-y: auto; }
    .main-nav.open > a { padding: 10px 12px; border-radius: 10px; background: #161616; text-align: center; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav.open > a { background: #ffffff; }
    .main-nav.open > a.btn-outline, .main-nav.open > a.btn-solid { grid-column: span 2; }
    .main-nav.open .nav-group { display: block; grid-column: 1 / -1; margin-top: 8px; }
    .main-nav.open .nav-group-btn { display: flex; pointer-events: none; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #ff5a63; padding: 4px 2px 8px; box-shadow: none !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav.open .nav-group-btn { color: #c8101a; }
    .main-nav.open .nav-group-btn .ico, .main-nav.open .nav-me-btn .avatar-mini, .main-nav.open .nav-me-name { display: none; }
    .main-nav.open .nav-group .nav-drop { display: grid !important; position: static; transform: none; width: auto; min-width: 0; box-shadow: none; border: 0; padding: 0; background: none;
        grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
    .main-nav.open .nav-drop a { padding: 10px 12px !important; border-radius: 10px; border-bottom: 0 !important; background: #161616; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(html[data-theme="light"] body:not(.admin-body)) .main-nav.open .nav-drop a { background: #ffffff; }
    .main-nav.open .nav-mega-drop { grid-template-columns: 1fr !important; }
    .main-nav.open .nav-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
    .main-nav.open .nav-mega-item { white-space: normal !important; }
    .main-nav.open .nav-mega-img { width: 64px; height: 36px; }
    .main-nav.open .nav-mega-all { display: none; }
    .main-nav.open .nav-me-head { display: none; }
    .main-nav.open .nav-me-btn::after { content: "Tài khoản"; }
}
/* Bản 18.0.3: trang sự kiện — tổng giải thưởng, nút nhanh, cơ cấu giải */
.sk-total { margin: 8px 0 4px !important; color: #fff !important; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-total { color: #111827 !important; }
.sk-total small { color: var(--muted, #aaa); }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-total small { color: var(--muted, #4b5563); }
.sk-total b { font-size: clamp(22px, 3.2vw, 30px); color: #f5a623; font-variant-numeric: tabular-nums; }
.sk-hero-btns { margin: 10px 0 6px; }
.sk-sub { font-size: 14px; margin: 14px 0 6px; color: #eee; letter-spacing: .3px; }
:where(html[data-theme="light"] body:not(.admin-body)) .sk-sub { color: #111827; }
.sk-prizes td:nth-child(2), .sk-prizes td:nth-child(3) { text-align: right; white-space: nowrap; }
.sk-sumrow td { font-weight: 800; color: #f5a623; border-top: 1px solid var(--border); }
#the-le, #nhap-code { scroll-margin-top: 80px; }
ol.sk-rules { padding-left: 20px; }
.clan-pending-alert { display: flex; align-items: center; gap: 8px; text-decoration: none; margin: 14px 0; }
.clan-manage { scroll-margin-top: 80px; }
.clan-req-act .btn-solid, .clan-req-act .btn-outline { padding: 8px 16px; font-size: 14px; line-height: 1.3; border-radius: 10px; cursor: pointer; }
@media (max-width: 600px) {
    .clan-reqs li { flex-wrap: wrap; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .clan-reqs li:last-child { border-bottom: 0; }
    .clan-req-act { width: 100%; padding-left: 56px; }
    .clan-req-act form { flex: 1; } .clan-req-act button { width: 100%; }
}

/* =====================================================================
   Bản 18.1 — GIAO DIỆN SÁNG / TỐI
   Quy tắc :root[data-theme="light"] dưới đây viết tay (màu nền, chữ, viền chung + chỗ cần giữ tối).
   Các quy tắc :where(html[data-theme="light"] …) rải khắp file là do theme_gen.py SINH TỰ ĐỘNG — sửa CSS xong chạy lại công cụ.
   ===================================================================== */
:root[data-theme="light"] { --bg: #f3f4f6; --bg-soft: #ffffff; --white: #111827; --gray: #6b7280; --border: #e5e7eb; --red-glow: #d1121c; --muted: #6b7280; color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Khu vẫn giữ tông tối: quản trị, thẻ bài, màn lật thẻ, overlay */
:root[data-theme="light"] body.admin-body, :root[data-theme="light"] .tcard, :root[data-theme="light"] .czr-modal, :root[data-theme="light"] .czr,
:root[data-theme="light"] .pack-reveal, :root[data-theme="light"] .cz-reveal, :root[data-theme="light"] .hero, :root[data-theme="light"] .event-banner, :root[data-theme="light"] .home-event, :root[data-theme="light"] .sc-banner, :root[data-theme="light"] .cta-banner, :root[data-theme="light"] .tour-hero, :root[data-theme="light"] .game-tile { --bg: #0a0a0a; --bg-soft: #131313; --white: #f5f5f5; --gray: #9a9a9a; --border: #2a2a2a; --red-glow: #ff2a2a; --muted: #aaa; color-scheme: dark; }
:root[data-theme="light"] body:not(.admin-body) { background: var(--bg); color: #1f2937; }
:root[data-theme="light"] .site-header { background: rgba(255,255,255,.92); border-bottom-color: var(--border); }
:root[data-theme="light"] .brand span, :root[data-theme="light"] .brand { color: #111827; }
:root[data-theme="light"] .brand-logo polygon { fill: #111827; }
:root[data-theme="light"] .site-footer { background: #ffffff; border-top: 1px solid var(--border); }
:root[data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), :root[data-theme="light"] select, :root[data-theme="light"] textarea { color-scheme: light; }
:root[data-theme="light"] body:not(.admin-body) .hero, :root[data-theme="light"] body:not(.admin-body) .sc-banner, :root[data-theme="light"] body:not(.admin-body) .event-banner, :root[data-theme="light"] body:not(.admin-body) .home-event, :root[data-theme="light"] body:not(.admin-body) .cta-banner, :root[data-theme="light"] body:not(.admin-body) .tour-hero, :root[data-theme="light"] body:not(.admin-body) .game-tile { color: #f5f5f5; }
:root[data-theme="light"] body:not(.admin-body) img.brand-logo-img { filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }
/* Nút & bộ chọn giao diện */
.theme-toggle { order: 3; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; margin-left: 14px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--white); cursor: pointer; }
.theme-toggle:hover { border-color: var(--red); }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: block; } :root[data-theme="light"] .theme-toggle .ico-moon { display: none; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) { .site-header .theme-toggle { display: none; } }
@media (max-width: 1100px) { .site-header .theme-toggle { margin-left: auto; } .site-header .theme-toggle + .nav-inbox, .site-header .theme-toggle ~ .nav-bell { margin-left: 8px; } }
.theme-switch { display: flex; gap: 6px; }
.theme-switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--white); font: inherit; font-size: 13px; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { border-color: var(--red); background: rgba(230,20,31,.12); color: var(--red-glow); font-weight: 700; }
.theme-switch-sm button { padding: 6px 8px; font-size: 12px; } .theme-switch-sm button span { display: none; }
.nav-me-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); margin-top: 4px; }
.nav-me-theme small { color: var(--gray); font-size: 12px; }
.sheet-theme { padding: 0 4px 6px; }
@media (max-width: 1100px) { .main-nav .nav-me-theme { padding: 10px 6px; } .theme-switch-sm button span { display: inline; } }

/* 18.1 — màu chữ inline (độ hiếm thẻ) quá sáng trên nền sáng: đổi sang tông đậm, trừ vùng giữ nền tối */
:root[data-theme="light"] body:not(.admin-body) [style*="color:#ffffff"]:not(:is(.tcard, .czr, .hero, .event-banner, .home-event, .sc-banner, .cta-banner, .tour-hero, .game-tile, .pack-reveal, .cz-reveal) *) { color: #0e7490 !important; }
:root[data-theme="light"] body:not(.admin-body) [style*="color:#f5c451"]:not(:is(.tcard, .czr, .hero, .event-banner, .home-event, .sc-banner, .cta-banner, .tour-hero, .game-tile, .pack-reveal, .cz-reveal) *) { color: #a16207 !important; }
:root[data-theme="light"] body:not(.admin-body) [style*="color:#ff7a45"]:not(:is(.tcard, .czr, .hero, .event-banner, .home-event, .sc-banner, .cta-banner, .tour-hero, .game-tile, .pack-reveal, .cz-reveal) *) { color: #c2410c !important; }
:root[data-theme="light"] body:not(.admin-body) [style*="color:#9ca3af"]:not(:is(.tcard, .czr, .hero, .event-banner, .home-event, .sc-banner, .cta-banner, .tour-hero, .game-tile, .pack-reveal, .cz-reveal) *) { color: #6b7280 !important; }

/* ===================== Bản 18.2 — KHỐI THẺ BÀI NỔI BẬT · BỐ CỤC TRANG CHỦ · STREAMER KÉO THẢ ===================== */
.home-cards.has-event { padding-top: 28px; }
.home-event-xl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 28px; min-height: 230px; padding: 28px 30px; margin-bottom: 16px; border-radius: 22px;
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ea) 42%, transparent), transparent 62%), linear-gradient(135deg, #1a0d0e, #0b0b0d);
    border: 1px solid color-mix(in srgb, var(--ea) 55%, #333); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset; }
.home-event-xl .event-bg { opacity: .55; }
.home-event-xl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.62) 55%, rgba(8,8,10,.35) 100%); z-index: 0; pointer-events: none; }
.home-event-xl > * { position: relative; z-index: 2; }
.home-event-xl > .he-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.home-event-xl > .he-cover:focus-visible { outline: 3px solid var(--ea); outline-offset: 3px; }
.home-event-xl .he-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; min-width: 0; }
.home-event-xl .he-main a, .home-event-xl .he-cd { pointer-events: auto; }
.home-event-xl .he-name { flex: none; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.home-event-xl .he-desc { margin: 0; max-width: 620px; color: #d6d6d6; font-size: 15px; line-height: 1.5; }
.home-event-xl .he-prize { margin: 2px 0 0; color: #e8e8e8; font-size: 14px; } .home-event-xl .he-prize b { color: #ffd76a; font-size: 22px; font-weight: 800; }
.home-event-xl .he-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.home-event-xl .he-btns a { display: inline-flex; align-items: center; gap: 7px; }
.home-event-xl .he-btns .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.25); }
.home-event-xl .he-cd { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 14px 18px; border-radius: 16px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.home-event-xl .he-cd small { color: #cfcfcf; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; }
.home-event-xl .he-cd b { font-size: clamp(22px, 3vw, 32px); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
@media (max-width: 700px) {
    .home-event-xl { grid-template-columns: 1fr; padding: 22px 18px; min-height: 0; gap: 14px; }
    .home-event-xl .he-cd { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 14px; justify-self: start; }
    .home-event-xl .he-btns { width: 100%; } .home-event-xl .he-btns a { flex: 1 1 auto; justify-content: center; }
}
:root[data-theme="light"] .home-event-xl .he-btns .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.25); }
:root[data-theme="light"] .home-event-xl .he-name, :root[data-theme="light"] .home-event-xl .he-cd b { color: #fff; }
/* Trang sự kiện: đầu khối Thể lệ + bù header dính khi cuộn tới */
.sk-le-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .sk-le-head h2 { margin: 0; }
#the-le, #nhap-code, #sap-xep, #overlay { scroll-margin-top: 90px; }
/* Quản trị: bố cục trang chủ */
.hl-list { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hl-row { display: grid; grid-template-columns: 22px 26px minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #161616; cursor: grab; }
:where(html[data-theme="light"] body:not(.admin-body)) .hl-row { background: #ffffff; }
.hl-row.dragging { opacity: .5; border-color: var(--red); } .hl-row.is-off { opacity: .55; }
.hl-grip { color: var(--gray); display: grid; place-items: center; } .hl-no { font-weight: 800; color: var(--red); text-align: center; }
.hl-on { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; } .hl-on b { font-weight: 600; }
.hl-title { width: 100%; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border); background: #0f0f0f; color: var(--white); font: inherit; font-size: 13.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .hl-title { background: #f3f4f6; }
span.hl-title { border: 0; background: none; }
.hl-move { display: flex; gap: 4px; } .hl-move button { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: none; color: var(--white); cursor: pointer; }
.hl-move button:hover { border-color: var(--red); }
.hl-note { grid-column: 3 / -1; font-size: 12px; margin-top: -4px; }
.hl-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .hl-row { grid-template-columns: 22px 26px minmax(0, 1fr) auto; } .hl-row .hl-title { grid-column: 3 / -1; grid-row: 2; } .hl-note { grid-row: 3; } }
/* Streamer: kéo thả vị trí khối overlay */
.ovs-arrange { margin-top: 14px; }
.ovs-arrange-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ovs-arrange-bar button, .ovs-arrange-bar .btn-solid { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.ovs-arrange-act { display: inline-flex; gap: 10px; flex-wrap: wrap; } .ovs-arrange-act[hidden] { display: none; }
.ovs-arrange-bar .btn-outline { background: none; cursor: pointer; }
.ovs-reset-lay { margin: 0; }
.ovs-arrange-hint { font-size: 13px; margin: 10px 0 0; }
.ovs-frame.is-editing { outline: 2px dashed #00c8ff; outline-offset: 3px; }

/* ===================== Bản 18.3 — Quản trị: nhiệm vụ hệ thống tùy chỉnh ===================== */
.qa-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qa-row { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #151515; }
:where(html[data-theme="light"] body:not(.admin-body)) .qa-row { background: #ffffff; }
.qa-row.is-off { opacity: .55; } .qa-row.dragging { opacity: .45; border-color: var(--red); }
.qa-grip { color: var(--gray); cursor: grab; padding-top: 8px; } .qa-row .module-toggle { margin-top: 4px; }
.qa-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qa-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qa-line input[type=text], .qa-line input[type=number], .qa-line select { padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: #0f0f0f; color: var(--white); font: inherit; font-size: 13.5px; }
:where(html[data-theme="light"] body:not(.admin-body)) .qa-line input[type=text], :where(html[data-theme="light"] body:not(.admin-body)) .qa-line input[type=number], :where(html[data-theme="light"] body:not(.admin-body)) .qa-line select { background: #f3f4f6; }
.qa-title { flex: 1 1 260px; min-width: 0; font-weight: 600; } .qa-kind { flex: 0 1 260px; max-width: 100%; } .qa-param { flex: 0 1 170px; }
.qa-nums label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray); }
.qa-nums input[type=number] { width: 84px; } .qa-link { flex: 1 1 220px; } .qa-link input { flex: 1; min-width: 0; }
.qa-card select { max-width: 220px; }
.qa-meta { font-size: 12px; } .qa-warn { color: #f59e0b; font-weight: 600; }
:where(html[data-theme="light"] body:not(.admin-body)) .qa-warn { color: #b45309; }
.qa-move { display: flex; gap: 4px; } .qa-move button { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: none; color: var(--white); cursor: pointer; display: grid; place-items: center; }
.qa-move button:hover { border-color: var(--red); } .qa-move .qa-del:hover { color: #ff6b6b; }
:where(html[data-theme="light"] body:not(.admin-body)) .qa-move .qa-del:hover { color: #c81e1e; }
.qa-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .qa-actions .btn-outline { display: inline-flex; align-items: center; gap: 6px; background: none; cursor: pointer; }
@media (max-width: 760px) { .qa-row { grid-template-columns: auto minmax(0, 1fr); } .qa-grip { display: none; } .qa-move { grid-column: 1 / -1; justify-content: flex-end; } .qa-title, .qa-kind, .qa-param { flex-basis: 100%; } }
/* 18.3 — Nhật ký cập nhật rút gọn: gạch đầu dòng, chủ đề in đậm; mục chỉ admin thấy */
.upd-card ul.upd-list { list-style: disc; padding-left: 20px; gap: 6px; }
.upd-card ul.upd-list li { display: list-item; color: #ddd; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-card ul.upd-list li { color: #374151; }
.upd-card ul.upd-list li::marker { color: var(--red); }
.upd-card ul.upd-list li b { color: var(--white); font-weight: 700; }
.upd-card ul.upd-list li.upd-admin { opacity: .8; }
.upd-admin-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #f59e0b; border: 1px solid rgba(245,158,11,.5); vertical-align: 1px; }
:where(html[data-theme="light"] body:not(.admin-body)) .upd-admin-tag { color: #b45309; }

/* ===================== Bản 18.4 — Điểm & V-Point: luật thưởng 2 cột, kinh tế thưởng ===================== */
.pr-head, .points-rule-row.pr-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 10px; align-items: center; }
.pr-head { font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.pr-head span:not(:first-child) { text-align: center; }
.points-rule-row.pr-row label { margin: 0; } .points-rule-row.pr-row input { width: 100%; min-width: 0; }
.econ-period { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; } .econ-period button { cursor: pointer; }
.econ-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.econ-day { flex: 1 1 0; display: flex; align-items: flex-end; gap: 2px; height: 100%; min-width: 0; }
.econ-day span { flex: 1 1 0; border-radius: 3px 3px 0 0; min-height: 1px; }
.econ-in { background: #22c55e; } .econ-out { background: #ef4444; }
.econ-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; margin-top: 8px; } .econ-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cz-earn-warn { border-color: rgba(245,158,11,.5) !important; }
@media (max-width: 600px) { .pr-head, .points-rule-row.pr-row { grid-template-columns: minmax(0, 1fr) 70px 70px; gap: 6px; } }

/* ===== Bản 18.6: ảnh nền sự kiện (băng rôn hoặc quạt thẻ tự ghép) ===== */
.sk-hero { position: relative; overflow: hidden; isolation: isolate; }
.sk-hero > *:not(.event-bg):not(.event-fan):not(.event-glow) { position: relative; z-index: 1; }
.event-banner > .event-fan, .home-event > .event-fan, .sk-hero > .event-fan { position: absolute; z-index: 0; right: clamp(0px, 3vw, 48px); top: 0; bottom: 0; width: min(44%, 420px); pointer-events: none; }
.event-banner > .event-glow, .home-event > .event-glow, .sk-hero > .event-glow { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(60% 90% at 85% 50%, color-mix(in srgb, var(--ea, #e6141f) 38%, transparent), transparent 70%); }
.sk-hero > .event-bg { z-index: 0; }
.event-fan img { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: #111;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 255, 255, .16); transform-origin: 50% 130%;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s)); animation: evFanIn .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.event-fan img[style*="--s:1.12"] { box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 0 2px var(--ea, #f5c451), 0 0 26px color-mix(in srgb, var(--ea, #f5c451) 60%, transparent); }
/* 18.6: quạt thẻ nằm trên lớp phủ tối của khối sự kiện trang chủ (dưới chữ) */
.home-event-xl > .event-fan, .home-event-xl > .event-glow { z-index: 1; }
@keyframes evFanIn { from { opacity: 0; transform: translate(-50%, -30%) rotate(0deg) scale(.6); } }
.home-event:has(.event-fan) .he-main, .event-banner:has(.event-fan) .event-text { max-width: min(560px, 58%); }
.sk-hero:has(.event-fan) { grid-template-columns: minmax(0, 1fr); }
.sk-hero:has(.event-fan) .sk-hero-txt { max-width: 58%; }
.sk-hero:has(.event-fan) .sk-hero-stats { max-width: 58%; }
@media (max-width: 720px) {
    .event-banner > .event-fan, .home-event > .event-fan, .sk-hero > .event-fan { width: 62%; right: -14%; top: -6%; bottom: auto; height: 62%; opacity: .62; -webkit-mask-image: linear-gradient(200deg, #000 40%, transparent 92%); mask-image: linear-gradient(200deg, #000 40%, transparent 92%); }
    .home-event:has(.event-fan) .he-main, .event-banner:has(.event-fan) .event-text, .sk-hero:has(.event-fan) .sk-hero-txt, .sk-hero:has(.event-fan) .sk-hero-stats { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .event-fan img { animation: none; } }

/* ===== Bản 18.6: Đổi quà V-Point ===== */
.vps-page { max-width: 1060px; }
.vps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 8px 0 18px; }
.vps-head h1 { margin: 0 0 4px; }
.vps-bal { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-soft); color: #f5c451; text-decoration: none; }
:where(html[data-theme="light"] body:not(.admin-body)) .vps-bal { color: #a16207; }
.vps-bal b { font-size: 18px; font-variant-numeric: tabular-nums; } .vps-bal small { grid-column: 2; color: var(--gray); font-size: 11.5px; }
.vps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vps-item { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-soft); overflow: hidden; min-width: 0; }
.vps-item.is-out { opacity: .55; }
.vps-pic { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; color: #f5c451; background: radial-gradient(circle at 50% 40%, rgba(245, 196, 81, .22), transparent 70%), #101010; }
:where(html[data-theme="light"] body:not(.admin-body)) .vps-pic { color: #a16207; background: radial-gradient(circle at 50% 40%, rgba(245, 196, 81, .22), transparent 70%), #f3f4f6; }
.vps-pic img { width: 100%; height: 100%; object-fit: cover; }
.vps-stock { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 10px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .vps-stock { color: #111827; }
.vps-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 0; min-width: 0; }
.vps-body h2 { margin: 0; font-size: 17px; } .vps-body p { margin: 0; font-size: 13.5px; }
.vps-rw { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.vps-rw li { display: flex; gap: 6px; align-items: center; }
.vps-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; }
.vps-buy .btn-solid { flex: 1 1 auto; justify-content: center; }
.vps-hist { margin-top: 20px; } .vps-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vps-hist li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13.5px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.vps-hist li small { grid-column: 2 / -1; overflow-wrap: anywhere; } .vps-hist time { color: var(--gray); } .vps-hist li span { color: #f5c451; font-weight: 700; }
:where(html[data-theme="light"] body:not(.admin-body)) .vps-hist li span { color: #a16207; }
:root[data-theme="light"] .vps-pic { background: radial-gradient(circle at 50% 40%, rgba(245, 196, 81, .3), transparent 70%), #f7f3e6; color: #a16207; }
:root[data-theme="light"] .vps-bal, :root[data-theme="light"] .vps-hist li span { color: #a16207; }

/* ===== Bản 18.6: nút trò chơi trên đầu trang (màu --gc do Ban quản trị chọn) ===== */
.nav-game { --gc: #22c55e; order: 3; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; margin-left: 14px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px;
    color: var(--gc); text-decoration: none; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--gc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 60%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 28%, transparent), inset 0 0 10px color-mix(in srgb, var(--gc) 12%, transparent); transition: background .2s, transform .15s; }
.nav-game:hover, .nav-game.is-on { background: color-mix(in srgb, var(--gc) 26%, transparent); transform: translateY(-1px); }
.nav-game svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gc) 80%, transparent)); animation: navGameBob 2.6s ease-in-out infinite; }
.nav-game-lbl { color: var(--white); white-space: nowrap; }
.nav-game::after { content: ""; position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 0 2px var(--bg); animation: navGamePing 2s ease-out infinite; }
@keyframes navGameBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(-6deg); } }
@keyframes navGamePing { 0% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 2px color-mix(in srgb, var(--gc) 70%, transparent); } 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 9px transparent; } }
@media (max-width: 1100px) {
    .site-header .nav-game { width: 40px; padding: 0; margin-left: 8px; }
    .site-header .nav-game-lbl { display: none; }
    .site-header .nav-game + .nav-inbox, .site-header .nav-game ~ .nav-bell { margin-left: 8px; }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
    .site-header .nav-game { order: 0; width: 38px; height: 38px; margin: 0 6px 0 0; }
    .site-header .nav-game::after { top: 3px; right: 3px; }
}
@media (prefers-reduced-motion: reduce) { .nav-game svg, .nav-game::after { animation: none; } }

/* ===== Bản 18.7: Cộng tác viên (ctv.php) ===== */
.ctv-head { margin: 8px 0 18px; }
.ctv-head h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; color: var(--white); }
.ctv-head h1 svg { color: #f59e0b; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-head h1 svg { color: #b45309; }
.ctv-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ctv-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.ctv-list li svg { flex: 0 0 auto; margin-top: 3px; color: #f59e0b; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-list li svg { color: #b45309; }
.ctv-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ctv-perk { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); min-width: 0; }
.ctv-perk small { color: var(--gray); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ctv-perk b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--white); }
.ctv-perk .muted { font-size: 12.5px; }
.ctv-newbies { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ctv-newbie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; color: inherit; text-decoration: none; }
.ctv-newbie > a { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.ctv-newbie span { display: flex; flex-direction: column; min-width: 0; }
.ctv-newbie b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctv-newbie small { color: var(--gray); font-size: 12px; }
.ctv-team { justify-content: flex-start; }
.ctv-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.ctv-fs[disabled] { opacity: .6; }
.ctv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ctv-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.ctv-rate input { position: absolute; opacity: 0; pointer-events: none; }
.ctv-rate label { font-size: 30px; line-height: 1; cursor: pointer; color: var(--border); transition: color .15s; margin: 0; }
.ctv-rate input:checked ~ label, .ctv-rate label:hover, .ctv-rate label:hover ~ label { color: #f5c451; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-rate input:checked ~ label, :where(html[data-theme="light"] body:not(.admin-body)) .ctv-rate label:hover, :where(html[data-theme="light"] body:not(.admin-body)) .ctv-rate label:hover ~ label { color: #a16207; }
.ctv-rate input:focus-visible + label { outline: 2px solid #f5c451; outline-offset: 2px; border-radius: 4px; }
.ctv-hist { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ctv-hist:last-child { border-bottom: 0; }
.ctv-hist-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ctv-hist p { margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.ctv-st { padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; background: rgba(154, 154, 154, .18); color: var(--white); }
.ctv-st-planned { background: rgba(59, 130, 246, .2); color: #93c5fd; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-st-planned { color: #0357b4; }
.ctv-st-done { background: rgba(34, 197, 94, .2); color: #86efac; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-st-done { color: #15803d; }
.ctv-st-declined { background: rgba(239, 68, 68, .16); color: #fca5a5; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-st-declined { color: #b91c1c; }
.ctv-reply { margin-top: 8px; padding: 10px 12px; border-left: 3px solid #f59e0b; border-radius: 8px; background: rgba(245, 158, 11, .08); font-size: 14px; }
.ctv-reply small { display: block; color: #f59e0b; font-weight: 700; margin-bottom: 2px; }
:where(html[data-theme="light"] body:not(.admin-body)) .ctv-reply small { color: #b45309; }
.rank-pill.rank-bot { color: #5eead4; border-color: rgba(94, 234, 212, .5); background: rgba(20, 184, 166, .14); }
:where(html[data-theme="light"] body:not(.admin-body)) .rank-pill.rank-bot { color: #15a28c; }
.ctv-form textarea, .ctv-form select { width: 100%; box-sizing: border-box; font: inherit; }