/* ===========================================================================
   site-showcase.css — ba khu minh hoạ: sơ đồ n8n (.nx), website mẫu (.ws, .sx),
   chatbot (.cx website, .px điện thoại Facebook, .tt điện thoại TikTok).
   Link SAU site.css. Animation chỉ dùng transform và opacity; tạm dừng khi
   khuất màn hình (JS gắn class .paused) và tôn trọng prefers-reduced-motion.
   =========================================================================== */

:root{
  --sx-frame:#0c0f0d;--sx-frame2:#121614;--sx-line:rgba(255,255,255,.08);--sx-line2:rgba(255,255,255,.14);
  --sx-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 60px 120px -30px rgba(0,0,0,.85),0 24px 48px -24px rgba(0,0,0,.6);
  --sx-ease:cubic-bezier(.22,.8,.26,1);
}

/* ---------- khung trình duyệt dùng chung ---------- */
.ws{position:relative;max-width:68rem;margin:0 auto;overflow:hidden;border-radius:14px;background:var(--sx-frame);border:1px solid var(--sx-line);box-shadow:var(--sx-shadow)}
.ws__bar{display:grid;grid-template-columns:1fr minmax(0,22rem) 1fr;align-items:center;gap:1rem;height:44px;padding:0 14px;background:var(--sx-frame2);border-bottom:1px solid var(--sx-line)}
.ws__dots{display:flex;gap:7px}
.ws__dots i{width:11px;height:11px;border-radius:50%;background:#2b322d;box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.ws__url{display:flex;align-items:center;justify-content:center;gap:.45rem;height:28px;border-radius:8px;background:#080a09;color:#9aa39c;font:400 12.5px/1 var(--font);letter-spacing:.01em}
.ws__url svg{width:11px;height:11px;fill:none;stroke:#6f7872;stroke-width:1.6}
.ws__tag{justify-self:end;font:400 12px/1 var(--font);color:#737c75;white-space:nowrap}
.ws__v{position:relative;height:36rem;overflow:hidden;container-type:inline-size;background:#000}
.ws__pg{position:relative;will-change:transform;--d:calc(-100% + 36rem);animation:ws-scroll var(--dur,30s) cubic-bezier(.5,0,.15,1) infinite}
.ws:hover .ws__pg,.ws.paused .ws__pg{animation-play-state:paused}
@keyframes ws-scroll{
  0%,9%{transform:translateY(0)}
  27%,34%{transform:translateY(calc(var(--d)*.34))}
  52%,59%{transform:translateY(calc(var(--d)*.67))}
  77%,90%{transform:translateY(var(--d))}
  100%{transform:translateY(0)}
}

/* ---------- trình bày kiểu studio: tiêu đề tách, từng ca có thẻ thông tin ---------- */
.sx__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s5);align-items:end;max-width:68rem;margin:0 auto var(--s6)}
.sx__head h2{text-align:left}
.sx__head>p{margin:0 0 .35rem;font-size:1.0625rem;line-height:1.6;color:var(--c-ink2)}
.sx{display:grid;gap:var(--s4);margin-top:var(--s7)}
.sx:first-of-type{margin-top:0}
.sx__meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s4) var(--s6);align-items:end;width:100%;max-width:68rem;margin:0 auto}
.sx__meta small{display:block;font:500 .8125rem/1 var(--font-m);letter-spacing:.06em;color:var(--c-ac)}
.sx__meta h3{margin-top:.625rem;font-size:clamp(1.625rem,1.3rem + 1.3vw,2.25rem);font-weight:600;letter-spacing:-.022em;line-height:1.1}
.sx__k{margin-top:.375rem;font-size:1rem;color:var(--c-ink2)}
.sx__d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1.25rem;margin:0;font-size:.9375rem;line-height:1.5}
.sx__d dt{color:var(--c-ink2)}
.sx__d dd{margin:0;color:var(--c-ink)}
.sx__sw{display:inline-flex;gap:.375rem;vertical-align:-2px}
.sx__sw i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.sx .ws{width:100%}
.sx__n{max-width:68rem;margin:var(--s4) auto 0;font-size:.8125rem;color:var(--c-ink2)}

