/* khung.css — KHUNG MENU TRÁI + LỚP GIAO DIỆN CHUNG cho mọi trang (giai đoạn C).
 *
 * Đo trực tiếp từ dashboard Ads_Yoko phổ "Hybrid" (D:\Ads_Yoko\web\dashboard\css\app.css, 13/10/2026):
 * thanh bên + dải đầu tối xanh rừng thông · viên chọn màu chanh · nội dung nền kem #f0f1ee · thẻ trắng bo 12px bóng mờ.
 * Người dùng (13/10/2026): giao diện đào tạo "chưa thuận mắt" cạnh dashboard → làm theo đúng số đo bên đó.
 * Màu là token ở :root — đổi màu thì đổi token. Bảng màu gốc: docs/mau-sac.md.
 */
/* Icon đặc bo tròn y như dashboard — chỉ tải đúng các icon menu dùng (icon_names, xếp A→Z), vài KB */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,1,0&icon_names=admin_panel_settings,assignment_turned_in,campaign,check_circle,chevron_left,chevron_right,grading,handshake,home,hourglass_top,inventory_2,layers,lock,logout,menu,menu_book,movie,rocket_launch,school,web,workspace_premium&display=block");

:root {
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nen: #f0f1ee; --the: #ffffff; --vien: #dbe2dc; --vien-mo: #e8ede8;
  --chu: #102020; --chu-2: #3e5650; --chu-mo: #566b65;
  --xanh: #0a6b50; --xanh-nhat: #e4ede4;
  --bong: 0 2px 8px rgba(16, 32, 32, .06);
  --bong-noi: 0 10px 24px rgba(16, 32, 32, .10);
  /* thanh bên */
  --sb-1: #0b2020; --sb-2: #0a1e1e; --sb-3: #081a1a;
  --sb-chu: #dfeae6; --sb-mo: #8fa8a0; --sb-trang: #ffffff;
  --sb-pill: #d2e97a; --sb-pill-2: #c4de5e; --sb-pill-chu: #102020;
  --sb-quote: #143030; --sb-khoa: #6b8580; --sb-xong: #b5e07a;
  /* dải đầu trang */
  --dd-nen: #102020; --dd-chu: #eef6f3; --dd-mo: #8fa8a0; --dd-vien: #3d6660; --dd-o-nen: #143030;
  --rong-sb: 224px;   /* dashboard 200px; đây có thêm dấu ✓ / ổ khóa sau mỗi mục nên nới 24px cho tên không xuống dòng */ --rong-sb-gon: 68px;
}

html, body { font-family: var(--font); }
body.co-khung { margin: 0; padding: 0 !important; background: var(--nen) !important; color: var(--chu); }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; display: inline-block;
  white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: "FILL" 1; }

.khung { display: grid; grid-template-columns: var(--rong-sb) minmax(0, 1fr); min-height: 100vh; }
.khung.thu-gon { grid-template-columns: var(--rong-sb-gon) minmax(0, 1fr); }
.khung.khong-phien { display: block; }
.khung.khong-phien > .sidebar, .khung.khong-phien > .sb-thu, .khung.khong-phien .dau-trang { display: none; }
.man-che { display: none; }   /* lớp phủ sau ngăn kéo — chỉ có trên điện thoại, nếu không nó chiếm một cột lưới */

/* ---------- Thanh bên (số đo dashboard: rộng 200 · mục 14px/500 · đệm 11×10 · bo 10) ---------- */
.sidebar {
  background: linear-gradient(180deg, var(--sb-1) 0%, var(--sb-2) 42%, var(--sb-3) 100%);
  color: var(--sb-trang); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  padding: 0 0 12px; overflow-y: auto; overflow-x: hidden; z-index: 40;
  scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: transparent transparent;
}
.sidebar:hover { scrollbar-color: rgba(143, 168, 160, .45) transparent; }
.sb-logo { display: flex; align-items: center; gap: 8px; padding: 14px 10px 12px 12px; color: inherit; text-decoration: none; }
.sb-logo .bieu { flex: none; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--sb-pill), #b9d45a); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.sb-logo .bieu .ms { font-size: 24px; color: var(--sb-pill-chu); }
.sb-logo b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: var(--sb-trang); }
.sb-logo small { display: block; color: var(--sb-mo); font-size: 11.5px; white-space: nowrap; }

