/* ===== Homepage — built from Figma "trang chủ" (node 3:7) ===== */

/* --- Shared container: matches Bootstrap .container used by header/footer --- */
.hero-section__content,
.linhvuc-section__container,
.duan-section__container,
.nangluc-section__container,
.baiviet-section__container,
.doitac-section__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px; }

/* --- Shared button (Figma "Button": 12px 20px, r100, #0F75BD, 18px medium) --- */
.nm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  min-width: 154px;
  background: var(--color-primary-blue);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease; }

.nm-btn:hover,
.nm-btn:focus {
  background: var(--color-primary);
  color: var(--color-white); }

.nm-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }

/* --- Shared section label (orange triangle + Inter caps) --- */
.section-label {
  display: flex;
  align-items: center;
  gap: 8px; }

.section-label__dot {
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 7px solid var(--color-primary);
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent; }

.section-label__text {
  font-family: var(--font-label);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  opacity: 0.4; }

.section-heading {
  font-family: var(--font-primary);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  line-height: 1.25;
  margin: 0; }

.section-heading strong,
.section-heading .is-accent {
  font-weight: inherit;
  color: var(--color-primary); }

/* =========================================================
   1. Hero
   ========================================================= */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 891px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg-grey); }

.hero-section__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0; }

.hero-section__slide.active {
  opacity: 1;
  z-index: 1; }

.hero-section__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

/* Figma hero keeps dark type on a light photo — fade the left edge to white */
.hero-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 35%,
    rgba(255, 255, 255, 0.25) 60%,
    rgba(255, 255, 255, 0) 80%); }

/* Figma "Daco_5208159 1" (7:567): white skyline hugging the bottom-left of the
   hero, 1340x707 of the 1728x891 frame, at 30%. Sits over the fade so it stays
   visible, under the copy. */
.hero-section::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 77.55%;
  height: 79.35%;
  background: url('assets/images/hero-graphic.png') no-repeat left bottom;
  background-size: 100% 100%;
  opacity: 0.3;
  mix-blend-mode: darken;
  pointer-events: none; }

.hero-section__content {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 100px;
  padding-bottom: 100px; }

.hero-section__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-hero-label);
  line-height: 36px;
  text-transform: uppercase;
  color: var(--color-primary-blue);
  margin: 0; }

.hero-section__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  line-height: 1.15;
  margin: 0; }

.hero-section__desc {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  line-height: 34px;
  margin: 0;
  max-width: 794px; }

/* =========================================================
   2. Lĩnh vực hoạt động
   ========================================================= */
.linhvuc-section {
  position: relative;
  padding: 96px 0 120px;
  background: var(--color-white);
  overflow: hidden; }

/* Figma "Cranes 3" (80:46): crane silhouette bleeding off the left edge,
   395x440 at 5%, 261px below the top of the section. */
.linhvuc-section::before {
  content: '';
  position: absolute;
  left: -31px;
  top: 261px;
  z-index: 0;
  width: 395px;
  height: 440px;
  background: url('assets/images/linhvuc-cranes.png') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none; }

.linhvuc-section__container {
  position: relative;
  z-index: 1; }

.linhvuc-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 40px; }

.linhvuc-section__grid {
  display: grid;
  gap: var(--grid-gap); }

.linhvuc-section__grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.linhvuc-section__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linhvuc-section__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linhvuc-section__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* the cards link through to the Lĩnh vực hoạt động children */
a.linhvuc-card {
  display: block;
  color: inherit;
  text-decoration: none; }

.linhvuc-archive__intro {
  max-width: 792px;
  margin: 0 auto;
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: 24px;
  color: var(--color-text-light); }

.linhvuc-card {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.linhvuc-card__image {
  width: 100%;
  height: 192px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 24px; }

.linhvuc-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease; }

.linhvuc-card:hover .linhvuc-card__image img {
  transform: scale(1.05); }

.linhvuc-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center; }

.linhvuc-card__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
  line-height: 1.4; }

.linhvuc-card__desc {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-light);
  line-height: 24px;
  margin: 0; }

/* =========================================================
   3. Giới thiệu  +  4. Dự án  (share the #F4FAFE band)
   ========================================================= */
.gioithieu-section {
  position: relative;
  padding: 93px 0 86px;
  background: var(--color-bg-light);
  overflow: hidden;
  /* tall enough for the photo panel + the accent tab beneath it */
  min-height: calc((50vw - 27px) * 0.9777 + 86px); }

