/* Header công khai thống nhất trên Trang chủ, Tin tức, Sản phẩm và các trang chi tiết. */
.site-header {
    position: relative;
    z-index: 10;
    background: #0d3c29;
}

.site-topbar {
    background: linear-gradient(180deg, rgba(15, 118, 110, .78), rgba(8, 47, 45, .38));
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-topbar-actions {
    display: inline-flex;
    gap: 15px;
    align-items: center;
}

.site-topbar-consult-button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 25px;
    padding: 4px 10px;
    border: 1px solid rgba(194, 255, 237, .3);
    border-radius: 999px;
    color: #063b2b;
    background: linear-gradient(135deg, #83f2d5, #50d8bf);
    box-shadow: 0 5px 14px rgba(0, 12, 10, .16);
    cursor: pointer;
    font-family: inherit;
    font-size: .65rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    transition: filter .2s ease, transform .2s ease;
}

.site-topbar-consult-button:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.site-topbar-consult-button span {
    font-size: .85rem;
    transition: transform .2s ease;
}

.site-topbar-consult-button:hover span {
    transform: translateX(2px);
}

.site-navbar {
    background: rgba(13, 60, 41, .82) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
}

.site-navbar.is-scrolled {
    background: rgba(8, 48, 34, .96) !important;
}

.site-navbar > .site-container {
    position: relative;
}

.site-navbar > .site-container::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110, 231, 255, .45), transparent);
    content: "";
}

.site-brand img {
    filter: drop-shadow(0 5px 12px rgba(47, 228, 186, .16));
}

.site-nav-links {
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
}

.site-nav-links .nav-link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: .58rem .78rem !important;
    border-radius: 10px;
    color: #b7d6ca !important;
    font-size: 13px !important;
}

.site-nav-icon {
    color: #73e6ca;
    font-size: .78rem;
    line-height: 1;
    transition: color .2s ease, transform .2s ease;
}

.site-nav-links .nav-link:hover .site-nav-icon,
.site-nav-links .nav-link.is-active .site-nav-icon {
    color: #caffed;
    transform: translateY(-1px);
}

.site-nav-links button.nav-link {
    border: 0;
    background: transparent;
}

