/* =========================================================
   OSU CATEGORY SIDEBAR
   Shortcode chỉ chiếm width sidebar.
   Mega menu absolute overlay sang phải, không push layout.
   ========================================================= */

.osu-category-sidebar-wrap,
.osu-category-sidebar-wrap *{
  box-sizing:border-box;
}

.osu-category-sidebar-wrap{
  position:relative;
  z-index:50;
  width:var(--osu-sidebar-width,250px);
  max-width:var(--osu-sidebar-width,250px);
  flex:0 0 var(--osu-sidebar-width,250px);
  overflow:visible;
  font-family:Arial,Helvetica,sans-serif;
}

.osu-category-sidebar{
  position:relative;
  z-index:2;
  width:100%;
  background:#fff;
  border:1px solid #e5e9ec;
  border-radius:12px;
  overflow:hidden;
}

.osu-category-sidebar-head{
  min-height:58px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-bottom:1px solid #edf0f2;
  background:#fff;
}

.osu-category-sidebar-head strong{
  color:#173b65;
  font-size:19px;
  line-height:1.2;
}

.osu-category-sidebar-scroll{
  max-height:var(--osu-sidebar-max-height,680px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.osu-category-sidebar-list{
  list-style:none;
  margin:0;
  padding:7px 0;
}

.osu-category-sidebar-item{
  margin:0;
  padding:0;
}

.osu-category-sidebar-button{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border:0;
  border-radius:0;
  background:#fff;
  color:#26343c;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}

.osu-category-sidebar-button:hover,
.osu-category-sidebar-button.is-active{
  background:#eaf4ff;
}

.osu-category-sidebar-button.is-active .osu-category-sidebar-name{
  color:#1671d8;
  font-weight:700;
}

.osu-category-sidebar-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  overflow:hidden;
  background:#f2f4f5;
  display:flex;
  align-items:center;
  justify-content:center;
}

.osu-category-sidebar-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.osu-cat-image-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f4f6;
  color:#6e7d87;
  font-size:13px;
  font-weight:700;
}

.osu-category-sidebar-name{
  flex:1;
  min-width:0;
  color:#26343c;
  font-size:14px;
  line-height:1.35;
}

.osu-category-sidebar-arrow{
  flex:0 0 auto;
  color:#71808b;
  font-size:22px;
  line-height:1;
  transition:transform .16s ease;
}

.osu-category-sidebar-button.is-active .osu-category-sidebar-arrow{
  color:#1671d8;
  transform:translateX(2px);
}

/* =========================
   MEGA OVERLAY
   ========================= */

.osu-category-mega{
  position:absolute;
  left:100%;
  top:0;
  z-index:99999;
  width:var(--osu-mega-width,520px);
  max-width:calc(100vw - var(--osu-sidebar-width,250px) - 16px);
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  transform:translateX(10px);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

.osu-category-mega.is-open{
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transform:translateX(0);
}

.osu-category-mega-panel{
  width:100%;
  max-height:min(78vh,760px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#fff;
  border:1px solid #e7ebee;
  border-radius:0 14px 14px 0;
  box-shadow:0 16px 42px rgba(25,42,55,.18);
}

.osu-category-mega-panel[hidden]{
  display:none !important;
}

.osu-category-mega-head{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px 16px;
  border-bottom:1px solid #edf0f2;
  background:#fff;
}

.osu-category-mega-head h3{
  margin:0;
  color:#202e37;
  font-size:20px;
  line-height:1.3;
}

.osu-category-mega-head p{
  margin:5px 0 0;
  color:#7a858c;
  font-size:12px;
  line-height:1.45;
}

.osu-category-mega-close{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:#f4f6f7;
  color:#56636c;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.osu-category-mega-close:hover{
  background:#e9eef1;
}

.osu-category-mega-body{
  padding:20px 22px 22px;
}

.osu-cat-mega-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 14px;
}

.osu-cat-mega-card{
  min-width:0;
}

.osu-cat-mega-card-main{
  display:block;
  color:#26343c;
  text-decoration:none;
}

.osu-cat-mega-card-image{
  width:76px;
  height:76px;
  display:block;
  margin:0 auto 8px;
  overflow:hidden;
  border-radius:50%;
  background:#f2f4f5;
}

.osu-cat-mega-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.osu-cat-mega-card-name{
  display:block;
  color:#26343c;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}

.osu-cat-mega-card-main:hover .osu-cat-mega-card-name{
  color:#1671d8;
}

.osu-cat-grandchildren{
  margin-top:8px;
  text-align:center;
}

.osu-cat-grandchildren a{
  display:block;
  margin:0 0 5px;
  color:#6a767e;
  font-size:11.5px;
  line-height:1.35;
  text-decoration:none;
}

.osu-cat-grandchildren a:hover{
  color:#1671d8;
}

.osu-category-mega-empty{
  padding:10px 0 18px;
}

.osu-category-mega-empty p{
  margin:0;
  color:#7a858c;
  font-size:13px;
}

.osu-category-mega-view-all{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:42px;
  margin-top:22px;
  border:1px solid #d8e8f7;
  border-radius:9px;
  background:#f4f9ff;
  color:#1671d8;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

.osu-category-mega-view-all:hover{
  background:#e9f4ff;
  color:#0f63be;
}

.osu-cat-admin-note{
  padding:12px 14px;
  border:1px solid #f1c36d;
  border-radius:8px;
  background:#fff8e8;
  color:#7a5512;
  font-size:13px;
}

/*
 * Elementor:
 * Gắn class `osu-sidebar-host` vào container chứa shortcode
 * nếu container/theme đang clip overflow.
 */
.osu-sidebar-host{
  position:relative;
  z-index:50;
  overflow:visible !important;
}

.osu-sidebar-host > .e-con-inner,
.osu-sidebar-host > .elementor-widget,
.osu-sidebar-host .elementor-widget-shortcode,
.osu-sidebar-host .elementor-widget-container{
  overflow:visible !important;
}

/* Tablet */
@media (max-width:1024px){
  .osu-category-mega{
    width:min(var(--osu-mega-width,520px), calc(100vw - var(--osu-sidebar-width,250px) - 8px));
  }

  .osu-cat-mega-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width:767px){
  .osu-category-sidebar-wrap{
    width:100%;
    max-width:100%;
    flex-basis:100%;
  }

  .osu-category-sidebar{
    border-radius:10px;
  }

  .osu-category-sidebar-scroll{
    max-height:300px;
  }

  .osu-category-mega{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:999999;
    width:100vw;
    max-width:none;
    height:100dvh;
    transform:translateX(100%);
    opacity:1;
  }

  .osu-category-mega.is-open{
    transform:translateX(0);
  }

  .osu-category-mega-panel{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .osu-category-mega-head{
    padding:16px 15px 14px;
  }

  .osu-category-mega-body{
    padding:18px 15px 24px;
  }

  .osu-cat-mega-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px;
  }
}