/* ==========================================================================

   DIC2 THEME - MAIN STYLESHEET

   Design matching DIC No.2 News Archive Demo

   ========================================================================== */



/* 1. RESET & BASE VARIABLES */

:root {

    /* Exact Demo Color Tokens */

    --background: oklch(100% 0 0);

    --foreground: oklch(15% .02 250);

    --navy: oklch(22% .08 258);

    --navy-foreground: oklch(99% 0 0);

    --charcoal: oklch(24% .005 250);

    --esg: oklch(52% .13 155);

    --esg-foreground: oklch(99% 0 0);

    --muted: oklch(96.5% .003 250);

    --muted-foreground: oklch(48% .02 250);

    --line: oklch(90% .005 250);

    --surface: oklch(97.5% .003 250);

    --accent-red: oklch(58% .21 27);

    --card: oklch(100% 0 0);

    --card-foreground: oklch(15% .02 250);



    /* Semantic Mappings */

    --color-primary: var(--navy);

    --color-heading: var(--navy);

    --color-text-main: var(--foreground);

    --color-text-muted: var(--muted-foreground);

    --color-border: var(--line);

    --color-bg-light: var(--surface);

    --color-white: var(--background);



    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;



    /* Dynamic Header & Admin Bar Heights */

    --header-height: 69px;

    --adminbar-height: 0px;

}



body.admin-bar {

    --adminbar-height: 32px;

}



@media screen and (max-width: 782px) {

    body.admin-bar {

        --adminbar-height: 46px;

    }

}



*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: var(--font-body);

    color: var(--color-text-main);

    background-color: var(--color-white);

    line-height: 1.6;

    font-size: 15px;

    -webkit-font-smoothing: antialiased;

}



h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    color: var(--color-heading);

}



.dic2-hero-banner__title,

.dic2-featured-card__title,

.dic2-news-card__title,

.dic2-cta-title,

.dic2-footer__heading,

.dic2-single-title,

.dic2-logo__text strong,

.dic2-section-label,

.dic2-btn-cta,

.dic2-btn-white,

.dic2-btn-outline {

    font-family: var(--font-heading);

}



a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



.dic2-container {

    width: 100%;

    max-width: 1340px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px;

    padding-right: 15px;

}



/* 2. HEADER */

.dic2-header {

    background-color: var(--surface);

    border-bottom: 1px solid var(--line);

    position: sticky;

    top: var(--adminbar-height, 0px);

    z-index: 100;

    transition: var(--transition);

}



.dic2-header__container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 68px;

}



.dic2-header__brand {

    display: flex;

    align-items: center;

}



.dic2-logo {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

}



.dic2-logo__img {

    height: 44px;

    width: 44px;

    object-fit: contain;

    display: block;

}



.dic2-header .dic2-logo__brand-name {

    font-family: var(--font-heading);

    font-size: 13.5px;

    font-weight: 800;

    letter-spacing: 0.22em;

    color: var(--navy);

    text-transform: uppercase;

    display: inline-block;

    line-height: 1;

}



.dic2-logo__img--footer {

    height: 38px;

    width: auto;

}



/* Nav Menu */

.dic2-header__nav {

    display: flex;

    align-items: center;

    height: 100%;

}



.dic2-nav__menu {

    display: flex;

    list-style: none;

    gap: 32px;

    align-items: center;

    height: 100%;

    margin: 0;

    padding: 0;

}



.dic2-nav__menu > li,

.dic2-nav__item {

    height: 100%;

    display: flex;

    align-items: center;

}



.dic2-nav__link,

.dic2-nav__menu > li > a {

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.6px;

    color: var(--charcoal);

    position: relative;

    padding: 8px 0;

    display: inline-flex;

    align-items: center;

    transition: color 0.25s ease;

    text-transform: uppercase;

}



.dic2-nav__link:hover,

.dic2-nav__menu > li > a:hover {

    color: var(--esg);

}



.dic2-nav__menu > li.current-menu-item > a,

.dic2-nav__menu > li.current_page_item > a,

.dic2-nav__menu > li.current-menu-ancestor > a,

.dic2-nav__item.current-menu-item .dic2-nav__link,

.dic2-nav__item.current_page_item .dic2-nav__link,

.dic2-nav__link.active {

    color: var(--esg);

}



.dic2-nav__link::after,

.dic2-nav__menu > li > a::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 50%;

    margin-left: -12px;

    width: 24px;

    height: 1.5px;

    background-color: var(--esg);

    border-radius: 1px;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.25s ease-out;

    pointer-events: none;

    will-change: transform;

}



.dic2-nav__link:hover::after,

.dic2-nav__menu > li > a:hover::after,

.dic2-nav__menu > li.current-menu-item > a::after,

.dic2-nav__menu > li.current_page_item > a::after,

.dic2-nav__menu > li.current-menu-ancestor > a::after,

.dic2-nav__item.current-menu-item .dic2-nav__link::after,

.dic2-nav__item.current_page_item .dic2-nav__link::after,

.dic2-nav__link.active::after {

    transform: scaleX(1);

}



/* Right Actions */

.dic2-header__actions {

    display: flex;

    align-items: center;

    gap: 24px;

}



.dic2-lang-switch {

    display: flex;

    align-items: center;

    gap: 4px;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.6px;

}



.dic2-lang-link {

    color: var(--muted-foreground);

    padding: 2px;

    transition: var(--transition);

}



.dic2-lang-link:hover,

.dic2-lang-link.dic2-lang-active {

    color: var(--navy);

    font-weight: 800;

}



.dic2-lang-sep {

    color: var(--line);

    font-weight: 400;

    margin: 0 4px;

}



.dic2-btn-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background-color: var(--navy);

    color: var(--navy-foreground);

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 10px 22px;

    border-radius: 2px;

    transition: var(--transition);

}



.dic2-btn-cta:hover {

    background-color: var(--charcoal);

    color: var(--navy-foreground);

}



.dic2-cta-arrow {

    font-size: 15px;

    line-height: 1;

    font-weight: 800;

    transition: transform 0.2s ease;

}



.dic2-btn-cta:hover .dic2-cta-arrow {

    transform: translate(2px, -2px);

}



/* Mobile Toggle */

.dic2-mobile-toggle {

    display: none;

    flex-direction: column;

    justify-content: space-between;

    width: 26px;

    height: 18px;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

}



.dic2-mobile-toggle span {

    display: block;

    height: 2px;

    width: 100%;

    background-color: var(--color-primary);

    border-radius: 2px;

    transition: var(--transition);

}



/* Mobile Drawer Overlay */

.dic2-mobile-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 24, 63, 0.45);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    z-index: 99998;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



.dic2-mobile-overlay.is-open {

    opacity: 1;

    visibility: visible;

}



/* Off-canvas Side Drawer (Slide from Left - 2/3 screen) */

.dic2-mobile-drawer {

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 0;

    left: 0;

    width: 75vw;

    max-width: 320px;

    height: 100vh;

    height: 100dvh;

    background: #ffffff;

    z-index: 99999;

    transform: translateX(-100%);

    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: none;

    padding: 0;

    border-top: none;

    overflow: hidden;

}



.dic2-mobile-drawer.is-open {

    transform: translateX(0);

    box-shadow: 12px 0 40px rgba(0, 24, 63, 0.2);

}



body.dic2-drawer-open {

    overflow: hidden;

}



/* Drawer Header */

.dic2-mobile-drawer__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 20px;

    border-bottom: 1px solid #edf2f7;

    background: #fafbfc;

}



.dic2-mobile-logo {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

}



.dic2-mobile-logo__img {

    height: 36px;

    width: 36px;

    object-fit: contain;

    display: block;

}



.dic2-mobile-drawer .dic2-logo__brand-name,

.home .dic2-mobile-drawer .dic2-logo__brand-name {

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.2em;

    color: var(--navy, #06152d) !important;

    text-transform: uppercase;

    line-height: 1;

}



.dic2-mobile-close {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: var(--navy);

    font-size: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

}



.dic2-mobile-close:hover {

    background: var(--navy);

    color: #ffffff;

    border-color: var(--navy);

}



/* Drawer Body & Menu */

.dic2-mobile-drawer__body {

    flex: 1;

    overflow-y: auto;

    padding: 20px 16px;

}



.dic2-mobile-menu {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.dic2-mobile-menu li,

.dic2-mobile-menu .dic2-mobile-item {

    position: relative;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    margin: 0;

}



.dic2-mobile-menu > li > a,

.dic2-mobile-menu > li > .dic2-mobile-link,

.home .dic2-mobile-menu > li > a,

.home .dic2-mobile-menu > li > .dic2-mobile-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.6px;

    color: #1e293b !important;

    padding: 12px 14px;

    border-radius: 6px;

    text-decoration: none;

    text-transform: uppercase;

    transition: all 0.2s ease;

}



.dic2-mobile-menu > li > a:hover,

.dic2-mobile-menu > li > .dic2-mobile-link:hover {

    background: #f1f5f9;

    color: var(--esg);

    padding-left: 18px;

}



.dic2-mobile-menu > li.current-menu-item > a,

.dic2-mobile-menu > li.current-page-item > a,

.dic2-mobile-menu > li.current-menu-ancestor > a,

.dic2-mobile-menu > li > a.active {

    background: transparent !important;

    color: #1e293b;

    font-weight: 700;

}



/* Accordion Toggle Button for items with sub-menus */

.dic2-mobile-menu li.menu-item-has-children {

    position: relative;

}



.dic2-mobile-menu li.menu-item-has-children > a,

.dic2-mobile-menu li.menu-item-has-children > .dic2-mobile-link {

    padding-right: 46px;

}



.dic2-mobile-sub-toggle {

    position: absolute;

    top: 5px;

    right: 5px;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    border-radius: 6px;

    color: #64748b;

    cursor: pointer;

    font-size: 13px;

    transition: all 0.25s ease;

    z-index: 2;

}



.dic2-mobile-sub-toggle:hover {

    background: #e2e8f0;

    color: var(--esg);

}



.dic2-mobile-menu li.menu-item-has-children.is-open > .dic2-mobile-sub-toggle {

    transform: rotate(180deg);

    color: var(--esg);

}



/* Sub-menu inside Mobile Drawer */

.dic2-mobile-menu .sub-menu,

.dic2-mobile-sub {

    list-style: none;

    margin: 4px 0 10px 14px;

    padding: 4px 0 4px 14px;

    border-left: 2px solid #e2e8f0;

    display: none;

    flex-direction: column;

    gap: 3px;

}



.dic2-mobile-menu li.menu-item-has-children.is-open > .sub-menu {

    display: flex;

}



.dic2-mobile-menu .sub-menu li,

.dic2-mobile-sub li {

    margin: 0;

    padding: 0;

    width: 100%;

}



.dic2-mobile-menu .sub-menu li a,

.dic2-mobile-sub a {

    font-family: var(--font-body);

    font-size: 13.5px;

    font-weight: 500;

    color: #475569;

    padding: 7px 10px;

    border-radius: 4px;

    text-decoration: none;

    display: block;

    text-transform: none;

    letter-spacing: normal;

    transition: all 0.2s ease;

}



.dic2-mobile-menu .sub-menu li a:hover,

.dic2-mobile-sub a:hover {

    color: var(--esg);

    background: #f8fafc;

    padding-left: 14px;

}



.dic2-mobile-menu .sub-menu li.current-menu-item a,

.dic2-mobile-menu .sub-menu li a.active {

    color: #475569;

    font-weight: 500;

    background: transparent !important;

}



/* Drawer Footer */

.dic2-mobile-drawer__footer {

    padding: 18px 20px 22px 20px;

    border-top: 1px solid #edf2f7;

    background: #fafbfc;

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.dic2-mobile-drawer__footer .dic2-lang-switch {

    justify-content: center;

}



.w-full {

    width: 100%;

}



/* 3. HERO BANNER (PAGE TITLE) */

.dic2-hero-banner {

    position: relative;

    padding: 105px 0 115px 0;

    color: var(--color-white);

    background-color: #041226;

    overflow: hidden;

}



.dic2-hero-banner__bg {

    position: absolute;

    top: -80px;

    left: 0;

    width: 100%;

    height: calc(100% + 160px);

    background-size: cover;

    background-position: center 30%;

    background-repeat: no-repeat;

    z-index: 1;

    will-change: transform;

    transform: translate3d(0, 0, 0);

}



.dic2-hero-banner__overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, rgba(0, 24, 63, 0.94) 0%, rgba(0, 24, 63, 0.88) 40%, rgba(0, 24, 63, 0.76) 70%, rgba(0, 24, 63, 0.52) 100%);

    z-index: 2;

}



.dic2-hero-banner__content {

    position: relative;

    z-index: 3;

    max-width: 820px;

}



.dic2-hero-banner__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 16px;

    text-transform: uppercase;

}



.dic2-hero-banner__title {

    font-family: var(--font-heading);

    font-size: 56px;

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -1.2px;

    margin-bottom: 22px;

    color: #ffffff;

}



.dic2-hero-banner__desc {

    font-size: 18px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.88);

    max-width: 620px;

    font-weight: 400;

}



/* 5. FEATURED POST SECTION ("TIN NỔI BẬT") - NỀN TRẮNG */

.dic2-featured-section {

    background-color: #ffffff;

    padding: 80px 0;

}



/* 6. NEWS ARCHIVE & GRID SECTION - NỀN XÁM SURFACE */

.dic2-news-archive-section {

    background-color: var(--surface);

    padding: 80px 0;

}



.dic2-section-label {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--muted-foreground);

    margin-bottom: 26px;

    text-transform: uppercase;

}



.dic2-featured-card {

    display: grid;

    grid-template-columns: 1fr 1.06fr;

    gap: 52px;

    align-items: center;

}



.dic2-featured-card__media {

    position: relative;

    border-radius: 0;

    overflow: hidden;

    background-color: var(--surface);

}



.dic2-featured-card__thumb-link {

    display: block;

    overflow: hidden;

}



.dic2-featured-card__img {

    width: 100%;

    aspect-ratio: 419 / 329;

    object-fit: cover;

    transition: transform 0.4s ease;

    display: block;

}



.dic2-featured-card:hover .dic2-featured-card__img {

    transform: scale(1.02);

}



.dic2-featured-card__content {

    display: flex;

    flex-direction: column;

}



.dic2-featured-card__meta {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

}



.dic2-featured-card__cat {

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1px;

    color: var(--esg);

    text-transform: uppercase;

    white-space: nowrap;

}



.dic2-featured-card__line {

    flex: 1;

    height: 0;

    border-top: 1px solid #dcdfe3;

    border-top-color: var(--line, #dcdfe3);

    display: block;

    min-width: 20px;

}



.dic2-featured-card__year {

    font-size: 11.5px;

    font-weight: 500;

    color: var(--muted-foreground);

    white-space: nowrap;

}



.dic2-featured-card__title {

    font-size: 50px;

    font-weight: 800;

    line-height: 1.15;

    color: var(--navy);

    margin-bottom: 22px;

    letter-spacing: -1px;

}



.dic2-featured-card__title a {

    color: inherit;

}



.dic2-featured-card__title a:hover {

    color: var(--navy);

    opacity: 0.85;

}



.dic2-featured-card__desc {

    font-size: 18px;

    line-height: 1.65;

    color: var(--muted-foreground);

    margin-bottom: 28px;

    max-width: 560px;

}



.dic2-featured-card__cta {

    display: flex;

    align-items: center;

}



.dic2-btn-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    color: var(--navy);

    font-size: 20px;

    line-height: 1;

    transition: var(--transition);

}



.dic2-btn-arrow:hover {

    color: var(--navy);

    transform: translateX(6px);

}



/* 6. CATEGORY FILTER TABS (NEWS ARCHIVE) */

.dic2-filter-section {

    margin-top: 0;

    margin-bottom: 42px;

    border-bottom: 1px solid #e2e8f0;

    padding-bottom: 16px;

}



.dic2-filter-bar {

    display: flex;

    align-items: center;

    gap: 36px;

    overflow-x: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;

}



.dic2-filter-bar::-webkit-scrollbar {

    display: none;

}



#category-filter-bar .dic2-filter-btn,

.dic2-filter-section .dic2-filter-btn {

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    cursor: pointer;

    padding: 6px 0 !important;

    font-family: var(--font-heading);

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 1.5px !important;

    color: #64748b !important;

    position: relative;

    white-space: nowrap;

    text-transform: uppercase !important;

    display: inline-flex;

    align-items: center;

    gap: 0;

    transition: color 0.2s ease;

    box-shadow: none !important;

}



#category-filter-bar .dic2-filter-btn:hover,

.dic2-filter-section .dic2-filter-btn:hover {

    color: #07152d !important;

    background: transparent !important;

}



#category-filter-bar .dic2-filter-btn.active,

.dic2-filter-section .dic2-filter-btn.active {

    color: #07152d !important;

    font-weight: 700 !important;

    background: transparent !important;

}



#category-filter-bar .dic2-filter-btn.active::after,

.dic2-filter-section .dic2-filter-btn.active::after {

    content: '' !important;

    display: inline-block;

    width: 5.5px;

    height: 5.5px;

    background-color: var(--esg) !important;

    border-radius: 50%;

    margin-left: 7px;

    vertical-align: middle;

}



/* 7. POSTS GRID (3 COLUMNS) */

.dic2-grid-section {

    position: relative;

    min-height: 200px;

}



.dic2-posts-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 32px;

    row-gap: 48px;

    transition: opacity 0.25s ease;

}



.dic2-posts-grid.is-loading {

    opacity: 0.35;

    pointer-events: none;

}



/* Card */

.dic2-news-card {

    display: flex;

    flex-direction: column;

}



.dic2-news-card__thumb-link {

    display: block;

    border-radius: 0;

    overflow: hidden;

    margin-bottom: 16px;

    background-color: var(--surface);

}



.dic2-news-card__thumb-wrap {

    width: 100%;

    aspect-ratio: 16 / 10.5;

    overflow: hidden;

    border-radius: 0;

}



.dic2-news-card__img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

    display: block;

}



.dic2-news-card:hover .dic2-news-card__img {

    transform: scale(1.05);

}



.dic2-news-card__body {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.dic2-news-card__meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.dic2-news-card__category {

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1px;

    color: var(--esg);

    text-transform: uppercase;

    white-space: nowrap;

}



.dic2-news-card__line {

    flex: 1;

    height: 0;

    border-top: 1px solid #dcdfe3;

    border-top-color: var(--line, #dcdfe3);

    display: block;

    min-width: 20px;

}



.dic2-news-card__year {

    font-size: 11.5px;

    font-weight: 500;

    color: var(--muted-foreground);

    white-space: nowrap;

}



.dic2-news-card__title {

    font-family: var(--font-heading);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.35;

    color: #06152d;

    margin-bottom: 10px;

    letter-spacing: -0.3px;

}



.dic2-news-card__title a {

    color: inherit;

    text-decoration: none;

    transition: color 0.2s ease;

}



.dic2-news-card__title a:hover {

    color: #008853;

}



.dic2-news-card__arrow {

    display: none !important;

}



.dic2-news-card__excerpt {

    font-size: 14.5px;

    color: #64748b;

    line-height: 1.6;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    margin-top: 2px;

}



/* Spinner Loader */

.dic2-grid-loader {

    position: absolute;

    top: 60px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

}



.dic2-spinner {

    width: 40px;

    height: 40px;

    border: 3px solid rgba(0, 24, 63, 0.15);

    border-radius: 50%;

    border-top-color: var(--color-primary);

    animation: dic2-spin 0.8s linear infinite;

}



@keyframes dic2-spin {

    to { transform: rotate(360deg); }

}



.dic2-no-posts {

    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 0;

    color: var(--color-text-muted);

    font-size: 16px;

}



/* Pagination */

.dic2-pagination {

    margin-top: 56px;

    display: flex;

    justify-content: center;

    gap: 8px;

}



.dic2-pagination .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 12px;

    border-radius: var(--radius-sm);

    font-size: 14px;

    font-weight: 600;

    color: var(--navy);

    background-color: #ffffff;

    border: 1px solid var(--line);

    transition: var(--transition);

}



.dic2-pagination .page-numbers {

    cursor: pointer;

}



.dic2-pagination .page-numbers.current {

    cursor: default;

    background-color: var(--navy);

    color: #ffffff;

    border-color: var(--navy);

}



.dic2-pagination .page-numbers:not(.current):not(.dots):hover {

    background-color: var(--navy);

    color: #ffffff;

    border-color: var(--navy);

}



.dic2-pagination .page-numbers.dots {

    cursor: default;

    background-color: transparent;

    border-color: transparent;

    color: var(--color-text-muted);

}



.dic2-pagination .page-numbers.dots:hover {

    background-color: transparent;

    color: var(--color-text-muted);

    border-color: transparent;

}



/* 8. CTA SECTION */

.dic2-cta-section {

    background-color: var(--navy);

    padding: 95px 0 100px 0;

    color: var(--color-white);

    border: none;

}



.dic2-cta-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 60px;

    align-items: center;

}



