/* Adapted from Vercel Commerce GridTileImage / ThreeItemGrid (MIT).
   Copyright (c) 2025 Vercel, Inc. Full license: /commerce-license.txt. */
:root{--plane:#faf9f7;--line:#e9e5e2;--ink:#292322;--r-2:16px}
html{scroll-behavior:smooth;scroll-padding-top:120px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;padding-inline:32px}
.skip-link{position:fixed;left:20px;top:-60px;z-index:100;background:white;padding:12px}.skip-link:focus{top:8px}
.tin{background:#f8edf0;border:0}.tin .wrap{justify-content:space-between;padding-block:8px;font-size:11px}
header{box-shadow:0 2px 12px #29232204}
.htop{gap:32px;flex-wrap:nowrap;padding-block:18px}
.logo{display:block;flex:0 0 142px}.logo svg{display:block;width:100%;height:auto}
.tim{order:0;border-radius:9px;background:#f7f6f4;border-color:var(--line);padding:13px 16px;margin-left:20px}
.chonch{order:2;border:0;border-left:1px solid var(--line);border-radius:0;padding-left:24px}
.chonch label{font-size:11px}.chonch select{font-size:13px;max-width:185px}
.commerce-hero{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,174px);gap:16px;margin-top:28px}
.hero-main{grid-column:span 4;grid-row:span 2;position:relative;display:flex;align-items:center;background:#f7e8e8;border:1px solid #efdadc;border-radius:16px;overflow:hidden;padding:36px}
.hero-copy{position:relative;z-index:1;max-width:75%}
.eyebrow{display:block;color:var(--brand-ink);font-size:10px;font-weight:600;letter-spacing:.12em;margin-bottom:13px}
h1{font-size:clamp(32px,3.3vw,44px);line-height:1.2;letter-spacing:-.045em;font-weight:600;margin:0 0 18px}
h1 em{font-style:normal;color:var(--brand-ink)}
.hero-copy p{font-size:12px;line-height:1.8;color:var(--ink-2);margin:0 0 23px}
.primary-link{display:inline-flex;gap:20px;align-items:center;padding:12px 17px;background:var(--brand-ink);color:white;border-radius:7px;font-size:12px;font-weight:600}
.primary-link:hover{background:#a91843}.primary-link span{font-size:18px}
.hero-caption{display:block;font-size:10px;color:var(--ink-2);margin-top:22px}
.hero-product{position:absolute;right:24px;bottom:36px;width:25%;aspect-ratio:1;background:white;border-radius:50% 50% 16px 16px;overflow:hidden;transform:rotate(7deg);box-shadow:0 12px 30px #75334112}
.hero-product:empty{display:none}.hero-product img{width:100%;height:100%;object-fit:contain}
.feature-tile{grid-column:span 2;position:relative;display:flex;align-items:center;text-align:left;overflow:hidden;border-radius:16px;border:1px solid var(--line);padding:22px;transition:border-color .3s}
.feature-milk{background:#f1eee6}.feature-care{background:#eaf0ed}.feature-tile:hover{border-color:var(--brand)}
.feature-copy{position:relative;z-index:1;flex-shrink:0}.feature-copy .eyebrow{font-size:8px;letter-spacing:.09em;color:var(--ink-2);margin-bottom:9px}
.feature-copy strong{font-size:21px;line-height:1.2;letter-spacing:-.025em;font-weight:600}
.feature-link{display:block;margin-top:13px;font-size:10px;font-weight:500}.feature-link span{margin-left:16px}
.feature-image{position:absolute;right:14px;bottom:18px;width:34%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:white;transform:rotate(-5deg)}
.feature-image img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease-in-out}.feature-tile:hover img{transform:scale(1.05)}
.service-strip{display:flex;justify-content:space-between;gap:24px;padding:22px 30px;border-bottom:1px solid var(--line)}
.service-strip>div{display:flex;align-items:center;gap:12px}.service-icon{font-size:27px;color:var(--brand-ink)}
.service-strip strong{display:block;font-size:12px;font-weight:500}.service-strip small{display:block;color:var(--ink-3);font-size:10px;margin-top:3px}.service-strip b{font-weight:400}
.muc{margin:30px 0 17px;align-items:center}.muc h2{font-size:22px;font-weight:600;letter-spacing:-.035em}.muc>span{font-size:11px}
.ng{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.ng button{border:1px solid transparent;gap:10px;padding:12px 6px;border-radius:12px;transition:background .2s,border-color .2s;min-width:0}
.ng .rd{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.ng .rd img{width:80%;height:80%;object-fit:contain;transition:transform .3s ease-in-out}
.ng button:hover .rd img{transform:scale(1.05)}.ng button:hover{background:white}
.ng button[aria-pressed=true]{border-color:var(--brand);background:#fff}
.ng .lb{font-size:11px;font-weight:500;line-height:1.5}
.catalog-heading{margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}
.catalog-heading .eyebrow{font-size:9px;margin-bottom:6px}
.loc{margin-bottom:18px;gap:8px}.chip{border-radius:6px;padding:8px 14px;font-size:12px}
.luoi{gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.sp{border-radius:12px;padding:0;min-width:0;box-shadow:none;transition:border-color .3s}
.sp:hover{border-color:var(--brand);box-shadow:none}.sp .im{padding:18px;background:white;overflow:hidden}
.sp .im img{transition:transform .3s ease-in-out}.sp:hover .im img{transform:scale(1.05)}
.sp .bd{padding:0 16px 15px;gap:9px}.sp .tn{font-size:12px;font-weight:500;line-height:1.6;min-height:3.2em}
.sp .g{font-size:18px;color:var(--brand-ink)}.sp .dv{font-size:10px}.pill{font-size:10px;border-radius:4px;background:transparent;padding:0}
.pill:before{content:'●';font-size:8px;margin-right:5px}
.product-action{font-size:10px;display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-2)}
.product-action>span{color:var(--brand-ink);font-size:14px}
.skeleton{background:white;border:1px solid var(--line);border-radius:12px;padding:16px}.skeleton div{aspect-ratio:1;background:#f2efed;border-radius:8px}.skeleton span{display:block;height:12px;background:#f2efed;margin-top:14px;width:85%}.skeleton span:last-child{width:50%}
#san-pham{scroll-margin-top:120px}.footer-brand{font-size:19px;color:var(--brand-ink);font-weight:600;margin-bottom:10px}.footer-note{font-size:11px;margin-top:8px}
footer{margin-top:48px;padding-block:32px}
@media(min-width:1500px){.wrap{max-width:1380px}.commerce-hero{grid-template-rows:repeat(2,190px)}}
@media(max-width:1000px){
 .wrap{padding-inline:24px}.htop{gap:18px}.tim{margin-left:0}.logo{flex-basis:122px}
 .commerce-hero{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 154px}.hero-main{grid-column:span 2;grid-row:span 1;min-height:300px;padding:30px}.hero-copy{max-width:75%}.hero-product{width:23%;bottom:24px;right:40px}.feature-tile{grid-column:span 1}.feature-image{width:28%;max-width:115px;right:28px}
 .service-strip{padding-inline:8px;gap:12px}.service-strip strong{font-size:10px}.service-strip small{font-size:9px}
 .ng .rd{width:64px;height:64px}.ng .lb{font-size:10px}.luoi{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:699px){
 .wrap{padding-inline:16px}.tin .wrap{justify-content:center;padding-block:6px}.tin span:not(:first-child){display:none}
 .htop{flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:10px}.logo{flex-basis:108px}.chonch{order:0;padding:4px 0 4px 12px}.chonch select{max-width:172px;font-size:12px}
 .tim{order:3;flex-basis:100%;padding:10px 12px}.tim input{font-size:16px}
 .commerce-hero{margin-top:16px;gap:10px;grid-template-rows:auto 140px}
 .hero-main{padding:24px 20px;min-height:280px}.hero-copy{max-width:100%}h1{font-size:33px;margin-bottom:14px}.hero-copy .eyebrow{font-size:8px;letter-spacing:.1em}.hero-copy p{font-size:11px;max-width:85%;margin-bottom:18px}.hero-copy p br{display:none}
 .hero-product{width:22%;right:14px;bottom:20px;opacity:.8}.hero-caption{font-size:9px;margin-top:15px}.primary-link{padding:10px 13px;font-size:11px;gap:12px}
 .feature-tile{padding:14px;border-radius:12px}.feature-copy .eyebrow{font-size:6.5px;letter-spacing:.05em}.feature-copy strong{font-size:18px}.feature-image{right:8px;bottom:14px;width:34%}.feature-link{font-size:9px;margin-top:15px}.feature-link span{margin-left:5px}
 .service-strip{padding:16px 0;gap:10px}.service-strip>div{gap:7px}.service-strip>div:last-of-type{display:none}.service-icon{font-size:23px}.service-strip strong{font-size:9px}.service-strip small{font-size:8px}
 .muc{margin-top:24px;margin-bottom:12px}.muc h2{font-size:19px}.muc>span{font-size:10px}
 .ng{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.ng button{padding:7px 2px;gap:7px}.ng .rd{width:56px;height:56px}.ng .lb{font-size:9px;max-width:85px}
 .catalog-heading{padding-top:20px;margin-top:24px}.catalog-heading h2{font-size:20px}.catalog-heading>span{max-width:85px;text-align:right}.catalog-heading .eyebrow{font-size:8px}
 .loc{margin-bottom:14px}.chip{font-size:11px;padding:7px 11px}.luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .sp .im{padding:10px}.sp .bd{padding:0 10px 12px;gap:8px}.sp .tn{font-size:11px}.sp .g{font-size:16px}.product-action{font-size:9px;line-height:1.4}.product-action>span{margin-left:4px}.pill{font-size:9px}
 #san-pham{scroll-margin-top:165px}footer{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.is-filtered .commerce-hero,.is-filtered .service-strip{display:none}
@media(max-width:699px){
 .commerce-hero{grid-template-rows:auto 120px}
 .hero-main{min-height:250px;padding:20px}.hero-copy p{max-width:100%;margin-bottom:14px}.hero-copy .eyebrow{margin-bottom:10px}
 h1{font-size:30px}.hero-caption{margin-top:12px}.hero-product{width:20%;bottom:15px}
 .feature-copy strong{font-size:16px}.feature-copy .eyebrow{font-size:6px;margin-bottom:7px}.feature-image{width:30%;bottom:10px}.feature-link{margin-top:12px}
 .ng{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
 .ng button{flex:0 0 82px;scroll-snap-align:start}.ng .lb{min-height:27px}.ng .rd{width:58px;height:58px}
}
/* Jim Tồ editorial direction: strong brand color and original lifestyle art. */
:root{--plane:#fff;--ink:#29202a;--line:#eee7eb}
.tin{background:#fff3f7}.tin .wrap{font-size:12px}
.htop{padding-block:14px}.logo{flex-basis:155px}.tim{background:#fff;border:2px solid #f0cfda;border-radius:999px;padding:12px 20px}.tim input{font-size:15px}
.brand-nav{background:#b51b4d;color:white}.brand-nav .wrap{display:flex;align-items:center;gap:26px;min-height:43px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.brand-nav a,.brand-nav button{font-size:12px;font-weight:500;padding:12px 0;flex-shrink:0}.brand-nav a{font-weight:700}.brand-nav button:hover{text-decoration:underline;text-underline-offset:5px}
.commerce-hero{display:block;margin-top:24px}
.hero-main{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:420px;border:0;border-radius:22px;background:#b51b4d;overflow:hidden}
.hero-copy{max-width:none;padding:40px 44px;color:white}.hero-copy .eyebrow{color:#ffe3ed;font-size:11px;letter-spacing:.12em;margin-bottom:22px}
h1{font-size:64px;line-height:1.08;font-weight:700;letter-spacing:-.055em;margin-bottom:22px}h1 em{color:#ffe0b9;font-style:normal}
.hero-copy p{color:#fff0f5;font-size:15px;line-height:1.7;margin-bottom:26px}.hero-copy p br{display:initial}
.primary-link{background:#fff;color:#a51b48;border-radius:999px;padding:14px 22px;font-size:14px;gap:32px}.primary-link:hover{background:#fff1dd}
.hero-caption{color:#ffe3ed;font-size:11px;margin-top:23px;display:flex;gap:8px;align-items:center}.hero-caption>span{font-size:23px}
.hero-photo{position:relative;min-width:0;min-height:100%;border-radius:130px 0 0 0;overflow:hidden;background:#f5eee7}
.hero-photo>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:60% center}
.photo-note{position:absolute;bottom:22px;right:22px;background:#fffcf6;color:#7b3c4b;padding:13px 18px;border-radius:12px;font-size:12px;box-shadow:0 4px 24px #66332915;transform:rotate(-4deg)}.photo-note span{color:var(--brand-ink);margin-left:12px;font-size:19px}
.service-strip{border:1px solid var(--line);background:#fff;border-radius:12px;margin-top:16px;padding:18px 30px}.service-strip strong{font-size:13px;font-weight:600}.service-strip small{font-size:11px}.service-icon{width:40px;height:40px;border-radius:50%;background:#fff1f6;text-align:center;line-height:40px}
.muc h2{font-size:26px;font-weight:700;letter-spacing:-.035em}.muc>span{font-size:12px}.muc{margin-top:32px}
.ng{gap:12px}.ng button{border:1px solid transparent;border-radius:15px;background:#fff1f5;padding:18px 6px 14px;gap:12px}
.ng button:nth-child(2){background:#edf5f0}.ng button:nth-child(3){background:#fff5df}.ng button:nth-child(4){background:#f4effb}.ng button:nth-child(5){background:#eaf4fb}.ng button:nth-child(6){background:#ffefea}.ng button:nth-child(7){background:#f4f3ed}
.ng .rd{width:88px;height:88px;border:0;box-shadow:0 5px 18px #39202409}.ng .lb{font-size:12px;font-weight:600}.category-count{font-size:9px;color:var(--ink-2)}
.ng button:hover,.ng button[aria-pressed=true]{border-color:var(--brand);background:#ffe6ee}
.catalog-heading{border:0;background:#fff0f5;padding:22px 24px;margin:34px 0 18px;border-radius:14px}.catalog-heading .eyebrow{font-size:10px}.catalog-heading h2{font-size:28px;color:#9c1a43}
.luoi{gap:18px}.sp{border-radius:14px}.sp .tn{font-size:13px}.sp .g{font-size:21px}.sp .bd{padding:0 16px 16px;gap:11px}.pill{font-size:11px}.product-action{font-size:11px}
footer{background:#fff4f8;border-top:3px solid #b51b4d}.footer-brand{font-size:23px}
#san-pham{scroll-margin-top:185px}#ng{scroll-margin-top:185px}
@media(max-width:1000px) and (min-width:700px){
 .hero-main{min-height:380px}.hero-copy{padding:32px}.hero-copy h1{font-size:49px}.hero-copy p{font-size:13px}.hero-photo{border-radius:80px 0 0 0}.service-strip{padding:16px}.service-strip strong{font-size:11px}.service-strip small{font-size:9px}.ng .rd{width:65px;height:65px}.ng .lb{font-size:10px}.ng button{padding-inline:3px}.category-count{font-size:8px}
}
@media(max-width:699px){
 .tin .wrap{font-size:10px}.logo{flex-basis:110px}.htop{padding-block:9px}.tim{padding:9px 14px}.tim input{font-size:16px}
 .brand-nav .wrap{min-height:37px;gap:22px}.brand-nav button,.brand-nav a{font-size:11px;padding:10px 0}
 .commerce-hero{margin-top:14px}.hero-main{display:grid;grid-template-columns:1fr;min-height:0;border-radius:17px}.hero-copy{padding:25px 23px 23px}.hero-copy .eyebrow{font-size:9px;margin-bottom:14px}
 .hero-copy h1{font-size:44px;line-height:1.07;margin-bottom:15px}.hero-copy p{font-size:12px;margin-bottom:20px;max-width:none}.primary-link{font-size:12px;padding:11px 17px;gap:22px}.hero-caption{display:none}
 .hero-photo{height:210px;min-height:0;border-radius:55px 0 0 0;margin-left:22px}.hero-photo>img{object-position:center 43%}.photo-note{font-size:9px;padding:8px 12px;bottom:13px;right:13px}.photo-note span{font-size:14px}
 .service-strip{margin-top:12px;padding:12px;gap:12px}.service-strip>div{gap:7px}.service-strip strong{font-size:9px}.service-strip small{font-size:8px}.service-icon{width:28px;height:28px;line-height:28px;font-size:20px;flex-shrink:0}
 .muc{margin-top:25px}.muc h2{font-size:21px}.muc>span{font-size:10px}
 .ng{gap:9px;padding-bottom:12px}.ng button{flex-basis:108px;padding:13px 6px 11px;gap:9px}.ng .rd{width:64px;height:64px}.ng .lb{font-size:10px;min-height:29px}.category-count{font-size:8px}
 .catalog-heading{padding:17px 15px;margin-top:22px}.catalog-heading h2{font-size:21px}.catalog-heading .eyebrow{font-size:8px}.catalog-heading>span{font-size:10px}
 .luoi{gap:10px}.sp .bd{padding:0 10px 12px;gap:8px}.sp .tn{font-size:11px}.sp .g{font-size:18px}.pill{font-size:10px}.product-action{font-size:9px}
 #san-pham,#ng{scroll-margin-top:205px}.footer-brand{font-size:20px}
}