/* Modern 2026 design layer — tier: pages (home + other page-specific styling) */

/* ============================================================================
   HOME (body#home) — editorial hero, box-home image/text splits, framed
   master-plan image map, upgraded register-form panel.
   Every rule in this block is scoped under `body#home` so it cannot bleed
   into other pages (each future page gets its own pages.css section).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Hero — full-bleed slide stage
   ---------------------------------------------------------------------------- */
body#home .home-gallery {
  position: relative;
  padding-top: 0;
  min-height: 480px;
}
body#home .home-gallery .bx-wrapper {
  margin-bottom: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
body#home .home-gallery .mainslide,
body#home .home-gallery .bx-wrapper,
body#home .home-gallery .bx-viewport {
  min-height: 480px;
}
body#home .home-gallery .mainslide ul.bxslider li img,
body#home .home-gallery .bx-viewport ul.bxslider li img {
  height: 100vh;
  min-height: 480px;
  max-height: 900px;
  object-fit: cover;
}

/* Soft top + bottom scrims for legibility against the fixed header + controls */
body#home .home-gallery::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(10, 26, 18, 0.38), rgba(10, 26, 18, 0));
}
body#home .home-gallery::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(to top, rgba(16, 40, 28, 0.55), rgba(16, 40, 28, 0));
}

/* Anti-FOUC guard for the hero slider.
   bxSlider's JS loads client-side after hydration (see app/lib/jq.ts); until it
   wraps <ul.bxslider> in .bx-wrapper > .bx-viewport, every <li> renders at its
   natural size and stacks vertically — all slides "spill out" on first paint.
   Clip the raw list to the first slide until init. The `>` combinator makes this
   self-deactivating: once bxSlider nests the <ul> inside .bx-viewport (jquery.
   bxslider.js: el.wrap(...)) it is no longer a direct child of .mainslide, so
   these rules stop matching and bxSlider's own layout + inline styles take over
   with no visual jump (fade startSlide 0 === :first-child). */
body#home .home-gallery .mainslide > ul.bxslider {
  overflow: hidden;
}
body#home .home-gallery .mainslide > ul.bxslider > li {
  display: none;
}
body#home .home-gallery .mainslide > ul.bxslider > li:first-child {
  display: block;
}
body#home .home-gallery .mainslide > ul.bxslider > li img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero overlay title — larger serif display, bottom-left over the scrim.
   Purely additive (no DOM change): the <li><img title="..."> is not rendered
   as text by the browser, so this treats each slide caption via bxSlider's own
   optional captions if enabled later; for now the display styling below is
   reserved for any in-slide heading markup the hero may gain. */
body#home .home-gallery .bx-caption {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 6vw 9vh;
  background: none;
}
body#home .home-gallery .bx-caption span {
  display: inline-block;
  max-width: 780px;
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Modern slider dots */
body#home .bx-wrapper .bx-pager.bx-default-pager a {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: width var(--t), background var(--t);
}
body#home .bx-wrapper .bx-pager.bx-default-pager a.active,
body#home .bx-wrapper .bx-pager.bx-default-pager a:hover {
  width: 28px;
  background: var(--c-gold);
  border-radius: var(--r-pill);
}

/* Arrows — refined circular glass buttons over the legacy PNG backgrounds */
body#home .home-gallery .bx-wrapper .bx-controls-direction a {
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border-radius: 50%;
  background-color: rgba(16, 40, 28, 0.28);
  background-size: 20px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(2px);
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
body#home .home-gallery .bx-wrapper .bx-next {
  right: 24px;
}
body#home .home-gallery .bx-wrapper .bx-prev {
  left: 24px;
}
body#home .home-gallery .bx-wrapper .bx-next:hover,
body#home .home-gallery .bx-wrapper .bx-prev:hover {
  background-color: rgba(16, 40, 28, 0.55);
  border-color: #fff;
  transform: translateY(-2px);
}

/* "Next slide" thumbnail — small rounded preview beside the next arrow */
body#home .home-gallery .bx-controls-direction .next-thumb {
  right: 96px;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-2);
  border: 2px solid rgba(255, 255, 255, 0.65);
}
body#home .home-gallery .bx-controls-direction .next-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mouse-scroll cue — tasteful bounce, sits just above the bottom scrim */
body#home .moves#move_mouse {
  bottom: 28px;
  top: auto !important;
  z-index: 5;
  cursor: pointer;
}
body#home .moves#move_mouse img {
  max-width: 34px !important;
  opacity: 0.85;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  animation: dh-mouse-bounce 2.2s ease-in-out infinite;
  transition: opacity var(--t);
}
body#home .moves#move_mouse:hover img {
  opacity: 1;
}
@keyframes dh-mouse-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  body#home .moves#move_mouse img {
    animation: none;
  }
}

/* ----------------------------------------------------------------------------
   .box-home sections — the legacy engine pairs a full-bleed image column
   (`.full-left` / `.full-right`, absolutely positioned with per-box min-heights)
   with a SEPARATE sibling text `.container`. Because image and text live in
   different sibling subtrees, a CSS-only 2-column flex split cannot include the
   image without markup changes; forcing it collapsed the image column and
   squeezed the text into a narrow strip, and un-hiding the legacy title-swap
   image pair produced a duplicated wordmark. We therefore keep the legacy
   layout intact (it renders correctly on its own) and add only non-structural
   polish: a hairline divider between sections and body-copy typography. A true
   editorial split would need DOM changes, which are out of scope for this
   CSS-only layer.
   ---------------------------------------------------------------------------- */
body#home .box-home + .box-home {
  border-top: 0;
}

/* Alternate section backgrounds for rhythm & depth */
body#home .box-home:nth-child(even) {
  background: var(--c-cream);
}

body#home .box-home:nth-child(odd) {
  background: var(--c-bg);
}

/* Subtle section-top accent line for all box-home sections except first */
body#home .box-home + .box-home::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-gold-line) 30%,
    var(--c-line) 50%,
    var(--c-gold-line) 70%,
    transparent
  );
}

/* Body copy — typography only; does NOT touch the box-home layout engine. */
body#home .box-home .info {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}

/* ----------------------------------------------------------------------------
   Master-plan image map (box-home-4) — rounded card frame.
   The imagemapster canvas is sized from the rendered <img> box; do NOT set a
   fixed width here — the card just adds padding/border/shadow around the
   already-responsive image, and the JS resize handler (HomeEffects.tsx)
   re-fits the map to whatever width results.
   ---------------------------------------------------------------------------- */
body#home #master_plan {
  position: relative;
}
body#home #master_plan .no-padding {
  position: relative;
  padding: var(--sp-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-spring);
}

body#home #master_plan .no-padding:hover {
  box-shadow: var(--sh-4);
  transform: translateY(-3px);
}
body#home #master_plan .no-padding img.img-responsive {
  border-radius: var(--r);
  width: 100%;
  height: auto;
}
/* modern caption chip, bottom-left over the card (decorative — no new copy) */
body#home #master_plan::after {
  content: "Mặt bằng tổng thể";
  position: absolute;
  left: calc(var(--sp-sm) + 14px);
  bottom: calc(var(--sp-sm) + 14px);
  z-index: 10;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(16, 40, 28, 0.78);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(3px);
}

