/* Phần bổ sung toàn site — Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/)
   #011 nút nổi bung cánh quạt · #058 vòng cuộn trang · #025 ô nhập nhãn nổi · #036 thanh độ mạnh mật khẩu · #062 phản hồi gửi form · #015 thẻ chọn (tư vấn tóc). JS đi kèm: lx-extras.js. */
:root { --lxe-ease: cubic-bezier(.2,.8,.2,1); --lxe-spring: cubic-bezier(.34,1.45,.64,1); }

/* ── Nút nổi gọi điện (#011): giữ nguyên "bấm = gọi", thêm nút ⋯ bung các lối tắt ── */
.lx-fab { position: fixed; z-index: 996; width: 50px; height: 50px; pointer-events: none; }
.lx-fab > * { pointer-events: auto; }
.lx-fab-more { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 8px 14px -6px rgba(0,0,0,.55); cursor: pointer; z-index: 3; transition: transform .45s var(--lxe-spring), background-color .25s; }
.lx-fab-more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; transition: transform .5s var(--lxe-spring); }
.lx-fab.is-open .lx-fab-more { transform: scale(1.08); background: #d0021b; }
.lx-fab.is-open .lx-fab-more svg { transform: rotate(135deg); }
.lx-fab-it { position: absolute; left: 3px; top: 3px; width: 44px; height: 44px; margin: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c, #111); text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 24px -12px rgba(0,0,0,.6);
  transform: translate(0,0) scale(.3); opacity: 0; pointer-events: none !important; transition: transform .5s var(--lxe-spring), opacity .25s var(--lxe-ease), box-shadow .3s; transition-delay: calc((3 - var(--i)) * 30ms); z-index: 2; }
.lx-fab-it i { font-size: 17px; }
.lx-fab-it span { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-6px); padding: 5px 10px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .4s var(--lxe-spring); pointer-events: none; }
.lx-fab.is-open .lx-fab-it { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; pointer-events: auto !important; transition-delay: calc(var(--i) * 45ms); }
.lx-fab.is-open .lx-fab-it span { opacity: 1; transform: translateY(-50%); transition-delay: calc(var(--i) * 45ms + 120ms); }
.lx-fab-it:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 28px -12px rgba(0,0,0,.7); }
.lx-fab-it:active { scale: .92; }
.lx-fab-it:focus-visible, .lx-fab-more:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
body.mobile-menu-open .lx-fab { display: none; }
.smart-call-btn { transition: transform .45s var(--lxe-spring), box-shadow .3s; }
.lx-fab.is-open ~ .smart-call-btn, .smart-call-btn.lx-up { transform: scale(1.06); }
.smart-call-btn:active { transform: scale(.92); }

