/* Trang chủ · Chi nhánh · Blog — Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/)
   #002 nút từ tính · #100 đồng hồ lật · #061 ảnh phóng to từ ô nhỏ · #047 số đếm · #039/#048 tab trượt · #050 card · #058 vòng đọc · #044 accordion · #042 các bước.
   Chỉ animate transform/opacity; selector có tiền tố `body`. JS đi kèm: lx-pages.js. */
:root { --lp-ease: cubic-bezier(.2,.8,.2,1); --lp-spring: cubic-bezier(.34,1.45,.64,1); }

/* ── Nút từ tính (#002): JS đặt --tx/--ty, dùng thuộc tính `translate` riêng để không đụng transform gốc ── */
.lx-mag { translate: var(--tx, 0px) var(--ty, 0px); transition: translate .5s var(--lp-spring), box-shadow .3s var(--lp-ease), background-color .2s, color .2s, border-color .2s, transform .35s var(--lp-spring); will-change: translate; }
.lx-mag.lx-mag-live { transition: translate .08s linear, box-shadow .3s var(--lp-ease), background-color .2s, color .2s, border-color .2s, transform .35s var(--lp-spring); }
body .nut-red-white, body .nut-outline-white, body .dream-btn, body .branch-cta-btn, body .bcard-btn, body .fb-btn { position: relative; overflow: hidden; }
body .nut-red-white:active, body .nut-outline-white:active, body .dream-btn:active, body .branch-cta-btn:active, body .bcard-btn:active, body .fb-btn:active { transform: scale(.96); }
@media (hover: hover) {
  body .nut-red-white:hover, body .nut-outline-white:hover { box-shadow: 0 18px 34px -14px rgba(0,0,0,.6); }
  body .dream-btn:hover { box-shadow: 0 16px 28px -14px rgba(0,0,0,.55); }
}
.lx-rip { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: translate(-50%,-50%) scale(0); animation: lp-rip .65s var(--lp-ease) forwards; }
@keyframes lp-rip { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

/* ── Flash sale: chữ số lật (#100) ── */
.fs-countdown .fscd-box { perspective: 320px; }
.fs-countdown .fscd-box b { display: block; transform-origin: 50% 50%; backface-visibility: hidden; font-variant-numeric: tabular-nums; }

/* ── Phóng to ảnh từ ô nhỏ (#061) ── */
.lx-zoomable { cursor: zoom-in; }
.lx-zoom-bg { position: fixed; inset: 0; z-index: 99990; background: rgba(10,10,10,.86); opacity: 0; transition: opacity .35s var(--lp-ease); }
.lx-zoom-bg.on { opacity: 1; }
.lx-zoom-img { position: fixed; z-index: 99991; margin: 0; object-fit: contain; border-radius: 4px; transform-origin: 0 0; transition: transform .55s var(--lp-spring), border-radius .4s; cursor: zoom-out; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.lx-zoom-x { position: fixed; top: 18px; right: 18px; z-index: 99992; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .3s, transform .35s var(--lp-spring); }
.lx-zoom-x.on { opacity: 1; } .lx-zoom-x:active { transform: scale(.9); }
.artwork-box { overflow: hidden; }
.artwork-box img, .gallery-item img { transition: transform .9s var(--lp-ease), filter .5s; }
@media (hover: hover) { .artwork-box:hover img, .gallery-item:hover img { transform: scale(1.06); } }

/* ── Marquee dịch vụ: dừng khi rê chuột, tag nảy nhẹ ── */
@media (hover: hover) { .marquee-container:hover .marquee { animation-play-state: paused; } }
.marquee-container .tag { transition: transform .4s var(--lp-spring), background-color .25s, color .25s; }
@media (hover: hover) { .marquee-container .tag:hover { transform: translateY(-3px) scale(1.05); } }

/* ── Chi nhánh (danh sách): card spotlight + tilt nhẹ (#050) ── */
.bcard { position: relative; transition: transform .5s var(--lp-spring), box-shadow .4s var(--lp-ease); }
.bcard-media { overflow: hidden; }
.bcard-img { transition: transform .9s var(--lp-ease); }
.bcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 70%); mix-blend-mode: soft-light; }
@media (hover: hover) {
  .bcard:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
  .bcard:hover .bcard-img { transform: scale(1.05); }
  .bcard:hover::after { opacity: 1; }
}
body .category-item { transition: transform .35s var(--lp-spring), background-color .2s; }
body .category-item:hover { transform: translateX(4px); }

