/* Home page hero when no banner is configured yet: same plain header as every inner page (Giới thiệu, Dịch
   vụ, ...), just with its own background photo since there's no "bg-home" in the legacy stylesheet. */
.bg-home {
  background: url("/viocons/assets/viocons.vn/upload/banner/Y-TUONG-KHONG-GIAN-SONG-SANG-TAO27.jpg") 50% 0 no-repeat;
  background-size: cover;
}

/* Inner-page hero (Giới thiệu, Dịch vụ, Liên hệ, ...): the vertical "ARCHITECTURE CONSTRUCTION"
   label is rotated -90deg around its own top-left corner, so it renders *upward* from its anchor
   point rather than downward. The home page anchors this same block from the *bottom* of its
   hero (`bottom: 0`, the default in style.css), so the label always has clear room above it and
   never touches the nav band. Inner pages instead anchored it from the *top* (`top: 12.2vmin`),
   which used to be harmless when the nav band was transparent, but now that the band is always
   opaque (see .navbar-desctop above) the label pokes up behind/into it. Match the home page
   instead of patching the top offset: anchor from the bottom on every page. */
.header-inner .vertical-panel-content {
  top: auto;
  bottom: 0;
}

/* That same "anchor from the bottom" rule has no positioned ancestor to anchor to (the legacy
   .vertical-panel wrapper it was designed for isn't part of the current markup), so it actually
   resolves against the viewport height -- i.e. it lands a fixed distance down the page, the same
   on every page. On desktop that distance comfortably covers every page's hero. On mobile, the
   home page's own banner (HomeBanner.module.css) is 70svh/min 400px tall, roughly that same
   distance, so the label lands right at its edge -- but the inner-page hero (.main-inner, sized by
   vmin padding) shrinks much shorter on a narrow viewport, so the same fixed distance instead lands
   deep inside the body copy below it. Give it the same floor as the home banner so every page's
   hero is tall enough for the label to land in the same place it does on home. */
@media (max-width: 767px) {
  .header-inner .main-inner {
    min-height: 70vh;
    min-height: 70svh;
  }
}

/* Layout fixes for the projects listing grid: real bootstrap grid CSS isn't shipped with the site,
   so the .col-sm-6/.col-md-4/.col-lg-3 classes used by the legacy markup need their own rules here. */

.js-projects-gallery .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.js-projects-gallery .project {
  box-sizing: border-box;
  padding: 0 15px 30px;
  width: 100%;
  cursor: pointer;
}

@media (min-width: 768px) {
  .js-projects-gallery .project.col-sm-6 { width: 50%; }
}

@media (min-width: 992px) {
  .js-projects-gallery .project.col-md-4 { width: 33.3333%; }
}

@media (min-width: 1200px) {
  .js-projects-gallery .project.col-lg-3 { width: 25%; }
}

.js-projects-gallery .project figure {
  position: relative;
  overflow: hidden;
}

.js-projects-gallery .project .project-zoom {
  cursor: pointer;
  pointer-events: auto;
}

/* Partner logos have no fixed pixel size in the legacy CSS, so an uploaded image with large
   natural dimensions renders at full size and breaks the "Đối tác" row layout. Cap it here. */
