/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Roboto',sans-serif;
    background:#f5fbf6;
    color:#16452b;
    overflow-x:hidden;
    line-height:1.7;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#edf6ef;
}

::-webkit-scrollbar-thumb{
    background:#18a34a;
    border-radius:20px;
}


/* =========================
   HEADER
========================= */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:white;

    z-index:9999;

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

}

.header-container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.header-left{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo{

    width:56px;

    height:56px;

    object-fit:contain;

    flex-shrink:0;

}

.logo-wrap h1{

    font-size:22px;

    margin-bottom:6px;

}

.logo-wrap p{

    font-size:13px;

}

.company h2{

    font-size:22px;

    color:#139240;

    font-weight:900;

    line-height:1.2;

}

.company p{

    color:#4da46d;

    font-size:14px;

    margin-top:5px;

    font-weight:600;

}

/* MENU */

nav{

    display:flex;

    align-items:center;

    gap:28px;

}

nav a{

    text-decoration:none;

    color:#16873c;

    font-size:15px;

    font-weight:700;

    position:relative;

    transition:0.3s;

}

nav a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:3px;

    background:#18a34a;

    transition:0.3s;

}

nav a:hover{

    color:#0f6c2f;

}

nav a:hover::after{

    width:100%;

}

/* MOBILE BUTTON */

.menu-toggle{

    display:none;

    font-size:32px;

    color:#14853b;

    cursor:pointer;

}

/* MOBILE */

@media(max-width:1100px){

    .header-container{

        height:80px;

    }

    .company h2{

        font-size:18px;

    }

    nav{

        position:absolute;

        top:80px;
        left:0;

        width:100%;

        background:white;

        flex-direction:column;

        align-items:flex-start;

        padding:25px;

        gap:20px;

        display:none;

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

    }

    nav.active{

        display:flex;

    }

    .menu-toggle{

        display:block;

    }

}

@media(max-width:700px){

    .header{

        padding:0 15px;

    }

    .logo{

        width:48px;
        height:48px;

    }

    .company h2{

        font-size:15px;

    }

    .company p{

        font-size:11px;

    }

}


/* =========================
   HERO
========================= */

.hero{
    position:relative;
    padding-top:90px;
    height:100vh;

    
    background:
    linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.5)),
    url('assets/hero/hero.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    overflow:hidden;
}

.overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(24,163,74,0.12),
    transparent 60%);
}

.hero-content{
    position:relative;
    z-index:2;

    max-width:1200px;

    padding:20px;
}

.hero-year {
    font-size: 230px;
    line-height: 1;
    font-weight: 900;
    color: #D92243;
    text-shadow: 0 10px 40px rgba(24,163,74,0.25);
    
    /* Tăng độ dày lên gấp đôi do một nửa sẽ bị màu chữ đè lên */
    -webkit-text-stroke: 8px #ffffff; 
    
    /* Định nghĩa thứ tự vẽ: Vẽ viền trước, tô màu chữ sau */
    paint-order: stroke fill; 
}

.hero h1 {
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 900;
    color: #0b6128;
    
    /* Tăng độ dày lên 4px */
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke fill;
}

.hero p {
    font-size: 30px;
    color: #356d49;
    margin-bottom: 20px; /* Giảm xuống 20px để kéo nút lên sát hơn */
}

.btn{
    display:inline-block;

    padding:18px 42px;

    border-radius:18px;

    background:#18a34a;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:0.4s;

    box-shadow:0 15px 30px rgba(24,163,74,0.2);
}

.btn:hover{
    transform:translateY(-5px);

    background:#14913f;
}

/* =========================
   SECTION
========================= */

.section{
    padding:120px 50px;
}

.dark{
    background:#edf8f0;
}

.container{
    max-width:1650px;
    margin:auto;
    padding:0 30px;
}

.grid2{ 
    display:grid;
    grid-template-columns:1.1fr 0.9fr; 
    gap:70px; 
    align-items:flex-start; }

.center{
    text-align:center;
    margin-bottom:80px;
}

.tag{
    color:#18a34a;

    letter-spacing:4px;

    font-size:18px;

    font-weight:700;

    margin-bottom:18px;
}

