/* Shared presentation for every public service detail page.
   Scope excludes the site's header and footer. Sizes follow the CSS viewport so
   zooming out does not leave a narrow text strip inside a very wide section. */
body.service-page {
  --service-outer: clamp(14px, 3vw, 120px);
  --service-inner: clamp(16px, 2vw, 64px);
  --service-space: clamp(20px, 2.5vw, 64px);
  --service-copy-size: clamp(15px, .95rem + .15vw, 20px);
  --service-small-size: clamp(12px, .82rem + .1vw, 16px);
  --service-h2-size: clamp(26px, 1.5rem + 1.1vw, 48px);
  --service-h3-size: clamp(18px, 1.1rem + .5vw, 28px);
}

html body.service-page main#main-content > :is(.service-hero, section.section, section.social-share) {
  box-sizing: border-box !important;
  width: calc(100% - var(--service-outer) - var(--service-outer)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}
html body.service-page main#main-content > :is(.service-hero, section.section) {
  padding-inline: var(--service-inner) !important;
}
html body.service-page main#main-content > section.section {
  padding-block: clamp(36px, 3.2vw, 80px) !important;
}
html body.service-page main#main-content > .service-hero {
  left: auto !important;
  transform: none !important;
  min-height: 0 !important;
  padding-block: clamp(115px, 8vh, 155px) clamp(34px, 4vw, 72px) !important;
  border-radius: clamp(16px, 1.3vw, 28px);
}
html body.service-page .service-hero h1 {
  width: min(100%, 32ch) !important;
  max-width: none !important;
  font-size: clamp(30px, 2rem + 1vw, 64px) !important;
  overflow-wrap: anywhere;
}
html body.service-page .service-hero .service-hero-intro {
  max-width: 68ch !important;
  font-size: var(--service-copy-size) !important;
}
html body.service-page .service-hero :is(.eyebrow, .service-search-tags, .service-topic-links) {
  max-width: 100%;
}

/* An even opening: introduction and scope use the same two-column rail. */
html body.service-page .service-detail-head {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  align-items: start !important;
  gap: var(--service-space) !important;
  margin: 0 0 clamp(26px, 3vw, 64px) !important;
  padding: 0 0 clamp(25px, 3vw, 64px) !important;
}
html body.service-page .service-detail-head > * { min-width: 0; }
html body.service-page .service-detail-title h2,
html body.service-page main#main-content > section.section .section-intro h2,
html body.service-page .tvc-production-content h2,
html body.service-page .service-area-summary h2,
html body.service-page .booking h2 {
  max-width: 100% !important;
  font-size: var(--service-h2-size) !important;
  line-height: 1.16 !important;
  text-wrap: wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
html body.service-page :is(.service-detail-description, .service-seo-lead, .service-seo-content--plain) {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
  font-size: var(--service-copy-size) !important;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
html body.service-page :is(.service-detail-description, .service-seo-lead, .service-seo-content--plain) > :first-child { margin-top: 0; }

/* Text-only items share a pair of columns. An item with an illustration spans
   the rail and places the image beside its text, removing the vacant half-row. */
html body.service-page .service-content-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 0 var(--service-space) !important;
  width: 100% !important;
}
html body.service-page .service-content-card {
  min-width: 0 !important;
  padding: 0 0 clamp(26px, 3vw, 52px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.service-page .service-content-card h3,
html body.service-page .tvc-production-content :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) h3 {
  max-width: none !important;
  font-size: var(--service-h3-size) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}
html body.service-page .service-content-card-copy,
html body.service-page .tvc-production-content :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) p {
  max-width: 74ch !important;
  font-size: var(--service-copy-size) !important;
  line-height: 1.7 !important;
  overflow-wrap: anywhere;
}
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--service-space);
}
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > :is(h3, .service-content-index) { grid-column: 1; }
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > .service-content-card-copy { display: contents !important; }
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > .service-content-card-copy > :not(figure):not(img) { grid-column: 1; }
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > .service-content-card-copy > :is(figure, img) {
  grid-column: 2;
  grid-row: 1 / span 12;
  align-self: start;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
html body.service-page .service-content-card-copy :is(figure, img) img,
html body.service-page .service-content-card-copy > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  border-radius: clamp(12px, 1vw, 20px) !important;
}

