:root,.voly-root{--tex-linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .08' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.235  0 0 0 0 0.176  0 0 0 0 0.118  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");--tex-grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.157  0 0 0 0 0.118  0 0 0 0 0.078  0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");--tex-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .3' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.353  0 0 0 0 0.275  0 0 0 0 0.157  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");--paper:#fdfcf7;--desk:#e9e6f2;--ink:#3b2f7a;--ink-2:#6d6a86;--red:#b8413b;--thin:#8f8cd633;--thick:#8f8cd673;--g:clamp(16px, 4vw, 56px);--oly:repeating-linear-gradient(var(--thin) 0 1px, transparent 1px 8px), repeating-linear-gradient(var(--thick) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, var(--thick) 0 1px, transparent 1px 32px);--f-cursive:var(--font-cursive), cursive;--f-hand:var(--font-hand), cursive;--f-text:var(--font-text), Georgia, serif}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip}html.is-locked,html.is-locked body{overflow:hidden}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}img{max-width:100%;display:block}h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit}button{font:inherit;color:inherit}[tabindex="-1"]:focus{outline:none}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.nowrap{white-space:nowrap}.skip{z-index:300;color:#111;background:#fff;padding:10px 16px;position:fixed;top:12px;left:12px;transform:translateY(-160%)}.skip:focus{transform:none}h1,h2,h3{text-wrap:balance;font-weight:400}p{text-wrap:pretty}.site{transition:opacity .7s}.site--closed,.site--opening{opacity:0}.op__hit{z-index:5;cursor:pointer;position:absolute;inset:0}.opener--done{pointer-events:none}.has-amb{isolation:isolate;position:relative;overflow:clip}.fall{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden;container-type:size}.fall__i{left:var(--x);animation:fallY var(--d) linear var(--dl) infinite;position:absolute;top:0}.fall--rise .fall__i{animation-name:riseY}.fall__s{width:26px;height:26px;animation:fallSway calc(var(--d) / 3) ease-in-out var(--dl) infinite alternate;display:block}.fall__s svg{width:100%;height:100%;transform:scale(var(--s)) rotate(var(--r0));display:block;overflow:visible}@keyframes fallY{0%{transform:translateY(-40px)}to{transform:translateY(calc(100cqh + 40px))}}@keyframes riseY{0%{transform:translateY(calc(100cqh + 40px))}to{transform:translateY(-40px)}}@keyframes fallSway{0%{translate:calc(var(--sw) * -1) 0;rotate:-30deg}to{translate:var(--sw) 0;rotate:30deg}}.drift{z-index:-2;pointer-events:none;will-change:transform;position:absolute;inset:-20% 0}@media (prefers-reduced-motion:reduce){.fall{display:none}*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body{background:var(--desk);color:var(--ink);font-family:var(--f-text);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.7;overflow-x:clip}::selection{background:#b8413b2e}:focus-visible{outline:1.5px solid var(--red);outline-offset:4px}.sheet-u{container-type:inline-size}.paper{--cell:6cqw;background:repeating-linear-gradient(var(--thin) 0 1px, transparent 1px calc(var(--cell) / 4)), repeating-linear-gradient(var(--thick) 0 1px, transparent 1px var(--cell)), repeating-linear-gradient(90deg, var(--thick) 0 1px, transparent 1px var(--cell)), var(--paper);background-position:0 3.6cqw;position:relative}.pg__date{font-family:var(--f-cursive);font-size:3.6cqw;line-height:var(--cell);text-align:center}.pg__subject{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);text-align:center;font-size:2.1cqw;line-height:var(--cell)}.opener{z-index:100;background:var(--desk);place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.nb__shade{pointer-events:none;background:radial-gradient(70% 60% at 50% 45%,#ffffff80,#786eaa2e);position:absolute;inset:0}.nb{aspect-ratio:.72;perspective:1600px;width:min(64vw,320px);position:relative}.nb__page{position:absolute;inset:0}.nb__page>.paper{height:100%;padding:9cqw 6cqw 6cqw 22cqw;overflow:hidden;box-shadow:0 5cqw 9cqw -4cqw #3b2f7a66}.nb__page>.paper:before{content:"";background:#b8413b8c;width:1px;position:absolute;top:0;bottom:0;left:18cqw}.nb__cover{z-index:2;transform-origin:0;transform-style:preserve-3d;position:absolute;inset:0;container-type:inline-size}.nb__front,.nb__back{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:0 1.6cqw 1.6cqw 0;position:absolute;inset:0}.nb__front{background:radial-gradient(circle at 30% 20%,#ffffff1f,#0000 60%),repeating-linear-gradient(45deg,#ffffff0a 0 2px,#0000 2px 7px),#534e9f;place-items:center;display:grid;box-shadow:inset 3cqw 0 #0000001f,0 5cqw 9cqw -4cqw #3b2f7a80}.nb__back{background:#efeef8;transform:rotateY(180deg)}.nb__label{width:76%;color:var(--ink);background:#fff;border-radius:3cqw;padding:5cqw 6cqw;box-shadow:inset 0 0 0 1.4cqw #fff,inset 0 0 0 calc(1.4cqw + 1px) #8f8cd6,0 1cqw 2cqw #00000026}.nb__label-head{text-align:center;font-family:var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2cqw;font-size:3.6cqw}.nb__label p:not(.nb__label-head){border-bottom:1px dotted #3b2f7a66;align-items:baseline;gap:2cqw;padding:1.4cqw 0;font-size:3.6cqw;display:flex}.nb__label span{color:var(--ink-2);white-space:nowrap}.nb__label b{font-family:var(--f-cursive);font-size:5.6cqw;font-weight:400;line-height:1.1}.pg{padding:clamp(24px, 5vw, 64px) var(--g) clamp(60px, 8vw, 110px)}.pg__sheet>.paper{padding:9cqw 6cqw 10cqw 22cqw}.pg__sheet{width:min(100%,680px);margin:0 auto;position:relative;box-shadow:0 40px 70px -50px #3b2f7a8c,0 0 0 1px #3b2f7a0f}.pg__sheet>.paper:before{content:"";background:#b8413b8c;width:1px;position:absolute;top:0;bottom:0;left:18cqw}.pg__margin{justify-items:center;gap:2cqw;width:18cqw;display:grid;position:absolute;top:30cqw;left:0}.pg__score{place-items:center;width:12cqw;height:12cqw;display:grid;position:relative}.pg__score span{font-family:var(--f-cursive);color:var(--red);font-size:6cqw;font-weight:700}.red{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.red path{fill:none;stroke:var(--red);stroke-width:2px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;vector-effect:non-scaling-stroke}.pg__remark{font-family:var(--f-cursive);color:var(--red);text-align:center;font-size:2.6cqw;line-height:1.3;rotate:-6deg}.pg__head{text-align:center;position:relative}.pg__head h1{font-family:var(--f-cursive);font-size:6.4cqw;font-weight:700;line-height:var(--cell);margin-top:3cqw}.pg__under{width:70%;height:3cqw;margin:0 auto;display:block;position:relative}.pg__photo{float:right;margin:6cqw 0 0 auto;background:#fff;width:34cqw;margin-bottom:3cqw;margin-left:4cqw;padding:1.6cqw 1.6cqw 5cqw;position:relative;rotate:3deg;box-shadow:0 2cqw 4cqw -2cqw #3b2f7a80}.pg__photo img{aspect-ratio:4/5;object-fit:cover;width:100%}.pg__photo figcaption{font-family:var(--f-cursive);text-align:center;color:var(--ink-2);font-size:2.5cqw;position:absolute;bottom:1cqw;left:0;right:0}.pg__tape{background:#d6c8aab3;width:14cqw;height:4cqw;margin-left:-7cqw;position:absolute;top:-2cqw;left:50%;rotate:-4deg}.pg__letter{font-family:var(--f-cursive);font-size:3.7cqw;line-height:var(--cell);margin-top:6cqw}.pg__letter p{text-indent:2em}.pg__letter p+p{margin-top:var(--cell)}.pg__letter .pg__greet{text-indent:0;font-weight:700}.pg__sign{clear:both;text-align:right;font-weight:700;margin-top:calc(var(--cell) * 2)!important;text-indent:0!important}.pg__sign small{font-family:var(--f-text);color:var(--ink-2);font-size:2.2cqw;font-weight:400;display:block}.wm-doodle{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220'%3E%3Cg fill='none' stroke='%233b2f7a' stroke-opacity='.08' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M30 40 l6 14 15 1 -12 9 4 15 -13 -8 -13 8 4 -15 -12 -9 15 -1z'/%3E%3Cpath d='M180 60 c10 -20 40 -20 40 5 c0 20 -40 35 -40 35 c0 0 -40 -15 -40 -35 c0 -25 30 -25 40 -5z'/%3E%3Cpath d='M60 170 q20 -30 40 0 t40 0 t40 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 220px}.nt{padding:clamp(60px, 8vw, 110px) var(--g) 40px}.nt__head{text-align:center;max-width:560px;margin:0 auto clamp(32px,5vw,52px)}.nt__head h2{font-family:var(--f-cursive);margin-top:8px;font-size:clamp(40px,5.4vw,60px);font-weight:700;line-height:1.15}.nt__head>p:last-child{color:var(--ink-2);margin-top:6px}.nt__grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:28px 22px;max-width:1080px;margin:0 auto;display:grid}.slip{cursor:pointer;text-align:left;width:100%;min-height:120px;color:var(--ink);background:repeating-linear-gradient(var(--thin) 0 1px, transparent 1px 8px) 0 6px, var(--paper);clip-path:polygon(0 0,100% 0,100% 92%,94% 100%,86% 95%,76% 100%,64% 96%,52% 100%,40% 95%,28% 100%,16% 96%,6% 100%,0 94%);border:0;padding:22px 18px 18px;transition:transform .3s cubic-bezier(.3,1.4,.5,1);display:block;position:relative;box-shadow:0 16px 26px -18px #3b2f7a8c}.slip:hover{transform:translateY(-3px)}.slip__clip{border:1.6px solid #9a98a8;border-bottom-color:#0000;border-radius:6px;width:12px;height:30px;position:absolute;top:-2px;left:22px}.slip__fold{gap:4px;display:grid}.slip__to{font-family:var(--f-cursive);font-size:22px}.slip__by{font-family:var(--f-hand);color:var(--ink-2);font-size:18px}.slip__open,.slip.is-open .slip__fold{display:none}.slip.is-open .slip__open{transform-origin:50% 0;gap:10px;animation:.5s cubic-bezier(.3,.8,.3,1) unfold;display:grid}@keyframes unfold{0%{opacity:0;transform:scaleY(.3)}}.slip__text{font-family:var(--f-hand);font-size:20px;line-height:1.35}.slip__sign{font-family:var(--f-hand);color:var(--red);text-align:right;font-size:16px}@media (max-width:900px){.nt__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:380px){.slip__text{font-size:18px}}.nt__end{text-align:center;border-top:1px solid #3b2f7a33;max-width:900px;margin:clamp(72px,9vw,110px) auto 0;padding-top:26px;position:relative}.nt__wish{font-family:var(--f-cursive);font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.3}.nt__class{color:var(--ink-2);margin-top:8px}.nt__credit{color:var(--ink-2);margin-top:26px;font-size:13px}.nt__end.is-all:after{content:"Đã đọc hết";border:2px solid var(--red);font-family:var(--f-cursive);color:var(--red);border-radius:4px;padding:4px 12px;font-size:18px;position:absolute;top:-18px;right:0;rotate:8deg}.pencil{z-index:40;cursor:pointer;opacity:0;background:0 0;border:0;width:20px;padding:0;transition:opacity .4s,transform .4s;position:fixed;bottom:16px;right:20px;transform:translateY(16px)rotate(18deg)}.pencil.is-shown{opacity:1;transform:rotate(18deg)}.pencil:hover{transform:rotate(0)translateY(-4px)}.pencil svg{width:100%;height:auto;display:block}.nt__photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px);max-width:640px;margin:0 auto 36px;display:grid}.nt__photos li{background:#fff;padding:8px 8px 22px;box-shadow:0 14px 26px -18px #3b2f7a99}.nt__photos img{aspect-ratio:3/4;object-fit:cover;width:100%}.site--opening{opacity:1}body{background-image:var(--tex-linen), var(--tex-grain-dark)}body:after{content:"";z-index:2147483000;pointer-events:none;background:var(--tex-grain-dark);mix-blend-mode:multiply;opacity:.45;position:fixed;inset:0}.nb__label,.nt__photos li{background:var(--tex-fiber), var(--tex-grain-dark), #fff}@media (prefers-reduced-transparency:reduce){body:after{display:none}}.voly-root{font-family:var(--f-text);color:inherit}
