/* ===== template-parts/media-doanh-nghiep/section-banner/assets/styles.css ===== */
/* ============================================================== */
/* Section Banner — Media Doanh Nghiep                           */
/* Desktop base: 1600×600px                                       */
/* ============================================================== */

.section-banner {
  position: relative;
  width: 100%;
  height: 37.5rem; /* 600 / 16 */
  overflow: hidden;
}
@media (min-width: 1024px) {
  .section-banner {
    height: calc(100vh - 7rem);
  }
  .section-banner__content {
    padding-bottom: 5rem !important ;
  }
}

/* Background image wrapper */
.section-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section-banner__bg picture,
.section-banner__bg img,
.section-banner__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

/* Gradient overlay */
.section-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 13, 39, 0.07) 0%,
    rgba(4, 18, 50, 0.7) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Bottom content bar */
.section-banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 6.25rem 2.5rem 6.25rem; /* sides: 100/16, bottom: 40/16 */
  z-index: 2;
  box-sizing: border-box;
}

/* Left block: breadcrumb + title stacked */
.section-banner__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Breadcrumbs */
.section-banner__breadcrumbs {
  display: flex;
  align-items: center;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16 / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  margin-bottom: 1.5rem; /* gap 24 / 16 — between breadcrumb and title */
}

.section-banner__breadcrumbs-home {
  color: #b8b8b8;
  white-space: nowrap;
  flex-shrink: 0;
}

.section-banner__breadcrumbs-current {
  color: #ffffff;
  white-space: pre;
  flex-shrink: 0;
  margin-left: 0.625rem; /* gap 10 / 16 — between home and separator+current */
}

/* H1 title */
.section-banner__title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 3.0625rem; /* 49 / 16 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.09188rem; /* -1.47px / 16 */
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
  margin-top: 1.5rem;
}

/* Right block: description */
.section-banner__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16 / 16 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px / 16 */
  color: rgba(255, 255, 255, 0.8);
  width: 26.75rem; /* 428 / 16 */
  flex-shrink: 0;
}

.section-banner__description p {
  margin: 0;
}

