@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

body, .bhcm-modal, .bhcm-side-cart {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* --- FOOD MODAL (Premium Integration) --- */
:root {
    --bhcm-primary: #016701;    /* BHCM Green */
    --bhcm-accent: #f39200;     /* BHCM Orange */
    --bhcm-bg: #fff;
    --bhcm-overlay: rgba(0, 0, 0, 0.6);
    --bhcm-radius: 12px;
    --bhcm-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --bhcm-text: #333;
}

.bhcm-modal {
    display: none; 
    position: fixed; 
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: var(--bhcm-overlay);
    justify-content: center;
    align-items: center;
}

.bhcm-modal-content {
    background-color: var(--bhcm-bg);
    width: 100%;
    max-width: 500px; /* Specific width */
    height: auto;
    max-height: 90vh;
    border-radius: var(--bhcm-radius);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bhcm-shadow);
    animation: slideUp 0.3s ease-out;
}

@media (max-width: 768px) {
    .bhcm-modal {
        align-items: flex-end;
    }
    .bhcm-modal-content {
        max-height: 85vh;
        border-radius: var(--bhcm-radius) var(--bhcm-radius) 0 0;
        margin-bottom: 0;
    }
}

/* Header Wrapper */
.bhcm-modal-header-wrapper {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    z-index: 5;
}

/* Image Container */
.bhcm-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    border-radius: var(--bhcm-radius) var(--bhcm-radius) 0 0;
}

.bhcm-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Close Button (Left Top) */
.bhcm-modal-close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bhcm-modal-close-btn span {
    color: #f39200;
    font-size: 18px;
    font-weight: bold;
}

/* Floating Quantity Pill */
.bhcm-floating-qty {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #f39c12; /* Slightly yellower orange */
    background: linear-gradient(to right, #f39c12, #f39200);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 20;
    width: 120px;
    justify-content: space-between;
    height: 36px;
}

.bhcm-floating-qty button {
    background: transparent;
    border: none;
    color: #fff;
    width: 30px;
    height: 100%;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px !important;
}
.bhcm-floating-qty button:hover {
    background: transparent !important;
}
.bhcm-floating-qty button:active {
    background: transparent !important;
}

.bhcm-floating-qty span {
    font-size: 16px;
    font-weight: 800;
    min-width: 20px;
    text-align: center;
}

/* Body Info */
.bhcm-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 30px 20px 20px;
    padding-top: 30px; 
}

h2#bhcm-modal-title {
    color: #006000; /* Dark Green */
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* Description */
p#bhcm-modal-desc {
    color: #7a7a7a;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Topping Groups */
.bhcm-group-section {
    margin-bottom: 15px;
}

.bhcm-group-header {
    background: #fcf8e3; /* Very light yellow/beige bg for header? No, screenshot looks white or very light gray */
    background: #f7f7f7;
    color: #d35400; /* Brownish Orange for first group */
    font-weight: 700;
    padding: 10px 15px;
    font-size: 15px;
    margin: 0 -20px 10px;
    border-radius: 0;
}

/* Custom colors for specific groups if possible, using nth-of-type for now */
.bhcm-group-section:nth-of-type(1) .bhcm-group-header {
    color: #d35400; /* Orange Brown */
    background: #fff8e1; /* Light Orange Bg? */
    background: #f8f8f8;
}

.bhcm-group-section:nth-of-type(2) .bhcm-group-header {
    color: #d35400; /* Text Color similar */
}

/* Options List */
.bhcm-options-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.bhcm-option-item-wrapper {
    margin-bottom: 12px;
}

.bhcm-option-item {
    display: flex;
    align-items: center; /* Center checkbox vertical */
}

.bhcm-option-item input[type="checkbox"] {
    margin: 0 10px 0 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    accent-color: #016701;
}

.bhcm-option-label {
    flex: 1;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.bhcm-option-price {
    font-weight: 500;
    color: #555;
    font-size: 13px;
}

/* Footer (Sticky) */
.bhcm-modal-footer {
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.02);
}

.bhcm-total-price {
    color: #d0011b; /* Official Red */
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
}

button#bhcm-add-to-cart-btn {
    background: #006000;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
}
button#bhcm-add-to-cart-btn:hover {
    background: #004d00;
}

