/* =====================================================================
   Chankhoa.Pro — Layout (navbar, footer, bottom-nav, admin shell)
   Dùng sau ui.css. Chỉ dùng var(--token). Footer đồng bộ light/dark.
   ===================================================================== */

.ck-main{ min-height:60vh; }
/* Trang auth: bám sát nội dung, footer luôn hiển thị phía dưới */
.ck-main:has(> .login-section){
  min-height:auto;
}

/* ============ LOGO swap theo theme ============ */
.ck-logo{ height:42px; width:auto; display:block; }
.ck-logo--dark{ display:none; }
:root[data-theme="dark"] .ck-logo--light{ display:none; }
:root[data-theme="dark"] .ck-logo--dark{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .ck-logo--light{ display:none; }
  :root:not([data-theme]) .ck-logo--dark{ display:block; }
}

/* ============ NAVBAR ============ */
.ck-nav{
  position:sticky; top:0; z-index:1030;
  background:color-mix(in srgb,var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border);
}
.ck-nav__in{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:var(--sp-4); }
.ck-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.ck-nav__links{ display:flex; align-items:center; gap:var(--sp-6); }
.ck-nav__link{ color:var(--body); font-weight:600; font-size:var(--fs-sm); position:relative; padding:6px 0; transition:color var(--t-fast); }
.ck-nav__link:hover{ color:var(--ink); }
.ck-nav__link.is-active{ color:var(--primary); }
.ck-nav__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:var(--grad); }
.ck-nav__actions{ display:flex; align-items:center; gap:var(--sp-3); }
.ck-nav__toggler{ display:none; }
@media (max-width:860px){
  .ck-nav__links .ck-nav__link{ display:none; }
}

/* ============ BOTTOM NAV (mobile) ============ */
.ck-bottomnav{
  position:fixed; left:10px; right:10px; bottom:10px; z-index:1040;
  background:color-mix(in srgb,var(--surface) 94%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--ring-lg);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
}
.ck-bottomnav__in{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; min-height:56px; gap:4px; }
.ck-bottomnav__item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.02em;
  border-radius:var(--r-sm); padding:7px 4px; text-decoration:none; transition:color var(--t-fast), background var(--t-fast);
}
.ck-bottomnav__item i{ font-size:17px; line-height:1; }
.ck-bottomnav__item.is-active{ color:var(--primary); background:var(--primary-soft); }
body.has-bottomnav{ padding-bottom:var(--bottom-nav-h); }
@media (min-width:861px){ .ck-bottomnav{ display:none; } body.has-bottomnav{ padding-bottom:0; } }

/* ============ FOOTER ============ */
.ck-footer{
  background:var(--surface-2);
  color:var(--body);
  border-top:1px solid var(--border);
  padding:var(--sp-9) 0 var(--sp-6);
  margin-top:var(--sp-10);
}
.ck-footer__cols{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--sp-8) var(--sp-7);
  align-items:start;
}
.ck-footer__col{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.ck-footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-4); }
.ck-footer__tagline{
  font-size:var(--fs-sm); line-height:var(--lh-base);
  max-width:36ch; color:var(--muted); margin:0;
}
.ck-footer__heading{
  color:var(--heading); font-size:var(--fs-sm);
  margin:0 0 var(--sp-3); font-weight:700; letter-spacing:.02em;
}
.ck-footer__nav{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--sp-1); width:100%;
}
.ck-footer__nav a{
  display:inline-flex; align-items:center; gap:8px; color:var(--body);
  padding:6px 0; font-size:var(--fs-sm); text-decoration:none;
  transition:color var(--t-fast);
}
.ck-footer__nav a:hover{ color:var(--primary); }
.ck-footer__bottom{
  border-top:1px solid var(--border);
  margin-top:var(--sp-7); padding-top:var(--sp-4);
  text-align:center; font-size:var(--fs-sm); color:var(--muted);
}
:root[data-theme="dark"] .ck-footer{
  background:var(--surface);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .ck-footer{ background:var(--surface); }
}
@media (max-width:900px){
  .ck-footer__cols{
    grid-template-columns:1fr 1fr;
    gap:var(--sp-7) var(--sp-6);
  }
  .ck-footer__col--brand{ grid-column:1 / -1; }
  .ck-footer__tagline{ max-width:52ch; }
}
@media (max-width:560px){
  .ck-footer__cols{ grid-template-columns:1fr; gap:var(--sp-6); }
  .ck-footer__col{ align-items:center; text-align:center; }
  .ck-footer__brand{ justify-content:center; }
  .ck-footer__tagline{
    margin-inline:auto;
    max-width:52ch;
  }
  .ck-footer__nav{ align-items:center; }
}

