/* lotuz.vn design system: header, menu mobile, footer, nút chat. Nạp ở mọi trang (lotuz-ds.php). Token ở tokens.css.
   Nguồn hình: design/home-v2/index.html. Class trùng thebe (.logo) đã đổi thành .lz-logo. */

/* ---------- Ẩn chrome cũ của thebe ---------- */
.pt-header,.pt-footer,.footer-widgets,.lotuz-seo-footer{display:none!important}
/* Trang WP: JS thebe đo .header-right trong .pt-header để đặt margin trên/dưới khung trang (headerElemH). display:none làm số đo = 0,
   lệch bố cục cũ, nên giữ hộp header cũ nhưng ẩn và rút khỏi luồng */
body.lz-ds:not(.lz-ds-home) .pt-header{display:block!important;visibility:hidden!important;pointer-events:none!important;position:fixed!important}
body.lz-ds:not(.lz-ds-home){padding-top:calc(var(--hh) + env(safe-area-inset-top,0px))}
/* 404 thebe là lớp fixed phủ màn hình, .main-content cao 0 nên footer mới nằm đè giữa màn. Đưa về luồng, vẫn cao một màn */
body.lz-ds.error404 .page-other{position:relative;top:auto;height:auto;min-height:calc(100svh - var(--hh) - env(safe-area-inset-top,0px))}

/* ---------- Reset có scope (trang chủ có reset toàn cục trong home.css, trang khác thì không) ---------- */
.hd,.mnav,.ft{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--paper);-webkit-font-smoothing:antialiased;text-align:left}
/* Trang WP còn bản override font cũ (lotuz-vietnamese-fonts.php: !important lên body, a, li, span, h1–h6, footer, nav).
   Chặn bằng id + !important để header/menu/footer giữ đúng font của design system. */
:is(#hd,#mnav,#ft),:is(#hd,#mnav,#ft) *{font-family:inherit!important}
:is(#hd,#mnav,#ft){font-family:var(--sans)!important}
#hd .lz-lang .lz-lang-seg,#ft h4,#ft .ft-bot{font-family:var(--mono)!important}
/* Cũng plugin đó: nav, a, li, .menu-item a{letter-spacing:.02em}. Bản reset (0,1,1) đứng trước mọi luật chrome để luật riêng phía sau vẫn thắng */
.mnav,.hd nav,.hd li,.hd a,.mnav nav,.mnav li,.mnav a,.ft nav,.ft li,.ft a{letter-spacing:normal}
.hd *,.hd *::before,.hd *::after,.mnav *,.mnav *::before,.mnav *::after,.ft *,.ft *::before,.ft *::after{box-sizing:border-box}
.hd a,.mnav a,.ft a{color:inherit;text-decoration:none;border:0;box-shadow:none}
.hd ul,.ft ul{list-style:none;margin:0;padding:0}
.hd li,.ft li{margin:0;padding:0}
.hd button,.mnav button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;padding:0;margin:0}
.hd :focus-visible,.mnav :focus-visible,.ft :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:9000;height:calc(var(--hh) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-left:var(--gx);padding-right:var(--gxr)}
.admin-bar .hd{top:32px}
.hd::before{content:"";position:absolute;inset:0 0 auto;height:calc(100% + 72px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,9,11,.9) 0,rgba(8,9,11,.62) 45%,rgba(8,9,11,.22) 75%,rgba(8,9,11,0) 100%);opacity:0;transition:opacity .5s}
.hd.solid::before,.hd.menu-open::before{opacity:1}
.hd .lz-logo{display:block;flex:none}
.hd .lz-logo svg{display:block;height:46px;width:auto;transform:translateY(-4.3%)}
.hd .menu{display:flex;align-items:center;gap:clamp(16px,2.1vw,34px);margin-left:auto}
.hd .menu>li{position:relative}
.hd .menu>li>a{display:inline-flex;align-items:center;gap:6px;padding:17px 0 11px;font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.45);transition:color .2s}
.hd .menu>li>a:hover,.hd .menu>li:focus-within>a,.hd .menu>li.cur>a{color:var(--gold)}
.hd .chev{width:9px;height:9px;opacity:.7}
.hd .sub{position:absolute;top:100%;left:-22px;min-width:270px;padding:12px 0;background:rgba(15,16,19,.97);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.hd .menu>li:hover>.sub,.hd .menu>li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.hd .sub a{display:block;padding:8px 22px;font-size:13.5px;line-height:1.45;color:var(--mute);transition:color .15s,background-color .15s}
.hd .sub a:hover{color:var(--paper);background:rgba(236,230,220,.05)}
.hd .sub.wide{display:grid;grid-template-columns:1fr 1fr;min-width:540px;left:-180px}
.hd .menu>li.sub-r>.sub{left:auto;right:-22px;min-width:200px}
.hd .tools{display:flex;align-items:center;gap:14px;flex:none}

/* Pill ngôn ngữ: markup do lotuz-i18n/switcher.php tạo (div.lz-lang > a|span.lz-lang-seg) */
.hd .lz-lang{display:inline-flex;align-items:stretch;height:auto;margin:0;padding:3px;border:1px solid var(--line);border-radius:0;background:rgba(0,0,0,.28);overflow:visible}
.hd .lz-lang .lz-lang-seg{display:flex;align-items:center;justify-content:center;min-width:0;padding:7px 10px;border-radius:0;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute);opacity:1;background:none;transition:background-color .2s,color .2s}
.hd .lz-lang a.lz-lang-seg:hover{color:var(--paper);background:rgba(236,230,220,.08)}
.hd .lz-lang .lz-lang-seg.is-active{background:var(--gold-tint,rgba(252,200,58,.12));color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.hd .lz-lang a.lz-lang-seg::after{display:none!important}

.hd .icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:0;transition:background-color .2s}
.hd .icon-btn:hover{background:rgba(236,230,220,.08)}
.hd .icon-btn svg{width:18px;height:18px}
.hd .burger{display:none}
@media (max-width:1360px){.hd{gap:16px}.hd .menu{gap:clamp(14px,1.5vw,22px)}.hd .menu>li>a{font-size:13.5px;gap:4px}}
@media (max-width:1100px){
  .hd .menu{display:none}
  .hd .burger{display:grid}
  .hd .lz-logo svg{height:36px}
  .hd .tools{margin-left:auto}
}
@media (max-width:782px){.admin-bar .hd{top:46px}}

