/* =========================================================
   FILE: 04-dnh-pages.css
   ROLE: Thin page-level bridge only
   RULES:
   - chỉ chứa page-specific adjustment thật sự cần
   - không chứa component generic
   - không chứa Elementor widget skin
   - mọi block ở đây phải có đích đến rõ ràng
   ========================================================= */

/* =========================================================
   PAGE BRIDGE: Shared page base cleanup
   Target: Generic page content rendered by Elementor / theme wrappers
   Reason: Đồng bộ baseline giữa page thực tế và system mới
   Temporary: yes
   Destination: keep only if truly shared and harmless; otherwise remove
   Owner note: Không thêm component rules ở block này
   ========================================================= */

.page-template-default .entry-content,
.elementor .elementor-widget-text-editor,
.dnh-page-bridge {
  color: var(--dnh-color-text);
}

.elementor .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   PAGE BRIDGE: Archive listing top area
   Target: Legacy archive hero / intro / filter wrap rendered by theme
   Reason: Markup hiện tại chưa map hoàn chỉnh về dnh-l-page-public + dnh-l-hero + dnh-l-rail
   Temporary: yes
   Destination: archive template refactor + 02-dnh-layout.css
   Owner note: Promote nếu collections/deal/archive phụ dùng cùng pattern
   ========================================================= */

.dnh-page-archive .dnh-archive-shell {
  display: grid;
  gap: var(--dnh-space-8);
}

.dnh-page-archive .dnh-archive-top {
  display: grid;
  gap: var(--dnh-space-6);
}

.dnh-page-archive .dnh-archive-top__head {
  max-width: var(--dnh-measure-reading);
}

.dnh-page-archive .dnh-archive-top__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
}

/* =========================================================
   PAGE BRIDGE: Archive listing grid wrap
   Target: Listing results wrap from theme/plugin render
   Reason: Chưa refactor hoàn chỉnh sang dnh-l-grid--listing + dnh-card--listing
   Temporary: yes
   Destination: template render cleanup + 03-dnh-components.css
   Owner note: Sau khi listing card shell ổn định, giảm block này tối đa
   ========================================================= */

.dnh-page-archive .dnh-archive-results {
  display: grid;
  gap: var(--dnh-gap-grid-md);
}