/* Animation */
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.bhcm-qty-wrapper {
    margin-left: auto;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 24px;
}
.qty-inline-ctrl
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#bhcm-side-cart
{
    background: #fff;
}
.bhcm-sub-options .bhcm-sub-row
{
    width: 50%;
}
.bhcm-item-qty-btn {
    width: 20px;
    height: 25px;
    border: none;
    background: #ddd;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    border-radius: 5px !important;
}
.bhcm-pos-layout .bhcm-menu-nav
{
    top:0px !important;
}
.bhcm-pos-header
{
    padding: 10px;
}

.bhcm-item-qty-input {
    width: 25px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
}

.opt-price {
    margin-left: auto;
    color: #666;
}

/* Hide price if quantity wrapper takes its place visual hierarchy */
.option-item.has-qty .opt-price {
    margin-left: 10px;
    margin-right: 10px;
}

/* Modal Footer */
.food-modal-footer {
    background: #fff;
    border-top: 1px solid #eee;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 5;
}

.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.qty-btn {
    background: #fff !important;
    color: #333 !important;
    border: none !important;
    width: 35px;
    height: 35px;
    font-size: 18px;
    cursor: pointer;
}

#bhcm-modal-qty {
    width: 40px;
    text-align: center;
    border: none;
    font-weight: bold;
    font-size: 16px;
    background: transparent;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-to-cart-btn {
    background-color: #016701 !important;
    color: #fff !important;
    border: none;
    padding: 10px 30px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.add-to-cart-btn:hover {
    background-color: #004d29 !important;
}

/* --- SIDE CART (Premium Revamp) --- */
.bhcm-cart-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 99990;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.bhcm-cart-overlay.active {
    display: block;
    opacity: 1;
}

.bhcm-side-cart {
    position: fixed;
    top: 0;
    right: -450px;
    width: 420px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.bhcm-side-cart.open {
    right: 0;
}

.bhcm-side-cart.active {
    right: 0;
}

/* --- HEADER --- */
.bhcm-cart-header {
    height: 60px;
    padding: 0 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.bhcm-cart-header h3 {
    margin: 0;
    color: #006a31; /* Green Text */
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.close-cart-arrow {
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #eee;
    color: #f39c12; /* Orange Arrow */
    border-radius: 4px; /* Square with radius */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: 0.2s;
}
.close-cart-arrow:hover {
    background: #f39c12;
    color: #fff;
    border-color: #f39c12;
}

/* --- ITEM LIST --- */
.bhcm-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #fff;
}

.bhcm-cart-body ul.cart_list {
    padding: 0;
    margin: 0;
}

.bhcm-cart-body ul.cart_list li.mini_cart_item {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap; 
    position: relative;
    align-items: flex-start;
    margin: 0;
}

.bhcm-cart-body ul.cart_list li.mini_cart_item:last-child {
    border-bottom: none;
}

/* Image */
.bhcm-cart-body ul.cart_list li img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 15px;
    object-fit: cover;
}

/* Info container */
.bhcm-cart-item-info {
    flex: 1;
    padding-right: 25px; /* Space for Remove btn */
}

/* Product Name */
.bhcm-cart-body ul.cart_list li a {
    font-weight: 700;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    line-height: 1.3;
}

/* Meta / Toppings */
.bhcm-cart-body .variation {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 5px;
}
.bhcm-cart-body .variation dt { display: none; } /* Hide label like "Topping:" if desired, usually simpler */
.bhcm-cart-body .variation dd { display: inline; margin: 0; p {display: inline;} }

/* Quantity & Price Row */
.bhcm-cart-qty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    flex-basis: 100%;
    padding-left: 75px; /* Align with text (60px img + 15px gap) */
}

/* Qty Text placeholder (Since we rely on WC default mostly) */
.bhcm-cart-body .quantity {
    font-size: 14px;
    color: #333;
    background: #f5f5f5; /* BG for Qty box? */
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 3px;
    font-weight: 600;
}
/* Simulate [ - 1 + ] style if HTML permits, else just text */

.bhcm-cart-body .amount {
    color: #ff9f00; /* Orange Price */
    font-weight: 700;
    font-size: 15px;
}

/* Remove Button (X) */
.bhcm-cart-body .mini_cart_item a.remove {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    color: #999;
    font-size: 16px;
    line-height: 18px; /* Center x */
    border-radius: 50%; /* Circle or Square? Screenshot looks small circle/square */
    border: none;
    text-align: center;
    font-weight: normal;
}
.bhcm-cart-body .mini_cart_item a.remove:hover {
    background: #e74c3c;
    color: #fff;
}


/* --- FOOTER --- */
.bhcm-side-cart-footer {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-top: 1px solid #eee; /* Optional separator */
    padding-top: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.woocommerce-mini-cart__total strong {
    font-weight: 700;
    color: #333;
    text-transform: uppercase; 
    font-size: 16px; 
}
/* Label override "Subtotal" -> "TỔNG TIỀN:" logic usually in PHP filter, but CSS can hide/pseudo if needed. 
   Assuming PHP strings are correct/translated. */

.woocommerce-mini-cart__total .amount {
    color: #d0021b; /* Red Total */
    font-size: 18px;
    font-weight: 800;
}

/* Hide Default WC Buttons if they appear */
.woocommerce-mini-cart__buttons {
    display: none !important;
}
#kitchen-orders-list
{
    margin-top: 20px;
}

/* Buttons */
.bhcm-custom-buttons {
    display: flex;
}
.bhcm-table .bhcm-badge
{
position: static !important;
}
.bhcm-custom-buttons button, 
.bhcm-custom-buttons a {
    flex: 1;
    height: 45px;
    border: none;
    border-radius: 0px;
    font-weight: 700;
    font-size: 13px; /* Slightly compact */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
    padding: 0 10px;
    transition: opacity 0.2s;
}

.btn-continue {
    background: #ffab00; /* Orange */
    color: #222; /* Dark text on Orange */
}
.btn-continue:hover {
    background: #e69a00;
}

.btn-checkout {
    background: #006a31; /* Deep Green */
    color: #fff;
}
.btn-checkout:hover {
    background: #005226;
}
.bhcm-cart-body
{
    padding: 10px;
}

/* --- POS MOBILE OPTIMIZATION --- */

.bhcm-pos-mobile-footer {
    display: none; /* Hidden on Desktop */
}

@media (max-width: 768px) {
    /* 1. Header */
    .bhcm-pos-layout {
        flex-direction: column;
        height: auto;
        overflow: visible;
        padding-bottom: 70px; /* Space for footer */
    }

    .bhcm-pos-left {
        border-right: none;
        padding-right: 0;
        flex: none;
    }

    .bhcm-pos-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .bhcm-pos-header h3 {
        font-size: 16px;
        order: -1; /* Title first? Or back button? */
        width: 100%;
        text-align: center;
    }
    
    .pos-close-modal-btn {
        position: absolute;
        top: 10px;
        left: 0;
        padding: 5px 10px;
        font-size: 12px;
        z-index: 10;
        background: transparent;
        border: none;
    }

    .bhcm-pos-search {
        width: 100%;
    }
    .bhcm-pos-search input {
        width: 100%;
    }

    /* 2. Menu Grid & Cards */
    .bhcm-pos-menu-container {
        overflow: visible; /* Let page scroll */
        padding-bottom: 0;
    }
    
    .bhcm-pos-menu-container .bhcm-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .bhcm-pos-menu-container .bhcm-product-card {
        display: flex;
        flex-direction: column;
    }

    .bhcm-pos-menu-container .bhcm-prod-img-box {
        height: 120px;
    }
    
    .bhcm-card-actions {
        padding-top: 5px;
        margin-top: 5px;
    }
    
    .quick-qty-btn-inv {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    .quick-qty-val-inv {
        width: 25px;
        font-size: 14px;
    }

    /* 3. Mobile Footer Bar */
    .bhcm-pos-mobile-footer {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ddd;
        padding: 10px 15px;
        z-index: 99999; /* Above everything */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        justify-content: space-between;
        align-items: center;
    }

    .bhcm-mobile-summary {
        display: flex;
        flex-direction: column;
    }


    .mobile-count {
        font-size: 12px;
        color: #666;
    }

    
    .mobile-total {
        font-size: 16px;
        font-weight: 800;
        color: #d0021b;
    }

    .bhcm-mobile-view-cart-btn {
        background: #016701;
        color: #fff;
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* 4. Cart Drawer (Transform .bhcm-pos-right) */
    .bhcm-pos-right {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden */
        width: 85%;
        max-width: 350px;
        height: 100% !important;
        z-index: 100000;
        transition: right 0.3s ease;
        border-left: 1px solid #ddd;
        border-radius: 0;
    }
    
    .bhcm-pos-right.open {
        right: 0;
    }

    /* Cart Overlay */
    /* Reuse .bhcm-cart-overlay or create new specific for POS? */
    /* Adding specific overlay for POS Cart on Mobile */
    .bhcm-pos-cart-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 99999;
        display: none;
    }
    .bhcm-pos-cart-overlay.active {
        display: block;
    }
    
    /* Adjust Cart Inner */
    .bhcm-pos-cart-panel {
        height: 100%;
    }
    
    .pos-cart-head {
        padding: 15px;
    }
    /* Add Close Button to Cart Head if missing on Mobile? */
    /* We can implement toggle logic to close on overlay click */
}
.bhcm-pos-right .widget_shopping_cart_content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bhcm-pos-right ul.cart_list {
    padding: 0;
    margin: 0;
    list-style: none !important;
    overflow-y: auto;
    flex: 1;
}

.bhcm-pos-right ul.cart_list li.mini_cart_item {
    padding: 15px 10px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap; 
    position: relative;
    align-items: flex-start;
    margin: 0;
    list-style: none !important; /* Force remove bullets */
}
.bhcm-pos-right ul.cart_list li.mini_cart_item:before {
    display: none !important; /* Remove any pseudo bullets */
}

/* Image */
.bhcm-pos-right ul.cart_list li img {
    width: 60px; /* Match side cart */
    height: 60px;
    border-radius: 4px;
    margin-right: 15px;
    object-fit: cover;
    margin-left: 0; /* Override default WC */
    float: none; /* Override default WC */
}

/* Info */
.bhcm-pos-right ul.cart_list li a {
    font-weight: 700;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    line-height: 1.3;
}

/* Meta */
.bhcm-pos-right .variation {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 5px;
    margin-left: 0; /* Reset */
    padding-left: 0; /* Reset */
    border-left: none; /* Reset */
}
.bhcm-pos-right .variation dt { display: none; }
.bhcm-pos-right .variation dd { display: inline; margin: 0; }
.bhcm-pos-right .variation dd p { display: inline; margin: 0; }

/* Qty Row (From cart-handler.php output) */
.bhcm-pos-right .bhcm-mini-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 5px;
    padding-left: 75px; /* Indent to align with text */
}

/* Remove Button */
.bhcm-pos-right .mini_cart_item a.remove {
    position: absolute;
    top: 15px;
    right: 0px; /* Adjust for padding */
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    color: #999;
    font-size: 16px;
    line-height: 18px;
    border-radius: 50%;
    border: none;
    text-align: center;
    font-weight: normal;
    display: block !important; /* Ensure visibility */
}
.bhcm-pos-right .mini_cart_item a.remove:hover {
    background: #e74c3c;
    color: #fff;
}

/* Total Section */
.bhcm-pos-right .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    border-top: 1px solid #eee;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-top: auto; /* Push to bottom if flex column */
}
.bhcm-pos-right .woocommerce-mini-cart__total .amount {
    color: #d0021b;
    font-size: 18px;
    font-weight: 800;
}

/* Hide WC Buttons in POS (We have our own Pay button) */
.bhcm-pos-right .woocommerce-mini-cart__buttons {
    display: none !important;
}
.bhcm-card-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.bhcm-quick-qty-always {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 3px;
    border-radius: 20px;
    border: 1px solid #eee;
}

.quick-qty-btn-inv {
    width: 32px;
    height: 32px;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: bold;
    color: #016701 !important; /* Green */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
}
.quick-qty-btn-inv:hover {
    background: #016701 !important;
    color: #fff !important;
    border-color: #016701 !important;
}

.quick-qty-btn-inv.minus {
    color: #666 !important;
}
.quick-qty-btn-inv.minus:hover {
    background: #666 !important;
    color: #fff !important;
    border-color: #666 !important;
}

.quick-qty-val-inv {
    width: 35px;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: #333;
}

/* Hide overlay buttons on desktop if we moved them? 
   No, we kept "Tùy chọn" in overlay.
   "Tùy chọn" is fine.
*/
.bhcm-card-overlay {
    background: rgba(0,0,0,0.3);
    /* Restore if changed */
}
/* --- EMPTY CART STATE --- */
.bhcm-empty-cart-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px;
    text-align: center;
}