.section h2{
    font-size:56px;
    line-height:1.2;

    margin-bottom:30px;

    font-weight:900;

    color:#0b6128;
}

.section p{
    font-size:20px;

    color:#456755;

    margin-bottom:22px;
}

.image{
    width:100%;
    position:sticky;
    border-radius:35px;
    top:120px;
    box-shadow:
    0 20px 50px rgba(0,0,0,0.12);

    transition:0.4s;
}

.image:hover{
    transform:scale(1.02);
}

/* =========================
   TIMELINE
========================= */

.timeline{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.timeline-item{
    background:white;

    padding:40px;

    border-radius:30px;

    border-left:6px solid #18a34a;

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

    transition:0.4s;
}

.timeline-item:hover{
    transform:translateY(-5px);
}

.timeline-year{
    font-size:52px;
    font-weight:900;
    color:#18a34a;
    margin-bottom:14px;
}

.timeline-content h3{
    font-size:34px;
    margin-bottom:18px;
    color:#0b6128;
}

.timeline-content p{
    margin-bottom:0;
}

/* =========================
   LEADER
========================= */

.leader-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
}

.leader-card {
    width: 100%; 
    max-width: 350px; /* Tăng giới hạn chiều rộng để ô hình lớn hơn */
    background: white;
    border-radius: 24px;
    overflow: hidden;
    text-align: center;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.leader-card:hover{
    transform:translateY(-10px);
}

.leader-card img{

    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

    object-position:center top;

    display:block;

}

.leader-card h3 {
    font-size: 26px; /* Giảm nhẹ font mặc định để cân đối hơn */
    margin: 28px 10px 12px; /* Thêm khoảng lề 2 bên (10px) để chữ không sát mép thẻ */
    color: #0b6128;
    white-space: normal; /* Cho phép chữ tự động xuống dòng khi màn hình bị hẹp */
    line-height: 1.4; /* Tăng khoảng cách dòng để nếu chữ rớt xuống 2 dòng trông vẫn thoáng và đẹp */
    word-break: break-word; /* Ngăn chặn việc các từ quá dài phá vỡ cấu trúc thẻ */
}

.leader-card p{
    color:#4d8062;
    margin-bottom:30px;
}

/* =========================
   AWARD
========================= */

.award-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
}

.award-grid img{
    width:100%;
    border-radius:28px;

    transition:0.4s;

    cursor:pointer;

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

.award-grid img:hover{
    transform:scale(1.03);
}

/* =========================
   UNIT
========================= */

.unit-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:30px;
}

.unit-card{
    position:relative;

    height:430px;

  object-position:center 15%;

    border-radius:32px;

    text-decoration:none;

    color:white;

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

.unit-card img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:0.6s;
}

.unit-card:hover img{
    transform:scale(1.08);
}

.unit-card::after{
    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,0.82)
    );
}

.unit-content{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index:2;
}

.unit-content h3{
    font-size:36px;
    margin-bottom:12px;
}

.unit-content p{
    margin:0;
    color:#dcdcdc;
}

/* =========================
   IMAGE SLIDER (TRƯỢT NGANG NATIVE)
========================= */

.image-slider {
    display: flex;
    gap: 24px;
    
    /* Thiết lập vùng cuộn ngang */
    overflow-x: auto;
    
    /* Bật tính năng bắt dính (snap) khung hình */
    scroll-snap-type: x mandatory;
    
    /* Thêm đệm dưới để bóng đổ (box-shadow) của ảnh không bị cắt */
    padding-bottom: 40px; 
    padding-top: 10px;
    
    /* Ẩn thanh cuộn mặc định của trình duyệt để giao diện sạch hơn */
    scrollbar-width: none; /* Dành cho Firefox */
    -ms-overflow-style: none; /* Dành cho IE/Edge */
}

/* Ẩn thanh cuộn trên Chrome/Safari/Opera */
.image-slider::-webkit-scrollbar {
    display: none;
}