/* The planning module uses the same measured rail on every service, including media. */
html body.service-page main#main-content > .tvc-production-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(34px, 3.6vw, 72px) !important;
}
html body.service-page .tvc-production-content > :is(header, section, aside, nav) {
  min-width: 0;
  width: 100%;
  margin: 0 !important;
}
html body.service-page .tvc-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--service-space) !important;
  align-items: start !important;
}
html body.service-page .tvc-intro-title,
html body.service-page .tvc-intro-copy { min-width: 0; width: 100%; }
html body.service-page .tvc-intro h2 {
  width: 100%;
  max-width: 100% !important;
  text-wrap: wrap;
  overflow-wrap: break-word;
}
html body.service-page .tvc-intro-copy,
html body.service-page .tvc-intro-copy > p,
html body.service-page .tvc-section-heading > p:not(.eyebrow),
html body.service-page .tvc-budget-copy > p:not(.eyebrow) {
  max-width: 74ch !important;
  font-size: var(--service-copy-size) !important;
  line-height: 1.7 !important;
}
/* Guide headings need the same usable width as the cards below them. */
html body.service-page .tvc-section-heading {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html body.service-page .tvc-section-heading h2 {
  width: 100%;
  max-width: 100% !important;
  text-wrap: wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
html body.service-page .tvc-section-heading > p:not(.eyebrow) {
  max-width: min(100%, 80ch) !important;
}
html body.service-page :is(.tvc-type-grid, .tvc-format-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 28px) !important;
}
html body.service-page .tvc-process ol {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 28px) !important;
}
html body.service-page :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0 !important;
  padding: clamp(18px, 1.6vw, 32px) !important;
  overflow-wrap: anywhere;
}
html body.service-page .tvc-budget {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  align-items: start !important;
  gap: var(--service-space) !important;
  padding: clamp(24px, 3vw, 64px) !important;
}
html body.service-page .tvc-budget ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, .8vw, 18px) !important;
  margin: 0 !important;
}
html body.service-page .tvc-budget ul li,
html body.service-page .service-area-summary li {
  font-size: var(--service-small-size) !important;
  overflow-wrap: anywhere;
}

/* Align every section after the guide with the same inner edge. */
html body.service-page main#main-content > .service-related-articles > :is(.section-intro, .service-related-article-grid, .article-all) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
html body.service-page .service-related-article-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.7vw, 28px) !important;
}
html body.service-page .service-related-article-grid .article-card { min-width: 0; }
html body.service-page .service-related-article-grid .article-card-body { padding: clamp(16px, 1.4vw, 28px) !important; }
html body.service-page .service-related-article-grid .article-card :is(h3, h3 a) { font-size: var(--service-h3-size) !important; overflow-wrap: anywhere; }
html body.service-page .service-related-article-grid .article-card :is(p, .article-read) { font-size: var(--service-small-size) !important; }
html body.service-page main#main-content > section.section .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(12px, 1.6vw, 28px) !important; }
html body.service-page main#main-content > section.section .service-grid .service-card { min-width: 0; min-height: clamp(230px, 18vw, 420px) !important; }
html body.service-page main#main-content > section.section .service-grid .service-card h3 { font-size: var(--service-h3-size) !important; overflow-wrap: anywhere; }
html body.service-page main#main-content > section.section .service-grid .service-card :is(p, .service-card-description) { font-size: var(--service-small-size) !important; }
/* Let location copy use the available rail; only wrap at the real edge. */
html body.service-page .service-area-summary .section-intro {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
html body.service-page .service-area-summary .section-intro .eyebrow,
html body.service-page .service-area-summary .section-intro h2,
html body.service-page .service-area-summary .section-intro > p:last-child {
  width: 100%;
  max-width: none !important;
  text-wrap: wrap !important;
  overflow-wrap: normal;
  word-break: normal;
}
html body.service-page .service-area-summary .section-intro h2 {
  white-space: normal;
}
html body.service-page .tvc-budget-copy h2 {
  width: 100%;
  max-width: none !important;
  text-wrap: wrap !important;
  overflow-wrap: normal;
  word-break: normal;
}
html body.service-page .service-area-summary .section-intro p,
html body.service-page .booking > .section-intro p { font-size: var(--service-copy-size) !important; }
html body.service-page main#main-content > .booking { display: grid !important; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important; gap: var(--service-space) !important; }
html body.service-page main#main-content > .booking > * { min-width: 0; }
html body.service-page .booking-form :is(label, input, select, textarea) { font-size: var(--service-small-size) !important; }
html body.service-page .booking-form :is(input, select) { min-height: clamp(46px, 3.4vw, 60px) !important; }
html body.service-page .booking-form textarea { min-height: clamp(100px, 7vw, 180px) !important; }

@media (max-width: 900px) {
  html body.service-page .service-detail-head,
  html body.service-page .tvc-intro,
  html body.service-page .tvc-budget,
  html body.service-page main#main-content > .booking { grid-template-columns: minmax(0, 1fr) !important; }
  html body.service-page :is(.tvc-type-grid, .tvc-format-grid, .tvc-process ol),
  html body.service-page .service-related-article-grid,
  html body.service-page main#main-content > section.section .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  html body.service-page main#main-content > .service-hero { padding-top: 30px !important; }
  html body.service-page main#main-content > section.section { padding-block: 36px !important; }
  html body.service-page .service-content-grid,
  html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)),
  html body.service-page :is(.tvc-type-grid, .tvc-format-grid, .tvc-process ol, .tvc-budget ul),
  html body.service-page .service-related-article-grid,
  html body.service-page main#main-content > section.section .service-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > .service-content-card-copy { display: block !important; }
  html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > .service-content-card-copy > :is(figure, img) { width: 100% !important; margin: 16px 0 0 !important; }
  html body.service-page main#main-content > section.section .service-grid .service-card { min-height: 215px !important; }
  html body.service-page .service-hero h1 { font-size: clamp(28px, 7.3vw, 40px) !important; }
}