/* ============================================================== */
/* Mobile overrides — only properties that differ from desktop    */
/* max-width: 639.98px                                            */
/* ============================================================== */
@media screen and (max-width: 639.98px) {
  /* Section becomes a flex-column (image top, content below) */
  .section-banner {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Image area: top, fixed height 160px */
  .section-banner__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 10rem; /* 160 / 16 */
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Mobile image: slight zoom/offset crop from Figma (left: -14.88%, w: 115.89%) */
  .section-banner__bg picture,
  .section-banner__bg img,
  .section-banner__bg-img {
    inset: auto; /* reset desktop inset:0 first */
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: -14.88%;
    width: 115.89%;
    height: 100%;
    object-fit: fill;
    object-position: center top;
  }

  /* Hide gradient overlay on mobile */
  .section-banner__overlay {
    display: none;
  }

  /* Content area: white bg, flex-column, stacked below image */
  .section-banner__content {
    position: relative;
    bottom: auto;
    left: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.875rem 1rem 2.5rem 1rem; /* top:14/16, sides:16/16, bottom:40/16 */
    background-color: #ffffff;
    z-index: auto;
  }

  /* Left block: full width, add bottom margin = gap between title and description (10px) */
  .section-banner__left {
    width: 100%;
    margin-bottom: 0.625rem; /* 10 / 16 */
  }

  /* Breadcrumbs mobile */
  .section-banner__breadcrumbs {
    font-size: 0.875rem; /* 14 / 16 */
    letter-spacing: 0;
    margin-bottom: 1.25rem; /* 20 / 16 — gap between breadcrumb and title on mobile */
  }

  .section-banner__breadcrumbs-home {
    color: rgba(19, 19, 19, 0.6);
  }

  .section-banner__breadcrumbs-current {
    color: #131313;
  }

  /* H1 title on mobile */
  .section-banner__title {
    font-size: 1.5rem; /* 24 / 16 */
    letter-spacing: -0.03rem; /* -0.48px / 16 */
    color: #131313;
    white-space: normal;
    margin-top: 1.25rem;
  }

  /* Description on mobile: full width, light weight, black, justified */
  .section-banner__description {
    width: 100%;
    font-size: 0.875rem; /* 14 / 16 */
    font-weight: 300;
    letter-spacing: -0.0175rem; /* -0.28px / 16 */
    color: #131313;
    text-align: justify;
  }
}


/* ===== template-parts/components/filter-dropdown/assets/styles.css ===== */
/* =============================================================
   Component: filter-dropdown
   Figma: nodes 2348:26344 (Location open) / 2348:26350 (Company open)
   Scoped: .filter-dropdown__*
   Divisor: 1rem = 16px (desktop 1600px fluid vw system)
   ============================================================= */

/* ── Wrapper ── */
.filter-dropdown {
    position: relative;
    width: 18.75rem; /* 300px / 16 */
}

/* ── Closed trigger control ── */
/* Spec: white bg, radius 0.5rem, border 1px #E7E7E7, padding 0.75rem 1rem,
   box-shadow 0 0.125rem 0.25rem rgba(0,0,0,0.04) */
.filter-dropdown__control {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 3.06rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: left;
}

.filter-dropdown__control:focus-visible {
    outline: 2px solid #131313;
    outline-offset: 2px;
}

/* Label prefix (e.g. "Địa điểm:") */
/* Typography from Figma TEXT node I2348:26345;2348:36436 */
.filter-dropdown__label {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;   /* 14px / 16 */
    font-weight: 300;
    line-height: 1.05rem;  /* 16.8px / 16 — from Figma */
    letter-spacing: -0.0088rem; /* -0.1408px / 16 — from Figma */
    color: #131313;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Selected value text */
.filter-dropdown__value {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.05rem;
    letter-spacing: -0.0088rem;
    color: #131313;    font-weight: 500;
    flex: 1;
    margin-left: 0.25rem; /* small gap after label colon */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron icon — 19×19 SVG (1.1875rem) */
.filter-dropdown__chevron {
    width: 1.1875rem;  /* 19px / 16 */
    height: 1.1875rem;
    flex-shrink: 0;
    margin-left: 0.625rem; /* 10px / 16 — matches option item child_margin_rem */
    transition: transform 0.2s ease-out;
}

/* Rotate chevron 180° when panel is open */
.filter-dropdown.is-open .filter-dropdown__chevron {
    transform: rotate(180deg);
}

/* ── Open panel (popover) ── */
/* Spec from Figma node 2348:26344:
   fills #fff, border-radius 0.5rem, box-shadow 0 0.25rem 0.75rem rgba(0,0,0,0.1)
   width 18.75rem */
.filter-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem; /* small gap below control */
    width: 18.75rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    z-index: 100;
    list-style: none;
    padding: 0;
    overflow: hidden;
    /* Hidden by default; shown via .is-open */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    /* Delay visibility collapse until opacity finishes */
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out,
        visibility 0s linear 0.2s;
}

/* Panel open state */
.filter-dropdown.is-open .filter-dropdown__panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

/* ── Option list items ── */
.filter-dropdown__option {
    list-style: none;
}

/* Divider between options (not after last) */
/* Figma LINE node 2348:26346: stroke #e7e7e7 width 0.6px */
.filter-dropdown__option:not(:last-child) {
    border-bottom: 0.6px solid #e7e7e7;
}

/* Active / selected option — Figma Variant2: rgba(174,174,174,0.2) */
.filter-dropdown__option.is-active {
    background-color: rgba(174, 174, 174, 0.2);
}

/* Hover state (matches selected bg) */
.filter-dropdown__option:hover {
    background-color: rgba(174, 174, 174, 0.2);
}

/* ── Option button ── */
/* Figma: padding 1rem 0.875rem, min-height 3.0625rem (49px / 16)
   Typography: Lexend Deca 0.875rem w400, line-height 1.05rem, ls -0.0088rem, color #131313 */
.filter-dropdown__option-btn {
    display: block;
    width: 100%;
    padding: 1rem 0.875rem; /* 16px top/bottom, 14px left/right */
    min-height: 3.0625rem;  /* 49px / 16 */
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.05rem;
    letter-spacing: -0.0088rem;
    color: #131313;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.filter-dropdown__option.is-active .filter-dropdown__option-btn,
.filter-dropdown__option-btn.is-active {
    color: var(--tt-orange-accent, #fa6900);
    font-weight: 500;
}

.filter-dropdown__option-btn:focus-visible {
    outline: 2px solid #131313;
    outline-offset: -2px;
}

/* ── Multi-select: ô checkbox đứng trước nhãn ── */
.filter-dropdown--multiple .filter-dropdown__option-btn {
    display: flex;
    align-items: center;
}

.filter-dropdown--multiple .filter-dropdown__option-btn::before {
    content: "";
    width: 1.125rem;  /* 18px / 16 */
    height: 1.125rem;
    margin-right: 0.625rem; /* 10px / 16 */
    flex-shrink: 0;
    border: 1px solid #c7c7c7;
    border-radius: 0.25rem;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem 0.75rem;
}

/* Checked: nền cam + dấu tick trắng */
.filter-dropdown--multiple .filter-dropdown__option-btn.is-active::before {
    border-color: var(--tt-orange-accent, #fa6900);
    background-color: var(--tt-orange-accent, #fa6900);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3l2.2 2.2 4.8-5'/%3E%3C/svg%3E");
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .filter-dropdown__chevron {
        transition: none;
    }

    .filter-dropdown__panel {
        /* Skip opacity/translate animation; only toggle visibility */
        transition: visibility 0s;
        transform: none;
        opacity: 1;
    }

    .filter-dropdown.is-open .filter-dropdown__panel {
        transition: none;
    }
}


/* ===== template-parts/media-doanh-nghiep/section-video-media/assets/styles.css ===== */
/* =============================================================
   Section: Video Media
   Desktop-first | rem = figma_px / 16 | breakpoint 639.98px
   ============================================================= */

/* ── Section wrapper ────────────────────────────────────────── */
.section-video-media {
  background-color: #f8f8f8;
  width: 100%;
  /* offset cho header cố định khi scroll tới (chuyển trang) — cách top 1 khoảng */
  scroll-margin-top: 8rem; /* ~128px: header 113px + gap */
}

.section-video-media__container {
  padding-top: 6.25rem; /* 100px */
  padding-bottom: 6.25rem; /* 100px */
  padding-left: 5.875rem; /* 94px */
  padding-right: 5.875rem; /* 94px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Header row ─────────────────────────────────────────────── */
.section-video-media__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2.5rem; /* 40px */
}

.section-video-media__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem; /* 40px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -0.8px / 16 */
  color: #131313;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

/* Mobile filter button — hidden on desktop */
.section-video-media__filter-btn {
  display: none;
}

/* ── Desktop filter dropdowns ───────────────────────────────── */
.section-video-media__filters {
  display: flex;
  align-items: center;
}

.section-video-media__filters .filter-dropdown + .filter-dropdown {
  margin-left: 1rem; /* 16px */
}

/* ── Card grid ──────────────────────────────────────────────── */
.section-video-media__grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* margin-bottom: 2.5rem; */
}

/* 3-column layout: rows via margin-bottom, columns via margin-left */
.section-video-media__grid .video-card {
  width: calc((100% - 4rem) / 3); /* (100% - 2*gap) / 3; gap=2rem */
  margin-bottom: 2.5rem; /* 32px row gap */
}

.section-video-media__grid .video-card + .video-card {
  margin-left: 0;
}

/* 1st, 4th, 7th … (every 3rd starting from 1) has no left margin */
.section-video-media__grid .video-card:nth-child(3n + 2),
.section-video-media__grid .video-card:nth-child(3n + 3) {
  margin-left: 2rem; /* 32px horizontal gap */
}

.section-video-media__empty {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem;
  color: rgba(19, 19, 19, 0.4);
  padding: 2rem 0;
}

/* ── Video Card ─────────────────────────────────────────────── */
.video-card {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.05);
}

/* Poster */
.video-card__media {
  position: relative;
  width: 100%;
  height: 13.8125rem;
  overflow: hidden;
  flex-shrink: 0;
}

.video-card__poster,
.video-card__poster-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__poster-placeholder {
  background-color: #d0d0d0;
}

.video-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Play button — circle with rgba(0,0,0,0.20) bg + small white triangle inside */
.video-card__play-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem; /* 48px circle */
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(0.3125rem);
  backdrop-filter: blur(0.3125rem);
  transition: transform 400ms cubic-bezier(0.47, 0, 0.01, 1.01),
    background-color 300ms ease;
}

@media (min-width: 1024px) {
  .video-card__play-link:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(0, 0, 0, 0.35);
  }
}

.video-card__play-link:focus-visible {
  outline: 0.125rem solid #fa6900;
  outline-offset: 0.125rem;
}

.video-card__play-icon {
  width: 0.9375rem; /* ~15px triangle */
  height: auto;
  display: block;
  margin-left: 0.125rem; /* optical centering of triangle */
}

/* Orange bookmark triangle — top-right corner */
.video-card__bookmark {
  position: absolute;
  top: -2.1875rem; /* -35px */
  right: -2.5625rem; /* -41px */
  width: 5.1875rem; /* 83px */
  height: 3.625rem; /* 58px */
  transform: rotate(-90deg) scaleY(-1);
  pointer-events: none;
  display: block;
}

/* Card body */
.video-card__body {
  display: flex;
  flex-direction: column;
  padding: 1rem; /* 16px all sides */
  flex: 1;
}

/* Meta row */
.video-card__meta {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem; /* 8px */
  height: 1.5rem; /* 24px */
}

.video-card__meta-item {
  display: flex;
  align-items: center;
}

/* Separation is provided by the __meta-sep element on each side */

.video-card__meta-icon {
  width: 1.125rem; /* 18px */
  height: 1.125rem;
  flex-shrink: 0;
  margin-right: 0.25rem; /* 4px */
  display: block;
}

.video-card__date,
.video-card__duration {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.013125rem; /* -0.21px */
  color: #131313;
  white-space: nowrap;
}

/* Vertical separator between date & duration */
.video-card__meta-sep {
  display: inline-block;
  width: 0.0375rem;
  height: 1rem; /* 16px */
  background: #e7e7e7;
  margin-inline: 0.875rem;
  flex-shrink: 0;
}
/* Content */
.video-card__content {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem; /* 16px */
}

.video-card__title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01rem; /* -0.16px */
  color: #131313;
  margin: 0 0 0.375rem; /* 6px gap between title and excerpt */
}

.video-card__excerpt {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  min-height: 3rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02rem; /* -0.32px */
  color: #131313;
  margin: 0;
}

/* Tags */
.video-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: auto;
}