.image-slider img {
    /* flex: 0 0 auto; Ép ảnh giữ nguyên kích thước, không bị co ép bởi vùng chứa */
    flex: 0 0 auto; 
    width: 380px; 
    height: 320px;

    object-fit: cover;
    border-radius: 28px;
    
    /* Bắt dính từng ảnh vào giữa màn hình khi người dùng lướt/cuộn */
    scroll-snap-align: center; 
    
    transition: 0.5s;
    cursor: grab;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.image-slider img:active {
    cursor: grabbing;
}

/* Đổi hiệu ứng hover thành nảy lên thay vì phóng to 
   để tránh lỗi tràn viền ngang (horizontal overflow) trên slider */
.image-slider img:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* =========================
   MOBILE RESPONSIVE CHO SLIDER
========================= */
@media(max-width: 768px) {
    .image-slider img {
        width: 280px; 
        height: 240px;
    }
}

/* =========================
   FUTURE (BỀN VỮNG) - PHONG CÁCH NỀN ẢNH
========================= */

.future-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Định cấu hình chung cho mỗi thẻ bền vững */
.future-card {
    aspect-ratio: 1; /* Giữ tỷ lệ khung hình vuông */
    border-radius: 30px;
    position: relative; /* Để định vị nội dung bên trên */
    overflow: hidden; /* Cắt bỏ phần ảnh thừa */
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Thiết lập hình nền mặc định */
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Lớp phủ màu tối (linear-gradient) để chữ trắng nổi bật */
.future-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)); /* Lớp phủ mờ tối */
    transition: background 0.4s ease;
    z-index: 1; /* Nằm dưới chữ */
}

/* Đặt hình nền cho từng thẻ cụ thể */
.digital-card {
    background-image: url('assets/future/digital.jpg');
}

.vfcs-card {
    background-image: url('assets/future/vfcs.jpg');
}

.eudr-card {
    background-image: url('assets/future/eudr.jpg');
}

.esg-card {
    background-image: url('assets/future/esg.jpg');
}

/* Cấu hình nội dung chữ bên trên */
.card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Khoảng cách giữa tên và mô tả */
    padding: 30px;
    z-index: 2; /* Nằm trên lớp phủ mờ */
    text-align: center;
}

/* Định dạng tên thẻ (ESG, EUDR, v.v.) */
.card-content h3 {
    font-size: 48px; /* Kích thước chữ lớn nổi bật */
    font-weight: 900;
    color: white; /* Màu trắng trên nền tối */
    margin: 0;
    text-transform: uppercase; /* Chữ in hoa */
}

/* Định dạng mô tả ngắn */
.card-content p {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255,255,255,0.9); /* Màu trắng mờ nhẹ */
    margin: 0;
}

/* =========================
   HOVER EFFECTS (HIỆU ỨNG TƯƠNG TÁC)
========================= */
.future-card:hover {
    transform: translateY(-8px); /* Thẻ nảy nhẹ lên */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Khi hover, hình nền phóng to nhẹ tạo chiều sâu */
.future-card:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Sử dụng cùng hình nền */
    background-size: cover;
    background-position: center;
    transform: scale(1.05); /* Phóng to nhẹ hình nền */
    transition: transform 0.4s ease;
    z-index: 0; /* Nằm dưới lớp phủ mờ */
}

/* Khi hover, lớp phủ mờ tối hơn để chữ nổi hơn nữa */
.future-card:hover::before {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9));
}

/* =========================
   UNIT PAGE
========================= */

.unit-banner{
    position:relative;
    height:75vh;
    overflow:hidden;
}

.unit-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.unit-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    rgba(255,255,255,0.1),
    rgba(0,0,0,0.5)
    );
}

.unit-banner-content{
    position:absolute;
    left:80px;
    bottom:80px;

    z-index:2;
}

.unit-banner-content h1{
    font-size:90px;
    font-weight:900;

    margin-bottom:15px;

    color:white;
}

.unit-banner-content p{
    font-size:24px;
    color:#f0f0f0;
}

/* =========================
   FOOTER (REDESIGN 3 CỘT)
========================= */

.footer {
    background-color: #0b8f41; /* Màu xanh lá chuẩn doanh nghiệp (có thể chỉnh lại mã hex cho tiệp màu logo) */
    color: #ffffff;
    padding-top: 70px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr; /* Chia 3 cột, cột giữa rộng hơn chút */
    gap: 50px;
    padding-bottom: 50px;
}

/* CỘT 1: THƯƠNG HIỆU */
.footer-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: white;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 20px;
}