.dic2-cta-left {

    display: flex;

    flex-direction: column;

}



.dic2-cta-subtitle {

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: rgba(255, 255, 255, 0.6);

    text-transform: uppercase;

    margin-bottom: 16px;

}



.dic2-cta-title {

    font-family: var(--font-heading);

    font-size: 52px;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: -1px;

    color: #ffffff;

    text-transform: uppercase;

}



.dic2-cta-right {

    display: flex;

    flex-direction: column;

}



.dic2-cta-desc {

    font-size: 17px;

    line-height: 1.65;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 30px;

    max-width: 560px;

}



.dic2-cta-buttons {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

}



.dic2-btn-white {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background-color: #ffffff;

    color: var(--navy);

    font-family: var(--font-heading);

    font-size: 13.5px;

    font-weight: 600;

    letter-spacing: 1.2px;

    padding: 16px 36px;

    border-radius: 2px;

    text-transform: uppercase;

    min-height: 54px;

    box-sizing: border-box;

    transition: var(--transition);

}



.dic2-btn-white i {

    font-size: 14px;

    transition: transform 0.25s ease;

}



.dic2-btn-white:hover {

    background-color: #f1f5f9;

    color: var(--navy);

}



.dic2-btn-white:hover i {

    transform: translateX(5px);

}



.dic2-btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: transparent;

    border: 1px solid rgba(255, 255, 255, 0.35);

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 13.5px;

    font-weight: 600;

    letter-spacing: 1.2px;

    padding: 16px 36px;

    border-radius: 2px;

    text-transform: uppercase;

    min-height: 54px;

    box-sizing: border-box;

    transition: var(--transition);

}



.dic2-btn-outline:hover {

    background-color: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.7);

    color: #ffffff;

}



/* 9. MAIN FOOTER */

.dic2-footer {

    background-color: var(--navy);

    padding: 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 15px;

    border: none;

}



.dic2-footer__grid {

    display: grid;

    grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr;

    gap: 48px;

    padding-bottom: 45px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.dic2-logo--footer {

    margin-bottom: 22px;

}



.dic2-footer-brand-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}



.dic2-logo__img--footer {

    height: 38px;

    width: auto;

    object-fit: contain;

    display: block;

}



.dic2-logo__brand-name {

    font-family: var(--font-heading);

    font-size: 19px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #ffffff;

    text-transform: uppercase;

}



.dic2-footer__about {

    line-height: 1.65;

    font-size: 14px;

    color: rgba(255, 255, 255, 0.75);

    max-width: 430px;

}



.dic2-footer__desc-text {

    line-height: 1.65;

    font-size: 14px;

    color: rgba(255, 255, 255, 0.75);

    margin-bottom: 0;

}



.dic2-company-name {

    display: block;

    white-space: nowrap;

    margin-bottom: 3px;

}



.dic2-company-intro {

    display: block;

}



.dic2-footer__established {

    color: rgba(255, 255, 255, 0.45);

    font-size: 13px;

    line-height: 1.6;

    margin-top: 18px;

    margin-bottom: 0;

}



.dic2-footer__heading {

    font-family: var(--font-heading);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #8da2be;

    margin-bottom: 22px;

    text-transform: uppercase;

}



.dic2-footer__links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.dic2-footer__links a {

    color: rgba(255, 255, 255, 0.85);

    font-size: 15px;

    transition: var(--transition);

}



.dic2-footer__links a:hover {

    color: #ffffff;

    transform: translateX(3px);

}



.dic2-footer__contact {

    line-height: 1.65;

    font-size: 15px;

    color: rgba(255, 255, 255, 0.75);

}



.dic2-contact-address {

    margin-bottom: 16px;

    color: rgba(255, 255, 255, 0.75);

    line-height: 1.65;

    font-size: 15px;

}



.dic2-contact-item {

    margin-bottom: 6px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.75);

    font-size: 15px;

}



.dic2-contact-item span {

    color: rgba(255, 255, 255, 0.5);

}



.dic2-contact-item a {

    color: rgba(255, 255, 255, 0.85);

    font-size: 15px;

    transition: var(--transition);

}



.dic2-contact-item a:hover {

    color: #ffffff;

}



/* Footer Bottom */

.dic2-footer__bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 26px 0;

    font-size: 12px;

    color: rgba(255, 255, 255, 0.45);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.dic2-copyright {

    letter-spacing: 0.5px;

    text-transform: uppercase;

    font-size: 11.5px;

    margin: 0;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.45);

    text-align: center;

}



/* 10. SINGLE POST STYLES - MODERN CORPORATE UI/UX */

.dic2-breadcrumb-bar {

    background-color: #f8fafc;

    border-bottom: 1px solid #e9edf2;

    padding: 16px 0;

}



.dic2-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    font-size: 13px;

    color: #64748b;

}



.dic2-breadcrumb a {

    color: #64748b;

    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.dic2-breadcrumb a:hover {

    color: #000000;

}



.dic2-breadcrumb__home i {

    font-size: 12px;

}



.dic2-breadcrumb__sep {

    color: #cbd5e1;

    font-size: 10px;

    display: inline-flex;

    align-items: center;

}



.dic2-breadcrumb__current {

    color: var(--navy);

    font-weight: 600;

    max-width: 480px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.dic2-single-main-section {

    padding: 56px 0 90px 0;

    background-color: #ffffff;

}



.dic2-single-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 370px;

    gap: 60px;

    align-items: start;

}



.dic2-single-content-col {

    min-width: 0;

}



/* Post Header Meta & Title */

.dic2-single-entry-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 18px;

}



.dic2-single-cat {

    display: inline-flex;

    align-items: center;

    padding: 5px 14px;

    background: rgba(0, 136, 83, 0.08);

    color: var(--esg);

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    border-radius: 4px;

    text-decoration: none;

    transition: all 0.2s ease;

}



.dic2-single-cat:hover {

    background: var(--esg);

    color: #ffffff;

}



.dic2-single-meta__dot {

    color: #cbd5e1;

    font-size: 12px;

}



.dic2-single-date-wrap {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    color: #64748b;

    font-weight: 500;

}



.dic2-single-date-wrap i {

    font-size: 13px;

    color: #94a3b8;

}



.dic2-single-date {

    font-size: 13px;

    color: #64748b;

    font-weight: 500;

}



.dic2-single-entry-title {

    font-family: var(--font-heading);

    font-size: 32px;

    font-weight: 800;

    line-height: 1.32;

    color: var(--navy);

    letter-spacing: -0.02em;

    margin: 0 0 32px 0;

}



/* Featured Image */

.dic2-single-featured-image {

    margin-bottom: 38px;

    border-radius: 8px;

    overflow: hidden;

    background: #f1f5f9;

    box-shadow: 0 10px 30px -10px rgba(0, 24, 63, 0.08);

}



.dic2-single-thumb-img {

    width: 100%;

    height: auto;

    max-height: 520px;

    object-fit: cover;

    display: block;

}



/* Content Body */

.dic2-single-entry-content {

    font-size: 16.5px;

    line-height: 1.85;

    color: #334155;

    font-family: var(--font-sans);

}



.dic2-single-entry-content h2 {

    font-family: var(--font-heading);

    font-size: 24px;

    font-weight: 700;

    color: var(--navy);

    margin: 40px 0 18px 0;

    line-height: 1.35;

}



.dic2-single-entry-content h3 {

    font-family: var(--font-heading);

    font-size: 20px;

    font-weight: 700;

    color: var(--navy);

    margin: 32px 0 16px 0;

    line-height: 1.4;

}



.dic2-single-entry-content h4 {

    font-family: var(--font-heading);

    font-size: 17px;

    font-weight: 600;

    color: var(--navy);

    margin: 24px 0 12px 0;

}



.dic2-single-entry-content ul,

.dic2-single-entry-content ol {

    margin: 0 0 24px 24px;

    padding: 0;

}



.dic2-single-entry-content li {

    margin-bottom: 8px;

}



.dic2-single-entry-content blockquote {

    margin: 32px 0;

    padding: 22px 28px;

    border-left: 4px solid var(--esg);

    background: #f8fafc;

    border-radius: 0 8px 8px 0;

    font-style: italic;

    color: var(--navy);

    font-size: 17px;

    line-height: 1.7;

}



.dic2-single-entry-content img {

    max-width: 100% !important;

    height: auto !important;

    border-radius: 6px;

    margin: 28px 0;

    box-shadow: 0 6px 20px rgba(0, 24, 63, 0.06);

    display: block;

}



.dic2-single-entry-content a {

    color: var(--esg);

    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 3px;

    transition: color 0.2s;

}



.dic2-single-entry-content a:hover {

    color: var(--navy);

}



/* Tags */

.dic2-single-tags {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top: 40px;

    padding-top: 24px;

    border-top: 1px solid #edf2f7;

}



.dic2-single-tags__label {

    font-size: 13px;

    font-weight: 700;

    color: var(--navy);

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-right: 4px;

}



.dic2-tag-item {

    font-size: 12.5px;

    font-weight: 500;

    color: #475569;

    background: #f8fafc;

    padding: 5px 14px;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    text-decoration: none;

    transition: all 0.2s ease;

}



.dic2-tag-item:hover {

    background: var(--navy);

    color: #ffffff;

    border-color: var(--navy);

    transform: translateY(-1px);

}



/* Post Footer Bar (Back & Share) */

.dic2-single-footer-bar {

    margin-top: 36px;

    padding: 24px 0;

    border-top: 1px solid #edf2f7;

    border-bottom: 1px solid #edf2f7;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

}



.dic2-btn-back {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 18px;

    background: rgba(0, 136, 83, 0.08);

    color: #008853;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    border-radius: 6px;

    border: 1px solid rgba(0, 136, 83, 0.22);

    text-decoration: none;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.dic2-btn-back::before {

    content: '';

    display: inline-block;

    width: 6px;

    height: 6px;

    background-color: #008853;

    border-radius: 50%;

    margin-right: 8px;

    transition: background-color 0.25s ease;

}



.dic2-btn-back:hover {

    background-color: #008853;

    color: #ffffff;

    border-color: #008853;

    transform: translateY(-2px);

    box-shadow: 0 4px 14px rgba(0, 136, 83, 0.25);

}



.dic2-btn-back:hover::before {

    background-color: #ffffff;

}



.dic2-single-share {

    display: flex;

    align-items: center;

    gap: 14px;

}



.dic2-single-share__label {

    font-size: 13.5px;

    font-weight: 700;

    color: var(--navy);

}



.dic2-single-share__links {

    display: flex;

    align-items: center;

    gap: 8px;

}



.dic2-share-btn {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #475569;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.2s ease;

    text-decoration: none;

}



.dic2-share-btn.dic2-share--fb:hover {

    background: #1877f2;

    color: #ffffff;

    border-color: #1877f2;

    transform: translateY(-2px);

}



.dic2-share-btn.dic2-share--x:hover {

    background: #000000;

    color: #ffffff;

    border-color: #000000;

    transform: translateY(-2px);

}



.dic2-share-btn.dic2-share--li:hover {

    background: #0a66c2;

    color: #ffffff;

    border-color: #0a66c2;

    transform: translateY(-2px);

}



.dic2-share-btn.dic2-share--copy:hover {

    background: var(--esg);

    color: #ffffff;

    border-color: var(--esg);

    transform: translateY(-2px);

}



/* Post Navigation (Prev / Next) */

.dic2-single-post-nav {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 40px;

}



.dic2-post-nav-card {

    padding: 22px 26px;

    background: #f8fafc;

    border: 1px solid #e9edf2;

    border-radius: 10px;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.dic2-post-nav-card:hover {

    border-color: var(--navy);

    background: #ffffff;

    box-shadow: 0 10px 28px -6px rgba(0, 24, 63, 0.08);

    transform: translateY(-2px);

}



.dic2-post-nav--prev {

    text-align: left;

}



.dic2-post-nav--next {

    text-align: right;

}



.dic2-post-nav__label {

    font-size: 11.5px;

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 0.8px;

    color: var(--esg);

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}



.dic2-post-nav--next .dic2-post-nav__label {

    justify-content: flex-end;

}



.dic2-post-nav__title {

    font-size: 15px;

    font-weight: 700;

    color: var(--navy);

    line-height: 1.45;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.dic2-post-nav--empty {

    background: transparent;

    border: none;

    pointer-events: none;

}



/* Related Posts Section (Cùng danh mục) */

.dic2-related-section {

    margin-top: 48px;

    padding-top: 36px;

    border-top: 1px solid #edf2f7;

}



.dic2-related-title {

    font-family: var(--font-heading);

    font-size: 16px;

    font-weight: 800;

    color: var(--navy);

    letter-spacing: 0.8px;

    text-transform: uppercase;

    margin: 0 0 26px 0;

    padding-bottom: 12px;

    border-bottom: 1px solid #edf2f7;

    position: relative;

    display: flex;

    align-items: center;

}



.dic2-related-title::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 38px;

    height: 2.5px;

    background: var(--esg);

    border-radius: 2px;

}



.dic2-related-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 28px;

}



.dic2-news-card__placeholder {

    width: 100%;

    height: 100%;

    min-height: 180px;

    background: #f1f5f9;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #94a3b8;

    font-size: 24px;

}



/* ========================================================

   RIGHT SIDEBAR - MODERN CORPORATE STYLING

   ======================================================== */

.dic2-single-sidebar-col {

    position: sticky;

    top: 100px;

}



.dic2-sidebar-inner {

    display: flex;

    flex-direction: column;

    gap: 28px;

}



.dic2-widget {

    background: #ffffff;

    padding: 26px;

    border-radius: 10px;

    border: 1px solid #edf2f7;

    box-shadow: 0 4px 18px rgba(0, 24, 63, 0.04);

    transition: box-shadow 0.3s ease;

}



.dic2-widget:hover {

    box-shadow: 0 8px 24px rgba(0, 24, 63, 0.07);

}



.dic2-widget-title {

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 800;

    color: var(--navy);

    letter-spacing: 0.8px;

    text-transform: uppercase;

    margin: 0 0 20px 0;

    padding-bottom: 14px;

    border-bottom: 1px solid #edf2f7;

    position: relative;

    display: flex;

    align-items: center;

}



.dic2-widget-title::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 36px;

    height: 2px;

    background: var(--esg);

    border-radius: 2px;

}



/* Widget Search */

.dic2-search-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

}



.dic2-search-input {

    width: 100%;

    height: 46px;

    padding: 0 48px 0 18px;

    border: 1.5px solid #e2e8f0;

    border-radius: 30px;

    font-size: 13.5px;

    background: #f8fafc;

    color: var(--navy);

    outline: none;

    transition: all 0.25s ease;

}



.dic2-search-input:focus {

    background: #ffffff;

    border-color: var(--esg);

    box-shadow: 0 0 0 3px rgba(0, 136, 83, 0.1);

}



.dic2-search-btn {

    position: absolute;

    right: 5px;

    top: 5px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    border: none;

    background: var(--navy);

    color: #ffffff;

    font-size: 13px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.25s ease;

}



.dic2-search-btn:hover {

    background: var(--esg);

    transform: scale(1.05);

}



/* Widget Categories */

.dic2-category-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.dic2-category-item {

    border-bottom: none;

}



.dic2-category-link {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 14px;

    border-radius: 6px;

    font-size: 13.5px;

    font-weight: 600;

    color: #475569;

    text-decoration: none;

    transition: all 0.2s ease;

}



.dic2-category-link:hover {

    background: #f1f5f9;

    color: var(--navy);

    padding-left: 18px;

}



.dic2-category-item.is-active .dic2-category-link,

.dic2-category-link.active {

    background: rgba(0, 136, 83, 0.08);

    color: var(--navy);

    font-weight: 700;

}



.dic2-active-dot {

    color: var(--esg);

    margin-left: 6px;

    font-size: 14px;

}



.dic2-category-link__count {

    font-size: 11.5px;

    font-weight: 700;

    color: var(--esg);

    background: rgba(0, 136, 83, 0.1);

    padding: 3px 9px;

    border-radius: 20px;

    border: none;

    transition: all 0.2s ease;

}



.dic2-category-item.is-active .dic2-category-link__count {

    background: var(--esg);

    color: #ffffff;

}



.dic2-category-link:hover .dic2-category-link__count {

    background: var(--esg);

    color: #ffffff;

}



/* Widget Latest Posts (5 bài) */

.dic2-sidebar-posts {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.dic2-sidebar-post-item {

    display: flex;

    gap: 14px;

    align-items: center;

    padding-bottom: 16px;

    border-bottom: 1px solid #f1f5f9;

}



.dic2-sidebar-post-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.dic2-sidebar-post-thumb {

    flex-shrink: 0;

    width: 84px;

    height: 64px;

    border-radius: 6px;

    overflow: hidden;

    background: #f1f5f9;

    display: block;

    position: relative;

}



.dic2-sidebar-post-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 6px;

    transition: transform 0.35s ease;

}



.dic2-sidebar-post-item:hover .dic2-sidebar-post-img {

    transform: scale(1.08);

}



.dic2-sidebar-post-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #94a3b8;

    background: #f1f5f9;

    font-size: 16px;

}



.dic2-sidebar-post-info {

    flex: 1;

    min-width: 0;

}



.dic2-sidebar-post-meta {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--esg);

    margin-bottom: 4px;

}



.dic2-sidebar-post-sep {

    color: #cbd5e1;

    font-size: 8px;

}



.dic2-sidebar-post-date {

    color: #64748b;

    font-weight: 500;

    font-size: 11px;

}



.dic2-sidebar-post-title {

    margin: 0;

    font-size: 13.5px;

    font-weight: 700;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.dic2-sidebar-post-title a {

    color: var(--navy);

    text-decoration: none;

    transition: color 0.2s ease;

}



.dic2-sidebar-post-item:hover .dic2-sidebar-post-title a,

.dic2-sidebar-post-title a:hover {

    color: var(--esg);

}



.dic2-sidebar-empty {

    font-size: 13px;

    color: var(--muted-foreground);

    margin: 0;

}



/* 11. RESPONSIVE MEDIA QUERIES */

@media (max-width: 1024px) {

    .dic2-home-projects-section .dic2-home-section-header__right {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        padding-bottom: 0;

    }

    .dic2-posts-grid {

        grid-template-columns: repeat(2, 1fr);

        column-gap: 24px;

        row-gap: 40px;

    }



    .dic2-featured-card {

        gap: 32px;

    }



    .dic2-featured-card__title {

        font-size: 34px;

    }



    .dic2-featured-card__desc {

        font-size: 16px;

    }



    .dic2-footer__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 36px;

    }



    .dic2-cta-title {

        font-size: 42px;

    }



    .dic2-single-layout {

        grid-template-columns: 1fr;

        gap: 48px;

    }



    .dic2-single-sidebar-col {

        position: static;

    }

}



@media (max-width: 868px) {

    .dic2-header__nav {

        display: none;

    }



    .dic2-header__cta-btn,

    .dic2-header__actions > .dic2-btn-cta {

        display: none !important;

    }



    .dic2-mobile-toggle {

        display: flex;

    }



    .dic2-featured-card {

        grid-template-columns: 1fr;

    }



    .dic2-hero-banner {

        padding: 75px 0 85px 0;

    }



    .dic2-hero-banner__title {

        font-size: 40px;

        letter-spacing: -0.5px;

    }



    .dic2-hero-banner__desc {

        font-size: 16px;

    }



    .dic2-cta-wrapper {

        grid-template-columns: 1fr;

        gap: 32px;

    }



    .dic2-cta-title {

        font-size: 34px;

    }



    .dic2-featured-section,

    .dic2-news-archive-section {

        padding: 55px 0;

    }



    .dic2-cta-section {

        padding: 60px 0 45px 0;

    }



    /* Category Filter Bar Horizontal Scrollbar on Mobile */

    .dic2-filter-section {

        margin-bottom: 32px;

        padding-bottom: 6px;

    }



    .dic2-filter-bar {

        gap: 22px;

        padding-bottom: 8px;

        scrollbar-width: thin;

        scrollbar-color: var(--esg) #edf2f7;

        -webkit-overflow-scrolling: touch;

    }



    .dic2-filter-bar::-webkit-scrollbar {

        display: block;

        height: 3px;

    }



    .dic2-filter-bar::-webkit-scrollbar-track {

        background: #edf2f7;

        border-radius: 4px;

    }



    .dic2-filter-bar::-webkit-scrollbar-thumb {

        background: var(--esg);

        border-radius: 4px;

    }



    .dic2-filter-bar::-webkit-scrollbar-thumb:hover {

        background: var(--navy);

    }



    /* Footer Mobile Grid (Company & Services side by side) */

    .dic2-footer__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 36px 24px;

    }



    .dic2-footer__brand,

    .dic2-footer__col:nth-child(1),

    .dic2-footer__col--contact,

    .dic2-footer__col:nth-child(4) {

        grid-column: 1 / -1;

        width: 100%;

    }



    .dic2-footer__col--company,

    .dic2-footer__col:nth-child(2) {

        grid-column: 1;

    }



    .dic2-footer__col--services,

    .dic2-footer__col:nth-child(3) {

        grid-column: 2;

    }



    .dic2-single-back {

        display: none !important;

    }

}



