/* VibeTouch site chrome for legacy static pages (inc/nav.php + inc/footer.php).
   CMS pages get the same look from style.css + vibetouch-theme.css. */
:root {
    --vtc-black: #07080b;
    --vtc-line: rgba(255,255,255,.08);
    --vtc-lime: #8cc63f;
    --vtc-teal: #00d49b;
    --vtc-grad: linear-gradient(110deg, #8cc63f 0%, #00d49b 100%);
    --vtc-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.topbar, .header, .vt-footer, .m-bottom-nav, .back-top, .nav-overlay { font-family: var(--vtc-font); box-sizing: border-box; }
.topbar *, .header *, .vt-footer *, .m-bottom-nav * { box-sizing: border-box; }
.topbar .wrap, .header .wrap, .vt-footer .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.scroll-progress { display: none; }

/* Top bar */
.topbar { background: #000; color: rgba(255,255,255,.62); font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--vtc-line); position: relative; z-index: 1001; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.topbar-left { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar-left a { color: rgba(255,255,255,.72); font-weight: 500; }
.topbar-left a:hover { color: #fff; }
.topbar-left i { color: var(--vtc-lime); margin-right: 5px; font-size: 11px; }
.topbar-center { color: rgba(255,255,255,.55); letter-spacing: .04em; font-weight: 500; text-align: center; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-social { color: rgba(255,255,255,.6); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.topbar-social:hover { color: #000; background: var(--vtc-lime); }
.topbar-gem { color: var(--vtc-lime) !important; font-weight: 700; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; border: 1px solid rgba(140,198,63,.45); white-space: nowrap; }
.topbar-gem:hover { background: var(--vtc-lime); color: #000 !important; }

/* Header */
body > .header { position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--vtc-black); border-bottom: 1px solid var(--vtc-line); }
.header .header-inner { display: flex; align-items: center; gap: 16px; height: 74px; }
.header .brand { flex-shrink: 0; display: flex; align-items: center; }
.header .brand img { height: 40px; width: auto; max-height: none; display: block; }
.header .nav { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; gap: 4px; }
.header .nav > a, .header .nav-drop > button {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 0; background: none;
    color: rgba(255,255,255,.82); font: 600 14px/1.2 var(--vtc-font); cursor: pointer; white-space: nowrap;
}
.header .nav > a:hover, .header .nav-drop > button:hover, .header .nav-drop:hover > button { color: #fff; background: rgba(255,255,255,.07); }
.header .nav-drop { position: relative; }
.header .nav-drop > button i { font-size: 9px; opacity: .55; }
.header .nav-drop-menu {
    position: absolute; top: calc(100% + 14px); left: 0; min-width: 230px; z-index: 1100;
    background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease;
}
.header .nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.header .nav-drop:hover .nav-drop-menu, .header .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.header .nav-drop-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: #1f2430; border-radius: 10px; }
.header .nav-drop-menu a:hover { background: #f4f8ee; color: #000; }
.header .nav-mega { display: grid; grid-template-columns: 1fr 1fr; min-width: 460px; gap: 2px; }
.header .nav-mega-all { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid #eee; color: #4f8a12 !important; font-weight: 700 !important; }
.header .nav-cat-ico { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #f2f8e9; border: 1px solid #e1efcc; overflow: hidden; }
.header .nav-cat-ico img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.header .nav-cat-ico i { font-size: 14px; color: #4f8a12; }
.header .nav-drawer-head, .header .nav-drawer-foot { display: none; }
.header .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.header .header-search { display: flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 3px 3px 3px 14px; margin: 0; }
.header .header-search input { border: 0; background: transparent; width: 170px; color: #fff; font: 13px var(--vtc-font); outline: none; padding: 0; margin: 0; height: auto; }
.header .header-search input::placeholder { color: rgba(255,255,255,.45); }
.header .header-search button { background: var(--vtc-grad); color: #000; border: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.header .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.header .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10050; opacity: 0; visibility: hidden; transition: .28s ease; }
.nav-overlay.open { opacity: 1; visibility: visible; }

/* Footer */
.footer.vt-footer { position: relative; background: var(--vtc-black); color: rgba(255,255,255,.6); padding: 80px 0 0; border-top: 1px solid var(--vtc-line); }
.vt-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1.35fr; gap: 40px; padding-bottom: 48px; }
.vt-footer-logo { height: 40px; width: auto; max-height: none; margin-bottom: 18px; }
.vt-footer-brand p { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.75; max-width: 320px; }
.vt-footer h4 { color: #fff; font: 700 13px/1.3 var(--vtc-font); margin: 0 0 20px; letter-spacing: .12em; text-transform: uppercase; }
.vt-footer .footer-links { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.vt-footer .footer-links li { margin: 0; padding: 0; line-height: 1.45; }
.vt-footer .footer-links a { color: rgba(255,255,255,.62); font-size: 14px; transition: color .2s; }
.vt-footer .footer-links a:hover { color: var(--vtc-lime); }
.vt-footer .footer-contact { list-style: none; margin: 0; padding: 0; }
.vt-footer .footer-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; margin-bottom: 12px; color: rgba(255,255,255,.62); }
.vt-footer .footer-contact i { color: var(--vtc-lime); margin-top: 4px; width: 14px; flex-shrink: 0; }
.vt-footer .footer-contact a { color: rgba(255,255,255,.75); }
.vt-footer-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 13.5px; font-weight: 600; }
.vt-footer-wa i { color: #25d366; font-size: 16px; }
.vt-footer-wa:hover { border-color: #25d366; color: #fff; }
.vt-footer .social { display: flex; gap: 8px; margin-top: 22px; }
.vt-footer .social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.vt-footer .social a:hover { background: var(--vtc-lime); color: #000; border-color: var(--vtc-lime); }
.vt-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--vtc-line); font-size: 13px; color: rgba(255,255,255,.5); }
.vt-footer-bottom p { margin: 0; }
.vt-mii { color: var(--vtc-lime); font-weight: 600; margin-left: 6px; }
.vt-footer-legal { display: flex; gap: 22px; }
.vt-footer-legal a { color: rgba(255,255,255,.55); font-size: 13px; }
.vt-footer-legal a:hover { color: #fff; }
.footer-app { display: none; }

.back-top { position: fixed; right: 20px; bottom: 24px; z-index: 900; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: var(--vtc-black); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: .25s; }
.back-top.visible { opacity: 1; visibility: visible; }
.m-bottom-nav { display: none; }

/* Legacy page heroes were built for an overlaid header */
.common-hero { padding-top: 90px !important; }
.common-hero .arrow i { font-family: inherit !important; font-style: normal; font-weight: 700; }
.common-hero .arrow i::before { content: '\203A'; }

@media (max-width: 1240px) {
    .topbar-center { display: none; }
    .header .header-search input { width: 130px; }
}
@media (max-width: 1100px) {
    .header .header-inner { height: 64px; }
    .header .nav-toggle { display: flex; }
    .header .nav {
        position: fixed; top: 0; right: 0; width: min(80vw, 360px); height: 100vh; height: 100dvh; z-index: 10070;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: #fff;
        padding: 10px 14px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto;
        transform: translate3d(100%, 0, 0); visibility: hidden; transition: transform .32s cubic-bezier(.22,1,.36,1), visibility .32s;
        box-shadow: -18px 0 40px rgba(0,0,0,.25);
    }
    .header .nav.open { transform: none; visibility: visible; }
    body.nav-open { overflow: hidden; }
    .header .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 16px; margin-bottom: 6px; border-bottom: 1px solid #eef0f3; }
    .header .nav-drawer-brand { display: flex; align-items: center; gap: 10px; }
    .header .nav-drawer-brand img { height: 28px; width: auto; }
    .header .nav-drawer-brand span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #04725a; }
    .header .nav-drawer-close { width: 36px; height: 36px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; color: #0f172a; cursor: pointer; }
    .header .nav > a, .header .nav-drop > button { width: 100%; justify-content: space-between; padding: 13px 10px; border-radius: 0; border-bottom: 1px solid #eef2f7; color: #0f172a; font-weight: 700; }
    .header .nav > a:hover, .header .nav-drop > button:hover, .header .nav-drop:hover > button { background: transparent; color: #000; }
    .header .nav-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; padding: 0 0 8px 8px; min-width: 0; }
    .header .nav-drop-menu::before { display: none; }
    .header .nav-drop.open .nav-drop-menu { display: block; }
    .header .nav-mega { grid-template-columns: 1fr; min-width: 0; }
    .header .nav-drawer-foot { display: grid; gap: 4px; margin-top: auto; padding: 18px 10px 4px; border-top: 1px solid #eef0f3; }
    .header .nav-drawer-foot a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; font-weight: 600; color: #1f2430; }
    .header .nav-drawer-foot i { width: 16px; color: #4f8a12; }
    .vt-footer-top { grid-template-columns: 1fr 1fr 1fr; }
    .vt-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .hide-m { display: none !important; }
    .topbar .wrap, .header .wrap, .vt-footer .wrap { padding: 0 14px; }
    .header .header-inner { height: 56px; }
    .header .brand img { height: 30px; }
    .header .header-search { display: none; }
    .footer.vt-footer { padding-top: 48px; }
    .vt-footer-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 32px; }
    .vt-footer-contact { grid-column: 1 / -1; }
    .vt-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    .m-bottom-nav {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10030;
        background: #fff; border-top: 1px solid #e8eaee; box-shadow: 0 -4px 18px rgba(0,0,0,.05); padding: 0 6px env(safe-area-inset-bottom);
    }
    .m-bottom-item { position: relative; appearance: none; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; color: #6b7280; font: 600 10.5px/1.1 var(--vtc-font); cursor: pointer; }
    .m-bottom-item i { font-size: 17px; }
    .m-bottom-item.is-active { color: #111; }
    .m-bottom-item.is-active::before { content: ''; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--vtc-grad); }
    .back-top { bottom: calc(70px + env(safe-area-inset-bottom)); width: 36px; height: 36px; }
    .common-hero { padding-top: 60px !important; }
    .m-bottom-item { font-size: 11px; }
    .topbar-gem { font-size: 12px; padding: 4px 12px; }
    .header .nav-toggle { width: 44px; height: 44px; align-items: center; justify-content: center; }
}