.bhcm-empty-img img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 20px;
    opacity: 0.8;
}

.bhcm-empty-cart-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.bhcm-empty-cart-state p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}
.bhcm-mini-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

.bhcm-qty-control {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 3px;
    padding: 2px;
}

.bhcm-qty-control .bhcm-qty-btn {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 0;
    line-height: 1;
}

.bhcm-qty-control .bhcm-qty-btn:hover {
    background: #e0e0e0;
}

.bhcm-qty-control .bhcm-qty-btn.plus {
    color: #016701; /* optional if you want green plus */
}

.bhcm-qty-control input {
    width: 30px;
    height: 24px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: bold;
    font-size: 13px;
    padding: 0;
}

/* --- MENU CART ICON --- */
.bhcm-menu-cart-item {
    display: flex;
    align-items: center;
}

.bhcm-menu-cart-link {
    position: relative;
    display: flex;
    align-items: center;
    color: #016701 !important; /* Brand Green */
    padding: 0 10px;
}

.bhcm-menu-cart-link .dashicons {
    color: #016701;
    transition: transform 0.2s;
}

.bhcm-menu-cart-link:hover .dashicons {
    transform: scale(1.1);
}

.bhcm-menu-cart-count {
    position: absolute;
    top: -8px; /* Adjust to sit on top right corner of icon */
    right: -5px;
    background: #f39200; /* Orange Badge */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff; /* White border for cutout look */
    line-height: 1;
}