.brand-parent {
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 5px;
    font-weight: 500;
}

.brand-name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #ffffff;
}

.bct-logo {
    height: 45px;
    object-fit: contain;
}

/* CỘT 2: LIÊN HỆ */
.footer-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
    text-transform: uppercase;
}

/* Đường gạch ngang màu vàng dưới tiêu đề */
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffd700; 
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

.contact-list svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.8);
}

/* CỘT 3: BẢN ĐỒ */
.map-col iframe {
    width: 100%;
    height: 220px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* THANH BẢN QUYỀN (BOTTOM BAR) */
.footer-bottom {
    background-color: #087033; /* Xanh đậm hơn phần trên một chút để tạo chiều sâu */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-bottom-inner p {
    margin: 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-links .divider {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
}

/* =========================
   MOBILE RESPONSIVE CHO FOOTER
========================= */
@media(max-width: 1000px) {
    .footer-top {
        grid-template-columns: 1fr 1fr; /* Chuyển về 2 cột trên Tablet */
    }
}

@media(max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr; /* Dồn thành 1 cột dọc trên điện thoại */
        gap: 40px;
        text-align: center;
    }
    
    .footer-title::after {
        width: 100px; /* Thu gọn gạch chân khi căn giữa */
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-list li {
        justify-content: center;
        text-align: left; /* Giữ text canh trái nhưng icon căn giữa tổng thể khối */
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:1000px){


    .grid2{
        grid-template-columns:1fr;
    }

    .hero-year{
        font-size:130px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:18px;
    }

    .section{
        padding:80px 22px;
    }

    .section h2{
        font-size:38px;
    }

    .section p{
        font-size:17px;
    }

    .timeline-year{
        font-size:40px;
    }

    .timeline-content h3{
        font-size:28px;
    }

    .leader-card img{
        height:350px;
    }

    .unit-banner-content{
        left:30px;
        bottom:40px;
    }

    .unit-banner-content h1{
        font-size:48px;
    }

    .future-box{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:700px){

    .hero-year{
        font-size:100px;
    }

    .hero h1{
        font-size:32px;
    }

    .hero p{
        font-size:16px;
    }

    .future-box{
        grid-template-columns:1fr;
    }

    .unit-content h3{
        font-size:28px;
    }

    .section h2{
        font-size:30px;
    }

    .company h2{
        font-size:16px;
    }

    .company p{
        font-size:11px;
    }

}

.hero-period{

    font-size:48px;

    font-weight:700;

    letter-spacing:8px;

    color:#006400;

    margin-top:-20px;

    margin-bottom:30px;

    text-transform:uppercase;

}

.intro-text p{

    font-size:20px;

    line-height:2.1;

    color:#446555;

    margin-bottom:28px;

    text-align:justify;

    text-justify:inter-word;

}
/* =========================
   AWARD SECTION
========================= */

.award-block{
    margin-bottom:90px;
}

.award-block h3{
    text-align:center;
    font-size:42px;
    color:#b51616;
    margin-bottom:40px;
    font-weight:900;
}

.single-award{
    text-align:center;
}

.single-award img{
    width:420px;
    max-width:100%;
    transition:0.4s;
}

.single-award img:hover{
    transform:scale(1.03);
}

.award-grid{
    display:grid;
    gap:40px;
}

.award-grid.three{
    grid-template-columns:repeat(3,1fr);
}

.award-grid.four{
    grid-template-columns:repeat(4,1fr);
}

.award-grid.five{
    grid-template-columns:repeat(5,1fr);
}

.award-card{
    text-align:center;
}

.award-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:contain;

    background:white;

    padding:16px;

    border-radius:18px;

    border:1px solid #ececec;

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

    transition:0.4s;

}

.award-card img:hover{
    transform:translateY(-5px);
}

.award-card p{
    margin-top:18px;
    font-size:20px;
    font-weight:700;
    color:#1b1b1b;
}

.award-button{
    text-align:center;
    margin-top:40px;
}

/* MOBILE */

@media(max-width:1000px){

    .award-grid.three,
    .award-grid.four,
    .award-grid.five{

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

    }

}

@media(max-width:700px){

    .award-grid.three,
    .award-grid.four,
    .award-grid.five{

        grid-template-columns:1fr;

    }

    .award-block h3{
        font-size:28px;
    }

}
/* =========================
   AWARD PAGE
========================= */

.award-hero{

    position:relative;

    height:55vh;

    background:
    linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.55)),
    url('assets/awards/banner.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    color:white;

}

.award-hero-content{

    position:relative;
    z-index:2;

    max-width:1000px;

    padding:20px;

}

.award-hero h1{

    font-size:72px;

    margin-bottom:20px;
    
    font-weight:900;

}

.award-hero p{

    font-size:22px;

    line-height:1.8;

}

.award-page{

    max-width:1200px;

}

.award-intro{

    margin-bottom:80px;

}

.award-intro p{

    font-size:22px;

    line-height:2;

    text-align:justify;

}

.award-list-block{

    margin-bottom:80px;

}

.award-list-block h2{

    font-size:42px;

    color:#b51616;

    margin-bottom:35px;

}

.award-list h3{

    font-size:30px;

    color:#12753a;

    margin-bottom:20px;

    margin-top:40px;

}

.award-list ul{

    padding-left:30px;

}

.award-list li{

    font-size:21px;

    line-height:2;

    margin-bottom:8px;

    color:#304d3d;

}

.award-back{

    text-align:center;

    margin-top:80px;

}

/* MOBILE */

@media(max-width:768px){

    .award-hero h1{

        font-size:42px;

    }

    .award-hero p{

        font-size:18px;

    }

    .award-list-block h2{

        font-size:30px;

    }

    .award-list h3{

        font-size:24px;

    }

    .award-list li{

        font-size:17px;

        line-height:1.8;

    }

}
.award-card{

    display:flex;

    flex-direction:column;

    align-items:center;

}
.award-grid.five{

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

    align-items:start;

}
/* =========================
   LEADER LAYOUT
========================= */

.leader-single{

    display:flex;

    justify-content:center;

    margin-bottom:40px;

}

.leader-single .leader-card{

    width:520px;

}

.leader-grid.two{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:10px;

}

/* MOBILE */

@media(max-width:768px){

    .leader-grid.two{

        grid-template-columns:1fr;

    }

.leader-single .leader-card{

    width:520px;

}

}
/* =========================
   UNIT MODERN
========================= */

.unit-modern-grid{

    display:grid;

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

    gap:30px;

}

@media(max-width:1200px){

    .unit-modern-grid{

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

    }

}

@media(max-width:768px){

    .unit-modern-grid{

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

    }

}

@media(max-width:500px){

    .unit-modern-grid{

        grid-template-columns:1fr;

    }

}

.unit-modern-card{

    position:relative;

    height:380px;

    overflow:hidden;

    border-radius:28px;

    text-decoration:none;

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

    transition:0.4s;

}

.unit-modern-card:hover{

    transform:translateY(-8px);

}

.unit-modern-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.5s;

}

.unit-modern-card:hover img{

    transform:scale(1.08);

}

.unit-modern-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,0.75)
    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:28px;

}