.sb-nhom { padding: 12px 20px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-mo); white-space: nowrap; }
.sb-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; position: relative; }
.sb-nav a, .sb-nav .muc-khoa {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px;
  color: var(--sb-chu); font-weight: 500; font-size: 14px; line-height: 1.25; text-decoration: none;
  transition: background .18s, transform .12s;
}
.sb-nav a:hover { background: rgba(223, 234, 230, .1); color: var(--sb-trang); }
.sb-nav a .ms { transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); }
.sb-nav a:hover .ms { transform: translateX(3px); }
.sb-nav a:active { transform: scale(.97); }
.sb-nav a.on { background: linear-gradient(90deg, var(--sb-pill-2), var(--sb-pill)); color: var(--sb-pill-chu); font-weight: 600; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.sb-nav a.on.dang-truot { background: transparent; box-shadow: none; }   /* viên chọn đang trượt tới — tới nơi mới tô */
.sb-nav .vien-truot { position: absolute; z-index: 0; left: 8px; right: 8px; border-radius: 10px; background: linear-gradient(90deg, var(--sb-pill-2), var(--sb-pill)); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); pointer-events: none; transition: top .32s cubic-bezier(.3, 1.3, .5, 1), height .32s; }
.sb-nav .ms { font-size: 22px; flex: none; }
.sb-nav .chu { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-nav .chu small { display: block; font-size: 11.5px; font-weight: 500; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sb-nav .trang-thai { flex: none; font-size: 17px; }
.sb-nav .trang-thai.xong { color: var(--sb-xong); }
.sb-nav a.on .trang-thai.xong { color: var(--sb-pill-chu); }
.sb-nav .muc-khoa { color: var(--sb-khoa); cursor: not-allowed; }
.sb-nav .the-sap { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(143, 168, 160, .16); color: var(--sb-mo); white-space: nowrap; }

/* mục con: vạch dọc thẳng giữa icon menu cha (dashboard: lề 20 · đệm 12) */
.sb-con { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 20px; padding-left: 8px; border-left: 1px solid var(--sb-mo); }
.sb-con a, .sb-con .muc-khoa { font-size: 13.5px; padding: 8px 8px 8px 10px; gap: 7px; }
.sb-con .trang-thai { font-size: 15px; }
.sb-con .ms { font-size: 18px; }
.sb-con a.on { box-shadow: none; }

.sb-cuoi { margin-top: auto; padding: 14px 8px 0; display: grid; gap: 8px; }
.sb-quote { position: relative; background: var(--sb-quote); border-radius: 12px; padding: 16px 16px 18px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sb-quote .loi { font-style: italic; font-size: 14px; line-height: 1.45; color: var(--sb-chu); }
.sb-quote .loi b { color: var(--sb-pill); font-weight: 700; }
.sb-quote .ms { position: absolute; right: 14px; bottom: 12px; font-size: 30px; color: var(--sb-pill); }

/* nút tròn ‹ › trên mép thanh bên, ngang logo (dashboard 09/10/2026) */
.sb-thu { position: fixed; z-index: 45; top: 18px; left: calc(var(--rong-sb) - 12px); width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(223, 234, 230, .35); background: var(--sb-1); color: var(--sb-chu); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); cursor: pointer; transition: background .18s, color .18s, transform .12s; }
.sb-thu:hover { background: var(--sb-pill); color: var(--sb-pill-chu); border-color: var(--sb-pill); }
.sb-thu:active { transform: scale(.92); }
.sb-thu .ms { font-size: 18px; }
.thu-gon .sb-thu { left: calc(var(--rong-sb-gon) - 12px); }
.thu-gon .sb-logo > div:not(.bieu), .thu-gon .sb-nhom, .thu-gon .sb-nav .chu, .thu-gon .sb-nav .trang-thai, .thu-gon .sb-nav .the-sap, .thu-gon .sb-cuoi, .thu-gon .sb-con { display: none; }
.thu-gon .sb-logo, .thu-gon .sb-nav a, .thu-gon .sb-nav .muc-khoa { justify-content: center; padding-left: 0; padding-right: 0; }
.thu-gon .sb-nav a:hover .ms { transform: none; }

/* ---------- Dải đầu trang (dashboard: đệm 13 16 13 26 · chào 15/700) ---------- */
.noi-dung { min-width: 0; }
.dau-trang { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 26px; background: var(--dd-nen); border-bottom: 1px solid #1c3a3a; }
.dau-trang .chao { min-width: 0; }
.dau-trang .chao b { display: block; font-size: 15px; font-weight: 700; color: var(--dd-chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau-trang .chao small { display: block; color: var(--dd-mo); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tien-do { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; margin-left: 20px; border: 1px solid var(--dd-vien); background: var(--dd-o-nen); border-radius: 9px; color: var(--dd-chu); font-size: 13px; font-weight: 500; white-space: nowrap; }
.o-tien-do .ms { font-size: 19px; color: var(--sb-pill); }
.o-tien-do .ky-chip { font-weight: 700; font-size: 12px; color: var(--sb-pill-chu); background: var(--sb-pill); border-radius: 7px; padding: 3px 9px; }
.phai-dau { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nguoi { display: flex; align-items: center; gap: 10px; }
.nguoi .avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sb-pill); color: var(--sb-pill-chu); display: grid; place-items: center; font-weight: 800; font-size: 13.5px; }
.nguoi b { display: block; font-size: 13.5px; color: var(--dd-chu); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.nguoi small { color: var(--dd-mo); font-size: 12px; }
.nut-dd { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 9px; border: 1px solid var(--dd-vien); background: transparent; color: var(--dd-chu); cursor: pointer; transition: background .18s, color .18s; }
.nut-dd .ms { font-size: 20px; }
.nut-dd:hover { background: var(--sb-pill); color: var(--sb-pill-chu); border-color: var(--sb-pill); }
.nut-menu { display: none; }

/* ---------- LỚP GIAO DIỆN CHUNG cho nội dung trang (chỉ khi có khung) ----------
   Trang cũ để nội dung trong MỘT tờ giấy trắng lớn đặt trên nền xám, bên trong lại là các khối nền kem → hai lớp khung
   chồng nhau, khối kem chìm vào nền. Dashboard: thẻ TRẮNG bo 12px bóng mờ đặt thẳng lên nền kem. Ở đây gỡ tờ giấy
   ngoài và đổi khối kem thành thẻ trắng — không sửa một dòng HTML nào của trang. */
.vung-trang { padding: 14px 14px 36px 16px; }
.vung-trang > #mainContent, .vung-trang > #portalContent, .vung-trang > #adminContent {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
.vung-trang .bg-\[\#f7f5ef\] { background-color: var(--the) !important; border-color: var(--vien-mo) !important; box-shadow: var(--bong); transition: box-shadow .18s ease, border-color .18s ease; }
.vung-trang .bg-\[\#f7f5ef\]:hover { box-shadow: var(--bong-noi); border-color: var(--vien) !important; }
.vung-trang .bg-\[\#f7f5ef\] .bg-\[\#f7f5ef\] { box-shadow: none; background-color: #fafbf8 !important; }   /* khối kem lồng trong khối kem: nền nhạt, không bóng */
.vung-trang .border-\[\#e5e2d9\] { border-color: var(--vien-mo) !important; }
.vung-trang .rounded-2xl { border-radius: 12px; }
/* tiêu đề trang (STEP 0x / tên Step): chữ đậm tối như dashboard thay cho cam / vàng */
.vung-trang h1.text-amber-500, .vung-trang h1.text-orange-500 { color: var(--chu) !important; }

/* ---------- Màn vừa: thanh bên chỉ còn icon (dashboard: ≤ 1024px tự thu) ---------- */
@media (max-width: 1024px) and (min-width: 769px) {
  .khung { grid-template-columns: var(--rong-sb-gon) minmax(0, 1fr); }
  .khung .sb-logo > div:not(.bieu), .khung .sb-nhom, .khung .sb-nav .chu, .khung .sb-nav .trang-thai, .khung .sb-nav .the-sap, .khung .sb-cuoi, .khung .sb-con { display: none; }
  .khung .sb-logo, .khung .sb-nav a, .khung .sb-nav .muc-khoa { justify-content: center; padding-left: 0; padding-right: 0; }
  .sb-thu, .o-tien-do { display: none; }
}
/* ---------- Điện thoại: thanh bên thành ngăn kéo ---------- */
@media (max-width: 768px) {
  .khung, .khung.thu-gon { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 248px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  .khung.mo-ngan .sidebar { transform: none; }
  .khung.mo-ngan .man-che { display: block; position: fixed; inset: 0; background: rgba(8, 26, 26, .55); z-index: 35; }
  .sb-thu, .o-tien-do, .nguoi > div { display: none; }
  .nut-menu { display: inline-grid; }
  .dau-trang { padding: 9px 12px; gap: 10px; }
  .dau-trang .chao small { display: none; }
  .vung-trang { padding: 10px 8px 32px; }
}