/* =============================================================================
   VNCPC Layout — Homepage sections + Page components
   File: vncpc-layout.css
   Covers: hero, stats bar, service cards, project cards, news cards, partners,
           about page, contact form, CTA band
   ============================================================================= */

/* =============================================================================
   1. HERO SECTION — Trang chủ
   ============================================================================= */

.vncpc-hero {
    background: linear-gradient(135deg, var(--vncpc-dark-green) 0%, var(--vncpc-green) 55%, var(--vncpc-accent) 100%);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

/* Decorative blobs */
.vncpc-hero::before,
.vncpc-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.vncpc-hero::before {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -100px;
}

.vncpc-hero::after {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -80px;
}

/* Hero content */
.vncpc-hero-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.vncpc-hero-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: var(--vncpc-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--vncpc-radius-full);
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.vncpc-hero-content h1,
.vncpc-hero-content .av-special-heading-tag {
    color: var(--vncpc-white) !important;
    font-size: clamp(32px, 4.5vw, 54px);
    line-height: 1.12;
    margin-bottom: 20px;
}

.vncpc-hero-content h1 em,
.vncpc-hero-content .av-special-heading-tag em {
    font-style: normal;
    color: var(--vncpc-accent);
}

.vncpc-hero-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 32px;
}

.vncpc-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* =============================================================================
   2. STATS BAR
   ============================================================================= */

.vncpc-stats-band {
    background: var(--vncpc-dark-green);
    padding: 40px 0;
}

.vncpc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--vncpc-radius);
    overflow: hidden;
}

.vncpc-stat-card {
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
    padding: 28px 20px;
    transition: background 0.22s ease;
}

.vncpc-stat-card:hover {
    background: rgba(255, 255, 255, 0.10);
}

.vncpc-stat-card strong {
    display: block;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    color: var(--vncpc-accent);
    line-height: 1;
    margin-bottom: 6px;
}

.vncpc-stat-card span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* =============================================================================
   3. SERVICE CARDS
   ============================================================================= */

.vncpc-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vncpc-gap);
}

.vncpc-service-card {
    background: var(--vncpc-white);
    border-radius: var(--vncpc-radius);
    padding: var(--vncpc-card-pad);
    box-shadow: var(--vncpc-shadow-sm);
    border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.vncpc-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vncpc-shadow-md);
    border-color: var(--vncpc-border);
}

/* Top accent line */
.vncpc-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--vncpc-green), var(--vncpc-accent));
    border-radius: 0 0 var(--vncpc-radius-full) var(--vncpc-radius-full);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.vncpc-service-card:hover::before {
    opacity: 1;
}

/* Icon */
.vncpc-service-icon {
    width: 56px;
    height: 56px;
    background: var(--vncpc-light-green);
    border-radius: var(--vncpc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.22s ease;
}

.vncpc-service-card:hover .vncpc-service-icon {
    background: var(--vncpc-green);
}

.vncpc-service-icon svg,
.vncpc-service-icon img {
    width: 28px;
    height: 28px;
    fill: var(--vncpc-green);
    color: var(--vncpc-green);
    transition: fill 0.22s ease, color 0.22s ease;
}

.vncpc-service-card:hover .vncpc-service-icon svg,
.vncpc-service-card:hover .vncpc-service-icon img {
    fill: var(--vncpc-white);
    color: var(--vncpc-white);
}

.vncpc-service-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--vncpc-dark-green);
    margin-bottom: 10px;
    line-height: 1.3;
}

.vncpc-service-card p {
    font-size: 14px;
    color: var(--vncpc-muted);
    line-height: 1.65;
    margin-bottom: 18px;
}

/* Read more link */
.vncpc-service-card .vncpc-card-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--vncpc-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.18s ease, color 0.18s ease;
}

.vncpc-service-card .vncpc-card-link:hover {
    color: var(--vncpc-dark-green);
    gap: 9px;
}

/* =============================================================================
   4. PROJECT CARDS
   ============================================================================= */

.vncpc-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vncpc-gap);
}

.vncpc-project-card {
    background: var(--vncpc-white);
    border-radius: var(--vncpc-radius);
    overflow: hidden;
    box-shadow: var(--vncpc-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vncpc-project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--vncpc-shadow-md);
}