.unit-modern-overlay h3{

    font-size:34px;

    color:white;

    margin-bottom:10px;

    font-weight:700;

}

.unit-modern-overlay p{

    color:#e5e5e5;

    font-size:16px;

    line-height:1.6;

}

/* =========================
   HISTORY LEADER
========================= */

.history-hero{

    position:relative;

    height:60vh;

    background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.55)),
    url('assets/history/history-banner.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    color:white;

}

.history-content{

    position:relative;
    z-index:2;

    max-width:1000px;

    padding:20px;

}

.history-content h1{

    font-size:72px;

    margin-bottom:20px;

    font-weight:900;

}

.history-content p{

    font-size:24px;

    line-height:1.8;

}

.history-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.history-card{

    background:white;

    border-radius:26px;

    overflow:hidden;

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

    transition:0.4s;

}

.history-card:hover{

    transform:translateY(-6px);

}

.history-card img{

    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

}

.history-info{

    padding:25px;

    text-align:center;

}

.history-info h3{

    font-size:26px;

    color:#0d6a31;

    margin-bottom:12px;

}

.history-info p{

    color:#666;

    margin-bottom:10px;

}

.history-info span{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#e9f7ed;

    color:#14853b;

    font-weight:700;

}

/* MOBILE */

@media(max-width:768px){

    .history-content h1{

        font-size:40px;

    }

    .history-content p{

        font-size:18px;

    }

}

