/* ===== THEME "rung xanh cute" - theo banner DinoVietNam (xanh la tuoi, vang nang, vien go nau, chu tron map) =====
   File nay nap SAU app.css va ghi de token + component. Tat theme: bo dong <link> trong index.html. */
:root {
  --font: "Nunito", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --display: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --bg: #0b2416; --bg2: #0f2d1c; --surface: #153824; --raised: #1c4630; --raised2: #23553b;
  --line: #7a4d22; --line2: #b57a3e; --wood: #8f5a2b; --wood2: #c98b4b; --wood-dark: #5c3816;
  --text: #f7f2e1; --muted: #b8cbb5; --muted2: #8fa88f;
  --green: #8be04a; --green2: #5ec73a; --green3: #b9f27a; --green-deep: #2e8b3a; --leaf: #4caf50;
  --amber: #f5a623; --amber2: #ffd23f; --red: #ff6b4a; --blue: #6cc4f0; --violet: #c4b5fd;
  --r-lg: 24px; --r: 18px; --r-sm: 13px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .38); --shadow-sm: 0 6px 16px rgba(0, 0, 0, .28);
}
body { font-family: var(--font); background: #123f24; }
body::before { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237fe3ff'/%3E%3Cstop offset='.45' stop-color='%23aef0d0'/%3E%3Cstop offset='1' stop-color='%23d8f5a8'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.8' cy='.16' r='.34'%3E%3Cstop offset='0' stop-color='%23fff6c0'/%3E%3Cstop offset='.5' stop-color='%23ffe27a' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffe27a' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='m1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bfe08a'/%3E%3Cstop offset='1' stop-color='%238fc85e'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2364c04a'/%3E%3Cstop offset='1' stop-color='%23349a3e'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234aa83c'/%3E%3Cstop offset='1' stop-color='%23207a34'/%3E%3C/linearGradient%3E%3ClinearGradient id='leaf' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238bd25a'/%3E%3Cstop offset='1' stop-color='%23328a3e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23sky)'/%3E%3Crect width='1600' height='900' fill='url(%23sun)'/%3E%3Ccircle cx='1280' cy='150' r='70' fill='%23fff4b0' opacity='.9'/%3E%3Cg fill='%23ffffff' opacity='.9'%3E%3Cellipse cx='300' cy='170' rx='70' ry='30'/%3E%3Cellipse cx='360' cy='150' rx='55' ry='26'/%3E%3Cellipse cx='250' cy='150' rx='45' ry='22'/%3E%3Cellipse cx='980' cy='110' rx='60' ry='26'/%3E%3Cellipse cx='1030' cy='95' rx='45' ry='20'/%3E%3C/g%3E%3Cpath d='M0 560 Q260 470 540 540 T1080 520 T1600 500 L1600 900 L0 900Z' fill='url(%23m1)'/%3E%3Cpath d='M0 660 Q300 570 620 650 T1180 640 T1600 620 L1600 900 L0 900Z' fill='url(%23g1)'/%3E%3Cpath d='M0 760 Q320 690 660 760 T1300 750 T1600 740 L1600 900 L0 900Z' fill='url(%23g2)'/%3E%3Cg transform='translate(1120 470)' fill='%235aa860' opacity='.6'%3E%3Cpath d='M0 120 q10 -70 60 -80 q40 -6 55 20 q10 20 -6 34 q30 -46 70 -50 q40 -2 44 30 q3 26 -30 40 l14 6 q40 60 92 66 l0 14 l-150 0 q-6 -30 -34 -30 q-28 0 -34 30 l-70 0 q-10 -80 -6 -120Z'/%3E%3Ccircle cx='176' cy='16' r='4' fill='%23223'/%3E%3C/g%3E%3Cg transform='translate(120 560)'%3E%3Cpath d='M0 210 q-14 -110 44 -150 q-10 -30 6 -50 q22 -22 44 -4 q10 -40 52 -44 q56 -6 74 40 q14 36 -10 66 q34 6 40 46 q6 44 -34 70 l30 10 q26 36 4 66 l-60 0 q-10 -34 -40 -34 q-30 0 -38 34 l-62 0 q-8 -40 6 -70 q-40 -6 -60 -30 q-20 -24 -6 -46Z' fill='%23f2a93a'/%3E%3Cpath d='M150 40 q30 -10 44 10 q-6 20 -30 18 q-16 -2 -14 -28Z' fill='%23e69528'/%3E%3Ccircle cx='196' cy='36' r='9' fill='%23fff'/%3E%3Ccircle cx='198' cy='37' r='4.5' fill='%23222'/%3E%3Cpath d='M150 64 l42 6 l-40 9Z' fill='%23fff'/%3E%3Cpath d='M62 150 q30 20 70 16' stroke='%23c47e1e' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='url(%23leaf)'%3E%3Cpath d='M-40 900 C50 690 140 630 300 600 C240 700 220 800 210 900Z'/%3E%3Cpath d='M70 900 C200 710 330 680 520 690 C400 760 330 840 300 900Z' opacity='.9'/%3E%3C/g%3E%3Cg fill='url(%23leaf)'%3E%3Cpath d='M1640 900 C1550 690 1460 630 1300 600 C1360 700 1380 800 1390 900Z'/%3E%3Cpath d='M1530 900 C1400 710 1270 680 1080 690 C1200 760 1270 840 1300 900Z' opacity='.9'/%3E%3C/g%3E%3Cg fill='%23ffd23f'%3E%3Ccircle cx='470' cy='230' r='5'/%3E%3Ccircle cx='620' cy='300' r='4'/%3E%3Ccircle cx='900' cy='250' r='5'/%3E%3Ccircle cx='1050' cy='320' r='4'/%3E%3C/g%3E%3C/svg%3E") center top/cover no-repeat fixed, linear-gradient(180deg,#aef0d0,#d8f5a8); }
main::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,36,22,.04) 0%, rgba(11,36,22,.28) 42%, rgba(11,36,22,.58) 100%); }