.gioithieu-section__container {
  display: block;
  /* static on purpose: the photo panel is absolute and must resolve against
     .gioithieu-section (the full page width) so it can bleed to the right
     edge, not against this 1200px box. */
  position: static;
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px; }

.gioithieu-section__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 588px; }

.gioithieu-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.gioithieu-section__text {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.gioithieu-section__highlight,
.gioithieu-section__highlight p {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  font-style: italic;
  line-height: 24px;
  color: var(--color-primary-blue);
  margin: 0; }

.gioithieu-section__highlight p + p {
  margin-top: 12px; }

.gioithieu-section__paragraph,
.gioithieu-section__paragraph p {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-text-light); }

.gioithieu-section__paragraph p {
  margin: 0 0 24px; }

.gioithieu-section__paragraph p:last-child {
  margin-bottom: 0; }

.gioithieu-section__btn {
  align-self: flex-start; }

/* Chevron photo panel — geometry taken straight from the Figma vectors.
   Panel  (80:33) 852x833  M852 0 H282.431 L0 420 L285.373 833 H852 Z
   Stripe (80:34) 506x833  M505.178 0 H282.5 L0 420 L285.5 833 H502 L217.98 420.982 Z
   Accent (80:35) 350x86   M59.1954 86 L0 0 H350 V86 Z
   The panel is 852/1728 = 49.31% of the design frame and sits flush against
   its right edge, so it is anchored to the section rather than to a grid
   column (a grid cell's 50% is not half the page, so the usual full-bleed
   margin trick leaves a gap). */
.gioithieu-section__image {
  position: absolute;
  top: 0;
  right: 0;
  /* Start 24px (the design's gutter) to the right of the 588px text column
     instead of using the design's 49.31vw: the 1200px container is
     proportionally wider than the 1728px design frame, so a vw-based width
     runs the panel straight into the text. */
  left: calc(50% + 27px);
  aspect-ratio: 852 / 833; }

/* the chevron is clipped on the <img> itself, so the pseudo-elements below
   stay outside the clip and the accent tab can hang under the panel */
.gioithieu-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(100% 0, 33.15% 0, 0 50.42%, 33.49% 100%, 100% 100%); }

/* the translucent blue chevron laid over the left of the photo */
.gioithieu-section__image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 117, 189, 0.6);
  clip-path: polygon(59.29% 0, 33.16% 0, 0 50.42%, 33.51% 100%, 58.92% 100%, 25.58% 50.54%); }

/* solid blue tab tucked under the panel, flush with its right edge (350/852) */
.gioithieu-section__image::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 41.08%;
  max-width: 350px;
  height: 86px;
  background: var(--color-primary-blue);
  clip-path: polygon(16.91% 100%, 0 0, 100% 0, 100% 100%);
  pointer-events: none; }

/* =========================================================
   4. Dự án
   ========================================================= */
.duan-section {
  padding: 96px 0 128px;
  background: var(--color-bg-light);
  overflow: hidden; }

.duan-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: 24px; }

.duan-section__header .section-heading {
  color: var(--color-primary-blue); }

.duan-section__desc,
.duan-section__desc p {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  line-height: 24px;
  color: var(--color-text-dark);
  text-align: center; }

.duan-section__desc {
  max-width: 792px;
  margin: 0 auto 40px; }

.duan-section__desc p {
  margin: 0; }

.duan-section__desc p + p {
  margin-top: 12px; }

.duan-section__slider {
  margin-bottom: 40px; }

/* let neighbouring slides peek outside the container, like the Figma frame */
.duan-section__slider .owl-stage-outer {
  overflow: visible; }

.duan-section__slider .owl-item {
  opacity: 0.999; }

.duan-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-bottom: 40px; }

.duan-section__actions {
  display: flex;
  justify-content: center; }

.duan-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 468px; }

/* The overlay is positioned, so a stretched-link ::after inside it would only
   cover the overlay. A sibling anchor over the whole card is what makes the
   entire item clickable; "Xem thêm" points at the same URL. */
.duan-card__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block; }

.duan-card__image,
.duan-card__image img {
  width: 100%;
  height: 100%; }

.duan-card__image img {
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease; }

.duan-card:hover .duan-card__image img {
  transform: scale(1.05); }

.duan-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(0, 0, 0, 0.95) 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease; }

.duan-card:hover .duan-card__overlay,
.duan-card:focus-within .duan-card__overlay,
.duan-section__slider .owl-item.center .duan-card__overlay {
  opacity: 1;
  transform: translateY(0); }

