/* Giao diện làm lại (ghi đè giao diện gốc) — phần 7/8. Nạp đúng thứ tự trong HTML (file sau ghi đè file trước). */
@media (max-width: 760px) {
  .network-art {
    min-height: 0;
    height: 310px;
    order: 2;
  }
  .network-art > img {
    width: 100%;
    height: 370px;
  }
  .network-caption {
    left: 22px;
    right: 22px;
    top: 20px;
    font-size: 8px;
  }
  .origin-stamp {
    left: 22px;
    right: 22px;
    bottom: 20px;
  }
  .origin-stamp strong {
    font-size: 20px;
  }
  .network-content h2 {
    font-size: 36px;
  }
  .route-list {
    column-gap: 20px;
  }
  .route-list strong {
    font-size: 12px;
  }
  .route-list a {
    padding: 15px 0;
  }
  .network-content .helper {
    font-size: 10px;
  }
  .process {
    gap: 25px 20px;
  }
  .step:before {
    font-size: 33px;
    margin-bottom: 18px;
  }
  .step h3 {
    font-size: 18px;
  }
  .step p {
    font-size: 12px;
  }
  .blog-art {
    height: 190px;
  }
  .blog-card-body {
    padding: 20px 0 0;
  }
  .blog-card h3 {
    font-size: 24px;
  }
  .blog-card {
    margin-bottom: 15px;
  }
  .closing-section {
    padding: 30px 0;
  }
  .cta {
    padding: 30px 25px;
  }
  .cta h2 {
    font-size: 38px;
  }
  .cta .edition-label {
    font-size: 8px;
    margin-bottom: 20px;
  }
  .cta p {
    font-size: 12px;
  }
  .cta .button {
    margin-top: 25px;
  }
  .cta-watermark {
    font-size: 220px;
    right: -10px;
    top: 50px;
  }
  .page-hero {
    padding: 23px 0 34px;
  }
  .breadcrumb {
    margin-bottom: 26px;
    font-size: 9px;
  }
  .page-hero-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-hero h1 {
    font-size: 37px;
    line-height: 1.16;
  }
  .page-hero p {
    font-size: 12px;
  }
  .page-hero .eyebrow {
    font-size: 8px;
    margin-bottom: 20px;
  }
  .page-hero-arrow {
    font-size: 250px;
    right: -40px;
    top: 0;
  }
  .two-col {
    gap: 28px;
  }
  .card {
    padding: 25px;
  }
  .service-card {
    padding: 24px 25px 0;
  }
  .blog-card {
    padding: 0;
  }
  .blog-search {
    padding: 20px;
    gap: 15px;
  }
  .blog-search .button {
    margin-top: 4px;
  }
  .quote-grid {
    gap: 15px;
  }
  .quote-bottom {
    margin-top: 16px;
  }
  .result {
    padding: 18px;
  }
  .price {
    font-size: 33px;
  }
  .contact-info {
    padding: 30px 25px;
  }
}
@media (max-width: 760px) {
  .contact-info h2 {
    font-size: 33px;
  }
  .contact-info h3 {
    font-size: 18px;
  }
  .form-grid {
    gap: 18px;
  }
  .about-statement {
    font-size: 29px;
  }
  .editorial-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .editorial-aside {
    position: static;
    padding: 22px;
  }
  .editorial-layout .prose h2 {
    font-size: 24px;
  }
  .editorial-layout .prose p {
    font-size: 14px;
  }
  .article-end {
    padding: 22px;
  }
  .admin-login {
    padding: 28px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
  }
  .footer-grid > div:first-child {
    grid-column: 1/-1;
  }
  .footer-grid > div:last-child {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .footer-grid > div:last-child h3,
  .footer-grid > div:last-child p {
    grid-column: 1/-1;
  }
  .footer-grid > div:first-child > p {
    font-size: 25px;
  }
  .footer-bottom {
    font-size: 8px;
  }
  .footer-brand img {
    width: 150px;
  }
  .notice {
    font-size: 10px;
    padding: 14px 16px;
  }
  .button {
    font-size: 12px;
  }
  .tool-tab {
    min-width: 0;
  }
}