/* Coupon Section */
.bhcm-coupon-section {
    padding: 15px 0;
    border-top: 1px dashed #ddd; /* Separator */
    margin-top: 10px;
}

.bhcm-coupon-form {
    display: flex;
    gap: 10px;
}

.bhcm-coupon-form input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
}

.bhcm-coupon-form button {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
}
.bhcm-coupon-form button:hover {
    background: #000;
}

.bhcm-coupon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fff9;
    padding: 8px 10px;
    border: 1px solid #d6f0d6;
    border-radius: 4px;
    margin-bottom: 5px;
}

.bhcm-coupon-row .coupon-code {
    color: #016701;
    font-weight: bold;
}

.remove-coupon {
    color: #dc3545;
    font-size: 12px;
    text-decoration: none;
}

#bhcm-coupon-message {
    font-size: 12px;
    margin-top: 5px;
    color: #dc3545; /* Default to error color, JS can change to green */
}

/* --- BHCM CHECKOUT PAGE --- */

/* 3-Column Layout */
.bhcm-checkout-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    align-items: flex-start;
}

.bhcm-col-info {
    flex: 1 1 300px; /* Grow, Shrink, Basis */
}

.bhcm-col-methods {
    flex: 1 1 250px;
}

.bhcm-col-summary {
    flex: 1 1 350px;
}