@media (max-width: 640px) {

    .dic2-posts-grid {

        grid-template-columns: 1fr;

    }



    .dic2-hero-banner {

        padding: 55px 0 65px 0;

    }



    .dic2-hero-banner__title {

        font-size: 32px;

        letter-spacing: -0.5px;

    }



    .dic2-hero-banner__desc {

        font-size: 14px;

    }



    .dic2-featured-card__title {

        font-size: 26px;

    }



    .dic2-featured-card__desc {

        font-size: 15px;

    }



    .dic2-featured-section,

    .dic2-news-archive-section {

        padding: 45px 0;

    }



    .dic2-cta-section {

        padding: 50px 0 35px 0;

    }



    .dic2-cta-title {

        font-size: 28px;

    }



    .dic2-btn-white,

    .dic2-btn-outline {

        padding: 14px 28px;

        min-height: 48px;

        font-size: 12.5px;

    }



    .dic2-footer__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 28px 18px;

    }



    .dic2-footer__brand,

    .dic2-footer__col:nth-child(1),

    .dic2-footer__col--contact,

    .dic2-footer__col:nth-child(4) {

        grid-column: 1 / -1;

    }



    .dic2-footer__col--company,

    .dic2-footer__col:nth-child(2) {

        grid-column: 1;

    }



    .dic2-footer__col--services,

    .dic2-footer__col:nth-child(3) {

        grid-column: 2;

    }



    .dic2-footer__heading {

        margin-bottom: 14px;

    }



    .dic2-footer__links a {

        font-size: 13.5px;

        line-height: 1.45;

    }



    .dic2-footer__col--contact {

        grid-column: 1 / -1;

        width: 100%;

    }



    .dic2-footer__contact {

        width: 100%;

        max-width: 100%;

    }



    .dic2-contact-address {

        width: 100%;

        max-width: 100%;

        margin-bottom: 12px;

        line-height: 1.6;

        font-size: 14.5px;

    }



    .dic2-footer__bottom {

        flex-direction: column;

        gap: 14px;

        text-align: center;

        padding: 24px 0;

    }



    .dic2-single-main-section {

        padding: 35px 0 60px 0;

    }



    .dic2-single-entry-title {

        font-size: 26px;

        margin-bottom: 20px;

    }



    .dic2-single-post-nav {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

        margin-top: 30px;

    }



    .dic2-post-nav-card {

        padding: 14px 12px;

        border-radius: 8px;

    }



    .dic2-post-nav__label {

        font-size: 10.5px;

        letter-spacing: 0.5px;

        margin-bottom: 5px;

        gap: 5px;

    }



    .dic2-post-nav__title {

        font-size: 12.5px;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    .dic2-post-nav--next {

        text-align: right;

    }



    .dic2-post-nav--next .dic2-post-nav__label {

        justify-content: flex-end;

    }



    .dic2-single-back {

        display: none !important;

    }



    .dic2-single-footer-bar {

        padding: 20px 0;

        gap: 0;

    }



    .dic2-breadcrumb__current {

        max-width: 220px;

    }



    .dic2-related-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }

}



/* ==========================================================================

   CONTACT PAGE (LIÊN HỆ HỢP TÁC)

   ========================================================================== */

.dic2-contact-page {

    background-color: #ffffff;

    color: var(--text-dark, #1e293b);

}



/* 1. Hero Banner */

.dic2-contact-hero {

    position: relative;

    background-color: #06152d;

    padding: 130px 0 135px;

    overflow: hidden;

    color: #ffffff;

}



.dic2-contact-hero__bg {

    position: absolute;

    inset: 0;

    background-position: center 30%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0.38;

    filter: saturate(0.9) brightness(0.95);

    pointer-events: none;

}



.dic2-contact-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(8, 23, 50, 0.72) 0%, rgba(6, 17, 38, 0.9) 100%),

                linear-gradient(90deg, rgba(6, 17, 38, 0.6) 0%, rgba(6, 17, 38, 0.1) 60%, rgba(6, 17, 38, 0.4) 100%);

    pointer-events: none;

}



.dic2-contact-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-contact-hero__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2.2px;

    color: #8da2be;

    margin-bottom: 20px;

}



.dic2-contact-hero__title {

    font-family: var(--font-heading);

    font-size: 64px;

    font-weight: 800;

    line-height: 1.12;

    color: #ffffff;

    margin: 0 0 34px 0;

    letter-spacing: -1.2px;

}



.dic2-contact-hero__grid {

    display: grid;

    grid-template-columns: 1.25fr 0.85fr;

    gap: 60px;

    align-items: flex-start;

}



.dic2-contact-hero__desc {

    font-size: 18px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 560px;

}



.dic2-contact-hero__note {

    font-size: 16px;

    line-height: 1.65;

    color: #8da2be;

    margin: 0;

    text-align: left;

}



/* Common Contact Tags & Headings */

.dic2-contact-tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: #64748b;

    margin-bottom: 12px;

}



.dic2-contact-heading {

    font-family: var(--font-heading);

    font-size: 34px;

    font-weight: 800;

    line-height: 1.2;

    color: #0b1b3d;

    margin: 0;

    letter-spacing: -0.3px;

}



/* 2. Process Section ("Cách chúng tôi làm việc.") */

.dic2-contact-process {

    padding: 100px 0 115px;

    background-color: #ffffff;

}



.dic2-contact-process__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 70px;

    gap: 40px;

}



.dic2-contact-process__header-left {

    max-width: 440px;

}



.dic2-contact-process__header-left .dic2-contact-tag {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #64748b;

    margin-bottom: 16px;

    display: inline-block;

}



.dic2-contact-process__header-left .dic2-contact-heading {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    line-height: 1.15;

    color: #07152d;

    margin: 0;

    max-width: 380px;

    letter-spacing: -0.5px;

}



.dic2-contact-process__header-right {

    max-width: 420px;

    padding-bottom: 8px;

}



.dic2-contact-subtext {

    font-size: 16px;

    line-height: 1.6;

    color: #64748b;

    margin: 0;

}



.dic2-contact-process__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    align-items: stretch;

}



.dic2-process-card {

    display: flex;

    flex-direction: column;

    padding: 0 34px;

    border-left: 1px solid #e2e8f0;

}



.dic2-process-card:first-child {

    padding-left: 0;

    border-left: none;

}



.dic2-process-card:last-child {

    padding-right: 0;

}



.dic2-process-card__num {

    font-size: 12.5px;

    font-weight: 600;

    color: #94a3b8;

    letter-spacing: 0.5px;

    margin-bottom: 22px;

    display: block;

}



.dic2-process-card__icon {

    display: inline-flex;

    align-items: center;

    color: #008853;

    margin-bottom: 22px;

}



.dic2-process-card__icon svg {

    display: block;

    width: 22px;

    height: 22px;

}



.dic2-process-card__title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    color: #07152d;

    margin: 0 0 14px 0;

    line-height: 1.3;

    letter-spacing: -0.2px;

}



.dic2-process-card__desc {

    font-size: 15px;

    line-height: 1.6;

    color: #64748b;

    margin: 0;

}



/* 3. Core Capabilities Section ("Bốn năng lực cốt lõi.") */

.dic2-contact-core {

    background-color: #06152d;

    padding: 105px 0 115px;

    color: #ffffff;

}



.dic2-contact-core__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2.2px;

    color: #8da2be;

    margin-bottom: 16px;

}



.dic2-contact-core__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #ffffff;

    margin: 0 0 52px 0;

    letter-spacing: -0.6px;

    line-height: 1.15;

}



.dic2-contact-core__list {

    border-top: 1px solid rgba(255, 255, 255, 0.12);

}



.dic2-core-item {

    display: flex;

    align-items: center;

    padding: 28px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}



.dic2-core-item__num {

    font-size: 13.5px;

    font-weight: 600;

    color: #8da2be;

    width: 76px;

    flex-shrink: 0;

    letter-spacing: 0.5px;

}



.dic2-core-item__text {

    font-family: var(--font-heading);

    font-size: 26px;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: -0.3px;

    line-height: 1.25;

}



/* 4. Form & Info Section ("Trao đổi về dự án của bạn.") */

.dic2-contact-form-section {

    padding: 95px 0 115px;

    background-color: #ffffff;

}



.dic2-contact-form-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.95fr;

    gap: 85px;

    align-items: flex-start;

}



.dic2-contact-form-col .dic2-contact-tag {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #64748b;

    margin-bottom: 14px;

    display: inline-block;

}



.dic2-contact-form-col .dic2-contact-heading {

    font-family: var(--font-heading);

    font-size: 38px;

    font-weight: 800;

    line-height: 1.15;

    color: #07152d;

    letter-spacing: -0.5px;

    margin: 0 0 38px 0;

}



.dic2-contact-form {

    display: flex;

    flex-direction: column;

}



.dic2-form-group {

    margin-bottom: 24px;

}



.dic2-form-label {

    display: block;

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #64748b;

    margin-bottom: 8px;

}



.dic2-form-input,

.dic2-form-textarea {

    width: 100%;

    box-sizing: border-box;

    font-family: inherit;

    font-size: 14.5px;

    color: #07152d;

    background: transparent;

    border: none;

    border-bottom: 1px solid #e2e8f0;

    border-radius: 0;

    padding: 8px 0 12px 0;

    transition: border-bottom-color 0.2s ease;

}



.dic2-form-input:focus,

.dic2-form-textarea:focus {

    border-bottom: 1.5px solid #07152d;

    outline: none;

    box-shadow: none;

    background: transparent;

}



.dic2-form-textarea {

    resize: vertical;

    min-height: 75px;

}



.dic2-form-action {

    margin-top: 12px;

    margin-bottom: 8px;

}



.dic2-btn-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: #07152d;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    padding: 14px 34px;

    border: none;

    border-radius: 2px;

    cursor: pointer;

    transition: background-color 0.2s ease;

}



.dic2-btn-submit:hover {

    background-color: #030b18;

}



.dic2-btn-submit:disabled {

    opacity: 0.65;

    cursor: not-allowed;

}



.dic2-form-note {

    font-size: 12px;

    color: #94a3b8;

    margin: 0;

    line-height: 1.5;

}



.dic2-form-response {

    margin-top: 18px;

    padding: 14px 18px;

    border-radius: 6px;

    font-size: 14px;

    line-height: 1.5;

}



.dic2-form-response--success {

    background-color: #ecfdf5;

    color: #065f46;

    border: 1px solid #a7f3d0;

}



.dic2-form-response--error {

    background-color: #fef2f2;

    color: #991b1b;

    border: 1px solid #fecaca;

}



/* Contact Form 7 Integration & Harmonization */

.dic2-cf7-holder .wpcf7-form-control-wrap {

    display: block;

    width: 100%;

}



.dic2-cf7-holder .wpcf7-form p {

    margin: 0;

}



.dic2-cf7-holder .wpcf7-not-valid-tip {

    color: #ef4444;

    font-size: 12px;

    margin-top: 5px;

    display: block;

}



.dic2-cf7-holder .wpcf7-response-output {

    margin: 16px 0 0 0 !important;

    padding: 14px 18px !important;

    border-radius: 4px !important;

    font-size: 13.5px !important;

    line-height: 1.5 !important;

    border: 1px solid transparent !important;

}



.dic2-cf7-holder .wpcf7-response-output:empty,

.dic2-cf7-holder .wpcf7-form.init .wpcf7-response-output,

.dic2-cf7-holder .wpcf7-form:not(.sent):not(.invalid):not(.unaccepted):not(.failed) .wpcf7-response-output {

    display: none !important;

    margin: 0 !important;

    padding: 0 !important;

}



.dic2-cf7-holder .wpcf7-form.sent .wpcf7-response-output {

    background-color: #ecfdf5 !important;

    border-color: #a7f3d0 !important;

    color: #065f46 !important;

}



.dic2-cf7-holder .wpcf7-form.invalid .wpcf7-response-output,

.dic2-cf7-holder .wpcf7-form.unaccepted .wpcf7-response-output,

.dic2-cf7-holder .wpcf7-form.failed .wpcf7-response-output {

    background-color: #fef2f2 !important;

    border-color: #fecaca !important;

    color: #991b1b !important;

}



.dic2-cf7-holder .wpcf7-spinner {

    margin-left: 10px;

    vertical-align: middle;

}



/* Right Column (Company Info & Map) */

.dic2-contact-info-col {

    padding-top: 4px;

}



.dic2-info-block {

    margin-bottom: 34px;

}



.dic2-info-heading {

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #64748b;

    margin: 0 0 16px 0;

}



.dic2-info-company {

    font-family: var(--font-heading);

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    line-height: 1.45;

    margin: 0 0 6px 0;

}



.dic2-info-address {

    font-size: 15px;

    line-height: 1.6;

    color: #334155;

    margin: 0;

}



.dic2-info-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.dic2-info-list li {

    font-size: 15px;

    line-height: 1.6;

    color: #1e293b;

    display: flex;

    align-items: baseline;

    gap: 6px;

}



.dic2-info-label {

    font-weight: 400;

    color: #1e293b;

    min-width: auto;

    display: inline;

}



.dic2-info-val {

    color: #1e293b;

}



.dic2-info-list a {

    color: #1e293b;

    text-decoration: none;

    transition: color 0.2s ease;

}



.dic2-info-list a.dic2-link-underline {

    text-decoration: underline;

    text-underline-offset: 3px;

    text-decoration-thickness: 1px;

}



.dic2-info-list a:hover {

    color: #00df82;

}



.dic2-contact-map-wrapper {

    margin-top: 30px;

    border-radius: 6px;

    overflow: hidden;

    border: 1px solid #e2e8f0;

}



.dic2-contact-map-wrapper iframe {

    display: block;

    width: 100%;

    height: 285px;

    border: none;

}



/* ==========================================================================

   RESPONSIVE (CONTACT PAGE)

   ========================================================================== */

@media (max-width: 1024px) {

    .dic2-contact-hero__title {

        font-size: 46px;

    }



    .dic2-contact-form-grid {

        gap: 40px;

    }

    

    .dic2-contact-process__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 36px 0;

    }

    

    .dic2-process-card {

        padding: 0 24px;

    }

    

    .dic2-process-card:first-child {

        padding-left: 0;

    }

    

    .dic2-process-card:nth-child(2) {

        border-left: 1px solid #e2e8f0;

    }

    

    .dic2-process-card:nth-child(3) {

        border-left: none;

        padding-left: 0;

        border-top: 1px solid #e2e8f0;

        padding-top: 28px;

    }

    

    .dic2-process-card:nth-child(4) {

        border-left: 1px solid #e2e8f0;

        border-top: 1px solid #e2e8f0;

        padding-top: 28px;

    }

}



@media (max-width: 768px) {

    .dic2-contact-hero {

        padding: 70px 0 60px;

    }

    

    .dic2-contact-hero__title {

        font-size: 34px;

    }



    .dic2-contact-hero__grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    .dic2-contact-hero__desc {

        font-size: 16px;

    }

    

    .dic2-contact-hero__note {

        font-size: 15px;

        text-align: left;

    }

    

    .dic2-contact-process {

        padding: 60px 0 70px;

    }

    

    .dic2-contact-process__header {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        margin-bottom: 36px;

    }

    

    .dic2-contact-heading,

    .dic2-contact-process__header-left .dic2-contact-heading {

        font-size: 32px;

    }

    

    .dic2-contact-process__grid {

        grid-template-columns: 1fr;

        gap: 24px 0;

    }

    

    .dic2-process-card {

        padding: 0 !important;

        border: none !important;

        padding-bottom: 20px !important;

        border-bottom: 1px solid #e2e8f0 !important;

    }

    

    .dic2-process-card:last-child {

        border-bottom: none !important;

        padding-bottom: 0 !important;

    }

    

    .dic2-contact-core {

        padding: 60px 0 70px;

    }

    

    .dic2-contact-core__title {

        font-size: 30px;

        margin-bottom: 34px;

    }

    

    .dic2-core-item {

        padding: 20px 0;

    }

    

    .dic2-core-item__text {

        font-size: 17.5px;

    }

    

    .dic2-contact-form-section {

        padding: 60px 0 80px;

    }

    

    .dic2-contact-form-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }



    .dic2-form-action {

        margin-top: 10px;

        margin-bottom: 8px;

    }



    .dic2-form-note {

        margin-top: 4px;

        margin-bottom: 0;

    }

    

    .dic2-btn-submit {

        width: 100%;

    }

}



/* ==========================================================================

   PROJECTS ARCHIVE PAGE (DỰ ÁN)

   ========================================================================== */

.dic2-projects-page {

    background-color: #ffffff;

    color: var(--text-dark, #1e293b);

}



/* 1. Projects Hero Banner */

.dic2-projects-hero {

    position: relative;

    background-color: #06152d;

    padding: 130px 0 135px;

    overflow: hidden;

    color: #ffffff;

}



.dic2-projects-hero__bg {

    position: absolute;

    inset: 0;

    background-position: center 30%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0.35;

    filter: saturate(0.9) brightness(0.95);

    pointer-events: none;

}



.dic2-projects-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(8, 23, 50, 0.72) 0%, rgba(6, 17, 38, 0.92) 100%),

                linear-gradient(90deg, rgba(6, 17, 38, 0.65) 0%, rgba(6, 17, 38, 0.15) 60%, rgba(6, 17, 38, 0.45) 100%);

    pointer-events: none;

}



.dic2-projects-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-projects-hero__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2.2px;

    color: #8da2be;

    margin-bottom: 20px;

}



.dic2-projects-hero__title {

    font-family: var(--font-heading);

    font-size: clamp(34px, 4.4vw, 60px);

    font-weight: 800;

    line-height: 1.12;

    color: #ffffff;

    margin: 0 0 34px 0;

    letter-spacing: -1.2px;

}



.dic2-projects-hero__grid {

    display: grid;

    grid-template-columns: 1.25fr 0.85fr;

    gap: 60px;

    align-items: flex-start;

}



.dic2-projects-hero__desc {

    font-size: 17.5px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 540px;

}



.dic2-projects-hero__note {

    font-size: 15px;

    line-height: 1.65;

    color: #8da2be;

    margin: 0;

    text-align: left;

}



/* 2. Projects Main Section & Filter */

.dic2-projects-main {

    padding: 95px 0 115px;

    background-color: #ffffff;

}



.dic2-projects-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 40px;

    gap: 40px;

}



.dic2-projects-header__left {

    max-width: 680px;

    flex: 1 1 auto;

}



.dic2-projects-tag {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #64748b;

    margin-bottom: 14px;

    display: inline-block;

}



.dic2-projects-heading {

    font-family: var(--font-heading);

    font-size: 46px;

    font-weight: 800;

    line-height: 1.15;

    color: #07152d;

    margin: 0;

    letter-spacing: -0.5px;

    white-space: nowrap;

}



.dic2-projects-header__right {

    max-width: 440px;

    padding-bottom: 6px;

}



.dic2-projects-subtext {

    font-size: 16px;

    line-height: 1.6;

    color: #64748b;

    margin: 0;

}



/* Filter Tabs */

.dic2-projects-filter-bar {

    display: flex;

    align-items: center;

    gap: 36px;

    margin-bottom: 48px;

    overflow-x: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;

    border-bottom: 1px solid #e2e8f0;

    padding-bottom: 16px;

}



.dic2-projects-filter-bar::-webkit-scrollbar {

    display: none;

}



.dic2-projects-filter-bar .dic2-filter-btn {

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    cursor: pointer;

    padding: 6px 0 !important;

    font-family: var(--font-heading);

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 1.5px !important;

    color: #64748b !important;

    position: relative;

    white-space: nowrap;

    text-transform: uppercase !important;

    display: inline-flex;

    align-items: center;

    gap: 0;

    transition: color 0.2s ease;

    box-shadow: none !important;

}



.dic2-projects-filter-bar .dic2-filter-btn:hover {

    color: #07152d !important;

    background: transparent !important;

}



.dic2-projects-filter-bar .dic2-filter-btn.active {

    color: #07152d !important;

    font-weight: 700 !important;

    background: transparent !important;

}



.dic2-projects-filter-bar .dic2-filter-btn.active::after {

    content: '' !important;

    display: inline-block !important;

    width: 5.5px;

    height: 5.5px;

    background-color: var(--esg) !important;

    border-radius: 50%;

    margin-left: 7px;

    vertical-align: middle;

}



