/* * Thiệp cưới Toan & Linh — stylesheet * Ảnh/font được tham chiếu tương đối từ thư mục assets/. * Các rule "#cfR:checked" và ":root{--g}" là layout carousel album (sinh tự động theo số ảnh) — xem README mục "Album ảnh". */ @font-face{font-family:"ToanLinh Names";src:url(../fonts/font-toanlinh-names.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"TL Big";src:url(../fonts/font-tl-big.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Det Title";src:url(../fonts/font-toanlinh-names.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Det Body";src:url(../fonts/font-det-body.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"ToanLinh Count";src:url(../fonts/font-toanlinh-count.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"ToanLinh Hero";src:url(../fonts/font-toanlinh-hero.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} /* Layout: a fixed envelope cover, then full-width bands that alternate painted canvas, cream paper and olive card stock. Single committed look (no dark variant). */ :root{ --cream:#f3efe6; --ink:#2a2620; --brown:#4a3424; --olive:#3c4031; --white:#fbf8f2; --muted:#6b6457; --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive; --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif; --deco:"Italiana","Cormorant Garamond",Didot,serif; --hand:"Charm","Cormorant Garamond",cursive; color-scheme:light; } *{box-sizing:border-box} h1,h2,h3,h1 *,h2 *,h3 *{font-weight:400} body{font-synthesis:none} html{scroll-behavior:smooth;scrollbar-width:none} html::-webkit-scrollbar{display:none} /* ẩn thanh cuộn của trang, vẫn cuộn bình thường */ body{background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.locked{overflow:hidden;height:100%} img{max-width:100%;height:auto;display:block;object-fit:contain} .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} .paper{background:var(--cream) url(../images/paper-texture.webp) center top/1095px auto repeat} .speck{position:relative} .speck::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image: radial-gradient(1.6px 1.6px at 6% 18%,#5d554a 50%,transparent 51%), radial-gradient(1.2px 1.2px at 22% 72%,#5d554a 50%,transparent 51%), radial-gradient(1.4px 1.4px at 41% 9%,#5d554a 50%,transparent 51%), radial-gradient(1px 1px at 58% 88%,#5d554a 50%,transparent 51%), radial-gradient(1.5px 1.5px at 77% 31%,#5d554a 50%,transparent 51%), radial-gradient(1.1px 1.1px at 91% 64%,#5d554a 50%,transparent 51%), radial-gradient(1.3px 1.3px at 13% 47%,#5d554a 50%,transparent 51%), radial-gradient(1px 1px at 86% 12%,#5d554a 50%,transparent 51%)} .speck>*{position:relative} /* ---------- Envelope cover ---------- */ .cover{position:fixed;inset:0;z-index:50;display:grid;place-items:center; padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); background:#3a3d30 url(../images/cover-bg.webp) center/cover no-repeat;transition:opacity 1.1s ease .5s,visibility 0s linear 1.6s} .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(20,22,15,.35) 100%);pointer-events:none} .env-btn{position:relative;z-index:1;border:0;padding:0;background:none;cursor:pointer;width:min(560px,92vw); filter:drop-shadow(0 18px 30px rgba(0,0,0,.28));transition:transform .9s cubic-bezier(.6,-0.2,.3,1.3),opacity .8s ease;animation:float 5s ease-in-out infinite} .env-btn img{width:100%;height:auto} .env-btn:focus-visible{outline:2px solid var(--white);outline-offset:8px;border-radius:6px} .env-btn:hover{transform:translateY(-4px) rotate(-.6deg)} @keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}} .cover[hidden]{display:none} .cover-hint{position:absolute;z-index:1;bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 18px));left:0;right:0;text-align:center; font-family:var(--deco);letter-spacing:.32em;font-size:.78rem;color:var(--white);text-transform:uppercase;opacity:.85} .cover-guest{position:absolute;z-index:1;top:max(28px,calc(env(safe-area-inset-top,0px) + 18px));left:16px;right:16px;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,3.6vw,1.5rem);line-height:1.3;color:var(--white)} body.opened .env-btn{transform:translateY(-40px) scale(1.12);opacity:0;animation:none} body.opened .cover{opacity:0;visibility:hidden} body.opened .cover-hint,body.opened .cover-guest{opacity:0;transition:opacity .4s} .open-chk{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none} .open-chk:checked+.cover{opacity:0;visibility:hidden} .open-chk:checked+.cover .env-btn{transform:translateY(-40px) scale(1.12);opacity:0;animation:none} .env-btn{display:block} /* fallback: open on its own after a few seconds, even where scripts don't run */ .cover{animation:autoOpen 1.1s ease 6s forwards} @keyframes autoOpen{to{opacity:0;visibility:hidden}} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:var(--white); background:#3d4033 url(../images/hero-bg.webp) center/cover no-repeat;padding-block:64px 110px;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,30,22,.35),rgba(28,30,22,.12) 45%,rgba(28,30,22,.4))} .hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px} .eyebrow{font-family:"ToanLinh Hero",var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.15rem,3.6vw,2.2rem);margin:0;text-shadow:0 1px 12px rgba(0,0,0,.25)} .names{font-family:"ToanLinh Names",var(--script);font-weight:400;font-size:clamp(2.6rem,11vw,6.4rem);line-height:1.15;margin:.75em 0 .15em;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.3)} .names .amp{font-size:.8em;padding-inline:.12em} .lace{width:min(400px,78vw);aspect-ratio:1/1;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));margin-block:6px 18px} .when{font-family:"ToanLinh Hero",var(--deco);font-size:clamp(1.65rem,4.6vw,2.5rem);letter-spacing:.1em;line-height:1.2;margin:0} .where{font-family:var(--serif);font-size:clamp(1.4rem,3.8vw,2.1rem);letter-spacing:.08em;margin:0} .hero-guest{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,3.2vw,1.45rem);line-height:1.3;margin:14px 0 0;text-shadow:0 1px 12px rgba(0,0,0,.35)} .scroll-cue{position:absolute;bottom:max(18px,env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px; font-family:var(--deco);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--white);opacity:.8;text-decoration:none} .scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--white),transparent);animation:drip 2.2s ease-in-out infinite} @keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- Countdown ---------- */ .countdown{text-align:center;padding-block:clamp(40px,6vw,70px)} .orn{width:min(560px,86vw);margin-inline:auto;opacity:.9} .orn.flip{transform:scaleY(-1)} .count-title{font-family:"ToanLinh Count",var(--script);font-weight:400;color:var(--brown);font-size:clamp(2.8rem,8.5vw,5rem);line-height:1.25;margin:clamp(14px,3vw,30px) 0 6px} .clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:520px;margin:0 auto clamp(14px,3vw,30px);color:var(--brown)} .unit{display:flex;flex-direction:column;align-items:center;position:relative} .unit+.unit::before{content:":";position:absolute;left:-.12em;top:0;font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,8vw,4.6rem);line-height:1.1;translate:-50% 0} .num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.6rem,8vw,4.6rem);line-height:1.1;font-variant-numeric:tabular-nums lining-nums} .lbl{font-family:var(--serif);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.85rem,2.2vw,1.15rem)} .count-note{font-family:var(--serif);font-style:italic;color:var(--muted);margin:0 0 10px;font-size:1.05rem} /* ---------- Details ---------- */ .details{background:var(--olive) url(../images/olive-texture.webp) center top/1095px auto repeat;color:var(--white);padding-block:clamp(48px,7vw,90px)} .details-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center} .card{width:min(460px,100%);aspect-ratio:838/1116;justify-self:center;translate:-7.8% 0} .details-text{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4vw,44px)} .script-h{font-family:"Det Title",var(--script);font-feature-settings:"liga" 0;font-variant-ligatures:none;font-weight:400;font-size:clamp(3.4rem,9vw,5.6rem);line-height:1.1;margin:0 0 .12em} .d-label{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.25rem,3vw,1.75rem);margin:0 0 4px} .d-val{font-family:var(--serif);font-style:normal;letter-spacing:.06em;font-size:clamp(1.15rem,2.8vw,1.6rem);line-height:1.5;margin:0} .map-link{display:inline-block;margin-top:14px;font-family:var(--deco);letter-spacing:.24em;text-transform:uppercase;font-size:.82rem;color:var(--white);text-decoration:none;border-bottom:1px solid rgba(251,248,242,.5);padding-bottom:3px} .map-link:hover,.map-link:focus-visible{border-color:var(--white)} .cal-links{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 16px;margin-top:6px;font-style:italic} /* ---------- Timeline ---------- */ .timeline{padding-block:clamp(44px,6vw,72px);text-align:center} .tl-head{position:relative;display:inline-block;margin:0 auto clamp(26px,4vw,40px)} .tl-head .big{display:block;font-family:"TL Big",var(--deco);font-weight:400;letter-spacing:.06em;font-size:clamp(2.4rem,6.5vw,3.6rem);line-height:1;color:var(--ink)} .tl-head .sc{display:block;font-family:"Det Title",var(--script);font-variant-ligatures:none;font-feature-settings:"liga" 0;font-size:clamp(3rem,8vw,4.6rem);line-height:.9;margin-top:-.3em;color:var(--ink)} .tl-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .tl-item{display:flex;flex-direction:column;align-items:center;gap:6px} .tl-icon{height:clamp(150px,17vw,210px);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(18px,3vw,40px)} .tl-icon img{max-height:100%;width:auto} .tl-time{font-family:var(--deco);font-size:clamp(1.7rem,3.2vw,2.3rem);letter-spacing:.06em;line-height:1.1} .tl-what{font-family:var(--serif);font-style:italic;letter-spacing:.12em;font-size:clamp(1.25rem,2.4vw,1.6rem)} /* ---------- Gallery ---------- */ .gallery{position:relative;background:#e9e1d4 url(../images/gallery-bg.webp) center/cover no-repeat;padding-block:clamp(56px,10vw,150px)} .gal-row{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,8.5vw,124px);align-items:center} .gal-row figure{margin:0} .gal-row img.g-full{object-position:center 100%} .gal-row img{width:100%;aspect-ratio:282/366;object-fit:cover;object-position:center 45%;box-shadow:0 10px 30px rgba(70,55,40,.18)} /* ---------- Gallery coverflow ---------- */ .cd-fallback,.w-nojs{display:none} .cd-fallback{font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,8vw,4.6rem);line-height:1.1;margin:0} .w-nojs{font-family:var(--serif);font-style:italic;text-align:center;font-size:1.15rem;color:rgba(251,248,242,.9);margin:24px 0 0} #gallery{isolation:isolate;overflow:hidden;overflow:clip} .gal-title{position:relative;text-align:center;margin:0 0 clamp(44px,7vw,84px);font-family:"Det Title",var(--script);font-variant-ligatures:none;font-feature-settings:"liga" 0;font-weight:400;font-size:clamp(2.2rem,11vw,5.6rem);line-height:1.15;color:#fff;text-shadow:0 2px 14px rgba(60,45,30,.35),0 1px 3px rgba(60,45,30,.25);white-space:nowrap} .cf{position:relative;max-width:1100px;margin:0 auto;--w:min(340px,58vw);height:calc(var(--w)*1.5 + 24px + 46px);touch-action:pan-y;user-select:none;-webkit-user-select:none} .cf-stage{position:absolute;inset:0} .cf-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .cf-slide{position:absolute;left:50%;top:12px;width:var(--w);aspect-ratio:2/3;margin:0 0 0 calc(var(--w)/-2);border-radius:14px;overflow:hidden;background:#d9cfbf; box-shadow:0 18px 40px rgba(60,45,30,.28);cursor:pointer;backface-visibility:hidden; --x:2.2;--r:0deg;--s:.5;--o:0;--z:0;--tz:-400px;--b:1;--pe:none; transform:perspective(1000px) translateX(calc(var(--w)*var(--x))) translateZ(var(--tz)) rotateY(var(--r)) scale(var(--s)); opacity:var(--o);z-index:var(--z);filter:brightness(var(--b));pointer-events:var(--pe); transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,filter .7s} .cf-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none} .cf-nav{position:absolute;top:50%;translate:0 -50%;z-index:60;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(60,45,30,.35);color:#fff;display:none;place-items:center;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s} .cf-nav:hover{background:rgba(60,45,30,.55)} .cf-r:focus-visible~.cf-navs .cf-nav{outline:2px solid #fff;outline-offset:3px} .cf-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cf-prev{left:calc(50% - var(--w)/2 - 64px)} .cf-next{right:calc(50% - var(--w)/2 - 64px)} #cfR0:checked~.cf-stage>:nth-child(1){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR0:checked~.cf-stage>:nth-child(2){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR0:checked~.cf-stage>:nth-child(3){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR0:checked~.cf-stage>:nth-child(4){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR0:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(12){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(13){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(14){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(15){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(16){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(17){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR0:checked~.cf-stage>:nth-child(18){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR0:checked~.cf-stage>:nth-child(19){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR0:checked~.cf-stage>:nth-child(20){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR0:checked~.cf-navs>[data-k="0"]{display:grid} #cfR1:checked~.cf-stage>:nth-child(1){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR1:checked~.cf-stage>:nth-child(2){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR1:checked~.cf-stage>:nth-child(3){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR1:checked~.cf-stage>:nth-child(4){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR1:checked~.cf-stage>:nth-child(5){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR1:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(13){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(14){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(15){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(16){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(17){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(18){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR1:checked~.cf-stage>:nth-child(19){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR1:checked~.cf-stage>:nth-child(20){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR1:checked~.cf-navs>[data-k="1"]{display:grid} #cfR2:checked~.cf-stage>:nth-child(1){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR2:checked~.cf-stage>:nth-child(2){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR2:checked~.cf-stage>:nth-child(3){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR2:checked~.cf-stage>:nth-child(4){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR2:checked~.cf-stage>:nth-child(5){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR2:checked~.cf-stage>:nth-child(6){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR2:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(14){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(15){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(16){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(17){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(18){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(19){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR2:checked~.cf-stage>:nth-child(20){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR2:checked~.cf-navs>[data-k="2"]{display:grid} #cfR3:checked~.cf-stage>:nth-child(1){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(2){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(3){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(4){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(5){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(6){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(7){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR3:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(15){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(16){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(17){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(18){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(19){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-stage>:nth-child(20){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR3:checked~.cf-navs>[data-k="3"]{display:grid} #cfR4:checked~.cf-stage>:nth-child(1){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(2){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(3){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(4){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(5){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(6){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(7){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(8){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR4:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(16){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(17){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(18){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(19){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-stage>:nth-child(20){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR4:checked~.cf-navs>[data-k="4"]{display:grid} #cfR5:checked~.cf-stage>:nth-child(1){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(2){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(3){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(4){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(5){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(6){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(7){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(8){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(9){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR5:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(17){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(18){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(19){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-stage>:nth-child(20){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR5:checked~.cf-navs>[data-k="5"]{display:grid} #cfR6:checked~.cf-stage>:nth-child(1){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(2){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(3){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(4){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(5){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(6){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(7){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(8){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(9){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(10){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR6:checked~.cf-stage>:nth-child(11){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(18){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(19){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-stage>:nth-child(20){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR6:checked~.cf-navs>[data-k="6"]{display:grid} #cfR7:checked~.cf-stage>:nth-child(1){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(2){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(3){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(4){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(5){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(6){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(7){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(8){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(9){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(10){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(11){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR7:checked~.cf-stage>:nth-child(12){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(19){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-stage>:nth-child(20){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR7:checked~.cf-navs>[data-k="7"]{display:grid} #cfR8:checked~.cf-stage>:nth-child(1){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(2){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(3){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(4){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(5){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(6){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(7){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(8){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(9){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(10){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(11){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(12){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR8:checked~.cf-stage>:nth-child(13){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-stage>:nth-child(20){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR8:checked~.cf-navs>[data-k="8"]{display:grid} #cfR9:checked~.cf-stage>:nth-child(1){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(2){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(3){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(4){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(5){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(6){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(7){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(8){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(9){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(10){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(11){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(12){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(13){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR9:checked~.cf-stage>:nth-child(14){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR9:checked~.cf-navs>[data-k="9"]{display:grid} #cfR10:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(2){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(3){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(4){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(5){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(6){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(7){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(8){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(9){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(10){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(11){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(12){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(13){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(14){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR10:checked~.cf-stage>:nth-child(15){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR10:checked~.cf-navs>[data-k="10"]{display:grid} #cfR11:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(3){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(4){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(5){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(6){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(7){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(8){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(9){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(10){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(11){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(12){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(13){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(14){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(15){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR11:checked~.cf-stage>:nth-child(16){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR11:checked~.cf-navs>[data-k="11"]{display:grid} #cfR12:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(4){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(5){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(6){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(7){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(8){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(9){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(10){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(11){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(12){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(13){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(14){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(15){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(16){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR12:checked~.cf-stage>:nth-child(17){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR12:checked~.cf-navs>[data-k="12"]{display:grid} #cfR13:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(5){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(6){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(7){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(8){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(9){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(10){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(11){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(12){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(13){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(14){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(15){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(16){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(17){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR13:checked~.cf-stage>:nth-child(18){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR13:checked~.cf-navs>[data-k="13"]{display:grid} #cfR14:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(6){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(7){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(8){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(9){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(10){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(11){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(12){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(13){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(14){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(15){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(16){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(17){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(18){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR14:checked~.cf-stage>:nth-child(19){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR14:checked~.cf-navs>[data-k="14"]{display:grid} #cfR15:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(7){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(8){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(9){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(10){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(11){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(12){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-stage>:nth-child(13){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(14){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(15){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(16){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(17){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(18){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(19){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR15:checked~.cf-stage>:nth-child(20){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR15:checked~.cf-navs>[data-k="15"]{display:grid} #cfR16:checked~.cf-stage>:nth-child(1){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(8){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(9){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(10){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(11){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(12){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(13){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR16:checked~.cf-stage>:nth-child(14){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR16:checked~.cf-stage>:nth-child(15){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR16:checked~.cf-stage>:nth-child(16){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR16:checked~.cf-stage>:nth-child(17){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR16:checked~.cf-stage>:nth-child(18){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR16:checked~.cf-stage>:nth-child(19){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR16:checked~.cf-stage>:nth-child(20){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR16:checked~.cf-navs>[data-k="16"]{display:grid} #cfR17:checked~.cf-stage>:nth-child(1){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR17:checked~.cf-stage>:nth-child(2){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(9){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(10){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(11){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(12){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(13){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(14){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR17:checked~.cf-stage>:nth-child(15){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR17:checked~.cf-stage>:nth-child(16){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR17:checked~.cf-stage>:nth-child(17){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR17:checked~.cf-stage>:nth-child(18){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR17:checked~.cf-stage>:nth-child(19){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR17:checked~.cf-stage>:nth-child(20){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR17:checked~.cf-navs>[data-k="17"]{display:grid} #cfR18:checked~.cf-stage>:nth-child(1){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR18:checked~.cf-stage>:nth-child(2){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR18:checked~.cf-stage>:nth-child(3){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(10){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(11){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(12){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(13){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(14){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(15){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR18:checked~.cf-stage>:nth-child(16){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR18:checked~.cf-stage>:nth-child(17){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR18:checked~.cf-stage>:nth-child(18){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR18:checked~.cf-stage>:nth-child(19){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR18:checked~.cf-stage>:nth-child(20){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR18:checked~.cf-navs>[data-k="18"]{display:grid} #cfR19:checked~.cf-stage>:nth-child(1){--x:0.8;--r:34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR19:checked~.cf-stage>:nth-child(2){--x:1.24;--r:58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR19:checked~.cf-stage>:nth-child(3){--x:1.64;--r:20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR19:checked~.cf-stage>:nth-child(4){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(5){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(6){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(7){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(8){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(9){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(10){--x:2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(11){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(12){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(13){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(14){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(15){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(16){--x:-2.2;--o:0;--z:0;--pe:none;--s:.5;--r:0deg;--tz:-400px} #cfR19:checked~.cf-stage>:nth-child(17){--x:-1.64;--r:-20deg;--s:0.68;--o:0.45;--z:47;--tz:-270px;--b:0.76;--pe:auto} #cfR19:checked~.cf-stage>:nth-child(18){--x:-1.24;--r:-58deg;--s:0.8;--o:0.5;--z:48;--tz:-180px;--b:0.84;--pe:auto} #cfR19:checked~.cf-stage>:nth-child(19){--x:-0.8;--r:-34deg;--s:0.86;--o:0.55;--z:49;--tz:-90px;--b:0.92;--pe:auto} #cfR19:checked~.cf-stage>:nth-child(20){--x:0;--r:0deg;--s:1;--o:1;--z:50;--tz:0px;--b:1.0;--pe:auto} #cfR19:checked~.cf-navs>[data-k="19"]{display:grid} .cf-dots{position:absolute;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;align-items:center;gap:2px} .cf-dot{display:block;padding:10px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent} .cf-dot::before{content:"";display:block;width:9px;height:9px;border-radius:999px;background:rgba(110,80,58,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:width .5s cubic-bezier(.2,.7,.2,1),background .5s} .cf-dot:hover::before{background:rgba(110,80,58,.5)} .cf-r:focus-visible~.cf-dots{outline:none} #cfR0:checked~.cf-dots>:nth-child(1)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR1:checked~.cf-dots>:nth-child(2)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR2:checked~.cf-dots>:nth-child(3)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR3:checked~.cf-dots>:nth-child(4)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR4:checked~.cf-dots>:nth-child(5)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR5:checked~.cf-dots>:nth-child(6)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR6:checked~.cf-dots>:nth-child(7)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR7:checked~.cf-dots>:nth-child(8)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR8:checked~.cf-dots>:nth-child(9)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR9:checked~.cf-dots>:nth-child(10)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR10:checked~.cf-dots>:nth-child(11)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR11:checked~.cf-dots>:nth-child(12)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR12:checked~.cf-dots>:nth-child(13)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR13:checked~.cf-dots>:nth-child(14)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR14:checked~.cf-dots>:nth-child(15)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR15:checked~.cf-dots>:nth-child(16)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR16:checked~.cf-dots>:nth-child(17)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR17:checked~.cf-dots>:nth-child(18)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR18:checked~.cf-dots>:nth-child(19)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} #cfR19:checked~.cf-dots>:nth-child(20)::before{width:var(--dotw,30px);background:#c99d76;box-shadow:0 2px 6px rgba(90,60,40,.3)} @media (max-width:760px){.cf{--dotw:18px}.cf-dots{gap:0}.cf-dot{padding:10px 2.5px}.cf-dot::before{width:6px;height:6px}} @media (max-width:760px){.cf{--w:min(300px,64vw)}.cf-nav{width:36px;height:36px}.cf-prev{left:6px}.cf-next{right:6px}} :root{--g1:url(../images/gallery/01.webp);--g2:url(../images/gallery/02.webp);--g3:url(../images/gallery/03.webp);--g4:url(../images/gallery/04.webp);--g5:url(../images/gallery/05.webp);--g6:url(../images/gallery/06.webp);--g7:url(../images/gallery/07.webp);--g8:url(../images/gallery/08.webp);--g9:url(../images/gallery/09.webp);--g10:url(../images/gallery/10.webp);--g11:url(../images/gallery/11.webp);--g12:url(../images/gallery/12.webp);--g13:url(../images/gallery/13.webp);--g14:url(../images/gallery/14.webp);--g15:url(../images/gallery/15.webp);--g16:url(../images/gallery/16.webp);--g17:url(../images/gallery/17.webp);--g18:url(../images/gallery/18.webp);--g19:url(../images/gallery/19.webp);--g20:url(../images/gallery/20.webp);} .cf-img{display:block;width:100%;height:100%;background:center/cover no-repeat} /* Chưa tải ảnh album cho tới khi JS thêm .gal-load; không có JS thì vẫn tải bình thường */ html.js-lazy:not(.gal-load) .cf-img,html.js-lazy:not(.gal-load) .lb-th,html.js-lazy:not(.gal-load) .lb-img{background-image:none!important} .cf-slide.is-framed{background:#fff;padding:clamp(5px,calc(var(--w)*.024),9px)}.cf-slide.is-framed .cf-img{border-radius:9px} .cf-stage>:nth-child(1) .cf-img,.lb-th:nth-child(1){background-image:var(--g1)} .cf-stage>:nth-child(2) .cf-img,.lb-th:nth-child(2){background-image:var(--g2)} .cf-stage>:nth-child(3) .cf-img,.lb-th:nth-child(3){background-image:var(--g3)} .cf-stage>:nth-child(4) .cf-img,.lb-th:nth-child(4){background-image:var(--g4)} .cf-stage>:nth-child(5) .cf-img,.lb-th:nth-child(5){background-image:var(--g5)} .cf-stage>:nth-child(6) .cf-img,.lb-th:nth-child(6){background-image:var(--g6)} .cf-stage>:nth-child(7) .cf-img,.lb-th:nth-child(7){background-image:var(--g7)} .cf-stage>:nth-child(8) .cf-img,.lb-th:nth-child(8){background-image:var(--g8)} .cf-stage>:nth-child(9) .cf-img,.lb-th:nth-child(9){background-image:var(--g9)} .cf-stage>:nth-child(10) .cf-img,.lb-th:nth-child(10){background-image:var(--g10)} .cf-stage>:nth-child(11) .cf-img,.lb-th:nth-child(11){background-image:var(--g11)} .cf-stage>:nth-child(12) .cf-img,.lb-th:nth-child(12){background-image:var(--g12)} .cf-stage>:nth-child(13) .cf-img,.lb-th:nth-child(13){background-image:var(--g13)} .cf-stage>:nth-child(14) .cf-img,.lb-th:nth-child(14){background-image:var(--g14)} .cf-stage>:nth-child(15) .cf-img,.lb-th:nth-child(15){background-image:var(--g15)} .cf-stage>:nth-child(16) .cf-img,.lb-th:nth-child(16){background-image:var(--g16)} .cf-stage>:nth-child(17) .cf-img,.lb-th:nth-child(17){background-image:var(--g17)} .cf-stage>:nth-child(18) .cf-img,.lb-th:nth-child(18){background-image:var(--g18)} .cf-stage>:nth-child(19) .cf-img,.lb-th:nth-child(19){background-image:var(--g19)} .cf-stage>:nth-child(20) .cf-img,.lb-th:nth-child(20){background-image:var(--g20)} .cf-zoom{position:absolute;left:50%;top:12px;width:var(--w);aspect-ratio:2/3;margin-left:calc(var(--w)/-2);z-index:55;cursor:zoom-in;border-radius:14px} /* ---------- Lightbox ---------- */ .lb{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.2vh,22px);padding:56px 16px max(16px,env(safe-area-inset-bottom,0px))} body:has(#lbChk:checked){overflow:hidden} body:has(#lbChk:checked) .lb{display:flex;animation:lbIn .3s ease both} @keyframes lbIn{from{opacity:0}to{opacity:1}} .lb-bg{position:absolute;inset:0;background:rgba(18,18,18,.97);cursor:zoom-out} .lb-count{position:absolute;top:12px;left:12px;z-index:2;font:500 .95rem/1 var(--serif);letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.1);padding:8px 12px;border-radius:999px} .lb-close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:2px solid #fff;color:#fff;display:grid;place-items:center;cursor:pointer;background:rgba(0,0,0,.25)} .lb-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:none} .lb-img{position:relative;z-index:1;height:min(calc(100vh - 190px),calc((100vw - 32px)*1.5));height:min(calc(100dvh - 190px),calc((100vw - 32px)*1.5));aspect-ratio:2/3;border-radius:16px;background:#222 center/cover no-repeat;box-shadow:0 20px 60px rgba(0,0,0,.5)} body:has(#cfR0:checked) .lb-img{background-image:var(--g1)}body:has(#cfR0:checked) .lb-count::before{content:"1 / 20"}body:has(#cfR0:checked) .lb-nav[data-k="0"]{display:grid}body:has(#cfR0:checked) .lb-th:nth-child(1){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR1:checked) .lb-img{background-image:var(--g2)}body:has(#cfR1:checked) .lb-count::before{content:"2 / 20"}body:has(#cfR1:checked) .lb-nav[data-k="1"]{display:grid}body:has(#cfR1:checked) .lb-th:nth-child(2){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR2:checked) .lb-img{background-image:var(--g3)}body:has(#cfR2:checked) .lb-count::before{content:"3 / 20"}body:has(#cfR2:checked) .lb-nav[data-k="2"]{display:grid}body:has(#cfR2:checked) .lb-th:nth-child(3){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR3:checked) .lb-img{background-image:var(--g4)}body:has(#cfR3:checked) .lb-count::before{content:"4 / 20"}body:has(#cfR3:checked) .lb-nav[data-k="3"]{display:grid}body:has(#cfR3:checked) .lb-th:nth-child(4){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR4:checked) .lb-img{background-image:var(--g5)}body:has(#cfR4:checked) .lb-count::before{content:"5 / 20"}body:has(#cfR4:checked) .lb-nav[data-k="4"]{display:grid}body:has(#cfR4:checked) .lb-th:nth-child(5){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR5:checked) .lb-img{background-image:var(--g6)}body:has(#cfR5:checked) .lb-count::before{content:"6 / 20"}body:has(#cfR5:checked) .lb-nav[data-k="5"]{display:grid}body:has(#cfR5:checked) .lb-th:nth-child(6){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR6:checked) .lb-img{background-image:var(--g7)}body:has(#cfR6:checked) .lb-count::before{content:"7 / 20"}body:has(#cfR6:checked) .lb-nav[data-k="6"]{display:grid}body:has(#cfR6:checked) .lb-th:nth-child(7){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR7:checked) .lb-img{background-image:var(--g8)}body:has(#cfR7:checked) .lb-count::before{content:"8 / 20"}body:has(#cfR7:checked) .lb-nav[data-k="7"]{display:grid}body:has(#cfR7:checked) .lb-th:nth-child(8){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR8:checked) .lb-img{background-image:var(--g9)}body:has(#cfR8:checked) .lb-count::before{content:"9 / 20"}body:has(#cfR8:checked) .lb-nav[data-k="8"]{display:grid}body:has(#cfR8:checked) .lb-th:nth-child(9){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR9:checked) .lb-img{background-image:var(--g10)}body:has(#cfR9:checked) .lb-count::before{content:"10 / 20"}body:has(#cfR9:checked) .lb-nav[data-k="9"]{display:grid}body:has(#cfR9:checked) .lb-th:nth-child(10){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR10:checked) .lb-img{background-image:var(--g11)}body:has(#cfR10:checked) .lb-count::before{content:"11 / 20"}body:has(#cfR10:checked) .lb-nav[data-k="10"]{display:grid}body:has(#cfR10:checked) .lb-th:nth-child(11){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR11:checked) .lb-img{background-image:var(--g12)}body:has(#cfR11:checked) .lb-count::before{content:"12 / 20"}body:has(#cfR11:checked) .lb-nav[data-k="11"]{display:grid}body:has(#cfR11:checked) .lb-th:nth-child(12){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR12:checked) .lb-img{background-image:var(--g13)}body:has(#cfR12:checked) .lb-count::before{content:"13 / 20"}body:has(#cfR12:checked) .lb-nav[data-k="12"]{display:grid}body:has(#cfR12:checked) .lb-th:nth-child(13){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR13:checked) .lb-img{background-image:var(--g14)}body:has(#cfR13:checked) .lb-count::before{content:"14 / 20"}body:has(#cfR13:checked) .lb-nav[data-k="13"]{display:grid}body:has(#cfR13:checked) .lb-th:nth-child(14){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR14:checked) .lb-img{background-image:var(--g15)}body:has(#cfR14:checked) .lb-count::before{content:"15 / 20"}body:has(#cfR14:checked) .lb-nav[data-k="14"]{display:grid}body:has(#cfR14:checked) .lb-th:nth-child(15){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR15:checked) .lb-img{background-image:var(--g16)}body:has(#cfR15:checked) .lb-count::before{content:"16 / 20"}body:has(#cfR15:checked) .lb-nav[data-k="15"]{display:grid}body:has(#cfR15:checked) .lb-th:nth-child(16){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR16:checked) .lb-img{background-image:var(--g17)}body:has(#cfR16:checked) .lb-count::before{content:"17 / 20"}body:has(#cfR16:checked) .lb-nav[data-k="16"]{display:grid}body:has(#cfR16:checked) .lb-th:nth-child(17){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR17:checked) .lb-img{background-image:var(--g18)}body:has(#cfR17:checked) .lb-count::before{content:"18 / 20"}body:has(#cfR17:checked) .lb-nav[data-k="17"]{display:grid}body:has(#cfR17:checked) .lb-th:nth-child(18){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR18:checked) .lb-img{background-image:var(--g19)}body:has(#cfR18:checked) .lb-count::before{content:"19 / 20"}body:has(#cfR18:checked) .lb-nav[data-k="18"]{display:grid}body:has(#cfR18:checked) .lb-th:nth-child(19){opacity:1;outline:2px solid #fff;outline-offset:2px} body:has(#cfR19:checked) .lb-img{background-image:var(--g20)}body:has(#cfR19:checked) .lb-count::before{content:"20 / 20"}body:has(#cfR19:checked) .lb-nav[data-k="19"]{display:grid}body:has(#cfR19:checked) .lb-th:nth-child(20){opacity:1;outline:2px solid #fff;outline-offset:2px} .lb-nav{position:absolute;top:calc(50% - 40px);z-index:2;width:48px;height:48px;display:none;place-items:center;color:#fff;cursor:pointer;border-radius:50%} .lb-nav:hover{background:rgba(255,255,255,.1)} .lb-nav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .lb-prev{left:max(8px,calc(50% - min(calc(100vh - 190px),calc((100vw - 32px)*1.5))/3 - 80px))} .lb-next{right:max(8px,calc(50% - min(calc(100vh - 190px),calc((100vw - 32px)*1.5))/3 - 80px))} .lb-thumbs{position:relative;z-index:1;display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:4px;scrollbar-width:none} .lb-thumbs::-webkit-scrollbar{display:none} .lb-th{flex:0 0 auto;width:clamp(44px,8vw,62px);aspect-ratio:1;border-radius:6px;background:center 30%/cover no-repeat;opacity:.55;cursor:pointer;transition:opacity .2s} .lb-th:hover{opacity:.85} @media (max-width:760px){.lb-nav{top:auto;bottom:max(10px,env(safe-area-inset-bottom,0px));width:40px;height:40px;background:rgba(255,255,255,.12)}.lb-prev{left:16px}.lb-next{right:16px}.lb-img{height:min(calc(100vh - 230px),calc((100vw - 32px)*1.5));height:min(calc(100dvh - 230px),calc((100vw - 32px)*1.5))}.lb{padding-bottom:max(70px,env(safe-area-inset-bottom,0px))}} @media (max-width:760px){.lb-thumbs{order:3}} /* ---------- Gifts ---------- */ .gifts{position:relative;background:#6a6f5c url(../images/gifts-bg.webp) center 72%/cover no-repeat;padding:clamp(40px,4vw,56px) 16px;display:grid;place-items:center;overflow:hidden} .g-card{position:relative;width:min(470px,84vw);aspect-ratio:900/1123;container-type:inline-size;filter:drop-shadow(0 16px 26px rgba(20,22,15,.25))} .g-card>img{position:absolute;inset:0;width:100%;height:100%;display:block} .g-title{position:absolute;left:28%;right:28%;top:22.5%;margin:0;text-align:center;font-family:"Det Title",var(--script);font-variant-ligatures:none;font-feature-settings:"liga" 0;font-weight:400;font-size:12.5cqw;line-height:1;color:var(--ink);white-space:nowrap;display:flex;justify-content:center} .g-title span{display:inline-block;transform:translateX(-5.7%)} .g-msg{position:absolute;left:32%;right:32%;top:43%;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:max(11px,3.2cqw);line-height:1.6;color:#3a352c;text-wrap:balance} .g-cta{position:absolute;left:14%;right:14%;top:74%;bottom:4%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)} .g-cta-script{font-family:"Pinyon Script",var(--script);font-size:10.5cqw;line-height:1.1;white-space:nowrap} .g-cta-sm{font-family:var(--serif);font-weight:600;font-size:max(11px,2.9cqw);letter-spacing:.18em;margin-top:1.2cqw;padding-bottom:.4cqw;border-bottom:1px solid transparent;transition:border-color .2s} .g-cta:hover .g-cta-sm,.g-cta:focus-visible .g-cta-sm{border-bottom-color:currentColor} .g-cta:focus-visible .g-cta-sm{border-bottom-color:currentColor} .g-cta:focus-visible{outline:1px solid var(--ink);outline-offset:4px} /* ---------- Gift modal ---------- */ .gm{border:0;padding:0;margin:auto;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:2px;overflow:hidden;color:var(--ink);box-shadow:0 30px 70px rgba(30,32,22,.45)} .gm::backdrop{background:rgba(32,34,26,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .gm[open]{display:flex;flex-direction:column;animation:gmIn .45s cubic-bezier(.2,.7,.2,1) both} @keyframes gmIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} body:has(.gm[open]){overflow:hidden} .gm-in{position:relative;margin:10px;border:1px solid rgba(60,64,49,.35);outline:1px solid rgba(60,64,49,.18);outline-offset:-6px;overflow-y:auto;padding:clamp(26px,5vw,38px) clamp(16px,4vw,30px) clamp(24px,4vw,32px)} .gm-head{text-align:center;padding:0 30px} .gm-head h2{margin:0;font-family:var(--script);font-size:clamp(2.3rem,9vw,3.6rem);line-height:1.15;white-space:nowrap;color:var(--olive)} .gm-head p{margin:6px auto 0;max-width:26em;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--muted);text-wrap:balance} .gm-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 0;color:rgba(60,64,49,.55)} .gm-rule::before,.gm-rule::after{content:"";width:64px;height:1px;background:currentColor} .gm-rule i{width:6px;height:6px;background:currentColor;transform:rotate(45deg)} .gm-x{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(60,64,49,.45);background:transparent;color:var(--olive);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s} .gm-x:hover{background:var(--olive);color:var(--white)} .gm-x:focus-visible,.gm-save:focus-visible{outline:2px solid var(--olive);outline-offset:3px} .gm-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .gm-body{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(16px,4vw,30px);margin-top:clamp(22px,4vw,30px)} .gm-body::before{content:"";grid-column:2;grid-row:1;background:linear-gradient(rgba(60,64,49,0),rgba(60,64,49,.3) 20%,rgba(60,64,49,.3) 80%,rgba(60,64,49,0))} .gm-acc{grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0} .gm-acc:first-of-type{grid-column:1}.gm-acc:last-of-type{grid-column:3} .gm-role{margin:0;font-family:var(--serif);font-weight:500;font-size:.88rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)} .gm-who{margin:2px 0 16px;font-family:var(--script);font-size:2.1rem;line-height:1.2;color:var(--ink)} .gm-qr{width:min(196px,100%);aspect-ratio:1;padding:13px;background:#fff;border-radius:6px;box-shadow:0 0 0 1px rgba(60,64,49,.12),0 10px 24px rgba(60,50,35,.14)} .gm-qr img{width:100%;height:100%;display:block} .gm-bank{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--muted)} .gm-no{margin:0;font-family:"Det Body",var(--serif);font-size:1.2rem;letter-spacing:.08em;color:var(--ink)} .gm-name{margin:0;font-family:"Det Body",var(--serif);font-size:.95rem;letter-spacing:.14em;color:var(--olive)} .gm-save{margin-top:14px;display:inline-flex;align-items:center;gap:7px;border:0;border-radius:3px;background:var(--olive);color:var(--white);font-family:var(--serif);font-size:1.02rem;letter-spacing:.04em;padding:8px 18px;cursor:pointer;transition:opacity .2s} .gm-save:hover{opacity:.88} .gm-copy{margin-top:12px;border:1px solid rgba(60,64,49,.45);border-radius:3px;background:transparent;color:var(--olive);font-family:var(--serif);font-size:1.02rem;letter-spacing:.04em;padding:6px 14px;cursor:pointer;transition:background .2s,color .2s} .gm-copy:hover{background:rgba(60,64,49,.08)} .gm-copy:focus-visible{outline:2px solid var(--olive);outline-offset:2px} .gm-copy.is-done{background:#5d6449;border-color:#5d6449;color:var(--white)} .gm-copy+.gm-save{margin-top:8px} .gm[open] .gm-copy{animation:gmUp .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:.96s} .gm[open] .gm-acc+.gm-acc .gm-copy{animation-delay:1.11s} .gm-save svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* gift modal motion */ .gm-head,.gm-acc{position:relative;z-index:1}.gm-x{z-index:2} .gm[open] .gm-head h2,.gm[open] .gm-head p,.gm[open] .gm-role,.gm[open] .gm-who,.gm[open] .gm-qr,.gm[open] .gm-bank,.gm[open] .gm-no,.gm[open] .gm-name,.gm[open] .gm-save{animation:gmUp .7s cubic-bezier(.2,.7,.2,1) both} .gm[open] .gm-head h2{animation-name:gmInk;animation-duration:1s;animation-delay:.1s} .gm[open] .gm-head p{animation-delay:.3s} .gm[open] .gm-acc .gm-role{animation-delay:.45s}.gm[open] .gm-acc .gm-who{animation-delay:.52s} .gm[open] .gm-acc .gm-qr{animation-name:gmPop;animation-duration:.8s;animation-delay:.62s} .gm[open] .gm-acc .gm-bank{animation-delay:.8s}.gm[open] .gm-acc .gm-no{animation-delay:.86s}.gm[open] .gm-acc .gm-name{animation-delay:.92s}.gm[open] .gm-acc .gm-save{animation-delay:1s} .gm[open] .gm-acc+.gm-acc>*{animation-delay:calc(var(--d,0s) + .15s)} .gm-acc+.gm-acc .gm-role{--d:.45s}.gm-acc+.gm-acc .gm-who{--d:.52s}.gm-acc+.gm-acc .gm-qr{--d:.62s}.gm-acc+.gm-acc .gm-bank{--d:.8s}.gm-acc+.gm-acc .gm-no{--d:.86s}.gm-acc+.gm-acc .gm-name{--d:.92s}.gm-acc+.gm-acc .gm-save{--d:1s} @keyframes gmUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes gmInk{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(4px)}to{opacity:1;clip-path:inset(0 -10% 0 0);transform:none}} @keyframes gmPop{from{opacity:0;transform:translateY(18px) scale(.92)}60%{opacity:1}to{opacity:1;transform:none}} .gm[open] .gm-rule::before,.gm[open] .gm-rule::after{animation:gmLine .9s cubic-bezier(.2,.7,.2,1) .35s both} .gm[open] .gm-rule::before{transform-origin:right}.gm[open] .gm-rule::after{transform-origin:left} .gm[open] .gm-rule i{animation:gmGem .6s ease .3s both,gmTwinkle 3.2s ease-in-out 1.2s infinite} @keyframes gmLine{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes gmGem{from{opacity:0;transform:rotate(-135deg) scale(0)}to{opacity:1;transform:rotate(45deg) scale(1)}} @keyframes gmTwinkle{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.5);opacity:.6}} .gm-body::before{transform-origin:top} .gm[open] .gm-body::before{animation:gmV 1s cubic-bezier(.2,.7,.2,1) .5s both} @keyframes gmV{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* QR card: hover lift */ .gm-qr{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s} .gm-qr:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(60,64,49,.16),0 18px 34px rgba(60,50,35,.2)} /* save button */ .gm-save{position:relative;overflow:hidden;transition:opacity .2s,transform .2s,background .3s} .gm-save:active{transform:scale(.96)} .gm-save svg{transition:transform .3s} .gm-save:hover svg{animation:gmBob .9s ease-in-out infinite} @keyframes gmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}} .gm-save.is-done{background:#5d6449} .gm-save .gm-ok{display:none}.gm-save.is-done .gm-ok{display:inline}.gm-save.is-done .gm-dl{display:none} .gm-save.is-done::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(93,100,73,.6);animation:gmRing .7s ease-out} @keyframes gmRing{to{box-shadow:0 0 0 14px rgba(93,100,73,0)}} /* CTA on the card: gentle invitation */ .g-cta-script{animation:gmBreath 3.2s ease-in-out infinite} @keyframes gmBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .g-cta-sm{background:linear-gradient(90deg,var(--ink) 0 40%,#a3a886 50%,var(--ink) 60% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gmText 3.6s linear infinite} .g-cta:hover .g-cta-sm,.g-cta:focus-visible .g-cta-sm{border-bottom-color:var(--ink)} @keyframes gmText{from{background-position:100% 0}to{background-position:-150% 0}} @media (max-width:540px){.gm{width:calc(100vw - 16px)}.gm-in{margin:6px;padding:22px 12px 20px}.gm-head{padding:0 36px}.gm-head h2{font-size:clamp(1.9rem,9vw,2.6rem)}.gm-head p{font-size:.92rem}.gm-rule{margin-top:12px}.gm-body{gap:12px;margin-top:18px}.gm-role{font-size:.7rem;letter-spacing:.22em}.gm-who{font-size:clamp(1.35rem,6.4vw,1.8rem);margin-bottom:10px;white-space:nowrap}.gm-qr{padding:8px;border-radius:5px}.gm-bank{font-size:.88rem;margin-top:10px}.gm-no{font-size:clamp(.78rem,3.6vw,1rem);letter-spacing:.03em}.gm-name{font-size:clamp(.64rem,2.9vw,.82rem);letter-spacing:.06em}.gm-save{font-size:.85rem;padding:7px 11px;gap:5px;margin-top:10px}.gm-copy{font-size:.85rem;padding:6px 11px;margin-top:10px}.gm-copy+.gm-save{margin-top:6px}.gm-save svg{width:13px;height:13px}} /* ---------- Music ---------- */ .mu{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));z-index:120;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(60,64,49,.35);background:rgba(243,239,230,.92);color:var(--olive);box-shadow:0 6px 18px rgba(40,36,28,.22);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .6s,transform .6s,visibility .6s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} body.opened .mu{opacity:1;visibility:visible;transform:none;transition-delay:1.2s} .mu:focus-visible{outline:2px solid var(--olive);outline-offset:3px} .mu svg{width:34px;height:34px;display:block} .mu .disc{transform-origin:50% 50%;animation:muSpin 6s linear infinite;animation-play-state:paused} .mu.is-on .disc{animation-play-state:running} @keyframes muSpin{to{transform:rotate(360deg)}} .mu .off{opacity:0;transition:opacity .25s} .mu:not(.is-on) .off{opacity:1} .mu::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(60,64,49,.35);opacity:0} .mu.is-on::after{animation:muRing 2.4s ease-out infinite} @keyframes muRing{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.5)}} body:has(#lbChk:checked) .mu{opacity:0;visibility:hidden} @media (prefers-reduced-motion:reduce){.mu .disc,.mu.is-on::after{animation:none}} /* ---------- Wishes ---------- */ .w-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot chống spam bot */ .wishes{background:var(--olive) url(../images/olive-texture.webp) center top/1095px auto repeat;color:var(--white);padding-block:clamp(56px,8vw,100px);text-align:center} .w-title{font-family:"Det Title",var(--script);font-variant-ligatures:none;font-feature-settings:"liga" 0;font-weight:400;font-size:clamp(3.8rem,10vw,6rem);line-height:1.1;margin:0 0 .15em} .w-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.6vw,1.25rem);line-height:1.55;max-width:30em;margin:6px auto 0;color:rgba(251,248,242,.9);text-wrap:balance} .w-card{max-width:500px;margin:clamp(26px,4vw,36px) auto 0;background:rgba(40,42,32,.55);padding:clamp(22px,4vw,34px);text-align:left;display:flex;flex-direction:column;gap:18px} .w-field{display:flex;flex-direction:column;gap:8px} .w-field label{font-family:var(--serif);font-style:italic;font-size:1.05rem} .w-field input,.w-field textarea{font:inherit;font-family:var(--serif);font-size:1.1rem;color:var(--white);background:transparent;border:1px solid rgba(251,248,242,.45);border-radius:3px;padding:10px 12px;width:100%} .w-field textarea{min-height:110px;resize:vertical;line-height:1.5} .w-field input:focus-visible,.w-field textarea:focus-visible{outline:none;border-color:var(--white);box-shadow:0 0 0 1px var(--white)} .w-field input::placeholder,.w-field textarea::placeholder{color:rgba(251,248,242,.45)} .w-btn{font-family:var(--serif);font-size:1.15rem;letter-spacing:.04em;background:var(--white);color:var(--olive);border:0;border-radius:3px;padding:12px 16px;cursor:pointer;transition:opacity .2s} .w-btn:hover{opacity:.9}.w-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px} .w-btn:disabled{opacity:.5;cursor:default} .w-status{font-family:var(--serif);font-size:1.05rem;text-align:center;min-height:1.4em;margin:0;color:rgba(251,248,242,.85)} .w-list{max-width:500px;margin:14px auto 0;max-height:560px;overflow-y:auto;text-align:left;display:flex;flex-direction:column;gap:12px;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(251,248,242,.35) transparent} .w-item{background:rgba(251,248,242,.08);border-left:2px solid rgba(251,248,242,.6);padding:14px 16px} .w-item.is-new{animation:wishIn .8s cubic-bezier(.2,.7,.2,1) both} @keyframes wishIn{from{opacity:0;transform:translateY(-14px);background:rgba(251,248,242,.3)}to{opacity:1;transform:none}} .w-name{font-family:var(--serif);font-weight:500;font-size:1.1rem;letter-spacing:.03em;margin:0 0 2px} .w-msg{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.55;margin:0;white-space:pre-wrap;overflow-wrap:anywhere} .w-empty{font-family:var(--serif);font-style:italic;text-align:center;color:rgba(251,248,242,.7);margin:6px 0 0} @media (max-width:760px){ .gallery{padding-block:clamp(48px,14vw,90px)} .gal-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:520px} .gal-row img{aspect-ratio:2/3;box-shadow:0 6px 16px rgba(70,55,40,.2)} } /* ---------- Story ---------- */ .story{padding-block:clamp(44px,6vw,80px)} .story-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,60px);align-items:center} .story-art{width:min(720px,100%);aspect-ratio:928/691;justify-self:center} .story-text{min-width:0} .story-h{text-align:center;margin:0 0 clamp(44px,6vw,64px);line-height:1} .story-h .our{display:block;font-family:"TL Big",var(--deco);font-size:clamp(2.2rem,5.4vw,3.2rem);letter-spacing:.06em;line-height:1;transform:translateX(-1.4em)} .story-h .st{display:block;font-family:"Det Title",var(--script);font-variant-ligatures:none;font-feature-settings:"liga" 0;font-size:clamp(3.8rem,9.5vw,6rem);line-height:.9;margin-top:-.3em} .story-text p{font-family:var(--hand);font-size:clamp(1.12rem,2.3vw,1.32rem);line-height:1.85;letter-spacing:.03em;margin:0 0 1.2em;max-width:36em;color:var(--ink)} /* ---------- Footer ---------- */ .foot{background:#2f3227 url(../images/cover-bg.webp) center 70%/cover no-repeat;color:var(--white);text-align:center;padding-block:clamp(56px,8vw,96px);position:relative} .foot::before{content:"";position:absolute;inset:0;background:rgba(30,32,24,.5)} .foot>*{position:relative} .foot .names{font-size:clamp(2.6rem,9vw,5rem)} .foot p{margin:0;font-family:var(--deco);letter-spacing:.24em;text-transform:uppercase;font-size:.95rem} .foot p.names{font-family:"ToanLinh Names",var(--script);text-transform:none;letter-spacing:0;font-size:clamp(2.6rem,9vw,5rem);line-height:1.2;margin:.3em 0 .5em;white-space:nowrap} /* ---------- Reveal ---------- */ .pending{opacity:0;transform:translateY(26px)} .shown{animation:rise 1s cubic-bezier(.2,.7,.2,1) both} @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* Mở thiệp: phong bì mờ dần, tên được "viết" ra, ảnh đặt xuống, rồi tới ngày và địa điểm */ body.opened .hero .seq{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .7s both} body.opened .hero .seq:nth-child(2){animation:inkWrite 1.9s cubic-bezier(.45,.05,.25,1) .9s backwards} body.opened .hero .seq:nth-child(3){animation:settle 1.3s cubic-bezier(.2,.7,.2,1) 1.25s both} body.opened .hero .seq:nth-child(4){animation-delay:1.7s} body.opened .hero .seq:nth-child(5){animation-delay:1.85s} body.opened .hero .seq:nth-child(6){animation-delay:2s} body.opened .scroll-cue{animation:cueIn 1s ease 2.6s both} @keyframes cueIn{from{opacity:0}to{opacity:.8}} /* Chỉ fill "backwards": hết animation thì bỏ clip-path, không cắt mất nét chữ dài */ @keyframes inkWrite{from{opacity:0;clip-path:inset(-60% 110% -60% -20%)}12%{opacity:1}to{opacity:1;clip-path:inset(-60% -20% -60% -20%)}} @keyframes settle{from{opacity:0;transform:translateY(22px) rotate(-3.5deg) scale(.95)}to{opacity:1;transform:none}} /* Tiêu đề viết tay được "viết" ra khi cuộn tới */ .gal-title.shown,.count-title.shown,.script-h.shown,.w-title.shown,.story-h.shown,.tl-head.shown,.foot .names.shown{animation:inkWrite 1.7s cubic-bezier(.45,.05,.25,1) backwards} /* Khung ảnh như được đặt xuống bàn */ .card.shown{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) both} /* Lịch trình hiện lần lượt theo giờ, hình minh hoạ được vẽ ra */ .tl-item:nth-child(2){--i:.35s} .tl-item:nth-child(3){--i:.7s} .tl-item.shown{animation-delay:var(--i,0s)} .tl-item.shown .tl-icon img{animation:inkWrite 1.3s cubic-bezier(.45,.05,.25,1) var(--i,0s) backwards} /* Cánh hoa: rơi khi mở thiệp, bay lên khi gửi lời chúc */ .petals{position:fixed;inset:0;z-index:110;overflow:hidden;pointer-events:none;contain:strict} .petal{position:absolute;top:0;left:0;width:var(--s);height:calc(var(--s)*.8);will-change:transform,opacity} .petal i{display:block;width:100%;height:100%;border-radius:80% 10% 80% 10%;background:linear-gradient(135deg,#fffdf8,#e6dfce);animation:petalFlutter var(--f) ease-in-out infinite alternate} .petal-fall{animation:petalFall var(--d) cubic-bezier(.3,.2,.6,1) var(--w) both} .petal-burst{animation:petalBurst var(--d) cubic-bezier(.15,.7,.3,1) var(--w) both} @keyframes petalFlutter{from{transform:rotateX(0) rotateY(0)}to{transform:rotateX(65deg) rotateY(35deg)}} @keyframes petalFall{from{opacity:0;transform:translate3d(var(--x),-8vh,0) rotate(0)}8%{opacity:.95}85%{opacity:.9}to{opacity:0;transform:translate3d(calc(var(--x) + var(--dx)),108vh,0) rotate(var(--r))}} @keyframes petalBurst{from{opacity:1;transform:translate3d(var(--x),var(--y),0) scale(.6)}60%{opacity:1}to{opacity:0;transform:translate3d(calc(var(--x) + var(--dx)),calc(var(--y) - var(--dy)),0) rotate(var(--r))}} @media (max-width:760px){ body{font-size:17px} .details-grid,.story-grid{grid-template-columns:minmax(0,1fr)} .card{width:min(380px,92%)} .tl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .tl-icon{height:clamp(64px,22vw,120px);margin-bottom:10px} .tl-icon img{max-width:100%;height:auto;max-height:100%;object-fit:contain} .tl-time{font-size:clamp(.95rem,4.2vw,1.3rem);letter-spacing:.03em;white-space:nowrap} .tl-what{font-size:clamp(.78rem,3.4vw,1rem);letter-spacing:.04em;line-height:1.3} .story-art{width:min(560px,100%)} .story-text p{margin-inline:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important} .pending{opacity:1;transform:none} html{scroll-behavior:auto} }