/* BEGIN: BLOCK_WPP_HOME */
/* ============================================================
   WPP HOME - bo giao dien trang chu dung theo mau www.wpp.com/en
   So do lay bang design.py (computed style that) tai 1440 / 768 / 390.
   Viet bang px (khong dung rem) vi theme doi co so rem 10px -> 9px o
   <=1280px, se lam lech them mot bac ti le so voi web mau.
   ============================================================ */

/* ---------- 1. TOKEN + NEN CHUNG ---------- */
.wpp-sec,
.wpp-nav,
.wpp-nav-panel,
.wpp-footer,
.wpp-footer-bottom,
.wpp-modal,
.wpp-abv {
    /* MAU CHU DAO: xanh navy #0a1e78 (user chot 2026-09-07). Cam #ff7425 giu lai lam
       DIEM NHAN (nut CTA, ngay thang, chu highlight) - user chon giu, khong doi sang xanh.
       Dai gradient cau vong ben duoi van la dai mau logo Vietba, co y giu nguyen.
       --wpp-navy giu nguyen TEN bien de khong phai sua ~120 cho dung no. */
    --wpp-navy: #0a1e78;
    --wpp-ink: #061450;
    --wpp-white: #ffffff;
    --wpp-cream: #f3f6fd;
    --wpp-lilac: #b9c8ff;
    --wpp-accent: #ff7425;
    --wpp-accent-ink: #d1500a;
    --wpp-navy-hover: #16309a;
    --wpp-line: rgba(10, 30, 120, 0.16);
    --wpp-line-light: rgba(255, 255, 255, 0.15);
    --wpp-grad: linear-gradient(90deg, #f2c200 0%, #f08000 16%, #e04a10 32%, #d8342a 46%, #a83a5e 62%, #7a3480 78%, #5a53a0 90%, #4aa8d8 100%);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--wpp-navy);
    -webkit-font-smoothing: antialiased;
}

.wpp-sec *,
.wpp-nav *,
.wpp-nav-panel *,
.wpp-footer *,
.wpp-footer-bottom *,
.wpp-modal * {
    box-sizing: border-box;
}

.wpp-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

.wpp-empty {
    padding: 24px 0;
    font-size: 16px;
}

/* ---------- 2. THANG CHU (mobile-first, lg = 1024px) ---------- */
.wpp-d1,
.wpp-d2,
.wpp-d3,
.wpp-h1 {
    font-weight: 300;
    letter-spacing: -0.4px;
    margin: 0;
}

.wpp-d1 { font-size: 32px; line-height: 35.2px; text-transform: uppercase; }
.wpp-d2 { font-size: 32px; line-height: 35.2px; text-transform: uppercase; }
.wpp-d3 { font-size: 24px; line-height: 26.4px; text-transform: uppercase; }
.wpp-h1 { font-size: 32px; line-height: 43.2px; }

.wpp-h3 {
    font-size: 18px;
    line-height: 19.8px;
    font-weight: 300;
    letter-spacing: -0.45px;
    margin: 0;
}

.wpp-b1 { font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; margin: 0; }
.wpp-b2 { font-size: 16px; line-height: 24px;   letter-spacing: -0.32px; margin: 0; }
.wpp-b3 { font-size: 14px; line-height: 18.9px; letter-spacing: -0.28px; margin: 0; }

.wpp-label {
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 1024px) {
    .wpp-d1 { font-size: 52px; line-height: 52px; }
    .wpp-d2 { font-size: 40px; line-height: 40px; }
    .wpp-d3 { font-size: 32px; line-height: 32px; }
    .wpp-h1 { font-size: 40px; line-height: 44px; }
    .wpp-b1 { font-size: 18px; line-height: 23.4px; letter-spacing: -0.36px; }
    .wpp-b2 { font-size: 16px; line-height: 20.8px; }
    .wpp-b3 { font-size: 14px; line-height: 18.2px; }
}

/* ---------- 3. NUT ---------- */
.wpp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-ic { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; }
.wpp-btn .wpp-ic { width: 16px; height: 16px; }
.wpp-btn:hover { text-decoration: none; }

.wpp-btn--navy {background: var(--wpp-accent);color: var(--wpp-white);}
.wpp-btn--navy:hover { background: var(--wpp-navy-hover); color: var(--wpp-white); }

.wpp-btn--light { background: var(--wpp-white); color: var(--wpp-navy); }
.wpp-btn--light:hover { background: var(--wpp-cream); color: var(--wpp-navy); }

/* ---------- 4. HERO ---------- */
.wpp-sec--hero {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 0 64px;
    background: var(--wpp-white);
}

.wpp-hero-head {
    max-width: 924px;
    margin: 0 auto;
    padding-top: 24px;
    text-align: center;
}

.wpp-hero-desc { margin-top: 16px; }

.wpp-hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #e8edfa;
}

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

.wpp-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpp-media-toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--wpp-white);
    border-radius: 9999px;
    background: transparent;
    color: var(--wpp-white);
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-media-toggle:hover { background: var(--wpp-white); color: var(--wpp-navy); }
.wpp-media-toggle .wpp-ic { width: 20px; height: 20px; }
.wpp-media-toggle .wpp-ic-play { display: none; }
.wpp-media-toggle.is-paused .wpp-ic-play { display: inline-block; }
.wpp-media-toggle.is-paused .wpp-ic-pause { display: none; }

@media (min-width: 1024px) {
    .wpp-sec--hero { gap: 48px; padding-bottom: 70px; }
    .wpp-hero-head { padding-top: 70px; }
    .wpp-hero-media { aspect-ratio: 16 / 9; }
    .wpp-media-toggle { right: 32px; bottom: 32px; }
}

/* ---------- 5. LUOI DU AN (slider view_wpp_work) ---------- */
.wpp-sec--work {
    padding: 0 0 80px;
    background: var(--wpp-white);
}

.wpp-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 24px;
}

.wpp-work-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.wpp-work-card:first-child { grid-column: span 4; }

.wpp-work-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    overflow: hidden;
    background: #e8edfa;
}

.wpp-work-card:first-child .wpp-work-media { aspect-ratio: 3 / 2; }

.wpp-work-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wpp-work-card:hover .wpp-work-img { transform: scale(1.02); }

.wpp-work-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.wpp-work-title { margin: 0; font-weight: 400; }
.wpp-work-title a { color: var(--wpp-navy); text-decoration: none; }
.wpp-work-title a:hover { color: var(--wpp-navy); text-decoration: underline; }
.wpp-work-meta { color: var(--wpp-accent-ink); opacity: 1; }

.wpp-sec-cta { margin-top: 40px; text-align: center;}

@media (min-width: 768px) {
    .wpp-work-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        row-gap: 48px;
    }
    .wpp-work-card { grid-column: span 3; }
    .wpp-work-card:first-child { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .wpp-sec--work { padding-bottom: 112px; }
}

/* ---------- 6. KHOI CHIA DOI (tuyen dung) ---------- */
.wpp-sec--split { background: var(--wpp-navy); }

.wpp-split {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: clip;
}

.wpp-split-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--wpp-ink);
}

.wpp-split-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpp-split-body {
    display: flex;
    align-items: center;
    background: var(--wpp-navy);
    padding: 32px 24px;
}

.wpp-split-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 576px;
}

.wpp-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    color: var(--wpp-white);
}

.wpp-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--wpp-accent);
}

.wpp-split-title { color: var(--wpp-white); }

.wpp-split-desc {
    color: var(--wpp-white);
    max-width: 512px;
    margin-top: 16px;
}

.wpp-split-inner .wpp-btn { align-self: flex-start; margin-top: 16px; }

@media (min-width: 1024px) {
    .wpp-split {
        flex-direction: row;
        aspect-ratio: 3 / 1;
        min-height: 530px;
    }
    .wpp-split-media { order: 2; width: 50%; aspect-ratio: auto; }
    .wpp-split-body {
        width: 50%;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 40px;
        padding-left: max(24px, calc((100vw - 1440px) / 2 + 24px));
    }
}

/* ---------- 7. CAROUSEL BAI VIET (insights / news) ---------- */
.wpp-sec--carousel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 80px 0;
    overflow-x: clip;
    background: var(--wpp-white);
}

.wpp-sec-head {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
}

.wpp-sec-title { grid-column: span 4; }
.wpp-sec-desc  { grid-column: span 4; margin-top: 24px; }

.wpp-carousel {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/*.wpp-carousel .swiper { overflow: visible; }*/

.wpp-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.wpp-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background: #e8edfa;
}

.wpp-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wpp-card:hover .wpp-card-img { transform: scale(1.02); }

.wpp-card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.wpp-card-title { margin: 0; font-weight: 400;text-align: left; }
.wpp-card-title a { color: var(--wpp-navy); text-decoration: none; }
.wpp-card-title a:hover { color: var(--wpp-navy); text-decoration: underline; }
.wpp-card-date { color: var(--wpp-accent-ink); opacity: 1; }

/* Chan carousel — DUNG CHUNG cho moi swiper co .wpp-carousel-foot (tin tuc, goc nhin,
   lich su phat trien). Truoc day cac luat duoi day bam vao .wpp-carousel nen khoi lich su
   khong duoc to kieu -> mui ten roi ve mac dinh cua swiper (16px xam, noi de len slide). */
.wpp-carousel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-left: 0;
    padding-right: 0;
}

.wpp-carousel-foot .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
}

.wpp-carousel-foot .swiper-pagination-bullet {
    width: 24px;
    height: 2px;
    margin: 0 !important;
    border-radius: 0;
    background: rgba(10, 30, 120, 0.25);
    opacity: 1;
}

.wpp-carousel-foot .swiper-pagination-bullet-active { background: var(--wpp-navy); }

.wpp-carousel-nav { display: none; gap: 8px; margin-left: auto; }

@media (min-width: 768px) {
    /* web mau an nut mui ten o mobile, chi con thanh pagination */
    .wpp-carousel-nav { display: flex; }
}

.wpp-carousel-foot .swiper-button-prev,
.wpp-carousel-foot .swiper-button-next {
    position: static;
    width: 48px;
    height: 48px;
    margin: 0;
    left: auto;
    right: auto;
    border: 1px solid var(--wpp-line);
    border-radius: 9999px;
    background: transparent;
    color: var(--wpp-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-carousel-foot .swiper-button-prev::after,
.wpp-carousel-foot .swiper-button-next::after { display: none; }

.wpp-carousel-foot .swiper-button-prev .wpp-ic,
.wpp-carousel-foot .swiper-button-next .wpp-ic { width: 20px; height: 20px; }

.wpp-carousel-foot .swiper-button-prev:hover,
.wpp-carousel-foot .swiper-button-next:hover {
    background: var(--wpp-navy);
    color: var(--wpp-white);
}

.wpp-carousel-foot .swiper-button-disabled { opacity: 0.35; }

@media (min-width: 1024px) {
    .wpp-sec--carousel { padding: 80px 0; }
    .wpp-sec-head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .wpp-sec-title { grid-column: span 6; }
    .wpp-sec-desc  { grid-column: 7 / span 6; margin-top: 0; }
}

/* ---------- 8. KHOI NEN ANH + THE TRANG (ben vung) ---------- */
.wpp-sec--feature {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    overflow: hidden;
    background: var(--wpp-navy);
}

.wpp-feature-bg { position: absolute; inset: 0; z-index: 0; }

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

.wpp-feature-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.wpp-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 342px;
    padding: 32px;
    border-radius: 6px;
    background: var(--wpp-white);
    text-align: center;
}

@media (min-width: 1024px) {
    .wpp-feature-card { max-width: 456px; padding: 40px 32px; gap: 32px; }
}

/* ---------- 9. THANH DIEU HUONG NOI ---------- */
/* Thanh nav noi o DAY man hinh nen dau trang khong phai chua cho nua.
   Doi lai: chan trang phai chua ~92px de vien pill khong de len dong ban quyen. */
.wpp-nav-row { height: 0; }

.wpp-nav-bar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(85%, 45rem);
    height: 60px;
    padding-left: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    background: #2c3c78;
    color: var(--wpp-white);
}

.wpp-nav-brand { display: flex; align-items: center; color: var(--wpp-white); text-decoration: none; }
.wpp-nav-brand:hover { color: var(--wpp-white); text-decoration: none; }

.wpp-nav-brand-text {
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wpp-nav-logo { display: block; height: 50px; width: auto; }

.wpp-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    border-radius: 9999px;
    color: var(--wpp-white);
    font-size: 19px;
    text-decoration: none;
    transition: background-color 0.25s;
}

.wpp-nav-toggle:hover { background: rgba(255, 255, 255, 0.12); color: var(--wpp-white); text-decoration: none; }
.wpp-nav-toggle .wpp-ic { width: 24px; height: 24px; }

/* Lop mo nen phia sau panel. O mobile panel van phu kin man hinh nen khong can;
   tu 768px tro len panel chi la the xo xuong -> phai co lop mo de tach khoi trang.
   Theme chi khai .back-drop trong @media (max-width: 1000px) nen o day khai lai du. */
.wpp-nav-backdrop { display: none; }

@media (min-width: 768px) {
    .wpp-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1045;
        background: rgba(4, 12, 46, 0.55);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .wpp-nav-backdrop.open { opacity: 1; visibility: visible; }
}

.wpp-nav-panel {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 91px 24px 40px;
    background: var(--wpp-ink);
    color: var(--wpp-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.wpp-nav-panel.open { opacity: 1; visibility: visible; transform: none; }

.wpp-nav-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1392px;
    margin: 0 auto;
    height: 50px;
}

.wpp-nav-panel-brand {
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.wpp-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    color: var(--wpp-white);
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-nav-close .wpp-ic { width: 20px; height: 20px; }

.wpp-nav-close:hover { background: var(--wpp-white); color: var(--wpp-navy); text-decoration: none; }

.wpp-nav-panel-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 1392px;
    margin: 0 auto;
}

.wpp-nav-list {list-style: none;margin: 10px 0 0;padding: 0;}

.wpp-nav-item { position: relative; border-top: 1px solid var(--wpp-line-light); }
.wpp-nav-item:last-child { border-bottom: 1px solid var(--wpp-line-light); }

.wpp-nav-link {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 48px 16px 0;
    color: var(--wpp-white);
    text-decoration: none;
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 300;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    transition: opacity 0.25s;
}

.wpp-nav-link:hover { color: var(--wpp-white); opacity: 0.6; text-decoration: none; }

.wpp-nav-index {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.5;
}

.wpp-nav-grower {
    position: absolute;
    top: 12px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--wpp-white);
    cursor: pointer;
}

.wpp-nav-grower.open i::before { content: "\f068"; }

.wpp-nav-sub { display: none; list-style: none; margin: 0; padding: 0 0 16px 40px; }
.wpp-nav-sub li { padding: 4px 0; }

.wpp-nav-sub a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}

.wpp-nav-sub a:hover { color: var(--wpp-white); text-decoration: none; }

.wpp-nav-panel-foot {
    margin-top: auto;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpp-nav-foot-label { margin: 0; font-size: 14px; line-height: 14px; text-transform: uppercase; opacity: 0.6; }
.wpp-nav-foot-list { display: flex; flex-wrap: wrap; gap: 24px; }
.wpp-nav-foot-link { color: var(--wpp-white); font-size: 18px; line-height: 24px; text-decoration: none; }
.wpp-nav-foot-link:hover { color: var(--wpp-white); text-decoration: underline; }

@media (min-width: 768px) {
    /* Panel = the xo xuong bam duoi thanh nav, KHONG con phu kin man hinh */
    .wpp-nav-panel {
        top: auto;
        right: auto;
        top: 84px;
        bottom: auto;          /* 16 (thanh nav) + 60 (cao thanh) + 8 (khe ho) */
        left: 50%;
        width: min(85%, 45rem);
        max-height: calc(100vh - 108px);
        padding: 40px 48px 48px;
        border-radius: 10px;
        background: var(--wpp-white);
        color: var(--wpp-navy);
        box-shadow: 0 24px 60px rgba(4, 12, 46, 0.28);
        transform: translateX(-50%) translateY(12px);
        z-index: 1050;
    }

    .wpp-nav-panel.open { transform: translateX(-50%); }

    /* dong "ten site + nut X" chi con y nghia o ban phu kin man hinh */
    .wpp-nav-panel-top { display: none; }
    .wpp-nav-panel-body { max-width: none; }

    /* Moi muc cap 1 thanh 1 COT: ten muc lam tieu de nhom, menu con liet ke ngay duoi.
       Dung flex-wrap chu khong phai grid 4 cot cung: menu cua site nay chi co 5 muc va
       KHONG co menu con, khung 4 cot se de trong hon nua the. Flex thi 5 muc nam gon
       1 hang, ma sau nay them menu con van thanh cot dung nhu web mau. */
    .wpp-nav-list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 40px;
        row-gap: 28px;
        margin: 0;
    }

    .wpp-nav-item,
    .wpp-nav-item:last-child {
        border: 0;
        flex: 0 1 auto;
        min-width: 160px;
    }

    .wpp-nav-link {
        display: block;
        padding: 0 0 12px;
        font-size: 18px;
        line-height: 19.8px;
        letter-spacing: normal;
        color: var(--wpp-navy);
    }

    .wpp-nav-link:hover { color: var(--wpp-navy); opacity: 0.6; }

    .wpp-nav-index { display: none; }
    .wpp-nav-grower { display: none; }

    /* het accordion: menu con hien san theo cot nhu web mau */
    .wpp-nav-sub {
        display: block !important;
        padding: 0;
    }

    .wpp-nav-sub li { padding: 0; }

    .wpp-nav-sub a {
        display: block;
        padding: 5px 0;
        color: var(--wpp-navy);
        font-size: 14px;
        line-height: 18.2px;
        letter-spacing: -0.28px;
        opacity: 0.8;
    }

    .wpp-nav-sub a:hover { color: var(--wpp-navy); opacity: 1; text-decoration: underline; }

    .wpp-nav-panel-foot {
        margin-top: 48px;
        padding-top: 24px;
        border-top: 1px solid var(--wpp-line);
    }

    .wpp-nav-foot-label { color: var(--wpp-navy); opacity: 0.6; }

    .wpp-nav-foot-link { color: var(--wpp-navy); font-size: 16px; line-height: 24px; }
    .wpp-nav-foot-link:hover { color: var(--wpp-navy); }
}

@media (min-width: 1024px) {
    .wpp-nav-panel { padding: 20px 30px; }
    .wpp-nav-list { column-gap: 48px; row-gap: 32px; }
    .wpp-nav-item { min-width: 150px; }
}

/* ---------- 10. FOOTER ---------- */
.wpp-footer,
.wpp-footer-bottom { background: var(--wpp-cream); }

.wpp-footer > .row {
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px 24px 0;
}

.wpp-footer-bottom > .row {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;   /* 60 (cao pill) + 16 (khe duoi) + 16 tho */
}

/* Chan trang gom 1 block duy nhat: khoi thuong hieu + cot dich vu + cot lien ket,
   ben duoi la 3 the van phong. Du lieu lay theo vietbagroup.com.vn. */
.wpp-ft-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
    padding-bottom: 40px;
}

.wpp-ft-brand { display: flex; flex-direction: column; gap: 16px; grid-column: span 4; min-width: 0; }
.wpp-ft-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    text-decoration: none;
    color: var(--wpp-navy);
}

.wpp-ft-logo:hover { text-decoration: none; color: var(--wpp-navy); }
.wpp-ft-logo-img { display: block; height: 60px; width: auto; }

.wpp-ft-logo-text {
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.wpp-ft-brand-desc { max-width: 360px; opacity: 0.8; }
.wpp-ft-contact { display: flex; flex-direction: column; gap: 4px; }

.wpp-ft-contact-link {
    color: var(--wpp-navy);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    text-decoration: none;
}

.wpp-ft-contact-link:hover { color: var(--wpp-navy); text-decoration: underline; }

.wpp-ft-col { grid-column: span 4; min-width: 0; }

/* 8 dich vu -> xep 2 cot cho do dai.
   Phai viet 2 lop (.wpp-ft-list.wpp-ft-list--split) vi luat .wpp-ft-list (display:flex)
   nam SAU trong tep, cung do dac hieu thi luat sau thang. */
.wpp-ft-list.wpp-ft-list--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 10px;
}

/* --- 3 van phong --- */
.wpp-ft-offices {
    padding: 40px 0;
    border-top: 1px solid var(--wpp-line);
}

.wpp-ft-office-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.wpp-ft-office {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.wpp-ft-office-name {
    margin: 0;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wpp-ft-office-line {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    opacity: 0.8;
}

.wpp-ft-office-links { display: flex; flex-direction: column; gap: 2px; }

.wpp-ft-col-title {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 19.8px;
    font-weight: 400;
    text-transform: uppercase;
}

.wpp-ft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.wpp-ft-list a,
.wpp-ft-list span {
    font-size: 14px;
    line-height: 18.2px;
    letter-spacing: -0.28px;
    color: var(--wpp-navy);
    text-decoration: none;
    opacity: 0.85;
}

.wpp-ft-list a:hover { opacity: 1; color: var(--wpp-navy); }

.wpp-ft-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding: 24px 6px;
    border-top: 1px solid var(--wpp-line);
}

.wpp-ft-copy { margin: 0; opacity: 0.8; }
.wpp-ft-social { display: flex; flex-wrap: wrap; gap: 24px; }

.wpp-ft-social-item {
    color: var(--wpp-navy);
    text-decoration: none;
    opacity: 0.85;
}

.wpp-ft-social-item:hover { opacity: 1; color: var(--wpp-navy); text-decoration: underline; }

@media (min-width: 768px) {
    .wpp-ft-main { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .wpp-ft-brand { grid-column: span 12; }
    .wpp-ft-col { grid-column: span 5; }
    .wpp-ft-col.wpp-ft-col--wide { grid-column: span 7; }
    .wpp-ft-office-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    /* du cho thi 8 dich vu moi tach 2 cot; mobile de 1 cot cho khoi ngat chu lung tung */
    .wpp-ft-list.wpp-ft-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .wpp-footer > .row { padding-top: 48px; }
    .wpp-ft-main { column-gap: 24px; row-gap: 48px; padding-bottom: 48px; }
    .wpp-ft-brand { grid-column: span 4; }
    .wpp-ft-col { grid-column: span 3; }
    .wpp-ft-col.wpp-ft-col--wide { grid-column: span 5; }
    .wpp-ft-offices { padding: 48px 0; }
    .wpp-ft-bottom { margin-top: 0; }
}

/* ---------- 11. THANH GRADIENT LOGO (diem nhan dung chung) ---------- */
.wpp-sec-title,
.wpp-partner-title,
.wpp-history-heading {
    position: relative;
}

.wpp-sec-title::after,
.wpp-partner-title::after,
.wpp-history-heading::after {
    content: "";
    margin: 0 auto;
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 16px;
    border-radius: 2px;
    background: var(--wpp-grad);
}

.wpp-partner-title::after,
.wpp-history-heading::after { margin-left: auto; margin-right: auto; }

/* ---------- 12. DOI TAC ---------- */
.wpp-sec--partner {
    padding: 64px 0;
    background: var(--wpp-cream);
    overflow-x: clip;
}

.wpp-partner-head { text-align: center; }

.wpp-partner-eyebrow {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--wpp-accent-ink);
}

.wpp-partner-title { margin: 0; }

.wpp-partner-track { margin-top: 40px; }

.wpp-partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    padding: 0 8px;
    background: #fff;
    border-radius: 6px;
}

.wpp-partner-img {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 92px;
    object-fit: contain;
    /* nen sang nen chi giam bao hoa nhe, khong xam hoan toan nhu ban goc nen toi */
    filter: grayscale(0.35);
    opacity: 0.9;
    transition: filter 0.25s, opacity 0.25s;
}

.wpp-partner-item:hover .wpp-partner-img { filter: none; opacity: 1; }

@media (min-width: 1024px) {
    .wpp-sec--partner { padding: 96px 0; }
}

/* ---------- 13. LICH SU ---------- */
.wpp-sec--history {
    position: relative;
    padding: 72px 0 80px;
    background: var(--wpp-white);
    overflow-x: clip;
}

.wpp-marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.wpp-marquee + .wpp-marquee { margin-top: 4px; }

.wpp-marquee-row {
    display: flex;
    flex: 0 0 auto;
    min-width: 100%;
    /*animation: wpp-marquee 32s linear infinite;*/
    text-align: center;
    justify-content: center;
}

.wpp-marquee-row span {
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

.wpp-marquee--solid span { color: rgba(10, 30, 120, 0.12); }

.wpp-marquee--outline span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(10, 30, 120, 0.25);
}

@keyframes wpp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .wpp-marquee-row { animation: none; }
}

.wpp-history-heading { margin: 40px 0 0; text-align: center; color: var(--wpp-accent); font-weight: 500;}

.wpp-history-track { margin-top: 40px; }
/*.wpp-history-track .swiper { overflow: visible; }*/

.wpp-history-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wpp-history-item { position: relative; }

/* Anh / video cua moc — dat ngay duoi mo ta. Khung 16:9 cho moi moc de cac the
   trong cung 1 hang khong nhay cao thap theo ti le anh nguoi dung tai len. */
.wpp-history-media {
    margin-top: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: #e8edfa;
}