.dic2-projects-grid.is-loading {

    opacity: 0.35;

    pointer-events: none;

    transition: opacity 0.2s ease;

}



/* Projects Grid */

.dic2-projects-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 46px 26px;

}



.dic2-project-card {

    display: flex;

    flex-direction: column;

    cursor: pointer;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.dic2-project-card.is-hidden {

    display: none !important;

}



.dic2-project-card__thumb {

    position: relative;

    border-radius: 0;

    overflow: hidden;

    background-color: #f1f5f9;

    aspect-ratio: 3 / 4;

    margin-bottom: 14px;

}



.dic2-project-card__thumb-link {

    display: block;

    width: 100%;

    height: 100%;

}



.dic2-project-card__img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);

}



.dic2-project-card:hover .dic2-project-card__img {

    transform: scale(1.04);

}



.dic2-project-card__body {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.dic2-project-card__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;

    line-height: 1.4;

    white-space: nowrap;

}



.dic2-project-card__meta-left {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    min-width: 0;

}



.dic2-project-card__num {

    font-family: var(--font-heading);

    font-size: 12px;

    font-weight: 600;

    color: #64748b;

    letter-spacing: 0.5px;

    line-height: 1.4;

    flex-shrink: 0;

}



.dic2-project-card__cat {

    font-family: var(--font-heading);

    font-size: 12px;

    font-weight: 500;

    text-transform: uppercase;

    color: var(--esg);

    line-height: 1.4;

    letter-spacing: 0.6px;

    white-space: nowrap;

}



.dic2-project-card__loc {

    font-size: 11.5px;

    font-weight: 500;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    text-align: right;

    line-height: 1.4;

    white-space: nowrap;

    flex-shrink: 0;

}



.dic2-project-card__title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    line-height: 1.35;

    color: #07152d;

    margin: 0 0 8px 0;

    letter-spacing: -0.2px;

    transition: color 0.25s ease;

}



.dic2-project-card__title a {

    color: inherit;

    text-decoration: none;

    transition: color 0.25s ease;

}



/* Hover cả box: chữ đổi sang màu xanh hay dùng var(--esg) */

.dic2-project-card:hover .dic2-project-card__title,

.dic2-project-card:hover .dic2-project-card__title a {

    color: var(--esg) !important;

}



.dic2-project-card__scope {

    font-size: 13.5px;

    line-height: 1.5;

    color: #64748b;

    margin: 0;

}



/* Arrow icon (xuất hiện khi hover cả box) */

.dic2-project-card__arrow {

    display: inline-flex;

    align-items: center;

    color: var(--esg);

    margin-top: 14px;

    opacity: 0;

    transform: translateX(-4px);

    transition: opacity 0.25s ease, transform 0.25s ease;

}



.dic2-project-card:hover .dic2-project-card__arrow {

    opacity: 1;

    transform: translateX(4px);

}



/* 3. Projects Pre-footer CTA */

.dic2-projects-cta {

    background-color: #06152d;

    padding: 100px 0;

    color: #ffffff;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.dic2-projects-cta__wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}



.dic2-projects-cta__tag {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #8da2be;

    margin-bottom: 16px;

    display: inline-block;

}



.dic2-projects-cta__title {

    font-family: var(--font-heading);

    font-size: clamp(32px, 3.8vw, 44px);

    font-weight: 800;

    line-height: 1.15;

    color: #ffffff;

    margin: 0;

    letter-spacing: -0.8px;

    white-space: pre-line;

}



.dic2-projects-cta__desc {

    font-size: 15px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0 0 28px 0;

    max-width: 480px;

}



.dic2-projects-cta__buttons {

    display: flex;

    gap: 16px;

    align-items: center;

    flex-wrap: wrap;

}



/* 4. Single Project Page */

.dic2-single-project-hero {

    position: relative;

    background-color: #06152d;

    padding: 120px 0 90px;

    color: #ffffff;

    overflow: hidden;

}



.dic2-single-project-hero__bg {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: cover;

    opacity: 0.3;

    pointer-events: none;

}



.dic2-single-project-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(6, 21, 45, 0.8) 0%, rgba(6, 21, 45, 0.95) 100%);

    pointer-events: none;

}



.dic2-single-project-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-single-project-hero__meta {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 18px;

    font-size: 12.5px;

}



.dic2-project-tag {

    font-family: var(--font-heading);

    font-weight: 700;

    color: #22c55e;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.dic2-project-loc {

    color: #cbd5e1;

}



/* ==========================================================================

   SINGLE PROJECT DETAIL PAGE (Exact Design Replicated)

   ========================================================================== */

.dic2-project-detail-hero {

    position: relative;

    padding: 135px 0 60px;

    background-color: #07152d;

    overflow: hidden;

}



.dic2-project-detail-hero__bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.42;

    z-index: 1;

}



.dic2-project-detail-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(7, 21, 45, 0.78) 0%, rgba(7, 21, 45, 0.90) 100%);

    z-index: 2;

}



.dic2-project-detail-hero__container {

    position: relative;

    z-index: 3;

}



.dic2-project-detail-hero__back {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #b1b7c0;

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    margin-bottom: 24px;

    transition: color 0.2s ease, transform 0.2s ease;

}



.dic2-project-detail-hero__back i,

.dic2-project-detail-hero__back .dic2-back-arrow {

    font-size: 13px;

    line-height: 1;

    transition: transform 0.2s ease;

}



.dic2-project-detail-hero__back:hover {

    color: #ffffff;

}



.dic2-project-detail-hero__back:hover i,

.dic2-project-detail-hero__back:hover .dic2-back-arrow {

    transform: translateX(-4px);

}



.dic2-project-detail-hero__cat {

    color: #959daa;

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 18px;

}



.dic2-project-detail-hero__title {

    font-family: var(--font-heading);

    font-size: clamp(34px, 4vw, 54px);

    font-weight: 800;

    line-height: 1.15;

    color: #ffffff;

    letter-spacing: -0.5px;

    max-width: 860px;

    margin: 0 0 36px 0;

}



.dic2-project-detail-hero__bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: none;

    padding-top: 0;

    color: #cbd5e1;

    font-size: 18px;

    font-weight: 500;

    max-width: 860px;

    gap: 30px;

}



.dic2-project-detail-hero__note {

    color: #cbd5e1;

    font-size: 18px;

    line-height: 1.5;

}



.dic2-project-detail-hero__loc {

    color: #cbd5e1;

    font-size: 18px;

    line-height: 1.5;

    text-align: right;

    white-space: nowrap;

}



/* SECTION 2: SPECIFICATIONS TABLE */

.dic2-project-specs-section {

    padding: 100px 0;

    background: #ffffff;

}



.dic2-project-specs-header {

    margin-bottom: 24px;

}



.dic2-project-specs-tag {

    color: #64748b;

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    display: block;

    margin-bottom: 12px;

}



.dic2-project-specs-title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    line-height: 1.15;

    color: #07152d;

    letter-spacing: -0.5px;

    margin: 0;

}



.dic2-project-specs-table {

    max-width: 100%;

    border-top: 1px solid #edf2f7;

    margin-top: 40px;

}



.dic2-project-specs-row {

    display: flex;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid #edf2f7;

    gap: 24px;

}



.dic2-project-specs-label {

    width: 250px;

    min-width: 180px;

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #64748b;

}



.dic2-project-specs-val {

    flex: 1;

    font-size: 16px;

    font-weight: 500;

    color: #1e293b;

    line-height: 1.5;

}



/* SECTION 3: SHOWCASE IMAGE (Full Light Gray Background) */

.dic2-project-showcase-section {

    padding: 100px 0;

    background-color: #f5f7f9;

}



.dic2-project-showcase-frame {

    border-radius: 0;

    overflow: hidden;

    background: transparent;

    box-shadow: none;

}



.dic2-project-showcase-img {

    width: 100%;

    height: auto;

    max-height: 700px;

    object-fit: cover;

    display: block;

}



.dic2-project-showcase-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;

}



.dic2-project-showcase-label {

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #64748b;

}



.dic2-project-showcase-source {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #07152d;

    text-decoration: underline;

    text-underline-offset: 3px;

    transition: color 0.2s ease;

}



.dic2-project-showcase-source:hover {

    color: var(--esg);

}



.dic2-project-showcase-source .dic2-source-arrow {

    font-size: 12px;

    text-decoration: none;

    display: inline-block;

}



/* SECTION 4: RELATED PROJECTS (Clean White Background) */

.dic2-project-related-section {

    padding: 100px 0;

    background-color: #ffffff;

    border-top: 1px solid #edf2f7;

}



.dic2-project-related-header {

    margin-bottom: 46px;

}



.dic2-project-related-tag {

    color: #64748b;

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    display: block;

    margin-bottom: 12px;

}



.dic2-project-related-title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    line-height: 1.15;

    color: #07152d;

    letter-spacing: -0.5px;

    margin: 0;

}



/* SECTION 5: DETAIL CTA (HỢP TÁC CÙNG DIC NO.2) */

.dic2-project-cta-section {

    background-color: #07152d;

    padding: 75px 0;

    color: #ffffff;

}



.dic2-project-cta-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

}



.dic2-project-cta-left {

    flex: 1;

}



.dic2-project-cta-tag {

    color: #00df82;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    margin-bottom: 10px;

    display: block;

}



.dic2-project-cta-title {

    font-family: var(--font-heading);

    font-size: clamp(28px, 3.2vw, 42px);

    font-weight: 800;

    line-height: 1.18;

    color: #ffffff;

    letter-spacing: -0.02em;

    margin: 0;

}



.dic2-project-cta-right {

    flex: 1;

    max-width: 500px;

}



.dic2-project-cta-desc {

    font-size: 15.5px;

    line-height: 1.65;

    color: rgba(255, 255, 255, 0.8);

    margin: 0 0 24px 0;

}



.dic2-project-cta-btns {

    display: flex;

    gap: 16px;

    align-items: center;

    flex-wrap: wrap;

}



.dic2-btn-white {

    background: #ffffff;

    color: #07152d;

    font-weight: 700;

    font-size: 13px;

    letter-spacing: 0.05em;

    padding: 13px 26px;

    border-radius: 4px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    transition: all 0.25s ease;

}



.dic2-btn-white:hover {

    background: #00df82;

    color: #07152d;

    transform: translateY(-2px);

}



.dic2-btn-outline {

    border: 1px solid rgba(255, 255, 255, 0.35);

    color: #ffffff;

    font-weight: 700;

    font-size: 13px;

    letter-spacing: 0.05em;

    padding: 13px 26px;

    border-radius: 4px;

    text-decoration: none;

    transition: all 0.25s ease;

}



.dic2-btn-outline:hover {

    border-color: #ffffff;

    background: rgba(255, 255, 255, 0.1);

    transform: translateY(-2px);

}



/* ==========================================================================

   RESPONSIVE (PROJECTS PAGE)

   ========================================================================== */

@media (max-width: 1024px) {

    .dic2-projects-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 36px 24px;

    }



    .dic2-projects-cta__wrapper {

        grid-template-columns: 1fr;

        gap: 36px;

    }



    .dic2-single-project-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}



@media (max-width: 768px) {

    .dic2-projects-hero {

        padding: 70px 0 60px;

    }



    .dic2-projects-hero__title {

        font-size: 34px;

    }



    .dic2-projects-hero__grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .dic2-projects-main {

        padding: 60px 0 70px;

    }



    .dic2-projects-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        margin-bottom: 30px;

    }



    .dic2-projects-header__left {

        max-width: 100%;

    }



    .dic2-projects-heading {

        font-size: 30px;

        white-space: normal;

    }



    /* Thanh cuon ngang nho tren mobile cho danh muc du an */

    .dic2-projects-filter-bar {

        gap: 22px;

        padding-bottom: 8px;

        margin-bottom: 30px;

        border-bottom: none;

        scrollbar-width: thin;

        scrollbar-color: var(--esg) #e2e8f0;

        -webkit-overflow-scrolling: touch;

    }



    .dic2-projects-filter-bar::-webkit-scrollbar {

        display: block !important;

        height: 3px !important;

    }



    .dic2-projects-filter-bar::-webkit-scrollbar-track {

        background: #e2e8f0;

        border-radius: 3px;

    }



    .dic2-projects-filter-bar::-webkit-scrollbar-thumb {

        background: var(--esg);

        border-radius: 3px;

    }



    .dic2-projects-grid {

        grid-template-columns: 1fr;

        gap: 32px 0;

    }



    .dic2-projects-cta {

        padding: 60px 0;

    }



    .dic2-projects-cta__title {

        font-size: 32px;

    }



    /* Single Project Page Responsive */

    .dic2-project-detail-hero {

        padding: 110px 0 30px;

    }



    .dic2-project-detail-hero__title {

        font-size: 32px;

        margin-bottom: 28px;

    }



    .dic2-project-detail-hero__bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }



    .dic2-project-specs-section {

        padding: 50px 0;

    }



    .dic2-project-specs-title {

        font-size: 28px;

    }



    .dic2-project-specs-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

        padding: 16px 0;

    }



    .dic2-project-specs-label {

        width: 100%;

        font-size: 11.5px;

    }



    .dic2-project-showcase-section {

        padding: 50px 0;

    }



    .dic2-project-related-section {

        padding: 50px 0;

    }



    .dic2-project-related-title {

        font-size: 28px;

        margin-bottom: 28px;

    }



    .dic2-project-cta-section {

        padding: 55px 0;

    }



    .dic2-project-cta-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 28px;

    }



    .dic2-project-cta-title {

        font-size: 30px;

    }



    .dic2-project-cta-btns {

        flex-direction: column;

        width: 100%;

    }



    .dic2-project-cta-btns .dic2-btn-white,

    .dic2-project-cta-btns .dic2-btn-outline {

        width: 100%;

        justify-content: center;

        text-align: center;

    }

}



/* ==========================================================================

   ESG PAGE STYLES (Trang Phát Triển Bền Vững)

   ========================================================================== */



/* Shared Tag for ESG */

.dic2-esg-tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #64748b;

    margin-bottom: 12px;

}

.dic2-esg-tag--light {

    color: #94a3b8;

}



/* 1. SECTION 1: HERO BANNER (Ảnh 1) */

.dic2-esg-hero {

    position: relative;

    background-color: #06152d;

    padding: 130px 0 135px;

    overflow: hidden;

    color: #ffffff;

}



.dic2-esg-hero__bg {

    position: absolute;

    inset: 0;

    background-position: center 30%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0.45;

    filter: saturate(0.85) brightness(0.95);

    pointer-events: none;

}



.dic2-esg-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(6, 21, 45, 0.72) 0%, rgba(4, 16, 36, 0.9) 100%),

                linear-gradient(90deg, rgba(6, 21, 45, 0.8) 0%, rgba(6, 21, 45, 0.45) 55%, rgba(6, 21, 45, 0.15) 100%);

    pointer-events: none;

}



.dic2-esg-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-esg-hero__content {

    max-width: 680px;

}



.dic2-esg-hero__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2.2px;

    color: #8da2be;

    margin-bottom: 20px;

}



.dic2-esg-hero__title {

    font-family: var(--font-heading);

    font-size: 54px;

    font-weight: 800;

    line-height: 1.14;

    color: #ffffff;

    margin: 0 0 24px 0;

    letter-spacing: -1px;

}



.dic2-esg-hero__desc {

    font-size: 16px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 520px;

    font-weight: 400;

}



/* 2. SECTION 2: BA TRỤ CỘT E • S • G (Ảnh 2) */

.dic2-esg-pillars {

    background-color: #ffffff;

    padding: 100px 0 110px;

}



.dic2-esg-pillars__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 70px;

    gap: 40px;

}



.dic2-esg-pillars__title {

    font-family: var(--font-heading);

    font-size: 46px;

    font-weight: 800;

    color: #0a1e3f;

    margin: 0;

    letter-spacing: 2px;

    line-height: 1;

}



.dic2-esg-pillars__desc {

    font-size: 15px;

    color: #475569;

    line-height: 1.65;

    margin: 0;

    max-width: 440px;

}



.dic2-esg-pillars__grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

}



.dic2-pillar-card {

    padding: 0 45px;

}



.dic2-esg-pillars__grid > .dic2-pillar-card:first-child {

    padding-left: 0;

    padding-right: 45px;

    border-right: 1px solid #e2e8f0;

}



.dic2-esg-pillars__grid > .dic2-pillar-card:nth-child(2) {

    padding-left: 45px;

    padding-right: 45px;

    border-right: 1px solid #e2e8f0;

}



.dic2-esg-pillars__grid > .dic2-pillar-card:last-child {

    padding-left: 45px;

    padding-right: 0;

    border-right: none;

}



.dic2-pillar-letter {

    font-family: var(--font-heading);

    font-size: 58px;

    font-weight: 800;

    color: #008853;

    line-height: 1;

    margin-bottom: 16px;

}



.dic2-pillar-title {

    font-family: var(--font-heading);

    font-size: 20px;

    font-weight: 700;

    color: #0a1e3f;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0 0 4px 0;

}



.dic2-pillar-sub {

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: #64748b;

    margin-bottom: 18px;

}



.dic2-pillar-desc {

    font-size: 16px;

    line-height: 1.65;

    color: #475569;

    margin: 0 0 15px 0;

    min-height: 65px;

}



.dic2-pillar-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.dic2-pillar-item {

    display: flex;

    align-items: baseline;

    gap: 10px;

    padding: 13px 0;

    border-top: 1px solid #eef2f6;

    font-size: 13.5px;

    color: #1e293b;

    line-height: 1.5;

    font-weight: 500;

}



.dic2-pillar-list .dic2-pillar-item:last-child {

    border-bottom: 1px solid #eef2f6;

}



.dic2-pillar-dash {

    color: #008853;

    font-weight: 700;

    font-size: 14px;

    flex-shrink: 0;

}



.dic2-pillar-text {

    flex: 1;

    font-size: 15px;

}



/* 3. SECTION 3: THI CÔNG XANH (Ảnh 3) */

.dic2-esg-green {

    background-color: #f8fafc;

    padding: 105px 0;

    border-top: none;

    border-bottom: none;

}



.dic2-esg-green__grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 75px;

    align-items: center;

}



.dic2-esg-green__title {

    font-family: var(--font-heading);

    font-size: 48px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.15;

    margin: 12px 0 24px 0;

    letter-spacing: -0.8px;

}



.dic2-esg-green__desc {

    font-size: 16px;

    line-height: 1.7;

    color: #475569;

    margin: 0;

    max-width: 580px;

}



.dic2-esg-green__img-wrapper {

    overflow: hidden;

    border-radius: 0;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);

    background-color: #e2e8f0;

}



.dic2-esg-green__img {

    width: 100%;

    height: auto;

    max-height: 390px;

    object-fit: cover;

    display: block;

    border-radius: 0;

    transition: transform 0.4s ease;

}



.dic2-esg-green__img-wrapper:hover .dic2-esg-green__img {

    transform: scale(1.02);

}



/* 4. SECTION 4: HOẠT ĐỘNG ESG (Ảnh 4 - Nền Navy Đậm cùng màu Footer) */

.dic2-esg-activities {

    background-color: var(--navy);

    padding: 100px 0 110px;

    color: #ffffff;

}



.dic2-esg-activities__header {

    margin-bottom: 60px;

}



.dic2-esg-activities__title {

    font-family: var(--font-heading);

    font-size: 46px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1.18;

    margin: 14px 0 0 0;

    letter-spacing: -0.6px;

}



.dic2-esg-activities__grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

}



.dic2-esg-act-card {

    position: relative;

    padding: 34px 32px;

    border-radius: 0;

    background-color: transparent;

    transition: background-color 0.25s ease;

    cursor: pointer;

    border-right: 1px solid rgba(255, 255, 255, 0.12);

}



.dic2-esg-activities__grid > .dic2-esg-act-card:last-child {

    border-right: none;

}



.dic2-esg-act-card:hover {

    background-color: rgba(255, 255, 255, 0.08);

}



.dic2-esg-act-num {

    font-size: 13px;

    font-weight: 700;

    color: #8da2be;

    letter-spacing: 1.2px;

    margin-bottom: 22px;

}



.dic2-esg-act-title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    color: #ffffff;

    line-height: 1.35;

    margin: 0 0 16px 0;

    min-height: 60px;

}



.dic2-esg-act-desc {

    font-size: 14.5px;

    line-height: 1.65;

    color: #94a3b8;

    margin: 0;

}



/* RESPONSIVE FOR ESG PAGE */