/* One continuous, unboxed reading flow for service details. */
html body.service-page .service-content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(8px, 1vw, 18px) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}
html body.service-page .service-content-card,
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(8px, 1vw, 16px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
html body.service-page .service-content-card-copy,
html body.service-page .service-content-card:has(.service-content-card-copy :is(figure, img)) > .service-content-card-copy {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  overflow-wrap: anywhere;
}
html body.service-page .service-content-card-copy > :is(h2, h3, h4, p, ul, ol, blockquote) {
  box-sizing: border-box;
  max-width: 100% !important;
  margin-inline: 0 !important;
  text-align: left !important;
}
html body.service-page .service-content-card-copy > :is(p, ul, ol, blockquote) {
  margin-block: .55em .9em !important;
}
html body.service-page .service-content-card-copy > :is(figure, img),
html body.service-page .service-content-card-copy figure {
  display: block !important;
  width: min(100%, 76rem) !important;
  max-width: 100% !important;
  margin: clamp(10px, 1.2vw, 20px) 0 !important;
}
html body.service-page .service-content-card-copy :is(figure, img) img,
html body.service-page .service-content-card-copy > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(62vw, 760px) !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
}

/* Zoom rất lớn (viewport < 240px CSS px, tương đương 400-500% trên điện thoại):
   bỏ cột số cố định và giảm padding để thẻ không tràn ngang. */
@media (max-width: 240px) {
  html body.service-page :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) {
    display: block !important;
    padding: 12px !important;
  }
  html body.service-page .tvc-type-card > .tvc-type-arrow { display: none !important; }
  html body.service-page :is(.tvc-type-grid, .tvc-format-grid, .tvc-process ol, .tvc-budget ul) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  html body.service-page .content-illustration,
  html body.service-page figure {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  html body.service-page .tvc-budget { padding: 12px !important; }
  html body.service-page .tvc-budget ul { padding-left: 0 !important; list-style-position: inside !important; }
  html body.service-page .tvc-budget li { margin-left: 0 !important; padding-left: 0 !important; }
  html body.service-page .tvc-production-content { padding-inline: 8px !important; margin-inline: 0 !important; }
  html body.service-page { --service-outer: 8px; --service-inner: 8px; }
}

/* Zoom rất lớn, áp dụng cho MỌI trang (không chỉ trang dịch vụ):
   biểu mẫu đặt lịch có ô nhập và nút với bề rộng tối thiểu lớn hơn viewport. */
@media (max-width: 240px) {
  html body .booking,
  html body .booking-form { padding: 10px !important; }
  html body .booking :is(input, select, textarea),
  html body form :is(input, select, textarea) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
  }
  html body .booking .button,
  html body .booking button,
  html body form button.button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
  }
  html body :is(.region-local-coverage, .region-planning-card, .region-hero-card) { padding-inline: 10px !important; }
}