.wpp-history-img,
.wpp-history-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.wpp-history-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.wpp-history-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The chi hien 3 dong mo ta; du hon thi trinh duyet tu cat "..." */
.wpp-history-text--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wpp-history-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding: 16px 0 0;
    border: 0;
    background: none;
    color: var(--wpp-accent-ink);
    font-size: 14px;
    line-height: 18.2px;
    letter-spacing: -0.28px;
    cursor: pointer;
    transition: gap 0.25s, color 0.25s;
}

.wpp-history-more:hover { gap: 12px; color: var(--wpp-navy); }
.wpp-history-more .wpp-ic { width: 16px; height: 16px; }

/* ---------- 13b. MODAL (chi tiet moc lich su) ---------- */
.wpp-modal[hidden] { display: none; }

.wpp-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wpp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 46, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.wpp-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px 20px 28px;
    border-radius: 10px;
    background: var(--wpp-white);
    color: var(--wpp-navy);
    box-shadow: 0 24px 60px rgba(4, 12, 46, 0.28);
    animation: wpp-modal-in 0.25s ease-out;
}

@keyframes wpp-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wpp-modal-dialog { animation: none; }
}

.wpp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wpp-line);
    border-radius: 9999px;
    background: var(--wpp-white);
    color: var(--wpp-navy);
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-modal-close:hover { background: var(--wpp-navy); color: var(--wpp-white); }
.wpp-modal-close .wpp-ic { width: 18px; height: 18px; }

.wpp-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wpp-modal-year {
    margin: 0;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--wpp-accent-ink);
}

.wpp-modal-title {
    margin: 0;
    padding-right: 48px;
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.wpp-modal-media {
    border-radius: 8px;
    overflow: hidden;
    background: #e8edfa;
}

.wpp-modal-img,
.wpp-modal-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.wpp-modal-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.wpp-modal-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* khoa cuon nen khi modal mo */
.wpp-modal-open,
.wpp-modal-open body { overflow: hidden; }

.wpp-history-year::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: var(--wpp-accent);
}

.wpp-history-year {
    position: relative;
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wpp-line);
    font-size: 30px;
    line-height: 45px;
    font-weight: 700;
    color: var(--wpp-accent-ink);
}

.wpp-history-title {
    margin: 28px 0 14px;
    font-size: 23px;
    line-height: 32px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-history-text {
    font-size: 16px;
    line-height: 26px;
    color: #4b5573;
        text-align: justify;
}

.wpp-history-text p { margin: 0 0 12px; }
.wpp-history-text p:last-child { margin-bottom: 0; }
.wpp-history-text ul { margin: 0; padding-left: 20px; }
.wpp-history-text li { margin-bottom: 11px; }
.wpp-history-text strong { font-weight: 700; }
.wpp-history-text .hl { color: var(--wpp-accent-ink); font-weight: 600; }

@media (min-width: 1024px) {
    .wpp-modal { padding: 24px; }
    .wpp-modal-dialog { max-height: calc(100vh - 48px); padding: 40px; }
    .wpp-modal-close { top: 24px; right: 24px; }
    .wpp-modal-body { gap: 20px; }
    .wpp-sec--history { padding: 90px 0 30px; }
    /*.wpp-marquee-row span { font-size: 96px; }*/
    .wpp-history-heading { margin-top: 56px; }
    .wpp-history-track { margin-top: 48px; }
}

/* ---------- 14. MAU THEME GOC -> MAU LOGO (ap cho MOI trang, ke ca trang trong) ----------
   Theme thoitrang05 khai mau thuong hieu o variable.css:
     --color-main #111c2d (xanh den)  --color-highlight #c69c6d (vang dong)  --color-top #B27E3D
   Gio: --color-main = xanh chu dao #0a1e78, con highlight/top giu cam lam diem nhan.
   custom.css nap SAU variable.css nen ghi de duoc. Toan bo khoi nay nam trong cap the
   BEGIN/END BLOCK_WPP_HOME -> go khoi la mau theme tu tro ve nhu cu. */
:root {
    --color-main: #0a1e78;
    --color-highlight: #e2600f;
    --color-top: #ff7425;
}

/* Mang nen DAC va LON thi di theo mau chu dao, cam chi con lam diem nhan cho nut/chu.
   .bg-highlight tren site nay chi xuat hien 1 cho: the "Ban can gap truc tiep" o trang
   lien he (block ofuceim) - de nguyen cam thi ca mang cam nay lan at tong xanh. */
.bg-highlight { background: var(--color-main); }

/* ---------- 15. DICH VU (6 the anh, chu that de len - KHONG dung chu nung san trong anh) ---------- */
.wpp-sec--service { padding: 0 0 80px; background: var(--wpp-white); }

.wpp-service-head { display: block; text-align: left; margin-bottom: 40px; }
.wpp-service-head .wpp-sec-desc { grid-column: auto;margin: 0 auto;margin-top: 12px; max-width: 640px; }

.wpp-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wpp-service-card { min-width: 0; }
.wpp-service-link { display: block; text-decoration: none; }
.wpp-service-link:hover { text-decoration: none; }

.wpp-service-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--wpp-ink);
}

/* Anh goc cua web mau da nung san dong chu tieng Viet o ~78% chieu cao.
   Phong to 1.32x va neo len tren de cat het phan chu, roi ve chu that de len
   -> doi duoc ngon ngu va doc duoc bang trinh doc man hinh. */
.wpp-service-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /*transform: scale(1.32);*/
    transform-origin: center top;
    transition: transform 0.45s;
}

.wpp-service-card:hover .wpp-service-img { transform: scale(1.38); }

.wpp-service-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 20px;
    background: linear-gradient(to top, rgba(10, 31, 120, 0.95) 0%, rgba(15, 42, 135, 0.75) 35%, rgba(20, 48, 145, 0.35) 65%, rgba(20, 48, 145, 0) 100%);
}

.wpp-service-title {
    margin: 0;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wpp-white);
}

.wpp-service-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 768px) {
    .wpp-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wpp-service-overlay { padding: 20px 25px; }
    .wpp-service-title { font-size: 22px; line-height: 1.5; }
}

@media (min-width: 1024px) {
    .wpp-sec--service { padding-bottom: 112px; }
}

/* ---------- 16. CHON NGON NGU TRONG THANH DIEU HUONG ---------- */
.wpp-nav-actions { display: flex; align-items: center; gap: 2px; }

.wpp-nav-lang { position: relative; }

.wpp-nav-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border-radius: 9999px;
    color: var(--wpp-white);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.25s;
}

.wpp-nav-lang-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--wpp-white); text-decoration: none; }
.wpp-nav-lang-btn .wpp-ic { width: 18px; height: 18px; }
.wpp-nav-lang-code { text-transform: uppercase; letter-spacing: 0.04em; }

.wpp-nav-lang-list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 5;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 10px;
    background: var(--wpp-white);
    box-shadow: 0 12px 32px rgba(4, 12, 46, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.wpp-nav-lang:hover .wpp-nav-lang-list,
.wpp-nav-lang:focus-within .wpp-nav-lang-list {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.wpp-nav-lang-list li { border-radius: 6px; }
.wpp-nav-lang-list li + li { margin-top: 2px; }

.wpp-nav-lang-list a {
    display: block;
    padding: 9px 12px;
    color: var(--wpp-navy);
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}

.wpp-nav-lang-list li:hover { background: var(--wpp-cream); }
.wpp-nav-lang-list li.is-active a { color: var(--wpp-accent-ink); font-weight: 600; }

/* ---------- 17. TRANG GIOI THIEU (bam so do wpp.com/en/about/our-company) ----------
   Web mau: cac khoi mang xep thanh DAI FULL-WIDTH xen ke nen kem/trang, padding doc 80px,
   KHONG co duong ke ngan cach. Cot chu rong 4/12, canh giua theo chieu doc, padding 0 56px:
   tieu de 24/26.4 weight 300 (KHONG dam), than 16/20.8 weight 400 ls -0.32. */
.wpp-sec--about { padding: 0; background: var(--wpp-white); }

.wpp-about-band { padding: 56px 0; background: var(--wpp-white); }
.wpp-about-band--alt,
.wpp-about-band--intro { background: var(--wpp-cream); }
.wpp-about-band--intro { padding-bottom: 0; }

.wpp-about-intro {
    max-width: 700px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 27px;
    font-weight: 300;
    letter-spacing: -0.4px;
    color: var(--wpp-navy);
    text-align: center;
}

.wpp-about-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.wpp-about-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: var(--wpp-ink);
}

/* Anh dich vu cua web mau nung san dong chu o ~78% chieu cao -> neo len tren
   de khung 16:9 chi lay phan tren, khong lot chu bi cat doi. */
.wpp-about-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.wpp-sec--hero-left .wpp-hero-img { object-position: center top; }

.wpp-about-body { display: flex; align-items: center; justify-content: center; }
.wpp-about-body-inner { width: 100%; text-align: left;}

.wpp-about-title {
    margin: 0;
    padding-bottom: 16px;
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 300;
    letter-spacing: -0.4px;
    color: var(--wpp-navy);
}

.wpp-about-text {
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: -0.32px;
    color: var(--wpp-navy);
}

.wpp-about-text p { margin: 0 0 12px; }
.wpp-about-text p:last-child { margin-bottom: 0; }
.wpp-about-btn { margin-top: 24px; }

@media (min-width: 1024px) {
    .wpp-about-band { padding: 80px 0; }
    .wpp-about-band--intro { padding-bottom: 0; }
    .wpp-about-intro { font-size: 24px; line-height: 31px; }

    .wpp-about-row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        align-items: center;
    }
    .wpp-about-media { grid-column: span 8; }
    .wpp-about-body  { grid-column: span 4; }
    .wpp-about-body-inner { padding: 0 56px; }
    .wpp-about-row--flip .wpp-about-media { grid-column: 5 / span 8; grid-row: 1; }
    .wpp-about-row--flip .wpp-about-body  { grid-column: 1 / span 4; grid-row: 1; }
}

/* hero canh trai cua trang gioi thieu (web mau: OUR COMPANY canh trai, col-span-7) */
.wpp-hero-head--left { max-width: 807px; margin: 0; text-align: left; }
.wpp-hero-head--left .wpp-hero-desc { max-width: 620px; }
.wpp-sec--cta .wpp-feature-card { max-width: 520px; }
/* END: BLOCK_WPP_HOME */

/* BEGIN: BLOCK_WPP_NEWS */
/* ============================================================
   WPP NEWS - trang danh sach bai viet, mau www.wpp.com/en/news
   So do lay bang design.py (computed style that) tai 1440 / 768 / 390:
     - luoi 12 cot, the chiem 4 cot  -> 3 the/hang tu 768px, 1 the/hang o mobile
     - column-gap 12px | row-gap 48px (>=768) / 24px (mobile)
     - khoi luoi: margin 48px tren, 40px duoi
     - the: gap 16px | anh 16:10 bo goc 4px | chu 8px giua tieu de va ngay
     - tieu de trang: 52/52 (>=1024) - 32/35.2 (mobile), in hoa, can giua
       padding-top 96px (>=1024) / 40px (mobile)
   Viet bang px giong khoi WPP HOME (theme doi co so rem 10px -> 9px o <=1280px).
   ============================================================ */

/* ---------- 1. TIEU DE TRANG ---------- */
.wpp-sec--newshead {
    background: var(--wpp-white);
    padding: 40px 0 24px;
}

.wpp-newshead-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.wpp-newshead-eyebrow { color: var(--wpp-accent-ink); }
.wpp-newshead-title    { width: 100%; }
.wpp-newshead-desc     { max-width: 720px; }

/* ---------- 2. LUOI TIN ---------- */
.wpp-sec--news {
    background: var(--wpp-white);
    padding: 0 0 40px;
}

.wpp-news-title { margin-bottom: 8px; }

.wpp-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 24px;
    margin: 48px 0 40px;
}

/* min-width: 0 la BAT BUOC cho o luoi: thieu no, tieu de dai khong xuong dong duoc
   -> cot phinh ra ngoai khung (luat LINT cua kit). */
.wpp-news-grid > .wpp-news-card {
    grid-column: span 4;
    min-width: 0;
}

/* Web mau dung ti le 16:10 cho anh tin (the carousel trang chu la 3:2) */
.wpp-news-grid .wpp-card-media { aspect-ratio: 16 / 10; }
.wpp-news-grid .wpp-card-info  { gap: 8px; }

/* ---------- 3. PHAN TRANG ---------- */
.wpp-news-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 56px 0 0;
}

.wpp-news-foot .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 0;
}

.wpp-news-foot .page-item { margin: 0; }

.wpp-news-foot .page-link,
.wpp-news-foot .pagination > li > a,
.wpp-news-foot .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--wpp-line);
    border-radius: 999px;
    background: var(--wpp-white);
    color: var(--wpp-navy);
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.wpp-news-foot .page-link:hover,
.wpp-news-foot .pagination > li > a:hover {
    background: var(--wpp-cream);
    color: var(--wpp-navy);
    text-decoration: none;
}

.wpp-news-foot .page-item.active .page-link,
.wpp-news-foot .pagination > li.active > a,
.wpp-news-foot .pagination > li.active > span {
    background: var(--wpp-navy);
    border-color: var(--wpp-navy);
    color: var(--wpp-white);
}

.wpp-news-foot .page-item.disabled .page-link {
    opacity: 0.45;
    pointer-events: none;
}

/* Nut "xem them" kieu ajax neu theme sinh ra thay vi so trang */
.wpp-news-foot .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 16px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--wpp-navy);
    color: var(--wpp-white);
    font-size: 14px;
    line-height: 16px;
}

.wpp-news-foot .btn:hover {
    background: var(--wpp-navy-hover);
    color: var(--wpp-white);
}

/* ---------- 4. BREAKPOINT ---------- */
@media (min-width: 768px) {
    .wpp-news-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        row-gap: 48px;
    }
}

@media (min-width: 1024px) {
    .wpp-sec--newshead { padding: 96px 0 32px; }
    .wpp-sec--news     { padding-bottom: 56px; }
    .wpp-news-foot     { margin-bottom: 40px; }
}
/* END: BLOCK_WPP_NEWS */

/* BEGIN: BLOCK_WPP_POST */
/* ============================================================
   WPP POST - trang chi tiet tin tuc, mau www.wpp.com/en/news/2026-interim-results
   So do lay bang design.py (computed style that) tai 1440 / 390:
     - hero: pt 96 (mobile 40), tieu de 52/52 in hoa can giua, sapo 18/19.8 (-0.45)
       rong toi da 548px, cach tieu de 36px
     - anh bia: rong bang container (1392), bo goc 8px, 16:9 desktop / 3:4 mobile
     - than bai: cot 6/12 lech phai 3 cot (690px @1440), padding doc 112px, gap 56px
     - dong ngay: pb 24px + duong ke duoi; chu 16/20.8 (-0.32)
     - noi dung: cac khoi cach nhau 24px; h2 24/26.4 w300; h3 18/19.8 w300;
       ul lui trai 24px, cac muc cach 8px; bang: o 12x16, ke duoi tung hang
   ============================================================ */

/* ---------- 1. HERO ---------- */
.wpp-sec--post {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 24px;
    background: var(--wpp-white);
}

.wpp-post-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 40px;
}

.wpp-post-title { width: 100%; }

.wpp-post-lead {
    max-width: 548px;
    margin-top: 24px;
}

.wpp-post-lead p { margin: 0; }
.wpp-post-lead p + p { margin-top: 24px; }

/* ---------- 2. ANH BIA ---------- */
.wpp-post-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: #e8edfa;
}

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

/* ---------- 3. COT THAN BAI ---------- */
.wpp-post-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
}

.wpp-post-col {
    grid-column: span 4;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 72px 0;
}

.wpp-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--wpp-line);
}

.wpp-post-date {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
}

.wpp-post-author {
    font-size: 14px;
    line-height: 18.2px;
    letter-spacing: -0.28px;
    opacity: 0.7;
}

/* ---------- 4. NOI DUNG SOAN THAO ---------- */
.wpp-post-content {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
}

.wpp-post-content > * { margin: 0 0 24px; }
.wpp-post-content > *:last-child { margin-bottom: 0; }

.wpp-post-content h2,
.wpp-post-content h3,
.wpp-post-content h4,
.wpp-post-content h5 {
    font-weight: 300;
    letter-spacing: -0.4px;
    margin: 32px 0 16px;
}

.wpp-post-content h2 { font-size: 24px; line-height: 32.4px; }
.wpp-post-content h3,
.wpp-post-content h4,
.wpp-post-content h5 { font-size: 18px; line-height: 24.3px; }

.wpp-post-content ul,
.wpp-post-content ol {
    padding-left: 24px;
    margin: 0 0 24px;
}

.wpp-post-content li + li { margin-top: 8px; }

.wpp-post-content strong,
.wpp-post-content b { font-weight: 500; }

.wpp-post-content a {
    color: var(--wpp-navy);
    text-decoration: underline;
}

.wpp-post-content a:hover { text-decoration: none; }

.wpp-post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.wpp-post-content blockquote {
    margin: 0 0 24px;
    padding-left: 24px;
    border-left: 2px solid var(--wpp-accent);
}

/* bang trong bai: hep man hinh thi cuon ngang, khong lam vo cot */
.wpp-post-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.wpp-post-content th,
.wpp-post-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--wpp-line);
    text-align: left;
    vertical-align: top;
}

.wpp-post-content th { font-weight: 500; }

/* ---------- 5. VIDEO / ANH PHU / TEP / THE / CHIA SE ---------- */
.wpp-post-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #e8edfa;
}

.wpp-post-video iframe,
.wpp-post-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.wpp-post-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wpp-post-gallery-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    min-width: 0;
}

.wpp-post-files {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wpp-post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--wpp-line);
}

.wpp-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpp-post-tags a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--wpp-line);
    border-radius: 999px;
    color: var(--wpp-navy);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-post-tags a:hover {
    background: var(--wpp-navy);
    color: var(--wpp-white);
    text-decoration: none;
}

.wpp-post-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpp-post-share-label {
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-right: 4px;
}

.wpp-post-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--wpp-line);
    border-radius: 999px;
    color: var(--wpp-navy);
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-post-share .wpp-ic { width: 16px; height: 16px; }

.wpp-post-share a:hover {
    background: var(--wpp-navy);
    color: var(--wpp-white);
    text-decoration: none;
}

/* ---------- 6. DANH GIA + BINH LUAN: bo vao dung be ngang cot than bai ---------- */
.wpp-row--postextra {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px 72px;
}

/* ---------- 7. BREAKPOINT ---------- */
@media (min-width: 1024px) {
    .wpp-sec--post { gap: 48px; padding-bottom: 32px; }
    .wpp-post-head { padding-top: 96px; }
    .wpp-post-lead { margin-top: 36px; }
    .wpp-post-cover { aspect-ratio: 16 / 9; }

    .wpp-post-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .wpp-post-col {
        grid-column: 4 / span 6;
        gap: 56px;
        padding: 112px 0;
    }

    .wpp-post-content h2 { line-height: 26.4px; }
    .wpp-post-content h3,
    .wpp-post-content h4,
    .wpp-post-content h5 { line-height: 19.8px; }

    .wpp-row--postextra { padding-bottom: 96px; }
    .wpp-row--postextra > .row > [class*="col-"] { max-width: 49.6%; margin: 0 auto; }
}
/* END: BLOCK_WPP_POST */

/* BEGIN: BLOCK_WPP_CONTACT */
/* ============================================================
   WPP CONTACT - trang lien he, bo cuc theo www.wpp.com/en/contacts
   So do do bang design.py tai 1440 / 390:
     - hero CAN TRAI (khac trang tin: can giua), pt 96 (mobile 40),
       tieu de 52/52 in hoa, sapo 18/19.8 (-0.45) rong toi da 548px, cach 36px
     - moi khoi thong tin = 1 hang luoi 12 cot: NHAN ben trai (h2 32/32 in hoa,
       w300) | NOI DUNG ben phai bat dau tu cot 7, cac dong cach 24px
     - chu than 16/20.8 (-0.32), link gach chan
   ============================================================ */

/* ---------- 1. HERO ---------- */
.wpp-sec--contact {
    display: flex;
    flex-direction: column;
    gap: 32px;
    background: var(--wpp-white);
}

.wpp-contact-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40px;
}

.wpp-contact-title { width: 100%; }

.wpp-contact-lead {
    max-width: 548px;
    margin: 24px 0 0;
}

/* ---------- 2. HANG: NHAN TRAI | NOI DUNG PHAI ---------- */
.wpp-contact-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 16px;
    padding: 32px 0;
    border-top: 1px solid var(--wpp-line);
}

.wpp-contact-label { grid-column: span 4; min-width: 0; }

.wpp-contact-h {
    margin: 0;
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 300;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.wpp-contact-note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    opacity: 0.75;
}

.wpp-contact-body {
    grid-column: span 4;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wpp-contact-name {
    margin: 0;
    font-size: 18px;
    line-height: 23.4px;
    letter-spacing: -0.36px;
}

.wpp-contact-links { display: flex; flex-direction: column; gap: 4px; }

.wpp-contact-link {
    color: var(--wpp-navy);
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: -0.32px;
    text-decoration: underline;
}

.wpp-contact-link:hover { color: var(--wpp-navy); text-decoration: none; }

/* --- the van phong --- */
.wpp-contact-office {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpp-contact-office + .wpp-contact-office {
    padding-top: 24px;
    border-top: 1px solid var(--wpp-line);
}

.wpp-contact-office-name {
    margin: 0;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wpp-contact-office-line {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
    opacity: 0.85;
}

/* ---------- 3. FORM ---------- */
.wpp-sec--contactform { background: var(--wpp-white); padding-bottom: 40px; }

.wpp-form { display: flex; flex-direction: column; gap: 16px; }
.wpp-form .form-group { margin: 0; }

.wpp-form .form-control {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--wpp-line);
    border-radius: 4px;
    background: var(--wpp-white);
    color: var(--wpp-navy);
    font-size: 16px;
    line-height: 24px;
    transition: border-color 0.25s;
}

.wpp-form textarea.form-control {
    height: auto;
    min-height: 132px;
    padding: 14px 16px;
    resize: vertical;
}

.wpp-form .form-control:focus {
    outline: none;
    border-color: var(--wpp-navy);
    box-shadow: none;
}

.wpp-form .form-control::placeholder { color: var(--wpp-navy); opacity: 0.5; }

.wpp-form label.error {
    display: block;
    margin: 6px 0 0;
    color: #c0392b;
    font-size: 13px;
    line-height: 18px;
}

.wpp-form .form-control.error { border-color: #c0392b; }

.wpp-form-foot { display: flex; }

.wpp-form-submit {
    align-self: flex-start;
    min-height: 50px;
    cursor: pointer;
}

/* ---------- 4. BREAKPOINT ---------- */
@media (min-width: 1024px) {
    .wpp-sec--contact { gap: 48px; }
    .wpp-contact-head { padding-top: 96px; }
    .wpp-contact-lead { margin-top: 36px; }

    .wpp-contact-row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        padding: 40px 0;
    }

    .wpp-contact-label { grid-column: span 5; }
    .wpp-contact-body { grid-column: 7 / span 6; gap: 24px; }
    .wpp-contact-h { font-size: 32px; line-height: 32px; }

    .wpp-sec--contactform { padding-bottom: 72px; }
}
/* END: BLOCK_WPP_CONTACT */

/* BEGIN: BLOCK_WPP_ABOUT2 */
/* Trang "Ve chung toi" dung lai theo mau WPP.
   Chi them phan CHUA CO. Bo `.wpp-about-*`, `.wpp-media-toggle`, `.wpp-modal-*`,
   `.wpp-feature-*` da co san o tren, khong viet lai. */

/* ---------- Hero ----------
   Anh bia lay tu trang gioi thieu cu la 1920x945 (~2,03:1) va co dong chu in san
   nam sat mep trai. Khung hero mac dinh la 16/9 + object-fit:cover nen cat mat
   hai ben -> cut chu. Rieng trang nay dat dung ti le cua anh. */
.wpp-sec--hero-left .wpp-hero-media { aspect-ratio: 1920 / 945; }

/* Nut tren anh mang hoat dong: luon hien tam giac play (ban goc cua
   .wpp-media-toggle mac dinh hien nut pause vi no dieu khien the <video>). */
.wpp-media-toggle--play .wpp-ic-pause { display: none; }
.wpp-media-toggle--play .wpp-ic-play { display: inline-block; }

/* ---------- Dai o logo dai truyen hinh (tuong ung khoi "WPP CREATIVE") ---------- */
.wpp-sec--channels {
    padding: 56px 0;
    background: var(--wpp-white);
}

.wpp-ch-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 32px;
}

.wpp-ch-eyebrow {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

.wpp-ch-desc {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--wpp-navy);
}

.wpp-ch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wpp-ch-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 16px;
    border-radius: 4px;
    /* dam hon --wpp-cream mot bac: o phai noi len duoc tren nen trang cua khoi */
    background: #eaf0fb;
    text-decoration: none;
}

/* Logo dai co ti le rat lech nhau (VTVCab ngang, SCTV vuong) nen chan ca 2 chieu
   thay vi dat chieu rong co dinh. */
.wpp-ch-img {
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 88px;
    object-fit: contain;
}

.wpp-ch-text {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--wpp-navy);
}

