/* ==========================================================================
   魔方系统 默认主题 (default) 手机端/移动端自适应响应式样式表
   适配屏幕: 屏幕宽度 <= 992px 及 <= 768px (iPhone, Android, iPad 等设备)
   ========================================================================== */

/* 移动端菜单按钮默认隐藏 (PC端) */
.mobile-toggle-btn {
  display: none;
}

@media screen and (max-width: 991px) {
  /* 全局基础重置 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-text-size-adjust: 100%;
  }

  /* 容器边距 */
  .section-content {
    padding: 35px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section-p {
    padding: 0 16px !important;
  }

  .section-title h2,
  .section-title h3 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .section-title .section-desc {
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 0 10px !important;
  }

  /* ---------------- 顶部导航 Header (双层自适应架构：顶部Logo/控制台 + 次行横向滑动导航栏) ---------------- */
  #header,
  .nav-shadow {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  .nav-header {
    height: auto !important;
    min-height: 50px !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 解构 nav-left，让 logo 与 nav-menu 独立分行排布 */
  .nav-header .nav-left {
    display: contents !important;
  }

  /* 第一行左侧：Logo */
  .nav-header .nav-icon {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    padding-left: 14px !important;
    flex: 1 !important;
  }

  .nav-header .nav-icon a {
    display: flex !important;
    align-items: center !important;
  }

  .nav-header .nav-icon img,
  #logo {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    margin-right: 0 !important;
    object-fit: contain !important;
  }

  /* 第一行右侧：控制台、登录/注册 */
  .nav-right {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    padding-right: 14px !important;
    font-size: 13px !important;
    margin-left: auto !important;
  }

  .nav-right .control {
    margin: 0 6px !important;
    font-size: 13px !important;
    color: #555555 !important;
    white-space: nowrap !important;
  }

  .nav-right .no-login {
    display: flex !important;
    align-items: center !important;
    margin-left: 4px !important;
  }

  .nav-right .no-login .btn {
    padding: 0 10px !important;
    height: 28px !important;
    line-height: 26px !important;
    font-size: 12px !important;
    margin-right: 4px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
  }

  .nav-right .login-in {
    height: 50px !important;
    padding: 0 6px !important;
    margin-left: 4px !important;
    display: flex !important;
    align-items: center !important;
  }

  .nav-right .login-in::after {
    display: none !important;
  }

  .nav-right .login-in .name {
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .nav-right .login-in .head-img {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .nav-right .login-in .login-menu {
    position: fixed !important;
    top: 50px !important;
    right: 10px !important;
    width: 150px !important;
  }

  /* 第二行：横向流畅手势滑动导航栏 (完美展示产品、推荐实例、物理服务器、解决方案等所有选项) */
  .nav-menu {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    height: 42px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    border-top: 1px solid #f2f4f7 !important;
    border-bottom: 1px solid #eaedf0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  .nav-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .nav-menu a,
  .nav-menu .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: #444444 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .nav-menu a:hover .nav-item,
  .nav-menu a:active .nav-item,
  .nav-menu .nav-item:hover,
  .nav-menu .nav-item:active {
    color: #ff6739 !important;
    border-bottom: 2px solid #ff6739 !important;
    font-weight: bold !important;
  }

  /* 针对不原生支持 display: contents 的特殊机型回退方案 */
  @supports not (display: contents) {
    .nav-header {
      display: flex !important;
      flex-direction: column !important;
    }
    .nav-header .nav-left {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
    .nav-header .nav-right {
      position: absolute !important;
      top: 0 !important;
      right: 12px !important;
      height: 50px !important;
    }
  }

  /* 移动端子菜单下拉框 (微卡片自适应) */
  .nav-cont {
    position: absolute !important;
    top: 92px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    transition: all 0.3s ease !important;
  }

  .nav-cont .nav-content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }

  .nav-cont .nav-content a {
    width: 100% !important;
  }

  .nav-cont .nav-item-box {
    min-width: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 8px !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    align-items: center !important;
  }

  .nav-cont .nav-item-box img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .nav-cont .nav-item-box .item-box-title {
    margin-left: 8px !important;
  }

  .nav-cont .nav-item-box .item-box-title .title {
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  .nav-cont .nav-item-box .item-box-title .desc {
    font-size: 11px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media screen and (max-width: 768px) {
  /* ---------------- 首页 Banner 区域 ---------------- */
  .banner-cont .swiper-slide {
    height: auto !important;
    min-height: 200px !important;
    background: linear-gradient(0, #f7f9fa, #f9fafb) !important;
    padding: 15px 0 !important;
  }

  .banner-cont .swiper-slide .img {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: cover !important;
  }

  .banner-cont .section-content {
    padding: 20px 16px !important;
  }

  .banner-cont .section-content h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .banner-cont .banner-desc {
    font-size: 13px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  .banner-cont .btn {
    padding: 6px 18px !important;
    font-size: 14px !important;
  }

  /* 首页 Banner 下方 4 个活动卡片 */
  .banner .banner-s {
    margin: 10px 12px 20px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  }

  .banner .banner-s .banner-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .banner-s .banner-list .banner-item {
    width: 100% !important;
    padding: 14px 8px !important;
    text-align: center !important;
    border: 1px solid #f2f4f7 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .banner-s .banner-list .banner-item h5 {
    font-size: 15px !important;
    font-weight: bold !important;
    margin: 0 0 4px 0 !important;
  }

  .banner-s .banner-list .banner-item .title-desc {
    font-size: 12px !important;
    margin: 4px 0 8px 0 !important;
    line-height: 1.3 !important;
    color: #666666 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .banner-list .banner-item .banner-tag {
    font-size: 11px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
  }

  /* ---------------- 首页 服务内容 (云服务器/裸金属/域名等) ---------------- */
  .service-content {
    margin: 15px 0 !important;
  }

  .service-content.fboxCol {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .service-content .fboxRow {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .service-content .fboxRow > a,
  .service-content .flex1 {
    width: 100% !important;
    flex: none !important;
    margin: 0 0 14px 0 !important;
    display: block !important;
    text-decoration: none !important;
  }

  .service .service-box {
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #eaedf0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  .service .service-box .service-title {
    font-size: 18px !important;
    margin-bottom: 6px !important;
    color: #222222 !important;
  }

  .service-box .title-desc {
    height: auto !important;
    margin: 6px 0 12px 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #666666 !important;
  }

  .service .service-tag-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .service .service-tag-group .service-tag {
    margin-right: 0 !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    height: 22px !important;
    line-height: 20px !important;
    border-radius: 3px !important;
  }

  .service-btn-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
    gap: 8px !important;
  }

  .service-btn-group .service-price {
    font-size: 13px !important;
  }

  .service-btn-group .service-price .font24 {
    font-size: 22px !important;
  }

  .service-btn-group .fboxWrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .service-btn-group .btn {
    padding: 5px 12px !important;
    font-size: 13px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin-right: 0 !important;
    border-radius: 4px !important;
  }

  /* ---------------- 首页 解决方案板块 ---------------- */
  .resolve-content {
    margin: 15px 0 !important;
  }

  .resolve-content .fboxRow {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  .resolve-content .resolve-box {
    max-width: 100% !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 20px 16px !important;
    min-height: 130px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  .resolve-content .resolve-box h4 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .resolve-content .resolve-box .resolve-link {
    margin-top: 25px !important;
    font-size: 13px !important;
  }

  /* ---------------- 首页 服务实践 (客户案例) ---------------- */
  .practice .practice-content {
    display: flex !important;
    flex-direction: column !important;
    margin: 15px 0 !important;
  }

  .practice .practice-box {
    width: 100% !important;
    margin: 6px 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .practice .practice-box img {
    max-width: 150px !important;
    height: auto !important;
  }

  /* ---------------- 产品页面 (物理裸机 dedicated.html & 云服务器 cloud.html) ---------------- */
  .product-banner,
  .server-banner {
    height: auto !important;
    min-height: 150px !important;
    max-height: 220px !important;
    padding: 20px 16px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .server-banner h1,
  .product-banner h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .server-banner-desc {
    font-size: 13px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  /* 标签栏 (中国地区 / 亚太地区) */
  .hot.mt-20 {
    margin-top: 10px !important;
  }

  .jr-tabs {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding: 0 6px !important;
    border-bottom: 2px solid #E6EAED !important;
  }

  .jr-tabs .title {
    padding: 8px 18px !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }

  /* 城市/地区选择器 (湖北-襄阳 / 陕西-西安 / 浙江-宁波 ...) */
  .product-country {
    height: 44px !important;
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding: 0 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-radius: 4px !important;
  }

  .product-country .country-item {
    padding: 0 14px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
  }

  .product-des {
    font-size: 13px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 8px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* 产品列表与卡片 */
  .product-hot .hot-cont {
    margin: 0 !important;
    overflow: visible !important;
  }

  .product-hot .hot-list,
  .cloud-pro-list .hot-list.active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
  }

  .product-item,
  .product-hot .hot-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #eaedf0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  .product-item .product-item-top {
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  .product-item .product-item-top h4 {
    font-size: 18px !important;
  }

  .product-item .product-item-top .title-desc {
    font-size: 13px !important;
    margin-top: 6px !important;
  }

  .product-item .product-item-bottom {
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  .product-item-bottom .product-config > p {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
  }

  .product-config > p .config-lable {
    color: #666666 !important;
  }

  .product-config > p .config-value {
    color: #222222 !important;
    font-weight: 500 !important;
  }

  .product-item-bottom .product-text {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 0 !important;
  }

  .product-item-bottom .product-text .product-text-item {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  .product-item-bottom .product-price-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 14px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f2f4f7 !important;
    gap: 8px !important;
  }

  .product-price-box .price-left .price {
    font-size: 18px !important;
    color: #ff6739 !important;
  }

  .product-price-box .price-left .origin-price {
    font-size: 11px !important;
  }

  .product-price-box .price-right .product-btn {
    width: auto !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }

  /* 云服务器无忧上云卡片 */
  .product-cloud .cloud {
    display: flex !important;
    flex-direction: column !important;
    margin: 15px 0 !important;
  }

  .product-cloud .cloud-box {
    min-width: 100% !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 18px 14px !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  .product-cloud .cloud-box img {
    width: 52px !important;
    height: 52px !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  /* 云服务器 规格选项 tabs */
  .efficient .nav-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    border-radius: 4px 4px 0 0 !important;
  }

  .efficient .nav-tabs a {
    width: auto !important;
    padding: 10px 16px !important;
    height: auto !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  .efficient .nav-tabs img {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 4px !important;
  }

  .efficient .tab-content {
    min-width: 100% !important;
    border-radius: 0 0 4px 4px !important;
  }

  .tabs-efficient {
    padding: 20px 14px !important;
  }

  .tabs-efficient .tab-box {
    flex-direction: column !important;
  }

  .tab-box .tabs-content {
    padding-right: 0 !important;
  }

  .tabs-efficient .tabs-img {
    width: 100% !important;
    margin-top: 15px !important;
    height: auto !important;
  }

  /* ---------------- 活动页面 (activities.html) ---------------- */
  .activities-page .active-box .active-list {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 15px !important;
  }

  .activities-page .active-box .active-list .active-item {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
    border-radius: 6px !important;
  }

  .activities-page .active-box .active-type .dedicated-box,
  .activities-page .active-box .active-type .active-content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ---------------- 域名 / SSL / 短信 / 商标 / 托管等页面 ---------------- */
  .input-search {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .input-search input {
    width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
  }

  .input-search button,
  .input-search .btn {
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
  }

  .standards.fboxRow,
  .standards {
    display: flex !important;
    flex-direction: column !important;
    margin: 15px 0 !important;
  }

  .standards .standard-box {
    width: 100% !important;
    margin: 8px 0 !important;
    box-sizing: border-box !important;
  }

  .help.fboxRow,
  .help {
    display: flex !important;
    flex-direction: column !important;
    margin: 15px 0 !important;
  }

  .help .help-box {
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  /* ---------------- 常见通用容器弹性布局适配 ---------------- */
  .trend.fboxRow {
    flex-direction: column !important;
  }

  .flex2.fboxRow {
    flex-direction: column !important;
  }

  /* ---------------- 底部 Footer ---------------- */
  .register-advert img {
    width: 100% !important;
    height: auto !important;
  }

  .section-promise {
    background: #f7f8fa !important;
    padding: 15px 0 !important;
  }

  .promise {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 8px !important;
    padding: 10px 16px !important;
  }

  .promise-box {
    margin: 0 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .promise-box img {
    width: 24px !important;
    height: 24px !important;
  }

  .promise-box .ml-20 {
    margin-left: 8px !important;
    font-size: 12px !important;
  }

  .footer-content .footer-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .footer-nav-left {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
    width: 100% !important;
  }

  .footer-nav-box {
    margin-bottom: 10px !important;
  }

  .footer-nav-head {
    font-size: 15px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #222222 !important;
  }

  .footer-nav-item {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .footer-nav-right {
    margin-top: 25px !important;
    text-align: center !important;
    width: 100% !important;
    padding-top: 20px !important;
    border-top: 1px solid #eaedf0 !important;
  }

  .footer-nav-right .qr-code img {
    width: 90px !important;
    height: 90px !important;
    margin: 10px auto !important;
  }

  #footerRecord {
    padding: 15px 16px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  #footerRecord .left-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
  }

  #footerLink {
    text-align: center !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
  }

  /* 悬浮工具栏 (侧边客服) 在手机端缩小以免挡住抢购/购买按钮 */
  .aside-tools {
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
    bottom: 20px !important;
    right: 5px !important;
  }
}