.video-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem; /* 8px 16px */
  background-color: #feede1;
  border-radius: 0.25rem; /* 4px */
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.00875rem; /* -0.14px */
  color: #fa6900;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

.video-card__tag:focus-visible {
  outline: 2px solid #fa6900;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .video-card__tag:hover {
    background-color: #fddcc8;
  }
}

/* ── Skeleton loading (giữ layout khi AJAX, không xê dịch) ───────
   Skeleton card tái dùng .video-card / .video-card__media / .video-card__body
   nên kích thước & vị trí grid giống hệt card thật. */
.video-card--skeleton {
  pointer-events: none;
}

.video-card--skeleton .video-card__media {
  background-color: #ececec;
}

/* Các dòng giả lập text trong body */
.video-card--skeleton .vc-skeleton {
  border-radius: 0.25rem;
  background-color: #ececec;
}

.video-card--skeleton .vc-skeleton--meta {
  width: 40%;
  height: 1.125rem; /* ~18px hàng ngày/thời lượng */
  margin-bottom: 0.5rem;
}

.video-card--skeleton .vc-skeleton--title {
  width: 90%;
  height: 1.25rem;
  margin-bottom: 0.5rem;
}

.video-card--skeleton .vc-skeleton--text {
  width: 100%;
  height: 1rem;
  margin-bottom: 1rem;
}