/* ---------- CTA nen video YouTube ---------- */
/* Iframe khong co object-fit nen phai phong theo ti le man hinh de phu kin khung:
   lay canh lon hon giua 100vw va 177.78vh (= 16/9). */
.wpp-feature-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78svh;
    min-height: 100svh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Lop phu lam diu nen de thẻ trắng va chu van doc duoc tren moi khung hinh video. */
.wpp-feature-bg--video::after {
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 80, 0.28);
    content: "";
}

.wpp-sec--cta .wpp-media-toggle {
    right: 24px;
    bottom: 24px;
    z-index: 2;
}

@media (min-width: 1024px) {
    .wpp-sec--channels { padding: 80px 0; }

    .wpp-ch-head {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        padding-bottom: 40px;
    }
    .wpp-ch-head-left { grid-column: span 4; }
    .wpp-ch-head-right { grid-column: 6 / span 5; }

    .wpp-ch-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .wpp-ch-item { min-height: 150px; }
}
/* END: BLOCK_WPP_ABOUT2 */

/* BEGIN: BLOCK_WPP_DUAN */
/* Trang Du an — dai nut loc nhom + luoi du an.
   Bo `.wpp-work-*` da co san trong theme nhung duoc chinh cho khoi "work" o trang
   chu (luoi 4 cot, the dau tien chiem ca hang, anh dung 3:4). Trang danh sach can
   luoi deu 3 cot va anh ngang 16:9, nen DE trong pham vi .wpp-sec--worktab thay vi
   sua rule goc — de khoi trang chu neu dung sau nay khong bi doi theo. */

.wpp-sec--worktab {
    padding: 48px 0 72px;
    background: var(--wpp-white);
}

.wpp-worktab-head { padding-bottom: 24px; }

.wpp-worktab-title { margin: 0; }

.wpp-worktab-desc {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--wpp-navy);
}

/* ---------- Dai nut loc nhom ---------- */
/* Bootstrap .nav la flex-wrap; o mobile cho cuon ngang thay vi xuong nhieu hang,
   de dai nut luon cao dung 1 hang. */
.wpp-worktab-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 32px;
    padding: 0 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
}

.wpp-worktab-nav::-webkit-scrollbar { display: none; }

.wpp-worktab-item { flex: 0 0 auto; }

.wpp-worktab-nav .wpp-worktab-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--wpp-accent);
    border-radius: 9999px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--wpp-accent);
    background: var(--wpp-white);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.wpp-worktab-nav .wpp-worktab-btn:hover {
    border-color: var(--wpp-accent);
}

.wpp-worktab-nav .wpp-worktab-btn.active {
    color: var(--wpp-white);
    background: var(--wpp-accent);
    border-color: var(--wpp-accent);
}

/* ---------- Luoi du an trong tab ---------- */
.wpp-sec--worktab .wpp-work-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 32px;
}

.wpp-sec--worktab .wpp-work-card,
.wpp-sec--worktab .wpp-work-card:first-child {
    grid-column: auto;
    gap: 12px;
}

.wpp-sec--worktab .wpp-work-media { aspect-ratio: 16 / 9; }

/* Vien mo quanh o anh: nhieu du an dung logo nen TRANG (EVN, Vbox Kids,
   INVEST TV...) chu khong phai anh chup, khong co vien thi the trong nhu troi
   lo lung giua nen trang, khong dong bo voi cac the anh chup.
   PHAI dung lop phu ::after, KHONG dung `box-shadow: inset` tren chinh khung:
   the <img> la con nen se ve de len inset shadow, ket qua la chi the KHONG co
   anh moi hien vien — dung nhung the can vien nhat thi lai khong co. */
.wpp-sec--worktab .wpp-work-media::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--wpp-line);
    pointer-events: none;
    content: "";
}

/* Theme co rule rieng cho THE DAU TIEN cua khoi "work" (`.wpp-work-card:first-child
   .wpp-work-media { aspect-ratio: 3/2 }`) — dung cho trang chu, noi the dau co y to hon.
   O trang danh sach thi moi the phai bang nhau. Rule do co 3 lop nen rule dong tren
   (2 lop) THUA no: phai de bang selector cung 3 lop, khong bo qua duoc. */
.wpp-sec--worktab .wpp-work-card:first-child .wpp-work-media { aspect-ratio: 16 / 9; }

.wpp-sec--worktab .wpp-work-title { margin: 0; }

.wpp-sec--worktab .wpp-work-title a {
    color: var(--wpp-navy);
    text-decoration: none;
}

.wpp-sec--worktab .wpp-work-title a:hover { text-decoration: underline; }

.wpp-worktab-body .wpp-empty { padding: 32px 0; }

.wpp-work-foot { padding-top: 32px; }

@media (min-width: 768px) {
    .wpp-sec--worktab .wpp-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .wpp-sec--worktab { padding: 64px 0 96px; }
    .wpp-worktab-head { padding-bottom: 32px; }
    .wpp-worktab-nav { flex-wrap: wrap; margin-bottom: 40px; overflow-x: visible; }
    .wpp-sec--worktab .wpp-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
}
/* END: BLOCK_WPP_DUAN */

/* BEGIN: BLOCK_WPP_DUAN_CT */
/* Trang chi tiet DU AN.
   Phan lon dung lai `.wpp-post-*` cua trang chi tiet tin tuc (dau trang, anh bia,
   cot noi dung, thu vien anh) — chi viet them nhung thu tin tuc khong co. */

/* ---------- Nut quay lai danh sach ---------- */
.wpp-proj-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wpp-accent-ink);
}

.wpp-proj-back:hover { color: var(--wpp-navy); }
.wpp-proj-back .wpp-ic { width: 18px; height: 18px; }

/* ---------- Thu vien anh du an ---------- */
.wpp-proj-gallery-wrap { padding-top: 8px; }

.wpp-proj-gallery-title {
    margin: 0 0 16px;
    color: var(--wpp-navy);
}

/* The <a> boc anh chi de mo lightgallery — khong duoc lam doi khung anh */
.wpp-proj-shot {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    cursor: zoom-in;
}

.wpp-proj-shot .wpp-post-gallery-img { transition: transform 0.3s; }
.wpp-proj-shot:hover .wpp-post-gallery-img { transform: scale(1.03); }

/* ---------- Khoi "Du an khac" ---------- */
/* Khong dat padding-top nho: tieu de "Du an khac" se dinh sat duong ke va sat
   khoi noi dung phia tren. Giu dung nhip 48/64px nhu cac khoi khac cua he WPP. */
.wpp-sec--workmore {
    padding-top: 48px;
    border-top: 1px solid var(--wpp-line);
    background: var(--wpp-cream);
}

@media (min-width: 1024px) {
    .wpp-sec--workmore { padding-top: 64px; }
}

@media (min-width: 1024px) {
    /* Du an co the co hon 10 anh — 3 cot doc de chiu hon 2 cot rat dai */
    .wpp-proj-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* END: BLOCK_WPP_DUAN_CT */


/* Trang Dich vu — luoi o dich vu + popup xem nhanh.
   Popup dung lai bo `.wpp-modal*` da co san trong custom.css, o day chi them
   phan luoi va vai net cho phan than popup. */

.wpp-sec--svc {
    padding: 48px 0 72px;
    background: var(--wpp-white);
}

.wpp-svc-head { padding-bottom: 32px; }

.wpp-svc-eyebrow {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--wpp-accent-ink);
}

.wpp-svc-title { margin: 0; }

.wpp-svc-desc {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--wpp-navy);
}

.wpp-svc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* Toan bo o la mot <button>: bo het kieu mac dinh cua trinh duyet */
.wpp-svc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.wpp-svc-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--wpp-cream);
}

/* Vien phai la lop phu: nhieu icon dich vu la anh nen trang, viel bang
   box-shadow inset tren khung se bi the <img> con ve de len (da dinh that
   o luoi du an). */
.wpp-svc-media::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--wpp-line);
    pointer-events: none;
    content: "";
}

.wpp-svc-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wpp-svc-tile:hover .wpp-svc-img { transform: scale(1.03); }

.wpp-svc-name {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--wpp-navy);
}

.wpp-svc-tile:hover .wpp-svc-name { color: var(--wpp-accent-ink); }

/* Dau bao o do co video */
.wpp-svc-flag {
    position: absolute;
    right: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    font-size: 12px;
    color: var(--wpp-white);
    background: rgba(10, 30, 120, 0.72);
}

/* ---------- Phan than popup ---------- */
.wpp-modal-text {
    font-size: 16px;
    line-height: 26px;
    color: var(--wpp-navy);
}

.wpp-modal-text p { margin: 0 0 12px; }
.wpp-modal-text p:last-child { margin-bottom: 0; }

.wpp-modal-body .wpp-btn { margin-top: 20px; }

@media (min-width: 640px) {
    .wpp-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .wpp-sec--svc { padding: 64px 0 96px; }
    .wpp-svc-head { padding-bottom: 40px; }
    .wpp-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
}


/* Trang landing cua tung dich vu.
   Dau trang dung lai `.wpp-sec--hero` + `.wpp-hero-*` cua trang Gioi thieu,
   khoi du an tieu bieu dung lai `.wpp-sec--worktab` cua trang Du an.
   O day chi them khoi "nang luc" va vai net rieng. */

.wpp-sec--sdhero .wpp-hero-desc { max-width: 720px; }
.wpp-sd-btn { margin-top: 24px; }

/* Anh dau trang dich vu la anh minh hoa 4:3, khong phai banner ngang nhu trang
   Gioi thieu — de nguyen 16/9 se cat mat qua nhieu. */
.wpp-sec--sdhero .wpp-sd-media { aspect-ratio: 3 / 2; }

/* ---------- Khoi "nang luc" (mac dinh trong, hien khi khach dien nhan) ---------- */
.wpp-sec--sdcap {
    padding: 48px 0;
    background: var(--wpp-cream);
}

.wpp-sd-cap-title { margin: 0 0 24px; }

.wpp-sd-cap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.wpp-sd-cap { min-width: 0; }

.wpp-sd-cap-name {
    margin: 0 0 8px;
    padding-top: 16px;
    border-top: 1px solid var(--wpp-line);
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    color: var(--wpp-navy);
}

.wpp-sd-cap-desc {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--wpp-navy);
}

@media (min-width: 768px) {
    .wpp-sd-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .wpp-sec--sdcap { padding: 64px 0; }
    .wpp-sd-cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
}

/* BEGIN: BLOCK_WPP_HIEU_UNG */
/* =========================================================================
   HIEU UNG TOAN SITE
   - hien dan khi cuon toi (lop do custom.js gan vao, khong viet san trong HTML)
   - di chuot: nang the, phong anh, doi mau chu
   - man hinh cho co logo
   Khong dung thu vien ngoai: wpp.com cung chi dung `transition` thuan CSS.
   ========================================================================= */

/* ---------- 1. Hien dan khi cuon toi ----------
   `.wpp-rv` CHI duoc gan bang JS. Viet san trong HTML se khien nguoi tat JS
   nhin thay trang trang tron. */
.wpp-rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wpp-rv.is-in {
    opacity: 1;
    transform: none;
    text-align: center;
}

/* Anh bia / anh lon truot len nhe hon cho do nang ne */
.wpp-hero-media.wpp-rv,
.wpp-post-cover.wpp-rv,
.wpp-about-media.wpp-rv { transform: translateY(24px) scale(0.995); }
.wpp-hero-media.wpp-rv.is-in,
.wpp-post-cover.wpp-rv.is-in,
.wpp-about-media.wpp-rv.is-in { transform: none; }

/* ---------- 2. Di chuot ---------- */
/* The du an / dich vu: nang nhe + doi mau tieu de */
.wpp-work-card,
.wpp-svc-cell,
.wpp-card {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wpp-work-card:hover,
.wpp-svc-cell:hover,
.wpp-card:hover { transform: translateY(-4px); }

.wpp-card-title a,
.wpp-work-title a { transition: color 0.25s; }
.wpp-card:hover .wpp-card-title a,
.wpp-work-card:hover .wpp-work-title a { color: var(--wpp-accent-ink); }

/* O logo: bo giam bao hoa khi di chuot vao */
.wpp-ch-item .wpp-ch-img,
.wpp-partner-item .wpp-partner-img {
    filter: grayscale(0.35);
    opacity: 0.9;
    transition: filter 0.3s, opacity 0.3s, transform 0.3s;
}

.wpp-ch-item:hover .wpp-ch-img,
.wpp-partner-item:hover .wpp-partner-img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.04);
}

/* Nut: day mui ten sang phai */
.wpp-btn .wpp-ic { transition: transform 0.25s; }
.wpp-btn:hover .wpp-ic { transform: translateX(4px); }

/* Lien ket trong chan trang va menu */
.wpp-ft-list a,
.wpp-nav-link { transition: color 0.25s; }

/* ---------- 3. Man hinh cho ---------- */
html.wpp-loading,
html.wpp-loading body { overflow: hidden; }

.wpp-preloader {
    /* Theme KHONG khai bien --wpp-* o :root ma khai tren mot danh sach selector
       co pham vi (.wpp-sec, .wpp-nav, .wpp-footer, .wpp-modal...). Man hinh cho
       khong thuoc danh sach do nen moi bien deu rong: nen trong suot, logo vo
       hinh — thanh ra mot lop chan thao tac nhin khong thay. Khai lai dung 2 bien
       can dung ngay tai day, khong sua rule dung chung o tren. */
    --wpp-ink: #061450;
    --wpp-white: #ffffff;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wpp-ink);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.wpp-preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

.wpp-preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.wpp-preloader-logo {
    position: relative;
    display: block;
    /* Do lai 11/09: ban 168px chi chiem 12% be ngang man 1440 — nho hut tren man
       to. Nang len 240px (17%). Tren dien thoai thi `max-width` chan lai: 50vw =
       195px tren may 390px, tuc van to hon ban cu (168px) mot chut chu khong
       phinh ra chiem nua man. */
    width: 240px;
    max-width: 50vw;
    animation: wpp-pl-fade 0.7s ease both;
}

/* Ban du phong khi trinh duyet khong ho tro mask: bien logo mau thanh bong
   TRANG bang filter (cach theme moongate dung cho `.img-filter`), de con doc
   duoc tren nen toi. */
.wpp-preloader-img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.wpp-preloader-mark,
.wpp-preloader-shine { display: none; }

/* Co mask thi dung ban mask: bong logo duoc to bang mau minh chon, va vet sang
   chay THEO DUNG HINH LOGO chu khong quet tren mot khung chu nhat. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .wpp-preloader-img { visibility: hidden; }

    .wpp-preloader-mark,
    .wpp-preloader-shine {
        position: absolute;
        inset: 0;
        display: block;
        -webkit-mask-image: var(--wpp-pl-logo);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-image: var(--wpp-pl-logo);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .wpp-preloader-mark { background: rgba(255, 255, 255, 0.72); }

    .wpp-preloader-shine {
        background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
        background-size: 200% 100%;
        animation: wpp-pl-shine 2.4s linear infinite;
    }
}

.wpp-preloader-bar {
    position: relative;
    /* PHAI bang dung be ngang logo o tren — lech mot ly la thanh tien trinh
       khong con thang hang voi logo, nhin ra ngay. */
    width: 240px;
    max-width: 50vw;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.wpp-preloader-bar::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: 2px;
    background: var(--wpp-white);
    animation: wpp-pl-bar 1.15s ease-in-out infinite;
    content: "";
}

@keyframes wpp-pl-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes wpp-pl-shine {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

@keyframes wpp-pl-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* ---------- 4. Ton trong lua chon tat hieu ung cua nguoi dung ---------- */
@media (prefers-reduced-motion: reduce) {
    .wpp-rv,
    .wpp-rv.is-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .wpp-work-card:hover,
    .wpp-svc-cell:hover,
    .wpp-card:hover { transform: none; }

    .wpp-preloader-logo,
    .wpp-preloader-shine,
    .wpp-preloader-bar::after { animation: none; }
}
/* END: BLOCK_WPP_HIEU_UNG */

/* BEGIN: BLOCK_WPP_TAM_AN */
/* =========================================================================
   TAM AN — cho nhung khoi chi an TAM THOI, chua xoa.
   Moi rule bat buoc ghi ro: an cai gi, tren trang nao. Muon hien lai thi xoa
   dung doan rule do roi day lai khoi CSS nay — khong dong toi cau truc trang
   nen bat/tat bao nhieu lan cung duoc.
   ========================================================================= */

/* Khoi CTA "Cung Viet Ba kien tao gia tri truyen thong" (block 92qhrae).

   An TREN MOI TRANG DANG DUNG NO: 12 trang — Gioi thieu, Du an, Chi tiet du an,
   Dich vu va 8 trang dich vu con + trang To chuc su kien. Moi trang co 2 row
   (may tinh / dien thoai) nen tong cong 24 row.

   VI SAO an theo MA BLOCK chu khong liet ke 24 ma row: TRANG CHU KHONG HE
   dung block nay (8 khoi cua trang chu khong co khoi CTA nao), nen khong co
   trang nao phai chua — mot rule theo ma block la trung het, khong the sot mot
   ban thiet bi hay mot trang them ve sau. Liet ke 24 ma row chi dai va de sot.

   Neu sau nay trang chu CO them block 92qhrae ma van muon giu, thi quay lai
   cach an theo ma ROW (liet ke row cua tung trang, tru row cua trang chu) —
   CSS khong co cach noi "block nay tru tren trang kia" bang mot rule. */
[nh-block="92qhrae"] { display: none; }
/* END: BLOCK_WPP_TAM_AN */

/* BEGIN: BLOCK_WPP_FONT */
/* =========================================================================
   FONT CHU CUA SITE — Be Vietnam Pro (ban chot 10/09/2026)
   =========================================================================
   TRUOC DAY: `font-family: system-ui, ...` — tuc la font MAC DINH CUA MAY nguoi
   xem. May Windows ra Segoe UI, may Mac ra SF Pro; khong phai mot lua chon thiet
   ke ma la muc "chua chon font". Do la ly do khach thay giao dien "kha don gian".

   VI SAO Be Vietnam Pro: do mot xuong chu Viet thiet ke nen dau tieng Viet day du
   o moi do dam — thu voi chuoi kiem `AEOOUY... hoang trieu duoc` khong mat dau,
   khong o vuong.

   TU HOST trong assets/fonts/, KHONG nhung link Google: theme von tu host het
   (Quicksand, Roboto, Font Awesome deu nam o day), va goi ra ngoai thi trang phu
   thuoc mang ben thu ba.

   Duong dan la `../fonts/` vi tep nay duoc ghep vao assets/css/custom.css —
   tinh tuong doi tu vi tri CUA TEP CSS, khong phai tu goc site.

   Do dam: 300/400/500/600/700.
   600 tung bi bo (11/09 sang) de tiet 33KB, roi NAP LAI (11/09 chieu) vi user
   chot tieu de muc dung font-weight 600. Khong nap lai thi trinh duyet tu bia
   net dam tu ban 400 — chu se meo, khong phai net that cua font.

   Chi nap 3 bo ky tu: vietnamese, latin, latin-ext. Trinh duyet chi tai bo nao
   thuc su can (trang tieng Viet ~ viet + latin), nen con so tai that nho hon
   tong dung luong tep tren dia.

   `font-display: swap` de chu hien ngay bang font du phong trong luc font dang
   tai — khong de trang trang mot khoang.
   ========================================================================= */

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/bevietnampro-300-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/bevietnampro-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/bevietnampro-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bevietnampro-400-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bevietnampro-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bevietnampro-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/bevietnampro-500-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/bevietnampro-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/bevietnampro-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/bevietnampro-700-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/bevietnampro-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/bevietnampro-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/bevietnampro-600-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/bevietnampro-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/bevietnampro-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ghi de dong khai font o khoi TOKEN (dong 31). PHAI dung DUNG danh sach selector
   do — theme khong khai bien/font o :root ma khai tren danh sach nay; viet
   selector khac la khong an, viet it hon la sot cho. Rule dat SAU nen thang o
   the ngang co uu tien. */
.wpp-sec,
.wpp-nav,
.wpp-nav-panel,
.wpp-footer,
.wpp-footer-bottom,
.wpp-modal {
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Man hinh cho khong nam trong danh sach tren (da tung lam logo vo hinh vi dung
   ly do nay) — khai rieng cho no. */
.wpp-preloader {
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* END: BLOCK_WPP_FONT */

/* BEGIN: BLOCK_WPP_DO_SAU */
/* =========================================================================
   THANG CHU + CHIEU SAU  (phan hoi khach y 2 va y 3, ban chot 5A)
   =========================================================================
   Khoi nay chi GHI DE, khong sua rule cu — dat cuoi tep nen thang o the ngang
   uu tien. Muon bo thi xoa nguyen khoi, khong dong toi gi khac.
   ========================================================================= */

/* ---------- 1. GOM THANG CHU ----------
   Do tren 5 trang that: site dang co 25 cap (co chu, do dam) khac nhau, nhieu
   cap chi lech nhau 1-2px ma vai tro y het (30 vs 32, 22 vs 23, 15 vs 14).
   Bac nao cung gan bac nao thi khong bac nao noi len — do la mot phan cua cai
   khach goi la "cac noi dung kha dong deu".

   Gom ve 8 co: 52 / 40 / 32 / 24 / 18 / 16 / 14 / 12.
   (Dai chu chay .wpp-marquee-row 96px khong tinh — no la hinh trang tri, khong
   phai mot bac doc.) */

/* 30 -> 32: cung vai tro "nam" voi .wpp-modal-year da la 32/700 */
.wpp-history-year { font-size: 32px; }

/* 23 va 22 -> 24: ca hai deu la "tieu de mot muc trong danh sach" */
.wpp-history-title { font-size: 24px; text-align: left;}
.wpp-service-title { font-size: 24px; }

/* 19 -> 16: day la nhan cua nut "Menu", khong phai tieu de. De 19px thi no to
   ngang tieu de phu, lam thanh dieu huong tranh cho voi noi dung. */
.wpp-nav-toggle { font-size: 16px; font-weight: 500; }

/* 24/400 -> 24/300: cung co voi .wpp-about-title (24/300) ma khac do dam,
   khong co ly do */
.wpp-modal-title { font-weight: 300; }

/* 18/400 -> 14/700 viet hoa: tieu de cot chan trang dang TO BANG cau mo ta dan
   (18/300) nen doc ra khong biet dau la tieu de. Ha co + tang do dam + viet hoa
   thi doc ra ngay la nhan cot. */
.wpp-ft-col-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* 15 -> 14: bac 15px khong mang vai tro nao rieng, chi lam thang chu them rac */
.wpp-nav-lang-btn { font-size: 14px; }
.wpp-nav-lang-list a { font-size: 14px; }
.wpp-worktab-nav .wpp-worktab-btn { font-size: 14px; }

/* 600 -> 700: o co chu 14-16px thi 600 va 700 gan nhu khong phan biet duoc bang
   mat, ma moi do dam la MOT TEP FONT phai tai. Bo han 600 => bot ~33KB. */
.wpp-history-text .hl { font-weight: 700; }
.wpp-nav-lang-list li.is-active a { font-weight: 700; }
.wpp-ch-text { font-weight: 700; }
.wpp-proj-back { font-weight: 700; }

/* ---------- 2. CHIEU SAU ----------
   Khach hoi "phang la do chua lam hay do co y?". Phang LA CO Y — wpp.com von
   gan nhu khong bong do. Nhung dang phang qua muc: do duoc chi 1/588 phan tu o
   trang chu co bong, va the anh khong co ca mot duong vien de tach khoi nen.
   Them dung ba thu: vien manh, nen doi khi di chuot, bong RAT nhat chi hien luc
   di chuot. Luc dung yen trang van phang. */

/* 2.1 Vien manh quanh khung anh.
   PHAI dung lop phu ::after chu KHONG dung `box-shadow: inset` tren chinh khung:
   the <img> la con nen se ve de len inset shadow -> chi the KHONG co anh moi
   hien vien. Da mac dung loi nay hom 09/09 voi o logo dai. */
.wpp-card-media,
.wpp-service-media,
.wpp-work-media { position: relative; }

.wpp-card-media::after,
.wpp-service-media::after,
.wpp-work-media::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--wpp-line);
    pointer-events: none;
    content: "";
}

/* 2.2 Di chuot: nen am len + bong rat nhat.
   Bong chi 0.10 alpha va chi khi hover — dam hon la thanh template pho thong,
   roi xa mau WPP. */
.wpp-card,
.wpp-work-card,
.wpp-svc-cell,
.wpp-svc-tile,
.wpp-service-card {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease,
                background-color 0.3s ease;
}

.wpp-card:hover,
.wpp-work-card:hover,
.wpp-svc-cell:hover,
.wpp-svc-tile:hover,
.wpp-service-card:hover {
    background-color: var(--wpp-cream);
    box-shadow: 0 10px 28px rgba(10, 30, 120, 0.10);
}

/* 2.3 Thanh dieu huong: gach chan chay tu trai sang.
   Khach noi "cac thanh menu dang de kha don gian" — truoc day di chuot vao chi
   doi mau chu, khong co gi bao la bam duoc. Dung transform: scaleX de chay muot,
   khong dung `width` (width lam trinh duyet tinh lai bo cuc moi khung hinh). */
.wpp-nav-link,
.wpp-ft-list a {
    position: relative;
    text-decoration: none;
}

.wpp-nav-link::after,
.wpp-ft-list a::after {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    content: "";
}

.wpp-nav-link:hover::after,
.wpp-ft-list a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Nut loc du an: dang chi doi mau, them gach chan cho biet dang o tab nao */
.wpp-worktab-nav .wpp-worktab-btn { position: relative; }

.wpp-worktab-nav .wpp-worktab-btn.active::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 2px;
    background: currentColor;
    content: "";
}

