/* =====================================================================
   UNACONS · FLUID LAYER  v1.0  (28/10/2026)
   Lớp nâng cấp giao diện theo nguyên tắc Apple Fluid Interfaces.
   Gắn vào <head> của trang chủ và /du-toan/ — không sửa nội dung gốc.
   Gỡ bỏ: xoá 2 dòng <link> + <script> là trang trở lại nguyên trạng.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap');

:root{
  --uf-ease-out:cubic-bezier(.2,.8,.2,1);          /* phản hồi nhanh, dừng êm */
  --uf-ease-sheet:cubic-bezier(.32,.72,0,1);        /* đường cong sheet iOS */
  --uf-glass:rgba(16,15,13,.62);
  --uf-glass-strong:rgba(16,15,13,.78);
  --uf-glass-edge:rgba(243,240,234,.10);
  --uf-blur:blur(20px) saturate(170%);
}

/* ---------- 1. Chữ: font thương hiệu + tracking theo cỡ chữ ---------- */
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;}
/* JS gắn .uf-vi (có dấu → Be Vietnam Pro) hoặc .uf-latin (không dấu → Tenor Sans) cho từng dòng tiêu đề */
.uf-vi{font-family:'Be Vietnam Pro',system-ui,sans-serif!important;}
.uf-latin{font-family:'Tenor Sans',sans-serif!important;}
h1.headline.uf-vi{font-weight:300;}
h1.headline{letter-spacing:-.022em!important;line-height:1.12!important;}
.section-head h2{letter-spacing:-.014em;line-height:1.22;}
.section-head h2.uf-vi,.cta-grid h2.uf-vi{font-weight:300;}
.featured-project .fp-body h3,.proj-card h3{letter-spacing:-.01em;}
.section-head p,.hero-sub,.featured-project p.fp-desc{line-height:1.65;}
.eyebrow,.hs-badge{letter-spacing:.16em;}          /* chữ nhỏ: tracking dương */

/* ---------- 2. Phản hồi chạm tức thì (trên pointer-down) ---------- */
.btn-primary,.navcta,.btn-ghost,.consult-submit,.lang-switch,.hamburger,
.mobile-cta-bar a,.consult-fab,.cq .pill span,.hs-cap,.hs-bar,
.sidebar .social a,.footer-grid .social a,.mobile-drawer a,.close-btn,.consult-close,
.welcome-toast-close,.featured-project,.proj-card,
.btn,.seg label,.top nav a,.uf-sumbar{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn-primary,.navcta{transition:filter .25s,background-position .6s,transform .32s var(--uf-ease-out);}
.btn-ghost,.lang-switch,.hamburger,.consult-close,.close-btn,.welcome-toast-close,
.sidebar .social a,.footer-grid .social a,.mobile-cta-bar a,.consult-submit,.btn{
  transition:border-color .25s,color .25s,background-color .25s,filter .25s,transform .32s var(--uf-ease-out);
}
.cq .pill span,.seg label{transition:border-color .2s,color .2s,background-color .2s,transform .32s var(--uf-ease-out);}
.featured-project,.proj-card{transition:transform .45s var(--uf-ease-out);}

.btn-primary:active,.navcta:active,.consult-submit:active,.btn:active,
.mobile-cta-bar a:active,.lang-switch:active,.hamburger:active,
.consult-close:active,.close-btn:active,.welcome-toast-close:active,
.sidebar .social a:active,.footer-grid .social a:active,
.cq .pill span:active,.seg label:active{transform:scale(.96);transition-duration:.08s;}
.btn-ghost:active{transform:translateY(1px);transition-duration:.08s;}
.consult-fab.show:active{transform:scale(.92);transition-duration:.08s;}
.featured-project:active,.proj-card:active{transform:scale(.988);transition-duration:.12s;}
.mobile-drawer a:active{opacity:.6;}

/* ---------- 3. Thanh menu kính, nổi khi cuộn (trang chủ) ---------- */
.topbar{position:sticky;top:0;z-index:58;}
.uf-topglass{
  position:fixed;top:0;left:var(--sidebar-w,0px);right:0;height:var(--uf-tbh,80px);z-index:57;pointer-events:none;
  background:var(--uf-glass);-webkit-backdrop-filter:var(--uf-blur);backdrop-filter:var(--uf-blur);
  opacity:0;transition:opacity .35s var(--uf-ease-out);
  box-shadow:inset 0 -1px 0 var(--uf-glass-edge);
}
.uf-topglass.on{opacity:1;}
.topbar{padding-left:48px;padding-right:48px;}            /* trả lại lề cho thanh menu (bản cũ bị mất lề) */
@media (max-width:859px){.topbar{padding-top:14px;padding-bottom:14px;}}
@media (max-width:640px){.topbar{padding-left:20px;padding-right:20px;}}
.navlinks a{position:relative;}
.navlinks a.uf-here{color:var(--text);}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--uf-ease-out);}
.navlinks a.uf-here::after{transform:scaleX(1);}