.video-card--skeleton .vc-skeleton--tags {
  width: 55%;
  height: 1.75rem; /* cao bằng pill tag */
}

/* Shimmer chạy ngang */
.video-card--skeleton .video-card__media,
.video-card--skeleton .vc-skeleton {
  position: relative;
  overflow: hidden;
}

.video-card--skeleton .video-card__media::after,
.video-card--skeleton .vc-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: vc-shimmer 1.25s ease-in-out infinite;
}

@keyframes vc-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-card--skeleton .video-card__media::after,
  .video-card--skeleton .vc-skeleton::after {
    animation: none;
  }
}

/* ── Pagination ─────────────────────────────────────────────────
   Figma 2348:33203 — mỗi item là ô vuông 49×49px, gap 12.25px.
   Active: nền #FA6900 chữ trắng. Inactive: nền trắng chữ #131313/40%.
   Arrows + ellipsis cũng là ô 49×49. */
.section-video-media__pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 1.25rem; /* 20px */
}

.section-video-media__page-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-video-media__page-item {
  display: flex;
}

.section-video-media__page-item + .section-video-media__page-item {
  margin-left: 0.765625rem; /* 12.25px */
}

/* Mỗi thẻ <a>/<span> WP sinh ra đều có class .page-numbers */
.section-video-media__page-list .page-numbers {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.0625rem; /* 49px */
  height: 3.0625rem; /* 49px */
  padding: 0;
  background-color: #ffffff;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02rem; /* -0.32px */
  color: rgba(19, 19, 19, 0.4);
  text-decoration: none;
  transition: background-color 250ms ease, color 250ms ease;
}

/* Trang đang xem */
.section-video-media__page-list .page-numbers.current {
  background-color: #fa6900;
  color: #ffffff;
}

/* Hover số trang */
.section-video-media__page-item:hover > .page-numbers:not(.dots) {
  background-color: #fa6900;
  color: #ffffff;
}

.section-video-media__page-list a.page-numbers:focus-visible {
  outline: 0.125rem solid #fa6900;
  outline-offset: 0.125rem;
}

/* Dấu "…" */
.section-video-media__page-list .page-numbers.dots {
  background: transparent;
  letter-spacing: 0.1914rem; /* 3.0625px */
  color: rgba(19, 19, 19, 0.4);
}

/* Prev / Next — icon chevron trong ô trắng 49×49 (dùng chung 1 file) */
.section-video-media__page-list .page-numbers.prev img,
.section-video-media__page-list .page-numbers.next img {
  width: 1.1484rem; /* 18.375px */
  height: 1.1484rem;
  display: block;
  transition: filter 250ms ease;
}

.section-video-media__page-item:hover > .page-numbers.prev img,
.section-video-media__page-item:hover > .page-numbers.next img {
  filter: brightness(0) invert(1);
}

/* Prev: lật ngang chevron → mũi tên chỉ sang TRÁI */
.section-video-media__page-list .page-numbers.prev img {
  transform: scaleX(-1);
}

/* ── Filter Modal ───────────────────────────────────────────── */
.filter-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.filter-modal[hidden] {
  display: none;
}

.filter-modal.is-open {
  display: flex;
}

.filter-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.filter-modal__panel {
  max-height: 35rem;
  position: relative;
  width: 100%;
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0.47, 0, 0.01, 1.01);
  z-index: 1;
}

.filter-modal.is-open .filter-modal__panel {
  transform: translateY(0);
}

/* Dark header */
.filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem; /* 0 16px */
  height: 3.25rem; /* 52px — enough for 16px text + breathing room */
}

.filter-modal__title {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: #ffffff;
  text-transform: uppercase;
}

.filter-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  padding: 0;
  touch-action: manipulation;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(245deg) brightness(108%) contrast(107%);
}

.filter-modal__close:focus-visible {
  outline: 0;
}