/* ── Chi nhánh (chi tiết): thanh neo trượt (#039), số đếm (#047), các bước (#042), dịch vụ ── */
.branch-nav { position: relative; }
.branch-nav.lx-js a { position: relative; z-index: 1; transition: color .3s var(--lp-ease); }
.branch-nav.lx-js a.lx-on { color: #fff; }
.lx-knob { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 999px; background: #111; pointer-events: none; box-shadow: 0 10px 18px -10px rgba(0,0,0,.6); transition: transform .5s var(--lp-spring), width .5s var(--lp-spring), height .5s var(--lp-spring), opacity .3s; }
.trust-stat-num { font-variant-numeric: tabular-nums; }
.branch-service-card, .branch-feature-item { transition: transform .5s var(--lp-spring), box-shadow .4s var(--lp-ease); }
@media (hover: hover) { .branch-service-card:hover, .branch-feature-item:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -28px rgba(0,0,0,.4); } }
.branch-service-card i { transition: transform .5s var(--lp-spring); }
@media (hover: hover) { .branch-service-card:hover i { transform: scale(1.18) rotate(-8deg); } }
.branch-process-num { transition: transform .5s var(--lp-spring), background-color .3s, color .3s, box-shadow .4s; }
.branch-process.lx-steps .branch-process-num { animation: lp-step .6s var(--lp-spring) backwards; animation-delay: calc(var(--i, 0) * .14s); }
@keyframes lp-step { from { transform: scale(.4); opacity: 0; } }
.faq-chevron { transition: transform .45s var(--lp-spring); }
[aria-expanded="true"] > .faq-chevron, [aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

/* ── Blog (danh sách): card, hàng tin, tab danh mục trượt (#048) ── */
.blog-cat-tabs { position: relative; }
.blog-cat-tabs.lx-js .blog-cat-tab.active { border-bottom-color: transparent !important; }
.blog-cat-tabs .lx-ul { position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px; background: currentColor; pointer-events: none; transition: transform .5s var(--lp-spring), width .5s var(--lp-spring); }
.blog-topic-card, .blog-feed-row, .blog-hero-side__item, .blog-trending__item { transition: transform .5s var(--lp-spring), box-shadow .4s var(--lp-ease); }
.blog-topic-card__thumb img, .blog-feed-row__thumb img, .blog-hero-side__thumb img, .blog-trending__thumb img, .blog-hero-main img { transition: transform .9s var(--lp-ease); }
@media (hover: hover) {
  .blog-topic-card:hover, .blog-feed-row:hover { transform: translateY(-4px); }
  .blog-topic-card:hover .blog-topic-card__thumb img, .blog-feed-row:hover .blog-feed-row__thumb img, .blog-hero-side__item:hover .blog-hero-side__thumb img, .blog-trending__item:hover .blog-trending__thumb img { transform: scale(1.06); }
  .blog-hero-side__item:hover, .blog-trending__item:hover { transform: translateX(4px); }
}

/* ── Blog (bài viết): thanh đọc, vòng tiến độ (#058), mục lục, accordion FAQ (#044), card sản phẩm ── */
#read-progress { background: linear-gradient(90deg, #111, #d0021b) !important; box-shadow: 0 0 12px rgba(208,2,27,.5); transition: width .12s linear; }
.lx-ring { position: fixed; left: 18px; bottom: 92px; z-index: 900; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 6px; border-radius: 999px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(17,17,17,.08), 0 18px 34px -16px rgba(17,17,17,.5); font-size: 12px; font-weight: 700; color: #111; opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; transition: opacity .4s var(--lp-ease), transform .55s var(--lp-spring); }
.lx-ring.on { opacity: 1; transform: none; pointer-events: auto; }
.lx-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); flex: none; }
.lx-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.lx-ring .t { stroke: #ececec; } .lx-ring .p { stroke: #111; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke .3s; }
.lx-ring.done .p { stroke: #00a650; }
.lx-ring b { font-variant-numeric: tabular-nums; }
.lx-ring a { color: inherit; text-decoration: none; }
@media (max-width: 767px) { .lx-ring { left: 12px; bottom: 76px; height: 46px; } .lx-ring svg { width: 34px; height: 34px; } }
#toc-container a { position: relative; display: inline-block; padding: 2px 0; transition: color .25s, transform .35s var(--lp-spring); }
#toc-container a.lx-cur { color: #d0021b; font-weight: 700; transform: translateX(4px); }
#toc-container a.lx-cur::before { content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #d0021b; animation: lp-dot .45s var(--lp-spring); }
@keyframes lp-dot { from { transform: scale(0); } }
.blog-content details.blog-faq-item { overflow: hidden; transition: box-shadow .3s var(--lp-ease), border-color .3s; }
.blog-content details.blog-faq-item[open] { box-shadow: 0 18px 30px -24px rgba(0,0,0,.45); }
.blog-content details.blog-faq-item > summary { cursor: pointer; transition: color .25s; }
.blog-content details.blog-faq-item > summary::marker, .blog-content details.blog-faq-item > summary::-webkit-details-marker { content: ""; display: none; }
.blog-ad-card { transition: transform .5s var(--lp-spring), box-shadow .4s var(--lp-ease); }
@media (hover: hover) { .blog-ad-card:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -24px rgba(0,0,0,.45); } }
.blog-ad-buy, .btn-share { transition: transform .35s var(--lp-spring), box-shadow .3s, background-color .2s; }
.blog-ad-buy:active, .btn-share:active { transform: scale(.94); }
.related-link { transition: transform .35s var(--lp-spring), color .2s; }
@media (hover: hover) { .related-link:hover { transform: translateX(4px); } }
.blog-content img { transition: transform .5s var(--lp-ease); }

@media (prefers-reduced-motion: reduce) {
  .lx-mag, .lx-zoom-img, .lx-ring, .lx-knob { transition-duration: .001ms; }
  .branch-process.lx-steps .branch-process-num { animation: none; }
  .marquee-container .marquee { animation-play-state: running; }
}