*{box-sizing:border-box}body{margin:0;overflow:hidden;font-family:Arial,sans-serif;color:#263e38;background:#bedcce}button{font:inherit;cursor:pointer;border:0}button:focus-visible{outline:3px solid #dbad53;outline-offset:3px}canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}canvas.build{cursor:crosshair}.top{position:absolute;top:22px;left:24px;right:24px;height:74px;display:flex;align-items:center;gap:24px;padding:0 24px;background:#fcfcf6f5;border:1px solid #ffffffc0;border-radius:18px;box-shadow:0 8px 35px #244b4220}.brand{display:flex;gap:12px;align-items:center;min-width:228px}.logo{width:43px;height:43px;border-radius:13px;background:#275749;display:grid;place-items:center;color:#fcf5d9;font-size:27px}.brand b{display:block;font-family:Georgia,serif;font-size:24px;letter-spacing:-.7px}.brand small{font-size:9px;letter-spacing:2.5px;color:#8b978c;display:block;margin-top:5px}.divider{height:32px;width:1px;background:#e2e6dd}.city-title{font-size:14px;font-weight:bold}.city-title small{display:block;font-weight:normal;color:#929b91;font-size:11px;margin-top:7px}.stats{display:flex;gap:32px;margin-left:auto}.stat{display:flex;gap:10px;align-items:center}.stat .symbol{background:#f1edda;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:#b89342}.stat strong{font-size:17px;font-weight:600;display:block}.stat small{font-size:10px;color:#869589;display:block;margin-top:5px}.save{background:#edf0e7;padding:12px 15px;border-radius:10px;color:#38614e;font-size:12px;margin-left:2px}.side{position:absolute;left:24px;top:116px;background:#fcfcf6f2;padding:10px 8px;border-radius:15px;display:flex;flex-direction:column;gap:8px;box-shadow:0 5px 20px #355f4317}.nav{background:transparent;width:58px;height:57px;border-radius:10px;color:#809084;font-size:21px}.nav span{display:block;font-size:9px;margin-top:5px}.nav.active{background:#2d614e;color:#fff}.nav:hover:not(.active){background:#e9eee2}.left-note{position:absolute;top:122px;left:112px;background:#fcfcf4e8;padding:11px 17px;border-radius:10px;font-size:11px;color:#687e69;display:flex;gap:10px;align-items:center}.dot{width:6px;height:6px;background:#7fa979;border-radius:50%;display:inline-block}.right{position:absolute;right:24px;top:116px;width:248px;display:flex;flex-direction:column;gap:12px}.card{background:#fcfcf5f5;border:1px solid #fff9;border-radius:15px;padding:19px;box-shadow:0 6px 30px #264b3c10}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#7e9582;font-weight:bold}.card h3{font-family:Georgia,serif;font-weight:normal;font-size:20px;margin:10px 0}.card p{font-size:11px;line-height:1.7;color:#819080;margin:8px 0}.progress{height:5px;border-radius:5px;background:#e5eadc;margin:15px 0 10px;overflow:hidden}.progress i{display:block;height:100%;width:35%;background:#799a62;border-radius:5px}.task{font-size:11px;display:flex;justify-content:space-between;margin-top:13px;color:#647760}.task b{font-weight:normal;color:#4f775a}.reward{margin-top:16px;background:#eef0df;padding:11px;border-radius:8px;display:flex;justify-content:space-between;font-size:10px;color:#829071}.reward b{color:#9f873f}.weather{display:flex;align-items:center;gap:14px;padding:15px 18px}.sun{color:#dcae53;font-size:33px}.weather b{font-size:12px;font-weight:500}.weather small{display:block;font-size:10px;color:#8c9687;margin-top:6px}.map-card{padding:13px}.map-title{display:flex;justify-content:space-between;font-size:10px;color:#728775;margin:2px 2px 10px}.minimap{width:100%;height:115px;background:#a8c5a3;border-radius:9px;position:relative;overflow:hidden}.minimap svg{width:100%;height:100%}.map-badge{position:absolute;bottom:8px;right:8px;background:#fff9;padding:4px 6px;border-radius:4px;font-size:8px;color:#597460}.bottom{position:absolute;bottom:24px;left:112px;right:298px;background:#fcfcf7f7;border-radius:18px;padding:0 17px 15px;box-shadow:0 10px 40px #2e50332b;border:1px solid #fff9;min-width:500px}.palette-top{height:54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9ece2;margin-bottom:12px}.tabs{display:flex;gap:22px;height:100%}.tab{background:none;color:#8b9787;padding:0;font-size:11px;position:relative}.tab.active{color:#37624a;font-weight:bold}.tab.active:after{content:'';height:3px;position:absolute;bottom:-1px;left:0;right:0;background:#4d7756;border-radius:3px}.catalog{display:flex;gap:10px;overflow-x:auto;padding:1px}.item{flex:1;min-width:91px;max-width:150px;height:114px;border:1px solid #e1e7d9;background:#f1f3e9;border-radius:10px;position:relative;text-align:left;padding:8px 9px;color:#536a50;transition:.15s}.item:hover{transform:translateY(-2px);background:#e8eddd}.item.selected{border:1.5px solid #537651;background:#e7eddb}.item svg{display:block;width:100%;height:61px}.item .name{display:block;font-size:10px;color:#465e46;white-space:nowrap}.item .price{display:block;font-size:10px;margin-top:5px;color:#a88d4c}.item .key{position:absolute;top:6px;left:7px;font-size:8px;color:#99a58f}.palette-label{font-size:9px;color:#99a48f}.controls{position:absolute;bottom:241px;left:112px;display:flex;align-items:center;gap:7px}.control{height:35px;min-width:35px;background:#fcfcf0ee;border-radius:9px;color:#5c7459;font-size:17px;box-shadow:0 3px 12px #23462d13}.control.wide{font-size:10px;padding:0 12px}.hint{position:absolute;bottom:225px;left:50%;transform:translateX(-60%);background:#304f3ce3;color:#fffdf0;font-size:10px;padding:10px 17px;border-radius:25px;white-space:nowrap;pointer-events:none}.footer{position:absolute;bottom:25px;right:26px;font-size:9px;letter-spacing:1px;color:#416a59}.toast{position:absolute;top:110px;left:50%;transform:translateX(-50%) translateY(-10px);background:#2d5748;color:#fff;padding:13px 23px;border-radius:10px;font-size:12px;opacity:0;transition:.25s;pointer-events:none;z-index:10}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal-bg{position:absolute;inset:0;background:#143e3950;backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:20}.modal-bg.open{display:flex}.modal{background:#fafbf1;border-radius:22px;padding:30px;width:410px;box-shadow:0 25px 100px #203d4444}.modal h2{font-family:Georgia,serif;font-weight:normal;font-size:28px;margin:5px 0 15px}.modal p{font-size:12px;color:#789078;line-height:1.8}.modal button{padding:13px 18px;border-radius:9px;background:#315e4a;color:white;margin:8px 7px 0 0;font-size:12px}.modal .close{background:#e9eddf;color:#688163;float:right}.modal .row{display:flex;justify-content:space-between;background:#edf0e1;padding:15px;margin-top:12px;border-radius:10px;font-size:12px}.day{position:absolute;right:25px;bottom:64px;background:#fcfcf3e8;border-radius:12px;padding:13px 16px;width:247px;display:flex;align-items:center;gap:12px;font-size:11px}.day button{background:#e7ecdf;color:#537350;border-radius:6px;width:27px;height:27px}.day small{color:#8d9b85;margin-left:auto;font-size:9px}@media(max-width:1100px){.stats{gap:15px}.city-title,.divider{display:none}.right{width:205px}.bottom{right:248px}.tabs{gap:13px}.brand{min-width:190px}.day{width:205px}.hint{display:none}}@media(max-width:760px){.top{top:10px;left:10px;right:10px;height:65px;padding:10px;gap:10px}.brand{min-width:0}.brand b{font-size:19px}.brand small,.stat small,.stat .symbol,.save,.right{display:none}.stats{gap:12px}.stat strong{font-size:13px}.side{left:10px;top:90px}.left-note{left:88px;top:90px}.bottom{left:10px;right:10px;bottom:10px;min-width:0}.tabs{gap:16px;overflow-x:auto}.item{min-width:95px}.controls{left:10px;bottom:216px}.day,.footer{display:none}.palette-label{display:none}.logo{width:32px;height:35px}.nav{width:45px}.brand small{display:none}.modal{width:90%}}

/* Little town, illustrated edition */
body{background:#a5cbd1;color:#514e43;font-family:"Trebuchet MS",Arial,sans-serif}.top{background:#fffcf4;border:2px solid #fff9;box-shadow:0 5px 0 #867c5920;top:18px;height: seventy; height:72px;border-radius:20px}.brand b{color:#4d6b59;font-size:27px}.logo{background:#edb9a5;color:#fffaf1;border-radius:15px;box-shadow:inset 0 -4px #ce9e8a33}.brand small{letter-spacing:1.6px;color:#a09c81;font-size:8px}.city-title{color:#706f5b}.stat strong{color:#5c6653}.stat small{color:#9c9a86}.side{background:#fffcf4;border:2px solid #fff9;top:111px;box-shadow:0 5px 0 #867c591a}.nav.active{background:#87a282;color:#fffef2;box-shadow:inset 0 -3px #58764e22}.nav{color:#90927a}.left-note{background:#fffcf0ec;border:1px solid #fff8;color:#8a8c71;font-size:11px;top:111px}.right{top:111px;width:225px}.card{background:#fffcf2f5;border:2px solid #fff9;box-shadow:0 5px 0 #867c5914;border-radius:17px}.card h3{color:#76634e}.eyebrow{color:#9b9e7b}.weather{background:#fff4da}.right .map-card{display:none}.bottom{right:274px;background:#fffcf4;border:2px solid #fff9;bottom:20px;padding-bottom:13px;box-shadow:0 6px 0 #867c5926}.palette-top{height:48px}.tab{font-size:12px;color:#9a9b82}.tab.active{color:#647d58}.tab.active:after{background:#94ab79}.item{height:129px;background:#f4f1df;border:1px solid #e7e4cd;border-radius:12px;max-width:170px;padding:6px 10px}.item.selected{background:#eaf0d9;border:2px solid #8da56e}.item img{width:100%;height:86px;object-fit:contain;display:block;filter:drop-shadow(0 3px 1px #a79c7033)}.item svg{height:86px}.item .price{font-size:10px;margin-top:3px;color:#ab8c54}.item .name{font-size:11px}.catalog{gap:12px}.controls{bottom:244px}.control{background:#fffcf2;border:1px solid #fff9;box-shadow:0 3px 0 #867c5922;color:#7a8465}.hint{background:#6c7d5dde;bottom:239px;color:#fffbea}.day{background:#fffcf2;right:24px;bottom:64px;width:225px}.footer{color:#5a847a;font-size:8px}.save{background:#e8ecd9;color:#718265;border:1px solid #e0e4d0}.reward{background:#f4edcd}.progress i{background:#a2b67d}.modal{background:#fffcf1}.modal button{background:#81986b}.people-chip{position:absolute;right:24px;top:460px;width:225px;background:#fffcf2e8;border:2px solid #fff8;border-radius:16px;padding:15px 17px;box-shadow:0 4px 0 #867c5914;display:flex;align-items:center;gap:11px}.people-chip b{font-size:12px;color:#718061}.people-chip small{display:block;font-size:10px;margin-top:5px;color:#a39a7e}.people-chip .people-icon{font-size:25px;color:#bb8d76}.edition{background:#e9ead4;color:#8f9475;border-radius:5px;padding:4px 6px;font-size:8px;letter-spacing:1px}.card p{color:#969781}.task{color:#898b73}@media(min-width:1400px){.bottom{left:155px;right:320px}.controls{left:155px}}@media(max-width:1100px){.right,.people-chip,.day{width:200px}.bottom{right:246px}.tabs{gap:14px}.item{min-width:100px}}@media(max-width:760px){.top{top:10px}.right,.people-chip{display:none}.bottom{right:10px;left:10px;bottom:10px}.item{min-width:104px}.controls{bottom:230px;left:10px}.left-note{left:80px;font-size:9px}.brand b{font-size:21px}.top .brand{min-width:0}.day{display:none}.stats{gap:10px}.stat strong{font-size:12px}}
.people-chip{position:static;width:auto;min-height:68px;flex-shrink:0}.people-chip b{font-size:11px}.people-chip small{font-size:9px}.day{width:225px;font-size:10px;padding:13px 12px;gap:7px}.day span{white-space:nowrap}.day small{font-size:8px;white-space:nowrap}.palette-label{font-size:8px}.item{max-width:none}.top{height:72px}canvas{touch-action:none}
.nav[data-mode="sell"]{color:#a78947}.nav[data-mode="erase"]{color:#b77c6c}.nav[data-mode="sell"].active{background:#b49856;color:#fff}.nav[data-mode="erase"].active{background:#bc8677;color:#fff}.remove-mode{position:absolute;top:157px;left:112px;width:285px;background:#fffcf4;border:2px solid #d4c596;border-radius:13px;padding:14px;display:flex;align-items:flex-start;gap:10px;box-shadow:0 6px 22px #665f4325;z-index:3}.remove-mode[hidden]{display:none}.remove-mode b{display:block;font-size:13px;color:#8e743d}.remove-mode small{display:block;font-size:11px;color:#8d8b77;margin-top:8px;line-height:1.6}.remove-mode button{margin-left:auto;background:#ede9d8;border-radius:6px;padding:4px 8px;color:#8c866c}.sale-preview{height:160px;display:flex;justify-content:center;align-items:center;background:#f0eedb;border-radius:13px;margin:12px 0}.sale-preview img,.sale-preview svg{max-width:190px;width:auto;height:145px;object-fit:contain}.modal .danger{background:#b47c6b}.modal .neutral{background:#eae9d9;color:#787d64}.modal .sale-confirm{background:#869761}.refund b{color:#6e9156}.side{gap:5px}.nav{height:52px}@media(max-width:760px){.remove-mode{left:82px;top:155px;width:calc(100% - 100px);padding:11px}.nav{height:48px}.side{gap:3px}.modal{max-height:90vh;overflow:auto}.sale-preview{height:120px}.sale-preview img,.sale-preview svg{height:110px}}
.business-overview .revenue-label{font-size:9px;color:#aaa184;letter-spacing:1px;margin-top:19px}.business-overview .revenue-number{font-family:Georgia,serif;font-size:35px;color:#748c5a;margin:7px 0}.revenue-number span{font:17px Arial;color:#b29751}.business-overview h3{font-size:21px;margin-bottom:7px}.business-overview .metric-row{display:flex;justify-content:space-between;font-size:11px;margin:13px 0;color:#91917b}.metric-row b{font-weight:normal;color:#657b56}.business-overview .mini-divider{height:1px;background:#e8e6d3;margin:14px 0}.business-overview .subline{font-size:9px;color:#a09a80}.business-overview button{width:100%;background:#8b9f74;color:#fffdf0;padding:11px 5px;border-radius:9px;font-size:10px;margin-top:17px}.shop-inspector{display:none;position:absolute;right:24px;top:111px;width:294px;background:#fffcf2;border:2px solid #fff9;border-radius:18px;padding:18px;box-shadow:0 8px 30px #68764a22;max-height:calc(100vh - 175px);overflow-y:auto;z-index:4}.shop-open .shop-inspector{display:block}.shop-open .right{display:none}.shop-heading{display:flex;justify-content:space-between;align-items:center}.shop-heading button{background:#edead9;border-radius:6px;width:24px;height:24px;color:#7e846e}.shop-hero{display:flex;align-items:center;gap:12px;margin:14px 0}.shop-hero img{width:92px;height:85px;object-fit:contain}.shop-hero h3{font-family:Georgia,serif;font-size:20px;line-height:1.2;font-weight:normal;margin:0 0 8px;color:#71674f}.shop-hero span{font-size:10px;color:#86a367}.shop-hero small{display:block;font-size:9px;color:#a7a087;margin-top:7px}.shop-revenue{background:#edf0dc;border-radius:12px;padding:16px}.shop-revenue small{font-size:8px;letter-spacing:1.3px;color:#919879;display:block}.shop-revenue strong{display:block;font-family:Georgia,serif;font-size:33px;font-weight:normal;color:#698551;margin:7px 0}.shop-revenue span{font-size:10px;color:#9ba084}.shop-counters{display:flex;justify-content:space-between;text-align:center;margin:20px 0}.shop-counters strong{display:block;font-size:22px;color:#7c8e60}.shop-counters small{font-size:9px;color:#a39b81;display:block;margin-top:6px}.seat-title{display:flex;justify-content:space-between;font-size:9px;color:#99927e}.seat-icons{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0 18px}.seat-icons span{background:#efecdd;color:#c6c6ad;width:30px;height:27px;display:grid;place-items:center;border-radius:7px;font-size:18px}.seat-icons .occupied{background:#cad8ae;color:#6f8f52}.shop-details>div{display:flex;justify-content:space-between;font-size:10px;color:#9d9681;margin:12px 0}.shop-details b{font-weight:normal;color:#788263}.shop-note{font-size:10px;line-height:1.65;color:#a39b86}.shop-actions{display:flex;gap:7px}.shop-actions button{padding:10px 7px;border-radius:8px;background:#ece8d5;color:#978566;flex:1;font-size:10px}.shop-actions button+button{background:#8d9e73;color:#fffef4}.shop-actions button:disabled{opacity:.5;cursor:default}.all-shops{width:100%;margin-top:12px;background:none;font-size:10px;color:#8c9978}.service-line{height:4px;background:#ecebd9;border-radius:3px;overflow:hidden;margin:14px 0}.service-line i{display:block;height:100%;background:#a3b87b;transition:width .3s}.business-list{max-height:400px;overflow:auto;margin:12px -7px}.modal .business-row{display:flex;align-items:center;text-align:left;width:calc(100% - 10px);gap:8px;margin:5px;padding:8px;background:#f0efdf;color:#768265;border:1px solid #e5e6d5}.business-row img{height:55px;width:62px;object-fit:contain}.business-row span{flex:1}.business-row b{font-size:11px}.business-row small{display:block;font-size:9px;margin-top:7px;color:#a39b83}.business-row strong{font-size:11px;color:#9d8a4f}.modal:has(.business-list){width:470px}.control.enabled{background:#e4ebd1;color:#6b8558}.controls{gap:6px}.side{gap:3px}.nav{height:48px}.left-note{font-size:10px}.hint{max-width:440px;overflow:hidden;text-overflow:ellipsis}.day{bottom:25px}.footer{display:none}.right .weather{display:none}.right .people-chip{margin-top:1px}@media(max-width:760px){.shop-inspector{right:10px;top:88px;width:285px;max-height:calc(100vh - 115px);z-index:6}.modal:has(.business-list){width:94%}.controls{flex-wrap:wrap;max-width:calc(100% - 20px);bottom:227px}.control{height:30px}.nav{height:44px}.side{gap:1px}.shop-open .bottom{opacity:.35;pointer-events:none}.business-row img{width:46px}.business-list{max-height:45vh}.hint{display:none}}
.hint{left:54%;transform:translateX(-20%);font-size:9px;max-width:310px}@media(max-width:760px){.hint{display:none}}.palette-top{gap:12px}.tabs{gap:18px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}.tab{flex-shrink:0;white-space:nowrap}.palette-label{display:none}.lot-size{position:absolute;right:6px;top:6px;font-size:8px;color:#9ea483;background:#fffcf1bb;padding:2px 4px;border-radius:4px}.item .key{font-size:8px}.item .name{font-size:10px}.item{min-width:113px}.catalog{scrollbar-width:thin;scrollbar-color:#ccd1b1 transparent}.collection-chip{display:flex;align-items:center;gap:8px;background:transparent;color:#869366;font:inherit;white-space:nowrap;padding:0;text-align:left}.collection-chip b{font-weight:normal;color:#a68c59}.collection-options{display:flex;flex-direction:column;gap:8px}.modal .collection-options button{display:flex;align-items:center;gap:15px;background:#f0efdd;color:#7b8266;text-align:left;padding:9px 14px;margin:0;border:1px solid #e5e5ce}.collection-options img{width:70px;height:65px;object-fit:contain}.collection-options b{font-size:12px;display:block}.collection-options small{font-size:10px;display:block;color:#a19980;margin-top:6px}.factory-batch{display:flex;align-items:center;gap:17px;background:#f0edd9;border-radius:12px;padding:16px;margin:18px 0}.factory-batch b{font-size:14px;color:#92805c}.factory-batch small{display:block;font-size:10px;color:#a49b80;margin-top:7px}.ingot{font-size:47px;color:var(--ingot);line-height:1;text-shadow:0 3px 0 #8f8c6b40}.warehouse-row{display:flex;align-items:center;gap:13px;background:#f0efdf;padding:14px;border-radius:12px;margin:12px 0}.warehouse-row>div:nth-child(2){flex:1}.material-icon{font-size:33px}.warehouse-row b{font-size:13px;color:#7c8268}.warehouse-row small{display:block;font-size:10px;color:#a49b84;margin-top:6px}.modal .warehouse-row button{margin:0;padding:10px 13px;font-size:10px;line-height:1.7;background:#8e9d76}.warehouse-row button strong{font-weight:normal}.warehouse-row button:disabled{opacity:.45;cursor:default}.business-overview .warehouse-shortcut{display:flex;justify-content:space-between;background:#ece9d4;color:#9a8965;padding:10px 12px;margin-top:8px;font-size:10px}.business-overview .warehouse-shortcut b{font-weight:normal}.nav{height:43px}.side{gap:2px}.right .people-chip{display:none}.item img{filter:drop-shadow(0 2px 1px #a79c7022)}.left-note{max-width:calc(100vw - 450px)}@media(max-width:760px){.left-note{max-width:calc(100vw - 95px);font-size:9px;left:82px;top:95px;padding:10px}.collection-chip span{overflow:hidden;text-overflow:ellipsis}.collection-chip b{display:none}.nav{height:39px}.nav span{font-size:8px}.nav{font-size:18px}.side{top:91px}.tabs{gap:18px}.item{min-width:113px}.collection-options img{width:55px}.modal .collection-options button{gap:10px}.warehouse-row{gap:8px;padding:12px}.warehouse-row small{font-size:9px}}

/* Nhịp sống: thời tiết, lễ hội, lịch */
.card.weather{cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;gap:12px;align-items:center}.card.weather:hover{transform:translateY(-2px);box-shadow:0 7px 0 #867c5918}.card.weather .sun{font-size:26px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff1c9;color:#d29a3d;flex:none}.card.weather b{font-size:13px;color:#6d6a55}.card.weather small{display:block;font-size:10px;color:#9b9a84;margin-top:4px}.card.weather em{display:block;font-style:normal;font-size:9.5px;color:#7f9a6d;margin-top:5px}
.card.weather[data-weather="rain"] .sun,.card.weather[data-weather="storm"] .sun{background:#dfe8ee;color:#5a83a6}.card.weather[data-weather="snow"] .sun{background:#eef3f7;color:#7d9bb5}.card.weather[data-weather="cloud"] .sun{background:#ecefe9;color:#8a9890}.card.weather[data-weather="wind"] .sun{background:#f6e6d2;color:#c27d45}
.phase-icon{font-style:normal;margin-right:6px;color:#c79c4a}body.night .phase-icon{color:#6f7fb8}.day b{color:#6b7c58}
.life-banner{position:absolute;top:108px;left:50%;transform:translateX(-50%);display:flex;gap:11px;align-items:center;background:#fff8e8f5;border:2px solid #f0d79f;border-radius:14px;padding:9px 16px 9px 11px;box-shadow:0 5px 0 #a5874a22;z-index:2;animation:bannerIn .5s ease}.life-banner[hidden]{display:none}.life-banner span{font-size:20px;width:34px;height:34px;border-radius:10px;background:#f6dfa6;display:grid;place-items:center;color:#a8742c}.life-banner b{display:block;font-size:12.5px;color:#8b6a35}.life-banner small{display:block;font-size:10px;color:#a69575;margin-top:3px}@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-8px)}}
.life-now{display:flex;gap:12px;align-items:center;background:#f3f0de;border-radius:12px;padding:10px 12px;margin:10px 0}.life-now span{font-size:28px}.life-now b{display:block;font-size:14px}.life-now small{display:block;font-size:10px;color:#9a9880;margin-top:3px}
.forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.fc{background:#f7f5e8;border:1px solid #ebe7d1;border-radius:10px;padding:8px;text-align:center}.fc small{display:block;font-size:9px;color:#a29f86}.fc span{display:block;font-size:20px;margin:3px 0}.fc b{font-size:10px;color:#6f6f5a;font-weight:600}
.effect{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed #e6e2cc}.effect span{width:26px;height:26px;flex:none;border-radius:8px;background:#eef1df;display:grid;place-items:center;color:#7a8f5d}.effect b{font-size:12px;display:block}.effect small{font-size:10.5px;color:#999780;display:block;margin-top:2px;line-height:1.5}
.modal .metric-row{display:flex;justify-content:space-between;font-size:11.5px;padding:6px 0;color:#7c7b66}.modal .metric-row b{color:#5f6f4f}
.pv-row{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}.modal .pv-row button.pv{width:auto;margin:0;padding:6px 10px;font-size:11px;background:#efede0;color:#6f735c;border-radius:8px}.modal .pv-row button.pv.on{background:#8aa36f;color:#fff}
@media(max-width:760px){.life-banner{top:92px;padding:6px 10px;max-width:calc(100% - 100px)}.life-banner small{display:none}}
.modal{max-height:90vh;overflow:auto}
.day .tz{font-size:8px;color:#a3a58c;margin-left:3px}

/* Thành phố 2.0 */
.side{max-height:calc(100vh - 135px);overflow-y:auto;scrollbar-width:none}.side::-webkit-scrollbar{display:none}
.nav[data-mode="move"],.nav[data-mode="rotate"]{color:#6f8c9a}.nav[data-mode="move"].active,.nav[data-mode="rotate"].active{background:#7d9fae;color:#fff}#land-nav{color:#8f9a5d}
.remove-mode.edit-mode{border-color:#a9c3cc;background:#f7fbfa}.remove-mode.edit-mode b{color:#56798a}
#facing{min-width:96px}
.land-map{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:12px 0;padding:10px;background:#eef0e2;border-radius:12px}.modal .land-map button{width:auto;margin:0;padding:0;aspect-ratio:1;border-radius:5px;background:#dcdccb;color:#8d8c75;font-size:12px}.modal .land-map button.wet{background:#c8dfe0}.modal .land-map button.own{background:#9bb47c;color:#fff}.modal .land-map button.own.wet{background:#7fb0b2}.modal .land-map button.adj{background:#fff6dc;color:#a98a4c;border:1.5px dashed #c9ad6a;cursor:pointer}.modal .land-map button:disabled{cursor:default}
.modal button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:760px){.side{max-height:calc(100vh - 330px)}#facing{min-width:0}}

/* Bảng xây dựng đóng/mở và giải thích công trình */
.bottom{transition:transform .24s ease;z-index:4}
.palette-handle{position:absolute;top:-34px;left:50%;transform:translateX(-50%);height:34px;padding:0 18px;border:1px solid #fefdf4;border-bottom:0;border-radius:12px 12px 0 0;background:#fffcf4;color:#70855f;box-shadow:0 -4px 14px #3a5f3c16;font-size:11px;font-weight:700;white-space:nowrap;pointer-events:auto}
.palette-handle:hover{background:#eef3df}
body.palette-collapsed .bottom{transform:translateY(calc(100% + 20px));pointer-events:none}
body.palette-collapsed .palette-handle{pointer-events:auto}
body.palette-collapsed .controls{bottom:78px}
body.palette-collapsed .hint{bottom:74px}
body.shop-open .bottom{opacity:1;pointer-events:auto}
body.shop-open.palette-collapsed .bottom{pointer-events:none}
body.shop-open.palette-collapsed .palette-handle{pointer-events:auto}
.item{height:145px;min-width:120px}
.item img,.item svg{height:78px}
.item .name{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.item .item-effect{display:block;font-size:9px;color:#6e8964;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.item .price{margin-top:3px}
.build-info{min-height:35px;margin:9px 1px 0;padding:7px 10px;background:#f4f3e5;border-radius:9px;display:flex;align-items:center;gap:10px;color:#7c856c;font-size:10px;line-height:1.4}
.build-info b{color:#56724e;white-space:nowrap}
.build-info span{overflow:hidden;text-overflow:ellipsis}
.controls{bottom:295px}
.hint{bottom:290px;max-width:440px}
.bank-box{background:#f2f4e6;border:1px solid #dce6cf;border-radius:11px;padding:11px;margin:12px 0;color:#617957}
.bank-box .bank-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.4px}
.bank-box .bank-amount{display:block;font-family:Georgia,serif;font-size:23px;margin:5px 0;color:#6b8555}
.bank-box .bank-timing{font-size:10px;line-height:1.5;color:#878e76}
.bank-box .bank-track{height:5px;border-radius:4px;background:#dce4d1;margin:8px 0}
.bank-box .bank-track i{display:block;height:100%;border-radius:4px;background:#8daa75;transition:width .2s}
.bank-actions{display:flex;gap:6px;margin-top:8px}
.bank-actions button{flex:1;min-width:0;padding:9px 4px;border-radius:8px;background:#809e6d;color:#fff;font-size:10px;cursor:pointer}
.bank-actions button:nth-child(1){background:#e5ebda;color:#6f825f}
.bank-actions button:disabled{opacity:.48;cursor:not-allowed}
.bank-small-note{font-size:9px;line-height:1.5;color:#9b9d86;margin:7px 0 0}
.pending-overview{margin-top:7px;font-size:10px;color:#71905e}
.palette-focus{position:relative}
@media(max-width:1000px){.controls{bottom:280px}body.palette-collapsed .bottom{transform:translateY(calc(100% + 10px))}body.palette-collapsed .controls{bottom:75px}.build-info{font-size:9px}.hint{display:none}}
@media(max-width:600px){.item{height:137px;min-width:112px}.item img,.item svg{height:72px}.build-info{max-height:46px;overflow:hidden}.controls{bottom:276px}body.palette-collapsed .controls{bottom:64px}.palette-handle{height:32px;top:-32px}.shop-inspector{max-height:calc(100vh - 105px)}}


/* 3.0 · Giao diện gọn, công cụ không che bản đồ. */
:root{--vx-left:98px;--vx-panel-h:252px}
.side{left:18px;top:106px;bottom:auto;width:72px;padding:5px;gap:2px;max-height:calc(100dvh - 134px);overflow:visible;z-index:7;border:1px solid #fffaf0;transition:width .2s;box-sizing:border-box;box-shadow:0 8px 22px #354d3520}
.side-scroll{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#c8d2b5 transparent;max-height:calc(100dvh - 174px);display:flex;flex-direction:column;gap:2px}
.side .nav{min-height:40px;height:40px;flex-shrink:0;width:60px;font-size:18px}
.side .nav span{font-size:8px;margin-top:3px;line-height:1.1}
.side-toggle{height:29px;width:100%;display:flex;justify-content:center;align-items:center;gap:4px;border-radius:8px;background:#eef2e3;color:#648054;font-size:11px;margin-bottom:3px;flex-shrink:0}
.side-toggle:hover{background:#e2eacb}
.side-toggle b{font-weight:500;font-size:9px}
body.side-compact{--vx-left:76px}
body.side-compact .side{width:47px}
body.side-compact .side .nav{width:35px;min-height:34px;height:34px}
body.side-compact .nav span,body.side-compact .side-toggle b{display:none}
body.side-compact .side-toggle{font-size:15px}
.side .nav:focus-visible,.side-toggle:focus-visible,.control:focus-visible,.palette-handle:focus-visible{outline:2px solid #689174;outline-offset:2px}
.left-note{left:var(--vx-left);top:107px;max-width:calc(100vw - 390px);padding:9px 13px}
.collection-chip{gap:8px}.collection-chip span{letter-spacing:.2px}
.bottom{left:var(--vx-left);right:276px;bottom:10px;padding:0 14px 10px;border-radius:16px;min-width:0;transition:transform .22s,bottom .22s,left .2s}
body.palette-collapsed .bottom{bottom:0;transform:translateY(100%);box-shadow:none;pointer-events:none}
.palette-handle{top:-30px;height:30px;padding:0 15px;border-radius:11px 11px 0 0;box-shadow:0 -3px 12px #38543810}
body.palette-collapsed .palette-handle{pointer-events:auto;background:#fffcf0f0;left:auto;right:12px;transform:none}
.controls{left:var(--vx-left);bottom:calc(var(--vx-panel-h) + 50px);gap:5px;flex-wrap:wrap;max-width:calc(100vw - var(--vx-left) - 275px);transition:bottom .22s,left .2s;z-index:5}
body.palette-collapsed .controls{bottom:10px}
.control{min-width:31px;height:31px;border-radius:9px}
.control.wide{font-size:9px;min-width:42px}
.hint{bottom:calc(var(--vx-panel-h) + 50px);left:55%;max-width:310px;z-index:2}
body.palette-collapsed .hint{bottom:45px}
.day{bottom:10px;right:18px;padding:10px;width:232px;box-sizing:border-box;z-index:5}
.item{height:141px;min-width:119px}.item img{height:78px;object-fit:contain;image-rendering:auto}
.item .item-effect{font-size:9px}.build-info{min-height:38px;align-items:flex-start;margin-top:7px;line-height:1.5}.build-info span{white-space:normal}
.build-info b{font-size:10px}.palette-label{letter-spacing:1.1px;font-size:8px}
.right{right:18px}.shop-inspector{z-index:8;max-height:calc(100dvh - 124px);overflow-y:auto;overscroll-behavior:contain}
.v3-tag{color:#7c9670;font-size:9px;letter-spacing:.6px;text-transform:uppercase}
.v3-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.v3-stat-grid div{padding:9px 10px;border-radius:10px;background:#f1f2e5;font-size:10px;color:#8b947b}
.v3-stat-grid b{display:block;color:#6d855b;font-size:17px;margin-bottom:4px}
.v3-note{font-size:11px;color:#7b8a6e;line-height:1.7}
.v3-collection{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:55vh;overflow:auto}
.v3-collection button{border-radius:12px;background:#f0f1e3;padding:8px 5px;color:#5c754e;text-align:center;font-size:10px;line-height:1.4;cursor:pointer}
.v3-collection img{height:87px;width:100%;object-fit:contain;display:block;margin-bottom:5px}
.v3-collection small{display:block;font-size:8px;color:#94a085}
.v3-data-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.v3-data-actions button{padding:10px;border-radius:9px;font-size:11px}
@media(min-width:1500px){.bottom{max-width:1100px}.controls{max-width:1000px}}
@media(max-width:1100px){.bottom{right:232px}.controls{max-width:calc(100vw - var(--vx-left) - 232px)}.right{width:205px}.day{width:212px}.left-note{max-width:calc(100vw - 340px)}}
@media(max-width:800px){:root{--vx-left:72px}.side{left:9px;top:88px;width:55px;max-height:calc(100dvh - 130px)}.side-scroll{max-height:calc(100dvh - 175px)}.side .nav{width:43px;min-height:37px;height:37px}.side-toggle b{font-size:8px}body.side-compact{--vx-left:56px}body.side-compact .side{width:40px}body.side-compact .side .nav{width:28px;min-height:33px;height:33px}.bottom{left:9px;right:9px;bottom:10px}.controls{left:9px;max-width:calc(100vw - 18px);bottom:calc(var(--vx-panel-h) + 49px)}body.palette-collapsed .controls{bottom:7px;max-width:calc(100vw - 153px)}.left-note{left:var(--vx-left);top:89px;max-width:calc(100vw - var(--vx-left) - 10px);padding:8px 10px;font-size:9px}.left-note b{font-size:9px}.day{display:none}body.palette-collapsed .bottom{transform:translateY(100%);bottom:0}.palette-handle{top:-29px;height:29px;font-size:10px}body.palette-collapsed .palette-handle{left:auto;right:8px;transform:none;padding:0 11px;max-width:128px}.control{min-width:29px;height:29px}.control.wide{font-size:8px}.controls .control{padding-left:7px;padding-right:7px}.item{height:138px;min-width:114px}.item img{height:73px}.hint{display:none}.shop-inspector{left:60px;right:9px;top:88px;width:auto;max-width:360px;max-height:calc(100dvh - 133px)}.v3-collection{grid-template-columns:repeat(2,1fr)}.right{display:none}}
@media(max-height:580px){.side{top:85px}.side-scroll{max-height:calc(100dvh - 150px)}.left-note{display:none}}
@media(prefers-reduced-motion:reduce){.side,.bottom,.controls{transition:none}}
@media(max-width:800px){body:not(.palette-collapsed) .side{max-height:calc(100dvh - var(--vx-panel-h) - 130px)}body:not(.palette-collapsed) .side-scroll{max-height:calc(100dvh - var(--vx-panel-h) - 170px)}}

.controls{pointer-events:none}.controls>button{pointer-events:auto}
body.palette-collapsed .palette-handle{margin-top:-2px}


.v4-claimbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px;margin:12px 0;background:#edf3e5;border:1px solid #d8e6cf;border-radius:12px}
.v4-claimbar strong{display:block;color:#648453;font-size:13px}.v4-claimbar small{display:block;color:#84927a;font-size:10px;line-height:1.45;margin-top:4px}.v4-claimbar button{white-space:nowrap;background:#769862!important;color:white!important;border-radius:9px!important;padding:10px 13px!important}.v4-claimbar button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:480px){.v4-claimbar{align-items:stretch;flex-direction:column}.v4-claimbar button{width:100%}}


@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/lora-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/lora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/lora-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* V5 */
.brand b,.card h3,.modal h2,.modal h3,.shop-hero h3,.business-overview .revenue-number,.shop-revenue strong,.bank-box .bank-amount,#v5-level{font-family:'Lora',Georgia,serif!important;font-feature-settings:normal;text-rendering:optimizeLegibility}
.shop-hero h3{line-height:1.3!important;word-break:normal}
.v5-level{cursor:pointer}.v5-level .symbol{background:#f6e7bf!important;color:#c39236!important}
.v5-xpbar{display:block!important;width:96px;height:5px;border-radius:5px;background:#e8e7d6;overflow:hidden;margin:4px 0 2px!important}.v5-xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d8b45a,#e9cf7d);border-radius:5px;transition:width .4s}
#v5-xptext{font-size:9px!important}
.v5-bigbar{height:9px;border-radius:9px;background:#ece9d8;overflow:hidden;margin:8px 0}.v5-bigbar i{display:block;height:100%;background:linear-gradient(90deg,#d8b45a,#e9cf7d)}
.v5-unlocks{padding-left:4px;list-style:none;font-size:12px;line-height:1.9;color:#6d6a55}
.item.v5-locked{opacity:.55;filter:grayscale(.6)}.item{position:relative}
.v5-lock,.v5-new{position:absolute;top:5px;right:5px;font-size:8px;font-weight:bold;border-radius:6px;padding:2px 5px;background:#f2e9cf;color:#987b3c}.v5-new{background:#e3efd5;color:#5f8a4c}
.v5-fac{margin:12px 0;padding:12px;border-radius:12px;background:#fbf6e6;border:1px solid #eadfbf}
.v5-fac-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.5px;color:#8c7a4c}.v5-stars{color:#e0b047;font-size:14px;letter-spacing:1px}
.v5-fac-row{display:flex;justify-content:space-between;font-size:10.5px;color:#7a7b66;margin-top:7px}
.v5-up{width:100%;margin-top:10px;background:#d8b45a!important;color:#fff!important;border-radius:9px!important;padding:9px!important;font-weight:bold}.v5-up:disabled{background:#d8d3c0!important;cursor:not-allowed}
@media(max-width:900px){#v5-xptext,.v5-xpbar{display:none!important}}


/* V6 — chế độ ngắm cảnh */
header.top,nav.side,.left-note,aside.right,.controls,.hint,section.bottom,.day,.life-banner{transition:opacity .45s ease,transform .45s ease}
body.v6-zen header.top{opacity:0;transform:translateY(-120%);pointer-events:none}
body.v6-zen nav.side,body.v6-zen .left-note{opacity:0;transform:translateX(-140%);pointer-events:none}
body.v6-zen aside.right{opacity:0;transform:translateX(140%);pointer-events:none}
body.v6-zen .controls,body.v6-zen .hint,body.v6-zen section.bottom,body.v6-zen .day{opacity:0;transform:translateY(160%);pointer-events:none}
body.v6-zen .life-banner{opacity:0;pointer-events:none}
#v6-zen-exit{position:absolute;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:30;background:#fffaeacc;color:#6d7b5a;border-radius:20px;padding:8px 14px;font-size:11px;box-shadow:0 4px 18px #2a3b2e22;backdrop-filter:blur(4px);transition:all .45s}
#v6-zen-exit.show{opacity:.85;transform:translate(-50%,0);pointer-events:auto;animation:v6fade 4s 2.5s forwards}
#v6-zen-exit:hover{opacity:1!important}
@keyframes v6fade{to{opacity:.25}}
/* chip lưu tự động */
#v6-savechip{display:flex;align-items:center;gap:6px;font-size:10px;color:#86917a;white-space:nowrap;margin-left:10px}
#v6-savechip i{width:7px;height:7px;border-radius:50%;background:#8fb27a;box-shadow:0 0 0 3px #8fb27a30}
#v6-savechip[data-state=warn] i{background:#dcae4f;box-shadow:0 0 0 3px #dcae4f30}#v6-savechip[data-state=err] i{background:#d0705e}
#v6-savechip[data-state=cloud] i{background:#6aa3c0;box-shadow:0 0 0 3px #6aa3c030}
/* tài khoản */
#v6-avatar{display:flex;align-items:center;gap:8px;background:#f4f1e3;border-radius:22px;padding:4px 12px 4px 4px;text-align:left;margin-left:6px}
#v6-avatar b{display:block;font-size:11px;color:#5f6b4f;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#v6-avatar small{font-size:9px;color:#a09c81}
.v6-av{width:30px;height:30px;border-radius:50%;background:#e7eedc;display:grid;place-items:center;font-size:17px;flex:none}
#v6-account-nav{position:relative}#v6-account-nav[data-badge]:not([data-badge=""])::after{content:attr(data-badge);position:absolute;top:2px;right:6px;background:#d9775f;color:#fff;font-size:9px;border-radius:8px;padding:1px 5px}
.v6-tabs{display:flex;gap:6px;margin:8px 0 14px}.v6-tabs button{flex:1;padding:8px;border-radius:9px;background:#f1efe2;color:#8a8a70;font-size:12px}.v6-tabs button.on{background:#769862;color:#fff}
.v6-form{display:flex;flex-direction:column;gap:10px}.v6-form label,.v6-server label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#8a8a70}
.v6-form input,.v6-server input,.v6-addrow input{padding:10px 11px;border:1px solid #e0dcc6;border-radius:9px;font:inherit;font-size:13px;background:#fffdf6;color:#4f4c40}
.v6-form.login .v6-reg{display:none}
.v6-avatars{display:flex;flex-wrap:wrap;gap:6px}.v6-avatars button{width:34px;height:34px;border-radius:50%;background:#f2f0e3;font-size:17px}.v6-avatars button.on{background:#dfe9d0;box-shadow:0 0 0 2px #769862}
.v6-primary{padding:11px;border-radius:10px;background:#769862!important;color:#fff!important;font-weight:bold}
.v6-err{color:#c0604c;font-size:11px;min-height:14px;margin:4px 0}
.v6-server{margin-top:12px;font-size:11px;color:#9a9880}.v6-server button{margin:8px 0;padding:7px 10px;border-radius:8px;background:#ece9d9}.v6-server small{display:block}
.v6-card{display:flex;gap:14px;align-items:center}.v6-card h2{margin:0!important}.v6-bigav{width:64px;height:64px;border-radius:50%;background:#e7eedc;display:grid;place-items:center;font-size:34px;flex:none}
.v6-handle{font-size:11px;color:#8f9475;margin:4px 0}.v6-copy{font-size:10px;padding:2px 7px;border-radius:6px;background:#eef0e2;margin-left:4px}
.v6-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.v6-stats div{background:#f6f3e6;border-radius:10px;padding:9px;text-align:center}.v6-stats b{display:block;color:#6b8555;font-size:15px}.v6-stats small{font-size:9px;color:#9a9880}
.v6-addrow{display:flex;gap:8px}.v6-addrow input{flex:1}.v6-addrow button{padding:0 14px;border-radius:9px;background:#769862;color:#fff}
.v6-friend{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eeebdd}.v6-friend>div{flex:1;min-width:0}.v6-friend b{font-size:12.5px;color:#5c5a48}.v6-friend small{display:block;font-size:10px;color:#9a9880}
.v6-friend i{font-style:normal;font-size:9px;color:#c9c5b0}.v6-friend i.on{color:#76b25e}.v6-friend button{padding:6px 10px;border-radius:8px;background:#769862;color:#fff;font-size:11px}.v6-friend button.ghost{background:#efece0;color:#8a8a70}
.v6-savebox{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v6-savebox div{background:#f6f3e6;border-radius:10px;padding:10px}.v6-savebox b{display:block;font-size:12px;color:#5f6b4f}.v6-savebox small{font-size:10px;color:#9a9880}
.v6-toggle{display:flex;gap:8px;align-items:center;font-size:12px;color:#7a7b66;margin-top:12px}
@media(max-width:900px){#v6-avatar span:last-child,#v6-savechip span{display:none}#v6-avatar{padding:3px}}
/* tinh chỉnh bố cục thanh trên */
header.top .divider{display:none}
#v6-avatar{padding:3px 10px 3px 3px;margin-left:12px}#v6-avatar small{display:none}#v6-avatar b{max-width:90px}
.v6-avatars button{display:grid!important;place-items:center;padding:0!important;line-height:1}
.v6-copy{padding:3px 8px!important;font-size:10px!important;background:#eef0e2!important;color:#6b8555!important;border-radius:6px!important;min-height:0!important}
.v6-handle{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.v6-card h2{font-size:24px!important}
@media(max-width:1520px){#v6-savechip span{display:none}header.top .stat small{white-space:nowrap}}
@media(max-width:1280px){#v6-avatar span:last-child{display:none}#v6-avatar{padding:3px}}

/* V7: gộp thời tiết + ngày giờ + chat vào 1 khung góc phải dưới */
html,body{overflow:hidden;width:100%;height:100%;position:fixed;inset:0;overscroll-behavior:none;touch-action:none}
.day,aside.right .card.weather{display:none!important}
#v7-dock{position:absolute;right:max(22px,env(safe-area-inset-right,0px));bottom:max(22px,env(safe-area-inset-bottom,0px));width:300px;z-index:25;background:#fffcf1f2;border-radius:14px;box-shadow:0 6px 0 #867c5914,0 10px 30px #2a3b2e1c;overflow:hidden;font-size:11px;color:#5d6b55;transition:opacity .35s,transform .35s,bottom .28s;backdrop-filter:blur(4px);touch-action:auto}
#v7-dock .v7-wx{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #ece6d2}
#v7-dock .v7-icon{font-size:20px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f1efe2;cursor:pointer}
#v7-dock .v7-wxt{flex:1;min-width:0;cursor:pointer}
#v7-dock .v7-wxt b{display:block;font-size:12px;font-weight:600;color:#55654f}
#v7-dock .v7-wxt small{display:block;font-size:9.5px;color:#8d9b85;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v7-dock #pause,#v7-dock .v7-toggle{background:#e7ecdf;color:#537350;border-radius:7px;width:28px;height:28px;border:0;cursor:pointer;font-size:12px;flex:none}
#v7-dock .v7-log{height:128px;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;touch-action:pan-y}
#v7-dock .v7-m{line-height:1.4;word-break:break-word}
#v7-dock .v7-m b{color:#6f8a5d}
#v7-dock .v7-sys{color:#9a8448;font-style:italic}
#v7-dock .v7-me b{color:#c07b56}
#v7-dock .v7-form{display:flex;gap:6px;padding:8px 10px;border-top:1px solid #ece6d2}
#v7-dock .v7-form input{flex:1;border:1px solid #e1dac2;background:#fff;border-radius:8px;padding:7px 9px;font:inherit;font-size:11px;color:#4f5d48;outline:none;min-width:0}
#v7-dock .v7-form input:focus{border-color:#a7bb92}
#v7-dock .v7-form button{background:#7f9a6a;color:#fff;border:0;border-radius:8px;width:32px;cursor:pointer}
#v7-dock.v7-min .v7-chat{display:none}
#v7-dock.v7-min .v7-wx{border-bottom:0}
body.v6-zen #v7-dock{opacity:0;transform:translateY(160%);pointer-events:none}
@media(max-width:768px){
 #v7-dock{width:min(300px,calc(100vw - 84px));right:max(10px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px))}
 #v7-dock .v7-log{height:84px}
 body:not(.palette-collapsed) #v7-dock{opacity:0;pointer-events:none;transform:translateY(130%)}
 body.shop-open #v7-dock{opacity:0;pointer-events:none;transform:translateY(130%)}
}
/* V7.1 */
#v7-dock .v7-hide{background:#f1e6e0;color:#a26a55;border-radius:7px;width:28px;height:28px;border:0;cursor:pointer;font-size:11px;flex:none}
#v7-pill{position:absolute;right:max(22px,env(safe-area-inset-right,0px));bottom:max(22px,env(safe-area-inset-bottom,0px));z-index:25;width:44px;height:44px;border-radius:50%;border:0;background:#fffcf1f2;box-shadow:0 6px 18px #2a3b2e26;font-size:18px;cursor:pointer;display:none}
body.v7-dock-hidden #v7-dock{display:none}
body.v7-dock-hidden #v7-pill{display:block}
body.v6-zen #v7-pill{display:none}
.v7-landmark{background:#f6f2e3;border-radius:10px;padding:10px 12px;margin:8px 0;font-size:11px;color:#5d6b55}
.v7-landmark p{margin:6px 0;line-height:1.5}
.v7-lm-row{display:flex;justify-content:space-between;gap:8px;color:#7d8a6f}
.v7-lm-row b{color:#9f873f}
/* V7.2: bảng xây dựng ở giữa */
section.bottom{--pw:max(520px,min(980px,calc(100vw - 680px)));left:calc((100vw - var(--pw)) / 2)!important;right:auto!important;width:var(--pw);min-width:0!important;touch-action:pan-x pan-y}
@media(max-width:760px){section.bottom{--pw:calc(100vw - 20px)}}
/* bạn bè: sửa lỗi tràn ngang offscreen right:-340px trên điện thoại */
#v72-friends-btn{position:absolute;right:max(22px,env(safe-area-inset-right,0px));top:104px;z-index:26;display:flex;align-items:center;gap:6px;background:#fffcf1f2;border:0;border-radius:20px;padding:8px 13px;font-size:11px;color:#55654f;box-shadow:0 6px 18px #2a3b2e22;cursor:pointer;transition:right .35s,transform .35s}
#v72-friends-btn i{background:#d9644f;color:#fff;border-radius:9px;font-style:normal;font-size:9px;padding:1px 5px}
#v72-friends{position:absolute;top:96px;right:22px;width:min(300px,calc(100vw - 24px));bottom:120px;z-index:27;background:#fffcf3f7;border-radius:16px;box-shadow:0 10px 40px #2e503330;display:flex;flex-direction:column;transform:translateX(calc(100% + 40px));visibility:hidden;pointer-events:none;transition:transform .32s ease,visibility .32s;font-size:11px;color:#5d6b55;backdrop-filter:blur(4px);touch-action:pan-y}
body.v72-fopen #v72-friends{transform:translateX(0);visibility:visible;pointer-events:auto}
body.v72-fopen #v72-friends-btn{right:min(334px,calc(100vw - 110px))}
.v72-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid #ece6d2;font-size:13px}
.v72-head button{background:#f1e6e0;color:#a26a55;border:0;border-radius:7px;width:26px;height:26px;cursor:pointer}
.v72-add{display:flex;gap:6px;padding:10px 12px}
.v72-add input{flex:1;border:1px solid #e1dac2;border-radius:8px;padding:7px 9px;font:inherit;font-size:11px;min-width:0}
.v72-add button,.v72-visit,.v72-acts button,.v72-login{background:#7f9a6a;color:#fff;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:10.5px;white-space:nowrap}
.v72-acts{display:flex;gap:4px}.v72-acts .ghost{background:#e9e2cf;color:#7d6a4f}
.v72-list{flex:1;overflow-y:auto;padding:0 12px 12px;position:relative;touch-action:pan-y}
.v72-list h4{margin:12px 0 6px;font-size:10px;letter-spacing:.08em;color:#9a8f72;text-transform:uppercase}
/* timeline: đường dọc nối các bạn */
.v72-item{position:relative;display:flex;align-items:center;gap:9px;padding:8px 0 8px 16px;border-left:2px solid #e3dcc5;margin-left:5px}
.v72-dot{position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#cfc7ae;border:2px solid #fffcf3}
.v72-dot.on{background:#6fbf73}
.v72-av{width:32px;height:32px;border-radius:50%;background:#efe9d6;display:grid;place-items:center;font-size:17px;flex:none}
.v72-info{flex:1;min-width:0}.v72-info b{display:block;font-size:12px;color:#4f5d48}.v72-info small{display:block;color:#8d9b85;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v72-empty{color:#9a9a86;font-style:italic;padding:10px 0}.v72-wait{color:#b0a37c}
body.v6-zen #v72-friends-btn,body.v6-zen #v72-friends{opacity:0;pointer-events:none}
/* chế độ thăm nhà */
#v72-visitbar{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:28;display:flex;align-items:center;gap:10px;background:#fff6dcf7;border:1px solid #ecd9a2;border-radius:14px;padding:9px 12px;box-shadow:0 8px 26px #2e503326;font-size:11px;color:#6b5d3c}
#v72-visitbar b{display:block;font-size:12.5px}#v72-visitbar small{color:#9a8a5e}
#v72-visitbar button{background:#c07b56;color:#fff;border:0;border-radius:9px;padding:8px 12px;cursor:pointer;font-size:11px}
body.v72-visiting section.bottom,body.v72-visiting nav.side,body.v72-visiting .palette-handle,body.v72-visiting #v72-friends-btn,body.v72-visiting #v72-friends,body.v72-visiting #v7-dock .v7-chat,body.v72-visiting #trade,body.v72-visiting #v4-claim-all,body.v72-visiting .shop-panel{display:none!important}

/* V8 & V8.1: warm paper, sage green, accessible mobile profile, responsive controls, search & undo */
.modal{max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.shop-inspector{max-height:calc(100dvh - 108px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#modal-content:has(.v8-profile),#modal-content:has(.v8-form){max-width:620px;width:calc(100vw - 32px);max-height:88dvh;overflow:auto;box-sizing:border-box;padding:28px 30px;color:#3d4e3d}
.v8-profile h2{margin:4px 0;font-size:27px;letter-spacing:-.6px}.v8-profile .eyebrow{font-size:9px;letter-spacing:1.6px}.v8-beta{float:right;background:#e4ebd8;color:#4f6845;padding:3px 8px;border-radius:99px;font-size:8px}
.v8-tabs{display:flex;gap:5px;margin:16px 0;padding:4px;border:1px solid #e5e5d8;border-radius:11px;background:#f2f2e8}.v8-tabs button{flex:1;background:transparent!important;color:#7c8673!important;border:0!important;border-radius:7px;padding:9px 4px;font-size:11px;cursor:pointer;margin:0!important}.v8-tabs button.active{background:#fffef9!important;color:#335740!important;box-shadow:0 2px 5px #283a1910;font-weight:600}
.v8-hero{display:flex;align-items:center;gap:16px;padding:8px 0 18px}.v8-hero>div:nth-child(2){flex:1;min-width:0}.v8-hero small{font-size:8px;letter-spacing:1.7px;color:#839275}.v8-hero h2,.v8-hero p{overflow-wrap:anywhere}.v8-hero p{margin:0 0 7px!important;font-size:12px}.v8-hero span{font-size:10px;color:#84917e}.v8-avatar{width:70px;height:78px;border-radius:22px;background:linear-gradient(135deg,#e8edde,#cadabb);display:grid;place-items:center;font-size:35px;flex:none;border:4px solid #f2f5e9}.v8-level{display:flex;flex-direction:column;align-items:center;background:#edf0df;border-radius:13px;padding:12px 15px}.v8-level b{font-size:27px;color:#5f7a4d}
.v8-email{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid #e7e7dc;border-radius:11px;margin-bottom:15px;background:#fffef8}.v8-email>span:first-child{color:#809276;font-size:18px}.v8-email div{flex:1;min-width:0}.v8-email small{display:block;font-size:9px;color:#929a88;margin-bottom:4px}.v8-email b{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}.v8-unverified{color:#998c68!important;font-size:8px;white-space:nowrap}
.v8-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.v8-metrics>div{background:#f0f2e6;border:1px solid #e6eada;border-radius:12px;padding:13px 15px}.v8-metrics small{font-size:10px;display:block;color:#859175;margin-bottom:7px}.v8-metrics b{font-size:21px;font-weight:600;color:#526c43;letter-spacing:-.3px}.v8-metrics em{font-size:11px;font-style:normal;font-weight:400;color:#96a387}
.v8-happiness{margin:15px 0 18px}.v8-happiness>div{display:flex;justify-content:space-between;font-size:10px;color:#758768}.v8-happiness i{display:block;height:6px;background:#e7ebda;border-radius:8px;margin:8px 0;overflow:hidden}.v8-happiness i:after{content:'';display:block;width:var(--fill);height:100%;background:#8faa72;border-radius:8px}.v8-happiness small{font-size:9px;color:#99a08d}
.v8-actions{display:flex;gap:8px;flex-wrap:wrap}.v8-actions button,.v8-form button{padding:11px 14px;border-radius:10px;background:#edf0e3;color:#526a44;font-size:11px;border:1px solid #dde5d1;cursor:pointer;flex:1;margin:0!important}.v8-primary{background:#678358!important;color:#fffef5!important;border-color:#678358!important}.v8-danger{background:#f9ebe7!important;color:#a84c3a!important;border-color:#ebcfc7!important}.v8-actions button:hover,.v8-form button:hover{filter:brightness(.96)}.v8-actions button:disabled,.v8-form button:disabled{opacity:.45;cursor:wait}.v8-gift{background:#f6f0df;border:1px solid #eee3c7;color:#9e8950;margin:13px 0;padding:10px 13px;border-radius:9px;font-size:9.5px;line-height:1.6}
.v8-edit{border-top:1px solid #e7e7d9;padding-top:14px;margin-top:14px}.v8-edit summary{cursor:pointer;font-size:11px;color:#778768;font-weight:600}.v8-form{display:flex;flex-direction:column;gap:11px;margin-top:14px}.v8-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#78866c}.v8-form input,.v8-form textarea,.v8-form select{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid #dfe4d6;border-radius:9px;background:#fffef9;color:#3c503f;font:inherit;font-size:12px;outline:none}.v8-form input:focus,.v8-form textarea:focus,.v8-form select:focus{border-color:#8ca87b;box-shadow:0 0 0 3px #dbe7cb80}.v8-form textarea{min-height:110px;resize:vertical}.v8-form small,.v8-muted{font-size:10px!important;color:#969f8c;line-height:1.6}.v8-error{color:#ba6651!important;font-size:11px!important;margin:0!important;min-height:16px}.v8-profile-foot{text-align:center;font-size:8.5px;line-height:1.6;color:#a2aa96;margin:16px 0 0}
.v8-notice{background:#edf2e4;padding:13px;border-radius:10px;line-height:1.65;font-size:11.5px;margin:10px 0}.v8-notice.warn{background:#fff0d7;color:#916632}

/* Thanh tìm kiếm trong bảng xây dựng & nút Hoàn tác / Thấp mái */
.v8-cat-search{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:10px}
.v8-cat-search input{width:145px;padding:5px 9px;border:1px solid #dce2d0;border-radius:8px;background:#fffef9;font:inherit;font-size:10.5px;color:#465e46;outline:none;transition:width .2s,border-color .2s}
.v8-cat-search input:focus{width:180px;border-color:#7f9a6a}
.v8-cat-clear{background:#e9ece0;color:#6c7d63;border-radius:6px;padding:3px 6px;font-size:10px;display:none}
.v8-cat-search.has-q .v8-cat-clear{display:inline-block}
.control.enabled{background:#dce7cb!important;color:#35593d!important;font-weight:bold}

/* Tối ưu bố cục Mobile & Landscape không chồng lấn */
@media(max-width:768px){
 .top{top:max(8px,env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));height:58px;padding:0 10px;gap:8px}
 .side{left:max(8px,env(safe-area-inset-left,0px));top:74px;max-height:calc(100dvh - 140px)}
 .side-scroll{max-height:calc(100dvh - 182px)}
 #v72-friends-btn{top:74px;right:max(10px,env(safe-area-inset-right,0px));padding:6px 10px;font-size:10px}
 #v72-friends-btn span{display:none}
 #v72-friends{top:74px;right:10px;bottom:80px;width:calc(100vw - 20px)}
 body.v72-fopen #v72-friends-btn{right:14px;z-index:28}
 .controls{left:var(--vx-left);right:10px;bottom:74px!important;gap:4px;max-width:calc(100vw - var(--vx-left) - 12px)}
 body:not(.palette-collapsed) .controls{bottom:calc(var(--vx-panel-h) + 44px)!important}
 .control{min-width:29px;height:29px;font-size:14px}
 .control.wide{font-size:8.5px;padding:0 7px;min-width:36px}
 .v8-cat-search input{width:105px;font-size:10px}
 .v8-cat-search input:focus{width:130px}
 #modal-content:has(.v8-profile),#modal-content:has(.v8-form){padding:20px 16px;width:calc(100vw - 18px);max-height:92dvh}
 .v8-hero{gap:10px}.v8-hero h2{font-size:21px}.v8-avatar{width:52px;height:60px;font-size:28px}.v8-level{padding:8px 11px}.v8-unverified{display:none}.v8-actions{flex-direction:column}.v8-metrics>div{padding:11px}.v8-metrics b{font-size:19px}
 #v72-visitbar{top:74px;width:calc(100vw - 24px);box-sizing:border-box;flex-wrap:wrap;padding:7px 10px}
 #v72-visitbar button{width:100%;padding:6px 10px}
}
@media(max-height:540px){
 .top{top:6px;height:46px;padding:0 12px;border-radius:12px}
 .logo{width:30px;height:30px;font-size:18px}
 .brand b{font-size:16px}
 .side{top:58px;max-height:calc(100dvh - 68px)}
 .side-scroll{max-height:calc(100dvh - 104px)}
 .left-note,aside.right{display:none!important}
 #v72-friends-btn{top:58px}
 #v72-friends{top:58px;bottom:10px}
 .controls{bottom:54px!important}
 body:not(.palette-collapsed) .controls{bottom:calc(var(--vx-panel-h) + 34px)!important}
 .item{height:112px;min-width:98px}
 .item img,.item svg{height:54px}
 .palette-top{height:38px;margin-bottom:6px}
 .build-info{display:none}
 #v7-dock .v7-log{height:64px}
}
/* Dialogs & Zen exit button must sit above dock and panels */
#modal{z-index:1000!important}
#v6-zen-exit{z-index:950!important;padding:10px 18px!important;font-size:12px!important;font-weight:600!important;box-shadow:0 8px 28px #1d352845!important}

/* === 1Citizen v8.3: Stat Logos, Collapsible Top/Left/Right Panels & Illustrated Ocean === */
.top .stats .stat .symbol.v8-stat-logo{width:38px;height:38px;border-radius:12px;padding:0;display:grid;place-items:center;box-shadow:0 3px 10px rgba(45,75,55,.1),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .2s ease,background .25s ease,box-shadow .25s ease;flex-shrink:0}
.top .stats .stat:hover .symbol.v8-stat-logo{transform:translateY(-1px) scale(1.04)}
.top .stats .stat .symbol.v8-stat-logo svg{width:28px;height:28px;display:block}
.top .stats .stat.v5-level .symbol.v8-stat-logo{background:linear-gradient(135deg,#fff6d6,#f4dc96)!important;border:1px solid #ead084}
.top .stats .stat .symbol.v8-stat-logo.v8-logo-money{background:linear-gradient(135deg,#fbf2d4,#efd892);border:1px solid #e5cb7c}
.top .stats .stat .symbol.v8-stat-logo.v8-logo-pop{background:linear-gradient(135deg,#e9f4e4,#cfe4c5);border:1px solid #bdd6b1}
.top .stats .stat .symbol.v8-stat-logo.v8-logo-happy[data-mood="happy"]{background:linear-gradient(135deg,#e6f6e4,#c7e8c3);border:1px solid #a8d8a2}
.top .stats .stat .symbol.v8-stat-logo.v8-logo-happy[data-mood="normal"]{background:linear-gradient(135deg,#fff6d9,#f5df99);border:1px solid #e6cb78}
.top .stats .stat .symbol.v8-stat-logo.v8-logo-happy[data-mood="unhappy"]{background:linear-gradient(135deg,#fde8e4,#f6c8be);border:1px solid #eaada0}
#happy-mood-label{font-weight:600;transition:color .2s ease}
#happy-mood-label[data-mood="happy"]{color:#3a7d44}
#happy-mood-label[data-mood="normal"]{color:#a67b27}
#happy-mood-label[data-mood="unhappy"]{color:#c04836}

/* Nút "Ẩn" đồng bộ cho Thanh trên (header.top), Thanh trái (nav.side) & Bảng phải (.business-overview) */
.v8-side-head{display:flex;width:100%;align-items:center;justify-content:center;margin-bottom:3px}
.v8-side-head .side-toggle{display:none!important}
.v8-hide-btn{width:auto!important;margin:0!important;padding:5px 11px!important;height:26px!important;border-radius:8px!important;background:#eef2e3!important;color:#547048!important;border:1px solid #dce4cb!important;font-size:10.5px!important;font-weight:600!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:none!important;cursor:pointer!important;box-shadow:0 1px 2px rgba(45,75,55,.06)!important;transition:background .15s ease,transform .15s ease,color .15s ease!important;white-space:nowrap!important}
.v8-hide-btn:hover{background:#e1ead0!important;color:#385430!important;transform:translateY(-1px)}
#v8-side-hide.v8-hide-btn{width:100%!important;height:28px!important;border-radius:9px!important}
#v8-top-hide.v8-hide-btn{margin-left:8px!important;height:30px!important;padding:0 12px!important;border-radius:10px!important}

.business-overview{position:relative}
.business-overview .v8-biz-head{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin-bottom:2px}
.business-overview .v8-biz-head .eyebrow{margin:0;flex:1;min-width:0;line-height:1.2}
.business-overview .v8-biz-head #v8-biz-hide.v8-hide-btn{width:auto!important;margin-top:0!important;padding:4px 10px!important;height:24px!important;font-size:10px!important;border-radius:7px!important;flex:none!important}

/* Nút biểu tượng nổi khôi phục bảng (Top, Left, Right) */
#v8-side-pill,#v8-biz-pill,#v8-top-pill{position:absolute;z-index:26;height:44px;border-radius:14px;background:#fffcf3f5;border:1.5px solid #e5dec8;box-shadow:0 8px 24px #28422b28;cursor:pointer;display:none;align-items:center;justify-content:center;gap:6px;padding:0;transition:transform .18s ease,box-shadow .18s ease,top .22s ease;color:#4d6b53;font-size:11px;font-weight:600}
#v8-side-pill,#v8-biz-pill{width:44px;display:none;place-items:center}
#v8-top-pill{top:max(14px,env(safe-area-inset-top,0px));left:max(18px,env(safe-area-inset-left,0px));padding:0 13px 0 9px;width:auto}
#v8-side-pill:hover,#v8-biz-pill:hover,#v8-top-pill:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 28px #28422b38}
#v8-side-pill svg,#v8-biz-pill svg,#v8-top-pill svg{width:26px;height:26px;display:block;flex:none}
#v8-side-pill{left:max(18px,env(safe-area-inset-left,0px));top:106px}
#v8-biz-pill{right:max(18px,env(safe-area-inset-right,0px));top:150px}

body.v8-side-hidden nav.side{display:none!important}
body.v8-side-hidden #v8-side-pill{display:grid}
body.v8-side-hidden{--vx-left:24px}
body.v8-side-hidden .left-note{left:72px}

body.v8-biz-hidden aside.right{display:none!important}
body.v8-biz-hidden #v8-biz-pill{display:grid}

body.v8-top-hidden header.top{display:none!important}
body.v8-top-hidden #v8-top-pill{display:inline-flex}
body.v8-top-hidden nav.side{top:68px;max-height:calc(100dvh - 88px)}
body.v8-top-hidden .side-scroll{max-height:calc(100dvh - 130px)}
body.v8-top-hidden #v8-side-pill{top:68px}
body.v8-top-hidden .left-note{top:20px;left:138px}
body.v8-top-hidden.v8-side-hidden .left-note{left:138px}
body.v8-top-hidden #v72-friends-btn{top:18px}
body.v8-top-hidden #v72-friends{top:18px}
body.v8-top-hidden aside.right{top:62px}
body.v8-top-hidden #v8-biz-pill{top:62px}
body.v8-top-hidden .shop-inspector{top:62px;max-height:calc(100dvh - 76px)}
body.v8-top-hidden .life-banner{top:18px}

body.v6-zen #v8-side-pill,body.v6-zen #v8-biz-pill,body.v6-zen #v8-top-pill,body.v72-visiting #v8-side-pill,body.v72-visiting #v8-biz-pill{display:none!important}

@media(max-width:768px){
 .top .stats .stat .symbol.v8-stat-logo{display:grid!important;width:28px;height:28px;border-radius:9px}
 .top .stats .stat .symbol.v8-stat-logo svg{width:20px;height:20px}
 #v8-top-hide.v8-hide-btn{margin-left:4px!important;height:26px!important;padding:0 8px!important;font-size:10px!important}
 #v8-top-pill{top:max(8px,env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));height:38px;padding:0 10px 0 7px;border-radius:12px;font-size:10px}
 #v8-side-pill{left:max(8px,env(safe-area-inset-left,0px));top:74px;width:40px;height:40px;border-radius:12px}
 #v8-biz-pill{right:max(10px,env(safe-area-inset-right,0px));top:114px;width:40px;height:40px;border-radius:12px}
 #v8-side-pill svg,#v8-biz-pill svg,#v8-top-pill svg{width:22px;height:22px}
 body:not(.v8-biz-hidden) aside.right{display:flex!important;position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:114px;width:min(225px,calc(100vw - 76px));z-index:24;max-height:calc(100dvh - 190px);overflow-y:auto}
 body.v8-side-hidden .left-note{left:56px;top:74px}
 body.v8-top-hidden nav.side,body.v8-top-hidden #v8-side-pill{top:54px}
 body.v8-top-hidden #v72-friends-btn,body.v8-top-hidden #v72-friends{top:10px}
 body.v8-top-hidden aside.right,body.v8-top-hidden #v8-biz-pill{top:50px}
}
@media(max-height:540px){
 #v8-top-pill{top:6px;height:34px}
 #v8-side-pill{top:58px;width:36px;height:36px}
 #v8-biz-pill{top:96px;width:36px;height:36px}
 body:not(.v8-biz-hidden) aside.right{display:flex!important;top:96px;max-height:calc(100dvh - 110px)}
 body.v8-top-hidden nav.side,body.v8-top-hidden #v8-side-pill{top:46px}
 body.v8-top-hidden aside.right,body.v8-top-hidden #v8-biz-pill{top:46px;max-height:calc(100dvh - 58px)}
}
#catalog .item.v84-cap-reached { opacity: 0.62; } #catalog .item.v84-cap-reached .price { color: #b94a48; font-weight: 700; }


/* ==========================================================================
   1Citizen v8.5 — Modern Bright Pastel UI & Mobile Web Browser Optimization
   ========================================================================== */
:root {
  --ui-surface: rgba(255, 255, 255, 0.90);
  --ui-surface-strong: rgba(255, 255, 255, 0.96);
  --ui-surface-soft: #f8fafc;
  --ui-border: rgba(255, 255, 255, 0.95);
  --ui-stroke: #e2e8f0;
  --ui-text: #1e293b;
  --ui-text-sub: #64748b;
  --ui-accent: #10b981;
  --ui-accent-dark: #059669;
  --ui-accent-soft: #ecfdf5;
  --ui-warm: #f59e0b;
  --ui-warm-soft: #fffbeb;
  --ui-coral: #f97316;
  --ui-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --ui-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
}

body {
  font-family: "Plus Jakarta Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ui-text);
  background: #9ad4d6;
}

/* 1. Thanh Header phía trên (header.top) */
header.top {
  background: var(--ui-surface) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1.5px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  border-radius: 20px !important;
  padding: 0 20px;
  gap: 16px;
}

.brand b {
  color: #0f172a !important;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.brand small {
  color: #64748b !important;
  font-weight: 600;
  letter-spacing: 1.4px;
}

.city-title {
  color: #334155 !important;
  font-weight: 700;
}

.city-title small {
  color: #64748b !important;
}

#v6-avatar {
  background: linear-gradient(135deg, #f0fdf4, #e0f2fe) !important;
  border: 1px solid #bae6fd !important;
  border-radius: 999px !important;
  padding: 4px 12px 4px 4px !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#v6-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

#v6-avatar b {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.v6-av {
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.top .stats {
  gap: 20px;
}

.top .stat {
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid #e2e8f0;
  padding: 5px 12px 5px 7px;
  border-radius: 14px;
  gap: 9px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.top .stat:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.stat strong {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 1.15;
}

.stat small {
  color: #64748b !important;
  font-weight: 500;
  margin-top: 2px;
}

.top .stats .stat .symbol.v8-stat-logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.top .stats .stat.v5-level .symbol.v8-stat-logo {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border: 1px solid #fcd34d !important;
}

.top .stats .stat .symbol.v8-stat-logo.v8-logo-money {
  background: linear-gradient(135deg, #fef9c3, #fde047) !important;
  border: 1px solid #facc15 !important;
}

.top .stats .stat .symbol.v8-stat-logo.v8-logo-pop {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border: 1px solid #86efac !important;
}

.top .stats .stat .symbol.v8-stat-logo.v8-logo-happy[data-mood="happy"] {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  border: 1px solid #6ee7b7 !important;
}

.top .stats .stat .symbol.v8-stat-logo.v8-logo-happy[data-mood="normal"] {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border: 1px solid #fcd34d !important;
}

.top .stats .stat .symbol.v8-stat-logo.v8-logo-happy[data-mood="unhappy"] {
  background: linear-gradient(135deg, #ffe4e6, #fecdd3) !important;
  border: 1px solid #fda4af !important;
}

/* 2. Thanh công cụ bên trái (nav.side) */
nav.side {
  background: var(--ui-surface) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1.5px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  border-radius: 18px !important;
  padding: 6px !important;
}

.side .nav {
  color: #475569 !important;
  border-radius: 12px !important;
  font-weight: 600;
  transition: all 0.16s ease;
}

.side .nav span {
  font-weight: 600;
  color: inherit;
}

.side .nav:hover:not(.active) {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

.side .nav.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.32) !important;
}

/* 3. Nút "Ẩn" đồng bộ & Nút Pill khôi phục */
.v8-hide-btn {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.v8-hide-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

#v8-side-pill, #v8-biz-pill, #v8-top-pill {
  background: var(--ui-surface-strong) !important;
  backdrop-filter: blur(14px);
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: var(--ui-shadow) !important;
  color: #1e293b !important;
}

/* 4. Bảng Nhịp sống bên phải (.card, .business-overview) & Bộ sưu tập (.left-note) */
.left-note {
  background: var(--ui-surface) !important;
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  border-radius: 999px !important;
  padding: 8px 15px !important;
  color: #334155 !important;
}

.collection-chip {
  color: #0f766e !important;
  font-weight: 600;
}

.collection-chip b {
  color: #d97706 !important;
  font-weight: 700 !important;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
}

.card {
  background: var(--ui-surface) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1.5px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  border-radius: 20px !important;
}

.eyebrow {
  color: #0d9488 !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
}

.card h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.business-overview .revenue-number {
  color: #059669 !important;
  font-weight: 700;
}

.business-overview button {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 11px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.business-overview button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.32);
}

.business-overview .warehouse-shortcut {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  box-shadow: none !important;
}

/* 5. Bảng Xây dựng phía dưới (section.bottom, .item, .tabs) */
section.bottom {
  background: var(--ui-surface-strong) !important;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1.5px solid var(--ui-border) !important;
  box-shadow: 0 -4px 32px rgba(15, 23, 42, 0.10), 0 12px 32px rgba(15, 23, 42, 0.12) !important;
  border-radius: 22px !important;
}

.palette-handle {
  background: var(--ui-surface-strong) !important;
  color: #0f766e !important;
  border: 1.5px solid #e2e8f0 !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08) !important;
}

.palette-top {
  border-bottom: 1px solid #e2e8f0 !important;
}

.tab {
  color: #64748b !important;
  font-weight: 600;
  transition: color 0.15s ease;
}

.tab:hover {
  color: #0f172a !important;
}

.tab.active {
  color: #059669 !important;
  font-weight: 800 !important;
}

.tab.active:after {
  background: linear-gradient(90deg, #10b981, #059669) !important;
  height: 3px !important;
  border-radius: 99px !important;
}

.item {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  color: #1e293b !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

.item:hover {
  transform: translateY(-3px) !important;
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
}

.item.selected {
  background: #ecfdf5 !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.16) !important;
}

.item .name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.item .item-effect {
  color: #0d9488 !important;
  font-weight: 500;
}

.item .price {
  color: #d97706 !important;
  font-weight: 700 !important;
}

.lot-size {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #475569 !important;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  border-radius: 6px !important;
}

.build-info {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px !important;
  color: #475569 !important;
}

.build-info b {
  color: #0f766e !important;
}

/* 6. Cụm nút điều khiển bản đồ (.controls, .control) */
.control {
  background: var(--ui-surface-strong) !important;
  backdrop-filter: blur(12px);
  border: 1px solid #e2e8f0 !important;
  border-radius: 11px !important;
  color: #334155 !important;
  font-weight: 700;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: transform 0.14s ease, background 0.14s ease;
}

.control:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

.control.enabled {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #6ee7b7 !important;
}

/* 7. Bảng chi tiết & Thu tiền công trình (#shop-inspector) */
.shop-inspector {
  background: var(--ui-surface-strong) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1.5px solid var(--ui-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  padding: 20px !important;
}

.shop-heading button {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  width: 28px !important;
  height: 28px !important;
  font-weight: 700;
}

.shop-heading button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.shop-hero h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.bank-box {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4) !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 14px !important;
  padding: 13px !important;
  color: #065f46 !important;
}

.bank-box .bank-amount {
  color: #059669 !important;
  font-weight: 700 !important;
}

.bank-actions button {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 8px !important;
  border: 0 !important;
}

.shop-revenue {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}

.shop-revenue strong {
  color: #059669 !important;
}

.v5-fac {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border: 1px solid #fde68a !important;
  border-radius: 14px !important;
}

.v5-up {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

/* 8. Modals, Bạn bè (#v72-friends) & Khung thời tiết/chat (#v7-dock) */
.modal-bg {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(6px) !important;
}

.modal {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.22) !important;
  color: #1e293b !important;
}

.modal h2 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.modal p {
  color: #475569 !important;
}

.modal .row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px !important;
  padding: 12px 15px !important;
}

.modal button {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 11px !important;
}

.modal .close {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

.v6-tabs button {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-weight: 600;
  border-radius: 10px !important;
}

.v6-tabs button.on {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}

#v7-dock, #v72-friends, #v72-friends-btn, #v7-pill {
  background: var(--ui-surface-strong) !important;
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: #1e293b !important;
}

.toast {
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

/* ==========================================================================
   9. TỐI ƯU GIAO DIỆN MOBILE WEB BROWSER (<= 768px) — KHÔNG CHỒNG LẤN
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --vx-left: 62px;
    --vx-panel-h: 215px;
  }

  /* 9a. Thanh Header trên Mobile: gọn gàng, 4 chỉ số hiển thị đầy đủ 100%, không cắt chữ */
  header.top {
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    height: 48px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    border-radius: 14px !important;
    justify-content: space-between;
  }

  header.top .brand {
    min-width: 0 !important;
    gap: 0 !important;
    flex-shrink: 0;
  }

  /* Ẩn chữ 1Citizen dài trên mobile để nhường chỗ cho 4 chỉ số, giữ lại Logo biểu tượng */
  header.top .brand > div,
  header.top .city-title,
  header.top .divider,
  header.top .save,
  header.top #v6-savechip {
    display: none !important;
  }

  header.top .logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }

  header.top #v6-avatar {
    margin-left: 2px !important;
    padding: 2px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  header.top #v6-avatar div,
  header.top #v6-avatar b,
  header.top #v6-avatar small {
    display: none !important;
  }

  header.top .v6-av {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  header.top .stats {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: space-around;
    align-items: center;
    gap: 4px !important;
    margin-left: 2px !important;
    min-width: 0;
  }

  header.top .stat {
    padding: 3px 6px 3px 4px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    min-width: 0;
    flex: 0 1 auto;
  }

  header.top .stat small,
  header.top .v5-xpbar,
  header.top #v5-xptext {
    display: none !important;
  }

  header.top .stats .stat .symbol.v8-stat-logo {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
  }

  header.top .stats .stat .symbol.v8-stat-logo svg {
    width: 17px !important;
    height: 17px !important;
  }

  header.top .stat strong {
    font-size: 11.5px !important;
    white-space: nowrap;
    letter-spacing: -0.3px;
  }

  header.top .stat.v5-level strong {
    font-size: 11px !important;
  }

  #v8-top-hide.v8-hide-btn {
    margin-left: 2px !important;
    height: 26px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
  }

  /* 9b. Thanh công cụ trái trên Mobile */
  nav.side {
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    top: 60px !important;
    width: 48px !important;
    padding: 4px !important;
    border-radius: 14px !important;
    max-height: calc(100dvh - 126px) !important;
    z-index: 12 !important;
  }

  .side-scroll {
    max-height: calc(100dvh - 166px) !important;
    gap: 2px !important;
  }

  .side .nav {
    width: 38px !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .side .nav span {
    font-size: 7.5px !important;
    margin-top: 2px !important;
  }

  #v8-side-hide.v8-hide-btn {
    height: 24px !important;
    font-size: 9.5px !important;
    padding: 0 4px !important;
  }

  /* Ẩn chip Bộ sưu tập mùa hè khi đang mở bảng xây dựng hoặc inspector trên mobile để thoáng bản đồ */
  .left-note {
    left: 60px !important;
    top: 60px !important;
    padding: 5px 10px !important;
    font-size: 9.5px !important;
    max-width: calc(100vw - 130px) !important;
  }

  body:not(.palette-collapsed) .left-note,
  body.shop-open .left-note {
    display: none !important;
  }

  #v72-friends-btn {
    top: 60px !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    height: 32px;
    padding: 0 10px !important;
  }

  #v8-side-pill {
    top: 60px !important;
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    width: 38px !important;
    height: 38px !important;
  }

  #v8-biz-pill {
    top: 98px !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    width: 38px !important;
    height: 38px !important;
  }

  /* 9c. Thanh nút điều khiển Camera (.controls) trên Mobile: 1 hàng ngang gọn gàng */
  .controls {
    left: 60px !important;
    right: 56px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px !important;
    max-width: calc(100vw - 116px) !important;
    z-index: 11 !important;
  }

  .controls::-webkit-scrollbar {
    display: none;
  }

  /* Rút gọn bớt các nút phụ trên mobile để không tràn 2 dòng */
  .controls #zoom,
  .controls #home,
  .controls #facing {
    display: none !important;
  }

  body:not(.palette-collapsed) .controls {
    bottom: calc(var(--vx-panel-h) + 36px) !important;
    right: 8px !important;
    max-width: calc(100vw - 68px) !important;
  }

  .control {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    border-radius: 9px !important;
    flex-shrink: 0;
  }

  .control.wide {
    font-size: 9px !important;
    padding: 0 8px !important;
    height: 30px !important;
  }

  /* 9d. Bảng Xây dựng (section.bottom) trên Mobile */
  section.bottom {
    --pw: calc(100vw - 12px) !important;
    left: 6px !important;
    right: 6px !important;
    width: calc(100vw - 12px) !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 10px 8px !important;
    border-radius: 18px !important;
    z-index: 20 !important;
  }

  .palette-top {
    height: 40px !important;
    margin-bottom: 6px !important;
  }

  .tabs {
    gap: 12px !important;
  }

  .tab {
    font-size: 11px !important;
  }

  .item {
    height: 118px !important;
    min-width: 98px !important;
    padding: 6px 7px !important;
    border-radius: 12px !important;
  }

  .item img, .item svg {
    height: 58px !important;
  }

  .item .name {
    font-size: 10px !important;
  }

  .item .item-effect {
    font-size: 8.5px !important;
  }

  .item .price {
    font-size: 9.5px !important;
  }

  .build-info {
    min-height: 28px !important;
    max-height: 36px !important;
    margin-top: 5px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  /* 9e. Bảng Chi tiết & Thu tiền cửa hàng (#shop-inspector) dạng Bottom Sheet hiện đại trên Mobile */
  .shop-inspector {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68dvh, calc(100dvh - 68px)) !important;
    z-index: 45 !important;
    border-radius: 22px !important;
    padding: 15px 16px !important;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.25), 0 10px 30px rgba(15, 23, 42, 0.20) !important;
    animation: mobileSheetUp 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @keyframes mobileSheetUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Khi đang mở #shop-inspector trên Mobile: ẩn gọn ngăn xây dựng, nút điều khiển dưới và nút chat để không bao giờ đè nhau */
  body.shop-open section.bottom,
  body.shop-open .palette-handle,
  body.shop-open .controls,
  body.shop-open #v7-dock,
  body.shop-open #v7-pill,
  body.shop-open aside.right {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }

  .shop-hero {
    margin: 8px 0 10px !important;
    gap: 10px !important;
  }

  .shop-hero img, .shop-hero svg {
    width: 64px !important;
    height: 60px !important;
  }

  .shop-hero h3 {
    font-size: 17px !important;
    margin-bottom: 4px !important;
  }

  .bank-box {
    padding: 10px 12px !important;
    margin: 8px 0 !important;
  }

  .bank-box .bank-amount {
    font-size: 20px !important;
    margin: 3px 0 !important;
  }

  .shop-revenue {
    padding: 10px 12px !important;
  }

  .shop-revenue strong {
    font-size: 22px !important;
    margin: 3px 0 !important;
  }

  .shop-counters {
    margin: 10px 0 !important;
  }

  .shop-counters strong {
    font-size: 17px !important;
  }
}

/* ===== v8.6.1 — mobile safety overrides (khắc phục nút điều khiển bị khoá & nút mở bảng xây dựng bị đè) ===== */
@media (max-width: 800px) {
  body:not(.shop-open) .controls { pointer-events: auto !important; }
  body:not(.shop-open) .control { pointer-events: auto !important; }
  body.palette-collapsed #v7-dock { bottom: 46px !important; right: 8px !important; }
  body.palette-collapsed .palette-handle { z-index: 31 !important; }
  body.palette-collapsed .bottom { transform: translateY(100%) !important; bottom: 0 !important; }
  body:not(.palette-collapsed) .bottom { transform: none !important; }
}

/* ===== v8.6.2 — XẾP CHỒNG DẢI DƯỚI MOBILE (handle -> controls -> dock) & HEADER 4 CHỈ SỐ KHÔNG CẮT CHỮ ===== */
@media (max-width: 800px) {
  /* Nút "Mở bảng xây dựng" thành pill cố định giữa mép dưới, tầng cao nhất, không ai đè được */
  body.palette-collapsed .palette-handle {
    position: fixed !important; top: auto !important; bottom: 6px !important;
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    height: 34px !important; max-width: 72vw !important; padding: 0 16px !important;
    border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18) !important; z-index: 46 !important;
  }
  /* Cụm nút điều khiển: 1 hàng ngang cuộn được, nằm TRÊN handle, trọn trong màn hình */
  body.palette-collapsed .controls {
    bottom: 46px !important; left: 9px !important; right: 9px !important; max-width: none !important;
    flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important;
    pointer-events: auto !important;
  }
  body.palette-collapsed .controls::-webkit-scrollbar { display: none; }
  body.palette-collapsed .control { flex: 0 0 auto !important; }
  /* Dock thời tiết/chat ngồi TRÊN cùng của dải dưới, gọn 1 hàng */
  body.palette-collapsed #v7-dock { bottom: 88px !important; left: 9px !important; right: 9px !important; max-width: none !important; }
  #v7-dock { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 !important; border-radius: 16px !important; }
  /* Khi MỞ bảng xây dựng: controls ngồi sát trên panel, cuộn ngang nếu chật */
  body:not(.palette-collapsed) .controls {
    bottom: calc(var(--vx-panel-h, 215px) + 12px) !important; left: 9px !important; right: 9px !important;
    max-width: none !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important;
  }
  body:not(.palette-collapsed) .controls::-webkit-scrollbar { display: none; }
  /* Màn ngang thấp: bỏ dock để đủ chỗ */
  @media (max-height: 450px) {
    body.palette-collapsed #v7-dock { display: none !important; }
    body.palette-collapsed .controls { bottom: 42px !important; }
  }
  /* Header: 4 ô chỉ số hiển thị ĐỦ chữ kể cả 360px */
  header.top .stats { gap: 3px !important; }
  header.top .stat { padding: 2px 5px !important; gap: 3px !important; min-width: 0 !important; flex: 0 1 auto !important; }
  header.top .stat strong { font-size: 10.5px !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; letter-spacing: -0.2px !important; }
  header.top .stat small { display: none !important; }
  header.top .stats .stat .symbol, header.top .stats .stat .symbol.v8-stat-logo { width: 20px !important; height: 20px !important; border-radius: 6px !important; flex: 0 0 20px !important; }
  header.top .stats .stat .symbol svg, header.top .stats .stat .symbol.v8-stat-logo svg { width: 13px !important; height: 13px !important; }
}

/* ==========================================================================
   v8.7 — ◎ VÒNG QUAY MAY MẮN  &  ✦ NHIỆM VỤ HẰNG NGÀY
   ========================================================================== */
.v87-nav{position:relative}
.v87-dot{position:absolute;top:3px;right:5px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#d9694a;color:#fff8ea;font:700 9px/15px "Trebuchet MS",Arial,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #fffcf4;pointer-events:none}
.v87-dot[hidden]{display:none}
#v87-wheel-nav{color:#b08a3c}
#v87-quest-nav{color:#7d9a6a}
#v87-wheel-nav:hover,#v87-quest-nav:hover{background:#f4edcf}

.modal:has(.v87-wheel){width:min(486px,94vw)}
.modal:has(.v87-quest){width:min(470px,94vw)}
.modal:has(.v87-wheel),.modal:has(.v87-quest){max-height:min(92dvh,880px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d6d0b4 transparent;padding:26px 26px 22px;position:relative}
.modal:has(.v87-wheel)::-webkit-scrollbar,.modal:has(.v87-quest)::-webkit-scrollbar{width:8px}
.modal:has(.v87-wheel)::-webkit-scrollbar-thumb,.modal:has(.v87-quest)::-webkit-scrollbar-thumb{background:#d6d0b4;border-radius:8px}
.v87-wheel h2,.v87-quest h2{font-size:25px;margin:4px 0 8px;color:#4d6b59}
.v87-lead{font-size:11.5px;line-height:1.75;color:#7b8a6d;margin:0 0 4px}
.v87-lead b{color:#a8762f;font-weight:600}
.v87-note{font-size:10px;line-height:1.7;color:#a2a184;margin:12px 0 0}
.v87-note b{color:#7d8a68}
.v87-empty{font-size:10.5px;color:#b0ae93;margin:6px 0}

/* --- Bánh xe --- */
.v87-stage{position:relative;width:min(252px,60vw);margin:14px auto 4px;aspect-ratio:1/1}
.v87-rim,.v87-rotor{position:absolute;inset:0}
.v87-rim{filter:drop-shadow(0 7px 16px #4a5a4429)}
.v87-rotor{will-change:transform;z-index:2}
.v87-svg{display:block;width:100%;height:100%;overflow:visible}
.v87-bulb{animation:v87blink 1.7s ease-in-out infinite}
@keyframes v87blink{0%,100%{opacity:.42}50%{opacity:1}}
.v87-pointer{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:21px solid #c0553b;z-index:5;filter:drop-shadow(0 2px 2px #00000033)}
.v87-pointer:after{content:'';position:absolute;left:-6px;top:-21px;width:12px;height:6px;border-radius:3px 3px 0 0;background:#8f3a26}
.modal .v87-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:33%;aspect-ratio:1/1;margin:0;padding:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffdf4 8%,#efe6c6 68%,#ded0a4);border:3px solid #b9922f;color:#5c4a12;box-shadow:0 4px 0 #a5811f66,0 10px 20px #3f554230;display:grid;place-content:center;gap:1px;z-index:6;transition:transform .12s,box-shadow .12s}
.v87-hub b{font:400 clamp(11px,3.1vw,16px)/1.15 Georgia,serif;letter-spacing:.4px}
.v87-hub small{font-size:9px;color:#8a7440;white-space:nowrap}
.v87-hub:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.045);box-shadow:0 5px 0 #a5811f77,0 13px 24px #3f55423a}
.v87-hub:active:not(:disabled){transform:translate(-50%,-50%) scale(.965);box-shadow:0 2px 0 #a5811f66,0 6px 14px #3f55422a}
.v87-hub:disabled{opacity:.5;cursor:not-allowed}
.v87-hub.free{border-color:#6f9a63;background:radial-gradient(circle at 34% 28%,#fdfef6 8%,#e2eed9 68%,#c9dcbc);color:#3d5c34}
.v87-hub.free small{color:#5f7a52}

/* --- Chọn số lượt --- */
.v87-batch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0 2px}
.v87-blabel{font-size:9px;letter-spacing:1.1px;color:#a5a486;text-transform:uppercase;margin-right:2px}
.modal .v87-batch button{margin:0;padding:0;min-width:44px;height:32px;border-radius:9px;background:#f0eeda;border:1.5px solid #e2dfc4;color:#8b8a68;font-size:11.5px;font-weight:700;transition:.14s}
.modal .v87-batch button:hover{background:#e7ecd9;color:#5f7a4f}
.modal .v87-batch button.on{background:#4d7756;border-color:#3d6247;color:#fffdf0;box-shadow:0 3px 0 #35563e44}
.modal .v87-batch .v87-snd{min-width:34px;background:#fbf6e4;border-color:#ece0bd;color:#b08a3c;font-weight:400;font-size:13px}

/* --- HUD --- */
.v87-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 0}
.v87-hud>div{background:#f4f1de;border:1px solid #e8e4cc;border-radius:11px;padding:9px 8px;text-align:center}
.v87-hud small{display:block;font-size:8.5px;letter-spacing:.9px;color:#a3a184;text-transform:uppercase}
.v87-hud b{display:block;font-size:13px;color:#5d6b55;margin-top:4px;font-weight:600;white-space:nowrap}
.v87-pity-note{font-size:10px;color:#a08a5c;background:#fdf6e2;border:1px dashed #ecd9a4;border-radius:9px;padding:7px 10px;margin:9px 0 0;text-align:center}
.v87-pity-note b{color:#8d6f2c}

/* --- Kết quả --- */
.v87-result{margin:13px 0 0;background:#f6f4e6;border:1px solid #e6e2c9;border-radius:13px;padding:12px 13px;animation:v87pop .32s cubic-bezier(.2,1.4,.4,1)}
.v87-result[hidden]{display:none}
.v87-result.good{background:#fdf7e4;border-color:#edd9a3}
.v87-result.big{background:linear-gradient(180deg,#fff3cf,#ffe6b0);border-color:#e6bd63;box-shadow:0 0 0 3px #f3d38a44}
@keyframes v87pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.v87-rhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.v87-rhead span{font-size:9px;letter-spacing:1.2px;color:#a09a78;text-transform:uppercase}
.v87-rhead b{font:400 26px/1 Georgia,serif;color:#7c9551}
.v87-result.big .v87-rhead b{color:#a5761c}
.v87-rlist{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:132px;overflow-y:auto}
.v87-rlist li{display:flex;align-items:center;gap:8px;background:#fffcf1cc;border:1px solid #ece7d0;border-radius:9px;padding:5px 9px}
.v87-rlist li span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex:none}
.v87-rlist li b{font-size:12px;color:#5d6b55;font-weight:600}
.v87-rlist li em{font-style:normal;font-size:10px;color:#a89a6c;margin-left:auto}
.v87-rlist li small{font-size:9.5px;color:#a9a88c;min-width:82px;text-align:right}
.v87-rfoot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:9px;border-top:1px dashed #ddd7ba}
.v87-rfoot span{font-size:10px;color:#9a987c}
.v87-rfoot b{font:400 18px/1 Georgia,serif;color:#6f8f52}
.v87-capwarn{font-size:9.5px;color:#b06a4a;margin:8px 0 0}

/* --- Bảng tỉ lệ --- */
.v87-tablewrap{margin:14px 0 0;background:#fbf9ec;border:1px solid #ece7d0;border-radius:13px;overflow:hidden}
.v87-thead{display:flex;justify-content:space-between;gap:8px;padding:8px 11px;background:#f0eeda;border-bottom:1px solid #e6e1c8;font-size:8.5px;letter-spacing:1px;color:#98977a;text-transform:uppercase}
.v87-thead span:last-child{color:#a8863f;letter-spacing:.3px;text-transform:none;font-size:9.5px}
.v87-table{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#eee9d4}
.v87-trow{display:flex;align-items:center;gap:7px;background:#fffcf1;padding:6px 9px}
.v87-tsw{width:22px;height:22px;border-radius:6px;border:1px solid;display:grid;place-items:center;font-size:12px;flex:none}
.v87-trow b{font-size:11px;color:#5d6b55;font-weight:600;white-space:nowrap}
.v87-trow small{font-size:9px;color:#a9a88c;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v87-trow em{font-style:normal;font-size:9.5px;color:#a8863f;background:#fbf3dd;border-radius:6px;padding:2px 5px;white-space:nowrap}

/* --- Thống kê + lịch sử --- */
.v87-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:11px 0 0}
.v87-stats>div{background:#f4f1de;border:1px solid #e8e4cc;border-radius:10px;padding:7px 6px;text-align:center}
.v87-stats small{display:block;font-size:8.5px;letter-spacing:.7px;color:#a3a184;text-transform:uppercase}
.v87-stats b{display:block;font-size:12px;color:#5d6b55;margin-top:3px;font-weight:600}
.v87-stats b.up{color:#6f8f52}
.v87-stats b.down{color:#b4705a}
.v87-hist{margin:11px 0 0}
.v87-hlabel{display:block;font-size:8.5px;letter-spacing:1.1px;color:#a5a486;text-transform:uppercase;margin-bottom:6px}
.v87-hist i{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:9.5px;border-radius:7px;padding:3px 6px;margin:0 4px 4px 0;border:1px solid #e6e1c8;white-space:nowrap}

/* --- Confetti --- */
.v87-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:9;border-radius:22px}
.v87-confetti i{position:absolute;top:-12px;border-radius:2px;animation:v87fall linear forwards;opacity:.95}
@keyframes v87fall{0%{transform:translateY(-12px) rotate(0);opacity:1}100%{transform:translateY(680px) rotate(720deg);opacity:0}}

/* ==========================================================================
   ✦ NHIỆM VỤ HẰNG NGÀY
   ========================================================================== */
.v87-qhead{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 4px}
.v87-qhead>div{background:#f4f1de;border:1px solid #e8e4cc;border-radius:11px;padding:8px 5px;text-align:center}
.v87-qhead small{display:block;font-size:8.5px;letter-spacing:.8px;color:#a3a184;text-transform:uppercase}
.v87-qhead b{display:block;font-size:12.5px;color:#5d6b55;margin-top:3px;font-weight:600;white-space:nowrap}
.v87-qlist{display:flex;flex-direction:column;gap:7px;margin:11px 0 0}
.v87-q{display:flex;align-items:center;gap:10px;background:#fbf9ec;border:1.5px solid #ece7d0;border-radius:13px;padding:9px 11px;transition:.16s}
.v87-q.done{background:#f6f8ea;border-color:#b7cc9f}
.v87-q.claimed{background:#f4f3e6;border-color:#e6e4cd;opacity:.72}
.v87-qicon{width:34px;height:34px;flex:none;border-radius:10px;background:#eef0df;display:grid;place-items:center;font-size:17px;color:#6f8a5d}
.v87-q.done .v87-qicon{background:#dfe9cf;color:#4f7a3f}
.v87-qbody{flex:1;min-width:0}
.v87-qbody b{display:block;font-size:11.5px;color:#5c6b52;font-weight:600;line-height:1.4}
.v87-qbar{height:5px;border-radius:5px;background:#e8e5cf;overflow:hidden;margin:6px 0 4px}
.v87-qbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#a2b67d,#7d9a6a);transition:width .35s}
.v87-q.done .v87-qbar i{background:linear-gradient(90deg,#8fbf6a,#5f9a45)}
.v87-qbody small{display:block;font-size:9.5px;color:#a3a184}
.v87-qbody small b{display:inline;font-size:9.5px;color:#a8863f}
.modal .v87-qclaim{margin:0;padding:0;min-width:56px;height:34px;border-radius:9px;background:#4d7756;color:#fffdf0;font-size:11px;font-weight:700;flex:none;box-shadow:0 3px 0 #35563e44;animation:v87pulse 1.6s ease-in-out infinite}
.modal .v87-qclaim:hover{background:#3f6347}
@keyframes v87pulse{0%,100%{box-shadow:0 3px 0 #35563e44,0 0 0 0 #8fbf6a66}50%{box-shadow:0 3px 0 #35563e44,0 0 0 6px #8fbf6a00}}
.v87-qok{font-size:10px;color:#8ba377;flex:none;white-space:nowrap}
.v87-qwait{font-size:10px;color:#b0ae93;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}

.v87-chest{display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:11px 13px;border-radius:14px;background:linear-gradient(135deg,#fdf3d6,#f7e7bd);border:1.5px solid #ecd396}
.v87-chest>span{font-size:26px;flex:none;filter:grayscale(.55);opacity:.75;transition:.3s}
.v87-chest.opened>span{filter:none;opacity:1}
.v87-chest div{flex:1;min-width:0}
.v87-chest b{display:block;font-size:12px;color:#8a6a22}
.v87-chest small{display:block;font-size:9.5px;color:#a89463;margin-top:3px}
.v87-chest em{display:block;font-style:normal;font-size:10px;color:#7d8a68;margin-top:5px;background:#fffcf199;border-radius:7px;padding:4px 7px}
.v87-chest.opened{background:linear-gradient(135deg,#eaf3dd,#dcebc9);border-color:#b7cc9f}
.v87-chest.opened b{color:#4f7a3f}
.v87-chest.pop{animation:v87chest .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes v87chest{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}

.v87-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.modal .v87-actions button{margin:0;flex:1;min-width:130px}
.modal .v87-actions .v87-primary{background:#4d7756;color:#fffdf0;box-shadow:0 3px 0 #35563e44}
.modal .v87-actions .v87-primary:hover{background:#3f6347}
.modal .v87-actions .neutral{background:#eae9d9;color:#787d64;flex:0 0 auto;min-width:82px}

/* --- Mobile --- */
@media(max-width:800px){
  .modal:has(.v87-wheel),.modal:has(.v87-quest){padding:20px 16px 18px;max-height:88dvh}
  .v87-wheel h2,.v87-quest h2{font-size:21px}
  .v87-stage{width:min(224px,64vw)}
  .v87-hud,.v87-stats{grid-template-columns:repeat(3,1fr);gap:5px}
  .v87-hud b{font-size:11.5px}
  .v87-stats b{font-size:11px}
  .v87-qhead{grid-template-columns:repeat(2,1fr)}
  .v87-table{grid-template-columns:1fr}
  .v87-rlist li small{min-width:66px}
  .v87-rhead b{font-size:22px}
  .modal .v87-qclaim{min-width:52px;height:38px}
  .v87-q{padding:9px}
}
@media(max-width:360px){
  .v87-stage{width:min(200px,72vw)}
  .v87-batch button{min-width:38px}
}
@media(prefers-reduced-motion:reduce){
  .v87-bulb,.modal .v87-qclaim{animation:none}
  .v87-rotor{transition:none!important}
  .v87-confetti{display:none}
}

/* v8.7 — màn hình thấp (điện thoại xoay ngang): thu bánh xe để thấy trọn không cần cuộn */
@media(max-height:600px){
  .modal:has(.v87-wheel),.modal:has(.v87-quest){padding:16px 18px 14px;max-height:94dvh}
  .v87-wheel h2,.v87-quest h2{font-size:19px;margin:2px 0 5px}
  .v87-lead{font-size:10.5px;line-height:1.6}
  .v87-stage{width:min(168px,33vh);margin:8px auto 2px}
  .v87-hub b{font-size:11px}
  .v87-hub small{font-size:8px}
  .v87-batch{margin:8px 0 0}
  .modal .v87-batch button{height:32px;min-width:40px;font-size:10.5px}
  .modal .v87-batch .v87-snd{min-width:34px}
  .v87-hud{gap:5px;margin:8px 0 0}
  .v87-hud>div{padding:6px 5px}
  .v87-hud b{font-size:11.5px}
  .v87-pity-note{font-size:9px;padding:5px 8px;margin:6px 0 0}
  .v87-result{margin:8px 0 0;padding:9px 10px}
  .v87-rhead b{font-size:20px}
  .v87-rlist{max-height:74px}
  .v87-tablewrap{margin:9px 0 0}
  .v87-trow{padding:4px 8px}
  .v87-stats{margin:8px 0 0}
  .v87-qhead{margin:8px 0 0}
  .v87-qlist{gap:5px;margin:8px 0 0}
  .v87-q{padding:7px 9px}
  .v87-chest{margin:8px 0 0;padding:9px 11px}
  .v87-actions{margin-top:9px}
}
@media(max-height:600px) and (min-width:700px){
  .modal:has(.v87-wheel){width:min(560px,95vw)}
  .v87-wheel-cols{display:block}
}

/* ==========================================================================
   v8.7 — hoà nhập theme modal hiện hành (trắng / slate / emerald)
   Theme cũ ép `.modal button{...!important}` nên các nút riêng của vòng quay
   và nhiệm vụ cần khai báo !important để giữ hình dạng thiết kế.
   ========================================================================== */
.v87-wheel h2,.v87-quest h2{color:#0f172a!important;font-weight:700!important}
.v87-lead{color:#475569!important}
.v87-lead b{color:#b45309}
.v87-note{color:#64748b!important}
.v87-note b{color:#0f766e}

.modal .v87-hub{background:radial-gradient(circle at 34% 28%,#fffdf4 8%,#f3ead0 66%,#e2d3a8)!important;color:#7a5a12!important;border:3px solid #d3a83c!important;border-radius:50%!important;padding:0!important;margin:0!important;box-shadow:0 4px 0 rgba(180,140,40,.35),0 10px 22px rgba(15,23,42,.18)!important}
.modal .v87-hub b{color:#7a5a12!important;font-weight:700}
.modal .v87-hub small{color:#a16207!important}
.modal .v87-hub:hover:not(:disabled){background:radial-gradient(circle at 34% 28%,#fffef9 8%,#f7efdb 66%,#e8dab2)!important}
.modal .v87-hub.free{background:radial-gradient(circle at 34% 28%,#f6fef9 8%,#dcf5e7 66%,#bfe9d2)!important;border-color:#0d9668!important;color:#065f46!important}
.modal .v87-hub.free b,.modal .v87-hub.free small{color:#065f46!important}
.modal .v87-hub:disabled{background:#e2e8f0!important;color:#94a3b8!important;border-color:#cbd5e1!important}

.modal .v87-batch button{background:#f1f5f9!important;color:#475569!important;border:1.5px solid #e2e8f0!important;border-radius:10px!important;font-weight:700}
.modal .v87-batch button:hover{background:#e2e8f0!important;color:#0f172a!important}
.modal .v87-batch button.on{background:linear-gradient(135deg,#10b981,#059669)!important;color:#fff!important;border-color:#059669!important;box-shadow:0 3px 10px rgba(16,185,129,.28)}
.modal .v87-batch .v87-snd{background:#fffbeb!important;color:#b45309!important;border-color:#fcd34d!important}

.v87-hud>div{background:#f8fafc;border:1px solid #e2e8f0}
.v87-hud small{color:#64748b}
.v87-hud b{color:#0f172a}
.v87-pity-note{background:#fffbeb;border:1px dashed #fcd34d;color:#92400e}
.v87-pity-note b{color:#b45309}

.v87-result{background:#f8fafc;border:1px solid #e2e8f0}
.v87-result.good{background:#fffbeb;border-color:#fcd34d}
.v87-result.big{background:linear-gradient(180deg,#fffbeb,#fde68a);border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.v87-rhead span{color:#64748b}
.v87-rhead b{color:#059669}
.v87-result.big .v87-rhead b{color:#b45309}
.v87-rlist li{background:#fff;border:1px solid #e2e8f0}
.v87-rlist li b{color:#0f172a}
.v87-rlist li em{color:#64748b}
.v87-rlist li small{color:#94a3b8}
.v87-rfoot{border-top:1px dashed #cbd5e1}
.v87-rfoot span{color:#64748b}
.v87-rfoot b{color:#047857}
.v87-capwarn{color:#b91c1c}

.v87-tablewrap{background:#f8fafc;border:1px solid #e2e8f0}
.v87-thead{background:#f1f5f9;border-bottom:1px solid #e2e8f0;color:#64748b}
.v87-thead span:last-child{color:#0f766e}
.v87-table{background:#e2e8f0}
.v87-trow{background:#fff}
.v87-tsw{border:1px solid #e2e8f0}
.v87-trow b{color:#0f172a}
.v87-trow small{color:#94a3b8}
.v87-trow em{background:#ecfdf5;color:#047857}

.v87-stats>div{background:#f8fafc;border:1px solid #e2e8f0}
.v87-stats small{color:#64748b}
.v87-stats b{color:#0f172a}
.v87-stats b.up{color:#047857}
.v87-stats b.down{color:#b91c1c}
.v87-hlabel{color:#64748b}
.v87-hist i{border:1px solid #e2e8f0}
.v87-empty{color:#94a3b8}

.v87-qhead>div{background:#f8fafc;border:1px solid #e2e8f0}
.v87-qhead small{color:#64748b}
.v87-qhead b{color:#0f172a}
.v87-q{background:#f8fafc;border:1.5px solid #e2e8f0}
.v87-q.done{background:#ecfdf5;border-color:#a7f3d0}
.v87-q.claimed{background:#f8fafc;border-color:#e2e8f0;opacity:.7}
.v87-qicon{background:#f1f5f9;color:#475569}
.v87-q.done .v87-qicon{background:#d1fae5;color:#047857}
.v87-qbody b{color:#0f172a}
.v87-qbar{background:#e2e8f0}
.v87-qbar i{background:linear-gradient(90deg,#34d399,#059669)}
.v87-qbody small{color:#64748b}
.v87-qbody small b{color:#b45309}
.modal .v87-qclaim{background:linear-gradient(135deg,#10b981,#059669)!important;color:#fff!important;border-radius:10px!important;box-shadow:0 3px 10px rgba(16,185,129,.28);animation:none}
.modal .v87-qclaim:hover{background:linear-gradient(135deg,#0ea371,#047857)!important}
.v87-qok{color:#047857}
.v87-qwait{color:#94a3b8}
.v87-chest{background:linear-gradient(135deg,#fffbeb,#fde68a);border:1.5px solid #fcd34d}
.v87-chest b{color:#92400e}
.v87-chest small{color:#a16207}
.v87-chest em{background:rgba(255,255,255,.65);color:#065f46}
.v87-chest.opened{background:linear-gradient(135deg,#ecfdf5,#a7f3d0);border-color:#34d399}
.v87-chest.opened b{color:#065f46}
.v87-actions .v87-primary{border-radius:11px!important}
.modal .v87-actions .neutral{background:#f1f5f9!important;color:#475569!important;border-radius:11px!important}

/* nút dock vòng quay / nhiệm vụ theo theme thanh trái */
#v87-wheel-nav{color:#b45309}
#v87-quest-nav{color:#0f766e}
.v87-dot{background:#f59e0b;color:#fff;box-shadow:0 0 0 2px var(--ui-surface-strong,#fffcf4)}

/* ==========================================================================
   1Citizen v8.9.0 — 🏠 CHUYỂN NHANH NHÀ BẠN BÈ · 🕵 TRỘM ·
   TỐI ƯU BỐ CỤC DESKTOP (PC) KHÔNG CHỒNG LẤN · ZEN MODE · ANIMATION VÒNG QUAY
   ========================================================================== */

/* 1. Chế độ ngắm cảnh (Zen mode — bấm đúp #world hoặc phím H): ẩn sạch mọi thanh giao diện */
body.v6-zen .palette-handle,
body.v6-zen #v72-visitbar,
body.v6-zen #v6-welcome-banner,
body.v6-zen .remove-mode,
body.v6-zen #v7-pill,
body.v6-zen #v8-top-pill,
body.v6-zen #v8-side-pill,
body.v6-zen #v8-biz-pill {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Animation Vòng quay may mắn: luôn quay mượt ngay cả khi hệ điều hành bật prefers-reduced-motion */
.v87-stage .v87-rotor {
  transform-origin: 50% 50%;
  will-change: transform;
}
.v87-stage.spinning .v87-pointer {
  animation: v88PointerTick 0.14s ease-in-out infinite alternate;
  transform-origin: 50% 0%;
}
@keyframes v88PointerTick {
  from { transform: translateX(-50%) rotate(-7deg); }
  to { transform: translateX(-50%) rotate(5deg); }
}

/* 3. Bố cục Desktop / PC (> 768px): chống chồng lấn tuyệt đối trên mọi độ phân giải 1024px–1920px+ */
@media (min-width: 769px) {
  /* 3a. Tách rời nút "👥 Bạn bè" (#v72-friends-btn) và bảng "Nhịp sống phố nhỏ" (aside.right) */
  #v72-friends-btn {
    top: 102px !important;
    right: 22px !important;
    height: 32px !important;
    padding: 0 13px !important;
    z-index: 26 !important;
  }
  body.v72-fopen #v72-friends-btn {
    right: min(334px, calc(100vw - 110px)) !important;
  }
  aside.right {
    top: 142px !important;
    right: 22px !important;
    z-index: 24 !important;
  }
  body.v8-top-hidden #v72-friends-btn {
    top: 18px !important;
  }
  body.v8-top-hidden aside.right {
    top: 58px !important;
  }
  body.v8-top-hidden #v8-biz-pill {
    top: 58px !important;
  }
  #v8-biz-pill {
    top: 142px !important;
    right: 22px !important;
  }

  /* 3b. Đặt #v6-welcome-banner và .toast gọn gàng phía dưới .left-note để không đè lên nhau */
  #v6-welcome-banner,
  .toast {
    top: 148px !important;
    z-index: 28 !important;
  }
  body.v8-top-hidden #v6-welcome-banner,
  body.v8-top-hidden .toast {
    top: 66px !important;
  }

  /* 3c. Khi ẩn bảng xây dựng (palette-collapsed): xếp nút "⌃ Mở bảng xây dựng" cố định sát mép dưới (bottom: 8px),
     và đặt cụm .controls phía trên (bottom: 50px) với khoảng đệm 8px không bao giờ chạm nhau */
  body.palette-collapsed section.bottom {
    bottom: 0 !important;
    transform: translateY(100%) !important;
  }
  body.palette-collapsed .palette-handle {
    position: fixed !important;
    top: auto !important;
    bottom: 8px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    height: 34px !important;
    padding: 0 20px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important;
    z-index: 26 !important;
  }
  body:not(.v6-zen).palette-collapsed .palette-handle {
    pointer-events: auto !important;
  }
  body.palette-collapsed .controls {
    bottom: 50px !important;
    left: var(--vx-left, 98px) !important;
    max-width: calc(100vw - var(--vx-left, 98px) - 310px) !important;
  }
  body.palette-collapsed .hint {
    bottom: 50px !important;
    left: auto !important;
    right: 320px !important;
    transform: none !important;
  }

  /* Khi mở bảng xây dựng: đẩy .controls cao hơn mặt trên của section.bottom + .palette-handle */
  body:not(.palette-collapsed) .controls {
    bottom: 306px !important;
    left: var(--vx-left, 98px) !important;
    max-width: calc(100vw - var(--vx-left, 98px) - 310px) !important;
  }
  body:not(.palette-collapsed) .hint {
    bottom: 306px !important;
    left: auto !important;
    right: 320px !important;
    transform: none !important;
  }
}

/* 3d. Màn hình PC cỡ vừa (769px – 1380px): tinh chỉnh header.top không tràn phải & không ép dọc tên thị trấn */
@media (min-width: 769px) and (max-width: 1380px) {
  header.top {
    left: 16px !important;
    right: 16px !important;
    padding: 0 14px !important;
    gap: 10px !important;
  }
  header.top .brand {
    min-width: 0 !important;
    flex-shrink: 0;
  }
  header.top .brand-title,
  header.top .city-title,
  header.top .divider,
  header.top #v6-savechip {
    display: none !important;
  }
  header.top .stats {
    gap: 8px !important;
    margin-left: auto !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }
  header.top .stat {
    padding: 4px 9px 4px 6px !important;
    gap: 7px !important;
    min-width: 0;
    flex: 0 1 auto;
  }
  header.top .stat strong {
    font-size: 14px !important;
    white-space: nowrap;
  }
  header.top .stat small {
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 118px;
  }
  header.top .v5-xpbar {
    width: 72px !important;
  }
  header.top .save {
    padding: 9px 11px !important;
    font-size: 11px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (min-width: 769px) and (max-width: 1140px) {
  header.top .stat small,
  header.top .v5-xpbar,
  header.top #v5-xptext {
    display: none !important;
  }
  header.top .stats .stat .symbol.v8-stat-logo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
  }
  header.top .stats .stat .symbol.v8-stat-logo svg {
    width: 22px !important;
    height: 22px !important;
  }
  section.bottom {
    --pw: min(640px, calc(100vw - 410px)) !important;
    left: var(--vx-left, 98px) !important;
    right: auto !important;
    width: var(--pw) !important;
  }
}

/* 3e. Màn hình PC có chiều cao <= 900px (1440x900, 1366x768, 1280x800, 1024x768):
   thu gọn thẻ "Nhịp sống phố nhỏ" (aside.right) và #v7-dock để không bao giờ đè nhau */
@media (min-width: 769px) and (max-height: 900px) {
  aside.right {
    top: 138px !important;
    width: 220px !important;
    max-height: calc(100dvh - 365px) !important;
  }
  aside.right .business-overview {
    padding: 12px 14px !important;
    max-height: calc(100dvh - 365px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  aside.right .business-overview h3 {
    font-size: 16px !important;
    margin: 4px 0 !important;
  }
  aside.right .business-overview .revenue-label {
    margin-top: 8px !important;
    font-size: 8.5px !important;
  }
  aside.right .business-overview .revenue-number {
    font-size: 24px !important;
    margin: 3px 0 !important;
  }
  aside.right .business-overview .mini-divider {
    margin: 8px 0 !important;
  }
  aside.right .business-overview .metric-row {
    margin: 6px 0 !important;
    font-size: 10.5px !important;
  }
  aside.right .business-overview button {
    margin-top: 8px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
  }
  aside.right .business-overview p {
    display: none !important;
  }
  #v7-dock {
    bottom: 14px !important;
    right: 18px !important;
    width: 280px !important;
  }
  #v7-dock .v7-log {
    height: 82px !important;
  }
}

/* 4. Thanh tham quan & Chuyển nhanh thành phố bạn bè (#v72-visitbar.v88-bar) */
#v72-visitbar.v88-bar {
  position: fixed !important;
  top: 98px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 32 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  max-width: min(860px, calc(100vw - 24px));
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px);
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
  color: #1e293b !important;
}
body.v8-top-hidden #v72-visitbar.v88-bar {
  top: 16px !important;
}
#v72-visitbar.v88-bar .v88-home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 11px !important;
  padding: 7px 11px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
#v72-visitbar.v88-bar .v88-home:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
#v72-visitbar.v88-bar .v88-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  padding: 4px 6px;
}
#v72-visitbar.v88-bar .v88-arrow {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: grid;
  place-items: center;
}
#v72-visitbar.v88-bar .v88-arrow:hover:not(:disabled) {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #059669 !important;
}
#v72-visitbar.v88-bar .v88-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#v72-visitbar.v88-bar .v88-cur {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  min-width: 0;
}
#v72-visitbar.v88-bar .v88-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
#v72-visitbar.v88-bar .v88-curtxt {
  display: block;
  min-width: 0;
}
#v72-visitbar.v88-bar .v88-curtxt b {
  display: block;
  font-size: 12px !important;
  color: #0f172a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
#v72-visitbar.v88-bar .v88-curtxt small {
  display: block;
  font-size: 9.5px !important;
  color: #64748b !important;
  white-space: nowrap;
}
#v72-visitbar.v88-bar .v88-steal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 7px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.28);
}
#v72-visitbar.v88-bar .v88-steal-btn.off {
  background: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: none !important;
}
#v72-visitbar.v88-bar .v88-steal-btn i {
  font-style: normal;
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.18);
  color: inherit;
}
#v72-visitbar.v88-bar .v88-chips {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 4px;
  border-top: 1px dashed #e2e8f0;
}
#v72-visitbar.v88-bar .v88-chips::-webkit-scrollbar {
  display: none;
}
#v72-visitbar.v88-bar .v88-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 3px 9px 3px 5px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
#v72-visitbar.v88-bar .v88-chip:hover {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
}
#v72-visitbar.v88-bar .v88-chip.done {
  opacity: 0.68;
}
#v72-visitbar.v88-bar .v88-chip i {
  font-style: normal;
  color: #10b981;
  font-weight: 800;
  margin-left: 2px;
}

@media (max-width: 800px) {
  body:not(.v8-biz-hidden) aside.right {
    top: 98px !important;
    max-height: calc(100dvh - 340px) !important;
  }
  /* Trên mobile, thanh công cụ trái dừng phía trên dải #v7-dock / .controls để không đè lên nhau kể cả màn hình 360x640 */
  body.palette-collapsed #v7-dock {
    left: 62px !important;
    right: 9px !important;
    width: auto !important;
  }
  body.palette-collapsed nav.side {
    max-height: calc(100dvh - 156px) !important;
  }
  body.palette-collapsed .side-scroll {
    max-height: calc(100dvh - 196px) !important;
  }
  /* Khi mở bảng xây dựng trên mobile: ẩn tạm thẻ Nhịp sống và thanh #v7-dock để nhường trọn không gian dưới cho ngăn kéo xây dựng + nút điều khiển */
  body:not(.palette-collapsed) aside.right,
  body:not(.palette-collapsed) #v7-dock {
    display: none !important;
  }
  body:not(.palette-collapsed) nav.side {
    max-height: calc(100dvh - 325px) !important;
  }
  body:not(.palette-collapsed) .side-scroll {
    max-height: calc(100dvh - 365px) !important;
  }
  #v72-visitbar.v88-bar {
    top: 60px !important;
    width: calc(100vw - 16px) !important;
    padding: 6px 8px !important;
    gap: 5px !important;
  }
  #v72-visitbar.v88-bar .v88-home,
  #v72-visitbar.v88-bar .v88-steal-btn,
  #v72-visitbar.v88-bar .v88-arrow,
  #v72-visitbar.v88-bar .v88-chip {
    width: auto !important;
  }
  #v72-visitbar.v88-bar .v88-home span {
    display: none;
  }
  #v72-visitbar.v88-bar .v88-curtxt b {
    max-width: 118px;
  }
}

/* 5. Modal "Trộm doanh thu" (.v88-steal) */
.modal:has(.v88-steal) {
  width: min(490px, 94vw);
  max-height: min(90dvh, 840px);
  overflow-y: auto;
  padding: 24px 24px 20px;
}
.v88-steal h2 {
  margin: 4px 0 8px;
  font-size: 24px;
  color: #0f172a !important;
}
.v88-lead {
  font-size: 11.5px;
  line-height: 1.65;
  color: #475569 !important;
  margin: 0 0 10px;
}
.v88-quota {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 12px;
}
.v88-quota > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  padding: 8px 6px;
  text-align: center;
}
.v88-quota small {
  display: block;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #64748b;
}
.v88-quota b {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #0f172a;
}
.v88-tlist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 280px;
  overflow-y: auto;
  margin: 10px 0;
  padding-right: 2px;
}
.modal .v88-target {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 13px !important;
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.modal .v88-target:hover:not(:disabled) {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  transform: translateY(-1px);
}
.modal .v88-target.taken {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}
.v88-tico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fef3c7;
  color: #b45309;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.v88-tbody {
  flex: 1;
  min-width: 0;
}
.v88-tbody b {
  display: block;
  font-size: 12px;
  color: #0f172a;
}
.v88-tbody small {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}
.v88-tloot {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.v88-result {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1.5px solid #fcd34d;
  color: #78350f;
}
.v88-result[hidden] {
  display: none !important;
}
.v88-rhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.v88-rhead span {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #b45309;
}
.v88-rhead b {
  font-size: 22px;
  color: #047857;
}
.v88-block {
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 11.5px;
  color: #475569;
  line-height: 1.6;
  margin: 10px 0;
}
.v88-note {
  font-size: 10px !important;
  line-height: 1.65 !important;
  color: #64748b !important;
  margin: 10px 0 0 !important;
}
.v88-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.modal .v88-actions .v88-ghost {
  margin: 0 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
}

/* v8.9.0: Inline Budget/Coin SVG icon + 3-tab Account Modal layout */
.v89-coin-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  line-height: 1;
  flex-shrink: 0;
  width: var(--coin-sz, 15px);
  height: var(--coin-sz, 15px);
}
.v89-coin-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.v6-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.v88-arrow:disabled,
.v88-chip:disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   1Citizen v1.0.3 —
   1. Thanh kéo ngang (Horizontal Scrollbar) + nút điều hướng cho 9 Danh mục xây dựng (#tabs)
   2. Ẩn "#v6-savechip" & Thay bằng Nút Bản Cập Nhật + 3 Logo Liên Hệ Trực Tiếp
   3. Kênh Chat Thế Giới (hiển thị theo Tên Thành Phố) + Kênh Thị Trấn
   ========================================================================== */

/* 1. Thanh kéo ngang (Horizontal Scrollbar) cho 9 Danh mục xây dựng (#tabs) */
section.bottom .palette-top {
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

section.bottom .tabs,
#tabs {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 4px 6px 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 #f1f5f9 !important;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

section.bottom .tabs:active,
#tabs:active {
  cursor: grabbing;
}

section.bottom .tabs::-webkit-scrollbar,
#tabs::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}

section.bottom .tabs::-webkit-scrollbar-track,
#tabs::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 999px !important;
}

section.bottom .tabs::-webkit-scrollbar-thumb,
#tabs::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 999px !important;
}

section.bottom .tabs::-webkit-scrollbar-thumb:hover,
#tabs::-webkit-scrollbar-thumb:hover {
  background: #10b981 !important;
}

section.bottom .tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 4px 6px !important;
  font-size: 11.5px !important;
  border-radius: 8px;
  position: relative;
}

section.bottom .tab.active:after {
  bottom: -3px !important;
}

.v10-tab-nav {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.v10-tab-nav:hover:not(:disabled) {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #6ee7b7 !important;
}

.v10-tab-nav:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
}

/* 2. Ẩn triệt để #v6-savechip & Thiết kế cụm Bản cập nhật + 3 Logo Liên hệ */
#v6-savechip,
header.top #v6-savechip {
  display: none !important;
}

.v10-creator-bar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 8px 4px 6px;
  margin-left: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.v10-update-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.v10-update-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.22);
}

.v10-up-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
  flex-shrink: 0;
}

.v10-social-logos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.v10-logo-link {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  flex-shrink: 0;
}

.v10-logo-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.v10-logo-link:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: #94a3b8;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.14);
}

/* Modal Bản cập nhật & Liên hệ Tác giả */
.modal:has(.v10-update-modal) {
  width: min(520px, 94vw) !important;
  max-height: min(90dvh, 820px);
  overflow-y: auto;
  padding: 24px 24px 22px !important;
}

.v10-update-modal h2 {
  font-size: 22px !important;
  margin: 4px 0 8px !important;
  color: #0f172a !important;
}

.v10-update-lead {
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 0 12px !important;
}

.v10-changelog {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 15px;
  margin-bottom: 14px;
}

.v10-changelog h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #0f766e;
}

.v10-changelog ul {
  margin: 0;
  padding-left: 18px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #334155;
}

.v10-changelog li {
  margin-bottom: 5px;
}

.v10-contact-card {
  background: linear-gradient(135deg, #f0fdf4, #eff6ff);
  border: 1.5px solid #bae6fd;
  border-radius: 16px;
  padding: 14px 15px;
}

.v10-contact-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
}

.v10-contact-sub {
  font-size: 11px !important;
  color: #475569 !important;
  margin: 4px 0 10px !important;
  line-height: 1.5 !important;
}

.v10-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v10-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 11px 8px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  text-decoration: none;
  color: #0f172a;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.v10-contact-item:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.15);
}

.v10-c-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.v10-c-ico svg {
  width: 34px;
  height: 34px;
  display: block;
}

.v10-contact-item b {
  display: block;
  font-size: 11.5px;
  color: #0f172a;
}

.v10-contact-item small {
  display: block;
  font-size: 9.5px;
  color: #64748b;
  margin-top: 2px;
}

/* 3. Kênh Chat Thế Giới (#v7-dock) */
.v10-chat-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 10px 4px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.v10-ch-tab {
  flex: 1;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.v10-ch-tab:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

.v10-ch-tab.active {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

#v7-dock .v10-wmsg .v10-wtown b {
  color: #0284c7;
  font-weight: 700;
}

#v7-dock .v10-wmsg.v7-me .v10-wtown b {
  color: #059669;
}

@media (max-width: 1200px) {
  .v10-update-btn span:last-child {
    display: none;
  }
  .v10-update-btn {
    padding: 6px !important;
  }
}

@media (max-width: 768px) {
  section.bottom .palette-top {
    height: 44px !important;
    gap: 5px !important;
  }
  .v10-tab-nav {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
  }
  .v10-creator-bar {
    padding: 2px 5px;
    gap: 4px;
    margin-left: 2px;
  }
  .v10-update-btn {
    display: none !important;
  }
  .v10-logo-link {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .v10-logo-link svg {
    width: 16px;
    height: 16px;
  }
  .v10-contact-grid {
    grid-template-columns: 1fr;
  }
}





/* ==========================================================================
   1Citizen v1.0.4 — TỐI ƯU KHUNG CHAT & NÚT MỞ CHAT TRÊN MOBILE / TABLET
   ========================================================================== */
#v7-mob-chat-fab {
  display: none;
}

@media (max-width: 800px) {
  /* 1. Luôn hiển thị nút 💬 Chat nổi góc phải (dưới nút 🏪 Nhịp sống) trên thiết bị di động */
  #v7-mob-chat-fab {
    position: fixed !important;
    top: 142px !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1.5px solid #a7f3d0 !important;
    background: linear-gradient(135deg, #ffffff, #ecfdf5) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16) !important;
    color: #059669 !important;
    font-size: 18px !important;
    display: grid !important;
    place-items: center !important;
    z-index: 35 !important;
    cursor: pointer;
    padding: 0 !important;
  }
  body.v8-top-hidden #v7-mob-chat-fab {
    top: 98px !important;
  }
  body.v6-zen #v7-mob-chat-fab,
  body.shop-open #v7-mob-chat-fab {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #v7-mob-chat-fab .v10-chat-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #ffffff;
  }

  /* 2. Sửa nút #v7-pill không bị kẹt khi ẩn dock trên mobile */
  body.v7-dock-hidden #v7-pill {
    display: none !important;
  }

  /* 3. Khung #v7-dock trên mobile: xếp dọc chuẩn (Header thời tiết ở trên, Kênh Thế Giới + Ô nhập tin nhắn ở dưới) */
  #v7-dock {
    position: fixed !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    left: 58px !important;
    right: 8px !important;
    width: auto !important;
    bottom: 86px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    z-index: 34 !important;
    max-height: calc(100dvh - 154px) !important;
    overflow: hidden !important;
  }

  body.v7-dock-hidden #v7-dock {
    display: none !important;
  }

  /* Khi đang mở bảng xây dựng nhưng người chơi chủ động bấm mở Chat (.v7-chat-open-mob), vẫn hiển thị khung chat nổi phía trên */
  body:not(.palette-collapsed):not(.v7-chat-open-mob) #v7-dock {
    display: none !important;
  }
  body:not(.palette-collapsed).v7-chat-open-mob #v7-dock {
    display: flex !important;
    bottom: 12px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 48 !important;
  }

  #v7-dock .v7-wx {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 9px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #v7-dock .v7-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  #v7-dock .v7-wxt b {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #v7-dock .v7-wxt small {
    font-size: 9px !important;
    margin-top: 1px !important;
  }

  /* Làm nổi bật nút 💬 trên thanh thời tiết mobile kèm nhãn "Chat" để người chơi dễ nhận biết */
  #v7-dock .v7-toggle {
    width: auto !important;
    min-width: 58px !important;
    height: 28px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28) !important;
  }
  #v7-dock .v7-toggle::after {
    content: "Chat";
    font-size: 10.5px;
    font-weight: 700;
  }

  #v7-dock .v7-chat {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  #v7-dock .v7-log {
    height: 120px !important;
    max-height: 32dvh !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }

  #v7-dock .v7-form {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  /* Font-size 16px trên ô input mobile để Safari iOS không bị tự động phóng to (auto-zoom) lệch màn hình khi gõ chat */
  #v7-dock .v7-form input {
    font-size: 16px !important;
    padding: 6px 10px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }

  #v7-dock .v7-form button {
    width: 38px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }
}