/* ----------------------------------------------------------------------------
   Section "Xem thêm" → modern arrow link (overrides the legacy 105px block)
   ---------------------------------------------------------------------------- */
body#home .box-home a.bt-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  padding: 0 0 1px !important;
  border-bottom: 0 !important;
  background: none !important;
  color: var(--c-primary);
  font-weight: 600;
}
body#home .box-home a.bt-detail::after {
  content: "\2192";
  transition: transform var(--t);
}
body#home .box-home a.bt-detail:hover {
  width: auto !important;
  background: none !important;
  color: var(--c-primary-700);
}
body#home .box-home a.bt-detail:hover::after {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------------------
   CTA banner ("Đăng ký xem nhà mẫu") — gold pill over a subtle emerald scrim
   ---------------------------------------------------------------------------- */
body#home .page-child-banner .background {
  position: relative;
}
body#home .page-child-banner .background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 74, 49, 0.55), rgba(17, 74, 49, 0.12) 60%, transparent);
  pointer-events: none;
}
body#home .page-child-banner .background .content {
  position: relative;
  z-index: 1;
}
body#home .page-child-banner .background .bt-dk a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: auto;
  padding: 15px 38px;
  border-radius: var(--r-pill);
  background: var(--c-gold);
  color: #1c1606 !important;
  font-size: 16px;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-2);
  transition: transform var(--t), background var(--t), color var(--t);
}
body#home .page-child-banner .background .bt-dk a span {
  font-weight: 700;
}
body#home .page-child-banner .background:hover .bt-dk a,
body#home .page-child-banner .background .bt-dk a:hover {
  background: #fff;
  color: var(--c-primary-700) !important;
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   Registration form — elevated panel (was flat grey #7f7f7f)
   Markup: .register-to-visit > .container (note + .contact-form) then, as
   SIBLINGS of .container (not inside it), two col-xs-6 button wrappers
   (.btn-register-wap / .btn-reset-wap). We frame .container as the card and
   pull the button row up + inward with negative margins so it reads as part
   of the same panel, matching the .container's own gutter/max-width.
   ---------------------------------------------------------------------------- */
body#home .register-to-visit {
  background: var(--c-bg-alt);
  padding: var(--sp-2xl) 0 var(--sp-xl);
}
body#home .register-to-visit .container {
  max-width: 980px;
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-sm);
  background: var(--c-bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-2);
  border: 1px solid var(--c-line);
  border-bottom: 0;
}
body#home .register-to-visit .register-note {
  display: block;
  margin-bottom: var(--sp-md);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
body#home .register-to-visit .control-label {
  color: var(--c-ink);
}
body#home .register-to-visit .textbox,
body#home .register-to-visit select.textbox {
  min-height: 52px;
}
/* the button row: same max-width/centring as .container, visually continuing
   the panel below it (rounded bottom, shared border, no gap) */
body#home .register-to-visit .btn-register-wap,
body#home .register-to-visit .btn-reset-wap {
  float: none;
  display: inline-block;
  width: calc(50% - 1px);
  max-width: 490px;
  margin: 0;
  padding: var(--sp-sm) 6px;
  background: var(--c-bg) !important;
  border: 1px solid var(--c-line);
  border-top: 0;
}
body#home .register-to-visit .btn-register-wap {
  margin-left: max(calc((100% - 980px) / 2), var(--sp-md));
  border-radius: 0 0 0 var(--r-lg);
  border-right: 0;
}
body#home .register-to-visit .btn-reset-wap {
  margin-right: max(calc((100% - 980px) / 2), var(--sp-md));
  border-radius: 0 0 var(--r-lg) 0;
}
body#home .register-to-visit a.btn-register,
body#home .register-to-visit a.btn-reset {
  display: inline-flex;
  width: 100%;
  border-radius: var(--r-pill);
  text-transform: none;
}
body#home .register-to-visit a.btn-register {
  color: #fff !important;
}

/* Home section headings — gold rule accent beneath .title headings */
body#home .box-home .title,
body#home .box-home h2 {
  position: relative;
  padding-bottom: 0.6em;
  margin-bottom: 0.5em;
}

body#home .box-home .title::after,
body#home .box-home h2.with-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--gradient-gold);
}

@media (prefers-reduced-motion: no-preference) {
  body#home .box-home .animatedParent.go .title::after,
  body#home .box-home .animatedParent.go h2.with-rule::after {
    animation: dh-rule-grow 0.55s var(--ease-spring) 0.3s both;
  }
}

/* ============================================================================
   ABOUT FAMILY — body#about, body#about-project, body#about-investor,
   body#about-dragoncity (the four `/gioi-thieu*` pages).
   Every rule below is scoped under one of these four body ids so nothing
   bleeds into other pages. `.page-branch-title` and `.box-category` already
   get global modern treatment in components.css — not repeated here.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   about + about-project ("Giới thiệu" / "Giới thiệu dự án") — byte-identical
   markup (two routes, one page.tsx content): intro block, spec stat panel,
   a stack of .box-home editorial image/text splits, and a credits list.
   ---------------------------------------------------------------------------- */

/* Intro block — .logo_about (SVG title) + .sm_about copy + .ik image */
body#about .logo_about,
body#about-project .logo_about {
  margin-bottom: var(--sp-md);
}
body#about .logo_about img,
body#about-project .logo_about img {
  display: block;
  max-width: 340px;
  height: auto;
}
body#about .sm_about,
body#about-project .sm_about {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}
body#about .ik,
body#about-project .ik {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
body#about .ik img,
body#about-project .ik img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* "Tổng quan dự án" heading — eyebrow-style tick above the legacy underline */
body#about .tq_title,
body#about-project .tq_title {
  position: relative;
  padding-top: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  background: none;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-primary-700);
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  letter-spacing: 0.01em;
}
body#about .tq_title::before,
body#about-project .tq_title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--sp-sm);
  background: var(--c-gold);
  border-radius: var(--r-pill);
}
body#about .tq_title span,
body#about-project .tq_title span {
  color: var(--c-ink);
  font-weight: 700;
}

/* Spec panel — .info_penhouse > .co3 > .c1 is a single text block (7 lines
   joined by <br>, some with <sup> unit markup) with no per-line wrapper in
   the DOM, so a true multi-card grid would require markup changes. Instead:
   dress the block itself as one clean "stat card" — bordered, padded, with a
   left gold rule and roomier line-height — and keep every <sup> rendering
   inline exactly as authored (no display/visibility changes to it). */
body#about .info_penhouse,
body#about-project .info_penhouse {
  margin: 0 !important;
  list-style: none;
  padding: 0;
}
body#about .info_penhouse .co3,
body#about-project .info_penhouse .co3 {
  background: var(--c-bg-alt) !important;
  padding: 0 !important;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
body#about .info_penhouse .co3 .c1,
body#about-project .info_penhouse .co3 .c1 {
  background: none;
  float: none;
  width: auto;
  border-right: 0;
  border-left: 4px solid var(--c-gold);
  padding: var(--sp-md) var(--sp-lg) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 2.1;
  color: var(--c-ink);
}
body#about .info_penhouse .co3 .c1 sup,
body#about-project .info_penhouse .co3 .c1 sup {
  font-size: 0.65em;
  top: -0.6em;
}