/* ---------- 3. Ton trong lua chon tat hieu ung ---------- */
@media (prefers-reduced-motion: reduce) {
    .wpp-card,
    .wpp-work-card,
    .wpp-svc-cell,
    .wpp-svc-tile,
    .wpp-service-card { transition: none; }

    .wpp-nav-link::after,
    .wpp-ft-list a::after { transition: none; }
}
/* END: BLOCK_WPP_DO_SAU */

/* BEGIN: BLOCK_WPP_SUA_PHANHOI */
/* =========================================================================
   SUA THEO PHAN HOI 10/09 — y 1, 3, 4
   ========================================================================= */

/* ---------- Y 1: di chuot thi CHI anh doi, khong to nen ca the ----------
   Hom nay toi them `background-color` + nang the len khi di chuot. Nhin ra thanh
   MOT CAI HOP bao quanh ca anh lan chu — dung cai user vua bao la khong can.

   Bo han hai thu do. Anh VON DA CO hieu ung phong to san trong theme
   (`.wpp-card:hover .wpp-card-img { transform: scale(1.02) }` va cac rule cung
   kieu cho work / svc / service), nen chi can chuyen bong tu THE sang KHUNG ANH
   la hieu ung nam gon trong anh. */
.wpp-card:hover,
.wpp-work-card:hover,
.wpp-svc-cell:hover,
.wpp-svc-tile:hover,
.wpp-service-card:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Bong chuyen xuong khung anh — hieu ung "om" lay anh chu khong om ca the */
.wpp-card-media,
.wpp-work-media,
.wpp-svc-media,
.wpp-service-media { transition: box-shadow 0.3s ease; }

.wpp-card:hover .wpp-card-media,
.wpp-work-card:hover .wpp-work-media,
.wpp-svc-tile:hover .wpp-svc-media,
.wpp-service-card:hover .wpp-service-media {
    box-shadow: 0 10px 24px rgba(10, 30, 120, 0.14);
}

/* ---------- Y 3: hai nut tren thanh dieu huong cho bang nhau ----------
   Do that: nut ngon ngu 63x40, nut Menu 124x48 — lech 8px chieu cao va 2 bac
   co chu, nen nhin ra "cai to cai nho". Cho cung chieu cao va cung co chu;
   be ngang van khac nhau vi chu khac nhau, do la binh thuong. */
.wpp-nav-toggle {
    height: 40px;
    padding: 0 18px;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.wpp-nav-lang-btn {
    height: 40px;
    padding: 0 14px;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Y 4: anh bia tren dien thoai bi cat mat hon nua ----------
   `.wpp-post-cover` de `aspect-ratio: 3/4` (KHUNG DOC) va chi doi sang 16/9 tu
   1024px tro len. Quy tac do hop voi anh bao chi chup doc, nhung:

     - 30/30 anh bia DU AN deu la anh NGANG ti le 1,70
     - 13/13 anh bia TIN TUC cung la anh NGANG (1,33 - 1,82)

   Khong co mot anh doc nao tren site. Nhet anh ngang vao khung doc thi cat mat
   56% be ngang — dung cai anh chup user gui (VIETCOMBANK LAOS mat nua chu).

   Do doi chung: tren PC khung 1,78 chi bo 5%; tren dien thoai khung 0,75 bo 56%.
   Nen day la loi RIENG cua ban dien thoai, khong phai lua chon thiet ke.

   Dat 16/9 cho MOI be ngang. Rule nay nam sau rule @media (min-width:1024px)
   trong tep nen thang o ca man rong — va o do no cung cho ra 16/9 y het cu. */
.wpp-post-cover { aspect-ratio: 16 / 9; }

/* ---------- Ton trong lua chon tat hieu ung ---------- */
@media (prefers-reduced-motion: reduce) {
    .wpp-card-media,
    .wpp-work-media,
    .wpp-svc-media,
    .wpp-service-media { transition: none; }
}

/* ---------- Menu tren dien thoai: 32px -> 19px ----------
   Rule goc `.wpp-nav-link { font-size: 32px }` ap cho MOI be ngang, tu 768px tro
   len moi bi de xuong 18px. Nghia la chi ban DIEN THOAI moi an 32px — to that.

   Phai kem line-height: 32px di voi line-height 35.2px; giu nguyen so do cho chu
   19px thi dong cach nhau gan gap doi chieu cao chu, doc ra thua thot. */
@media (max-width: 767px) {
    .wpp-nav-link {
        font-size: 19px;
        line-height: 26px;
    }
}

/* ---------- Video hero tren dien thoai bi cat 58% ----------
   Cung mot khuon loi voi `.wpp-post-cover`: khung de `aspect-ratio: 3/4` (DOC) va
   chi doi sang 16/9 tu 1024px tro len. Nhung video nguon la 1920x1080, tuc 16:9
   NGANG — nhet vao khung doc thi `object-fit: cover` cat mat 58% be ngang.

   Do doi chung: PC khung 1,78 = dung ti le goc, khong cat; dien thoai khung 0,75.
   Dat 16/9 cho moi be ngang de video luon dung ti le goc.

   KHONG dung tren `.wpp-sec--hero-left .wpp-hero-media` (dang de 1920/945 rieng
   cho dai hero cua trang danh sach) — rule do 2 lop nen van thang rule 1 lop nay. */
.wpp-hero-media { aspect-ratio: 16 / 9; }

/* ---------- O dich vu: phong anh manh hon khi di chuot ----------
   User chot 11/09: doi tu scale(1.03) sang scale(1.5).

   An toan vi khung `.wpp-svc-media` da co `overflow: hidden` + `aspect-ratio 4/3`
   — anh phong to bi cat gon trong khung, khong tran ra ngoai o hay day bo cuc.

   Giu nguyen `transition: transform 0.3s` co san nen van chay muot, khong giat. */
.wpp-svc-tile:hover .wpp-svc-img { transform: scale(1.5); }

/* ---------- The du an: phong anh manh hon khi di chuot ----------
   User chot 11/09: doi tu scale(1.02) sang scale(1.5), cung kieu voi o dich vu.

   An toan ve bo cuc: khung `.wpp-work-media` da co `overflow: hidden` — anh phong
   to bi cat gon trong khung, khong tran ra ngoai the.

   ⚠️ Anh huong 5 trang: /du-an (30 the) · /san-xuat-truyen-hinh (12) ·
   /quang-cao-ngoai-troi (6) · /digital-marketing-dv (5) · tung trang chi tiet du
   an (3). Day la lop dung chung, khong neo rieng duoc trang nao. */
.wpp-work-card:hover .wpp-work-img { transform: scale(1.5); }
/* END: BLOCK_WPP_SUA_PHANHOI */

/* BEGIN: BLOCK_WPP_TINH_CHINH */
/* =========================================================================
   TINH CHINH THEO PHAN HOI — y 1, 2, 3, 4
   ========================================================================= */

/* ---------- Y1: thu tu chu trong dau muc, to -> nho ----------
   Do that: nhan tren cung 16px/700 (DAM), tieu de duoi 32-52px/300 (MANH).
   Chu nho ma DAM dat tren chu to ma MANH thi mat doc ra hai nhan tranh nhau,
   khong doc ra "nhan phu roi den tieu de" — do la goc cua cam giac sai thu tu.

   Cach xu ly: khong bo nhan (no dang mang thong tin: DICH VU / DU AN / VE CHUNG
   TOI), ma ha han xuong thanh NHAN SIEU NHO — 12px, khong dam, gian chu, mau nhat.
   Khi do mat doc theo dung thu tu tieu de (to) -> mo ta (vua) -> nhan (nho),
   dung y "tu to den nho" ma khong phai dao lon bo cuc. */
.wpp-partner-eyebrow,
.wpp-eyebrow {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpp-muted);
    margin-bottom: 12px;
}

/* NGOAI LE: `.wpp-ch-eyebrow` KHONG phai nhan phu — no la TIEU DE that su cua dai
   logo dai truyen hinh (khong co the tieu de nao khac dung sau no). De 16px/700
   thi dai nay co tieu de nho hon han moi dai khac tren site. Nang len bang co
   tieu de muc de ca site cung mot bac. */
.wpp-ch-eyebrow {
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 300;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

/* ---------- Y2: an dai "Phat trien ben vung" ----------
   Block wl4suym chi nam o TRANG CHU (2 row: p6rjz1q may tinh, hi4mut3 dien thoai)
   nen an theo ma block la trung dung mot cho, khong the sot ban thiet bi nao.
   Bo an = xoa dung dong nay. */
[nh-block="wl4suym"] { display: none; }

/* ---------- Y3: chan trang gon lai, hai cot can nhau ----------
   Do that truoc khi sua:
     PC     : chan trang cao 621px — cot "Lien ket" 7 muc xep 1 hang doc,
              cot "Dich vu" 6 muc xep 2 cot (3+3) nen thap hon han
     Mobile : cao 1415px, trong do rieng khoi van phong da 545px

   Sua 3 cho: cho ca hai danh sach cung xep 2 cot, thu gon khoi van phong, va
   bot khoang thua. */

/* Ca hai danh sach deu 2 cot.
   CHU Y: `column-count` KHONG dung duoc o day — `.wpp-ft-list` la `display: flex`
   (con ban --split la `display: grid`), ma column-count bi bo qua tren ca hai loai
   hop do. Da thu va do lai: cot "Lien ket" van cao 228px y nguyen. Phai doi han
   sang grid 2 cot moi an. */
@media (min-width: 768px) {
    .wpp-ft-col .wpp-ft-list:not(.wpp-ft-list--split) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 10px;
    }
}

/* Bot khoang thua giua khoi tren va khoi van phong */
.wpp-ft-offices { padding-top: 32px; }
.wpp-ft-main { row-gap: 32px; padding-bottom: 32px; }

/* Dien thoai: danh sach 2 cot (cung phai la grid), dong sat lai */
@media (max-width: 767px) {
    .wpp-ft-col .wpp-ft-list,
    .wpp-ft-col .wpp-ft-list--split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 8px;
    }
    .wpp-ft-list a { line-height: 1.35; }
    .wpp-ft-office-line { line-height: 1.4; }
    .wpp-ft-offices { padding-top: 24px; }
    .wpp-ft-office-grid { gap: 20px; }
}

/* ---------- Y4: chu de doc, khong con xanh toan trang ----------
   Truoc: MOI chu tren site deu la `var(--wpp-navy)` #0a1e78 — ke ca doan van dai.
   Xanh dam dung cho ca doan van thi vua kho doc vua lam mat gia tri diem nhan cua
   chinh mau thuong hieu.

   Dat mau chu nen la mot mau DEN DIU (#1b1f2a) — khong dung #000 vi den tuyet doi
   tren nen trang gay choi mat va nhin re. Mau nay hoi ngam xanh nen dung canh
   navy khong bi lech tone.

   Tieu de, lien ket, thanh dieu huong VAN GIU navy: do la cho mau thuong hieu can
   xuat hien. Bo het xanh moi la lam mat nhan dien. */
.wpp-sec,
.wpp-modal,
.wpp-abv {
    --wpp-text: #1b1f2a;
    --wpp-muted: #5a6076;
    color: var(--wpp-text);
}

/* Nhung the chu thuong -> mau den diu */
.wpp-b2,
.wpp-b3,
.wpp-sec-desc,
.wpp-about-text,
.wpp-post-content,
.wpp-history-text,
.wpp-feature-desc,
.wpp-hero-desc,
.wpp-card-desc { color: var(--wpp-text); }

/* Tieu de bang dich vu o trang gioi thieu: dam hon + mau den diu (user chot) */
.wpp-about-title {
    font-weight: 500;
    color: var(--wpp-text);
}

/* ---------- Chua chay: dai NEN TOI phai giu chu sang ----------
   Loi tu do khi doi mau chu: `.wpp-split-desc` von co `color: white` nhung chi 1
   lop, ma rule `.wpp-b3 { color: den diu }` cua toi cung 1 lop va dung SAU nen
   thang. Ket qua: chu #1b1f2a tren nen navy #0a1e78 — tuong phan 1.2, khong doc
   noi. Nhan mau khi do mau tren 6 trang, khong phai nhin bang mat.

   Sua bang selector 2 LOP de chac chan thang rule 1 lop o tren.
   `.wpp-sec--feature` dang bi an nhung van khai phong khi nao bat lai. */
.wpp-sec--split .wpp-b2,
.wpp-sec--split .wpp-b3,
.wpp-sec--split .wpp-split-desc,
.wpp-sec--feature .wpp-b2,
.wpp-sec--feature .wpp-b3,
.wpp-sec--feature .wpp-feature-desc { color: var(--wpp-white); }

.wpp-sec--split .wpp-eyebrow,
.wpp-sec--split .wpp-partner-eyebrow,
.wpp-sec--feature .wpp-eyebrow,
.wpp-sec--feature .wpp-partner-eyebrow { color: rgba(255, 255, 255, 0.72); }
/* END: BLOCK_WPP_TINH_CHINH */

/* BEGIN: BLOCK_WPP_LANDING_SXTH */
/* =========================================================================
   LANDING DICH VU — cat lai theo mau framer.com/solutions/marketers
   =========================================================================
   User chot: GIU NEN SANG hoan toan, xen ke trang/kem giong trang chu.
   Mau Framer gan nhu den tuyen — o day chi muon BO CUC, DUONG KE va KHOANG THO
   cua mau, khong muon bang mau.

   Scope: chi cac dai cua landing dich vu (.wpp-sec--sdhero / --sdcap) va dai
   "du an tieu bieu" tren chinh trang do. KHONG dung toi trang khac.
   ========================================================================= */

/* ---------- 1. Khoang tho 120px ----------
   Mau dem doc 120px/120px moi dai; site dang 64-96px. Day la thu de nhan ra
   nhat khi dat 2 trang canh nhau. */
@media (min-width: 1024px) {
    .wpp-sec--sdhero { padding-top: 96px; padding-bottom: 72px; }
    .wpp-sec--sdcap  { padding: 120px 0; }
}

/* ---------- 2. Nen xen ke trang / kem (giong trang chu) ---------- */
.wpp-sec--sdcap { background: var(--wpp-cream); }

/* ---------- 3. Hero: chu trai — nut phai ----------
   Mau xep mo ta va hanh dong tren MOT hang o man rong, khong xep chong. */
.wpp-sd-hero-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.wpp-sd-hero-desc { max-width: 720px; }

@media (min-width: 1024px) {
    .wpp-sd-hero-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 48px;
        margin-top: 32px;
    }
    .wpp-sd-hero-row .wpp-sd-btn { flex: 0 0 auto; }
}

/* ---------- 4. DAU MUC kieu mau: tieu de TRAI + nut PHAI + duong ke duoi ----------
   Day la chu ky ro nhat cua mau — khong dai nao cua ho dung tieu de can giua. */
.wpp-sd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--wpp-line);
}

.wpp-sd-head .wpp-sd-cap-title { margin: 0; max-width: 20ch; }
.wpp-sd-head-btn { flex: 0 0 auto; }

/* ---------- 5. Luoi 6 o chia bang DUONG KE MANH ----------
   Mau khong dung bong do, khong bo goc to — cac o dinh nhau, phan cach chi bang
   duong ke 1px. Vi vay KHONG dat `gap` giua cac o: co gap thi duong ke dut doan,
   mat dung cai cam giac "mot tam luoi lien mach" cua mau. */
.wpp-sd-cap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
}

.wpp-sd-cap {
    padding: 28px 0;
    border-bottom: 1px solid var(--wpp-line);
}

.wpp-sd-cap-name {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    /* Mau dung xanh la #00bb88 cho tieu de o; doi sang CAM cua logo Viet Ba */
    color: var(--wpp-accent-ink);
}

.wpp-sd-cap-desc {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--wpp-text, #1b1f2a);
    max-width: 46ch;
}

@media (min-width: 768px) {
    .wpp-sd-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wpp-sd-cap { padding: 28px 24px; }
    /* duong ke doc giua cac cot — bo cot dau moi hang de khong thua ke ngoai bien */
    .wpp-sd-cap { border-left: 1px solid var(--wpp-line); }
    .wpp-sd-cap:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

@media (min-width: 1024px) {
    .wpp-sd-cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wpp-sd-cap { padding: 32px 28px; }
    .wpp-sd-cap:nth-child(2n + 1) { border-left: 1px solid var(--wpp-line); padding-left: 28px; }
    .wpp-sd-cap:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
    /* hai o cuoi hang duoi cung: bo duong ke duoi cho gon vien luoi */
    .wpp-sd-cap:nth-last-child(-n + 3) { border-bottom: 0; }
}

/* ---------- 6. Dai "Du an tieu bieu" tren chinh trang nay ----------
   Cho dung mot kieu dau muc voi luoi nang luc: tieu de trai, duong ke duoi.

   ⚠️ PHAI neo theo ma block `duaefsc`. Lop `.wpp-sec--workmore` dung chung voi
   dai "Du an khac" cua CA 30 TRANG CHI TIET DU AN — viet tran la doi luon dem
   doc va duong ke cua 30 trang do, ngoai pham vi hang muc nay. */
[nh-block="duaefsc"] .wpp-sec--workmore .wpp-sec-head {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--wpp-line);
}

@media (min-width: 1024px) {
    [nh-block="duaefsc"] .wpp-sec--workmore { padding: 120px 0 96px; }
}

/* ---------- 7. Giu dung nhip xen ke trang / kem ----------
   Do lai sau khi day len: dai "nang luc" (kem) va dai "du an tieu bieu" (cung
   kem) nam SAT NHAU -> mat han xen ke, nhin ra mot mang kem lien khoi.

   Phai neo theo MA BLOCK chu khong theo `.wpp-sec--workmore`: lop do dung chung
   ca o trang chi tiet du an ("Du an khac"), sua thang la anh huong 30 trang kia.
   `duaefsc` la khoi du an tieu bieu RIENG cua trang San xuat truyen hinh. */
[nh-block="duaefsc"] .wpp-sec--workmore { background: var(--wpp-white); }
/* END: BLOCK_WPP_LANDING_SXTH */

/* BEGIN: BLOCK_WPP_LANDING_DM */
/* =========================================================================
   LANDING DIGITAL MARKETING — cat theo bo PDF "Digital Portfolio" cua Viet Ba
   =========================================================================
   ⛔ LUAT CUA JOB: moi landing dich vu KHAC BO CUC nhau.
      /san-xuat-truyen-hinh : nen trang/kem · nhan NAVY · luoi o chia bang DUONG KE MANH
      trang nay            : nen trang      · nhan CAM   · VIEN THUOC danh so + HOP CAM DAC
   Khong dung lai mot lop nao cua `.wpp-sd-*` — do la bo cua trang kia.

   Mau cam lay tu bien san co cua site (`--wpp-accent` #ff7425 / `--wpp-accent-ink`
   #d1500a), gan trung mau cam #F58220 cua bo PDF. Khong them mau moi.
   ========================================================================= */

/* ---------- Hero ---------- */
.wpp-sec--dmhero { padding: 72px 0 56px; background: var(--wpp-white); }

.wpp-dm-title { margin: 0; }
/* Chu ky cua bo PDF: dong thu hai cua tieu de doi sang mau cam */
.wpp-dm-title-cam { color: var(--wpp-accent-ink); }

.wpp-dm-hero-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}
.wpp-dm-hero-desc { max-width: 760px; }

/* Nut CAM — trang kia dung nut navy. Phai khai rieng vi theme chi co --navy. */
.wpp-btn--cam {
    background: var(--wpp-accent-ink);
    color: var(--wpp-white);
    border-color: var(--wpp-accent-ink);
}
.wpp-btn--cam:hover { background: #b8460a; color: var(--wpp-white); }

@media (min-width: 1024px) {
    .wpp-sec--dmhero { padding: 96px 0 72px; }
    .wpp-dm-hero-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 32px; }
    .wpp-dm-btn { flex: 0 0 auto; }
}

/* ---------- Dai SO LIEU: hop cam dac ----------
   Bo PDF dat so lieu trong hop cam dac chu khong phai o vien mong — day la thu
   de phan biet nhat voi trang Framer. So lay NGUYEN VAN tu PDF, khong lam tron. */
.wpp-sec--dmstat { padding: 0 0 56px; background: var(--wpp-white); }

.wpp-dm-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wpp-dm-stat {
    padding: 24px 20px;
    border-radius: 6px;
    background: var(--wpp-accent-ink);
    color: var(--wpp-white);
}

.wpp-dm-stat-so {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.wpp-dm-stat-mo-ta {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 1024px) {
    .wpp-sec--dmstat { padding: 0 0 96px; }
    .wpp-dm-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .wpp-dm-stat { padding: 28px 24px; }
    .wpp-dm-stat-so { font-size: 40px; line-height: 44px; }
}

/* ---------- 4 GIAI PHAP: vien thuoc cam danh so ----------
   Bo PDF (tr2) xep 4 muc thanh cac VIEN THUOC CAM co so thu tu ben trai.
   Xep DOC thanh danh sach, khong phai luoi — khac han luoi 3 cot cua trang kia. */
.wpp-sec--dmgp { padding: 56px 0; background: var(--wpp-cream); }

.wpp-dm-sec-title { margin: 0 0 28px; }

.wpp-dm-gp-list { display: grid; gap: 12px; }

.wpp-dm-gp {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 9999px 12px 12px 9999px;
    background: var(--wpp-white);
}

.wpp-dm-gp-so {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wpp-accent-ink);
    color: var(--wpp-white);
    font-size: 15px;
    font-weight: 700;
}

.wpp-dm-gp-name {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--wpp-navy);
}

.wpp-dm-gp-desc {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--wpp-text, #1b1f2a);
}

@media (min-width: 1024px) {
    .wpp-sec--dmgp { padding: 96px 0; }
    .wpp-dm-gp { padding: 24px 28px; gap: 24px; }
    .wpp-dm-gp-so { width: 52px; height: 52px; font-size: 17px; }
}

/* ---------- CASE STUDY THEO NGANH ---------- */
.wpp-sec--dmcase { padding: 56px 0; background: var(--wpp-white); }

.wpp-dm-case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.wpp-dm-case {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--wpp-line);
    border-radius: 8px;
    background: var(--wpp-white);
}

