/* Header */
.navbar-green {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

/* Desktop giữ như cũ */
.navbar .container-fluid {
    min-height: 72px;
}

/* Logo */
.brand-logo {
    height: 60px;
    width: auto;
}

.brand-title {
    color: #0b5d2a; /* xanh chủ đạo */
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.5em;
    text-shadow: 0 2px 0 #e6f4ec, /* highlight trên */
    0 2px 0 #cfe8da, 0 3px 4px rgba(0,0,0,.15);
}

/* ===== HEADER ICONS ===== */
.header-icons {
    gap: 30px; /* khoảng cách đều, thoáng */
}

/* Base icon */
.header-icon {
    font-size: 1.5rem;
    color: #063716; /* mặc định xanh thương hiệu */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: all .25s ease;
}

    /* Hover chung */
    .header-icon:hover {
        background: rgba(6, 55, 22, 0.08);
        transform: translateY(-1px);
    }

/* ===== BRAND COLORS ===== */
.icon-search {
    color: #063716;
}

.icon-facebook {
    color: #1877F2;
}

.icon-youtube {
    color: #FF0000;
}

.icon-linkedin {
    color: #0A66C2;
}

.icon-x {
    color: #111111;
}

/* Hover: giữ bản chất nhưng dịu hơn */
.icon-facebook:hover {
    background: rgba(24,119,242,.12);
}

.icon-youtube:hover {
    background: rgba(255,0,0,.12);
}

.icon-linkedin:hover {
    background: rgba(10,102,194,.12);
}

.icon-x:hover {
    background: rgba(0,0,0,.08);
}

/* ===== MOBILE HEADER ===== */
@media (max-width: 576px) {

    .navbar .container-fluid 
    {
        min-height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    
    /* Brand stack dọc */
    .brand-wrap {
        width: 100%;
        display: flex;
        flex-direction: column; /* 🔥 LOGO TRÊN – TITLE DƯỚI */
        align-items: center;
        margin: 2px 0 2px; /* bớt khoảng cách */
        gap: 4px !important;
    }

    .brand-logo{
        height: 50px; /* logo đủ nổi */
    }

    .brand-title {
        font-size: 1.5rem; /* nhỏ thêm để khỏi cắt */
        line-height: 1.15;
        letter-spacing: .2px;
        max-width: calc(100vw - 24px);
    }

    /* Icon xuống hàng dưới, căn giữa hoặc phải */
    .header-icons {
        width: 100%;
        display: flex;
        justify-content: center; /* hoặc flex-end nếu anh thích */
        gap: 14px;
        padding: 6px 0 8px;
    }

    .header-icon {
        padding: 2px 0 4px; /* bớt dày */
        gap: 10px;
        width: 32px;
        height: 32px;
        font-size: 1.5em;
    }
}

/* ===== MENU BAR ===== */
:root {
    --menu-green: #063716;
    --menu-green-2: #0b5d2a;
    --menu-border: rgba(255,255,255,.14);
}

/* thanh menu */
.main-menu {
    background: var(--menu-green);
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Thu nhỏ chiều cao thanh menu */
.main-menu .main-menu__bar {
min-height: 48px; /* nhỏ hơn */
padding-top: 6px;
padding-bottom: 6px;
}

/* hamburger icon trên nền xanh */
.main-menu .navbar-toggler-icon {
    filter: invert(1);
}

/* chữ "Danh mục" trên mobile */
.main-menu__label {
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 600;
    padding: 0;
    display: inline-flex;
    align-items: center;
    font-size:1rem;
}

.main-menu__label[role="button"] {
    cursor: pointer;
    user-select: none;
}


/* Bootstrap 5: đổi màu icon hamburger bằng filter */
.main-menu__toggler .navbar-toggler-icon {
    filter: invert(1) brightness(2); /* trắng */
    opacity: .95;
}

/* hover/focus đẹp hơn */
.main-menu__toggler:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-1px);
}

.main-menu__toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}

/* giãn khoảng cách giữa các mục */
.main-menu__nav {
    gap: 4px; /* <- anh muốn cách ra chút thì tăng số này */
    align-items: center;
}

/* link menu */
.main-menu .nav-link {
    color: #fff;
    font-weight: 600;
    padding: .6rem 1.05rem;
    border-radius: 999px;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    transition: background .2s ease, transform .2s ease;
}

.menu-home-icon {
    font-size: 0.9rem;
    opacity: 0.9;
    transform: translateY(-1px); /* cân baseline chữ */
}

/* ICON MENU DESKTOP */
.menu-pc-icon {
    font-size: 0.95rem;
    opacity: .9;
}

/* Hover nhẹ cho cảm giác xịn */
.main-menu__nav .nav-link:hover .menu-pc-icon {
    opacity: 1;
}


.main-menu .nav-link:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.12);
}

.main-menu .nav-link.active {
    color: #ffffff;
    /* chữ sáng + nổi */
    text-shadow: 0 0 4px rgba(255,255,255,.45), 0 1px 0 rgba(0,0,0,.35);
    font-weight: 600; /* hơn chút so với menu thường */
    background: transparent;
}