/* .box-home sections — identical constraint to the home page: the image column
   (.full-left/.full-right) is a SIBLING of the text .container, not a child, so
   a CSS-only 2-column flex split cannot include the image without markup
   changes. Forcing it collapsed the image and squeezed the text (visible on
   /gioi-thieu/gioi-thieu-du-an). Keep the legacy layout (renders correctly) and
   add only non-structural polish: a hairline divider + body-copy typography. */
body#about .box-home + .box-home,
body#about-project .box-home + .box-home {
  border-top: 1px solid var(--c-line);
}

/* Body copy — typography only; does NOT touch the box-home layout engine. */
body#about .box-home .sm_about,
body#about-project .box-home .sm_about {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}

/* Credits list — the trailing "Thiết kế quy hoạch tổng thể : SURBANA" etc.
   <ul><li class="sm_about"><strong>...</strong></li></ul>. Align + refine
   type; the legacy &nbsp; run (used to fake a colon-aligned column) is left
   as-is in the markup, but tabular-nums + tighter tracking keep it tidy. */
body#about .box-home-2 ul,
body#about-project .box-home-2 ul {
  margin: var(--sp-sm) 0 0;
  padding: 0;
  list-style: none;
}
body#about .box-home-2 ul li.sm_about,
body#about-project .box-home-2 ul li.sm_about {
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
}
body#about .box-home-2 ul li.sm_about:last-child,
body#about-project .box-home-2 ul li.sm_about:last-child {
  border-bottom: 0;
}
body#about .box-home-2 ul li.sm_about strong,
body#about-project .box-home-2 ul li.sm_about strong {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------------------
   about-investor ("Năng lực chủ đầu tư") — investor intro card + strengths
   list styled as refined disclosure-style rows + mission banner.
   ---------------------------------------------------------------------------- */
body#about-investor .contact-info {
  padding: var(--sp-md);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
body#about-investor .contact-info .page-line-title {
  background: none;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--c-gold);
  color: var(--c-primary-700);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}
body#about-investor .contact-info span {
  color: var(--c-ink);
}
body#about-investor .contact-info img {
  border-radius: var(--r);
  background: var(--c-bg);
  padding: 8px;
  box-shadow: var(--sh-1);
}
body#about-investor .ik {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
body#about-investor .ik img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* Strengths list (.info_about) → modern disclosure-style rows: hairline
   dividers, teal marker instead of the legacy bullet icon, gold on hover. */
body#about-investor .info_about {
  margin: var(--sp-md) 0 0 !important;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
body#about-investor .info_about li {
  position: relative;
  background: var(--c-bg) !important;
  border-bottom: 1px solid var(--c-line);
  padding: 16px 20px 16px 52px !important;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  text-transform: none;
  transition: background var(--t), color var(--t);
}
body#about-investor .info_about li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
}
body#about-investor .info_about li:last-child {
  border-bottom: 0;
}
body#about-investor .info_about li:hover {
  background: var(--c-primary-050) !important;
  color: var(--c-primary-700);
}
body#about-investor .info_about li:hover::before {
  background: var(--c-gold);
}

/* Strengths list — stagger entrance */
@media (prefers-reduced-motion: no-preference) {
  body#about-investor .info_about li {
    animation: dh-fade-up 0.45s var(--ease-out) both;
  }
  body#about-investor .info_about li:nth-child(1) { animation-delay: 0ms; }
  body#about-investor .info_about li:nth-child(2) { animation-delay: 60ms; }
  body#about-investor .info_about li:nth-child(3) { animation-delay: 120ms; }
  body#about-investor .info_about li:nth-child(4) { animation-delay: 180ms; }
  body#about-investor .info_about li:nth-child(5) { animation-delay: 240ms; }
  body#about-investor .info_about li:nth-child(6) { animation-delay: 300ms; }
  body#about-investor .info_about li:nth-child(7) { animation-delay: 360ms; }
  body#about-investor .info_about li:nth-child(8) { animation-delay: 420ms; }
}

/* Mission banner (.bg_info_about) — teal gradient panel replacing the legacy
   green PNG background, text unchanged */
body#about-investor .bg_info_about {
  position: relative;
  height: auto;
  margin: var(--sp-lg) 0 !important;
  padding: var(--sp-lg);
  background: linear-gradient(120deg, var(--c-teal-700), var(--c-teal));
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
body#about-investor .bg_info_about span {
  position: static;
  display: block;
  height: auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
}

/* ----------------------------------------------------------------------------
   about-dragoncity ("Khu đô thị Dragon City") — stat list, expand/collapse
   accordion (style only — do not touch the JS toggle contract), and the
   isotope photo album as a bento/rounded gallery grid with hover-zoom.
   ---------------------------------------------------------------------------- */

/* Quick facts list (Quy mô 65ha / ~6000 căn hộ / >70% cây xanh) → stat row */
body#about-dragoncity .sortdesc {
  background: none !important;
  float: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--c-line);
  font-weight: 500;
  color: var(--c-text);
}
body#about-dragoncity .sortdesc::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-gold);
}
body#about-dragoncity .sortdesc strong {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--c-primary-700);
  font-weight: 700;
}

/* Accordion trigger (.accordion#section1 → .bt-detail "Xem thêm"/state
   classes .accordion-open / .accordion-close from jquery.accordion.js).
   Style only: the plugin still toggles these exact classes + slides the
   very next sibling (.container1); we only add a chevron via ::after and
   rotate it per state — no markup, no display overrides on .container1
   itself (that stays under jQuery's inline style control). */
body#about-dragoncity .accordion {
  height: auto;
  margin: var(--sp-lg) 0;
  padding: 0;
  text-transform: none;
}
body#about-dragoncity .accordion .bt-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: auto;
  height: auto;
  padding: 12px 28px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-primary-700);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--sh-1);
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
body#about-dragoncity .accordion .bt-detail::after {
  content: "\2193";
  display: inline-block;
  transition: transform var(--t);
}
body#about-dragoncity .accordion:hover .bt-detail {
  border-color: var(--c-gold);
  color: var(--c-primary-700);
  box-shadow: var(--sh-2);
}
body#about-dragoncity .accordion.accordion-open .bt-detail::after {
  transform: rotate(180deg);
}

/* Expanded panel content (.container1 > .content.contentacc) — refine type
   + give the two embedded images consistent framing without altering their
   position in the flow */
body#about-dragoncity .container1 {
  margin-top: var(--sp-sm);
}
body#about-dragoncity .contentacc {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text);
}
body#about-dragoncity .contentacc img.img-responsive {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* Gallery filter tabs (.album-filter-list) — pill tabs instead of the legacy
   underline row */
body#about-dragoncity .album-filter-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-bottom: 0;
}
body#about-dragoncity .album-filter-list ul li {
  display: inline-block;
}
body#about-dragoncity .album-filter-list ul li a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition: background var(--t), color var(--t), border-color var(--t);
}
body#about-dragoncity .album-filter-list ul li:hover a,
body#about-dragoncity .album-filter-list ul li.active a {
  background: var(--c-primary) !important;
  border-color: var(--c-primary);
  color: #fff;
}