.vncpc-project-card .card-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--vncpc-light-green);
}

.vncpc-project-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.vncpc-project-card:hover .card-image img {
    transform: scale(1.05);
}

.vncpc-project-card .card-body {
    padding: 22px 24px;
}

.vncpc-project-card .vncpc-tag {
    display: inline-block;
    background: var(--vncpc-light-green);
    color: var(--vncpc-green);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--vncpc-radius-full);
    margin-bottom: 10px;
}

.vncpc-project-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vncpc-dark-green);
    line-height: 1.3;
    margin-bottom: 8px;
}

.vncpc-project-card p {
    font-size: 13px;
    color: var(--vncpc-muted);
    line-height: 1.6;
}

/* =============================================================================
   5. NEWS CARDS
   ============================================================================= */

.vncpc-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vncpc-gap);
}

.vncpc-news-card {
    background: var(--vncpc-white);
    border-radius: var(--vncpc-radius);
    overflow: hidden;
    box-shadow: var(--vncpc-shadow-sm);
    border: 1px solid var(--vncpc-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.vncpc-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vncpc-shadow-md);
}

.vncpc-news-card .card-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--vncpc-light-green);
    flex-shrink: 0;
}

.vncpc-news-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.vncpc-news-card:hover .card-image img {
    transform: scale(1.04);
}

.vncpc-news-card .card-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vncpc-news-card .vncpc-meta {
    font-size: 12px;
    color: var(--vncpc-muted);
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.vncpc-news-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vncpc-dark-green);
    line-height: 1.35;
    margin-bottom: 8px;
    flex: 1;
}

.vncpc-news-card p {
    font-size: 13px;
    color: var(--vncpc-muted);
    line-height: 1.6;
}

/* =============================================================================
   6. PARTNER LOGOS STRIP
   ============================================================================= */

.vncpc-partners-section {
    padding: 60px 0;
    background: var(--vncpc-white);
    border-top: 1px solid var(--vncpc-border);
    border-bottom: 1px solid var(--vncpc-border);
}

.vncpc-partners-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

.vncpc-partners-grid .av-partner-fake-img,
.vncpc-partners-grid img {
    max-height: 48px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.vncpc-partners-grid img:hover,
.vncpc-partners-grid .av-partner-fake-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* =============================================================================
   7. CTA BAND
   ============================================================================= */

.vncpc-cta-band {
    background: linear-gradient(135deg, var(--vncpc-dark-green) 0%, var(--vncpc-green) 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vncpc-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.vncpc-cta-band h2,
.vncpc-cta-band .av-special-heading-tag {
    color: var(--vncpc-white) !important;
    font-size: clamp(26px, 3.5vw, 38px);
    margin-bottom: 16px;
}

.vncpc-cta-band p {
    color: rgba(255, 255, 255, 0.80);
    font-size: 17px;
    margin-bottom: 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================================
   8. PUBLICATION CARDS
   ============================================================================= */

.vncpc-pub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.vncpc-pub-card {
    background: var(--vncpc-white);
    border-radius: var(--vncpc-radius-sm);
    overflow: hidden;
    box-shadow: var(--vncpc-shadow-sm);
    border: 1px solid var(--vncpc-border);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.vncpc-pub-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vncpc-shadow-md);
}

.vncpc-pub-card .card-cover {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--vncpc-light-green);
}

.vncpc-pub-card .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.vncpc-pub-card:hover .card-cover img {
    transform: scale(1.04);
}

.vncpc-pub-card .card-body {
    padding: 16px 18px 20px;
}

.vncpc-pub-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--vncpc-dark-green);
    line-height: 1.35;
    margin-bottom: 6px;
}

.vncpc-pub-card .vncpc-year {
    font-size: 12px;
    color: var(--vncpc-muted);
}

/* =============================================================================
   9. CONTACT FORM SECTION
   ============================================================================= */

.vncpc-contact-wrap {
    background: var(--vncpc-white);
    border-radius: var(--vncpc-radius);
    box-shadow: var(--vncpc-shadow-lg);
    padding: var(--vncpc-card-pad) 40px;
    max-width: 720px;
    margin: 0 auto;
}