.site-account-name {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.site-account-full-name {
    overflow: hidden;
    max-width: 180px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-account-role {
    overflow: hidden;
    max-width: 180px;
    margin-top: 2px;
    color: rgba(213, 239, 231, .7);
    font-size: .67rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-links .nav-link:hover,
.site-nav-links .nav-link.is-active {
    color: #f2fffb !important;
    background: rgba(255, 255, 255, .075);
}

.site-nav-links .nav-link.is-active {
    background: rgba(52, 211, 153, .12);
}

.site-nav-links .nav-link::after {
    bottom: .14rem !important;
    background: linear-gradient(90deg, #3ae7c1, #66b7ff) !important;
}

.site-language,
.site-login-button {
    border-color: rgba(255, 255, 255, .14) !important;
    color: #d5efe7 !important;
    background: rgba(255, 255, 255, .045) !important;
}

.site-login-button:hover {
    background: rgba(255, 255, 255, .1) !important;
}

.site-consult-button {
    border: 1px solid rgba(196, 255, 239, .18);
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(135deg, #22c55e, #34d399) !important;
    color: #08291d !important;
    box-shadow: 0 14px 32px rgba(34, 197, 94, .22) !important;
}

.site-consult-button:hover {
    filter: brightness(1.08);
}

@media (max-width: 575.98px) {
    .site-topbar-inner {
        justify-content: center !important;
    }

    .site-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .site-topbar-contact {
        width: auto !important;
    }

    .site-topbar-contact a[href^="mailto:"] {
        display: none;
    }

    .site-topbar-consult-button {
        min-height: 27px;
        padding: 5px 9px;
        font-size: .61rem;
    }
}

/* Menu tài khoản: hiển thị như một card điều khiển cá nhân, rõ vai trò và thao tác. */
.site-account {
    gap: 9px !important;
    min-height: 42px;
    padding: 4px 7px 4px 5px !important;
    border: 1px solid rgba(170, 240, 220, .16) !important;
    border-radius: 13px !important;
    color: #eafff7 !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px rgba(0, 18, 20, .12);
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.site-account:hover,
.site-account[aria-expanded="true"] {
    border-color: rgba(132, 249, 211, .42) !important;
    background: rgba(255, 255, 255, .1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px rgba(0, 15, 20, .2);
    transform: translateY(-1px);
}

.site-account::after { display: none !important; }

.site-account-avatar {
    position: relative;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    border: 1px solid rgba(224, 255, 248, .36);
    background: linear-gradient(145deg, #2fd4ae, #1a73cf) !important;
    box-shadow: 0 5px 13px rgba(28, 177, 147, .27);
    font-size: .8rem;
    font-weight: 850;
}

.site-account-full-name { color: #f1fffa; font-size: .75rem; font-weight: 800; }
.site-account-role { color: rgba(204, 239, 228, .73); font-size: .6rem; letter-spacing: .025em; }
.site-account-chevron { margin-left: 1px; color: #8ee9d4; font-size: .66rem; transition: transform .22s ease; }
.site-account[aria-expanded="true"] .site-account-chevron { transform: rotate(180deg); }

/* Thanh menu trên cùng chỉ giữ avatar gọn; tên và quyền hiển thị trong menu xổ xuống. */
.site-nav-actions .site-account .site-account-name { display: none; }
.site-nav-actions .site-account { min-height:40px; gap:5px !important; padding:3px 5px 3px 4px !important; border-radius:11px !important; }
.site-nav-actions .site-account-avatar { width:32px !important; height:32px !important; flex-basis:32px; font-size:.78rem; }
.site-nav-actions .site-account-chevron { margin-right:1px; font-size:.55rem; }

.site-account-dropdown {
    width: min(328px, calc(100vw - 24px));
    padding: 9px !important;
    overflow: hidden;
    border: 1px solid rgba(151, 231, 215, .2) !important;
    border-radius: 18px !important;
    background: linear-gradient(155deg, rgba(10, 55, 48, .98), rgba(6, 35, 48, .98)) !important;
    box-shadow: 0 24px 55px rgba(0, 15, 26, .34) !important;
}

.site-account-dropdown::before {
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(127, 249, 219, .72), transparent);
    content: "";
}

.site-account-dropdown-head {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 10px 8px;
}

.site-account-avatar-large {
    width: 43px !important;
    height: 43px !important;
    flex-basis: 43px;
    font-size: .95rem;
}

.site-account-dropdown-head strong,
.site-account-dropdown-head small { display: block; }
.site-account-dropdown-head strong { overflow: hidden; max-width: 226px; color: #f0fffa; font-size: .9rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.site-account-dropdown-head small { overflow: hidden; max-width: 226px; margin-top: 3px; color: #9ac7ba; font-size: .66rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-account-dropdown .dropdown-divider { margin: 6px 3px; border-color: rgba(174, 235, 222, .13); }

.site-account-dropdown .site-account-menu-item {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    margin: 2px 0;
    padding: 8px 9px;
    border-radius: 12px;
    color: #e7faf4 !important;
    background: transparent;
    transition: background .18s ease, transform .18s ease;
}

.site-account-dropdown .site-account-menu-item:hover,
.site-account-dropdown .site-account-menu-item:focus {
    color: #fff !important;
    background: rgba(130, 239, 213, .11);
    transform: translateX(2px);
}

.site-account-menu-item>span:nth-child(2) { min-width: 0; }
.site-account-menu-item b,
.site-account-menu-item small { display: block; }
.site-account-menu-item b { overflow: hidden; font-size: .79rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.site-account-menu-item small { overflow: hidden; margin-top: 2px; color: #9dc8bb; font-size: .64rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.site-account-menu-item>i { color: #8edbcb; font-size: .72rem; }

.site-account-menu-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(140, 244, 216, .15);
    border-radius: 10px;
    color: #9af6df;
    background: rgba(84, 215, 184, .12);
    font-size: .86rem;
}

.site-account-menu-icon.icon-cart { color: #95d8ff; background: rgba(80, 156, 255, .13); }
.site-account-menu-icon.icon-order { color: #e0c3ff; background: rgba(158, 102, 244, .13); }
.site-account-menu-icon.icon-address { color: #ffc58f; background: rgba(247, 139, 61, .13); }
.site-account-menu-admin .site-account-menu-icon { color: #a5eeff; background: rgba(69, 167, 246, .16); }

.site-account-dropdown .site-account-logout {
    width: 100%;
    border: 0;
    text-align: left;
}

.site-account-dropdown .site-account-logout:hover,
.site-account-dropdown .site-account-logout:focus {
    background: rgba(255, 102, 114, .12);
}

.site-account-logout .site-account-menu-icon { color: #ffadb1; border-color: rgba(255, 147, 153, .16); background: rgba(239, 79, 89, .12); }
.site-account-logout b { color: #ffdcde; }.site-account-logout small { color: #eeb0b5; }

@media (max-width: 991.98px) {
    .site-menu-toggler {
        position: relative;
        display: grid;
        width: 44px;
        height: 42px;
        padding: 9px;
        place-content: center;
        border: 1px solid rgba(150, 250, 220, .7) !important;
        border-radius: 13px !important;
        outline: 1px solid rgba(110, 231, 255, .22);
        outline-offset: 3px;
        background: linear-gradient(145deg, rgba(64, 220, 172, .22), rgba(70, 147, 255, .16)) !important;
        box-shadow: 0 0 0 4px rgba(110, 231, 255, .06), 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .2);
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .site-menu-toggler span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 2px;
        margin: 0;
        border-radius: 99px;
        background: linear-gradient(90deg, #dffff4, #79edff) !important;
        box-shadow: 0 0 8px rgba(121, 237, 255, .7);
        transform: translate(-50%, -50%);
        transform-origin: center;
        transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .16s ease, width .2s ease;
    }

    .site-menu-toggler span:nth-child(1) { transform: translate(-50%, calc(-50% - 7px)); }
    .site-menu-toggler span:nth-child(3) { transform: translate(-50%, calc(-50% + 7px)); }

    .site-menu-toggler:hover,
    .site-menu-toggler:focus-visible {
        border-color: #b7ffe8 !important;
        outline-color: rgba(151, 255, 225, .46);
        background: linear-gradient(145deg, rgba(67, 224, 177, .34), rgba(78, 153, 255, .28)) !important;
        box-shadow: 0 0 0 5px rgba(110, 231, 255, .1), 0 13px 30px rgba(0, 0, 0, .28), 0 0 20px rgba(70, 224, 187, .18);
        transform: translateY(-1px);
    }

    .site-menu-toggler[aria-expanded="true"] {
        border-color: #c0ffe9 !important;
        background: linear-gradient(145deg, rgba(72, 229, 182, .38), rgba(82, 159, 255, .3)) !important;
    }

    .site-menu-toggler[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
    .site-menu-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.35); }
    .site-menu-toggler[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

    .site-nav-links {
        border: 0;
        background: transparent;
    }

    .site-navbar .navbar-collapse {
        border-color: rgba(122, 230, 205, .15);
        background: #0d3c29;
    }

    .site-nav-actions {
        border-color: rgba(164, 239, 217, .13);
    }

    .site-account-dropdown { margin-top: 8px !important; }
}

@media (max-width: 575.98px) {
    .site-account { min-height: 40px; padding-right: 5px !important; }
    .site-account-name,
    .site-account-chevron { display: none !important; }
    .site-account-avatar { width: 31px !important; height: 31px !important; flex-basis: 31px; }
}