/* Photo album grid (#album_container, isotope/packery) → bento/rounded grid
   with hover-zoom. isotope controls item position/sizing via inline
   transforms on .album-item; we only style the frame + inner image, leaving
   width/position (grid-sizer, grid-item--width2) exactly as the JS computes. */
body#about-dragoncity #album_container {
  margin-top: var(--sp-md);
}
body#about-dragoncity .album-item {
  padding: 6px !important;
}
body#about-dragoncity .album-item > img,
body#about-dragoncity .album-item .fancybox {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
}
body#about-dragoncity .album-item > img {
  width: 100%;
  height: auto;
  box-shadow: var(--sh-1);
  transition: transform var(--t-slow), box-shadow var(--t);
}
body#about-dragoncity .album-item .border-hover {
  border-radius: var(--r-lg);
}
body#about-dragoncity .album-item .item-hover {
  border-radius: var(--r-lg);
  background-color: rgba(16, 40, 28, 0.45);
  transition: opacity var(--t);
}
body#about-dragoncity .album-item:hover > img {
  transform: scale(1.08);
  box-shadow: var(--sh-3);
}
body#about-dragoncity .album-item .item-hover h2.title {
  font-family: var(--font-sans);
  font-weight: 600;
  color: #fff;
}

/* ============================================================================
   LOCATION — body#location (`/vi-tri`)
   Markup: .page-localtion > .box-home.box-localtion (wrapper-full-left) with
   a text column (.z-content .title-wrapper + two .info blocks) and the Swiffy
   interactive map column (.localtionmap-wrapper > #localtionmap). The Swiffy
   runtime (Effects.tsx) targets #localtionmap by id and injects/sizes its own
   <svg> stage — its legacy CSS already sets a fixed px width with
   max-width:100% for responsive scale-down. We only add a card FRAME one level
   up (.localtionmap-wrapper) so the stage never has its own width/height
   touched here.
   ============================================================================ */

/* Eyebrow + editorial intro typography (title-wrapper icon is an SVG
   wordmark image, same treatment as the home/about editorial blocks) */
body#location .box-localtion .title-wrapper {
  position: relative;
  margin-bottom: var(--sp-md);
}
body#location .box-localtion .title-wrapper::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--sp-sm);
  background: var(--c-gold);
  border-radius: var(--r-pill);
}
body#location .box-localtion .title-wrapper .icon {
  display: block;
  max-width: 420px;
}
body#location .box-localtion .title-wrapper .icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lead paragraph — comfortable measure + refined line-height (legacy .info) */
body#location .box-localtion .info {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--c-text);
  max-width: 46em;
}
body#location .box-localtion .info strong {
  color: var(--c-ink);
  font-weight: 700;
}

/* "Vị trí trên Google map" link — modern pill link instead of the legacy
   float/underline treatment */
body#location .box-localtion .localtion-btn1 {
  float: none;
  margin-top: var(--sp-sm);
}
body#location .box-localtion a.localtion-xtgg {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: auto;
  height: auto;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  background: var(--c-primary-050);
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary-700) !important;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
body#location .box-localtion a.localtion-xtgg::after {
  content: "\2197";
}
body#location .box-localtion a.localtion-xtgg:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff !important;
  transform: translateY(-2px);
}

/* Map frame — wraps the Swiffy stage column in a rounded, shadowed card.
   IMPORTANT: no width/height/max-width is set on #localtionmap or its <svg>
   here — only padding/background/border/radius on the WRAPPER, so Swiffy's
   own stage sizing (legacy #localtionmap{width:997px;max-width:100%}) is
   completely undisturbed. */
body#location .localtionmap-wrapper {
  padding: var(--sp-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
body#location .localtionmap-wrapper .box-thumb-img {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-bg-alt);
}

/* ============================================================================
   AMENITIES — body#amenities (`/tien-ich`)
   Markup: .page-utilities > .page-branch-title (global) + intro <p> +
   .box-intro-text (map hint) + #master_plan > #divContent > .divmap
   (img[usemap] + absolutely-positioned .img-backgroud/.img-hover overlays)
   + #divInfoUti (numbered legend rows). imagemapster binds to img[usemap]
   and re-fits on resize (Effects.tsx); we only frame the card and restyle the
   legend — no width/height is set on .divmap, img[usemap], or their
   ancestors so the responsive/re-fit behaviour is untouched.
   ============================================================================ */

/* Intro copy under the page-branch-title */
body#amenities .page-content > .container > .text-center > p {
  max-width: 56em;
  margin: var(--sp-sm) auto 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}

/* Map-hint caption ("Vui lòng click chuột vào số...") — pill badge */
body#amenities .box-intro-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: auto;
  margin: var(--sp-md) auto;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: var(--c-primary-050);
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
body#amenities .box-intro-text::before {
  content: "\1F5B1";
  font-size: 0.95em;
}

/* Map card frame — #master_plan wraps #divContent (.divmap + #divInfoUti).
   Do NOT set width/height on .divmap, img[usemap] (#imgMap), or any ancestor
   below this: imagemapster measures the rendered <img> box and re-fits its
   canvas/hotspots on resize (see Effects.tsx `refitMaps`); a fixed size here
   would desync the overlay from the image. */
body#amenities #master_plan {
  padding: var(--sp-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
body#amenities #master_plan .divmap {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-bg-alt);
}
body#amenities #master_plan .divmap img.img-responsive {
  max-width: 100%;
  height: auto;
}

/* Legend grid (#divInfoUti) — modern numbered rows instead of the legacy
   plain list; .numberv1 badge gets the gold-on-teal treatment */
body#amenities #divInfoUti {
  margin-top: var(--sp-md);
  padding: var(--sp-sm);
}
body#amenities #divInfoUti ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body#amenities #divInfoUti .nbd {
  border-bottom: 1px dashed var(--c-line);
}
body#amenities #divInfoUti .row:last-child .nbd {
  border-bottom: 0;
}
body#amenities #divInfoUti .nbd a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--t), background var(--t);
}
body#amenities #divInfoUti .nbd a:hover {
  background: var(--c-primary-050);
  color: var(--c-primary-700);
}
body#amenities #divInfoUti .numberv1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}
body#amenities #divInfoUti .nbd a:hover .numberv1 {
  background: var(--c-gold);
  color: #1c1606;
}

/* ============================================================================
   FLOOR PLAN HUB — body#floorplan-hub (`/so-do-can-ho`)
   Markup: .library-nav (empty spacer) + .page-content > .page-branch-title +
   .box-intro-text (hint) + #master_plan.row > div (stacked K1/K2/map
   img[usemap], absolutely positioned via legacy `#master_plan .img-hover`) +
   <map>. imagemapster binds to img[usemap] and re-fits on resize
   (Effects.tsx `refitMaps`) — no width/height is set on #master_plan, its
   inner div, img[usemap], or any ancestor, so the responsive/re-fit behaviour
   is untouched. NOTE: .library-nav/.nav-content is shared with body#show-unit
   — every rule here is scoped under body#floorplan-hub so it cannot bleed.
   ============================================================================ */

/* Empty top-nav spacer — no visual content on this page, just collapse the
   legacy 140px/90px/30px padding stack down to a small breathing gap under
   the fixed header (the page-branch-title below already carries its own
   spacing via components.css). */