.clients-list .client img {
  max-width: 160px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.projects-pagination{margin:30px 0 10px;}
.projects-pagination .pagination>li>a,.projects-pagination .pagination>li>span{color:#298e72;}
.projects-pagination .pagination>.active>span{color:#fff;}
.projects-pagination .pagination>.disabled>span{color:#999;}

.blog-details .post-content{margin-top:20px;overflow-wrap:break-word;}
.blog-details .post-content img{max-width:100%;height:auto;}
.blog-details .post-content iframe{max-width:100%;}
.blog-details .post-content blockquote{border-left:3px solid #298e72;padding-left:15px;margin:15px 0;color:#666;}
.blog-details .post-content ul,.blog-details .post-content ol{padding-left:25px;margin-bottom:15px;}

/* The faded brand watermark was sized for a shorter name and anchored right, so "VIOCONS" ran off
   the left edge of the brand panel. Size it in vmin (like the panel itself) so the whole name fits. */
.brand-name{
  right:0;
  bottom:-0.05em;
  font-size:7.4vmin;
  letter-spacing:0;
  white-space:nowrap;
}

/* Desktop nav logo: the legacy design only put the logo on the same row as the menu (inside
   .navbar-desctop, using its own .brand) once ".affix" (the scrolled state) kicked in -- the rest
   of the time .navbar-desctop's .brand stayed hidden and the only visible logo was the separate,
   absolutely-positioned .brand-panel one, which isn't part of that row at all and has its own
   unrelated vertical offset. That's why the top (non-scrolled) band showed the logo floating above
   the menu instead of lined up with it, unlike the scrolled band. Show .navbar-desctop's own logo
   unconditionally instead, so both states use the exact same row/layout, and hide the mismatched
   .brand-panel logo once .navbar-desctop takes over (>=992px, see the Bootstrap visible-md/lg
   classes on it). .brand-panel's watermark text (.brand-name) is untouched either way. */
@media (min-width: 992px) {
  .brand-panel .brand {
    display: none;
  }
}

.navbar-desctop .brand {
  display: inline-block;
}

.navbar-desctop .brand img {
  height: 40px;
}

/* Mobile logo: the legacy design only shrank it to a small, band-sized logo once ".affix" (the
   scrolled state) kicked in -- the rest of the time it rendered at full size, tall enough to spill
   out of the now-always-visible nav band (see .navbar-desctop above) and overlap the banner
   underneath. Shrink and reposition it unconditionally so it always sits inside the band. Only the
   padding-top and the logo's own size change here; .brand-name (the big watermark) is anchored to
   the bottom of this same box and is left alone, since it's meant to bleed into the banner below
   the band. Scoped below 992px: at/above that, .navbar-desctop's own logo (above) is used instead. */
@media (max-width: 991px) {
  .brand-panel {
    padding-top: 1.6em;
  }

  .brand-panel .brand img {
    height: 44px;
    width: auto;
  }
}

/* Project cards: every card has the same proportions no matter what size of image was uploaded.
   The image fills the card (cropped, never stretched); the legacy CSS let the image's own height
   decide the card height, so mixed portrait/landscape uploads produced ragged, uneven cards. */
.project figure {
  aspect-ratio: 4 / 5;
  background-color: #1a1a1a;
  overflow: hidden;
}

.project figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Images on a project's detail page: never wider than the page, whatever their original size. */
.project-details-descr img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

/* Content written in the admin rich-text editor (service detail, blog posts, About page). */
.managed-service-detail,
.blog-details .post-content,
.about .entry {
  overflow-wrap: break-word;
}

.managed-service-detail img,
.about .entry img {
  max-width: 100%;
  height: auto;
}

.managed-service-detail ul,
.managed-service-detail ol,
.about .entry ul,
.about .entry ol {
  padding-left: 25px;
  margin-bottom: 15px;
}

.managed-service-detail p {
  margin-bottom: 12px;
}

.managed-service-detail table,
.blog-details .post-content table,
.about .entry table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.managed-service-detail th,
.managed-service-detail td,
.blog-details .post-content th,
.blog-details .post-content td,
.about .entry th,
.about .entry td {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 10px;
  vertical-align: top;
}

.managed-service-detail th,
.blog-details .post-content th,
.about .entry th {
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
}

/* Project detail text written in the admin rich-text editor. */
.managed-project-detail {
  overflow-wrap: break-word;
  margin-bottom: 20px;
}

.managed-project-detail img {
  max-width: 100%;
  height: auto;
}

.managed-project-detail p {
  margin-bottom: 12px;
}

.managed-project-detail ul,
.managed-project-detail ol {
  padding-left: 25px;
  margin-bottom: 15px;
}

.managed-project-detail table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.managed-project-detail th,
.managed-project-detail td {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 10px;
  vertical-align: top;
}

.managed-project-detail th {
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
}

/* Mobile menu: the burger opened the menu but it stayed invisible. The site also loads Tailwind (globals.css),
   whose utility `.collapse { visibility: collapse }` has the same class name as Bootstrap's collapse, so the
   open menu (`.navbar-collapse.collapse.in`) was hidden by it. Bootstrap hides a collapse with display:none,
   never with visibility, so forcing it visible is safe. */
/* Only below 992px, where the burger menu is used; on desktop the mobile menu is parked off-screen and must stay
   non-focusable. */
@media (max-width: 991px) {
  .collapse,
  .collapsing,
  .navbar-collapse.collapse {
    visibility: visible !important;
  }
}

/* Mobile: no sideways scrolling. Decorative elements (the big faded section titles, slider captions, project
   grid rows with negative margins) stick out past the right edge of a phone screen and made the whole page
   scroll horizontally. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.layout {
  overflow-x: clip;
}

/* The big faded section-header word (Giới thiệu / clients / consult / liên hệ / careers) renders at 10.8em
   (~130px) and is deliberately centered ON its container's left edge (or 90-100% for the right variant) via
   `left:0/90%/100%; transform:translate(-50%,-50%)`, so exactly half of it is always off-screen by design.
   On desktop, where the section is wide, that reads as a stylish bleed; on a phone it just crops the word
   ("Giới thiệu" -> "thiệu"), and shrinking the font alone (still centered on the edge) keeps cropping it,
   just smaller. Below 768px it drops out of that edge-anchored positioning into the normal flow instead, so
   the whole word is always visible and it can no longer overlap unrelated content further down the page. */
@media (max-width: 767px) {
  .fade-title-left,
  .fade-title-right {
    position: static;
    display: block;
    left: auto;
    right: auto;
    transform: none;
    font-size: 3.4em;
    text-align: center;
    margin: -0.15em 0 0.3em;
  }
}

/* Tuyển dụng (jobs) list and detail pages: text-only cards, styled like the rest of the site's dark theme
   (same card background and pill-tag look as the blog list, same accent color as buttons and links). */
.job {
  position: relative;
  margin-bottom: 1px;
  background-color: #373737;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.08);
}

.job-info {
  padding: 2.4em 3em;
}

.job-title {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1.333;
  margin: 0 0 0.4em;
}

.job-title a {
  color: #fff;
}

.job-department {
  color: #298e72;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1em;
}

.job-meta {
  margin: 0 0 1.2em -0.35em;
}

.job-tag {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.77em 1.1em;
  border-radius: 2em;
  background-color: #434343;
  text-transform: uppercase;
  color: #b4b4b4;
  margin: 0.35em;
}

.job-tag-expired {
  background-color: rgba(217, 83, 79, 0.18);
  color: #e8a29f;
}

.job-summary {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.4em;
}

.job-list .text-center {
  color: rgba(255, 255, 255, 0.5);
}

/* Detail page: the meta chips sit right under the title, and a highlighted box tells the candidate where
   to send their CV (or that the deadline has passed). */
.job-details .job-meta {
  margin-top: 1.6em;
}

.job-detail-notice {
  margin-bottom: 2.5em;
  padding: 1.2em 1.6em;
  border-left: 3px solid #298e72;
  background: rgba(41, 142, 114, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.job-detail-notice a {
  color: #298e72;
  font-weight: 700;
}

.job-detail-notice-expired {
  border-left-color: #d9534f;
  background: rgba(217, 83, 79, 0.12);
  color: #e8a29f;
}

/* Header navigation: Oswald is a narrow display font with very wide letter-spacing (0.32em) by design, which
   crowds Vietnamese diacritics (dấu) and makes labels like "GIỚI THIỆU" or "TUYỂN DỤNG" harder to scan. Be
   Vietnam Pro is designed for Vietnamese and keeps the all-caps brand look with room for the diacritics to
   sit clearly; the letter-spacing is pulled in to match its wider natural letterforms. */
.navbar-desctop-menu,
.navbar-nav-mobile {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* Project cards: same problem as the nav, worse on the vertical "CÔNG TRÌNH ..." category label, whose
   0.8em letter-spacing stretches Vietnamese diacritics apart until the word is hard to read at a glance. */
.project-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.project-category {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* Project cards (home + Dự án): the vertical category label sits in a fixed left gutter, and the
   title is centered in the space to its right. The caption's left padding reserves that gutter, so
   a long title wraps inside the card instead of running under the vertical label on narrow screens. */
.project figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 2.4em 1.4em 2.4em 3.4em;
  text-align: center;
}

.project-title {
  margin: 0;
  text-align: center;
}

.project-category {
  left: 1.2em;
  bottom: 2.4em;
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

/* Project carousel prev/next: icon-only round buttons (chevrons set in interface.js) that stay readable
   on both the photos and the white page. */
.projects-carousel .owl-prev,
.projects-carousel .owl-next {
  width: 56px;
  height: 56px;
  line-height: 56px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  background-image: none;
  opacity: 1;
  letter-spacing: 0;
  color: #298e72;
  font-size: 26px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(35, 35, 35, 0.18);
}

.projects-carousel .owl-prev:hover,
.projects-carousel .owl-next:hover {
  background-color: #298e72;
  color: #fff;
}

/* On phones the project carousel's prev/next buttons were positioned over the middle of the card and
   collided with the title. Put them on their own row under the carousel instead. */
/* The project carousel's prev/next buttons sit in a row under the cards at every width, so they never
   cover a card's title. */
.projects-carousel .owl-controls {
  position: static;
  margin-top: 1.4em;
  text-align: center;
}

.projects-carousel .owl-buttons {
  position: static;
  display: flex;
  justify-content: space-between;
  max-width: 260px;
  margin: 0 auto;
}

.projects-carousel .owl-prev,
.projects-carousel .owl-next {
  position: static;
  display: inline-block;
  transform: none;
}

/* The big page-hero title (every inner page: Giới thiệu, Dịch vụ, Dự án, Tuyển dụng, Bài viết, Liên hệ and
   their detail pages all share the same <header class="main-header"><h1> markup) and the matching, smaller
   title repeated inside the article on detail pages. h1's own font-family is 'montserratlight', which has
   no matching @font-face, so it was silently falling back to the browser's default font; combined with
   0.32em letter-spacing that stretched Vietnamese diacritics far apart. .post-header h3 (blog/service/job
   detail) and .project-details-title (project detail) had the same Oswald condensed-font issue as the nav
   and project cards above. */
h1,
.h1 {
  font-family: 'Be Vietnam Pro', sans-serif;
  letter-spacing: 0.06em;
}

.post-header h3,
.project-details-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
}

/* Page-hero title text and the large faded "VIOCONS" watermark behind the header: both were plain white
   (`.main-header h1` overrides the base `h1, .h1` color, so it needs its own rule), recolored to the brand
   orange. Applies on every page, since both share this one header markup. */
.main-header h1 {
  color: #f3a133;
}

.brand-name {
  color: #298e72;
}

/* Zalo and TikTok icons (inline SVG, no Font Awesome 4.6.3 glyph for either) next to the Facebook icon in the
   header's vertical social panel: sized and colored the same as the neighboring .fa icons. */
.social-list svg {
  /* An <svg> defaults to display:block, so the .vertical-panel-content/.social-list `text-align: center`
     that centers the Facebook <i> (inline-block) had no effect on these at all -- they just sat flush left,
     out of line with Facebook. inline-block makes them centered the same way. */
  display: inline-block;
  width: 2.4vmin;
  height: 2.4vmin;
  fill: #606060;
  stroke: #606060;
  vertical-align: middle;
}

.social-list a:hover svg {
  fill: #298e72;
  stroke: #298e72;
}

/* "Chi tiết" (blog cards) and "Xem chi tiết & ứng tuyển" (job cards) both use .read-more, whose trailing icon
   is a `background: url(".../missing.png")` -- a literal 1x1 broken placeholder pixel, never replaced with a
   real icon, which is why only a faint dot showed up. Drawn as a plain chevron instead. */
.read-more {
  position: relative;
  background: none;
}

.read-more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.15em;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.3em;
  border-style: solid;
  border-color: #f3a133;
  border-width: 0.14em 0.14em 0 0;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.read-more:hover::after {
  transform: rotate(45deg) translate(0.15em, -0.15em);
}

/* Footer: was just a logo + "VIOCONS" + "All Rights Reserved." in three bare columns (.footer in style.css).
   Replaced with a real 4-column footer (brand/social, quick links, services, contact) plus a bottom bar,
   in the site's own palette (teal #298e72, orange #f3a133, dark background). */
.site-footer {
  margin-top: 7em;
  padding: 4.5em 0 0;
  background: #fff;
  border-top: 1px solid rgba(35, 35, 35, 0.06);
  box-shadow: 0 -1px 30px rgba(35, 35, 35, 0.04);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #298e72, #f3a133);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5em;
  padding-bottom: 3.5em;
}

.site-footer-col .brand {
  display: inline-block;
  margin-bottom: 1.1em;
}

.site-footer-col .brand img {
  max-width: 160px;
}

.site-footer-tagline {
  margin: 0 0 0.6em;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  color: #f3a133;
  text-transform: uppercase;
}

.site-footer-about {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.7;
  color: rgba(35, 35, 35, 0.58);
}

.site-footer-heading {
  margin: 0 0 1.4em;
  padding-bottom: 0.7em;
  position: relative;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #232323;
}

.site-footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4em;
  height: 2px;
  background: #298e72;
}

.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-links li {
  margin-bottom: 0.85em;
}

.site-footer-links a {
  font-size: 0.92em;
  color: rgba(35, 35, 35, 0.65);
  transition: color 0.2s, padding-left 0.2s;
}

.site-footer-links a:hover {
  color: #f3a133;
  text-decoration: none;
  padding-left: 0.35em;
}

.site-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-bottom: 1.1em;
  font-size: 0.92em;
  line-height: 1.6;
  color: rgba(35, 35, 35, 0.65);
}

.site-footer-contact .fa {
  margin-top: 0.25em;
  color: #298e72;
  font-size: 0.95em;
  flex-shrink: 0;
}

.site-footer-contact a {
  color: inherit;
  transition: color 0.2s;
}

.site-footer-contact a:hover {
  color: #f3a133;
  text-decoration: none;
}

.site-footer-social {
  display: flex;
  gap: 0.7em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 1px solid rgba(35, 35, 35, 0.15);
  color: rgba(35, 35, 35, 0.55);
  transition: all 0.25s ease;
}

.site-footer-social a:hover {
  border-color: #298e72;
  background: #298e72;
  color: #fff;
  transform: translateY(-3px);
}

.site-footer-social .fa {
  font-size: 1em;
}

.site-footer-social svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.6em 0;
  border-top: 1px solid rgba(35, 35, 35, 0.08);
  font-size: 0.82em;
  color: rgba(35, 35, 35, 0.45);
}

.site-footer-top {
  color: rgba(35, 35, 35, 0.55);
  transition: color 0.2s;
}

.site-footer-top:hover {
  color: #f3a133;
  text-decoration: none;
}

@media (max-width: 991px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.8em;
  }
}

@media (max-width: 575px) {
  .site-footer {
    margin-top: 4em;
    padding-top: 3.2em;
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 2.2em;
    text-align: center;
    padding-bottom: 2.4em;
  }

  .site-footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .site-footer-social {
    justify-content: center;
  }

  .site-footer-contact li {
    text-align: left;
  }

  /* "Liên kết nhanh" / "Dịch vụ" have several short links each; stacking one per
     row makes the footer very tall, so wrap them into a compact centered flow instead. */
  .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em 1.3em;
  }

  .site-footer-links li {
    margin-bottom: 0;
  }

  .site-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Frontend rebrand: swap the legacy dark page canvas for a white one, and the
   white text that reads on it for the brand orange (#f3a133). Scoped to the
   overall page chrome — body, the vertical side panel, the header/nav and
   headings — since that's what makes up "the main background" across every
   page. Component-level dark chrome that exists for its own contrast (solid
   buttons, blog cards, tag pills, project-photo overlays, the redesigned
   footer) is intentionally left alone; it isn't part of the page canvas.
--------------------------------------------------------------------------- */

body {
  background-color: #fff;
  color: #f3a133;
}

.loader {
  background: #fff;
}

/* Left vertical side panel (rotated brand text + social icons column) */
.vertical-panel {
  background-color: #fff;
}

.vertical-panel-info .line {
  background-color: rgba(243, 161, 51, 0.35);
}

.vertical-panel-title {
  color: #f3a133;
}

.h1, h1,
.h2, h2,
.h3, h3,
.h4, h4 {
  color: #f3a133;
}

.header-phone,
.main-header {
  color: #f3a133;
}

/* "Địa chỉ liên hệ" world-map pin popover (.object-label/.object-info on the Liên hệ page): still
   styled in style.css for the old dark canvas -- a translucent black card (rgba(0,0,0,0.3)) with
   white text -- so on the now-white page it rendered as a barely-there grey box, with its text
   accidentally picking up the rebrand's orange body color on top of that (the .object-content
   line removed above), leaving cramped, hard-to-read orange-on-grey text. Redesigned as a proper
   white card that matches the rest of the rebrand: brand-colored pin, soft shadow, more breathing
   room for the address text. */
.object-label {
  background-color: #f3a133;
  box-shadow: 0 0 0 8px rgba(243, 161, 51, 0.25);
}

.object-label:hover {
  box-shadow: 0 0 0 14px rgba(243, 161, 51, 0.18);
}

.object-info {
  width: 19em;
  margin-left: -9.5em;
  padding: 1.5em 1.7em;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 45px rgba(35, 35, 35, 0.18);
}

.object-info:before {
  border-top-color: #fff;
}

.object-title {
  color: #298e72;
  border-bottom-color: rgba(35, 35, 35, 0.1);
  padding-bottom: 0.7em;
  margin-bottom: 0.7em;
}

.object-content {
  color: #4a4a4a;
  line-height: 1.9;
}

/* Contact block on the "Liên hệ" page (company name/hotline/phone/email/addresses next to
   the form): matches the dark input fields (.form-control background-color: #323232 in
   style.css) instead of inheriting the orange body text color, for a calmer, elegant pairing. */
.col-address {
  color: #323232;
}

/* Service cards ("Tư vấn - Thiết kế" / "Thi công xây dựng") on the home page and the
   Dịch vụ listing: title + description, both currently inheriting the orange h4/body
   rebrand colors, recolored to a neutral dark for a calmer, more legible pairing. */
.service-item h4,
.service-item p {
  color: #232323;
}

/* Top navigation: initial transparent state, the sticky ("affix") state once
   the visitor scrolls, dropdown submenus, and the mobile menu panel. */
.navbar-desctop-menu li a,
.navbar-desctop-menu > li > a,
.navbar-desctop-menu li li a,
.navbar-desctop.affix .navbar-desctop-menu li a,
.navbar-nav-mobile li a {
  color: #f3a133;
}

.navbar-desctop-menu li ul,
.navbar-desctop {
  background-color: rgba(255, 255, 255, 0.95);
}

/* The white (top, non-scrolled) band used the legacy padding (5.9vmin, sized for sitting over a
   tall hero) while the dark (".affix", scrolled) band switches to a much smaller one (1.3em) --
   so despite now sharing the same layout (see .navbar-desctop .brand above), the white band was
   roughly twice as tall. Match the affix padding unconditionally so both bands are the same height. */
.navbar-desctop {
  padding: 1.3em 0 0;
}

.navbar-desctop-menu li li {
  border-bottom: 1px solid rgba(243, 161, 51, 0.15);
}

/* The rich-text editor used in admin (about page, and the two service detail pages) saved
   body copy in near-white/light-grey inline colors meant to read on the old dark canvas
   (color:#ECE7DA and color:#A8A396, in both hex and rgb() form). Now that the canvas is
   white, those two colors need to flip to dark, readable ones; every other inline color in
   that content (brand orange/greens) already reads fine on white and is left untouched. */
[style*="color:#ECE7DA" i],
[style*="color:rgb(236, 231, 218)" i] {
  color: #3a3a3a !important;
}

[style*="color:#A8A396" i],
[style*="color:rgb(168, 163, 150)" i] {
  color: #6b6b6b !important;
}