/* ================================================================= Birthday page — hand-drawn portfolio style ================================================================= */ :root{ --cream:#FDF2DE; --cream-2:#FFF9EC; --ink:#1B1B1B; --red:#E8385A; /* Đỏ đậm hơn CHỈ dùng cho chữ: #E8385A trên nền kem chỉ đạt 3.68:1, dưới chuẩn AA 4.5:1 cho chữ nhỏ. Bản này đạt 4.57:1. */ --red-chu:#CC3250; --pink:#F58FC0; --orange:#F5842B; --yellow:#FFC93C; --green:#17A45C; --blue:#2743D0; --sky:#57C4E5; --brick:#C0392B; --edge:5px solid var(--ink); /* Vietnamese-safe stacks. js/fonts.js probes the first family for the Vietnamese block and adds .no-vi-display to if it is missing, so a word never ends up set in two faces at once. */ /* HAI họ chữ, BA vai trò — đừng thêm họ thứ ba. display : tiêu đề, nút, con số lớn, tên riêng (Baloo 2) body : chữ đọc, nhãn UI, ô nhập (Nunito) ghi chú : Nunito NGHIÊNG — dùng font-style:italic */ --font-display:'Baloo 2','Be Vietnam Pro',Nunito,sans-serif; --font-body:Nunito,'Be Vietnam Pro',system-ui,sans-serif; --shadow:6px 6px 0 var(--ink); } html.no-vi-display{--font-display:'Be Vietnam Pro',Nunito,sans-serif} *{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); overflow-x:hidden; } .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- shared panel chrome ---------------------------------- */ .panel{ position:relative; /* Cột nội dung tối đa 1200px, tự căn giữa trên màn rộng. Mẹo ở đây: padding ngang lớn dần thay vì bọc thêm một thẻ div — max() lấy giá trị lớn hơn giữa lề thường và phần thừa chia đôi, nên màn hẹp giữ nguyên lề cũ, màn rộng thì tự đẩy nội dung vào giữa. Đường kẻ ngang vẫn nằm trên .panel nên chạy hết bề ngang màn hình. */ padding:34px max(clamp(16px,5vw,72px), calc((100% - 1200px) / 2)) 60px; border-bottom:var(--edge); overflow:hidden; } .panel--cover{padding-top:0} /* chunky sticker headings, letters injected by ui.js --------------- */ .chunky{ font-family:var(--font-display); font-weight:700; font-size:clamp(44px,9vw,120px); line-height:1.06; margin:0 0 18px; display:flex;flex-wrap:wrap; letter-spacing:-.02em; } .chunky span{ display:inline-block; color:var(--c); -webkit-text-stroke:.045em var(--ink); paint-order:stroke fill; text-shadow:.04em .05em 0 var(--ink); transform:rotate(var(--r)) translateY(var(--y)); transition:transform .18s cubic-bezier(.34,1.56,.64,1); } .chunky span:hover{transform:rotate(0deg) translateY(-10px) scale(1.12)} /* hand-drawn oval label ------------------------------------------- */ .tag-hand{ display:inline-block; font-family:var(--font-body);font-style:italic;font-weight:700; font-size:clamp(17px,2.3vw,26px); padding:6px 26px; border:4px solid var(--ink); border-radius:60% 40% 55% 45%/60% 55% 45% 40%; background:var(--cream-2); transform:rotate(-3deg); margin-bottom:10px; } /* ================================================================= PANEL 1 — cover ================================================================= */ .kicker{ text-align:center;font-family:var(--font-body);font-weight:900; font-size:clamp(10px,1.6vw,15px);letter-spacing:.42em; margin:14px 0 clamp(46px,6vw,78px); /* chừa chỗ cho mũ + bong bóng của nhân vật */ } .wall{position:relative;height:clamp(90px,13vw,150px)} .wall__brick{ position:absolute;inset:0; border-top:var(--edge);border-bottom:var(--edge); background-color:var(--brick); background-image: linear-gradient(335deg,#ffffff22 23px,transparent 23px), linear-gradient(155deg,#ffffff22 23px,transparent 23px), linear-gradient(335deg,#ffffff22 23px,transparent 23px), linear-gradient(155deg,#ffffff22 23px,transparent 23px), repeating-linear-gradient(90deg,#00000033 0 3px,transparent 3px 78px), repeating-linear-gradient(0deg,#00000033 0 3px,transparent 3px 30px); background-size:58px 58px,58px 58px,58px 58px,58px 58px,78px 30px,78px 30px; background-position:0 2px,4px 35px,29px 31px,33px 6px,0 0,0 0; } .peeker{ position:absolute;left:50%;bottom:-2px;transform:translateX(-50%); width:clamp(210px,26vw,330px); filter:drop-shadow(4px 6px 0 rgba(0,0,0,.18)); } .peeker__svg{display:block;width:100%;height:auto;overflow:visible} .peeker__svg .hat{transform-origin:230px 108px;animation:hat-tilt 3.4s ease-in-out infinite} .peeker__svg .bubble{animation:bob 3.9s ease-in-out infinite} .peeker__svg .eye{transform-origin:center;animation:blink 5.2s infinite} .peeker__svg .eye:nth-child(2){animation-delay:.06s} @keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}} @keyframes hat-tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* the WebGL stage ------------------------------------------------- */ .stage{ position:relative;overflow:hidden; /* cắt gọn phần ảnh nền bị phóng to */ min-height:clamp(300px,42vw,520px); display:flex;align-items:center;justify-content:center; } /* --- nền ảnh cho dòng tiêu đề ------------------------------------ Ảnh được làm mờ nhẹ và phủ một lớp kem, để nét viền mực của chữ sticker vẫn bật lên. Vignette kéo về màu kem ở rìa nên ảnh tan vào nền giấy chứ không phải một hình chữ nhật dán đè. */ .stage__bg,.stage__veil{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0} .stage__bg{ background-size:cover;background-position:center 30%; /* KHÔNG dùng filter ở đây: độ mờ đã nướng sẵn vào file ảnh. CSS filter blur trên một vùng lớn bắt trình duyệt vẽ lại mỗi khung hình — đo thật trên điện thoại tầm trung là mất 12 FPS (21 -> 33 khi tắt đi). */ transform:scale(1.04); /* nới nhẹ cho khỏi hở mép */ transition:opacity .7s ease-out; } /* Hai lớp chồng nhau: một dải dọc kéo về màu kem ở trên dưới, một vignette toả tròn. Cộng lại thì ảnh tan hẳn vào nền giấy ở mọi phía, và đậm nhất đúng chỗ chữ nằm nên nét viền mực vẫn bật lên. */ .stage__veil{ background: /* Dải NGANG: trước đây không có, vì mép trái/phải của ảnh nằm ngoài rìa màn hình nên không ai thấy. Từ lúc cột nội dung khoá ở 1200px và căn giữa, hai mép đó lọt vào giữa màn và lộ ra cạnh cắt vuông. */ linear-gradient(90deg, var(--cream) 0%, rgba(253,242,222,0) 14%, rgba(253,242,222,0) 86%, var(--cream) 100%), linear-gradient(180deg, var(--cream) 0%, rgba(253,242,222,.30) 22%, rgba(253,242,222,.30) 76%, var(--cream) 100%), radial-gradient(135% 100% at 50% 46%, rgba(253,242,222,.10) 0%, rgba(253,242,222,.52) 60%, var(--cream) 100%); transition:opacity .7s ease-out; } .stage.has-bg .stage__bg,.stage.has-bg .stage__veil{opacity:1} #gl-layer{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:2; } .stage.gl-live #gl-layer{pointer-events:auto} /* invisible box the GL letters are laid out inside */ .headline-slot{ width:min(88%,900px); aspect-ratio:16/8; pointer-events:none; } .headline-fallback{ position:absolute;z-index:3; font-family:var(--font-display);font-weight:700; font-size:clamp(38px,8.5vw,116px);line-height:1.05;text-align:center; color:var(--red); -webkit-text-stroke:.045em var(--ink);paint-order:stroke fill; text-shadow:.04em .05em 0 var(--ink); animation:bob 2.6s ease-in-out infinite; margin:0; } .stage.gl-live .headline-fallback{display:none} /* scattered decoration -------------------------------------------- */ .deco{position:absolute;z-index:1;pointer-events:none} .deco--wave-a{width:150px;top:12%;left:4%} .deco--wave-b{width:130px;bottom:14%;right:6%;transform:rotate(8deg)} .deco--wave-c{width:160px;bottom:18px;left:5%} .deco--blob-a{width:clamp(40px,6vw,74px);top:18%;right:9%;animation:spin 14s linear infinite} .deco--blob-b{width:clamp(38px,5vw,64px);bottom:16%;left:11%;animation:bob 4.4s ease-in-out infinite} @keyframes spin{to{transform:rotate(360deg)}} /* draw-on effect: stroke-dasharray/offset, released by IntersectionObserver */ .draw-on path{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)} .draw-on.is-drawn path{transition:stroke-dashoffset 1.1s ease-out;stroke-dashoffset:0} /* ================================================================= PANEL 2 — the plan ================================================================= */ .cannon{ margin-top:28px; font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.7vw,19px); background:var(--blue);color:#fff;border:4px solid var(--ink);border-radius:40px; padding:13px 30px;cursor:pointer;box-shadow:var(--shadow); transition:transform .12s,box-shadow .12s; } .cannon:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)} /* ================================================================= PANEL 3 — about ================================================================= */ .about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start} /* căn mép trái để tấm ảnh thẳng hàng với tiêu đề phía trên, không lửng lơ giữa cột; ở màn hẹp thì cho về giữa (xem media query cuối file) */ .about__left{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .bubbles{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .polaroid{ container-type:inline-size; /* để tên co theo bề ngang tấm ảnh */ position:relative;width:min(100%,300px); background:var(--cream-2);border:4px solid var(--ink); box-shadow:var(--shadow);padding:14px 14px 8px; transform:rotate(-4deg);cursor:grab;touch-action:none; user-select:none; } .polaroid.is-dragging{cursor:grabbing;box-shadow:14px 16px 0 rgba(0,0,0,.25);transition:none} .polaroid:focus-visible{outline:4px dashed var(--ink);outline-offset:6px} .polaroid__pin{ position:absolute;top:-14px;left:22px;width:26px;height:26px; border:5px solid var(--sky);border-radius:50%; border-bottom-color:transparent;transform:rotate(35deg); } .polaroid__photo{border:3px solid var(--ink);aspect-ratio:1;overflow:hidden;background:var(--red)} .polaroid__photo img,.polaroid__art{width:100%;height:100%;object-fit:cover;display:block} .polaroid__name{ font-family:var(--font-display);font-weight:700;text-align:center; /* tên đầy đủ tiếng Việt dài hơn biệt danh nhiều — cho co lại và xuống dòng */ font-size:clamp(20px,7cqw,28px);line-height:1.12;text-wrap:balance; margin:10px 0 0;color:var(--red);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill; } .polaroid__role{font-family:var(--font-body);font-weight:900;font-size:11px;letter-spacing:.3em;text-align:center;margin:2px 0 6px} .bubble-tag{ font-family:var(--font-body);font-style:italic;font-weight:700;font-size:17px; background:var(--cream-2);border:3px solid var(--ink); border-radius:55% 45% 60% 40%/50% 60% 40% 50%; padding:5px 18px; } .bubble-tag--a{transform:rotate(-4deg);background:var(--orange)} .bubble-tag--b{transform:rotate(3deg);background:var(--sky)} .about__body{font-size:clamp(14px,1.6vw,17px);line-height:1.65;max-width:60ch} /* Các luật tô highlight PHẢI có cùng độ ưu tiên với luật mark ở trên, nếu không `background:none` sẽ đè mất màu tô và chỉ còn chữ in đậm. */ .about__body mark{background:none;padding:0 2px;font-weight:700;color:var(--ink)} .about__body mark.hl-pink{background:linear-gradient(transparent 58%,#F58FC0cc 58%)} .about__body mark.hl-blue{background:linear-gradient(transparent 58%,#57C4E5cc 58%)} .about__body mark.hl-green{background:linear-gradient(transparent 58%,#17A45C77 58%)} .about__body mark.hl-orange{background:linear-gradient(transparent 58%,#F5842Bcc 58%)} .facts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px} .facts li{ border:3px solid var(--ink);border-radius:30px;padding:7px 18px;background:var(--cream-2); display:flex;gap:10px;align-items:baseline;font-size:14px; } .facts b{font-size:10px;letter-spacing:.18em;opacity:.62} .facts a{color:var(--blue);font-weight:700} /* ---------- dải dây treo ảnh -------------------------------------- */ /* Sợi dây võng nằm TRONG khung cuộn (.day-treo__hang) chứ không phải trong khung nhìn, nên nó dài đúng bằng dải ảnh: kéo ngang thì dây và ảnh trôi cùng nhau. Nếu để dây ngoài, dây sẽ đứng yên còn ảnh chạy, và kẹp sẽ rời khỏi dây ngay khi cuộn. */ .day-treo{margin:44px 0 4px} .day-treo__khe{ overflow-x:auto;overflow-y:hidden; /* Đệm trên/dưới để cú đu và bóng đổ không bị overflow-y:hidden xén mất; lề âm hai bên trả lại đúng bề ngang cũ. */ padding:8px 6px 14px;margin:0 -6px; scrollbar-width:thin;-webkit-overflow-scrolling:touch; } .day-treo__khe:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:8px} .day-treo__hang{ position:relative;display:inline-flex;align-items:flex-start; gap:clamp(14px,2.4vw,30px);padding:0 10px;min-width:100%; justify-content:center; } .day-treo__day{ position:absolute;left:0;top:0;width:100%;height:44px; pointer-events:none;z-index:0; } .treo{ position:relative;z-index:1;margin:0;flex:0 0 auto; width:clamp(124px,15vw,172px); transform:translateY(calc(var(--vong,0px) - var(--nhac,0px))) rotate(var(--xoay,0deg)); transition:transform .22s ease; } /* Ảnh treo bằng kẹp thì đung đưa quanh CÁI KẸP, không quanh chính giữa tấm ảnh — nên phần đu nằm ở lớp trong, tách khỏi transform của .treo (nếu chung một transform thì hover và đu sẽ giẫm lên nhau). */ .treo__than{ transform-origin:50% 6px; animation:dua 5.4s ease-in-out infinite; animation-delay:var(--tre,0s); } @keyframes dua{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}} .treo:hover,.treo:focus-within{--nhac:9px;--xoay:0deg} .treo__kep{ position:absolute;left:50%;top:-5px;z-index:2; width:15px;height:26px;margin-left:-7.5px; background:var(--kep-mau,#FFC93C); border:3px solid var(--ink);border-radius:4px; } /* hai vạch ngang cho ra dáng cái kẹp gỗ chứ không phải viên thuốc */ .treo__kep::after{ content:"";position:absolute;left:1px;right:1px;top:8px;height:5px; border-top:2px solid var(--ink);border-bottom:2px solid var(--ink); } .treo__khung{ background:var(--cream-2);border:4px solid var(--ink);border-radius:3px; padding:7px 7px 9px;box-shadow:5px 5px 0 rgba(27,27,27,.22); } .treo__khung img{ display:block;width:100%;height:auto;border-radius:1px; background:#E4D9C4; /* chỗ giữ màu trong lúc ảnh chưa tải, đỡ giật khung */ } .treo__chu{ margin:8px 2px 0;text-align:center;font-style:italic; font-size:12.5px;line-height:1.35;opacity:.75; } @media (max-width:860px){ .day-treo{margin-top:40px} .day-treo__hang{justify-content:flex-start} } /* ---------- footer ------------------------------------------------ */ /* Chân trang giờ chỉ còn một dòng, nên nó là chữ ký khép lại cả trang — để to hơn và cho nhịp đập vào chữ "luv" thay vì một ký hiệu trái tim. */ .foot{text-align:center;padding:44px 20px 56px} .foot p{margin:0} .foot__ky{ font-family:var(--font-display);font-weight:700; font-size:clamp(16px,1.8vw,22px);letter-spacing:.02em; } /* Phần đập nhịp giờ là TÊN chứ không phải chữ "luv" — đổi tên lớp theo, để lần sau đọc CSS không phải đoán nó đang tô cái gì. */ .foot__ten{color:var(--red);display:inline-block;animation:beat 1.3s ease-in-out infinite} @keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}} /* ---------- confetti canvas -------------------------------------- */ #confetti-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50} /* ---------- responsive ------------------------------------------- */ @media (max-width:860px){ .about__grid{grid-template-columns:1fr} .about__left{align-items:center} } /* ---------- reduced motion --------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} } /* ================================================================= PHẦN MỞ RỘNG — act, góc ảnh, tường lời chúc ================================================================= */ /* ---------- nút dùng chung --------------------------------------- */ .btn{ font-family:var(--font-display);font-weight:700;font-size:15px; background:var(--cream-2);color:var(--ink); border:4px solid var(--ink);border-radius:40px; padding:9px 22px;cursor:pointer;box-shadow:4px 4px 0 var(--ink); transition:transform .12s,box-shadow .12s; } .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)} .btn--go{background:var(--blue);color:#fff} .btn:disabled{opacity:.55;cursor:progress} /* ---------- bảng đồng hồ đếm ngược -------------------------------- */ /* Kiểu đồng hồ lật cơ khí: mỗi CHỮ SỐ là một thẻ tối riêng có đường gấp ngang giữa, nhãn nằm ngoài trên nền kem. Ô "ngày" tự thêm bớt thẻ. */ .board{align-self:center;width:100%} .board__row{ display:flex;align-items:flex-start;flex-wrap:wrap; gap:clamp(6px,1vw,14px); } .cell{text-align:center} .cell__digits{display:flex;gap:clamp(3px,.5vw,6px);justify-content:center} .digit{ position:relative;display:block; font-family:var(--font-display);font-weight:700; font-size:clamp(32px,5.4vw,66px);line-height:1; color:var(--cream);font-variant-numeric:tabular-nums; min-width:.74em;padding:.17em .09em .19em; border:4px solid var(--ink);border-radius:12px; background:linear-gradient(180deg,#3a3a3a 0 calc(50% - 1px),#1d1d1d calc(50% + 1px) 100%); box-shadow:4px 5px 0 var(--ink); } /* đường gấp giữa thẻ — thứ làm nó ra dáng đồng hồ lật */ .digit::after{ content:"";position:absolute;left:3px;right:3px;top:50%;height:2px; background:rgba(0,0,0,.65);transform:translateY(-1px); } .digit.is-lat{animation:lat .4s cubic-bezier(.34,1.5,.64,1)} @keyframes lat{ 0%{transform:translateY(-46%) rotateX(58deg) scaleY(.72);opacity:.25} 55%{transform:translateY(3%) rotateX(0) scaleY(1.04);opacity:1} 100%{transform:none} } /* dấu hai chấm giữa các ô */ .sep{ display:flex;flex-direction:column;justify-content:center;gap:.42em; align-self:flex-start;padding-top:clamp(20px,3.2vw,42px); } .sep i{width:clamp(6px,.9vw,10px);aspect-ratio:1;border-radius:50%;background:var(--ink);opacity:.75} .sep--nhay i{animation:nhap 1s steps(2,end) infinite} @keyframes nhap{0%,49%{opacity:.78}50%,100%{opacity:.18}} .cell__label{ margin:11px 0 0;font-family:var(--font-body);font-weight:900; font-size:clamp(9px,1.05vw,12px);letter-spacing:.22em; color:var(--lc,var(--ink));opacity:.85; } .board__foot{ margin:20px 0 0;font-family:var(--font-body);font-style:italic; font-size:clamp(15px,1.7vw,19px);opacity:.72; } /* tới đúng ngày rồi thì cả bảng đổi sang màu lễ hội */ .board.is-toi .digit{ background:linear-gradient(180deg,#22c46f 0 calc(50% - 1px),#149150 calc(50% + 1px) 100%); color:#fff; } .board.is-toi .board__foot{opacity:1;font-weight:700;color:var(--green)} /* ================================================================= GÓC ẢNH ================================================================= */ .collage{ position:relative;width:100%;min-height:340px; aspect-ratio:16/9; /* chỉ dùng khi chưa có ảnh; js đặt height khi đã có */ border:4px dashed rgba(27,27,27,.25);border-radius:14px; background: repeating-linear-gradient(45deg,transparent 0 14px,rgba(27,27,27,.025) 14px 28px); margin-top:10px;overflow:visible; } .collage.has-photos{border-style:solid;border-color:rgba(27,27,27,.14)} .collage.is-dropping{border-color:var(--green);background:rgba(23,164,92,.08)} .collage__empty{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px; } .collage__empty p{margin:0;font-size:14px;line-height:1.6;opacity:.7} .collage__empty-big{font-family:var(--font-body);font-style:italic;font-size:23px;opacity:.5!important} .collage__empty code{background:var(--cream-2);border:2px solid var(--ink);border-radius:5px;padding:1px 6px;font-size:12px} .collage__tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px} .collage__status{font-family:var(--font-body);font-style:italic;font-size:15px;opacity:.7} .cut{ /* y đi qua margin-top: phần trăm của margin quy về CHIỀU RỘNG khung, nên vị trí không còn phụ thuộc chiều cao — xem js/collage.js */ position:absolute;left:var(--x);top:0;width:var(--w); /* margin phải đặt TRƯỚC margin-top, nếu không rút gọn margin:0 sẽ xoá mất */ margin:0;margin-top:var(--y); cursor:grab;touch-action:none; transform:rotate(var(--tilt)); /* left/margin-top cũng có transition: khi kéo một tấm qua tấm khác thì cả hàng dạt ra, không có transition thì chúng nhảy giật cục. */ transition:transform .18s cubic-bezier(.34,1.5,.64,1), left .2s cubic-bezier(.34,1.4,.64,1), margin-top .2s cubic-bezier(.34,1.4,.64,1), width .2s ease; } .cut:hover{transform:rotate(0deg) scale(1.04)} .cut.is-held{cursor:grabbing;transition:none;transform:rotate(0deg) scale(1.06)} .cut:focus-visible{outline:4px dashed var(--blue);outline-offset:6px} /* Đang kéo thì tấm khác không được phóng to khi con trỏ lướt qua — nó làm ô đích to ra và việc dò "đang thả vào tấm nào" chệch theo. */ .collage.dang-keo .cut:not(.is-held){transform:rotate(var(--tilt))} .cut__stack{position:relative;filter:drop-shadow(5px 7px 0 rgba(27,27,27,.22))} .cut__paper{position:absolute;left:-9px;right:-9px;top:-9px;bottom:-9px;background:var(--cream-2)} .cut__photo{position:relative} .cut__photo img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none} /* ảnh đã tách nền: bỏ khung xé, viền trắng bám theo dáng như sticker */ .cut--auto .cut__stack{ filter: drop-shadow(2px 0 0 var(--cream-2)) drop-shadow(-2px 0 0 var(--cream-2)) drop-shadow(0 2px 0 var(--cream-2)) drop-shadow(0 -2px 0 var(--cream-2)) drop-shadow(5px 7px 0 rgba(27,27,27,.22)); } .cut__cap{ font-family:var(--font-body);font-style:italic;font-size:15px;text-align:center;margin-top:5px; transform:rotate(-1.5deg); cursor:text;border-radius:6px;padding:1px 6px;min-height:1.35em; transition:background .15s; } .cut__cap:hover,.cut__cap:focus-visible{background:rgba(27,27,27,.07);outline:none} /* tấm chưa có chú thích: chỉ hiện lời mời khi rê chuột tới, để trang không bị rối bởi một đống chữ mờ với người chỉ vào xem ảnh */ .cut__cap.is-trong::before{content:"+ chú thích";opacity:0;transition:opacity .15s} .cut:hover .cut__cap.is-trong::before, .cut__cap.is-trong:focus-visible::before{opacity:.45} .cut__cap-o{ font-family:var(--font-body);font-style:italic;font-size:15px;text-align:center; width:100%;max-width:100%;border:0;border-bottom:2px solid var(--ink); background:var(--cream-2);border-radius:4px;padding:2px 4px;color:var(--ink); } .cut__cap-o:focus{outline:none} .lightbox{ position:fixed;inset:0;z-index:60;display:none; align-items:center;justify-content:center;padding:5vmin; background:rgba(27,27,27,.86);cursor:zoom-out; } .lightbox.is-open{display:flex} .lightbox figure{margin:0;max-width:min(1000px,92vw);text-align:center} .lightbox img{max-width:100%;max-height:78vh;border:6px solid var(--cream-2);display:block} .lightbox figcaption{color:var(--cream);font-family:var(--font-body);font-style:italic;font-size:18px;margin-top:10px} .lightbox__x{ position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%; border:3px solid var(--cream);background:transparent;color:var(--cream);font-size:18px;cursor:pointer; } /* ================================================================= TƯỜNG LỜI CHÚC ================================================================= */ .wish-form{max-width:660px;margin:6px 0 30px} .wish-form__row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end} .wish-form__field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;margin-bottom:14px} .wish-form__field span{font-size:11px;font-weight:900;letter-spacing:.18em;opacity:.62} .wish-form input,.wish-form textarea{ font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--ink); background:var(--cream-2);border:4px solid var(--ink);border-radius:10px; padding:11px 14px;resize:vertical;width:100%; } .wish-form input:focus,.wish-form textarea:focus{outline:3px dashed var(--blue);outline-offset:3px} .wish-form__colors{border:0;padding:0;margin:0 0 14px} .wish-form__colors legend{font-size:11px;font-weight:900;letter-spacing:.18em;opacity:.62;padding:0 0 6px} .wish-form__colors>div{display:flex;gap:8px} .swatch{width:34px;height:34px;border:3px solid var(--ink);border-radius:8px;cursor:pointer; display:block;position:relative;transform:rotate(-3deg)} .swatch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .swatch--yellow{background:var(--yellow)} .swatch--pink{background:var(--pink)} .swatch--sky{background:var(--sky)} .swatch--green{background:var(--green)} .swatch--orange{background:var(--orange)} .swatch:has(input:checked){transform:rotate(0) scale(1.18);box-shadow:3px 3px 0 var(--ink)} .wish-form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .wish-form__count{font-weight:700;font-size:13px;letter-spacing:.06em;opacity:.62} .wish-form__err{color:var(--red-chu);font-weight:700;margin:10px 0 0} /* bẫy bot: ra khỏi màn hình chứ không display:none, bot vẫn thấy và vẫn điền */ .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .wall__more{margin-top:16px} .wall-surface{position:relative;border:5px solid var(--ink);border-radius:6px;overflow:hidden;min-height:260px} .wall-surface__bricks{ position:absolute;inset:0; background-color:var(--brick); background-image: linear-gradient(335deg,#ffffff1c 23px,transparent 23px), linear-gradient(155deg,#ffffff1c 23px,transparent 23px), repeating-linear-gradient(90deg,#00000038 0 3px,transparent 3px 78px), repeating-linear-gradient(0deg,#00000038 0 3px,transparent 3px 30px); background-size:58px 58px,58px 58px,78px 30px,78px 30px; background-position:0 2px,4px 35px,0 0,0 0; filter:saturate(.85) brightness(.92); } .wall-surface__notes{ position:relative;display:flex;flex-wrap:wrap;gap:18px;padding:26px 22px;align-items:flex-start; } .wall-surface__empty{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:#ffffffcc;font-family:var(--font-body);font-style:italic;font-size:20px;margin:0;text-align:center;padding:20px; } .note{ position:relative;width:min(240px,100%);padding:24px 18px 14px; background:var(--yellow);border:3px solid var(--ink); box-shadow:5px 6px 0 rgba(0,0,0,.3); transform:rotate(var(--nr,-2deg)); } .note--pink{background:var(--pink)} .note--sky{background:var(--sky)} .note--green{background:var(--green);color:#fff} .note--orange{background:var(--orange)} .note__tape{ position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg); width:76px;height:24px;background:rgba(255,255,255,.55); border:2px solid rgba(27,27,27,.35); } .note__text{margin:0;font-weight:700;font-size:15px;line-height:1.5;word-break:break-word;white-space:pre-wrap} .note__foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 0;font-size:11px} .note__foot b{font-family:var(--font-body);font-style:italic;font-size:15px;font-weight:800} .note__foot span{opacity:.55} .note__x{ position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%; border:2px solid var(--ink);background:var(--cream-2);cursor:pointer;font-size:12px;line-height:1; } .note.is-new{animation:slap .45s cubic-bezier(.34,1.6,.64,1)} @keyframes slap{ 0%{transform:rotate(var(--nr,-2deg)) scale(1.6) translateY(-40px);opacity:0} 60%{transform:rotate(var(--nr,-2deg)) scale(.96);opacity:1} 100%{transform:rotate(var(--nr,-2deg)) scale(1)} } .wall__meta{font-family:var(--font-body);font-style:italic;font-size:15px;opacity:.6;margin:14px 0 0} /* ---------- responsive cho phần mới ------------------------------ */ @media (max-width:760px){ .cell{min-width:64px} .collage{aspect-ratio:auto;min-height:0;display:flex;flex-wrap:wrap;gap:16px;padding:16px;justify-content:center} .collage:not(.has-photos){min-height:300px} .collage.has-photos .collage__empty{display:none} .collage{height:auto!important} .cut{position:static;margin-top:0;width:min(46%,220px)} .note{width:100%} } /* ================================================================= MÁY HÁT DÙNG CHUNG ================================================================= */ .nhac__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start} /* khung trình phát: giữ tỉ lệ 16:9, nút bật đè lên cho tới khi bấm */ .nhac__khung{ position:relative;aspect-ratio:16/9;width:100%;max-width:560px; border:4px solid var(--ink);border-radius:14px;overflow:hidden; background:var(--ink);box-shadow:var(--shadow); } .nhac__khung iframe,#nhac-player{width:100%;height:100%;display:block;border:0} .nhac__bat{ position:absolute;inset:0;margin:auto;width:max-content;height:max-content; z-index:2; } .nhac.dang-bat .nhac__khung{background:#000} .nhac__dangphat{ margin-top:16px;padding:12px 16px; border:3px solid var(--ink);border-radius:12px;background:var(--cream-2); border-left:10px solid var(--green); } .nhac__nhan{ margin:0;font-family:var(--font-body);font-weight:900; font-size:10px;letter-spacing:.22em;opacity:.62; } .nhac__ten{margin:4px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.9vw,20px);line-height:1.25} .nhac__ai{margin:2px 0 0;font-style:italic;font-size:13px;opacity:.6} .nhac__form{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end} .nhac__field{display:flex;flex-direction:column;gap:6px;flex:1 1 240px} .nhac__field--ten{flex:0 1 150px} .nhac__field span{font-size:10px;font-weight:900;letter-spacing:.18em;opacity:.62} .nhac__form input{ font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--ink); background:var(--cream-2);border:4px solid var(--ink);border-radius:10px; padding:10px 12px;width:100%; } .nhac__form input:focus{outline:3px dashed var(--blue);outline-offset:3px} .nhac__loi{flex:1 1 100%;margin:0;color:var(--red-chu);font-weight:700;font-size:14px} .nhac__ds{list-style:none;margin:10px 0 0;padding:0;counter-reset:none} .bai{ display:flex;align-items:center;gap:12px; border:3px solid var(--ink);border-radius:12px;background:var(--cream-2); padding:9px 14px;margin-bottom:9px; } .bai__so{ flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--cream); font-family:var(--font-display);font-weight:700;font-size:12px; display:grid;place-items:center; } .bai__giua{display:flex;flex-direction:column;flex:1;min-width:0} .bai__giua b{font-size:14px;line-height:1.3;overflow-wrap:anywhere} .bai__giua span{font-size:11px;font-style:italic;opacity:.55} .bai__go{ flex:none;width:26px;height:26px;border-radius:50%; border:2px solid var(--ink);background:var(--cream);cursor:pointer;font-size:11px;line-height:1; } .bai__go:hover{background:var(--red);color:#fff} .nhac__trong{font-style:italic;font-size:15px;opacity:.6;margin:10px 0 0;max-width:42ch} @media (max-width:760px){ .nhac__grid{grid-template-columns:1fr} .nhac__field,.nhac__field--ten{flex:1 1 100%} } /* ---------- tìm bài trên YouTube ----------------------------------- */ .tim{margin-top:20px} .tim__hang{display:flex;gap:9px} .tim__hang input{ font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--ink); background:var(--cream-2);border:4px solid var(--ink);border-radius:10px; padding:10px 12px;flex:1;min-width:0; } .tim__hang input:focus{outline:3px dashed var(--blue);outline-offset:3px} .tim__hang .btn{flex:none} .tim__loi{margin:9px 0 0;color:var(--red-chu);font-weight:700;font-size:13.5px} .tim__ds{display:flex;flex-direction:column;gap:8px;margin-top:12px} .kq{ display:flex;align-items:center;gap:11px;width:100%;text-align:left; background:var(--cream-2);border:3px solid var(--ink);border-radius:12px; padding:7px 12px 7px 7px;cursor:pointer; transition:transform .12s,background .12s; } .kq:hover{background:var(--yellow);transform:translateX(3px)} .kq:disabled{opacity:.55;cursor:progress;transform:none} .kq img{width:56px;height:42px;object-fit:cover;border:2px solid var(--ink);border-radius:6px;flex:none} .kq__chu{display:flex;flex-direction:column;min-width:0} .kq__chu b{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere} .kq__chu span{font-size:11.5px;font-style:italic;opacity:.6} /* ---------- số ngày đã sống ---------------------------------------- */ .songay{ margin:22px 0 0;font-family:var(--font-body);font-style:italic; font-size:clamp(14px,1.6vw,17px);opacity:.62; } /* ================================================================= TRÌNH CHIẾU LỜI CHÚC — mở toàn màn hình, dùng lúc tiệc ================================================================= */ .wall__duoi{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .wall__duoi .wall__meta{margin:14px 0 0} .chieu{ position:fixed;inset:0;z-index:70; display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,40px); background:var(--brick); background-image: linear-gradient(335deg,#ffffff14 23px,transparent 23px), linear-gradient(155deg,#ffffff14 23px,transparent 23px), repeating-linear-gradient(90deg,#0000002e 0 3px,transparent 3px 78px), repeating-linear-gradient(0deg,#0000002e 0 3px,transparent 3px 30px); background-size:58px 58px,58px 58px,78px 30px,78px 30px; padding:clamp(16px,4vw,48px); } .chieu[hidden]{display:none} .chieu__giua{flex:1;max-width:820px;display:grid;place-items:center} /* tờ note phóng to, vẫn giữ dáng giấy dán tường như ở dưới */ .chieu__to{ width:100%;background:var(--yellow);border:5px solid var(--ink); box-shadow:10px 12px 0 rgba(0,0,0,.32); padding:clamp(26px,4vw,48px);transform:rotate(-1.2deg); animation:chieu-vao .4s cubic-bezier(.34,1.5,.64,1); } @keyframes chieu-vao{from{opacity:0;transform:rotate(-1.2deg) scale(.94)}to{opacity:1}} .chieu__chu{ margin:0;font-weight:700;line-height:1.5;white-space:pre-wrap;word-break:break-word; font-size:clamp(20px,3.4vw,40px); } .chieu__ten{ margin:clamp(18px,2.5vw,28px) 0 0;text-align:right; font-family:var(--font-body);font-style:italic;font-weight:800; font-size:clamp(15px,2vw,24px);opacity:.72; } .chieu__x,.chieu__mui{ border:4px solid var(--cream);background:transparent;color:var(--cream); cursor:pointer;border-radius:50%;flex:none; display:grid;place-items:center;line-height:1; } .chieu__x{position:absolute;top:18px;right:18px;width:48px;height:48px;font-size:19px} .chieu__mui{width:clamp(40px,5vw,58px);aspect-ratio:1;font-size:clamp(22px,3vw,30px);padding-bottom:4px} .chieu__x:hover,.chieu__mui:hover{background:rgba(255,255,255,.16)} .chieu__dem{ position:absolute;bottom:20px;left:0;right:0;text-align:center;margin:0; color:var(--cream);font-family:var(--font-body);font-weight:900; font-size:12px;letter-spacing:.2em;opacity:.65; } @media (max-width:700px){ .chieu__mui{position:absolute;bottom:56px;z-index:2} .chieu__mui--trai{left:16px} .chieu__mui--phai{right:16px} } /* ---------- chữ sơn trên tường gạch --------------------------------- */ .wall__chu{ position:absolute;top:50%;margin:0;z-index:1; font-family:var(--font-display);font-weight:800; font-size:clamp(26px,5.4vw,68px);line-height:1;letter-spacing:.02em; color:var(--cream-2); /* nét mực dày + bóng cứng: cùng ngôn ngữ với chữ sticker ở dưới, nhưng hơi trong để trông như sơn ăn vào gạch chứ không phải dán đè lên */ -webkit-text-stroke:.055em var(--ink);paint-order:stroke fill; text-shadow:.035em .045em 0 var(--ink); opacity:.93; } .wall__chu--trai{left:clamp(12px,11vw,190px);transform:translateY(-50%) rotate(-2.5deg)} .wall__chu--phai{right:clamp(12px,11vw,190px);transform:translateY(-50%) rotate(2deg)} /* Màn hẹp: nhân vật chiếm gần hết bề ngang tường, chỉ còn chừng 90px mỗi bên. Không ép một công thức clamp chung được — phải thu chữ lại và đẩy sát mép, nếu không chữ sẽ đè lên mặt nhân vật. */ @media (max-width:700px){ .wall__chu{font-size:clamp(15px,4.4vw,22px)} .wall__chu--trai{left:10px} .wall__chu--phai{right:10px} } /* ---------- khoảnh khắc tới ngày, và sau khi ngày đã qua ------------ */ .mung[hidden]{display:none} .mung__to{ margin:0;font-family:var(--font-display);font-weight:700; font-size:clamp(26px,4.6vw,56px);line-height:1.06; color:var(--green); -webkit-text-stroke:.045em var(--ink);paint-order:stroke fill; text-shadow:.035em .05em 0 var(--ink); animation:mung-vao .55s cubic-bezier(.34,1.5,.64,1); } .mung__nho{ margin:16px 0 0;font-family:var(--font-body);font-style:italic; font-size:clamp(15px,1.8vw,19px);opacity:.72;max-width:46ch; } @keyframes mung-vao{ from{opacity:0;transform:translateY(14px) scale(.94)} to{opacity:1;transform:none} } /* đã qua thì dịu lại, không còn màu lễ hội chói nữa */ .board.is-sau .mung__to{color:var(--blue)} /* ================================================================= Ô PHÁT trên tờ lời chúc — dùng ở cả ba trang, nên để trong file dùng chung này chứ không nằm ở css/trang-con.css. ================================================================= */ .note--tieng,.note--hinh{width:min(268px,100%);padding-top:26px} .note__hieu{ position:absolute;top:-11px;right:-9px; font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.14em; background:var(--ink);color:var(--cream); border-radius:20px;padding:3px 9px;transform:rotate(4deg); box-shadow:2px 2px 0 rgba(0,0,0,.28); } .may{position:relative;margin:0 0 12px;border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:#12121a} .may--tieng{height:74px} .may--hinh{aspect-ratio:1/1;max-height:230px} .may__nguon{display:block;width:100%;height:100%;object-fit:cover;background:#12121a} .may--tieng .may__nguon{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* Cột sóng trang trí cho bản ghi âm — không có gì để nhìn thì phải vẽ ra một thứ nhúc nhích, nếu không người ta không biết nó đang chạy. */ .may__song{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 58px 0 14px} .may__song i{flex:1;max-width:5px;height:var(--h);border-radius:3px;background:#ffffff40} .may.is-phat .may__song i{animation:song 1.05s ease-in-out infinite alternate;animation-delay:var(--d);background:var(--yellow)} @keyframes song{from{transform:scaleY(.28)}to{transform:scaleY(1)}} .may__nut{ position:absolute;right:10px;top:50%;transform:translateY(-50%); width:44px;height:44px;border-radius:50%;border:3px solid var(--ink); background:var(--cream-2);color:var(--ink);font-size:15px;line-height:1; cursor:pointer;box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;padding:0 0 0 2px; } .may--hinh .may__nut{right:50%;top:50%;transform:translate(50%,-50%);width:58px;height:58px;font-size:20px} .may--hinh.is-phat .may__nut{opacity:0} .may--hinh:hover .may__nut{opacity:1} .may__nut:disabled{opacity:.4;cursor:not-allowed} .may__duoi{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(transparent,#000000b8)} .may--tieng .may__duoi{background:none} .may__thanh{flex:1;height:6px;border-radius:4px;background:#ffffff33;cursor:pointer;overflow:hidden} .may__thanh i{display:block;height:100%;width:0;background:var(--yellow);border-radius:4px} .may__dem{font-family:var(--font-body);font-weight:800;font-size:11px;color:#fff;font-variant-numeric:tabular-nums;min-width:34px;text-align:right} .may--hong{background:#2a1a1a} .may--hong .may__song{display:none} .note.is-moi{animation:slap .45s cubic-bezier(.34,1.6,.64,1);outline:4px dashed var(--blue);outline-offset:7px} @media (prefers-reduced-motion:reduce){ .may.is-phat .may__song i{animation:none} .note.is-moi,.note.is-new{animation:none} } /* Trình chiếu: chỗ cho bản ghi âm / video. Tờ giấy phải co lại nhường chỗ chứ không đẩy nút bấm ra ngoài màn hình TV. */ .chieu__media{width:100%;max-width:min(680px,86vw);margin:0 0 16px} .chieu__nguon{width:100%;max-height:min(56vh,460px);display:block;border:4px solid var(--ink);border-radius:10px;background:#12121a} audio.chieu__nguon{max-height:none;height:54px;border-radius:30px} /* Trang chính không còn ô nhập — chỉ giới thiệu rồi dẫn sang gui.html. Việc điền và ghi âm dọn hẳn sang trang riêng, xem js/tuong-xem.js. */ .wall__moi{font-family:var(--font-body);font-size:clamp(15px,2vw,18px);line-height:1.6;max-width:60ch;margin:0 0 22px;opacity:.82} .wall__nut{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 28px;align-items:center} .wall__nut .btn{text-decoration:none;display:inline-block} /* ================================================================= BÁNH SINH NHẬT thổi được bằng mic — js/banh.js ================================================================= */ .plan__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center} .banh-wrap{display:flex;flex-direction:column;align-items:center;gap:10px} .banh{width:min(100%,340px);height:auto;overflow:visible; filter:drop-shadow(6px 8px 0 rgba(0,0,0,.14))} .nen{cursor:pointer} /* Bấm chuột vào là Chrome tự vẽ vòng focus mặc định quanh khung bao của cả nhóm — gồm cả cụm khói phía trên — thành một hộp sáng lù lù sau ngọn nến. Tắt vòng mặc định, nhưng GIỮ vòng cho người đi bằng bàn phím, vì họ thật sự cần nhìn thấy mình đang ở đâu. */ .nen:focus{outline:none} .nen:focus-visible{outline:4px dashed var(--blue);outline-offset:4px;border-radius:6px} /* transform-box:fill-box để "50% 95%" tính theo chính ngọn lửa. Thiếu nó thì gốc xoay rơi về gốc toạ độ của cả SVG và lửa văng ra ngoài bánh. */ .nen .lua{transform-box:fill-box;transform-origin:50% 95%;transition:opacity .18s} /* Mỗi ngọn lay một nhịp riêng, khai bằng --nhip/--tre ngay trên thẻ. Trước dùng :nth-child thì đếm cả ellipse, rect và mấy hạt kẹo phía trên nên trỏ nhầm hết. */ .nen .lua{animation:lua var(--nhip,1s) ease-in-out infinite alternate var(--tre,0s)} @keyframes lua{ from{transform:scale(1) rotate(-4deg)} to{transform:scale(1.13,1.2) rotate(5deg)} } .nen:hover .lua{transform:scale(1.1)} /* khói chỉ hiện đúng lúc vừa tắt, rồi bay lên và tan. fill-box ở đây cũng bắt buộc: thiếu nó thì scale() lấy gốc toạ độ của cả SVG, cụm khói vừa to ra vừa trôi ngang khỏi bấc nến. */ .khoi{opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:50% 100%} .nen.vua-tat .khoi{animation:khoi 1.4s ease-out forwards} @keyframes khoi{ 0%{opacity:.9;transform:translateY(0) scale(.5)} 100%{opacity:0;transform:translateY(-26px) scale(1.5)} } .nen.is-tat .lua{opacity:0} .nen.is-tat rect{opacity:.72} .banh.is-xong{animation:banh-mung .6s cubic-bezier(.34,1.6,.64,1)} @keyframes banh-mung{ 0%{transform:scale(1)} 45%{transform:scale(1.06) rotate(-1.5deg)} 100%{transform:scale(1)} } .banh__dieu{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%} .banh__nut{min-width:170px} .banh__gio{width:min(100%,220px);height:12px;border:3px solid var(--ink);border-radius:8px; background:var(--cream-2);overflow:hidden} .banh__gio i{display:block;height:100%;width:0;background:var(--sky); border-radius:6px;transition:width .08s linear} /* Đổi màu khi hơi thổi ĐẠT chuẩn. Không có tín hiệu này thì người thổi không biết mình đang thổi sai kiểu hay mic không nghe thấy. */ .banh__gio.is-gio i{background:var(--green)} .banh__nhac{font-family:var(--font-body);font-style:italic;font-size:15px; margin:0;opacity:.7;text-align:center;max-width:34ch;min-height:1.3em} .banh.it-dong .lua,.banh.it-dong .khoi{animation:none!important} @media (prefers-reduced-motion:reduce){ .nen .lua,.nen.vua-tat .khoi,.banh.is-xong{animation:none} } @media (max-width:760px){ .plan__grid{grid-template-columns:1fr} .banh-wrap{margin-top:6px} } /* Tấm ảnh gửi lên hỏng: để nguyên trên tường nhưng nhìn là biết, chú thích đổi thành câu lỗi. Xoá thẳng thì người dán không hiểu vì sao ảnh mình vừa kéo vào lại biến mất. */ .cut--hong{opacity:.45;filter:grayscale(1)} .cut--hong .cut__cap{color:var(--red-chu);font-weight:800} /* Máy hát khoá tới ngày mở — xem worker-mayhat/src/index.js */ .nhac__khoa{ position:absolute;inset:0;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; text-align:center;padding:18px;background:#12121aee;color:var(--cream); } .nhac__khoa-bieu{font-size:38px;margin:0;line-height:1} .nhac__khoa-to{font-family:var(--font-display);font-weight:700; font-size:clamp(15px,2.6vw,20px);margin:0;letter-spacing:.02em} .nhac__khoa-dem{font-family:var(--font-display);font-weight:800; font-size:clamp(20px,4vw,30px);margin:2px 0 0;color:var(--yellow); font-variant-numeric:tabular-nums} .nhac__khoa-nho{font-family:var(--font-body);font-style:italic;font-size:14px; margin:4px 0 0;opacity:.75;max-width:30ch}