/* Dau muc "NGANH HANG  <ten nganh mau cam>" — dung cach bo PDF ghi o moi trang case */
.wpp-dm-case-nganh {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.wpp-dm-case-nganh-nhan { color: var(--wpp-muted, #5a6076); }
.wpp-dm-case-nganh-ten { font-weight: 700; color: var(--wpp-accent-ink); }

.wpp-dm-case-ten {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-dm-case-dong {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 21px;
    color: var(--wpp-text, #1b1f2a);
}
.wpp-dm-case-dong b { font-weight: 700; color: var(--wpp-navy); }

/* Hop so lieu cam, day xuong day the de cac the bang nhau */
.wpp-dm-case-so {
    margin: 16px 0 0;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 4px;
    background: var(--wpp-accent-ink);
    color: var(--wpp-white);
    font-size: 14px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .wpp-dm-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .wpp-sec--dmcase { padding: 96px 0; }
    .wpp-dm-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .wpp-dm-case { padding: 28px; }
}

/* ---------- Ton trong lua chon tat hieu ung ---------- */
@media (prefers-reduced-motion: reduce) {
    .wpp-btn--cam { transition: none; }
}

/* ---------- Sua sau khi do tuong phan ----------
   Do that: chu TRANG tren nen cam #d1500a chi dat ti le 4.3 — dat cho chu to
   (>=24px) nhung KHONG dat chuan AA cho chu nho (can 4.5). Ma hop so lieu va hop
   case study deu co dong mo ta 14px.

   Lam dam cam RIENG cho hai loai hop do (#a63e08 -> ~5.3), giu #d1500a cho tieu
   de va nhan vi o do chu to nen 4.3 la du. Khong doi bien chung cua site. */
.wpp-dm-stat { background: #a63e08; }
.wpp-dm-case-so { background: #a63e08; }

/* Do lai lan 2, con 3 cho nua cung dinh dung ti le 4.3:
     - nut viet thuoc danh so (chu trang 17px tren nen cam)
     - nhan nganh trong the case (chu cam 12px tren nen trang)
     - chu trong nut CTA cam
   Deu la chu NHO nen phai dat 4.5. Dung chung sac cam dam #a63e08. */
.wpp-dm-gp-so { background: #a63e08; }
.wpp-dm-case-nganh-ten { color: #a63e08; }
.wpp-btn--cam { background: #a63e08; border-color: #a63e08; }
.wpp-btn--cam:hover { background: #8c3406; border-color: #8c3406; }
/* END: BLOCK_WPP_LANDING_DM */

/* BEGIN: BLOCK_WPP_LANDING_OOH */
/* =========================================================================
   LANDING OOH — tham khao havasmedianetwork.com/our-services/havas-market
   =========================================================================
   ⛔ LUAT CUA JOB: ba landing, ba kieu.
     /san-xuat-truyen-hinh : nen SANG · navy · luoi o chia bang duong ke manh
     /digital-marketing-dv : nen SANG · CAM  · vien thuoc danh so + hop cam dac
     trang nay             : nen TOI  · ANH CAT CHEO + 4 COT VACH NGAN DOC

   Mau nen: `--wpp-ink` #061450 cua site, KHONG phai den tuyen nhu Havas — user
   chot giu mau cua site. Khong them mau moi.
   ========================================================================= */

/* ---------- Hero nen toi + anh cat cheo ---------- */
.wpp-sec--oohero { padding: 0; background: var(--wpp-ink); }

.wpp-ooh-hero { position: relative; display: flex; flex-direction: column; }

.wpp-ooh-hero-chu { padding: 56px 0 40px; }

.wpp-ooh-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.wpp-ooh-title {
    margin: 0;
    font-size: 40px;
    line-height: 44px;
    font-weight: 300;
    letter-spacing: -0.6px;
    text-transform: uppercase;
    color: var(--wpp-white);
}

/* Chu ky Havas: chu dau tien cua tieu de doi mau nhan */
.wpp-ooh-title-nhan { font-weight: 700; color: var(--wpp-accent); }

.wpp-ooh-sub {
    margin: 16px 0 0;
    max-width: 46ch;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.78);
}

/* ANH CAT CHEO — dung clip-path chu khong phai anh cat san, de doi anh trong
   Admin van giu duoc goc cat. Tren dien thoai cat nhe hon (8%) vi man hep,
   cat sau se an mat chu trong anh. */
.wpp-ooh-hero-anh {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    -webkit-clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}

.wpp-ooh-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
    .wpp-ooh-hero { flex-direction: row; align-items: stretch; min-height: 520px; }
    .wpp-ooh-hero-chu { flex: 1 1 50%; display: flex; align-items: center; padding: 96px 0; }
    .wpp-ooh-hero-anh {
        flex: 1 1 50%;
        aspect-ratio: auto;
        -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    }
    .wpp-ooh-title { font-size: 56px; line-height: 60px; }
}

/* ---------- Dan nhap: mot cot hep tren nen toi ---------- */
.wpp-sec--oohintro { padding: 56px 0; background: var(--wpp-ink); }

.wpp-ooh-intro {
    max-width: 62ch;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.86);
}
.wpp-ooh-intro p { margin: 0 0 14px; }
.wpp-ooh-intro p:last-child { margin-bottom: 0; }

.wpp-ooh-btn {
    margin-top: 28px;
    background: var(--wpp-accent);
    border-color: var(--wpp-accent);
    color: var(--wpp-ink);
}
.wpp-ooh-btn:hover { background: var(--wpp-white); border-color: var(--wpp-white); color: var(--wpp-ink); }

@media (min-width: 1024px) {
    .wpp-sec--oohintro { padding: 96px 0; }
    .wpp-ooh-intro { font-size: 20px; line-height: 32px; }
}

/* ---------- 4 COT VACH NGAN DOC ----------
   Chu ky thu hai cua Havas: 4 cot danh sach, ngan nhau bang VACH DOC manh.
   Khac trang 1 (o luoi chia bang ke NGANG) va trang 2 (vien thuoc). */
.wpp-sec--oohcot { padding: 56px 0; background: var(--wpp-ink); }

.wpp-ooh-sec-title {
    margin: 0 0 32px;
    max-width: 24ch;
    font-size: 32px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--wpp-white);
}

.wpp-ooh-cot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.wpp-ooh-cot {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wpp-ooh-cot-name {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--wpp-white);
}

.wpp-ooh-cot-list ul { margin: 0; padding: 0; list-style: none; }

.wpp-ooh-cot-list li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 16px;
    font-size: 14px;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.78);
}

/* Cham dau dong mau nhan — Havas dung cham do, o day dung cam cua site */
.wpp-ooh-cot-list li::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wpp-accent);
    content: "";
}

@media (min-width: 768px) {
    .wpp-ooh-cot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wpp-ooh-cot { padding: 24px 24px 24px 0; }
    .wpp-ooh-cot:nth-child(2n) { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
}

@media (min-width: 1024px) {
    .wpp-sec--oohcot { padding: 96px 0; }
    .wpp-ooh-cot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wpp-ooh-cot { padding: 0 24px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); }
    /* cot dau khong co vach — vach chi nam GIUA cac cot, khong vien ngoai bien */
    .wpp-ooh-cot:first-child { padding-left: 0; border-left: 0; }
    .wpp-ooh-cot:nth-child(2n) { padding-left: 24px; }
}

/* =========================================================================
   LAT SANG NEN SANG — ban chot 14/09
   =========================================================================
   User: "section wpp-row--sdhero doi nen xanh thanh nen trang chu xanh giong
   trang chu".

   Do truoc khi sua: row `--sdhero` cao 1575px chua CA BA dai cua khoi OOH
   (`--oohero` hero · `--oohintro` dan nhap · `--oohcot` 4 cot), ca ba deu nen
   `#061450`. Nen phai lat ca ba, khong chi rieng hero — lat mot cai thi giua
   trang dut mau.

   Xen ke trang / kem giong trang chu: hero TRANG -> dan nhap KEM -> 4 cot TRANG.

   Chu ky bo cuc cua mau Havas VAN GIU: anh hero cat cheo + 4 cot vach ngan doc.
   Chi doi bang mau, khong doi bo cuc — nen 3 landing van khac nhau ve khuon.
   ========================================================================= */
.wpp-sec--oohero  { background: var(--wpp-white); }
.wpp-sec--oohintro { background: var(--wpp-cream); }
.wpp-sec--oohcot  { background: var(--wpp-white); }

/* ---------- Chu tren nen sang ---------- */
.wpp-ooh-eyebrow { color: var(--wpp-muted, #5a6076); }

/* Rule `.wpp-sec--oohero .wpp-ooh-title { color: white }` o khoi WPP_HERO_TITLE
   la 2 lop — phai viet 2 lop tro len moi thang duoc. */
.wpp-sec--oohero .wpp-ooh-title { color: var(--wpp-navy); }

/* Giu chu ky Havas "chu dau tien doi mau nhan", nhung tren nen trang thi
   `--wpp-accent` #ff7425 chi dat ti le 2.9 — khong doc duoc. Dung sac cam dam
   #a63e08 nhu moi cho chu cam nho khac tren site. */
.wpp-ooh-title-nhan { color: #a63e08; }

.wpp-ooh-sub { color: var(--wpp-text, #1b1f2a); }
.wpp-ooh-intro { color: var(--wpp-text, #1b1f2a); }

.wpp-sec--oohcot .wpp-ooh-sec-title { color: var(--wpp-navy); }
.wpp-ooh-cot-name { color: var(--wpp-navy); }
.wpp-ooh-cot-list li { color: var(--wpp-text, #1b1f2a); }
.wpp-ooh-cot-list li::before { background: #a63e08; }

/* Vach ngan: tu trang-mo doi sang duong ke cua he sang */
.wpp-ooh-cot { border-top-color: var(--wpp-line); }
@media (min-width: 768px) {
    .wpp-ooh-cot:nth-child(2n) { border-left-color: var(--wpp-line); }
}
@media (min-width: 1024px) {
    .wpp-ooh-cot { border-left-color: var(--wpp-line); }
}

/* Nut: tren nen toi la nut cam chu muc; tren nen sang dung nut navy nhu ca site */
.wpp-ooh-btn {
    background: var(--wpp-navy);
    border-color: var(--wpp-navy);
    color: var(--wpp-white);
}
.wpp-ooh-btn:hover {
    background: var(--wpp-navy-hover);
    border-color: var(--wpp-navy-hover);
    color: var(--wpp-white);
}
/* END: BLOCK_WPP_LANDING_OOH */

/* BEGIN: BLOCK_WPP_SXTH_BENTO */
/* =========================================================================
   /san-xuat-truyen-hinh — BAN 2 sau phan hoi khach (14/09)
   =========================================================================
   Khach: "voi cai luong nay no dang hoi over thong tin, vi du vao sitcom thi no
   show du an cua sitcom thoi, dung full".

   Hai thay doi:
     1. 6 o nang luc -> 3 o, MOI O BAM DUOC, dan thang sang nhom du an tuong ung
     2. Dai 12 chuong trinh -> 4 anh LON kieu "Marketing sites launched with
        Framer": tieu de trai + nut phai + luoi anh tran vien
   ========================================================================= */

/* ---------- 1. O nang luc bam duoc ---------- */
.wpp-sd-cap--link {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: background-color 0.25s;
}

.wpp-sd-cap--link:hover { background: var(--wpp-white); }
.wpp-sd-cap--link:hover .wpp-sd-cap-name { text-decoration: underline; }

/* Mui ten day xuong day o de 3 o cao bang nhau du chu dai ngan khac nhau */
.wpp-sd-cap-di {
    display: inline-flex;
    margin-top: auto;
    padding-top: 14px;
    color: var(--wpp-navy);
}
.wpp-sd-cap-di .wpp-ic { width: 20px; height: 20px; transition: transform 0.25s; }
.wpp-sd-cap--link:hover .wpp-sd-cap-di .wpp-ic { transform: translateX(4px); }

/* Con 3 o -> mot hang duy nhat. Rule cu bo ke duoi cho "3 o cuoi" nen se bo het
   ca hang; giu lai ke duoi de luoi van co vien duoi nhu mau. */
@media (min-width: 1024px) {
    .wpp-sd-cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wpp-sd-cap:nth-last-child(-n + 3) { border-bottom: 1px solid var(--wpp-line); }
}

/* ---------- 2. Dai chuong trinh: 4 anh LON kieu Framer ----------
   Mau "Marketing sites launched with Framer": tieu de trai + nut phai, ben duoi
   la luoi anh LON tran vien — khong phai luoi nhieu o nho.

   Go bo nhip bento 12 o cua ban truoc (2 rong + 3 hep): gio chi con 4 o nen
   bento khong con y nghia, va 12 o chinh la cai khach goi la "over thong tin". */
[nh-block="duaefsc"] .wpp-worktab-head--nut {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

[nh-block="duaefsc"] .wpp-worktab-btn-xem { flex: 0 0 auto; }

@media (min-width: 768px) {
    [nh-block="duaefsc"] .wpp-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 40px;
    }
    /* huy nhip bento cua ban truoc — moi o gio bang nhau va TO */
    [nh-block="duaefsc"] .wpp-work-card,
    [nh-block="duaefsc"] .wpp-work-card:nth-child(5n + 1),
    [nh-block="duaefsc"] .wpp-work-card:nth-child(5n + 2) { grid-column: auto; }

    [nh-block="duaefsc"] .wpp-work-title { font-size: 18px; line-height: 24px; }
}
/* END: BLOCK_WPP_SXTH_BENTO */

/* BEGIN: BLOCK_WPP_DONGBO_HEAD */
/* =========================================================================
   DONG BO DAU MUC (.wpp-sec-head va cac bien the) — ban chot 11/09
   =========================================================================
   Do truoc khi sua, 8 trang:

   | Phan tu              | Co/dam   | Mau       |
   |----------------------|----------|-----------|
   | .wpp-sec-title       | 32px/300 | #1b1f2a   |
   | .wpp-ch-eyebrow      | 32px/300 | #0a1e78   |  <- lech MAU
   | .wpp-sd-cap-title    | 32px/300 | #1b1f2a   |
   | .wpp-dm-sec-title    | 32px/300 | #1b1f2a   |
   | .wpp-ooh-sec-title   | 32px/300 | trang     |  <- nen toi, PHAI giu trang
   | .wpp-sec-desc        | 18px/300 | #1b1f2a   |
   | .wpp-ch-desc         | 16px/400 | #0a1e78   |  <- lech CA CO LAN MAU

   Chot ve mot bo:
     tieu de : 24px · font-weight 600 · mau --wpp-navy
     mo ta   : 16px · font-weight 400 · mau --wpp-text

   Vi sao mo ta lay 16px chu khong giu 18px: tieu de ha tu 32 xuong 24, de mo ta
   o 18px thi hai bac chi cach nhau 6px — doc ra khong con thay dau la tieu de.
   24/16 tach ro hon, va 16px dung bang co chu thuong cua site nen khong sinh
   them mot bac moi trong thang chu.

   ⚠️ Van GIU viet hoa: do la net cua he WPP dang dung toan site, user khong yeu
   cau bo.

   ⚠️ Do dam 600 da phai NAP LAI vao bo font (khoi WPP_FONT). Sang nay toi da xoa
   600 di de tiet 33KB; khong nap lai thi trinh duyet tu bia net dam tu ban 400 va
   chu se meo.
   ========================================================================= */

/* ---------- Tieu de dau muc ---------- */
.wpp-sec-title,
.wpp-ch-eyebrow,
.wpp-sd-cap-title,
.wpp-dm-sec-title,
.wpp-ooh-sec-title,
.wpp-partner-title,
.wpp-worktab-title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--wpp-accent);
}

/* NGOAI LE nen toi. Dai OOH DA BO khoi danh sach nay (14/09): user chot lat
   `--sdhero` sang nen sang, nen chu trang tren do thanh chu trang tren nen trang
   — do ra ti le 1.0, khong doc duoc. Sua bang cach GO ngoai le chu khong chong
   them do uu tien o khoi sau. */
.wpp-sec--split .wpp-sec-title,
.wpp-sec--feature .wpp-sec-title { color: var(--wpp-white); }

/* ---------- Mo ta dau muc ---------- */
.wpp-sec-desc,
.wpp-ch-desc,
.wpp-service-desc,
.wpp-partner-desc {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -0.32px;
    color: var(--wpp-text, #1b1f2a);
}

.wpp-sec--split .wpp-sec-desc,
.wpp-sec--feature .wpp-sec-desc { color: var(--wpp-white); }



/* ---------- Chu CAM co nho: dung sac dam hon ----------
   Do sau khi dong bo dau muc, con 2 trang chua dat chuan AA — deu la loi CO SAN,
   khong phai do dot sua nay:
     /                      9 + 5 cho  chu cam 14px tren nen trang   tp 4.3
     /san-xuat-truyen-hinh  6 cho      chu cam 16px/700 tren nen kem  tp 4.0

   `#d1500a` dat cho chu TO nhung khong dat cho chu NHO (can 4.5). Dung `#a63e08`
   — mat thuong gan nhu khong phan biet duoc, nhung dat 5.3. Da dung dung sac nay
   o landing Digital Marketing nen toan site thong nhat mot sac cam dam.

   Chi doi O NHUNG CHO CHU NHO, khong doi bien `--wpp-accent-ink` dung chung: cho
   chu to 4.3 la du, ha them chi lam mat do tuoi cua mau thuong hieu. */
.wpp-card-date,
.wpp-card-date *,
.wpp-sd-cap-name,
.wpp-history-more,
.wpp-history-more *,
.wpp-history-text .hl,
.wpp-modal-text .hl,
.wpp-proj-back,
.wpp-proj-back * { color: #a63e08; }
/* END: BLOCK_WPP_DONGBO_HEAD */

/* BEGIN: BLOCK_WPP_HERO_TITLE */
/* =========================================================================
   HERO TITLE + BO EYEBROW — ban chot 11/09
   =========================================================================
   Tiep theo dot dong bo dau muc. User chot:
     - .wpp-hero-title: 36px · them font-weight · doi mau
     - bo cac .wpp-partner-eyebrow
     - title nao mat nghia khi bo eyebrow thi sua lai title

   Cho hero title CUNG BO voi tieu de dau muc (600 + navy) de ca site chi con
   MOT cach viet tieu de, chi khac co chu: hero 36px, dau muc 24px.
   ========================================================================= */

/* ---------- Hero title ---------- */
.wpp-hero-title,
.wpp-dm-title,
.wpp-ooh-title {
    font-size: 36px;
    line-height: 42px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--wpp-navy);
}

/* Hero OOH tung nen toi nen phai giu chu trang. Tu 14/09 user chot lat sang nen
   sang -> ngoai le nay thanh sai (chu trang tren nen trang, ti le 1.0). Da go. */

/* Hero trang chu nam de tren anh/nen rieng — giu nguyen mau sang neu dai do toi */
.wpp-sec--split .wpp-hero-title,
.wpp-sec--feature .wpp-hero-title { color: var(--wpp-white); }

/* ---------- Bo eyebrow ----------
   Do truoc khi bo — 13 eyebrow tren 11 trang, va chi MOT cho mat nghia:

   | Eyebrow              | Tieu de ngay duoi                  | Mat nghia? |
   |----------------------|------------------------------------|------------|
   | "Dich vu"            | "Dich vu chinh"                    | khong, con trung lap |
   | "VE CHUNG TOI"       | "Tap doan Viet Ba"                 | khong |
   | "DICH VU"            | "Tam mang dich vu, mot doi ngu"    | khong |
   | "DU AN"              | "Nhung gi chung toi da lam"        | khong |
   | "DICH VU" x7         | ten tung dich vu                   | khong |
   | "Doi tac khach hang" | "Vietba han hanh hop tac"          | ⚠️ CO  |

   Cho cuoi cung: bo chu "Doi tac khach hang" di thi "Vietba han hanh hop tac"
   khong con noi ro day la dai khach hang. Da doi tieu de thanh
   "Doi tac & khach hang cua Viet Ba" (nhan block 8x3zywr).

   Bo luon `.wpp-ooh-eyebrow` — cung mot kieu nhan "DICH VU" dat tren tieu de
   hero, de lai mot cai thi lai lech giua cac trang.

   GIU `.wpp-eyebrow` ("Tuyen dung" o trang chu): lop KHAC, va bo no thi
   "Noi nhung nguoi tre tai nang cung nhau lon len" khong con cho nao noi day la
   dai tuyen dung. */
.wpp-partner-eyebrow,
.wpp-ooh-eyebrow { display: none; }
/* END: BLOCK_WPP_HERO_TITLE */

/* BEGIN: BLOCK_VIETBA_GIOI_THIEU_01 */
/* ===== [WPP] Trang Giới thiệu v2 — job vietba-gioi-thieu (5 dải dựng theo ảnh mẫu) =====
 Màu đo bằng pixel trên ảnh mẫu: tiêu đề #0b2a8f · nhãn nhỏ #3f74e3 · nút #0548cc · nền nhạt #f4f7fc */
/*.wpp-abv {*/
/*    --abv-navy: #0b2a8f;*/
/*    --abv-blue: #0548cc;*/
/*    --abv-blue-hover: #0a3aa6;*/
/*    --abv-sky: #3f74e3;*/
/*    --abv-text: #5b6478;*/
/*    --abv-ink: #1b2440;*/
/*    --abv-soft: #f4f7fc;*/
/*    --abv-line: #e3e9f4;*/
/*    position: relative;*/
/*    font-size: 16px;*/
/*    color: var(--abv-text);*/
/*}*/
.wpp-abv *, .wpp-abv *::before, .wpp-abv *::after {
    box-sizing: border-box;
}

.wpp-abv p {
    margin: 0;
}

.wpp-abv-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1308px;
    margin: 0 auto;
    padding: 0 24px;
}

.wpp-abv-eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--abv-sky);
}

.wpp-abv .wpp-abv-title {
    margin: 0 0 22px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--wpp-accent);
}

.wpp-abv .wpp-abv-desc {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--abv-text);
}

.wpp-abv-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin-top: 16px;
    padding: 0 28px;
    border-radius: 4px;
    background: var(--abv-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s;
}

.wpp-abv-btn:hover {
    background: var(--abv-blue-hover);
    color: #fff;
    text-decoration: none;
}

.wpp-abv-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.wpp-abv-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    color: var(--wpp-navy);
    box-shadow: 0 12px 34px rgba(5, 30, 100, 0.32);
    transition: transform 0.25s;
}

.wpp-abv-play svg {
    width: 32px;
    height: 32px;
    margin-left: 4px;
}

/* ---------- Dải 1: video căn giữa + 4 ô số liệu ---------- */
.wpp-abv-video {
    padding: 0 0 64px;
    /*background: linear-gradient(135deg, #edf3ff 0%, #fafcff 50%, #eef4ff 100%);*/
}
.wpp-row--abv-vision {
    margin-top: 4rem;
}
.wpp-abv-video-media {
    position: relative;
    max-width: 80%;
    margin: 0 auto;
    border-radius: 16px;
    background: #0b1633;
    box-shadow: 0 24px 48px rgba(10, 30, 90, 0.18);
}

.wpp-abv-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
}

.wpp-abv-video-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpp-abv-video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 15, 45, 0.1) 40%, rgba(5, 15, 45, 0.55) 100%);
}

/* Video tu phat: iframe nam TREN anh nen (z-index 2). Anh + lop phu gradient chi
 con nhin thay trong vai giay YouTube chua tai xong, hoac khi iframe bi chan. */
.wpp-abv-video-embed {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.wpp-abv-stats {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 52px;
}

.wpp-abv-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.wpp-abv-stat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border: 1px solid var(--abv-line);
    border-radius: 12px;
    background: var(--wpp-accent-ink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 40, 110, 0.06);
}

.wpp-abv-stat-ic svg {
    width: 32px;
    height: 32px;
}

.wpp-abv-stat-ic img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.wpp-abv .wpp-abv-stat-num {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--abv-navy);
}

.wpp-abv .wpp-abv-stat-label {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--abv-text);
}

/* ---------- Dải 2: chữ trái + ảnh tràn mép phải, thẻ số năm đè lên ảnh ---------- */
.wpp-abv-story {
    background: #fff;
}

.wpp-abv-story-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 47%);
}

.wpp-abv-story-text {
    min-width: 0;
    padding: 64px 72px 64px max(24px, calc(50vw - 630px));
}

.wpp-abv-story-inner {
    max-width: 600px;
}

.wpp-abv-story .wpp-abv-title {
    max-width: 560px;
    text-wrap: balance;
}

.wpp-abv-vision .wpp-abv-title {
    max-width: 400px;
}

.wpp-abv-team .wpp-abv-title {
    font-size: 38px;
}

.wpp-abv-quote {
    display: flex;
    gap: 22px;
    margin: 30px 0 0;
    padding: 26px 30px;
    border: 1px solid var(--abv-line);
    border-radius: 8px;
    background: #f6f9ff;
}

.wpp-abv-quote-mark {
    flex: 0 0 auto;
    color: var(--abv-navy);
}

.wpp-abv-quote-mark svg {
    width: 36px;
    height: 27px;
}

.wpp-abv-quote-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wpp-abv-quote-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--abv-ink);
}

.wpp-abv-quote-author {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--abv-navy);
}

.wpp-abv-story-media {
    position: relative;
    min-width: 0;
    min-height: 560px;
}

.wpp-abv-story-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0b1633;
}

.wpp-abv-story-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpp-abv-story-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 15, 45, 0) 55%, rgba(5, 15, 45, 0.55) 100%);
}

.wpp-abv-story-badge {
    position: absolute;
    z-index: 2;
    top: 64px;
    left: -76px;
    width: 236px;
    padding: 30px 30px 26px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: #2c3c78e8;
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 20px 40px rgba(5, 25, 80, 0.25);
}

.wpp-abv .wpp-abv-story-badge-num {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font-size: 80px;
    line-height: 0.9;
    font-weight: 700;
}

