/* ===== NGEMS BOTTOM MENU CSS ===== */
:root {
    --bm-bg: #ffffff;
    --bm-primary: #1d4ed8;
    --bm-text: #4b5563;
    --bm-height: 65px;
    --bm-safe-area: env(safe-area-inset-bottom);
}

#ngems-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bm-height) + var(--bm-safe-area));
    background: var(--bm-bg);
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
    z-index: 100000;
    padding-bottom: var(--bm-safe-area);
    display: none;
}

.bm-items {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    position: relative;
}

.bm-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    color: var(--bm-text);
    gap: 2px;
    background: none;
    border: none;
    padding: 8px 0 !important;
    margin: 0 !important;
    font-family: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.bm-item span { 
    font-size: 10px; 
    font-weight: 500; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bm-icon { 
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s; 
}

.bm-item:hover .bm-icon { 
    transform: translateY(-2px); 
    color: var(--bm-primary); 
}

/* CENTER BUTTON */
.bm-center {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.bm-main-btn {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(255, 165, 0, 0.4);
    border: 4px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

.bm-main-btn .icon-hamburger span { 
    background: #fff; 
}

.bm-main-btn:active { 
    transform: translateX(-50%) scale(0.9) translateY(2px); 
}

/* HAMBURGER ICON */
.icon-hamburger { 
    width: 22px; 
    height: 16px; 
    position: relative; 
    display: block; 
}
.icon-hamburger span { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background: #fff; 
    border-radius: 2px; 
    transition: 0.3s; 
}
.icon-hamburger span:nth-child(1) { top: 0; }
.icon-hamburger span:nth-child(2) { top: 7px; }
.icon-hamburger span:nth-child(3) { top: 14px; }

.bm-main-btn .icon-close { display: none; }
.bm-main-btn .icon-close svg { display: block; }

/* STATE: CLOSE */
.bm-main-btn.is-close { 
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); 
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
    transform: translateX(-50%) rotate(90deg);
}
.bm-main-btn.is-close .icon-hamburger { display: none; }
.bm-main-btn.is-close .icon-close { display: block; transform: rotate(-90deg); }

/* TIKTOK LIVE EFFECT */
.is-live .bm-icon { position: relative; color: #ff0050; }
.is-live::before {
    content: ""; position: absolute; top: 10px; width: 35px; height: 35px;
    background: rgba(255, 0, 80, 0.3); border-radius: 50%; z-index: -1;
    animation: bm-breathing 2s infinite;
}
@keyframes bm-breathing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* POPUPS */
.bm-popup {
    position: fixed; bottom: -100%; left: 0; right: 0;
    background: #fff; border-radius: 20px 20px 0 0;
    z-index: 99999; 
    transition: bottom 0.4s cubic-bezier(0, 0, 0.2, 1);
    max-height: 85vh; 
    box-shadow: 0 -5px 30px rgba(0,0,0,0.15);
    overflow: hidden; 
}
.bm-popup.is-visible { bottom: 0; }

.popup-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 85vh;
}

.popup-header { 
    padding: 20px; 
    border-bottom: 1px solid #eee; 
    text-align: center; 
    flex-shrink: 0; 
}
.popup-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #111; text-transform: uppercase; }

.popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px calc(var(--bm-height) + 30px + var(--bm-safe-area)); 
    -webkit-overflow-scrolling: touch;
}

/* Contact Grid */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px; }
.contact-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #374151; font-size: 12px; transition: 0.3s; }
.contact-item:active { transform: scale(0.9); }
.c-icon { width: 55px; height: 55px; border-radius: 16px; background: #f3f4f6; background-size: 28px; background-position: center; background-repeat: no-repeat; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.c-icon.tiktok { background-color: #000; background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="white"><path d="M16.656 1.029c1.637-0.025 3.262-0.012 4.886-0.025 0.054 2.031 0.878 3.859 2.189 5.213l-0.002-0.002c1.411 1.271 3.247 2.095 5.271 2.235l0.028 0.002v5.036c-1.912-0.048-3.71-0.489-5.331-1.247l0.082 0.034c-0.784-0.377-1.447-0.764-2.077-1.196l0.052 0.034c-0.012 3.649 0.012 7.298-0.025 10.934-0.103 1.853-0.719 3.543-1.707 4.954l0.020-0.031c-1.652 2.366-4.328 3.919-7.371 4.011l-0.014 0c-0.123 0.006-0.268 0.009-0.414 0.009-1.73 0-3.347-0.482-4.725-1.319l0.040 0.023c-2.508-1.509-4.238-4.091-4.558-7.094l-0.004-0.041c-0.025-0.625-0.037-1.25-0.012-1.862 0.49-4.779 4.494-8.476 9.361-8.476 0.547 0 1.083 0.047 1.604 0.136l-0.056-0.008c0.025 1.849-0.050 3.699-0.050 5.548-0.423-0.153-0.911-0.242-1.42-0.242-1.868 0-3.457 1.194-4.045 2.861l-0.009 0.030c-0.133 0.427-0.21 0.918-0.21 1.426 0 0.206 0.013 0.41 0.037 0.61l-0.002-0.024c0.332 2.046 2.086 3.59 4.201 3.59 0.061 0 0.121-0.001 0.181-0.004l-0.009 0c1.463-0.044 2.733-0.831 3.451-1.994l0.010-0.018c0.267-0.372 0.45-0.822 0.511-1.311l0.001-0.014c0.125-2.237 0.075-4.461 0.087-6.698 0.012-5.036-0.012-10.060 0.025-15.083z"/></svg>'); }
.c-icon.zalo { background-color: #0068ff; background-image: url('data:image/svg+xml,<svg viewBox="0 0 48 48" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M24 4C12.95 4 4 12.06 4 22c0 5.86 3.16 11.08 8.08 14.49L10 44l8.32-3.7C20.14 40.73 22.04 41 24 41c11.05 0 20-8.06 20-18S35.05 4 24 4z"/></svg>'); background-size: 32px; }
.c-icon.messenger { background-color: #0084ff; background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.477 2 2 6.145 2 11.258c0 2.91 1.455 5.512 3.735 7.202V22l3.373-1.851c.915.253 1.887.391 2.892.391 5.523 0 10-4.145 10-9.282C22 6.145 17.523 2 12 2zm1.002 12.441l-2.56-2.73-4.996 2.73 5.492-5.83 2.622 2.73 4.935-2.73-5.493 5.83z"/></svg>'); background-size: 28px; }
.c-icon.phone { background-color: #22c55e; background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>'); }
.c-icon.shopping-cart { background-color: #ee4d2d; background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>'); }
.c-icon.shopping-bag { background-color: #00008b; background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path><path d="M3 6h18"></path><path d="M16 10a4 4 0 0 1-8 0"></path></svg>'); }

.info-item { font-size: 13px; color: #666; margin-bottom: 8px; line-height: 1.5; }

/* Overlay */
.bm-overlay { 
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); 
    z-index: 99998; opacity: 0; pointer-events: none; transition: 0.3s; 
}
.bm-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* RE-STYLE STICKY LIST FOR POPUP */
.popup-body .sticky-cat-list { 
    padding: 0 !important; 
    margin: 0 !important; 
    list-style: none !important; 
}
.popup-body .sticky-cat-list li { list-style: none !important; }
.popup-body .cat-item { margin-bottom: 0; border-bottom: 1px solid #f3f4f6; list-style: none !important; }
.popup-body .cat-row { display: flex; align-items: center; justify-content: space-between; }
.popup-body .cat-item a { border: none; margin-bottom: 0; flex: 1; padding: 12px 15px; list-style: none !important; }

.popup-body .toggle-sub {
    width: 50px; height: 48px; display: flex; align-items: center; justify-content: center;
    color: #9ca3af; transition: transform 0.3s;
}
.popup-body .has-children.is-open > .cat-row .toggle-sub { transform: rotate(180deg); color: var(--bm-primary); }
.popup-body .sub-cat-list { background: #f9fafb; padding-left: 20px; border-left: none; }
.popup-body .child-cat-link { font-size: 13px; color: #4b5563; padding: 10px 15px; }

@media (max-width: 767px) {
    #ngems-bottom-menu { display: block; }
}