@import url("/assets/so3re-logo.css?v=5");
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.11.0/dist/tabler-icons.min.css");
/* so3re-nav.css — CHROME DÙNG CHUNG (nav + footer) — reproduce Y HỆT Home (index.html).
   Tự chứa: import logo lg3/lg3h + tabler icons + biến màu. Namespace .s3nav / .s3foot. */
.s3nav,.s3foot{--s3purple:#3f008a;--s3purpledk:#2a0058;--s3orange:#ff881d;--s3ink1:#241a33;--s3ink2:#4a4658;--s3ink3:#8a8797;--s3line:#e7dff2;font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;box-sizing:border-box}
.s3nav *,.s3foot *{box-sizing:border-box}
/* ===== NAV (= .topnav Home) ===== */
.s3nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #ece3f5;box-shadow:0 2px 14px rgba(63,0,138,.06)}
.s3nav .in{max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,64px);display:flex;align-items:center;gap:14px;height:66px}
.s3nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.s3nav .links{display:flex;align-items:center;gap:2px;margin-left:8px}
.s3nav .links a{font-size:14px;font-weight:600;color:var(--s3ink2);padding:9px 13px;border-radius:999px;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap}
.s3nav .links a:hover{background:#f3eefa;color:var(--s3purple)}
.s3nav .links a.on{color:var(--s3purple);background:#f0e9fa;font-weight:800}
.s3nav .pill{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--s3purple);border:1px solid var(--s3line);border-radius:999px;padding:7px 14px;white-space:nowrap;margin-left:auto;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.s3nav a.pill:hover{background:color-mix(in srgb,var(--s3purple) 8%,#fff);border-color:var(--s3purple)}
.s3nav .login{margin-left:8px;background:var(--s3purple);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:0;border-radius:999px;padding:11px 20px;text-decoration:none;white-space:nowrap;cursor:pointer}
.s3nav .login:hover{background:var(--s3purpledk)}
.s3nav .who{position:relative;margin-left:8px}
.s3nav .chip{display:flex;align-items:center;gap:9px;border:1px solid var(--s3line);border-radius:999px;padding:5px 13px 5px 6px;cursor:pointer;background:#fff}
.s3nav .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--s3purple),var(--s3orange));color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.s3nav .nm{font-weight:700;font-size:12.5px;color:var(--s3ink1)}
.s3nav .who>.chip>i{color:var(--s3ink3);font-size:15px}
.s3nav .pend{margin-left:2px;font-size:10px;font-weight:800;border-radius:20px;padding:1px 7px;background:var(--s3orange);color:#2a1200;white-space:nowrap}
.s3nav .drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--s3line);border-radius:14px;box-shadow:0 20px 50px -20px rgba(63,0,138,.4);padding:6px;min-width:210px;display:none}
.s3nav .who.open .drop{display:block}
.s3nav .drop a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--s3ink1);text-decoration:none}
.s3nav .drop a:hover{background:#f3eefa;color:var(--s3purple)}
.s3nav .drop a i{color:var(--s3ink3);font-size:17px}
.s3nav .drop hr{border:0;border-top:1px solid var(--s3line);margin:5px 8px}
@media print{.s3nav,.s3foot{display:none}}
/* Mobile ≤860px: ẩn link/pill/login trên bar — điều hướng dùng drawer chung (so3re-mobnav.js) */
@media(max-width:860px){.s3nav .links,.s3nav .pill,.s3nav .login,.s3nav .who{display:none!important}}
/* ===== FOOTER (= .foot Home) ===== */
.s3foot{border-top:1px solid var(--s3line);background:#fff}
.s3foot .in{max-width:1240px;margin:0 auto;padding:26px clamp(22px,5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.s3foot .fbrand{display:flex;align-items:center;gap:10px;flex:none}
.s3foot .fcopy{font-size:13.5px;color:var(--s3ink3)}