@media (max-width: 1024px) {

    .dic2-esg-hero__title {

        font-size: 44px;

    }



    .dic2-esg-pillars__title {

        font-size: 38px;

    }



    .dic2-esg-green__title,

    .dic2-esg-activities__title {

        font-size: 38px;

    }



    .dic2-pillar-card {

        padding: 0 25px;

    }



    .dic2-esg-pillars__grid > .dic2-pillar-card:first-child,

    .dic2-esg-activities__grid > .dic2-esg-act-card:first-child {

        padding-right: 25px;

    }



    .dic2-esg-pillars__grid > .dic2-pillar-card:nth-child(2),

    .dic2-esg-activities__grid > .dic2-esg-act-card:nth-child(2) {

        padding-left: 25px;

        padding-right: 25px;

    }



    .dic2-esg-pillars__grid > .dic2-pillar-card:last-child,

    .dic2-esg-activities__grid > .dic2-esg-act-card:last-child {

        padding-left: 25px;

    }



    .dic2-esg-green__grid {

        gap: 40px;

    }

}



@media (max-width: 768px) {

    .dic2-esg-hero {

        padding: 70px 0 65px;

    }



    .dic2-esg-hero__title {

        font-size: 34px;

    }



    .dic2-esg-pillars {

        padding: 60px 0 70px;

    }



    .dic2-esg-pillars__header {

        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 40px;

        gap: 16px;

    }



    .dic2-esg-pillars__title {

        font-size: 34px;

    }



    .dic2-esg-pillars__grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .dic2-esg-pillars__grid > .dic2-pillar-card:first-child,

    .dic2-esg-pillars__grid > .dic2-pillar-card:nth-child(2),

    .dic2-esg-pillars__grid > .dic2-pillar-card:last-child {

        padding: 0;

        border-right: none;

    }



    .dic2-pillar-desc {

        min-height: auto;

    }



    .dic2-esg-green {

        padding: 60px 0 70px;

    }



    .dic2-esg-green__grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }



    .dic2-esg-green__title {

        font-size: 32px;

    }



    .dic2-esg-activities {

        padding: 60px 0 40px;

    }



    .dic2-esg-page ~ .dic2-cta-section,

    .page-template-page-esg .dic2-cta-section {

        padding-top: 40px;

    }



    .dic2-esg-activities__title {

        font-size: 32px;

    }



    .dic2-esg-activities__grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .dic2-esg-act-card {

        padding: 24px 20px;

        border-right: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        border-radius: 0;

    }



    .dic2-esg-activities__grid > .dic2-esg-act-card:last-child {

        border-bottom: none;

    }



    .dic2-esg-act-title {

        min-height: auto;

    }

}



/* ==========================================================================

   SHAREHOLDERS PAGE STYLES (Trang Quan Hệ Cổ Đông)

   ========================================================================== */



/* 1. HERO BANNER (Ảnh 1) */

.dic2-sh-hero {

    position: relative;

    background-color: #06152d;

    padding: 110px 0 115px;

    overflow: hidden;

    color: #ffffff;

}



.dic2-sh-hero__bg {

    position: absolute;

    inset: 0;

    background-position: center 30%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0.38;

    filter: brightness(0.85);

    pointer-events: none;

}



.dic2-sh-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(6, 21, 45, 0.94) 0%, rgba(4, 16, 36, 0.82) 50%, rgba(6, 21, 45, 0.96) 100%),

                radial-gradient(circle at 85% 20%, rgba(0, 136, 83, 0.18) 0%, transparent 55%);

    pointer-events: none;

}



.dic2-sh-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-sh-hero__grid {

    display: grid;

    grid-template-columns: 1.45fr 1fr;

    gap: 40px;

    align-items: center;

}



.dic2-sh-hero__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #8da2be;

    margin-bottom: 16px;

}



.dic2-sh-hero__title {

    font-family: var(--font-heading) !important;

    font-size: clamp(24px, 2.3vw, 38px) !important;

    font-weight: 800 !important;

    line-height: 1.25 !important;

    color: #ffffff !important;

    margin: 0 0 18px 0 !important;

    letter-spacing: -0.5px !important;

    white-space: nowrap !important;

}



.dic2-sh-hero__desc {

    font-size: 15px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 520px;

}



.dic2-sh-hero__right {

    display: flex;

    align-items: center;

}



.dic2-sh-hero__right-inner {

    border-left: 2.5px solid var(--esg, #008853);

    padding-left: 32px;

}



.dic2-sh-hero__right-text {

    font-size: 14.5px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 480px;

}



.dic2-sh-hero__accent-line {

    width: 36px;

    height: 3px;

    background-color: var(--esg, #008853);

    margin-top: 18px;

    border-radius: 2px;

}



/* 2. DOCUMENTS LIST SECTION (Ảnh 2) */

.dic2-sh-docs-section {

    background-color: #f8fafc;

    padding: 100px 0 100px;

}



.dic2-sh-grid-wrapper {

    position: relative;

    min-height: 250px;

}



.dic2-sh-grid-wrapper .dic2-grid-loader {

    position: absolute;

    top: 90px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

}



.dic2-sh-docs-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px 24px;

    transition: opacity 0.25s ease;

}



.dic2-sh-docs-grid.is-loading {

    opacity: 0.35 !important;

    pointer-events: none !important;

}



.dic2-sh-card {

    background: #ffffff;

    border: 1px solid #edf2f7;

    border-radius: 6px;

    padding: 16px 20px;

    display: flex;

    align-items: center;

    gap: 16px;

    transition: all 0.25s ease;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

    position: relative;

}



.dic2-sh-card:hover {

    border-color: #cbd5e1;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);

    transform: translateY(-2px);

}



.dic2-sh-card__icon {

    width: 44px;

    height: 44px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.dic2-sh-card__icon--pdf {

    background-color: #fef2f2;

    border: 1px solid #fee2e2;

}



.dic2-sh-card__icon--doc {

    background-color: #f0f9ff;

    border: 1px solid #e0f2fe;

}



.dic2-sh-card__content {

    flex: 1;

    min-width: 0;

}



.dic2-sh-card__title {

    font-size: 14.5px;

    font-weight: 700;

    line-height: 1.4;

    margin: 0 0 5px 0;

    color: #0f172a;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.dic2-sh-card__title a {

    color: #0f172a;

    text-decoration: none;

    transition: color 0.2s ease;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.dic2-sh-card__title a:hover {

    color: #008853;

}



.dic2-sh-card__date {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: #94a3b8;

    font-weight: 500;

}



.dic2-sh-card__actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}



.dic2-sh-card__arrow {

    display: none !important;

}



.dic2-sh-download-btn {

    background-color: var(--navy);

    color: var(--navy-foreground);

    border-radius: 4px;

    padding: 7px 15px;

    font-size: 11.5px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

    transition: background-color 0.2s ease, transform 0.15s ease;

    letter-spacing: 0.5px;

}



.dic2-sh-download-btn:hover {

    background-color: var(--charcoal);

    color: var(--navy-foreground);

    transform: translateY(-1px);

}



/* Shareholder Filter Tabs - Compact Single-Row Layout */

.dic2-sh-filter-bar {

    display: flex !important;

    align-items: center !important;

    gap: 18px !important;

    margin-bottom: 36px !important;

    padding-bottom: 14px !important;

    border-bottom: 1px solid #e2e8f0 !important;

    overflow-x: auto !important;

    white-space: nowrap !important;

    scrollbar-width: thin;

}



.dic2-sh-filter-bar .dic2-filter-btn {

    font-size: 12.5px !important;

    font-weight: 600 !important;

    letter-spacing: 0.8px !important;

    padding: 6px 4px !important;

    flex-shrink: 0;

}



.dic2-sh-filter-bar .dic2-filter-btn.active::after {

    margin-left: 5px !important;

    width: 5px !important;

    height: 5px !important;

}



/* Shareholder Pagination - Styled exactly like News (.dic2-pagination) */

.dic2-sh-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 52px;

    flex-wrap: wrap;

}



.dic2-sh-page-num,

.dic2-sh-page-nav {

    min-width: 40px;

    height: 40px;

    padding: 0 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-sm, 6px);

    border: 1px solid var(--line, #e2e8f0);

    background-color: #ffffff;

    color: var(--navy);

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition, all 0.2s ease);

    cursor: pointer;

}



.dic2-sh-page-num.active {

    background-color: var(--navy) !important;

    color: #ffffff !important;

    border-color: var(--navy) !important;

    box-shadow: 0 4px 12px rgba(10, 25, 49, 0.2);

    cursor: default;

}



.dic2-sh-page-num:not(.active):hover,

.dic2-sh-page-nav:not(.is-disabled):hover {

    background-color: var(--navy) !important;

    color: #ffffff !important;

    border-color: var(--navy) !important;

}



.dic2-sh-page-dots {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 32px;

    height: 40px;

    background-color: transparent;

    border-color: transparent;

    color: var(--color-text-muted, #94a3b8);

    font-size: 15px;

    font-weight: 700;

    user-select: none;

}



.dic2-sh-page-nav.is-disabled {

    opacity: 0.35;

    cursor: not-allowed;

    pointer-events: none;

}



/* Responsive */

@media (max-width: 1024px) {

    .dic2-sh-hero__title {

        font-size: 42px;

    }

    .dic2-sh-hero__grid {

        gap: 40px;

    }

    .dic2-sh-docs-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .dic2-sh-hero {

        padding: 70px 0 65px;

    }

    .dic2-sh-hero__title {

        font-size: 32px;

    }

    .dic2-sh-hero__grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .dic2-sh-hero__right-inner {

        padding-left: 20px;

    }

    .dic2-sh-docs-section {

        padding: 50px 0 65px;

    }

    .dic2-sh-card {

        flex-wrap: wrap;

        gap: 12px;

    }

    .dic2-sh-card__content {

        width: calc(100% - 60px);

    }

    .dic2-sh-card__actions {

        width: 100%;

        justify-content: flex-end;

        border-top: 1px solid #f1f5f9;

        padding-top: 10px;

    }

}



/* ==========================================================================

   CAPABILITIES PAGE STYLES (Trang Năng Lực & Thiết Bị)

   ========================================================================== */



/* 1. HERO BANNER (Ảnh 1) */

.dic2-cap-hero {

    position: relative;

    background-color: #06152d;

    padding: 130px 0 135px;

    overflow: hidden;

    color: #ffffff;

}



.dic2-cap-hero__bg {

    position: absolute;

    inset: 0;

    background-position: center 30%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0.45;

    filter: saturate(0.85) brightness(0.95);

    pointer-events: none;

}



.dic2-cap-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(6, 21, 45, 0.72) 0%, rgba(4, 16, 36, 0.92) 100%),

                linear-gradient(90deg, rgba(6, 21, 45, 0.85) 0%, rgba(6, 21, 45, 0.45) 55%, rgba(6, 21, 45, 0.2) 100%);

    pointer-events: none;

}



.dic2-cap-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-cap-hero__grid {

    display: grid;

    grid-template-columns: 1.4fr 0.8fr;

    gap: 70px;

    align-items: flex-end;

}



.dic2-cap-hero__tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2.2px;

    color: #8da2be;

    margin-bottom: 20px;

}



.dic2-cap-hero__title {

    font-family: var(--font-heading);

    font-size: 56px;

    font-weight: 800;

    line-height: 1.14;

    color: #ffffff;

    margin: 0 0 24px 0;

    letter-spacing: -1px;

}



.dic2-cap-hero__desc {

    font-size: 16px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 520px;

}



.dic2-cap-hero__right-desc {

    font-size: 15px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    text-align: right;

}



/* 2. PILLARS SECTION (Ảnh 2, 3, 4, 5) */

.dic2-cap-pillars-section {

    background-color: #ffffff;

    padding: 100px 0 20px;

}



.dic2-cap-tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #64748b;

    margin-bottom: 12px;

}



.dic2-cap-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    padding-bottom: 36px;

    margin-bottom: 60px;

    border-bottom: 1px solid #e2e8f0;

}



.dic2-cap-header__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #0a1e3f;

    margin: 0;

    letter-spacing: -0.5px;

    line-height: 1.15;

}



.dic2-cap-header__desc {

    font-size: 16px;

    color: #475569;

    line-height: 1.65;

    margin: 0;

    max-width: 440px;

}



.dic2-cap-items {

    display: flex;

    flex-direction: column;

}



.dic2-cap-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

    padding: 85px 0;

    border-top: 1px solid #eef2f6;

}



.dic2-cap-row:first-child {

    border-top: none;

    padding-top: 0;

}



.dic2-cap-row__img-wrap {

    overflow: hidden;

    border-radius: 0;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    background-color: #f1f5f9;

}



.dic2-cap-row__img {

    width: 100%;

    height: 460px;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

}



.dic2-cap-row:hover .dic2-cap-row__img {

    transform: scale(1.02);

}



.dic2-cap-badge-wrap {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

}



.dic2-cap-num {

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    color: #64748b;

    letter-spacing: 0.5px;

}



.dic2-cap-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #008853;

}



.dic2-cap-icon svg {

    display: block;

    width: 20px;

    height: 20px;

    stroke: #008853;

    stroke-width: 1.3px;

}



.dic2-cap-row__title {

    font-family: var(--font-heading);

    font-size: 36px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.25;

    margin: 0 0 16px 0;

    letter-spacing: -0.5px;

}



.dic2-cap-row__desc {

    font-size: 16px;

    line-height: 1.65;

    color: #475569;

    margin: 0 0 28px 0;

    max-width: 480px;

}



.dic2-cap-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.dic2-cap-item {

    display: flex;

    align-items: baseline;

    gap: 10px;

    padding: 13px 0;

    border-top: 1px solid #eef2f6;

    font-size: 14px;

    color: #1e293b;

    line-height: 1.5;

    font-weight: 500;

}



.dic2-cap-list .dic2-cap-item:last-child {

    border-bottom: 1px solid #eef2f6;

}



.dic2-cap-dash {

    color: #008853;

    font-weight: 700;

    font-size: 14px;

    flex-shrink: 0;

}



.dic2-cap-point-text {

    flex: 1;

    font-size: 15px;

}



/* Responsive */

@media (max-width: 1024px) {

    .dic2-cap-hero__title {

        font-size: 44px;

    }

    .dic2-cap-hero__grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .dic2-cap-hero__right-desc {

        text-align: left;

    }

    .dic2-cap-header__title {

        font-size: 38px;

    }

    .dic2-cap-row {

        gap: 40px;

        padding: 60px 0;

    }

    .dic2-cap-row__title {

        font-size: 28px;

    }

}



@media (max-width: 768px) {

    .dic2-cap-hero {

        padding: 60px 0 40px;

    }

    .dic2-cap-hero__title {

        font-size: 34px;

    }

    .dic2-cap-pillars-section {

        padding: 45px 0 15px;

    }

    .dic2-cap-header {

        flex-direction: column;

        align-items: flex-start;

        padding-bottom: 24px;

        margin-bottom: 35px;

        gap: 16px;

    }

    .dic2-cap-header__title {

        font-size: 32px;

    }

    .dic2-cap-row {

        grid-template-columns: 1fr;

        gap: 24px;

        padding: 38px 0;

    }

    .dic2-cap-row--img-right .dic2-cap-row__text-col {

        order: 2;

    }

    .dic2-cap-row--img-right .dic2-cap-row__img-col {

        order: 1;

    }

    .dic2-cap-row__img {

        height: 280px;

    }

    .dic2-cap-row__title {

        font-size: 24px;

    }

    .dic2-cap-item {

        border-top: none;

        padding: 7px 0;

    }

    .dic2-cap-list .dic2-cap-item:last-child {

        border-bottom: none;

    }

}



/* 3. SECTION 6: QUY TRÌNH KỸ THUẬT (6 BƯỚC - Ảnh 1) */

.dic2-cap-process-section {

    background-color: #f8fafc;

    padding: 100px 0 115px;

}



.dic2-cap-process__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 60px;

    gap: 40px;

}



.dic2-cap-process__title {

    font-family: var(--font-heading);

    font-size: 46px;

    font-weight: 800;

    color: #0a1e3f;

    margin: 0;

    letter-spacing: -0.5px;

    line-height: 1.15;

}



.dic2-cap-process__desc {

    font-size: 16px;

    color: #475569;

    line-height: 1.65;

    margin: 0;

    max-width: 440px;

}



.dic2-cap-process__grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}



.dic2-cap-step-card {

    padding: 38px 45px;

}



/* Row 1 dividers */

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(1),

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(2),

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(3) {

    border-bottom: 1px solid #eef2f6;

}



/* Vertical dividers */

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(1),

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(4) {

    padding-left: 0;

    border-right: 1px solid #eef2f6;

}



.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(2),

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(5) {

    border-right: 1px solid #eef2f6;

}



.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(3),

.dic2-cap-process__grid > .dic2-cap-step-card:nth-child(6) {

    border-right: 1px solid #eef2f6;

}



.dic2-cap-step-num {

    display: block;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 600;

    color: #10b981;

    letter-spacing: 0.5px;

    margin-bottom: 18px;

}



.dic2-cap-step-title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    color: #0a1e3f;

    margin: 0;

    line-height: 1.35;

    letter-spacing: -0.3px;

}



/* 4. SECTION 7: QUẢN LÝ & TIÊU CHUẨN (NỀN XANH ĐEN - Ảnh 2) */

.dic2-cap-control-section {

    background-color: var(--navy);

    padding: 100px 0 45px;

    color: #ffffff;

}



.page-template-page-capabilities .dic2-cta-section {

    padding-top: 35px;

}



.dic2-cap-control__header {

    margin-bottom: 65px;

}



.dic2-cap-control__title {

    font-family: var(--font-heading);

    font-size: 46px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1.18;

    margin: 14px 0 0 0;

    letter-spacing: -0.5px;

}



.dic2-cap-control__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

}



.dic2-cap-ctrl-card {

    padding: 38px 30px;

    background-color: transparent;

    transition: background-color 0.25s ease, box-shadow 0.25s ease;

    cursor: pointer;

    border-right: 1px solid rgba(255, 255, 255, 0.12);

    position: relative;

    user-select: none;

}



.dic2-cap-ctrl-card:hover {

    background-color: rgba(255, 255, 255, 0.08);

}



.dic2-cap-ctrl-card.is-active,

.dic2-cap-ctrl-card.active {

    background-color: rgba(255, 255, 255, 0.1) !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

}



.dic2-cap-ctrl-card.is-active .dic2-cap-ctrl-num,

.dic2-cap-ctrl-card.active .dic2-cap-ctrl-num {

    color: #ffffff;

}



.dic2-cap-ctrl-card.is-active .dic2-cap-ctrl-title,

.dic2-cap-ctrl-card.active .dic2-cap-ctrl-title {

    color: #ffffff;

}



.dic2-cap-ctrl-card.is-active .dic2-cap-ctrl-desc,

.dic2-cap-ctrl-card.active .dic2-cap-ctrl-desc {

    color: #cbd5e1;

}



.dic2-cap-control__grid > .dic2-cap-ctrl-card:last-child {

    border-right: none;

}



.dic2-cap-ctrl-num {

    display: block;

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    color: #8da2be;

    letter-spacing: 1px;

    margin-bottom: 22px;

}



.dic2-cap-ctrl-title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    color: #ffffff;

    line-height: 1.35;

    margin: 0 0 16px 0;

}



.dic2-cap-ctrl-desc {

    font-size: 16px;

    line-height: 1.65;

    color: #94a3b8;

    margin: 0;

}



/* RESPONSIVE FOR SECTION 6 & 7 */

@media (max-width: 1024px) {

    .dic2-cap-process__title,

    .dic2-cap-control__title {

        font-size: 38px;

    }



    .dic2-cap-step-card {

        padding: 28px 20px;

    }



    .dic2-cap-control__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 0;

    }



    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(1),

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(3) {

        border-right: 1px solid rgba(255, 255, 255, 0.12);

    }



    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(2),

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(4) {

        border-right: none;

    }



    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(1),

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(2) {

        border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    }

}



@media (max-width: 768px) {

    .dic2-cap-process-section {

        padding: 60px 0 70px;

    }



    .dic2-cap-process__header {

        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 35px;

        gap: 16px;

    }



    .dic2-cap-process__title,

    .dic2-cap-control__title {

        font-size: 32px;

    }



    .dic2-cap-process__grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        border: none;

    }



    .dic2-cap-step-card,

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(1),

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(2),

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(3),

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(4),

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(5),

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(6) {

        padding: 18px 14px 18px 0;

        border-right: 1px solid #e2e8f0;

        border-bottom: 1px solid #e2e8f0;

    }



    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(2n) {

        border-right: none;

        padding-left: 14px;

        padding-right: 0;

    }



    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(5),

    .dic2-cap-process__grid > .dic2-cap-step-card:nth-child(6) {

        border-bottom: none;

    }



    .dic2-cap-step-num {

        font-size: 12px;

        margin-bottom: 8px;

    }



    .dic2-cap-step-title {

        font-size: 16.5px;

        line-height: 1.35;

    }



    .dic2-cap-control-section {

        padding: 55px 0 40px;

    }



    .page-template-page-capabilities .dic2-cta-section {

        padding-top: 40px;

    }



    .dic2-cap-control__grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .dic2-cap-ctrl-card,

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:first-child,

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(2),

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:nth-child(3),

    .dic2-cap-control__grid > .dic2-cap-ctrl-card:last-child {

        padding: 0;

        border-right: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        padding-bottom: 25px;

    }



    .dic2-cap-control__grid > .dic2-cap-ctrl-card:last-child {

        border-bottom: none;

        padding-bottom: 0;

    }



    .dic2-cap-ctrl-title {

        min-height: auto;

    }

}



