/* VSRO.TH clean white-gold redesign, shared across every PHP route */ html,body{margin:0!important;min-width:0!important;background:#e9eef3!important;color:#27313c!important;font-family:Tahoma,Arial,sans-serif!important}body{background-image:linear-gradient(180deg,#e9f1f9,#f8f9fb 750px)!important}*{box-sizing:border-box}#container{width:min(1440px,96%)!important;max-width:1440px!important;margin:0 auto!important;background:transparent!important;min-height:100vh!important}#container>.navbar,#container>.navbar-logo{display:none!important}.vsro-modern-nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:rgba(255,255,255,.96);border-radius:0 0 16px 16px;box-shadow:0 7px 25px #152b4214;position:relative;z-index:20}.vsro-brand{color:#8a652d!important;font-family:Georgia,serif;font-size:27px;font-weight:bold;text-decoration:none!important;line-height:1}.vsro-brand small{display:block;color:#36404a;font:9px Arial;letter-spacing:2px;margin-top:4px}.vsro-links{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.vsro-links a{padding:12px 13px;border-radius:9px;color:#252e39!important;text-decoration:none!important;font-size:13px;font-weight:bold;white-space:nowrap}.vsro-links a:hover{background:#f5eddf;color:#9b6b24!important}.vsro-account{display:flex;gap:8px}.vsro-account a,.vsro-cta a{display:inline-flex;align-items:center;justify-content:center;padding:12px 19px;border-radius:9px;background:#242d38;color:white!important;text-decoration:none!important;font-weight:bold;font-size:14px;box-shadow:0 4px 15px #1b2c3b22}.vsro-account a:last-child,.vsro-cta a:last-child{background:linear-gradient(135deg,#fff2cf,#c59642);color:#29200e!important}.vsro-hero{height:405px;position:relative;overflow:hidden;border-radius:0 0 20px 20px;background:linear-gradient(90deg,#f5f8fc 0%,#edf3f9 31%,#edf3f900 67%),url('/images/vsro-modern-hero-art.png') right center / auto 100% no-repeat,#e8eff7}.vsro-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eef4fb 0%,#eef4fbef 22%,#eef4fb50 47%,transparent 78%);pointer-events:none}.vsro-hero-content{position:relative;z-index:1;padding:64px 5.5%;max-width:680px}.vsro-kicker{letter-spacing:6px;color:#636b73;font-size:12px}.vsro-hero h2{font: bold clamp(46px,6vw,82px) Georgia,serif;color:#212126;margin:10px 0}.vsro-hero h2 span{color:#b4883d}.vsro-hero p{font-size:17px;color:#333d49;margin:8px 0}.vsro-cap{display:inline-block;background:#302817;color:#ffdda2;padding:7px 19px;letter-spacing:2px;border-radius:20px;font-size:12px}.vsro-cta{display:flex;gap:12px;margin-top:25px}.vsro-cta a{background:linear-gradient(135deg,#7b551d,#302514);min-width:170px}.vsro-modern-status{margin:-22px 20px 20px;position:relative;z-index:3;background:#fffffff2;border:1px solid #fff;border-radius:15px;box-shadow:0 8px 26px #22374d16;padding:20px 26px;display:flex;justify-content:space-around;gap:15px;flex-wrap:wrap}.vsro-modern-status>div{display:flex;flex-direction:column;gap:5px;padding:0 18px;border-right:1px solid #e8e8e8}.vsro-modern-status>div:last-child{border:0}.vsro-modern-status small{font-size:11px;color:#777}.vsro-modern-status strong{font-size:17px;color:#a77932}.vsro-modern-status .online{color:#12a44a}.wrap-main,.inner-main,.main,.wrap-content,#header,#main,#hienthi,.content,.content_left,#Load_Content{background:transparent!important;box-shadow:none!important;max-width:100%!important}.wrap-main{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0 20px!important}.inner-main,.main,.wrap-content{width:100%!important;max-width:100%!important}.content_left,#Load_Content{min-width:0!important}.banner-stats{background:transparent!important}.top-stats{display:none!important}#left-sidebar,#sidebar{background:#ffffffed!important;border-radius:15px!important;box-shadow:0 6px 22px #25384b12!important;overflow:hidden}.information-box,.server-open-box,.fortress-box,.check-player-box,.event-box{border-radius:12px!important}#Load_Content{background:#fffffff0!important;border-radius:15px!important;padding:18px!important;box-shadow:0 6px 22px #25384b12!important;min-height:380px!important}.age18-fixed{display:none!important}a,button{transition:background .2s,color .2s,box-shadow .2s}input,select,textarea{max-width:100%}@media(max-width:1000px){.vsro-modern-nav{height:auto;min-height:72px;flex-wrap:wrap;padding:14px}.vsro-links{order:3;width:100%;justify-content:center}.vsro-links a{padding:9px}.vsro-hero{height:370px}.vsro-hero-content{padding:48px 5%}.vsro-modern-status{margin:-16px 10px 15px}.wrap-main{padding:0 10px!important}}@media(max-width:650px){.vsro-account a{padding:10px;font-size:12px}.vsro-brand{font-size:23px}.vsro-links a{font-size:11px}.vsro-hero{height:390px;background-position:62% center}.vsro-hero:before{background:linear-gradient(90deg,#f0f5fbed 0%,#f0f5fbd9 53%,#f0f5fb33)}.vsro-hero-content{padding:35px 20px}.vsro-hero h2{font-size:50px}.vsro-hero p{font-size:14px}.vsro-cta{flex-wrap:wrap}.vsro-cta a{min-width:130px}.vsro-modern-status{padding:12px;justify-content:flex-start}.vsro-modern-status>div{padding:5px 12px}.vsro-modern-status strong{font-size:14px}} /* Phase 2: polished shared header and page panels */ .vsro-modern-nav{position:relative;isolation:isolate;border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(14px)} .vsro-modern-nav .vsro-links a:focus-visible,.vsro-account a:focus-visible,.vsro-cta a:focus-visible{outline:3px solid #b98b3e;outline-offset:3px} .vsro-hero{background-color:#eaf1f8;background-size:auto,cover;background-position:center,right 38%;border-radius:0 0 18px 18px} .vsro-hero:before{background:linear-gradient(90deg,#f5f8fbee 0%,#f5f8fbe8 26%,#f5f8fb83 46%,transparent 72%)} .vsro-modern-status{align-items:center;min-height:91px} #Load_Content .top,#sidebar>.top,.information-box .top{background:linear-gradient(90deg,#fff9ee,#fff)!important;color:#795523!important;border-bottom:1px solid #eee3d0!important} #Load_Content table{width:100%;border-collapse:collapse}#Load_Content td,#Load_Content th{padding:10px;border-bottom:1px solid #eee} #Load_Content input:not([type=checkbox]),#sidebar input:not([type=checkbox]){border-radius:8px;min-height:37px} @media(min-width:1200px){.vsro-hero{height:430px}.vsro-hero-content{padding-top:74px}} @media(max-width:650px){.vsro-hero{background-position:center,62% center}.vsro-modern-nav{border-radius:0 0 12px 12px}} /* Phase 3: clean visual hierarchy on every route */ .vsro-feature-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 20px 22px}.vsro-feature-links>a{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;column-gap:8px;background:#ffffffeb;border:1px solid #ffffff;border-radius:13px;min-height:76px;padding:12px;text-decoration:none!important;color:#25303b!important;box-shadow:0 4px 17px #34465a0e}.vsro-feature-links>a:hover{transform:translateY(-2px);box-shadow:0 9px 24px #34465a18}.vsro-feature-links span{grid-row:1/3;font-size:27px;text-align:center;color:#b78b42}.vsro-feature-links b{font-size:13px;align-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vsro-feature-links small{font-size:10px;color:#7a828b;align-self:start}.vsro-modern-status a{color:#a77b32!important;text-decoration:none!important}.vsro-modern-status a:hover{text-decoration:underline!important}#Load_Content{overflow-wrap:anywhere}#Load_Content img{max-width:100%;height:auto}#Load_Content table{display:block;overflow-x:auto;max-width:100%}#Load_Content button,#Load_Content input[type=submit]{border-radius:9px;cursor:pointer}#left-sidebar .top,#left-sidebar h3{color:#8b642e!important}.vsro-links a[aria-current=page]{color:#9b6b24!important;background:#f6efdf}.vsro-hero .vsro-cta a:hover{filter:brightness(1.08)}@media(max-width:1200px){.vsro-feature-links{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.vsro-feature-links{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 10px 16px;gap:8px}.vsro-feature-links>a{padding:9px;min-height:66px}.vsro-feature-links span{font-size:23px}.vsro-feature-links b{font-size:12px}.vsro-modern-status>div{border-right:0}.vsro-links{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:3px}.vsro-modern-nav{gap:8px}.vsro-account{margin-left:auto}} /* Patch 22: remove the inherited blank hero-to-content gap. Legacy Site.css reserves space for the old large banner; the new hero is already rendered above the main content, so this reservation is obsolete. */ #container .wrap-main, #container .inner-main, #container .main, #container .wrap-content, #container .banner-stats, #container #header, #container #main, #container #hienthi, #container .content { margin-top:0!important; padding-top:0!important; top:auto!important; min-height:0!important; height:auto!important; } #container .wrap-main { margin-bottom:0!important; padding:0 20px!important; } #container .wrap-content { display:flow-root; } #container .banner-stats { position:static!important; margin-bottom:0!important; } #container #header,#container #main,#container #hienthi { position:static!important; } #container #hienthi { margin-bottom:0!important; } #container .content { display:block; } #container .content_left { margin-top:0!important; } #container #left-sidebar,#container #sidebar { margin-top:0!important; } #container .padtop.clear { height:0!important; min-height:0!important; padding:0!important; margin:0!important; } @media(max-width:700px){#container .wrap-main{padding:0 10px!important}} /* Patch 23: collapse the original 500px hero spacer and 160px bottom reservation. Keep the existing three-column content and its PHP modules intact. */ #container .wrap-main{min-height:0!important;margin-top:0!important;padding-top:0!important} #container .inner-main{background:none!important;min-height:0!important} #container .main{min-height:0!important;padding:0!important;margin:0 auto!important;height:auto!important} #container .wrap-content{padding:0!important;margin:0!important;min-height:0!important;height:auto!important;display:flow-root!important} #container .banner-stats{padding:0!important;margin:0!important;height:auto!important;min-height:0!important} #container #header{margin:0!important;padding:0!important;height:auto!important;min-height:0!important} #container #main{margin:0!important;padding:0!important;height:auto!important;min-height:0!important} #container #hienthi{margin:0!important;padding:0!important;min-height:0!important} #container .content{margin:0!important;padding:0!important;min-height:0!important} #container .vsro-feature-links{margin-bottom:16px!important} #container .padtop.clear{display:none!important} @media(max-width:700px){#container .vsro-feature-links{margin-bottom:12px!important}} /* Patch 24 — fix the actual cause of the giant blank area: the legacy absolute-positioned #main, floated sidebars and 500px top reservation. Preserve all original PHP modules and their existing content. */ #container .wrap-content{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:0!important;position:relative!important;overflow:visible!important;} #container .banner-stats{grid-column:1!important;grid-row:1!important;display:block!important;float:none!important;position:relative!important;width:100%!important;max-width:100%!important;} #container .banner-stats #header,#container .banner-stats #main,#container .banner-stats #hienthi,#container .banner-stats .content{display:block!important;float:none!important;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;} #container .banner-stats #main{border:0!important;background:transparent!important;box-shadow:none!important;} #container #Load_Content{float:none!important;position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;margin:0!important;} #container #left-sidebar,#container #sidebar{grid-column:1!important;float:none!important;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;margin:0!important;} @media(min-width:1050px){ #container .wrap-content{grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,260px)!important;column-gap:18px!important;} #container #left-sidebar{grid-column:1!important;grid-row:1!important;} #container .banner-stats{grid-column:2!important;grid-row:1!important;} #container #sidebar{grid-column:3!important;grid-row:1!important;} } @media(min-width:700px) and (max-width:1049px){ #container .wrap-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;} #container .banner-stats{grid-column:1/-1!important;grid-row:1!important;} #container #left-sidebar{grid-column:1!important;grid-row:2!important;} #container #sidebar{grid-column:2!important;grid-row:2!important;} } @media(max-width:699px){#container .wrap-content{gap:12px!important;}#container .banner-stats{grid-row:1!important;}#container #left-sidebar{grid-row:2!important;}#container #sidebar{grid-row:3!important;}} /* Patch 25: main layout correction. #sidebar is a sibling of .wrap-content, not a child. Use display:contents to put the actual three panels on one grid. */ @media(min-width:1050px){ #container .wrap-main .inner-main>.main{display:grid!important;grid-template-columns:minmax(0,245px) minmax(0,1fr) minmax(0,245px)!important;column-gap:18px!important;align-items:start!important;align-content:start!important;grid-auto-rows:min-content!important;} #container .wrap-main .main>.wrap-content{display:contents!important;} #container .wrap-main .main .age18-fixed{display:none!important;} #container .wrap-main .main .banner-stats{grid-column:2!important;grid-row:1!important;min-width:0!important;align-self:start!important;} #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:1!important;min-width:0!important;align-self:start!important;} #container .wrap-main .main>#sidebar{grid-column:3!important;grid-row:1!important;min-width:0!important;align-self:start!important;} } @media(min-width:700px) and (max-width:1049px){ #container .wrap-main .inner-main>.main{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:start!important;align-content:start!important;} #container .wrap-main .main>.wrap-content{display:contents!important;} #container .wrap-main .main .banner-stats{grid-column:1/-1!important;grid-row:1!important;} #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:2!important;} #container .wrap-main .main>#sidebar{grid-column:2!important;grid-row:2!important;} } @media(max-width:699px){ #container .wrap-main .inner-main>.main{display:flex!important;flex-direction:column!important;gap:12px!important;align-items:stretch!important;} #container .wrap-main .main>.wrap-content{display:contents!important;} #container .wrap-main .main .banner-stats{order:0!important;} #container .wrap-main .main #left-sidebar{order:1!important;} #container .wrap-main .main>#sidebar{order:2!important;} } #container .wrap-main .main .banner-stats,#container .wrap-main .main #left-sidebar,#container .wrap-main .main>#sidebar{margin-top:0!important;top:auto!important;bottom:auto!important;} /* PATCH 26: authoritative layout reset against legacy Site.css. #main was position:absolute, 640px wide, with 320px margin-left. Sidebar floats and the 500px spacer broke the shared three-column grid. */ html body #container .wrap-main, html body #container .wrap-main .inner-main, html body #container .wrap-main .inner-main>.main{ width:100%!important;max-width:100%!important;min-height:0!important; height:auto!important;margin:0!important;padding:0!important; float:none!important;position:relative!important;left:auto!important;right:auto!important;top:auto!important; } html body #container .wrap-main{padding:0 20px!important;} html body #container .wrap-main .inner-main>.main{ display:grid!important;grid-template-columns:minmax(0,245px) minmax(0,1fr) minmax(0,245px)!important; gap:18px!important;align-items:start!important;align-content:start!important;grid-auto-rows:min-content!important; } html body #container .wrap-main .main>.wrap-content{display:contents!important;} html body #container .wrap-main .main .age18-fixed{display:none!important;} html body #container .wrap-main .main .banner-stats, html body #container .wrap-main .main #left-sidebar, html body #container .wrap-main .main>#sidebar{ display:block!important;position:relative!important;float:none!important;clear:none!important; margin:0!important;padding:0!important;top:auto!important;bottom:auto!important; left:auto!important;right:auto!important;transform:none!important; min-width:0!important;max-width:100%!important;width:100%!important;height:auto!important; align-self:start!important; } html body #container .wrap-main .main .banner-stats{grid-column:2!important;grid-row:1!important;} html body #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:1!important;} html body #container .wrap-main .main>#sidebar{grid-column:3!important;grid-row:1!important;} html body #container .wrap-main .main .banner-stats #header, html body #container .wrap-main .main .banner-stats #main, html body #container .wrap-main .main .banner-stats #hienthi, html body #container .wrap-main .main .banner-stats .content, html body #container .wrap-main .main .banner-stats .content_left, html body #container .wrap-main .main .banner-stats #Load_Content{ display:block!important;position:relative!important;float:none!important; width:100%!important;max-width:100%!important;min-width:0!important; margin:0!important;padding-top:0!important;top:auto!important;left:auto!important; right:auto!important;bottom:auto!important;transform:none!important;height:auto!important;min-height:0!important; } html body #container .wrap-main .main .banner-stats #main{ padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important; } html body #container .wrap-main .main .banner-stats #Load_Content{padding:18px!important;min-height:250px!important;} html body #container .wrap-main .main .banner-stats .top-stats{display:none!important;} @media(max-width:1100px){ html body #container .wrap-main .inner-main>.main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;} html body #container .wrap-main .main .banner-stats{grid-column:1/-1!important;grid-row:1!important;} html body #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:2!important;} html body #container .wrap-main .main>#sidebar{grid-column:2!important;grid-row:2!important;} } @media(max-width:700px){ html body #container .wrap-main{padding:0 10px!important;} html body #container .wrap-main .inner-main>.main{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;} html body #container .wrap-main .main .banner-stats{grid-column:1!important;grid-row:1!important;} html body #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:2!important;} html body #container .wrap-main .main>#sidebar{grid-column:1!important;grid-row:3!important;} } /* Patch 27: structural layout priority. Legacy columns no longer use absolute positioning. */ @media(min-width:1051px){ html body #container .wrap-main .inner-main>.main{display:grid!important;grid-template-columns:minmax(180px,240px) minmax(0,1fr) minmax(180px,240px)!important;gap:16px!important;align-items:start!important;} html body #container .wrap-main .main>.wrap-content{display:contents!important;} html body #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:1!important;} html body #container .wrap-main .main .banner-stats{grid-column:2!important;grid-row:1!important;} html body #container .wrap-main .main>#sidebar{grid-column:3!important;grid-row:1!important;} } html body #container .wrap-main .main #left-sidebar, html body #container .wrap-main .main .banner-stats, html body #container .wrap-main .main>#sidebar{position:static!important;float:none!important;clear:none!important;min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;transform:none!important;} html body #container .wrap-main .main .banner-stats #main, html body #container .wrap-main .main .banner-stats #header, html body #container .wrap-main .main .banner-stats #hienthi{position:static!important;float:none!important;width:100%!important;max-width:none!important;margin:0!important;left:auto!important;top:auto!important;} html body #container .wrap-main .main .banner-stats #Load_Content{width:100%!important;max-width:none!important;min-width:0!important;} @media(min-width:1051px){html body #container{width:min(1500px,calc(100% - 32px))!important;max-width:1500px!important;}} @media(min-width:701px) and (max-width:1050px){html body #container .wrap-main .inner-main>.main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;}html body #container .wrap-main .main>.wrap-content{display:contents!important;}html body #container .wrap-main .main .banner-stats{grid-column:1/-1!important;grid-row:1!important;}html body #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:2!important;}html body #container .wrap-main .main>#sidebar{grid-column:2!important;grid-row:2!important;}} @media(max-width:700px){html body #container .wrap-main .inner-main>.main{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}html body #container .wrap-main .main>.wrap-content{display:contents!important;}html body #container .wrap-main .main .banner-stats{grid-column:1!important;grid-row:1!important;}html body #container .wrap-main .main #left-sidebar{grid-column:1!important;grid-row:2!important;}html body #container .wrap-main .main>#sidebar{grid-column:1!important;grid-row:3!important;}} /* Patch 28 — keep all original PHP widgets, correct the layout at normal browser zoom. */ html body #container{width:calc(100% - 32px)!important;max-width:1500px!important;margin-inline:auto!important;} html body #container .wrap-main{width:100%!important;max-width:none!important;padding:0 16px!important;margin:0!important;} html body #container .wrap-main .inner-main{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;} html body #container .wrap-main .inner-main>.main{display:block!important;position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;height:auto!important;min-height:0!important;} /* wrap-content actually contains all three columns; grid it directly instead of display:contents. */ html body #container .wrap-main .inner-main>.main>.wrap-content{display:grid!important;grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(210px,250px)!important;gap:18px!important;align-items:start!important;align-content:start!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;height:auto!important;min-height:0!important;position:relative!important;} html body #container .wrap-main .main>.wrap-content>.age18-fixed{display:none!important;} html body #container .wrap-main .main>.wrap-content>.banner-stats{grid-column:2!important;grid-row:1!important;} html body #container .wrap-main .main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:1!important;} html body #container .wrap-main .main>.wrap-content>#sidebar{grid-column:3!important;grid-row:1!important;} html body #container .wrap-main .main>.wrap-content>.banner-stats,html body #container .wrap-main .main>.wrap-content>#left-sidebar,html body #container .wrap-main .main>.wrap-content>#sidebar{position:static!important;display:block!important;float:none!important;clear:none!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:0!important;width:100%!important;min-width:0!important;max-width:100%!important;transform:none!important;} html body #container .wrap-main .main .banner-stats #header,html body #container .wrap-main .main .banner-stats #main,html body #container .wrap-main .main .banner-stats #hienthi,html body #container .wrap-main .main .banner-stats .content,html body #container .wrap-main .main .banner-stats .content_left{position:static!important;float:none!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;transform:none!important;} html body #container .wrap-main .main .banner-stats #Load_Content{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;} @media(max-width:1100px){html body #container .wrap-main .inner-main>.main>.wrap-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;}html body #container .wrap-main .main>.wrap-content>.banner-stats{grid-column:1/-1!important;grid-row:1!important;}html body #container .wrap-main .main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:2!important;}html body #container .wrap-main .main>.wrap-content>#sidebar{grid-column:2!important;grid-row:2!important;}} @media(max-width:700px){html body #container{width:100%!important;}html body #container .wrap-main{padding:0 10px!important;}html body #container .wrap-main .inner-main>.main>.wrap-content{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}html body #container .wrap-main .main>.wrap-content>.banner-stats{grid-column:1!important;grid-row:1!important;}html body #container .wrap-main .main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:2!important;}html body #container .wrap-main .main>.wrap-content>#sidebar{grid-column:1!important;grid-row:3!important;}} /* Patch 29: keep the legacy three panels in one responsive layout. */ @media (min-width:1101px) { html body #container .wrap-main .inner-main > .main > .wrap-content { display:grid!important; grid-template-columns:minmax(185px,230px) minmax(0,1fr) minmax(185px,230px)!important; grid-template-rows:auto!important; align-items:start!important; gap:18px!important; width:100%!important; max-width:100%!important; min-height:0!important; } html body #container .wrap-main .main > .wrap-content > #left-sidebar {grid-column:1!important;grid-row:1!important;} html body #container .wrap-main .main > .wrap-content > .banner-stats {grid-column:2!important;grid-row:1!important;} html body #container .wrap-main .main > .wrap-content > #sidebar {grid-column:3!important;grid-row:1!important;} } html body #container,html body #container .wrap-main,html body #container .wrap-main .inner-main,html body #container .wrap-main .inner-main>.main {max-width:1500px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;} html body #container .wrap-main .main>.wrap-content>#left-sidebar,html body #container .wrap-main .main>.wrap-content>#sidebar,html body #container .wrap-main .main>.wrap-content>.banner-stats {position:static!important;float:none!important;transform:none!important;min-width:0!important;max-width:100%!important;width:100%!important;margin:0!important;} html body #container .wrap-main .main .banner-stats #header,html body #container .wrap-main .main .banner-stats #main,html body #container .wrap-main .main .banner-stats #hienthi,html body #container .wrap-main .main .banner-stats .content,html body #container .wrap-main .main .banner-stats .content_left,html body #container .wrap-main .main .banner-stats #Load_Content {position:static!important;float:none!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;margin:0!important;box-sizing:border-box!important;} html body #container .wrap-main .main>.wrap-content{padding-bottom:0!important;margin-bottom:0!important;} html body #container .wrap-main .main>.wrap-content>.age18-fixed {position:fixed!important;grid-column:auto!important;} @media (max-width:1100px) and (min-width:701px){html body #container .wrap-main .inner-main>.main>.wrap-content{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;}html body #container .wrap-main .main>.wrap-content>.banner-stats{grid-column:1/-1!important;grid-row:1!important;}html body #container .wrap-main .main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:2!important;}html body #container .wrap-main .main>.wrap-content>#sidebar{grid-column:2!important;grid-row:2!important;}} @media(max-width:700px){html body #container .wrap-main .inner-main>.main>.wrap-content{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}html body #container .wrap-main .main>.wrap-content>.banner-stats{grid-column:1!important;grid-row:1!important;}html body #container .wrap-main .main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:2!important;}html body #container .wrap-main .main>.wrap-content>#sidebar{grid-column:1!important;grid-row:3!important;}} /* Patch 30: one consistent layout; repair legacy detached right sidebar in PHP. */ html,body{min-width:0!important;overflow-x:hidden!important;} body #container{width:min(1480px,calc(100% - 36px))!important;max-width:1480px!important;margin-left:auto!important;margin-right:auto!important;transform:none!important;zoom:1!important;} body #container .wrap-main,body #container .wrap-main .inner-main,body #container .wrap-main .inner-main>.main{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;position:relative!important;transform:none!important;margin:0!important;box-sizing:border-box!important;} body #container .wrap-main .inner-main>.main>.wrap-content{display:grid!important;grid-template-columns:minmax(190px,240px) minmax(0,1fr) minmax(190px,240px)!important;grid-auto-flow:row!important;grid-template-rows:auto!important;gap:18px!important;align-items:start!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;position:relative!important;margin:0!important;padding:0!important;transform:none!important;box-sizing:border-box!important;} body #container .wrap-main .inner-main>.main>.wrap-content>.banner-stats{grid-column:2!important;grid-row:1!important;} body #container .wrap-main .inner-main>.main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:1!important;} body #container .wrap-main .inner-main>.main>.wrap-content>#sidebar{grid-column:3!important;grid-row:1!important;} body #container .wrap-main .inner-main>.main>.wrap-content>:is(.banner-stats,#left-sidebar,#sidebar){position:static!important;float:none!important;clear:none!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding-top:0!important;transform:none!important;box-sizing:border-box!important;} body #container .wrap-main .main .banner-stats :is(#header,#main,#hienthi,.content,.content_left,#Load_Content){width:100%!important;min-width:0!important;max-width:100%!important;position:relative!important;float:none!important;left:auto!important;top:auto!important;transform:none!important;box-sizing:border-box!important;} body #container .wrap-main .main .banner-stats #Load_Content{padding:16px!important;} @media(max-width:1050px){body #container .wrap-main .inner-main>.main>.wrap-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}body #container .wrap-main .inner-main>.main>.wrap-content>.banner-stats{grid-column:1/-1!important;grid-row:1!important;}body #container .wrap-main .inner-main>.main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:2!important;}body #container .wrap-main .inner-main>.main>.wrap-content>#sidebar{grid-column:2!important;grid-row:2!important;}} @media(max-width:650px){body #container{width:100%!important;}body #container .wrap-main .inner-main>.main>.wrap-content{grid-template-columns:minmax(0,1fr)!important;}body #container .wrap-main .inner-main>.main>.wrap-content>.banner-stats{grid-column:1!important;grid-row:1!important;}body #container .wrap-main .inner-main>.main>.wrap-content>#left-sidebar{grid-column:1!important;grid-row:2!important;}body #container .wrap-main .inner-main>.main>.wrap-content>#sidebar{grid-column:1!important;grid-row:3!important;}} /* Patch 32: keep OPEN BETA countdown inside the server-status card */ .server-open-box{width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;padding:12px!important;box-sizing:border-box!important} .server-open-title{max-width:100%!important;box-sizing:border-box!important;white-space:normal!important;text-align:center!important} .server-open-content{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;padding:10px 6px!important;overflow:hidden!important} .server-open-time,#server-open-time{width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;box-sizing:border-box!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;font-size:clamp(12px,1.15vw,15px)!important;line-height:1.35!important;letter-spacing:0!important;padding:0 2px!important} #server-open-time .vsro-open-label{display:block;color:#b17a1d;font-size:clamp(12px,1.15vw,15px);font-weight:800;line-height:1.25} #server-open-time .vsro-open-date{display:block;color:#4a5968;font-size:clamp(11px,1vw,13px);font-weight:600} #server-open-time .vsro-open-countdown{display:block;color:#172d42;font-size:clamp(12px,1.15vw,15px);font-weight:600;font-variant-numeric:tabular-nums} #server-open-time .vsro-open-finished{display:block;color:#149b50;font-size:14px;font-weight:800} @media(max-width:900px){#server-open-time{font-size:13px!important}#server-open-time .vsro-open-countdown{font-size:13px}} /* Patch 33: compact, non-overlapping OPEN BETA status */ .server-open-box{min-width:0!important;max-width:100%!important;padding:10px!important;overflow:hidden!important} .server-open-content{padding:9px 5px!important;overflow:hidden!important} #server-open-time{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important} #server-open-time .vsro-open-label{font-size:13px!important;line-height:1.35!important} #server-open-time .vsro-open-date{font-size:11px!important;line-height:1.4!important;white-space:normal!important} #server-open-time .vsro-open-countdown{font-size:12px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:anywhere!important} #server-open-time .vsro-open-countdown b{white-space:nowrap!important;font-variant-numeric:tabular-nums!important} /* Patch 34 — login panel: stop legacy absolute-position button overlap */ #sidebar{min-width:0!important;overflow:visible!important} #sidebar .middle{padding:16px!important;min-width:0!important} #sidebar form#login{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:9px 10px!important;width:100%!important;min-width:0!important;max-width:100%!important;position:relative!important;align-items:stretch!important} #sidebar form#login>input[type=hidden]{display:none!important} #sidebar form#login>label{grid-column:1/-1!important;display:block!important;margin:0!important;font-size:13px!important;line-height:1.5!important;color:#334155!important} #sidebar form#login>.fake_input{grid-column:1/-1!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;position:static!important;background:transparent!important;border:0!important;height:auto!important} #sidebar form#login>.fake_input input{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:42px!important;box-sizing:border-box!important;border:1px solid #d4dce5!important;border-radius:9px!important;background:#f4f7fb!important;padding:9px 11px!important;font-size:14px!important;color:#1e293b!important;position:static!important;margin:0!important} #sidebar form#login>.submit_button,#sidebar form#login>a.register{grid-column:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;float:none!important;transform:none!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;min-width:0!important;max-width:100%!important;height:42px!important;min-height:42px!important;margin:6px 0 0!important;padding:8px 5px!important;border:0!important;border-radius:9px!important;box-sizing:border-box!important;line-height:1.25!important;text-align:center!important;font:600 12px Tahoma,Arial,sans-serif!important;text-decoration:none!important;white-space:normal!important;background:#169fc3!important;color:#fff!important;opacity:1!important;box-shadow:none!important} #sidebar form#login>a.register{background:#b58a43!important} #sidebar .other_link_login{display:grid!important;gap:8px!important;margin:16px 0 0!important;width:100%!important;min-width:0!important} #sidebar .other_link_login .other_link_line{display:flex!important;align-items:flex-start!important;gap:7px!important;width:100%!important;min-width:0!important;line-height:1.6!important;font-size:12px!important;overflow-wrap:anywhere!important;white-space:normal!important;text-decoration:none!important;color:#3b91b5!important;opacity:1!important} #sidebar .other_link_login .other_link_line span{flex:0 0 15px!important;float:none!important;margin:2px 0 0!important} @media(max-width:650px){#sidebar form#login{gap:8px!important}#sidebar .middle{padding:14px!important}} /* Patch 35 — status and information cards: no collisions, legible headings */ #left-sidebar{display:flex!important;flex-direction:column!important;gap:16px!important;align-items:stretch!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;} #left-sidebar>.server-open-box,#left-sidebar>.information-box,#left-sidebar>.fortress-box,#left-sidebar>.check-player-box,#left-sidebar>.event-box{position:relative!important;display:block!important;float:none!important;clear:both!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:14px!important;overflow:visible!important;background:#fff!important;border:1px solid #d9e3e9!important;border-radius:16px!important;box-shadow:0 5px 18px rgba(35,59,76,.07)!important;box-sizing:border-box!important;} #left-sidebar .server-open-title,#left-sidebar .information-box>.top,#left-sidebar .information-box>.top h4,#left-sidebar .fortress-title,#left-sidebar .check-title,#left-sidebar .event-title{position:static!important;display:block!important;float:none!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0 0 12px!important;padding:0 0 10px!important;background:transparent!important;border:0!important;border-bottom:1px solid #e5e9ed!important;box-shadow:none!important;color:#26384a!important;font-size:16px!important;line-height:1.5!important;font-weight:700!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important;} #left-sidebar .information-box>.top h4{margin:0!important;padding:0!important;border:0!important;} #left-sidebar .information-box>.middle,#left-sidebar .server-open-content{position:static!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;background:transparent!important;overflow:visible!important;box-sizing:border-box!important;} #left-sidebar #information-list{width:100%!important;min-width:0!important;margin:0!important;padding:0!important;} #left-sidebar #information-list .info-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:42px!important;padding:9px 4px!important;border-bottom:1px solid #e9edf0!important;background:#fff!important;box-sizing:border-box!important;} #left-sidebar #information-list .info-row:last-child{border-bottom:0!important;} #left-sidebar #information-list .info-left{flex:1 1 auto!important;min-width:0!important;color:#344456!important;font-size:13px!important;line-height:1.45!important;white-space:normal!important;} #left-sidebar #information-list .info-right{flex:0 0 auto!important;color:#26384a!important;font-size:14px!important;font-weight:700!important;line-height:1.45!important;white-space:nowrap!important;} #left-sidebar #server-open-time{padding:12px 6px!important;background:#f3f7fa!important;border:1px solid #dce6ed!important;border-radius:10px!important;} #left-sidebar #server-open-time .vsro-open-label{color:#a06a15!important;} #left-sidebar #server-open-time .vsro-open-date,#left-sidebar #server-open-time .vsro-open-countdown{color:#26384a!important;} @media(max-width:700px){#left-sidebar{gap:12px!important;}#left-sidebar>.server-open-box,#left-sidebar>.information-box,#left-sidebar>.fortress-box,#left-sidebar>.check-player-box,#left-sidebar>.event-box{padding:12px!important;}} /* Patch 36 — clean left sidebar lower cards; avoid clipped labels and form controls. */ #left-sidebar>.fortress-box,#left-sidebar>.check-player-box,#left-sidebar>.event-box{box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;padding:14px!important;margin:0!important;overflow:visible!important;background:#fff!important;border:1px solid #dce8ef!important;border-radius:15px!important;box-shadow:0 5px 18px rgba(35,55,75,.06)!important;color:#26384a!important} #left-sidebar .fortress-title,#left-sidebar .check-title,#left-sidebar .event-title{display:block!important;position:static!important;float:none!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;padding:10px 12px!important;margin:0 0 12px!important;border-radius:8px!important;background:#139bc0!important;color:#fff!important;font-size:15px!important;font-weight:700!important;line-height:1.45!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important;text-shadow:none!important} #left-sidebar .fortress-item{position:static!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:5px!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:35px!important;height:auto!important;margin:0!important;padding:4px 0!important;color:#364456!important;font-size:13px!important;line-height:1.5!important;overflow-wrap:anywhere!important} #left-sidebar .fortress-item img{position:static!important;display:inline-block!important;flex:0 0 auto!important;width:auto!important;max-width:28px!important;height:auto!important;max-height:34px!important;object-fit:contain!important;margin:0 4px 0 0!important} #left-sidebar .fortress-item .fortress-name,#left-sidebar .fortress-item .divider,#left-sidebar .fortress-item .no-guild{position:static!important;float:none!important;display:inline!important;width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;line-height:1.5!important;color:#344456!important;white-space:normal!important} #left-sidebar .check-form{position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;align-items:stretch!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important} #left-sidebar .check-form input[type=text]{position:static!important;float:none!important;display:block!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;height:40px!important;margin:0!important;padding:9px 10px!important;background:#f7f9fc!important;border:1px solid #cbd6e0!important;border-radius:8px!important;color:#26384a!important;font-size:13px!important;line-height:1.4!important} #left-sidebar .check-form .submit_button,#left-sidebar .check-form input[type=button]{position:static!important;float:none!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:40px!important;margin:0!important;padding:8px 12px!important;border:0!important;border-radius:8px!important;background:#169fc3!important;color:#fff!important;font-size:13px!important;font-weight:700!important;line-height:1.4!important;text-align:center!important;cursor:pointer!important;transform:none!important} #left-sidebar #result_check{position:static!important;display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:18px!important;margin:10px 0 0!important;padding:0!important;line-height:1.5!important;color:#526173!important;font-size:12px!important;text-align:left!important;overflow-wrap:anywhere!important} #left-sidebar .event-content,#left-sidebar #event_schedule_list{position:static!important;display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:26px!important;margin:0!important;padding:3px 0!important;line-height:1.55!important;font-size:13px!important;color:#526173!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important} #left-sidebar .event-content *{max-width:100%!important} /* Patch 37: move alchemy and level widgets into the RIGHT column, below login. */ body #container .wrap-main .inner-main>.main>.wrap-content>#right-extra-box.vsro-right-widgets{grid-column:3!important;grid-row:2!important;position:static!important;float:none!important;clear:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;transform:none!important;box-sizing:border-box!important;} body #container .wrap-main .inner-main>.main>.wrap-content>#right-extra-box.vsro-right-widgets>.alchemy-info-box{width:100%!important;min-width:0!important;max-width:100%!important;position:static!important;float:none!important;clear:none!important;margin:0!important;box-sizing:border-box!important;overflow:hidden!important;} body #right-extra-box .alchemy-tabs-main,body #right-extra-box .alchemy-tabs{display:flex!important;gap:4px!important;width:100%!important;min-width:0!important;} body #right-extra-box .alchemy-main,body #right-extra-box .alchemy-tab{flex:1 1 0!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:11px!important;padding:8px 3px!important;line-height:1.25!important;} body #right-extra-box .alchemy-row{display:flex!important;justify-content:space-between!important;gap:8px!important;min-width:0!important;} body #right-extra-box .alchemy-info-box .top h4{color:#16394a!important;opacity:1!important;text-shadow:none!important;} @media(max-width:1050px){body #container .wrap-main .inner-main>.main>.wrap-content>#right-extra-box.vsro-right-widgets{grid-column:2!important;grid-row:3!important;}} @media(max-width:650px){body #container .wrap-main .inner-main>.main>.wrap-content>#right-extra-box.vsro-right-widgets{grid-column:1!important;grid-row:4!important;}} /* Patch 40: keep the enhancement heading and percentage table together in right column */ #right-extra-box .alchemy-info-box:first-child .alchemy-section-caption { font-size: 13px; font-weight: 700; color: #74521e; padding: 10px 12px 4px; text-align: left; white-space: normal; } #right-extra-box .alchemy-info-box:first-child { min-width: 0; overflow: hidden; } #right-extra-box .alchemy-info-box:first-child .alchemy-tabs-main { margin-top: 5px; } /* Patch 41: visitor statistics integrated into the white header, no surrounding box */ .vsro-modern-nav{background:#fff!important;gap:14px!important} .vsro-modern-nav #right-visit-box{position:static!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;float:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:15px!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0 0 0 auto!important;padding:0!important;background:transparent!important;background-image:none!important;border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;z-index:auto!important;color:#28313b!important;text-align:center!important} .vsro-modern-nav #right-visit-box .visit-top,.vsro-modern-nav #right-visit-box .visit-bottom{position:static!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important} .vsro-modern-nav #right-visit-box .visit-bottom{border-left:1px solid #e5e5e5!important;padding-left:15px!important} .vsro-modern-nav #right-visit-box .visit-title{display:block!important;position:static!important;color:#28313b!important;background:transparent!important;font-size:11px!important;font-weight:600!important;white-space:nowrap!important;line-height:1.4!important;margin:0!important;padding:0!important} .vsro-modern-nav #right-visit-box .visit-number,.vsro-modern-nav #right-visit-box #your-ip{display:block!important;position:static!important;color:#a8792d!important;background:transparent!important;font-size:15px!important;font-weight:700!important;line-height:1.3!important;white-space:nowrap!important;margin:0!important;padding:0!important} .vsro-modern-nav .vsro-account{flex:0 0 auto!important;margin-left:0!important} @media(max-width:1250px){.vsro-modern-nav{flex-wrap:wrap!important;height:auto!important;min-height:74px!important;padding-top:12px!important;padding-bottom:12px!important}.vsro-modern-nav .vsro-links{order:3!important;width:100%!important;justify-content:center!important}.vsro-modern-nav #right-visit-box{margin-left:auto!important}} @media(max-width:700px){.vsro-modern-nav #right-visit-box{order:2!important;width:100%!important;justify-content:flex-start!important;margin:6px 0!important}.vsro-modern-nav .vsro-account{margin-left:auto!important}.vsro-modern-nav #right-visit-box .visit-title{font-size:10px!important}.vsro-modern-nav #right-visit-box .visit-number,.vsro-modern-nav #right-visit-box #your-ip{font-size:13px!important}} /* Patch 42: clean white navigation with unboxed visit counters and stable wrapping. */ .vsro-modern-nav{height:auto!important;min-height:74px!important;display:flex!important;align-items:center!important;column-gap:14px!important;row-gap:8px!important;padding:12px 20px!important;background:#fff!important} .vsro-modern-nav .vsro-brand{flex:0 0 auto!important} .vsro-modern-nav .vsro-links{flex:1 1 auto!important;min-width:0!important;justify-content:center!important;gap:2px!important} .vsro-modern-nav .vsro-links a{padding:9px 7px!important;font-size:12px!important} .vsro-modern-nav #right-visit-box{flex:0 0 auto!important;margin-left:auto!important;gap:12px!important;white-space:nowrap!important} .vsro-modern-nav #right-visit-box .visit-bottom{padding-left:12px!important} .vsro-modern-nav .vsro-account{flex:0 0 auto!important;display:flex!important;gap:8px!important;white-space:nowrap!important} .vsro-modern-nav .vsro-account a{padding:11px 12px!important;font-size:12px!important} @media(max-width:1450px){.vsro-modern-nav{flex-wrap:wrap!important}.vsro-modern-nav .vsro-brand{order:1!important}.vsro-modern-nav #right-visit-box{order:2!important}.vsro-modern-nav .vsro-account{order:3!important}.vsro-modern-nav .vsro-links{order:4!important;flex:1 0 100%!important;width:100%!important;justify-content:center!important}} @media(max-width:720px){.vsro-modern-nav{padding:12px!important;gap:10px!important}.vsro-modern-nav .vsro-brand{order:1!important}.vsro-modern-nav .vsro-account{order:2!important;margin-left:auto!important}.vsro-modern-nav #right-visit-box{order:3!important;flex:1 0 100%!important;width:100%!important;justify-content:center!important;margin:0!important}.vsro-modern-nav .vsro-links{order:4!important;flex:1 0 100%!important;justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important}.vsro-modern-nav .vsro-links a{flex:0 0 auto!important}.vsro-modern-nav .vsro-account a{padding:9px!important;font-size:11px!important}} @media(max-width:390px){.vsro-modern-nav .vsro-brand{font-size:20px!important}.vsro-modern-nav #right-visit-box{gap:8px!important}.vsro-modern-nav #right-visit-box .visit-bottom{padding-left:8px!important}.vsro-modern-nav #right-visit-box #your-ip{font-size:12px!important}} /* Patch 43 — white header: prevent visitor labels, IP and account buttons from colliding. */ .vsro-modern-nav,.vsro-modern-nav *{box-sizing:border-box} .vsro-modern-nav #right-visit-box{display:flex!important;align-items:center!important;gap:12px!important;max-width:100%!important} .vsro-modern-nav #right-visit-box .visit-top,.vsro-modern-nav #right-visit-box .visit-bottom{flex:0 1 auto!important;min-width:0!important} .vsro-modern-nav #right-visit-box .visit-title{color:#27313e!important;line-height:1.45!important} .vsro-modern-nav #right-visit-box .visit-number,.vsro-modern-nav #right-visit-box #your-ip{color:#a57931!important;font-variant-numeric:tabular-nums!important} @media(max-width:1450px){.vsro-modern-nav{flex-wrap:wrap!important;justify-content:space-between!important}.vsro-modern-nav .vsro-brand{order:1!important}.vsro-modern-nav #right-visit-box{order:2!important;margin-left:auto!important}.vsro-modern-nav .vsro-account{order:3!important}.vsro-modern-nav .vsro-links{order:4!important;flex:1 0 100%!important;width:100%!important;justify-content:center!important}} @media(max-width:760px){.vsro-modern-nav{padding:12px!important;gap:10px!important}.vsro-modern-nav #right-visit-box{order:3!important;flex:1 0 100%!important;width:100%!important;margin:0!important;justify-content:center!important;gap:16px!important}.vsro-modern-nav .vsro-account{order:2!important;margin-left:auto!important;max-width:100%!important}.vsro-modern-nav .vsro-links{order:4!important;overflow-x:auto!important;justify-content:flex-start!important;flex-wrap:nowrap!important}.vsro-modern-nav .vsro-links a{flex:0 0 auto!important}.vsro-modern-nav #right-visit-box .visit-bottom{padding-left:16px!important}} /* Patch 44 — login: clean white-and-gold layout, visible title, no overflow */ html body #sidebar.vsro-login-panel{box-sizing:border-box!important;border:1px solid #e5d7bf!important;border-radius:16px!important;background:#fff!important;box-shadow:0 7px 24px rgba(68,49,24,.06)!important;padding:0!important;overflow:hidden!important;min-width:0!important} html body #sidebar.vsro-login-panel>.top{position:static!important;display:block!important;float:none!important;inset:auto!important;width:auto!important;height:auto!important;min-height:0!important;margin:0 16px!important;padding:17px 0 12px!important;border:0!important;border-bottom:1px solid #eae4db!important;background:transparent!important;box-shadow:none!important;transform:none!important;opacity:1!important} html body #sidebar.vsro-login-panel>.top h4{display:block!important;position:static!important;margin:0!important;padding:0!important;color:#46331e!important;font:700 17px/1.45 Tahoma,Arial,sans-serif!important;opacity:1!important;text-shadow:none!important;white-space:normal!important} html body #sidebar.vsro-login-panel>.middle{display:block!important;position:static!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:16px!important;background:transparent!important;overflow:visible!important} html body #sidebar.vsro-login-panel form#login{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 10px!important;margin:0!important;padding:0!important;box-sizing:border-box!important} html body #sidebar.vsro-login-panel form#login>label{grid-column:1/-1!important;margin:4px 0 0!important;padding:0!important;color:#3e3428!important;background:none!important;font:600 13px/1.5 Tahoma,Arial,sans-serif!important;white-space:normal!important} html body #sidebar.vsro-login-panel form#login>.fake_input{grid-column:1/-1!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:0!important;height:auto!important;background:transparent!important} html body #sidebar.vsro-login-panel form#login>.fake_input input{box-sizing:border-box!important;display:block!important;width:100%!important;height:43px!important;margin:0!important;padding:10px 12px!important;border:1px solid #ddd6cc!important;border-radius:9px!important;background:#fbfaf8!important;color:#27211a!important;font:14px Tahoma,Arial,sans-serif!important;outline-offset:2px!important} html body #sidebar.vsro-login-panel form#login>.fake_input input:focus{border-color:#b78b43!important;outline:2px solid #f4e6cc!important} html body #sidebar.vsro-login-panel form#login>.submit_button,html body #sidebar.vsro-login-panel form#login>a.register{display:flex!important;grid-column:auto!important;position:static!important;float:none!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:43px!important;height:auto!important;margin:8px 0 0!important;padding:9px 5px!important;border:0!important;border-radius:9px!important;transform:none!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;font:700 12px/1.4 Tahoma,Arial,sans-serif!important;color:#fff!important;text-decoration:none!important} html body #sidebar.vsro-login-panel form#login>.submit_button{background:#263343!important} html body #sidebar.vsro-login-panel form#login>a.register{background:#b48a43!important} html body #sidebar.vsro-login-panel .other_link_login{display:flex!important;flex-direction:column!important;gap:10px!important;margin:17px 0 0!important;padding:14px 0 0!important;border-top:1px solid #eee8df!important} html body #sidebar.vsro-login-panel .other_link_login a{position:static!important;display:flex!important;align-items:flex-start!important;gap:8px!important;margin:0!important;padding:0!important;color:#7b5b2c!important;font:12px/1.55 Tahoma,Arial,sans-serif!important;text-decoration:none!important;overflow-wrap:anywhere!important;white-space:normal!important} html body #sidebar.vsro-login-panel .other_link_login a span{flex:0 0 15px!important;margin-top:2px!important} @media(max-width:650px){html body #sidebar.vsro-login-panel>.middle{padding:14px!important}} /* Patch 45 — enhancement-rate typography and spacing; preserve all rate data and handlers. */ #right-extra-box .alchemy-info-box:first-child{background:#fff!important;color:#293340!important;border-radius:14px!important;} #right-extra-box .alchemy-info-box:first-child .top{height:auto!important;min-height:0!important;margin:0!important;padding:12px 12px 4px!important;background:transparent!important;} #right-extra-box .alchemy-info-box:first-child .top h4{font-size:16px!important;font-weight:700!important;line-height:1.5!important;color:#79501b!important;margin:0!important;padding:0!important;white-space:normal!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-section-caption{font-size:14px!important;line-height:1.5!important;color:#79501b!important;margin:0!important;padding:2px 12px 8px!important;} #right-extra-box .alchemy-info-box:first-child .middle{padding:0 12px 12px!important;margin:0!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-tabs-main,#right-extra-box .alchemy-info-box:first-child .alchemy-tabs{display:flex!important;gap:5px!important;margin:0 0 7px!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-main{font-size:14px!important;font-weight:700!important;line-height:1.3!important;padding:9px 2px!important;min-height:39px!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-tab{font-size:13px!important;font-weight:700!important;line-height:1.35!important;padding:8px 4px!important;min-height:42px!important;overflow-wrap:normal!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important;min-height:39px!important;box-sizing:border-box!important;font-size:15px!important;line-height:1.5!important;color:#293340!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-row span{font-size:15px!important;color:#293340!important;} #right-extra-box .alchemy-info-box:first-child .alchemy-row b{font-size:16px!important;font-weight:800!important;color:#c86b05!important;white-space:nowrap!important;} /* Patch 46 — center the opening-status heading and countdown */ #left-sidebar .server-open-box {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important;} #left-sidebar .server-open-box>.server-open-title {display:block!important;position:static!important;float:none!important;transform:none!important;inset:auto!important;align-self:center!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin:0 0 12px!important;padding:0 6px 10px!important;text-align:center!important;color:#26384a!important;background:transparent!important;border:0!important;border-bottom:1px solid #e5e9ed!important;line-height:1.5!important;} #left-sidebar .server-open-box>.server-open-content {width:100%!important;max-width:100%!important;margin:0 auto!important;box-sizing:border-box!important;text-align:center!important;} #left-sidebar .server-open-box #server-open-time {margin:0 auto!important;align-items:center!important;justify-content:center!important;text-align:center!important;} #left-sidebar .server-open-box #server-open-time>span {display:block!important;width:100%!important;text-align:center!important;} /* Patch 47 — blue labels matching the reference; no changes to login processing */ html body #sidebar.vsro-login-panel form#login > label { display:block!important; grid-column:1/-1!important; color:#159fc1!important; font-family:Tahoma,Arial,sans-serif!important; font-size:15px!important; font-weight:700!important; line-height:1.5!important; background:transparent!important; text-shadow:none!important; opacity:1!important; margin:5px 0 1px!important; padding:0!important; } html body #sidebar.vsro-login-panel form#login > label:first-of-type {margin-top:0!important;} /* Patch 48: compact, readable login panel; keep the blue account/password labels. */ html body #sidebar.vsro-login-panel>.top{margin:0 15px!important;padding:13px 0 10px!important;min-height:0!important;} html body #sidebar.vsro-login-panel>.top h4{color:#263747!important;font-size:16px!important;line-height:1.4!important;} html body #sidebar.vsro-login-panel>.middle{padding:12px 15px 16px!important;} html body #sidebar.vsro-login-panel form#login{row-gap:8px!important;column-gap:9px!important;align-items:stretch!important;} html body #sidebar.vsro-login-panel form#login>label{position:static!important;float:none!important;clear:both!important;display:block!important;width:100%!important;min-height:0!important;color:#159fc1!important;font-size:15px!important;font-weight:700!important;line-height:1.45!important;margin:3px 0 0!important;} html body #sidebar.vsro-login-panel form#login>.fake_input input{min-width:0!important;height:43px!important;background:#f4f8ff!important;border-color:#d1dce9!important;color:#1e2b3b!important;} html body #sidebar.vsro-login-panel form#login>.submit_button,html body #sidebar.vsro-login-panel form#login>a.register{min-width:0!important;min-height:43px!important;margin-top:7px!important;padding:9px 4px!important;font-size:12px!important;} html body #sidebar.vsro-login-panel .other_link_login{gap:9px!important;margin-top:14px!important;padding-top:12px!important;} html body #sidebar.vsro-login-panel .other_link_login a{font-size:12px!important;line-height:1.55!important;} @media(max-width:380px){html body #sidebar.vsro-login-panel>.middle{padding:12px!important;}html body #sidebar.vsro-login-panel form#login{column-gap:7px!important;}html body #sidebar.vsro-login-panel form#login>.submit_button,html body #sidebar.vsro-login-panel form#login>a.register{font-size:11px!important;}} /* Patch 49 — match real login form selectors, override legacy labels and remove top gap */ html body #sidebar.vsro-login-panel {padding-top:0!important;} html body #sidebar.vsro-login-panel>.top {position:relative!important;display:block!important;visibility:visible!important;height:auto!important;min-height:0!important;margin:0 15px!important;padding:12px 0 9px!important;opacity:1!important;background:transparent!important;} html body #sidebar.vsro-login-panel>.top h4 {display:block!important;visibility:visible!important;color:#263747!important;font-size:16px!important;opacity:1!important;} html body #sidebar.vsro-login-panel>.middle {padding-top:10px!important;} html body #sidebar.vsro-login-panel form#login label.vsro-login-label {color:#159fc1!important;font-size:15px!important;font-weight:700!important;line-height:1.45!important;text-shadow:none!important;background:transparent!important;opacity:1!important;} /* Patch 50: remove ONLY the blue ribbon behind the "เปิดเซิร์ฟเวอร์" heading. */ html body #right-extra-box .top-level-box > .top, html body #right-extra-box .top-level-box > .top h4 { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; clip-path: none !important; transform: none !important; color: #26384a !important; text-shadow: none !important; } html body #right-extra-box .top-level-box > .top::before, html body #right-extra-box .top-level-box > .top::after, html body #right-extra-box .top-level-box > .top h4::before, html body #right-extra-box .top-level-box > .top h4::after { content: none !important; display: none !important; } html body #right-extra-box .top-level-box > .top { width: 100% !important; height: auto !important; min-height: 0 !important; padding: 10px 12px !important; margin: 0 !important; text-align: center !important; } html body #right-extra-box .top-level-box > .top h4 { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: center !important; white-space: normal !important; } /* Patch 53: leaderboard card, scoped to avoid changing other widgets */ /* Patch 54: right column is a single vertical stack; no empty grid row between login and ranking. */ html body #container .wrap-main .inner-main>.main>.wrap-content>.vsro-right-stack { grid-column:3!important;grid-row:1!important;display:flex!important;flex-direction:column!important; align-self:start!important;align-items:stretch!important;gap:12px!important; min-width:0!important;width:100%!important;margin:0!important;padding:0!important; position:static!important;float:none!important;transform:none!important;box-sizing:border-box!important; } html body #container .vsro-right-stack>#sidebar.vsro-login-panel { display:block!important;position:static!important;float:none!important;transform:none!important; width:100%!important;max-width:100%!important;margin:0!important;min-height:0!important; } html body #container .vsro-right-stack>#right-extra-box.vsro-right-widgets { display:flex!important;flex-direction:column!important;gap:12px!important; position:static!important;float:none!important;transform:none!important; width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important; } html body #container .vsro-right-stack .vsro-rank53 {margin:0!important;} @media(max-width:1050px){html body #container .wrap-main .inner-main>.main>.wrap-content>.vsro-right-stack{grid-column:2!important;grid-row:2!important;}} @media(max-width:700px){html body #container .wrap-main .inner-main>.main>.wrap-content>.vsro-right-stack{grid-column:1!important;grid-row:3!important;}} /* Patch 55: stable right-column flow. Prevent overlap from legacy positioning. */ html body #container .wrap-main .inner-main>.main>.wrap-content>.vsro-right-stack { display:flex!important;flex-direction:column!important;gap:16px!important; align-items:stretch!important;align-self:start!important;position:relative!important; height:auto!important;min-height:0!important;overflow:visible!important; } html body #container .vsro-right-stack>#sidebar.vsro-login-panel, html body #container .vsro-right-stack>#right-extra-box.vsro-right-widgets, html body #container .vsro-right-stack .vsro-rank53, html body #container .vsro-right-stack .alchemy-info-box { position:relative!important;inset:auto!important;transform:none!important;float:none!important; height:auto!important;min-height:0!important;max-height:none!important; margin:0!important;clear:both!important;flex-shrink:0!important; } html body #container .vsro-right-stack>#right-extra-box.vsro-right-widgets { display:flex!important;flex-direction:column!important;gap:16px!important; } html body #container .vsro-right-stack .alchemy-info-box .alchemy-section-caption { position:static!important;transform:none!important;float:none!important; margin:0 0 12px!important;line-height:1.5!important; } /* Patch 59: ranking reload action, white and muted gold */ .vsro-rank59-actions{display:flex;justify-content:center;padding:9px 8px 12px}.vsro-rank59-actions button{background:#fff;color:#8c681f;border:1px solid #d7bd80;border-radius:8px;padding:7px 14px;font:600 13px inherit;cursor:pointer}.vsro-rank59-actions button:hover{background:#fff8e8}.vsro-rank59-actions button:focus-visible{outline:2px solid #926a18;outline-offset:2px} /* Patch 60: loading state for leaderboard refresh */ #vsro-rank59-retry:disabled{opacity:.65;cursor:wait;} /* Patch 63: Asia / Euro leaderboard filters */ /* Patch 65 — center all six status items evenly within the white bar */ html body #container .vsro-modern-status{ display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important; align-items:center!important;justify-content:center!important;gap:0!important; text-align:center!important; } html body #container .vsro-modern-status>div{ display:flex!important;flex-direction:column!important;align-items:center!important; justify-content:center!important;text-align:center!important;min-width:0!important; padding:4px 12px!important;margin:0!important; } html body #container .vsro-modern-status>div small, html body #container .vsro-modern-status>div strong{display:block!important;text-align:center!important;max-width:100%;} @media(max-width:900px){html body #container .vsro-modern-status{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:16px!important;}html body #container .vsro-modern-status>div:nth-child(3){border-right:0!important;}} @media(max-width:520px){html body #container .vsro-modern-status{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:12px!important;padding:14px 8px!important;}html body #container .vsro-modern-status>div:nth-child(2n){border-right:0!important;}html body #container .vsro-modern-status>div:nth-child(3){border-right:1px solid #e8e8e8!important;}} /* Patch 66 — subtle vertical dividers between server-status columns */ html body #container .vsro-modern-status>div{border-right:1px solid #e3e5e8!important;} html body #container .vsro-modern-status>div:last-child{border-right:0!important;} @media(max-width:900px){ html body #container .vsro-modern-status>div:nth-child(3n){border-right:0!important;} html body #container .vsro-modern-status>div:nth-child(2n):not(:nth-child(3n)){border-right:1px solid #e3e5e8!important;} } @media(max-width:520px){ html body #container .vsro-modern-status>div:nth-child(n){border-right:1px solid #e3e5e8!important;} html body #container .vsro-modern-status>div:nth-child(2n){border-right:0!important;} } /* Patch 67 — remove the protruding cyan ribbon on the server status card */ html body #left-sidebar .server-open-box::before, html body #left-sidebar .server-open-box::after, html body #left-sidebar .server-open-title::before, html body #left-sidebar .server-open-title::after { content:none!important;display:none!important;visibility:hidden!important; background:none!important;border:0!important;box-shadow:none!important; } html body #left-sidebar .server-open-box, html body #left-sidebar .server-open-title { background-image:none!important; } /* Patch 68: clip legacy cyan tab protruding outside server status card. Patch 67 hid pseudo elements but did not clip child backgrounds. */ html body #container #left-sidebar > .server-open-box { overflow:hidden!important; isolation:isolate!important; border-radius:16px!important; background:#fff!important; } html body #container #left-sidebar > .server-open-box > .server-open-title { background:transparent!important; background-image:none!important; box-shadow:none!important; clip-path:none!important; } html body #container #left-sidebar > .server-open-box > .server-open-title::before, html body #container #left-sidebar > .server-open-box > .server-open-title::after { display:none!important;content:none!important; } /* Patch 70: remove the original cyan title ribbon at its source. */ html body #container #left-sidebar .server-open-box > .server-open-title { background:transparent!important; background-image:none!important; left:auto!important; top:auto!important; position:static!important; width:100%!important; margin:0 0 12px!important; padding:0 6px 10px!important; color:#26384a!important; border-bottom:1px solid #e5e9ed!important; text-align:center!important; } /* Patch 110 — remove protruding cyan ribbon on the left server-status card */ html body #container #left-sidebar::before, html body #container #left-sidebar::after, html body #container #left-sidebar > .server-open-box::before, html body #container #left-sidebar > .server-open-box::after, html body #container #left-sidebar > .server-open-box > .server-open-title::before, html body #container #left-sidebar > .server-open-box > .server-open-title::after { content: none !important; display: none !important; visibility: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body #container #left-sidebar { overflow: hidden !important; background-image: none !important; } html body #container #left-sidebar > .server-open-box { border-color: #d9e3e9 !important; background: #fff !important; background-image: none !important; overflow: hidden !important; isolation: isolate !important; } html body #container #left-sidebar > .server-open-box > .server-open-title { background: transparent !important; background-image: none !important; border-left: 0 !important; box-shadow: none !important; }