/* privacy.html không nạp Marcellus / Cormorant → nạp ở đây cho chắc (trang khác đã có sẵn thì trình duyệt dùng lại bản đã tải) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&family=Marcellus&display=swap');
/* ===== Footer dùng chung "Born to build. Built to last." (mọi trang; trước 9/10/2026 là "Let's build.") =====
   Markup do assets/site-footer.js chèn (portfolio.html viết sẵn trong trang). Nền footer = đúng dải navy đo từ assets/foot-video.mp4
   (trên #1a2439 → giữa #1e2740 → dưới #202d46) để hai bên hoà liền với video đặt chính giữa.
   Video = khối tile VGC (Downloads/Video Project 30.mp4 đã cắt dải đen 1920→1258, bỏ audio). */
.site-foot{position:relative;overflow:hidden;color:#F5F1E8;
  background:linear-gradient(180deg,#1a2439 0%,#1e2740 50%,#202d46 100%);
  padding:14vh 2.5rem 3vh;font-family:'Archivo',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.site-foot.is-reveal{position:sticky;bottom:0;z-index:1}   /* trang chủ: footer lộ dần dưới <main> */
.site-foot *{box-sizing:border-box}
/* video NỀN: cao bằng trọn footer, đặt chính giữa, nằm SAU chữ; hai mép trái/phải mờ dần vào nền
   để không thấy đường ghép (đừng thu nhỏ thành khối riêng — user muốn tile to như thế này) */
.site-foot .foot-video{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:1258/1080;
  transform:translateX(-50%);object-fit:cover;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
/* quầng sáng navy quanh video: video sáng/xanh hơn ở giữa (#212d47) so với mép (#1e2740), nên nền hai bên
   được phủ thêm một elip cùng màu, co giãn theo chiều cao footer như video → không thấy ô chữ nhật của video */
.site-foot::before{content:"";position:absolute;top:0;left:50%;height:100%;aspect-ratio:2.5/1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side ellipse,rgba(32,45,72,.95) 0%,rgba(31,44,70,.8) 38%,rgba(30,41,66,0) 100%)}
.site-foot .foot-grid,.site-foot .foot-bottom{position:relative;z-index:1}
.site-foot .foot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
/* ---- SLOGAN (9/10/2026): "Born to build. / Built to last." thay "Let's build." ----
   Cùng bộ chữ với tiêu đề các trang nội dung: dòng 1 Marcellus đứng màu kem, dòng 2 Cormorant nghiêng phủ vàng kim
   chuyển sắc chậm; phía trên là nhãn nhỏ giãn chữ có vạch vàng, phía dưới là một vạch vàng tự vẽ ra.
   Mỗi vế một dòng, không tự xuống dòng (nowrap) — cỡ chữ tính để cả khối nằm gọn bên TRÁI khối logo ở mọi bề ngang desktop. */
.site-foot .foot-slogan{display:flex;flex-direction:column;align-items:flex-start}
.site-foot .foot-kicker{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.15rem;
  font-size:.64rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:#E8C284;white-space:nowrap}
.site-foot .foot-kicker::before{content:"";width:2.6rem;height:1px;background:linear-gradient(90deg,rgba(232,194,132,0),#E8C284)}
.site-foot .foot-big{font-family:'Marcellus','Playfair Display',serif;font-style:normal;font-weight:400;
  font-size:clamp(1.9rem,4.1vw,3.5rem);line-height:1.1;letter-spacing:.005em;white-space:nowrap;color:#F5F1E8}
.site-foot .foot-big .l1,.site-foot .foot-big .l2{display:block}
.site-foot .foot-big .l2{font-family:'Cormorant Garamond','Playfair Display',serif;font-style:italic;font-weight:600;
  font-size:1.17em;line-height:1.06;margin-top:.03em;padding:0 .14em .1em 0;width:fit-content;
  background:linear-gradient(100deg,#b88a48 0%,#e8c284 28%,#fff3d0 50%,#e0b66a 72%,#b88a48 100%);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 14px rgba(8,13,26,.6));animation:footGold 7s ease-in-out infinite}
@keyframes footGold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.site-foot .foot-rule{display:block;width:4.6rem;height:1px;margin-top:1.5rem;transform-origin:left;
  background:linear-gradient(90deg,#E8C284,rgba(232,194,132,0))}
/* hiện dần khi footer vào tầm nhìn — class .foot-anim / .is-in do site-footer.js gắn (không có JS thì chữ vẫn hiện bình thường) */
.site-foot.foot-anim .foot-kicker,.site-foot.foot-anim .foot-big .l1,.site-foot.foot-anim .foot-big .l2{
  opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1)}
.site-foot.foot-anim .foot-rule{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .8s}
.site-foot.foot-anim.is-in .foot-kicker,.site-foot.foot-anim.is-in .foot-big .l1,.site-foot.foot-anim.is-in .foot-big .l2{opacity:1;transform:none}
.site-foot.foot-anim.is-in .foot-kicker{transition-delay:.05s}
.site-foot.foot-anim.is-in .foot-big .l1{transition-delay:.22s}
.site-foot.foot-anim.is-in .foot-big .l2{transition-delay:.44s}
.site-foot.foot-anim.is-in .foot-rule{transform:scaleX(1)}
.site-foot .foot-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .8rem;margin-bottom:.35rem}
.site-foot .foot-row .lbl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#E8C284;flex:none}
.site-foot .foot-row .val{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;line-height:2;opacity:.8}
.site-foot .foot-row .val a{color:inherit;text-decoration:none}
.site-foot .foot-row .val a:hover{color:#E8C284}
.site-foot .foot-row .val a+a::before{content:"  ·  ";color:#E8C284}
.site-foot .foot-grid p{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;line-height:2;opacity:.8;margin:0}
@media(min-width:992px){.site-foot .foot-row{flex-wrap:nowrap}.site-foot .foot-row .val{white-space:nowrap}}
/* laptop hẹp (992–1279px): cột liên hệ 1 hàng ngang rộng ~415px sẽ chờm lên mép phải khối logo → xếp nhãn TRÊN giá trị cho cột hẹp lại */
@media(min-width:992px) and (max-width:1279px){
  .site-foot .foot-row{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:.55rem}
  .site-foot .foot-row .val{line-height:1.75}
}
.site-foot .foot-bottom{max-width:1200px;margin:5rem auto 0;display:flex;justify-content:space-between;font-size:clamp(.74rem,1vw,.88rem);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,241,232,.68);flex-wrap:wrap;gap:.8rem 1.5rem;padding-top:1.6rem;border-top:1px solid rgba(232,194,132,.2)}
.site-foot .foot-bottom a{position:relative;display:inline-block;padding-bottom:3px;color:inherit;text-decoration:none;transition:color .3s}
.site-foot .foot-bottom a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#E8C284;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.77,0,.18,1)}
.site-foot .foot-bottom a:hover,.site-foot .foot-bottom a:focus-visible{color:#E8C284}
.site-foot .foot-bottom a:hover::after,.site-foot .foot-bottom a:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media(max-width:991px){
  .site-foot .foot-grid{grid-template-columns:1fr}
  /* khổ hẹp: chữ nằm đè lên tile vàng → thêm bóng tối quanh chữ cho dễ đọc (video giữ nguyên độ lớn/độ sáng) */
  .site-foot .foot-grid,.site-foot .foot-bottom{text-shadow:0 0 3px rgba(8,13,26,.95),0 1px 10px rgba(8,13,26,.9),0 0 22px rgba(8,13,26,.75)}
  .site-foot .foot-row .val,.site-foot .foot-grid p{opacity:1}
}
@media(prefers-reduced-motion:reduce){.site-foot .foot-bottom a,.site-foot .foot-bottom a::after{transition:none}
  .site-foot .foot-big .l2{animation:none}}
/* iPhone: ẩn nút PLAY mà iOS phủ lên video khi tự phát bị chặn (trình duyệt trong Messenger/Facebook, Chế độ nguồn điện thấp).
   Mọi video trên site là video nền trang trí. Quy tắc này cũng có trong assets/loader/vgc-loader.js; để ở đây cho trang không nạp loader (privacy). */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* Ghi công người làm web: khung nhỏ chỉ hiện khi bấm/chạm dòng © (JS trong site-footer.js). Không đổi con trỏ chuột trên máy tính
   để không lộ là bấm được; riêng máy cảm ứng (hover:none) cần cursor:pointer thì iPhone Safari mới phát sự kiện click cho thẻ <span>.
   Hiệu ứng bấm: chữ © lóe vàng (.is-tapped) + gợn sóng vàng (.foot-ripple) tại điểm bấm; khung bật lên kiểu lò xo, tên ánh kim chạy
   (cùng gradient + keyframes footGold của chữ "Built to last."), gạch vàng mảnh tự vẽ dưới tên. */
.site-foot .foot-bottom > span:first-child{position:relative;-webkit-tap-highlight-color:transparent}
@media (hover:none){.site-foot .foot-bottom > span:first-child{cursor:pointer}}
.site-foot .foot-bottom > span:first-child.is-tapped{animation:fcFlash .75s ease}
@keyframes fcFlash{0%{color:inherit}25%{color:#F5D9A8;text-shadow:0 0 14px rgba(232,194,132,.65)}100%{color:inherit}}
.site-foot .foot-ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(245,217,168,.95);box-shadow:0 0 14px rgba(232,194,132,.55),inset 0 0 8px rgba(232,194,132,.35);
  animation:fcRipple .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fcRipple{0%{transform:scale(.4);opacity:1}100%{transform:scale(12);opacity:0}}
.site-foot .foot-credit{position:absolute;left:0;bottom:calc(100% + 14px);z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  width:max-content;max-width:min(320px,calc(100vw - 2.5rem));padding:.75rem 1.05rem .8rem;border-radius:6px;
  background:linear-gradient(160deg,rgba(14,24,48,.97),rgba(6,11,24,.97));border:1px solid rgba(232,194,132,.55);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.75),0 0 22px -6px rgba(232,194,132,.35);
  color:#F5F1E8;text-transform:none;text-shadow:none;white-space:normal;text-align:left;pointer-events:none;
  opacity:0;transform:translateY(10px) scale(.92);transform-origin:left bottom;
  transition:opacity .3s ease,transform .5s cubic-bezier(.18,1.45,.4,1)}
.site-foot .foot-credit.is-in{opacity:1;transform:none}
.site-foot .foot-credit.is-out{opacity:0;transform:translateY(6px) scale(.96);transition:opacity .22s ease,transform .22s ease}
.site-foot .foot-credit .fc-k{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.62)}
.site-foot .foot-credit .fc-n{font-family:'Cormorant Garamond','Playfair Display',serif;font-style:italic;font-weight:600;font-size:22px;line-height:1.1;letter-spacing:.01em;
  background:linear-gradient(105deg,#9a742f 0%,#d9a441 25%,#fff3d0 50%,#e7c98a 72%,#9a742f 100%);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:footGold 3.2s ease-in-out infinite}
.site-foot .foot-credit .fc-r{display:block;height:1px;width:100%;margin-top:.15rem;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#E8C284,rgba(232,194,132,0));transition:transform .7s cubic-bezier(.22,.61,.36,1) .2s}
.site-foot .foot-credit.is-in .fc-r{transform:scaleX(1)}
/* rê chuột vào khung (máy tính): nhấc lên, viền + quầng vàng sáng hơn, tên giãn nhẹ và ánh kim chạy nhanh, gạch vàng sáng lên.
   Khung chỉ nhận chuột khi đã hiện (is-in); JS giữ khung mở khi chuột còn ở trên. */
.site-foot .foot-credit.is-in{pointer-events:auto;cursor:default}
.site-foot .foot-credit .fc-n{transition:letter-spacing .45s cubic-bezier(.22,.61,.36,1),filter .45s ease}
.site-foot .foot-credit .fc-r{transition:transform .7s cubic-bezier(.22,.61,.36,1) .2s,box-shadow .4s ease,height .3s ease}
@media (hover:hover){
  .site-foot .foot-credit.is-in{transition:opacity .3s ease,transform .45s cubic-bezier(.18,1.45,.4,1),border-color .35s ease,box-shadow .45s ease}
  .site-foot .foot-credit.is-in:hover{transform:translateY(-4px);border-color:rgba(245,217,168,.95);
    box-shadow:0 22px 46px -14px rgba(0,0,0,.8),0 0 34px -4px rgba(232,194,132,.55)}
  .site-foot .foot-credit.is-in:hover .fc-n{letter-spacing:.045em;filter:drop-shadow(0 0 8px rgba(232,194,132,.45));animation-duration:1.3s}
  .site-foot .foot-credit.is-in:hover .fc-r{box-shadow:0 0 10px rgba(232,194,132,.8);height:1.5px}
}
@media (hover:hover) and (max-width:767px){.site-foot .foot-credit.is-in:hover{transform:translate(-50%,-4px)}}
@media (max-width:767px){
  .site-foot .foot-credit{left:50%;align-items:center;text-align:center;transform:translate(-50%,10px) scale(.92);transform-origin:center bottom}
  .site-foot .foot-credit.is-in{transform:translate(-50%,0)}
  .site-foot .foot-credit.is-out{transform:translate(-50%,6px) scale(.96)}
  .site-foot .foot-credit .fc-r{transform-origin:center;background:linear-gradient(90deg,rgba(232,194,132,0),#E8C284,rgba(232,194,132,0))}}
@media (prefers-reduced-motion:reduce){.site-foot .foot-credit,.site-foot .foot-credit .fc-r{transition:none}.site-foot .foot-credit .fc-n{animation:none}}