/* Cửa hàng trực tuyến kiểu siêu thị: đầu trang xanh rêu, cột danh mục, băng rôn ảnh thật, lưới hàng có giá */
:root{--reu:#005051;--xanh:#007934;--non:#77BC1F;--nen:#f2f5f1;--trang:#fff;--chu:#1c2b28;--mo:#5c6d68;--vien:#dfe6e0;--nhat:#eef6e4;--vang:#fff6d8;
--dau:"Roboto Condensed","Roboto",Arial,sans-serif;--than:"Roboto",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--nen);color:var(--chu);font:15px/1.55 var(--than)}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--dau);line-height:1.15;margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--non);outline-offset:2px}
.khung{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.xem-thu{background:var(--vang);text-align:center;font-size:13px;padding:5px 12px}
.dau{background:var(--reu);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.dau .khung{display:flex;align-items:center;gap:24px;padding-block:11px}
.thuong-hieu{flex:none;line-height:0}.thuong-hieu img{width:132px;height:auto}
.thuong-hieu span{display:block;font:500 9.5px/1 var(--than);letter-spacing:.24em;margin-top:6px;text-align:center}
.tim{flex:1;display:flex;min-width:0;max-width:520px;margin-inline:auto;background:#fff;border-radius:22px;overflow:hidden}
.tim input{flex:1;min-width:0;border:0;padding:10px 18px;font:15px var(--than);color:var(--chu);background:none}
.tim input:focus{outline:0}.tim button{border:0;background:none;padding:0 16px;color:var(--xanh);font:700 14px var(--than);cursor:pointer}
.lien-he{flex:none;text-align:right;font-size:12px;line-height:1.3}.lien-he b{display:block;font:700 18px var(--dau)}
.nut-gio{flex:none;background:#fff;color:var(--reu);border:0;border-radius:22px;padding:9px 16px;font:700 14px var(--than);cursor:pointer}
.nut-gio i{font-style:normal;background:var(--non);color:#0c2c10;border-radius:10px;padding:0 7px;margin-left:5px}
.menu{background:#fff;border-bottom:1px solid var(--vien)}
.menu .khung{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.menu a{padding:11px 0;font-weight:500;font-size:14px;border-bottom:2px solid transparent}.menu a:hover,.menu a.dang{color:var(--xanh);border-color:var(--xanh)}
.menu .phai{margin-left:auto;color:var(--xanh);font-weight:700}
.mo-dau{display:grid;grid-template-columns:232px minmax(0,1fr);gap:10px;padding-block:10px}
.dm{background:#fff;display:flex;flex-direction:column}.dm a{flex:1;display:flex;align-items:center;padding:9px 16px;font-weight:500;font-size:14px;border-bottom:1px solid var(--vien)}.dm a:last-child{border:0}.dm a:hover{color:var(--xanh);background:var(--nhat)}
.bang{background:var(--reu);color:#fff;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:376px;overflow:hidden}
.bang-chu{padding:38px 36px;display:flex;flex-direction:column;justify-content:center;gap:15px}
.nho{font:700 13px var(--than);letter-spacing:.09em;text-transform:uppercase;color:var(--non)}
.bang h1{font-size:clamp(35px,4.7vw,56px);font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.bang p{margin:0;font-size:16px;color:#dcebe6}
.nhom-nut{display:flex;flex-wrap:wrap;gap:10px}
.nut{display:inline-block;border:0;cursor:pointer;background:var(--xanh);color:#fff;padding:11px 20px;font:700 15px var(--than);border-radius:4px;text-align:center}.nut:hover{background:#00692d}
.nut.sang{background:var(--non);color:#0c2c10}.nut.sang:hover{background:#8ccb36}.nut.vien{background:none;box-shadow:inset 0 0 0 1.5px #fff;color:#fff}.nut.vien:hover{background:rgba(255,255,255,.12)}
.ghep{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:4px;min-width:0}.ghep img{width:100%;height:100%;object-fit:cover;min-height:0}.ghep img:first-child{grid-row:span 2}
.cam-ket{background:#fff;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:6px}
.cam-ket div{padding:15px 18px;border-right:1px solid var(--vien);font-size:13.5px;color:var(--mo)}.cam-ket div:last-child{border:0}.cam-ket b{display:block;font:700 15.5px var(--dau);color:var(--reu)}
.muc{padding-block:20px}
.tieu-de{display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid var(--vien);margin-bottom:14px}
.tieu-de h2{background:#fff;border-left:4px solid var(--reu);padding:9px 22px 9px 12px;font-size:19px;text-transform:uppercase;color:var(--reu);font-weight:700}
.tieu-de a{margin-left:auto;font-size:13.5px;color:var(--xanh);padding-bottom:7px;font-weight:500}
.dan{margin:-4px 0 14px;color:var(--mo);max-width:68ch}
.luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.the{background:#fff;display:flex;flex-direction:column;min-width:0}.the img{width:100%;aspect-ratio:4/3;object-fit:cover}
.the .noi{padding:11px 13px 13px;display:flex;flex-direction:column;gap:4px;flex:1}.the h3{font:500 15.5px/1.3 var(--than);min-height:2.6em}
.gia{font-weight:700;color:var(--xanh);font-size:16.5px;font-variant-numeric:tabular-nums}.gia small{font-weight:400;color:var(--mo);font-size:12.5px}
.them{margin-top:auto;border:1.5px solid var(--xanh);background:none;color:var(--xanh);padding:7px;font:700 13.5px var(--than);cursor:pointer;border-radius:4px}.them:hover,.them.roi{background:var(--xanh);color:#fff}
.ds{background:#fff;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;padding:6px 20px}
.dong{display:flex;align-items:center;gap:12px;border-bottom:1px dotted var(--vien);padding:8px 0;min-width:0}.dong span{flex:1;min-width:0}.dong .gia{font-size:15px;white-space:nowrap}
.dong .them{margin:0;padding:3px 11px;flex:none}
.nguon-nhom{font-size:14px;color:var(--mo);margin-left:8px;font-weight:400}
.combo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.combo .the h3{min-height:0;font:700 21px var(--dau);color:var(--reu)}
.gom{font-size:14px;color:var(--mo);margin:0}
.khuyen{background:var(--xanh);color:#fff;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);margin-top:10px}.khuyen img{width:100%;height:100%;min-height:190px;object-fit:cover}
.khuyen>div{padding:24px 30px;display:flex;flex-direction:column;gap:9px;justify-content:center;align-items:flex-start}.khuyen h3{font-size:30px}.khuyen p{margin:0;max-width:62ch}.khuyen .gia-to{font:700 36px var(--dau);color:#fff}
.tuan{background:var(--reu);color:#fff}.tuan .khung{padding-block:34px}.tuan h2{font-size:32px;text-transform:uppercase}.tuan>.khung>p{color:#dcebe6;max-width:66ch}
.hai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:18px}.goi{background:#fff;color:var(--chu);padding:22px 24px;display:flex;flex-direction:column;gap:6px}.goi h3{font-size:24px;color:var(--reu)}.goi .tien{font:700 28px var(--dau);color:var(--xanh)}
.goi ol{margin:6px 0 0;padding-left:20px;font-size:14px}.goi li{padding:2px 0}
.nguon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.nguon div{background:#fff;padding:16px;border-top:3px solid var(--non);font-size:14px;color:var(--mo)}.nguon b{display:block;font:700 17px var(--dau);color:var(--reu)}
.nguoi{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.nguoi img{width:100%;height:100%;min-height:280px;object-fit:cover}.nguoi>div{padding:30px 34px;display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:flex-start}.nguoi h2{font-size:28px;color:var(--reu)}.nguoi p{margin:0;max-width:64ch}
.chan{background:var(--reu);color:#d5e6e1;font-size:14px;margin-top:22px}.chan .khung{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px;padding-block:32px 92px}.chan img{width:118px;height:auto;margin-bottom:12px}.chan b{color:#fff}.chan a{text-decoration:underline}
.trang-dau{background:var(--reu);color:#fff}.trang-dau .khung{padding-block:26px}.trang-dau h1{font-size:36px;text-transform:uppercase}.trang-dau p{margin:6px 0 0;color:#dcebe6;max-width:70ch}
.van{background:#fff;padding:26px 30px}.van h2{color:var(--reu);font-size:23px;margin:20px 0 8px}.van h2:first-child{margin-top:0}.van p,.van li{max-width:70ch}.van ul{padding-left:20px}
.bang-mon{width:100%;border-collapse:collapse;font-size:14px;background:#fff}.bang-mon th,.bang-mon td{padding:9px 11px;border-bottom:1px solid var(--vien);text-align:left;vertical-align:top}.bang-mon th{color:var(--reu)}.bang-mon td:last-child,.bang-mon th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cuon{overflow-x:auto}
.loc{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}.loc a{background:#fff;padding:6px 13px;border-radius:16px;font-size:13.5px;font-weight:500}.loc a:hover{background:var(--nhat);color:var(--xanh)}
.khong{background:#fff;padding:22px;text-align:center}
.noi-nut{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:25}
.noi-nut a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 13px var(--than);box-shadow:0 3px 10px rgba(0,40,40,.3)}.noi-nut .z{background:#0068ff}.noi-nut .g{background:var(--xanh)}
.gio{position:fixed;inset:0;z-index:40;background:rgba(0,30,30,.45)}.gio-hop{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;display:flex;flex-direction:column;padding:18px max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 18px;gap:10px}
.gio-dau{display:flex;justify-content:space-between;align-items:center}.gio-dau h2{font-size:23px;color:var(--reu)}.gio-dau button{border:0;background:none;font:700 15px var(--than);cursor:pointer;padding:6px}
.gio-ds{flex:1;overflow-y:auto}.gio-mon{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--vien);font-size:14px}.gio-mon span{flex:1;min-width:0}.gio-mon button{width:28px;height:28px;border:1px solid var(--vien);background:#fff;cursor:pointer;font-size:15px}
.tong{display:flex;justify-content:space-between;font:700 18px var(--dau)}.gio-hop textarea{width:100%;height:92px;font:13px var(--than);border:1px solid var(--vien);padding:7px;resize:none}.ghi{font-size:12.5px;color:var(--mo);margin:0}
@media (max-width:980px){.mo-dau{grid-template-columns:minmax(0,1fr)}.dm{display:none}.luoi,.nguon{grid-template-columns:repeat(3,minmax(0,1fr))}.lien-he{display:none}}
@media (max-width:680px){.dau .khung{flex-wrap:wrap;gap:9px 12px}.thuong-hieu img{width:104px}.thuong-hieu span{font-size:7.5px}.nut-gio{margin-left:auto}.tim{order:3;flex-basis:100%;max-width:none}
.bang{grid-template-columns:minmax(0,1fr)}.bang-chu{padding:26px 20px}.ghep{height:220px}.cam-ket{grid-template-columns:repeat(2,minmax(0,1fr))}.cam-ket div:nth-child(2){border-right:0}.cam-ket div{border-bottom:1px solid var(--vien)}
.luoi,.nguon{grid-template-columns:repeat(2,minmax(0,1fr))}.combo,.hai,.ds,.khuyen,.nguoi{grid-template-columns:minmax(0,1fr)}.ds{padding:6px 14px}.khuyen>div,.nguoi>div{padding:22px 20px}.chan .khung{grid-template-columns:minmax(0,1fr)}.van{padding:20px 16px}.tieu-de h2{font-size:17px}.tieu-de a{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}