/* ---------- Menu mobile (overlay) ---------- */
.mnav{position:fixed;inset:0;z-index:8900;background:var(--ink);padding:calc(var(--hh) + env(safe-area-inset-top,0px) + 8px) var(--gxr) calc(28px + env(safe-area-inset-bottom,0px)) var(--gx);overflow-y:auto;display:flex;flex-direction:column;gap:28px}
.admin-bar .mnav{top:32px}
@media (max-width:782px){.admin-bar .mnav{top:46px}}
.mnav[hidden]{display:none}
.mnav details,.mnav .mrow{border-bottom:1px solid var(--line)}
.mnav summary,.mnav .mrow{display:flex;align-items:center;justify-content:space-between;min-height:58px;font-size:17px;font-weight:500;list-style:none;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:12px;height:12px;color:var(--gold);transition:transform .25s}
.mnav details[open] summary svg{transform:rotate(180deg)}
.mnav details[open] summary{color:var(--gold)}
.mnav details a{display:block;padding:9px 0 9px 16px;font-size:14.5px;color:var(--mute);border-left:1px solid var(--line)}
.mnav details div{padding:0 0 16px}
.mnav-foot{display:grid;gap:10px;margin-top:auto}
.mnav-foot a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);transition:background-color .25s,color .25s,border-color .25s}
.mnav-foot a.gold{background:var(--gold-tint,rgba(252,200,58,.12));color:var(--gold);border-color:var(--gold);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mnav-foot a.gold:hover{background:var(--gold-tint-2,rgba(252,200,58,.22));color:var(--paper)}
.mnav-foot a:not(.gold):hover{border-color:var(--paper)}

/* ---------- Footer ---------- */
.ft{margin-top:clamp(48px,8vh,90px);padding-block:0 calc(24px + env(safe-area-inset-bottom,0px));padding-left:var(--gx);padding-right:var(--gxr)}
body.lz-ds-home .ft{margin-top:clamp(48px,8vh,90px)}
@media (min-width:1101px){body.lz-ds-home .ft{padding-right:max(116px,var(--gxr))}}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.ft-cols>div{padding:32px 20px 36px 24px;border-left:1px solid var(--line);min-width:0}
.ft-cols>div:first-child{border-left:0;padding-left:0}
.ft h4{display:flex;align-items:center;gap:9px;margin:0 0 14px;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.ft h4 svg{width:15px;height:15px;flex:none;color:var(--gold)}
.ft li a{display:block;padding:5px 0;font-size:13.5px;color:var(--mute);transition:color .2s}
.ft li a:hover{color:var(--paper)}
.ft-bot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:20px;font:400 11.5px/1.4 var(--mono);color:rgba(157,151,141,.75)}
.ft-bot span:last-child{grid-column:4;padding-left:24px}
@media (max-width:760px){
  body.lz-ds-home .ft{padding-right:max(28px,env(safe-area-inset-right,0px))}
  .ft-cols{grid-template-columns:1fr 1fr}
  .ft-cols>div{padding:22px 12px 24px 16px}
  .ft-cols>div:nth-child(even){border-left:1px solid var(--line)}
  .ft-cols>div:nth-child(odd){border-left:0;padding-left:0}
  .ft-cols>div:nth-child(n+3){border-top:1px solid var(--line)}
  .ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
  .ft-bot span:last-child{padding-left:0}
  .ft{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Nút chat nổi (lotuz-chat-fab.php): cùng kiểu .fab của demo, góc vuông, viền vàng, nền vàng trong ----------
   CSS gốc của nó in ở wp_footer sau file này → dùng selector đậm hơn. */
body .lzchat .lzchat-fab{border-radius:0;border:1px solid var(--gold);background:var(--gold-tint,rgba(252,200,58,.12));box-shadow:0 10px 30px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .25s,background-color .25s}
body .lzchat .lzchat-fab:hover{transform:scale(1.06);background:var(--gold-tint-2,rgba(252,200,58,.22));box-shadow:0 10px 30px rgba(0,0,0,.4)}
body .lzchat .lzchat-fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body .lzchat .lzchat-fab svg{fill:var(--gold)}
body .lzchat .lzchat-fab::after{border-radius:0;border-color:var(--gold)}
body .lzchat .lzchat-dot{border-radius:0}
body .lzchat .lzchat-panel{border-radius:0}
body .lzchat .lzchat-ic{border-radius:0}

/* ---------- Dòng ghi công DB-IP: ẩn theo yêu cầu (lotuz-ds.php đã cắt khỏi HTML, đây là dự phòng) ---------- */
p.notranslate:has(> a[href="https://db-ip.com"]){display:none!important}