/* Gravity Forms override */
#top .vncpc-contact-wrap .gform_wrapper .gfield input,
#top .vncpc-contact-wrap .gform_wrapper .gfield textarea,
#top .vncpc-contact-wrap .gform_wrapper .gfield select {
    border: 1.5px solid var(--vncpc-border);
    border-radius: var(--vncpc-radius-sm);
    padding: 11px 14px;
    font-family: var(--vncpc-font);
    font-size: 15px;
    color: var(--vncpc-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#top .vncpc-contact-wrap .gform_wrapper .gfield input:focus,
#top .vncpc-contact-wrap .gform_wrapper .gfield textarea:focus {
    outline: none;
    border-color: var(--vncpc-green);
    box-shadow: 0 0 0 3px rgba(79, 125, 32, 0.12);
}

#top .vncpc-contact-wrap .gform_wrapper .gform_footer input[type="submit"] {
    background: var(--vncpc-green);
    border-color: var(--vncpc-green);
    color: var(--vncpc-white);
    border-radius: var(--vncpc-radius-full);
    padding: 13px 28px;
    font-family: var(--vncpc-font);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.18s ease;
}

#top .vncpc-contact-wrap .gform_wrapper .gform_footer input[type="submit"]:hover {
    background: var(--vncpc-dark-green);
    transform: translateY(-2px);
}

/* =============================================================================
   10. ABOUT PAGE — ABOUT SECTION OVERRIDES
   ============================================================================= */

.vncpc-about-intro {
    max-width: 760px;
    margin: 0 auto;
}

.vncpc-about-intro p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--vncpc-text);
}

.vncpc-about-intro .vncpc-highlight {
    color: var(--vncpc-green);
    font-weight: 700;
}

/* Mission/Vision cards */
.vncpc-mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vncpc-gap);
}

.vncpc-mv-card {
    background: var(--vncpc-light-green);
    border-radius: var(--vncpc-radius);
    padding: var(--vncpc-card-pad);
    border-left: 4px solid var(--vncpc-green);
}

.vncpc-mv-card h3 {
    font-size: 20px;
    color: var(--vncpc-dark-green);
    margin-bottom: 12px;
}

.vncpc-mv-card p {
    font-size: 15px;
    color: var(--vncpc-text);
    line-height: 1.7;
}

/* Timeline */
.vncpc-timeline {
    position: relative;
    padding-left: 32px;
}

.vncpc-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--vncpc-accent), var(--vncpc-dark-green));
    border-radius: 2px;
}

.vncpc-timeline-item {
    position: relative;
    margin-bottom: 28px;
    padding-left: 16px;
}

.vncpc-timeline-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--vncpc-green);
    border-radius: 50%;
    border: 2px solid var(--vncpc-white);
    box-shadow: 0 0 0 2px var(--vncpc-green);
}

.vncpc-timeline-item .year {
    font-size: 13px;
    font-weight: 700;
    color: var(--vncpc-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.vncpc-timeline-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vncpc-dark-green);
    margin-bottom: 4px;
}

.vncpc-timeline-item p {
    font-size: 14px;
    color: var(--vncpc-muted);
    line-height: 1.6;
}

/* =============================================================================
   11. PHASE 4 — HOMEPAGE AVIA SECTIONS (target existing Avia rendered classes)
   Covers: alternate_color, main_color sections, news magazine, partners slider
   ============================================================================= */

/* ---- 11.1 Section — ALTERNATE COLOR (About + Projects) ------------------- */
#top .avia-section.alternate_color {
    background-color: var(--vncpc-light-green) !important;
    background-image: none !important;
}

#top .avia-section.alternate_color h2 {
    color: var(--vncpc-dark-green);
    font-family: var(--vncpc-font);
    font-size: 26px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 16px;
}

#top .avia-section.alternate_color h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--vncpc-accent);
    border-radius: 2px;
}

#top .avia-section.alternate_color p,
#top .avia-section.alternate_color .av_textblock_section {
    color: var(--vncpc-text);
    font-family: var(--vncpc-font);
    font-size: 15px;
    line-height: 1.75;
}