.filter-modal__close img {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* White body */
.filter-modal__body {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem; /* 20px */
  padding-bottom: 1.25rem;
}

.filter-modal__group {
  padding-left: 1rem; /* 16px */
  padding-right: 1rem;
  margin-bottom: 0.75rem; /* 12px */
}

.filter-modal__group-label {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.0175rem; /* -0.28px */
  color: #131313;
  margin: 0 0 0.625rem; /* 10px */
  white-space: nowrap;
}

.filter-modal__radio-list {
  display: flex;
  flex-direction: column;
  max-height: 10rem;
  overflow: auto;
}

.filter-modal__radio-item + .filter-modal__radio-item {
  margin-top: 0.375rem; /* 6px */
}

.filter-modal__radio-item {
  display: flex;
  align-items: center;
  padding: 0.75rem; /* 12px */
  border-radius: 0.25rem; /* 4px */
  cursor: pointer;
  transition: background-color 200ms ease;
}

.filter-modal__radio-item.is-active {
  background-color: rgba(174, 174, 174, 0.2);
}

/* Hide native radio input visually */
.filter-modal__radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom radio indicator */
.filter-modal__radio-indicator {
  display: inline-block;
  width: 1.25rem; /* 16px */
  height: 1.25rem;
  border: 1.4px solid #b8b8b8;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.625rem; /* 10px */
  position: relative;
  transition: all ease 0.3s;
}
.filter-modal__radio-indicator::before {
  content: "";
  position: absolute;
  inset: 0.125rem;
  border-radius: 50%;
  background: #fa6900;
  opacity: 0;
  transition: all ease 0.3s;
}
.filter-modal__radio-item.is-active .filter-modal__radio-indicator::before {
  opacity: 1;
}
.filter-modal__radio-item.is-active .filter-modal__radio-indicator {
  border-color: #fa6900;
}

/* Chủ đề = checkbox vuông cam (multi-select), to hơn radio; tick trắng khi chọn */
.filter-modal__radio-item:has(input[type="checkbox"]) .filter-modal__radio-indicator {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.25rem;
}
.filter-modal__radio-item:has(input[type="checkbox"]).is-active .filter-modal__radio-indicator {
  border-color: #fa6900;
  background-color: #fa6900;
}
.filter-modal__radio-item:has(input[type="checkbox"]) .filter-modal__radio-indicator::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 0.4375rem;
  height: 0.75rem;
  border: solid #fff;
  border-width: 0 0.125rem 0.125rem 0;
  border-radius: 0;
  background: none;
  transform: translate(-50%, -55%) rotate(45deg);
}

.filter-modal__radio-indicator--active {
  border: none;
  width: 1rem;
  height: 1rem;
  margin-right: 0.625rem;
}

.filter-modal__radio-indicator--active.filter-modal__radio-indicator--active {
  /* This is an <img>, dimensions are set via attr */
  display: block;
}

.filter-modal__radio-text {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01125rem; /* -0.18px */
  color: #131313;
  white-space: nowrap;
}

/* Divider */
.filter-modal__divider {
  border: none;
  border-top: 1px solid #e7e7e7;
  margin: 0 0 0.75rem; /* 12px bottom */
  width: 100%;
}

/* Apply button */
.filter-modal__footer {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem; /* 8px */
}

.filter-modal__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  background-color: #fa6900;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.00875rem; /* -0.14px */
  color: #ffffff;
  text-transform: uppercase;
  transition: background-color 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

.filter-modal__apply span {
  margin-right: 0.5rem; /* 8px */
}

.filter-modal__apply img {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
}

.filter-modal__apply:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}

@media (min-width: 1024px) {
  .filter-modal__apply:hover {
    background-color: #e05e00;
  }
}

/* ================================================================
   MOBILE OVERRIDES — max-width: 639.98px
   Only properties that differ from desktop
   ================================================================ */
