/* Trang đích quảng cáo / SEO (vd. /mo-chi-nhanh-hai-phong/) – nạp sau style.css, chỉ áp dụng cho body.trang-dich */

.trang-dich .lp-anh {
  margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
  background: var(--navy-2); box-shadow: 0 24px 50px rgba(11, 37, 64, 0.18);
}
.trang-dich .lp-anh img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.trang-dich .lp-anh figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; color: var(--white); font-weight: 600;
  background: linear-gradient(to top, rgba(11, 37, 64, 0.7), transparent);
}

/* Bảng so sánh chi phí cố định */
.trang-dich .lp-bang-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.trang-dich .lp-bang { width: 100%; border-collapse: collapse; min-width: 560px; }
.trang-dich .lp-bang th, .trang-dich .lp-bang td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.trang-dich .lp-bang tr:last-child th, .trang-dich .lp-bang tr:last-child td { border-bottom: 0; }
.trang-dich .lp-bang thead th { background: var(--navy); color: var(--white); font-weight: 600; }
.trang-dich .lp-bang thead th:last-child { background: var(--blue-dark); }
.trang-dich .lp-bang tbody th { color: var(--navy); font-weight: 600; width: 22%; }
.trang-dich .lp-bang td { color: var(--muted); }
.trang-dich .lp-bang td:last-child { color: var(--ink); background: var(--tint); }
.trang-dich .lp-ghi { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 18px 0 0; }

/* Chi nhánh hay văn phòng đại diện */
.trang-dich .lp-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trang-dich .lp-the { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.trang-dich .lp-the h3 { margin-bottom: 4px; }
.trang-dich .lp-the .solution-sub { margin-bottom: 12px; }
.trang-dich .lp-the ul { margin: 0; padding-left: 18px; color: var(--muted); }
.trang-dich .lp-the li { margin-bottom: 6px; }

.trang-dich .solution-grid.ba-the { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
  .trang-dich .solution-grid.ba-the { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .trang-dich .solution-grid.ba-the, .trang-dich .lp-hai-cot { grid-template-columns: 1fr; }
}

/* Điện thoại: style.css đổi trang chủ sang kiểu Fanpage (ẩn thanh đầu trang, hero, chân trang…).
   Trang đích giữ bố cục thường. */
@media (max-width: 640px) {
  .trang-dich { --header-h: 66px; background: var(--white); }
  html:has(.trang-dich) { scroll-padding-top: calc(var(--header-h) + 8px); }
  .trang-dich .site-header { display: block; }
  .trang-dich .hero { display: block; padding: 28px 0 32px; }
  .trang-dich .site-footer { display: block; }
  .trang-dich .section, .trang-dich .section-tint { padding: 44px 0; margin-bottom: 0; }
  .trang-dich .section-tint { background: var(--tint); }
  .trang-dich .section-dark { background: var(--navy); }
  .trang-dich .section-head, .trang-dich .location-info, .trang-dich .contact-copy { padding-top: 0; margin: 0 0 24px; }
  .trang-dich .section-head::before, .trang-dich .section-head::after,
  .trang-dich .location-info::before, .trang-dich .location-info::after,
  .trang-dich .contact-copy::before, .trang-dich .contact-copy::after { content: none; }
  .trang-dich .section-head .eyebrow, .trang-dich .location-info .eyebrow, .trang-dich .contact-copy .eyebrow {
    position: static; font: 600 0.75rem/1.2 var(--font-brand); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown); margin-bottom: 10px;
  }
  .trang-dich .section-dark .contact-copy .eyebrow { color: var(--brown-light); }
  .trang-dich .solution-grid.ba-the { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; }
  .trang-dich .solution-card { flex: none; }
  .trang-dich .lp-anh { aspect-ratio: 16 / 10; }
}