/* Card Style */
.bhcm-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 30px;
    border: 1px solid #eee;
}

.bhcm-card h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #333; /* Dark divider line like screenshot */
    display: block;
}

/* Fields with Icons */
.bhcm-field-group {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.bhcm-field-group:last-child {
    border-bottom: none;
}

.bhcm-field-icon {
    width: 30px;
    color: #016701; /* Green Icon */
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bhcm-field-group input,
.bhcm-field-group textarea {
    border: none;
    font-size: 15px;
    color: #333;
    width: 100%;
    padding: 10px;
    background: transparent;
}
.bhcm-field-group input:focus,
.bhcm-field-group textarea:focus {
    outline: none;
    background: #f9f9f9;
}

/* Radio Lists */
.bhcm-radio-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bhcm-radio-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* For payment description */
}

.bhcm-radio-list li label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    color: #555;
    width: 100%;
}

.bhcm-radio-list li input[type="radio"] {
    margin-right: 10px;
    accent-color: #016701;
    width: 18px;
    height: 18px;
}

/* Summary Card */
.bhcm-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.bhcm-summary-header h3 {
    border: none;
    margin: 0;
    padding: 0;
    border-bottom: none; /* override card h3 border */
}

.bhcm-summary-header .badge {
    background: #016701;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

/* Checkout Items */
.bhcm-checkout-items {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.bhcm-checkout-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.bhcm-ci-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 15px;
}

.bhcm-ci-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.bhcm-ci-details {
    flex-grow: 1;
}

.bhcm-ci-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}

.bhcm-ci-row-top .qty {
    color: #016701;
    font-weight: bold;
    margin-right: 5px;
}

.bhcm-ci-row-top .name {
    font-weight: bold;
    flex-grow: 1;
    color: #333;
    font-size: 15px;
    line-height: 1.3;
}

.bhcm-ci-row-top .price {
    font-weight: bold;
    color: #f39200;
    margin: 0 10px;
    white-space: nowrap;
}

.remove-item {
    color: #ccc;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.remove-item:hover {
    color: #dc3545;
}

.bhcm-item-meta {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}

/* Total */
.bhcm-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

