/* ===== DinoVietNam web theme "key art" (29/09/2026) =====
   Cung mot bo mau voi launcher 0.1.285: rung than chi (key art lam nen), vang dong kim loai cua logo cho diem nhan,
   cam hoang hon cho nut chinh, chu mau giay da. Ten file giu nguyen (bridge tinh phien ban cache theo mtime).
   File nay nap SAU app.css va ghi de token + component. Tat theme: bo dong <link> trong index.html. */
:root {
  --font: "Be Vietnam Pro", "Nunito", "Segoe UI", system-ui, sans-serif;
  --display: "Playfair Display", "Be Vietnam Pro", "Segoe UI", serif;
  --bg: #0c0e0d; --bg2: #121513; --surface: #181c19; --raised: #1f2420; --raised2: #262b26;
  --line: #2d312b; --line2: #a97f34; --wood: #3a3d35; --wood2: #c9a44e; --wood-dark: #24271f;
  --gold: #d9b46a; --gold2: #ecd39a; --gold-deep: #8f6b2c; --bronze: #a97f34;
  --gold-grad: linear-gradient(140deg, #efd28c 0%, #d4a94c 55%, #a97f34 100%);
  --text: #ece6d9; --muted: #a39b8a; --muted2: #7f7869;
  --green: #7cc47c; --green2: #5fae63; --green3: #a9dba3; --green-deep: #3f7d46; --leaf: #6aa86a;
  --amber: #f0b25a; --amber2: #f6cf86; --red: #e2604f; --blue: #6cc6ea; --violet: #c9a6ff;
  --r-lg: 18px; --r: 14px; --r-sm: 10px;
  --shadow: 0 18px 48px rgba(0, 0, 0, .55); --shadow-sm: 0 8px 22px rgba(0, 0, 0, .38);
}
body { font-family: var(--font); background: #0c0e0d; color: var(--text); }
/* key art co dinh phia sau, phu than chi de chu doc ro; man hinh doc thi neo tam anh */
body::before { background: url("/app/keyart.webp") center 28% / cover no-repeat fixed, #0c0e0d; }
main::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 11, 10, .42) 0%, rgba(10, 11, 10, .74) 38%, rgba(10, 11, 10, .93) 100%); }
@media (max-width: 640px) { body::before { background-attachment: scroll; background-position: 62% top; } }
a { color: var(--gold2); }
a:hover { color: #fff; }

/* top bar: kinh than chi, vach vang mong */
.topbar { background: rgba(12, 14, 13, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(217, 180, 106, .28); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.brand { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: .01em; color: var(--gold2); }
.brand img { border-radius: 12px; border: 1px solid rgba(217, 180, 106, .5); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.nav { gap: 4px; flex-wrap: nowrap; padding: 4px 0; }
.nav a, .brand, .userchip, .topbar .pill { white-space: nowrap; }
@media (max-width: 1240px) { .nav a { padding: 7px 10px; font-size: 13.5px; } }
.nav a { padding: 7px 14px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.nav a:hover { color: var(--text); background: rgba(217, 180, 106, .08); border-color: rgba(217, 180, 106, .25); }
.nav a.active { color: #1c1206; background: var(--gold-grad); border-color: var(--bronze); box-shadow: 0 4px 14px rgba(240, 178, 90, .25); font-weight: 700; }
.pill, .lang, .userchip { border: 1px solid var(--wood); background: rgba(24, 28, 25, .9); font-weight: 600; border-radius: 999px; }
.pill.on { color: var(--green3); border-color: rgba(124, 196, 124, .55); }
.pill.off { color: var(--red); border-color: rgba(226, 96, 79, .5); }
.pill.on .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(124, 196, 124, .18); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(124, 196, 124, .22); } 50% { box-shadow: 0 0 0 7px rgba(124, 196, 124, .06); } }
.lang:hover, .userchip:hover { border-color: var(--wood2); color: var(--text); }
.avatar { border-color: var(--wood2); }

/* buttons: phang, vien dong, nut chinh vang kim loai */
.btn { border: 1px solid var(--wood); background: linear-gradient(180deg, #232823, #1b1f1c); color: var(--text); font-weight: 700; padding: 10px 20px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: transform .08s, box-shadow .12s, filter .15s, border-color .15s; letter-spacing: .01em; }
.btn:hover { border-color: var(--wood2); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.btn:disabled { box-shadow: none; transform: none; opacity: .55; }
.btn.pri { background: var(--gold-grad); border-color: var(--bronze); color: #1c1206; box-shadow: 0 6px 18px rgba(240, 178, 90, .22); text-shadow: none; }
.btn.pri:hover { box-shadow: 0 8px 22px rgba(240, 178, 90, .3); border-color: #d4a94c; }
.btn.pri:active { box-shadow: 0 2px 8px rgba(240, 178, 90, .2); }
.btn.amber { background: linear-gradient(180deg, #f6cf86, #f0b25a 60%, #d98b32); border-color: #b8791a; color: #2b1a00; box-shadow: 0 6px 18px rgba(240, 178, 90, .22); }
.btn.amber:active { box-shadow: 0 2px 8px rgba(240, 178, 90, .2); }
.btn.danger { background: linear-gradient(180deg, #e88a78, #e2604f 60%, #c24a3a); border-color: #8f3626; color: #2a0c04; box-shadow: 0 6px 18px rgba(226, 96, 79, .18); }
.btn.danger:active { box-shadow: 0 2px 8px rgba(226, 96, 79, .18); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover, .btn.ghost:active { transform: none; box-shadow: none; background: var(--raised); }
.btn.sm { padding: 6px 14px; font-size: 13.5px; box-shadow: none; }
.btn.sm.pri, .btn.sm.danger, .btn.sm.amber { box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.btn.xs { padding: 3px 9px; font-size: 12px; box-shadow: none; }

/* cards: kinh than chi, vien mong, vach sang tren */
.card { background: linear-gradient(180deg, rgba(24, 28, 25, .9), rgba(16, 19, 17, .94)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--wood); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05); }
.card h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--gold2); letter-spacing: .01em; }
.card h3, .eyebrow { color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.card h4 { font-family: var(--display); color: var(--gold2); font-size: 16px; }
.sub { color: var(--muted); }

/* hero: ten site vang kim loai nhu logo */
.hero { border: 1px solid rgba(217, 180, 106, .35); box-shadow: var(--shadow); }
.hero::before { background: linear-gradient(90deg, rgba(10, 11, 10, .94) 0%, rgba(10, 11, 10, .78) 45%, rgba(10, 11, 10, .35) 100%), linear-gradient(0deg, rgba(10, 11, 10, .9), transparent 55%); }
.hero h1 { font-family: var(--display); font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: .005em; }
.hero h1 em { font-style: normal; background: linear-gradient(180deg, #f8e6b4 0%, #d9b46a 48%, #8f6b2c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(40, 28, 8, .9)) drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.hero p { color: #d8d2c4; }
.eyebrow { color: var(--gold); }
.servercard { background: rgba(18, 21, 19, .86); border: 1px solid var(--wood); backdrop-filter: blur(8px); }
.servercard .ip { background: #0e100f; border: 1px solid var(--wood); }
.servercard .ip code { color: var(--gold2); }

/* stat / earn / items */
.stat, .earn .e, .item, .kv .k, .legend div, .podium .p { background: rgba(24, 28, 25, .86); border: 1px solid var(--wood); }
.hero .feat { background: rgba(18, 21, 19, .86); border: 1px solid var(--wood); } .hero a.feat:hover { border-color: var(--gold); } .hero .feat .ic { background: var(--raised); border: 1px solid var(--wood-dark); border-radius: 12px; } .hero .feat b { color: var(--gold2); }
.stat .ic, .item .ic, .shopcard .ic { background: var(--raised); border: 1px solid var(--wood-dark); border-radius: 12px; }
.stat b { color: var(--gold2); font-size: 24px; font-family: var(--display); }
.podium .p.first { border-color: var(--bronze); background: linear-gradient(180deg, rgba(217, 180, 106, .16), rgba(24, 28, 25, .9)); }
.rank { border-radius: 10px; border: 1px solid var(--wood-dark); }
.rank.r1 { background: var(--gold-grad); border-color: #b8791a; color: #1c1206; }

/* tables */
th { color: var(--gold); border-bottom: 1px solid var(--line2); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
th, td { border-bottom-color: rgba(58, 61, 53, .6); }
tbody tr:hover td { background: rgba(217, 180, 106, .05); }
tr.sel td { background: rgba(217, 180, 106, .1); }

/* inputs, badges, tabs, slots */
input, select, textarea { background: #101211; border: 1px solid var(--wood); border-radius: var(--r-sm); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 180, 106, .18); outline: none; }
.field label { color: var(--gold); font-weight: 600; }
.badge { border: 1px solid var(--wood); background: rgba(24, 28, 25, .9); color: var(--muted); font-weight: 600; }
.badge.ok { color: var(--green3); border-color: rgba(124, 196, 124, .5); } .badge.warn { color: var(--amber2); border-color: rgba(240, 178, 90, .5); } .badge.bad { color: var(--red); border-color: rgba(226, 96, 79, .5); }
.tabs a, .tabs button { border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.2; border: 1px solid var(--wood); background: rgba(24, 28, 25, .9); color: var(--muted); font-weight: 600; padding: 8px 16px; box-shadow: none; }
.tabs a:hover, .tabs button:hover { border-color: var(--wood2); color: var(--text); }
.tabs a.active, .tabs button.active { background: var(--gold-grad); color: #1c1206; border-color: var(--bronze); box-shadow: 0 4px 12px rgba(240, 178, 90, .22); font-weight: 700; }
.slot, .shopcard, .sw, .gview, .skin-viewport { border: 1px solid var(--wood); background: rgba(24, 28, 25, .88); }
.slot:hover, .shopcard:hover { border-color: var(--wood2); }
.slot .sp, .shopcard .nm { color: var(--gold2); font-weight: 700; font-family: var(--display); }
.slot.empty { border: 1px dashed rgba(217, 180, 106, .5); background: rgba(217, 180, 106, .03); }
.slot.empty:hover { border-color: var(--gold); }
.slot.empty.buy { border: 1px solid var(--gold); background: rgba(217, 180, 106, .07); }
.slot.empty.buy .plus { color: var(--gold2); text-shadow: 0 2px 8px rgba(240, 178, 90, .35); }
.bar { background: #0e100f; border: 1px solid var(--wood-dark); height: 12px; border-radius: 8px; }
.bar i { background: linear-gradient(90deg, #b8923f, #efd28c); }
.bar.amber i { background: linear-gradient(90deg, #d98b32, #f6cf86); }
.bones, .balance-big b { color: var(--gold2); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.empty { border: 1px dashed var(--wood); color: var(--muted); }
.preview-strip { border: 1px solid var(--wood); }
.skin-viewbar select { border-width: 1px; }
.gname .btn.xs { box-shadow: none; }

/* modal + toast */
.modal { border: 1px solid rgba(217, 180, 106, .45); background: linear-gradient(180deg, rgba(24, 28, 25, .98), rgba(16, 19, 17, .99)); box-shadow: var(--shadow); }
.modal-title { font-family: var(--display); color: var(--gold2); font-size: 20px; }
.toast { border: 1px solid rgba(217, 180, 106, .45); background: rgba(31, 36, 32, .97); font-weight: 600; }
.toast.err { background: #2a1b17; border-color: rgba(226, 96, 79, .55); }

/* mobile nav / footer */
.mobile-nav { background: rgba(12, 14, 13, .96); border-top: 1px solid rgba(217, 180, 106, .25); }
.mobile-nav a.active { color: var(--gold2); }
footer { border-top: 1px solid rgba(217, 180, 106, .18); color: var(--muted2); }
.announce { border-left: 4px solid var(--gold); }

/* chi tiet nho: khong dung emoji trang tri (giao dien sang trong), giu vuong mien o bang xep hang */
.card { position: relative; }
.stat, .slot, .shopcard { transition: transform .12s, border-color .15s; } .stat:hover, .slot:hover, .shopcard:hover { transform: translateY(-2px); }

/* topbar align */
.topbar .in { align-items: center; }
.pill, .lang, .userchip { height: 40px; display: inline-flex; align-items: center; box-sizing: border-box; line-height: 1; }
.userchip { padding: 0 12px 0 4px; gap: 8px; }
.userchip .avatar { width: 30px; height: 30px; border-width: 1px; flex: none; }
.userchip .bones { line-height: 1; }
.brand { display: inline-flex; align-items: center; }

/* ===== podium: hang 1 o giua nho cao, vuong mien doi tren vien ===== */
.podium { grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 14px; padding-top: 46px; margin-bottom: 18px; }
.podium .p { position: relative; overflow: visible; border-radius: 16px; padding: 16px 14px 14px; box-shadow: var(--shadow-sm); }
.podium .p:nth-child(1) { order: 2; }
.podium .p:nth-child(2) { order: 1; padding-top: 22px; }
.podium .p:nth-child(3) { order: 3; }
.podium .p::before { content: "\1F451"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%) rotate(-6deg); font-size: 32px; line-height: 1; z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.podium .p:nth-child(2)::before { filter: grayscale(1) brightness(1.35) drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.podium .p:nth-child(3)::before { filter: sepia(1) saturate(1.7) hue-rotate(-18deg) brightness(.85) drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.podium .p.first { padding: 34px 16px 26px; transform: translateY(-16px); border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(217, 180, 106, .22), rgba(24, 28, 25, .92) 70%); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 4px rgba(217, 180, 106, .14); }
.podium .p.first::before { font-size: 46px; top: -36px; animation: crown 2.6s ease-in-out infinite; }
@keyframes crown { 0%, 100% { transform: translateX(-50%) rotate(-7deg); } 50% { transform: translateX(-50%) translateY(-5px) rotate(7deg); } }
.podium .p .rank { position: absolute; top: 8px; left: 8px; } .podium .rank.r1::after { content: none; }
.podium .p .avatar.lg { width: 76px; height: 76px; margin-top: 4px; }
.podium .p.first .avatar.lg { width: 100px; height: 100px; border-width: 3px; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217, 180, 106, .25); }
.podium .p b { font-family: var(--display); font-size: 15px; }
.podium .p.first b { font-size: 19px; color: var(--gold2); }
.podium .p.first .bones { font-size: 18px; }
@media (max-width: 640px) { .podium { grid-template-columns: 1fr; padding-top: 30px; } .podium .p:nth-child(n) { order: 0; transform: none; margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { .podium .p.first::before { animation: none; } }

/* map: danh sach "Tren ban do" khong gian o theo chieu cao, nhan cung party */
.legend { align-content: start; }
.badge.party { background: var(--green); color: #06180d; border-color: var(--green-deep); padding: 1px 8px; font-size: 11px; margin-left: 4px; vertical-align: middle; }

/* ===== cong tac gat: vang = bat, xam = tat ===== */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 56px; height: 30px; padding: 0; margin: 0; border-radius: 999px; border: 1px solid var(--wood); background: linear-gradient(180deg, #2b2f2a, #1d211e); position: relative; cursor: pointer; flex: none; vertical-align: middle; transition: background .2s, border-color .2s; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #d8d2c4; box-shadow: 0 2px 3px rgba(0,0,0,.45); transition: left .2s, background .2s; }
input[type="checkbox"]:checked { background: var(--gold-grad); border-color: var(--bronze); }
input[type="checkbox"]:checked::before { left: 28px; background: #fff7e6; }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(217, 180, 106, .35); }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
label.row, .field label.row, label.toggle { display: inline-flex; align-items: center; gap: 12px; width: auto; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; margin: 0; }
label.row .hint { font-family: var(--font); font-weight: 500; font-size: 12.5px; color: var(--muted); }

/* 0.9.113: WEB ADMIN TREN DIEN THOAI (<= 640 px) - tab vuot ngang, bo loc log vuot ngang, bang thanh the */
@media (max-width: 640px) {
  .admtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 6px; margin-inline: -4px; padding: 2px 4px 8px; scroll-snap-type: x proximity; }
  .admtabs::-webkit-scrollbar { display: none; }
  .admtabs a { flex: 0 0 auto; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; scroll-snap-align: center; box-shadow: none; }
  .admtabs > span { display: none; }
  #view:has(.admtabs) .card { padding: 14px 12px; border-radius: 16px; }
  #view:has(.admtabs) .card h2 { font-size: 17px; }
  #view:has(.admtabs) .card .head .sub { font-size: 13px; }
  #view:has(.admtabs) .lg-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  #view:has(.admtabs) .lg-cats::-webkit-scrollbar { display: none; }
  #view:has(.admtabs) .lg-cats .chip { flex: 0 0 auto; white-space: nowrap; }
  #view:has(.admtabs) input:not([type=checkbox]):not([type=radio]), #view:has(.admtabs) select, #view:has(.admtabs) textarea { max-width: 100%; min-width: 0; font-size: 16px; }
  #view:has(.admtabs) .row { flex-wrap: wrap; }
  #view:has(.admtabs) div[style*="overflow-x"]:has(> table.mcard) { overflow-x: visible !important; }
  table.mcard, table.mcard > tbody, table.mcard > tbody > tr, table.mcard > tbody > tr > td { display: block; width: 100%; }
  table.mcard > thead { display: none; }
  table.mcard > tbody > tr { border: 1px solid rgba(58, 61, 53, .8); border-radius: 12px; padding: 6px 12px; margin-bottom: 8px; background: rgba(0, 0, 0, .18); }
  table.mcard > tbody > tr > td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  table.mcard > tbody > tr > td + td { border-top: 1px dashed rgba(58, 61, 53, .6); }
  table.mcard > tbody > tr > td::before { content: attr(data-label); flex: 0 0 34%; text-align: left; color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
  table.mcard > tbody > tr > td[data-label=""] { justify-content: flex-start; text-align: left; }
  table.mcard > tbody > tr > td[data-label=""]::before { display: none; }
  table.mcard > tbody > tr > td > * { min-width: 0; }
  table.mcard > tbody > tr > td > .mcv { flex: 1 1 auto; display: block; }
  table.mcard > tbody > tr > td:empty { display: none; }
  table.mcard > tbody > tr > td .who { justify-content: flex-end; }
  table.mcard > tbody > tr > td .btn { white-space: nowrap; }
  #view:has(.admtabs) .grid.g3, #view:has(.admtabs) .grid.g4 { grid-template-columns: 1fr 1fr; }
  #view:has(.admtabs) img.avatar, #view:has(.admtabs) img.avatar-lg { flex: 0 0 auto; align-self: flex-start; object-fit: cover; max-width: 56px; max-height: 56px; aspect-ratio: 1; height: auto; }
  #aiRows .row { flex-wrap: nowrap; gap: 4px; }
  #aiRows input { width: 72px !important; min-width: 0; padding-inline: 8px; }
  table.mrow, table.mrow > tbody { display: block; width: 100%; }
  table.mrow > tbody > tr, table.mrow > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid rgba(58, 61, 53, .7); }
  table.mrow > tbody > tr > td, table.mrow > tr > td { border: 0; padding: 2px 0; min-width: 0; overflow-wrap: anywhere; }
  table.mrow > tbody > tr > td:first-child, table.mrow > tr > td:first-child { flex: 1 1 100%; }
  table.mrow > tbody > tr > td:last-child:not(:first-child) { margin-left: auto; }
}

/* 0.9.114: the BAN BE (Ho so) - o tim + hop ket qua tha xuong, cham xanh = dang choi, nut hanh dong ben phai; dien thoai xuong hang */
.fr-add { position: relative; margin-bottom: 12px; }
.fr-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--wood2); border-radius: var(--r-sm); box-shadow: 0 12px 28px rgba(0, 0, 0, .5); max-height: 280px; overflow-y: auto; }
.fr-results .item { border: 0; border-radius: 0; cursor: pointer; background: transparent; padding: 9px 12px; }
.fr-results .item:hover { background: var(--raised); }
.fr-results .item .btn { flex: none; }
.fr-av { position: relative; flex: none; display: inline-flex; }
.fr-av .avatar { width: 40px; height: 40px; }
.fr-av .fr-dot { position: absolute; right: -1px; bottom: -1px; }
.fr-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #6b7280; border: 2px solid var(--surface); flex: none; box-sizing: border-box; }
.fr-dot.on { background: var(--green); box-shadow: 0 0 0 2px rgba(124, 196, 124, .28); }
.fr-results .fr-dot { width: 9px; height: 9px; border-width: 1px; vertical-align: middle; }
.fr-list { display: flex; flex-direction: column; gap: 8px; }
.fr-list h4 { margin: 10px 0 2px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.fr-list .item .acts { display: flex; gap: 6px; flex: none; }
.fr-list .item .tx .mono { font-size: 12px; opacity: .8; }
#friendsCard .head { flex-wrap: nowrap; }
#friendsCard .head > div { flex: 1 1 auto; }
#friendsCard .head .btn { flex: none; }
.badge.friend { background: var(--blue); color: #06202b; border-color: #3b8db0; padding: 1px 8px; font-size: 11px; margin-left: 4px; vertical-align: middle; }
@media (max-width: 640px) {
  .fr-list .item { flex-wrap: wrap; }
  .fr-list .item .acts { width: 100%; justify-content: flex-end; }
  .fr-list .item .tx span { white-space: normal; }
  #frQ { font-size: 16px; }
}

/* 0.9.122: lich su tru mau - dong bi danh dau (cu lon / don dap) */
.hit-flag td { background: rgba(240, 178, 90, .07); }
#hitsCard .head { align-items: flex-start; }
#hitsCard .head .row { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; flex: 0 0 auto; }
#hitsCard .head select { width: auto; min-width: 120px; padding: 6px 10px; font-size: 13px; }
@media (max-width: 640px) { #hitsCard .head .row { flex-wrap: wrap; } }