@charset "utf-8";

/* Modern compatibility layer for legacy public and account pages. */
:root {
  --site-primary: #165dff;
  --site-primary-dark: #0d3fb8;
  --site-navy: #081a33;
  --site-cyan: #16a6e4;
  --site-accent: #ff7d00;
  --site-bg: #f5f7fb;
  --site-text: #1d2635;
  --site-muted: #667085;
  --site-border: #e4eaf2;
  --site-shadow: 0 12px 36px rgba(8, 26, 51, .09);
}

html { background: var(--site-bg); }
body { min-width: 0 !important; color: var(--site-text); background: var(--site-bg) !important; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; }
body > section:first-of-type:not(.sy-hero):not(.sy-notice):not(.copyright),
body > div:first-of-type:not(.sy-home-hero-wrap):not(.sy-auth-hero-wrap):not(.app-header) { position: relative; }
a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
input, select, textarea, button { font-family: inherit; }
img { max-width: 100%; }

/* The shared modern navigation replaces both legacy public and account headers. */
body:not(.sy-home-page):not(.sy-auth-page) > .sy-header {
  position: sticky !important;
  top: 0 !important;
  right: auto !important;
  left: auto !important;
  z-index: 10000;
  width: 100% !important;
  min-height: 72px;
  background: linear-gradient(125deg, #062b68 0%, #075fb8 58%, #16a6e4 100%) !important;
  box-shadow: 0 8px 28px rgba(4, 38, 82, .16) !important;
}
body .h-top.sy-sticky-nav-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000;
  height: 72px !important;
  min-width: 0 !important;
  overflow: visible !important;
  background: linear-gradient(125deg, #062b68 0%, #075fb8 58%, #16a6e4 100%) !important;
  box-shadow: 0 8px 28px rgba(4, 38, 82, .16) !important;
}
body .h-top.sy-sticky-nav-wrap > .sy-header {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  min-height: 72px;
  background: transparent !important;
  box-shadow: none !important;
}
body .h-top.sy-sticky-nav-wrap > .sy-header > .sy-nav,
body .h-top.sy-sticky-nav-wrap > .sy-header > .sy-nav.fix,
body .h-top.sy-sticky-nav-wrap > .sy-header > .sy-nav.small {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: min(1260px, calc(100% - 40px)) !important;
  height: 72px !important;
  background: transparent !important;
}
body .h-top.sy-sticky-nav-wrap + .content { min-height: calc(100vh - 72px); }
.sy-header, .sy-header * { box-sizing: border-box; }

/* Public navigation */
body > nav,
body > nav.fix { position: sticky !important; top: 0; left: auto; z-index: 10000; width: 100%; min-width: 0 !important; background: linear-gradient(125deg, #062b68 0%, #075fb8 58%, #16a6e4 100%) !important; box-shadow: 0 8px 28px rgba(4, 38, 82, .16); }
body > nav .nav { display: flex; width: min(1260px, calc(100% - 40px)) !important; height: 72px !important; align-items: center; margin: 0 auto; }
body > nav .nav .logo { width: 156px; height: 58px; flex: 0 0 156px; background-position: left center; background-size: contain; }
body > nav .nav > ul { display: flex; height: 100%; min-width: 0; flex: 1; align-items: stretch; }
body > nav .nav > ul > li { display: flex; align-items: center; }
body > nav .nav a { line-height: 72px !important; }
body > nav .nav > ul > li > a { padding: 0 14px; border-radius: 8px; color: #e7efff; font-weight: 600; }
body > nav .nav > ul > li:hover > a { color: #fff; background: rgba(255,255,255,.09); }
body > nav .cy_box { display: flex; order: 3; align-items: center; margin-left: auto !important; gap: 8px; }
body > nav .cy_box a { display: inline-flex; height: 38px; align-items: center; margin: 0 !important; padding: 0 16px; border: 1px solid rgba(255,255,255,.38); border-radius: 9px; line-height: 1 !important; }
body > nav .cy_box a:last-child { border-color: var(--site-accent); background: var(--site-accent); }
body > nav .dropmenu { top: 64px; border-radius: 12px; background: #102744; box-shadow: 0 18px 44px rgba(0,0,0,.24); }

/* Public content */
.asdl_main, .shopping_main, .clearing_main, .article_main, .join_main, .update_main, .seo_main, .domain_main, .main_pl { min-height: calc(100vh - 72px); background: var(--site-bg) !important; }
.asdl_main_wrap, .shopping_main_wrap, .clearing_main_wrap, .main_pl_box, .article_main_wrap, .join_main_wrap, .update_main_wrap, .seo_main_wrap, .advantage_wrap { width: min(1180px, calc(100% - 40px)) !important; margin-right: auto !important; margin-left: auto !important; }
.main_pl { padding: 58px 0 64px; }
.main_pl_box { height: auto !important; min-height: 260px; padding: 30px !important; border: 1px solid var(--site-border); border-radius: 18px; background: #fff !important; box-shadow: var(--site-shadow); }
.main_pl_box > h3 { margin: 0 0 20px; color: var(--site-navy); font-size: 26px; }
.main_pl_box textarea { box-sizing: border-box; width: min(760px, 100%) !important; min-height: 128px; padding: 14px; border: 1px solid #d7dee9; border-radius: 10px; outline: 0; resize: vertical; }
.main_pl_box textarea:focus { border-color: var(--site-primary); box-shadow: 0 0 0 3px rgba(22,93,255,.1); }
.main_pl_box #pl_xz_cx a, .main_pl_box ._domaincheck, .main_pl_box .reg_domain_all { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 24px; border-radius: 9px; color: #fff !important; background: var(--site-primary) !important; }
._domainlist { max-width: 100%; overflow-x: auto; }
._domainlist table { width: 100%; min-width: 680px; border: 1px solid var(--site-border); border-radius: 12px; background: #fff; }
.advantage { padding: 64px 0; background: #fff !important; }
.advantage_wrap > h3 { margin-bottom: 34px; color: var(--site-navy) !important; font-size: 30px !important; text-align: center; }
.advantage_wrap > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.advantage_wrap > div > div { box-sizing: border-box; width: auto !important; margin: 0 !important; padding: 26px 22px; border: 1px solid var(--site-border); border-radius: 15px; background: var(--site-bg); text-align: center; }
.advantage_wrap h4 { color: var(--site-navy); }
.advantage_wrap p { color: var(--site-muted); line-height: 1.8; }
.posion { padding: 18px 0 10px; color: var(--site-muted) !important; font-size: 13px !important; }
.posion a { color: var(--site-primary) !important; }
.chose, .conditions, .room-list, .select_choose, .ht_info, .dns_gl, .cn_lc, .pp_info, .order_info, .order_pay { border: 1px solid var(--site-border) !important; border-radius: 12px; background: #fff !important; box-shadow: 0 5px 18px rgba(8,26,51,.04); }
.asdl_main .chose, .conditions { padding: 16px 20px !important; }

#asdl > ul, #vps > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#asdl li, #vps li { position: relative; display: flex; width: auto !important; height: auto !important; min-height: 400px; flex-direction: column; margin: 0 !important; padding: 25px !important; border: 1px solid var(--site-border) !important; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(8,26,51,.04); text-align: left; transition: .25s; }
#asdl li:hover, #vps li:hover { border-color: rgba(22,93,255,.3) !important; box-shadow: var(--site-shadow) !important; transform: translateY(-4px); }
#asdl li .li_t, #vps li .li_t { height: auto !important; min-height: 50px; border-bottom: 1px solid var(--site-border) !important; text-align: left; }
#asdl li h3, #vps li h3 { color: var(--site-navy) !important; font-size: 19px !important; }
#asdl li .adsl_info, #vps li .adsl_info { flex: 1; padding: 16px 0 !important; color: var(--site-muted); line-height: 1.9; }
#asdl li .adsl_price, #vps li .adsl_price { text-align: left; }
#asdl li .adsl_price b, #vps li .adsl_price b { color: var(--site-accent) !important; }
#asdl li > a, #vps li > a { width: 100% !important; height: 42px !important; margin-top: 15px !important; border-radius: 9px !important; color: #fff !important; background: var(--site-primary) !important; line-height: 42px !important; text-align: center; }
#asdl li > a:hover, #vps li > a:hover { background: var(--site-primary-dark) !important; }

.page { padding: 20px 0 45px; }
.page li { border-color: var(--site-border) !important; border-radius: 8px; background: #fff !important; }
.page li.active { color: #fff !important; border: 1px solid var(--site-primary) !important; background: var(--site-primary) !important; }

/* Articles and general lists */
.asdl_main_wrap > #content, .asdl_main_wrap > .list-group { margin-bottom: 50px; padding: 32px; border: 1px solid var(--site-border); border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(8,26,51,.05); }
#content .post-title h1 { color: var(--site-navy) !important; font-size: clamp(28px, 4vw, 38px) !important; line-height: 1.35 !important; }
#content .post-content { color: #344054; }
#content .post-content img { height: auto; max-width: 100%; }
.asdl_main_wrap > .list-group .list-group-item { margin-bottom: 10px; border: 1px solid var(--site-border) !important; border-radius: 10px !important; }
.asdl_main_wrap > .list-group .list-group-item.active { border-color: var(--site-primary) !important; background: linear-gradient(120deg, var(--site-primary), var(--site-cyan)) !important; }
.asdl_main_wrap > .list-group a.list-group-item:not(.active):hover { border-color: rgba(22,93,255,.3) !important; background: #f7faff !important; transform: translateY(-1px); }

/* Tables, shopping and forms */
.shopping_lc, .clearing_lc { height: auto !important; padding: 22px 0 !important; background: #fff; }
.shopping_lc_wrap, .clearing_lc_wrap { width: min(1180px, calc(100% - 40px)) !important; }
.shopping_main_wrap, .clearing_main_wrap { padding: 30px 0 55px !important; }
.shopping_main_wrap h2, .clearing_main_wrap h2 { width: auto !important; margin-bottom: 20px; padding: 0 0 14px !important; border-bottom: 1px solid var(--site-border) !important; color: var(--site-navy); font-size: 25px !important; text-align: left !important; }
.shopping_main_wrap table, .content_table table, .table table { overflow: hidden; border: 1px solid var(--site-border) !important; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(8,26,51,.04); }
.shopping_main_wrap th, .content_table th, .table th { color: #344054 !important; background: #f3f7fc !important; font-weight: 700 !important; }
.shopping_main_wrap td, .content_table td, .table td { border-color: var(--site-border) !important; }
.shopping_main_wrap select, .shopping_main_wrap input, .content input[type=text], .content input[type=password], .content input[type=number], .content select, .content textarea, .pp_info input[type=text], .pp_info select { min-height: 38px; padding: 0 11px; border: 1px solid #d7dee9 !important; border-radius: 8px !important; color: var(--site-text); background: #fff !important; }
.shopping_main_wrap input:focus, .shopping_main_wrap select:focus, .content input:focus, .content select:focus, .content textarea:focus { border-color: var(--site-primary) !important; outline: 0; box-shadow: 0 0 0 3px rgba(22,93,255,.1); }
.shopping_main_wrap .shopping_r .submit, .content input[type=submit], .content input[type=button], .content button, .pp_info input[type=submit], .select_choose button { border-radius: 9px !important; color: #fff !important; background: var(--site-primary) !important; box-shadow: 0 8px 20px rgba(22,93,255,.18); cursor: pointer; }
.shopping_main_wrap .shopping_r .submit:hover, .content input[type=submit]:hover, .content input[type=button]:hover, .content button:hover { background: var(--site-primary-dark) !important; }
.shopping_main_wrap table { width: 100% !important; }
.shopping_main_wrap form > div[style] { border: 1px solid var(--site-border); border-radius: 10px; }
.shopping_r { min-height: 74px; padding: 12px 0; }
.shopping_r .total { color: var(--site-accent) !important; }
.shopping_r input[type=button] { position: static !important; width: auto !important; min-width: 150px; height: 44px !important; margin-left: 10px; padding: 0 20px; border: 0; border-radius: 9px !important; font-size: 16px !important; }
.ui-dialog { max-width: calc(100vw - 30px); border: 0 !important; border-radius: 14px; box-shadow: 0 24px 70px rgba(8,26,51,.25); }
.ui-dialog .ui-dialog-titlebar { border: 0 !important; border-radius: 14px 14px 0 0; color: #fff !important; background: linear-gradient(120deg, var(--site-primary), var(--site-cyan)) !important; }

/* Cloud configurators */
body .h-top.sy-sticky-nav-wrap + .content { box-sizing: border-box; width: 100% !important; min-width: 0 !important; padding-bottom: 50px; background: var(--site-bg) !important; }
body .h-top.sy-sticky-nav-wrap + .content .cal_title, body .h-top.sy-sticky-nav-wrap + .content .cal_context, body .h-top.sy-sticky-nav-wrap + .content .room-list { box-sizing: border-box; width: min(1200px, calc(100% - 40px)) !important; margin-right: auto !important; margin-left: auto !important; }
body .h-top.sy-sticky-nav-wrap + .content .cal_title { height: auto !important; padding: 24px 0 14px; background: transparent !important; }
body .h-top.sy-sticky-nav-wrap + .content .cal_text { width: 100% !important; }
body .h-top.sy-sticky-nav-wrap + .content .cal_text h5 { color: var(--site-navy) !important; font-size: 28px !important; }
body .h-top.sy-sticky-nav-wrap + .content .room-list { height: auto !important; margin-bottom: 14px !important; padding: 16px 20px !important; border: 1px solid var(--site-border) !important; border-radius: 12px; box-shadow: 0 5px 18px rgba(8,26,51,.04); }
body .h-top.sy-sticky-nav-wrap + .content .room-item { border-radius: 7px; }
body .h-top.sy-sticky-nav-wrap + .content .room-item.active { background: var(--site-primary) !important; }
body .h-top.sy-sticky-nav-wrap + .content .cal_context { overflow: visible; border: 1px solid var(--site-border); border-radius: 16px; background: #fff; box-shadow: var(--site-shadow); }
body .h-top.sy-sticky-nav-wrap + .content .tab_box, body .h-top.sy-sticky-nav-wrap + .content .current_set, body .h-top.sy-sticky-nav-wrap + .content .bot { border-color: var(--site-border) !important; }
body .h-top.sy-sticky-nav-wrap + .content .fee_join, body .h-top.sy-sticky-nav-wrap + .content .fee_buy { border-radius: 8px !important; color: #fff !important; background: var(--site-primary) !important; }
body .h-top.sy-sticky-nav-wrap + .content .fee_buy { background: var(--site-accent) !important; }

/* Public footer */
body > footer { min-width: 0 !important; background: #081729 !important; }
body > footer .footer_wrap { width: min(1180px, calc(100% - 40px)) !important; }
body > footer .footer_wrap ol { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 26px; }
body > footer .footer_wrap ol > li { float: none !important; width: auto !important; }
body > footer h3 { color: #fff; font-size: 15px !important; }
body > footer a { color: #b8c6d9 !important; }
body > footer a:hover { color: #fff !important; }
body > .copyright { min-width: 0 !important; height: auto !important; min-height: 35px; padding: 8px 20px; line-height: 20px !important; background: #051222 !important; }

/* Account center */
body:has(> .main) > .sy-header { position: sticky !important; background: linear-gradient(125deg, #062b68 0%, #075fb8 58%, #16a6e4 100%) !important; box-shadow: 0 8px 28px rgba(4,38,82,.16) !important; }
body > .app-header.navbar { position: sticky; top: 0; z-index: 10000; display: flex; min-height: 68px; border: 0; background: linear-gradient(125deg,#062b68 0%,#075fb8 58%,#16a6e4 100%); box-shadow: 0 8px 28px rgba(4,38,82,.16); }
body > .app-header .navbar-header { display: flex; width: 210px; min-height: 68px; align-items: center; background: rgba(4,34,76,.38) !important; }
body > .app-header .navbar-logo { display: flex; width: 100%; align-items: center; padding: 0 22px; color: #fff !important; font-size: 18px; font-weight: 700; }
body > .app-header .navbar-collapse { min-height: 68px; flex: 1; border: 0; background: transparent !important; box-shadow: none; }
body > .app-header .navbar-nav, body > .app-header .navbar-nav > ul { display: flex; height: 68px; align-items: stretch; }
body > .app-header .navbar-nav li { position: relative; display: flex; align-items: center; }
body > .app-header .navbar-nav a { display: flex; height: 68px; align-items: center; padding: 0 14px; color: #e7efff !important; font-size: 14px; font-weight: 600; }
body > .app-header .navbar-nav li:hover > a { color: #fff !important; background: rgba(255,255,255,.08); }
.main { display: flex; min-width: 0 !important; min-height: calc(100vh - 68px); background: var(--site-bg); }
.main > .menu { position: relative !important; width: 210px !important; min-width: 210px; float: none !important; color: #b6c5d8; background: #0c203a !important; box-shadow: 8px 0 24px rgba(8,26,51,.08); }
.main > .menu .menu-switch { display: none !important; }
.main > .menu li, .main > .menu li div { border-color: transparent !important; background-image: none !important; }
.main > .menu li div { height: 48px; padding-left: 20px; border-left: 3px solid transparent !important; line-height: 48px; }
.main > .menu li div a, .main > .menu li div { color: #b6c5d8 !important; }
.main > .menu li:hover div, .main > .menu li.active div { color: #fff !important; border-left-color: var(--site-primary) !important; background: rgba(255,255,255,.07) !important; }
.main > .menu li p a { height: 42px; padding-left: 57px; color: #9db0c8 !important; background: rgba(3,17,34,.44) !important; line-height: 42px; }
.main > .menu li p a:hover { color: #fff !important; background: rgba(22,93,255,.2) !important; }
.main > .content { box-sizing: border-box; width: calc(100% - 210px) !important; min-width: 0; flex: 1; float: none !important; padding: 28px 34px !important; background: var(--site-bg) !important; }
.main > .content > table, .main > .content > .table { display: block; max-width: 100%; overflow-x: auto; }
.main > .content > table, .main > .content > .table table { min-width: 760px; border: 1px solid var(--site-border); border-radius: 12px; background: #fff; }
.content .select_choose { padding: 16px 18px !important; }
.content .select_choose form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.content .select_choose label { margin: 0 !important; color: #475467; }
.content .select_choose button { min-height: 38px; padding: 0 20px; border: 0; }
.content .posion { height: auto !important; margin-bottom: 18px !important; padding: 0 0 14px; border-bottom: 1px solid var(--site-border) !important; color: var(--site-navy) !important; font-size: 24px !important; line-height: 1.4 !important; }
.content_table, .content .form, .content .new, .content .right, #tabs > div, .list-group-item { border-color: var(--site-border) !important; border-radius: 12px; background: #fff !important; box-shadow: 0 5px 18px rgba(8,26,51,.05); }
.content_table { padding: 22px !important; }
.content > #tabs { max-width: 100%; }
.content #tabs .row { display: flex; flex-wrap: wrap; margin-right: -9px; margin-left: -9px; }
.content #tabs [class*="col-md-"] { box-sizing: border-box; min-width: 230px; flex: 1 1 25%; padding: 0 9px; }
.content #tabs h3 { color: var(--site-navy); font-size: 18px; }
.content #tabs .list-group-item { display: block; height: auto; min-height: 42px; margin-bottom: 7px; padding: 11px 13px; color: #475467; }
.content #tabs .table { display: table; width: 100%; }
.content #tabs > div { max-width: 100%; overflow-x: auto; }
.content #tabs > div > table { min-width: 760px; }
.content_box { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.content_box li { box-sizing: border-box; width: auto !important; margin: 0 !important; border-radius: 14px; box-shadow: var(--site-shadow); }
.content .form-control { box-sizing: border-box; width: 100%; }
.ui-tabs .ui-tabs-nav { display: flex; flex-wrap: wrap; gap: 5px; border: 0 !important; border-radius: 12px; background: #eaf1fb !important; }
.ui-tabs .ui-tabs-nav li { float: none !important; border-radius: 8px !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { border-color: var(--site-primary) !important; background: var(--site-primary) !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #fff !important; }

@media (max-width: 1080px) {
  #asdl > ul, #vps > ul { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body > footer .footer_wrap ol { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body > nav .nav > ul > li > a { padding: 0 9px; font-size: 13px; }
  .content_box { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .advantage_wrap > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  body > nav .nav { width: calc(100% - 30px) !important; overflow-x: auto; }
  body > nav .nav .logo { position: sticky; left: 0; z-index: 2; flex-basis: 132px; background-color: #075fb8; }
  body > nav .cy_box { display: none; }
  body > nav .nav > ul { min-width: max-content; }
  #asdl > ul, #vps > ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .main { display: block; }
  .main > .menu { width: 100% !important; min-width: 0; }
  .main > .menu > ul { display: flex; overflow-x: auto; }
  .main > .menu > ul > li { position: relative; min-width: 150px; }
  .main > .menu li p { position: absolute; z-index: 20; width: 220px; }
  .main > .content { width: 100% !important; padding: 22px 15px !important; }
  body > .app-header .navbar-header { width: 160px; }
  body > .app-header .navbar-collapse { overflow-x: auto; }
  body > .app-header .navbar-nav, body > .app-header .navbar-nav > ul { min-width: max-content; }
  .shopping_main_wrap, .clearing_main_wrap { overflow-x: auto; }
  .shopping_main_wrap table { min-width: 900px; }
  .asdl_main_wrap > #content, .asdl_main_wrap > .list-group { padding: 22px; }
  body .h-top.sy-sticky-nav-wrap + .content .tab_box { min-width: 760px; }
  body .h-top.sy-sticky-nav-wrap + .content .cal_context { overflow-x: auto; }
}
@media (max-width: 560px) {
  #asdl > ul, #vps > ul, .content_box, .advantage_wrap > div { grid-template-columns: 1fr; }
  body > footer .footer_wrap ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .asdl_main_wrap, .shopping_main_wrap, .clearing_main_wrap, .main_pl_box, .article_main_wrap, .join_main_wrap, .update_main_wrap, .seo_main_wrap, .advantage_wrap { width: calc(100% - 24px) !important; }
  .main_pl_box { padding: 20px !important; }
  .content #tabs [class*="col-md-"] { min-width: 100%; flex-basis: 100%; }
}