.bhcm-summary-total .amount {
    color: #dc3545;
    font-size: 22px;
}
#bhcm-pos-modal
{
    z-index: 7000 !important;
}
#bhcm-food-modal .bhcm-modal-content
{
padding: 0px !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item.mini_cart_item
{
padding-left: 80px !important;
}
.bhcm-shipping-note {
    font-size: 12px;
    color: #666; 
    font-style: italic;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
}

/* Coupon List Shortcode */
.bhcm-coupon-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.bhcm-coupon-item.card-style {
    display: flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #eee;
    transition: transform 0.2s;
}

.bhcm-coupon-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.bhcm-coupon-left {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    text-align: center;
}

.bhcm-coupon-amount {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.bhcm-coupon-type-label {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 5px;
}

.bhcm-coupon-right {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bhcm-coupon-code-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border: 1px dashed #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.bhcm-coupon-code {
    font-weight: 700;
    color: #333;
    font-size: 16px;
    letter-spacing: 1px;
}

.bhcm-copy-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.bhcm-copy-btn:hover {
    background: rgba(255, 107, 107, 0.1);
}

.bhcm-coupon-desc {
    font-size: 14px;
    color: #666;
    margin: 0 0 5px;
    line-height: 1.4;
}

.bhcm-coupon-expiry {
    font-size: 12px;
    color: #999;
    margin-top: auto;
}

/* Place Order Button */
.bhcm-checkout-btn {
    width: 100%;
    background: #016701;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.bhcm-checkout-btn:hover {
    background: #014d01;
}

/* Responsive */
@media (max-width: 768px) {
    .bhcm-checkout-container {
        flex-direction: column;
    }
    .bhcm-col-info, .bhcm-col-methods, .bhcm-col-summary {
        width: 100%;
    }
}

/* --- THANK YOU PAGE --- */
.bhcm-thankyou-wrapper {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
    background: #fff;
    padding: 20px;
}

.bhcm-ty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.ty-cart-icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.ty-cart-icon .dashicons-cart {
    font-size: 60px;
    width: 60px;
    height: 60px;
    color: #cbd5e1; /* Light gray cart */
}

.ty-check {
    position: absolute;
    top: -5px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: #10b981; /* Green */
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ty-check .dashicons {
    color: #fff;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.bhcm-ty-title {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 20px;
}

.bhcm-ty-message {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.bhcm-ty-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.bhcm-btn-outline {
    border: 1px solid #f39200;
    color: #f39200;
    background: #fff;
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
}

.bhcm-btn-solid {
    background: #f39200;
    color: #fff;
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    border: 1px solid #f39200;
}

.bhcm-btn-outline:hover {
    background: #fef4e6;
}

.bhcm-btn-solid:hover {
    background: #d98200;
}

/* --- CUSTOM FOOTER --- */
.bhcm-custom-footer {
    background: #1a1a1a;
    color: #fff;
    font-family: inherit;
    margin-top: 50px;
}

.bhcm-footer-top {
    border-bottom: 1px solid #333;
    padding: 15px 0;
}

.bhcm-ft-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    flex-wrap: wrap;
}

.bhcm-ft-left, .bhcm-ft-right {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.bhcm-ft-left span { margin-right: 10px; }

.bhcm-social-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
}

.bhcm-social-icon.fb {
    background: #1877f2;
    color: #fff;
}
.bhcm-social-icon.zalo {
    background: #0088ff;
    color: #fff;
    font-size: 9px;
    border-radius: 10px; /* Zalo shape logic or round */
}

.bhcm-ft-center h2.footer-logo {
    color: #f39200; /* Gold */
    margin: 0;
    font-family: 'Brush Script MT', cursive; /* Placeholder for logo font */
    font-size: 28px;
}

.bhcm-ft-right a {
    color: #fff;
    text-decoration: none;
    margin-left: 5px;
}

/* Footer Main */
.bhcm-footer-main {
    padding: 50px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.bhcm-footer-grid {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.bhcm-fc-col {
    flex: 1;
    padding: 0 20px;
}

.bhcm-fc-col p {
    color: #aaa;
    margin-bottom: 5px;
    font-size: 14px;
}

.bhcm-fc-col h3 {
    color: #f39200; /* Gold header for center? Use white for side titles based on image */
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Specific col styling */
.bhcm-fc-col:first-child h3,
.bhcm-fc-col:last-child h3 {
    color: #fff; /* Side titles white */
}

.bhcm-fc-col:first-child, 
.bhcm-fc-col:nth-child(2) {
    border-right: 1px solid #333; /* Vertical dividers */
}

.center-col h3 {
    color: #fff; /* Main name white? Image looks like white 'BANH UOT CAY ME' */
    font-size: 20px;
    margin-bottom: 20px;
}

.sub-title {
    color: #f39200;
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
}

.divider-gold {
    width: 60px;
    height: 2px;
    background: #f39200;
    margin: 10px auto;
}

.highlight-time {
    color: #fff !important;
    font-weight: bold;
    font-size: 18px !important;
    margin-top: 10px;
}

.email {
    color: #f39200 !important;
}

/* Footer Bottom */
.bhcm-footer-bottom {
    background: #000;
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
    color: #777;
    border-top: 1px solid #222;
}

/* Floating Buttons */
.bhcm-floating-buttons {
    position: fixed;
    right: 20px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.bhcm-float-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.bhcm-float-btn:hover {
    transform: scale(1.1);
}

.bhcm-float-btn.phone { background: #008000; }
.bhcm-float-btn.messenger { background: #0084ff; }
.bhcm-float-btn.mail { background: #d44638; }
.bhcm-float-btn.up { background: #fff; color: #333; }

/* Responsive */
@media (max-width: 768px) {
    .bhcm-ft-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .bhcm-footer-grid {
        flex-direction: column;
        gap: 30px;
    }
    .bhcm-fc-col {
        border-right: none !important;
    }
}

/* --- MENU GRID --- */
.bhcm-menu-wrapper {
    position: relative;
    padding-bottom: 40px;
}

/* Nav Bar */
.bhcm-menu-nav {
    background: #016701; /* Green */
    margin-bottom: 30px;
    position: sticky;
    top: 60px; /* Adjust based on header height */
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.bhcm-nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
}
.bhcm-nav-scroll::-webkit-scrollbar { 
    display: none; 
}

.bhcm-nav-list {
    display: flex;
    justify-content: center; /* Center on Desktop */
    list-style: none;
    margin: 0;
    padding: 0;
}

.bhcm-nav-list li {
    margin: 0;
    flex-shrink: 0;
}

.bhcm-nav-list li a {
    display: block;
    padding: 15px 25px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: background 0.3s;
}

.bhcm-nav-list li:last-child a {
    border-right: none;
}

.bhcm-nav-list li.active a,
.bhcm-nav-list li a:hover {
    background: #f39200; /* Orange/Gold active state */
}

/* Grid Layout */
.bhcm-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    min-height: 300px;
}

/* Product Card */
.bhcm-product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.bhcm-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.bhcm-prod-img-box {
    position: relative;
    overflow: hidden;
    padding-top: 75%; /* 4:3 Aspect Ratio */
}

.bhcm-prod-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.bhcm-product-card:hover .bhcm-prod-img-box img {
    transform: scale(1.05);
}

/* Badges */
.bhcm-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.bhcm-badge.new {
    background: #4caf50; /* Light Green */
}
.bhcm-badge.hot {
    background: #ff0000; /* Red */
}

/* Overlay & Button */
.bhcm-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}

.bhcm-product-card:hover .bhcm-card-overlay {
    opacity: 1;
}

/* Keep button visible always on touch devices? Usually tricky. 
   For simplicity, we replicate hover on click or just let users tap image to open detail page? 
   No, we want "Đặt món" to open modal. 
   Mobile optimization: Show button always or specific "Add" icon?
   Let's alter overlay for touch: Use media query.
*/

.bhcm-order-btn {
    background: #f39200;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
    transform: translateY(20px);
    transition: transform 0.3s, background 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.bhcm-product-card:hover .bhcm-order-btn {
    transform: translateY(0);
}

.bhcm-order-btn:hover {
    background: #d98200;
}

/* Mobile Button (Hidden on Desktop) */
.bhcm-order-btn-mobile {
    display: none;
    width: 100%;
    margin-top: 10px;
    background: #fff;
    color: #f39200;
    border: 1px solid #f39200;
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.bhcm-order-btn-mobile:hover {
    background: #f39200;
    color: #fff;
}

/* Info */
.bhcm-prod-info {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bhcm-prod-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px;
    color: #333;
    line-height: 1.3;
}
.bhcm-prod-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.bhcm-prod-title a:hover {
    color: #016701;
}
.bhcm-switch-store-link:hover {
    color: var(--bhcm-accent);
}

/* Out of Stock Button */
.bhcm-order-btn.disabled,
.bhcm-order-btn-mobile.disabled {
    background: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.bhcm-prod-price {
    font-size: 16px;
    color: #ff0000; /* Red Price */
    font-weight: bold;
    margin-top: 5px;
}
.bhcm-prod-price del {
    color: #999;
    font-size: 13px;
    margin-right: 5px;
    font-weight: normal;
}
.bhcm-prod-price ins {
    text-decoration: none;
}

/* Loading Skeleton */
.bhcm-grid-loading {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.bhcm-skeleton-card {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    height: 300px;
    animation: pulse 1.5s infinite ease-in-out;
}

.bhcm-skeleton-img {
    background: #eee;
    height: 200px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.bhcm-skeleton-text {
    background: #eee;
    height: 15px;
    width: 80%;
    margin: 0 auto 10px;
    border-radius: 4px;
}

.bhcm-skeleton-text.short {
    width: 40%;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Responsive */
@media (max-width: 992px) {
    .bhcm-product-grid, .bhcm-grid-loading { 
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 768px) {
    .bhcm-product-grid, .bhcm-grid-loading { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }
    
    .bhcm-nav-list {
        justify-content: flex-start; /* Align left for scroll */
        padding: 0 15px; /* Padding for first item */
    }
    
    .bhcm-nav-list li a { 
        border-right: none; 
        border-radius: 20px; /* Pill shape on mobile */
        padding: 8px 15px;
        margin-right: 10px;
        font-size: 13px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .bhcm-nav-list li:last-child a {
        margin-right: 0;
    }
    
    .bhcm-menu-nav {
        background: #016701;
        padding: 10px 0;
        top: 0; /* Reset sticky top if header changes */
    }

    .bhcm-card-overlay {
        display: none;
    }

    .bhcm-prod-info {
        padding: 10px;
    }
    
    .bhcm-order-btn-mobile {
        display: block;
    }
    
    .bhcm-prod-title {
         font-size: 14px;
         height: 36px; /* 2 lines approx */
    }
    
    .bhcm-prod-price {
        font-size: 14px;
    }
}



/* Center Logo Area */
.bhcm-ft-center {
    flex: 0 0 auto;
    text-align: center;
}
.footer-logo-img {
    max-height: 50px; /* Adjust based on bar height */
    width: auto;
    display: block;
}
/* --- FLOATING ACTION BUTTONS --- */
.bhcm-floating-buttons {
    position: fixed;
    right: 15px; /* Spacing from right edge */
    bottom: 50px; /* Moves up from bottom to avoid footer/back-to-top collision */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

.bhcm-float-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    font-size: 20px; /* Icon size */
}

.bhcm-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    color: #fff;
}

/* Specific Colors */
.bhcm-float-btn.phone {
    background-color: #016701; /* Green */
}

.bhcm-float-btn.zalo {
    background-color: #0080ff; /* Zalo Blue */
    font-size: 11px; /* Text 'Zalo' tweak if used */
    font-weight: bold;
}

.bhcm-float-btn.messenger {
    background-color: #0084ff; /* Messenger Blue */
}

.bhcm-float-btn.mail {
    background-color: #dc3545; /* Red/Orange */
}

/* Back To Top (Separate if needed, usually integrated) */
#bhcm-back-to-top {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    font-size: 18px;
    margin-top: 10px; /* Separate from the group slightly */
    display: none; /* JS will toggle this */
}

#bhcm-back-to-top.visible {
    display: flex;
}

/* --- BRANCH LIST SHORTCODE --- */
.bhcm-branch-section {
    margin: 30px 0;
    max-width: 1200px; /* Optional constraint */
}

.bhcm-branch-title {
    color: #006000 !important; /* BHCM Green */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.bhcm-branch-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.bhcm-branch-list {
    flex: 0 0 450px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bhcm-branch-map-wrapper {
    flex: 1;
    min-width: 300px;
    height: 350px; /* Fixed height for map area */
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.bhcm-map-item, 
.bhcm-map-item iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Branch Item Card */
.bhcm-branch-item {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.bhcm-branch-item:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.bhcm-branch-item.active {
    background: #fff8e1; /* Light Orange/Beige */
    border-color: #fcefdc;
}

/* Logo/Icon Placeholder */
.bhcm-branch-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bhcm-branch-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.bhcm-branch-logo-text {
    font-weight: 800;
    color: #5d4037; /* Brown logo text */
    font-family: 'Brush Script MT', cursive; /* Fallback for style */
    font-size: 20px;
    line-height: 1;
    text-align: center;
    display: block; /* Show text if no img, handled by logic */
}

.bhcm-branch-info {
    flex: 1;
}

.bhcm-branch-name {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bhcm-branch-meta {
    margin: 0 0 3px;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .bhcm-branch-container {
        flex-direction: column;
    }
    .bhcm-branch-list {
        flex: auto;
        width: 100%;
    }
    .bhcm-branch-map-wrapper {
        height: 250px;
    }
}