/* ============================================
   HocOnline — Nhan dien: Navy + Cam
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#1c1b33;         /* nen toi cua hero / sidebar admin */
  --navy-soft:#2b2a4a;
  --paper:#f7f7fb;        /* nen trang chinh */
  --paper-raised:#ffffff;
  --orange:#f2601f;       /* mau nhan dien chinh */
  --orange-dark:#d94f14;
  --line:#e7e7ef;
  --text:#1c1b26;
  --muted:#6b6b7a;
  --danger:#c23b31;
  --success:#2f9e5b;
  --radius:12px;
  --radius-lg:18px;
  --shadow: 0 1px 2px rgba(28,27,51,.05), 0 10px 26px -14px rgba(28,27,51,.22);
}

*{ box-sizing:border-box; }
body{
  background:var(--paper);
  color:var(--text);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px;
  line-height:1.55;
}
h1,h2,h3,h4,h5,h6{ font-family:'Inter',sans-serif; color:var(--text); font-weight:800; letter-spacing:-0.02em; }
a{ text-decoration:none; color:var(--navy); }
a:hover{ color:var(--orange); }
code, .mono{ font-family:'IBM Plex Mono',monospace; }

/* ---------- Navbar ---------- */
.navbar{ background:var(--paper-raised)!important; border-bottom:1px solid var(--line); }
.navbar-brand{
  font-weight:800; font-size:1.4rem; letter-spacing:-0.02em;
  color:var(--text)!important;
}
.navbar-brand i{ display:none; } /* logo chu, khong dung icon */
.navbar-brand::after{ content:''; }
.brand-accent{ color:var(--orange); }
.nav-link{ color:var(--text)!important; font-weight:600; }
.nav-link:hover{ color:var(--orange)!important; }

.btn-primary{
  background:var(--orange); border-color:var(--orange);
  font-weight:700; border-radius:10px;
}
.btn-primary:hover, .btn-primary:focus{ background:var(--orange-dark); border-color:var(--orange-dark); }
.btn-outline-primary{ color:var(--navy); border-color:var(--navy); font-weight:700; border-radius:10px; }
.btn-outline-primary:hover{ background:var(--navy); border-color:var(--navy); }
.btn-success{ background:var(--success); border-color:var(--success); font-weight:700; border-radius:10px; }
.btn-outline-secondary{ border-radius:10px; }

/* Nut Dang ky dam net kieu CTA cam bo tron */
.navbar .btn-primary{ border-radius:24px; padding:.5rem 1.2rem; }

/* ---------- Cards ---------- */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper-raised);
  box-shadow:var(--shadow);
}
.course-card{ transition:.18s ease; height:100%; overflow:hidden; border-radius:var(--radius-lg); }
.course-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -16px rgba(28,27,51,.28); }
.course-card img{ height:160px; object-fit:cover; }
.price-tag{ font-weight:800; color:var(--navy); font-size:1.05rem; }
.badge-cat{
  background:rgba(242,96,31,.1); color:var(--orange-dark); border:none;
  font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  padding:.3em .65em; border-radius:20px;
}

/* ---------- Hero: nen navy toi gian ---------- */
.hero{
  background:linear-gradient(160deg, var(--navy) 0%, #14132a 100%);
  color:#fff;
  border-radius:var(--radius-lg);
  position:relative; overflow:hidden;
  text-align:center;
}
.hero h1{ color:#fff; font-weight:800; }
.hero p{ color:#c7c6dd; }
.hero .seal{ display:none; }

/* ---------- Sidebar cat (public) ---------- */
.sidebar-cat a{ color:var(--text); font-weight:500; }
.sidebar-cat a:hover{ color:var(--orange); }

/* ---------- Forms ---------- */
.form-control, .form-select{ border-radius:10px; border-color:var(--line); }
.form-control:focus, .form-select:focus{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,96,31,.15); }
.form-label{ font-weight:700; font-size:.88rem; color:var(--text); }

/* ---------- Footer ---------- */
footer{ background:var(--paper-raised)!important; border-top:1px solid var(--line); color:var(--muted); }

/* ============================================
   ADMIN
   ============================================ */
.admin-wrap{ display:flex; min-height:100vh; background:var(--paper); }
.admin-sidebar{ width:258px; background:var(--navy); color:#c7c6dd; flex-shrink:0; }
.admin-sidebar a{
  color:#c7c6dd; display:block; padding:.55rem 1.1rem; border-radius:10px; margin:2px 10px; font-size:.92rem;
  font-weight:500; transition:.12s;
}
.admin-sidebar a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-sidebar a.active{ background:var(--orange); color:#fff; font-weight:700; }
.admin-sidebar .section-title{
  font-size:.68rem; text-transform:uppercase; color:#8f8ea8; padding:1.1rem 1.1rem .35rem; letter-spacing:.08em; font-weight:700;
}
.admin-main{ flex:1; padding:26px 30px; }

.stat-card{ border-radius:var(--radius-lg); padding:20px; background:var(--paper-raised); border:1px solid var(--line); box-shadow:var(--shadow); }
.stat-card .num{ font-size:1.75rem; font-weight:800; color:var(--navy); }
.stat-card i{ font-size:1.1rem; opacity:.75; color:var(--orange); }

.table{ --bs-table-bg:transparent; }
.table thead{ background:#f0f0f7; }
.table thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text); font-weight:700; border-bottom:2px solid var(--line); }
.table td, .table th{ vertical-align:middle; border-color:var(--line); }

.badge{ font-weight:700; border-radius:6px; }
.drag-handle{ cursor:grab; color:#9ca3af; }
code{ background:#f0f0f7; padding:.15em .45em; border-radius:5px; color:var(--navy); }

.accordion-button{ font-weight:700; color:var(--text); }
.accordion-button:not(.collapsed){ background:#f0f0f7; color:var(--navy); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--line); }

/* Tabs tren trang chi tiet khoa hoc */
.nav-tabs{ border-bottom:1px solid var(--line); }
.nav-tabs .nav-link{ border:none; color:var(--muted); font-weight:600; padding:.6rem 1rem; border-radius:0; }
.nav-tabs .nav-link.active{ color:var(--orange); border-bottom:2px solid var(--orange); background:transparent; }