/* Menu header · menu mobile (sidebar) · ô tìm kiếm gợi ý · nút CTA — Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/)
   #039 viên thuốc trượt · #037/#038 menu bật từ nút, mục vào lần lượt · #045 menu toàn màn hình mở từ nút · #046 bảng lệnh tìm kiếm (chữ khớp được tô) · #009 nhãn nút lăn chữ.
   JS đi kèm: lx-nav.js. Chỉ animate transform/opacity. */
:root { --lh-ease: cubic-bezier(.2,.8,.2,1); --lh-spring: cubic-bezier(.34,1.45,.64,1); }

/* ═══ Header desktop ═══ */
@media (min-width: 992px) {
  .site-main-nav .site-nav > ul { position: relative; }
  .lxh-pill { position: absolute; top: 50%; left: 0; height: 34px; margin-top: -17px; border-radius: 999px; background: #f0f0f0; z-index: 0; pointer-events: none; opacity: 0; transition: transform .5s var(--lh-spring), width .5s var(--lh-spring), opacity .25s; }
  .lxh-pill.on { opacity: 1; }
  .site-main-nav .site-nav > ul > li > a { position: relative; z-index: 1; transition: color .25s; }
  .site-main-nav .site-nav > ul > li:hover > .mega-sub-menu, .site-main-nav .site-nav > ul > li:focus-within > .mega-sub-menu { animation: lxh-mega .55s var(--lh-spring) both; transform-origin: 50% 0; }
  .site-main-nav .site-nav > ul > li:hover > .mega-sub-menu > li, .site-main-nav .site-nav > ul > li:focus-within > .mega-sub-menu > li { animation: lxh-in .55s var(--lh-spring) both; }
  .site-main-nav .site-nav > ul > li:hover > .mega-sub-menu > li:nth-child(1) { animation-delay: .06s; } .site-main-nav .site-nav > ul > li:hover > .mega-sub-menu > li:nth-child(2) { animation-delay: .12s; }
  .site-main-nav .site-nav > ul > li:hover > .mega-sub-menu > li:nth-child(3) { animation-delay: .18s; } .site-main-nav .site-nav > ul > li:hover > .mega-sub-menu > li:nth-child(n+4) { animation-delay: .24s; }
  .site-main-nav .mega-item a { transition: transform .4s var(--lh-spring), color .2s; }
  .site-main-nav .mega-item a:hover { transform: translateX(5px); }
  .site-main-nav .site-nav .new { animation: lxh-pulse 2.4s ease-in-out infinite; }
  .header-account-list > a, .header-account-list > button, .header-meta-info .header-account-list .dropdown-toggle { transition: transform .4s var(--lh-spring), box-shadow .3s, background-color .2s; }
  @media (hover: hover) { .header-account-list > a:hover, .header-account-list > button:hover { transform: translateY(-2px) scale(1.07); box-shadow: 0 12px 20px -12px rgba(0,0,0,.5); } }
  .header-account-list > a:active { transform: scale(.92); }
}
@keyframes lxh-mega { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.98); } }
@keyframes lxh-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes lxh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ═══ Menu mobile (sidebar) ═══ */
.header-mobile-menu { transition: left .65s var(--lh-spring), box-shadow .5s var(--lh-ease) !important; border-radius: 0 26px 26px 0; }
.header-mobile-menu.open { box-shadow: 0 0 90px rgba(0,0,0,.4); }
.overlay { transition: opacity .45s var(--lh-ease), backdrop-filter .45s !important; }
.overlay.open { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mobile-menu-close { transition: transform .6s var(--lh-spring), opacity .3s; }
.header-mobile-menu.open .mobile-menu-close { animation: lxh-spin .7s var(--lh-spring) .15s both; }
@keyframes lxh-spin { from { opacity: 0; transform: rotate(-120deg) scale(.4); } }
.header-mobile-menu.open .lxh-st { animation: lxh-slide .6s var(--lh-spring) both; animation-delay: calc(var(--n, 0) * 45ms + 140ms); }
@keyframes lxh-slide { from { opacity: 0; transform: translateX(-26px); } }
.mmtb-item, .mhdr-btn, .mobile-menu-search-form button { transition: transform .35s var(--lh-spring), background-color .2s, box-shadow .3s; }
.mmtb-item:active, .mhdr-btn:active { transform: scale(.9); }
.header-mobile-menu .site-nav ul > li > a { transition: transform .4s var(--lh-spring), color .2s; }
.header-mobile-menu .site-nav ul > li > a:active { transform: translateX(6px); }
.header-mobile-menu .site-nav li.active-expand > ul { animation: lxh-sub .5s var(--lh-spring); transform-origin: 0 0; }
@keyframes lxh-sub { from { opacity: 0; transform: translateY(-8px) scaleY(.92); } }
.header-mobile-menu .site-nav ul > li .mobile-menu-expand::before, .header-mobile-menu .site-nav ul > li .mobile-menu-expand::after { transition: transform .5s var(--lh-spring), opacity .3s; }
body.mobile-menu-open .mhdr-hamburger { transform: scale(1.04); }

/* ═══ Ô tìm kiếm gợi ý → bảng lệnh (#046) ═══ */
ul:has(> .sp-item), ul:has(> .sp-chips-row), ul:has(> .sp-empty), ul:has(> .sp-section-header), ul:has(> .sp-fuzzy) { border: 0 !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,17,17,.08), 0 40px 70px -30px rgba(17,17,17,.5) !important; animation: lxh-pal .5s var(--lh-spring); transform-origin: 50% 0; }
@keyframes lxh-pal { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.sp-section-header { letter-spacing: .08em; }
.sp-item, .sp-chips-row, .sp-view-all, .sp-fuzzy { animation: lxh-in .5s var(--lh-spring) both; animation-delay: calc(var(--n, 0) * 26ms); }
.sp-link { position: relative; transition: background-color .2s, transform .4s var(--lh-spring); border-radius: 12px; }
@media (hover: hover) { .sp-link:hover { transform: translateX(4px); } }
.sp-link:active { transform: scale(.98); }
.sp-chip { transition: transform .4s var(--lh-spring), background-color .2s, color .2s; }
.sp-chip:hover { transform: translateY(-2px); } .sp-chip:active { transform: scale(.94); }
.sp-prod-img { transition: transform .6s var(--lh-ease); }
.sp-link:hover .sp-prod-img { transform: scale(1.08) rotate(-2deg); }
mark.lxh-hl { background: rgba(255,196,0,.38); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ═══ Nút CTA: chữ lăn (#009) + loang màu từ đáy ═══ */
.lxr-btn { position: relative; isolation: isolate; overflow: hidden; }
.lxr-t { display: inline-flex; white-space: pre; vertical-align: middle; }
.lxr-c { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.lxr-c > span { display: block; height: 1.3em; transition: transform .5s var(--lh-spring); transition-delay: calc(var(--i, 0) * 14ms); }
@media (hover: hover) { .lxr-btn:hover .lxr-c > span, .lxr-btn:focus-visible .lxr-c > span { transform: translateY(-100%); } .lxr-btn:hover > i, .lxr-btn:hover > svg { transform: translateX(4px); } }
.lxr-btn > i, .lxr-btn > svg { transition: transform .5s var(--lh-spring); }
.lxr-btn.btn-outline-dark::before, .lxr-btn.btn-cta-white::before, .lxr-btn.btn-cta-phone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #111; transform: translateY(101%); transition: transform .5s var(--lh-ease); border-radius: inherit; }
@media (hover: hover) { .lxr-btn.btn-outline-dark:hover::before, .lxr-btn.btn-cta-white:hover::before, .lxr-btn.btn-cta-phone:hover::before { transform: none; } .lxr-btn.btn-outline-dark:hover, .lxr-btn.btn-cta-white:hover, .lxr-btn.btn-cta-phone:hover { color: #fff !important; border-color: #111 !important; } }
.lxr-btn.btn-dark, .lxr-btn.btn-warning, .lxr-btn.branch-cta-btn { transition: transform .35s var(--lh-spring), box-shadow .3s var(--lh-ease), background-color .2s, color .2s; }
@media (hover: hover) { .lxr-btn.btn-dark:hover, .lxr-btn.btn-warning:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -16px rgba(0,0,0,.55); } }
.lxr-btn:active { transform: scale(.96) !important; }
.lxr-btn .lx-rip { position: absolute; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .lxh-pill, .header-mobile-menu, .overlay { transition-duration: .001ms !important; }
  .header-mobile-menu.open .lxh-st, .site-nav .new, ul:has(> .sp-item) { animation: none !important; }
  .lxr-c > span { transition-duration: .001ms; }
}