/* shop.css */
        /* Reset */
        * {
            margin: 0 ;
            padding: 0 ;
            box-sizing: border-box ;
            font-family: Arial, sans-serif ;
        }

        /* Header */
        header {
            background-color: #e81e1e ;
            color: #fff ;
        }

        /* Logo */
        .header-top {
            max-width: 1200px ;
            margin: 0 auto ;
            padding: 12px 20px ;
            display: flex ;
            align-items: center ;
            justify-content: flex-start ;
            gap: 12px;
        }

        .brand {
            display: flex ;
            align-items: center ;
            gap: 12px ;
        }

        .logo {
            width: 56px ;
            height: 56px ;
            object-fit: cover ;
            border-radius: 8px ;
            border: 2px solid rgba(255,255,255,0.85) ;
            background: #fff ;
        }

        .brand-name {
            color: #fff ;
            font-weight: bold ;
            font-size: 18px ;
        }

        .banner {
            background-image: url('img/avt.jpg') ;
            background-size: cover ;
            background-position: center ;
            height: 300px ;
            display: flex ;
            align-items: center ;
            justify-content: center ;
        }

        .banner h1 {
            font-size: 48px ;
            color: #000000 ;
        }

        /* Thanh điều hướng */
        nav {
            background-color: #fd5454 ;
            padding: 12px 0 ;
        }

        nav ul {
            list-style: none ;
            display: flex ;
            justify-content: center ;
            gap: 32px ;
        }

        nav ul li {
            position: relative ;
        }

        nav a {
            color: #000000 ;
            text-decoration: none ;
            font-weight: bold ;
            padding: 8px 16px ;
            border-radius: 4px ;
            transition: all 0.25s ease ;
            display: block ;
        }

        nav a:hover {
            background-color: #010101 ;
            color: #e52323 ;
        }

        /*  Menu Styles */
        .dropdown {
            position: absolute ;
            top: 100% ;
            left: 0 ;
            background-color: #fff ;
            border-radius: 4px ;
            padding: 8px 0 ;
            min-width: 220px ;
            display: none ;
            z-index: 1000 ;
        }

        nav li:hover .dropdown {
            display: block ;
        }

        .dropdown li {
            position: relative ;
        }

        .dropdown a {
            color: #ff0000 ;
            padding: 8px 12px ;
            display: block ;
        }

        .dropdown a:hover {
            background-color: #ffeeee ;
        }

        /* Submenu Styles */
        .submenu {
            position: absolute ;
            left: 100% ;
            top: 0 ;
            background-color: #fff ;
            border-radius: 4px ;
            padding: 8px 0 ;
            min-width: 200px ;
            display: none ;
        }

        .dropdown li:hover .submenu {
            display: block ;
        }

        /* Main Content Styles */
        main {
            padding: 16px;
            max-width: 1200px;
            margin: 0 auto ;
        }

        article {
            display: grid ;
            grid-template-columns: 1fr 1fr ;
            gap: 24px ;
        }

        /* Menu Section */
        .menu-section {
            background-color: #fff ;
            padding: 24px ;
            border-radius: 10px ;
            border: 2px solid #ff0000 ;
        }

        .menu-section h2 {
            color: #db2727 ;
            margin-bottom: 12px ;
            border-bottom: 2px solid #ff0000;
            padding-bottom: 8px ;
        }

        .menu-category {
            margin-bottom: 16px ;
        }

        .menu-category h3 {
            color: #ff0000 ;
            margin-bottom: 8px ;
            font-size: 18px ;
            padding-left: 8px ;
            border-left: 4px solid #ff0000 ;
        }

        .menu-category ul {
            list-style: none ;
            padding-left: 8px ;
        }

        .menu-category li {
            padding: 12px 0 ;
            border-bottom: 1px dashed #ffcccc ;
            transition: all 0.25s ease ;
            display: flex ;
            align-items: center ;
            gap: 16px;
        }

        .menu-category li:hover {
            padding-left: 12px ;
            color: #ff0000 ;
            background-color: #fff5f5 ;
        }

        .menu-item-img {
            width: 64px ;
            height: 64px ;
            border-radius: 8px ;
            object-fit: cover ;
            border: 1px solid #ffcccc ;
        }

        .menu-item-details {
            flex: 1 ;
            display: flex ;
            justify-content: space-between ;
            align-items: center ;
        }

        .menu-item-name {
            font-weight: bold ;
            font-size: 16px ;
        }

        .menu-item-price {
            color: #ff0000 ;
            font-weight: bold ;
            font-size: 15px ;
        }

        .order-form {
            background-color: #fff ;
            padding: 24px ;
            border-radius: 10px ;
        }

        form {
            display: flex ;
            flex-direction: column ;
            gap: 16px ;
        }

        /* Các thành phần trong form */
        form label {
            font-weight: bold ;
            color: #ff0000 ;
        }

        form input, form select, form textarea {
            padding: 8px ;
            border: 1px solid #ffcccc ;
            border-radius: 4px ;
            transition: all 0.2s ease ;
            font-size: 14px ;
        }

        form input:focus, form select:focus, form textarea:focus {
            border-color: #ff0000 ;
            outline: none ;
        }

        form button {
            background-color: #ff0000 ;
            color: white ;
            padding: 10px 16px ;
            border: none ;
            border-radius: 4px ;
            cursor: pointer ;
            font-weight: bold ;
            font-size: 15px ;
            transition: background-color 0.2s ease ;
            align-self: flex-start ;
        }

        form button:hover {
            background-color: #cc0000 ;
        }

        /* Footer Style */
        footer {
            background-color: #ff0000 ;
            color: #fff ;
            text-align: center ;
            padding: 16px ;
            margin-top: 24px ;
            border-radius: 5px ;
        }

        footer p {
            margin: 6px 0 ;
        }