.duan-card__title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }

.duan-card__desc {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-white);
  margin: 0; }

.duan-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.3s ease; }

.duan-card__link:hover {
  color: var(--color-primary); }

.duan-card__link svg {
  width: 16px;
  height: 16px; }

/* =========================================================
   5. Năng lực sản xuất
   ========================================================= */
.nangluc-section {
  position: relative;
  padding: 96px 0;
  background: var(--color-primary-blue);
  overflow: hidden; }

.nangluc-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0; }

.nangluc-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.nangluc-section__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(1, 32, 96, 0.92) 0%,
    rgba(15, 117, 189, 0.75) 55%,
    rgba(15, 117, 189, 0.35) 100%); }

.nangluc-section__container {
  z-index: 2; }

.nangluc-section__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 690px; }

.nangluc-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 588px; }

.nangluc-section__label .section-label__text {
  color: var(--color-white);
  opacity: 1; }

.nangluc-section__header .section-heading {
  color: var(--color-white); }

.nangluc-section__tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  align-self: flex-start;
  margin-top: 16px; }

.nangluc-tab {
  padding: 24px;
  background: var(--color-white);
  border: 0;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-black);
  transition: background 0.3s ease, color 0.3s ease; }

.nangluc-tab.active,
.nangluc-tab:hover {
  background: var(--color-primary-blue);
  color: var(--color-white); }

.nangluc-section__panel {
  display: none;
  flex-direction: column;
  gap: 24px; }

.nangluc-section__panel.active {
  display: flex; }

/* Each tab is one editor field, so the paragraph and the bullet list arrive as
   plain <p> and <ul> inside this wrapper instead of as two styled elements. */
.nangluc-section__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 690px; }

.nangluc-section__content p {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  line-height: 24px;
  color: var(--color-white);
  margin: 0; }

.nangluc-section__content ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none; }

.nangluc-section__content li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-white); }

.nangluc-section__content li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--color-white); }

.nangluc-section__btn {
  align-self: flex-start;
  margin-top: 16px; }

/* =========================================================
   6. Bài viết nổi bật
   ========================================================= */
.baiviet-section {
  padding: 96px 0 40px;
  background: var(--color-bg-grey); }

.baiviet-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px; }

.baiviet-section__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.baiviet-section__header-left .section-heading {
  color: var(--color-primary-dark); }

.baiviet-section__tabs {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 6px; }

.baiviet-tab {
  font-family: var(--font-label);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-primary-dark);
  opacity: 0.4;
  transition: all 0.3s ease; }

.baiviet-tab.active,
.baiviet-tab:hover {
  color: var(--color-primary-blue);
  opacity: 1; }

.baiviet-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap); }

.baiviet-card > a {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none; }

.baiviet-card__image {
  width: 100%;
  height: 212px;
  overflow: hidden;
  border-radius: 6px; }

.baiviet-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease; }

.baiviet-card:hover .baiviet-card__image img {
  transform: scale(1.05); }

.baiviet-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.baiviet-card__meta {
  display: flex;
  align-items: center;
  gap: 8px; }

.baiviet-card__category {
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-primary); }

.baiviet-card__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-dark);
  opacity: 0.2; }

.baiviet-card__date {
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark); }

.baiviet-card__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 24px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
  transition: color 0.3s ease; }

.baiviet-card:hover .baiviet-card__title {
  color: var(--color-primary-blue); }

/* Visually hidden, still read by assistive tech */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; }

/* =========================================================
   7. Đối tác — white strip overlapping the footer
   ========================================================= */
.doitac-section {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  margin-bottom: -72px;
  /* The strip straddles the boundary: the colour of whatever section it follows
     above, footer blue below, so the bottom 72px reads as sitting inside the
     footer. The strip renders on every page now, so the top half has to pick up
     the band it sits under — grey on the homepage, light blue elsewhere. */
  --doitac-top-bg: var(--color-bg-grey);
  background: linear-gradient(to bottom,
    var(--doitac-top-bg) calc(100% - 72px),
    var(--color-primary-dark) calc(100% - 72px)); }

/* Pages whose last section is the light blue band */
body.post-type-archive-du_an .doitac-section,
body.tax-duan_category .doitac-section,
body.single-du_an .doitac-section,
body.page-template-page-contact .doitac-section,
body.blog .doitac-section,
body.archive.category .doitac-section,
body.single-post .doitac-section {
  --doitac-top-bg: var(--color-bg-light); }

