/* =========================================================================
   ks-chrome.css — Shared chrome (header / nav / footer / fab) ดีไซน์คลีนใหม่
   GLOBAL (ไม่ scope .ksr) — ใช้ทุกหน้า
   คลาสคอมโพเนนต์ขึ้นต้น .ksc- เพื่อกันชนธีม Sash / Bootstrap
   ========================================================================= */
/* ฟอนต์ Prompt โหลดผ่าน <link> ใน layouts/main.php (ไม่ใช้ @import เพราะทำให้โหลดต่อกันเป็นทอด) */

:root{
  --ksc-primary:#1565d8;
  --ksc-deep:#0d47a1;
  --ksc-bright:#2979ff;
  --ksc-ink:#1a2433;
  --ksc-muted:#6b7689;
  --ksc-faint:#98a1b0;
  --ksc-border:#eceff4;
  --ksc-border2:#e8edf4;
  --ksc-tint:#eaf2ff;
  --ksc-tint2:#eef4ff;
  --ksc-alt:#f7f9fc;
  --ksc-line:#06c755;
  --ksc-font:"Prompt","Kanit",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- ซ่อน chrome เดิมของธีม (คง element ไว้ใน DOM ให้ JS ธีมทำงาน แต่ไม่โชว์) ---- */
.hor-header{display:none !important;}
.landing-top-header{display:none !important;}
#back-to-top{display:none !important;}
.spacing-on-top{display:none !important;}

/* ---- เว้นระยะด้านบนให้หน้า legacy (เดิมชิดบนเพราะ .spacing-on-top ถูกซ่อน
        ส่วนหน้า redesign ใช้ wrapper .ksr ที่มี padding เองอยู่แล้ว จึงไม่ซ้อน) ---- */
.course-main-index,
.order-list-index,
.mycourse-index.section,
.user-address-list,
.change-password,
.user-profile,
.site-login,
.site-forgot-password{
  padding-top:40px !important;  /* ชนะ .page .section:first-child{padding-top:0} ของ site.css */
}

/* =======================================================================
   HEADER (ขาวสะอาด sticky)
   ===================================================================== */
.ksc-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
          backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--ksc-border);
  font-family:var(--ksc-font);
}
.ksc-inner{
  width:100%;max-width:1200px;margin:0 auto;padding:0 20px;
  height:68px;display:flex;align-items:center;gap:20px;
}
.ksc-brand{display:inline-flex;align-items:center;flex-shrink:0}
.ksc-brand img{height:38px;width:auto;display:block}
.ksc-nav{display:flex;gap:4px;margin:0 auto}
.ksc-nav a{
  padding:9px 16px;border-radius:10px;font-weight:500;font-size:15px;color:var(--ksc-ink);
  transition:background .15s ease,color .15s ease;white-space:nowrap;text-decoration:none;
}
.ksc-nav a:hover{background:var(--ksc-alt);color:var(--ksc-primary)}
.ksc-nav a.is-active{color:var(--ksc-primary);background:var(--ksc-tint2)}
.ksc-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}

/* buttons */
.ksc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ksc-font);font-weight:600;font-size:14.5px;line-height:1;
  padding:10px 18px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;
  white-space:nowrap;text-decoration:none;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ksc-btn.primary{background:var(--ksc-primary);color:#fff;box-shadow:0 6px 18px rgba(21,101,216,.22)}
.ksc-btn.primary:hover{background:var(--ksc-deep);color:#fff;transform:translateY(-2px)}
.ksc-btn.ghost{background:#fff;color:var(--ksc-primary);border-color:var(--ksc-border2)}
.ksc-btn.ghost:hover{border-color:var(--ksc-primary);background:var(--ksc-tint2);color:var(--ksc-primary)}

/* cart icon + badge */
.ksc-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;border:1.5px solid var(--ksc-border2);
  background:#fff;color:var(--ksc-muted);transition:all .15s ease;text-decoration:none;
}
.ksc-icon:hover{color:var(--ksc-primary);border-color:var(--ksc-primary)}
.ksc-icon i{font-size:18px;line-height:1}
.ksc-badge{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  background:var(--ksc-primary);color:#fff;font-size:11.5px;font-weight:700;border-radius:999px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

/* avatar + dropdown */
.ksc-user{position:relative}
.ksc-ava{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ksc-border2);
  background:#fff;padding:0;cursor:pointer;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
}
.ksc-ava:hover{border-color:var(--ksc-primary)}
.ksc-ava img{width:100%;height:100%;object-fit:cover;display:block}
.ksc-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:230px;z-index:1050;
  background:#fff;border:1px solid var(--ksc-border);border-radius:14px;
  box-shadow:0 18px 40px rgba(13,71,161,.16);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .16s ease;
}
.ksc-user.open .ksc-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.ksc-dd-head{padding:10px 12px 12px;border-bottom:1px solid var(--ksc-border);margin-bottom:6px}
.ksc-dd-name{font-weight:600;font-size:14.5px;color:var(--ksc-ink);line-height:1.3;word-break:break-word}
.ksc-dropdown a,.ksc-dropdown button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:10px;border:0;background:none;cursor:pointer;
  font-family:var(--ksc-font);font-size:14.5px;color:var(--ksc-ink);text-align:left;text-decoration:none;transition:background .13s ease;
}
.ksc-dropdown a:hover,.ksc-dropdown button:hover{background:var(--ksc-alt);color:var(--ksc-primary)}
.ksc-dropdown i{width:18px;text-align:center;color:var(--ksc-faint)}
.ksc-dropdown a:hover i,.ksc-dropdown button:hover i{color:var(--ksc-primary)}
.ksc-logout{color:#c0392b !important;border-top:1px solid var(--ksc-border);margin-top:6px;padding-top:12px !important}
.ksc-logout i{color:#c0392b !important}

/* hamburger */
.ksc-burger{display:none;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--ksc-border2);background:#fff;color:var(--ksc-ink);cursor:pointer}
.ksc-burger i{font-size:18px}

/* mobile menu */
.ksc-mobile{display:none;border-top:1px solid var(--ksc-border);background:#fff;padding:12px 20px 18px}
.ksc-mobile.open{display:block}
.ksc-mobile a{display:block;padding:11px 10px;border-radius:10px;font-weight:500;font-size:15px;color:var(--ksc-ink);text-decoration:none}
.ksc-mobile a:hover{background:var(--ksc-alt);color:var(--ksc-primary)}
.ksc-mobile .ksc-mm-actions{display:flex;gap:10px;margin-top:10px}
.ksc-mobile .ksc-mm-actions .ksc-btn{flex:1}
.ksc-mobile hr{border:0;border-top:1px solid var(--ksc-border);margin:10px 0}

@media (max-width:860px){
  .ksc-nav{display:none}
  .ksc-actions .ksc-btn.ghost,.ksc-actions .ksc-btn.primary{display:none}
  .ksc-burger{display:inline-flex;align-items:center;justify-content:center}
}

/* =======================================================================
   BACK TO TOP (ของเราเอง ซ่อนของธีม)
   ===================================================================== */
.ksc-totop{
  position:fixed;right:18px;bottom:18px;z-index:1045;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ksc-primary);color:#fff;box-shadow:0 10px 24px rgba(21,101,216,.4);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s ease;
}
.ksc-totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.ksc-totop i{font-size:18px}