/* ---------- 4. Slideshow hero: kéo tay 1:1, quán tính, ngắt được ---------- */
.uf-hero{touch-action:pan-y;}
.uf-hero .hero-bg img.hs-slide{transition:none!important;will-change:opacity,translate;}
.uf-hero.uf-dragging{cursor:grabbing;}
.uf-hero.uf-dragging .hs-cap,.uf-hero.uf-dragging .hero-content{user-select:none;-webkit-user-select:none;}
/* chấm tiến trình: chấm đang chạy giãn thành vạch đếm 6 giây */
.uf-hero .hs-bar{width:6px;height:6px;border-radius:3px;position:relative;
  transition:width .45s var(--uf-ease-out),background-color .3s;}
.uf-hero .hs-bar.on{width:26px;transform:none;background:rgba(255,255,255,.28);}
.uf-hero .hs-bar i{position:absolute;inset:0;width:100%!important;opacity:1!important;background:#e2b396;
  transform-origin:left;transform:scaleX(0);animation:none!important;}
.uf-hero .hs-bar.on i{animation:ufBar var(--uf-dur,6s) linear forwards!important;}
.uf-hero.uf-paused .hs-bar.on i{animation-play-state:paused!important;}
@keyframes ufBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.uf-hero .hs-bar::before{content:"";position:absolute;inset:-12px -4px;}   /* vùng chạm rộng hơn */
.uf-hero .hs-bars{gap:8px;}
.uf-hero .hs-cap{border-radius:14px;background:rgba(14,13,11,.46);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(255,255,255,.14);transition:transform .32s var(--uf-ease-out);}
.uf-hero .hs-cap.on{animation:ufCapIn .55s var(--uf-ease-out);}
@keyframes ufCapIn{from{opacity:0;transform:translateY(8px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.uf-hero .hs-cap:active{transform:scale(.98);}
.uf-hero .hs-name{letter-spacing:.005em;}

/* ---------- 5. Ngăn kéo menu mobile: vật liệu kính, mọc ra từ nút ☰ ---------- */
.mobile-drawer{
  background:rgba(11,11,10,.70);
  -webkit-backdrop-filter:blur(0px) saturate(100%);backdrop-filter:blur(0px) saturate(100%);
  transform:scale(1.03);transform-origin:calc(100% - 44px) 44px;
  transition:opacity .32s var(--uf-ease-out),transform .45s var(--uf-ease-out),
             -webkit-backdrop-filter .45s var(--uf-ease-out),backdrop-filter .45s var(--uf-ease-out);
}
.mobile-drawer{z-index:600;gap:clamp(12px,3vh,30px);padding:72px 24px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;}
.mobile-drawer a{font-size:clamp(1.15rem,2.6vh,1.4rem);}
.mobile-drawer .btn-primary{font-size:.95rem;}
.mobile-drawer.open{transform:none;-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);}
.mobile-drawer > a,.mobile-drawer > .mobile-social,.mobile-drawer > .lang-switch{
  opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;}
.mobile-drawer.open > a,.mobile-drawer.open > .mobile-social,.mobile-drawer.open > .lang-switch{
  opacity:1;transform:none;transition:opacity .5s var(--uf-ease-out),transform .6s var(--uf-ease-out);
  transition-delay:calc(var(--uf-i,0) * 35ms + 60ms);}
.mobile-drawer .close-btn{border-radius:50%;}

/* ---------- 6. Thanh liên hệ mobile: viên kính nổi ---------- */
@media (max-width:859px){
  .mobile-cta-bar{
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    padding:7px;gap:7px;border-radius:18px;
    background:var(--uf-glass-strong);-webkit-backdrop-filter:var(--uf-blur);backdrop-filter:var(--uf-blur);
    border:1px solid var(--uf-glass-edge);box-shadow:0 14px 36px rgba(0,0,0,.45);
  }
  .mobile-cta-bar a{border-radius:12px;padding:12px 6px;}
  .mobile-cta-bar .zalo,.mobile-cta-bar .dutoan{border:1px solid rgba(243,240,234,.14);color:var(--text);background:rgba(243,240,234,.04);}
  body{padding-bottom:86px;}
  .welcome-toast,.consult-fab{bottom:calc(92px + env(safe-area-inset-bottom));}
}

/* ---------- 7. Popup tư vấn: vật liệu hiện ra; mobile = sheet vuốt xuống để đóng ---------- */
.consult-overlay{
  display:flex!important;visibility:hidden;opacity:0;
  background:rgba(8,7,6,calc(.72 * var(--uf-scrim,1)));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .38s var(--uf-ease-out),visibility 0s linear .5s;
}
.consult-overlay.active{visibility:visible;opacity:1;transition:opacity .3s var(--uf-ease-out),visibility 0s;}
.consult-modal{
  border-radius:16px;
  transform:translateY(10px) scale(.96);opacity:0;filter:blur(6px);
  transition:transform .5s var(--uf-ease-sheet),opacity .3s var(--uf-ease-out),filter .4s var(--uf-ease-out);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.consult-overlay.active .consult-modal{transform:none;opacity:1;filter:none;}
.consult-close{border-radius:50%;}
.cq input[type="text"],.cq input[type="number"],.cq input[type="tel"],.cq input[type="email"]{border-radius:8px;transition:border-color .2s,box-shadow .2s;}
.cq input:focus{box-shadow:0 0 0 3px rgba(217,176,143,.18);}
.consult-submit{border-radius:10px;}
.uf-grab{display:none;}
@media (max-width:640px){
  .consult-overlay{align-items:flex-end;padding:0;overflow:hidden;}
  .consult-modal{
    max-width:none;margin:0;border-radius:20px 20px 0 0;border-bottom:none;
    max-height:92svh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-top:34px;padding-bottom:calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%);opacity:1;filter:none;
    transition:transform .5s var(--uf-ease-sheet);
  }
  .consult-overlay.active .consult-modal{transform:none;}
  .uf-grab{display:block;position:absolute;top:0;left:0;right:64px;height:52px;z-index:3;touch-action:none;cursor:grab;}
  .consult-modal::before{content:"";position:absolute;top:9px;left:50%;width:38px;height:5px;margin-left:-19px;
    border-radius:3px;background:rgba(243,240,234,.28);}
}

/* ---------- 8. Lời chào + nút nổi ---------- */
.welcome-toast{border-radius:16px;background:rgba(24,23,15,.86);
  -webkit-backdrop-filter:var(--uf-blur);backdrop-filter:var(--uf-blur);border-color:var(--uf-glass-edge);
  transition:opacity .45s var(--uf-ease-out),transform .55s var(--uf-ease-out);touch-action:pan-y;}
.consult-fab{transition:opacity .35s var(--uf-ease-out),transform .5s var(--uf-ease-out),filter .25s;}

/* ---------- 9. Hiện dần khi cuộn tới (chỉ phần nằm dưới màn hình đầu) ---------- */
.uf-pending{opacity:0;transform:translateY(22px);animation:none!important;}
.uf-pending.uf-in{opacity:1;transform:none;
  transition:opacity .9s var(--uf-ease-out),transform 1s var(--uf-ease-out);transition-delay:var(--uf-d,0ms);}

/* =====================================================================
   TRANG DỰ TOÁN
   ===================================================================== */
header.top{transition:background-color .35s,border-color .35s;}
header.top:not(.uf-stuck){background:rgba(11,11,10,.0);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}
header.top.uf-stuck{background:var(--uf-glass);-webkit-backdrop-filter:var(--uf-blur);backdrop-filter:var(--uf-blur);border-bottom-color:var(--uf-glass-edge);}
.btn{border-radius:10px;}
@media (max-width:480px){header.top nav{gap:12px;font-size:13px;} header.top nav a{white-space:nowrap;}}   /* menu không bị xuống dòng trên điện thoại */
.seg label{border-radius:999px;}
.card,.total{border-radius:14px;}
.total .big{display:inline-block;transform-origin:left center;}
.total .big.uf-tick{animation:ufTick .5s var(--uf-ease-out);}
@keyframes ufTick{0%{text-shadow:0 0 0 rgba(217,176,143,0)}30%{text-shadow:0 0 22px rgba(217,176,143,.45)}100%{text-shadow:0 0 0 rgba(217,176,143,0)}}
#detail,#quoteBox{transition:opacity .5s var(--uf-ease-out),transform .6s var(--uf-ease-out);}
/* thanh tổng tiền nổi (mobile) — luôn thấy con số khi đang nhập */
.uf-sumbar{
  position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-radius:18px;border:1px solid rgba(217,176,143,.28);
  background:var(--uf-glass-strong);-webkit-backdrop-filter:var(--uf-blur);backdrop-filter:var(--uf-blur);
  box-shadow:0 14px 36px rgba(0,0,0,.45);color:var(--ink,#efe9e1);font:inherit;text-align:left;cursor:pointer;
  transform:translateY(calc(100% + 24px));opacity:0;
  transition:transform .5s var(--uf-ease-sheet),opacity .3s var(--uf-ease-out);
}
.uf-sumbar.show{transform:none;opacity:1;}
.uf-sumbar .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#a59d92);}
.uf-sumbar .v{font-family:'Be Vietnam Pro',sans-serif;font-weight:500;letter-spacing:-.01em;font-size:21px;color:var(--gold,#d9b08f);line-height:1.1;}
.uf-sumbar .go{font-size:13px;color:var(--gold,#d9b08f);white-space:nowrap;}
.uf-sumbar:active{transform:scale(.98);transition-duration:.08s;}
@media (min-width:861px){.uf-sumbar{display:none;}}
@media print{.uf-sumbar{display:none!important;}}

/* =====================================================================
   TRỢ NĂNG — giảm chuyển động / giảm trong suốt / tăng tương phản
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .uf-pending,.uf-pending.uf-in{opacity:1;transform:none;transition:opacity .2s;}
  .mobile-drawer,.mobile-drawer.open{transform:none;transition:opacity .2s;}
  .mobile-drawer > *{transform:none!important;transition:opacity .2s!important;transition-delay:0s!important;}
  .consult-modal,.consult-overlay.active .consult-modal{transform:none!important;filter:none!important;transition:opacity .2s!important;}
  .consult-overlay:not(.active) .consult-modal{opacity:0;}
  .uf-hero .hs-cap.on{animation:none;}
  .uf-sumbar{transition:opacity .2s;transform:none;}
  .featured-project:active,.proj-card:active{transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  .uf-topglass,header.top.uf-stuck,.mobile-cta-bar,.mobile-drawer,.welcome-toast,.uf-sumbar,.uf-hero .hs-cap,.consult-overlay{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  .uf-topglass,header.top.uf-stuck,.mobile-cta-bar,.welcome-toast,.uf-sumbar{background:#141311!important;}
  .mobile-drawer{background:#0b0b0a!important;}
  .uf-hero .hs-cap{background:rgba(11,11,10,.88)!important;}
}
@media (prefers-contrast:more){
  .mobile-cta-bar,.uf-sumbar,.welcome-toast,.uf-hero .hs-cap,.consult-modal{border-color:rgba(243,240,234,.55)!important;}
  .uf-topglass,header.top.uf-stuck{background:#0b0b0a!important;}
}