.wpp-abv-story-badge-num small {
    padding-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.wpp-abv .wpp-abv-story-badge-label {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wpp-abv .wpp-abv-story-badge-years {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 16px;
    color: #a9c6ff;
}

.wpp-abv-story-badge-years i {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(169, 198, 255, 0.6);
}

.wpp-abv .wpp-abv-story-cap {
    position: absolute;
    z-index: 2;
    right: 32px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

/* ---------- Dải 3: nền ảnh tối, câu nghiêng góc phải, 3 thẻ kính ---------- */
.wpp-abv-vision {
    padding: 72px 0 64px;
    overflow: hidden;
    background: #071a3d;
    color: #fff;
}

.wpp-abv-vision-bg {
    position: absolute;
    inset: 0;
}

.wpp-abv-vision-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpp-abv-vision-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /*background: linear-gradient(90deg, rgba(4, 16, 45, 0.94) 0%, rgba(6, 26, 70, 0.78) 45%, rgba(6, 26, 70, 0.4) 100%);*/
}

.wpp-abv-vision-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.wpp-abv-vision-intro {
    max-width: 500px;
}

.wpp-abv-vision .wpp-abv-eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.wpp-abv-vision .wpp-abv-title {
    color: #fff;
}

.wpp-abv-vision .wpp-abv-desc {
    color: rgba(255, 255, 255, 0.82);
}

.wpp-abv .wpp-abv-vision-slogan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 8px;
    font-size: 28px;
    line-height: 1.35;
    font-style: italic;
    font-weight: 300;
    color: #fff;
}

.wpp-abv-vision-cards {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 48px;
}

.wpp-abv-vcard {
    min-width: 0;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wpp-abv-vcard-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wpp-abv-vcard-ic {
    display: inline-flex;
    flex: 0 0 auto;
    color: #5b9bff;
}

.wpp-abv-vcard-ic svg, .wpp-abv-vcard-ic img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.wpp-abv .wpp-abv-vcard-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.wpp-abv-vcard-text {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.wpp-abv-vcard-text p {
    margin: 0;
}

.wpp-abv-vcard-text ul {
    margin: -8px 0 0;
    padding: 0 0 0 60px;
    list-style: none;
}

.wpp-abv-vcard-text li {
    line-height: 1.75;
}

/* ---------- Dải 4: chữ + nút trái, lưới 6 thẻ dịch vụ phải ---------- */
.wpp-abv-fields {
    padding: 80px 0;
    background: #fff;
}

.wpp-abv-fields-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

.wpp-abv-fields-intro {
    min-width: 0;
}

.wpp-abv-fields-list {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wpp-abv-field {
    display: block;
    min-width: 0;
    padding: 20px 15px;
    border: 1px solid #edf1f8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 40, 110, 0.07);
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}

a.wpp-abv-field:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 40, 110, 0.12);
    text-decoration: none;
}

.wpp-abv-field-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wpp-abv-field-ic {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--wpp-accent-ink);
}

.wpp-abv-field-ic svg, .wpp-abv-field-ic img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.wpp-abv-field-name {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-abv-field-desc {
    display: block;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--wpp-text);
}

/* ---------- Dải 6: ảnh tràn mép trái có thẻ video, chữ + số liệu phải ---------- */
.wpp-abv-team {
    background: var(--abv-soft);
}

.wpp-abv-team-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wpp-abv-team-media {
    position: relative;
    min-width: 0;
    min-height: 400px;
    overflow: hidden;
    background: #0b1633;
}

.wpp-abv-team-img {
    position: absolute;
    inset: 0;
}

.wpp-abv-team-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpp-abv-team-play {
    position: absolute;
    z-index: 2;
    left: 38%;
    bottom: 18%;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 340px;
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(18, 26, 48, 0.55);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wpp-abv-team-play:hover {
    color: #fff;
    text-decoration: none;
}

.wpp-abv-team-play:hover .wpp-abv-play {
    transform: scale(1.08);
}

.wpp-abv-team-play .wpp-abv-play {
    width: 60px;
    height: 60px;
}

.wpp-abv-team-play .wpp-abv-play svg {
    width: 22px;
    height: 22px;
}

.wpp-abv-team-play-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpp-abv-team-play-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wpp-abv-team-play-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #8ab4ff;
}

.wpp-abv-team-play-sub svg {
    width: 10px;
    height: 10px;
}

.wpp-abv-team-body {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 56px max(24px, calc(50vw - 630px)) 56px 64px;
}

.wpp-abv-team-inner {
    max-width: 640px;
}

.wpp-abv-team-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 56px;
    margin: 20px 0;
}

.wpp-abv .wpp-abv-team-num {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--abv-blue);
}

.wpp-abv .wpp-abv-team-label {
    margin-top: 4px;
    font-size: 14px;
    color: var(--abv-text);
}

/* ---------- Tablet + điện thoại ---------- */
@media (max-width: 1023.98px) {
    .wpp-abv .wpp-abv-title {
        font-size: 32px;
    }
    .wpp-abv-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .wpp-abv-story-grid, .wpp-abv-fields-grid, .wpp-abv-team-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .wpp-abv-story-text {
        padding: 48px 24px;
    }
    .wpp-abv-story-inner, .wpp-abv-story .wpp-abv-title {
        max-width: none;
    }
    .wpp-abv-story-media {
        min-height: 0;
        aspect-ratio: 2 / 1;
        max-height: 640px;
    }
    .wpp-abv-story-badge {
        top: 20px;
        left: 20px;
        width: 190px;
        padding: 20px 22px 18px;
    }
    .wpp-abv .wpp-abv-story-badge-num {
        font-size: 60px;
    }
    .wpp-abv-vision {
        padding: 56px 0;
    }
    .wpp-abv-vision-head {
        flex-direction: column;
        gap: 20px;
    }
    .wpp-abv-vision-intro {
        max-width: none;
    }
    .wpp-abv .wpp-abv-vision-slogan {
        align-items: flex-start;
        padding-top: 0;
        font-size: 22px;
    }
    .wpp-abv-vision-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 36px;
    }
    .wpp-abv-fields {
        padding: 56px 0;
    }
    .wpp-abv-fields-grid {
        gap: 32px;
    }
    .wpp-abv-fields-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wpp-abv-team-media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .wpp-abv-team-play {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
    .wpp-abv-team-body {
        padding: 48px 24px;
    }
    .wpp-abv-team-inner {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .wpp-abv .wpp-abv-title {
        font-size: 26px;
    }
    .wpp-abv .wpp-abv-desc {
        font-size: 15px;
    }
    .wpp-abv-btn {
        height: 48px;
        padding: 0 22px;
        font-size: 14px;
    }
    .wpp-abv-video {
        padding: 0 0 40px;
    }
    .wpp-abv-video-media {
        border-radius: 10px;
    }
    .wpp-abv-play {
        width: 60px;
        height: 60px;
    }
    .wpp-abv-play svg {
        width: 22px;
        height: 22px;
    }
    .wpp-abv-stats {
        gap: 18px 12px;
        margin-top: 28px;
    }
    .wpp-abv-stat {
        gap: 10px;
    }
    .wpp-abv-stat-ic {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    .wpp-abv-stat-ic svg {
        width: 24px;
        height: 24px;
    }
    .wpp-abv .wpp-abv-stat-num {
        font-size: 20px;
    }
    .wpp-abv .wpp-abv-stat-label {
        font-size: 12px;
    }
    .wpp-abv-quote {
        gap: 14px;
        padding: 18px;
    }
    .wpp-abv-quote-mark svg {
        width: 28px;
        height: 21px;
    }
    .wpp-abv-story-badge {
        width: 164px;
        padding: 16px 18px 14px;
    }
    .wpp-abv .wpp-abv-story-badge-num {
        font-size: 36px;
    }
    .wpp-abv .wpp-abv-story-badge-label {
        margin-top: 10px;
        font-size: 11px;
    }
    .wpp-abv .wpp-abv-story-badge-years {
        margin-top: 8px;
        font-size: 13px;
    }
    .wpp-abv-vcard {
        padding: 22px;
    }
    .wpp-abv-vcard-ic svg, .wpp-abv-vcard-ic img {
        width: 34px;
        height: 34px;
    }
    .wpp-abv-vcard-text {
        font-size: 15px;
    }
    .wpp-abv-vcard-text ul {
        padding-left: 52px;
    }
    .wpp-abv-field {
        padding: 16px 14px;
    }
    .wpp-abv-field-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wpp-abv-field-ic svg, .wpp-abv-field-ic img {
        width: 32px;
        height: 32px;
    }
    .wpp-abv-field-name {
        font-size: 15px;
    }
    .wpp-abv-field-desc {
        margin-top: 8px;
        font-size: 13px;
    }
    .wpp-abv-team-play {
        padding: 14px 16px;
        gap: 12px;
    }
    .wpp-abv-team-play .wpp-abv-play {
        width: 46px;
        height: 46px;
    }
    .wpp-abv-team-play-title {
        font-size: 13px;
    }
    .wpp-abv-team-stats {
        gap: 12px 28px;
    }
    .wpp-abv .wpp-abv-team-num {
        font-size: 24px;
    }
}
/* END: BLOCK_VIETBA_GIOI_THIEU_01 */

/* BEGIN: BLOCK_VIETBA_DICH_VU_01 */
/* =========================================================================
 TRANG DICH VU — job vietba-dich-vu, dung theo anh mau yeu-cau/anh/di-vu.png
 4 dai: 1 hero · 2 luoi 6 linh vuc · 3 vi sao chon Vietba · 4 quy trinh lam viec
 (dai dai doi tac giu nguyen, dai CTA cuoi trang user chot bo han)

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec. Khong dat mau
 moi — moi section duoi day deu nam trong .wpp-sec nen thua huong san bo token.

 Khoang nay nam CUOI tep nen thang moi rule .wpp-svc-* cu o phia tren (2627+,
 2845+, 3328+) — cac rule do bam vao .wpp-svc-cell / .wpp-svc-tile la 2 class
 da bo khoi markup, con lai la vo hai.
 ========================================================================= */
/* ---------- Dai 1: hero anh nen, chu can giua ---------- */
.wpp-sec--dvhero {
    position: relative;
    overflow: hidden;
    background: var(--wpp-ink);
}

.wpp-dvhero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

/* Lop phu toi: anh truong quay von da toi nhung khong deu, khong co lop nay
 thi chu trang o goc sang bi chim. */
.wpp-dvhero-bg::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(6 20 80 / 36%) 0%, rgba(6, 20, 80, 0.55) 45%, rgb(6 20 80 / 63%) 100%);
    content: "";
}
.wpp-dvhero-bg.wpp-dvhero-list-bg::after {
    display: none;
}

.wpp-dvhero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    /* chua cho header trong suot de len */
    padding-top: 108px;
    padding-bottom: 32px;
    color: var(--wpp-white);
}

.wpp-dvhero-text {
    margin: 0 auto;
    max-width: 880px;
    text-align: center;
}

.wpp-dvhero-eyebrow {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--wpp-lilac);
}

.wpp-dvhero-title {
    margin: 0;
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--wpp-white);
}

.wpp-dvhero-desc {
    margin: 20px auto 0;
    max-width: 680px;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.82);
}

/* Dai 4 gia tri o day hero */
.wpp-dvhero-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
    margin-top: 44px;
}

.wpp-dvhero-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.wpp-dvhero-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--wpp-white);
}

.wpp-dvhero-ic svg {
    width: 22px;
    height: 22px;
}

.wpp-dvhero-value-text {
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.9);
}

/* ---------- Dai 2: luoi 6 linh vuc dich vu ---------- */
/* Dau muc dung nguyen .wpp-sec-head.wpp-service-head cua block w8x4elg trang chu
 (user chot) — o day chi dat lai khoang cach duoi dau muc. */
.wpp-svc-head {
    padding-bottom: 0;
    margin-bottom: 36px;
}

.wpp-sec--svc {
    background: var(--wpp-cream);
}

.wpp-svc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.wpp-svc-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px;
    border-radius: 14px;
    background: var(--wpp-white);
    box-shadow: 0 8px 24px rgba(10, 30, 120, 0.07);
    transition: box-shadow 0.3s, transform 0.3s;
}

.wpp-svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(10, 30, 120, 0.13);
}

.wpp-svc-card .wpp-svc-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wpp-cream);
}

.wpp-svc-card .wpp-svc-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s;
}

.wpp-svc-card:hover .wpp-svc-img {
    transform: scale(1.04);
}

/* So thu tu de len goc duoi-trai anh, co lop toi mo phia duoi cho doc duoc
 tren moi anh (6 anh sang toi khac nhau). */
.wpp-svc-card .wpp-svc-media::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 46%;
    background: linear-gradient(180deg, rgba(6, 20, 80, 0) 0%, rgba(6, 20, 80, 0.6) 100%);
    pointer-events: none;
    content: "";
}

.wpp-svc-num {
    position: absolute;
    left: 18px;
    bottom: 12px;
    z-index: 1;
    font-size: 26px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--wpp-white);
}

.wpp-svc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 14px 16px;
}

.wpp-svc-card .wpp-svc-name {
    display: block;
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-svc-text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 23px;
    color: rgba(10, 30, 120, 0.72);
}

.wpp-svc-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--wpp-navy);
    text-decoration: none;
}

.wpp-svc-more:hover {
    color: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-svc-more-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--wpp-white);
    background: var(--wpp-navy);
    transition: background-color 0.25s, transform 0.25s;
}

.wpp-svc-more-ic svg {
    width: 14px;
    height: 14px;
}

.wpp-svc-more:hover .wpp-svc-more-ic {
    transform: translateX(3px);
    background: var(--wpp-navy-hover);
}

/* ---------- Dai 3: vi sao chon Vietba ---------- */
.wpp-sec--why {
    position: relative;
    overflow: hidden;
    background: var(--wpp-ink);
}

.wpp-why-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.wpp-why-bg::after {
    position: absolute;
    inset: 0;
    /*background: linear-gradient(100deg, rgba(6, 20, 80, 0.94) 0%, rgba(10, 30, 120, 0.78) 52%, rgba(10, 30, 120, 0.62) 100%);*/
    content: "";
}

.wpp-why-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding-top: 56px;
    padding-bottom: 56px;
    color: var(--wpp-white);
}

.wpp-why-intro {
    min-width: 0;
}

.wpp-why-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--wpp-lilac);
}

.wpp-why-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: 2px solid var(--wpp-lilac);
    border-radius: 9999px;
}

.wpp-why-title {
    margin: 0;
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--wpp-white);
}

.wpp-why-desc {
    margin: 18px 0 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.8);
}

.wpp-why-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    margin-top: 26px;
    padding: 0 26px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpp-navy);
    background: var(--wpp-white);
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-why-btn:hover {
    color: var(--wpp-white);
    background: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-why-btn svg {
    width: 18px;
    height: 18px;
}

.wpp-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.wpp-why-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--wpp-line-light);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.wpp-why-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    color: var(--wpp-white);
}

.wpp-why-ic svg {
    width: 32px;
    height: 32px;
}

.wpp-why-body {
    min-width: 0;
}

.wpp-why-card-title {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--wpp-white);
}

.wpp-why-card-desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.76);
}

/* ---------- Dai 4: quy trinh lam viec ---------- */
.wpp-sec--process {
    padding: 56px 0 64px;
    background: var(--wpp-white);
}

/* Dau muc dung nguyen bo class cua w8x4elg — chi dat lai khoang cach duoi. */
.wpp-proc-head {
    margin-bottom: 40px;
}

.wpp-proc-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
}

/* Duong noi ngang chi co nghia khi 5 buoc nam tren 1 hang */
.wpp-proc-link {
    display: none;
}

.wpp-proc-step {
    min-width: 0;
}

.wpp-proc-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    color: var(--wpp-accent-ink);
    background: var(--wpp-cream);
}

.wpp-proc-ic svg {
    width: 28px;
    height: 28px;
}

.wpp-proc-num {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wpp-accent-ink);
}

.wpp-proc-label {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 30, 120, 0.78);
}

/* ---------- 640px tro len ---------- */
@media (min-width: 640px) {
    .wpp-svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wpp-dvhero-values {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .wpp-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wpp-proc-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-dvhero-inner {
        min-height: 700px;
        padding-top: 132px;
        padding-bottom: 48px;
    }
    .wpp-dvhero-eyebrow {
        font-size: 14px;
        letter-spacing: 4px;
    }
    .wpp-dvhero-title {
        font-size: 54px;
        line-height: 64px;
    }
    .wpp-dvhero-desc {
        margin-top: 26px;
        font-size: 16px;
        line-height: 28px;
    }
    .wpp-dvhero-values {
        gap: 0;
        margin-top: 64px;
    }
    /* Vach ngan mảnh giua 4 gia tri — dung border nen khong can them the */
    .wpp-dvhero-value {
        padding: 0 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
    }
    .wpp-dvhero-value:first-child {
        border-left: 0;
    }
    .wpp-svc-head {
        margin-bottom: 44px;
    }
    .wpp-svc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 24px;
    }
    .wpp-svc-body {
        padding: 20px 16px 18px;
    }
    .wpp-svc-card .wpp-svc-name {
        font-size: 18px;
    }
    .wpp-why-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 56px;
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .wpp-why-title {
        font-size: 38px;
        line-height: 50px;
    }
    .wpp-sec--process {
        padding: 72px 0 88px;
    }
    /* 5 buoc + 4 duong noi tren MOT hang: cot buoc co ban, cot noi co gian */
    .wpp-proc-track {
        grid-template-columns: repeat(4, max-content minmax(24px, 1fr)) max-content;
        align-items: start;
        gap: 0;
    }
    .wpp-proc-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        margin-top: 30px;
        padding: 0 10px;
        color: var(--wpp-line);
    }
    .wpp-proc-link svg {
        width: 100%;
        max-width: 70px;
        height: 12px;
    }
    .wpp-proc-step {
        max-width: 210px;
        text-align: center;
    }
    .wpp-proc-ic {
        width: 68px;
        height: 68px;
    }
    .wpp-proc-ic svg {
        width: 32px;
        height: 32px;
    }
}
/* END: BLOCK_VIETBA_DICH_VU_01 */

/* BEGIN: BLOCK_VIETBA_CHIEN_LUOC_01 */
/* =========================================================================
 TRANG TU VAN TRUYEN THONG TONG THE — job vietba-chien-luoc
 Mau: yeu-cau/anh/chien-luoc-truyen-thong-dv.png
 3 dai moi: 2 tong quan dich vu · 3 pham vi trien khai · 4 gia tri mang lai
 + 1 chinh dau muc "Du an tieu bieu" cho 8 trang dich vu.

 DAI 1 (hero) KHONG co CSS o day: dung lai nguyen bo .wpp-sec--dvhero /
 .wpp-dvhero-* cua khoang BLOCK_VIETBA_DICH_VU_01 (user chot Cau 1 = A).

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- Dai 2: tong quan dich vu ---------- */
.wpp-sec--ovw {
    padding: 56px 0 64px;
    background: var(--wpp-white);
}

.wpp-ovw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 36px;
}

.wpp-ovw-media {
    position: relative;
    min-width: 0;
    /* chua cho huy hieu tron thoi ra ngoai goc duoi-trai */
    padding: 0 0 26px 26px;
}

.wpp-ovw-shot {
    overflow: hidden;
    border-radius: 14px;
    background: var(--wpp-cream);
}

.wpp-ovw-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Huy hieu tron "360 TRUYEN THONG" de len goc duoi-trai anh */
.wpp-ovw-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border: 5px solid var(--wpp-white);
    border-radius: 9999px;
    color: var(--wpp-white);
    background: var(--wpp-navy);
    box-shadow: 0 12px 28px rgba(10, 30, 120, 0.22);
}

.wpp-ovw-badge-num {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
}

.wpp-ovw-badge-cap {
    margin-top: 2px;
    font-size: 9px;
    line-height: 13px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wpp-lilac);
}

.wpp-ovw-body {
    min-width: 0;
}

.wpp-ovw-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

.wpp-ovw-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--wpp-navy);
}

.wpp-ovw-title {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--wpp-navy);
}

.wpp-ovw-text {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 26px;
    color: rgba(10, 30, 120, 0.76);
}

.wpp-ovw-quote {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 4px 14px;
    margin: 22px 0 0;
    padding: 20px 22px;
    border-radius: 10px;
    background: var(--wpp-cream);
}

.wpp-ovw-quote-mark {
    grid-row: span 2;
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--wpp-lilac);
}

.wpp-ovw-quote-mark svg {
    width: 30px;
    height: 30px;
}

.wpp-ovw-quote-text {
    margin: 0;
    min-width: 0;
    font-size: 15px;
    line-height: 25px;
    font-style: italic;
    color: var(--wpp-navy);
}

.wpp-ovw-quote-name {
    min-width: 0;
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

/* ---------- Dai 3: pham vi trien khai ---------- */
.wpp-sec--scope {
    padding: 8px 0 64px;
    background: var(--wpp-white);
}

/* Dau muc dung nguyen .wpp-sec-head.wpp-service-head cua w8x4elg — chi dat khoang cach */
.wpp-scope-head {
    margin-bottom: 36px;
}

.wpp-scope-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.wpp-scope-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 22px 20px;
    border: 1px solid var(--wpp-line);
    border-radius: 12px;
    background: var(--wpp-white);
    transition: box-shadow 0.3s, transform 0.3s;
}

.wpp-scope-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(10, 30, 120, 0.1);
}

.wpp-scope-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--wpp-accent-ink);
    background: var(--wpp-cream);
}

.wpp-scope-ic svg {
    width: 24px;
    height: 24px;
}

.wpp-scope-body {
    min-width: 0;
    text-align: center;
}

.wpp-scope-name {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-scope-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 23px;
    color: rgba(10, 30, 120, 0.72);
}

/* ---------- Dai 4: gia tri chung toi mang lai ---------- */
.wpp-sec--val {
    position: relative;
    overflow: hidden;
    background: var(--wpp-ink);
}

.wpp-val-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.wpp-val-bg::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6, 20, 80, 0.95) 0%, rgba(10, 30, 120, 0.8) 48%, rgba(10, 30, 120, 0.5) 100%);
    content: "";
}

.wpp-val-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding-top: 52px;
    padding-bottom: 52px;
    color: var(--wpp-white);
}

.wpp-val-intro {
    min-width: 0;
}

.wpp-val-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--wpp-lilac);
}

.wpp-val-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--wpp-lilac);
}

.wpp-val-title {
    margin: 0;
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--wpp-white);
}

.wpp-val-desc {
    margin: 16px 0 0;
    max-width: 540px;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.8);
}

.wpp-val-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.wpp-val-stat {
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid var(--wpp-line-light);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.wpp-val-num {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: var(--wpp-white);
}

.wpp-val-label {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Dai 5: dau muc "Du an tieu bieu" cho 8 TRANG DICH VU ----------
 User chot Cau 2 = B: dong bo dau muc tren 8 trang dich vu, KHONG dong toi
 `824hyfs` (dai "Du an khac" cua 30 trang chi tiet du an).

 View `view_wpp_workmore.tpl` dung CHUNG ca 9 block nen khong sua view duoc —
 phai khoa theo ma block. `.wpp-worktab-title` da duoc dong bo 24px/600/navy
 tu ban chot 11/09, chi con THIEU thanh gradient cua `.wpp-sec-title`. */
[nh-block="wtq3biy"] .wpp-worktab-title, [nh-block="74ln0zw"] .wpp-worktab-title, [nh-block="k54u7j0"] .wpp-worktab-title, [nh-block="duaefsc"] .wpp-worktab-title, [nh-block="5qdz2tl"] .wpp-worktab-title, [nh-block="42qv3y8"] .wpp-worktab-title, [nh-block="flortd7"] .wpp-worktab-title, [nh-block="kypjait"] .wpp-worktab-title {
    position: relative;
}

[nh-block="wtq3biy"] .wpp-worktab-title::after, [nh-block="74ln0zw"] .wpp-worktab-title::after, [nh-block="k54u7j0"] .wpp-worktab-title::after, [nh-block="duaefsc"] .wpp-worktab-title::after, [nh-block="5qdz2tl"] .wpp-worktab-title::after, [nh-block="42qv3y8"] .wpp-worktab-title::after, [nh-block="flortd7"] .wpp-worktab-title::after, [nh-block="kypjait"] .wpp-worktab-title::after {
    display: block;
    width: 56px;
    height: 3px;
    /* `margin: 0 auto` PHAI co — `.wpp-sec-title::after` cua w8x4elg canh GIUA thanh
       gradient. Thieu no thi thanh dinh ve mep trai, nhin ra ngay la khac trang chu. */
    margin: 16px auto 0;
    border-radius: 2px;
    background: var(--wpp-grad);
    content: "";
}

/* ---------- 640px tro len ---------- */
@media (min-width: 640px) {
    .wpp-scope-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-sec--ovw {
        padding: 72px 0 72px;
    }
    .wpp-ovw-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 56px;
    }
    .wpp-ovw-media {
        padding: 0 0 34px 34px;
    }
    .wpp-ovw-badge {
        width: 150px;
        height: 150px;
    }
    .wpp-ovw-badge-num {
        font-size: 34px;
        line-height: 40px;
    }
    .wpp-ovw-badge-cap {
        font-size: 10px;
        letter-spacing: 1.8px;
    }
    .wpp-ovw-title {
        font-size: 34px;
        line-height: 46px;
    }
    .wpp-sec--scope {
        padding: 4rem 0;
    }
    .wpp-scope-head {
        margin-bottom: 44px;
    }
    .wpp-scope-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    .wpp-val-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .wpp-val-title {
        font-size: 34px;
        line-height: 46px;
    }
    .wpp-val-stats {
        gap: 16px;
    }
    .wpp-val-stat {
        padding: 24px 20px;
    }
    .wpp-val-num {
        font-size: 38px;
        line-height: 44px;
    }
}
/* END: BLOCK_VIETBA_CHIEN_LUOC_01 */

/* BEGIN: BLOCK_VIETBA_CTDA_01 */
/* =========================================================================
 TRANG CHI TIET DU AN — job vietba-chi-tiet-du-an
 Mau: wpp.com/en/case-studies/how-kitkat-turned-a-12-tonne-disaster...
 Mot khoang nay phuc vu CA 30 trang du an (view view_wpp_project.tpl).

 Net cua mau: navy tren nen TRANG, rat nhieu khoang tho (padding dai 128px),
 chu tieu de nhat net (300) va IN HOA, than bai 2 cot.

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
.wpp-sec--cs {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 32px 0 72px;
    background: var(--wpp-white);
}

/* ---------- Hero ---------- */
.wpp-cs-head {
    padding-top: 16px;
}

.wpp-cs-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 20px;
    color: var(--wpp-navy);
    text-decoration: none;
}

.wpp-cs-back:hover {
    color: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-cs-back svg {
    width: 18px;
    height: 18px;
}

.wpp-cs-brand {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 300;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

/* Hang meta: nhan nho in hoa mo + gia tri ngay duoi, dung nhu mau */
.wpp-cs-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 32px;
}

.wpp-cs-meta-cell {
    min-width: 0;
}

.wpp-cs-meta-key {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(10, 30, 120, 0.55);
}

.wpp-cs-meta-val {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--wpp-navy);
    word-break: break-word;
}

/* ---------- Anh bia ---------- */
.wpp-cs-cover {
    overflow: hidden;
    background: var(--wpp-cream);
}