/* ==========================================================================

   PAGE: VỀ DIC NO.2 (ABOUT US)

   7 Sections based on Figma design

   ========================================================================== */



.dic2-about-page {

    width: 100%;

    overflow-x: hidden;

}



/* SECTION 1: HERO */

.dic2-about-hero {

    position: relative;

    padding: 120px 0 100px;

    background-color: #06152d;

    color: #ffffff;

    overflow: hidden;

}



.dic2-about-hero__bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.28;

}



.dic2-about-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(6, 21, 45, 0.95) 0%, rgba(6, 21, 45, 0.7) 100%);

}



.dic2-about-hero__container {

    position: relative;

    z-index: 2;

}



.dic2-about-hero__grid {

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 80px;

    align-items: flex-end;

}



.dic2-about-hero__tag,

.dic2-about-tag {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #008853;

    margin-bottom: 14px;

}



.dic2-about-hero__tag {

    color: #8da2be;

}



.dic2-about-tag--light {

    color: #8da2be;

}



.dic2-about-hero__title {

    font-family: var(--font-heading);

    font-size: 54px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1.15;

    margin: 0 0 20px 0;

    letter-spacing: -0.5px;

}



.dic2-about-hero__desc {

    font-size: 16px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0;

    max-width: 520px;

}



.dic2-about-hero__right-desc {

    font-size: 15px;

    line-height: 1.7;

    color: #94a3b8;

    margin: 0;

    padding-left: 30px;

    border-left: 2px solid #008853;

}



/* SECTION 2: 4 STATS (Ảnh 1) */

.dic2-about-stats-section {

    background-color: #ffffff;

    padding: 70px 0 80px;

    border-bottom: 1px solid #edf2f7;

}



.dic2-about-stats__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    align-items: stretch;

}



.dic2-about-stat-item {

    padding: 36px 32px;

    border-left: 1px solid #e2e8f0;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    text-align: left;

}



.dic2-about-stat-item:first-child {

    border-left: none;

    padding-left: 0;

}



.dic2-about-stat-item--highlight {

    background-color: #f8fafc;

    border-radius: 4px;

    border-left: none;

    border-right: 1px solid #e2e8f0;

}



.dic2-about-stat-icon {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    align-self: flex-start;

    margin-bottom: 24px;

    color: #008853;

}



.dic2-about-stat-val {

    font-family: var(--font-heading);

    font-size: 52px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.1;

    margin-bottom: 14px;

    letter-spacing: -0.5px;

}



.dic2-about-stat-lbl {

    font-family: var(--font-heading);

    font-size: 17px;

    font-weight: 700;

    color: #0a1e3f;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    margin-bottom: 8px;

}



.dic2-about-stat-sub {

    font-size: 14px;

    color: #64748b;

    line-height: 1.5;

}



/* SECTION 3: OVERVIEW */

.dic2-about-overview-section {

    padding: 100px 0;

    background-color: #ffffff;

}



.dic2-about-overview__grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 80px;

    align-items: center;

}



.dic2-about-overview__img-wrap {

    overflow: hidden;

    border-radius: 4px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

    background-color: #f1f5f9;

}



.dic2-about-overview__img {

    width: 100%;

    height: auto;

    max-height: 480px;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

}



.dic2-about-overview__img-wrap:hover .dic2-about-overview__img {

    transform: scale(1.02);

}



.dic2-about-overview__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.15;

    margin: 0 0 24px 0;

    letter-spacing: -0.5px;

}



.dic2-about-overview__p {

    font-size: 16px;

    line-height: 1.7;

    color: #475569;

    margin: 0 0 20px 0;

}



/* COMMON HEADER */

.dic2-about-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 60px;

    gap: 40px;

}



.dic2-about-header--border {

    padding-bottom: 30px;

    margin-bottom: 45px;

    border-bottom: 1px solid #e2e8f0;

}



.dic2-about-header__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #0a1e3f;

    margin: 10px 0 0 0;

    letter-spacing: -0.5px;

    line-height: 1.15;

}



.dic2-about-header__desc {

    font-size: 16px;

    color: #475569;

    line-height: 1.65;

    margin: 0;

    max-width: 490px;

}



/* SECTION 4: TIMELINE (Ảnh 2) */

.dic2-about-timeline-section {

    padding: 100px 0 110px;

    background-color: #f8fafc;

    border-top: 1px solid #edf2f7;

    border-bottom: 1px solid #edf2f7;

}



.dic2-about-timeline__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

}



.dic2-about-timeline-cell {

    padding: 44px 50px;

}



.dic2-about-timeline-cell:nth-child(1) {

    border-right: 1px solid #e2e8f0;

    border-bottom: 1px solid #e2e8f0;

    padding-left: 0;

    padding-top: 20px;

}



.dic2-about-timeline-cell:nth-child(2) {

    border-bottom: 1px solid #e2e8f0;

    padding-right: 0;

    padding-top: 20px;

}



.dic2-about-timeline-cell:nth-child(3) {

    border-right: 1px solid #e2e8f0;

    padding-left: 0;

    padding-bottom: 20px;

}



.dic2-about-timeline-cell:nth-child(4) {

    padding-right: 0;

    padding-bottom: 20px;

}



.dic2-about-timeline-year {

    display: block;

    font-family: var(--font-heading);

    font-size: 44px;

    font-weight: 800;

    color: #008853;

    margin-bottom: 18px;

    letter-spacing: -0.5px;

    line-height: 1;

}



.dic2-about-timeline-bar {

    display: block;

    width: 48px;

    height: 6px;

    background-color: #008853;

    border-radius: 3px;

    margin-bottom: 24px;

    margin-top: 14px;

}



.dic2-about-timeline-title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    color: #0a1e3f;

    margin: 0 0 12px 0;

    line-height: 1.35;

}



.dic2-about-timeline-desc {

    font-size: 15px;

    line-height: 1.6;

    color: #64748b;

    margin: 0;

    max-width: 520px;

}



/* SECTION 5: PHILOSOPHY (Ảnh 3 - Navy background + Hover effect) */

.dic2-about-philo-section {

    background-color: #07152d;

    padding: 100px 0 100px;

    color: #ffffff;

}



.dic2-about-philo__header {

    margin-bottom: 60px;

}



.dic2-about-philo__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1.15;

    margin: 12px 0 0 0;

    letter-spacing: -0.5px;

}



.dic2-about-philo__grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    align-items: stretch;

}



.dic2-about-philo-card {

    padding: 40px 34px;

    background-color: transparent;

    border: 1px solid transparent;

    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

    cursor: pointer;

    position: relative;

}



.dic2-about-philo-card:not(:first-child)::before {

    content: '';

    position: absolute;

    left: -12px;

    top: 25px;

    bottom: 25px;

    width: 1px;

    background-color: rgba(255, 255, 255, 0.1);

    transition: opacity 0.3s ease;

}



.dic2-about-philo-card:hover::before,

.dic2-about-philo-card.is-active::before,

.dic2-about-philo-card:hover + .dic2-about-philo-card::before,

.dic2-about-philo-card.is-active + .dic2-about-philo-card::before {

    opacity: 0;

}



.dic2-about-philo-card.is-active,

.dic2-about-philo-card:hover {

    background-color: #203354;

    border-color: rgba(255, 255, 255, 0.08);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);

    transform: translateY(-2px);

}



.dic2-about-philo-num {

    display: block;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 700;

    color: #8da2be;

    letter-spacing: 1px;

    margin-bottom: 22px;

}



.dic2-about-philo-card-title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 700;

    color: #ffffff;

    line-height: 1.3;

    margin: 0 0 16px 0;

}



.dic2-about-philo-card-desc {

    font-size: 15px;

    line-height: 1.65;

    color: #94a3b8;

    margin: 0;

}



/* SECTION 6: AWARDS (Ảnh 4) */

.dic2-about-awards-section {

    padding: 100px 0;

    background-color: #ffffff;

}



.dic2-about-awards-header {

    margin-bottom: 60px;

}



.dic2-about-awards__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

}



.dic2-about-award-item {

    padding: 0 36px;

    border-left: 1px solid #e2e8f0;

}



.dic2-about-award-item:first-child {

    padding-left: 0;

    border-left: none;

}



.dic2-about-award-title {

    font-family: var(--font-heading);

    font-size: 17px;

    font-weight: 800;

    color: #0a1e3f;

    letter-spacing: 0.4px;

    line-height: 1.35;

    margin: 0 0 14px 0;

    text-transform: uppercase;

}



.dic2-about-award-desc {

    font-size: 14px;

    line-height: 1.6;

    color: #64748b;

    margin: 0;

}



/* SECTION 7: LEGAL PROFILE (Ảnh 5 - bỏ box border, luôn có border phía trên) */

.dic2-about-legal-section {

    padding: 100px 0 120px;

    background-color: #f8fafc;

    border-top: 1px solid #e2e8f0;

}



.dic2-about-legal-header {

    margin-bottom: 45px;

}



.dic2-about-legal__table {

    border-top: 1px solid #e2e8f0;

    margin-bottom: 30px;

}



.dic2-about-legal__row {

    display: grid;

    grid-template-columns: 240px 1fr;

    padding: 22px 0;

    border-bottom: 1px solid #e2e8f0;

    align-items: baseline;

}



.dic2-about-legal__label {

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 700;

    color: #64748b;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}



.dic2-about-legal__val {

    font-size: 16px;

    color: #1e293b;

    line-height: 1.6;

    font-weight: 500;

}



.dic2-about-legal__note {

    font-size: 18px;

    color: #64748b;

    margin: 0;

    line-height: 1.6;

}



/* RESPONSIVE FOR ABOUT PAGE */

@media (max-width: 1024px) {

    .dic2-about-hero__grid,

    .dic2-about-overview__grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .dic2-about-hero__right-desc {

        padding-left: 0;

        border-left: none;

    }



    .dic2-about-stats__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 24px;

    }



    .dic2-about-stat-item {

        border-left: none;

        padding: 24px 20px;

        background: #f8fafc;

        border-radius: 4px;

    }



    .dic2-about-stat-item:first-child {

        padding-left: 20px;

    }



    .dic2-about-timeline__grid {

        grid-template-columns: 1fr;

    }



    .dic2-about-timeline-cell {

        padding: 30px 0 !important;

        border-right: none !important;

        border-bottom: 1px solid #e2e8f0 !important;

    }



    .dic2-about-timeline-cell:last-child {

        border-bottom: none !important;

    }



    .dic2-about-awards__grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 30px 24px;

    }



    .dic2-about-award-item {

        border-left: none;

        padding: 0;

    }



    .dic2-about-philo__grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .dic2-about-philo-card:not(:first-child)::before {

        display: none;

    }



    .dic2-about-philo-card {

        padding: 30px 24px;

    }

}



@media (max-width: 768px) {

    .dic2-about-hero {

        padding: 70px 0 60px;

    }



    .dic2-about-hero__title {

        font-size: 34px;

    }



    .dic2-about-overview__title,

    .dic2-about-header__title,

    .dic2-about-philo__title {

        font-size: 32px;

    }



    .dic2-about-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

        margin-bottom: 35px;

    }



    .dic2-about-stats__grid,

    .dic2-about-awards__grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .dic2-about-legal__row {

        grid-template-columns: 1fr;

        gap: 8px;

        padding: 16px 0;

    }

}











/* ==========================================================================

   HOMEPAGE (TRANG CHỦ) STYLES

   Pixel-perfect matching to design layout

   ========================================================================== */



/* Transparent Header on Homepage matching design */

.home .dic2-header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    background-color: transparent;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    z-index: 100;

    transition: background-color 0.3s ease, box-shadow 0.3s ease;

}



.home .dic2-header.is-scrolled {

    position: fixed;

    background-color: rgba(6, 21, 45, 0.96);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

}



.home .dic2-header .dic2-logo__brand-name {

    color: #ffffff;

}



.home .dic2-header .dic2-nav__link,

.home .dic2-header .dic2-nav__menu > li > a {

    color: rgba(255, 255, 255, 0.9);

}



.home .dic2-header .dic2-nav__link:hover,

.home .dic2-header .dic2-nav__menu > li > a:hover,

.home .dic2-header .dic2-nav__item.current-menu-item .dic2-nav__link,

.home .dic2-header .dic2-nav__menu > li.current-menu-item > a,

.home .dic2-header .dic2-nav__link.active {

    color: #ffffff;

}



.home .dic2-header .dic2-nav__link::after,

.home .dic2-header .dic2-nav__menu > li > a::after {

    background-color: #008853;

}



.home .dic2-header .dic2-lang-link {

    color: rgba(255, 255, 255, 0.65);

}



.home .dic2-header .dic2-lang-link:hover,

.home .dic2-header .dic2-lang-link.dic2-lang-active {

    color: #ffffff;

}



.home .dic2-header .dic2-lang-sep {

    color: rgba(255, 255, 255, 0.25);

}



.home .dic2-header .dic2-mobile-toggle span {

    background-color: #ffffff;

}



.home .dic2-header .dic2-mobile-toggle:hover span {

    background-color: var(--esg, #008853);

}



.home .dic2-header .dic2-btn-cta,

.home .dic2-header .dic2-header__cta-btn {

    background: transparent;

    border: 1.5px solid rgba(255, 255, 255, 0.45);

    color: #ffffff;

    border-radius: 4px;

    font-weight: 700;

    transition: all 0.25s ease;

}



.home .dic2-header .dic2-btn-cta:hover,

.home .dic2-header .dic2-header__cta-btn:hover {

    border-color: #ffffff;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

}



.dic2-homepage {

    width: 100%;

    overflow-x: hidden;

    background-color: #ffffff;

}



/* SECTION 1: HERO BANNER */

.dic2-home-hero {

    position: relative;

    background-color: #06152d;

    min-height: 580px;

    display: flex;

    align-items: center;

    padding: 160px 0 130px;

    overflow: hidden;

}



@media (min-width: 1400px) {

    .dic2-home-hero {

        min-height: 720px;

        padding: 210px 0 170px;

    }

}



.dic2-home-hero__bg {

    position: absolute;

    top: -20%;

    left: 0;

    width: 100%;

    height: 140%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.85;

    filter: saturate(1.15);

    z-index: 1;

    will-change: transform;

    transform: translate3d(0, 0, 0) scale(1.05);

    pointer-events: none;

}



.dic2-home-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(90deg, rgba(0, 24, 63, 0.5) 0%, transparent 60%),

        linear-gradient(to top, rgba(0, 24, 63, 0.96) 0%, rgba(6, 21, 45, 0.75) 35%, rgba(15, 38, 75, 0.35) 65%, rgba(255, 255, 255, 0.35) 100%);

}



.dic2-home-hero__container {

    position: relative;

    z-index: 3;

    width: 100%;

}



.dic2-home-hero__grid {

    display: grid;

    grid-template-columns: 1.35fr 0.85fr;

    gap: 60px;

    align-items: flex-end;

}



.dic2-home-hero__title {

    font-family: var(--font-heading);

    font-size: 72px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1.15;

    margin-bottom: 22px;

    letter-spacing: -0.5px;

}



.dic2-home-hero__desc {

    font-size: 18px;

    color: rgba(255, 255, 255, 0.88);

    line-height: 1.65;

    max-width: 600px;

    margin-bottom: 35px;

}



.dic2-home-hero__actions {

    display: flex;

    gap: 16px;

    align-items: center;

    flex-wrap: wrap;

}



.dic2-home-hero__actions .dic2-btn-white {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background-color: #ffffff;

    color: #06152d;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.6px;

    padding: 14px 28px;

    border-radius: 4px;

    text-transform: uppercase;

    transition: var(--transition);

}



.dic2-home-hero__actions .dic2-btn-white:hover {

    background-color: #008853;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}



.dic2-btn-arrow {

    font-size: 15px;

    line-height: 1;

    transition: transform 0.25s ease;

}



.dic2-btn-white:hover .dic2-btn-arrow {

    transform: translateX(4px);

}



.dic2-home-hero__actions .dic2-btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: transparent;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.6px;

    padding: 13px 26px;

    border: 1.5px solid rgba(255, 255, 255, 0.45);

    border-radius: 4px;

    text-transform: uppercase;

    transition: var(--transition);

}



.dic2-home-hero__actions .dic2-btn-outline:hover {

    border-color: #ffffff;

    background-color: rgba(255, 255, 255, 0.12);

    transform: translateY(-2px);

}



.dic2-home-hero__note {

    font-size: 16px;

    color: rgba(255, 255, 255, 0.8);

    line-height: 1.7;

    max-width: 425px;

    margin-left: auto;

    margin-bottom: 12px;

}



/* SECTION 2: STATS FLOATING CARD */

.dic2-home-stats-section {

    position: relative;

    z-index: 10;

    margin-top: -65px;

    margin-bottom: 75px;

}



.dic2-home-stats-card {

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);

    border: 1px solid #edf2f7;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    padding: 36px 20px;

}



.dic2-home-stat-col {

    padding: 0 28px;

    border-right: 1px solid #edf2f7;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.dic2-home-stat-col:last-child {

    border-right: none;

}



.dic2-home-stat-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}



.dic2-home-stat-value {

    font-family: var(--font-heading);

    font-size: 44px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.05;

    margin-bottom: 8px;

    letter-spacing: -0.5px;

}



.dic2-home-stat-value--wrap {

    font-size: 36px;

    line-height: 1.05;

}



.dic2-home-stat-label {

    font-family: var(--font-heading);

    font-size: 16px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.35;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 6px;

}



.dic2-home-stat-sub {

    font-size: 14px;

    color: #64748b;

    line-height: 1.45;

}



/* SECTION 3: ABOUT DIC NO.2 */

.dic2-home-about-section {

    padding: 10px 0 95px;

}



.dic2-home-about-grid {

    display: grid;

    grid-template-columns: 1fr 1.08fr;

    gap: 75px;

    align-items: center;

}



.dic2-home-about__img-wrap {

    border-radius: 0;

    overflow: hidden;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);

    border: 1px solid #f1f5f9;

}



.dic2-home-about__img {

    width: 100%;

    height: 460px;

    object-fit: cover;

    display: block;

}



.dic2-home-tag {

    display: inline-block;

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #64748b;

    margin-bottom: 14px;

}



.dic2-home-about__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.22;

    margin-bottom: 24px;

    letter-spacing: -0.5px;

}



.dic2-home-about__desc {

    font-size: 16px;

    color: #475569;

    line-height: 1.7;

    margin-bottom: 16px;

}



.dic2-home-about__desc strong {

    color: #0a1e3f;

    font-weight: 700;

}



.dic2-home-about-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: var(--font-heading);

    font-size: 13.5px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #06152d;

    text-transform: uppercase;

    margin-top: 16px;

    padding-bottom: 5px;

    border-bottom: 1px solid #06152d;

    text-decoration: none;

    transition: all 0.25s ease;

}



.dic2-home-about-link:hover {

    color: #008853;

    border-color: #008853;

}



.dic2-arrow-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    vertical-align: middle;

}



.dic2-home-about-link .dic2-arrow-icon,

.dic2-home-about-link .dic2-arrow {

    display: inline-flex;

    align-items: center;

    transition: transform 0.25s ease;

}



.dic2-home-about-link:hover .dic2-arrow-icon,

.dic2-home-about-link:hover .dic2-arrow {

    transform: translateX(4px);

}



/* SECTION 4: FEATURED PROJECTS */

.dic2-home-projects-section {

    padding: 90px 0 100px;

    background-color: #f8fafc;

}



.dic2-home-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 50px;

    gap: 30px;

}



.dic2-home-section-title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.15;

    letter-spacing: -0.5px;

    margin-top: 8px;

    margin-bottom: 0;

}



.dic2-green-dot {

    color: #008853;

    font-weight: 800;

}



.dic2-home-section-desc {

    font-size: 16px;

    color: #64748b;

    line-height: 1.6;

    max-width: 440px;

    margin: 0 0 10px;

}



.dic2-home-projects-section .dic2-home-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 55px;

}



.dic2-home-projects-section .dic2-home-section-header__left {

    flex-shrink: 0;

}



.dic2-home-projects-section .dic2-home-section-header__right {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 35px;

    flex: 1;

    max-width: 840px;

    padding-bottom: 6px;

}