/* ---------- trang mẫu: nền chung ---------- */
.mk{font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
.mk h4,.mk h5,.mk p,.mk figure,.mk small,.mk ul{margin:0}
.mk u{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:default}
.mk img{display:block;width:100%;height:100%;object-fit:cover}
.mk small{display:block}

/* ===== Nội thất: NHÀ SÁNG (kem, serif, ảnh trọn màn) ===== */
.hm{--p-bg:#f3efe7;--p-bg2:#e8e2d6;--p-ink:#1b1916;--p-mut:#7a736a;--p-ac:#24402f;--p-line:rgba(27,25,22,.12);background:var(--p-bg);color:var(--p-ink)}
.hm__nav{display:flex;align-items:center;gap:2rem;height:4.5rem;padding:0 3rem;border-bottom:1px solid var(--p-line)}
.hm__nav>b{margin-right:auto;font:500 26px/1 Playfair,Georgia,serif;letter-spacing:-.01em}
.hm__nav nav{display:flex;gap:1.75rem;font-size:13.5px;color:var(--p-mut)}
.hm__tools{display:flex;gap:1.5rem;margin-left:.75rem;font-size:13.5px}
.hm__hero{position:relative;height:30rem;overflow:hidden;background:var(--p-bg2)}
.hm__hero>img{position:absolute;inset:0;object-position:50% 62%}
.hm__card{position:absolute;left:3rem;bottom:0;max-width:27rem;padding:2rem 2.25rem 2.25rem;background:var(--p-bg)}
.hm__card small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-mut)}
.hm__card h4{margin-top:.875rem;font:500 clamp(2rem,4.6cqi,3.25rem)/1.05 Playfair,Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.hm__card p{margin-top:1rem;max-width:22rem;font-size:14.5px;line-height:1.6;color:var(--p-mut)}
.hm__card u{margin-top:1.5rem;height:44px;padding:0 1.375rem;background:var(--p-ac);color:#f3efe7;font-size:13.5px}
.hm__dot{position:absolute;z-index:2;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.3)}
.hm__dot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #fff;opacity:0;animation:hm-ring 2.6s ease-out infinite}
.hm__dot em{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);padding:.4rem .7rem;border-radius:4px;background:rgba(27,25,22,.86);color:#f3efe7;font:400 12px/1 var(--font);font-style:normal;white-space:nowrap}
.hm__dot em::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-4px;transform:rotate(45deg);background:rgba(27,25,22,.86)}
@keyframes hm-ring{0%{opacity:.9;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.5)}}
.hm__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;gap:2rem;height:7rem;padding:0 3rem;border-top:1px solid var(--p-line)}
.hm__strip article{display:flex;align-items:center;gap:1rem;min-width:0}
.hm__strip img{flex:none;width:4.25rem;height:4.25rem}
.hm__strip b{display:block;font:500 15.5px/1.2 Playfair,Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm__strip span{display:block;margin-top:.3rem;font-size:13px;color:var(--p-mut);font-variant-numeric:tabular-nums}
.hm__strip>u{font-size:13px;border-bottom:1px solid var(--p-ink);padding-bottom:2px}
.hm__say{padding:6.5rem 3rem 5.5rem;text-align:center}
.hm__say small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-mut)}
.hm__say p{margin:1.25rem auto 0;max-width:40rem;font:500 clamp(1.5rem,3.1cqi,2.25rem)/1.3 Playfair,Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
.hm__prod{padding:0 3rem 5.5rem}
.hm__pt{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--p-line)}
.hm__pt small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-mut)}
.hm__pt h4{margin-top:.625rem;font:500 32px/1.1 Playfair,Georgia,serif;letter-spacing:-.015em}
.hm__pt span{font-size:13.5px;border-bottom:1px solid var(--p-ink);padding-bottom:2px}
.hm__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:1.5rem 2rem;margin-top:2rem}
.hm__grid article{display:flex;flex-direction:column}
.hm__grid .hm__big{grid-row:1/3}
.hm__grid img{height:14rem}
.hm__grid .hm__big img{height:100%;min-height:30rem}
.hm__grid div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.875rem;font-size:14px}
.hm__grid b{font:500 16px/1.2 Playfair,Georgia,serif}
.hm__grid span{color:var(--p-mut);font-variant-numeric:tabular-nums}
.hm__show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--p-bg2)}
.hm__show img{height:28rem}
.hm__show>div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:3rem}
.hm__show small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-mut)}
.hm__show h4{margin-top:1rem;font:500 clamp(1.75rem,3.6cqi,2.5rem)/1.12 Playfair,Georgia,serif;letter-spacing:-.015em}
.hm__show p{margin-top:1rem;max-width:24rem;font-size:14.5px;line-height:1.65;color:var(--p-mut)}
.hm__show u{margin-top:1.75rem;height:44px;padding:0 1.375rem;background:var(--p-ink);color:#f3efe7;font-size:13.5px}
.hm__ft{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:2rem 3rem;font-size:13px;color:var(--p-mut)}
.hm__ft b{font:500 26px/1 Playfair,Georgia,serif;color:var(--p-ink)}
.hm__ft div{display:flex;gap:1.5rem}
.hm__ft small{justify-self:end;font-size:12px}

/* ===== Công nghệ: TRỤC (than, hổ phách, chữ mono) ===== */
.tr{--p-bg:#0a0b0d;--p-bg2:#111318;--p-ink:#f1f1ec;--p-mut:#8b8f96;--p-ac:#f2a93b;--p-line:rgba(241,241,236,.1);background:var(--p-bg);color:var(--p-ink)}
.tr__nav{display:flex;align-items:center;gap:2rem;height:4.25rem;padding:0 3rem;border-bottom:1px solid var(--p-line)}
.tr__nav>b{margin-right:auto;font:700 16px/1 var(--font-d);letter-spacing:.2em}
.tr__nav nav{display:flex;gap:1.75rem;font-size:13.5px;color:var(--p-mut)}
.tr__nav u{height:36px;padding:0 1rem;border:1px solid var(--p-ac);border-radius:2px;color:var(--p-ac);font:500 13px var(--font)}
.tr__hero{position:relative;height:34rem;overflow:hidden}
.tr__hero>img{position:absolute;inset:0;opacity:.85}
.tr__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,13,.95) 18%,rgba(10,11,13,.55) 55%,rgba(10,11,13,.25)),linear-gradient(180deg,rgba(10,11,13,.2),transparent 30%,rgba(10,11,13,.85))}
.tr__ht{position:absolute;z-index:2;left:3rem;bottom:3rem;max-width:38rem}
.tr__ht small{font:500 11.5px/1 var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--p-ac)}
.tr__ht h4{margin-top:1.25rem;font:600 clamp(2.25rem,4.7cqi,3.25rem)/1.04 var(--font-d);letter-spacing:-.035em;text-wrap:balance}
.tr__ht p{margin-top:1.25rem;max-width:28rem;font-size:15.5px;line-height:1.6;color:#c2c4c8}
.tr__cta{display:flex;gap:.75rem;margin-top:1.75rem}
.tr__cta u{height:44px;padding:0 1.25rem;border-radius:2px;background:var(--p-ac);color:#141005;font:500 14px var(--font)}
.tr__cta em{display:inline-flex;align-items:center;height:44px;padding:0 1.25rem;border:1px solid rgba(241,241,236,.3);border-radius:2px;font-style:normal;font-size:14px}
.tr__stat{position:absolute;z-index:2;right:3rem;bottom:3rem;width:19rem;padding:1.125rem 1.25rem 1.25rem;background:rgba(10,11,13,.7);border:1px solid var(--p-line);backdrop-filter:blur(10px)}
.tr__stat small{display:flex;justify-content:space-between;font:500 11px/1 var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--p-mut)}
.tr__stat small::after{content:"Trực tiếp";color:var(--p-ac)}
.tr__stat div{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--p-line);font-size:13px}
.tr__stat div:first-of-type{margin-top:.5rem}
.tr__stat div:last-child{border-bottom:0;padding-bottom:0}
.tr__stat span{color:#c2c4c8}
.tr__stat b{display:inline-flex;align-items:center;gap:.45rem;font:500 12px var(--font-m);color:var(--p-ink)}
.tr__stat b::before{content:"";width:7px;height:7px;border-radius:50%;background:#59d47c}
.tr__svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--p-line)}
.tr__svc article{padding:2.75rem 3rem 3rem;border-right:1px solid var(--p-line)}
.tr__svc article:last-child{border-right:0}
.tr__svc small{font:500 clamp(1.75rem,3cqi,2.5rem)/1 var(--font-d);letter-spacing:-.03em;color:var(--p-ac)}
.tr__svc h5{margin-top:1.75rem;font:600 19px/1.25 var(--font-d);letter-spacing:-.015em}
.tr__svc p{margin-top:.625rem;font-size:14px;line-height:1.6;color:var(--p-mut)}
.tr__say{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem;padding:5rem 3rem;border-bottom:1px solid var(--p-line)}
.tr__say h4{font:600 clamp(1.75rem,3.4cqi,2.5rem)/1.15 var(--font-d);letter-spacing:-.03em;text-wrap:balance}
.tr__say ul{list-style:none;padding:0}
.tr__say li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.875rem 0;border-top:1px solid var(--p-line);font-size:14.5px}
.tr__say li:last-child{border-bottom:1px solid var(--p-line)}
.tr__say li small{font:500 12px/1 var(--font-m);color:var(--p-ac)}
.tr__gal{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1rem;padding:3rem}
.tr__gal figure{position:relative;overflow:hidden;border:1px solid var(--p-line);background:var(--p-bg2)}
.tr__gal img{height:15rem;opacity:.9}
.tr__gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1rem .875rem;background:linear-gradient(180deg,transparent,rgba(10,11,13,.9));font:500 12px/1 var(--font-m);letter-spacing:.06em;color:#dadbd6}
.tr__cta2{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;margin:0 3rem 3rem;padding:2.5rem;border:1px solid rgba(242,169,59,.35);background:linear-gradient(135deg,rgba(242,169,59,.14),transparent 60%)}
.tr__cta2 h4{font:600 26px/1.15 var(--font-d);letter-spacing:-.025em}
.tr__cta2 p{margin-top:.5rem;font-size:14px;color:var(--p-mut)}
.tr__cta2 u{height:44px;padding:0 1.25rem;border-radius:2px;background:var(--p-ink);color:#0a0b0d;font:500 14px var(--font)}
.tr__ft{display:flex;align-items:center;gap:2rem;padding:1.5rem 3rem;border-top:1px solid var(--p-line);font-size:13px;color:var(--p-mut)}
.tr__ft b{margin-right:auto;font:700 13px/1 var(--font-d);letter-spacing:.2em;color:var(--p-ink)}
.tr__ft nav{display:flex;gap:1.5rem}

/* ===== Nghỉ dưỡng: HOÀNG HÔN (ấm, serif, đặt phòng) ===== */
.rs{--p-bg:#120f0d;--p-bg2:#1a1512;--p-ink:#f3e9dc;--p-mut:#a89b8a;--p-ac:#d9b382;--p-line:rgba(243,233,220,.12);background:var(--p-bg);color:var(--p-ink)}
.rs__hero{position:relative;height:36rem;overflow:hidden}
.rs__hero>img{position:absolute;inset:0}
.rs__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,13,.55),transparent 28%,transparent 45%,rgba(18,15,13,.92))}
.rs__nav{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;gap:2.25rem;padding:1.375rem 3rem}
.rs__nav>b{margin-right:auto;font:500 24px/1 Playfair,Georgia,serif;letter-spacing:.02em}
.rs__nav nav{display:flex;gap:1.75rem;font-size:13.5px;color:rgba(243,233,220,.82)}
.rs__nav u{height:38px;padding:0 1.125rem;border:1px solid rgba(243,233,220,.5);border-radius:2px;font-size:13px;letter-spacing:.04em}
.rs__ht{position:absolute;z-index:2;left:3rem;right:3rem;bottom:9.5rem}
.rs__ht small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--p-ac)}
.rs__ht h4{margin-top:1rem;max-width:30rem;font:500 clamp(2.5rem,6cqi,4.25rem)/1.02 Playfair,Georgia,serif;letter-spacing:-.015em;text-wrap:balance}
.rs__book{position:absolute;z-index:2;left:3rem;right:3rem;bottom:2.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;background:rgba(18,15,13,.72);border:1px solid var(--p-line);backdrop-filter:blur(10px)}
.rs__book label{padding:1rem 1.25rem;border-right:1px solid var(--p-line)}
.rs__book span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--p-mut)}
.rs__book b{display:block;margin-top:.3rem;font-size:14.5px;font-weight:500}
.rs__book u{align-self:stretch;padding:0 2rem;background:var(--p-ac);color:#1a1208;font-size:13.5px;font-weight:500;letter-spacing:.03em}
.rs__intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem;align-items:center;padding:6rem 3rem}
.rs__intro h4{font:500 clamp(1.75rem,3.6cqi,2.5rem)/1.2 Playfair,Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
.rs__intro p{font-size:15px;line-height:1.7;color:var(--p-mut)}
.rs__intro em{display:inline-block;margin-top:1.5rem;font-style:normal;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-ac);border-bottom:1px solid var(--p-ac);padding-bottom:3px}
.rs__rooms{padding:0 3rem 6rem}
.rs__rt{display:flex;align-items:end;justify-content:space-between;padding-bottom:1.5rem;border-bottom:1px solid var(--p-line)}
.rs__rt small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--p-ac)}
.rs__rt h4{margin-top:.75rem;font:500 32px/1.1 Playfair,Georgia,serif}
.rs__rt span{font-size:13px;color:var(--p-mut)}
.rs__rg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2rem}
.rs__rg img{height:17rem}
.rs__rg div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1rem;border-top:1px solid var(--p-line);margin-top:1rem}
.rs__rg b{font:500 18px/1.2 Playfair,Georgia,serif}
.rs__rg span{font-size:13px;color:var(--p-mut);white-space:nowrap}
.rs__band{position:relative;height:28rem;overflow:hidden}
.rs__band img{opacity:.78}
.rs__band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,13,.1),rgba(18,15,13,.75))}
.rs__band>div{position:absolute;z-index:2;left:0;right:0;bottom:3.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 3rem}
.rs__band small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--p-ac)}
.rs__band h4{margin-top:.75rem;font:500 clamp(1.75rem,3.6cqi,2.5rem)/1.12 Playfair,Georgia,serif}
.rs__band u{margin-top:1.5rem;height:42px;padding:0 1.5rem;border:1px solid rgba(243,233,220,.6);border-radius:2px;font-size:13px;letter-spacing:.06em}
.rs__ft{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:2.5rem 3rem;border-top:1px solid var(--p-line);font-size:13px;color:var(--p-mut)}
.rs__ft b{font:500 26px/1 Playfair,Georgia,serif;color:var(--p-ink)}
.rs__ft div{display:flex;gap:1.5rem}
.rs__ft>small{justify-self:end;font-size:12px}

