/* ===== Thành phần chung của các menu ===== */
.grp { font-size: 14.5px; color: var(--brown); margin: 6px 2px 2px; display: flex; align-items: center; gap: 6px; }
.note { background: #fff3d9; border-radius: 12px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--brown); line-height: 1.35; }
.subh { font-size: 17px; color: var(--brown); margin: 4px 2px 0; }
.legend { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding: 8px 0 4px; }
.emptybox { background: var(--card2); border: 2px dashed var(--line); border-radius: 16px; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; font-size: 30px; } .emptybox b { font-size: 15px; } .emptybox p { font-size: 12.5px; color: var(--muted); }
.krow, .grow-row, .nrow, .erow { display: flex; align-items: center; gap: 10px; background: var(--card2); border-radius: 14px; padding: 8px 10px; box-shadow: var(--sh-sm); border: 1.5px solid var(--line); }
.k-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: #f3e7d6; } .k-ico.big { width: 48px; height: 48px; font-size: 28px; }
.k-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .k-main b { font-size: 16px; line-height: 1.1; } .k-main small { font-size: 12px; color: var(--muted); font-weight: 600; }
.k-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .life { background: #eee3d3; border-radius: 99px; padding: 0 8px; font-size: 11px; font-weight: 800; color: #7a5b48; }
.sale { display: inline-block; align-self: flex-start; background: #e9f8ee; border: 1.5px solid #8fd1a1; border-radius: 99px; padding: 0 8px; font-size: 11px; font-weight: 800; color: #2d6e45; }
.plan { color: var(--pink) !important; font-weight: 800 !important; } .warn { color: var(--red); font-style: normal; font-weight: 800; } .red { color: var(--red) !important; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; } .stepper button { width: 36px; height: 36px; border-radius: 10px; background: #f6ecdb; font-size: 20px; font-weight: 800; box-shadow: var(--sh-sm); border: 1.5px solid #e6d3b8; } .stepper button:active { transform: scale(.9); }
.stepper .num { min-width: 52px; text-align: center; background: var(--card2); border: 2px solid var(--line); border-radius: 10px; padding: 4px 0; font-weight: 800; font-size: 17px; }
.pinput { display: flex; align-items: center; gap: 4px; flex: none; } .pinput input { width: 76px; text-align: center; padding: 8px 4px; font-weight: 800; font-size: 18px; border: 2px solid #e6d3b8; border-radius: 12px; background: var(--card); outline: none; } .pinput input:focus { border-color: var(--pink); } .pinput span { font-weight: 800; }
.warnbox { background: #fff3d9; border: 2px solid #f6c84e; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.35; } .warnbox p { margin: 3px 0; } .warnbox .tip { color: #b8631a; font-weight: 700; }
.lockbox { background: var(--card2); border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; font-size: 26px; font-weight: 700; color: var(--muted); }
.catcard { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; background: #fff3d1; border: 2.5px solid #f6c84e; border-radius: 14px; padding: 12px; } .catcard.col { flex-direction: column; background: var(--card2); border-color: var(--line); }
.catcard h4 { font-size: 18px; margin: 3px 0; } .catcard p { font-size: 12.5px; color: var(--brown); } .catcard .eff b { color: #2f9a52; } .catcard > div:first-child b:first-child { font-size: 12px; color: #b8631a; }
.nrow .btn { flex: none; min-width: 94px; } .app-dot { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; }
.erow { align-items: flex-start; } .tier { background: #dbeaff; color: #1f5fb5; border-radius: 8px; padding: 0 8px; font-size: 12px; font-weight: 800; } .pips { display: flex; gap: 4px; margin: 3px 0; } .pips i { width: 26px; height: 6px; border-radius: 4px; background: #e6d9c7; } .pips i.on { background: var(--green); }
.gate { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700; }

/* ===== Nhân sự ===== */
.kpi { background: linear-gradient(#e8f3ff, #f2f9ff); border: 2px solid #9cc7f5; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .kpi-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; } .kpi p { font-size: 13px; }
.staffcard { background: var(--card2); border-radius: 16px; padding: 10px; box-shadow: var(--sh-sm); border: 1.5px solid var(--line); } .staffcard.hired { border-color: #8fd1a1; background: #f4fbf6; }
.sc-top { display: flex; gap: 10px; align-items: center; } .sc-av { width: 52px; height: 52px; border-radius: 50%; background: #ffe9d6; display: grid; place-items: center; font-size: 30px; border: 2px solid #f6c8a8; flex: none; } .sc-top b { font-size: 16px; } .sc-top small { color: var(--muted); display: block; }
.sc-st { font-size: 12px; font-weight: 800; } .sc-w { font-size: 12.5px; color: #1f7ab5; font-weight: 700; } .sc-d { font-size: 12.5px; background: #f6f0e6; border-radius: 10px; padding: 8px 10px; margin-top: 8px; line-height: 1.4; color: var(--brown); }
.why { background: #eee; border-radius: 10px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: #777; max-width: 36%; text-align: center; }

/* ===== Thuế & Bank ===== */
.taxcard { background: #fff3d9; border: 2px solid #f6c84e; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .taxcard h4 { font-size: 15px; }
.ok-box, .warn-box { border-radius: 12px; padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; } .ok-box { background: #fffbe6; border: 2px solid #f0c455; } .warn-box { background: var(--card2); border: 2px dashed #e6d3b8; } .ok-box b[data-cd] { font-size: 16px; color: #b7791f; }
.tax-sel { background: var(--card2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .rate-row { display: flex; justify-content: space-between; font-weight: 700; } .tax-sel input[type=range] { accent-color: var(--pink); width: 100%; height: 28px; }
.rate-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .rb2 { border: 2px solid #e6d3b8; border-radius: 10px; padding: 6px 2px; font-weight: 800; background: var(--card2); font-size: 13px; line-height: 1.1; } .rb2 small { display: block; font-size: 9px; color: var(--muted); } .rb2.on { background: var(--pink); color: #fff; border-color: var(--pink); } .rb2.on small { color: #fff; }
.tax-amt { background: var(--pink-soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; text-align: center; }
.bank { background: linear-gradient(#1e5a3c, #14402b); color: #fff; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .bank-h small { font-size: 11px; opacity: .85; } .bank-h h4 { font-size: 18px; margin: 2px 0 6px; }
.bank-st { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bank-st > div { background: rgba(255,255,255,.12); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; font-size: 12px; } .bank-st b { font-size: 20px; } .bank-st em { font-style: normal; font-size: 10.5px; opacity: .8; }
.bank-lock { background: rgba(255,240,180,.18); border: 1.5px solid rgba(255,230,150,.5); border-radius: 10px; padding: 8px; font-size: 12.5px; } .bank-note { font-size: 12.5px; } .dep-btns { display: flex; gap: 6px; } .dep-btns .btn { flex: 1; }
.policy { background: var(--card2); border-radius: 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; box-shadow: var(--sh-sm); } .policy p { margin: 3px 0; }
.receipt { text-align: center; } .r-ico { font-size: 48px; } .receipt h3 { color: #2a7d52; font-size: 20px; margin: 6px 0; } .r-box { background: #effaf2; border: 2px solid #8fd1a1; border-radius: 14px; padding: 12px; text-align: left; font-size: 13.5px; } .r-box p { margin: 4px 0; }

/* ===== Chi nhánh ===== */
.brh, .frcard, .stcard { background: var(--card2); border-radius: 16px; padding: 12px; box-shadow: var(--sh-sm); border: 1.5px solid var(--line); } .brh h4, .frcard h4 { font-size: 16px; margin-bottom: 4px; } .brh p, .frcard p { font-size: 13px; }
.brcard { background: var(--card2); border-radius: 16px; padding: 12px; box-shadow: var(--sh-sm); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .brcard.open { border-color: #8fd1a1; }
.br-top { display: flex; gap: 10px; align-items: flex-start; } .br-ic { font-size: 34px; } .br-top b { font-size: 16px; display: block; } .br-top small { font-size: 12px; color: var(--muted); line-height: 1.3; display: block; }
.br-st { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; } .row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.frreq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .frbox { background: #f6f6fa; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .frbox b { font-size: 14px; }
.tipbox { background: #fff7e0; border: 2px dashed #f0c455; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.4; } .tipbox p { margin: 3px 0; }
.stcard small { font-size: 11px; font-weight: 800; color: #3a7fd4; } .stcard h4 { font-size: 20px; margin: 4px 0; } .sbar { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; margin-top: 6px; }

/* ===== MXH ===== */
.profile { background: var(--card2); border-radius: 16px; padding: 12px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 10px; } .pf-h { display: flex; gap: 10px; align-items: center; } .pf-h h4 { font-size: 18px; } .pf-h small { font-size: 12px; font-weight: 700; } .green { color: #2f9a52; } .grayish { color: #8a98a8; background: #eef2f6; border-radius: 99px; padding: 1px 8px; }
.pf-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pf-s > div { background: #f2f7ff; border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; } .pf-s b { font-size: 20px; color: #2a79d6; } .pf-s small { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.adbox, .vidbox { background: var(--card2); border-radius: 16px; padding: 12px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 8px; } .adbox h4, .vidbox h4 { font-size: 15px; } .adbox .sub { font-size: 12.5px; font-weight: 700; color: #3a5a8a; }
.adcard { background: #fff7ec; border: 2px solid #f1dfc7; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .adcard.run { border-color: #3da35f; background: #effaf2; } .ad-t { display: flex; gap: 8px; align-items: center; font-size: 15px; } .ad-t span { font-size: 22px; } .adcard p { font-size: 12.5px; color: var(--brown); line-height: 1.4; } .ad-f { display: flex; justify-content: space-between; align-items: center; }
.feedh { font-size: 14.5px; margin-top: 6px; } .feedh small { font-size: 11px; color: var(--muted); font-weight: 600; }
.post { background: var(--card2); border: 2px solid #f4dcc0; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sh-sm); } .p-h { display: flex; gap: 8px; align-items: center; } .p-av { font-size: 30px; } .p-h b { font-size: 15px; } .p-h small { display: block; font-size: 11px; color: var(--muted); } .p-tag { background: #111; color: #fff; border-radius: 99px; padding: 3px 12px; font-size: 12px; font-weight: 800; }
.p-pov { background: #fff1e0; border-left: 4px solid var(--orange); border-radius: 8px; padding: 8px 10px; font-weight: 800; font-size: 14px; } .pov { background: var(--orange); color: #fff; border-radius: 6px; padding: 0 6px; font-size: 11px; margin-right: 4px; }
.p-d { font-size: 13px; line-height: 1.4; } .who { display: inline-block; border-radius: 6px; padding: 0 6px; font-weight: 800; margin-right: 4px; font-size: 12px; } .who.u { background: #e3f7e9; color: #2f9a52; } .who.o { background: #fff0cf; color: #b8631a; }
.p-snd { background: #f1f1f6; border-radius: 99px; padding: 4px 12px; font-size: 12px; font-weight: 700; align-self: flex-start; } .p-tags { display: flex; flex-wrap: wrap; gap: 4px; } .p-tags span { background: #e3f0ff; color: #2a79d6; border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 700; } .p-f { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; } .p-own { background: #f6f0e6; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }

/* ===== Vườn / Thú cưng / Khởi nghiệp ===== */
.farm-h { background: #effaf2; border: 2px solid #8fd1a1; border-radius: 16px; padding: 12px; } .farm-h h4 { color: #25693c; font-size: 17px; margin-bottom: 4px; } .farm-h p { font-size: 13px; line-height: 1.4; }
.plots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: linear-gradient(#a8d58f, #8bbf74); border: 4px solid #8b5a3c; border-radius: 16px; padding: 10px; }
.plot { aspect-ratio: 1; border-radius: 12px; background: #7a5233; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; box-shadow: inset 0 3px 6px rgba(0,0,0,.35); border: 2px solid #5e3d24; color: #fff; } .plot span { font-size: 28px; line-height: 1; } .plot small { font-size: 10.5px; background: rgba(0,0,0,.35); border-radius: 99px; padding: 0 6px; }
.plot.locked { background: #9d8f80; border-color: #7b6f63; } .plot.grow { background: #5f8a43; } .plot.ready { background: #e7b84a; animation: floaty 1.4s ease-in-out infinite; } .plot.ready small { background: rgba(255,255,255,.7); color: #5c3d08; }
.farm-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .farm-btns .btn { flex-direction: column; min-height: 58px; padding: 6px 2px; font-size: 13px; } .farm-btns small { font-size: 10px; font-weight: 700; opacity: .9; }
.seedbox { background: var(--card2); border-radius: 14px; padding: 10px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 6px; } .seeds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .seed { display: flex; align-items: center; gap: 6px; border: 2px solid #eee0cc; border-radius: 12px; padding: 6px 8px; font-size: 12px; text-align: left; line-height: 1.15; } .seed span { font-size: 22px; } .seed b { flex: 1; } .seed em { font-style: normal; font-weight: 800; color: #2f9a52; font-size: 15px; } .seed.on { border-color: var(--pink); background: var(--pink-soft); }
.petrow { display: flex; gap: 6px; flex-wrap: wrap; } .petchip { padding: 6px 12px; border-radius: 99px; background: var(--card2); border: 2px solid #f0e0cc; font-weight: 800; font-size: 12.5px; } .petchip.on { background: var(--yellow); border-color: #e0a526; } .petchip em { font-style: normal; font-weight: 600; font-size: 10px; }
.petrow.pet-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 5px; touch-action: pan-x; }
.pet-tabs .petchip { flex: 0 0 auto; white-space: nowrap; }
.stock-lots { font-size: 11px; color: var(--muted); margin-top: 3px; }
.stock-lots summary { cursor: pointer; }
.k-main .supply-help { color: var(--brown); line-height: 1.35; margin-top: 3px; }
.petcard { background: var(--card2); border: 2.5px solid #f4c9a0; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: center; box-shadow: var(--sh-sm); } .petcard.cap { border-color: #8fd1a1; background: #f2fbf4; } .pet-big { font-size: 76px; line-height: 1; } .petcard h4 { color: #b8501f; font-size: 17px; } .petcard p { font-size: 13px; line-height: 1.4; }
.buffs { background: #fff8f0; border: 2px solid #f4c9a0; border-radius: 14px; padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; } .buffs p { font-size: 12.5px; } .buffs h5 { font-size: 14px; color: #b8501f; }
.adopt { background: #fff3d1; border-radius: 12px; padding: 8px; font-size: 13px; } .cond { background: var(--card2); border: 2px solid #f0e0cc; border-radius: 14px; padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; } .cond small { font-size: 12px; color: var(--muted); }
.pstats { display: flex; flex-direction: column; gap: 6px; } .ps { display: grid; grid-template-columns: 88px 1fr 30px; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; text-align: left; } .pcare { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pcare .btn { flex-direction: column; font-size: 12px; min-height: 64px; padding: 6px 2px; } .pcare small { font-size: 10px; color: var(--muted); }
.cur-loc { background: linear-gradient(#3d3d4a, #2a2a35); color: #fff; border: 3px solid #f0b43a; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 6px; } .cur-loc h4 { font-size: 22px; } .cur-loc i { color: #ffd77a; font-weight: 700; } .cur-loc p { font-size: 13px; opacity: .92; }
.vmap { position: relative; width: 100%; aspect-ratio: 1 / 1.1; background: radial-gradient(#fff4dc, #f0dcb4); border: 4px solid #f0b43a; border-radius: 18px; overflow: hidden; }
.vmap svg { position: absolute; inset: 0; width: 100%; height: 100%; } .vmap .land { fill: #e8cf9c; stroke: #b8935c; stroke-width: .6; } .vmap .isl { fill: #c9a96a; }
.pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 2; } .pin span { width: 34px; height: 34px; border-radius: 50%; background: var(--card2); border: 3px solid #f0a31f; display: grid; place-items: center; font-size: 17px; box-shadow: var(--sh-sm); } .pin small { background: rgba(255,255,255,.92); border-radius: 6px; padding: 0 5px; font-size: 9.5px; font-weight: 800; margin-top: 1px; white-space: nowrap; } .pin.on span { background: #3da35f; border-color: #1f7a40; } .pin:active span { transform: scale(.9); }
.loccard { background: var(--card2); border-radius: 18px; overflow: hidden; border: 2px solid #f0dfc7; box-shadow: var(--sh-sm); } .loccard.here { border-color: #3da35f; } .loccard.flash { animation: flashB 1.2s ease; } @keyframes flashB { 0%, 100% { box-shadow: var(--sh-sm) } 50% { box-shadow: 0 0 0 5px var(--pink) } }
.loc-img { height: 110px; position: relative; background: linear-gradient(135deg, #4a4a58, #7a5f4a); display: flex; align-items: flex-end; padding: 10px; color: #fff; } .loc-img h4 { font-size: 24px; text-shadow: 0 2px 4px rgba(0,0,0,.5); } .loc-tag { position: absolute; left: 10px; top: 10px; background: rgba(20,20,40,.75); border-radius: 99px; padding: 3px 12px; font-size: 12px; font-weight: 800; }
.loc-img.hanoi { background: linear-gradient(135deg, #5a3a2a, #a77a3a); } .loc-img.hcm { background: linear-gradient(135deg, #25405a, #5a85ad); } .loc-img.hue { background: linear-gradient(135deg, #5a2a4a, #a76a8a); } .loc-img.danang { background: linear-gradient(135deg, #1f5a6a, #4aa8b8); } .loc-img.sapa { background: linear-gradient(135deg, #3a5a3a, #8ab87a); } .loc-img.halong { background: linear-gradient(135deg, #1f4a7a, #4a8ac8); } .loc-img.bmt { background: linear-gradient(135deg, #6a3a1f, #b87a3a); } .loc-img.canTho { background: linear-gradient(135deg, #2a6a3a, #7ac88a); } .loc-img.caMau { background: linear-gradient(135deg, #3a5a4a, #6aa88a); } .loc-img.hoangSa { background: linear-gradient(135deg, #1a4a6a, #5ab0d8); }
.loc-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; } .slogan { color: #c06a10; font-weight: 700; } .loc-body > p { font-size: 13px; color: var(--brown); line-height: 1.4; }
.pro, .con { border-radius: 12px; padding: 8px 10px; font-size: 13px; } .pro { background: #effaf2; border: 1.5px solid #8fd1a1; color: #1f5a34; } .con { background: #fff0f0; border: 1.5px solid #f4a0a0; color: #8a2a2a; } .pro p, .con p { margin: 2px 0; }

/* ===== Đánh giá / Tổng kết / Bạn bè / Sưu tầm / Mini game ===== */
.rvhead { display: flex; align-items: center; gap: 14px; background: var(--card2); border-radius: 16px; padding: 12px; box-shadow: var(--sh-sm); } .big-r { font-size: 44px; font-weight: 800; color: #b7791f; line-height: 1; } .big-r small { font-size: 16px; color: var(--muted); } .stars.lg { font-size: 22px; }
.dist { background: var(--card2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--sh-sm); } .dr { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700; }
.review { display: flex; gap: 10px; background: var(--card2); border-radius: 14px; padding: 10px; box-shadow: var(--sh-sm); } .r-av { font-size: 30px; } .r-h { display: flex; justify-content: space-between; align-items: center; } .review p { font-size: 13px; margin: 2px 0; } .review small { color: var(--muted); font-size: 11px; }
.navr { display: flex; align-items: center; justify-content: space-between; background: var(--card2); border-radius: 14px; padding: 6px 10px; box-shadow: var(--sh-sm); font-size: 16px; } .evline { background: #fff3d1; border-radius: 12px; padding: 8px 12px; font-size: 13.5px; }
.codecard { background: linear-gradient(var(--pink-soft), #fff); border: 2px solid var(--pink-soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .codecard b { font-size: 26px; color: var(--pink); letter-spacing: 2px; }
.addf { display: flex; gap: 6px; } .addf input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--pink-soft); background: var(--card2); outline: none; font-weight: 700; }
.frow { display: flex; align-items: center; gap: 10px; background: var(--card2); border-radius: 14px; padding: 8px 10px; box-shadow: var(--sh-sm); } .frow small { display: block; color: var(--muted); }
.colhead { background: var(--card2); border-radius: 16px; padding: 12px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 8px; } .colhead h4 { font-size: 16px; } .colhead p { font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gcard { background: var(--card2); border-radius: 12px; padding: 8px 4px; text-align: center; box-shadow: var(--sh-sm); border: 2px solid #e8e0d2; display: flex; flex-direction: column; gap: 1px; } .gcard span { font-size: 26px; } .gcard b { font-size: 11.5px; line-height: 1.15; } .gcard small { font-size: 10px; font-weight: 800; }
.gcard.rC { border-color: #d9d2c5; } .gcard.rU { border-color: #92cf9d; } .gcard.rR { border-color: #84b6f2; } .gcard.rE { border-color: #c293ee; } .gcard.rL { border-color: #f2bd45; box-shadow: 0 0 10px rgba(242, 189, 69, .6); } .gcard.unk { opacity: .55; filter: grayscale(.6); } .gcard.flip { animation: flip .5s ease both; } @keyframes flip { from { transform: rotateY(90deg) scale(.7); opacity: 0 } to { transform: none; opacity: 1 } }
.secrets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .secret { background: var(--card2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; box-shadow: var(--sh-sm); border: 2px dashed #ddd; } .secret.got { border: 2px solid #f2bd45; background: #fff8e1; } .secret span { font-size: 28px; } .secret b { font-size: 12.5px; } .secret small { font-size: 10.5px; color: var(--muted); } .secret.big { flex-direction: row; gap: 10px; text-align: left; }
.mgcard { background: var(--card2); border-radius: 18px; padding: 14px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 8px; border: 2px solid #f4dcc0; } .mgcard h4 { font-size: 18px; color: #c0307a; } .mgcard p { font-size: 13px; line-height: 1.4; } .crushc { border-color: #f5a8d0; background: linear-gradient(#fff5fa, #fff); }
.mg-info { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6px; } .mg-info > div { background: #faf3ff; border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; } .mg-info small { font-size: 10.5px; color: var(--muted); font-weight: 800; } .mg-info b { font-size: 16px; color: #7b4bf0; }
.rules { background: #f6f0ff; border-radius: 14px; padding: 10px; font-size: 12.5px; } .rules p { margin: 3px 0; }
.on-row { display: flex; align-items: center; gap: 10px; background: var(--card2); border-radius: 12px; padding: 8px; box-shadow: var(--sh-sm); } .on-app { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; } .on-row small { display: block; color: var(--muted); font-size: 12px; }
.wx-row { display: flex; gap: 12px; align-items: center; background: var(--card2); border-radius: 14px; padding: 8px 12px; box-shadow: var(--sh-sm); } .wx-row .wi { font-size: 32px; } .wx-row b { font-size: 14px; } .wx-row small { display: block; color: var(--muted); font-size: 12px; } .wx-row.ev { background: #fff3d1; }

/* ===== Bản đồ khởi nghiệp có ảnh nền + thẻ địa điểm có cảnh nền (v3.1) ===== */
.vmap { background: #eedfb4; border: 4px solid #e0a02c; box-shadow: inset 0 0 28px rgba(150, 100, 30, .35), var(--sh-sm); }
.vmap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 80, 30, .28) 100%); z-index: 1; }
.vmap .sea { fill: #bfe3e6; }
.vmap .land { fill: none; stroke: #a9803f; stroke-width: .7; stroke-linejoin: round; stroke-dasharray: none; filter: drop-shadow(0 .6px .6px rgba(90, 60, 20, .45)); }
.vmap .prov { fill: none; stroke: #c9a45e; stroke-width: .28; stroke-dasharray: 1 .7; }
.vmap .river { fill: none; stroke: #8fc4d0; stroke-width: .5; stroke-linecap: round; }
.vmap .isl circle { fill: #e6cf98; stroke: #a9803f; stroke-width: .3; }
.vm-d { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; font-size: 18px; opacity: .9; }
.vm-lbl { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; color: #4f8f9a; text-shadow: 0 1px 0 rgba(255,255,255,.7); white-space: nowrap; }
.vm-lbl.dim { color: #a68a55; font-size: 8px; }
.vm-boat { animation: floaty 3.2s ease-in-out infinite; font-size: 18px; }
.vm-legend { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: flex; flex-direction: column; gap: 1px; background: rgba(255, 250, 235, .92); border: 1.5px solid #c9a45e; border-radius: 8px; padding: 3px 7px; font-size: 9.5px; font-weight: 800; color: var(--brown); pointer-events: none; }
.pin { z-index: 2; } .pin small { box-shadow: 0 1px 3px rgba(0,0,0,.2); }

.loc-img { height: 128px; overflow: hidden; align-items: flex-end; }
.loc-img::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, rgba(0, 0, 0, .35)), rgba(255, 255, 255, .14); z-index: 1; }
.loc-img::after { content: ''; position: absolute; right: 14%; top: 14%; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0 35%, rgba(255, 240, 150, .45) 60%, transparent 72%); animation: floaty 5s ease-in-out infinite; }
.loc-scene { position: absolute; inset: 0; z-index: 0; }
.loc-scene span { position: absolute; transform: translateX(-50%); line-height: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); animation: floaty 4.5s ease-in-out infinite; }
.loc-scene span:nth-child(2n) { animation-delay: -1.6s; } .loc-scene span:nth-child(3n) { animation-delay: -3s; }
.loc-img h4, .loc-img .loc-tag { z-index: 2; }
.loc-img.goc { background: linear-gradient(160deg, #ffd9a8, #e9a96d); }

/* ===== Trân Châu Nổ: viên tròn kiểu topping khay bán hàng + hiệu ứng ===== */
.pboard { overflow: hidden; padding: 4px; border-radius: 14px; background: rgba(255, 240, 230, .5); box-sizing: border-box; }
.pc { background: transparent; box-shadow: none; padding: 0; border: 0; font-size: 0; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.pc:active { transform: scale(.85); }
.pb { display: block; width: 88%; height: 88%; margin: auto; border-radius: 50%; background-color: var(--pc, #2b1d14);
  background-image: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5) 0 9%, transparent 30%);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .28), inset 0 2px 3px rgba(255, 255, 255, .18), 0 2px 3px rgba(0, 0, 0, .22); will-change: transform; }
.pb.sm { display: inline-block; width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: middle; }
.pcombo { display: inline-block; font-weight: 900; color: #e8416a; text-shadow: 0 2px 0 #fff; transform-origin: center; }
.prws { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-weight: 700; } .prw { display: block; }
.pfx-ring { position: fixed; z-index: 9999; width: 40px; height: 40px; border: 3px solid #fff; border-radius: 50%; pointer-events: none; }
.pfx-dot { position: fixed; z-index: 9999; border-radius: 50%; pointer-events: none; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .3); }
.fx-float.big { font-size: 1.5em; }

/* ===== Bản đồ Khởi nghiệp Xuyên Việt v2 (vẽ theo toạ độ thật, viewBox 100x136) ===== */
.vmap { aspect-ratio: 100 / 136; max-width: 420px; margin: 0 auto; background: color-mix(in srgb, var(--blue) 22%, var(--card)); border: 4px solid var(--yellow); border-radius: 18px; box-shadow: inset 0 0 22px rgba(59, 47, 42, .18), var(--sh-sm); }
.vmap::after { background: radial-gradient(ellipse at center, transparent 62%, rgba(59, 47, 42, .16) 100%); }
.vmap svg { font-family: var(--font); }
.vmap .vnb { fill: color-mix(in srgb, var(--brown2) 16%, var(--card)); }
.vmap .vnb2 { fill: color-mix(in srgb, var(--brown2) 16%, var(--card)); stroke: color-mix(in srgb, var(--brown2) 40%, transparent); stroke-width: .3; }
.vmap .vsea { fill: color-mix(in srgb, var(--blue) 24%, var(--card)); }
.vmap .vwv { fill: none; stroke: color-mix(in srgb, var(--blue) 55%, var(--card)); stroke-width: .28; stroke-linecap: round; opacity: .75; }
.vmap .vglow { fill: none; stroke: color-mix(in srgb, var(--blue) 30%, #fff); stroke-width: 2.4; stroke-linejoin: round; opacity: .55; }
.vmap .land { fill: color-mix(in srgb, var(--green-soft) 82%, var(--yellow)); stroke: var(--green); stroke-width: .55; stroke-linejoin: round; filter: none; }
.vmap .land.isl-l { stroke-width: .4; }
.vmap .river { fill: none; stroke: color-mix(in srgb, var(--blue) 80%, #4aa3d8); stroke-width: .38; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.vmap .river.dim { opacity: .45; }
.vmap .mts { fill: color-mix(in srgb, var(--brown2) 35%, var(--card)); stroke: var(--brown2); stroke-width: .25; stroke-linejoin: round; }
.vmap .isl circle { fill: var(--card); stroke: var(--brown2); stroke-width: .3; }
.vmap .vt { text-anchor: middle; dominant-baseline: middle; font-size: 2.5px; font-weight: 800; letter-spacing: .25px; pointer-events: none; }
.vmap .vt.s { font-size: 1.9px; font-weight: 700; letter-spacing: .1px; font-style: italic; }
.vmap .vt.sea { fill: color-mix(in srgb, var(--blue) 75%, var(--card)); }
.vmap .vt.nb { fill: color-mix(in srgb, var(--brown2) 70%, var(--card)); opacity: .75; letter-spacing: .5px; }
.vmap .vt.mt { fill: var(--brown2); }
.vmap .vt.rv { fill: color-mix(in srgb, var(--blue) 90%, #2b7fb8); }
.vmap .cmp-r { fill: color-mix(in srgb, var(--card) 85%, transparent); stroke: var(--brown2); stroke-width: .3; }
.vmap .cmp-n { fill: var(--pink); } .vmap .cmp-e { fill: var(--brown2); opacity: .55; } .vmap .cmp-t { fill: var(--pink); font-size: 2.6px; font-weight: 900; }
.vmap .scl path { fill: none; stroke: var(--brown); stroke-width: .35; } .vmap .scl text { fill: var(--brown); font-style: normal; }
.vmap .vm-legend { right: auto; left: 6px; bottom: 6px; flex-direction: row; flex-wrap: wrap; width: 118px; gap: 2px 10px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1.5px solid var(--brown2); color: var(--brown); line-height: 1.2; }
.vm-legend span { display: flex; align-items: center; gap: 5px; } .vm-legend i { display: inline-block; flex: 0 0 auto; }
.vm-legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--brown2); }
.vm-legend .lg-isl { width: 7px; height: 7px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--brown2); margin: 0 1px; }
.vm-legend .lg-rv { width: 12px; height: 0; border-top: 2px solid color-mix(in srgb, var(--blue) 80%, #4aa3d8); }
.vm-legend .lg-mt { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--brown2); }
/* ghim */
.vmap .pin { z-index: 2; transform: translate(-50%, -50%); width: 22px; height: 22px; padding: 0; display: block; background: none; border: 0; cursor: pointer; }
.vmap .pin span { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--card2); border: 2.5px solid var(--pink); display: grid; place-items: center; font-size: 11px; line-height: 1; box-shadow: 0 1px 4px rgba(59, 47, 42, .35); transition: transform .15s; }
.vmap .pin small { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 5px; border-radius: 6px; font-size: 9.5px; line-height: 15px; font-weight: 800; color: var(--brown); background: color-mix(in srgb, var(--card) 90%, transparent); box-shadow: 0 1px 2px rgba(59, 47, 42, .2); white-space: nowrap; pointer-events: none; }
.vmap .pin-r small { left: calc(100% + 2px); } .vmap .pin-l small { right: calc(100% + 2px); }
.vmap .pin.on { z-index: 4; } .vmap .pin.on span { background: var(--green); border-color: var(--card2); transform: scale(1.18); }
.vmap .pin.on span::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: vmPulse 1.8s ease-out infinite; }
.vmap .pin.on small { background: var(--green); color: #fff; }
.vmap .pin:active span { transform: scale(.9); }
@keyframes vmPulse { 0% { transform: scale(.7); opacity: .85 } 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .vmap .pin.on span::before { animation: none; opacity: .5; } }