.dic2-home-proj-all-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.8px;

    color: #06152d;

    text-transform: uppercase;

    text-decoration: none;

    border-bottom: 1px solid #06152d;

    padding-bottom: 4px;

    white-space: nowrap;

    transition: all 0.25s ease;

}



.dic2-home-proj-all-link:hover {

    color: #008853;

    border-color: #008853;

}



.dic2-home-proj-all-link .dic2-arrow-icon,

.dic2-home-proj-all-link .dic2-arrow {

    display: inline-flex;

    align-items: center;

    transition: transform 0.25s ease;

}



.dic2-home-proj-all-link:hover .dic2-arrow-icon,

.dic2-home-proj-all-link:hover .dic2-arrow {

    transform: translateX(4px);

}



/* Big Hero Project Showcase */

.dic2-home-proj-hero {

    position: relative;

    border-radius: 16px;

    overflow: hidden;

    min-height: 560px;

    margin-bottom: 30px;

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);

}



.dic2-home-proj-hero__bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: background-image 0.35s ease;

}



.dic2-home-proj-hero__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(6, 21, 45, 0.05) 0%, rgba(6, 21, 45, 0.3) 30%, rgba(6, 21, 45, 0.8) 60%, rgba(6, 21, 45, 0.95) 85%, rgba(6, 21, 45, 0.98) 100%);

}



.dic2-home-proj-hero__badge {

    position: absolute;

    top: 34px;

    left: 38px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-heading);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #ffffff;

}



.dic2-badge-line {

    display: inline-block;

    width: 22px;

    height: 2px;

    background-color: #008853;

}



.dic2-home-proj-hero__controls {

    position: absolute;

    bottom: 34px;

    left: 38px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

}



.dic2-home-proj-hero__nav {

    width: 36px;

    height: 36px;

    border-radius: 6px;

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(4px);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

}



.dic2-home-proj-hero__nav:hover {

    background: #008853;

    border-color: #008853;

}



.dic2-home-proj-hero__counter {

    font-family: var(--font-heading);

    font-size: 13.5px;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: 0.5px;

    margin-left: 8px;

}



.dic2-home-proj-hero__content-col {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 48%;

    max-width: 580px;

    padding: 45px 55px 45px 25px;

    z-index: 4;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #ffffff;

}



.dic2-home-proj-hero__number {

    font-family: var(--font-heading);

    font-size: 13.5px;

    font-weight: 700;

    color: #008853;

    letter-spacing: 1px;

    margin-bottom: 6px;

}



.dic2-home-proj-hero__title {

    font-family: var(--font-heading);

    font-size: 46px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1.12;

    margin: 0 0 6px 0;

    letter-spacing: -0.5px;

}



.dic2-home-proj-hero__loc {

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.65);

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 22px;

}



.dic2-home-proj-hero__desc {

    font-size: 15px;

    color: rgba(255, 255, 255, 0.85);

    line-height: 1.65;

    margin: 0 0 26px 0;

    max-width: 500px;

}



.dic2-home-proj-hero__divider {

    display: none;

}



.dic2-home-proj-hero__specs-list {

    display: flex;

    flex-direction: column;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    margin-bottom: 28px;

}



.dic2-home-proj-hero__spec-item {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14.5px;

    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}



.dic2-spec-icon {

    width: 17px;

    height: 17px;

    stroke: #008853;

    color: #008853;

    flex-shrink: 0;

}



.dic2-spec-label {

    font-weight: 700;

    color: #ffffff;

}



.dic2-spec-sep {

    color: rgba(255, 255, 255, 0.45);

    margin: 0 4px;

}



.dic2-spec-val {

    color: rgba(255, 255, 255, 0.88);

}



.dic2-home-proj-detail-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.8px;

    color: #ffffff;

    text-transform: uppercase;

    text-decoration: none;

    transition: color 0.25s ease;

    width: fit-content;

}



.dic2-home-proj-detail-link:hover {

    color: #008853;

}



.dic2-home-proj-detail-link .dic2-arrow-icon,

.dic2-home-proj-detail-link .dic2-arrow {

    display: inline-flex;

    align-items: center;

    transition: transform 0.25s ease;

}



.dic2-home-proj-detail-link:hover .dic2-arrow-icon,

.dic2-home-proj-detail-link:hover .dic2-arrow {

    transform: translateX(4px);

}



/* Project Thumbnails 1-Row Slider */

.dic2-home-proj-slider-wrap {

    position: relative;

    margin-top: 36px;

    padding: 0;

    width: 100%;

}



.dic2-home-proj-swiper {

    width: 100%;

    overflow: hidden;

    padding-bottom: 6px;

}



.dic2-home-proj-thumb-card {

    height: auto;

    position: relative;

    cursor: pointer;

    padding-bottom: 16px;

    transition: all 0.25s ease;

    box-sizing: border-box;

    user-select: none;

}



/* Arrow buttons styled exactly as Image 2 (squircle dark background with white arrow) */

.dic2-proj-slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 36px;

    height: 36px;

    border-radius: 6px;

    background: rgba(35, 48, 42, 0.85);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

    transition: all 0.2s ease;

    z-index: 10;

}



.dic2-proj-slider-arrow:hover {

    background: #008853;

    border-color: #008853;

    color: #ffffff;

    transform: translateY(-50%) scale(1.06);

    box-shadow: 0 6px 16px rgba(0, 136, 83, 0.35);

}



.dic2-proj-slider-arrow.swiper-button-disabled {

    opacity: 0.35;

    pointer-events: none;

    cursor: default;

}



.dic2-proj-slider-prev {

    left: -18px;

}



.dic2-proj-slider-next {

    right: -18px;

}



@media (max-width: 1400px) {

    .dic2-proj-slider-prev {

        left: 6px;

    }

    .dic2-proj-slider-next {

        right: 6px;

    }

}



.dic2-home-proj-thumb-card__header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    height: 18px;

}



.dic2-home-proj-thumb-card__num {

    font-family: var(--font-heading);

    font-size: 12.5px;

    font-weight: 700;

    color: #94a3b8;

    transition: color 0.2s ease;

}



.dic2-home-proj-thumb-card__line {

    display: none;

    height: 2px;

    width: 22px;

    background-color: #008853;

    border-radius: 1px;

}



.dic2-home-proj-thumb-card.active .dic2-home-proj-thumb-card__num {

    color: #008853;

    font-weight: 800;

}



.dic2-home-proj-thumb-card.active .dic2-home-proj-thumb-card__line {

    display: inline-block;

}



.dic2-home-proj-thumb-card__img {

    height: 98px;

    width: 100%;

    border-radius: 8px;

    background-size: cover;

    background-position: center;

    border: 1px solid rgba(0, 0, 0, 0.06);

    position: relative;

    overflow: hidden;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

    margin-bottom: 10px;

}



.dic2-home-proj-thumb-card__img::after {

    content: '';

    position: absolute;

    inset: 0;

    background-color: rgba(255, 255, 255, 0.45);

    transition: opacity 0.25s ease;

    pointer-events: none;

}



.dic2-home-proj-thumb-card.active .dic2-home-proj-thumb-card__img::after,

.dic2-home-proj-thumb-card:hover .dic2-home-proj-thumb-card__img::after {

    opacity: 0;

}



.dic2-home-proj-thumb-card:hover .dic2-home-proj-thumb-card__img {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

}



.dic2-home-proj-thumb-card__name {

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    color: #0a1e3f;

    line-height: 1.35;

    margin-bottom: 3px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.dic2-home-proj-thumb-card__loc {

    font-size: 11px;

    font-weight: 600;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}



.dic2-home-proj-thumb-card__indicator {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 1px;

    background-color: #e2e8f0;

    display: block;

    transition: all 0.25s ease;

}



.dic2-home-proj-thumb-card:hover .dic2-home-proj-thumb-card__indicator {

    background-color: #cbd5e1;

}



.dic2-home-proj-thumb-card.active .dic2-home-proj-thumb-card__indicator {

    height: 2px;

    background-color: #008853;

}



/* SECTION 5: CAPABILITIES (4 CORE) */

.dic2-home-caps-section {

    padding: 95px 0 100px;

    background-color: #ffffff;

}



.dic2-home-caps-list {

    display: flex;

    flex-direction: column;

    border-top: 1px solid #edf2f7;

}



.dic2-home-cap-row {

    display: grid;

    grid-template-columns: 1.05fr 1.15fr;

    gap: 40px;

    padding: 28px 24px;

    border-bottom: 1px solid #edf2f7;

    background-color: transparent;

    cursor: pointer;

    transition: background-color 0.25s ease, border-color 0.25s ease;

}



.dic2-home-cap-row:hover {

    background-color: #fafbfc;

}



.dic2-home-cap-row.active {

    background-color: #f5f7f9;

}



.dic2-home-cap-row__left {

    display: flex;

    align-items: flex-start;

    gap: 20px;

}



.dic2-home-cap-row__num {

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 600;

    color: #94a3b8;

    min-width: 24px;

    padding-top: 4px;

}



.dic2-home-cap-row__icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #3fa178;

    flex-shrink: 0;

    padding-top: 2px;

}



.dic2-home-cap-row__icon svg {

    stroke: #3fa178;

}



.dic2-home-cap-row__title {

    font-family: var(--font-heading);

    font-size: 26px;

    font-weight: 800;

    color: #0a1e3f;

    margin: 0;

    line-height: 1.35;

    transition: color 0.3s ease;

}



.dic2-home-cap-row:hover .dic2-home-cap-row__title {

    color: #00183f;

}



.dic2-home-cap-row.active .dic2-home-cap-row__title {

    color: #00183f;

}



.dic2-home-cap-row__right {

    display: flex;

    flex-direction: column;

}



.dic2-home-cap-row__right-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

}



.dic2-home-cap-row__desc {

    font-size: 15px;

    color: #64748b;

    margin: 0;

    line-height: 1.6;

    flex: 1;

}



.dic2-home-cap-row__arrow {

    font-size: 19px;

    color: #0a1e3f;

    transition: transform 0.3s ease, color 0.3s ease;

    text-decoration: none;

    display: inline-block;

    flex-shrink: 0;

    padding-top: 1px;

    margin-left: auto;

}



.dic2-home-cap-row:hover .dic2-home-cap-row__arrow,

.dic2-home-cap-row.active .dic2-home-cap-row__arrow {

    color: #0a1e3f;

    transform: translateX(4px);

}



/* Accordion expand with CSS Grid 0fr -> 1fr for butter-smooth animation */

.dic2-home-cap-row__expand {

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);

}



.dic2-home-cap-row.active .dic2-home-cap-row__expand {

    grid-template-rows: 1fr;

}



.dic2-home-cap-row__expand-inner {

    overflow: hidden;

}



.dic2-home-cap-row__preview {

    padding-top: 24px;

}



.dic2-home-cap-row__preview img {

    width: 100%;

    max-width: 480px;

    height: 250px;

    object-fit: cover;

    border-radius: 4px;

    display: block;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    opacity: 0;

    transform: translateY(26px);

    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);

}



.dic2-home-cap-row.active .dic2-home-cap-row__preview img {

    opacity: 1;

    transform: translateY(0);

}



/* SECTION 6: CORE VALUES (DEEP NAVY) */

.dic2-home-values-section {

    background-color: #00183f;

    padding: 95px 0 105px;

    color: #ffffff;

}



.dic2-home-values__header {

    margin-bottom: 55px;

}



.dic2-home-values__title {

    color: #ffffff;

}



.dic2-home-values__desc {

    color: rgba(255, 255, 255, 0.75);

    max-width: 585px;

}



.dic2-home-values__grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    border: none;

    border-radius: 0;

    overflow: visible;

}



.dic2-home-val-card {

    padding: 34px 28px;

    border-right: 1px solid rgba(255, 255, 255, 0.12);

    background: transparent;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    transition: background 0.25s ease;

}



.dic2-home-val-card:last-child {

    border-right: none;

}



.dic2-home-val-card:hover {

    background: #334666;

}



.dic2-home-val-num {

    display: block;

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 16px;

}



.dic2-home-val-icon {

    display: inline-flex;

    align-items: center;

    color: #008853;

    margin-bottom: 20px;

}



.dic2-home-val-title {

    font-family: var(--font-heading);

    font-size: 22px;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 14px;

    line-height: 1.3;

}



.dic2-home-val-desc {

    font-size: 15px;

    color: rgba(255, 255, 255, 0.75);

    line-height: 1.65;

    margin: 0;

}



/* SECTION 7: ESG OVERVIEW */

.dic2-home-esg-section {

    padding: 95px 0 100px;

    background-color: #ffffff;

}



.dic2-home-esg-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;

    margin-bottom: 55px;

}



.dic2-home-esg__title {

    font-family: var(--font-heading);

    font-size: 50px;

    font-weight: 800;

    color: #0a1e3f;

    line-height: 1.2;

    letter-spacing: -0.5px;

    margin-top: 10px;

    margin-bottom: 0;

}



.dic2-home-esg__img-wrap {

    border-radius: 0;

    overflow: hidden;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);

}



.dic2-home-esg__img {

    width: 100%;

    height: 340px;

    object-fit: cover;

    display: block;

}



.dic2-home-esg-pillars {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin-top: 45px;

    margin-bottom: 0;

}



.dic2-home-esg-col {

    background: transparent;

    padding: 0 45px;

    border-radius: 0;

    border: none;

    border-right: 1px solid #edf2f7;

    box-shadow: none;

}



.dic2-home-esg-col:first-child {

    padding-left: 0;

}



.dic2-home-esg-col:last-child {

    border-right: 1px solid #edf2f7;

}



.dic2-home-esg-letter {

    display: block;

    font-family: var(--font-heading);

    font-size: 52px;

    font-weight: 900;

    color: #008853;

    line-height: 1;

    margin-bottom: 20px;

}



.dic2-home-esg-col-title {

    font-family: var(--font-heading);

    font-size: 19px;

    font-weight: 800;

    color: #0a1e3f;

    letter-spacing: 0.5px;

    margin-bottom: 5px;

    text-transform: uppercase;

}



.dic2-home-esg-col-sub {

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 600;

    color: #94a3b8;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    margin-bottom: 18px;

}



.dic2-home-esg-col-desc {

    font-family: var(--font-body);

    font-size: 15px;

    color: #475569;

    line-height: 1.65;

    margin: 0;

}



.dic2-home-esg-action {

    margin-top: 48px;

    text-align: left;

}



.dic2-home-esg-action .dic2-home-about-link {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.2px;

    color: #0a1e3f;

    border-bottom: 1px solid #0a1e3f;

    padding-bottom: 4px;

    margin-top: 0;

}



.dic2-home-esg-action .dic2-home-about-link:hover {

    color: #008853;

    border-color: #008853;

}



/* SECTION 8: NEWS & UPDATES */

.dic2-home-news-section {

    padding: 95px 0 100px;

    background-color: #f8fafc;

}



.dic2-home-news-section .dic2-home-section-title,

.dic2-home-news__title {

    font-size: 36px;

}



.dic2-home-news-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

    margin-bottom: 0;

}



.dic2-home-news-section .dic2-news-card__excerpt {

    display: none;

}



.dic2-home-news-action {

    margin-top: 48px;

    text-align: left;

}



.dic2-home-news-action .dic2-home-about-link {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.2px;

    color: #0a1e3f;

    border-bottom: 1px solid #0a1e3f;

    padding-bottom: 4px;

    margin-top: 0;

}



.dic2-home-news-action .dic2-home-about-link:hover {

    color: #008853;

    border-color: #008853;

}



/* RESPONSIVE STYLES */

@media (max-width: 1024px) {

    .dic2-home-hero__grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }



    .dic2-home-hero__note {

        margin-left: 0;

    }



    .dic2-home-stats-card {

        grid-template-columns: repeat(2, 1fr);

        gap: 24px;

        padding: 28px 24px;

    }



    .dic2-home-stat-col {

        border-right: none;

        padding: 0;

    }



    .dic2-home-stat-col:nth-child(1),

    .dic2-home-stat-col:nth-child(2) {

        border-bottom: 1px solid #f1f5f9;

        padding-bottom: 20px;

    }



    .dic2-home-about-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .dic2-home-projects-section {

        padding: 60px 0 70px;

    }



    .dic2-home-projects-section .dic2-home-section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        margin-bottom: 35px;

    }



    .dic2-home-projects-section .dic2-home-section-header__right {

        width: 100%;

        max-width: 100%;

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

        padding-bottom: 0;

    }



    .dic2-home-projects-section .dic2-home-section-desc {

        max-width: 100%;

    }



    .dic2-home-proj-hero {

        min-height: auto;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

    }



    .dic2-home-proj-hero__overlay {

        background: linear-gradient(180deg, rgba(6, 21, 45, 0.35) 0%, rgba(6, 21, 45, 0.85) 50%, rgba(6, 21, 45, 0.98) 100%);

    }



    .dic2-home-proj-hero__content-col {

        position: relative;

        width: 100%;

        max-width: 100%;

        padding: 80px 28px 75px 28px;

    }



    .dic2-home-proj-hero__controls {

        bottom: 22px;

        left: 28px;

    }







    .dic2-home-cap-row {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .dic2-home-cap-row__preview img {

        max-width: 100%;

        height: 220px;

    }



    .dic2-home-values__grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .dic2-home-val-card:nth-child(3) {

        border-right: none;

    }



    .dic2-home-val-card:nth-child(n+4) {

        border-top: 1px solid rgba(255, 255, 255, 0.12);

    }



    .dic2-home-esg-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }



    .dic2-home-news-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .dic2-home-hero {

        padding: 60px 0 100px;

    }



    .dic2-home-hero__title {

        font-size: 34px;

    }



    .dic2-home-stats-section {

        margin-top: -40px;

        margin-bottom: 50px;

    }



    .dic2-home-stats-card {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .dic2-home-stat-col {

        border-bottom: 1px solid #f1f5f9;

        padding-bottom: 18px;

    }



    .dic2-home-stat-col:last-child {

        border-bottom: none;

        padding-bottom: 0;

    }



    /* SECTION 4: PROJECTS SECTION MOBILE OPTIMIZATIONS (IMAGE 1 & 2 FIX) */

    .dic2-home-projects-section {

        padding: 42px 0 50px;

    }



    .dic2-home-section-header,

    .dic2-home-projects-section .dic2-home-section-header {

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 12px !important;

        margin-bottom: 24px !important;

    }



    .dic2-home-projects-section .dic2-home-section-header__left {

        width: 100% !important;

        max-width: 100% !important;

        text-align: left !important;

    }



    .dic2-home-projects-section .dic2-home-tag {

        margin-bottom: 6px !important;

        font-size: 11px !important;

        letter-spacing: 1.2px !important;

    }



    .dic2-home-section-title,

    .dic2-home-projects-section .dic2-home-section-title {

        font-size: 26px !important;

        line-height: 1.25 !important;

        letter-spacing: -0.3px !important;

        margin: 0 !important;

        text-align: left !important;

    }



    .dic2-home-projects-section .dic2-home-section-title br {

        display: none !important;

    }



    .dic2-home-projects-section .dic2-home-section-header__right {

        width: 100% !important;

        max-width: 100% !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 12px !important;

        padding-bottom: 0 !important;

        text-align: left !important;

    }



    .dic2-home-projects-section .dic2-home-section-desc {

        font-size: 14px !important;

        line-height: 1.6 !important;

        color: #64748b !important;

        margin: 0 !important;

        max-width: 100% !important;

        text-align: left !important;

    }



    .dic2-home-projects-section .dic2-home-proj-all-link {

        align-self: flex-start !important;

        font-size: 12.5px !important;

        padding-bottom: 3px !important;

        margin-top: 2px !important;

    }



    .dic2-home-about__title,

    .dic2-home-values__title,

    .dic2-home-esg__title {

        font-size: 26px;

    }



    .dic2-home-proj-hero {

        padding: 0 !important;

        min-height: auto !important;

        border-radius: 14px !important;

        margin-bottom: 20px !important;

        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1) !important;

    }



    .dic2-home-proj-hero__overlay {

        background: linear-gradient(180deg, rgba(6, 21, 45, 0.35) 0%, rgba(6, 21, 45, 0.85) 30%, rgba(6, 21, 45, 0.98) 100%) !important;

    }



    .dic2-home-proj-hero__badge {

        top: 16px !important;

        left: 18px !important;

        font-size: 11px !important;

        letter-spacing: 1.2px !important;

    }



    .dic2-badge-line {

        width: 16px !important;

    }



    .dic2-home-proj-hero__content-col {

        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        padding: 54px 18px 65px 18px !important;

        box-sizing: border-box !important;

    }



    .dic2-home-proj-hero__number {

        font-size: 11.5px !important;

        letter-spacing: 1px !important;

        margin-bottom: 4px !important;

    }



    .dic2-home-proj-hero__title {

        font-size: 21px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        letter-spacing: -0.2px !important;

        margin: 0 0 6px 0 !important;

    }



    .dic2-home-proj-hero__loc {

        font-size: 11.5px !important;

        letter-spacing: 1.2px !important;

        margin-bottom: 12px !important;

        color: rgba(255, 255, 255, 0.7) !important;

    }



    .dic2-home-proj-hero__desc {

        font-size: 13.5px !important;

        line-height: 1.55 !important;

        color: rgba(255, 255, 255, 0.85) !important;

        margin: 0 0 16px 0 !important;

    }



    .dic2-home-proj-hero__specs-list {

        margin-bottom: 18px !important;

        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;

    }



    .dic2-home-proj-hero__spec-item {

        padding: 9px 0 !important;

        font-size: 12.5px !important;

        gap: 8px !important;

        align-items: flex-start !important;

    }



    .dic2-spec-icon {

        width: 15px !important;

        height: 15px !important;

        margin-top: 2px !important;

        flex-shrink: 0 !important;

    }



    .dic2-spec-label {

        font-size: 12px !important;

        font-weight: 700 !important;

        white-space: nowrap !important;

    }



    .dic2-spec-sep {

        margin: 0 2px !important;

        opacity: 0.6 !important;

    }



    .dic2-spec-val {

        font-size: 12.5px !important;

        flex: 1 !important;

        word-break: break-word !important;

    }



    .dic2-home-proj-detail-link {

        font-size: 12px !important;

        letter-spacing: 0.8px !important;

        padding: 8px 14px !important;

        background: rgba(255, 255, 255, 0.08) !important;

        border: 1px solid rgba(255, 255, 255, 0.2) !important;

        border-radius: 6px !important;

    }



    .dic2-home-proj-hero__controls {

        position: absolute !important;

        bottom: 16px !important;

        left: 18px !important;

        z-index: 5 !important;

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

    }



    .dic2-home-proj-hero__nav {

        width: 32px !important;

        height: 32px !important;

        border-radius: 6px !important;

    }



    .dic2-home-proj-hero__nav svg {

        width: 15px !important;

        height: 15px !important;

    }



    .dic2-home-proj-hero__counter {

        font-size: 12px !important;

        margin-left: 6px !important;

    }



    .dic2-home-proj-slider-wrap {

        margin-top: 16px !important;

    }



    .dic2-proj-slider-arrow {

        display: none !important;

    }



    .dic2-home-proj-thumb-card {

        padding-bottom: 10px !important;

    }



    .dic2-home-proj-thumb-card__num {

        font-size: 11px !important;

    }



    .dic2-home-proj-thumb-card__name {

        font-size: 12px !important;

        line-height: 1.35 !important;

    }



    .dic2-home-proj-thumb-card__loc {

        font-size: 10px !important;

    }







    .dic2-home-cap-row {

        grid-template-columns: 1fr;

        gap: 14px;

        padding: 22px 0;

    }



    .dic2-home-cap-row__left {

        gap: 14px;

    }



    .dic2-home-cap-row__title {

        font-size: 18px;

    }



    .dic2-home-cap-row__desc {

        font-size: 14px;

    }



    .dic2-home-values__grid {

        grid-template-columns: 1fr;

    }



    .dic2-home-val-card {

        border-right: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    }



    .dic2-home-val-card:last-child {

        border-bottom: none;

    }



    .dic2-home-esg-pillars {

        grid-template-columns: 1fr;

        gap: 25px;

    }



    .dic2-home-esg-col {

        padding: 0 0 25px 0;

        border-right: none;

        border-bottom: 1px solid #edf2f7;

    }



    .dic2-home-esg-col:last-child {

        border-bottom: none;

        padding-bottom: 0;

    }



    .dic2-home-news-grid {

        grid-template-columns: 1fr;

    }

}



