/* Hà Tiên Network Header V2.4 — readable governed menus for priority sites. */

@media (min-width: 1300px) {
    .htn-inner {
        width: min(calc(100% - 40px), 1360px);
        grid-template-columns: minmax(182px, 224px) minmax(0, 1fr);
        gap: clamp(15px, 1.5vw, 24px);
    }

    .htn-brand--has-logo {
        max-width: 224px;
        gap: 10px;
    }

    .htn-brand--has-logo .htn-brand-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .htn-brand--has-logo .htn-logo-image {
        max-width: 102px;
        max-height: 50px;
    }

    .htn-brand-copy strong {
        overflow: hidden;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .htn-brand-copy small {
        overflow: hidden;
        color: #aebbc1;
        font-size: 8.5px;
        line-height: 1.25;
        letter-spacing: .07em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .htn-menu {
        gap: clamp(4px, .45vw, 8px);
    }

    .htn-menu-link,
    .htn-menu-label {
        min-height: 52px;
        padding-inline: 5px;
        font-size: clamp(14px, .94vw, 15px);
        font-weight: 600;
    }

    .htn-submenu-toggle {
        width: 38px;
        min-width: 38px;
        height: 52px;
    }

    .htn-cta {
        min-height: 52px;
        padding-inline: 16px;
        font-size: 14px;
    }
}

@media (max-width: 1439px) and (min-width: 1300px) {
    .htn-inner {
        grid-template-columns: minmax(164px, 194px) minmax(0, 1fr);
        gap: 13px;
    }

    .htn-brand--has-logo .htn-logo-image {
        max-width: 88px;
    }

    .htn-brand-copy strong {
        font-size: 12px;
    }

    .htn-brand-copy small {
        display: none;
    }

    .htn-menu-link,
    .htn-menu-label,
    .htn-cta {
        font-size: 13.5px;
    }

    .htn-submenu-toggle {
        width: 34px;
        min-width: 34px;
    }
}

@media (max-width: 1299px) {
    .htn-submenu-toggle,
    .htn-submenu .htn-menu-link,
    .htn-submenu .htn-menu-label {
        min-height: 52px;
    }

    .htn-submenu-toggle {
        width: 52px;
        min-width: 52px;
        height: 52px;
    }

    .htn-nav {
        padding-bottom: max(36px, env(safe-area-inset-bottom));
    }

    .htn-nav > .htn-cta--drawer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: 22px;
        background: #d6aa6d;
        color: #071116;
        box-shadow: 0 -14px 28px rgba(7, 17, 22, .42);
    }
}

@media (min-width: 768px) and (max-width: 1299px) {
    .htn-brand--has-logo {
        max-width: 290px;
    }

    .htn-brand--has-logo .htn-brand-copy {
        display: grid;
        gap: 2px;
    }

    .htn-brand--has-logo .htn-brand-copy strong {
        color: #fff;
        font-size: 13px;
    }

    .htn-brand--has-logo .htn-brand-copy small {
        color: #aebbc1;
        font-size: 9px;
    }
}

@media (max-width: 767px) {
    .htn-inner {
        gap: 12px;
    }

    .htn-brand {
        max-width: calc(100vw - 98px);
    }

    .htn-logo-image {
        max-width: 142px;
        max-height: 48px;
    }
}