body#floorplan-hub .library-nav {
  padding-top: var(--sp-lg);
}

/* Map-hint caption ("Vui lòng click vào hình để xem chi tiết") — pill badge,
   same visual language as the amenities hint */
body#floorplan-hub .box-intro-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: auto;
  margin: var(--sp-md) auto;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: var(--c-primary-050);
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
body#floorplan-hub .box-intro-text::before {
  content: "\1F5B1";
  font-size: 0.95em;
}

/* Map card frame — #master_plan wraps the stacked img[usemap] + hover images
   directly (no .divmap wrapper on this page). Do NOT set width/height on
   #master_plan, its child <div>, or img[usemap]/img.img-hover below: they
   must keep the legacy absolute-stack sizing + imagemapster's own re-fit. */
body#floorplan-hub #master_plan {
  margin-top: var(--sp-md);
  padding: var(--sp-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
body#floorplan-hub #master_plan > div {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-bg-alt);
}
body#floorplan-hub #master_plan img.img-responsive {
  max-width: 100%;
  height: auto;
}
/* modern caption chip, bottom-left over the card (decorative — no new copy) */
body#floorplan-hub #master_plan::after {
  content: "Mặt bằng tổng quan";
  position: absolute;
  left: calc(var(--sp-sm) + 14px);
  bottom: calc(var(--sp-sm) + 14px);
  z-index: 10;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(16, 40, 28, 0.78);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(3px);
}

/* ============================================================================
   FLOOR PLAN — TOWER A, FLOORS 05-23 — body#floorplan-tower-a
   (`/so-do-can-ho/tang-05-23-thap-a`)
   Markup: .library-nav (empty spacer) + .page-branch-title + .container >
   .album-filter-list.category-list (floor-range tabs) + #master_plan >
   .bg-categories + .row (intro text col + #image_map stacked img[usemap]) +
   .info_detail (unit-type legend links) + .page-control (hint + back link).
   Same imagemapster contract as floorplan-hub: no width/height touched on
   #master_plan, #image_map, or img[usemap]/img.img-hover.
   ============================================================================ */

body#floorplan-tower-a .library-nav {
  padding-top: var(--sp-lg);
}

/* Floor-range tabs (.album-filter-list.category-list) — pill tabs instead of
   the legacy underline row (same treatment as about-dragoncity's gallery
   filter, re-declared here since that block is scoped to a different body). */
body#floorplan-tower-a .album-filter-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 0;
  text-align: left;
}
body#floorplan-tower-a .album-filter-list ul li {
  display: inline-block;
}
body#floorplan-tower-a .album-filter-list ul li a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  background-image: none !important;
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition: background var(--t), color var(--t), border-color var(--t);
}
body#floorplan-tower-a .album-filter-list ul li:hover a,
body#floorplan-tower-a .album-filter-list ul li.active a {
  background: var(--c-primary) !important;
  border-color: var(--c-primary);
  color: #fff;
  margin-bottom: 0;
}

/* Map card frame — wraps #image_map (stacked K1-K4 + base img[usemap]) and
   the intro text column. Do NOT set width/height on #master_plan, #image_map,
   img[usemap], or img.img-hover: imagemapster measures the rendered <img> box
   and the legacy absolute-stack (`#image_map .img-hover`) depends on the
   parent's natural size. */
body#floorplan-tower-a #master_plan {
  position: relative;
  margin-top: var(--sp-md);
  padding: var(--sp-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
body#floorplan-tower-a #master_plan .bg-categories {
  display: none;
}
body#floorplan-tower-a #image_map {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-bg-alt);
}
body#floorplan-tower-a #image_map img.img-responsive {
  max-width: 100%;
  height: auto;
}
body#floorplan-tower-a .title_mb {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  color: var(--c-ink);
  font-weight: 700;
}
body#floorplan-tower-a .title_mb span {
  color: var(--c-primary-700);
}

/* Unit-type legend (.info_detail .line_descript) — modern pill rows */
body#floorplan-tower-a .info_detail {
  margin-top: var(--sp-md);
}
body#floorplan-tower-a .line_descript {
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
}
body#floorplan-tower-a .line_descript a {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink) !important;
  transition: color var(--t);
}
body#floorplan-tower-a .line_descript a:hover {
  color: var(--c-primary-700) !important;
}

/* Bottom hint + back link (.page-control) */
body#floorplan-tower-a .page-control {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-line);
}
body#floorplan-tower-a .page-control .box-intro-text {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
body#floorplan-tower-a a.bt-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: auto;
  height: auto;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  background: var(--c-primary-050);
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary-700) !important;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: none;
  float: none !important;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
body#floorplan-tower-a a.bt-back::before {
  content: "\2190";
}
body#floorplan-tower-a a.bt-back:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff !important;
  transform: translateY(-2px);
}

/* ============================================================================
   SHOW UNIT — body#show-unit (`/nha-mau`)
   Markup: .library-nav (empty spacer, SHARED CLASS with floorplan-hub — every
   rule below is scoped under body#show-unit) + .page-content >
   .page-branch-title + .album-filter-list (category pill tabs, isotope
   filter) + #album_container (isotope/packery grid of .album-item, each a
   thumb <img> + Fancybox trigger <a class="fancybox item-hover">). Fancybox
   markup/behaviour (album-scripts.js, Effects.tsx) is untouched — only the
   trigger thumbnails are restyled.
   ============================================================================ */

body#show-unit .library-nav {
  padding-top: var(--sp-lg);
}

/* Category filter tabs — pill row (isotope filter, .active toggled by JS) */
body#show-unit .album-filter-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-bottom: 0;
}
body#show-unit .album-filter-list ul li {
  display: inline-block;
}
body#show-unit .album-filter-list ul li a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  background-image: none !important;
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition: background var(--t), color var(--t), border-color var(--t);
}
body#show-unit .album-filter-list ul li:hover a,
body#show-unit .album-filter-list ul li.active a {
  background: var(--c-primary) !important;
  border-color: var(--c-primary);
  color: #fff;
  margin-bottom: 0;
}

/* Gallery grid (#album_container) — isotope/packery controls item
   position/sizing via inline transforms + width % (grid-sizer,
   grid-item--width2); we only style the frame + inner image/overlay, leaving
   position/width exactly as the JS/legacy CSS computes. */
body#show-unit #album_container {
  margin-top: var(--sp-md);
}
body#show-unit .album-item {
  padding: 6px !important;
}
body#show-unit .album-item > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-slow), box-shadow var(--t);
}
/* Hover-zoom: clip the frame and scale the thumb image inside it (the frame
   itself never scales, so rounded corners + layout stay stable). */
body#show-unit .album-item .border-hover {
  position: absolute;
  inset: 6px;
  border-radius: var(--r-lg);
  overflow: hidden;
  pointer-events: none;
}
body#show-unit .album-item:hover > img {
  transform: scale(1.05);
  box-shadow: var(--sh-3);
}
body#show-unit .album-item .item-hover {
  border-radius: var(--r-lg);
  background-color: rgba(16, 40, 28, 0.45);
  transition: opacity var(--t);
}
body#show-unit .album-item .item-hover h2.title {
  font-family: var(--font-sans);
  font-weight: 600;
  color: #fff;
}

