/* ==============================
   NTD LAYOUT 2.0 (ORANGE) - PORT 100%
   Áp cho: .ntd-shell / sidebar / header / content
============================== */

/* SHELL: 1 KHỐI DUY NHẤT + 1 ĐỔ BÓNG */
.ntd-shell{
  width: calc(100% - 24px);
  height: calc(100vh - 24px);
  margin: 12px auto;
  border-radius: var(--ntd-radius-lg);
  overflow:hidden;
  display:flex;
  box-shadow: var(--ntd-shadow-main);

  /* NỀN TỔNG THỂ CAM (đồng tông sidebar) */
  background: linear-gradient(
    180deg,
    var(--ntd-orange-2) 0%,
    var(--ntd-orange-1) 55%,
    #ffa55a 100%
  );
}

/* SIDEBAR */
.ntd-sidebar{
  width: 290px;
  min-width: 290px;
  padding: 16px 14px;
  display:flex;
  flex-direction:column;

  /* Sidebar cùng nền với shell => liền khối */
  background: transparent;

  /* đường phân tách nhẹ, không làm “2 hộp” */
  border-right: 1px solid rgba(255,255,255,.28);
}

/* BRAND */
.ntd-sidebar__brand{
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow: var(--ntd-shadow-soft);
}

.ntd-brand{
  display:flex;
  gap:10px;
  align-items:center;
  color:#fff;
}
.ntd-brand__logo{
  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff;
  color:var(--ntd-orange-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.ntd-brand__text{ display:flex; flex-direction:column; }
.ntd-brand__name{font-weight:800; line-height:1.1;}
.ntd-brand__sub{font-size:12px;opacity:.95; line-height:1.2;}

.ntd-sidebar__toggle{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.65);
  background: #fff;
  color: var(--ntd-orange-3);
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* NAV */
.ntd-nav{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding: 6px;
}

/* menu không chìm: luôn có nền nhẹ */
.ntd-nav__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  color:#fff;
  text-decoration:none;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  transition:.15s;
}
.ntd-nav__link:hover{
  background: rgba(255,255,255,.20);
}
.ntd-nav__link.active{
  background: rgba(255,255,255,.30);
  border-color: rgba(255,255,255,.35);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
}

.ntd-nav__icon{ width:22px; text-align:center; }
.ntd-nav__text{ font-weight:800; }

.ntd-sidebar__footer{
  margin-top:auto;
  padding: 10px 6px 2px 6px;
}
.ntd-footer-text{
  color:#fff;
  font-size:12px;
  opacity:.95;
}

/* MAIN: giữ nền cam cùng shell để liền khối */
.ntd-main{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:16px;
  background: transparent;
}

/* HEADER: cùng tông cam, shadow mềm */
.ntd-header{
  border-radius: 22px;
  padding:16px 20px;
  color:#fff;

  background: linear-gradient(
    90deg,
    var(--ntd-orange-2) 0%,
    var(--ntd-orange-1) 60%,
    #ffd6b8 100%
  );
  box-shadow: var(--ntd-shadow-soft);

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ntd-page__title{
  font-size:20px;
  font-weight:900;
}
.ntd-page__subtitle{
  font-size:13px;
  opacity:.95;
}

/* USER */
.ntd-userbox{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.28);
  padding:8px 12px;
  border-radius:999px;
}
.ntd-userbox__avatar{
  width:32px;height:32px;
  border-radius:999px;
  background:#fff;
  color:var(--ntd-orange-2);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ntd-userbox__name{
  font-weight:900;
  color:#fff;
  white-space:nowrap;
}

/* CONTENT: card trắng nổi lên trên nền cam */
.ntd-content{
  margin-top:14px;
  flex:1;
  background: rgba(255,255,255,.92);
  border-radius: var(--ntd-radius-lg);
  box-shadow: var(--ntd-shadow-soft);
  padding:18px;
  overflow:auto;
  border: 1px solid rgba(15,23,42,.06);
}

/* Collapsed */
.ntd-shell.ntd-collapsed .ntd-sidebar{
  width:92px;
  min-width:92px;
}
.ntd-shell.ntd-collapsed .ntd-brand__text,
.ntd-shell.ntd-collapsed .ntd-nav__text,
.ntd-shell.ntd-collapsed .ntd-footer-text{
  display:none;
}
.ntd-shell.ntd-collapsed .ntd-sidebar__toggle{
  transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 992px){
  .ntd-shell{
    width:100%;
    height:100vh;
    margin:0;
    border-radius:0;
  }
  .ntd-sidebar{
    width:260px;
    min-width:260px;
  }
}