/* Unacons v2 — lưới dự án kiểu thumbnail, liquid glass, mobile gọn */
:root{
  --lg-bg:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  --lg-dark:linear-gradient(135deg,rgba(40,37,32,.62),rgba(14,13,11,.48));
  --lg-edge:rgba(255,255,255,.18);
  --lg-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 1px rgba(0,0,0,.28),0 10px 30px rgba(0,0,0,.28);
  --lg-blur:blur(20px) saturate(175%);
}
.lg{background:var(--lg-bg);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid var(--lg-edge);box-shadow:var(--lg-shadow)}

/* ---------- DỰ ÁN: lưới thumbnail ---------- */
#dyan.ux-on{padding-bottom:100px!important}
#dyan.ux-on .featured-project,#dyan.ux-on .proj-row,#dyan.ux-on .proj-detail,
#dyan.ux-on .wrap>.section-head~.section-head{display:none!important}
#dyan.ux-on .section-head{margin-bottom:28px}
.ux-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px}
.ux-tabs{position:relative;display:inline-flex;padding:4px;border-radius:999px}
.ux-tabs button{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;
  font:500 .86rem 'Inter',sans-serif;color:var(--text-soft);padding:9px 18px;border-radius:999px;transition:color .3s;white-space:nowrap}
.ux-tabs button[aria-selected="true"]{color:#f6f1e8}
.ux-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ux-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 1px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.3);
  transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1)}
.ux-count{font-size:.82rem;color:var(--text-soft);letter-spacing:.04em}

.ux-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ux-tile{position:relative;display:block;overflow:hidden;border-radius:22px;aspect-ratio:4/5;background:#141311;
  isolation:isolate;color:#f6f1e8;text-decoration:none;transform:translateZ(0)}
.ux-tile[hidden]{display:none}
.ux-tile.wide,.ux-tile.span-all{grid-column:1/-1;aspect-ratio:21/9}
.ux-tile.span2{grid-column:span 2;aspect-ratio:auto}
.ux-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ux-tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(8,8,7,.78) 100%)}
@media (hover:hover){.ux-tile:hover img{transform:scale(1.045)}.ux-tile:hover .ux-go{transform:translateX(3px)}}
.ux-chip{position:absolute;top:14px;left:14px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;color:#f6f1e8;background:linear-gradient(135deg,rgba(30,28,24,.55),rgba(12,11,9,.35))!important}
.ux-chip.real::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#7ed6a0;margin-right:7px;vertical-align:1px;box-shadow:0 0 8px #7ed6a0}
.ux-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:12px;padding:22px}
.ux-meta div{flex:1;min-width:0}
.ux-name{display:block;font-family:'Tenor Sans',sans-serif;font-size:1.45rem;line-height:1.2;letter-spacing:.01em}
.ux-tile.wide .ux-name{font-size:clamp(1.6rem,3vw,2.4rem)}
.ux-place{display:block;font-size:.84rem;color:rgba(243,240,234,.78);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ux-go{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:transform .3s}
.ux-go svg{width:16px;height:16px}

@media (min-width:761px){.ux-tile{aspect-ratio:4/3}.ux-tile.wide,.ux-tile.span-all{aspect-ratio:5/2}}
@media (max-width:760px){
  .ux-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .ux-tabs{max-width:100%}
  .ux-count{display:none}
  .ux-tabs button{padding:8px 13px;font-size:.8rem}
  .ux-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ux-tile{border-radius:16px}
  .ux-tile.wide,.ux-tile.span-all{aspect-ratio:16/11}
  .ux-chip{top:9px;left:9px;font-size:.58rem;padding:5px 9px;letter-spacing:.08em}
  .ux-meta{padding:12px;gap:8px}
  .ux-name{font-size:1rem}
  .ux-tile.wide .ux-name{font-size:1.4rem}
  .ux-place{font-size:.7rem}
  .ux-go{width:30px;height:30px}.ux-go svg{width:12px;height:12px}
  .ux-tile:not(.wide):not(.span-all) .ux-go{display:none}
}

/* ---------- liquid glass: nav, hero caption, nút nổi ---------- */
@media (min-width:860px){
  .navlinks{padding:5px;gap:2px!important;border-radius:999px;background:var(--lg-bg);
    -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid var(--lg-edge);box-shadow:var(--lg-shadow)}
  .navlinks a{padding:7px 15px;border-radius:999px;transition:background .25s,color .25s}
  .navlinks a:hover{background:rgba(255,255,255,.09)}
}
.hs-cap{background:var(--lg-dark)!important;border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-shadow);
  -webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important;border-radius:16px!important}
.sidebar .social a,.footer-grid .social a{background:var(--lg-bg);border-color:var(--lg-edge)!important;box-shadow:var(--lg-shadow)}
.dutoan-fab{background:var(--lg-dark)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:1px solid rgba(217,176,143,.55)!important;box-shadow:var(--lg-shadow)}
.dutoan-fab:hover{background:var(--gold)!important}
.welcome-toast{background:var(--lg-dark);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:1px solid var(--lg-edge);border-radius:18px;box-shadow:var(--lg-shadow)}
/* nút tư vấn tròn trùng với nút chat → bỏ */
.consult-fab{display:none!important}

/* ---------- MOBILE: 1 thanh header + 1 thanh hành động ---------- */
@media (max-width:859px){
  .sidebar{position:sticky!important;top:0;z-index:80;padding:10px 16px!important;
    background:rgba(14,13,11,.55)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
    border-bottom:1px solid rgba(255,255,255,.08)!important}
  .sidebar .brand img{width:104px!important}
  .sidebar .social{display:none!important}
  .main .topbar{display:none!important}
  .sidebar .hamburger{width:42px;height:42px;border-radius:999px;background:var(--lg-bg);
    border:1px solid var(--lg-edge);box-shadow:var(--lg-shadow)}
  .mobile-drawer{background:rgba(11,11,10,.62)!important;-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)}
  .mobile-drawer .close-btn{border-radius:999px;background:var(--lg-bg);border-color:var(--lg-edge)}

  .mobile-cta-bar{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
    padding:6px!important;gap:6px!important;border-radius:22px;border:1px solid var(--lg-edge)!important;
    background:rgba(20,19,17,.5)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-shadow)}
  .mobile-cta-bar a{border-radius:16px!important;padding:12px 6px!important;font-size:.88rem!important}
  .mobile-cta-bar a.zalo{background:var(--lg-bg);border:1px solid var(--lg-edge)!important}
  body{padding-bottom:86px!important}

  /* chỉ giữ 1 nút liên hệ: gom vào thanh dưới */
  .welcome-toast{display:none!important}
  #una-chat{bottom:calc(84px + env(safe-area-inset-bottom))!important}
  #una-chat .fab,#una-chat .tip{display:none!important}
  #una-chat .menu{bottom:0!important;border-radius:18px!important;background:rgba(20,19,17,.82)!important;
    -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-color:var(--lg-edge)!important}
}
@media (prefers-reduced-motion:reduce){.ux-thumb,.ux-tile img{transition:none}}