/* ---------- trang mẫu trong khung hẹp (container query) ---------- */
@container (max-width: 44rem){
  .hm__nav,.tr__nav,.rs__nav{padding:0 1.25rem;gap:1rem}
  .hm__nav{height:3.75rem}.hm__nav>b{font-size:22px}
  .hm__nav nav,.tr__nav nav,.rs__nav nav,.hm__tools span:first-child{display:none}
  .hm__hero{height:22rem}
  .hm__card{left:1rem;right:1rem;bottom:1rem;max-width:none;padding:1.25rem 1.25rem 1.375rem}
  .hm__card h4{font-size:1.75rem}.hm__card p{font-size:13.5px}.hm__card u{margin-top:1rem;height:40px}
  .hm__dot{display:none}
  .hm__strip{grid-template-columns:1fr 1fr;height:auto;gap:1rem;padding:1rem 1.25rem}
  .hm__strip article:nth-child(3),.hm__strip>u{display:none}
  .hm__strip img{width:3.25rem;height:3.25rem}.hm__strip b{font-size:14px}
  .hm__say{padding:3rem 1.25rem}.hm__prod{padding:0 1.25rem 3rem}
  .hm__pt h4{font-size:24px}
  .hm__grid{grid-template-columns:minmax(0,1fr)}.hm__grid .hm__big{grid-row:auto}.hm__grid .hm__big img{min-height:0;height:16rem}
  .hm__show{grid-template-columns:minmax(0,1fr)}.hm__show img{height:16rem}.hm__show>div{padding:2rem 1.25rem}
  .hm__ft{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.5rem 1.25rem}.hm__ft small{justify-self:start}
  .tr__nav{height:3.75rem}
  .tr__hero{height:30rem}.tr__hero::after{background:linear-gradient(180deg,rgba(10,11,13,.3),rgba(10,11,13,.6) 40%,rgba(10,11,13,.95))}
  .tr__ht{left:1.25rem;right:1.25rem;bottom:1.5rem;max-width:none}
  .tr__ht h4{font-size:2rem}.tr__ht p{font-size:14px}
  .tr__cta{flex-wrap:wrap}.tr__stat{display:none}
  .tr__svc{grid-template-columns:minmax(0,1fr)}.tr__svc article{padding:1.75rem 1.25rem;border-right:0;border-bottom:1px solid var(--p-line)}.tr__svc article:last-child{border-bottom:0}
  .tr__say{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:2.5rem 1.25rem}
  .tr__gal{grid-template-columns:minmax(0,1fr);padding:1.25rem}.tr__gal img{height:11rem}
  .tr__cta2{grid-template-columns:minmax(0,1fr);margin:0 1.25rem 2rem;padding:1.5rem}
  .tr__ft{padding:1.25rem;flex-wrap:wrap;gap:.75rem 1.25rem}
  .rs__ht{left:1.25rem;right:1.25rem;bottom:15.5rem}
  .rs__ht h4{font-size:2.125rem}
  .rs__book{left:1.25rem;right:1.25rem;bottom:1.25rem;grid-template-columns:1fr 1fr}
  .rs__book label{padding:.75rem 1rem}.rs__book b{font-size:13.5px}
  .rs__book label:nth-child(3){grid-column:1/3;border-right:0;border-top:1px solid var(--p-line)}
  .rs__book u{grid-column:1/3;height:44px}
  .rs__intro{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:3rem 1.25rem}
  .rs__rooms{padding:0 1.25rem 3rem}.rs__rg{grid-template-columns:minmax(0,1fr)}.rs__rg img{height:14rem}
  .rs__band{height:20rem}
  .rs__ft{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.5rem 1.25rem}.rs__ft>small{justify-self:start}
}

/* ===========================================================================
   n8n: sơ đồ vận hành (.nx)
   =========================================================================== */