.wpp-cs-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---------- Than bai 2 cot ---------- */
.wpp-cs-body {
    font-size: 15px;
    line-height: 25px;
    color: var(--wpp-navy);
}

/* Moi muc = 1 hang. Tieu de trai, doan van phai — giong mau. */
.wpp-cs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 28px 0;
}

.wpp-cs-row + .wpp-cs-row {
    /*border-top: 1px solid var(--wpp-line);*/
}

.wpp-cs-h {
    min-width: 0;
}

.wpp-cs-h h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: var(--wpp-navy);
}

.wpp-cs-b {
    min-width: 0;
}

.wpp-cs-b > :first-child {
    margin-top: 0;
}

.wpp-cs-b > :last-child {
    margin-bottom: 0;
}

/* Anh CHEN TRONG NOI DUNG (user chot 2026-09-16): phai hien dung cho no duoc chen
 va TRAN ca be ngang, khong bi ep vao cot phai chi rong nua trang.
 Duoi 1024px trang von 1 cot nen anh da tran san — chi can xu ly o desktop, xem
 khoi @media (min-width: 1024px) ben duoi. */
.wpp-cs-b img {
    max-width: 100%;
    height: auto;
}

.wpp-cs-body p {
    margin: 0 0 14px;
}

.wpp-cs-body ul, .wpp-cs-body ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.wpp-cs-body li {
    margin-bottom: 6px;
}

.wpp-cs-body a {
    color: var(--wpp-navy);
    text-decoration: underline;
}

/* ---------- Trich dan ---------- */
.wpp-cs-quote {
    margin: 0;
    padding: 40px 0;
    text-align: center;
}

.wpp-cs-quote-text {
    margin: 0 auto;
    max-width: 760px;
    font-size: 19px;
    line-height: 30px;
    font-weight: 300;
    color: var(--wpp-navy);
}

.wpp-cs-quote-text p {
    margin: 0;
}

.wpp-cs-quote-name {
    margin-top: 22px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--wpp-navy);
}

/* ---------- Video ---------- */
.wpp-cs-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--wpp-ink);
}

.wpp-cs-video iframe, .wpp-cs-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* ---------- Anh du an: bang chuyen, dung khuon pgds321 ----------
 Toan bo kieu dang (the, khung anh 3/2, mui ten, cham trang) da co san o
 `.wpp-carousel` / `.wpp-card*` / `.wpp-carousel-foot` cua theme — KHONG viet lai.
 O day chi dat khoang cach cua dau muc va cho anh bam duoc. */
/* Dau muc "Hinh anh du an" — CAN GIUA ca khung (user chot 2026-09-16).
 `.wpp-sec-head` cua theme la LUOI 12 cot va `.wpp-sec-title` chi chiem 6 cot, nen
 `text-align: center` chi can giua trong NUA khung -> nhin ra lech han sang trai
 (do that: hop tieu de 24..706 trong khi khung 24..1400).
 Cho ve `display: block` thi tieu de tran ca khung, chu va thanh gradient (`margin:
 0 auto`) deu nam giua that. */
.wpp-cs-shots-head {
    display: block;
    margin-bottom: 24px;
    text-align: center;
}

.wpp-cs-shots-head .wpp-sec-title {
    grid-column: auto;
}

.wpp-cs-shots .wpp-cs-shot {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Ba con so ---------- */
.wpp-cs-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 24px 0;
}

.wpp-cs-stat {
    min-width: 0;
    padding-top: 20px;
    border-top: 1px solid var(--wpp-line);
}

.wpp-cs-stat-num {
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

.wpp-cs-stat-desc {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: rgba(10, 30, 120, 0.72);
}

/* ---------- Credits ---------- */
.wpp-cs-credits {
    padding: 24px 0 8px;
    text-align: center;
}

.wpp-cs-credit {
        margin: 0 0 10px;
    font-size: 16px;
    line-height: 20px;
    color: var(--wpp-navy);
}

.wpp-cs-credit-key {
    font-weight: 700;
}

/* ---------- Chia se ---------- */
.wpp-cs-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
}

.wpp-cs-share-label {
    font-size: 13px;
    line-height: 20px;
    color: rgba(10, 30, 120, 0.72);
}

.wpp-cs-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--wpp-line);
    border-radius: 9999px;
    color: var(--wpp-navy);
}

.wpp-cs-share a:hover {
    color: var(--wpp-white);
    background: var(--wpp-navy);
}

.wpp-cs-share svg {
    width: 17px;
    height: 17px;
}

/* ---------- 640px tro len ---------- */
@media (min-width: 640px) {
    .wpp-cs-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .wpp-cs-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-sec--cs {
        gap: 64px;
        padding: 40px 0 96px;
    }
    .wpp-cs-head {
        padding-top: 40px;
    }
    .wpp-cs-brand {
        font-size: 56px;
        line-height: 64px;
    }
    .wpp-cs-meta {
        margin-top: 44px;
        gap: 0 24px;
    }
    /* 2 cot bang nhau — dung ti le cua mau (col 1-6 / col 7-12) */
    .wpp-cs-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        padding: 20px 0;
    }
    /* `display: contents` go BO chiec hop cua .wpp-cs-b, cho cac the con cua no
     thanh o luoi cua chinh .wpp-cs-row. Nho vay:
     - doan van roi vao COT PHAI (grid-column 2), thang hang voi tieu de muc;
     - anh chen giua cac muc TRAN ca 2 cot (grid-column 1 / -1) va nam DUNG
     cho no duoc chen trong bai — khong bi nhet vao cot phai.
     Lam bang CSS nen KHONG phai dung toi regex cat noi dung. */
    .wpp-cs-h {
        grid-column: 1;
    }
    .wpp-cs-b {
        display: contents;
    }
    .wpp-cs-b > * {
        grid-column: 2;
    }
    .wpp-cs-b > img, .wpp-cs-b > figure, .wpp-cs-b > .wpp-cs-figure {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        margin: 8px 0 4px;
    }
    .wpp-cs-h h3 {
        font-size: 24px;
        line-height: 32px;
    }
    .wpp-cs-quote {
        padding: 72px 0;
    }
    .wpp-cs-quote-text {
        font-size: 24px;
        line-height: 34px;
    }
    .wpp-cs-shots {
        gap: 32px;
    }
    .wpp-cs-stats {
        padding: 32px 0;
    }
    .wpp-cs-stat-num {
        font-size: 26px;
        line-height: 34px;
    }
}
/* END: BLOCK_VIETBA_CTDA_01 */

/* BEGIN: BLOCK_VIETBA_DUAN_01 */
/* =========================================================================
 TRANG DU AN — hero dau trang (job vietba-du-an)
 Mau: yeu-cau/anh/du-an.png (chi phan dau trang) + hero trang Dich vu.

 KHONG viet lai nen/lop phu/chieu cao hero: tat ca dung chung
 `.wpp-sec--dvhero` · `.wpp-dvhero-bg` · `.wpp-dvhero-img` cua khoang
 BLOCK_VIETBA_DICH_VU_01. O day CHI ta 2 cho khac cua trang Du an, gom trong
 lop `.wpp-dvhero--left` de khong dung toi hero trang Dich vu:
 1. chu CAN TRAI (anh mau) thay vi can giua;
 2. dai day la 4 CON SO (icon + so + nhan) thay vi 4 nhan tron.

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Can trai ---------- */
.wpp-dvhero--left .wpp-dvhero-text {
    margin: 0;
    max-width: 660px;
    text-align: left;
}

.wpp-dvhero--left .wpp-dvhero-desc {
    margin-left: 0;
    margin-right: 0;
}

/* Vach cam ngan duoi tieu de — net rieng cua anh mau trang Du an */
.wpp-dvhero-rule {
    display: block;
    width: 48px;
    height: 3px;
    margin: 18px 0 0;
    border-radius: 2px;
    background: var(--wpp-accent);
}

/* ---------- 2. Dai 4 con so ---------- */
.wpp-dvhero-stats .wpp-dvhero-value {
    gap: 14px;
}
/* Chi hero CAN TRAI (trang Du an) moi day o thong ke ve trai. Hero can giua
   (trang Dich vu / Gioi thieu) giu nguyen `justify-content: center` san co. */
.wpp-dvhero--left .wpp-dvhero-stats .wpp-dvhero-value {
    justify-content: flex-start;
    text-align: left;
}

.wpp-dvhero-stats .wpp-dvhero-ic {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
}

.wpp-dvhero-stats .wpp-dvhero-ic svg {
    width: 24px;
    height: 24px;
}

.wpp-dvhero-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wpp-dvhero-stat-num {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: var(--wpp-white);
}

.wpp-dvhero-stats .wpp-dvhero-value-text {
    font-size: 13px;
    line-height: 19px;
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-dvhero--left .wpp-dvhero-text {
        max-width: 620px;
    }
    .wpp-dvhero--left .wpp-dvhero-title {
        font-size: 48px;
        line-height: 58px;
    }
    .wpp-dvhero-rule {
        width: 56px;
        margin-top: 22px;
    }
    .wpp-dvhero-stats .wpp-dvhero-ic {
        width: 52px;
        height: 52px;
    }
    .wpp-dvhero-stats .wpp-dvhero-ic svg {
        width: 26px;
        height: 26px;
    }
    .wpp-dvhero-stat-num {
        font-size: 26px;
        line-height: 32px;
    }
    /* Vach ngan doc giua cac o — anh mau co. `.wpp-dvhero-value` cua hero Dich vu
     da co san `border-left` o khoang BLOCK_VIETBA_DICH_VU_01, chi can noi padding
     cho hop voi o icon to hon. */
    .wpp-dvhero-stats .wpp-dvhero-value {
        padding: 0 22px;
    }
    .wpp-dvhero-stats .wpp-dvhero-value:first-child {
        padding-left: 0;
    }
}
/* END: BLOCK_VIETBA_DUAN_01 */

/* BEGIN: BLOCK_VIETBA_GIOITHIEU_HERO */
/* =========================================================================
 TRANG GIOI THIEU — hero NEN VIDEO (job vietba-gioithieu-hero)
 Mau: hero trang Dich vu, khac dung mot diem la nen chay video.

 KHONG viet lai khuon hero: nen toi, lop phu navy, chieu cao, chu, dai 4 o
 deu dung chung `.wpp-sec--dvhero` / `.wpp-dvhero-*` cua khoang
 BLOCK_VIETBA_DICH_VU_01 va `.wpp-dvhero-stats` cua khoang BLOCK_VIETBA_DUAN_01.
 O day CHI ta lop video phu kin khung.

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* Video nam TREN anh poster, DUOI lop phu navy (`.wpp-dvhero-bg::after` co z-index
 mac dinh nen tu nam tren nhe — giu video o z-index 0 la du). */
.wpp-dvhero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* iframe KHONG an `object-fit`, nen phai phong to cho phu kin: lay canh nao
 thieu lam chuan (100vw x 56.25vw cho man ngang, 177.78vh x 100vh cho man doc)
 roi keo ve giua. `pointer-events: none` de nguoi dung khong bam trung khung
 YouTube ben duoi chu. */
.wpp-dvhero-video--yt {
    /* `inset: auto` PHAI dung TRUOC top/left. `inset` la shorthand cua
     top/right/bottom/left, dat sau se xoa sach top:50% va left:50% vua khai ->
     iframe roi ve goc trai roi bi `transform` keo lech han ra ngoai (do that
     2026-09-16: video chi chiem mot goc, phan con lai tro nen navy). */
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Hero gio KHONG con `.wpp-dvhero-inner` (chu da xuong dai duoi) nen khong con gi
 day chieu cao — phai tu dat. Giu dung chieu cao hero trang Dich vu / Du an de ba
 trang cung mot nhip. */
.wpp-dvhero--video {
    min-height: 520px;
}

/* Khong con chu de len video thi lop phu chi con MOT viec: giu cho thanh dieu huong
 trong suot (chu trang) o dinh trang van doc duoc. Nen lam dam o TREN roi nhat dan,
 thay vi phu deu ca khung nhu hero co chu — de video hien ro. */
.wpp-dvhero--video .wpp-dvhero-bg::after {
    background: linear-gradient(180deg, rgba(6, 20, 80, 0.72) 0%, rgba(6, 20, 80, 0.26) 30%, rgba(6, 20, 80, 0.14) 100%);
}

/* ---------- Dai duoi hero: gioi thieu + so lieu ----------
 Dung lai nguyen `.wpp-abv-container` / `-eyebrow` / `-title` / `-desc` / `-stats`
 von co cua trang Gioi thieu, nen o day chi con vai net khung. */
.wpp-abv-intro {
    padding: 56px 0 64px;
    background: var(--wpp-white);
}

.wpp-abv-intro-head {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
}

.wpp-abv-intro .wpp-abv-stats {
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .wpp-dvhero--video {
        min-height: 700px;
    }
    .wpp-abv-intro {
        padding: 72px 0 80px;
    }
    .wpp-abv-intro .wpp-abv-stats {
        margin-top: 52px;
    }
}
/* END: BLOCK_VIETBA_GIOITHIEU_HERO */

/* BEGIN: BLOCK_VIETBA_CNDSS */
/* =========================================================================
 TRANG CONG NGHE CHUYEN DOI SO — job vietba-cndss
 Mau: yeu-cau/anh/cong-nghe-chuyen-doi-so.png

 PHAN LON KHONG CAN CSS MOI — dung lai nguyen:
 · hero          -> `.wpp-sec--dvhero` / `.wpp-dvhero-*`  (khoang BLOCK_VIETBA_DICH_VU_01)
 · tong quan     -> `.wpp-sec--ovw` / `.wpp-ovw-*`        (khoang BLOCK_VIETBA_CHIEN_LUOC_01)
 · dich vu chi tiet -> `.wpp-sec--scope` / `.wpp-scope-*`  (nt)
 · gia tri       -> `.wpp-sec--val` / `.wpp-val-*`        (nt)
 O day chi ta 2 cho RIENG cua trang nay:
 1. cot phai dai "Tong quan" la KHUNG VIDEO (anh mau), khong phai anh + huy hieu 360;
 2. dai CTA cuoi trang.

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Dai "Tong quan": cot phai la khung video ---------- */
/* Dai nay KHONG co huy hieu tron nen khong can chua le nhu `.wpp-ovw-media` */
.wpp-cnovw-media {
    min-width: 0;
}

.wpp-cnovw-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: var(--wpp-ink);
    box-shadow: 0 18px 40px rgba(10, 30, 120, 0.16);
}

.wpp-cnovw-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video nam TREN anh: anh chi lam nen cho vai giay video chua tai xong */
.wpp-cnovw-embed {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- 2. Dai CTA cuoi trang ---------- */
.wpp-cncta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding-top: 48px;
    padding-bottom: 48px;
    color: var(--wpp-white);
}

.wpp-cncta-text {
    min-width: 0;
}

.wpp-cncta-title {
    margin: 0;
    font-size: 26px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--wpp-white);
}

.wpp-cncta-desc {
    margin: 14px 0 0;
    max-width: 560px;
    font-size: 15px;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.8);
}

.wpp-cncta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    justify-self: start;
    height: 52px;
    padding: 0 28px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpp-navy);
    background: var(--wpp-white);
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.wpp-cncta-btn:hover {
    color: var(--wpp-white);
    background: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-cncta-btn svg {
    width: 18px;
    height: 18px;
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    /* Anh mau xep CHU BEN TRAI, khung video ben phai — nguoc voi dai "Tong quan"
     cua trang Tu van TT (anh trai, chu phai). */
    .wpp-cnovw-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }
    .wpp-cncta-inner {
        grid-template-columns: minmax(0, 1fr) max-content;
        gap: 40px;
        padding-top: 56px;
        padding-bottom: 56px;
    }
    .wpp-cncta-title {
        font-size: 32px;
        line-height: 42px;
    }
    .wpp-cncta-btn {
        justify-self: end;
    }
}
/* END: BLOCK_VIETBA_CNDSS */

/* BEGIN: BLOCK_VIETBA_BQSX */
/* =========================================================================
 TRANG BAN QUYEN & SAN XUAT DA NEN TANG — job vietba-bqsx
 Mau: yeu-cau/anh/ban-quyen-sx.png

 Dung lai san:
 · hero        -> `.wpp-sec--dvhero` / `.wpp-dvhero-*`   (BLOCK_VIETBA_DICH_VU_01)
 · tong quan   -> `.wpp-sec--ovw` / `.wpp-ovw-*`         (BLOCK_VIETBA_CHIEN_LUOC_01)
 · khung video -> `.wpp-cnovw-frame` / `.wpp-cnovw-*`    (BLOCK_VIETBA_CNDSS)
 O day ta 3 cho rieng cua trang nay:
 1. dai gia tri o hero co 5 o (cac trang kia 4 o);
 2. 3 o con so duoi doan van cua dai "Tong quan";
 3. the dich vu co ANH BIA (cac trang kia la the icon).

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Hero: dai gia tri 5 o ---------- */
@media (min-width: 1024px) {
    .wpp-dvhero-values--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------- 2. Dai "Tong quan": 3 o con so ---------- */
.wpp-bqovw-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.wpp-bqovw-stat {
    min-width: 0;
    padding: 16px 14px;
    border: 1px solid var(--wpp-line);
    border-radius: 10px;
    background: var(--wpp-white);
}

.wpp-bqovw-num {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-bqovw-label {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: rgba(10, 30, 120, 0.72);
}

/* ---------- 3. The dich vu co anh bia ---------- */
.wpp-sec--svccard {
    padding: 8px 0 64px;
    background: var(--wpp-white);
}

/* Dau muc dung nguyen bo class cua w8x4elg / flortd7 — chi dat khoang cach va
 cho nut phu nam ben phai o kho rong. */
.wpp-svccard-head {
    position: relative;
    margin-bottom: 32px;
}

.wpp-svccard-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--wpp-navy);
    text-decoration: none;
}

.wpp-svccard-more:hover {
    color: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-svccard-more svg {
    width: 16px;
    height: 16px;
}

.wpp-svccard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.wpp-svccard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--wpp-line);
    border-radius: 14px;
    background: var(--wpp-white);
    transition: box-shadow 0.3s, transform 0.3s;
}

.wpp-svccard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(10, 30, 120, 0.12);
}

.wpp-svccard-media {
    border-radius: 10px;
    background: var(--wpp-cream);
}

.wpp-svccard-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.35s;
    border-radius: 10px;
}

.wpp-svccard:hover .wpp-svccard-img {
    transform: scale(1.04);
}

.wpp-svccard-body {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 8px 8px;
}

.wpp-svccard-text {
    flex: 1 1 auto;
    min-width: 0;
}

.wpp-svccard-tag {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 18px;
    color: rgba(10, 30, 120, 0.6);
}

.wpp-svccard-name {
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-svccard-desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 30, 120, 0.72);
}

/* Nut mui ten tron goc duoi-phai the — chi hien khi item CO `url` */
.wpp-svccard-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--wpp-line);
    border-radius: 9999px;
    color: var(--wpp-navy);
    transition: background-color 0.25s, color 0.25s;
}

.wpp-svccard-go:hover {
    color: var(--wpp-white);
    background: var(--wpp-navy);
}

.wpp-svccard-go svg {
    width: 15px;
    height: 15px;
}

/* ---------- 640px tro len ---------- */
@media (min-width: 640px) {
    .wpp-svccard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-sec--svccard {
        padding: 8px 0 80px;
    }
    .wpp-svccard-head {
        margin-bottom: 40px;
    }
    .wpp-svccard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    /* Nut "Xem tat ca dich vu" ve goc phai, ngang hang voi tieu de */
    .wpp-svccard-head--nut .wpp-svccard-more {
        position: absolute;
        right: 0;
        top: 4px;
        margin-top: 0;
    }
    .wpp-bqovw-stats {
        gap: 16px;
        margin-top: 32px;
    }
    .wpp-bqovw-num {
        font-size: 28px;
        line-height: 34px;
    }
}
/* END: BLOCK_VIETBA_BQSX */

/* BEGIN: BLOCK_VIETBA_DM */
/* =========================================================================
 TRANG DIGITAL MARKETING — job vietba-dm
 Mau: yeu-cau/anh/digital-marketing.png

 Dung lai san:
 · hero            -> `.wpp-sec--dvhero` / `.wpp-dvhero-*`  (BLOCK_VIETBA_DICH_VU_01)
 · "Ve dich vu"    -> `.wpp-sec--ovw` / `.wpp-ovw-*`        (BLOCK_VIETBA_CHIEN_LUOC_01)
 · dich vu chi tiet-> `.wpp-sec--scope` / `.wpp-scope-*`    (nt)
 · CTA             -> `.wpp-sec--val` / `.wpp-cncta-*`      (BLOCK_VIETBA_CNDSS)
 O day ta 3 cho rieng cua trang nay:
 1. 4 o con so (2x2) cua dai "Chung toi mang den gia tri gi";
 2. luoi dich vu chi tiet 4 COT (8 the), cac trang kia 3 cot;
 3. dong nho tren tieu de CTA.

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Dai "Chung toi mang den gia tri gi" — 4 o con so ---------- */
.wpp-dmval-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.wpp-dmval-stat {
    min-width: 0;
    padding: 22px 20px;
    border: 1px solid var(--wpp-line);
    border-radius: 12px;
    background: var(--wpp-white);
}

/* ⚠️ User chot: con so de MAU XANH NAVY GIONG TIEU DE, khong de cam nhu anh mau.
 Dung dung `--wpp-navy` — cung bien mau ma `.wpp-ovw-title` dang dung. */
.wpp-dmval-num {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-dmval-label {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: rgba(10, 30, 120, 0.72);
}

/* ---------- 2. Luoi dich vu chi tiet: 8 the, 4 cot ----------
 Khoa theo `.wpp-dmscope` — day la `config.class` cua block, theme in ra tren
 chinh the boc `[nh-block]`. Nho vay KHONG dung toi luoi 3 cot cua 2 trang kia
 dang dung cung view `view_wpp_scope.tpl`. */
.wpp-dmscope .wpp-scope-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* ---------- 3. Dong nho tren tieu de CTA ---------- */
.wpp-cncta-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--wpp-lilac);
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-dmval-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .wpp-dmval-stats {
        gap: 16px;
    }
    .wpp-dmval-num {
        font-size: 30px;
        line-height: 36px;
    }
    .wpp-dmscope .wpp-scope-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
    .wpp-dmscope .wpp-scope-card {
        padding: 20px 18px;
    }
}
/* END: BLOCK_VIETBA_DM */

/* BEGIN: BLOCK_VIETBA_BM */
/* =========================================================================
 TRANG BOOKING MEDIA — job vietba-bm
 Mau: yeu-cau/anh/booking-media.png

 Dung lai san:
 · hero          -> `.wpp-sec--dvhero` / `.wpp-dvhero-*`   (BLOCK_VIETBA_DICH_VU_01)
 · the co anh    -> `.wpp-sec--svccard` / `.wpp-svccard-*` (BLOCK_VIETBA_BQSX)
 · quy trinh     -> `.wpp-sec--process` / `.wpp-proc-*`    (BLOCK_VIETBA_DICH_VU_01)
 · CTA           -> `.wpp-sec--val` / `.wpp-cncta-*`       (BLOCK_VIETBA_CNDSS + _DM)
 O day ta 3 cho rieng cua trang nay:
 1. dai "Nhung con so an tuong";
 2. huy hieu icon de len anh the kenh;
 3. quy trinh 6 BUOC (trang Dich vu la 5 buoc).

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Dai "Nhung con so an tuong" ---------- */
.wpp-sec--bmstats {
    padding: 8px 0 56px;
    background: var(--wpp-white);
}

.wpp-bmstats-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 28px 24px;
    border-radius: 16px;
    background: var(--wpp-cream);
}

.wpp-bmstats-intro {
    min-width: 0;
}

/* Dau muc nam trong cot trai nen bo thanh gradient can giua cua `.wpp-sec-title`
 (o day no se lech han sang phai) — chi giu kieu chu. */
.wpp-bmstats-title::after {
    margin-left: 0;
    margin-right: 0;
}

.wpp-bmstats-desc {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 23px;
    color: rgba(10, 30, 120, 0.72);
}

.wpp-bmstats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
    min-width: 0;
}

.wpp-bmstats-cell {
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid var(--wpp-line);
}