/* Zoom-calibrated service reading rail and guide polish. */
@media (min-width: 1200px) {
  html body.service-page {
    --service-outer: clamp(18px, 3vw, 1200px);
    --service-inner: clamp(20px, 2vw, 800px);
    --service-space: clamp(20px, 2.5vw, 1000px);
    --service-copy-size: clamp(16px, .8vw, 400px);
    --service-small-size: clamp(12px, .75vw, 360px);
    --service-h2-size: clamp(28px, 1.75vw, 800px);
    --service-h3-size: clamp(20px, 1.2vw, 520px);
  }
  html body.service-page main#main-content > .service-hero {
    padding-inline: var(--service-inner) !important;
  }
  html body.service-page .service-hero h1 {
    font-size: clamp(32px, 3vw, 1500px) !important;
  }
  html body.service-page .service-detail-section,
  html body.service-page .service-area-summary,
  html body.service-page .service-related-articles,
  html body.service-page main#main-content > .booking {
    padding-inline: var(--service-inner) !important;
  }
  html body.service-page .service-detail-head,
  html body.service-page .service-content-grid {
    width: min(100%, 190ch) !important;
    max-width: 190ch !important;
    margin-inline: auto !important;
  }
  html body.service-page .service-detail-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(12px, 1.4vw, 560px) !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body.service-page .service-detail-title,
  html body.service-page .service-detail-description {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body.service-page .service-detail-title h2 {
    max-width: 100% !important;
    font-size: var(--service-h2-size) !important;
  }
  html body.service-page .service-detail-description {
    font-size: var(--service-copy-size) !important;
    line-height: 1.72 !important;
  }
  html body.service-page .service-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(14px, 1.5vw, 600px) !important;
  }
  html body.service-page .service-content-card,
  html body.service-page .service-content-card-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.service-page .service-content-index { display: none !important; }
  html body.service-page .service-content-card h3 {
    max-width: 64ch !important;
    font-size: var(--service-h3-size) !important;
  }
  html body.service-page .service-content-card-copy,
  html body.service-page .service-content-card-copy > p {
    max-width: 190ch !important;
    font-size: var(--service-copy-size) !important;
    line-height: 1.72 !important;
  }
  html body.service-page main#main-content > .tvc-production-content {
    width: calc(100% - 2 * var(--service-outer)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: var(--service-inner) !important;
    gap: var(--service-space) !important;
  }
  html body.service-page .tvc-intro {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(12px, 1.4vw, 560px) !important;
    width: 100%;
    max-width: 100% !important;
    margin-inline: auto;
  }
  html body.service-page .tvc-intro-copy,
  html body.service-page .tvc-intro-copy > p,
  html body.service-page .tvc-section-heading > p:not(.eyebrow),
  html body.service-page .tvc-budget-copy > p:not(.eyebrow) {
    max-width: 190ch !important;
    font-size: var(--service-copy-size) !important;
    line-height: 1.72 !important;
  }
  html body.service-page .tvc-section-heading h2,
  html body.service-page .tvc-intro h2,
  html body.service-page .tvc-budget h2 {
    font-size: var(--service-h2-size) !important;
    line-height: 1.2 !important;
  }
  html body.service-page :is(.tvc-type-grid, .tvc-format-grid, .tvc-process ol, .tvc-budget ul) {
    gap: clamp(12px, .9vw, 360px) !important;
  }
  html body.service-page :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) {
    box-sizing: border-box !important;
    min-height: clamp(100px, 6vw, 2400px) !important;
    padding: clamp(16px, 1.15vw, 460px) !important;
    border: 1px solid color-mix(in srgb, var(--line) 75%, var(--gold)) !important;
    border-radius: clamp(12px, .8vw, 320px) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, var(--gold)), var(--surface)) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 5%, transparent) !important;
  }
  html body.service-page :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) h3 {
    font-size: var(--service-h3-size) !important;
    line-height: 1.32 !important;
  }
  html body.service-page :is(.tvc-type-card, .tvc-step-card, .tvc-format-card) p,
  html body.service-page .tvc-budget ul li {
    font-size: var(--service-small-size) !important;
    line-height: 1.6 !important;
  }
  html body.service-page .tvc-production-content .eyebrow {
    font-size: clamp(11px, .65vw, 260px) !important;
    line-height: 1.35 !important;
  }
  html body.service-page .tvc-intro-points span {
    font-size: var(--service-small-size) !important;
    padding: .55em .8em !important;
  }
  html body.service-page .tvc-budget h2 {
    max-width: 100% !important;
    text-wrap: wrap;
  }
  html body.service-page .tvc-budget ul li {
    position: relative;
    padding: .65em .75em .65em 2.1em !important;
  }
  html body.service-page .tvc-budget ul li::before {
    left: .65em !important;
    top: 50% !important;
    transform: translateY(-50%);
    font-size: 1em !important;
  }
  html body.service-page .tvc-budget .button {
    font-size: var(--service-small-size) !important;
    min-height: clamp(44px, 2.5vw, 300px) !important;
    padding: .65em 1em !important;
  }
  html body.service-page .tvc-budget {
    min-height: 0 !important;
    padding: clamp(18px, 1.5vw, 600px) !important;
    gap: var(--service-space) !important;
    border-radius: clamp(16px, 1vw, 400px) !important;
  }
}

