/* =====================================================================
   VNDS20 — lớp tích hợp (tải CUỐI cùng, sau toàn bộ CSS mẫu Vercel)

   Phạm vi (bản sync cấu trúc mới 2026-11):
   1) Bất biến thiết kế: không đè rule nào của CSS mẫu — mọi rule bổ sung
      dùng selector riêng (.wish-vote, .greeting-media…).
   2) Vote tim Phương án B: pill outline → cam khi đã vote, gắn vào thẻ
      lời chúc trên Tường (greetings.js bản fork).
   3) Hero FX + timeline + scrollbar đã duyệt — giữ nguyên từ bản trước.
   Modal gửi lời chúc cũ (#wish-modal Bootstrap) đã THÁO — bản mới dùng
   <dialog> #wish-dialog của giao diện Vercel (style ở wish-experience.css).
   ===================================================================== */

/* ---------- 1. Pill vote tim (Phương án B) ---------- */
.wish-vote{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 14px 5px 11px;border:1px solid #d8cbb6;border-radius:25px;background:transparent;color:#76634d;font-size:12.5px;line-height:1.4;font-variant-numeric:tabular-nums;transition:background .2s,border-color .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.wish-vote svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;flex:none}
.wish-vote:hover{color:var(--brand-orange,#f37a20);border-color:var(--brand-orange,#f37a20)}
.wish-vote:active{transform:scale(.96)}
.wish-vote:focus-visible{outline:2px solid var(--brand-orange,#f37a20);outline-offset:2px}
.wish-vote.voted,.wish-vote[aria-pressed="true"]{background:var(--brand-orange,#f37a20);border-color:var(--brand-orange,#f37a20);color:#fffaf3}
.wish-vote.voted svg,.wish-vote[aria-pressed="true"] svg{fill:currentColor}
.wish-vote[aria-busy="true"]{opacity:.65;pointer-events:none}
.greeting-meta .wish-vote{margin-left:auto}

/* ---------- 2. Link tư liệu đính kèm (Google Drive) trên thẻ lời chúc ---------- */
.greeting-media{display:inline-flex;align-items:center;gap:4px;color:#8a6a43;font-size:11.5px;font-weight:500;text-decoration:none;border-bottom:1px dashed #d8cbb6;transition:color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.greeting-media:hover{color:var(--brand-orange,#f37a20);border-color:var(--brand-orange,#f37a20)}

/* ---------- 3. Mobile: giảm padding 2 bên + tối ưu trải nghiệm ---------- */
/* Gutter dùng chung cho header/section/footer của giao diện gốc — giảm 1 chỗ,
   cả trang hẹp lại đều nhau (bản gốc 7% ≈ 27px mỗi bên trên màn 390px). */
@media(max-width:800px){
  :root{--page-gutter:clamp(14px,4.5%,22px)}
  .greeting-card{padding:18px 16px 16px}
  .wish-vote{min-height:38px;padding:6px 15px 6px 12px}
  .home-moments-grid{gap:10px}
  .toast{font-size:13px;max-width:calc(100% - 24px)}
}
@media(max-width:350px){
  :root{--page-gutter:13px}
}

/* ---------- 4. Scrollbar mảnh toàn trang ---------- */
html{scrollbar-width:thin;scrollbar-color:#c9bca6 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cec2ac;border-radius:10px;border:3px solid #fffaf3}
::-webkit-scrollbar-thumb:hover{background:#b3a68f}
::-webkit-scrollbar-thumb:active{background:#a2947c}
dialog::-webkit-scrollbar-thumb{border-color:#fffaf3}

/* ---------- 5. Hero FX — hiệu ứng nền công nghệ tài chính ---------- */
/* Ẩn đường giá (biểu đồ chứng khoán tự thân) theo yêu cầu — grid + hạt nổi giữ nguyên.
   Bật lại: bỏ rule display:none dưới đây. */
.hero-fx-line{display:none}
/* Lớp trang trí nằm giữa ảnh banner chính thức và chữ/CTA, mờ dần cùng hero
   khi cuộn (đọc --hero-opacity do hero.js đặt trên #home-transition). */
.hero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:var(--hero-opacity,1);transition:opacity .2s linear}
.hero-official .hero-scene{z-index:1}
.hero-official .hero-copy{position:relative;z-index:2}
.hero-fx-grid{position:absolute;inset:-4%;background-image:linear-gradient(rgba(243,122,32,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(243,122,32,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 62% at 50% 34%,#000 30%,transparent 78%);mask-image:radial-gradient(70% 62% at 50% 34%,#000 30%,transparent 78%)}
.hero-fx-line{position:absolute;left:-3%;right:-3%;bottom:6%;width:106%;height:52%;opacity:.55;filter:blur(.5px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.07) 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 26%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.07) 100%);animation:fxFloat 9s ease-in-out infinite alternate;will-change:transform}
.hero-fx-line .fx-stroke{stroke-dasharray:2400;stroke-dashoffset:2400;animation:fxDraw 2.4s cubic-bezier(0.23,1,0.32,1) .35s forwards}
.hero-fx-line .fx-dot{opacity:0;animation:fxFadeIn .5s ease-out 2.55s forwards}
.hero-fx-line .fx-dot-halo{opacity:0;transform-box:fill-box;transform-origin:center;animation:fxHalo 2.6s ease-out 2.6s infinite}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxFadeIn{to{opacity:1}}
@keyframes fxHalo{0%{opacity:.9;transform:scale(.5)}70%{opacity:0;transform:scale(2.2)}100%{opacity:0;transform:scale(2.2)}}
@keyframes fxFloat{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.hero-fx-dots{position:absolute;inset:0}
.hero-fx-dots .hero-fx-dot{position:absolute;border-radius:50%;background:#f5923d;box-shadow:0 0 8px 1px rgba(243,122,32,.45);animation:fxRise linear infinite;will-change:transform,opacity}
@keyframes fxRise{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.85}85%{opacity:.5}100%{transform:translate3d(14px,-108vh,0);opacity:0}}
@media(max-width:800px){
  .hero-fx-line{bottom:14%;height:44%;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 24%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.1) 78%,rgba(0,0,0,.06) 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 24%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.1) 78%,rgba(0,0,0,.06) 100%)}
    .hero-fx-dots .hero-fx-dot{box-shadow:0 0 6px 1px rgba(243,122,32,.4)}
}
@media(prefers-reduced-motion:reduce){
  .hero-fx{display:none}
}

/* ---------- 6. Timeline cột mốc — nổi bật, icon, hover ---------- */
/* Cùng ngôn ngữ với tabs Người Xây Nhà (đã duyệt): container kem, ô chọn trắng, chữ cam. */
.years{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px;background:#f7ead9b3;border:1px solid #ecdfc9;border-radius:18px;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity}
.years::-webkit-scrollbar{display:none}
.years button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1 0 auto;min-width:104px;text-align:left;background:transparent;border:1px solid transparent;border-radius:13px;padding:11px 14px 12px;color:#7d7263;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease;scroll-snap-align:start;will-change:transform}
.years button .year-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#ffffff99;color:#b3865a;margin-bottom:3px;transition:color .2s ease,background-color .2s ease}
.years button .year-ic svg{width:17px;height:17px}
.years button strong{font-weight:400;font-size:24px;display:block;line-height:1.1;letter-spacing:-.03em}
.years button small{font-size:10.5px;color:#9a8e7b;letter-spacing:.02em;transition:color .2s ease}
.years button:hover,.years button:focus-visible{color:var(--brand-orange,#f37a20);background:#ffffff8c;transform:translateY(-2px);box-shadow:0 6px 16px #b6570314}
.years button:hover small,.years button:focus-visible small{color:#8a6a43}
.years button:hover .year-ic,.years button:focus-visible .year-ic{color:var(--brand-orange,#f37a20);background:#fff}
.years button:focus-visible{outline:2px solid var(--brand-orange,#f37a20);outline-offset:2px}
.years button[aria-selected="true"]{color:var(--brand-orange,#f37a20);background:#fff;border-color:#f6d7b8;box-shadow:0 4px 14px #b657031a;transform:none}
.years button[aria-selected="true"] .year-ic{color:#fff;background:var(--brand-orange,#f37a20)}
.years button[aria-selected="true"] small{color:#b3865a}
@media(max-width:800px){
  .years{padding:6px;border-radius:15px;gap:5px}
  .years button{min-width:96px;padding:9px 12px 10px;border-radius:11px}
  .years button strong{font-size:20px}
  .years button .year-ic{width:26px;height:26px;border-radius:8px}
  .years button .year-ic svg{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){
  .years button,.years button .year-ic{transition:none}
  .years button:hover{transform:none}
}