/* Straight 0 border-radius on specific homepage sections (About, ESG, News) */

.dic2-home-about__img-wrap,

.dic2-home-about__img,

.dic2-home-esg__img-wrap,

.dic2-home-esg__img,

.dic2-home-news-section .dic2-news-card__thumb-link,

.dic2-home-news-section .dic2-news-card__thumb-wrap,

.dic2-home-news-section .dic2-news-card__img {

    border-radius: 0 !important;

}



/* SECTION 4: HERO PROJECT & THUMBNAILS BORDER-RADIUS */

.dic2-home-proj-hero {

    border-radius: 16px !important;

    overflow: hidden !important;

}



.dic2-home-proj-thumb-card__img {

    border-radius: 8px !important;

    overflow: hidden !important;

}



/* SECTION 5: CAPABILITIES PREVIEW IMAGE BORDER-RADIUS (4px) */

.dic2-home-cap-row__preview img {

    border-radius: 4px !important;

    overflow: hidden !important;

}





/* ==========================================================================

   MEGA MENU STYLES (MATCHING SCREENSHOT)

   ========================================================================== */

.dic2-nav__menu > li.has-mega-menu,

.dic2-nav__item.has-mega-menu {

    position: static !important;

}



.dic2-mega-menu {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    width: 100%;

    background-color: #ffffff;

    border-top: 1px solid #edf2f7;

    border-bottom: 1px solid #e2e8f0;

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);

    display: none;

    z-index: 999;

}



/* Invisible bridge preventing cursor gap between nav item and mega menu panel */

.dic2-mega-menu::before {

    content: '';

    position: absolute;

    top: -25px;

    left: 0;

    right: 0;

    height: 25px;

    background: transparent;

    pointer-events: auto;

}



.dic2-nav__menu > li.has-mega-menu:hover > .dic2-mega-menu,

.dic2-nav__item.has-mega-menu:hover > .dic2-mega-menu,

.dic2-nav__menu > li.has-mega-menu.is-active > .dic2-mega-menu,

.dic2-nav__item.has-mega-menu.is-active > .dic2-mega-menu,

.dic2-nav__menu > li.has-mega-menu.is-open > .dic2-mega-menu,

.dic2-nav__item.has-mega-menu.is-open > .dic2-mega-menu {

    display: block;

}



.dic2-nav__menu > li.has-mega-menu:hover > a,

.dic2-nav__item.has-mega-menu:hover > .dic2-nav__link,

.dic2-nav__menu > li.has-mega-menu.is-open > a,

.dic2-nav__item.has-mega-menu.is-open > .dic2-nav__link {

    color: var(--esg);

}



.dic2-nav__menu > li.has-mega-menu:hover > a::after,

.dic2-nav__item.has-mega-menu:hover > .dic2-nav__link::after,

.dic2-nav__menu > li.has-mega-menu.is-open > a::after,

.dic2-nav__item.has-mega-menu.is-open > .dic2-nav__link::after {

    transform: scaleX(1);

}



/* Khi đang rê chuột vào menu khác, tạm thời ẩn gạch chân của trang hiện tại để không bị 2 vạch xanh cùng lúc */

.dic2-nav__menu:hover > li.current-menu-item:not(:hover) > a::after,

.dic2-nav__menu:hover > li.current_page_item:not(:hover) > a::after,

.dic2-nav__menu:hover > li.current-menu-ancestor:not(:hover) > a::after,

.dic2-nav__menu:hover > li.current-menu-item:not(:hover) .dic2-nav__link::after,

.dic2-nav__menu:hover > li.current_page_item:not(:hover) .dic2-nav__link::after {

    transform: scaleX(0);

}



.dic2-nav__menu:hover > li.current-menu-item:not(:hover) > a,

.dic2-nav__menu:hover > li.current-menu-item:not(:hover) .dic2-nav__link {

    color: inherit;

}



.dic2-mega-menu__container {

    display: grid;

    grid-template-columns: 340px 1fr;

    gap: 70px;

    padding-top: 42px;

    padding-bottom: 48px;

    align-items: start;

}



/* Left Featured Column */

.dic2-mega-menu__featured {

    display: flex;

    flex-direction: column;

    padding-right: 20px;

}



.dic2-mega-menu__tag {

    font-family: var(--font-heading);

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #94a3b8;

    text-transform: uppercase;

    margin-bottom: 14px;

    display: block;

}



.dic2-mega-menu__title-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-heading);

    font-size: 30px;

    font-weight: 700;

    color: #00183f;

    line-height: 1.25;

    text-decoration: none;

    transition: color 0.2s ease, transform 0.2s ease;

}



.dic2-mega-menu__title-link:hover {

    color: #008853;

}



.dic2-mega-menu__arrow {

    font-size: 20px;

    font-weight: 700;

    transition: transform 0.25s ease;

    display: inline-block;

}



.dic2-mega-menu__title-link:hover .dic2-mega-menu__arrow {

    transform: translate(3px, -3px);

}



/* Right Navigation Columns */

.dic2-mega-menu__nav-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(220px, 320px));

    gap: 65px;

}



.dic2-mega-menu__nav-grid--single {

    grid-template-columns: minmax(240px, 360px);

}



.dic2-mega-menu__col {

    display: flex;

    flex-direction: column;

}



.dic2-mega-menu__col-title {

    font-family: var(--font-heading);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #008853;

    text-transform: uppercase;

    margin-bottom: 22px;

    padding-bottom: 0;

}



.dic2-mega-menu__list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 13px;

}



.dic2-mega-menu__list li {

    margin: 0;

    padding: 0;

}



.dic2-mega-menu__link {

    font-family: var(--font-sans);

    font-size: 14.5px;

    color: #475569;

    font-weight: 500;

    text-decoration: none;

    display: inline-block;

    padding: 2px 0;

    transition: color 0.2s ease, transform 0.2s ease;

}



.dic2-mega-menu__link:hover {

    color: #008853;

    transform: translateX(4px);

}



/* Standard Sub-menu Dropdown (for items like QUAN HỆ CỔ ĐÔNG) */

.dic2-nav__menu > li.menu-item-has-children {

    position: relative;

}



.dic2-nav__menu > li.has-mega-menu > a::before {

    display: none !important;

}



.dic2-nav__menu > li.has-mega-menu > .sub-menu {

    display: none !important;

}



.dic2-nav__menu > li.menu-item-has-children > a::before {

    content: '';

    display: inline-block;

    width: 6px;

    height: 6px;

    border-right: 1.5px solid currentColor;

    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    margin-left: 6px;

    margin-top: -3px;

    transition: transform 0.2s ease;

    order: 2;

}



.dic2-nav__menu > li.menu-item-has-children:hover > a::before {

    transform: rotate(-135deg);

    margin-top: 3px;

}



.dic2-nav__menu .sub-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 330px;

    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

    border: 1px solid #edf2f7;

    padding: 8px 0;

    margin: 0;

    list-style: none;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px);

    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;

    z-index: 1000;

}



/* Invisible bridge to prevent hover loss */

.dic2-nav__menu .sub-menu::before {

    content: '';

    position: absolute;

    top: -15px;

    left: 0;

    right: 0;

    height: 15px;

    background: transparent;

}



.dic2-nav__menu > li.menu-item-has-children:hover > .sub-menu,

.dic2-nav__menu > li.menu-item-has-children.is-open > .sub-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}



.dic2-nav__menu .sub-menu li {

    list-style: none;

    margin: 0;

    padding: 0;

    width: 100%;

    height: auto !important;

    display: block !important;

}



.dic2-nav__menu .sub-menu li a {

    display: block !important;

    height: auto !important;

    padding: 10px 20px !important;

    font-size: 13.5px;

    font-weight: 500;

    line-height: 1.45;

    color: #1e293b !important;

    text-transform: none !important;

    letter-spacing: normal !important;

    font-family: var(--font-body);

    border-bottom: 1px solid #f8fafc;

    transition: all 0.2s ease;

}



.dic2-nav__menu .sub-menu li:last-child a {

    border-bottom: none;

}



.dic2-nav__menu .sub-menu li a:hover {

    color: #008853;

    background-color: #f1f9f5;

    padding-left: 25px;

}



.dic2-nav__menu .sub-menu li a::after {

    display: none !important;

}



/* Mobile sub-menu in drawer */

.dic2-mobile-sub {

    list-style: none;

    margin: 8px 0 0 15px;

    padding: 0 0 0 12px;

    border-left: 2px solid #e2e8f0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.dic2-mobile-sub a {

    font-size: 14px;

    color: #64748b;

    text-decoration: none;

    display: block;

    padding: 4px 0;

}



.dic2-mobile-sub a:hover {

    color: #008853;

}



/* Global scroll margin for smooth anchor jump */

html {

    scroll-behavior: smooth;

}



[id] {

    scroll-margin-top: calc(var(--header-height, 69px) + var(--adminbar-height, 0px));

}





/* ==========================================================================

   UNIFIED INNER PAGE HERO BANNERS & PARALLAX STYLES

   Applies across: About, Capabilities, Projects, ESG, Shareholders, Contact, News & Archive

   ========================================================================== */



/* 1. Base Container & Overflow */

.dic2-about-hero,

.dic2-cap-hero,

.dic2-projects-hero,

.dic2-esg-hero,

.dic2-sh-hero,

.dic2-contact-hero,

.dic2-hero-banner,

.dic2-project-detail-hero {

    position: relative !important;

    overflow: hidden !important;

    background-color: #06152d !important;

    color: #ffffff !important;

    padding: 135px 0 130px;

    display: flex;

    align-items: center;

}



/* 2. Parallax Background Layer (Extra height to allow smooth vertical translation without gap) */

.dic2-about-hero__bg,

.dic2-cap-hero__bg,

.dic2-projects-hero__bg,

.dic2-esg-hero__bg,

.dic2-sh-hero__bg,

.dic2-contact-hero__bg,

.dic2-hero-banner__bg,

.dic2-project-detail-hero__bg {

    position: absolute !important;

    top: -20% !important;

    left: 0 !important;

    width: 100% !important;

    height: 140% !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    opacity: 0.55 !important;

    filter: saturate(1.1) brightness(0.95);

    z-index: 1 !important;

    will-change: transform;

    transform: translate3d(0, 0, 0);

    pointer-events: none !important;

}



/* 3. Gradient Overlay: Xanh đậm ở đáy nhạt dần lên trên */

.dic2-about-hero__overlay,

.dic2-cap-hero__overlay,

.dic2-projects-hero__overlay,

.dic2-esg-hero__overlay,

.dic2-sh-hero__overlay,

.dic2-contact-hero__overlay,

.dic2-hero-banner__overlay,

.dic2-project-detail-hero__overlay {

    position: absolute !important;

    inset: 0 !important;

    background: linear-gradient(to top, rgba(0, 24, 63, 0.96) 0%, rgba(6, 21, 45, 0.82) 40%, rgba(10, 30, 63, 0.55) 75%, rgba(15, 38, 75, 0.35) 100%) !important;

    z-index: 2 !important;

    pointer-events: none !important;

}



/* 4. Foreground Content Positioning */

.dic2-about-hero__container,

.dic2-cap-hero__container,

.dic2-projects-hero__container,

.dic2-esg-hero__container,

.dic2-sh-hero__container,

.dic2-contact-hero__container,

.dic2-hero-banner__content,

.dic2-project-detail-hero__container {

    position: relative !important;

    z-index: 3 !important;

    width: 100%;

}



/* 5. Unified Typography Across All Banners */

/* Sub-heading / Tag */

.dic2-about-hero__tag,

.dic2-cap-hero__tag,

.dic2-projects-hero__tag,

.dic2-esg-hero__tag,

.dic2-sh-hero__tag,

.dic2-contact-hero__tag,

.dic2-hero-banner__tag,

.dic2-project-detail-hero__cat {

    font-family: var(--font-heading) !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    color: rgba(255, 255, 255, 0.78) !important;

    margin-bottom: 16px !important;

    display: inline-block !important;

}



/* Main Heading */

.dic2-about-hero__title,

.dic2-cap-hero__title,

.dic2-projects-hero__title,

.dic2-esg-hero__title,

.dic2-contact-hero__title,

.dic2-hero-banner__title,

.dic2-project-detail-hero__title {

    font-family: var(--font-heading) !important;

    font-size: 52px !important;

    font-weight: 800 !important;

    line-height: 1.15 !important;

    letter-spacing: -0.5px !important;

    color: #ffffff !important;

    margin: 0 0 20px 0 !important;

}



/* Description Paragraph */

.dic2-about-hero__desc,

.dic2-cap-hero__desc,

.dic2-projects-hero__desc,

.dic2-esg-hero__desc,

.dic2-sh-hero__desc,

.dic2-contact-hero__desc,

.dic2-hero-banner__desc {

    font-family: var(--font-sans) !important;

    font-size: 18px !important;

    line-height: 1.65 !important;

    color: rgba(255, 255, 255, 0.88) !important;

    max-width: 600px !important;

    margin: 0 !important;

}



/* Right Column / Note */

.dic2-about-hero__right-desc,

.dic2-cap-hero__right-desc,

.dic2-projects-hero__note,

.dic2-sh-hero__right-text,

.dic2-contact-hero__note {

    font-family: var(--font-sans) !important;

    font-size: 16px !important;

    line-height: 1.65 !important;

    color: rgba(255, 255, 255, 0.75) !important;

}



/* 6. Screen >= 1400px: Generous Panoramic Height & Proportions (Aligned to bottom 100px) */

@media (min-width: 1400px) {

    .dic2-about-hero,

    .dic2-cap-hero,

    .dic2-projects-hero,

    .dic2-esg-hero,

    .dic2-sh-hero,

    .dic2-contact-hero,

    .dic2-hero-banner,

    .dic2-project-detail-hero {

        min-height: 540px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-end !important;

        align-items: stretch !important;

        padding-top: 140px !important;

        padding-bottom: 100px !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

    }



    .dic2-about-hero__title,

    .dic2-cap-hero__title,

    .dic2-projects-hero__title,

    .dic2-esg-hero__title,

    .dic2-contact-hero__title,

    .dic2-hero-banner__title,

    .dic2-project-detail-hero__title {

        font-size: 64px !important;

    }



    .dic2-sh-hero__title {

        font-size: 40px !important;

        white-space: nowrap !important;

    }

}



/* Mobile Responsiveness for all banners */

@media (max-width: 768px) {

    .dic2-about-hero,

    .dic2-cap-hero,

    .dic2-projects-hero,

    .dic2-esg-hero,

    .dic2-sh-hero,

    .dic2-contact-hero,

    .dic2-hero-banner {

        padding: 85px 0 85px !important;

        min-height: auto !important;

    }



    .dic2-about-hero__title,

    .dic2-cap-hero__title,

    .dic2-projects-hero__title,

    .dic2-esg-hero__title,

    .dic2-contact-hero__title,

    .dic2-hero-banner__title,

    .dic2-project-detail-hero__title {

        font-size: 34px !important;

    }



    .dic2-sh-hero__title {

        font-size: 26px !important;

        white-space: normal !important;

    }

}

/* Hide any legacy crawled list_same or related post blocks */

.list_same,

.same_title,

.same_article {

    display: none !important;

}



/* Single Post Hero Banner */

.dic2-hero-banner--single {

    padding: 125px 0 85px 0 !important;

}



.dic2-hero-banner--single .dic2-hero-banner__content {

    max-width: 980px;

}



.dic2-hero-banner--single .dic2-breadcrumb {

    margin-bottom: 24px;

    gap: 8px;

    color: rgba(255, 255, 255, 0.7);

}



.dic2-hero-banner--single .dic2-breadcrumb a {

    color: rgba(255, 255, 255, 0.75);

}



.dic2-hero-banner--single .dic2-breadcrumb a:hover {

    color: #ffffff;

}



.dic2-hero-banner--single .dic2-breadcrumb__sep {

    color: rgba(255, 255, 255, 0.4);

}



.dic2-hero-banner--single .dic2-breadcrumb__current {

    color: #ffffff;

    max-width: 440px;

}



.dic2-hero-banner--single .dic2-hero-banner__tag {

    background-color: #008853;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    padding: 5px 14px;

    border-radius: 4px;

    margin-bottom: 18px;

    display: inline-block;

}



.dic2-hero-banner--single .dic2-hero-banner__title {

    font-family: var(--font-heading);

    font-size: 38px;

    font-weight: 800;

    line-height: 1.28;

    letter-spacing: -0.5px;

    color: #ffffff;

    margin-bottom: 0;

}



@media (min-width: 1400px) {

    .dic2-hero-banner--single {

        min-height: 440px !important;

        padding-top: 145px !important;

        padding-bottom: 80px !important;

    }



    .dic2-hero-banner--single .dic2-hero-banner__title {

        font-size: 44px;

    }

}



@media (max-width: 768px) {

    .dic2-hero-banner--single {

        padding: 75px 0 55px 0 !important;

    }



    .dic2-hero-banner--single .dic2-hero-banner__title {

        font-size: 24px;

        line-height: 1.35;

    }



    .dic2-hero-banner--single .dic2-breadcrumb__current {

        max-width: 180px;

    }

}