.history-menu-grid{

    display:grid;

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

    gap:30px;

}

@media(max-width:1100px){

    .history-menu-grid{

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

    }

}

@media(max-width:700px){

    .history-menu-grid{

        grid-template-columns:1fr;

    }

}

/* =========================
   DROPDOWN MENU
========================= */

.dropdown{

    position:relative;

}

.dropdown-btn{

    background:none;

    border:none;

    color:#0d6a31;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    font-family:'Roboto',sans-serif;

    padding:10px 0;

}

.dropdown-content{

    position:absolute;

    top:100%;

    left:0;

    min-width:320px;

    background:white;

    border-radius:18px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:0.3s;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.12);

    z-index:999;

}

.dropdown-content a{

    display:block;

    padding:16px 22px;

    color:#333;

    text-decoration:none;

    font-weight:500;

    border-bottom:1px solid #f1f1f1;

    transition:0.3s;

}

.dropdown-content a:hover{

    background:#edf7f0;

    color:#0d6a31;

}

.dropdown:hover .dropdown-content{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* =========================
   HISTORY PAGE
========================= */

.history-page{

    background:#f5f2ed;

    min-height:100vh;

    padding:80px 0;

    position:relative;

}

.history-page::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    url('assets/pattern.png');

    opacity:0.04;

    pointer-events:none;

}

.history-section{

    margin-bottom:120px;

    position:relative;

    z-index:2;

}

.history-section h1{

    text-align:center;

    color:#d61d1d;

    font-size:42px;

    font-weight:900;

    margin-bottom:70px;

    line-height:1.4;

}

.portrait-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:50px 35px;

    justify-items:center;

    max-width:1200px;

    margin:auto;

}

.portrait-card{

    text-align:center;

}

.portrait-card img{

    width:180px;

    height:240px;

    object-fit:cover;

    border:4px solid white;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.15);

    margin-bottom:20px;

}

.portrait-card h3{

    font-size:22px;

    color:#111;

    margin-bottom:10px;

    font-weight:700;

}

.portrait-card p{

    color:#444;

    margin-bottom:8px;

    font-size:17px;

}

.portrait-card span{

    font-weight:700;

    color:#0d6a31;

}

.history-back{

    text-align:center;

    margin-top:80px;

}

/* MOBILE */

@media(max-width:768px){

    .history-section h1{

        font-size:28px;

    }

.portrait-grid{

    display:grid;

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

    gap:50px 35px;

    justify-items:center;

}

    .portrait-card img{

        width:140px;

        height:190px;

    }

    .portrait-card h3{

        font-size:18px;

    }

}
@media(max-width:1200px){

    .portrait-grid{

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

    }

}

@media(max-width:900px){

    .portrait-grid{

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

    }

}

@media(max-width:700px){

    .portrait-grid{

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

    }

}

@media(max-width:500px){

    .portrait-grid{

        grid-template-columns:1fr;

    }

}
/* =========================
   MINI PAGE HEADER
========================= */

.mini-page-header{

    position:relative;

    height:320px;

    background:
    linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.55)
    ),
    url('../assets/history/history-banner.jpg');

    background-size:cover;
    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

    margin-top:90px;

}

.mini-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    rgba(16,111,48,0.3),
    rgba(0,0,0,0.4)
    );

}

.mini-header-content{

    position:relative;

    z-index:2;

    padding:20px;

}

.mini-header-content h1{

    font-size:54px;

    font-weight:900;

    margin-bottom:18px;

}

.mini-header-content p{

    font-size:22px;

    color:#f2f2f2;

}

/* =========================
   BREADCRUMB
========================= */

.mini-breadcrumb{

    background:white;

    border-bottom:1px solid #eaeaea;

}

.mini-breadcrumb .container{

    height:70px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

}

.mini-breadcrumb a{

    color:#14853b;

    text-decoration:none;

    font-weight:700;

}

/* MOBILE */

@media(max-width:768px){

    .mini-page-header{

        height:240px;

    }

    .mini-header-content h1{

        font-size:34px;

    }

    .mini-header-content p{

        font-size:17px;

    }

}