/* dropdown desktop */
@media (min-width: 992px) 
{

    .main-menu {
        padding: 4px 0; /* ↓ giảm chiều cao tổng */
    }

    .main-menu .dropdown-menu {
        margin-top: 6px; /* dropdown rơi xuống nhìn pro */
    }

    .main-menu .container-fluid {
        min-height: 44px; /* nhỏ lại */
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .main-menu__nav {
        gap: 15px; /* ↓ giãn vừa phải */
    }

    .main-menu .nav-link {
        padding: 6px 10px; /* giảm “bề cao” */
        font-size: 0.95rem;
        line-height: 1.1;
    }

    .dropdown-hover:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-hover > .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: all .2s ease;
    }

    /* tránh nhấp nháy */
    .dropdown-hover > .dropdown-toggle::after {
        transition: transform .2s ease;
    }

    .dropdown-hover:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

@media (max-width: 991.98px) {
    .main-menu .container-fluid {
        min-height: 20px; /* nhỏ lại */
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .main-menu .navbar-toggler {
        padding: 4px 8px; /* bớt to */
    }

    .main-menu .navbar-toggler-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ===== FIX iPad landscape-ish (992px–1199px): menu bị thiếu ngang ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* giảm padding của link để tiết kiệm ngang */
    .main-menu__nav .nav-link {
        padding-left: .55rem;
        padding-right: .55rem;
        font-size: .80rem; /* giảm nhẹ */
        letter-spacing: 0; /* khỏi nở chữ */
    }

    /* giảm khoảng cách giữa các item */
    .main-menu__nav {
        gap: .15rem; /* nếu anh đang dùng gap */
    }

    /* icon nhỏ lại chút */
    .menu-pc-icon {
        font-size: .80rem;
    }

    /* caret nhỏ lại chút (dropdown-toggle::after của bootstrap) */
    .main-menu__nav .dropdown-toggle::after {
        margin-left: .35rem;
        transform: scale(.9);
    }

    /* chống xuống hàng và chống tràn */
    .main-menu__nav {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

        /* item dài thì tự cắt ... (đỡ mất menu) */
        .main-menu__nav .nav-link span {
            display: inline-block;
            max-width: 150px; /* anh có thể chỉnh 130–170 tùy ý */
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: bottom;
        }
}

.dropdown-menu {
    border-radius: 10px;
    padding: 8px 0;
    border: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.dropdown-item {
    padding: 8px 16px;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background: rgba(255,255,255,.15);
}

.main-menu .dropdown-menu {
    border: 0;
    border-radius: 14px;
    padding: .45rem;
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.main-menu .dropdown-item {
    border-radius: 10px;
    padding: .55rem .75rem;
}

/* OFFCANVAS MOBILE */
/* ===== OFFCANVAS: nền “xanh trong” + blur, không bị "màu chết" ===== */
.menu-offcanvas {
    width: min(86vw, 360px);
    background: rgba(6, 55, 22, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255,255,255,.10);
}

/* header offcanvas */
.menu-offcanvas__header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--menu-border);
}

/* Title default vs hint */
.menu-title__default {
    color: rgba(255,255,255,.92);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.15;
}

.menu-title__hint {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
}

.menu-title__hint .hint-arrow {
    font-size: 1rem;
    color: #9fe0b5; /* xanh nhạt cho nổi */
    vertical-align: middle;
}

/* Khi offcanvas mở => đổi title */
.menu-offcanvas.show .menu-title__default {
    display: none;
}

.menu-offcanvas.show .menu-title__hint {
    display: block;
}

/* ===== ACCORDION mobile trong offcanvas ===== */
.menu-offcanvas .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.menu-offcanvas .accordion-button {
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem; /* to hơn */
    padding: 1rem 0.75rem; /* thoáng */
}

.menu-offcanvas .accordion-button:focus {
    box-shadow: none;
}

/* ICON MŨI TÊN BÊN PHẢI */
.menu-offcanvas .accordion-button::after {
    filter: brightness(0) invert(1); /* mũi tên trắng */
    opacity: .95;
}

.menu-offcanvas .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) scale(1.1);
}

/* ===== MOBILE MAIN MENU (OFFCANVAS) - CHỈNH Ở ĐÂY CHO ĐỒNG BỘ ===== */
.menu-offcanvas .menu-main,
.menu-offcanvas .menu-home {
    font-size: 1.08rem;
    font-weight: 650;
    color: #fff;
}

/* Icon bên trái menu lớn */
.menu-offcanvas .menu-main-icon {
    width: 1.4rem; /* canh thẳng hàng */
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255,255,255,.95);
    opacity: .95;
}

/* Mũi tên (accordion ::after) -> trắng */
.menu-offcanvas .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: .95;
}

/* Riêng Trang chủ: không có mũi tên */
.menu-offcanvas .accordion-button.no-collapse::after,
.menu-offcanvas .menu-home::after {
    display: none !important;
}


/* link con */
.menu-offcanvas .accordion-body {
    padding: 10px 16px 16px;
}

/* MENU CON */
.menu-offcanvas .menu-link {
    display: block;
    font-size: 1.2rem;
    padding: 0.4rem 0;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.12);
}

.menu-offcanvas .menu-link:last-child {
    border-bottom: 0;
}

.menu-offcanvas .menu-link:hover {
    color: #fff;
    text-decoration: underline;
}

.menu-offcanvas .menu-link:hover {
    color: #fff;
}

.no-collapse {
    text-decoration: none;
}

.menu-link {
    display: block;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    padding: .55rem 0;
}

.menu-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* nút close kiểu "xịn" */
.btn-icon-close {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    transition: transform .2s ease, background .2s ease;
}

.btn-icon-close i {
    font-size: 1.1rem;
}

.btn-icon-close:hover {
    background: rgba(255,255,255,.14);
    transform: translateY(-1px);
}

.search-modal {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

.search-modal__eyebrow {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #198754;
    margin-bottom: .4rem;
}

.search-modal__title {
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-weight: 800;
    color: #063716;
}

.search-modal__hint {
    color: #6c757d;
    font-size: .95rem;
}