/* ============================================
   MOBILE OVERRIDES v3.0 (20260626v)
   Force-override ALL fixed widths with !important
   Loaded via footer.html (AFTER all page-specific CSS)
   
   IMPORTANT: ALL rules are inside media queries.
   NO global rules except overflow prevention.
   ============================================ */

/* ===== GLOBAL (all sizes) - ONLY overflow prevention ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

* {
  box-sizing: border-box !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

table {
  display: block !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* ===== TABLET (<= 991px) ===== */
@media screen and (max-width: 991px) {

  /* --- GLOBAL LAYOUT --- */
  .section-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
  .section {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .fboxRow > * {
    flex-shrink: 1 !important;
  }

  /* --- HOMEPAGE BANNER-S: keep 4-per-row --- */
  .banner-s .banner-list {
    flex-wrap: wrap !important;
    padding: 10px !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .banner-s .banner-list .banner-item {
    flex: 1 1 calc(25% - 8px) !important;
    width: calc(25% - 8px) !important;
    min-width: calc(25% - 8px) !important;
    max-width: calc(25% - 8px) !important;
    padding: 15px 15px !important;
  }

  /* --- HOMEPAGE RESOLVE: keep 4-per-row --- */
  .resolve-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .resolve-content .resolve-box {
    flex: 1 1 calc(25% - 12px) !important;
    width: calc(25% - 12px) !important;
    min-width: calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
    margin: 0 !important;
    padding: 20px !important;
  }
  .resolve .section-title h2 {
    font-size: 26px !important;
    white-space: normal !important;
  }

  /* --- HOMEPAGE PRACTICE: 3-per-row --- */
  .practice .practice-content {
    flex-wrap: wrap !important;
  }
  .practice .practice-box {
    width: calc(33.33% - 15px) !important;
    flex-shrink: 1 !important;
    padding: 20px !important;
    min-width: calc(33.33% - 15px) !important;
    max-width: calc(33.33% - 15px) !important;
  }
  .practice .brand-box {
    width: calc(33.33% - 20px) !important;
    height: 100px !important;
    min-width: calc(33.33% - 20px) !important;
  }
  .cert-list .cert-item {
    width: calc(25% - 10px) !important;
    min-width: calc(25% - 10px) !important;
  }

  /* --- HOMEPAGE NEWS --- */
  .news-content {
    gap: 30px !important;
    flex-wrap: wrap !important;
  }
  .news-content .news-cont {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* --- HOMEPAGE BASE --- */
  .section-base .base img {
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* --- PRODUCT PAGES: hot-item, product-item --- */
  .product-hot .hot-item,
  .product-item {
    width: calc(50% - 20px) !important;
    min-width: calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
    padding: 20px !important;
    flex-shrink: 1 !important;
  }
  .product-hot .hot-list,
  .product-hot .product-list,
  .product-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .product-hot .standard .attr {
    width: 100px !important;
  }
  .product-hot .hot-price {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .product-hot .hot-price .btn {
    width: 100% !important;
  }

  /* --- PRODUCT PAGES: cloud-box --- */
  .product-cloud .cloud-box {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    padding: 20px !important;
  }
  .product-cloud .cloud-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .product-cloud .cloud-box img {
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    width: 80px !important;
    height: 80px !important;
  }

  /* --- PRODUCT PAGES: performance --- */
  .product-performance .performance {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .product-performance .performance-left,
  .product-performance .performance-left3 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .product-performance .performance-left img,
  .product-performance .performance-left3 img {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    max-height: 400px !important;
  }
  .product-performance .performance-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- PRODUCT PAGES: efficient tabs --- */
  .efficient .nav-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .efficient .nav-tabs a {
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    padding: 10px 15px !important;
    flex-shrink: 0 !important;
  }
  .efficient .tab-content {
    min-width: 100% !important;
    width: 100% !important;
  }
  .tabs-efficient .tab-box {
    flex-direction: column !important;
  }
  .tabs-efficient .tabs-img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .tabs-efficient .tabs-img img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* --- PRODUCT PAGES: price, standards, help --- */
  .price .price-item {
    width: calc(50% - 20px) !important;
    min-width: calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
  .price .price-list,
  .standards-list,
  .help-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .standards-box {
    width: calc(50% - 20px) !important;
    min-width: calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
  .help-box {
    width: calc(50% - 20px) !important;
    min-width: calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
    padding: 25px 20px !important;
  }
  .product-price .price .more a {
    width: 100% !important;
    height: 80px !important;
    line-height: 80px !important;
  }

  /* --- PRODUCT PAGES: product-item structure --- */
  .product-item-top {
    flex-direction: column !important;
  }
  .product-item-top .product-item-left,
  .product-item-top .product-item-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 15px !important;
  }
  .product-item-bottom {
    padding: 15px !important;
  }

  /* --- PRODUCT FLOW BOXES --- */
  .product-flow .flow,
  .product-rent .flow,
  .product-trusteeship .flow,
  .flow {
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: center !important;
  }
  .product-flow .flow .flow-box,
  .product-rent .flow .flow-box,
  .product-trusteeship .flow .flow-box,
  .flow .flow-box,
  .flow-box {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    flex-shrink: 1 !important;
  }

  /* --- PRODUCT-SMS STANDARDS --- */
  .product-sms .standards-box .stand-cont {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- PRODUCT PHONATION --- */
  .product-phonation .phonation {
    flex-direction: column !important;
  }
  .product-phonation .phonation .phonation-left {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- SOLUTION PAGES --- */
  .solution-scene .scene-box {
    flex-direction: column !important;
    padding: 30px 20px !important;
    gap: 30px !important;
  }
  .solution-scene .scene-box img {
    width: 100% !important;
    height: auto !important;
    max-width: 480px !important;
    min-width: 100% !important;
  }
  .solution-advantage .advantage {
    height: auto !important;
    padding: 30px 15px !important;
    background-image: none !important;
  }
  .solution-advantage .advantage-list {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: center !important;
  }
  .solution-advantage .advantage-box {
    position: relative !important;
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 250px !important;
  }
  .solution-advantage .line {
    display: none !important;
  }
  .trend .trend-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .trend-box {
    flex: 1 1 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    padding: 25px !important;
    height: auto !important;
  }
  .trend-box img {
    height: 100px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .solution-future .form-group {
    width: 100% !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .solution-list .solution-item {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* --- PARTNER PAGES --- */
  .advantage-content .fboxRow,
  .reward-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .advantage-content .advantage-item,
  .reward-content .reward-item,
  .advantage-content .fboxRow > div,
  .reward-content .fboxRow > div {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
  .process-content .fboxRow,
  .step-content .fboxRow,
  .join-flow .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .process-content .process-item,
  .process-content .fboxRow > div,
  .step-content .step-item,
  .step-content .fboxRow > div,
  .join-flow .step-box,
  .join-flow .flow-item,
  .join-flow .fboxRow > div {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
  .agent-support .support-list .support-item {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .agent-flow {
    flex-wrap: wrap !important;
    gap: 15px !important;
    display: flex !important;
  }
  .agent-flow .flow-box {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* --- ABOUT US --- */
  .about-details {
    flex-direction: column !important;
  }
  .about-details .about-details-left,
  .about-details .about-details-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  .about-details .about-details-left p {
    width: 100% !important;
    max-width: 100% !important;
  }
  .about-details .about-details-right .about-details-item {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .about-reason .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .about-reason .reason-box,
  .about-reason [class*="reason-item-"] {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
  .about-together .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .about-together .reason-box {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    padding: 25px !important;
  }
  .about-box .box-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .about-box .box-list .box-item {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    padding: 20px !important;
    height: auto !important;
  }
  .about-box .box-list .box-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 200px !important;
  }
  .about-example .box-list .box-item {
    width: calc(50% - 8px) !important;
    height: auto !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
  .about-milestone .milestone-list {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .about-stats .fboxRow .flex1 {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .about-custom .custom-box {
    flex-wrap: wrap !important;
  }
  .about-why .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .about-why .fboxRow > div {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
  }

  /* --- SERVICE GUARANTEE --- */
  .server-sustain .sustain {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .server-sustain .sustain .sustain-box {
    flex: 1 1 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    padding: 20px !important;
  }
  .contact-support .support-box {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    padding: 20px !important;
  }
  .contact-support .support-box img {
    margin-right: 0 !important;
    margin-bottom: 15px !important;
  }

  /* --- DOCUMENT PAGE --- */
  .docement-list .document-box {
    width: calc(50% - 20px) !important;
    min-width: calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
  .docement-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .page .nav-left {
    width: 250px !important;
    min-width: 250px !important;
  }
  .page .content-page {
    left: 200px !important;
    width: calc(100% - 200px) !important;
    max-width: calc(100% - 200px) !important;
  }
  .overview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  .page .guide-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- CONTACT PAGE --- */
  .contact-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .contact-content .contact-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- FEEDBACK PAGE --- */
  .feedback-form .form-horizontal .radio label {
    width: calc(50% - 5px) !important;
    height: 60px !important;
  }
  .feedback-form .form-horizontal .form-radio {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* --- RECRUIT PAGE --- */
  .recuit-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 20px !important;
  }
  .recuit .recuit-btn-group {
    overflow-x: auto !important;
  }

  /* --- ACTIVITIES PAGE --- */
  .active-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .active-item {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    margin-bottom: 15px !important;
  }
  .seckill-goods {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .seckill-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 15px !important;
  }
  .cloud-goods .cloud-item {
    flex-direction: column !important;
    height: auto !important;
  }
  .cloud-item .cloud-left,
  .cloud-item .cloud-mid,
  .cloud-item .cloud-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 15px 0 !important;
  }
  .cloud-left {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .cloud-mid .cloud-config-item {
    width: 33% !important;
  }
  .cloud-tab .tab-left .tab-item {
    width: auto !important;
    min-width: 100px !important;
    padding: 0 15px !important;
  }
  .more-acticve .more-box {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .more-acticve .more-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- NEWS/ANNOUNCE --- */
  .news-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .announce-new-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 15px !important;
  }
  .announce-list,
  .news-list {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .news-advert {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  .news-index-banner,
  .news-index-banner .news-banner-cont,
  .news-index-banner .news-banner-filter {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  /* --- DOMAIN PAGES --- */
  .domain-info .domain-desc-box {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .shop-content {
    flex-direction: column !important;
  }
  .shop-content .shop-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .domain-search .input-search {
    flex-wrap: wrap !important;
  }
  .domain-search .input-search input,
  .domain-search .input-search .search-btn,
  .domain-search .input-search .input-search-select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- DOMAIN BUY --- */
  .domain-buy .creat-template-box .form-info {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .domain-buy .creat-template-box .form-info .form-item .form-value input,
  .domain-buy .creat-template-box .form-info .form-item .form-value select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .domain-buy .user-type {
    width: 100% !important;
    min-width: 100% !important;
  }
  .domain-buy .upload-box .upload-content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- SERVER/RENT BANNER LIST --- */
  .server-banner-list,
  .rent-banner-list {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .server-banner-list .server-banner-item,
  .rent-banner-list .rent-banner-item {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  /* --- NAV DROPDOWN --- */
  .nav-item-box {
    min-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .nav-content {
    gap: 10px !important;
    padding: 30px 15px !important;
  }
  .nav-content a {
    width: calc(50% - 5px) !important;
  }

  /* --- FOOTER --- */
  .footer-content .footer-nav {
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 20px 15px !important;
  }
  .footer-nav-box {
    flex: 1 1 calc(33.33% - 20px) !important;
  }
  .footer-content .footer-nav .footer-nav-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .footer-nav-right .footer-nav-box .footer-nav-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- FORMS --- */
  .form-group {
    width: 100% !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* --- ASIDE TOOLS --- */
  .aside-tools {
    display: none !important;
  }

  /* --- DIALOG/MODAL --- */
  .activities-page .dialog-box .authentication-content {
    width: 90% !important;
    max-width: 400px !important;
  }
  .activities-page .dialog-box .buyCloud-content {
    width: 95% !important;
    max-width: 400px !important;
    min-width: auto !important;
  }
  .activities-page .dialog-box .buy-form select {
    width: 100% !important;
  }

  /* --- HONOR/CERT GRID --- */
  .honor-content .honor-item,
  .cert-content .cert-item {
    width: calc(33.33% - 10px) !important;
    min-width: calc(33.33% - 10px) !important;
  }

  /* --- TRUSTEESHIP / RENT PAGES --- */
  .trusteeship-content .fboxRow,
  .rent-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .trusteeship-content .fboxRow > div,
  .rent-content .fboxRow > div {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  /* --- SSL/ICP/SMS PAGES --- */
  .ssl-content .fboxRow,
  .icp-content .fboxRow,
  .sms-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .ssl-content .fboxRow > div,
  .icp-content .fboxRow > div,
  .sms-content .fboxRow > div {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  /* --- TRADEMARK PAGE --- */
  .trademark-box .fboxRow {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .trademark-box .input-search {
    flex-wrap: wrap !important;
  }
  .trademark-box .input-search input {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* ===== MOBILE (<= 767px) ===== */
@media screen and (max-width: 767px) {

  body {
    font-size: 14px !important;
  }

  /* Navigation */
  .nav-header {
    height: 50px !important;
    padding: 0 10px !important;
  }
  .nav-menu {
    display: none !important;
  }
  .nav-right .control {
    font-size: 12px !important;
    margin: 0 5px !important;
  }
  .nav-header .nav-left .nav-icon img {
    width: 90px !important;
    height: 24px !important;
    margin-right: 10px !important;
  }

  /* Sections */
  .section-content {
    padding: 30px 12px !important;
  }
  .section-title h2 {
    font-size: 22px !important;
  }
  .section-title .section-desc {
    font-size: 13px !important;
  }

  /* Banner */
  .banner-cont .swiper-slide {
    height: 220px !important;
  }
  .section-content h1 {
    font-size: 20px !important;
  }
  .banner-desc {
    font-size: 13px !important;
  }
  .section-content .btn-normal {
    padding: 8px 20px !important;
    font-size: 13px !important;
  }

  /* Homepage banner-s: 2-per-row on phone */
  .banner-s .banner-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .banner-s .banner-list .banner-item {
    width: calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }

  /* Homepage resolve: 2-per-row on phone */
  .resolve-content .fboxRow {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .resolve-content .resolve-box {
    width: calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
  .resolve .section-title h2 {
    font-size: 22px !important;
    white-space: normal !important;
  }

  /* Homepage practice: 2-per-row */
  .practice .practice-box,
  .practice .brand-box {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .cert-list .cert-item {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
  }
  /* News: stack vertically on mobile (official announcements one row, news one row) */
  .news-content {
    flex-direction: column !important;
  }
  .news-content .news-cont {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  /* Product pages - ALL single column */
  .product-hot .hot-item,
  .product-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .product-cloud .cloud-box {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .price .price-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .standards-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .help-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .efficient .nav-tabs a {
    min-width: 90px !important;
    font-size: 14px !important;
  }

  /* Flow boxes - single column */
  .flow .flow-box,
  .flow-box,
  .agent-flow .flow-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Solution pages - ALL single column */
  .solution-advantage .advantage-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .trend-box {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .solution-list .solution-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Partner pages - ALL single column */
  .advantage-content .advantage-item,
  .reward-content .reward-item,
  .advantage-content .fboxRow > div,
  .reward-content .fboxRow > div {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .process-content .process-item,
  .process-content .fboxRow > div,
  .step-content .step-item,
  .step-content .fboxRow > div,
  .join-flow .step-box,
  .join-flow .flow-item,
  .join-flow .fboxRow > div {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .agent-support .support-list .support-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* About us - ALL single column */
  .about-reason .reason-box,
  .about-reason [class*="reason-item-"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .about-together .reason-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .about-box .box-list .box-item,
  .about-example .box-list .box-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .about-stats .fboxRow .flex1 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .about-why .fboxRow > div {
    width: 100% !important;
    min-width: 100% !important;
  }
  .about-details .about-details-right .about-details-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Service guarantee - ALL single column */
  .server-sustain .sustain .sustain-box {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .contact-support .support-box {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Document */
  .docement-list .document-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .page .nav-left {
    width: 200px !important;
    min-width: 200px !important;
  }
  .page .content-page {
    left: 160px !important;
    width: calc(100% - 160px) !important;
    max-width: calc(100% - 160px) !important;
  }

  /* Activities - ALL single column */
  .active-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .cloud-mid .cloud-config-item {
    width: 50% !important;
  }
  .more-acticve .more-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Server banner2 */
  .server-banner2 .section-content {
    padding: 40px 15px !important;
  }
  .server-banner2 h1 {
    font-size: 22px !important;
  }
  .server-banner2 .server-banner-desc,
  .server-banner2 .server-banner-desc2 {
    font-size: 13px !important;
  }
  .server-banner-desc {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Domain */
  .domain-search .input-search input,
  .domain-search .input-search .search-btn,
  .domain-search .input-search .input-search-select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  /* Server/rent banner list */
  .server-banner-list .server-banner-item,
  .rent-banner-list .rent-banner-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Nav dropdown */
  .nav-item-box {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .nav-content a {
    width: 100% !important;
  }

  /* Footer */
  .footer-content .footer-nav {
    flex-direction: column !important;
  }
  .footer-nav-box {
    flex: 1 1 100% !important;
  }
  .footer .footer-record {
    flex-direction: column !important;
    text-align: center !important;
    padding: 10px 5px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  /* Promise */
  .promise {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .promise-box {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Forms */
  .feedback-form .form-horizontal .radio label {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Tables */
  .table {
    font-size: 12px !important;
  }
  .table th,
  .table td {
    padding: 8px 5px !important;
  }

  /* Honor/cert grid */
  .honor-content .honor-item,
  .cert-content .cert-item {
    width: calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
  }

  /* Recruit */
  .recuit-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Trusteeship/rent */
  .trusteeship-content .fboxRow > div,
  .rent-content .fboxRow > div {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* SSL/ICP/SMS */
  .ssl-content .fboxRow > div,
  .icp-content .fboxRow > div,
  .sms-content .fboxRow > div {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Trademark */
  .trademark-box .fboxRow > div {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* News/announce */
  .news-advert,
  .news-index-banner,
  .news-index-banner .news-banner-cont,
  .news-index-banner .news-banner-filter,
  .overview,
  .page .guide-box,
  .document-details .document-view-item .document-view-cont a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}

/* ===== SMALL PHONES (<= 480px) ===== */
@media screen and (max-width: 480px) {
  body {
    font-size: 13px !important;
  }

  .nav-header {
    height: 45px !important;
    padding: 0 8px !important;
  }
  .nav-header .nav-left .nav-icon img {
    width: 90px !important;
    height: 20px !important;
  }

  .section-content {
    padding: 25px 8px !important;
  }
  .section-title h2 {
    font-size: 18px !important;
  }
  .section-title .section-desc {
    font-size: 12px !important;
  }

  .banner-cont .swiper-slide {
    height: 180px !important;
  }
  .section-content h1 {
    font-size: 18px !important;
  }

  .cloud-mid .cloud-config-item {
    width: 100% !important;
  }

  .honor-content .honor-item,
  .cert-content .cert-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .cert-list .cert-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .practice .brand-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Page nav for document */
  .page .nav-left {
    width: 150px !important;
    min-width: 150px !important;
  }
  .page .content-page {
    left: 120px !important;
    width: calc(100% - 120px) !important;
    max-width: calc(100% - 120px) !important;
  }
}