/* top bar */
.topbar { background: rgba(11, 36, 22, .86); border-bottom: 2px solid var(--wood); }
.brand { font-size: 19px; font-weight: 800; color: var(--amber2); }
.brand img { border-radius: 14px; border: 2px solid var(--wood2); }
.nav { gap: 4px; flex-wrap: nowrap; padding: 4px 0; }
.nav a, .brand, .userchip, .topbar .pill { white-space: nowrap; }   /* 0.9.67: pill trong the duoc xuong dong khi hep */
@media (max-width: 1240px) { .nav a { padding: 7px 10px; font-size: 13.5px; } }
.nav a { padding: 7px 14px; border: 2px solid transparent; color: var(--muted); font-weight: 700; font-size: 14.5px; }
.nav a:hover { color: var(--text); background: var(--raised); border-color: var(--wood); }
.nav a.active { color: #1a1200; background: linear-gradient(180deg, var(--amber2), var(--amber)); border-color: #c98b1f; box-shadow: 0 3px 0 #a86f12; }
.pill, .lang, .userchip { border: 2px solid var(--wood); background: var(--surface); font-weight: 700; }
.pill.on { color: var(--green3); border-color: var(--green-deep); }
.pill.off { color: var(--red); border-color: #8a3b2a; }
.pill.on .dot { box-shadow: 0 0 0 4px rgba(139, 224, 74, .2); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(139, 224, 74, .22); } 50% { box-shadow: 0 0 0 7px rgba(139, 224, 74, .06); } }
.lang:hover, .userchip:hover { border-color: var(--wood2); color: var(--text); }
.avatar { border-color: var(--wood2); }

/* buttons: map, tron, co "de" 3D */
.btn { border: 2px solid var(--wood); background: var(--raised); color: var(--text); font-weight: 800; padding: 10px 20px; box-shadow: 0 4px 0 var(--wood-dark); transition: transform .08s, box-shadow .08s, filter .15s; letter-spacing: .01em; }
.btn:hover { border-color: var(--wood2); transform: translateY(-1px); box-shadow: 0 5px 0 var(--wood-dark); filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }
.btn:disabled { box-shadow: none; transform: none; }
.btn.pri { background: linear-gradient(180deg, #a6ec5c, #5ec73a 60%, #46a92e); border-color: #2f7a24; color: #0b2a10; box-shadow: 0 4px 0 #1f5d1a; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn.pri:hover { box-shadow: 0 5px 0 #1f5d1a; border-color: #3a9330; }
.btn.pri:active { box-shadow: 0 1px 0 #1f5d1a; }
.btn.amber { background: linear-gradient(180deg, #ffe07a, #ffd23f 60%, #f5a623); border-color: #b8791a; color: #2b1a00; box-shadow: 0 4px 0 #8d5c10; }
.btn.amber:active { box-shadow: 0 1px 0 #8d5c10; }
.btn.danger { background: linear-gradient(180deg, #ff8f6b, #ff6b4a 60%, #e04f2e); border-color: #9e3a23; color: #2a0c04; box-shadow: 0 4px 0 #7a2a17; }
.btn.danger:active { box-shadow: 0 1px 0 #7a2a17; }
.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: 0 3px 0 var(--wood-dark); }
.btn.sm.pri { box-shadow: 0 3px 0 #1f5d1a; } .btn.sm.danger { box-shadow: 0 3px 0 #7a2a17; } .btn.sm.amber { box-shadow: 0 3px 0 #8d5c10; }
.btn.xs { padding: 3px 9px; font-size: 12px; box-shadow: 0 2px 0 var(--wood-dark); }

/* cards: vien go, goc tron, vach sang tren */
.card { background: linear-gradient(180deg, var(--surface), var(--bg2)); border: 2px solid var(--wood); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .06); }
.card h2 { font-size: 22px; font-weight: 800; color: var(--green3); }
.card h3, .eyebrow { color: var(--amber2); letter-spacing: .1em; }
.card h4 { font-family: var(--display); color: var(--green3); font-size: 16px; }
.sub { color: var(--muted); }

/* hero: chu to tron, ten site vang-xanh nhu logo */
.hero { border: 2px solid var(--wood); box-shadow: var(--shadow); }
.hero::before { background: linear-gradient(90deg, rgba(8, 28, 16, .96) 0%, rgba(8, 28, 16, .84) 45%, rgba(8, 28, 16, .40) 100%), linear-gradient(0deg, rgba(8, 28, 16, .9), transparent 55%); }
.hero h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; line-height: 1.05; }
.hero h1 em { background: linear-gradient(180deg, #fff3a3 0%, #ffd23f 45%, #8be04a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(20, 60, 20, .9)) drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.hero p { color: #dbe8d6; }
.eyebrow { color: var(--green3); }
.servercard { background: rgba(14, 40, 24, .88); border: 2px solid var(--wood); }
.servercard .ip { background: #0a1f13; border: 2px solid var(--wood); }
.servercard .ip code { color: var(--amber2); }

/* stat / earn / items */
.stat, .earn .e, .item, .kv .k, .legend div, .podium .p { background: var(--surface); border: 2px solid var(--wood); }
.hero .feat { background: rgba(14, 40, 24, .88); border: 2px solid var(--wood); } .hero a.feat:hover { border-color: var(--amber2); } .hero .feat .ic { background: var(--raised); border: 2px solid var(--wood-dark); border-radius: 12px; } .hero .feat b { color: var(--green3); }
.stat .ic, .item .ic, .shopcard .ic { background: var(--raised); border: 2px solid var(--wood-dark); border-radius: 14px; }
.stat b { color: var(--amber2); font-size: 24px; }
.podium .p.first { border-color: #c98b1f; background: linear-gradient(180deg, rgba(255, 210, 63, .14), var(--surface)); }
.rank { border-radius: 10px; border: 2px solid var(--wood-dark); }
.rank.r1 { background: linear-gradient(135deg, #ffe07a, #f5a623); border-color: #b8791a; }

/* tables */
th { color: var(--amber2); border-bottom: 2px solid var(--wood); }
th, td { border-bottom-color: rgba(143, 90, 43, .35); }
tbody tr:hover td { background: rgba(139, 224, 74, .05); }
tr.sel td { background: rgba(255, 210, 63, .08); }

/* inputs, badges, tabs, slots: vien tung o muc */
input, select, textarea { background: #0a1f13; border: 2px solid var(--wood); border-radius: var(--r-sm); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(139, 224, 74, .18); }
.field label { color: var(--amber2); font-weight: 700; }
.badge { border: 2px solid var(--wood); background: var(--surface); color: var(--muted); font-weight: 700; }
.badge.ok { color: var(--green3); border-color: var(--green-deep); } .badge.warn { color: var(--amber2); border-color: #a86f12; } .badge.bad { color: var(--red); border-color: #8a3b2a; }
.tabs a, .tabs button { border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.2; border: 2px solid var(--wood); background: var(--surface); color: var(--muted); font-weight: 800; padding: 8px 16px; box-shadow: 0 3px 0 var(--wood-dark); }
.tabs a.active, .tabs button.active { background: linear-gradient(180deg, var(--amber2), var(--amber)); color: #1a1200; border-color: #c98b1f; box-shadow: 0 3px 0 #a86f12; }
.slot, .shopcard, .sw, .gview, .skin-viewport { border: 2px solid var(--wood); background: var(--surface); }
.slot .sp, .shopcard .nm { color: var(--green3); font-weight: 800; }
.slot.empty { border: 2px solid rgba(255, 210, 63, .55); background: rgba(255, 210, 63, .03); }
.slot.empty:hover { border-color: var(--amber2); }
.slot.empty.buy { border: 2px solid var(--amber2); background: rgba(255, 210, 63, .06); }
.slot.empty.buy .plus { color: var(--amber2); text-shadow: 0 3px 0 #8d5c10; }
.bar { background: #0a1f13; border: 2px solid var(--wood-dark); height: 12px; border-radius: 8px; }
.bar i { background: linear-gradient(90deg, #5ec73a, #b9f27a); }
.bar.amber i { background: linear-gradient(90deg, #f5a623, #ffe07a); }
.bones, .balance-big b { color: var(--amber2); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.empty { border: 2px dashed var(--wood); color: var(--muted); }
.preview-strip { border: 2px solid var(--wood); }
.skin-viewbar select { border-width: 2px; }
.gname .btn.xs { box-shadow: none; }

/* modal + toast */
.modal { border: 2px solid var(--wood2); background: linear-gradient(180deg, var(--surface), var(--bg2)); }
.modal-title { color: var(--green3); font-size: 20px; }
.toast { border: 2px solid var(--wood2); background: var(--raised2); font-weight: 700; }
.toast.err { background: #4a1f14; border-color: #9e3a23; }

/* mobile nav / footer */
.mobile-nav { background: rgba(11, 36, 22, .96); border-top: 2px solid var(--wood); }
.mobile-nav a.active { color: var(--amber2); }
footer { border-top: 2px solid var(--wood); }
.announce { border-left: 6px solid var(--amber2); }

/* ===== cute: linh vat + phu kien ===== */
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.card h2::before { content: "\1F33F"; margin-right: 8px; }
.identity .name::after, .servercard .name::before { content: "\1F995"; margin: 0 6px; font-size: .8em; }
.rank.r1::after { content: "\1F451"; margin-left: 4px; }
.card { position: relative; }
.stat, .slot, .shopcard { transition: transform .12s; } .stat:hover, .slot:hover, .shopcard:hover { transform: translateY(-2px); }
.brand::after { content: "\1F334"; margin-left: 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: 2px; 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: 18px; padding: 16px 14px 14px; box-shadow: 0 4px 0 var(--wood-dark); }
.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: 3px solid #e0a52a; background: linear-gradient(180deg, rgba(255, 210, 63, .24), var(--surface) 70%); box-shadow: 0 7px 0 #a8731a, 0 0 0 5px rgba(255, 210, 63, .16); }
.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: 4px; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 210, 63, .25); }
.podium .p b { font-family: var(--display); font-size: 15px; }
.podium .p.first b { font-size: 19px; color: var(--amber2); }
.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: #4ade80; color: #06180d; border-color: #1f8a45; padding: 1px 8px; font-size: 11px; margin-left: 4px; vertical-align: middle; }

/* ===== cong tac gat thay cho o tick (xanh = bat, do = tat) ===== */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 60px; height: 32px; padding: 0; margin: 0; border-radius: 999px; border: 2px solid var(--wood-dark); background: linear-gradient(180deg, #ef5a4c, #c8382c); position: relative; cursor: pointer; flex: none; vertical-align: middle; transition: background .2s; box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 2px 0 var(--wood-dark); }
input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.45); transition: left .2s; }
input[type="checkbox"]:checked { background: linear-gradient(180deg, #5fd35a, #2f9e3a); }
input[type="checkbox"]:checked::before { left: 30px; }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 224, 74, .35), 0 2px 0 var(--wood-dark); }
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(--display); font-size: 15px; font-weight: 800; color: var(--text); cursor: pointer; margin: 0; }
label.row .hint { font-family: var(--font); font-weight: 500; font-size: 12.5px; color: var(--muted); }