/* Vùng chạm tối thiểu 24px (WCAG 2.2 - 2.5.8) cho link đứng riêng ở footer và khu vực. */
html body .site-footer a,
html body .footer-legal a,
html body .region-hero-card a,
html body a.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* All service guide headings use their actual available width. */
html body.service-page .service-guide-module h2,
html body.service-page .service-guide-module .eyebrow {
  width: 100%;
  max-width: 100% !important;
  text-wrap: wrap !important;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Related-article heading follows the full article rail, too. */
html body.service-page .service-related-articles > .section-intro {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
html body.service-page .service-related-articles > .section-intro h2 {
  width: 100% !important;
  max-width: 100% !important;
  text-wrap: wrap !important;
  overflow-wrap: break-word !important;
  word-break: normal;
}

/* ---------------------------------------------------------------
   1. Chữ xuống dòng tự nhiên: bỏ căn đều (text-wrap: balance) vì nó
      ép tiêu đề thành khối hẹp, nhìn như bị dồn về một phía.
   --------------------------------------------------------------- */
html body :is(h1, h2, h3, h4, p, li) {
  text-wrap: wrap !important;
}
html body :is(.service-detail-title h2, .service-guide-module h2) {
  max-width: none !important;
}

/* ---------------------------------------------------------------
   2. Liên kết dạng chữ phải nhìn ra được là bấm được.
   --------------------------------------------------------------- */
html body a.text-link:not(.button):not(.hero-actions a) {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
  transition: text-decoration-color .18s ease, color .18s ease;
}
html body a.text-link:not(.button):not(.hero-actions a):hover {
  text-decoration-color: var(--gold);
}
html body a.text-link:not(.button):not(.hero-actions a):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
   3. <summary> hiện đang trông như chữ thường. Cho dạng nút pill
      kèm mũi tên xoay để biết đóng/mở. Không đụng .article-toc
      vì mục lục bài viết đã có kiểu riêng.
   --------------------------------------------------------------- */
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: border-color .18s ease, background .18s ease;
}
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary::-webkit-details-marker { display: none; }
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary::marker { content: ""; }
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary::after {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more)[open] > summary::after {
  margin-top: 2px;
  transform: rotate(225deg);
}
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--line));
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 420px) {
  html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary { font-size: 12px; padding: 7px 12px; }
}
@media (max-width: 240px) {
  /* Zoom rất lớn: nút pill phải co lại và cho xuống dòng, không được tràn viewport. */
  html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }
  html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) > summary::after { display: none !important; }
  html body :is(.region-locality-list, .region-area-index) { padding-left: 0 !important; }
  html body .region-local-coverage { padding-inline: 8px !important; }
}

/* ---------------------------------------------------------------
   Khoảng cách cho nút <details>: không dính liên kết kế bên,
   không chạm mép khung. Áp dụng cho mọi kích thước màn hình.
   --------------------------------------------------------------- */
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) {
  margin-block: clamp(12px, 1.4vw, 18px);
}
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more):first-child { margin-top: 0; }
html body details:not(.article-toc):not(.production-glossary):not(.service-search-more) + :is(a, p, div, ul, details) {
  margin-top: clamp(12px, 1.4vw, 18px);
}
html body a.text-link + a.text-link { margin-top: clamp(10px, 1.2vw, 14px); }
html body :is(.region-locality-group, .region-area-index) > details:last-child {
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
html body :is(.region-local-coverage, .region-related-areas) {
  padding-bottom: clamp(18px, 2vw, 28px);
}

/* ---------------------------------------------------------------
   Banner trang chủ trên màn hẹp:
   - Khung ảnh GIỮ NGUYÊN tỉ lệ 1983/793, không cắt xén.
   - Chữ ĐÈ LÊN ảnh và dồn về phía đáy banner.
   - Cỡ chữ co lại vừa đủ để không tràn ra ngoài khung ảnh.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  html body.home-page .hero-copy-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    padding: 0 12px 8px !important;
    overflow: hidden !important;
  }
  html body.home-page .hero-copy-overlay .eyebrow {
    margin: 0 !important;
    font-size: clamp(7px, 1.9vw, 9px) !important;
    line-height: 1.3 !important;
  }
  html body.home-page .hero-copy-overlay h1 {
    margin: 0 !important;
    font-size: clamp(9px, 2.5vw, 13px) !important;
    line-height: 1.3 !important;
    letter-spacing: -.005em !important;
    font-weight: 500 !important;
  }
  html body.home-page .hero-copy-overlay > p:not(.eyebrow) { display: none !important; }
  html body.home-page .hero-copy-overlay .hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 4px 0 0 !important;
    gap: 7px !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: clamp(9px, 2.5vw, 12px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 240px) {
  html body.home-page .hero-copy-overlay { position: relative !important; inset: auto !important; padding: 8px !important; }
  html body.home-page .hero-copy-overlay .hero-actions {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
  }
  html body.home-page .hero-copy-overlay .hero-actions > a .icon-arrow,
  html body.home-page .hero-copy-overlay .hero-actions > a svg { display: none !important; }
}

/* ---------------------------------------------------------------
   Ký tự mũi tên ↗ bị iOS/Android vẽ thành emoji (ô vuông xanh).
   Ép về dạng chữ để đồng bộ với icon .icon-arrow.
   --------------------------------------------------------------- */
html body :is(.icon-arrow, .tvc-type-arrow, .delivery-submit-arrow,
               .floating-contact-link-icon, [aria-hidden="true"]) {
  font-variant-emoji: text;
}
html body a span[aria-hidden="true"],
html body button span[aria-hidden="true"],
html body summary span[aria-hidden="true"] {
  font-variant-emoji: text;
  font-family: "Be Vietnam Pro", "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
}

/* ---------------------------------------------------------------
   Nút "Tra cứu xã/phường…" (.service-area-cta) trước đây chỉ được
   tạo kiểu nút trên trang chủ, các trang khác hiện ra chữ trơn.
   Đồng bộ thành nút pill giống nhau trên mọi trang.
   --------------------------------------------------------------- */
html body .service-area-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  max-width: 100% !important;
  padding: 10px 16px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--gold) 9%, transparent) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition: border-color .18s ease, background .18s ease !important;
}
html body .service-area-cta:hover {
  border-color: var(--gold) !important;
  background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
}
html body .service-area-cta:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}
html body .service-area-cta .icon-arrow { flex: 0 0 16px !important; }
@media (max-width: 680px) {
  html body .service-area-cta { min-height: 44px !important; padding: 9px 14px !important; font-size: 12px !important; }
}
@media (max-width: 240px) {
  html body .service-area-cta {
    width: 100% !important; min-height: 32px !important;
    padding: 6px 8px !important; font-size: 11px !important; border-radius: 10px !important;
  }
  html body .service-area-cta .icon-arrow { display: none !important; }
}