.doitac-section__strip {
  position: relative;
  min-height: 140px;
  display: flex;
  align-items: center;
  padding: 24px 40px;
  background: var(--color-white); }

.doitac-section__corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 28px solid var(--color-primary);
  border-right: 28px solid transparent; }

.doitac-section__strip .doitac-slider {
  width: 100%; }

/* Fallback layout for before owl-carousel initialises (or if JS is off) */
.doitac-slider:not(.owl-loaded) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden; }

.doitac-slider:not(.owl-loaded) .doitac-item {
  flex: 1 1 0;
  min-width: 0; }

.doitac-item {
  display: flex;
  align-items: center;
  justify-content: center; }

.doitac-item .doitac-link {
  display: flex;
  align-items: center;
  justify-content: center; }

.doitac-item img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.3s ease; }

.doitac-item:hover img {
  opacity: 1; }

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 1199px) {
  .linhvuc-section__grid,
  .baiviet-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px; }

  .duan-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gioithieu-section {
    padding-bottom: 0;
    min-height: 0; }

  .gioithieu-section__content {
    max-width: none;
    margin-bottom: 48px; }

  .gioithieu-section__image {
    position: relative;
    left: auto;
    right: auto;
    width: auto;
    aspect-ratio: 16 / 9;
    margin: 0 -15px; }

  .gioithieu-section__image img {
    clip-path: none; }

  .gioithieu-section__image::before,
  .gioithieu-section__image::after {
    display: none; }

  .hero-section__title {
    font-size: 48px; }
}

@media screen and (max-width: 991px) {
  .baiviet-section__header {
    flex-direction: column;
    align-items: flex-start; }

  .baiviet-section__tabs {
    flex-wrap: wrap;
    gap: 20px; }

  .nangluc-section__tabs {
    flex-wrap: wrap; }

  .nangluc-tab {
    padding: 16px; }
}

@media screen and (max-width: 767px) {
  .hero-section {
    min-height: 480px; }

  .hero-section__content {
    padding-top: 64px;
    padding-bottom: 64px; }

  .hero-section__label {
    font-size: 16px;
    line-height: 24px; }

  .hero-section__title {
    font-size: 30px;
    line-height: 1.25; }

  /* the section headings are 32px, which overflows a 390px screen */
  .section-heading,
  .duan-archive__header .section-heading {
    font-size: 24px;
    line-height: 1.3; }

  .duan-single__title {
    font-size: 26px;
    line-height: 1.3; }

  /* a wrapped label would leave the triangle stranded on the first line */
  .section-label {
    align-items: flex-start; }

  .section-label__dot {
    margin-top: 5px; }

  .hero-section__desc {
    font-size: 18px;
    line-height: 28px; }

  .hero-section__overlay {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.8) 70%,
      rgba(255, 255, 255, 0.6) 100%); }

  .linhvuc-section,
  .duan-section,
  .nangluc-section,
  .baiviet-section {
    padding-top: 56px;
    padding-bottom: 56px; }

  .gioithieu-section {
    padding-top: 56px; }

  .linhvuc-section__grid,
  .duan-section__grid,
  .baiviet-section__grid {
    grid-template-columns: 1fr; }

  .section-heading {
    font-size: 26px; }

  .duan-card {
    height: 380px; }

  .duan-card__overlay {
    opacity: 1;
    transform: none; }

  .linhvuc-section::before,
  .hero-section::after {
    display: none; }

  .doitac-section__strip {
    padding: 24px 20px; }

  .doitac-item img {
    max-height: 48px; }
}

/* =========================================================
   Dự án — archive & single (du_an custom post type)
   ========================================================= */
.duan-archive {
  padding: 64px 0 96px;
  background: var(--color-bg-light); }

.duan-single {
  padding: 0 0 96px;
  background: var(--color-bg-light); }

/* Breadcrumbs — same .section-breadcrumbs markup every template renders.
   style.css styles it for the inherited theme: grey band, #28377a links, a "/"
   separator at 1rem. Restated here in the design's language. */
.section-breadcrumbs {
  background: #F4FAFE; }

.section-breadcrumbs ul {
  padding: 18px 0; }

.section-breadcrumbs ul li {
  margin-right: 8px;
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  line-height: 20px; }

.section-breadcrumbs ul li a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s ease; }

.section-breadcrumbs ul li a:hover {
  color: var(--color-primary-blue);
  text-decoration: none; }

