/* Phần chung của web demo (dải DEMO + khung "Chủ tiệm nhận được gì?"). Mọi lớp bắt đầu bằng kn- để không đụng CSS của từng demo. */

.kn-ribbon {
  position: relative; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 8px 16px; background: #111827; color: #e5e7eb;
  font: 500 13px/1.4 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: center;
}
.kn-ribbon-tag { padding: 2px 8px; border-radius: 6px; background: #f5b301; color: #111827; font-weight: 800; letter-spacing: .06em; font-size: 11px; }
.kn-ribbon-links { display: inline-flex; gap: 12px; }
.kn-ribbon a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kn-ribbon a.kn-ribbon-cta { color: #f5b301; font-weight: 700; }

.kn-owner {
  position: fixed; left: 20px; bottom: 20px; z-index: 2147482000; width: 320px; max-width: calc(100vw - 110px);
  font: 14px/1.45 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #111827;
}
.kn-owner-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 22px; cursor: pointer;
  background: #111827; color: #fff; font: 600 13.5px/1 inherit; font-family: inherit; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.kn-owner-toggle::before { content: "📱"; }
.kn-owner-toggle:focus-visible { outline: 3px solid #f5b301; outline-offset: 2px; }
.kn-owner-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.kn-owner-dot[hidden] { display: none; }
.kn-owner-body {
  display: none; margin-top: 10px; padding: 16px; background: #fff; border-radius: 16px; border: 1px solid #e5e7eb;
  box-shadow: 0 18px 48px rgba(15,23,42,.22); max-height: calc(100vh - 160px); overflow: auto;
}
.kn-owner.open .kn-owner-body { display: block; }
.kn-owner-empty { margin: 0; color: #4b5563; }
.kn-owner-result[hidden] { display: none; }
.kn-owner-label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.kn-owner-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 14px; }
.kn-owner-fields dt { color: #6b7280; }
.kn-owner-fields dd { margin: 0; font-weight: 600; }
.kn-owner-phone { padding: 10px; border-radius: 14px; background: #dfe9f3; }
.kn-owner-tg {
  margin: 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #fff; white-space: pre-wrap; word-break: break-word;
  font: 13px/1.5 inherit; font-family: inherit; box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

@media (max-width: 520px) {
  .kn-owner { left: 12px; bottom: 14px; }
  .kn-owner-toggle { padding: 9px 12px; font-size: 12.5px; }
}

/* ---- Hiệu ứng chung (chỉ khi có JS: /boot.js gắn lớp .js; tắt khi người dùng chọn giảm chuyển động) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-photo { animation: kn-photo 1.5s cubic-bezier(.2, .7, .2, 1) backwards; transition: transform 6s ease-out; }
  .js .hero:hover .hero-photo { transform: scale(1.035); }
  .js .hero .hero-copy > * { animation: kn-up .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  .js .hero .hero-copy > :nth-child(2) { animation-delay: .1s; }
  .js .hero .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .js .hero .hero-copy > :nth-child(4) { animation-delay: .3s; }
  .js .hero .hero-copy > :nth-child(5) { animation-delay: .4s; }
  .js .hero .hero-copy > :nth-child(n+6) { animation-delay: .5s; }
  .js .kn-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--kn-d, 0s); }
  .js .kn-reveal.kn-in { opacity: 1; transform: none; }
}
@keyframes kn-photo { from { opacity: 0; transform: scale(1.1); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes kn-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---- WebGL (/fx/kn-gl.js): ảnh lớn hiện bằng hiệu ứng tan hạt, hạt bay theo chủ đề tiệm ---- */
.js-gl .hero-photo:not(.kn-gl-ready) { opacity: 0; }
.js .hero-photo.kn-gl-ready { animation: kn-fade .9s ease both; transform: none !important; }
.kn-gl-photo { position: absolute; display: block; pointer-events: none; }
.kn-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147480000; }
@keyframes kn-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Tiêu đề hiện từng chữ, thanh tiến độ cuộn (demo.js) ---- */
.kn-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .26em .04em .22em; margin: -.26em -.04em -.22em; }
.kn-progress { position: fixed; left: 0; top: 0; z-index: 2147481500; width: 100%; height: 3px; background: #f5b301; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .kn-split .kn-wi { display: inline-block; transform: translateY(112%); transition: transform 1s cubic-bezier(.2, .75, .15, 1); transition-delay: calc(var(--i) * 45ms); }
  .js .kn-split.kn-words-in .kn-wi { transform: none; }
  .js .hero .hero-copy > .kn-split, .js .hero .kn-split { animation: none; }
}

/* ---- Chăm chút chữ chung cho mọi demo ----
   Tiêu đề chia dòng cân nhau (không để 1 chữ rơi xuống dòng cuối), đoạn văn tránh chữ mồ côi,
   chữ hiển thị mịn trên màn hình, và không cho trình duyệt tự làm đậm/nghiêng giả khi thiếu weight. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; }
:where(main, footer) :is(h1, h2, h3, blockquote) { text-wrap: balance; }
:where(main, footer) :is(p, li, dd, figcaption) { text-wrap: pretty; }
/* Giá tiền, số liệu: số đều hàng và cùng độ rộng để cột giá thẳng nhau (font có chữ số kiểu cổ vẫn đọc như số in) */
:where(main) :is([class*="price"], [class*="stat"], [class*="num"], td, .kn-num) { font-variant-numeric: lining-nums tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .p-photo, .room-photo, .sig-art, .project-photo { transition: none !important; transform: none !important; }
}