/* ---------------------------------------------------------------
   ĐỒNG BỘ LIÊN KẾT ĐỨNG RIÊNG THÀNH NÚT
   Các liên kết sau trước đây hiện ra như chữ thường nên người dùng
   không biết bấm được. Cho cùng một kiểu pill với .service-area-cta.
   Không áp cho: tiêu đề (h1-h4 > a) và thẻ bọc ảnh.
   --------------------------------------------------------------- */
html body :is(.article-back, .article-read.article-all, .region-hero-card > a) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  max-width: 100% !important;
  padding: 9px 16px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--gold) 9%, transparent) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition: border-color .18s ease, background .18s ease !important;
}
html body :is(.article-back, .article-read.article-all, .region-hero-card > a):hover {
  border-color: var(--gold) !important;
  background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
}
html body :is(.article-back, .article-read.article-all, .region-hero-card > a):focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

/* .region-hero-card nằm trong .region-hero — khối này cố ý giữ nền tối ở CẢ hai chế độ.
   Dùng var(--text) ở đây khiến chế độ sáng cho chữ xanh đen trên nền gần đen.
   Nút trong khối tối phải lấy màu của riêng nó, không theo màu chữ của trang. */
/* Thêm .region-hero vào bộ chọn: :is(...) ở trên lấy độ ưu tiên của nhánh cao nhất
   (.article-read.article-all = 2 lớp) nên chỉ .region-hero-card là chưa đủ thắng. */
html body .region-hero .region-hero-card > a {
  border-color: rgb(228 190 120 / .55) !important;
  background: rgb(228 190 120 / .12) !important;
  color: #efc875 !important;
}
html body .region-hero .region-hero-card > a:hover {
  border-color: #efc875 !important;
  background: rgb(228 190 120 / .22) !important;
  color: #f7dca2 !important;
}
html body .region-hero .region-hero-card > a:focus-visible {
  outline: 2px solid #efc875 !important;
  outline-offset: 3px !important;
}

/* Không để nút dính vào nút hoặc khối ngay trên nó */
html body p:has(> .article-back) { margin-top: clamp(16px, 2vw, 24px) !important; }
html body .article-back,
html body .article-read.article-all,
html body .region-hero-card > a { margin-top: clamp(12px, 1.6vw, 18px) !important; }
/* Chỉ tách khi phần tử kế bên KHÔNG phải nút nằm cùng hàng,
   tránh đẩy lệch các nút trong .hero-actions và các hàng nút khác. */
html body :is(.button, .button-primary, .service-area-cta) + :is(a, p):not(.button):not(.button-primary):not(.text-link):not(.service-area-cta) { margin-top: clamp(14px, 1.8vw, 20px) !important; }
html body :is(.hero-actions, .about-us-actions, .region-hero-actions) > * { margin-top: 0 !important; }

@media (max-width: 680px) {
  html body :is(.article-back, .article-read.article-all, .region-hero-card > a) {
    min-height: 42px !important; padding: 8px 14px !important; font-size: 12px !important;
  }
}
@media (max-width: 240px) {
  html body :is(.article-back, .article-read.article-all, .region-hero-card > a) {
    width: 100% !important; min-height: 32px !important;
    padding: 6px 8px !important; font-size: 11px !important; border-radius: 10px !important;
    overflow: hidden !important;
  }
}

/* ---------------------------------------------------------------
   Thanh chuyển trang: Trang trước | các số | Trang sau,
   luôn đúng thứ tự trên mọi kích thước, nền nổi để dễ thấy.
   --------------------------------------------------------------- */
