/* ==========================================================================
   ALEX Library – Sidebar + Grid + Pager (Full CSS)
   ========================================================================== */

/* -------------------- Variables -------------------- */
:root{
  --brown:#C56B24;          /* nền sidebar/nav */
  --brown-dark:#8e4b1e;
  --accent:#cd853f;         /* header card video */
  --text:#fff;
  --shadow:0 2px 10px rgba(0,0,0,.12);
  --radius:14px;
  --transition:200ms ease;

  --nav-w: 280px;           /* width khi mở */
  --nav-w-mini: 64px;       /* width khi thu */
}

/* -------------------- Base / Reset -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  background:#fff; color:#222;
}

/* Bỏ marker cho mọi danh sách trong nav */
.catnav ul,
.catnav .catnav-root,
.catnav .catnav-root ul{ list-style:none; padding-left:0; margin-left:0; }
.catnav li::marker{ content:""; }          /* chặn ::marker */
summary::marker{ display:none; }           /* nếu dùng <details>/<summary> ở nơi khác */

/* -------------------- Layout -------------------- */
.app{
  display:grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height:100dvh;
}
.sidebar-wrapper{ position:relative; overflow:visible; }
.sidebar{
  position: relative;
  background: var(--brown);
  color: var(--text);
  overflow-y: scroll;
  overflow-x: hidden;
  border-right: 4px solid #fff;
  height: 100%;
  max-height: 1100px;
}

.sidebar__scroll{
  flex: 1 1 auto;
  overflow: auto;         /* trước đang để hidden */
  padding: 16px 0px 72px; /* chừa đáy cho nút thu gọn */
}
/* scrollbar “pill” */
.sidebar__scroll::-webkit-scrollbar{ width:10px }
.sidebar__scroll::-webkit-scrollbar-thumb{
  background:#d9b59b; border-radius:10px; border:2px solid var(--brown);
}

/* -------------------- Brand (optional) -------------------- */
.brand{
  font-weight:700; letter-spacing:.5px;
  margin:6px 4px 12px; padding:6px 8px; border-radius:10px;
}

/* -------------------- Category Nav -------------------- */
.catnav{
  width:100%;
  color:#fff;
  padding:12px 14px;
}
.catnav-root{ margin:0; padding:0; }
.cat{ margin:2px 0 10px; }
.cat:last-child{ margin-bottom:0; }

/* Tiêu đề nhóm (ô vuông trắng + mũi chevron) */
.cat-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 0px 6px;
  font-weight:900; color:#fff;
  background:transparent; border:0; cursor:pointer;
}
.cat-toggle .label{
  position:relative; padding-left:14px; letter-spacing:.3px;
}
.cat-toggle .label::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:#fff; border-radius:2px;   /* ô vuông trắng */
}
.cat-toggle i{ transition:transform .2s; }
.cat.is-open .cat-toggle i{ transform:rotate(180deg); }

/* Danh sách con */
.sub{ display:none; margin:6px 0 10px; padding:4px 0 0; }
.cat.is-open > .sub{ display:block; }

/* Item con */
.sub-link{
  display:block; width:100%; text-align:left;
  padding:6px 10px;
  border-radius:4px;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.95); font-weight:500;
  text-decoration:none;
}
.sub-link:hover{ background:rgba(0,0,0,.18); text-decoration:none; }
.sub-link.is-active{
  position:relative;
  background:#8FD1F7; color:#0b223a; font-weight:700;
}
/* (Tùy chọn) vạch trái cho item active */
/* .sub-link.is-active::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#2b78ff; border-radius:3px 0 0 3px;
} */

/* Khoảng cách giữa nhóm */
.cat + .cat{ margin-top:12px; }

/* -------------------- Collapse button (bottom-left) -------------------- */
.collapse-btn{
  position:absolute; right:-34px; bottom:0;
  display:flex; align-items:center; justify-content:center;
  height:30px; width:38px;
  border-radius:0 16px 16px 0;
  background:var(--brown-dark); color:#fff;
  font-weight:600; font-size:15px; line-height:1;
  z-index:20; border:2px solid transparent; cursor:pointer;
}
.collapse-btn:hover{ background:#6e3a16; }
.collapse-btn span{ pointer-events:none; }
.collapse-btn.hide-sidebar i {
      transform: rotate(180deg);
}
/* -------------------- Help button (top-right of sidebar) -------------------- */
.help-btn{
  position:absolute; top:8px; right:0;
  width:18px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:5px 0 0 5px;
  background:#000; color:#fff; border:2px solid transparent;
  font-weight:bold; font-size:18px; line-height:1;
  z-index:20; cursor:pointer;
}
.help-btn:hover{ background:#333; }

/* -------------------- Content -------------------- */
.content{ padding:18px clamp(12px,2vw,22px) 30px; }
.content-header{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:4px 0 14px;
}
.content-header .crumb{ font-weight:700; color:#444; }

/* Grid video */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px,1fr));
  gap:18px;
}
@media (max-width:1200px){
  .grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width:640px){
  .grid{ grid-template-columns: 1fr; }
}

/* Card video */
.video-card{
  background:#fff; box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  border-radius:0;   /* theo mẫu góc vuông */
}
.video-card__title{
  background:var(--accent); color:#3b1f06;
  font-weight:700; padding:8px 12px; text-align:center;
}
.video-wrapper{ background:#000; aspect-ratio:16/9; }
.video-wrapper video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card__meta{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; font-size:12px; color:#666;
}

/* -------------------- Pager -------------------- */
.pager{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin:8px 0 16px;
}
.page-btn{
  min-width:34px; height:34px; padding:0 10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px;
  border-radius:10px;
  border:none; cursor:pointer; user-select:none;
  background:#96c7a1; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.page-btn:hover{ filter:brightness(.95); }
.page-btn.is-active{ background:#7a7800; color:#fff; }
.page-btn.is-disabled{
  background:#e5e5e5; color:#fff; cursor:not-allowed; opacity:.9;
}

.page_nav {
    text-align: center;
    margin: 30px 0 15px;
}
.page_nav .page-numbers {
  border: 1px solid #000;
  padding: 3px 10px;
  color: #000;
}
.page_nav .page-numbers.current {
      background: var(--brown);
      color: var(--text);
}

/* -------------------- Collapsed State -------------------- */
.app.is-collapsed{ grid-template-columns: var(--nav-w-mini) 1fr; }
.app.is-collapsed .sidebar__scroll{ padding-inline:6px; }
.app.is-collapsed .brand,
.app.is-collapsed .cat-toggle .label,
.app.is-collapsed .sub-link{ padding-inline:10px; }
.app.is-collapsed .cat-toggle .label,
.app.is-collapsed .sub-link{ opacity:0; pointer-events:none; width:0; overflow:hidden; }
.app.is-collapsed .collapse-btn{ transform:translateX(20px); right:-18px; }

/* -------------------- A11y focus -------------------- */
:focus-visible{
  outline:2px solid #1e90ff; outline-offset:2px;
}