/* =========================
   DANG INFO CARD
========================= */

.dang-info-card {
    background: white;
    border-radius: 36px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr; /* Đã chuyển từ 2 cột (1fr 1fr) sang 1 cột (1fr) */
    margin-bottom: 100px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.dang-info-image img {
    width: 100%;
    height: 900px; /* Bổ sung chiều cao cố định. Anh có thể tinh chỉnh từ 350px đến 500px tùy thẩm mỹ */
    object-fit: cover; /* Đảm bảo hình ảnh được crop tự động không bị méo tỷ lệ */
}

.dang-info-content {
    padding: 50px 60px; /* Chỉnh lại padding trên dưới 50px, trái phải 60px để tạo độ thoáng */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dang-info-content h2{

    font-size:42px;

    color:#0d6a31;

    margin-bottom:30px;

    line-height:1.4;

}

.dang-info-content p{

    font-size:19px;

    line-height:2;

    color:#4b6354;

    margin-bottom:20px;

    text-align:justify;

}

/* =========================
   SECTION TITLE
========================= */

.history-section-title{

    text-align:center;

    margin-bottom:70px;

}

.history-section-title h2{

    font-size:52px;

    color:#0d6a31;

}

/* MOBILE */

@media(max-width:1000px){

    .dang-info-card{

        grid-template-columns:1fr;

    }

    .dang-info-content{

        padding:35px;

    }

}

@media(max-width:768px){

    .history-section-title h2{

        font-size:34px;

    }

    .dang-info-content h2{

        font-size:30px;

    }

    .dang-info-content p{

        font-size:17px;

    }

}

/* =========================
   CONG DOAN BANNER
========================= */

.congdoan-banner{

    background:
    linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.55)
    ),
    url('../assets/history/congdoan-banner.jpg');

    background-size:cover;

    background-position:center;

}

/* =========================
   DOAN BANNER
========================= */

.doan-banner{

    background:
    linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.55)
    ),
    url('../assets/history/doan-banner.jpg');

    background-size:cover;

    background-position:center;

}

/* =========================
   SUB PAGE HEADER
========================= */

.main-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    background:white;
    border-bottom:
1px solid rgba(12,84,40,0.08);

    box-shadow:
    0 2px 15px rgba(0,0,0,0.05);

}

.mini-page-header{

    margin-top:100px;

}

/* =========================
   LOGO HEADER
========================= */

.logo-wrap{

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;

}

.logo-wrap h1{

    font-size:28px;

    font-weight:900;

    color:#14853b;

    margin-bottom:10px;

    line-height:1.3;

    text-decoration:none;

}

.logo-wrap p{

    color:#5c7a67;

    font-size:16px;

    font-weight:500;

    text-decoration:none;

}

/* XÓA MÀU TÍM LINK */

.logo-wrap:link,
.logo-wrap:visited,
.logo-wrap:hover,
.logo-wrap:active{

    text-decoration:none;

    color:inherit;

}

@media(min-width:1400px){

    nav{
        gap:18px;
    }

    nav a,
    .dropdown-btn{
        font-size:13px;
    }

}

/* =========================
   LIGHTBOX (HIỆU ỨNG PHÓNG TO ẢNH)
========================= */

/* Khung nền tối bao phủ toàn màn hình */
.lightbox {
    display: none; /* Ẩn mặc định */
    position: fixed;
    z-index: 999999; /* Chỉ số z-index cực lớn để đè lên thanh Header */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.92); /* Nền đen mờ 92% */
    opacity: 0; /* Khởi tạo độ trong suốt để làm animation */
    transition: opacity 0.3s ease;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Lớp hiển thị (được JS thêm vào khi click) */
.lightbox.show {
    opacity: 1;
}