/* the page you are on */
.section-breadcrumbs ul li > span {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold); }

.section-breadcrumbs ul li:after {
  margin-left: 8px;
  content: '\203A';
  color: rgba(1, 32, 96, 0.35); }

.single-du_an .section-breadcrumbs {
  padding-bottom: 60px; }

.duan-single__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 15px; }

/* The listing runs the full page width like the reference, not the 1200px
   container the rest of the site uses. */
.duan-archive__container {
  position: relative;
  width: 100%;
  padding: 0 30px; }

.duan-archive__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: 40px; }

.duan-archive__header .section-heading {
  color: var(--color-primary-dark); }

/* Filter bar — the reference's #portfolio-flters: centred pills, white by
   default, blue when active. */
.duan-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none; }

.duan-filters__item {
  margin: 0; }

.duan-filters__item a {
  display: block;
  padding: 10px 15px;
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-primary-dark);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease; }

.duan-filters__item a:hover,
.duan-filters__item.is-active a {
  background: var(--color-primary-blue);
  color: var(--color-white); }

.duan-archive__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px; }

.duan-archive__empty {
  text-align: center;
  color: var(--color-text-light); }

.duan-archive__pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center; }

/* Pagination reuses finitial_pagination()'s .pagination-wrap markup — the same
   one the news pages render, so prev/next are ion arrows rather than text.
   Restyled from the theme's old navy squares to the design's pills. */
.pagination {
  margin: 0; }

.pagination ul {
  gap: 10px;
  padding: 0; }

.pagination li {
  margin-right: 0; }

.pagination li > span,
.pagination li > a {
  width: 44px;
  height: 44px;
  line-height: 42px;
  border: 1px solid rgba(1, 32, 96, 0.15);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-primary-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

.pagination li > a:hover,
.pagination li > span {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: var(--color-white); }

.pagination li .dots {
  background: none;
  border-color: transparent;
  color: var(--color-text-light); }

/* Archive cards follow the reference: no hover-reveal, a permanent blue
   gradient over the bottom half and a centred uppercase title that lifts as
   the photo zooms. */
/* Back to the original card proportion (the 3-column grid was 380x468, so
   roughly 4:5) and rounding — a fixed height would distort now that the grid
   is five across. */
.duan-archive .duan-card {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 16px; }

.duan-archive .duan-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(15, 117, 189, 0.9) 80%);
  pointer-events: none; }

.duan-archive .duan-card__overlay {
  z-index: 1;
  opacity: 1;
  transform: none;
  padding: 0 20px 20px;
  background: none;
  transition: padding-bottom 0.5s ease; }

.duan-archive .duan-card:hover .duan-card__overlay {
  padding-bottom: 32px; }

.duan-archive .duan-card__title {
  font-size: 17px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
  text-align: center; }

.duan-archive .duan-card:hover .duan-card__image img {
  transform: scale(1.2); }

/* --- single --- */
/* Full-bleed slider: .duan-single has no container of its own, so the media
   block already spans the page — 100vw would add the scrollbar width on top. */
.duan-single__media {
  position: relative;
  margin-bottom: 40px; }

.duan-single__slide {
  background: var(--color-primary-dark); }

.duan-single__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  display: block; }

/* owl.carousel ships no arrow styling of its own and this slider is not an
   .owl-theme, so the arrows come out unstyled. Note owl 2.2.1 builds them from
   its navElement default of "div", not <button> — selectors must not name an
   element. Same treatment as the reference: a round blue disc that fades in
   when the slider is hovered. */
.duan-single__slider .owl-nav {
  margin: 0; }

.duan-single__slider .owl-nav .owl-prev,
.duan-single__slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-primary-blue);
  border: 0;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease, background 0.3s ease; }

.duan-single__media:hover .owl-nav .owl-prev,
.duan-single__media:hover .owl-nav .owl-next,
.duan-single__slider .owl-nav .owl-prev:focus-visible,
.duan-single__slider .owl-nav .owl-next:focus-visible {
  opacity: 1;
  visibility: visible; }

.duan-single__slider .owl-nav .owl-prev:hover,
.duan-single__slider .owl-nav .owl-next:hover {
  background: var(--color-primary-dark); }

.duan-single__slider .owl-nav .owl-prev span,
.duan-single__slider .owl-nav .owl-next span {
  display: block;
  margin-top: -6px; }

.duan-single__slider .owl-nav .owl-prev {
  left: 30px; }

.duan-single__slider .owl-nav .owl-next {
  right: 30px; }

