/* Shared public UI: retain ZoneVietnam's red identity across both layouts. */
:root {
    --zv-red: #c8102e;
    --zv-ink: #111827;
    --zv-muted: #4b5563;
    --zv-line: #d1d5db;
    --zv-radius: 0.75rem;
}
.zv-cookie-panel[hidden] { display: none !important; }
.zv-cookie-panel {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 10000;
    max-width: 680px;
    padding: 1.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgb(0 0 0 / 15%);
    background: white;
    color: #111827;
    font: 14px/1.6 Inter, system-ui, sans-serif;
}
.zv-cookie-panel p { margin: 0 0 0.5rem; }
.zv-cookie-panel a { color: #c8102e; text-decoration: underline; }
.zv-cookie-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.zv-cookie-actions button {
    flex: 1;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid #c8102e;
    border-radius: 0.75rem;
    background: white;
    color: #c8102e;
    font-weight: 600;
    cursor: pointer;
}
.zv-cookie-actions button:hover { background: #fff1f2; }
[x-cloak] { display: none !important; }
.zv-nav-dropdown {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.zv-nav-dropdown a { min-height: 44px; white-space: normal; }
.zv-nav-dropdown a > span { flex-shrink: 0; }
.zv-legacy .zv-nav-dropdown { width: 288px; margin-top: 0; }
.zv-legacy .zv-hover-dropdown > .dropdown-menu {
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.zv-legacy .zv-hover-dropdown > .dropdown-menu:not(.show) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
}
:is(.zv-site, .zv-legacy) { -webkit-text-size-adjust: 100%; }
:is(.zv-site, .zv-legacy) :focus-visible {
    outline: 3px solid var(--zv-red);
    outline-offset: 3px;
}
.zv-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    transform: translateY(-160%);
    z-index: 10000;
    padding: 0.75rem 1rem;
    background: white;
    color: var(--zv-red);
    border-radius: var(--zv-radius);
}
.zv-skip-link:focus { transform: none; }
.zv-site main { overflow-wrap: anywhere; }
.zv-site main :is(.grid, .flex) > :is(div, article, aside) { min-width: 0; }
.zv-site :is(button, a).bg-brand,
.zv-site form button[type="submit"],
.zv-button {
    min-height: 44px;
    border-radius: var(--zv-radius);
    font-weight: 600;
}
.zv-site :is(button, a).bg-brand,
.zv-button {
    background-color: var(--zv-red);
    color: white;
}
.zv-site :is(button, a).bg-brand:hover,
.zv-button:hover { background-color: #a60d26; }
.zv-button { padding: 0.625rem 1.25rem; }
.zv-site button:disabled { cursor: wait; opacity: 0.65; }
.zv-site form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
    min-width: 0;
    min-height: 44px;
    border-radius: var(--zv-radius);
    border-color: var(--zv-line);
    max-width: 100%;
}
.zv-site form :is(input, textarea)::placeholder { color: #6b7280; opacity: 1; }
.zv-site header nav > a,
.zv-site header nav > div > button,
#mobile-menu-btn,
#city-btn { min-height: 44px; }
.zv-site header nav > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#mobile-menu-btn { min-width: 44px; flex-shrink: 0; }
#city-btn { max-width: 160px; }
#city-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#city-btn svg { flex-shrink: 0; }
#mobile-menu {
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#mobile-menu a { min-height: 44px; display: flex; align-items: center; }
#city-modal > .relative,
#search-modal > .relative { max-height: calc(100dvh - 2rem); overflow-y: auto; }
#search-modal-close { min-width: 36px; min-height: 36px; }
#search-modal form input { min-width: 0; }
.zv-prose,
.blog-prose { overflow-wrap: anywhere; }
.zv-prose :is(p, li) { font-size: 1rem; line-height: 1.8; }
.zv-prose :is(h2, h3, h4) { color: var(--zv-ink); font-weight: 700; margin: 1.5rem 0 0.75rem; }
.zv-prose a { color: var(--zv-red); text-decoration: underline; text-underline-offset: 3px; }
.zv-prose :is(ul, ol) { margin: 1rem 0 1rem 1.5rem; }
.zv-prose ul { list-style: disc; }
.zv-prose ol { list-style: decimal; }
:is(.zv-prose, .blog-prose) :is(img, video, iframe) { max-width: 100%; }
:is(.zv-prose, .blog-prose) img { height: auto; border-radius: var(--zv-radius); }
:is(.zv-prose, .blog-prose) table { display: block; max-width: 100%; overflow-x: auto; }
:is(.zv-prose, .blog-prose) pre { max-width: 100%; overflow-x: auto; }
.zv-image-fallback { object-fit: contain !important; background: #f3f4f6; }
.zv-legacy .btn { border-radius: var(--zv-radius); }
.zv-legacy .btn-primary { background-color: var(--zv-red); border-color: var(--zv-red); }
.zv-legacy .btn-primary:hover { background-color: #a60d26; border-color: #a60d26; }
.zv-legacy :is(.btn:not(.btn-sm), .form-control:not(textarea), .form-select) { min-height: 44px; }
.zv-legacy img { max-width: 100%; }
@media (max-width: 639px) {
    .zv-site form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
    .zv-legacy form :is(.form-control, .form-select) { font-size: 16px; }
    .zv-site main h1 { line-height: 1.25; }
    .zv-site main .p-8 { padding: 1.25rem; }
}
@media (max-width: 359px) {
    .zv-site header > div:first-child { padding-inline: 0.75rem; }
    .zv-site header a > img[alt="ZoneVietnam"] { max-width: 116px; height: auto; }
    #city-btn { max-width: 116px; padding-inline: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html.scroll-smooth { scroll-behavior: auto; }
    :is(.zv-site, .zv-legacy) *,
    :is(.zv-site, .zv-legacy) *::before,
    :is(.zv-site, .zv-legacy) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}