/* ══════════════════════════════════════════════════════════════════════════════ TẤM BẢNG MỜI GỌI TREO Ở HERO - DÙNG CHUNG Bốn kiểu treo, MỘT chất liệu. Thầy chốt 13/08/2026: dùng cả bốn nhưng thống nhất chất liệu, để trang đổi mới mà thương hiệu vẫn một giọng. Chất liệu là GIẤY KEM cho cả bốn - không phải chọn cho đẹp mà vì tấm phải TỰ MANG NỀN của nó: sau lưng nó là ảnh phong cảnh hero, chỗ sáng chói chỗ tối sẫm, đo được dao động rất mạnh. Tấm tự mang nền thì chữ đọc được như nhau ở mọi cảnh, và không phải làm hai bản cho hai tông nền. ⚠ Sửa tệp này thì nhớ BUMP ?v= ở trang đang nạp nó. Bốn kiểu, khác nhau ở CÁCH TREO chứ không khác chất liệu: nhan - nhãn treo giá: đầu vát, lỗ xỏ khoen, dây lanh vắt qua đinh bien - biển hiệu: thanh đồng ngang, hai sợi xích, tấm chữ nhật the - thẻ tám cạnh: một sợi tơ mảnh, kẹp hình thoi dai - dải giấy dài: treo dọc, phất phơ như giấy mỏng gặp gió Kiểu nào hiện là do hero-sign.js chọn, ghim vào . ══════════════════════════════════════════════════════════════════════════════ */ .hsign{ /* ---- Bộ chất liệu dùng chung cho cả bốn kiểu ---- */ /* GHIM cứng, KHÔNG lấy var(--gold) của hệ. Lý do đo được: --gold lật từ champagne #D9C48E ở tông Tối sang nâu ô liu #8A6608 ở tông Sáng, nên nếu mượn nó thì mặt giấy đổi màu theo tông - trái hẳn với điều tấm này sinh ra để làm, là TỰ MANG NỀN và đọc y hệt nhau ở mọi cảnh. Ghim rồi thì tương phản cố định: mực chính 15,66. */ --sg-gold : #D9C48E; --sg-ink : #0B1526; /* mực sapphire */ --sg-paper: color-mix(in srgb,var(--sg-gold) 26%,#FFFCF4); /* giấy = champagne pha loãng */ --sg-ink2 : color-mix(in srgb,var(--sg-gold) 38%,var(--sg-ink)); /* mực phụ - 38% chứ không phải 46%: ở 46% đo được 4,93 tức sát ngưỡng đọc 4,5, chỉ cần một lần chỉnh màu là tụt xuống dưới. Ở 38% ra 6,14, có chỗ thở. */ --sg-edge : color-mix(in srgb,var(--sg-gold) 52%,#8A7A50); /* mép giấy */ --sg-metal: linear-gradient(180deg,#F0E4C2,#D9C48E 46%,#A8905A); /* đồng thau */ position:absolute; z-index:4; top:var(--sg-top,86px); right:var(--sg-right,54px); width:var(--sg-w,178px); display:block; text-decoration:none; -webkit-tap-highlight-color:transparent; } .hsign:focus-visible{outline:2px solid var(--sg-gold);outline-offset:6px;border-radius:8px} /* Phần treo (đinh · thanh · dây) đứng yên; chỉ phần dưới nó đung đưa. */ .hs-rig{display:block;position:relative} .hs-swing{display:block;transform-origin:50% 0;will-change:transform} /* ── TẤM GIẤY ───────────────────────────────────────────────────────────────── Viền chạy KÍN cả bốn phía (luật Thầy chốt 10/07 - không bao giờ viền một cạnh). Vân giấy tạo bằng hai lớp chuyển sắc rất nhạt, không dùng tệp ảnh nào. */ .hs-card{ position:relative; display:block; box-sizing:border-box; background: radial-gradient(120% 80% at 22% 8%, rgba(255,255,255,.55), transparent 58%), linear-gradient(168deg, color-mix(in srgb,var(--sg-paper) 92%,#fff) 0%, var(--sg-paper) 44%, color-mix(in srgb,var(--sg-paper) 88%,var(--sg-edge)) 100%); border:1px solid color-mix(in srgb,var(--sg-edge) 62%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 14px -12px color-mix(in srgb,var(--sg-edge) 70%,transparent), 0 16px 30px -16px rgba(4,10,20,.66); color:var(--sg-ink); } /* Sợi vân giấy - nằm dưới chữ, rất nhạt, chỉ để mặt giấy không phẳng lì */ .hs-card::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:repeating-linear-gradient(96deg, rgba(138,122,80,.055) 0 1px, transparent 1px 4px); mix-blend-mode:multiply; opacity:.7; } /* ── CHỮ TRÊN TẤM ─────────────────────────────────────────────────────────── */ .hs-tx{position:relative;z-index:2;display:block;text-align:center;padding:13px 12px 12px} .hs-k{ display:block;font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:9.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase; color:var(--sg-ink2); } .hs-k b{font-weight:700;font-size:7px;vertical-align:2px;margin-right:5px;letter-spacing:0} .hs-h{ display:block;margin-top:7px; font-family:var(--head,'Sora','Inter',sans-serif);font-weight:700; font-size:15px;line-height:1.24;letter-spacing:-.012em;color:var(--sg-ink); text-wrap:balance; } .hs-s{ display:block;margin-top:9px;padding-top:8px; border-top:1px solid color-mix(in srgb,var(--sg-edge) 34%,transparent); font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--sg-ink2); } /* Gạch ngăn trên là đường kẻ NGANG bên trong tấm, không phải viền một cạnh của khối - tấm vẫn có viền đủ bốn phía ở .hs-card. */ /* ── RÊ CHUỘT: TẤM "BẬT ĐÈN" - trước/sau hover là hai sắc thái rõ rệt ────────── Thường: giấy kem trầm. Rê vào: giấy nhúng champagne đậm như rọi đèn ấm, viền rực, quầng vàng lan quanh, dòng kicker chuyển ĐỎ SON như con dấu nóng - ai lướt qua cũng biết tấm này đang mời bấm. Nền gradient đổi theo biến (tức thì, hai sắc cùng họ nên như công tắc đèn); chữ - viền - quầng chuyển mượt .28s. */ .hsign{transition:transform .22s var(--ease,ease)} .hsign:hover{transform:translateY(-3px); --sg-paper:color-mix(in srgb,var(--sg-gold) 56%,#FFF7DC); --sg-edge:#B98A2E} .hs-card{transition:box-shadow .28s,border-color .28s} .hs-k,.hs-s,.hs-h{transition:color .28s} .hsign:hover .hs-card{ border-color:#C89B3C; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px rgba(234,208,140,.38), 0 26px 46px -14px rgba(4,10,20,.6), 0 10px 34px -6px rgba(217,196,142,.42)} .hsign:hover .hs-k{color:#A93226} .hsign:hover .hs-k b{color:#A93226} .hsign:hover .hs-s{color:var(--sg-ink)} @media (prefers-reduced-motion:reduce){ .hsign,.hs-card,.hs-k,.hs-s,.hs-h{transition:none} .hsign:hover{transform:none} } /* ══ KIỂU 1 · NHÃN TREO GIÁ ═══════════════════════════════════════════════════ Đinh nhỏ đóng ở mép trên, dây lanh vắt qua, tấm giấy đầu vát có lỗ xỏ. */ [data-sign="nhan"] .hs-nail{ position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%; background:var(--sg-metal);box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:3; } [data-sign="nhan"] .hs-cord{ position:absolute;left:50%;top:4px;width:1.6px;height:30px;margin-left:-.8px; background:linear-gradient(180deg,color-mix(in srgb,var(--sg-gold) 70%,#6B5B34),color-mix(in srgb,var(--sg-gold) 40%,#4A3F22)); transform-origin:50% 0; } [data-sign="nhan"] .hs-swing{padding-top:28px} [data-sign="nhan"] .hs-card{ border-radius:6px 6px 9px 9px; clip-path:polygon(32% 0,68% 0,100% 17px,100% 100%,0 100%,0 17px); } [data-sign="nhan"] .hs-hole{ position:absolute;left:50%;top:9px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%; background:var(--bg,#0A1426); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--sg-gold) 74%,#7A6835), inset 0 1px 2px rgba(0,0,0,.6); z-index:3; } [data-sign="nhan"] .hs-tx{padding-top:26px} /* ══ KIỂU 2 · BIỂN HIỆU ═══════════════════════════════════════════════════════ Thanh đồng ngang, hai khuy, hai sợi xích, tấm giấy chữ nhật treo dưới. */ [data-sign="bien"] .hs-bar{ position:absolute;left:12%;right:12%;top:0;height:3px;border-radius:2px; background:var(--sg-metal);box-shadow:0 2px 5px rgba(0,0,0,.45);z-index:3; } [data-sign="bien"] .hs-bar::before, [data-sign="bien"] .hs-bar::after{ content:"";position:absolute;top:-2px;width:7px;height:7px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#F6EDD2,#B49A62); } [data-sign="bien"] .hs-bar::before{left:-5px} [data-sign="bien"] .hs-bar::after{right:-5px} [data-sign="bien"] .hs-chain{ position:absolute;top:3px;width:2.2px;height:34px; background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--sg-gold) 80%,#fff) 0 3.4px, color-mix(in srgb,var(--sg-gold) 30%,#3A3118) 3.4px 5.4px); z-index:2; } [data-sign="bien"] .hs-chain.l{left:25%} [data-sign="bien"] .hs-chain.r{right:25%} [data-sign="bien"] .hs-swing{padding-top:37px} [data-sign="bien"] .hs-card{border-radius:5px} /* ══ KIỂU 3 · THẺ TÁM CẠNH ════════════════════════════════════════════════════ Một sợi tơ mảnh, kẹp hình thoi, tấm giấy cắt vát bốn góc kiểu mài đá. */ [data-sign="the"] .hs-clip{ position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px; background:var(--sg-metal);transform:rotate(45deg);border-radius:2px; box-shadow:0 2px 5px rgba(0,0,0,.5);z-index:3; } [data-sign="the"] .hs-cord{ position:absolute;left:50%;top:6px;width:1.2px;height:30px;margin-left:-.6px; background:linear-gradient(180deg,color-mix(in srgb,var(--sg-gold) 62%,#5E5130),transparent); } [data-sign="the"] .hs-swing{padding-top:30px} [data-sign="the"] .hs-card{ border-radius:3px; clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px), calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); } /* Tia sáng quét chậm qua mặt thẻ - lấy từ phương án 03, nằm trên đường cắt nên không đụng vào chữ. */ [data-sign="the"] .hs-card::before{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(114deg,transparent 38%,rgba(255,255,255,.42) 48%,transparent 58%); background-size:260% 100%;animation:hsSheen 7.4s ease-in-out infinite; } /* ══ KIỂU 4 · DẢI GIẤY DÀI ════════════════════════════════════════════════════ Treo dọc từ một thanh nhỏ, chân cắt đuôi én. Giấy mỏng nên phất phơ chứ không lắc kiểu con lắc - đây là chỗ thay cho lá cờ vải: giữ được cái "gió thổi qua" mà không phải đổi sang chất liệu khác. */ /* Dải hẹp hơn ba kiểu kia nên dòng chữ nhỏ ở đầu tấm bị bẻ làm hai. Nới tấm một chút và thu khoảng cách chữ lại - chữ đứng trọn một dòng mới ra dáng con dấu. */ [data-sign="dai"]{--sg-w:150px} [data-sign="dai"] .hs-k{letter-spacing:.13em;font-size:9px} [data-sign="dai"] .hs-tx{padding-left:8px;padding-right:8px} [data-sign="dai"] .hs-bar{ position:absolute;left:6%;right:6%;top:0;height:3px;border-radius:2px; background:var(--sg-metal);box-shadow:0 2px 5px rgba(0,0,0,.45);z-index:3; } [data-sign="dai"] .hs-swing{padding-top:9px} [data-sign="dai"] .hs-card{ border-radius:4px; clip-path:polygon(0 0,100% 0,100% calc(100% - 17px),50% 100%,0 calc(100% - 17px)); } [data-sign="dai"] .hs-tx{padding-bottom:26px} /* ══ CHUYỂN ĐỘNG ══════════════════════════════════════════════════════════════ Con lắc thật thì biên độ TẮT DẦN rồi mới có cơn gió mới, chứ không đung đưa đều đặn - cái đều đặn là thứ khiến hiệu ứng trông rẻ tiền. Mỗi kiểu một chu kỳ khác nhau và không chia hết cho nhau, nên mắt không bắt được điểm lặp. */ @keyframes hsSwingA{ 0%{transform:rotate(2.05deg)} 9%{transform:rotate(-1.54deg)} 18%{transform:rotate(1.15deg)} 27%{transform:rotate(-.86deg)} 36%{transform:rotate(.64deg)} 45%{transform:rotate(-.48deg)} 54%{transform:rotate(.36deg)} 63%{transform:rotate(-.27deg)} 72%{transform:rotate(.2deg)} 81%{transform:rotate(-.15deg)} 90%{transform:rotate(.06deg)} 96%{transform:rotate(2.05deg)} 100%{transform:rotate(2.05deg)} } /* Tấm giấy đưa NGƯỢC lại một phần so với khung treo: vật treo hai dây thì đưa ngang là chính, nghiêng là phụ. Chỉ xoay một lớp thì ra cái bảng bị vặn. */ @keyframes hsCounter{ 0%{transform:rotate(-.92deg)} 9%{transform:rotate(.69deg)} 18%{transform:rotate(-.52deg)} 27%{transform:rotate(.39deg)} 36%{transform:rotate(-.29deg)} 45%{transform:rotate(.22deg)} 54%{transform:rotate(-.16deg)} 63%{transform:rotate(.12deg)} 72%{transform:rotate(-.09deg)} 81%{transform:rotate(.07deg)} 90%{transform:rotate(-.03deg)} 96%{transform:rotate(-.92deg)} 100%{transform:rotate(-.92deg)} } /* Dải giấy: phất phơ nhẹ, không phải con lắc - giấy mỏng gặp gió thì uốn. */ @keyframes hsFlutter{ 0%{transform:rotate(.5deg) skewY(.35deg)} 26%{transform:rotate(-.62deg) skewY(-.42deg)} 52%{transform:rotate(.38deg) skewY(.3deg)} 74%{transform:rotate(-.3deg) skewY(-.2deg)} 100%{transform:rotate(.5deg) skewY(.35deg)} } @keyframes hsSheen{ 0%,64%{background-position:190% 0} 100%{background-position:-90% 0} } .hs-swing{animation:hsSwingA 13s cubic-bezier(.37,0,.63,1) infinite} [data-sign="bien"] .hs-swing{animation-duration:11.6s} [data-sign="bien"] .hs-card{animation:hsCounter 11.6s cubic-bezier(.37,0,.63,1) infinite;transform-origin:50% 0} [data-sign="the"] .hs-swing{animation-duration:14.3s} [data-sign="dai"] .hs-swing{animation:hsFlutter 5.9s ease-in-out infinite;transform-origin:50% 0} /* Rê chuột hoặc chạm vào: một cơn gió mạnh hơn thổi qua, rồi lặng dần. Đặt ở LỚP RIÊNG để nó CỘNG vào nhịp nền, không thay thế nhịp nền - nếu thay thì lúc rê vào tấm giật một cái, rất lộ. */ .hs-gust{display:block;transform-origin:50% 0} @keyframes hsGust{ 0%{transform:rotate(0)} 12%{transform:rotate(-2.6deg)} 32%{transform:rotate(1.7deg)} 52%{transform:rotate(-1deg)} 72%{transform:rotate(.55deg)} 88%{transform:rotate(-.22deg)} 100%{transform:rotate(0)} } .hsign.is-gust .hs-gust{animation:hsGust 2.4s cubic-bezier(.33,0,.5,1)} /* ══ DÒNG BÁO TUYỂN GẤP ═══════════════════════════════════════════════════════ Thầy chốt 13/08: cần một dòng đỏ để đăng vị trí đang cần gấp. Màu là ĐỎ GẠCH #B3261E chứ không phải đỏ tươi - đo trên chính mặt giấy kem này thì đỏ tươi #E53935 chỉ đạt 3,62 lần, dưới ngưỡng đọc 4,5. Đỏ gạch đạt 5,60 mà nhìn vẫn ra đỏ, không thành nâu. Dòng này ẨN MẶC ĐỊNH. Chỉ hiện khi thật sự có tin cần gấp - một tấm biển lúc nào cũng kêu "gấp" thì chẳng còn ai tin là gấp nữa. */ .hs-gap{ display:none; margin:0 0 9px;padding:5px 9px;border-radius:6px; background:color-mix(in srgb,#B3261E 11%,transparent); border:1px solid color-mix(in srgb,#B3261E 34%,transparent); font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#B3261E; align-items:center;justify-content:center;gap:6px; } .hsign.co-gap .hs-gap{display:flex} /* Chấm đèn báo. Nhấp nháy rất chậm và không tắt hẳn - đèn báo chứ không phải đèn cảnh sát. Người tắt hiệu ứng thì nó đứng yên, vẫn là cái chấm đỏ. */ .hs-dot{ flex:none;width:6px;height:6px;border-radius:50%;background:#B3261E; box-shadow:0 0 0 0 color-mix(in srgb,#B3261E 55%,transparent); animation:hsDot 2.6s ease-in-out infinite; } @keyframes hsDot{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,#B3261E 52%,transparent);opacity:1} 55%{box-shadow:0 0 0 4px color-mix(in srgb,#B3261E 0%,transparent);opacity:.62} } /* Tấm đang có tin gấp thì viền ngả sang đỏ - đủ để mắt bắt được ngay từ xa, nhưng vẫn là viền đủ bốn cạnh, không phải vạch một bên. */ .hsign.co-gap .hs-card{ border-color:color-mix(in srgb,#B3261E 38%,var(--sg-edge)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 14px -12px color-mix(in srgb,var(--sg-edge) 70%,transparent), 0 16px 30px -16px rgba(4,10,20,.66), 0 0 0 3px color-mix(in srgb,#B3261E 9%,transparent); } @media (prefers-reduced-motion: reduce){ .hs-dot{animation:none !important} } /* Dòng mời gọi ở màn hẹp cũng đổi giọng khi có tin gấp. */ .hs-line a .hs-dot{margin-right:2px} .hs-line.co-gap a{ border-color:color-mix(in srgb,#B3261E 52%,transparent); background:color-mix(in srgb,#B3261E 12%,transparent); color:color-mix(in srgb,#B3261E 34%,#FFE9E6); } /* ══ LUÂN PHIÊN BỐN KIỂU ══════════════════════════════════════════════════════ Thầy chốt 13/08: cho cả bốn kiểu cùng xuất hiện trên hero, thay nhau chứ không phải mỗi người một kiểu cố định. Cách chuyển: tấm cũ được KÉO NGƯỢC LÊN rồi mờ đi, tấm mới THẢ XUỐNG - đúng động tác đổi biển hiệu ngoài đời, chứ không phải mờ chồng lên nhau như hai tấm ảnh. Vì thế điểm xoay đặt ở mép trên, chỗ sợi dây bám. */ .hs-fade{display:block;transform-origin:50% -14px} .hsign.is-out .hs-fade{ animation:hsRut .52s cubic-bezier(.4,0,.7,.2) forwards; } .hsign.is-in .hs-fade{ animation:hsTha .78s cubic-bezier(.22,1.14,.4,1) both; } @keyframes hsRut{ 0%{opacity:1;transform:translateY(0) rotate(0) scale(1)} 100%{opacity:0;transform:translateY(-26px) rotate(-5deg) scale(.94)} } @keyframes hsTha{ 0%{opacity:0;transform:translateY(-30px) rotate(4.5deg) scale(.95)} 55%{opacity:1;transform:translateY(3px) rotate(-1.6deg) scale(1)} 78%{transform:translateY(0) rotate(.8deg)} 100%{opacity:1;transform:translateY(0) rotate(0) scale(1)} } /* Người đã xin bớt chuyển động: KHÔNG luân phiên. Bốn tấm thay nhau ngay giữa màn hình là thứ gây khó chịu nhất cho người nhạy với chuyển động - nặng hơn cả cái lắc. Họ thấy một tấm, đứng yên, trọn vẹn. */ @media (prefers-reduced-motion: reduce){ .hsign.is-out .hs-fade, .hsign.is-in .hs-fade{animation:none !important;opacity:1;transform:none} } /* ══ NGƯỜI ĐÃ XIN BỚT CHUYỂN ĐỘNG ═════════════════════════════════════════════ Tấm đứng yên hoàn toàn, nhưng vẫn là tấm bảng treo: đinh, dây, giấy, chữ, bóng đổ - đủ cả. Đứng yên mà vẫn đẹp mới là làm xong việc. */ @media (prefers-reduced-motion: reduce){ .hs-swing, [data-sign="bien"] .hs-card, [data-sign="the"] .hs-card::before, .hsign.is-gust .hs-gust{animation:none !important} .hs-swing{transform:rotate(1.1deg)} /* đậu hơi nghiêng - đúng dáng vật treo */ [data-sign="bien"] .hs-card{transform:rotate(-.5deg)} } /* ══ KHỔ MÀN ══════════════════════════════════════════════════════════════════ Dưới 1280px tấm phải rút đi: dù thu nhỏ hết cỡ nó vẫn lấn vào khổ chữ 900px của tiêu đề. Nhưng rút tấm KHÔNG có nghĩa là bỏ lời mời - lời mời chuyển xuống một dòng nằm trong dòng chảy, ngay dưới nút chính (xem .hs-line). */ @media (max-width:1439px){ .hsign{--sg-top:78px;--sg-right:34px;--sg-w:168px} } /* Màn hẹp (Thầy chốt 14/08 tối): tấm treo VÀO DÒNG CHẢY - đứng ĐẦU hero như treo từ thanh trên xuống, vẫn đung đưa và bật đèn khi chạm; thay hẳn dòng chữ mời cũ. */ @media (max-width:1279px){ .hsign{position:static;display:block;--sg-w:160px;width:var(--sg-w);margin:30px auto 0} } @media (max-width:480px){ .hsign{--sg-w:150px;margin:26px auto 0} } /* ── Dòng mời gọi cho màn hẹp ─────────────────────────────────────────────── */ .hs-line{display:none;margin:18px auto 0;text-align:center} /* dòng chữ mời cũ nghỉ hưu - tấm thật đã xuống dòng chảy thay nó ở mọi cỡ màn */ .hs-line a{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; padding:9px 16px;border-radius:999px; border:1px solid color-mix(in srgb,var(--gold,#D9C48E) 46%,transparent); background:color-mix(in srgb,var(--gold,#D9C48E) 12%,transparent); font-size:15px;font-weight:600;color:color-mix(in srgb,var(--gold,#D9C48E) 62%,#FFFDF6); } .hs-line a b{font-size:8px;letter-spacing:0} .hs-line a:hover{background:color-mix(in srgb,var(--gold,#D9C48E) 18%,transparent)} @media (max-width:480px){ .hs-line a{font-size:16px} }