:root {
    --color-bg: #0f0f0f;
    --color-surface: #1a1a1a;
    --color-accent: #f5b800;
    --color-text-light: #fff;
    --color-text-muted: #ccc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text-light); padding: 0 15px 40px 15px; overflow-x: clip; }

/* Grid & Items */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.menu-item { background-color: var(--color-surface); border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; }
.item-image-container { width: 100%; padding-bottom: 125%; position: relative; }
.item-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.item-details { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; padding: 10px 8px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); }
.item-name-vn { font-size: 1rem; font-weight: 800; line-height: 1.1; }
.item-name-en { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.item-price { position: absolute; top: 10px; right: 10px; font-size: 1rem; font-weight: 900; background-color: var(--color-accent); color: #000; padding: 2px 6px; border-radius: 4px; z-index: 10; }
.item-number { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; z-index: 10; }

/* HERO */
.featured-hero { position: relative; width: 100vw; height: 92vh; margin: 0 -15px; border-bottom: 4px solid var(--color-accent); display: flex; flex-direction: column; justify-content: flex-end; }
.hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(0.6); }
.hero-details { position: relative; z-index: 2; padding: 30px 20px 60px 20px; background: linear-gradient(to top, #000, transparent); text-align: center; }
.hero-name-vn { font-size: 2.5rem; font-weight: 900; }
.hero-price { font-size: 1.8rem; font-weight: 900; border: 2px solid var(--color-accent); color: var(--color-accent); padding: 8px 24px; display: inline-block; margin-top: 15px; }

.scroll-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: var(--color-accent);
    z-index: 10;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -15px); }
    60% { transform: translate(-50%, -7px); }
}

/* INACTIVE STATE */
.menu-item.is-inactive { pointer-events: none; opacity: 0.8; }
.menu-item.is-inactive .item-image { filter: grayscale(100%) brightness(20%); }
.menu-item.is-inactive .item-price { background: #333; color: #999; font-size: 0.8rem; }

/* SOLD OUT STATE */
.menu-item.is-sold-out:not(.is-inactive)::after { content: "SOLD OUT"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); border: 3px solid #d32f2f; color: #d32f2f; font-size: 1.4rem; font-weight: 900; padding: 0.5rem 1rem; background: rgba(255,255,255,0.9); z-index: 50; }

/* MODAL */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 1000; display: none; align-items: center; justify-content: center; }
.modal-content { width: 90%; max-width: 500px; background: var(--color-bg); border-radius: 16px; border: 2px solid var(--color-accent); position: relative; overflow: hidden; }
.modal-image-full { width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.modal-details { padding: 25px 20px; text-align: center; }
.modal-name-vn { font-size: 1.8rem; font-weight: 900; color: var(--color-accent); }
.modal-price { font-size: 2.2rem; font-weight: 900; background: var(--color-accent); display: inline-block; padding: 6px 18px; border-radius: 8px; margin-top: 15px; }
.modal-close { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.2); border: none; border-radius: 50%; width: 35px; height: 35px; font-size: 1.2rem; color: white; cursor: pointer; z-index: 1010; }
/* Update your .modal-overlay and add a keyframe */
.modal-overlay {
    /* ... keep your existing properties ... */
    animation: fadeIn 0.2s ease-out forwards;
}

.modal-content {
    /* ... keep your existing properties ... */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 768px) {
    .menu-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .hero-name-vn { font-size: 4rem; }
}

@media (hover: hover) {
    .menu-item:hover .item-image {
        transform: scale(1.08);
    }
}
/* --- CATEGORY & STICKY HEADERS --- */
.category-wrapper {
    margin-bottom: 40px; /* Gives some breathing room between categories */
}

.category-header.sticky-header {
    position: sticky;
    top: 0;
    z-index: 90; /* High enough to sit over items, below the modal (1000) */
    background-color: rgba(15, 15, 15, 0.95); /* Var(--color-bg) with slight transparency */
    backdrop-filter: blur(8px); /* Gives a modern frosted glass effect */
    padding: 15px 0 10px 0;
    margin-bottom: 15px;
    border-bottom: 4px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-accent);
}

.cat-icon {
    font-size: 1.5rem;
}