.wpp-bmstats-num {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-bmstats-label {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: rgba(10, 30, 120, 0.72);
}

/* ---------- 2. Huy hieu icon de len anh the kenh ---------- */
.wpp-svccard-media {
    position: relative;
}

.wpp-svccard-badge {
    position: absolute;
    left: 14px;
    bottom: -20px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 3px solid var(--wpp-white);
    border-radius: 12px;
    color: var(--wpp-navy);
    background: var(--wpp-cream);
}

.wpp-svccard-badge svg {
    width: 22px;
    height: 22px;
}

/* Huy hieu thoi ra ngoai anh nen than the phai chua le cho no */
.wpp-bmchan .wpp-svccard-body {
    padding-top: 32px;
}

/* ---------- 3. Quy trinh 6 buoc ----------
 `.wpp-proc-track` cua trang Dich vu duoc dat cho 5 buoc (4 duong noi). Trang nay
 6 buoc (5 duong noi) nen phai noi them mot cap cot. Khoa theo `.wpp-bmproc` —
 day la `config.class` cua block, theme in ra tren the boc `[nh-block]`, nen
 KHONG dung toi dai 5 buoc cua trang Dich vu. */
@media (min-width: 1024px) {
    .wpp-bmproc .wpp-proc-track {
        grid-template-columns: repeat(5, max-content minmax(20px, 1fr)) max-content;
    }
    .wpp-bmproc .wpp-proc-step {
        max-width: 170px;
    }
    .wpp-bmproc .wpp-proc-link {
        padding: 0 6px;
    }
    .wpp-bmproc .wpp-proc-link svg {
        max-width: 52px;
    }
}

/* ---------- 640px tro len ---------- */
@media (min-width: 640px) {
    .wpp-bmstats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-sec--bmstats {
        padding: 8px 0 72px;
    }
    .wpp-bmstats-box {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
        gap: 48px;
        padding: 36px 40px;
    }
    .wpp-bmstats-grid {
        gap: 16px;
    }
    .wpp-bmstats-cell {
        padding-left: 24px;
    }
    .wpp-bmstats-num {
        font-size: 32px;
        line-height: 38px;
    }
}
/* END: BLOCK_VIETBA_BM */

/* BEGIN: BLOCK_VIETBA_OOH */
/* =========================================================================
 TRANG OOH — QUANG CAO NGOAI TROI — job vietba-ooh
 Mau: yeu-cau/anh/ooh.png

 ⚠️ USER CHOT (yeu cau so 5): ANH MAU DUNG TONG CAM o rat nhieu cho (eyebrow,
 nua tieu de, nut bam, huy hieu icon, o icon dai gia tri). TAT CA doi sang NAVY
 `--wpp-navy` — cung mau tieu de. Nen o day KHONG co mot khai bao `--wpp-accent`
 nao, va con chan them mau cam san co cua theme o dai "Du an tieu bieu"
 (`.wpp-card:hover .wpp-card-title a` von la `--wpp-accent-ink`).

 Dung lai san:
 · hero        -> `.wpp-sec--dvhero` / `.wpp-dvhero-*` + `.wpp-dvhero-stats`
 · gioi thieu  -> `.wpp-sec--ovw` / `.wpp-cnovw-*`  (khung video)
 · 4 gia tri   -> `.wpp-sec--scope` / `.wpp-scope-*`
 · 6 hinh thuc -> `.wpp-sec--svccard` / `.wpp-svccard-*`
 · quy trinh   -> `.wpp-sec--process` / `.wpp-proc-*`  (5 buoc — dung mac dinh)
 · CTA         -> `.wpp-sec--val` / `.wpp-cncta-*`
 ========================================================================= */
/* ---------- Hero: dai day 3 o con so ---------- */
@media (min-width: 640px) {
    .wpp-dvhero-values--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Dai "Gioi thieu dich vu": nut thay the trich dan ---------- */
.wpp-oohovw-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    margin-top: 24px;
    padding: 0 26px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpp-white);
    background: var(--wpp-navy);
    text-decoration: none;
    transition: background-color 0.25s;
}

.wpp-oohovw-btn:hover {
    color: var(--wpp-white);
    background: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-oohovw-btn svg {
    width: 18px;
    height: 18px;
}

/* ---------- Dai "4 gia tri": o icon TRON, the khong vien ----------
 Khoa theo `.wpp-oohgt` (config.class cua block) nen KHONG dung toi luoi the
 co vien cua 3 trang kia dang dung cung view `view_wpp_scope.tpl`. */
.wpp-oohgt .wpp-sec--scope, .wpp-sec--oohgt {
    background: var(--wpp-cream);
}

.wpp-oohgt .wpp-scope-card {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    border: 0;
    background: none;
}

.wpp-oohgt .wpp-scope-card:hover {
    transform: none;
    box-shadow: none;
}

.wpp-oohgt .wpp-scope-ic {
    width: 62px;
    height: 62px;
    border-radius: 9999px;
    background: var(--wpp-accent-ink);
    color: #fff;
}

.wpp-oohgt .wpp-scope-ic svg {
    width: 30px;
    height: 30px;
}

/* ---------- Dai "6 hinh thuc": huy hieu icon VUONG, nen navy ---------- */
.wpp-oohhinhthuc .wpp-svccard-badge {
    border-radius: 10px;
    color: var(--wpp-white);
    background: var(--wpp-navy);
}

/* ---------- CHAN MAU CAM (yeu cau so 5) ----------
 Theme dat `--wpp-accent-ink` (cam) cho tieu de the khi di chuot va cho ngay
 thang. Tren trang nay doi het ve navy. */
.wpp-oohduan .wpp-card:hover .wpp-card-title a, .wpp-oohduan .wpp-card-date, .wpp-oohduan .wpp-card-date * {
    color: var(--wpp-navy);
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-oohgt .wpp-scope-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
    .wpp-oohgt .wpp-scope-card {
        padding: 4px 0;
    }
}
/* END: BLOCK_VIETBA_OOH */

/* BEGIN: BLOCK_VIETBA_CTTT */
/* =========================================================================
 TRANG CHI TIET TIN TUC — job vietba-cttt
 Mau: yeu-cau/anh/chi-tiet-tin-tuc.png

 USER CHOT:
 · Hero dung khuon `.wpp-sec--dvhero` cua trang Tu van truyen thong, NHUNG mang
 them LOP RIENG `.wpp-dvhero--post` — moi net rieng cua trang nay deu viet
 duoi lop do, nen 6 trang dich vu dung chung `.wpp-sec--dvhero` KHONG doi.
 · Bo phan binh luan — khoa theo ROW `.wpp-row--postextra` chu KHONG theo ma
 block: block `17w3vr5` con duoc trang "Chi tiet san pham" dung (row class
 `mt-5`), an theo ma block se an nham ca ben do.

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Hero rieng cua trang chi tiet tin tuc ---------- */
/* Anh mau can TRAI (khac 6 trang dich vu can giua) va thap hon vi khong co dai
 4 gia tri o day. */
.wpp-dvhero--post .wpp-dvhero-inner {
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 48px;
}

.wpp-dvhero--post .wpp-dvhero-text {
    margin: 0;
    max-width: 720px;
    text-align: left;
}

.wpp-post-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.72);
}

.wpp-post-crumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.wpp-post-crumb a:hover {
    color: var(--wpp-white);
    text-decoration: none;
}

.wpp-post-crumb-now {
    color: var(--wpp-white);
}

/* Huy hieu chuyen muc. Anh mau de CAM — o day dung navy dam tren nen sang cho
 cung he mau voi phan con lai cua site. */
.wpp-post-badge {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wpp-navy);
    background: var(--wpp-white);
}

.wpp-dvhero--post .wpp-post-hero-title {
    margin: 0;
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    text-transform: none;
}

.wpp-dvhero--post .wpp-post-hero-lead {
    margin: 18px 0 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.82);
}

.wpp-dvhero--post .wpp-post-hero-lead p {
    margin: 0 0 8px;
}

.wpp-dvhero--post .wpp-post-hero-lead p:last-child {
    margin-bottom: 0;
}

.wpp-post-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin-top: 26px;
}

.wpp-post-hero-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.78);
}

.wpp-post-hero-item svg {
    width: 16px;
    height: 16px;
}

/* ---------- 2. Ruot bai ---------- */
.wpp-sec--postbody {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0 64px;
    background: var(--wpp-white);
}

.wpp-post-cover {
    margin: 0;
}

.wpp-post-cover-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.wpp-post-cover-cap {
    margin-top: 12px;
    font-size: 13px;
    line-height: 20px;
    font-style: italic;
    text-align: center;
    color: rgba(10, 30, 120, 0.66);
}

/* Cot chu hep lai cho de doc — anh mau dat ruot bai trong khoang ~860px */
.wpp-sec--postbody .wpp-container {
    max-width: 920px;
}

.wpp-post-content {
    font-size: 16px;
    line-height: 28px;
    color: var(--wpp-navy);
}

.wpp-post-content p {
    margin: 0 0 16px;
}

.wpp-post-content img {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
}

.wpp-post-share {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wpp-post-share-label {
    font-size: 14px;
    line-height: 20px;
    color: rgba(10, 30, 120, 0.72);
}

.wpp-post-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    color: var(--wpp-white);
    background: var(--wpp-navy);
}

.wpp-post-share a:hover {
    background: var(--wpp-navy-hover);
}

.wpp-post-share svg {
    width: 17px;
    height: 17px;
}

/* Hieu ung "hien dan khi cuon toi" cua site gan `.wpp-rv` vao `.wpp-post-content`
 (danh sach TARGETS trong custom.js), va `.wpp-rv.is-in` keo theo `text-align:
 center` — ca ruot bai bi can giua sau khi cuon toi. Do la net chung toan site,
 khong sua o do; tra lai can trai RIENG cho ruot bai nay. Phai khoa qua
 `.wpp-sec--postbody` vi trang Chi tiet du an cung dung `.wpp-post-content` —
 khong duoc doi 43 trang do khi user chi yeu cau trang tin tuc. */
.wpp-sec--postbody .wpp-post-content.wpp-rv.is-in {
    text-align: left;
}

/* ---------- 3. BO PHAN BINH LUAN (user chot) ----------
 Khoa theo ROW cua rieng trang Chi tiet bai viet. Trang Chi tiet san pham cung
 dung block `17w3vr5` nhung row class la `mt-5` nen KHONG bi an theo. */
.wpp-row--postextra {
    display: none;
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-dvhero--post .wpp-dvhero-inner {
        padding-top: 132px;
        padding-bottom: 64px;
    }
    .wpp-dvhero--post .wpp-post-hero-title {
        font-size: 40px;
        line-height: 52px;
    }
    .wpp-sec--postbody {
        gap: 40px;
        padding: 56px 0 80px;
    }
}
/* END: BLOCK_VIETBA_CTTT */

/* BEGIN: BLOCK_BLOCK_VIETBA_CTTT */
/* Khoang nay bi tao nham (day CSS-BLOCK voi slug da co san tien to BLOCK_).
   Noi dung that nam o khoang BLOCK_VIETBA_CTTT phia tren. Giu rong. */
/* END: BLOCK_BLOCK_VIETBA_CTTT */

/* BEGIN: BLOCK_VIETBA_LIENHE */
/* =========================================================================
 TRANG LIEN HE — job vietba-lienhe
 Mau: yeu-cau/anh/lien-he.png

 USER CHOT:
 · Chi cat RUOT trang, header/footer giu nguyen.
 · Hero dung khuon hero trang Tu van truyen thong tong the, NHUNG mang them
 LOP RIENG `.wpp-dvhero--lienhe` — moi net rieng cua trang nay viet duoi lop
 do, nen 7 trang dang dung chung `.wpp-sec--dvhero` KHONG doi.
 · Bo dai "Ban muon hop tac hoac co du an cu the?" cua anh mau -> khong dung.

 DUNG LAI SAN, KHONG VIET LAI:
 · nen/lop phu/chieu cao hero -> `.wpp-sec--dvhero` (BLOCK_VIETBA_DICH_VU_01)
 · can trai + vach cam + o icon vuong -> `.wpp-dvhero--left` · `.wpp-dvhero-rule`
 · `.wpp-dvhero-stats` (BLOCK_VIETBA_DUAN_01)
 · o nhap lieu + nut gui -> `.wpp-form` · `.form-control` (BLOCK_WPP_CONTACT)
 · dau muc dai 3 -> `.wpp-sec-head.wpp-service-head` › `.wpp-d3.wpp-sec-title`

 MAU: chi dung token --wpp-* khai o dau custom.css cho .wpp-sec.
 ========================================================================= */
/* ---------- 1. Hero rieng cua trang Lien he ---------- */
/* Dong 2 cua tieu de xuong hang va to mau nhan — dung ton `--wpp-accent` co san,
 khong khai mau moi. */
.wpp-lhhero-accent {
    display: block;
    color: var(--wpp-accent);
}

/* Dai 4 cam ket muon khung `-stats` (von danh cho CON SO 22px/700). O day dong
 tren la mot cum chu nen phai keo co chu ve co nhan. */
.wpp-dvhero--lienhe .wpp-dvhero-stat-num {
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
}

.wpp-dvhero--lienhe .wpp-dvhero-values {
    margin-top: 36px;
}

/* ---------- 2. Dai "Gui yeu cau tu van" ---------- */
.wpp-sec--lhform {
    padding: 40px 0 8px;
    background: var(--wpp-white);
}

.wpp-lh-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.wpp-lh-formcard {
    min-width: 0;
    padding: 24px 20px;
    border-radius: 16px;
    background: var(--wpp-cream);
}

.wpp-lh-cardtitle {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wpp-accent);
}

.wpp-lh-cardnote {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 30, 120, 0.72);
}

.wpp-lh-form {
    margin-top: 22px;
}

.wpp-lh-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* O chon dich vu: bo mui ten mac dinh cua he dieu hanh, ve lai cho dong bo voi
 cac o nhap con lai. */
.wpp-lh-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1e78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
}

.wpp-lh-agree {
    margin-top: 2px;
}

.wpp-lh-check {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: rgba(10, 30, 120, 0.78);
    cursor: pointer;
}

/* Khong co dong nay thi luc Validate chen `label.error` (co so 100%) vao hang,
 chu dong y bi bop con mot tu moi dong. Do tren kho 390.
 Co so phai la 0 (khong phai auto): de auto thi chu doi dung be rong noi dung,
 cong them o tich 16px la vuot hang -> o tich bi day xuong dong rieng. */
.wpp-lh-check > span {
    flex: 1 1 0;
    min-width: 0;
}

/* Hieu ung "hien dan khi cuon toi" cua site gan `.wpp-rv` vao `.wpp-form`
 (danh sach TARGETS trong custom.js), va `.wpp-rv.is-in` keo theo
 `text-align: center` — ca form bi can giua sau khi cuon toi. Do la net chung
 toan site, khong sua o do; tra lai can trai RIENG cho form trang nay. */
.wpp-lh-form.wpp-rv.is-in {
    text-align: left;
}

.wpp-lh-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--wpp-navy);
}

/* Loi cua o tich do jQuery Validate chen ngay sau input -> nam giua o va chu.
 Cho no xuong hang rieng. */
.wpp-lh-check label.error {
    order: 3;
    flex: 1 0 100%;
}

/* ---------- 3. Cot phai: hotline · ban do · dia chi ---------- */
.wpp-lh-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.wpp-lh-hotline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    border-radius: 16px;
    color: var(--wpp-white);
    background: var(--wpp-navy);
}

.wpp-lh-hotline-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
}

.wpp-lh-hotline-ic svg {
    width: 26px;
    height: 26px;
}

.wpp-lh-hotline-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wpp-lh-hotline-label {
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.76);
}

.wpp-lh-hotline-num {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--wpp-white);
    text-decoration: none;
}

.wpp-lh-hotline-num:hover {
    color: var(--wpp-white);
    text-decoration: underline;
}

.wpp-lh-hotline-time {
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.76);
}

/* Ban do nhung. Khung ti le co dinh de khoi nhay bo cuc luc iframe chua tai. */
.wpp-lh-map {
    overflow: hidden;
    border: 1px solid var(--wpp-line);
    border-radius: 16px;
    background: var(--wpp-cream);
}

.wpp-lh-map iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
}

.wpp-lh-addr {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--wpp-line);
    border-radius: 16px;
    background: var(--wpp-white);
}

.wpp-lh-addr-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    color: var(--wpp-white);
    background: var(--wpp-accent);
}

.wpp-lh-addr-ic svg {
    width: 22px;
    height: 22px;
}

.wpp-lh-addr-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wpp-lh-addr-name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wpp-navy);
}

.wpp-lh-addr-line {
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 30, 120, 0.78);
}

.wpp-lh-addr-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: var(--wpp-navy);
    text-decoration: none;
}

.wpp-lh-addr-link:hover {
    color: var(--wpp-navy-hover);
    text-decoration: none;
}

.wpp-lh-addr-link svg {
    width: 16px;
    height: 16px;
}

/* ---------- 4. Dai "He thong van phong" ---------- */
.wpp-sec--lhvp {
    padding: 40px 0 56px;
    background: var(--wpp-white);
}

.wpp-lhvp-head {
    margin-bottom: 28px;
}

.wpp-lhvp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.wpp-lhvp-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--wpp-line);
    border-radius: 14px;
    background: var(--wpp-white);
    transition: box-shadow 0.25s, transform 0.25s;
}

.wpp-lhvp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(6, 20, 80, 0.12);
}

.wpp-lhvp-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--wpp-cream);
}

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

/* Chua co anh that cua van phong -> o nen chuyen sac + icon toa nha, thay vi
 muon anh thanh pho khac gan vao cho co.
 KHONG dung `--wpp-grad`: ton do la dai cau vong cua logo, de len ca the thi
 chi ap dao. Doi ve chuyen sac navy — van chi dung ton --wpp-* co san. */
.wpp-lhvp-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, var(--wpp-ink) 0%, var(--wpp-navy) 58%, var(--wpp-navy-hover) 100%);
}

.wpp-lhvp-ph svg {
    width: 54px;
    height: 54px;
}

.wpp-lhvp-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
    padding: 18px 18px 20px;
}

.wpp-lhvp-eyebrow {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(10, 30, 120, 0.6);
}

.wpp-lhvp-name {
    margin: 0;
    font-size: 17px;
    line-height: 25px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

.wpp-lhvp-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.wpp-lhvp-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 30, 120, 0.82);
}

.wpp-lhvp-line a {
    color: rgba(10, 30, 120, 0.82);
    text-decoration: none;
}

.wpp-lhvp-line a:hover {
    color: var(--wpp-navy);
    text-decoration: underline;
}

.wpp-lhvp-lic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--wpp-navy);
}

.wpp-lhvp-lic svg {
    width: 17px;
    height: 17px;
}

/* ---------- 640px tro len ---------- */
@media (min-width: 640px) {
    .wpp-lh-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wpp-lhvp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 1024px tro len ---------- */
@media (min-width: 1024px) {
    .wpp-dvhero--lienhe .wpp-dvhero-stat-num {
        font-size: 16px;
        line-height: 22px;
    }
    .wpp-dvhero--lienhe .wpp-dvhero-values {
        margin-top: 52px;
    }
    .wpp-sec--lhform {
        padding: 56px 0 8px;
    }
    .wpp-lh-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 28px;
    }
    .wpp-lh-formcard {
        padding: 34px 32px;
    }
    .wpp-lh-cardtitle {
        font-size: 22px;
        line-height: 30px;
    }
    .wpp-lh-map iframe {
        height: 300px;
    }
    .wpp-sec--lhvp {
        padding: 56px 0 80px;
    }
    .wpp-lhvp-head {
        margin-bottom: 40px;
    }
    .wpp-lhvp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    .wpp-lhvp-body {
        padding: 20px 22px 24px;
    }
}
/* END: BLOCK_VIETBA_LIENHE */
.wpp-oohhinhthuc {
    padding-top: 4rem;
}
@media (max-width: 768px) {
    .wpp-scope-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wpp-oohgt .wpp-scope-card {
        align-items: center;
    }
    .wpp-proc-step {
        text-align: center;
    }
    .wpp-proc-step:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .wpp-dvhero-stats .wpp-dvhero-value:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .wpp-service-title {
        font-size: 16px;
    }
    .wpp-marquee-row {
        flex: 1;
        padding: 0 15px;
    }
    .wpp-marquee-row span {
        white-space: normal;
        font-size: 29px;
    }
    .wpp-scope-card {
        align-items: center;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding: 20px;
    }
    .wpp-scope-text {
        text-align: justify;
    }
    .wpp-sec--cs {
        padding: 75px 0 72px;
    }
    .wpp-row--abv-video .wpp-abv-video .wpp-abv-intro {
        padding-bottom: 0;
    }
    .wpp-ft-bottom {
        margin-top: 0;
    }
}

/* BEGIN: BLOCK_VIETBA_DICH_VU_DEMO_01 */
/* ===== [WPP] Trang Dịch vụ demo — job vietba-dich-vu-demo =====
 Mẫu: www.wpp.com/en/about/our-company (đo ở 1440: navy #000050 · kem #fafaf0 · ô logo #f3f3f3 ·
 chữ 16px · tiêu đề dải 40px · hero 52px · độ đậm 300–400).
 2 khối dải ảnh/chữ ăn sẵn CSS `.wpp-about-*`; đây chỉ là phần hero + 6 ô logo + CTA. */
/* Mẫu dùng navy #000050, site dùng #0a1e78. Khai lại biến NGAY TRONG khoang của job,
 không đụng `:root` (D4) — mọi chữ/nút của 5 khối này tự lấy màu mẫu. */
.wpp-dvd-hero, .wpp-dvd-band, .wpp-dvd-logo, .wpp-dvd-cta {
    --wpp-navy: #000050;
    --wpp-navy-hover: #0a1e78;
}

/* ---------- Dải 1: hero (mẫu: "OUR COMPANY" in hoa, nét mảnh, căn trái) ---------- */
.wpp-dvd-hero .wpp-dvd-hero-title {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

.wpp-dvd-hero .wpp-hero-head {
    margin: 0;
    text-align: left;
}

.wpp-dvd-hero .wpp-hero-desc {
    max-width: 548px;
}

/* ---------- Dải 4: tiêu đề + 6 ô logo ----------
 `.wpp-sec--partner` của site có nền kem-xanh và logo bị giảm bão hoà; mẫu là nền TRẮNG,
 logo để nguyên màu, ô nền xám #f3f3f3. */
.wpp-dvd-logo {
    padding: 56px 0;
    background: var(--wpp-white);
}

.wpp-dvd-logo .wpp-partner-img {
    max-width: 72%;
    max-height: 56px;
    filter: none;
    opacity: 1;
}

.wpp-dvd-logo-head {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.wpp-dvd-logo .wpp-dvd-logo-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--wpp-navy);
}

.wpp-dvd-logo .wpp-dvd-logo-desc {
    margin: 0;
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: -0.32px;
    color: var(--wpp-navy);
}

.wpp-dvd-logo-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 32px;
}

.wpp-dvd-logo .wpp-dvd-logo-item {
    min-width: 0;
    height: 120px;
    padding: 0 16px;
    border-radius: 4px;
    background: #f3f3f3;
    text-decoration: none;
}

.wpp-dvd-logo-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--wpp-navy);
    text-align: center;
}

/* ---------- Dải 3/5/6/7: nền đúng mẫu ----------
 `--wpp-cream` của site là xanh rất nhạt #f3f6fd, mẫu dùng kem ấm #fafaf0;
 dải câu tuyên bố của mẫu nằm trên nền TRẮNG. */
.wpp-dvd-band .wpp-about-band--alt {
    background: #fafaf0;
}

.wpp-dvd-band .wpp-about-band--intro {
    background: var(--wpp-white);
}

/* ---------- Dải 8: CTA — thẻ trắng đè lên ảnh/video tràn viền ---------- */
section.wpp-dvd-cta {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 480px;
}

.wpp-dvd-cta .wpp-feature-inner {
    display: flex;
    justify-content: center;
}

/* Lop nen la `position: absolute; inset: 0` -> chieu cao phai dat o CHINH DAI,
 dat vao `.wpp-feature-bg` thi anh chi cao bang so do, con dai van ngan/dai khac. */
/* `.wpp-feature-video` của theme viết cho IFRAME YouTube (top/left/transform + min-width theo vh),
 thẻ <video> có object-fit nên phải gỡ hết mấy thứ đó, không thì video phình 1778px và lệch tâm. */
.wpp-dvd-cta .wpp-feature-bg--video .wpp-feature-video, .wpp-dvd-cta .wpp-feature-video {
    position: absolute;
    inset: 0;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
    object-fit: cover;
}

.wpp-dvd-cta .wpp-dvd-cta-card {
    max-width: 456px;
    align-items: center;
    gap: 32px;
    border-radius: 4px;
    text-align: left;
}

.wpp-dvd-cta .wpp-dvd-cta-title {
    margin: 0;
    font-size: 24px;
    line-height: 31px;
    font-weight: 300;
    letter-spacing: -0.4px;
    color: var(--wpp-navy);
    text-align: center;
}

/* ---------- Nút "Khám phá dịch vụ" (mẫu: nền trắng, viền navy) ---------- */
.wpp-dvd-band .wpp-btn--light {
    border: 1px solid var(--wpp-navy);
    background: var(--wpp-white);
    color: var(--wpp-navy);
}

.wpp-dvd-band .wpp-btn--light:hover {
    background: var(--wpp-navy);
    color: var(--wpp-white);
}
.wpp-dvd-hero-new .wpp-hero-head--left {
    padding-top: 120px;
}

@media (min-width: 768px) {
    .wpp-dvd-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    section.wpp-dvd-cta {
        min-height: 780px;
    }
    .wpp-dvd-logo {
        padding: 96px 0;
    }
    .wpp-dvd-logo .wpp-dvd-logo-title {
        font-size: 32px;
        line-height: 36px;
    }
    .wpp-dvd-hero .wpp-dvd-hero-title {
        font-size: 52px;
    }
    .wpp-dvd-logo-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
    }
    .wpp-dvd-logo-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin-top: 40px;
    }
    .wpp-dvd-logo .wpp-dvd-logo-item {
        height: 145px;
    }
}
/* END: BLOCK_VIETBA_DICH_VU_DEMO_01 */