html body .site-pagination-wrap {
  display: flex;
  justify-content: center;
  padding-block: clamp(14px, 2vw, 24px) !important;
}
html body .site-pagination {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: clamp(16px, 2.2vw, 28px) auto 0;
  padding: clamp(10px, 1.4vw, 14px);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
html body .site-pagination-pages {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
html body .site-pagination :is(a, span):not(.site-pagination-pages):not(.site-pagination-gap) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}
html body .site-pagination a:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 20%, transparent);
}
html body .site-pagination a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
html body .site-pagination .is-current {
  border-color: var(--gold) !important;
  background: var(--gold) !important;
  color: #20180e !important;
  font-weight: 700 !important;
}
html body .site-pagination .is-off { opacity: .35; }
html body .site-pagination .site-pagination-gap {
  min-width: 0; padding: 0 2px; border: 0;
  background: transparent; color: var(--muted);
}
@media (max-width: 560px) {
  /* xuống 2 hàng: hàng trên là các số, hàng dưới là hai nút điều hướng */
  html body .site-pagination {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  html body .site-pagination-pages { grid-column: 1 / -1; order: -1; }
  html body .site-pagination .site-pagination-step { width: 100%; }
  html body .site-pagination :is(a, span):not(.site-pagination-pages):not(.site-pagination-gap) {
    min-width: 40px; min-height: 42px; padding: 8px 10px; font-size: 12px;
  }
}
@media (max-width: 240px) {
  html body .site-pagination { grid-template-columns: 1fr; padding: 8px; border-radius: 12px; }
  html body .site-pagination :is(a, span):not(.site-pagination-pages):not(.site-pagination-gap) {
    min-width: 0; min-height: 32px; padding: 6px 8px; font-size: 11px; border-radius: 10px;
  }
}

/* ---------------------------------------------------------------
   Tương phản chữ nhỏ trang pháp lý theo từng chế độ.
   Trước đây một màu dùng chung cho cả nền trắng và nền tối nên
   luôn có một chế độ không đạt 4.5:1 (WCAG AA).
   --------------------------------------------------------------- */
html[data-theme="dark"] body.legal-page .legal-meta,
html[data-theme="dark"] body.legal-page .legal-meta span { color: #758296; }
html[data-theme="light"] body.legal-page .legal-document-switch span,
html[data-theme="light"] body.legal-page .legal-document-switch small { color: #6a7586; }

/* ---------------------------------------------------------------
   Huy hiệu logo phải giống nhau ở mọi nơi.
   Header và chân trang dùng hình tròn viền vàng, riêng logo trong
   menu trượt (.sidebar-identity) còn là ô vuông không viền.
   --------------------------------------------------------------- */
html body .home-sidebar .sidebar-identity .logo,
html body .home-sidebar .sidebar-identity .brand-mark {
  border-radius: 50%;
  border: 1.5px solid #d6b88b;
  background: #171511;
  object-fit: cover;
  overflow: hidden;
}
html[data-theme="light"] body .home-sidebar .sidebar-identity .logo,
html[data-theme="light"] body .home-sidebar .sidebar-identity .brand-mark {
  border-color: #d7a64e;
  background: #fff8ec;
  color: #3a2a12;
}

/* Trang dịch vụ theo địa bàn (/dich-vu/<dịch-vụ>/<khu-vực>).
   .region-hero-media là khối mới, chưa có trong hệ thống cũ nên phải tự khai báo
   tỉ lệ và object-fit, nếu không ảnh 16:9 bị lưới kéo dãn theo chiều cao cột. */
body.service-locality-page .region-hero-media {
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid rgb(228 190 120 / .18);
}
body.service-locality-page .region-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
body.service-locality-page .service-area-body .content-inline-image {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
@media (max-width: 860px) {
  body.service-locality-page .region-hero-media { margin-top: 18px; }
}

/* Bản đồ doanh nghiệp ở chân trang.
   .footer-map dùng chung mọi quy tắc căn chỉnh của .footer-company-legal
   (đã nhân bản sẵn trong site.css, detail-content.css, homepage-polish.css,
   header-floating.css) nên luôn thẳng hàng ở mọi breakpoint. Ở đây chỉ bỏ
   phần trang trí thừa kế theo và đặt chiều cao khung.
   KHÔNG dùng aspect-ratio kèm max-height: khi chiều cao chạm trần, trình duyệt
   thu hẹp bề rộng để giữ tỉ lệ, khung sẽ co lại và trôi ra giữa. */
html body .footer-map {
  border: 0;
  padding-top: 0;
  margin-top: clamp(18px, 2.2vw, 28px);
}
.footer-map-frame {
  margin-top: 12px;
  /* Chặn bề rộng và neo trái: trên màn siêu rộng, khung trải hết cột sẽ
     thành dải mỏng ~6,6:1. Neo trái để thẳng hàng với chữ của chân trang. */
  max-width: 960px;
  margin-right: auto;
  height: clamp(220px, 24vw, 330px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgb(228 190 120 / .22);
  background: rgb(255 255 255 / .04);
}
.footer-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
html[data-theme="light"] .footer-map-frame {
  border-color: rgb(58 42 18 / .18);
  background: rgb(0 0 0 / .03);
}
@media (max-width: 720px) {
  .footer-map-frame { height: 240px; }
}

/* Khối CTA theo ngữ cảnh giữa bài và khung thông tin tác nghiệp cuối bài (2026-11-01) */
.article-context-cta,.article-field-note{box-sizing:border-box;margin:36px 0;padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;background:var(--surface)}
.article-context-cta .eyebrow,.article-field-note .eyebrow{margin:0 0 10px}
.article-context-cta-title{margin:0 0 8px;font-weight:600;font-size:clamp(18px,2.2vw,21px);line-height:1.35;color:var(--text)}
.article-context-cta p:not(.eyebrow):not(.article-context-cta-title),.article-field-note p:not(.eyebrow){margin:0 0 16px;color:var(--muted)}
.article-context-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.article-context-actions .button{min-height:44px;text-decoration:none}
.article-context-contact{font-size:14px;font-weight:600;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.article-field-note ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.article-field-note li a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
html[data-theme="light"] .article-context-cta,html[data-theme="light"] .article-field-note{background:#fffdf9;border-color:#e4d7bf;border-left-color:#a37b3c}
html[data-theme="light"] .article-context-cta-title{color:var(--heading,#1f2933)}
html[data-theme="light"] .article-context-contact,html[data-theme="light"] .article-field-note li a{color:#8a6328}
@media(max-width:620px){.article-context-actions{flex-direction:column;align-items:stretch}.article-context-actions .button{width:100%}.article-context-contact{text-align:center;padding:6px 0}}
/* Dòng địa danh trong H1 trang dịch vụ: cùng thẻ h1 nhưng cỡ chữ phụ */
html body.service-page .service-hero h1 .service-h1-locality{display:block;margin-top:.45em;font-size:max(15px,.32em);font-weight:500;line-height:1.35;letter-spacing:0;color:var(--gold)}
html[data-theme="light"] body.service-page .service-hero h1 .service-h1-locality{color:#f1d9ae}
/* width/height trên <img> chỉ để trình duyệt giữ chỗ theo tỷ lệ (chống CLS); :where() có độ ưu tiên 0
   nên mọi quy tắc kích thước sẵn có của giao diện vẫn thắng, bố cục không đổi. */
:where(img[width][height]){width:auto;height:auto}
/* Form đặt lịch rút gọn: phần chi tiết tuỳ chọn. Nút mở dùng đúng kiểu "viên thuốc" chung của website
   (quy tắc details>summary toàn cục); không bọc thêm khung viền, nếu không sẽ thành hai lớp viền chồng nhau. */
#booking-form .booking-more{grid-column:1/-1;display:block;border:0;padding:0;margin:4px 0 0}
#booking-form .booking-more>.form-grid{margin-top:16px}
/* Thuộc tính hidden luôn thắng trong form đặt lịch (các trường tuỳ chọn nằm trong mục mở rộng) */
#booking-form [hidden]{display:none!important}
/* Nút trong khối CTA giữa bài: không thừa hưởng màu/gạch chân của liên kết trong thân bài */
body.article-page .article-content .article-context-cta a.button{color:#18140f;text-decoration:none}
body.article-page .article-content .article-context-cta a.button-outline{color:var(--text)}
html[data-theme="light"] body.article-page .article-content .article-context-cta a.button-outline{color:#1f2933}
body.article-page .article-content .article-field-note ul{margin:0;padding:0;list-style:none}
body.article-page .article-content .article-field-note li{margin:0;padding:0}
body.article-page .article-content .article-field-note li::before{content:none}

/* ---------------------------------------------------------------
   2026-11-01: Bài viết liên quan ở MỌI trang (khu vực, dịch vụ × khu vực…)
   thẳng mép với tiêu đề — trước chỉ trang dịch vụ có quy tắc này nên lưới
   tự căn giữa và lệch so với tiêu đề + nút "Xem tất cả bài viết".
   --------------------------------------------------------------- */
html body main .service-related-articles > :is(.section-intro, .service-related-article-grid, .article-all) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Nút mở danh sách xã/phường, tỉnh/thành: khi ĐÓNG chỉ hiện nút (không khung
   bao quanh nút → hết "khung chồng khung"); khi MỞ khung bao danh sách. */
html body :is(.region-locality-details, .region-area-index):not([open]) {
  padding: 0;
  border: 0;
  background: transparent;
}

/* 2026-11-01: khối "Dịch vụ liên quan" trong bài — quy tắc chung của .article-content
   (đoạn văn margin 22px, liên kết block + margin-top 20px) làm lệch nút Gọi và giãn tiêu đề. */
body.article-page .article-content .article-context-cta .article-context-cta-title { margin: 0 0 8px; }
html body.article-page .article-content .article-context-cta .article-context-actions > a.article-context-contact.article-context-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 !important; /* thắng quy tắc chung ".button + a { margin-top … !important }" vốn dành cho liên kết nằm DƯỚI nút */
}

/* 2026-11-01: /bai-viet — lưới bài bên dưới là phần tử kế tiếp của khối bài nổi bật (không cùng lưới),
   nên không nhận khoảng cách và dính sát khung bài nổi bật. */
.article-listing > .article-listing-feature + .article-listing-feature-more { margin-top: clamp(16px, 1.9vw, 28px); }