@media screen and (max-width: 639.98px) {
  /* Header cố định mobile nhỏ hơn → offset scroll nhỏ hơn */
  .section-video-media__page-list .page-numbers {
    width: 2.5rem;
    height: 2.5rem;
  }
  .section-video-media {
    scroll-margin-top: 4.5rem; /* ~72px: mobile header 60px + gap */
  }

  /* Play button mobile — circle 48px giữ nguyên, tam giác giữ nhỏ */
  .video-card__play-link {
    width: 3rem; /* 48px */
    height: 3rem;
  }

  .video-card__meta {
    height: initial;
  }

  /* Section container */
  .section-video-media__container {
    padding-top: 2.5rem; /* 40px */
    padding-bottom: 2.5rem;
    padding-left: 1rem; /* 16px */
    padding-right: 1rem;
  }

  /* Header */
  .section-video-media__header {
    align-items: center;
    margin-bottom: 1rem; /* 16px */
  }

  .section-video-media__heading {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    letter-spacing: -0.0375rem; /* -0.6px */
  }

  /* Hide desktop filters, show mobile filter button */
  .section-video-media__filters {
    display: none;
  }

  .section-video-media__filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* 40px */
    height: 2.5rem;
    background-color: #ffffff;
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    flex-shrink: 0;
  }

  .section-video-media__filter-btn:focus-visible {
    outline: 2px solid #fa6900;
    outline-offset: 2px;
  }

  .section-video-media__filter-btn img {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Card grid — single column */
  .section-video-media__grid {
    flex-direction: column;
    margin-bottom: 0;
  }

  .section-video-media__grid .video-card {
    width: 100%;
    margin-bottom: 0;
    margin-left: 0 !important;
    min-height: 23.1875rem;
  }

  .section-video-media__grid .video-card + .video-card {
    margin-top: 1rem; /* 16px */
  }

  /* Card poster — mobile height */
  .video-card__media {
    height: 11.5rem;
  }

  /* Card body */
  .video-card__body {
    padding: 0.875rem; /* 14px */
  }

  /* Meta */
  .video-card__meta-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* Title + excerpt — smaller on mobile */
  .video-card__title {
    font-size: 0.875rem; /* 14px */
    letter-spacing: -0.00875rem; /* -0.14px */
  }

  .video-card__excerpt {
    font-size: 0.875rem; /* 14px */
    letter-spacing: -0.0175rem; /* -0.28px */
    min-height: 2.625rem;
  }

  /* Tags — smaller on mobile */
  .video-card__tag {
    font-size: 0.75rem; /* 12px */
    line-height: 1.5;
    letter-spacing: -0.01125rem; /* -0.18px */
    padding: 0.375rem 0.75rem; /* 6px 12px */
  }

  /* Bookmark — hide on mobile */
  .video-card__bookmark {
    display: none;
  }

  /* Pagination vẫn hiện trên mobile (21 video → 3 trang, cần điều hướng) */
  .section-video-media__pagination {
    padding-top: 1.5rem;
    /* display: none; */
  }
}


/* ===== template-parts/media-doanh-nghiep/section-newsletter/assets/styles.css ===== */
/* ============================================================== */
/* Section Newsletter — Media Doanh Nghiep                        */
/* Desktop base (1600px, 1rem = 16px)                             */
/* ============================================================== */

.mdn-newsletter {
  background-color: #ffffff;
  width: 100%;
  position: relative;
}

.mdn-newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7.5rem 6.25rem;
}

/* ---- Left content column ---- */
.mdn-newsletter__content {
  display: flex;
  flex-direction: column;
  width: 38.6875rem;
  max-width: 48rem;
  flex-shrink: 0;
}

/* Heading + description block */
.mdn-newsletter__text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mdn-newsletter__heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
  color: #131313;
  margin: 0;
}

.mdn-newsletter__desc {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: #131313;
  margin: 0;
  margin-top: 1rem;
}

/* Gap between text block and form */
.mdn-newsletter__form-wrap {
  margin-top: 2rem;
}

/* ============================================================== */
/* CF7 Form Overrides — scoped to .mdn-newsletter                 */
/* ============================================================== */

.mdn-newsletter .wpcf7 {
  width: 100%;
}

.mdn-newsletter .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.mdn-newsletter .wpcf7-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Email input */
.mdn-newsletter .wpcf7-form input[type="email"] {
  display: block;
  width: 100%;
  height: 3.25rem;
  background-color: #f8f8f8;
  border: none;
  border-radius: 0.25rem;
  padding: 1.0625rem 0.875rem;
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.0088rem;
  color: #131313;
  box-sizing: border-box;
  outline: none;
  transition: all 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

.mdn-newsletter .wpcf7-form input[type="email"]::placeholder {
  color: rgba(19, 19, 19, 0.4);
}

.mdn-newsletter .wpcf7-form input[type="email"]:focus-visible {
  outline: 2px solid #fa6900;
  outline-offset: 2px;
}

/* Terms/acceptance text paragraph — rendered inside CF7 form */
.mdn-newsletter .wpcf7-form .mdn-newsletter__terms,
.mdn-newsletter .wpcf7-form p.mdn-newsletter__terms {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: #131313;
  margin: 0;
  margin-block: 2rem;
}

/* Submit button wrapper spacing */
.mdn-newsletter .wpcf7-form .mdn-newsletter__btn-wrap {
  margin-top: 2rem;
  position: relative;
}

.mdn-newsletter__submit-icon {
  margin-left: 0.5rem;
}
/* Submit button */
.mdn-newsletter .wpcf7-form input[type="submit"],
.mdn-newsletter .wpcf7-form .wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #fa6900;
  border: none;
  padding: 1rem 4rem;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01rem;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  transition: all 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
  margin-bottom: 2rem;
}

.mdn-newsletter .wpcf7-form input[type="submit"]:focus-visible,
.mdn-newsletter .wpcf7-form .wpcf7-submit:focus-visible {
  outline: 2px solid #131313;
  outline-offset: 2px;
}

.mdn-newsletter .wpcf7-form.is-submitting input[type="submit"],
.mdn-newsletter .wpcf7-form.is-submitting .wpcf7-submit {
  background-color: #ff7b1c;
  cursor: wait;
  opacity: 1;
  pointer-events: none;
  -webkit-text-fill-color: #ffffff;
}