/* ============================================================================
   SALES KIT — body#sales-kit (`/sales-kit`)
   Markup: .page-content.page-project-schedule.page-project-normal >
   .page-branch-title + #divContent > .row > .table_dl (intro <p> + five
   .col-xs-12.col-sm-4 columns, each a `.icon_dl` card: an <a><span
   class="icon_dls"><img></span></a> icon, a <br>, then a second <a><b>label</b>
   + copy</a>) followed by a full-width project photo. Two of the five cards
   are `.saleskit-video` triggers that open a Fancybox **SWF** player
   (Effects.tsx) — that JS config is untouched; only the trigger/frame is
   restyled here. `.icon_dl` is unique to this page, so it's safe to style
   broadly, but every rule stays scoped under body#sales-kit regardless.
   ============================================================================ */

/* Intro paragraph above the download cards */
body#sales-kit .table_dl > .row > .col-xs-12.col-sm-12.text-center {
  max-width: 56em;
  margin: 0 auto var(--sp-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}

/* Download/video grid — turn the legacy 4-col float row into a responsive
   card grid; each `.icon_dl` becomes one card (no DOM change, just flex on
   the Bootstrap column + card chrome on the wrapper). */
body#sales-kit .table_dl > .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 !important;
  gap: var(--sp-md) 0;
}
body#sales-kit .table_dl > .row > [class*="col-"] {
  display: flex;
  padding: 0 var(--sp-sm);
}
body#sales-kit .icon_dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--sp-lg) var(--sp-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
body#sales-kit .icon_dl:hover {
  box-shadow: var(--sh-2);
  border-color: var(--c-line-strong);
  transform: translateY(-3px);
}

/* Icon badge — the PDF/play <img> gets a soft circular tile behind it so the
   legacy small icon reads as a deliberate card glyph, not a stray image. */
body#sales-kit .icon_dl .icon_dls,
body#sales-kit .icon_dl > a:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: var(--sp-sm);
  background: var(--c-primary-050);
  border-radius: var(--r-pill);
  transition: background var(--t), transform var(--t);
}
body#sales-kit .icon_dl:hover .icon_dls,
body#sales-kit .icon_dl:hover > a:first-child {
  background: var(--c-teal-050);
  transform: scale(1.05);
}
body#sales-kit .icon_dl .icon_dls img,
body#sales-kit .icon_dl > a:first-child img {
  margin-top: 0 !important;
  width: 34px;
  height: auto;
  max-width: 34px;
}

/* Video trigger cards (.saleskit-video) — teal-tinted badge instead of
   emerald, so play buttons read distinctly from PDF downloads; the click
   handler + Fancybox SWF config in Effects.tsx is unchanged. */
body#sales-kit .icon_dl a.saleskit-video {
  background: none;
}
body#sales-kit .icon_dl a.saleskit-video img {
  margin-top: 0 !important;
  width: 84px;
  height: 84px;
  max-width: 84px;
  padding: 22px;
  box-sizing: border-box;
  background: var(--c-teal-050);
  border-radius: var(--r-pill);
  transition: background var(--t), transform var(--t);
}
body#sales-kit .icon_dl:hover a.saleskit-video img {
  background: var(--c-teal);
  filter: brightness(0) invert(1);
  transform: scale(1.05);
}

/* Card label + copy — the second <a> holds a <b>TITLE</b> + description
   line, both currently inheriting default link colour/underline */
body#sales-kit .icon_dl > a:last-of-type {
  color: var(--c-ink) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-decoration: none;
  transition: color var(--t);
}
body#sales-kit .icon_dl > a:last-of-type b {
  display: block;
  margin-bottom: 4px;
  color: var(--c-primary-700);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.01em;
}
body#sales-kit .icon_dl:hover > a:last-of-type {
  color: var(--c-primary-700) !important;
}
body#sales-kit .icon_dl:hover > a:last-of-type b {
  color: var(--c-teal);
}

/* Trailing full-width project photo — rounded editorial frame */
body#sales-kit .main-content > #divContent > .row > .col-xs-12.col-sm-12 img.img-responsive,
body#sales-kit .main-content > #divContent > .row > .col-xs-12.col-sm-12 img {
  width: 100%;
  height: auto;
  margin-top: var(--sp-lg) !important;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}

/* ============================================================================
   CONTACT — body#contact (`/lien-he`)
   Markup: .page-content.page-project-schedule.page-contact > .row with two
   Bootstrap columns: `.contact-info` (address/hotline/email as `.row
   detail-contact` label/value pairs) and `.contact-form.form-horizontal`
   (intro text + <ContactForm/> — inputs/labels/submit already get modern
   treatment globally via components.css; here we only add panel/layout
   styling). Below that sits a `.page-map-banner` iframe (unchanged — has a
   real absolute src, not touched here). The ContactForm's honeypot field is
   hidden via an inline style (`position:absolute; left:-9999px`) in
   ContactForm.tsx itself — no CSS here targets `input[name="company"]` or its
   wrapper, so that contract is left completely alone.
   ============================================================================ */

body#contact .page-contact {
  padding-top: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
}
body#contact .page-contact > .container > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-lg) 0;
}

/* Info column — address/hotline/email as an icon-row panel */
body#contact .contact-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-lg);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
body#contact .contact-info .page-branch-title {
  margin-bottom: var(--sp-sm);
}
body#contact .contact-info > span:first-of-type {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
body#contact .contact-info img.img-responsive {
  max-width: 220px;
  height: auto;
  margin: var(--sp-sm) 0;
}
body#contact .contact-info .page-line-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs);
  background: none;
  border-bottom: 2px solid var(--c-gold);
  color: var(--c-primary-700);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Address/tel/fax/email icon rows (.detail-contact) — turn the plain
   label/value Bootstrap columns into aligned icon rows without changing the
   grid markup itself. */
body#contact .detail-contact {
  margin: 0 !important;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text);
}
body#contact .detail-contact > [class*="col-xs-3"] {
  position: relative;
  padding-left: 28px !important;
  color: var(--c-muted);
  font-weight: 600;
}
body#contact .detail-contact > [class*="col-xs-3"]::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
}
body#contact .detail-contact > [class*="col-xs-9"] {
  color: var(--c-ink);
}
body#contact .detail-contact > [class*="col-xs-9"] span {
  color: var(--c-primary-700);
  font-weight: 600;
}
body#contact .detail-contact strong {
  display: block;
  margin-top: var(--sp-sm);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}
body#contact .detail-contact p {
  margin: 2px 0 0;
  color: var(--c-muted);
}

/* Form column — panel chrome around the intro + <ContactForm/>; the inputs,
   labels, and submit button themselves come from components.css (.textbox /
   .control-label / .cmdContactSend) — this only adds the surrounding card. */
body#contact .contact-form.form-horizontal {
  height: 100%;
  padding: var(--sp-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
body#contact .contact-form .intro-text {
  margin-bottom: var(--sp-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-muted);
}
/* Bootstrap .row gutters inside the panel — comfortable field spacing */
body#contact .contact-form form.row > [class*="col-"] {
  margin-bottom: var(--sp-sm);
}
/* Submit button row — right-align the pill on wider screens, full width on
   mobile (component styling itself lives in components.css) */
