/* Home Café: cobalt, oat milk, pandan and ripe peach. */
:root{--cream:#fffcf2;--dark:#153345;--lime:#e9f292;--green:#157d49;--blue:#0756a2;--oat:#fff3db;--peach:#ffcca9;--pandan:#dceba7}
body{background:var(--cream)}header{background:linear-gradient(105deg,#064789,#075aab 68%,#0764b2);box-shadow:0 5px 20px #0c36561c}.nav{height:76px}nav a{transition:color .22s}nav a:hover{color:var(--lime)}.btn{transition:background .25s,color .25s,transform .25s,box-shadow .25s;box-shadow:0 4px 0 #112b3d28}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 #112b3d25}.btn:active{transform:translateY(1px)}.btn span{display:inline-block;transition:transform .25s}.btn:hover span{transform:translate(2px,-2px)}
.hero{min-height:clamp(560px,76vh,830px);background:#233a30}.hero:before{inset:-4%;transform:scale(1.015);background-position:center 57%;animation:hero-drift 16s cubic-bezier(.18,.61,.31,1) both}.hero:after{background:linear-gradient(91deg,#102d27f5 0%,#102d27cf 24%,#1c382a70 56%,#1e2f221a 100%),linear-gradient(0deg,#172f2a88,transparent 42%)}.hero .wrap{padding-top:77px;padding-bottom:127px}.hero h1{max-width:1020px;text-wrap:balance}.hero h1 em{color:#edf59d}.hero p{max-width:430px;font-size:17px}.hero .stamp{color:#163d30;border:1px dashed #386145;background:#e4f18e;outline:5px solid #e4f18e;bottom:13%;right:7%;box-shadow:0 10px 24px #101e2a55;animation:stamp-in .9s .25s both}.hero-edge{display:block;width:100%;height:42px;position:absolute;bottom:-1px;left:0;color:var(--pandan);pointer-events:none}.hero-spark{position:absolute;right:23%;top:22%;font-size:44px;color:#f4f4aa;filter:drop-shadow(0 2px 5px #1a271b);animation:spark-in 1.1s .35s both;pointer-events:none}.ribbon{background:var(--pandan);color:#23573a;padding:13px 16px 18px;letter-spacing:.12em}.ribbon i{font-style:normal;color:#065aa2;margin:0 14px}.section{padding-block:clamp(52px,7vw,104px)}.intro{margin-bottom:38px}.intro .eyebrow{color:#08714a}.grid{gap:20px}.card{border:1px solid #16445b20;border-radius:24px 24px 17px 17px;background:#fffef8;box-shadow:0 4px 0 #143b5610;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.card .copy{padding:21px}.packstage{position:relative;isolation:isolate;background:radial-gradient(ellipse at 54% 40%,#fff9 0 25%,transparent 60%)}.packstage:before{content:"";width:128px;height:128px;border:1px solid #fff9;border-radius:50%;position:absolute;z-index:-1;box-shadow:0 0 0 13px #fff3,0 0 0 27px #fff2}.packstage svg{transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:rotate(-4deg)}.card:focus-within .packstage svg,.card:hover .packstage svg{transform:translateY(-7px) rotate(3deg) scale(1.055);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.card:hover,.card:focus-within{transform:translateY(-5px);box-shadow:0 12px 23px #15344819}.card:nth-child(4n+1){--tint:#d4ebfc!important}.card:nth-child(4n+2){--tint:#e5efb8!important}.card:nth-child(4n+3){--tint:#f4ddf1!important}.card:nth-child(4n+4){--tint:#ffddc8!important}.packstage{background-color:var(--tint)}.card:nth-child(n) .packstage{background-color:inherit}.card:nth-child(4n+1) .packstage{background-color:#d4ebfc}.card:nth-child(4n+2) .packstage{background-color:#e5efb8}.card:nth-child(4n+3) .packstage{background-color:#f4ddf1}.card:nth-child(4n+4) .packstage{background-color:#ffddc8}
.why{background:#e8f4fc;background-image:radial-gradient(at 90% 0%,#d2ecc7,transparent 48%)}.why article{border-top:0;background:#ffffff9c;border-radius:19px;padding:22px 25px}.why b{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#d8eafb}.why article:nth-child(2) b{background:#deedb0}.why article:nth-child(3) b{background:#ffddc6}.split{background:#e7efc4;border-radius:30px}.split .photo,.blogs .photo,.article .photo{position:relative;isolation:isolate;overflow:hidden;background-image:none}.photo:before{content:"";position:absolute;inset:0;background:var(--photo) center/cover;z-index:-1;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.split:hover .photo:before,.card:hover .photo:before{transform:scale(1.065)}.split .copy .eyebrow{color:#426b33}.pagehead{padding:76px 0 66px;background:radial-gradient(ellipse at 12% 95%,#d9edb5,transparent 50%),radial-gradient(ellipse at 90% 12%,#f9d7bc,transparent 34%),#e2f0fc}.pagehead h1{margin:.15em 0}.book{background:#fff6df;border-color:#e7d6b5;box-shadow:0 8px 0 #d8c8a9,0 19px 35px #2f392b28}.book>div:first-child{background:linear-gradient(90deg,#edf3cd,#f6f4d8 92%,#e3dfbc)}.book>div:nth-child(2){background:linear-gradient(90deg,#f3e2bc,#fff8e8 7%)}.offer{background:#e9f1c8}.offer:nth-child(2){background:#ffe4cf}.filters button{transition:background .2s,border-color .2s,color .2s}.filters button:hover:not([aria-pressed=true]){background:#e2f0ff}.controls input,.controls select{background:#fffef8}.credit{color:#e2f6e9}footer{background:#157d49}.land path:first-child{fill:#0b663c}.land path:nth-child(2){fill:#157d49}.social a{transition:background .24s,color .24s,transform .24s}.social a:hover{transform:translateY(-4px)}
.scroll-meter{position:absolute;inset:auto 0 0;height:3px;pointer-events:none;background:#e9f292;transform-origin:left;transform:scaleX(var(--progress,0))}.motion-ready [data-reveal]{opacity:0;translate:0 24px}.motion-ready [data-reveal].is-visible{animation:reveal .7s var(--delay,0ms) cubic-bezier(.17,.67,.28,1) both}.motion-ready [data-reveal]:focus-within{opacity:1;translate:none;animation:none}.hero .wrap>*{animation:reveal .82s cubic-bezier(.17,.67,.28,1) both}.hero .wrap>h1{animation-delay:.1s}.hero .wrap>p{animation-delay:.19s}.hero .wrap>.btn{animation-delay:.26s}
@keyframes reveal{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}@keyframes hero-drift{from{transform:scale(1.09) translate(-.6%,.4%)}to{transform:scale(1.015)}}@keyframes stamp-in{from{opacity:0;transform:scale(.8) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(10deg)}}@keyframes spark-in{from{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:.83;transform:scale(1) rotate(12deg)}}
@media(max-width:850px){.nav{height:68px}.grid{gap:12px}.hero-spark{display:none}.hero .wrap{padding-block:64px 100px}}@media(max-width:570px){.hero{min-height:530px}.hero h1{font-size:clamp(35px,8vw,47px)}.hero:after{background:linear-gradient(90deg,#102d27ef,#102d2766)}.hero-edge{height:25px}.hero p{font-size:15px}.card .copy{padding:14px}.card{border-radius:17px 17px 13px 13px}.packstage:before{width:76px;height:76px}.book>div:first-child{background:#edf3cd}.book>div:nth-child(2){background:#fff8e8}.ribbon{font-size:10px}.ribbon i{margin:0 5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready [data-reveal]{opacity:1;translate:none}.hero-spark{opacity:.8}.scroll-meter{display:none}}

/* Các phần bổ sung theo brief tháng 11. */
body{background:#fafafa}
header{background:#035bab}
footer,.land path:nth-child(2){background:#15984c;fill:#15984c}
.social a:hover{background:#09853d;opacity:.76}
.filter-icon{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:.35em;background:#dcecf8;color:#1767a4;margin-right:.3em}
.filters button[aria-pressed=true] .filter-icon{background:#e4f1fd;color:#05396c}
.blog-index{grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-index .photo{height:clamp(170px,23vw,265px)}
.gift-illustration{display:block;width:min(100%,370px);height:auto;margin:-10px auto 8px;transition:transform .4s ease}
.offer:hover .gift-illustration{transform:translateY(-4px)}
.recipe-ingredients,.recipe-steps{font-size:.9rem}
.recipe-steps{padding-left:1.2rem;margin-bottom:1.3rem}
.recipe-steps li+li{margin-top:.45em}
@media(max-width:850px){.blog-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:570px){.blog-index{grid-template-columns:1fr}}

/* Full-width film directly beneath the navigation. */
.home-video{position:relative;background:#16372d}
.home-video .hero-film{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-media-controls{position:absolute;right:clamp(12px,3vw,36px);bottom:clamp(10px,2vw,24px);display:flex;gap:8px}
.hero-media-controls button{color:white;background:#142b25e8;border:1px solid #ffffff8c;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:700;cursor:pointer}
.hero-media-controls button:hover{background:#0756a2}
.home-intro h1{font-size:clamp(39px,6.4vw,82px)}
.home-intro h1 em{color:#287345}
.home-intro p{max-width:48ch;margin:0 auto 22px}