/* ============================================================================
   03 — KHUNG: thanh điều hướng + vùng nội dung
   Cấu trúc:  .app  >  .nav  +  .main
   Xem `shell.html` để lấy mẫu HTML tối thiểu.
   ============================================================================ */

.app{display:flex;min-height:100vh}

/* --- Thanh điều hướng bên trái --------------------------------------------- */
.nav{
  width:236px;flex-shrink:0;
  background:var(--nav);color:var(--nav-chu);
  padding:18px 0 14px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  transition:width .16s ease;
}

.brand{padding:0 18px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px;display:flex;align-items:center;gap:9px}
.brand .bt{flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;align-items:flex-start}
.brand .k{font-family:var(--mono);letter-spacing:.18em;color:#7E8BA1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .t{color:#fff;font-weight:650;white-space:nowrap}
/* Ô logo — vẽ bằng biến `--logo` (xem 00-bien.css). `filter` biến logo màu thành
   trắng phẳng để hợp với nền tối của thanh điều hướng. */
.blogo{flex:none;width:26px;height:26px;background:var(--logo) center/contain no-repeat;filter:brightness(0) invert(1);opacity:.96}

/* Nút thu gọn thanh điều hướng */
.navcol{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#AEB9CB;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.navcol:hover{color:#fff;background:rgba(255,255,255,.12)}

.navscroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.navgrp{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8B98AE;padding:12px 21px 5px}

/* ⚠ `white-space:normal` là CỐ Ý. Nhãn dài hơn bề ngang thanh menu thì cho XUỐNG
   DÒNG chứ đừng cắt cụt — mất một dòng còn hơn mất chữ. Giữ luật này kể cả khi
   nhãn hiện tại đang ngắn: đổi ngôn ngữ hoặc phóng to chữ là tràn ngay. */
.nav a{display:flex;align-items:center;gap:11px;padding:10px 18px;color:#AEB9CB;text-decoration:none;font-weight:500;border-left:3px solid transparent;white-space:normal}
.nav a .ic{width:20px;flex:none;text-align:center;font-size:15px;filter:grayscale(.35)}
.nav a .tx{overflow:visible;text-overflow:clip;line-height:1.3}
.nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
/* ⚠ Nền của mục đang chọn dùng `--accent-rgb` chứ không gõ cứng màu xanh. Bản
   gốc gõ cứng `rgba(46,90,172,.22)` nên ở nền tối nó vẫn ra xanh của bản sáng —
   lệch hẳn với `--accent` lúc đó. Đây là chỗ đã sửa, đừng gõ cứng lại. */
.nav a.on{color:#fff;background:color-mix(in srgb, var(--accent) 22%, transparent);border-left-color:var(--accent)}
.nav a.on .ic{filter:none}

/* Mục con: thụt vào cho thấy nó thuộc mục trên, bỏ icon để mắt đọc một cột chữ */
.nav a.navcon{padding-left:67px}
.nav a.navcon>.ic{display:none}

.navtools{padding:4px 12px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:8px}
.ntbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:#C7D0DE;padding:8px 10px;border-radius:8px;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden}
.ntbtn:hover{background:rgba(255,255,255,.10);color:#fff}
.ntbtn .tx{overflow:hidden;text-overflow:ellipsis}
/* ⚠ Đặt cỡ cho icon: thiếu luật này thì biểu tượng nhiều màu (🔄) trông to hơn hẳn
   biểu tượng nét chữ (⚙), hai nút nhìn lệch nhau dù cùng một lớp. */
.ntbtn .ic{width:20px;flex:none;text-align:center;font-size:15px;line-height:1}

.nav .foot{margin-top:auto;padding:12px 14px 0;color:#5E6B82;border-top:1px solid rgba(255,255,255,.08)}
.nav .footnote{margin-top:8px;line-height:1.5}

/* --- Thanh điều hướng thu gọn (chỉ còn dải icon) ---------------------------- */
html.nav-collapsed .nav{width:64px}
html.nav-collapsed .nav .tx,
html.nav-collapsed .navgrp,
html.nav-collapsed .brand .bt,
html.nav-collapsed .nav .footnote{display:none}
html.nav-collapsed .brand{padding:0 0 14px;justify-content:center}
html.nav-collapsed .nav a{justify-content:center;padding:11px 0;gap:0}
html.nav-collapsed .ntbtn{justify-content:center;padding:8px 0}
html.nav-collapsed .navtools,
html.nav-collapsed .nav .foot{padding-left:8px;padding-right:8px}
/* Thu gọn thì chữ biến mất — phải TRẢ ICON LẠI cho mục con, không thì nó thành
   một ô trống bấm được. */
html.nav-collapsed .nav a.navcon{padding-left:0}
html.nav-collapsed .nav a.navcon>.ic{display:block}

/* --- Vùng nội dung --------------------------------------------------------- */
.main{flex:1;min-width:0;padding:26px max(var(--pad-x),30px) 60px;max-width:none}
/* Không dàn chữ hết bề ngang màn 27 inch — mắt không đọc nổi dòng dài như vậy. */
.main>*{max-width:var(--cw);margin-left:auto;margin-right:auto}

/* --- Khối tiêu đề trang ----------------------------------------------------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.head .eyebrow{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.head h1{margin-top:3px}
.head p{margin:6px 0 0;color:var(--muted);max-width:60ch}