body#contact .contact-form .cmdContactSend {
  min-width: 180px;
}
@media (min-width: 768px) {
  body#contact .contact-form form.row > [class*="col-"]:has(.cmdContactSend) {
    text-align: right;
  }
}
body#contact .contact-form form.row p {
  font-size: var(--fs-sm);
}

/* Map — full-bleed frame under the two-column block (the iframe's src is a
   real absolute URL, untouched; only the surrounding chrome is styled) */
body#contact .page-map-banner {
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--c-line);
}
body#contact .page-map-banner iframe {
  display: block;
}

/* ============================================================================
   INNER-PAGE BANNERS — enhanced editorial treatment for all inner pages
   ============================================================================ */

/* Deeper scrim for better legibility over varied background photos */
#page_body .page-child-banner .backgroundscroll::after {
  background: linear-gradient(
    180deg,
    rgba(16, 40, 28, 0.18) 0%,
    rgba(16, 40, 28, 0.48) 60%,
    rgba(16, 40, 28, 0.72) 100%
  );
}

/* Push title content to bottom-left (editorial positioning) */
#page_body .page-child-banner .contentscroll,
#page_body .page-child-banner .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--sp-lg);
}

/* Fade-up banner title on page load */
@media (prefers-reduced-motion: no-preference) {
  #page_body .page-child-banner .head-title h3 {
    animation: dh-fade-up 0.6s var(--ease-out) 0.1s both;
  }
  #page_body .page-child-banner .breadcrumbs {
    animation: dh-fade-up 0.6s var(--ease-out) 0.22s both;
  }
}

/* ============================================================================
   NEWS — body#news (`/tin-tuc-su-kien`, `/tin-tuc-su-kien/[slug]` (article OR
   category), `/tin-tuc-su-kien/[slug]/[page]`, `/tin-tuc-su-kien/tim-kiem`)
   Markup: all four routes share `<BodyId id="news" />`. Listing + category +
   search render `NewsCard` (components.css already styles `.page-news
   .new-list .item` — the card look itself is NOT re-declared here, only the
   page-level grid/bento/tabs/pagination wrapping it). Article detail renders
   `NewsArticle` (banner + branch title + `CategorySidebar` (global) +
   `.post-detail .description` prose (global `--container-narrow`) + related
   `Tin liên quan` block reusing `NewsCard` in `.page-news`).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Listing + category + related — real CSS grid on `.new-list .row`, with the
   first/featured card (`col-sm-12`, rendered only on category page 1) spanning
   the full grid width as a bento hero row above the regular 3-up cards.
   NewsCard's Bootstrap col classes are left untouched (float/width still
   resolve under `.tint`'s own grid); we simply turn the immediate parent
   `.row` into a grid and neutralise the Bootstrap column box model on its
   direct children so they become clean grid cells instead of floats.
   ---------------------------------------------------------------------------- */
body#news .new-list .row,
body#news .related-news .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg) var(--sp-md);
  margin: 0 !important;
}
body#news .new-list .row > [class*="col-"],
body#news .related-news .row > [class*="col-"] {
  float: none;
  width: auto !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  body#news .new-list .row,
  body#news .related-news .row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  body#news .new-list .row,
  body#news .related-news .row {
    grid-template-columns: repeat(3, 1fr);
  }
  /* the featured card (col-sm-12) spans every column as a bento hero row */
  body#news .new-list .row > .col-sm-12 {
    grid-column: 1 / -1;
  }
}
/* Featured card — bento hero layout: image left, text right, on top of the
   regular grid so it reads as a deliberate hero rather than a stretched tile.
   NewsCard's featured variant renders a `.news-thumbnail` + two
   `col-xs-12 col-sm-3/9 col-md-2/10` columns inside `.item`; recompose them
   with flex instead of fighting the legacy float/width per breakpoint. */
@media (min-width: 768px) {
  body#news .new-list .row > .col-sm-12 .item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  body#news .new-list .row > .col-sm-12 .item .news-thumbnail {
    flex: 1 1 52%;
    max-width: 52%;
    margin: 0;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
  body#news .new-list .row > .col-sm-12 .item .news-thumbnail img {
    height: 100%;
    min-height: 340px;
  }
  body#news .new-list .row > .col-sm-12 .item > [class*="col-"] {
    float: none;
    width: auto !important;
    padding: var(--sp-md) var(--sp-md) 0 !important;
    margin: 0 !important;
  }
  body#news .new-list .row > .col-sm-12 .item .date-time-top {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: var(--sp-md);
  }
  body#news .new-list .row > .col-sm-12 .item > .col-sm-9,
  body#news .new-list .row > .col-sm-12 .item > .col-md-10 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--sp-lg) !important;
  }
}
/* Featured heading reads larger/serif to stand apart from grid-card titles */
body#news .new-list .row > .col-sm-12 .item h3.title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}
body#news .new-list .row > .col-sm-12 .item .description {
  font-size: var(--fs-body);
  line-height: 1.7;
}
/* date-time-top circular badge — bigger, centred number over the label */
body#news .new-list .item .date-time-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
}
body#news .new-list .item .date-time-top span {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
   Category tabs (`CategorySidebar` / `.box-category`) already get global
   active-state styling in components.css; add the news-page gold accent tick
   the brief calls for, scoped here so it never bleeds into the About pages'
   reuse of the same component.
   ---------------------------------------------------------------------------- */
body#news .box-category ul li.active a {
  color: var(--c-teal) !important;
  border-bottom-color: var(--c-teal);
}
body#news .box-category ul li.active a::before {
  background: var(--c-gold);
}

/* ----------------------------------------------------------------------------
   Pagination (`Paging` in CategoryListing.tsx: `.footer.tin-tuc-nav` >
   `.paging.button-nav-group` > pill links). Legacy CSS floats numbered
   circles with a `.current` state; restyle as a centred modern pill row.
   `.pPrev`/`.pNext`/`.pFirst`/`.pLast` stay display:none per the legacy
   template (no numbered-only pager is exposed as prev/next controls today) —
   only the visible number pills are restyled.
   ---------------------------------------------------------------------------- */
body#news .tin-tuc-nav {
  clear: both;
  margin-top: var(--sp-lg);
}
body#news .tin-tuc-nav .paging {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
body#news .tin-tuc-nav .paging a {
  float: none;
  width: 40px;
  height: 40px;
  padding-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
body#news .tin-tuc-nav .paging a:hover {
  background: var(--c-primary-050);
  border-color: var(--c-line-strong);
  color: var(--c-primary-700);
  transform: translateY(-2px);
}
body#news .tin-tuc-nav .paging a.current {
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: #fff;
}

/* ----------------------------------------------------------------------------
   Article detail (`NewsArticle` / `.page-news-detail`) — heading/prose polish
   layered on top of the global `.post-detail .description` narrow column.
   ---------------------------------------------------------------------------- */
body#news .page-news-detail .page-branch-title .title {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}
/* Large serif article title (the global `.page-news-detail h3.title` sets
   font/size already; add spacing + measure here) */
