/* GUVIET ordering workspace: presentation only; existing plugin controls retained. */
/* Balanced header navigation and readable store information. */
#guviet-order-app .header-inner .header-links{display:grid;grid-template-columns:repeat(3,max-content);align-items:center;justify-content:center;gap:clamp(12px,2vw,28px);padding-inline:8px}
#guviet-order-app .header-inner .header-links a,#guviet-order-app .header-inner .header-links button{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;white-space:nowrap;text-align:center}
#guviet-order-app .announcement{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 40px;max-width:1260px;margin-inline:auto;line-height:1.5}
#guviet-order-app .announcement:has(.gv-info-item)>svg{display:none}
#guviet-order-app .announcement .gv-info-item{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
#guviet-order-app .announcement .gv-info-item svg{display:block;width:16px;height:16px;flex:0 0 16px}
@media(max-width:760px){
#guviet-order-app .header-inner .header-links{grid-template-columns:1fr 1fr 1.35fr;justify-content:stretch;gap:4px;padding:3px 6px 5px;box-sizing:border-box}
#guviet-order-app .header-inner .header-links a,#guviet-order-app .header-inner .header-links button{padding:8px 3px;font-size:12px;line-height:1.3}
#guviet-order-app .announcement{flex-direction:column;gap:10px;padding:12px!important;font-size:11px!important}
}
@media(max-width:360px){#guviet-order-app .header-inner .header-links a,#guviet-order-app .header-inner .header-links button{font-size:11px}}

@media(max-width:760px){
#wpvibe-preview-banner{padding:6px 8px!important;gap:7px!important;min-height:42px!important;font-size:10px!important;flex-wrap:nowrap!important}
#wpvibe-preview-banner .wpvibe-info,#wpvibe-preview-banner .wpvibe-btn-live{display:none!important}
#wpvibe-preview-banner .wpvibe-btn{padding:5px 8px!important;white-space:nowrap}
body:has(#wpvibe-preview-banner) #guviet-order-app .mobile-cart{bottom:57px}
body:has(#wpvibe-preview-banner) #guviet-order-app .overlay{bottom:42px}
body:has(#wpvibe-preview-banner) #guviet-order-app .checkout{height:100%}
body:has(#wpvibe-preview-banner) #guviet-order-app .option-dialog{max-height:calc(95dvh - 42px)}
}
body:has(#guviet-order-app){background:#f5f7fb;color:#24354a}
#guviet-order-app{--border:#e5eaf0;--foreground:#24354a;--primary:#2f4f78;--muted:#f4f8fd;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
#guviet-order-app button,#guviet-order-app input,#guviet-order-app textarea,#guviet-order-app select{font-family:inherit}
#guviet-order-app .site-header{background:transparent;border:0;padding:14px 14px 0}
#guviet-order-app .header-inner{max-width:1260px;height:88px;padding:16px 23px;border-radius:17px;background:linear-gradient(120deg,#2f4f78,#1c3454);color:#fff;gap:18px}
#guviet-order-app .logo{background:transparent;border-radius:0;padding:0;width:150px;height:58px;object-fit:cover;filter:grayscale(1) invert(1) brightness(4);mix-blend-mode:screen}
#guviet-order-app .header-links a,#guviet-order-app .header-links button{color:#fff}
#guviet-order-app .header-location{font-size:12px;font-weight:500}
#guviet-order-app .cart-top{border:1px solid #ffffff45;background:#ffffff12;color:white;border-radius:10px}
#guviet-order-app .announcement{background:transparent;color:#65758a;font-size:12px;padding:10px 16px}
#guviet-order-app .container{max-width:1288px;padding:0 14px 100px}
#guviet-order-app .intro{display:flex;flex-direction:column;align-items:stretch;gap:0;background:white;border:1px solid #e5eaf0;border-radius:16px;padding:0;overflow:hidden}
#guviet-order-app .guviet-slides{border-radius:0;max-width:none;width:100%}
#guviet-order-app .intro-copy{padding:18px 22px}
#guviet-order-app .tabs button[data-gv-icon="all"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="coffee"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h12v7a5%205%200%200%201-5%205H9a5%205%200%200%201-5-5Z%22%2F%3E%3Cpath%20d%3D%22M16%209h2a3%203%200%200%201%200%206h-2M7%203v2m4-2v2m4-2v2M3%2022h15%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="cold"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%206h14l-2%2015H7ZM4%206h16M14%206l2-4h4%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22m14%2015%202%201-1%202-2-1Z%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="tea"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011h15v4a6%206%200%200%201-6%206H9a6%206%200%200%201-6-6ZM18%2012h1a3%203%200%200%201%200%206h-2M11%202C6%202%205%206%2010%209c5-1%207-5%207-7h-6Z%22%2F%3E%3Cpath%20d%3D%22m10%209%204-4%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="milk"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7%203%208%200%203%205v13H6V8ZM7%203l3%205v13M6%208h12M13%2012h2m-2%204h2%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="coconut"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011h18a9%209%200%200%201-18%200Z%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2211%22%20rx%3D%229%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22m13%2010%204-7h4M7%2016l1%202m4-2v3m5-3-1%202%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="cocoa"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010h13v5a6%206%200%200%201-6%206H10a6%206%200%200%201-6-6ZM17%2011h2a3%203%200%200%201%200%206h-2M9%203c-3%200-4%204-1%205%203%201%205-1%204-3S10%203%209%203Zm0%200%201%205%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon="juice"]{--gv-category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%208h12l-2%2013H9ZM6%208h14m-6%200%202-6h5%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m3%204%204%204m-5-2h6M11%2013h5%22%2F%3E%3C%2Fsvg%3E")}
#guviet-order-app .tabs button[data-gv-icon]{display:flex;align-items:center;gap:9px}
#guviet-order-app .tabs button[data-gv-icon]::before{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--gv-category-icon) center/contain no-repeat;mask:var(--gv-category-icon) center/contain no-repeat}
@media(max-width:760px){
#guviet-order-app .container .intro{padding:0;gap:0}
#guviet-order-app .intro .guviet-slides{border-radius:0}
#guviet-order-app .intro .intro-copy{padding:12px}
#guviet-order-app .tabs button[data-gv-icon]{flex-direction:column;justify-content:center;gap:5px;text-align:center;padding:10px 4px}
#guviet-order-app .tabs button[data-gv-icon]::before{width:22px;height:22px}
}
#guviet-order-app .intro h1{font-family:inherit;font-size:clamp(23px,2.3vw,31px);color:#24354a}
#guviet-order-app .intro p{font-size:14px;color:#65758a}
#guviet-order-app .layout{display:grid;grid-template-columns:180px minmax(0,1fr) 330px;gap:14px;margin-top:14px;align-items:start}
#guviet-order-app .menu-area{display:contents}
#guviet-order-app .section-title{grid-column:2;grid-row:1;background:white;padding:16px 18px;border:1px solid #e5eaf0;border-radius:16px}
#guviet-order-app .section-title .eyebrow{font-size:10px;color:#e8743b;letter-spacing:.1em}
#guviet-order-app .section-title h2{font-family:inherit;font-size:20px;letter-spacing:0;margin:2px 0 0}
#guviet-order-app .tabs{grid-column:1;grid-row:1 / span 3;display:flex;flex-direction:column;white-space:normal;gap:5px;margin:0;padding:17px 12px;background:#fff;border:1px solid #e5eaf0;border-radius:16px;position:sticky;top:46px;max-height:calc(100dvh - 60px);overflow:auto;box-shadow:0 4px 16px #24354a08}
#guviet-order-app .tabs:before{content:"Danh mục";display:block;font-size:14px;font-weight:700;padding:0 10px 9px;color:#24354a}
#guviet-order-app .tabs button{display:block;text-align:left;border:0;border-radius:10px;background:transparent;color:#637285;font-size:13px;font-weight:500;padding:11px 12px;min-height:44px;white-space:normal}
#guviet-order-app .tabs button.active{color:#2f4f78;background:#eaf1f8;font-weight:750}
#guviet-order-app .tabs button:hover{background:#f4f8fd}
#guviet-order-app .product-grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding:12px;background:white;border:1px solid #e5eaf0;border-radius:16px}
#guviet-order-app .product{border:1px solid #e5eaf0;border-radius:11px;min-height:112px;padding:9px;gap:12px;box-shadow:none;align-items:center;transition:border-color .15s}
#guviet-order-app .product:hover{border-color:#e8743b;background:#fffaf6}
#guviet-order-app .product-art{width:90px;height:90px;border-radius:10px}
#guviet-order-app .product-body{padding:0;gap:3px}
#guviet-order-app .product small{font-size:10px;color:#bd754a}
#guviet-order-app .product h3{margin:0;font-size:16px;color:#24354a}
#guviet-order-app .product p{font-size:12px;line-height:1.4;margin:0 0 4px;color:#7b8796}
#guviet-order-app .product-bottom strong{font-size:16px;color:#2f4f78}
#guviet-order-app .add{background:#e8743b;border-radius:10px;width:38px;height:38px}
#guviet-order-app .cart-panel{grid-column:3;grid-row:1 / span 3;display:block;border:1px solid #e5eaf0;border-radius:16px;padding:19px;top:46px;box-shadow:0 4px 16px #24354a08}
#guviet-order-app .cart-heading h2{font-family:inherit;font-size:21px}
#guviet-order-app .fulfillment{border-color:#e5eaf0}
#guviet-order-app .fulfillment-options button{border-color:#dce3eb}
#guviet-order-app .fulfillment-options button.selected{background:#2f4f78;border-color:#2f4f78}
#guviet-order-app .primary{background:#e8743b}
#guviet-order-app .mobile-cart{display:none}
#guviet-order-app .site-footer{border-color:#e5eaf0;font-size:12px;margin-top:25px}
@media(max-width:1100px) and (min-width:761px){
#guviet-order-app .layout{grid-template-columns:150px minmax(0,1fr) 285px;gap:10px}
#guviet-order-app .cart-panel{padding:14px}
#guviet-order-app .product-art{width:72px;height:72px}
#guviet-order-app .product p{display:none}
#guviet-order-app .header-location{display:none}
}
@media(max-width:760px){
#guviet-order-app .site-header{padding:6px 6px 0}
#guviet-order-app .header-inner{padding:10px 11px 0;height:auto;border-radius:11px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo cart" "nav nav";gap:4px 10px}
#guviet-order-app .header-inner .logo{width:130px;height:49px;max-height:49px;padding:0;object-fit:cover}
#guviet-order-app .header-inner .cart-top{grid-area:cart;justify-self:end;padding:8px 10px}
#guviet-order-app .header-inner .cart-top span{display:none}
#guviet-order-app .header-inner .header-links{grid-area:nav;border-color:#ffffff20;min-height:44px;gap:6px;width:100%;margin:0;justify-content:space-between}
#guviet-order-app .header-links a,#guviet-order-app .header-links button{font-size:12px;padding:8px 5px}
#guviet-order-app .header-location{display:none}
#guviet-order-app .announcement{font-size:10px;padding:8px 10px;line-height:1.5}
#guviet-order-app .container{padding:0 6px 110px}
#guviet-order-app .intro{display:flex;gap:9px;padding:8px;border-radius:11px}
#guviet-order-app .guviet-slides{border-radius:8px;max-width:none}
#guviet-order-app .intro-copy{padding:2px 4px 5px}
#guviet-order-app .intro h1{font-size:20px}
#guviet-order-app .intro p{font-size:12px}
#guviet-order-app .layout{grid-template-columns:100px minmax(0,1fr);gap:7px;margin-top:9px}
#guviet-order-app .tabs{padding:10px 5px;border-radius:10px;top:8px;max-height:calc(100dvh - 100px);gap:3px}
#guviet-order-app .tabs:before{font-size:12px;padding:0 5px 7px}
#guviet-order-app .tabs button{font-size:11px;padding:10px 5px;min-height:44px;line-height:1.3}
#guviet-order-app .section-title{padding:10px;border-radius:10px}
#guviet-order-app .section-title h2{font-size:15px}
#guviet-order-app .section-title .eyebrow{font-size:9px}
#guviet-order-app .product-grid{padding:7px;gap:7px;border-radius:10px}
#guviet-order-app .product{min-height:102px;padding:7px;gap:8px;align-items:flex-start}
#guviet-order-app .product-art{width:48px;height:58px;border-radius:8px}
#guviet-order-app .product-body{gap:3px}
#guviet-order-app .product small{font-size:9px}
#guviet-order-app .product h3{font-size:12px;line-height:1.35}
#guviet-order-app .product p{display:none}
#guviet-order-app .product-bottom{gap:4px;flex-wrap:wrap}
#guviet-order-app .product-bottom strong{font-size:13px}
#guviet-order-app .add{width:36px;height:36px;border-radius:9px}
#guviet-order-app .stepper{gap:5px;font-size:12px}
#guviet-order-app .stepper button{width:30px;height:34px;border-radius:8px}
#guviet-order-app .cart-panel{display:none}
#guviet-order-app .mobile-cart{display:flex;width:calc(100% - 16px);bottom:10px;border-radius:12px;background:#2f4f78;padding:15px 17px}
}
@media(max-width:380px){
#guviet-order-app .layout{grid-template-columns:88px minmax(0,1fr);gap:5px}
#guviet-order-app .tabs button{font-size:10px}
#guviet-order-app .product{gap:6px;padding:6px}
#guviet-order-app .product-art{width:38px;height:48px}
#guviet-order-app .product-grid{padding:5px}
}
@media(prefers-reduced-motion:reduce){#guviet-order-app .product{transition:none}}