/* theme.css — Chuẩn giao diện trích xuất từ trang gốc (a2u4k.ee88dly.com)
   Cấu trúc & lớp: docs Layui. Giá trị màu/kích thước/vị trí: đo trực tiếp trên trang thật.
   Token chính: side #20222a / 220px, header #fff / 50px, accent #009688, tab 40px. */

/* ── Header: nền trắng, cao 50, viền dưới #f6f6f6, không shadow (đo từ gốc) ── */
.layui-layout-admin .layui-header {
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #f6f6f6;
  box-shadow: none;
}
.layui-layout-admin .layui-header .layui-nav-item { line-height: 50px; }
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a { color: #666; }
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover { color: #009688; }
.layui-layout-admin .layui-header .layui-nav .layui-nav-bar { background-color: #009688; }
.layui-layout-admin .layui-header .layui-nav-more { border-top-color: #666; }

/* ── Logo: hộp tối góc trái, 220px, chữ 16/300 căn giữa, shadow nhẹ (đo từ gốc) ── */
.layui-layout-admin .layui-logo {
  width: 220px;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #20222a;
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
}
.layui-layout-admin .layui-layout-left { left: 220px; }

/* ── Side: nền tối #20222a, rộng 220, tràn từ đỉnh ── */
.layui-layout-admin .layui-side {
  top: 0;
  width: 220px;
  background-color: #20222a;
  box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);
}
/* scroll rộng hơn 20px để giấu thanh cuộn ra ngoài vùng 220 */
.layui-layout-admin .layui-side .layui-side-scroll {
  width: 240px;
  padding-top: 50px;        /* chừa chỗ cho logo phía trên */
  box-sizing: border-box;
}
/* UL nav mặc định layui có nền #2f363c (sáng hơn side #20222a) → set trong suốt
   để cả vùng menu đồng màu nền như site gốc. */
.layui-layout-admin .layui-side .layui-nav-tree { width: 220px; background-color: transparent; }

/* ── Mục menu: li cao 56, <a> padding 8/30/8/45, chữ rgba(255,255,255,.7) ── */
.layui-nav-tree .layui-nav-item > a {
  padding: 8px 30px 8px 45px;
  color: rgba(255, 255, 255, .7);
}
/* Mục con: căn lề trái = lề chữ của mục cha (45px) cho thẳng hàng, vì
   default layui chỉ cho dd a padding 0 20px → con lệch trái hơn cha. */
.layui-nav-tree .layui-nav-child dd a { padding-left: 45px; }
/* Nút chưa active = đúng màu nền (phẳng); xổ ra hay hover đều không đổi nền,
   chỉ thanh trượt trái + item con active (xanh) mới nổi. */
.layui-nav-tree .layui-nav-itemed > a { background-color: transparent; }
.layui-nav-tree .layui-nav-item > a:hover { background-color: transparent; color: #fff; }
.layui-nav-tree .layui-nav-item > a > .layui-icon {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  height: 14px;
  margin: auto 0;
  line-height: 14px;
  font-size: 14px;
}
/* Mục đang chọn + thanh trượt: xanh #009688 (accent gốc).
   Selector phủ cả mục con .layui-nav-child dd.layui-this để đè #16baaa mặc định. */
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this > a:hover,
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-nav-child dd.layui-this a:hover { background-color: #009688; color: #fff; }
.layui-layout-admin .layui-side .layui-nav-tree .layui-nav-bar {
  width: 5px;
  background-color: #009688;
}

/* ── Body: trái 220, ngay dưới header; tab + nội dung nằm trong ── */
.layui-layout-admin .layui-body {
  left: 220px;
  top: 50px;
  bottom: 0;
  padding-bottom: 0;
  background-color: #fff;
}

/* ── Thanh tab: cao 40, mục chọn nền #f6f6f6 ── */
#appTabs { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
#appTabs > .layui-tabs-header {
  flex: none;
  height: 40px;
  background-color: #fff;
  border-bottom: 1px solid #f6f6f6;
}
#appTabs > .layui-tabs-header > li {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  font-size: 14px;
}
#appTabs > .layui-tabs-header > li.layui-this { background-color: #f6f6f6; color: #000; }
#appTabs > .layui-tabs-body { flex: 1; overflow: auto; }
#appTabs > .layui-tabs-body > .layui-tabs-item { height: 100%; box-sizing: border-box; }

/* ── Nội dung trang ── */
.app-page { padding: 15px; }
.app-welcome { margin-top: 12px; }
.app-stat { padding: 18px 20px; }
.app-stat-label { color: #999; font-size: 13px; }
.app-stat-value { margin-top: 6px; font-size: 26px; font-weight: 500; color: #333; }

/* ── Trạng thái thu gọn menu (60px) ── */
.app-side-mini .layui-layout-admin .layui-side,
.app-side-mini .layui-side { width: 60px; }
.app-side-mini .layui-side .layui-side-scroll { width: 60px; }
.app-side-mini .layui-side .layui-nav-tree { width: 60px; }
/* Thu gọn: cho phép flyout tràn ra phải, không bị overflow-x cắt. */
.app-side-mini .layui-side,
.app-side-mini .layui-side .layui-side-scroll { overflow: visible; }
.app-side-mini .layui-nav-tree .layui-nav-item { position: relative; }
.app-side-mini .layui-nav-tree .layui-nav-item > a { padding: 8px 0; text-align: center; }
.app-side-mini .layui-nav-tree .layui-nav-item > a > .layui-icon { position: static; margin: 0; }
.app-side-mini .layui-nav-tree .layui-nav-item > a { font-size: 0; }
.app-side-mini .layui-nav-tree .layui-nav-item > a > .layui-icon { font-size: 16px; }
/* Thu gọn: ẩn mũi tên xổ; submenu chuyển sang flyout hiện khi hover. */
.app-side-mini .layui-nav-tree .layui-nav-more { display: none; }
/* Mặc định ẩn; định vị popup sát phải cột 60px, nền tối, đủ rộng để đọc. */
.app-side-mini .layui-nav-tree .layui-nav-item > .layui-nav-child {
  display: none;
  position: absolute;
  left: 60px;
  top: 0;
  min-width: 180px;
  padding: 5px 0;
  background-color: #2f3140;
  box-shadow: 2px 0 6px 0 rgba(0, 0, 0, .25);
  z-index: 1000;
}
/* Hover vào item (kể cả khi đang xổ accordion) thì bung flyout. */
.app-side-mini .layui-nav-tree .layui-nav-item:hover > .layui-nav-child { display: block; }
/* Trong flyout, mục con căn lề trái gọn lại (không còn 45px của chế độ thường). */
.app-side-mini .layui-nav-tree .layui-nav-item > .layui-nav-child dd a {
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
}
.app-side-mini .layui-logo { width: 60px; font-size: 0; }
.app-side-mini .layui-layout-admin .layui-layout-left { left: 60px; }
.app-side-mini .layui-layout-admin .layui-body { left: 60px; }