#top .avia-section.alternate_color a:not(.button) {
    color: var(--vncpc-green);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

#top .avia-section.alternate_color a:not(.button):hover {
    color: var(--vncpc-dark-green);
    border-bottom-color: var(--vncpc-accent);
}

/* ---- 11.2 Section — MAIN COLOR (News + Partners) ------------------------- */
#top .avia-section.main_color {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* First main_color section after alternate = News section */
#top .avia-section.main_color h2,
#top .avia-section.main_color h3 {
    font-family: var(--vncpc-font);
    color: var(--vncpc-dark-green);
}

/* ---- 11.3 News section — av_magazine articles ---------------------------- */
/* Section heading above each news column */
#top .avia-section.main_color .avia-column-inner > h3,
#top .avia-section.main_color .avia-column-inner > h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vncpc-green);
    border-bottom: 2px solid var(--vncpc-light-green);
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Magazine article cards */
#top .avia-section .av_magazine_article_inner {
    border-radius: var(--vncpc-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    background: #ffffff;
}

#top .avia-section .av_magazine_article_inner:hover {
    box-shadow: 0 8px 24px rgba(31, 77, 43, 0.12);
    transform: translateY(-3px);
}

#top .avia-section .av-magazine-meta-wrap,
#top .avia-section .av-magazine-content-section {
    padding: 12px 14px;
}

#top .avia-section .av-magazine-blog-title,
#top .avia-section .av-magazine-blog-title a {
    font-family: var(--vncpc-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--vncpc-text);
    line-height: 1.5;
    transition: color 0.2s ease;
}

#top .avia-section .av-magazine-blog-title a:hover {
    color: var(--vncpc-green);
}

#top .avia-section .av-magazine-time,
#top .avia-section .av-magazine-cat,
#top .avia-section span.av-magazine-cat {
    font-size: 11px;
    color: var(--vncpc-muted);
    font-family: var(--vncpc-font);
}

#top .avia-section .av-magazine-cat a {
    color: var(--vncpc-accent);
}

/* ---- 11.4 Partners section — logo slider --------------------------------- */
/* Partners section separator */
#top .avia-section.main_color + .avia-section.main_color {
    border-top: 1px solid var(--vncpc-light-green);
}

/* Partner logos: center align + consistent sizing */
#top .avia-logo-element-container .slide-entry {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#top .avia-logo-element-container .av-partner-fake-img {
    width: 70% !important;
    max-width: 160px;
    margin: 0 auto;
    opacity: 0.65;
    filter: grayscale(30%);
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#top .avia-logo-element-container .av-partner-fake-img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ---- 11.5 Post slider (Projects column) ---------------------------------- */
#top .avia-section .avia-content-slider .slide-entry {
    border-radius: var(--vncpc-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

#top .avia-section .avia-content-slider .slide-entry:hover {
    box-shadow: 0 6px 20px rgba(31, 77, 43, 0.1);
}

#top .avia-section .avia-content-slider .slide-entry .slide-content {
    padding: 10px 12px;
    font-family: var(--vncpc-font);
}

#top .avia-section .avia-content-slider .slide-entry-title a {
    font-size: 13px;
    font-weight: 600;
    color: var(--vncpc-text);
    transition: color 0.2s ease;
}

#top .avia-section .avia-content-slider .slide-entry-title a:hover {
    color: var(--vncpc-green);
}

/* Slider nav arrows */
#top .avia-section .avia-slideshow-arrows a {
    color: var(--vncpc-green) !important;
    background: rgba(79, 125, 32, 0.08) !important;
    border-radius: 50%;
    transition: background 0.2s ease;
}

#top .avia-section .avia-slideshow-arrows a:hover {
    background: rgba(79, 125, 32, 0.2) !important;
}

/* ---- 11.6 Section — global padding fine-tune ----------------------------- */
#top .avia-section.avia-section-small {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* ---- 11.7 Section — HR divider style ------------------------------------ */
#top .avia-section .av-horizontal-rule {
    border-color: var(--vncpc-accent) !important;
    opacity: 0.4;
}