.dnh-page-archive .dnh-archive-results.is-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dnh-page-archive .dnh-archive-results.is-3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .dnh-page-archive .dnh-archive-results.is-2col,
  .dnh-page-archive .dnh-archive-results.is-3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .dnh-page-archive .dnh-archive-results.is-2col,
  .dnh-page-archive .dnh-archive-results.is-3col {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PAGE BRIDGE: Single listing content rail
   Target: Single property layout rendered by theme/plugin template
   Reason: Markup hiện tại chưa map hoàn chỉnh sang dnh-l-rail / dnh-l-panel / dnh-concierge-card
   Temporary: yes
   Destination: single template refactor + 02-dnh-layout.css + 03-dnh-components.css
   Owner note: Shared risk cao vì ảnh hưởng toàn bộ single listing
   ========================================================= */

.dnh-page-single-listing .dnh-single-shell {
  display: grid;
  gap: var(--dnh-space-8);
}

.dnh-page-single-listing .dnh-single-main {
  display: grid;
  gap: var(--dnh-space-6);
}

.dnh-page-single-listing .dnh-single-rail {
  display: grid;
  gap: var(--dnh-space-5);
}

.dnh-page-single-listing .dnh-single-section {
  display: grid;
  gap: var(--dnh-space-4);
}

/* =========================================================
   PAGE BRIDGE: Single listing related / support blocks
   Target: Related listings, trust/support blocks on single listing
   Reason: Related/support wrappers chưa map sạch về business shells mới
   Temporary: yes
   Destination: 03-dnh-components.css hoặc single template cleanup
   Owner note: Không style card con ở đây
   ========================================================= */

.dnh-page-single-listing .dnh-single-related,
.dnh-page-single-listing .dnh-single-support {
  display: grid;
  gap: var(--dnh-space-5);
}

/* =========================================================
   PAGE BRIDGE: Join / participation shell
   Target: Participation pages rendered by Elementor or legacy content wrappers
   Reason: Chưa có full page contract clean giữa hero, trust strip, intake blocks, proof blocks
   Temporary: yes
   Destination: 02-dnh-layout.css + 03-dnh-components.css
   Owner note: Nếu lặp ở >= 3 page, ưu tiên promote layout shell trước
   ========================================================= */

.dnh-page-participation .dnh-participation-shell {
  display: grid;
  gap: var(--dnh-space-10);
}

.dnh-page-participation .dnh-participation-hero {
  display: grid;
  gap: var(--dnh-space-6);
}

.dnh-page-participation .dnh-participation-proof {
  display: grid;
  gap: var(--dnh-space-5);
}

.dnh-page-participation .dnh-participation-intake {
  display: grid;
  gap: var(--dnh-space-8);
}

/* =========================================================
   PAGE BRIDGE: Contact / concierge shell
   Target: Contact, booking, concierge exchange pages
   Reason: Current wrappers chưa map hoàn chỉnh sang dnh-l-intake + dnh-concierge-card + trust shells
   Temporary: yes
   Destination: 02-dnh-layout.css + 03-dnh-components.css
   Owner note: Đây là conversion-critical area, tránh bridge quá dày
   ========================================================= */

.dnh-page-contact .dnh-contact-shell,
.dnh-page-concierge .dnh-concierge-shell {
  display: grid;
  gap: var(--dnh-space-8);
}

.dnh-page-contact .dnh-contact-head,
.dnh-page-concierge .dnh-concierge-head {
  max-width: var(--dnh-measure-reading);
}

.dnh-page-contact .dnh-contact-main,
.dnh-page-concierge .dnh-concierge-main {
  display: grid;
  gap: var(--dnh-space-6);
}

/* =========================================================
   PAGE BRIDGE: Insight / article shell
   Target: Article, insight, long-form informational pages
   Reason: Legacy content wrappers chưa map sạch sang dnh-prose + dnh-l-rail + CTA band placement
   Temporary: yes
   Destination: content template cleanup + 02-dnh-layout.css + 01-dnh-typography.css
   Owner note: Không hard-code prose typography ở đây
   ========================================================= */

.dnh-page-insight .dnh-insight-shell,
.dnh-page-article .dnh-article-shell {
  display: grid;
  gap: var(--dnh-space-8);
}

.dnh-page-insight .dnh-insight-body,
.dnh-page-article .dnh-article-body {
  display: grid;
  gap: var(--dnh-space-6);
}

.dnh-page-insight .dnh-insight-rail,
.dnh-page-article .dnh-article-rail {
  display: grid;
  gap: var(--dnh-space-5);
}

/* =========================================================
   PAGE BRIDGE: HOME parity shell
   Target: HOME test / production parity against TEST PAGE HOME.htm
   Reason:
   - khóa responsive matrix đúng như TEST
   - khóa hero/button/details theo ngữ cảnh của HOME
   - sticky chỉ bật mobile
   - tránh sửa lan man ở 02/03 khi lỗi là HOME-only
   Owner note:
   - block này chỉ dành cho HOME
   - có dùng nth-of-type cho parity test hiện tại
   - khi build Elementor final, thay nth-of-type bằng section marker class rõ ràng
   ========================================================= */

.dnh-page-home {
  background: var(--dnh-color-bg);
  color: var(--dnh-color-text);
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .dnh-page-home {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: clip;
  }
}

/* =========================
   HOME HERO LIVE DOT
   For semantic HTML mapping
========================= */

.dnh-home-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dnh-color-primary);
  box-shadow: 0 0 12px var(--dnh-color-primary);
  animation: dnh-home-live-pulse 2s infinite;
  flex: 0 0 auto;
}

@keyframes dnh-home-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 151, 46, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(184, 151, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 151, 46, 0); }
}