/* Reference splits the strip five ways (20% each, 10px apart). flex-fill keeps
   that when a project has a different number of images. */
.duan-single__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 0 15px; }

.duan-single__thumb {
  flex: 1 1 20%;
  min-width: 0;
  padding: 0;
  border: 3px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.3s ease, border-color 0.3s ease; }

.duan-single__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  display: block; }

.duan-single__thumb:hover,
.duan-single__thumb.is-active {
  opacity: 1;
  border-color: var(--color-primary-blue); }

/* Body: copy on the left, project facts in a sticky sidebar on the right.
   Both sit on white cards, the same 16px card the rest of the site uses. */
.duan-single__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 24px;
  align-items: start; }

.duan-single__main {
  padding: 40px;
  background: var(--color-white);
  border-radius: 16px; }

/* categories a project belongs to — a project can sit in more than one */
.duan-single__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px; }

.duan-single__cat {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--color-bg-light);
  color: var(--color-primary-blue);
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease; }

.duan-single__cat:hover {
  background: var(--color-primary-blue);
  color: var(--color-white); }

.duan-single__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 16px; }

.duan-single__summary {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-style: italic;
  line-height: 24px;
  color: var(--color-text-dark);
  margin: 0 0 24px; }

.duan-single__content {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: 24px;
  color: var(--color-text-light); }

.duan-single__content img {
  max-width: 100%;
  height: auto; }

.duan-single__actions {
  margin-top: 32px; }

.duan-single__sidebar {
  position: sticky;
  top: 180px;
  padding: 28px;
  background: var(--color-white);
  border-radius: 16px;
  border-top: 4px solid var(--color-primary); }

.duan-single__sidebar-title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin: 0 0 20px; }

.duan-single__meta {
  margin: 0; }

.duan-single__meta-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(1, 32, 96, 0.1); }

.duan-single__meta-item:first-child {
  padding-top: 0; }

.duan-single__meta-item:last-child {
  padding-bottom: 0;
  border-bottom: 0; }

.duan-single__meta-item dt {
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-primary-blue);
  margin-bottom: 4px; }

.duan-single__meta-item dd {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  color: var(--color-text-dark); }

@media screen and (max-width: 1399px) {
  .duan-archive__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (max-width: 1199px) {
  .duan-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .duan-single__body {
    grid-template-columns: 1fr;
    gap: 24px; }

  .duan-single__main {
    padding: 28px; }

  .duan-single__sidebar {
    position: static; }
}

@media screen and (max-width: 767px) {
  .single-du_an .section-breadcrumbs {
    padding-bottom: 40px; }

  .duan-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; }

  .duan-archive__container {
    padding: 0 15px; }

  /* seven stacked pills ate half the screen; scroll them instead */
  .duan-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 -15px 32px;
    padding: 0 15px 4px;
    overflow-x: auto;
    scrollbar-width: none; }

  .duan-filters::-webkit-scrollbar {
    display: none; }

  .duan-filters__item a {
    white-space: nowrap; }

  /* six thumbs at 20% each came out 55px wide */
  .duan-single__thumbs {
    margin: 10px -15px 0;
    padding: 0 15px;
    overflow-x: auto;
    scrollbar-width: none; }

  .duan-single__thumbs::-webkit-scrollbar {
    display: none; }

  .duan-single__thumb {
    flex: 0 0 116px;
    width: 116px; }

  .duan-single__thumb {
    border-width: 2px; }

  .duan-single__thumbs {
    gap: 6px; }

  .duan-single__slider .owl-nav .owl-prev {
    left: 8px; }

  .duan-single__slider .owl-nav .owl-next {
    right: 8px; }
}

/* Narrow phones: the two-up project grid leaves ~180px cards, too tight for the
   uppercase titles. Declared last so it beats the 767px rule. */
@media screen and (max-width: 479px) {
  .duan-archive__grid {
    grid-template-columns: 1fr; }

  /* a 39-character label wrapped to two lines, stranding the triangle */
  .section-label__text {
    font-size: 12px;
    letter-spacing: 0.04em; }
}


/* Reduced footer clearance when partner section is disabled. */
body.doitac-section-disabled .footer__main { padding: 60px 0; }

@media screen and (max-width: 991px) {
  .linhvuc-section__grid--3,
  .linhvuc-section__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  .linhvuc-section__grid--2,
  .linhvuc-section__grid--3,
  .linhvuc-section__grid--4 { grid-template-columns: 1fr; }
}