/* In Vĩnh Phát · phần chung: biến màu, header, menu, footer, nút liên hệ. */
/* In Vĩnh Phát · invinhphat.vn — trang chủ bán hàng. Mọi thứ nằm trong .vp để không đụng giao diện còn lại. */
.vp{
  --c:#00ADED; --b:#1A5FE0; --b2:#2D63F5; --m:#E5097F; --y:#FFD23F; --z:#0068FF; --ok:#0E9F6E;
  --ink:#0F1B2D; --ink2:#46536A; --ink3:#7A8699; --line:#E3E8F0; --bg:#F2F5FA; --card:#FFFFFF; --soft:#F7F9FC;
  --grad:linear-gradient(100deg,#0091D0 0%,#2D5BF0 55%,#C3127F 100%);
  --ww:clamp(1280px,92vw,1520px); --r:14px; --sh:0 1px 2px rgba(15,27,45,.05),0 6px 18px -10px rgba(15,27,45,.18);
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  position:relative;max-width:none;font:400 16.5px/1.55 var(--f);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.vp *,.vp *::before,.vp *::after{box-sizing:border-box}
.vp a{color:inherit;text-decoration:none}
.vp img{display:block;max-width:100%;height:auto;border:0}
.vp ul,.vp ol{list-style:none;margin:0;padding:0}
.vp li{margin:0}
.vp h1,.vp h2,.vp h3,.vp h4,.vp p,.vp figure,.vp blockquote{margin:0;padding:0;color:inherit;font-family:var(--f);letter-spacing:normal;text-transform:none}
.vp button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:normal;min-height:0;line-height:inherit;box-shadow:none}
.vp input,.vp select,.vp textarea{font:inherit;color:var(--ink);margin:0;box-shadow:none;max-width:100%}
.vp svg{flex-shrink:0}
.vp .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vp .wrap{max-width:var(--ww);margin-inline:auto;padding-inline:clamp(12px,3vw,24px)}
.vp .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vp :focus-visible{outline:3px solid rgba(45,99,245,.45);outline-offset:2px;border-radius:6px}

/* ---------- top strip ---------- */
.vp .tb{background:#0B1626;color:#C9D3E1;font-size:14px}
.vp .tb .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:36px}
.vp .tb-promo{display:flex;gap:1.4rem;overflow:hidden;white-space:nowrap}
.vp .tb-promo span{display:inline-flex;align-items:center;gap:.4rem}
.vp .tb-promo .i{width:15px;height:15px;color:var(--y)}
.vp .tb-right{display:flex;align-items:center;gap:1.2rem;white-space:nowrap}
.vp .tb-right span{display:inline-flex;align-items:center;gap:.35rem}
.vp .tb-right .i{width:15px;height:15px}
.vp .tb-right a:hover{color:#fff}
.vp .tb-right b{color:#fff;font-weight:700}
@media (max-width:900px){.vp .tb-right{display:none}.vp .tb .wrap{justify-content:center}.vp .tb-promo span:not(:first-child){display:none}}

/* ---------- header ---------- */
.vp .sticky{position:sticky;top:0;z-index:50}
.vp .hd{background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.vp .sticky.scrolled .hd{box-shadow:0 8px 24px -16px rgba(15,27,45,.35)}
.vp .hd-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(15.5px,2.64vw,35px);min-height:76px}
.vp .logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.vp .logo svg{width:46px;height:46px}
.vp .logo-word{display:block;font:800 23px/1 var(--f);letter-spacing:.01em;color:var(--c)}
.vp .logo-sub{display:block;margin-top:5px;font:600 10.5px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.vp .search{display:flex;align-items:stretch;height:46px;border:2px solid var(--b2);border-radius:12px;background:#fff;overflow:hidden}
.vp .search select{flex:0 0 auto;width:auto;max-width:150px;height:auto;padding:0 2rem 0 .9rem;border:0;border-right:1px solid var(--line);border-radius:0;background:#F4F7FD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2346536A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .7rem center;font-size:15px;font-weight:600;color:var(--ink2);-webkit-appearance:none;appearance:none;cursor:pointer}
.vp .search input{flex:1 1 auto;min-width:0;height:auto;padding:0 1rem;border:0;border-radius:0;background:transparent;font-size:16px;outline:none}
.vp .search input::placeholder{color:#97A2B4}
.vp .search button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:0 1.15rem;background:var(--b2);color:#fff;font-weight:700;font-size:15.5px}
.vp .search button:hover{background:var(--b)}
.vp .hd-act{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.vp .hot{display:flex;align-items:center;gap:.6rem;line-height:1.2}
.vp .hot .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#FFF0F7;color:var(--m)}
.vp .hot small{display:block;font-size:13px;color:var(--ink3)}
.vp .hot b{display:block;font-size:17.5px;font-weight:800;color:var(--m);font-variant-numeric:tabular-nums}
.vp .cartb{position:relative;display:flex;align-items:center;gap:.55rem;padding:.45rem .8rem .45rem .55rem;border:1.5px solid var(--line);border-radius:12px;font-weight:700;font-size:15.5px}
.vp .cartb:hover{border-color:var(--b2);color:var(--b2)}
.vp .cartb .i{width:24px;height:24px}
.vp .cnt{position:absolute;left:24px;top:2px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--m);color:#fff;font:700 11px/19px var(--f);text-align:center}
.vp .menu-btn{display:none;width:42px;height:42px;place-items:center;border-radius:10px;border:1.5px solid var(--line)}
@media (max-width:1100px){.vp .hot{display:none}}
@media (max-width:860px){
  .vp .hd-in{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px;padding-block:10px;min-height:0}
  .vp .menu-btn{display:grid}
  .vp .logo{justify-self:start}
  .vp .logo svg{width:38px;height:38px}.vp .logo-word{font-size:18.5px}.vp .logo-sub{font-size:9px}
  .vp .search{grid-column:1/-1;grid-row:2;height:42px}
  .vp .search select{display:none}
  .vp .search button span{display:none}
  .vp .cartb span.t{display:none}
  .vp .cartb{padding:.4rem .5rem}
}

/* ---------- nav bar ---------- */
.vp .nb{background:var(--grad);color:#fff}
.vp .nb .wrap{display:flex;align-items:center;gap:.4rem;min-height:48px}
.vp .nb-all{display:flex;align-items:center;gap:.55rem;min-width:clamp(244px,17vw,282px);height:48px;padding:0 1rem;margin-right:.6rem;background:rgba(11,22,38,.22);font-weight:700;font-size:15.5px;white-space:nowrap}
.vp .nb-links{display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vp .nb-links::-webkit-scrollbar{display:none}
.vp .nb-links a{padding:.5rem .8rem;border-radius:8px;font-weight:600;font-size:15.5px;white-space:nowrap}
.vp .nb-links a:hover,.vp .nb-links a.on{background:rgba(255,255,255,.16)}
.vp .nb-quote{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .95rem;border-radius:99px;background:var(--y);color:var(--ink);font-weight:800;font-size:15px;white-space:nowrap}
.vp .nb-quote:hover{background:#FFDD5C}
@media (max-width:1100px){.vp .nb-all{display:none}}
@media (max-width:860px){.vp .nb-quote{display:none}.vp .nb .wrap{min-height:44px}.vp .nb-links a{font-size:15px;padding:.42rem .7rem}}

/* ---------- drawer ---------- */
.vp .drawer[hidden]{display:none}
.vp .drawer{position:fixed;inset:0;z-index:90}
.vp .drawer-bg{position:absolute;inset:0;background:rgba(11,22,38,.5)}
.vp .drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(330px,86vw);background:#fff;overflow-y:auto;padding:1rem 1rem 2rem;box-shadow:12px 0 40px -20px rgba(0,0,0,.5)}
.vp .drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.vp .drawer h3{margin:1.1rem 0 .5rem;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.vp .drawer a{display:flex;align-items:center;justify-content:space-between;padding:.7rem .4rem;border-bottom:1px solid var(--line);font-weight:600}
.vp .drawer a small{color:var(--ink3);font-weight:500}

/* ---------- buttons ---------- */
.vp .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1.15rem;border-radius:11px;font-weight:700;font-size:16px;line-height:1.1;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.vp .btn .i{width:18px;height:18px}
.vp .btn:hover{transform:translateY(-1px)}
.vp .btn-y{background:var(--y);color:var(--ink);box-shadow:0 8px 18px -10px rgba(242,165,26,.9)}
.vp .btn-y:hover{background:#FFDD5C}
.vp .btn-w{background:#fff;color:var(--ink)}
.vp .btn-g{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.vp .btn-k{background:var(--ink);color:#fff}
.vp .btn-z{background:var(--z);color:#fff;box-shadow:0 8px 18px -10px rgba(0,104,255,.9)}
.vp .btn-z:hover{background:#0057D9}
.vp .btn-b{background:var(--b2);color:#fff}
.vp .btn-o{background:#fff;color:var(--b2);box-shadow:inset 0 0 0 1.5px var(--b2)}
.vp .zl{display:inline-grid;place-items:center;width:30px;height:22px;border-radius:6px;background:#fff;color:var(--z);font:900 10px/1 var(--f);letter-spacing:-.02em}

/* ---------- footer ---------- */
.vp .foot{position:relative;margin-top:clamp(30px,4vw,48px);color:#DCE4EE;font-size:15.5px;overflow:hidden;
  background:radial-gradient(55% 70% at 0% 0%,rgba(0,173,237,.18),transparent 62%),radial-gradient(45% 65% at 100% 100%,rgba(229,9,127,.18),transparent 62%),linear-gradient(180deg,#0E1B30,#0A1424)}
.vp .foot::before{content:"";position:absolute;left:0;top:0;width:min(46vw,620px);height:420px;background-image:radial-gradient(rgba(255,255,255,.12) 1.6px,transparent 2.1px);background-size:18px 18px;-webkit-mask-image:radial-gradient(90% 90% at 0 0,#000,transparent 70%);mask-image:radial-gradient(90% 90% at 0 0,#000,transparent 70%);pointer-events:none}
.vp .foot::after{content:"";position:absolute;right:-60px;bottom:40px;width:360px;height:360px;opacity:.07;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='26'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Cpath d='M50 4v92M4 50h92'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.vp .foot>*{position:relative;z-index:1}
.vp .foot-bar{height:8px;background:repeating-linear-gradient(90deg,#00ADED 0 56px,#E5097F 56px 112px,#FFD23F 112px 168px,#1F2A3C 168px 224px,#7FD6F6 224px 280px,#F284BF 280px 336px,#FFE79F 336px 392px,#8A919C 392px 448px)}
.vp .foot-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(26px,3.4vw,40px);padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);border-radius:18px;background:linear-gradient(110deg,rgba(0,145,208,.32),rgba(45,91,240,.28) 50%,rgba(209,10,122,.3));border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -26px rgba(0,0,0,.7)}
.vp .fc-l{display:flex;align-items:center;gap:16px;min-width:0}
.vp .fc-l .mk{display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:16px;background:#fff}
.vp .fc-l .mk svg{width:44px;height:44px}
.vp .fc-l b{display:block;font:800 clamp(20px,2vw,25px)/1.2 var(--f);color:#fff}
.vp .fc-l span{display:block;margin-top:.2rem;font-size:15px;color:#C9D3E1}
.vp .fc-r{display:flex;flex-wrap:wrap;gap:10px}
.vp .foot-top{padding-block:clamp(28px,3.6vw,42px) 6px}
.vp .foot-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:30px 28px}
@media (max-width:1100px){.vp .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vp .foot-brand{grid-column:1/-1}}
@media (max-width:560px){.vp .foot-grid{gap:26px 14px}.vp .fc-addr,.vp .fc-reach{grid-column:1/-1}.vp .fc-prod{order:1}.vp .fc-pol{order:2}.vp .fc-addr{order:3}.vp .fc-reach{order:4}}
.vp .foot h4{position:relative;margin:0 0 1.15rem;padding-bottom:.6rem;font:800 15.5px/1.2 var(--f);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.vp .foot h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:2px;background:var(--hc,#00ADED)}
.vp .fc-addr h4{--hc:#E5097F}.vp .fc-reach h4{--hc:#FFD23F}.vp .fc-pol h4{--hc:#7EA4FF}
.vp .foot ul{display:grid;gap:.6rem}
.vp .foot .logo{display:inline-flex;padding:.55rem .9rem .55rem .6rem;background:#fff;border-radius:14px;box-shadow:5px 5px 0 rgba(0,173,237,.55)}
.vp .foot .logo-sub{color:var(--ink);white-space:nowrap}
.vp .foot .about{margin:1.1rem 0;color:#B6C2D2;max-width:27rem;line-height:1.65}
.vp .social{display:flex;gap:10px;margin-top:1rem}
.vp .social a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font:900 11px/1 var(--f);transition:background .2s,transform .2s}
.vp .social a:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
.vp .social a.z{background:var(--z);border-color:var(--z)}
.vp .social .i{width:20px;height:20px}
.vp .foot-links a{display:inline-flex;align-items:center;gap:.45rem;color:#C9D3E1;transition:color .2s,transform .2s}
.vp .foot-links a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hc,#00ADED);opacity:.55;transition:opacity .2s}
.vp .fc-pol .foot-links a::before{background:#7EA4FF}
.vp .foot-links a:hover{color:#fff;transform:translateX(3px)}
.vp .foot-links a:hover::before{opacity:1}
.vp .open-st{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;margin-top:.2rem;padding:.55rem .9rem;border-radius:10px;background:rgba(237,242,248,.07);border:1px solid rgba(237,242,248,.16);font-size:15px;color:#B6C2D2}
.vp .open-st b{color:#fff}
.vp .open-st i{width:9px;height:9px;border-radius:50%;background:#00ADED;animation:vp-ping 1.8s ease-out infinite}
.vp .open-st.is-closed i{background:#E5097F;animation:none}
@keyframes vp-ping{0%{box-shadow:0 0 0 0 rgba(0,173,237,.6)}100%{box-shadow:0 0 0 9px rgba(0,173,237,0)}}
.vp .addr{gap:.7rem!important}
.vp .addr li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.6rem;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#C9D3E1;line-height:1.5;font-size:15px}
.vp .addr .i{width:20px;height:20px;margin-top:2px}
.vp .addr li:nth-child(1) .i{color:#00ADED}.vp .addr li:nth-child(2) .i{color:#FF5FA8}.vp .addr li:nth-child(3) .i{color:#FFD23F}
.vp .addr b{display:block;color:#fff}
.vp .addr a.go{display:inline-block;margin-top:.25rem;font-size:14px;font-weight:700;color:#7FD6F6}
.vp .reach li{display:grid;gap:.1rem}
.vp .reach span{font-size:14px;color:#8D9BAE}
.vp .reach a{color:#fff;font-weight:700;font-size:16px}
.vp .foot-bottom{margin-top:30px;background:rgba(5,10,18,.55);border-top:1px solid rgba(237,242,248,.1);font-size:14.5px;color:#9AA8BB}
.vp .fb-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 28px;padding-block:18px 20px}
.vp .fb-in p{display:grid;gap:.25rem}
.vp .fb-r{justify-items:end;text-align:right}
.vp .fb-c{justify-items:center}
.vp .foot-bottom b{color:#fff}
.vp .foot-bottom a{color:#C9D3E1}
.vp .foot-bottom a:hover{color:#fff}
.vp .made{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .55rem .45rem .9rem;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#B6C2D2;white-space:nowrap}
.vp .dlc{display:inline-flex;align-items:center;gap:.45rem;padding:.24rem .65rem;border:1px solid #364353;border-radius:6px;background:#1C2537;font:700 12.5px/1.25 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.07em;color:#F4CCDD;-webkit-user-select:none;user-select:none;cursor:default}
.vp .dlc i{width:6px;height:6px;border-radius:50%;background:#C59338}
.vp .dlc::after{content:"Dev Loc CD"}
@media (max-width:860px){.vp .fb-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.vp .fb-in p,.vp .fb-r{justify-items:center;text-align:center}.vp .foot-cta{flex-direction:column;align-items:flex-start}}

/* ---------- floating + mobile bar + toast ---------- */
.vp .fab{position:fixed;right:18px;bottom:22px;z-index:60;display:grid;gap:10px}
.vp .fab a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);transition:transform .15s}
.vp .fab a:hover{transform:scale(1.06)}
.vp .fab .z{background:var(--z);font:900 14.5px/1 var(--f)}
.vp .fab .p{background:var(--m);animation:vp-ring 2.6s ease-in-out infinite}
.vp .fab .i{width:24px;height:24px}
@keyframes vp-ring{0%,70%,100%{box-shadow:0 0 0 0 rgba(229,9,127,.45)}85%{box-shadow:0 0 0 12px rgba(229,9,127,0)}}
.vp .mbar{display:none}
@media (max-width:860px){
  .vp .fab{display:none}
  .vp .mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(15,27,45,.4);padding-bottom:env(safe-area-inset-bottom,0)}
  .vp .mbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0 .45rem;font-size:12.5px;font-weight:700;color:var(--ink2)}
  .vp .mbar a .i{width:22px;height:22px}
  .vp .mbar a.call{color:var(--m)}
  .vp .mbar a.zalo{color:var(--z)}
  .vp .mbar .cnt{left:calc(50% + 4px);top:3px}
  .vp{padding-bottom:62px}
}
.vp .toast{position:fixed;left:50%;bottom:28px;z-index:95;display:flex;align-items:center;gap:.8rem;max-width:min(92vw,460px);padding:.75rem .9rem .75rem 1rem;border-radius:12px;background:#0F1B2D;color:#fff;font-size:15.5px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .3s,opacity .3s}
.vp .toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.vp .toast .i{color:#3DDC97}
.vp .toast a{margin-left:auto;padding:.35rem .7rem;border-radius:8px;background:var(--y);color:var(--ink);font-weight:800;font-size:14.5px;white-space:nowrap}
@media (max-width:860px){.vp .toast{bottom:78px}}
@media (prefers-reduced-motion:reduce){.vp *{transition:none!important;animation:none!important}}

/* ---------- plugin: full-page template + WordPress admin bar ---------- */
html.vptc-html,body.vptc-home{margin:0;padding:0;background:#F2F5FA}
html.vptc-html,body.vptc-home{overflow-x:clip!important}
.admin-bar .vp .sticky{top:32px}
@media screen and (max-width:782px){.admin-bar .vp .sticky{top:46px}}
@media screen and (max-width:600px){.admin-bar .vp .sticky{top:0}}
.vp .pc .add.view .i{width:18px;height:18px}
.vp .collage .ph-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.vp.vp-shell{display:contents}
.vp h1,.vp h2,.vp h3,.vp h4{width:auto}
.vp label{display:inline;font-weight:inherit;font-size:inherit;margin:0}
.vp .search input[type=search]{-webkit-appearance:none;appearance:none;box-shadow:none;vertical-align:baseline;width:auto;max-width:none}
.vp .search select{display:block;box-shadow:none;margin:0;vertical-align:baseline}
.vp .nb a,.vp .tb a,.vp .foot a,.vp .drawer a{text-decoration:none}
@media (min-width:1101px) and (max-width:1499px){.vp .nb-links a{padding:.5rem .62rem;font-size:15px}.vp .nb-links a.nb-home{display:none}}
/* theme/plugin markup printed in wp_footer must stay hidden even when the theme CSS is not loaded */
.mfp-hide{display:none!important}
#button-contact-vr,#top-link{display:none!important}
@media (max-width:860px){.vp .mbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}