/* Site header, mobile menu, footer, chat widget and toast shared with the main page. Generated from style.css and scoped under body.sx so it cannot disturb Bootstrap/AdminLTE or customer.css pages. */
:root { --p: #06b6d4; --pd: #0891b2; --pdd: #0e7490; --pl: #cffafe; --pl2: #ecfeff; --p-rgb: 6, 182, 212; }
body.sx { --s: #0f172a; --ac: #fbbf24; --vp: #7c3aed; --ok: #10b981; --er: #ef4444; --wn: #f59e0b; --bg: #f8fafc; --cd: #ffffff; --tx: #0f172a; --t2: #475569; --mu: #94a3b8; --bd: #e2e8f0; --bd2: #cbd5e1; --r: 10px; --rl: 14px; --sh: 0 1px 3px rgba(0, 0, 0, 0.06); --shm: 0 4px 14px rgba(var(--p-rgb), 0.1); --shl: 0 12px 32px rgba(var(--p-rgb), 0.18); --bg-page: #f8fafc; --bg-card: #ffffff; --bg-input: #ffffff; --txt-main: #0f172a; --txt-sub: #475569; --txt-muted: #94a3b8; --bd-color: #e2e8f0; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);  }
body.dark.sx { --bg: #0f172a; --bg-page: #0f172a; --bg-card: #1e293b; --bg-input: #1e293b; --tx: #f1f5f9; --t2: #cbd5e1; --txt-main: #f1f5f9; --txt-sub: #cbd5e1; --txt-muted: #94a3b8; --bd: #334155; --bd-color: #334155; --mu: #64748b; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);  }
body.sx .nav, body.sx .nav *, body.sx .mob-drawer, body.sx .mob-drawer *, body.sx .ft, body.sx .ft *, body.sx .mob-backdrop, body.sx .mob-burger { box-sizing: border-box; margin: 0; padding: 0; font-family: "Phetsarath OT", sans-serif; }
body.sx :where(#chatWidget, #chatWidget *) { box-sizing: border-box; margin: 0; padding: 0; font-family: "Phetsarath OT", sans-serif; }
body.sx :where(.nav a, .mob-drawer a, .ft a, #chatWidget a) { text-decoration: none; color: inherit; cursor: pointer; }
body.sx :where(a.mi, a.bs, a.bl, a.icon-btn) { display: inline-block; }
body.sx .nav ul, body.sx .ft ul, body.sx .mob-drawer ul { list-style: none; }
body.sx .nav { flex-wrap: nowrap; gap: 0; }
body.sx .nav button, body.sx .mob-drawer button, body.sx :where(#chatWidget button) { cursor: pointer; font-family: inherit; }

body.sx .nav {background: #fff; border-bottom: 1px solid var(--bd); padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: var(--sh);}

body.sx .nl {display: flex; align-items: center; gap: 1.5rem;}

body.sx .brand {display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--tx);}

body.sx .brand .sx-bi {width: 36px; height: 36px; background: linear-gradient(135deg, var(--p), var(--pd)); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 900;}

body.sx .menu {display: flex; gap: 2px;}

body.sx .mi {padding: 8px 12px; font-size: 13.5px; color: var(--t2); border-radius: 8px; font-weight: 500; white-space: nowrap; transition: all 0.15s; border: none; background: transparent;}

body.sx .mi:hover {color: var(--p); background: var(--pl2);}

body.sx .mi.act {color: var(--tx); background: var(--pl); font-weight: 700;}

body.sx .nr {display: flex; align-items: center; gap: 8px;}

body.sx .sb {position: relative;}

body.sx .sb input {width: 230px; padding: 8px 12px 8px 36px; border: 1px solid var(--bd); border-radius: 22px; font-size: 12px; background: var(--bg);}

body.sx .sb input:focus {outline: none; border-color: var(--p); background: #fff;}

body.sx .sb svg {position: absolute; left: 13px; top: 10px; color: var(--mu); width: 14px;}

body.sx .bl {background: transparent; border: none; color: var(--tx); font-size: 13px; font-weight: 600; padding: 7px 14px;}

body.sx .bl:hover {color: var(--p);}

body.sx .bs {background: linear-gradient(135deg, var(--p), var(--pd)); color: #fff; border: none; padding: 9px 20px; border-radius: 22px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(var(--p-rgb), 0.3);}

body.sx .bs:hover {transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--p-rgb), 0.4);}

body.sx .ft {background: var(--ft-bg, #064e3b); color: rgba(255, 255, 255, 0.7); padding: 3rem 2rem 1.5rem;}

body.sx .ftg {max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem;}

@media (max-width: 768px) {
  body.sx .ftg {grid-template-columns: 1fr 1fr;}
}

body.sx .ftb {font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 8px;}

body.sx .ftb .sx-bi {width: 32px; height: 32px; background: linear-gradient(135deg, var(--p), var(--pd)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px;}

body.sx .ftc h4 {color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;}

body.sx .ftc p,
body.sx .ftc li {font-size: 12px; line-height: 1.8;}

body.sx .ftc a:hover {color: var(--p);}

body.sx .fts {display: flex; gap: 7px; margin-top: 1rem;}

body.sx .fts a {width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px;}

body.sx .fts a:hover {background: var(--p); transform: translateY(-2px);}

body.sx .ts {position: fixed; bottom: 24px; right: 24px; background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 12.5px; z-index: 9999; opacity: 0; transform: translateY(15px); transition: all 0.3s; pointer-events: none; display: flex; align-items: center; gap: 7px; box-shadow: var(--shl); max-width: 340px;}

body.sx .ts.on {opacity: 1; transform: translateY(0);}

body.sx .ts.sc {background: var(--ok);}

body.sx .ts.er {background: var(--er);}

body.sx .ts.wn {background: var(--wn);}

@media (max-width: 780px) {
  body.sx .menu {display: none;}
  body.sx .sb {display: none;}
}

body.sx .ftg {max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem;}

@media (max-width: 768px) {
  body.sx .ftg {grid-template-columns: 1fr 1fr;}
}

body.sx .ftc h4 {color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;}

body.sx .ftc p,
body.sx .ftc li {font-size: 12px; line-height: 1.8;}

body.sx .ftc ul {list-style: none; padding: 0;}

body.sx .ftc a {color: rgba(255, 255, 255, 0.7); cursor: pointer;}

body.sx .ftc a:hover {color: var(--p);}

body.sx .ftb {font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 8px;}

body.sx .ftbb {max-width: 1280px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.25rem; text-align: center; font-size: 11.5px;}

body.sx .ftbb a {color: var(--mu);}

body.sx .nav .sb svg {position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--mu); pointer-events: none;}

body.dark.sx .nav {background: rgba(15, 23, 42, 0.95) !important; border-bottom: 1px solid var(--bd-color);}

body.dark.sx .nav .brand {color: var(--txt-main);}

body.dark.sx .mi {color: var(--txt-sub);}

body.dark.sx .mi:hover {background: #334155; color: var(--p);}

body.dark.sx .sb input {background: var(--bg-input); color: var(--txt-main); border-color: var(--bd-color);}

body.dark.sx .ftbb {border-color: rgba(255, 255, 255, 0.15);}

body.sx .icon-btn {background: transparent; border: 1px solid var(--bd); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: all 0.2s; position: relative; flex-shrink: 0; color: var(--tx);}

body.sx .icon-btn:hover {background: var(--pl); border-color: var(--p); transform: translateY(-1px);}

body.dark.sx .icon-btn {color: var(--txt-main); border-color: var(--bd-color);}

body.dark.sx .icon-btn:hover {background: #334155;}

body.sx .cart-count {position: absolute; top: -4px; right: -4px; background: var(--er); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px;}

body.sx #chatWidget {position: fixed; bottom: 20px; right: 20px; z-index: 8500;}

body.sx .chat-btn {width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--p), var(--pd)); color: #fff; border: none; font-size: 26px; cursor: pointer; box-shadow: 0 8px 24px rgba(var(--p-rgb), 0.5); display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.25s;}

body.sx .chat-btn:hover {transform: scale(1.08) rotate(-5deg); box-shadow: 0 12px 32px rgba(var(--p-rgb), 0.65);}

body.sx .chat-pulse {position: absolute; inset: 0; border-radius: 50%; background: rgba(var(--p-rgb), 0.4); animation: chatPulse 2s infinite; pointer-events: none;}

body.sx .chat-pulse.has-unread {inset: auto; top: -4px; right: -4px; display: flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; animation: none; z-index: 1;}

body.sx .chat-box {position: absolute; bottom: 75px; right: 0; width: 340px; max-width: calc(100vw - 40px); background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); display: none; flex-direction: column; overflow: hidden; animation: chatSlide 0.25s;}

body.sx .chat-box.open {display: flex;}

body.dark.sx .chat-box {background: var(--bg-card);}

body.sx .chat-head {background: linear-gradient(135deg, var(--p), var(--pd)); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;}

body.sx .chat-head-info {display: flex; gap: 10px; align-items: center;}

body.sx .chat-avt {width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;}

body.sx .chat-name {font-weight: 700; font-size: 14px;}

body.sx .chat-status {font-size: 10.5px; opacity: 0.9;}

body.sx .chat-x {background: rgba(255, 255, 255, 0.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px;}

body.sx .chat-x:hover {background: rgba(255, 255, 255, 0.25);}

body.sx .chat-body {flex: 1; min-height: 240px; max-height: 340px; overflow-y: auto; padding: 14px; background: #f8fafc;}

body.dark.sx .chat-body {background: #0f172a;}

body.sx .chat-msg {margin-bottom: 12px; max-width: 85%;}

body.sx .chat-msg.bot {margin-right: auto;}

body.sx .chat-msg.user {margin-left: auto; text-align: right;}

body.sx .chat-bubble {padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; display: inline-block; text-align: left;}

body.sx .chat-msg.bot .chat-bubble {background: #fff; color: var(--tx); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}

body.dark.sx .chat-msg.bot .chat-bubble {background: var(--bg-card); color: var(--txt-main);}

body.sx .chat-msg.user .chat-bubble {background: var(--p); color: #fff; border-bottom-right-radius: 4px;}

body.sx .chat-time {font-size: 10px; color: var(--mu); margin-top: 3px; padding: 0 6px;}

body.sx .chat-quick {padding: 0 12px 8px; display: flex; flex-wrap: wrap; gap: 6px; background: #f8fafc;}

body.dark.sx .chat-quick {background: #0f172a;}

body.sx .chat-quick button {background: var(--pl); color: var(--pd); border: 1px solid #67e8f9; padding: 5px 11px; border-radius: 14px; font-size: 11px; cursor: pointer; font-family: inherit;}

body.sx .chat-quick button:hover {background: var(--p); color: #fff;}

body.sx .chat-input {display: flex; padding: 10px 12px; gap: 6px; background: #fff; border-top: 1px solid var(--bd);}

body.dark.sx .chat-input {background: var(--bg-card); border-color: var(--bd-color);}

body.sx .chat-input input {flex: 1; border: 1px solid var(--bd); padding: 8px 12px; border-radius: 18px; font-size: 12.5px; font-family: inherit; background: var(--bg-input, #fff); color: var(--tx);}

body.sx .chat-input button {background: var(--p); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 14px;}

body.sx .chat-foot {padding: 8px 12px; background: #f1f5f9; display: flex; justify-content: space-around; gap: 4px; font-size: 11px; border-top: 1px solid var(--bd);}

body.dark.sx .chat-foot {background: #0f172a; border-color: var(--bd-color);}

body.sx .chat-foot a {color: var(--pd); text-decoration: none; padding: 4px 8px; border-radius: 4px;}

body.sx .chat-foot a:hover {background: var(--pl);}

@media (max-width: 480px) {
  body.sx .chat-box {width: calc(100vw - 24px); right: -10px;}
  body.sx #chatWidget {bottom: 16px; right: 16px;}
}

body.sx #chatWidget {position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 8500 !important;}

body.sx #chatWidget .chat-btn {width: 60px !important; height: 60px !important; border-radius: 50% !important;}

body.sx #chatWidget .chat-box:not(.open) {display: none !important;}

body.sx #chatWidget .chat-box.open {display: flex !important;}

body.sx .ftc ul {text-align: left !important;}

body.sx .user-menu {position: relative;}

body.sx .user-btn {display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--bd); padding: 5px 12px 5px 5px; border-radius: 26px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--tx); transition: all 0.15s;}

body.sx .user-btn:hover {border-color: var(--p); background: var(--pl);}

body.dark.sx .user-btn {background: var(--bg-card); border-color: var(--bd-color); color: var(--txt-main);}

body.dark.sx .user-btn:hover {background: #1e293b;}

body.sx .user-av {width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--p), var(--pd)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; overflow: hidden;}

body.sx .user-av.big {width: 42px; height: 42px; font-size: 16px;}

body.sx .user-av img {width: 100%; height: 100%; object-fit: cover;}

body.sx .user-nm {font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

body.sx .user-vip {background: #ede9fe; color: #6d28d9; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700;}

body.sx .user-caret {font-size: 10px; color: var(--mu);}

body.sx .user-drop {position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--bd); border-radius: 12px; min-width: 230px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); padding: 6px; display: none; z-index: 100;}

body.sx .user-menu.open .user-drop {display: block; animation: fadeIn 0.15s;}

body.dark.sx .user-drop {background: var(--bg-card); border-color: var(--bd-color);}

body.sx .user-drop-head {display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--bd); margin-bottom: 4px;}

body.dark.sx .user-drop-head {border-color: var(--bd-color);}

body.sx .user-drop-item {display: block; padding: 8px 12px; font-size: 13px; color: var(--tx); cursor: pointer; border-radius: 8px; text-decoration: none; transition: background 0.12s;}

body.sx .user-drop-item:hover {background: var(--bg);}

body.dark.sx .user-drop-item:hover {background: #334155;}

body.sx .user-drop-item.danger {color: var(--er);}

body.sx .user-drop-item.danger:hover {background: #fee2e2;}

body.dark.sx .user-drop-item {color: var(--txt-main);}

body.sx .mob-burger {display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 8px; transition: background 0.2s;}

body.sx .mob-burger:hover {background: var(--pl2);}

body.sx .mob-burger span {display: block; width: 100%; height: 2.5px; background: var(--tx); border-radius: 2px; transition: transform 0.3s ease,
    opacity 0.3s;}

body.sx .mob-burger.open span:nth-child(1) {transform: translateY(7.5px) rotate(45deg);}

body.sx .mob-burger.open span:nth-child(2) {opacity: 0;}

body.sx .mob-burger.open span:nth-child(3) {transform: translateY(-7.5px) rotate(-45deg);}

body.sx .mob-backdrop {position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;}

body.sx .mob-backdrop.open {opacity: 1; pointer-events: auto;}

body.sx .mob-drawer {position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: #fff; z-index: 999; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); overflow-y: auto; display: flex; flex-direction: column;}

body.sx .mob-drawer.open {transform: translateX(0);}

body.sx .mob-drawer-h {display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--bd); background: linear-gradient(135deg, var(--pl2) 0%, var(--pl) 100%);}

body.sx .mob-brand {display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--tx); cursor: pointer;}

body.sx .mob-brand .sx-bi {width: 34px; height: 34px; background: linear-gradient(135deg, var(--p), var(--pd)); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 900;}

body.sx .mob-close {width: 36px; height: 36px; border: 0; background: rgba(255, 255, 255, 0.7); border-radius: 50%; font-size: 18px; color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;}

body.sx .mob-close:hover {background: var(--er); color: #fff; transform: scale(1.1);}

body.sx .mob-drawer-sb {position: relative; padding: 1rem 1.2rem; border-bottom: 1px solid var(--bd);}

body.sx .mob-drawer-sb input {width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--bd); border-radius: 10px; font-size: 13px; background: var(--bg);}

body.sx .mob-drawer-sb input:focus {outline: none; border-color: var(--p); background: #fff; box-shadow: 0 0 0 3px var(--pl2);}

body.sx .mob-drawer-sb svg {position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: var(--mu); width: 15px;}

body.sx .mob-nav {flex: 1; padding: 1rem 0;}

body.sx .mob-group {margin-bottom: 0.7rem;}

body.sx .mob-group-h {padding: 0.5rem 1.4rem; font-size: 11px; color: var(--mu); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;}

body.sx .mob-item {display: flex; align-items: center; gap: 12px; padding: 12px 1.4rem; font-size: 14px; color: var(--tx); font-weight: 600; cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent;}

body.sx .mob-item:hover {background: var(--pl2); color: var(--p); border-left-color: var(--p); padding-left: 1.6rem;}

body.sx .mob-item .mi-i {width: 26px; text-align: center; font-size: 16px;}

@media (max-width: 900px) {
  body.sx .mob-burger {display: flex;}
  body.sx .menu {display: none !important;}
  body.sx .sb {display: none !important;}
  body.sx .nav {padding: 0 1rem;}
  body.sx .brand span {font-size: 16px;}
  body.sx .nl {gap: 8px;}
}

body.dark.sx .mob-drawer {background: #0f172a; color: #f1f5f9;}

body.dark.sx .mob-drawer-h {background: linear-gradient(135deg, #164e63 0%, #0f172a 100%); border-bottom-color: #1e293b;}

body.dark.sx .mob-brand {color: #f1f5f9;}

body.dark.sx .mob-item {color: #cbd5e1;}

body.dark.sx .mob-item:hover {background: rgba(var(--p-rgb), 0.15); color: #67e8f9;}

body.dark.sx .mob-group-h {color: #64748b;}

body.dark.sx .mob-close {background: rgba(30, 41, 59, 0.7); color: #cbd5e1;}

body.dark.sx .mob-burger span {background: #f1f5f9;}

body.dark.sx .mob-drawer-sb input {background: #1e293b; border-color: #334155; color: #f1f5f9;}

@media (max-width: 480px) {
  body.sx .user-btn {padding: 4px; gap: 0;}
  body.sx .user-btn .user-nm,
body.sx .user-btn .user-vip,
body.sx .user-btn .user-caret {display: none;}
}

/* Header dropdown (inline <style> of index.html) */
body.sx .mi-drop { position: relative; display: inline-block; }
body.sx .mi-drop::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 6px; }
body.sx .mi-has-drop { display: inline-flex !important; align-items: center; gap: 5px; }
body.sx .mi-caret { font-size: 9px; opacity: 0.6; transition: transform 0.2s; }
body.sx .mi-drop:hover .mi-caret { transform: rotate(180deg); opacity: 1; }
body.sx .mi-submenu { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; min-width: 220px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 1000; }
body.sx .mi-drop:hover .mi-submenu, body.sx .mi-drop:focus-within .mi-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
body.sx .mi-submenu::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-left: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0; }
body.sx .mi-sub-item { display: block; padding: 9px 14px; font-size: 13px; color: #475569; cursor: pointer; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: all 0.12s; }
body.sx .mi-sub-item:hover { background: #f0fdfa; color: var(--p); padding-left: 18px; }
body.dark.sx .mi-submenu { background: #1e293b; border-color: #334155; }
body.dark.sx .mi-submenu::before { background: #1e293b; border-color: #334155; }
body.dark.sx .mi-sub-item { color: #cbd5e1; }
body.dark.sx .mi-sub-item:hover { background: #164e63; color: #67e8f9; }
body.dark.sx { background: var(--bg-page); color: var(--txt-main); }
body.sx #scUser { display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
body.sx #scUser .bs, body.sx #scUser .bl { white-space: nowrap; }
body.sx .nl, body.sx .menu, body.sx .mi-drop { min-width: 0; }
body.sx .menu .mi { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1400px) {
  body.sx .sb { display: none; }
}
@media (max-width: 600px) {
  body.sx #scUser > .bl { display: none; }
}
@media (max-width: 480px) {
  body.sx #scUser > .bs { display: none; }
  body.sx .nl, body.sx .brand { min-width: 0; }
  body.sx .brand .sx-bi, body.sx .mob-burger { flex-shrink: 0; }
}
body.sx :where(.nav, .mob-drawer, .ft, #chatWidget) { line-height: 1.5; color: var(--tx); }
body.sx .ft { color: rgba(255, 255, 255, 0.7); }
body.sx :where(.nav, .mob-drawer, .ft, #chatWidget) :is(button, input, select, textarea) { line-height: normal; }
/* Same as the main page: text uses Phetsarath OT, form controls use the Noto Sans Lao stack. */
body.sx :is(.nav, .mob-drawer, .ft, #chatWidget) :is(button, input, select, textarea) { font-family: "Noto Sans Lao", "Segoe UI", "Tahoma", sans-serif !important; letter-spacing: 0; }