/* ============ ADMIN SHELL ============ */
.ck-app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; background:var(--bg); }
.ck-sidebar{
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-4); position:sticky; top:0; height:100vh; overflow-y:auto;
}
.ck-sidebar__brand{ display:flex; align-items:center; gap:10px; padding:0 var(--sp-2) var(--sp-5); }
.ck-sidebar__group{ color:var(--muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding:var(--sp-4) var(--sp-3) var(--sp-2); }
.ck-sidebar__link{
  display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--sp-3); border-radius:var(--r-sm);
  color:var(--body); font-weight:600; font-size:var(--fs-sm); transition:background var(--t-fast), color var(--t-fast);
}
.ck-sidebar__link i{ font-size:1.1rem; width:22px; text-align:center; }
.ck-sidebar__link:hover{ background:var(--surface-2); color:var(--ink); }
.ck-sidebar__link.is-active{ background:var(--primary-soft); color:var(--on-primary-soft); }
.ck-sidebar__link .ck-badge{ margin-left:auto; }

.ck-app__main{ display:flex; flex-direction:column; min-width:0; }
.ck-topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  height:var(--header-h); padding:0 var(--sp-6);
  background:color-mix(in srgb,var(--bg) 80%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.ck-topbar__title{ font-weight:800; color:var(--heading); font-size:var(--fs-lg); }
.ck-app__content{ padding:var(--sp-7) var(--sp-6); }
.ck-sidebar__toggle{ display:none; }

.ck-app__backdrop{ display:none; }

@media (max-width:991px){
  .ck-app{ grid-template-columns:1fr; }
  .ck-sidebar{
    position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); z-index:1050;
    transform:translateX(-100%); transition:transform var(--t); height:100vh;
  }
  .ck-app.is-open .ck-sidebar{ transform:none; }
  .ck-sidebar__toggle{ display:inline-grid; }
  .ck-app__backdrop{
    display:block;
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1045;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--t), visibility var(--t);
  }
  .ck-app.is-open .ck-app__backdrop{ opacity:1; visibility:visible; pointer-events:auto; }
}

/* Legacy admin top nav (admin xem trang khách — admin_navbar.php) */
.nav-blur {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--ring);
}
.nav-ghost { height: var(--site-header-offset); flex-shrink: 0; }
.mobile-bottom-nav.admin-bottom-nav {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1040;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ring-lg);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav .inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: 56px;
  gap: 4px;
}
.mobile-bottom-nav .mobile-bottom-nav-item {
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: 7px 4px;
  transition: color var(--t-fast), background var(--t-fast);
}
.mobile-bottom-nav .mobile-bottom-nav-item i { font-size: 17px; line-height: 1; }
.mobile-bottom-nav .mobile-bottom-nav-item.active {
  color: var(--primary);
  background: var(--primary-soft);
}
body:has(.mobile-bottom-nav.admin-bottom-nav) {
  padding-bottom: var(--bottom-nav-h);
}
@media (min-width: 992px) {
  .mobile-bottom-nav.admin-bottom-nav { display: none !important; }
  body:has(.mobile-bottom-nav.admin-bottom-nav) { padding-bottom: 0; }
}