.nx{position:relative;overflow:hidden;border-radius:18px;background:var(--sx-frame);border:1px solid var(--sx-line);box-shadow:var(--sx-shadow)}
.nx__bar{display:flex;align-items:center;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--sx-line);background:var(--sx-frame2)}
.nx__bar>b{font:600 15px/1.2 var(--font-d);letter-spacing:-.01em}
.nx__bar>span{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;font-size:13px;color:#c5ccc6}
.nx__bar>span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-ac);box-shadow:0 0 12px rgba(180,249,111,.8);animation:nx-pulse 1.6s ease-in-out infinite}
.nx__bar>em{font-style:normal;font-size:12px;color:#737c75}
@keyframes nx-pulse{50%{opacity:.35}}
.nx__view{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:
  radial-gradient(60rem 28rem at 50% 0%,rgba(180,249,111,.06),transparent 60%),
  linear-gradient(180deg,#0a0d0b,#070908)}
.nx__view::-webkit-scrollbar{display:none}
.nx__cv{position:relative;width:1360px;height:470px;transform-origin:0 0}
.nx__grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask:radial-gradient(70% 90% at 50% 50%,#000 40%,transparent 100%);mask:radial-gradient(70% 90% at 50% 50%,#000 40%,transparent 100%);opacity:.55}
.nx__spot{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(180,249,111,.22),rgba(180,249,111,.06) 45%,transparent 72%);opacity:0;transition:transform .8s var(--sx-ease),opacity .6s;pointer-events:none}
.nx.run .nx__spot{opacity:1}
.nx__zone{position:absolute;top:14px;transform:translateX(-50%);font:500 12px/1 var(--font);letter-spacing:.02em;color:#8f998f;white-space:nowrap}
.nx__sep{position:absolute;top:40px;bottom:16px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 15%,rgba(255,255,255,.1) 85%,transparent)}
.nx__edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nx__edges .e0{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5}
.nx__edges .e1{fill:none;stroke:var(--c-ac);stroke-width:1.75;opacity:0;transition:opacity .4s}
.nx__edges .e1.err{stroke:#f08a74}
.nx__edges .e1.lit{opacity:.75}
.nx__edges .el{font:500 11.5px var(--font);fill:#9aa39c;text-anchor:middle;paint-order:stroke;stroke:#0a0d0b;stroke-width:6px;stroke-linejoin:round}
.nx__edges .el.err{fill:#f08a74}
.nx__pk{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#dfffbe;box-shadow:0 0 0 3px rgba(180,249,111,.25),0 0 18px 4px rgba(180,249,111,.7);opacity:0;offset-rotate:0deg;offset-distance:0%}
.nx__pk.go{animation:nx-go .62s cubic-bezier(.45,0,.3,1) forwards}
.nx__pk.err{background:#ffd1c5;box-shadow:0 0 0 3px rgba(240,138,116,.25),0 0 18px 4px rgba(240,138,116,.7)}
@keyframes nx-go{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.nx__nd{position:absolute;width:140px;margin-left:-70px;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(0);transition:transform .5s var(--sx-ease)}
.nx__tile{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:linear-gradient(180deg,#1b211c,#0f1411);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 18px 34px -14px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.4)}
.nx__nd.trg .nx__tile{border-radius:36px 18px 18px 36px}
.nx__tile img{width:34px;height:34px;object-fit:contain;opacity:.92;transition:opacity .3s,transform .4s var(--sx-ease)}
.nx__tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--c-ac);box-shadow:0 0 0 5px rgba(180,249,111,.12),0 0 34px 2px rgba(180,249,111,.45);opacity:0;transition:opacity .35s}
.nx__tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(180,249,111,.55);opacity:0;transition:opacity .45s}
.nx__nd.on .nx__tile::before{opacity:1}
.nx__nd.on .nx__tile img{transform:scale(1.08)}
.nx__nd.ok .nx__tile::after{opacity:1}
.nx__nd.on.err .nx__tile::before{border-color:#f08a74;box-shadow:0 0 0 5px rgba(240,138,116,.12),0 0 34px 2px rgba(240,138,116,.45)}
.nx__nd.ok.err .nx__tile::after{border-color:rgba(240,138,116,.6)}
.nx__ck{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c-ac);box-shadow:0 0 0 3px #0c0f0d;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--sx-ease)}
.nx__ck svg{width:11px;height:11px;fill:none;stroke:#0a1204;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nx__nd.ok .nx__ck{opacity:1;transform:scale(1)}
.nx__nd.err .nx__ck{background:#f08a74}
.nx__l{margin-top:.75rem;font:600 13px/1.25 var(--font);color:#eef2ee;text-wrap:balance}
.nx__s{margin-top:.2rem;font:400 11.5px/1.2 var(--font);color:#8f998f}
.nx__nd.on .nx__l{color:#fff}
.nx__foot{display:grid;grid-template-columns:minmax(0,1fr) 22rem;border-top:1px solid var(--sx-line);background:var(--sx-frame2)}
.nx__log{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--sx-line)}
.nx__lt{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.25rem .5rem;font-size:13px}
.nx__lt b{font-weight:600}
.nx__lt span{display:inline-flex;align-items:center;gap:.45rem;font-size:12px;color:#8f998f}
.nx__lt span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-ac);animation:nx-pulse 1.4s infinite}
.nx__ul{display:flex;flex-direction:column;justify-content:flex-end;height:10.5rem;padding:0 1.25rem .75rem;overflow:hidden}
.nx__ul li{display:grid;grid-template-columns:4.25rem 18px minmax(0,1fr);gap:.625rem;align-items:center;padding:.375rem 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px;line-height:1.35;animation:nx-in .4s var(--sx-ease)}
.nx__ul li:first-child{border-top:0}
.nx__ul time{color:#7f887f;font-variant-numeric:tabular-nums;font-size:12.5px}
.nx__ul img{width:18px;height:18px;object-fit:contain;opacity:.9}
.nx__ul span{color:#c8cfc8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx__ul li:last-child span{color:#dfffbe}
.nx__ul li.err span{color:#ffb5a3}
@keyframes nx-in{from{opacity:0;transform:translateY(10px)}}
.nx__run{display:flex;flex-direction:column;gap:.25rem;padding:.875rem 1.25rem 1rem}
.nx__run b{font-size:13px;font-weight:600}
.nx__step{margin-top:.375rem;font:600 clamp(1.5rem,1.2rem + .8vw,1.875rem)/1 var(--font-d);letter-spacing:-.02em}
.nx__step small{font:400 13px/1 var(--font);color:#8f998f;margin-left:.375rem}
.nx__now{min-height:2.6em;font-size:13px;line-height:1.3;color:#aab3aa}
.nx__next{display:flex;flex-direction:column;gap:.125rem;margin-top:.75rem;padding-top:.625rem;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;line-height:1.3;color:#8f998f}
.nx__next small{font-size:11.5px;color:#6f786f}
.nx__next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx__prog{position:relative;display:block;height:3px;margin-top:.5rem;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.nx__prog u{position:absolute;inset:0;background:var(--c-ac);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--sx-ease)}
.nx__swipe{display:none;padding:.5rem 1.25rem;font-size:12px;color:#737c75;text-align:center;border-top:1px solid var(--sx-line)}
@media (max-width:75rem){
  .nx__foot{grid-template-columns:minmax(0,1fr)}
  .nx__log{border-right:0;border-bottom:1px solid var(--sx-line)}
  .nx__ul{height:9rem}
  .nx__run{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.25rem 1rem}
  .nx__run b{flex:1 0 100%}
  .nx__now{min-height:0}
  .nx__next{display:none}
  .nx__prog{flex:1 0 100%;margin-top:.5rem}
  .nx__swipe{display:block}
}
@media (max-width:60rem){
  .nx{border-radius:12px}
  .nx__bar{flex-wrap:wrap;gap:.25rem .75rem}
  .nx__bar>b{flex:1 0 100%}
  .nx__bar>span{margin-left:0}
}

/* ===========================================================================
   Chatbot cảnh 1: website + khung chat (.cx)
   =========================================================================== */
.cx{max-width:68rem}
.cx__v{height:38rem;background:#f3efe7}
.cx__pg .hm__hero{height:26.5rem}
.cx__fab{position:absolute;right:1.5rem;bottom:1.5rem;z-index:3;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;background:#24402f;color:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25);transition:transform .35s var(--sx-ease),opacity .3s;cursor:default}
.cx__fab svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx__fab.press{transform:scale(.9)}
.cx__fab.gone{opacity:0;transform:scale(.6);pointer-events:none}
.cx__fab::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(36,64,47,.45);opacity:0;animation:cx-ring 2.4s ease-out infinite}
.cx__fab.gone::after,.paused .cx__fab::after{animation:none}
@keyframes cx-ring{0%{opacity:.8;transform:scale(.85)}70%,100%{opacity:0;transform:scale(1.35)}}
.cx__pan{position:absolute;right:1.5rem;bottom:1.5rem;z-index:4;display:flex;flex-direction:column;width:22.5rem;height:31rem;overflow:hidden;border-radius:18px;background:#fff;color:#1b1916;box-shadow:0 40px 90px -20px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);transform:translateY(14px) scale(.92);transform-origin:100% 100%;opacity:0;transition:transform .45s var(--sx-ease),opacity .3s}
.cx__pan.on{transform:none;opacity:1}
.cx__hd{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:#24402f;color:#fff}
.cx__hd i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:500 16px/1 Playfair,Georgia,serif;font-style:normal}
.cx__hd b{display:block;font-size:14.5px;font-weight:600;line-height:1.2}
.cx__hd span{display:inline-flex;align-items:center;gap:.4rem;margin-top:.1rem;font-size:12px;color:rgba(255,255,255,.72)}
.cx__hd span::before{content:"";width:6px;height:6px;border-radius:50%;background:#7fe08f}
.cx__hd em{margin-left:auto;width:14px;height:2px;border-radius:1px;background:rgba(255,255,255,.65)}
.cx__lv{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:1rem;overflow:hidden;background:#f7f5f0}
.cx__lv::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:2rem;background:linear-gradient(180deg,#f7f5f0,rgba(247,245,240,0));pointer-events:none}
.cx__m{flex:none;max-width:84%;padding:.625rem .875rem;border-radius:14px;font-size:13.5px;line-height:1.45;animation:cx-m .35s var(--sx-ease)}
.cx__m.k{align-self:flex-end;background:#24402f;color:#f3efe7;border-bottom-right-radius:4px}
.cx__m.b{align-self:flex-start;background:#fff;color:#1b1916;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(27,25,22,.06)}
.cx__m.t{display:flex;gap:4px;padding:.75rem .875rem}
.cx__m.t i{width:6px;height:6px;border-radius:50%;background:#a39d94;animation:cx-dot 1.1s ease-in-out infinite}
.cx__m.t i:nth-child(2){animation-delay:.15s}.cx__m.t i:nth-child(3){animation-delay:.3s}
@keyframes cx-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes cx-m{from{opacity:0;transform:translateY(10px) scale(.97)}}
.cx__qr{display:flex;flex-wrap:wrap;gap:.375rem;flex:none;animation:cx-m .35s var(--sx-ease)}
.cx__qr span{padding:.45rem .8rem;border:1px solid #24402f;border-radius:999px;background:#fff;color:#24402f;font-size:12.5px;line-height:1;transition:transform .2s var(--sx-ease),background .2s,color .2s}
.cx__qr span.press{transform:scale(.94)}
.cx__qr span.pick{background:#24402f;color:#fff}
.cx__cards{display:flex;gap:.5rem;flex:none;width:100%;animation:cx-m .4s var(--sx-ease)}
.cx__card{flex:none;width:11.25rem;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(27,25,22,.06)}
.cx__card img{width:100%;height:6.25rem;object-fit:cover}
.cx__card div{padding:.625rem .75rem .75rem}
.cx__card b{display:block;font:500 14px/1.2 Playfair,Georgia,serif}
.cx__card span{display:block;margin-top:.2rem;font-size:12.5px;color:#7a736a;font-variant-numeric:tabular-nums}
.cx__card u{display:flex;margin-top:.55rem;height:28px;border:1px solid #24402f;border-radius:7px;color:#24402f;font-size:12px;text-decoration:none}
.cx__in{display:flex;align-items:center;gap:.5rem;margin:.75rem;padding:.5rem .5rem .5rem 1rem;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(27,25,22,.1)}
.cx__in>span{flex:1;min-width:0;font-size:13.5px;color:#1b1916;white-space:nowrap;overflow:hidden}
.cx__in>span:empty::before{content:attr(data-ph);color:#a39d94}
.cx__in>span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#1b1916;opacity:0}
.cx__in.typing>span::after{animation:cx-caret 1s steps(1) infinite}
@keyframes cx-caret{50%{opacity:1}}
.cx__in b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#24402f;transition:transform .2s var(--sx-ease)}
.cx__in b.press{transform:scale(.85)}
.cx__in b svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx__cur{position:absolute;left:0;top:0;z-index:6;width:22px;height:22px;transform:translate(60%,70%);transition:transform 1.1s cubic-bezier(.3,.05,.15,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));pointer-events:none}
.cx__cur svg{width:100%;height:100%}
.cx__cur.hide{opacity:0}
.cx__cur.dn svg{transform:scale(.88);transform-origin:0 0}
.cx__rip{position:absolute;z-index:5;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid rgba(36,64,47,.6);opacity:0;pointer-events:none}
.cx__rip.on{animation:cx-rip .55s ease-out}
@keyframes cx-rip{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.3)}}
.cx__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);max-width:68rem;margin:var(--s5) auto 0;padding:0;list-style:none;counter-reset:c}
.cx__steps li{counter-increment:c;display:flex;align-items:flex-start;gap:.75rem;padding-top:var(--s3);border-top:1px solid var(--c-line);color:var(--c-ink2);font-size:.9375rem;line-height:1.5;transition:color .3s var(--ease),border-color .3s var(--ease)}
.cx__steps li::before{content:counter(c);display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--c-2);color:var(--c-ink2);font-size:.8125rem;font-weight:600;transition:background .3s,color .3s}
.cx__steps li.on{color:var(--c-ink);border-top-color:var(--c-ac)}
.cx__steps li.on::before{background:var(--c-ac);color:var(--c-acink)}
.cx__n{display:block;max-width:68rem;margin:var(--s3) auto 0}

/* ===========================================================================
   Chatbot cảnh 2: điện thoại (.px) với hai ứng dụng: Facebook (.pf) và TikTok (.tt)
   =========================================================================== */
.ph2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center}
.ph2__seg{margin-top:var(--s4)}
.ph2 .stp{margin-top:var(--s3)}
.px{position:relative;width:19.25rem;padding:10px;border-radius:3.6rem;background:linear-gradient(160deg,#5a5c60,#232426 30%,#1b1c1e 60%,#4a4c50);box-shadow:0 0 0 1px #000,0 0 0 2px rgba(255,255,255,.06) inset,0 60px 120px -30px rgba(0,0,0,.9),0 30px 60px -30px rgba(0,0,0,.7)}
.px::before,.px::after{content:"";position:absolute;width:3px;border-radius:2px;background:#3c3d41;box-shadow:1px 0 0 rgba(255,255,255,.06) inset}
.px::before{left:-3px;top:7.5rem;height:3.25rem;box-shadow:0 4.5rem 0 #3c3d41}
.px::after{right:-3px;top:9rem;height:5.5rem}
.px__sc{position:relative;height:40rem;overflow:hidden;border-radius:2.9rem;background:#fff;color:#14191f;isolation:isolate;box-shadow:0 0 0 1.5px #000 inset}
.px__isl{position:absolute;z-index:9;top:.75rem;left:50%;width:7rem;height:2rem;margin-left:-3.5rem;border-radius:1rem;background:#000}
.px__st{position:absolute;z-index:8;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;height:3.25rem;padding:.25rem 1.75rem 0;font:600 14px/1 var(--font);color:#14191f;pointer-events:none;transition:color .3s}
.px__sig{display:flex;align-items:flex-end;gap:2px;height:11px}
.px__sig i{width:3px;border-radius:1px;background:currentColor}
.px__sig i:nth-child(1){height:4px}.px__sig i:nth-child(2){height:6px}.px__sig i:nth-child(3){height:8px}.px__sig i:nth-child(4){height:11px}
.px__bat{position:relative;width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;opacity:.9}
.px__bat::before{content:"";position:absolute;inset:1.5px;right:3px;border-radius:1.5px;background:currentColor}
.px__bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:0 1px 1px 0;background:currentColor;opacity:.5}
.px__home{position:absolute;z-index:9;left:50%;bottom:.5rem;width:8.5rem;height:5px;margin-left:-4.25rem;border-radius:3px;background:rgba(0,0,0,.85)}
.px[data-app=tt] .px__st{color:#fff}
.px[data-app=tt] .px__home{background:rgba(255,255,255,.85)}
.px__app{position:absolute;inset:0}
.px__app[hidden]{display:none}
.px__tap{position:absolute;z-index:7;width:2.5rem;height:2.5rem;margin:-1.25rem;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.3);opacity:0;pointer-events:none}
.px__tap.on{animation:px-tap .7s var(--sx-ease)}
@keyframes px-tap{0%{opacity:0;transform:scale(1.4)}35%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(.7)}}
.px__fing{position:absolute;z-index:7;left:0;top:0;width:2.25rem;height:2.25rem;margin:-1.125rem;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:0 0 0 2px rgba(255,255,255,.5),0 4px 14px rgba(0,0,0,.35);opacity:0;transition:transform .85s cubic-bezier(.3,.7,.2,1),opacity .25s;pointer-events:none}
.px__fing.on{opacity:1}
.px__dim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;transition:opacity .5s;pointer-events:none}
.px__dim.on{opacity:.18}

/* ---- Facebook: bảng tin + tin nhắn ---- */
.px__feed{position:absolute;inset:0;display:flex;flex-direction:column;background:#f0f2f5}
.pf__top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:3.5rem 1rem .5rem;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.pf__top b{font:700 25px/1 var(--font-d);letter-spacing:-.04em;color:#1877f2}
.pf__top span{display:flex;gap:.5rem}
.pf__top span i{display:block;width:34px;height:34px;border-radius:50%;background:#e4e6eb}
.pf__list{flex:1;overflow:hidden}
.pf__scroll{will-change:transform}
.pf__stories{display:flex;gap:.5rem;padding:.625rem .75rem;background:#fff;border-bottom:8px solid #e4e6eb}
.pf__stories i{flex:none;width:4.5rem;height:7rem;border-radius:12px;background:linear-gradient(180deg,#c9d4e2,#8f9fb5);position:relative;overflow:hidden}
.pf__stories i img{opacity:.9}
.pf__stories i::after{content:"";position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:50%;background:#dbe3ee;box-shadow:0 0 0 3px #1877f2}
.pf__post{margin-top:0;background:#fff;border-bottom:8px solid #e4e6eb}
.pf__who{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem .25rem}
.pf__who>i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;font:600 15px/1 var(--font);font-style:normal}
.pf__who b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.pf__who small{display:block;font-size:12px;color:#65676b}
.pf__who em{margin-left:auto;font-style:normal;color:#65676b;letter-spacing:1px;font-weight:700}
.pf__post p{padding:.375rem 1rem .625rem;font-size:14px;line-height:1.4}
.pf__post img{display:block;width:100%;height:14rem;object-fit:cover}
.pf__cta{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#f0f2f5}
.pf__cta b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.pf__cta span{display:block;font-size:12.5px;color:#65676b;margin-top:.125rem}
.pf__cta u{flex:none;padding:.5rem .875rem;border-radius:6px;background:#e4e6eb;color:#050505;font-size:13.5px;font-weight:600;text-decoration:none;transition:transform .2s var(--sx-ease)}
.pf__cta u.press{transform:scale(.94)}
.pf__act{display:flex;justify-content:space-around;padding:.5rem .5rem;border-top:1px solid #e4e6eb;font-size:13px;color:#65676b;font-weight:500}
.px__ms{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;background:#fff;transform:translateX(100%);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.px__ms.on{transform:none}
.px__hd{position:relative;z-index:2;display:flex;align-items:center;gap:.625rem;padding:3.5rem 1rem .625rem;background:#fff;border-bottom:1px solid #eceef1}
/* than tin nhan (danh sach + o nhap) truot len khi ban phim hien, ban phim la lop phu o day */
.px__body{flex:1;display:flex;flex-direction:column;min-height:0;transition:transform .4s cubic-bezier(.32,.72,0,1)}
.kb .px__body{transform:translateY(-13.3rem)}
.px__hd em{width:10px;height:10px;border-left:2.5px solid #0a7cff;border-bottom:2.5px solid #0a7cff;transform:rotate(45deg);margin:0 .25rem 0 0}
.px__hd i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#24402f;color:#fff;font:500 16px/1 Playfair,Georgia,serif;font-style:normal;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #31c653}
.px__hd b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.px__hd span{display:block;font-size:12px;color:#65676b}
.px__lv{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.375rem;padding:.75rem .75rem;overflow:hidden}
.px__m{flex:none;max-width:80%;padding:.5rem .75rem;border-radius:18px;font-size:14px;line-height:1.35;animation:cx-m .3s var(--sx-ease)}
.px__m.k{align-self:flex-end;background:linear-gradient(180deg,#0a8cff,#0a6cf0);color:#fff;border-bottom-right-radius:5px}
.px__m.b{align-self:flex-start;background:#f0f1f4;color:#050505;border-bottom-left-radius:5px}
.px__m.t{display:flex;gap:4px;padding:.7rem .75rem}
.px__m.t i{width:6px;height:6px;border-radius:50%;background:#8a97a6;animation:cx-dot 1.1s ease-in-out infinite}
.px__m.t i:nth-child(2){animation-delay:.15s}.px__m.t i:nth-child(3){animation-delay:.3s}
.px__order{flex:none;align-self:flex-start;width:86%;padding:.75rem .875rem;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05);font-size:13px;animation:cx-m .4s var(--sx-ease)}
.px__order span{display:inline-flex;align-items:center;gap:.375rem;color:#0d9a52;font-weight:600;font-size:12.5px}
.px__order span::before{content:"";width:7px;height:7px;border-radius:50%;background:#0d9a52}
.px__order b{display:block;margin-top:.25rem;font-size:14.5px;font-weight:600}
.px__order p{margin:.125rem 0 0;color:#65676b}
.px__in{display:flex;align-items:center;gap:.5rem;margin:.25rem .75rem .5rem;padding:.4375rem .4375rem .4375rem .875rem;border-radius:999px;background:#f0f2f5;font-size:14px}
.px__in>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;color:#050505}
.px__in>span:empty::before{content:"Aa";color:#8a97a6}
.px__in>span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#0a7cff;opacity:0}
.px__in.typing>span::after{animation:cx-caret 1s steps(1) infinite}
.px__in b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0a7cff;transition:transform .2s var(--sx-ease)}
.px__in b.press{transform:scale(.85)}
.px__in b svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.px__kb{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;gap:.4rem;padding:.5rem .25rem 2rem;background:#d1d4da;transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1)}
.px__kb.on{transform:none}
.px__kb div{display:flex;justify-content:center;gap:.25rem}
.px__kb i{display:grid;place-items:center;width:1.45rem;height:2.4rem;border-radius:5px;background:#fff;box-shadow:0 1px 0 #898b8f;font:400 14px/1 var(--font);font-style:normal;color:#000;transition:transform .12s var(--sx-ease)}
.px__kb i.hit{transform:scale(1.15) translateY(-2px);background:#f0f2f5}
.px__kb .px__wide{width:2.1rem;background:#acb3bd;font-size:11px}
.px__kb .px__space{width:9.25rem}
.px__kb--dark{background:#1c1c1e}
.px__kb--dark i{background:#48484a;color:#fff;box-shadow:0 1px 0 #000}
.px__kb--dark i.hit{background:#636366}
.px__kb--dark .px__wide{background:#2c2c2e}

/* ---- TikTok: 5 video dọc, 4 tình huống luân phiên (nội thất, thời trang, cà phê live, spa) ---- */
.ph2__k{margin:var(--s4) 0 0;font:500 .75rem/1.4 var(--font-m);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink2)}
.ph2__k+.stp{margin-top:var(--s2)}
.tt{position:absolute;inset:0;overflow:hidden;background:#000;color:#fff}
.tt__feed{position:absolute;left:0;right:0;top:0;height:500%;will-change:transform;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.tt__vid{position:relative;height:calc(100%/5);overflow:hidden}
.tt__vid>img,.tt__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;animation:tt-kb 14s ease-in-out infinite alternate;animation-play-state:paused}
.tt__vid.live>img,.tt__vid.live>.tt__bg{animation-play-state:running}
.paused .tt__vid>img,.paused .tt__bg{animation-play-state:paused!important}
@keyframes tt-kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.18) translate(-2.5%,1.5%)}}
.tt__vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 24%,transparent 50%,rgba(0,0,0,.86));pointer-events:none}
.tt__vid.lv::after{background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 42%,rgba(0,0,0,.9))}
/* nền CSS cho video thời trang: phông studio ấm, ba tấm vải treo */
.tt__bg--may{background:radial-gradient(60% 45% at 28% 18%,rgba(255,240,220,.55),transparent 70%),radial-gradient(55% 45% at 80% 90%,rgba(40,18,10,.7),transparent 70%),linear-gradient(165deg,#d6c0a8 0%,#a9846a 48%,#4e362c 100%)}
.tt__bg--may::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.tt__bg--may>i{position:absolute;top:19%;width:27%;height:46%;border-radius:10px 10px 14px 14px;background:linear-gradient(180deg,#f5ece0,#d9c7b2);box-shadow:0 22px 44px -10px rgba(30,14,8,.75),0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.08) inset}
.tt__bg--may>i::before{content:"";position:absolute;left:50%;top:-7%;width:2px;height:8%;margin-left:-1px;background:#2a1c16}
.tt__bg--may>i::after{content:"";position:absolute;left:14%;right:14%;top:0;height:9%;border-radius:0 0 40% 40%;background:rgba(80,50,35,.18)}
.tt__bg--may>i:nth-child(1){left:9%;transform:rotate(-4deg);background:linear-gradient(180deg,#f3e4d2,#d8bfa3)}
.tt__bg--may>i:nth-child(2){left:37%;top:16%;height:50%;background:linear-gradient(180deg,#ece7e1,#c9c0b6)}
.tt__bg--may>i:nth-child(3){left:65%;transform:rotate(4deg);background:linear-gradient(180deg,#c9b69d,#8d7058)}
.tt__bg--may>em{position:absolute;left:0;right:0;top:15%;text-align:center;font:600 11px/1 var(--font-m);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,240,225,.8)}
.tt__sw{display:block;flex:none;width:30px;height:30px;border-radius:5px;position:relative;overflow:hidden}
.tt__sw>i{display:none}
/* phụ đề tự động giữa video, ba dòng lần lượt */
.tt__sub{position:absolute;z-index:2;left:1.25rem;right:4.5rem;top:37%;height:2.5rem;pointer-events:none}
.tt__sub i{position:absolute;left:0;top:0;max-width:100%;padding:.3rem .55rem;border-radius:6px;background:rgba(0,0,0,.55);font-size:12.5px;font-weight:600;line-height:1.3;opacity:0}
.tt__vid.live .tt__sub i{animation:tt-sub 13.5s ease-in-out infinite}
.tt__vid.live .tt__sub i:nth-child(2){animation-delay:4.5s}.tt__vid.live .tt__sub i:nth-child(3){animation-delay:9s}
.paused .tt__sub i{animation-play-state:paused}
@keyframes tt-sub{0%{opacity:0;transform:translateY(6px)}4%,29%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-4px)}}
/* thanh tiến độ video, chạy khi video đang phát */
.tt__prog{position:absolute;z-index:2;left:0;right:0;bottom:5rem;height:2px;background:rgba(255,255,255,.22)}
.tt__prog u{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.tt__vid.live .tt__prog u{animation:tt-prog 15s linear infinite}
.paused .tt__prog u{animation-play-state:paused}
@keyframes tt-prog{to{transform:scaleX(1)}}
/* cột tương tác bên phải */
.tt__rail{position:absolute;z-index:2;right:.5rem;bottom:6.75rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.tt__rail>div{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:12px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;transition:transform .2s var(--sx-ease)}
.tt__rail>div.press{transform:scale(.88)}
.tt__rail svg{width:30px;height:30px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.tt__rail>div.hot svg{fill:#ff3b5c}
.tt__av{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:.5rem;border:1.5px solid #fff;border-radius:50%;color:#fff;font:500 18px/1 Playfair,Georgia,serif;font-style:normal;transition:transform .2s var(--sx-ease)}
.tt__av.press{transform:scale(.9)}
.tt__av::after{content:"+";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#ff3b5c;color:#fff;font:700 13px/18px var(--font);text-align:center;transition:opacity .3s}
.tt__av.fl::after{content:"✓";background:#fff;color:#ff3b5c;font-size:11px;animation:tt-pop .45s var(--sx-ease)}
@keyframes tt-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:none}}
.tt__disc{width:40px;height:40px;border-radius:50%;background:conic-gradient(#3a3a3a,#111 25%,#3a3a3a 50%,#111 75%,#3a3a3a);border:7px solid #161616;box-shadow:0 0 0 1px rgba(255,255,255,.1);animation:tt-spin 4s linear infinite}
.paused .tt__disc,.tt__vid:not(.live) .tt__disc{animation-play-state:paused}
@keyframes tt-spin{to{transform:rotate(360deg)}}
/* tim lớn khi chạm đúp */
.tt__big{position:absolute;z-index:4;left:50%;top:46%;width:84px;height:84px;margin:-42px;opacity:0;background:#ff3b5c;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.3 4.5 6.9 4.5c2 0 3.5 1.1 5.1 3 1.6-1.9 3.1-3 5.1-3 3.6 0 5.9 3.5 4.4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.3 4.5 6.9 4.5c2 0 3.5 1.1 5.1 3 1.6-1.9 3.1-3 5.1-3 3.6 0 5.9 3.5 4.4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat}
.tt__big.on{animation:tt-big 1s var(--sx-ease)}
@keyframes tt-big{0%{opacity:0;transform:scale(.3) rotate(-12deg)}25%{opacity:1;transform:scale(1.1) rotate(0)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3) translateY(-20px)}}
/* chú thích, nhạc, thẻ sản phẩm */
.tt__meta{position:absolute;z-index:2;left:.875rem;right:4.25rem;bottom:5.75rem}
.tt__meta b{display:block;font-size:15px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tt__meta p{margin-top:.3rem;font-size:13.5px;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tt__tag{display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.4rem;padding:.2rem .5rem .2rem .4rem;border-radius:4px;background:rgba(255,255,255,.18);font-size:11px;font-weight:600;backdrop-filter:blur(6px)}
.tt__tag svg{width:12px;height:12px}
.tt__ad{display:inline-block;margin:.2rem 0 0;padding:.1rem .4rem;border-radius:3px;background:rgba(255,255,255,.22);font-size:10.5px;font-weight:600;letter-spacing:.02em}
.tt__music{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt__music svg{flex:none;width:12px;height:12px;fill:#fff}
.tt__shop,.tt__cta{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.35rem .5rem .35rem .35rem;border-radius:8px;background:rgba(255,255,255,.96);color:#111;transform:translateY(10px);opacity:0;transition:transform .5s var(--sx-ease),opacity .4s}
.tt__shop{display:inline-flex}
.tt__shop.on,.tt__cta.on{transform:none;opacity:1}
.tt__shop.press,.tt__cta.press{transform:scale(.96)}
.tt__shop img,.tt__cta img{width:30px;height:30px;border-radius:5px;object-fit:cover}
.tt__shop b,.tt__cta b{display:block;font-size:12.5px;font-weight:600;text-shadow:none}
.tt__shop span,.tt__cta span{display:block;font-size:11.5px;color:#666;font-variant-numeric:tabular-nums}
.tt__shop u,.tt__cta u{flex:none;margin-left:.25rem;padding:.3rem .6rem;border-radius:5px;background:#111;color:#fff;font-size:11.5px;font-weight:600}
.tt__cta{margin-right:-3.25rem;background:#fff}
.tt__cta>div{flex:1;min-width:0}
.tt__cta u{background:#ff3b5c}
/* tim bay lên */
.tt__hearts{position:absolute;z-index:2;right:1.3rem;bottom:13rem;pointer-events:none}
.tt__hearts i{position:absolute;left:0;bottom:0;width:18px;height:18px;opacity:0;background:#ff3b5c;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.3 4.5 6.9 4.5c2 0 3.5 1.1 5.1 3 1.6-1.9 3.1-3 5.1-3 3.6 0 5.9 3.5 4.4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.3 4.5 6.9 4.5c2 0 3.5 1.1 5.1 3 1.6-1.9 3.1-3 5.1-3 3.6 0 5.9 3.5 4.4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat}
.tt__vid.live .tt__hearts i{animation:tt-float 2.6s ease-out infinite}
.paused .tt__hearts i{animation-play-state:paused}
@keyframes tt-float{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-150px) scale(1.15)}}
/* livestream: đầu phòng live, bình luận trôi, sản phẩm ghim, ô bình luận */
.tt__vid.lv .tt__hearts{right:1rem;bottom:5.5rem}
.tt__lvtop{position:absolute;z-index:3;left:.75rem;top:3.5rem;display:flex;align-items:center;gap:.5rem;padding:.3rem .35rem;border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);transition:transform .2s var(--sx-ease)}
.tt__lvtop.press{transform:scale(.96)}
.tt__lvtop>i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font:500 14px/1 Playfair,Georgia,serif;font-style:normal}
.tt__lvtop b{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.tt__lvtop small{display:block;font-size:10.5px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.tt__lvtop u{padding:.35rem .7rem;border-radius:999px;background:#ff3b5c;font-size:11.5px;font-weight:600}
.tt__lvtop em{position:absolute;left:0;top:100%;margin-top:.4rem;padding:.15rem .45rem;border-radius:3px;background:#ff3b5c;font:700 10px/1.3 var(--font);font-style:normal;letter-spacing:.06em}
.tt__lc{position:absolute;z-index:2;left:.75rem;right:4.25rem;bottom:9.75rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;height:7.5rem;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.tt__lc p{display:flex;align-items:flex-start;gap:.4rem;font-size:12.5px;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.6);animation:cx-m .35s var(--sx-ease)}
.tt__lc p i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:600 10px/1 var(--font);font-style:normal}
.tt__lc p b{color:rgba(255,255,255,.7);font-weight:600;margin-right:.25rem}
.tt__pin{position:absolute;z-index:2;left:.75rem;right:4.25rem;bottom:4.75rem;display:flex;align-items:center;gap:.5rem;padding:.4rem;border-radius:10px;background:rgba(255,255,255,.96);color:#111}
.tt__pin img{flex:none;width:40px;height:40px;border-radius:6px;object-fit:cover}
.tt__pin>div{flex:1;min-width:0}
.tt__pin small{display:block;font-size:10px;color:#c9892f;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tt__pin b{display:block;font-size:11.5px;font-weight:600;line-height:1.2}
.tt__pin span{display:block;font-size:12px;font-weight:700;color:#e0273f;font-variant-numeric:tabular-nums}
.tt__pin u{flex:none;padding:.35rem .65rem;border-radius:6px;background:#ff3b5c;color:#fff;font-size:11.5px;font-weight:600}
.tt__lin{position:absolute;z-index:2;left:.75rem;right:.75rem;bottom:1.5rem;display:flex;align-items:center;gap:.5rem}
.tt__lin span{flex:1;padding:.55rem .875rem;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;color:rgba(255,255,255,.75)}
.tt__lin i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16)}
.tt__lin svg{width:18px;height:18px;fill:#fff}
/* thanh trên, thanh dưới; ẩn khi đang xem live */
.tt__top{position:absolute;z-index:3;left:0;right:0;top:3.4rem;display:flex;justify-content:center;align-items:center;gap:.875rem;padding:0 2.75rem;font-size:13.5px;white-space:nowrap;font-weight:600;color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.5);transition:opacity .35s,transform .35s}
.tt__top b{position:relative;color:#fff}
.tt__top b::after{content:"";position:absolute;left:25%;right:25%;bottom:-6px;height:2px;border-radius:1px;background:#fff}
.tt__top em{position:absolute;left:1rem;font:700 11px/1 var(--font);font-style:normal;letter-spacing:.06em;color:#fff}
.tt__top svg{position:absolute;right:1rem;width:20px;height:20px;color:#fff}
.tt.onlive .tt__top{opacity:0;transform:translateY(-6px)}
.tt__bar{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:5rem;padding:.5rem .5rem 1.5rem;background:#000;border-top:1px solid rgba(255,255,255,.08);transition:transform .45s cubic-bezier(.32,.72,0,1)}
.tt.onlive .tt__bar{transform:translateY(100%)}
.tt__bar span{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:10px;color:rgba(255,255,255,.65)}
.tt__bar span.on{color:#fff}
.tt__bar svg{width:22px;height:22px;fill:currentColor}
.tt__inbox::after{content:"2";position:absolute;left:50%;top:-4px;margin-left:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#ff3b5c;color:#fff;font:700 10px/16px var(--font);text-align:center}
.tt__plus{position:relative;justify-self:center;width:40px;height:26px;border-radius:8px;background:#fff;box-shadow:-4px 0 0 #39d7df,4px 0 0 #ff3b5c}
.tt__plus::before,.tt__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:1px;background:#000}
.tt__plus::after{transform:rotate(90deg)}
/* tấm trượt dưới: sản phẩm, bình luận, hồ sơ shop (nội dung do JS đổ theo tình huống) */
.tt__sheet{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:1.5rem 1rem 2.5rem;border-radius:18px 18px 0 0;background:#171717;transform:translateY(100%);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.tt__sheet.on{transform:none}
.tt.kb .tt__sheet.cm.on{transform:translateY(-13.3rem)}
.tt__sheet::before{content:"";position:absolute;left:50%;top:.5rem;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(255,255,255,.3)}
.tt__sp{display:flex;gap:.75rem;align-items:flex-start}
.tt__sp img,.tt__sp .tt__sw{flex:none;width:4.5rem;height:4.5rem;border-radius:8px}
.tt__sp b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.tt__sp span{display:block;margin-top:.2rem;font-size:15px;font-weight:700;color:#ffb3bf;font-variant-numeric:tabular-nums}
.tt__sp small{display:block;margin-top:.3rem;font-size:12px;line-height:1.4;color:rgba(255,255,255,.6)}
.tt__sb{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}
.tt__sb u{display:grid;place-items:center;height:42px;border-radius:6px;border:1px solid rgba(255,255,255,.28);font-size:13.5px;font-weight:600;transition:transform .2s var(--sx-ease)}
.tt__sb u.buy{border:0;background:#ff3b5c;color:#fff}
.tt__sb u.press{transform:scale(.96)}
/* tấm bình luận */
.tt__sheet.cm{padding:1.25rem 0 1.25rem}
.tt__ch{padding:.25rem 1rem .75rem;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.tt__cl{display:flex;flex-direction:column;gap:.75rem;height:12.5rem;padding:0 1rem;overflow:hidden;justify-content:flex-end}
.tt__cl p{display:flex;gap:.6rem;align-items:flex-start;font-size:13px;line-height:1.35;animation:cx-m .35s var(--sx-ease)}
.tt__cl p>i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#444;color:#fff;font:600 12px/1 var(--font);font-style:normal}
.tt__cl p>div{flex:1;min-width:0}
.tt__cl b{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.6)}
.tt__cl b em{margin-left:.35rem;padding:.05rem .35rem;border-radius:3px;background:rgba(255,59,92,.2);color:#ff6b86;font-style:normal;font-size:10.5px}
.tt__cl small{display:block;margin-top:.2rem;font-size:11px;color:rgba(255,255,255,.45)}
.tt__cbtn{display:inline-block;margin-top:.4rem;padding:.3rem .7rem;border-radius:5px;background:#ff3b5c;color:#fff;font-size:12px;font-weight:600;transition:transform .2s var(--sx-ease)}
.tt__cbtn.press{transform:scale(.95)}
.tt__ci{display:flex;align-items:center;gap:.5rem;margin:.75rem .75rem 0;padding:.4375rem .4375rem .4375rem .875rem;border-radius:999px;background:#262626;font-size:13.5px}
.tt__ci>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;color:#fff}
.tt__ci>span:empty::before{content:"Thêm bình luận...";color:rgba(255,255,255,.4)}
.tt__ci>span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#fff;opacity:0}
.tt__ci.typing>span::after{animation:cx-caret 1s steps(1) infinite}
.tt__ci b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ff3b5c;transition:transform .2s var(--sx-ease)}
.tt__ci b.press{transform:scale(.85)}
.tt__ci b svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* tấm hồ sơ shop nhỏ (từ live) */
.tt__pf{display:flex;flex-direction:column;align-items:center;text-align:center}
.tt__pf>i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#fff;font:500 26px/1 Playfair,Georgia,serif;font-style:normal;box-shadow:0 0 0 2px #171717,0 0 0 4px #ff3b5c}
.tt__pf b{display:block;margin-top:.6rem;font-size:15px;font-weight:600}
.tt__pf small{display:block;margin-top:.15rem;font-size:12px;color:rgba(255,255,255,.55)}
.tt__pf dl{display:flex;gap:1.5rem;margin:.875rem 0 0}
.tt__pf dt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.tt__pf dd{margin:0;font-size:11px;color:rgba(255,255,255,.55)}
.tt__pf .tt__sb{width:100%}
/* khung tin nhắn với shop */
.tt__dm{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;background:#0e0e0e;color:#fff;transform:translateX(100%);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.tt__dm.on{transform:none}
.tt__dtop{position:relative;z-index:2;padding-bottom:.75rem;background:#0e0e0e}
.tt__dh{display:flex;align-items:center;gap:.625rem;padding:3.5rem 1rem .75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.tt__dh em{width:10px;height:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin:0 .25rem 0 0}
.tt__dh i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#24402f;color:#fff;font:500 16px/1 Playfair,Georgia,serif;font-style:normal}
.tt__dh b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.tt__dh span{display:inline-flex;align-items:center;gap:.35rem;font-size:12px;color:rgba(255,255,255,.6)}
.tt__dh span::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80}
.tt__ctx{display:flex;align-items:center;gap:.625rem;margin:.75rem .75rem 0;padding:.5rem;border-radius:10px;background:#1b1b1b;font-size:12px}
.tt__ctx img,.tt__ctx .tt__sw{flex:none;width:40px;height:40px;border-radius:6px;object-fit:cover}
.tt__ctx b{display:block;font-size:12.5px;font-weight:600}
.tt__ctx span{display:block;margin-top:.1rem;color:rgba(255,255,255,.6)}
.tt__ctx small{margin-left:auto;font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap}
.tt__lv{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.375rem;padding:.75rem;overflow:hidden}
.tt__m{flex:none;max-width:82%;padding:.5rem .75rem;border-radius:16px;font-size:14px;line-height:1.35;animation:cx-m .3s var(--sx-ease)}
.tt__m.k{align-self:flex-end;background:#ff3b5c;color:#fff;border-bottom-right-radius:4px}
.tt__m.b{align-self:flex-start;background:#262626;color:#fff;border-bottom-left-radius:4px}
.tt__m.t{display:flex;gap:4px;padding:.7rem .75rem}
.tt__m.t i{width:6px;height:6px;border-radius:50%;background:#8a8a8a;animation:cx-dot 1.1s ease-in-out infinite}
.tt__m.t i:nth-child(2){animation-delay:.15s}.tt__m.t i:nth-child(3){animation-delay:.3s}
.tt__order{flex:none;align-self:flex-start;width:88%;padding:.75rem .875rem;border-radius:14px;background:#1b1b1b;border:1px solid rgba(255,255,255,.1);font-size:13px;animation:cx-m .4s var(--sx-ease)}
.tt__order span{display:inline-flex;align-items:center;gap:.375rem;color:#4ade80;font-weight:600;font-size:12.5px}
.tt__order span::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80}
.tt__order b{display:block;margin-top:.25rem;font-size:14.5px;font-weight:600;line-height:1.3}
.tt__order p{margin:.125rem 0 0;color:rgba(255,255,255,.6)}
.tt__in{display:flex;align-items:center;gap:.5rem;margin:.25rem .75rem .5rem;padding:.4375rem .4375rem .4375rem .875rem;border-radius:999px;background:#1f1f1f;font-size:14px}
.tt__in>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;color:#fff}
.tt__in>span:empty::before{content:"Nhắn tin...";color:rgba(255,255,255,.4)}
.tt__in>span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#fff;opacity:0}
.tt__in.typing>span::after{animation:cx-caret 1s steps(1) infinite}
.tt__in b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ff3b5c;transition:transform .2s var(--sx-ease)}
.tt__in b.press{transform:scale(.85)}
.tt__in b svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tt>.px__kb{z-index:7}
.tt u{text-decoration:none}

@media (max-width:60rem){
  .ws__bar{grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;padding:0 12px}
  .ws__url{font-size:12px}
  .ws__v{height:30rem}
  .ws__pg{--d:calc(-100% + 30rem)}
  .sx__head{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-bottom:var(--s5)}
  .sx{margin-top:var(--s6)}
  .sx__meta{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .sx__d{font-size:.875rem}
  .cx__v{height:30rem}
  .cx__pg .hm__hero{height:19rem}
  .cx__fab{right:1rem;bottom:1rem;width:52px;height:52px}
  .cx__pan{left:.75rem;right:.75rem;bottom:.75rem;width:auto;height:27rem}
  .cx__steps{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .cx__steps li{padding-top:var(--s2)}
  .ph2{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--s5)}
  .ph2>div:first-child{width:100%}
  .px{width:min(19.25rem,88vw)}
  .px__sc{height:min(40rem,183vw)}
}

/* ---------- giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
  .ws__pg,.nx__bar>span::before,.nx__lt span::before,.cx__fab::after,.cx__m.t i,.px__m.t i,.tt__m.t i,.hm__dot::before,.tt__vid>img,.tt__bg,.tt__disc,.tt__hearts i,.tt__sub i,.tt__prog u,.tt__big,.tt__lc p,.tt__cl p,.tt__av.fl::after{animation:none!important}
  .nx__pk{display:none}
  .nx__spot,.nx__nd,.nx__tile,.nx__tile::before,.nx__tile::after,.nx__ck,.cx__pan,.cx__fab,.cx__cur,.px__ms,.px__kb,.nx__prog u,.tt__feed,.tt__sheet,.tt__dm,.tt__shop,.tt__cta,.tt__top,.tt__bar,.px__fing,.px__body{transition:none!important}
  .tt__sub i:first-child,.tt__prog u{opacity:1;transform:scaleX(.4)}
  .tt__sub i:first-child{transform:none}
}