.mdn-newsletter .wpcf7-form.is-submitting .mdn-newsletter__btn-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -4.75rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mdn-newsletter-spin 800ms linear infinite;
  pointer-events: none;
}

.mdn-newsletter .wpcf7-spinner {
  display: none;
}

@keyframes mdn-newsletter-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Arrow icon after submit button text */
/* .mdn-newsletter .wpcf7-form input[type="submit"]::after,
.mdn-newsletter .wpcf7-form .wpcf7-submit::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-image: url("../../../../../../assets/images/media-doanh-nghiep/ic-arrow-right-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
} */

/* Hover state for submit (desktop only) */
@media (min-width: 1024px) {
  .mdn-newsletter .wpcf7-form input[type="submit"]:hover,
  .mdn-newsletter .wpcf7-form .wpcf7-submit:hover {
    background-color: #ff7b1c;
  }
}

/* CF7 response output — reset defaults, reveal by submission state */
.mdn-newsletter .wpcf7-response-output {
  border: none !important;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  color: #e53e3e;
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  display: block;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, color 0.5s ease,
    height 0.5s ease;
}

.mdn-newsletter .wpcf7-form.invalid .wpcf7-response-output,
.mdn-newsletter .wpcf7-form.failed .wpcf7-response-output,
.mdn-newsletter .wpcf7-form.spam .wpcf7-response-output,
.mdn-newsletter .wpcf7-form.aborted .wpcf7-response-output {
  opacity: 1;
  visibility: visible;
}

.mdn-newsletter .wpcf7-response-output.mdn-newsletter__success--visible {
  color: #2db24a;
  opacity: 1;
  visibility: visible;
  height: auto;
}

/* CF7 validation errors */
.mdn-newsletter .wpcf7-not-valid-tip {
  font-family: "Lexend Deca", sans-serif;
  font-size: 0.75rem;
  color: #e53e3e;
  margin-top: 0.25rem;
}

/* Hidden success message (JS-toggled) */
.mdn-newsletter .mdn-newsletter__success {
  font-family: "Lexend Deca", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02rem;
  color: #2db24a;
  margin-top: 1rem;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.47, 0, 0.01, 1.01);
}

.mdn-newsletter .mdn-newsletter__success.mdn-newsletter__success--visible {
  opacity: 1;
}