body#news .page-news-detail h3.title {
  max-width: var(--container-narrow);
  margin: 0 auto var(--sp-sm);
  padding-top: var(--sp-sm);
}
/* Hero image above the fold */
body#news .page-news-detail .post-detail .item > img.img-responsive {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--sp-md);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
/* Date (+ author, appended inline via a trailing <span>) meta row */
body#news .page-news-detail .post-detail .item > .date-time {
  max-width: var(--container-narrow);
  margin: 0 auto var(--sp-sm);
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Tag badges — NewsArticle.tsx inlines its own pill styling on `.post-tags
   span`; refine the row spacing/alignment here without touching the inline
   background/padding contract set in the component itself. */
body#news .page-news-detail .post-tags {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body#news .page-news-detail .post-tags span {
  background: var(--c-primary-050) !important;
  color: var(--c-primary-700);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Refined prose — blockquote/heading polish on top of the global
   `.post-detail .description` measure + base type set in components.css. */
body#news .post-detail .description h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--c-ink);
  line-height: 1.3;
}
body#news .post-detail .description h3,
body#news .post-detail .description h4 {
  font-family: var(--font-sans);
  color: var(--c-ink);
  font-weight: 700;
}
body#news .post-detail .description a {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
  transition: color var(--t), text-decoration-color var(--t);
}
body#news .post-detail .description a:hover {
  color: var(--c-primary-700);
  text-decoration-color: currentColor;
}
body#news .post-detail .description blockquote {
  margin: var(--sp-md) 0;
  padding: var(--sp-sm) var(--sp-md);
  border-left: 4px solid var(--c-gold);
  background: var(--c-bg-alt);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.6;
}
body#news .post-detail .description ul,
body#news .post-detail .description ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
}
body#news .post-detail .description li {
  margin-bottom: 0.4em;
}
body#news .post-detail .description hr {
  margin: var(--sp-lg) 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

/* Related "Tin liên quan" block — reuses the listing card grid above; add the
   section spacing + heading rhythm specific to where it sits (its own
   `.page-news` wrapper below the article, not inside `.new-list`, so give the
   grid rule its own selector already covered by `.related-news .row` above). */
body#news .related-news {
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--c-line);
}
body#news .related-news .page-branch-title {
  margin-bottom: var(--sp-md);
}

/* ----------------------------------------------------------------------------
   Search (`/tin-tuc-su-kien/tim-kiem`) — form row, result grid (parity with
   the listing grid via the shared `.new-list`-less `.page-news .row` here),
   and an intentional empty state when `?q=` is blank or has no matches.
   ---------------------------------------------------------------------------- */
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: stretch;
  padding: var(--sp-md);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] > [class*="col-"] {
  float: none;
  width: auto !important;
  flex: 1 1 auto;
  padding: 0 !important;
}
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] .col-sm-3 {
  flex: 0 0 auto;
}
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] input.textbox {
  height: 52px;
  margin: 0;
}
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] button.button-submit {
  height: 52px;
  width: auto;
  padding: 0 var(--sp-lg);
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--t), transform var(--t);
}
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] button.button-submit:hover {
  background: var(--c-primary-700);
  transform: translateY(-2px);
}
/* Result count heading */
body#news .page-news form[action="/tin-tuc-su-kien/tim-kiem"] + .page-branch-title {
  margin-top: var(--sp-lg);
}
/* Result grid — the search page nests cards directly in `.page-news > .row`
   (no `.new-list` wrapper), so give it the same grid treatment as the
   listing/related rows without depending on that class. */
body#news .page-news > .container > .col-sm-12 > .row:last-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg) var(--sp-md);
  margin: 0 !important;
}
body#news .page-news > .container > .col-sm-12 > .row:last-child > [class*="col-"] {
  float: none;
  width: auto !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  body#news .page-news > .container > .col-sm-12 > .row:last-child {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  body#news .page-news > .container > .col-sm-12 > .row:last-child {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Empty state (no `q`, or zero matches) — the page renders no heading and an
   empty `.row` when `q` is blank; when a term IS present but yields nothing,
   the "0 kết quả" heading shows with an empty grid below it. Style the empty
   grid so it never collapses to a jarring blank gap. */
body#news .page-news > .container > .col-sm-12 > .row:last-child:empty {
  display: block;
  margin-top: var(--sp-lg) !important;
  padding: var(--sp-2xl) var(--sp-md);
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  text-align: center;
}
body#news .page-news > .container > .col-sm-12 > .row:last-child:empty::before {
  content: "Chưa có kết quả nào. Hãy thử một từ khoá khác.";
  display: block;
  color: var(--c-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
}

/* Featured article (col-sm-12 full-width card) — hero image treatment */
body#news .page-news .new-list .col-sm-12 .item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}

body#news .page-news .new-list .col-sm-12 .item .news-thumbnail img {
  height: clamp(260px, 32vw, 460px);
}

/* News card grid items — lift and spring on hover */
body#news .page-news .new-list .item {
  transition: transform 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out),
    border-color var(--t);
}

@media (prefers-reduced-motion: no-preference) {
  body#news .page-news .new-list .item {
    animation: dh-fade-up 0.4s var(--ease-out) both;
  }
}

/* Stagger news grid cards */
@media (prefers-reduced-motion: no-preference) {
  body#news .page-news .new-list [class*="col-sm-"]:nth-child(1) .item { animation-delay: 0ms; }
  body#news .page-news .new-list [class*="col-sm-"]:nth-child(2) .item { animation-delay: 60ms; }
  body#news .page-news .new-list [class*="col-sm-"]:nth-child(3) .item { animation-delay: 120ms; }
  body#news .page-news .new-list [class*="col-sm-"]:nth-child(4) .item { animation-delay: 0ms; }
  body#news .page-news .new-list [class*="col-sm-"]:nth-child(5) .item { animation-delay: 60ms; }
  body#news .page-news .new-list [class*="col-sm-"]:nth-child(6) .item { animation-delay: 120ms; }
}

/* ============================================================================
   GLOBAL PAGE POLISH — catch-all micro-interactions & motion for all pages
   ============================================================================ */

/* Box-category sidebar links — spring indent on hover */
@media (prefers-reduced-motion: no-preference) {
  .box-category ul li a {
    transition: background var(--t), color var(--t),
      padding-left var(--t-spring);
  }
}

/* Branch-title gold accent entrance */
@media (prefers-reduced-motion: no-preference) {
  .page-branch-title::after {
    transform-origin: left;
    animation: dh-rule-grow 0.6s var(--ease-spring) 0.15s both;
  }
}

/* Smooth image scale on all cards (catch-all pages too) */
.new-list .item .news-thumbnail img,
.album-list .item .view img {
  transition: transform 0.55s var(--ease-out);
}

.new-list .item:hover .news-thumbnail img,
.album-list .item:hover .view img {
  transform: scale(1.07);
}

/* Contact page info panel — glassmorphism on coloured background */
@media (prefers-reduced-motion: no-preference) {
  body#contact .contact-info,
  body#contact .box-info {
    transition: transform 0.35s var(--ease-spring), box-shadow var(--t);
  }
  body#contact .contact-info:hover,
  body#contact .box-info:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-4);
  }
}

/* Floor plan hub — tab underline spring animation */
@media (prefers-reduced-motion: no-preference) {
  body#floorplan-hub .nav-tabs > li > a,
  body#floorplan-tower-a .nav-tabs > li > a {
    transition: color var(--t), border-color var(--t-spring);
  }
}