/* Kiểu dáng bức ảnh bên trong */
.lightbox-content {
    display: block;
    max-width: 90%;
    max-height: 80vh; /* Giới hạn chiều cao tối đa bằng 80% màn hình hiển thị */
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    
    /* Hiệu ứng phóng to từ nhỏ thành lớn (scale) */
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lightbox.show .lightbox-content {
    transform: scale(1);
}

/* Nút tắt X ở góc phải */
.lightbox-close {
    position: absolute;
    top: 25px;
    right: 40px;
    color: #f1f1f1;
    font-size: 45px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #18a34a; /* Đổi màu xanh Công ty khi rê chuột */
    text-decoration: none;
}

/* Chú thích ảnh hiển thị bên dưới */
#lightbox-caption {
    display: block;
    width: 80%;
    max-width: 800px;
    text-align: center;
    color: #dddddd;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 400;
}

/* Đổi con trỏ chuột trên khung trượt ngang thành hình ngón tay click */
.image-slider img {
    cursor: pointer; 
}

/* Lớp chung cho tất cả các khung danh hiệu */
.frame-item img.frame-image {
  cursor: zoom-in; /* Hiển thị kính lúp khi di chuột qua */
  transition: transform 0.3s ease; /* Thêm hiệu ứng chuyển động nhẹ */
}

/* Hiệu ứng khi di chuột qua (tùy chọn) */
.frame-item img.frame-image:hover {
  transform: scale(1.03); /* Phóng to nhẹ hình ảnh */
}

/* =========================
   LIGHTBOX HỢP NHẤT
========================= */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 999999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.92);
    opacity: 0; 
    transition: opacity 0.3s ease;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox.show {
    opacity: 1;
}

.lightbox-image {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    cursor: default;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lightbox.show .lightbox-image {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 40px;
    color: #f1f1f1;
    font-size: 45px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}

.lightbox-close:hover {
    color: #18a34a;
    text-decoration: none;
}

#lightbox-caption {
    display: block;
    width: 80%;
    max-width: 800px;
    text-align: center;
    color: #dddddd;
    padding-top: 15px;
    font-size: 18px;
}
/* =========================
   TỐI ƯU DROPDOWN CHO MOBILE
========================= */
@media(max-width: 1100px) {
    .dropdown-content {
        position: relative; /* Trả về luồng tài liệu chuẩn để tự động đẩy các menu bên dưới xuống */
        top: 0;
        box-shadow: none;
        background: #f0f7f2;
        border-radius: 12px;
        margin-top: 10px;
        width: 100%;
    }
    
    .dropdown:hover .dropdown-content {
        transform: none; /* Tắt hiệu ứng trượt để tránh lỗi hiển thị trên iOS/Android */
    }
    
    .dropdown-content a {
        padding: 12px 22px;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
}

@media(max-width:768px){
    /* ... các code hiện tại của anh ... */
    
    /* Thêm đoạn này vào trong @media(max-width:768px) */
    .leader-card h3 {
        font-size: 22px;
    }
}

/* =========================
   THƯ VIỆN HÌNH TƯ LIỆU
========================= */
.tulieu-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Chia 2 cột tỷ lệ 1:1 cho hình lớn */
    gap: 40px; /* Khoảng cách giữa các ô */
    margin-top: 50px;
    margin-bottom: 60px;
}

.tulieu-item {
    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0,0,0,0.06);

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

    text-align: center;

    padding-bottom: 25px;

    display: flex;

    flex-direction: column;
}

.tulieu-item:hover {
    transform: translateY(-8px); /* Hiệu ứng nảy lên khi hover */
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.tulieu-item img {
    width: 100%;

    height: 450px;

    object-fit: contain;

    background: #f3f3f3;

    border-bottom: 4px solid #18a34a;

    cursor: zoom-in;

    padding: 10px;
}

.tulieu-title {
    color: #003366; /* Mã màu xanh dương đậm (Navy Blue) */
    font-size: 24px;
    font-weight: 700;
    margin-top: 25px;
    padding: 0 20px;
    line-height: 1.4;
}

/* =========================
   RESPONSIVE CHO MOBILE (THƯ VIỆN TƯ LIỆU)
========================= */
@media(max-width: 900px) {
    .tulieu-gallery {
        grid-template-columns: 1fr; /* Dồn về 1 cột dọc trên thiết bị di động */
        gap: 30px;
    }
    .tulieu-item img {
        height: 300px; /* Hạ chiều cao ảnh xuống để vừa khung hình điện thoại */
    }
    .tulieu-title {
        font-size: 20px;
    }
}

nav.active{
        display: flex !important;
    }