/* ── Nút lên đầu trang: vòng tiến độ cuộn (#058) ── */
.back-to-top { transition: transform .5s var(--lxe-spring), opacity .35s var(--lxe-ease), box-shadow .3s !important; }
.back-to-top.lx-ring-on { overflow: visible; }
.lx-btt { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.lx-btt circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.lx-btt .t { stroke: rgba(255,255,255,.18); } .lx-btt .p { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
@media (hover: hover) { .back-to-top:hover { transform: translateY(-4px); } }
.back-to-top:active { transform: scale(.92); }

/* ── Form đăng nhập / đăng ký / tra cứu: nhãn nổi (#025) ── */
.lx-fld .lx-box { position: relative; }
.lx-fld .lx-box > label { position: absolute; left: 16px; top: 50%; margin: 0 !important; padding: 0 !important; transform: translateY(-50%); transform-origin: 0 0; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #8a8a8a !important; pointer-events: none; z-index: 2; transition: top .35s var(--lxe-ease), transform .35s var(--lxe-ease), font-size .35s var(--lxe-ease), color .25s; }
.lx-fld.is-up .lx-box > label { top: 9px; transform: none; font-size: 11px !important; color: #555 !important; }
.lx-fld.is-focus .lx-box > label { color: #111 !important; }
.lx-fld .lx-box > input:not([type=checkbox]):not([type=radio]) { height: 56px !important; padding: 22px 46px 6px 16px !important; border: 0 !important; border-radius: 14px !important; background: #f4f4f4 !important; box-shadow: inset 0 0 0 1.5px #e2e2e2; width: 100%; transition: box-shadow .3s var(--lxe-ease), background-color .25s; }
.lx-fld .lx-box > input::placeholder { color: transparent; transition: color .25s; }
.lx-fld.is-focus .lx-box > input::placeholder { color: #aaa; }
.lx-fld .lx-box > input:focus { background: #fff !important; box-shadow: inset 0 0 0 2px #111, 0 0 0 5px rgba(17,17,17,.08); outline: none; }
.lx-fld.is-bad .lx-box > input { box-shadow: inset 0 0 0 2px #d0021b !important; }
.lx-fld.is-bad .lx-box > label { color: #d0021b !important; }
.lx-fld.is-shake .lx-box { animation: lxe-shake .45s var(--lxe-ease); }
@keyframes lxe-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.lx-ok { position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; display: grid; place-items: center; background: #00a650; color: #fff; transform: scale(0); transition: transform .45s var(--lxe-spring); pointer-events: none; }
.lx-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lx-fld.is-ok:not(.is-bad) .lx-ok { transform: none; }
.lx-fld.has-eye .lx-ok { right: 46px; }
.lx-fld.has-eye .lx-box > input { padding-right: 84px !important; }
.lx-eye { position: absolute; right: 10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: transparent; color: #888; display: grid; place-items: center; cursor: pointer; z-index: 3; transition: background-color .2s, color .2s; }
.lx-eye:hover { background: #ececec; color: #111; }
.lx-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-fld .text-danger { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--lxe-ease), opacity .3s, margin .3s; font-size: 12.5px; font-weight: 600; }
.lx-fld.is-bad .text-danger { max-height: 60px; opacity: 1; margin-top: 6px; }
.lx-meter { display: flex; gap: 5px; margin-top: 8px; }
.lx-meter i { flex: 1; height: 4px; border-radius: 3px; background: #e4e4e4; transition: background-color .3s, transform .4s var(--lxe-spring); }
.lx-meter i.on { transform: scaleY(1.5); }
.lx-meter-t { margin-top: 5px; font-size: 12px; font-weight: 700; color: #888; min-height: 16px; transition: color .3s; }
.lx-submit { position: relative; overflow: hidden; transition: transform .35s var(--lxe-spring), box-shadow .3s; }
.lx-submit:active { transform: scale(.97); }
.lx-submit.is-loading { pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%) !important; background-size: 200% 100%; animation: lxe-shim 1.1s linear infinite; }
@keyframes lxe-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Tư vấn tóc: thẻ lựa chọn (#015) ── */
.advisor-option { transition: transform .45s var(--lxe-spring), box-shadow .35s var(--lxe-ease), border-color .25s, background-color .25s; }
@media (hover: hover) { .advisor-option:hover { transform: translateY(-3px); box-shadow: 0 20px 32px -22px rgba(0,0,0,.45); } }
.advisor-option:active { transform: scale(.98); }
.advisor-option-icon { transition: transform .5s var(--lxe-spring); }
@media (hover: hover) { .advisor-option:hover .advisor-option-icon { transform: scale(1.18) rotate(-6deg); } }
.advisor-option.selected .advisor-option-check, .advisor-option.active .advisor-option-check, .advisor-option input:checked ~ .advisor-option-check { animation: lxe-pop .5s var(--lxe-spring); }
@keyframes lxe-pop { 40% { transform: scale(1.4); } }
.advisor-face-source-btn, .advisor-hero-cta, .advisor-btn, .advisor-face-submit { transition: transform .35s var(--lxe-spring), box-shadow .3s var(--lxe-ease), filter .2s; }
@media (hover: hover) { .advisor-face-source-btn:hover, .advisor-hero-cta:hover { transform: translateY(-3px); } }
.advisor-face-source-btn:active, .advisor-hero-cta:active, .advisor-btn:active, .advisor-face-submit:active { transform: scale(.96); }
.advisor-card { transition: transform .5s var(--lxe-spring), box-shadow .4s var(--lxe-ease); }

@media (prefers-reduced-motion: reduce) { .lx-fab-it, .lx-fab-it span, .lx-fab-more { transition-duration: .001ms; } .lx-submit.is-loading { animation: none; } }