:root{--bg:#091510;--panel:#12271ff0;--gold:#d6be85;--faint-gold:#8e7c51;--line:#a28b524a;--text:#f1eddd;--muted:#b1baa8;--jade:#9bc7ae;--serif:'Noto Serif',Georgia,serif;color-scheme:dark;font-family:'Be Vietnam Pro',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:radial-gradient(ellipse at 0 60%,#24433630,transparent 55%),#091510;color:var(--text);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}body::before{content:'';position:fixed;inset:0;background:linear-gradient(#091510b8,#091510ed),url('img/xianni-scene.png') center/cover;z-index:-1;pointer-events:none}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}img{display:block;max-width:100%}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.page-width{width:min(1240px,calc(100% - 80px));margin-inline:auto}.skip:not(:focus){position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.skip:focus{position:fixed;top:8px;left:8px;background:var(--gold);color:#15251d;padding:10px;z-index:99}:focus-visible{outline:2px solid var(--gold);outline-offset:5px}::selection{background:#d6be85;color:#15271e}
.topbar{background:#0c1a15ef;border-bottom:1px solid #8c784643}.topbar-inner{height:83px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:13px;font:600 25px var(--serif);letter-spacing:1px}.brand img{width:38px;height:38px}.brand-dot{color:var(--gold)}.topnav{display:flex;align-items:center;gap:32px}.topnav a{font-family:var(--serif);font-size:13px;color:#c0c4b4;padding:27px 3px;position:relative;transition:color .2s}.topnav a::after{content:'';position:absolute;bottom:17px;height:1px;left:20%;right:20%;background:linear-gradient(90deg,transparent,#cdb67d,transparent);opacity:0;transition:opacity .2s}.topnav a.selected,.topnav a:hover{color:#e4c98c}.topnav a.selected::after,.topnav a:hover::after{opacity:1}.topbar-right{display:flex;gap:19px;align-items:center}.clock{color:#afb9a6;font-size:11px}.small-avatar{width:35px;height:35px;padding:2px;border:1px solid #b59d68;border-radius:50%;background:#1b3328}.small-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-header{height:465px;position:relative;margin:28px 0 34px;border:1px solid #a18b575e;background:#0a1712;isolation:isolate;overflow:hidden}.profile-header::before,.profile-header::after{content:'';position:absolute;width:33px;height:33px;border:2px solid #bc9d5e;z-index:5;pointer-events:none}.profile-header::before{left:7px;top:7px;border-bottom:0;border-right:0}.profile-header::after{right:7px;bottom:7px;border-top:0;border-left:0}.hero-art{position:absolute;inset:0;z-index:-3;background:url('img/xianni-scene.png') center 48%/cover no-repeat;animation:landscape-in 1.2s ease-out both}.hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#091510d9 0%,#091510a8 30%,#0915101a 63%,transparent),linear-gradient(0deg,#07130ee6,transparent 34%,transparent 85%,#07130e22)}.hero-body{position:relative;padding:43px 48px;width:65%;z-index:2}.hero-label{font-family:var(--serif);font-size:10px;letter-spacing:3px;color:#cdbb86;display:flex;align-items:center;gap:14px;margin-bottom:20px}.label-ornament{font-size:15px;color:#b8a16e;letter-spacing:0}h1{font:500 64px/1.2 var(--serif);letter-spacing:-2px;margin:0 0 24px;text-shadow:0 3px 22px #07140c}h1>span{font-size:84px;line-height:1.2;color:#ead7a6;background:linear-gradient(#f4e8bf,#baa06a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-person{display:flex;align-items:center;gap:12px;color:#d1d6c6;font-size:11px}.hero-person>img{width:37px;height:37px;border-radius:50%;object-fit:cover;padding:2px;border:1px solid #ab9562;background:#233a2d}.person-divider{color:#847c59;padding:0 11px}.person-detail{font-size:10px;color:#afbba9}.hero-buttons{display:flex;gap:13px;margin-top:26px}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:45px;padding:11px 21px;border:1px solid #ad965b;font-family:var(--serif);font-size:12px;font-weight:500;position:relative;background:#1d3629;isolation:isolate;transition:transform .25s,box-shadow .25s,color .25s;white-space:nowrap;border-radius:2px;box-shadow:inset 0 0 0 3px #14251b,inset 0 0 0 4px #ac945335;overflow:hidden}.button::before,.button::after{content:'';position:absolute;width:8px;height:8px;border:1px solid #e4ca88;pointer-events:none;transition:width .3s,height .3s}.button::before{top:3px;left:3px;border-right:0;border-bottom:0}.button::after{bottom:3px;right:3px;border-left:0;border-top:0}.button svg{width:17px;height:17px}.primary{background:linear-gradient(120deg,#d6be84,#ebd7a6 48%,#bda16c);border-color:#d4bb7e;color:#253325;box-shadow:inset 0 0 0 3px #d7be88,inset 0 0 0 4px #867040,0 4px 16px #0003}.primary::before,.primary::after{border-color:#745e30}.primary:hover{box-shadow:inset 0 0 0 3px #d7be88,inset 0 0 0 4px #867040,0 0 28px #d6bd7b35;transform:translateY(-2px)}.button:hover::before,.button:hover::after{width:14px;height:14px}.button:active{transform:translateY(1px)}.secondary{color:#dfc994;background:linear-gradient(130deg,#264535b0,#14291fe8);border-color:#ad9256}.secondary:hover{background:#294c39;color:#ffebbb}.hero-bottom{position:absolute;bottom:18px;left:48px;right:35px;display:flex;align-items:center;gap:15px;justify-content:space-between;color:#abb396;font:8px var(--serif);letter-spacing:2px}.hero-cross{font-size:10px;color:#a78b53;position:relative;flex:1;text-align:center;max-width:120px}.hero-cross::before,.hero-cross::after{content:'';position:absolute;top:50%;height:1px;width:35%;background:linear-gradient(90deg,transparent,#ad945d)}.hero-cross::before{left:0}.hero-cross::after{right:0;transform:rotate(180deg)}.hero-small-seal{font-family:serif;font-size:17px;color:#ac7559;border:1px solid #ac755966;width:24px;height:28px;text-align:center;letter-spacing:0}.hero-mist{position:absolute;bottom:0;left:-10%;width:120%;height:120px;background:radial-gradient(ellipse at 30% 90%,#82aa8b12,transparent 65%);z-index:-1;pointer-events:none;animation:mist 18s ease-in-out infinite alternate}.formation{position:absolute;right:11%;top:31px;width:270px;height:270px;border:1px solid #e3c4821c;border-radius:50%;pointer-events:none;z-index:-2;animation:turn 90s linear infinite}.formation::before,.formation::after{content:'';position:absolute;inset:9px;border:1px dashed #d8c18738;border-radius:50%}.formation::after{inset:26px;border-style:solid}.formation>span{position:absolute;inset:44px;border:1px solid #d6be8530;transform:rotate(45deg)}
.dashboard{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start}.sidebar{display:flex;flex-direction:column;gap:23px}.main-column{min-width:0}.panel{position:relative;isolation:isolate;padding:25px;background:linear-gradient(145deg,#213a2b55,transparent 65%),#10241cee;border:1px solid #9a87574d;box-shadow:inset 0 0 0 5px #0e201a,inset 0 0 0 6px #bca16c16,0 12px 30px #0002}.panel::before,.panel::after{content:'';position:absolute;width:12px;height:12px;border:1px solid #c1a76e;pointer-events:none;z-index:3}.panel::before{top:4px;left:4px;border-right:0;border-bottom:0}.panel::after{bottom:4px;right:4px;border-left:0;border-top:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.panel-heading h2{font:500 16px var(--serif);color:#e2d0a1;margin:0;display:flex;gap:11px;align-items:center}.heading-icon{display:flex;color:#bda46d}.heading-icon svg{width:18px;height:18px}.panel-dots{color:#8f845f;letter-spacing:2px;font-size:10px}.contact-list{display:flex;flex-direction:column;gap:6px}.contact-item{display:flex;align-items:center;gap:11px;min-height:63px;padding:11px 0;background:transparent;border:0;width:100%;text-align:left}.contact-icon{display:grid;place-items:center;width:35px;height:38px;border:1px solid #b49a5a44;background:linear-gradient(120deg,#768d5730,#26413335);color:#d4c697;flex-shrink:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}.contact-icon svg{width:18px;height:18px}.contact-value{min-width:0}.contact-value small{display:block;font-size:10px;color:#a7b7a0;margin-bottom:4px}.contact-value strong{font-size:11px;font-weight:400;overflow-wrap:anywhere;color:#e4e6d3;display:block}.end-icon{width:14px;height:14px;margin-left:auto;color:#b6a36e}.contact-item:hover .end-icon{color:#f1d891}.social-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px;padding-top:20px;border-top:1px solid #b8a0652b}.social-buttons a{display:flex;align-items:center;gap:9px;min-height:43px;padding:9px;border:1px solid #aa925544;color:#d7d7bd;font-size:11px;background:linear-gradient(145deg,#3b4e3033,#233c2c33);box-shadow:inset 0 0 0 2px #0c211b;transition:background .25s,border-color .25s}.social-buttons a:hover{border-color:#c8af75;background:#4d613d44}.social-buttons a svg{width:13px;height:13px;margin-left:auto;color:#b6a271}.facebook-icon{font:bold 18px Georgia;color:#cdbc88}.zalo-icon{font:bold 14px Georgia;color:#cdbc88}.bank-card{width:100%;height:160px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #b39a5b;padding:19px;background:radial-gradient(ellipse at 90% 20%,#6e7c4f33,transparent 70%),linear-gradient(120deg,#304936,#182e22);color:#e9dbaf;box-shadow:inset 0 0 0 4px #263b2a,inset 0 0 0 5px #ad965b44,0 8px 18px #0002;text-align:left;transition:box-shadow .3s,transform .3s}.bank-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 4px #263b2a,inset 0 0 0 5px #ad965b44,0 0 25px #c2ab5f15}.bank-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.bank-card-top>svg{width:17px;height:17px;color:#c6b482}.bank-logo{font:bold 22px Georgia;color:#e4d3a0;letter-spacing:0}.bank-logo span{font-size:22px;vertical-align:middle;margin-left:5px;color:#b6985d}.bank-number{font:20px var(--serif);letter-spacing:2px;display:block}.bank-owner{font-size:9px;letter-spacing:1px;color:#bfc8a8;display:block;margin-top:10px}.bank-decoration{position:absolute;right:-50px;bottom:-36px;width:230px;height:150px;stroke:#ceb77820;stroke-width:.8;transform:rotate(-35deg);z-index:-1}.zalo-payment{display:flex;align-items:center;gap:11px;width:100%;padding:19px 0 0;text-align:left;background:transparent}.zalo-pay-logo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#38513b5c;border:1px solid #a18d584d;color:#d9c58b;font-weight:bold;font-size:14px;letter-spacing:-1px}.zalo-pay-logo>span{font-size:9px;margin-left:1px}.zalo-payment>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.zalo-payment strong{font-size:12px;font-weight:500;color:#e5e3cd}.zalo-payment small{font-size:11px;color:#aebeaa}.zalo-payment>svg{width:16px;height:16px;color:#beab74;margin-left:auto}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:21px;min-height:53px}.section-heading h2{font:500 25px var(--serif);letter-spacing:-.5px;margin:0 0 7px;color:#e6d4a5}.section-heading p{color:#b4bda9;font-size:11px;margin:0}.count-badge{font:10px var(--serif);border-block:1px solid #b79d5c55;padding:6px 10px;color:#c2b78b;white-space:nowrap}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.project{--accent:#d1be87;position:relative;isolation:isolate;background:linear-gradient(130deg,#2c48332b,transparent 65%),#10231bee;border:1px solid #ad945350;box-shadow:inset 0 0 0 4px #0c1e17,inset 0 0 0 5px #a88e521c,0 9px 25px #0002;transition:transform .3s,border-color .3s,box-shadow .3s;display:block;padding:6px}.project::before,.project::after{content:'';position:absolute;width:18px;height:18px;border:1px solid #c2a66b;pointer-events:none;z-index:3}.project::before{left:3px;top:3px;border-right:0;border-bottom:0}.project::after{right:3px;bottom:3px;border-left:0;border-top:0}.project-art{height:139px;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at center,#688c5c13,transparent 70%),linear-gradient(#203e2b30,#10271b10)}.project-art::after{content:'';position:absolute;inset:15px 30px;border:1px solid #b69b5620;transform:rotate(0);z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}.art-halo{position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#cbce8b0b,transparent 65%);box-shadow:0 0 60px #a1c57703}.cultivation-art{width:174px;height:116px;stroke:none;transition:transform .5s,filter .5s;filter:drop-shadow(0 8px 12px #0003);margin-top:7px}.project-tag{position:absolute;top:12px;left:12px;font:9px var(--serif);color:#bdb88b;border-left:1px solid #bba46966;padding-left:7px}.project-open{position:absolute;top:12px;right:12px;color:#aa9863;display:flex}.project-open svg{width:16px;height:16px}.project-content{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 17px 17px;min-height:89px;position:relative}.project-content::before{content:'';position:absolute;top:0;left:17px;right:17px;height:1px;background:linear-gradient(90deg,#b89e5738,transparent)}.project-content h3{font:500 17px var(--serif);color:#e7d7ad;margin:0 0 7px}.project-content p{font-size:10px;color:#afbea6;margin:0;line-height:1.8}.project-cta{width:24px;height:24px;display:grid;place-items:center;border:1px solid #ad94543d;background:#536c3c0d;color:#c4ae72;transform:rotate(45deg);transition:background .3s,border-color .3s}.project-cta svg{width:15px;height:15px;transform:rotate(-45deg)}.project:hover{transform:translateY(-4px);border-color:#cdb578a6;box-shadow:inset 0 0 0 4px #0c1e17,inset 0 0 0 5px #a88e5233,0 12px 30px #0003,0 0 25px #bdaf6c0a}.project:hover .cultivation-art{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 0 15px #c9b16b19)}.project:hover .project-cta{border-color:#d6ba74;background:#a4955533}
.music-panel{margin-top:23px;padding:23px 25px;overflow:hidden}.music-badge{color:#c7b88c;font:10px var(--serif);border-bottom:1px solid #ad945455;padding:3px 5px}.music-placeholder{display:flex;align-items:center;gap:18px}.sound-visual{width:65px;height:65px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:3px;background:#2b443034;border:1px solid #a9904e44;box-shadow:inset 0 0 0 4px #193122,inset 0 0 0 5px #b7a05b22}.sound-visual i{display:block;width:2px;height:15px;border-radius:1px;background:linear-gradient(#e8d4a1,#947f4b);animation:equalize 3s ease-in-out infinite alternate}.sound-visual i:nth-child(2n){height:28px;animation-delay:-1s}.sound-visual i:nth-child(3n){height:38px;animation-delay:-2s}.sound-visual i:nth-child(5n){height:23px;animation-delay:-.4s}.music-placeholder h3{font:500 16px var(--serif);color:#e5d6a8;margin:0 0 6px}.music-placeholder p{font-size:10px;color:#afbea7;margin:0;line-height:1.9}.music-link{margin-left:auto;min-height:40px;font-size:11px;color:#dbc48a;padding:10px 16px;background:#243e2b}.music-link:hover{box-shadow:0 0 20px #bfa76520}.footer{border-top:1px solid #9c84472e;display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding:23px 0 30px;font-size:10px;color:#99a88f}.footer a{display:flex;gap:12px;align-items:center;color:#c1b184}.footer a>span{font-size:17px}.mobile-nav{display:none}
.player{display:flex;align-items:center;gap:18px}.record{width:65px;height:65px;flex-shrink:0;border-radius:50%;border:1px solid #ad945e88;background:repeating-radial-gradient(circle,#2c452f 0 2px,#15271b 3px 4px);display:grid;place-items:center;animation:turn 15s linear infinite;animation-play-state:paused}.record>span{width:27px;height:27px;display:grid;place-items:center;font:italic 22px Georgia;background:#c8b17b;color:#2b3b27;border-radius:50%}.playing .record{animation-play-state:running}.track-meta{min-width:0}.track-meta>span{font-size:8px;letter-spacing:1px;color:#a99c6c}.track-meta h3{font:500 23px var(--serif);color:#e4d1a0;margin:3px 0}.track-meta p{font-size:10px;color:#adbea3;margin:0}.player-play,.player-next{display:grid;place-items:center;width:41px;height:41px;flex-shrink:0;background:transparent;color:#cfbd87}.player-next{margin-left:auto;width:30px}.player-next svg{width:18px;height:18px}.player-play{border:1px solid #c7b37a;background:#34492c;box-shadow:inset 0 0 0 3px #172a20,inset 0 0 0 4px #a68c4d88}.player-play svg{fill:currentColor;width:21px;height:21px}.playing .player-play svg{fill:none;stroke-width:3}.timeline{display:flex;gap:12px;align-items:center;font-size:10px;color:#afbd9f;margin-top:15px;font-variant-numeric:tabular-nums}.timeline input{accent-color:#c5b57a;flex:1;min-width:0;height:24px}.tracks{display:flex;gap:9px;margin-top:15px}.tracks button{font-family:var(--serif);font-size:11px;padding:8px 17px;min-height:39px;background:#27402b44;border:1px solid #aa925744;color:#b7c1a5}.tracks button[aria-pressed=true]{color:#e6d09a;border-color:#b9a368;background:#46563166}.icon-button{width:35px;height:35px;background:#203728;border:1px solid #ad94594d;color:#d5c18b;display:grid;place-items:center}.icon-button svg{width:18px;height:18px}.icon-button:hover{border-color:#c8ae71}.modal-open{overflow:hidden}dialog{width:min(430px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:27px;background:radial-gradient(ellipse at top right,#50613c25,transparent 60%),#12291f;border:1px solid #bea66d;box-shadow:inset 0 0 0 5px #0b2018,inset 0 0 0 6px #ad94544d,0 30px 100px #0008;color:var(--text)}dialog::backdrop{background:#030e09b8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.dialog-icon{width:41px;height:41px;display:grid;place-items:center;border:1px solid #a78d4e88;color:#d1ba7d;background:#334a2e55}.dialog-icon svg{width:20px;height:20px}dialog h2{font:500 25px var(--serif);color:#e3cf9b;margin:0 0 10px}dialog>p{font-size:12px;color:#aebe9f;margin:0 0 23px}.dialog-link{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:54px;padding:15px 0;border-top:1px solid #9c874b44;background:transparent;width:100%;text-align:left;color:#d8dfc9;font-size:13px}.dialog-link:hover{color:#ead29a}.dialog-link small{display:block;font-size:11px;color:#a9bb9c;overflow-wrap:anywhere;margin-top:5px}.dialog-link svg{width:17px;height:17px;color:#b9a473}.payment-number{font:28px var(--serif);letter-spacing:3px;color:#e4d1a2;margin:29px 0 34px}.toast{position:fixed;left:50%;bottom:24px;max-width:calc(100% - 32px);text-align:center;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:100;border:1px solid #bba46c;background:#243d2c;color:#e7d7ad;font-size:12px;padding:12px 22px;box-shadow:inset 0 0 0 3px #12271b,0 8px 28px #0005;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
@keyframes turn{to{transform:rotate(360deg)}}@keyframes equalize{to{transform:scaleY(.6)}}@keyframes mist{to{transform:translateX(5%)}}@keyframes landscape-in{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@media(min-width:1500px){.page-width{width:1280px}.profile-header{height:490px}.hero-body{padding-top:48px}.project-art{height:156px}.contact-value strong{font-size:12px}.project-content p{font-size:11px}.panel-heading h2{font-size:17px}}
@media(max-width:1100px){.page-width{width:calc(100% - 48px)}.dashboard{grid-template-columns:285px minmax(0,1fr);gap:22px}.panel{padding:22px}.project-grid{gap:17px}.contact-value strong{font-size:10px}.contact-item{gap:9px}.contact-icon{width:31px;height:35px}.social-buttons a{font-size:10px;padding:9px 8px;gap:7px}.project-content{padding-inline:13px}.project-content::before{left:13px;right:13px}.project-content h3{font-size:16px}.project-content p{font-size:9px}.project-cta{width:21px;height:21px}.music-placeholder{gap:13px}.sound-visual{width:55px;height:62px;gap:2px}.music-placeholder h3{font-size:14px}.music-placeholder p{font-size:9px}.music-link{padding:9px 12px;font-size:10px}.hero-body{padding-left:37px}.hero-bottom{left:37px}.hero-person{font-size:10px}.person-detail{font-size:9px}.bank-number{font-size:18px}}
@media(max-width:850px){.dashboard{grid-template-columns:1fr;gap:27px}.main-column{display:contents}#explore{grid-row:1}.sidebar{grid-row:2;display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.music-panel{grid-row:3;margin:0}.contact-panel{display:flex;flex-direction:column}.contact-list{margin-block:auto;gap:15px}.contact-item{gap:12px}.contact-value strong{font-size:12px}.contact-value small{font-size:11px}.contact-icon{width:37px;height:39px}.social-buttons{margin-top:auto}.social-buttons a{font-size:12px}.bank-card{height:151px}.bank-card-top{margin-bottom:20px}.project-art{height:152px}.cultivation-art{width:184px;height:123px}.project-content{padding:16px 20px 20px}.project-content h3{font-size:19px}.project-content p{font-size:12px}.project-content::before{left:20px;right:20px}.project-cta{width:26px;height:26px}.topbar-inner{height:73px}.topnav{gap:23px}.topnav a{font-size:12px;padding-block:22px}.clock{display:none}.profile-header{height:450px}.hero-body{width:80%;padding-top:43px}.hero-art{background-position:60% center}.hero-art::after{background:linear-gradient(90deg,#091510eb 0%,#091510a8 37%,#09151011 80%),linear-gradient(0deg,#07130ee6,transparent 40%)}h1{font-size:58px}h1>span{font-size:80px}.formation{right:-50px;opacity:.6}.music-placeholder h3{font-size:16px}.music-placeholder p{font-size:11px}.sound-visual{width:65px;height:65px;gap:3px}.music-link{font-size:12px;padding:10px 19px}}
@media(max-width:600px){.page-width{width:calc(100% - 28px)}.topbar-inner{height:68px;gap:14px}.brand{font-size:22px;gap:9px}.brand img{width:33px;height:33px}.topnav{display:none}.clock{display:block;font-size:9px}.topbar-right{gap:12px}.small-avatar{width:31px;height:31px}.profile-header{margin:17px 0 26px;height:476px}.hero-art{background-position:64% top;background-size:auto 100%}.hero-art::after{background:linear-gradient(90deg,#07150cc9,#07150c22),linear-gradient(0deg,#07140fe8 1%,#07140f30 56%,#07140f15)}.hero-body{width:100%;padding:31px 24px}.hero-label{font-size:8px;letter-spacing:2px;gap:10px;margin-bottom:26px}.label-ornament{font-size:13px}h1{font-size:45px;letter-spacing:-1px;line-height:1.3;margin-bottom:24px}h1>span{font-size:66px;line-height:1.2}.hero-person{gap:10px;font-size:10px}.hero-person>img{width:34px;height:34px}.person-divider{padding:0 8px}.person-detail{font-size:8px}.hero-buttons{margin-top:29px;gap:10px;display:flex}.hero-buttons .primary{flex:1}.button{font-size:11px;min-height:45px;padding:11px 15px;gap:10px}.button svg{width:16px;height:16px}.secondary{font-size:10px;padding-inline:13px}.hero-bottom{left:24px;right:24px;bottom:19px;font-size:7px;letter-spacing:1px}.hero-cross{max-width:72px}.hero-small-seal{font-size:15px;width:22px;height:24px}.formation{right:-45px;top:36px;width:225px;height:225px;opacity:.45}.profile-header::before,.profile-header::after{width:25px;height:25px}.dashboard{gap:24px}.section-heading{margin-bottom:17px;gap:10px}.section-heading h2{font-size:24px;margin-bottom:7px}.section-heading p{font-size:10px;max-width:240px}.count-badge{font-size:9px;padding:5px 6px}.project-grid{gap:13px}.project{padding:5px}.project-art{height:133px}.cultivation-art{width:148px;height:99px;margin-top:15px}.project-tag{font-size:8px;left:9px;top:9px;padding-left:5px}.project-open{right:8px;top:9px}.project-open svg{width:14px;height:14px}.project-art::after{inset:18px 19px}.project-content{padding:12px 9px 15px;display:block;min-height:91px}.project-content::before{left:9px;right:9px}.project-content h3{font-size:15px;margin-bottom:7px;padding-right:17px;white-space:nowrap}.project-content p{font-size:9px;line-height:1.85;max-width:140px}.project-cta{position:absolute;right:9px;top:16px;width:15px;height:15px;border:0;background:none;transform:none}.project-cta svg{width:15px;height:15px;transform:none}.project:hover{transform:none}.project:active{transform:scale(.98);border-color:#d5bd83}.project::before,.project::after{width:14px;height:14px}.sidebar{grid-template-columns:1fr;gap:19px}.panel{padding:24px}.panel-heading h2{font-size:17px;gap:11px}.panel-heading{margin-bottom:19px}.contact-list{gap:5px}.contact-item{gap:13px;min-height:67px;padding:11px 0}.contact-icon{width:38px;height:42px}.contact-value small{font-size:11px}.contact-value strong{font-size:13px}.end-icon{width:16px;height:16px}.social-buttons{padding-top:20px;margin-top:18px;gap:10px}.social-buttons a{font-size:12px;min-height:45px;padding:11px;gap:11px}.social-buttons a>svg{width:15px;height:15px}.bank-card{height:168px;padding:21px}.bank-card-top{margin-bottom:24px}.bank-number{font-size:23px}.bank-owner{font-size:10px;margin-top:11px}.bank-logo{font-size:25px}.bank-logo>span{font-size:24px}.bank-decoration{width:240px;height:160px}.zalo-payment{padding-top:19px}.zalo-payment strong{font-size:13px}.zalo-payment small{font-size:12px}.zalo-pay-logo{width:43px;height:43px}.music-panel{padding:24px}.music-placeholder{flex-wrap:wrap;gap:14px}.sound-visual{width:55px;height:62px;gap:2px}.music-placeholder h3{font-size:15px}.music-placeholder p{font-size:10px}.music-link{width:100%;margin:5px 0 0;justify-content:space-between;font-size:12px;min-height:43px;padding:10px 16px}.music-badge{font-size:9px}.footer{margin-top:28px;font-size:10px;padding:22px 0 calc(109px + env(safe-area-inset-bottom))}.footer a{gap:8px}.mobile-nav{display:flex;justify-content:space-around;align-items:center;position:fixed;left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));padding:7px;border:1px solid #b19b5b8c;background:#142b20f0;box-shadow:inset 0 0 0 3px #0c2018,inset 0 0 0 4px #b09a5b2b,0 10px 35px #0008;z-index:40;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.mobile-nav>a,.mobile-nav>button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-width:57px;min-height:48px;padding:5px 11px;color:#aebda0;background:transparent;font-size:8px}.mobile-nav svg{width:18px;height:18px}.mobile-nav a.active{color:#e0c88e;background:linear-gradient(0deg,#bca15b16,transparent);box-shadow:inset 0 -1px #d3b77577}.mobile-nav>button{color:#d8c18c}.toast{bottom:calc(96px + env(safe-area-inset-bottom));font-size:11px}.player{gap:11px}.record{width:54px;height:54px}.track-meta h3{font-size:21px}.player-next{width:26px}.player-play{width:37px;height:39px}.tracks{gap:7px;flex-wrap:wrap}.tracks button{padding:8px 15px;min-height:41px}dialog{padding:24px}.payment-number{font-size:27px}}
@media(max-width:370px){.page-width{width:calc(100% - 24px)}.hero-body{padding-inline:20px}.hero-label{letter-spacing:1.5px}.hero-person{font-size:9px;gap:8px}.person-divider{padding:0 6px}.person-detail{font-size:7px}.hero-buttons{gap:8px}.hero-buttons .primary{font-size:10px;padding-inline:12px;gap:8px}.hero-buttons .secondary{font-size:9px;padding-inline:10px;gap:7px}.hero-bottom{left:20px;right:20px}.section-heading p{font-size:9px;max-width:200px}.section-heading h2{font-size:23px}.count-badge{font-size:8px}.project-grid{gap:10px}.project-art{height:118px}.cultivation-art{width:130px;height:87px;margin-top:17px}.project-content h3{font-size:13px}.project-content p{font-size:8px}.project-content{padding:12px 8px 14px;min-height:87px}.project-cta{right:6px;top:15px;width:13px}.project-cta svg{width:13px}.panel{padding:21px}.contact-value strong{font-size:12px}.music-placeholder{gap:11px}.music-placeholder h3{font-size:13px}.music-placeholder p{font-size:9px}.sound-visual{width:47px;height:58px}.bank-number{font-size:21px}.panel-heading h2{font-size:16px}.clock{font-size:8px}}
@media(hover:none){.project:hover .cultivation-art{transform:none;filter:drop-shadow(0 8px 12px #0003)}.bank-card:hover{transform:none}.primary:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Carved cloudwork frames: real nine-slice artwork, not a plain rectangular border. */
.panel,.project{border:16px solid transparent;border-image:url('ui/immortal-frame.svg') 74 / 39px / 0 stretch;background:linear-gradient(135deg,#3853371f,transparent 60%),#10271eeb;box-shadow:0 10px 24px #0003,inset 0 0 25px #192e1a}.panel{padding:13px 12px}.project{padding:0}.panel::before,.panel::after,.project::before,.project::after{display:none}.project-art{height:142px;background:radial-gradient(ellipse at center,#6d85561a,transparent 70%)}.project-content{padding:14px 10px 13px}.project-content::before{left:10px;right:10px}.project:hover{border-image:url('ui/immortal-frame.svg') 74 / 39px / 0 stretch;box-shadow:0 12px 30px #0004,inset 0 0 30px #7f8b3620,0 0 18px #e0c78b12}.panel-heading{margin-bottom:19px;padding-top:2px}.panel-heading h2{font-size:17px}.section-heading h2{display:flex;align-items:center;gap:15px}.section-heading h2::after{content:'';width:74px;height:10px;background:linear-gradient(90deg,#cbb57b99,transparent);clip-path:polygon(0 45%,65% 45%,75% 0,85% 45%,100% 50%,85% 55%,75% 100%,65% 55%,0 55%)}
.profile-header{border:14px solid transparent;border-image:url('ui/immortal-frame.svg') 74 / 44px / 0 stretch;overflow:visible;box-shadow:0 20px 60px #0003}.profile-header::before,.profile-header::after{display:none}.hero-art,.hero-mist{inset:-6px}.hero-body{padding:29px 34px}.hero-bottom{bottom:6px;left:34px;right:22px}.hero-art{overflow:hidden}.hero-buttons{gap:12px}.hero-buttons .button{min-height:56px;padding:14px 33px;border:0;background:transparent url('ui/jade-button.svg') center/100% 100% no-repeat;box-shadow:none;color:#f1dda7;filter:drop-shadow(0 5px 5px #0003);transition:filter .3s,transform .3s}.hero-buttons .primary{min-width:206px}.hero-buttons .secondary{min-width:135px;font-size:11px;padding-inline:29px}.hero-buttons .button::before{display:none}.hero-buttons .button::after{inset:10px 20px;width:auto;height:auto;border:0;background:linear-gradient(110deg,transparent 25%,#faf2cb25 48%,transparent 70%);transform:translateX(-110%);animation:jade-sheen 6s ease-in-out infinite;z-index:-1;pointer-events:none}.hero-buttons .secondary::after{animation-delay:2s}.hero-buttons .button:hover{filter:drop-shadow(0 0 8px #e6ce8f55) brightness(1.15);transform:translateY(-2px)}.hero-buttons .button:active{transform:translateY(1px) scale(.98)}.music-link{background:transparent url('ui/jade-button.svg') center/100% 100% no-repeat;border:0;box-shadow:none;min-width:115px;min-height:50px;padding:14px 27px}.music-link::before,.music-link::after{display:none}.music-link:hover{filter:drop-shadow(0 0 7px #dfc98044)}.social-buttons a{position:relative;box-shadow:inset 0 0 0 2px #11291b,inset 0 0 0 3px #b39c4e2b;background:linear-gradient(180deg,#55704433,#213c2c88);border-color:#aa91585e}.social-buttons a::after{content:'◆';position:absolute;left:-4px;top:50%;transform:translateY(-50%);font-size:7px;color:#c3a66b}.bank-card{border:12px solid transparent;border-image:url('ui/immortal-frame.svg') 74 / 30px / 0 stretch;padding:10px 9px;box-shadow:0 5px 15px #0003;background:linear-gradient(120deg,#405a3c,#1a3125)}.bank-card:hover{box-shadow:0 5px 20px #bca56015}.bank-card-top{margin-bottom:16px}.project-cta{border:1px solid #cdb87788;background:linear-gradient(130deg,#60704744,#29432d);box-shadow:inset 0 0 0 2px #172e22}.mobile-nav{border:12px solid transparent;border-image:url('ui/immortal-frame.svg') 74 / 28px / 0 stretch;padding:0;background:#142b20f5}.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}.hero-particles canvas{width:100%;height:100%;display:block}.hero-mist{height:180px;top:auto;background:radial-gradient(ellipse at 25% 120%,#b2c5a324,transparent 65%),radial-gradient(ellipse at 75% 110%,#9fb6a21a,transparent 60%);animation:mist-drift 20s ease-in-out infinite alternate}.formation{opacity:.5;animation-duration:100s}.project:hover .cultivation-art{animation:spirit-float 4s ease-in-out infinite}.gold-trace{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;z-index:4;overflow:visible}.gold-trace rect{fill:none;stroke:#efdc9c;stroke-width:1.2;stroke-dasharray:8 92;stroke-linecap:round;opacity:.65;animation:trace-path 14s linear infinite;filter:drop-shadow(0 0 3px #e7c36b)}.gold-trace rect:nth-child(2){animation-delay:-7s;opacity:.35}.cultivation-art{transition:transform .4s;animation:spirit-float 7s ease-in-out infinite}.project:nth-child(2) .cultivation-art{animation-delay:-1.8s}.project:nth-child(3) .cultivation-art{animation-delay:-3.7s}.project:nth-child(4) .cultivation-art{animation-delay:-5.1s}dialog{border:18px solid transparent;border-image:url('ui/immortal-frame.svg') 74 / 42px / 0 stretch;padding:14px;background:#122b20;box-shadow:0 30px 100px #0008}.dialog-header{margin-bottom:18px}.dialog-link{transition:color .25s,padding .25s}.dialog-link:hover{padding-left:6px}.button .press-wave{position:absolute;border-radius:50%;background:#f9eab72b;pointer-events:none;width:12px;height:12px;animation:press-wave .7s ease-out forwards;z-index:1}
@keyframes jade-sheen{0%,45%{transform:translateX(-110%);opacity:0}55%{opacity:1}85%,100%{transform:translateX(110%);opacity:0}}@keyframes spirit-float{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes mist-drift{from{transform:translateX(-3%);opacity:.5}to{transform:translateX(3%);opacity:1}}@keyframes trace-path{to{stroke-dashoffset:-100}}@keyframes press-wave{to{transform:translate(-50%,-50%) scale(22);opacity:0}}
@media(max-width:1100px){.panel{padding:11px 9px}.contact-value strong{font-size:10px}.project-content h3{font-size:16px}.project-content p{font-size:9px}.hero-buttons .primary{min-width:192px}.hero-buttons .secondary{min-width:127px}}
@media(max-width:850px){.contact-value strong{font-size:12px}.panel{padding:14px 13px}.hero-body{padding-left:25px}.hero-bottom{left:25px}.project-art{height:154px}.project-content h3{font-size:18px}.project-content p{font-size:11px}.hero-art{background-position:60% center}.panel-heading h2{font-size:17px}}
@media(max-width:600px){.profile-header{height:487px;border-width:11px;border-image-width:32px;margin-top:19px}.hero-body{padding:21px 13px;width:100%}.hero-label{font-size:8px;margin-bottom:27px;letter-spacing:1.6px}.hero-art{inset:-4px;background-position:65% top}.hero-art::after{background:linear-gradient(90deg,#07150cbd,#07150c11),linear-gradient(0deg,#07140fe8 1%,#07140f30 56%,#07140f15)}h1{font-size:44px;margin-bottom:27px}h1>span{font-size:65px}.hero-buttons{gap:4px;margin-top:27px;flex-wrap:nowrap}.hero-buttons .primary{min-width:0;flex:1;padding:13px 24px;font-size:10px;gap:7px}.hero-buttons .secondary{min-width:105px;padding:13px 22px;font-size:9px;gap:5px}.hero-buttons .button{min-height:53px}.hero-buttons svg{width:14px;height:14px}.hero-person{gap:8px}.person-detail{font-size:8px}.person-divider{padding-inline:7px}.hero-person>img{width:32px;height:32px}.hero-bottom{left:13px;right:12px;bottom:9px;font-size:6px}.hero-small-seal{font-size:13px;width:20px;height:22px}.gold-trace{inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px)}.project{border-width:11px;border-image-width:29px;padding:0}.project-grid{gap:14px}.project-art{height:121px}.project-tag{top:8px;left:4px;font-size:7px}.project-open{top:8px;right:4px}.cultivation-art{width:137px;height:92px;margin-top:12px}.project-content{padding:12px 4px 10px;min-height:91px}.project-content::before{left:4px;right:4px}.project-content h3{font-size:15px;margin-bottom:7px;padding-right:9px;white-space:normal}.project-content p{font-size:9px}.project-cta{width:14px;height:14px;top:14px;right:2px;border:0;box-shadow:none;background:none}.project-cta svg{width:13px;height:13px}.panel{border-width:15px;border-image-width:36px;padding:13px 11px}.panel-heading{margin-bottom:19px}.panel-heading h2{font-size:17px}.contact-value strong{font-size:13px}.social-buttons a{font-size:12px;min-height:45px}.bank-card{border-width:11px;border-image-width:28px;height:170px;padding:11px 9px}.bank-card-top{margin-bottom:23px}.bank-number{font-size:23px}.bank-owner{font-size:10px}.music-placeholder h3{font-size:14px}.music-placeholder p{font-size:10px}.music-link{min-height:48px;width:100%;padding:12px 35px}.mobile-nav{border-width:10px;border-image-width:25px;left:14px;right:14px;bottom:calc(9px + env(safe-area-inset-bottom));padding:0}.mobile-nav>a,.mobile-nav>button{min-height:43px;min-width:53px;padding:4px 7px;font-size:8px}.mobile-nav svg{width:17px;height:17px}.mobile-nav a.active{box-shadow:inset 0 -1px #d3b77555}.section-heading h2::after{width:40px}.formation{opacity:.25;right:-50px}dialog{border-width:15px;border-image-width:36px;padding:13px}.payment-number{font-size:26px}.project:hover .cultivation-art{animation:spirit-float 7s ease-in-out infinite}.hero-mist{height:130px}}
@media(max-width:370px){.hero-body{padding-inline:9px}.hero-label{font-size:7px;gap:7px}.hero-person{font-size:8px;gap:7px}.person-detail{font-size:7px}.person-divider{padding-inline:5px}.hero-buttons .primary{font-size:9px;padding-inline:21px;gap:4px}.hero-buttons .secondary{min-width:93px;font-size:8px;padding-inline:21px;gap:4px}.hero-buttons .button{min-height:49px}.hero-buttons svg{width:12px;height:12px}.project-grid{gap:11px}.project-art{height:107px}.cultivation-art{width:119px;height:80px;margin-top:14px}.project-content h3{font-size:13px}.project-content p{font-size:8px}.project-content{min-height:83px}.project-cta{right:0;top:13px}.contact-value strong{font-size:11px}.panel{padding:12px 8px}.panel-heading h2{font-size:16px}.contact-item{gap:10px}.music-placeholder{gap:10px}.sound-visual{width:44px}.music-placeholder h3{font-size:12px}.music-placeholder p{font-size:9px}.bank-number{font-size:21px}.mobile-nav{left:12px;right:12px}.mobile-nav>a,.mobile-nav>button{min-width:49px;padding:4px 5px}}
@media(prefers-reduced-motion:reduce){.cultivation-art,.hero-buttons .button::after,.gold-trace rect,.hero-mist,.project:hover .cultivation-art{animation:none!important}.press-wave{display:none}.hero-particles{display:none}}
.profile-header{overflow:clip}.hero-mist{left:0;right:0;width:100%;inset:auto 0 -5px;height:180px}.hero-art{animation:none}.gold-trace rect{stroke-width:.75;opacity:.45}body::before{background:linear-gradient(#091510e6,#091510f2),url('img/xianni-scene.png') center/cover}
@media(max-width:600px){.hero-mist{height:130px}.hero-buttons .button{min-height:55px}.hero-buttons .primary{font-size:11px}.hero-buttons .secondary{font-size:10px}}
@media(max-width:370px){.hero-buttons .primary{font-size:9px}.hero-buttons .secondary{font-size:9px}}
@media(max-width:600px){.hero-art{background-position:85% top}.hero-art::after{background:linear-gradient(90deg,#07150ce0,#07150c55 53%,#07150c05),linear-gradient(0deg,#07140fe8 1%,#07140f38 52%,#07140f18)}}
/* The hero always has a real image. Canvas is an optional animated enhancement. */
.hero-art{z-index:0;background:none;inset:-6px;overflow:hidden;animation:none}.hero-art picture{position:absolute;inset:0;display:block}.hero-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}.hero-art::after{z-index:2;pointer-events:none}.hero-art .cloth-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;transition:opacity .5s;pointer-events:none}.hero-art .cloth-canvas.ready{opacity:1}.hero-body{z-index:3}.hero-bottom{z-index:3}.formation{z-index:1}.hero-mist{z-index:1}.hero-particles{z-index:2}.profile-header{isolation:isolate}.dashboard{min-width:0}.hero-buttons .button{overflow:hidden}.hero-buttons .button::after{display:none}.hero-buttons .primary{background-image:url('ui/jade-button.svg?v=2')}.hero-buttons .secondary{background-image:url('ui/jade-button.svg?v=2')}.music-link{background-image:url('ui/jade-button.svg?v=2')}
@media(min-width:1500px){.profile-header{height:500px}.hero-body{padding-top:41px}h1{font-size:68px}h1>span{font-size:90px}}
@media(min-width:601px) and (max-width:850px){.profile-header{height:460px}.hero-art img{object-position:63% center}.hero-body{width:83%;padding-top:29px}.hero-art::after{background:linear-gradient(90deg,#07150cf0,#07150c80 42%,transparent 77%),linear-gradient(0deg,#07140fd9,transparent 42%)}}
@media(max-width:600px){.profile-header{height:590px}.hero-art{inset:-4px}.hero-art img{object-fit:cover;object-position:center center}.hero-art::after{background:linear-gradient(90deg,#07150ce0,#07150c90 41%,#07150c05 76%),linear-gradient(0deg,#07140ff2,#07140f05 46%)}.hero-body{padding-top:26px;width:100%}.hero-label{margin-bottom:30px}.hero-person{margin-top:25px}.hero-buttons{margin-top:33px}.hero-bottom{bottom:13px}.formation{display:none}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{min-width:0}.panel,.project,.main-column{min-width:0}.contact-value strong{overflow-wrap:anywhere}.hero-small-seal{margin-left:auto}}
@media(max-width:370px){.profile-header{height:568px}.hero-body{padding-top:27px}.hero-label{margin-bottom:28px}.hero-person{margin-top:26px}.hero-buttons{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.hero-art .cloth-canvas{display:none!important}}
.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;opacity:0;transition:opacity .45s;pointer-events:none}.hero-video.playing{opacity:1}
@media(min-width:601px) and (max-width:850px){.hero-video{object-position:63% center}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
/* Portrait GIF is given a dedicated visual area, so the whole character stays visible. */
@media(max-width:600px){.profile-header{height:auto;min-height:0}.hero-art{inset:0 0 auto;height:430px}.hero-art img{object-position:center;object-fit:cover}.hero-art::after{background:linear-gradient(0deg,#091510 0%,#09151022 16%,transparent 37%)}.hero-body{padding:433px 16px 46px;width:100%}.hero-label{font-size:7px;letter-spacing:2px;gap:9px;margin-bottom:13px}h1{font-size:31px;line-height:1.4;margin-bottom:14px;letter-spacing:-1px}h1 br{display:none}h1>span{font-size:36px;line-height:1.4;padding-left:8px}.hero-person{margin-top:11px}.hero-buttons{margin-top:19px}.hero-bottom{bottom:10px}.hero-mist{top:300px;bottom:auto}.formation{display:none}}
@media(max-width:370px){.hero-art{height:390px}.hero-body{padding:393px 10px 44px}h1{font-size:27px;letter-spacing:-1px}h1>span{font-size:31px;padding-left:6px}.hero-person{margin-top:12px}.hero-label{letter-spacing:1.5px}.hero-buttons{margin-top:19px}.hero-mist{top:265px}}