/* =========================
   HOME HERO
========================= */

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) > .dnh-l-hero-sidecar__main > .dnh-l-container,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) > .dnh-l-hero-sidecar__side > .dnh-l-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-hero-sidecar__main {
  padding: 120px 8% 120px 10%;
  background: var(--dnh-color-bg);
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-hero-sidecar__side {
  padding: 120px 10%;
  border-left: 1px solid #222;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-measure-reading {
  max-width: 550px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-display-hero {
  margin: 0 0 32px;
  letter-spacing: -2px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-home-hero-copy > .dnh-text-overline-strong {
  display: block;
  width: fit-content;
  margin-bottom: 32px;
  font-size: 13px;
  letter-spacing: 2px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-text-lead-lg {
  margin: 0 0 48px;
  max-width: 550px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-home-hero-actions,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-actions {
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-home-hero-actions .dnh-btn,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-actions .dnh-btn {
  min-height: 56px;
  padding: 18px 36px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.15;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-btn--dark {
  background: var(--dnh-color-text);
  color: #FFFFFF;
  border-color: var(--dnh-color-text);
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-btn--dark:hover {
  background: var(--dnh-color-primary);
  color: #FFFFFF;
  border-color: var(--dnh-color-primary);
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) a.dnh-btn.dnh-btn--secondary,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) a.dnh-btn.dnh-btn--secondary:visited {
  background: transparent;
  color: var(--dnh-color-text) !important;
  border-color: var(--dnh-color-text);
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) a.dnh-btn.dnh-btn--secondary:hover,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) a.dnh-btn.dnh-btn--secondary:focus,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) a.dnh-btn.dnh-btn--secondary:active {
  background: var(--dnh-color-text);
  color: #FFFFFF !important;
  border-color: var(--dnh-color-text);
  -webkit-text-fill-color: #FFFFFF !important;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-section-head {
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid #333;
  align-items: center;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-text-label {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-feed {
  gap: 36px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item {
  gap: 0;
}
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item,
.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-home-pulse-item {
  text-align: left;
  justify-items: start;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item__meta {
  justify-content: flex-start;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item .dnh-text-overline-strong {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 1px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item:first-child .dnh-text-overline-strong {
  color: #4CAF50;
  border-color: #4CAF50;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item:nth-child(3) .dnh-text-overline-strong {
  color: #AAA;
  border-color: #AAA;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item .dnh-heading-card {
  margin-bottom: 8px;
}

.dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-pulse-item .dnh-text-sm {
  line-height: 1.5;
}

/* =========================
   HOME SECTION RHYTHM
========================= */

.dnh-page-home .dnh-l-section {
  padding-block: 80px;
}

.dnh-page-home .dnh-l-container {
  width: min(100% - 48px, 1200px);
}

.dnh-page-home .dnh-heading-section {
  margin-bottom: 40px;
}

.dnh-page-home .dnh-l-section-head {
  margin-bottom: 32px;
  padding-bottom: 16px;
}

.dnh-page-home .dnh-l-grid--4,
.dnh-page-home .dnh-l-grid--3 {
  gap: 24px;
}

.dnh-page-home .dnh-l-section-head .dnh-heading-section {
  margin-bottom: 0;
}

/* =========================
   ROLE / DATA / LISTING
========================= */

.dnh-page-home .dnh-card--role {
  min-height: 100%;
  padding: 32px;
}

.dnh-page-home .dnh-card--data {
  border-radius: 12px;
}

.dnh-page-home .dnh-card__media-placeholder {
  min-height: 220px;
  height: 220px;
  background: var(--dnh-color-surface-alt);
  color: var(--dnh-color-text-muted);
  font-size: 12px;
}

.dnh-page-home .dnh-card__content {
  padding: 24px;
  gap: 12px;
}

.dnh-page-home > :is(.dnh-home-s4, section:nth-of-type(4)) .dnh-card__content > a:last-child {
  margin-top: auto;
}

.dnh-page-home > :is(.dnh-home-s4, section:nth-of-type(4)) .dnh-heading-card {
  min-height: 52px;
}

.dnh-page-home > :is(.dnh-home-s4, section:nth-of-type(4)) .dnh-text-sm {
  min-height: 52px;
}

/* Listing shells - fix S3 */
.dnh-page-home .dnh-card--listing {
  border-radius: 8px;
  padding: 24px;
}

.dnh-page-home .dnh-home-listing-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dnh-page-home .dnh-home-listing-card .dnh-listing-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  gap: 0;
}

.dnh-page-home .dnh-home-listing-card .dnh-listing-head {
  margin-bottom: 20px;
}

.dnh-page-home .dnh-home-listing-card .dnh-listing-head .dnh-heading-card {
  margin-bottom: 12px;
}

.dnh-page-home .dnh-home-listing-card .dnh-text-sm {
  margin: 0 0 24px;
  flex-grow: 1;
}

.dnh-page-home .dnh-home-listing-card .dnh-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-3);
  align-items: center;
  margin-top: 0;
}

.dnh-page-home .dnh-home-listing-link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--dnh-color-text);
}

.dnh-page-home .dnh-home-listing-link:hover {
  text-decoration: underline;
}

.dnh-page-home .dnh-home-listing-link--dark {
  color: var(--dnh-color-primary) !important;
}

.dnh-page-home .dnh-card--listing.dnh-card--dark .dnh-heading-card {
  color: var(--dnh-color-text-inverse);
}

.dnh-page-home .dnh-card--listing.dnh-card--dark .dnh-text-sm {
  color: rgba(245, 241, 234, 0.68);
}

/* =========================
   FEATURE / ANALYSIS / FINAL CTA BUTTON CONTEXT
========================= */

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-shell,
.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-card--elevated {
  padding: 80px 40px;
  border-radius: 8px;
  background: #FFFFFF;
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-l-feature-split {
  gap: 40px;
  align-items: stretch;
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-l-feature-split__content,
.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-l-feature-split__media {
  display: flex;
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-panel,
.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-card--dark-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  border-radius: 4px;
  color: var(--dnh-color-text-inverse);
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-title,
.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-panel .dnh-h3 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 1;
  margin: 0 0 24px;
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-panel .dnh-text-body {
  color: #AAAAAA;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 40px;
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-media,
.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-l-feature-split__media .dnh-card__media-placeholder {
  min-height: 400px;
  height: 100%;
  border-radius: 4px;
  background: #F5F5F5;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-home-feature-btn,
.dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-btn--solid-primary {
  min-height: auto;
  padding: 16px 40px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #FFFFFF !important;
}

.dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-card--analysis {
  padding: 32px;
  gap: 32px;
  border-radius: 12px;
}

.dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-card__analysis-media {
  width: 40%;
  min-height: 260px;
  border-radius: 8px;
}

.dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-btn--solid-primary {
  min-height: auto;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #FFFFFF !important;
}

.dnh-page-home > :is(.dnh-home-s10, section:nth-of-type(10)) .dnh-cta-band {
  padding: 80px 40px;
  border-radius: 12px;
  text-align: center;
}

.dnh-page-home > :is(.dnh-home-s10, section:nth-of-type(10)) .dnh-display-hero {
  font-size: clamp(32px, 5vw, 40px);
  margin-bottom: 24px;
}

.dnh-page-home > :is(.dnh-home-s10, section:nth-of-type(10)) .dnh-text-body {
  max-width: 600px;
  margin-inline: auto;
  color: #AAA;
}

.dnh-page-home > :is(.dnh-home-s10, section:nth-of-type(10)) .dnh-cta-band__actions {
  justify-content: center;
}

.dnh-page-home > :is(.dnh-home-s10, section:nth-of-type(10)) .dnh-btn--solid-primary {
  min-height: auto;
  padding: 16px 36px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #FFFFFF !important;
}

/* =========================
   REASONS / RULES
========================= */

.dnh-page-home .dnh-card--reason {
  border-top-width: 2px;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dnh-page-home .dnh-l-compare-row {
  gap: 60px;
}

.dnh-page-home .dnh-card--dark-panel .dnh-prose {
  max-width: none;
  color: rgba(245, 241, 234, 0.72);
}

.dnh-page-home .dnh-card--dark-panel .dnh-prose li {
  color: rgba(245, 241, 234, 0.72);
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   TABLET MATRIX: 769 - 1024
========================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .dnh-page-home > :is(.dnh-home-s2, section:nth-of-type(2)) .dnh-l-grid--4,
  .dnh-page-home > :is(.dnh-home-s8, section:nth-of-type(8)) .dnh-l-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dnh-page-home > :is(.dnh-home-s4, section:nth-of-type(4)) .dnh-l-grid--3,
  .dnh-page-home > :is(.dnh-home-s7, section:nth-of-type(7)) .dnh-l-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dnh-page-home > :is(.dnh-home-s3, section:nth-of-type(3)) .dnh-l-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-l-feature-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-card--analysis {
    flex-direction: row;
  }

  .dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-card__analysis-media {
    width: 40%;
  }

  .dnh-page-home > :is(.dnh-home-s9, section:nth-of-type(9)) .dnh-l-compare-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
  }

  .dnh-page-home .dnh-sticky-mobile {
    display: none !important;
  }

  .dnh-page-home {
    padding-bottom: 0 !important;
  }
}

/* =========================
   MOBILE: <=768
========================= */

@media (max-width: 768px) {
  .dnh-page-home .dnh-l-grid--4,
  .dnh-page-home .dnh-l-grid--3 {
    grid-template-columns: 1fr;
  }

  .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-hero-sidecar__main {
    padding: 100px 24px 60px;
    text-align: center;
  }

  .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-measure-reading,
  .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-text-lead-lg {
    max-width: none;
    margin-inline: auto;
  }

 .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-home-hero-copy > .dnh-text-overline-strong {
  margin-inline: auto;
}

  .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-actions {
    flex-direction: column;
    width: 100%;
  }

  .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-actions .dnh-btn {
    width: 100%;
  }

  .dnh-page-home > :is(.dnh-home-s1, section:nth-of-type(1)) .dnh-l-hero-sidecar__side {
    padding: 60px 24px;
    border-left: 0;
    border-top: 1px solid #222;
  }

  .dnh-page-home > :is(.dnh-home-s4, section:nth-of-type(4)) .dnh-heading-card,
  .dnh-page-home > :is(.dnh-home-s4, section:nth-of-type(4)) .dnh-text-sm {
    min-height: 0;
  }

  .dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-card--elevated {
    padding: 40px 24px;
  }

  .dnh-page-home > :is(.dnh-home-s5, section:nth-of-type(5)) .dnh-card--dark-panel {
    padding: 40px 24px;
  }

  .dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-card--analysis {
    flex-direction: column;
  }

  .dnh-page-home > :is(.dnh-home-s6, section:nth-of-type(6)) .dnh-card__analysis-media {
    width: 100%;
  }

  .dnh-page-home > :is(.dnh-home-s9, section:nth-of-type(9)) .dnh-l-compare-row {
    gap: 32px;
    grid-template-columns: 1fr;
  }

  .dnh-page-home > :is(.dnh-home-s10, section:nth-of-type(10)) .dnh-cta-band {
    padding: 60px 24px;
  }
}

/* =========================
   HOME STICKY MOBILE CTA
   Test HTML anchor compatible
========================= */

.dnh-page-home .dnh-sticky-mobile {
  display: none;
}

@media (max-width: 768px) {
  .dnh-page-home {
    padding-bottom: 80px !important;
  }

  .dnh-page-home .dnh-sticky-mobile {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    padding: 16px !important;
    gap: 12px !important;
    z-index: 99999 !important;
    border-top: 1px solid var(--dnh-color-border) !important;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.03) !important;
  }

  .dnh-page-home .dnh-sticky-mobile > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .dnh-page-home .dnh-sticky-mobile .dnh-btn {
    width: 100% !important;
    min-height: auto !important;
    padding: 12px !important;
    border-radius: 4px !important;
    justify-content: center !important;
  }

  .dnh-page-home .dnh-sticky-mobile .dnh-btn--secondary {
    background: transparent !important;
    color: var(--dnh-color-text) !important;
    border-color: var(--dnh-color-text) !important;
  }

  .dnh-page-home .dnh-sticky-mobile .dnh-btn--dark {
    background: var(--dnh-color-text) !important;
    color: #FFFFFF !important;
    border-color: var(--dnh-color-text) !important;
  }
}

/* =========================================================
   SHARED RENDERER BRIDGE: Elementor Button Host -> DNH Button Contract
   Target: Elementor Button widget có gắn class host riêng ở widget wrapper
   Reason:
   - Giữ renderer host tách khỏi component gốc
   - Đồng bộ với modifier mới đã có trong 03-dnh-components.css
   - Bổ sung support cho dnh-btn--block
   - Bỏ hard-code hover màu solid-primary để đi qua token
   Contract:
   - HTML button thật -> dùng .dnh-btn + modifier
   - Elementor Button widget -> dùng .dnh-btn-host + modifier
   Owner note:
   - KHÔNG dùng .dnh-btn trên widget wrapper
   - KHÔNG gắn .dnh-btn lên container / section / column
   ========================================================= */

.elementor-widget-button.dnh-btn-host,
.elementor-widget-button.dnh-btn-host.dnh-btn--primary,
.elementor-widget-button.dnh-btn-host.dnh-btn--secondary,
.elementor-widget-button.dnh-btn-host.dnh-btn--ghost,
.elementor-widget-button.dnh-btn-host.dnh-btn--soft,
.elementor-widget-button.dnh-btn-host.dnh-btn--dark,
.elementor-widget-button.dnh-btn-host.dnh-btn--solid-primary,
.elementor-widget-button.dnh-btn-host.dnh-btn--outline-primary,
.elementor-widget-button.dnh-btn-host.dnh-btn--block {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  width: auto;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
  color: inherit !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--block {
  display: flex;
  width: 100%;
}

.elementor-widget-button.dnh-btn-host .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dnh-space-2);
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--dnh-font-family-base);
  font-size: 14px;
  line-height: 1.15;
  font-weight: var(--dnh-font-weight-semibold);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  width: auto;
  box-shadow: none;
  transition:
    background-color var(--dnh-duration-base) var(--dnh-ease-standard),
    color var(--dnh-duration-base) var(--dnh-ease-standard),
    border-color var(--dnh-duration-base) var(--dnh-ease-standard),
    box-shadow var(--dnh-duration-base) var(--dnh-ease-standard),
    transform var(--dnh-duration-fast) var(--dnh-ease-standard);
}

.elementor-widget-button.dnh-btn-host.dnh-btn--sm .elementor-button {
  min-height: 40px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--lg .elementor-button {
  min-height: 52px;
  padding: 16px 20px;
  border-radius: 14px;
}

.elementor-widget-button.dnh-btn-host .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--dnh-focus-ring-light);
}

.is-dark .elementor-widget-button.dnh-btn-host .elementor-button:focus-visible,
.dnh-on-dark .elementor-widget-button.dnh-btn-host .elementor-button:focus-visible {
  box-shadow: var(--dnh-focus-ring-dark);
}

.elementor-widget-button.dnh-btn-host.dnh-btn--primary .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--primary .elementor-button:visited {
  background: var(--dnh-color-primary) !important;
  color: var(--dnh-color-dark) !important;
  border-color: var(--dnh-color-primary) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--primary .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--primary .elementor-button:focus {
  background: var(--dnh-color-primary-hover) !important;
  color: var(--dnh-color-dark) !important;
  border-color: var(--dnh-color-primary-hover) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--secondary .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--secondary .elementor-button:visited {
  background: var(--dnh-color-surface) !important;
  color: var(--dnh-color-text) !important;
  border-color: var(--dnh-color-border-strong) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--secondary .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--secondary .elementor-button:focus {
  background: var(--dnh-surface-hover-bg) !important;
  color: var(--dnh-color-text) !important;
  border-color: var(--dnh-color-border-strong) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--ghost .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--ghost .elementor-button:visited {
  background: transparent !important;
  color: var(--dnh-color-primary) !important;
  border-color: transparent !important;
  padding-inline: 0 !important;
  min-height: auto !important;
  border-radius: 0 !important;
  font-size: 13px;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--ghost .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--ghost .elementor-button:focus {
  background: transparent !important;
  color: var(--dnh-color-primary) !important;
  border-color: transparent !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--soft .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--soft .elementor-button:visited {
  background: var(--dnh-color-primary-soft) !important;
  color: var(--dnh-color-primary) !important;
  border-color: transparent !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--soft .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--soft .elementor-button:focus {
  background: var(--dnh-color-primary-soft) !important;
  color: var(--dnh-color-primary) !important;
  border-color: transparent !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--dark .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--dark .elementor-button:visited {
  background: var(--dnh-color-dark) !important;
  color: var(--dnh-color-text-inverse) !important;
  border-color: var(--dnh-color-dark) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--dark .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--dark .elementor-button:focus {
  background: var(--dnh-color-dark-2) !important;
  color: var(--dnh-color-text-inverse) !important;
  border-color: var(--dnh-color-dark-2) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--solid-primary .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--solid-primary .elementor-button:visited {
  background-color: var(--dnh-color-primary) !important;
  color: #111111 !important;
  border-color: var(--dnh-color-primary) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--solid-primary .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--solid-primary .elementor-button:focus {
  background-color: var(--dnh-color-primary-hover) !important;
  color: #111111 !important;
  border-color: var(--dnh-color-primary-hover) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--outline-primary .elementor-button,
.elementor-widget-button.dnh-btn-host.dnh-btn--outline-primary .elementor-button:visited {
  background-color: transparent !important;
  color: var(--dnh-color-primary) !important;
  border-color: var(--dnh-color-primary) !important;
}

.elementor-widget-button.dnh-btn-host.dnh-btn--outline-primary .elementor-button:hover,
.elementor-widget-button.dnh-btn-host.dnh-btn--outline-primary .elementor-button:focus {
  background-color: var(--dnh-color-primary-soft) !important;
  color: var(--dnh-color-primary) !important;
  border-color: var(--dnh-color-primary) !important;
}