/* ---- Right image column ---- */
.mdn-newsletter__image-wrap {
  width: 40.5rem;
  height: 26.4375rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.mdn-newsletter__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================== */
/* Mobile overrides — only deltas vs desktop                      */
/* @media screen and (max-width: 639.98px)                        */
/* ============================================================== */

@media screen and (max-width: 639.98px) {
  .mdn-newsletter__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1rem 0;
  }

  .mdn-newsletter .wpcf7-response-output {
    margin: 0 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Left column: full-width stacked */
  .mdn-newsletter__content {
    width: 100%;
    max-width: 100%;
  }

  /* Heading */
  .mdn-newsletter__heading {
    font-size: 1.25rem;
    line-height: 1.6;
    letter-spacing: -0.0375rem;
  }

  /* Description */
  .mdn-newsletter__desc {
    font-size: 0.875rem;
    letter-spacing: -0.0175rem;
    margin-top: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  /* Form wrap gap */
  .mdn-newsletter__form-wrap {
    margin-top: 1.75rem;
  }

  /* Terms text on mobile */
  .mdn-newsletter .wpcf7-form .mdn-newsletter__terms,
  .mdn-newsletter .wpcf7-form p.mdn-newsletter__terms {
    font-size: 0.875rem;
    letter-spacing: -0.0175rem;
    margin-block: 1.375rem;
  }

  /* Button wrap gap on mobile — same 22px gap as Actions group children */
  .mdn-newsletter .wpcf7-form .mdn-newsletter__btn-wrap {
    margin-top: 1.375rem;
  }

  /* Terms → button gap on mobile already 1.375rem via margin-top on btn-wrap */

  /* Submit button on mobile */
  .mdn-newsletter .wpcf7-form input[type="submit"],
  .mdn-newsletter .wpcf7-form .wpcf7-submit {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    letter-spacing: -0.0088rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  .mdn-newsletter .wpcf7-form.is-submitting .mdn-newsletter__btn-wrap::before {
    margin-left: -4.25rem;
  }

  /* Image below form on mobile */
  .mdn-newsletter__image-wrap {
    width: 100%;
    height: 13.99394rem;
    margin-top: 0;
  }

  .mdn-newsletter__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ===== template-parts/media-doanh-nghiep/section-culture/assets/styles.css ===== */
/* =============================================================
   Section Culture — Desktop base (1600px design)
   rem = figma_px / 16, 4 decimal places
   ============================================================= */

.section-culture {
   background-color: #ffffff;
   padding-bottom: 9.375rem; /* 150px */
   overflow: hidden;
}

/* ---- Header ---- */
.section-culture__header {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 0;
   padding-left: 0;
   padding-right: 0;
   /* gap entre h2 e subtitle = 14px → margin */
}

.section-culture__heading {
   font-family: "Lexend Deca", sans-serif;
   font-size: 2.5rem; /* 40px */
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -0.05rem; /* -0.8px / 16 */
   text-transform: uppercase;
   color: #131313;
   text-align: center;
   margin: 0;
}

.section-culture__subtitle {
   font-family: "Lexend Deca", sans-serif;
   font-size: 1rem; /* 16px */
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: -0.02rem; /* -0.32px / 16 */
   color: #131313;
   text-align: center;
   margin-top: 0.875rem; /* 14px */
   margin-bottom: 0;
}

/* ---- Marquee container ---- */
.section-culture__marquee {
   position: relative;
   width: 100%;
   overflow: hidden;
   margin-top: 2.5rem;
   padding-block: 0.44rem;
   display: flex;
   flex-direction: column;
}

/* ---- Individual row ---- */
.section-culture__row {
   width: 100%;
   overflow: hidden;
}

.section-culture__row--2 {
   margin-top: 0.625rem; /* 10px — gap between rows */
}

/* ---- Row inner (animated strip) ---- */
.section-culture__row-inner {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   /* will-change set in JS */
}

/* ---- Image wrappers ---- */
.section-culture__img-wrap {
   position: relative;
   flex-shrink: 0;
   overflow: hidden;
}

/* Row 1 image sizes */
.section-culture__row--1 .section-culture__img-wrap {
   width: 22.3125rem; /* 357px */
   height: 13rem; /* 208px */
}

.section-culture__row--1 .section-culture__img-wrap + .section-culture__img-wrap {
   margin-left: 0.625rem; /* 10px gap */
}

/* Row 2 image sizes */
.section-culture__row--2 .section-culture__img-wrap {
   width: 32.5625rem; /* 521px */
   height: 17.625rem; /* 282px */
}

.section-culture__row--2 .section-culture__img-wrap + .section-culture__img-wrap {
   margin-left: 0.625rem; /* 10px gap */
}

/* ---- Image itself ---- */
.section-culture__img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   max-width: none;
   display: block;
}

/* ---- Dark overlay on each image ---- */
.section-culture__img-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.2);
   pointer-events: none;
}

/* ---- Gradient fade overlays (left / right) ---- */
.section-culture__fade {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 11rem; /* 176px */
   pointer-events: none;
   z-index: 2;
}

.section-culture__fade--left {
   left: 0;
   background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.section-culture__fade--right {
   right: 0;
   background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

/* =============================================================
   Mobile overrides — only deltas vs desktop
   breakpoint: max-width 639.98px  (375px design)
   ============================================================= */
@media screen and (max-width: 639.98px) {
   .section-culture {
      padding-top: 2.5rem; /* 40px */
      padding-bottom: 3.25rem; /* 48px */
   }

   /* Header: left-aligned, padded */
   .section-culture__header {
      align-items: flex-start;
      padding-left: 1rem; /* 16px */
      padding-right: 1rem; /* 16px */
   }

   .section-culture__heading {
      font-size: 1.25rem; /* 20px */
      line-height: 1.6;
      letter-spacing: -0.0375rem; /* -0.6px / 16 */
      text-align: left;
   }

   .section-culture__subtitle {
      font-size: 0.875rem; /* 14px */
      font-weight: 300;
      letter-spacing: -0.0175rem; /* -0.28px / 16 */
      text-align: left;
      margin-top: 0.75rem; /* 12px */
   }

   .section-culture__marquee {
      margin-top: 1.75rem;
      padding: 0;
      padding-top: 0.3rem;
   }

   .section-culture__row--2 {
      margin-top: 0.390625rem; /* 6.25px */
   }

   /* Row 1 mobile image sizes: (1116.25 - 4×6.25) / 5 = 218.25px → 13.640625rem */
   .section-culture__row--1 .section-culture__img-wrap {
      width: 13.640625rem; /* 218.25px */
      height: 8.125rem; /* 130px */
   }

   .section-culture__row--1 .section-culture__img-wrap + .section-culture__img-wrap {
      margin-left: 0.390625rem; /* 6.25px */
   }

   /* Row 2 mobile image sizes: (1302.5 - 3×6.25) / 4 = 320.9375px → 20.0585rem */
   .section-culture__row--2 .section-culture__img-wrap {
      width: 20.0585rem; /* 320.94px */
      height: 11.015625rem; /* 176.25px */
   }

   .section-culture__row--2 .section-culture__img-wrap + .section-culture__img-wrap {
      margin-left: 0.390625rem; /* 6.25px */
   }

   /* Gradient fade narrower on mobile */
   .section-culture__fade {
      width: 2.75rem; /* 44px */
   }
}


/* ===== template-parts/media-doanh-nghiep/assets/styles.css ===== */
/**
 * Media Doanh Nghiep — page-level style aggregator.
 * Imports each section's scoped stylesheet in visual (top-to-bottom) order.
 * NOTE: @import must precede all other rules (CSS spec) — keep these at the top.
 */







/* Page-wide font override (global CSS uses "Averta Std CY"). */
.media-doanh-nghiep {
    font-family: "Lexend Deca", sans-serif;
}