/* VỎ KHUNG COS kiểu website — 05/10/2026, user DUYỆT: "tất cả các phần của hệ thống COS nên mở hết cỡ! có menu dọc bên trái;
   menu ngang trên đầu nhìn chuyên nghiệp như một website; các ô tab menu làm nhỏ, sắc nét; các nút bấm nhỏ gọn".
   Chỉ có hiệu lực khi <body class="vo"> (cos_vo_khung.js bật) — thiếu tệp js thì app chạy y như khung 760px cũ.
   Thanh ngang 48px (logo · 6 tab luồng · tài khoản) · menu dọc 232px = #luong-menu (cos_menu_luong.js) · nội dung giãn hết cỡ.
   KHÔNG dùng shorthand `font: … inherit` (không hợp lệ, trình duyệt bỏ cả dòng) — tách từng thuộc tính. */
body.vo{--vo-cao:48px; --vo-rong:232px; --vo-thu:56px; font-size:14px}
body.vo #app{max-width:none; padding-bottom:24px}

/* ── Thanh ngang trên cùng ── */
body.vo header{position:sticky; top:0; z-index:30; height:var(--vo-cao); padding:0 16px; gap:16px; justify-content:flex-start;
  background:var(--navy); backdrop-filter:none}
body.vo header h1{font-size:15px !important; line-height:1.1 !important; white-space:nowrap}
body.vo header #cos-tagline{font-size:11px !important}
body.vo header .hello, body.vo header .hud-dot{display:none}
body.vo #tabs-wrap{flex:1 1 auto; min-width:0; align-self:stretch; display:flex}
body.vo #tabs-wrap .tabs{position:static; flex:1; height:100%; background:none; border:0; backdrop-filter:none; align-items:center; gap:2px}
body.vo #tabs-wrap .tabs-arrow{display:none !important}
body.vo .tabs > .luong-tab{align-self:center; height:32px; padding:0 12px; font-size:13px; font-weight:600; letter-spacing:.01em;
  border-bottom-width:2px; border-radius:0; color:var(--muted)}
body.vo .tabs > .luong-tab > span[aria-hidden]{display:none}
body.vo .tabs > .luong-tab.dang-xem{color:var(--gold-l)}
body.vo .tk-menu{margin-left:auto}
body.vo #tk-nut{padding:5px 10px; font-size:13px; border-radius:6px}
body.vo #subtabs-wrap{display:none}
.vo-nut-menu{display:none; flex:none; width:32px; height:32px; margin:0; padding:0; font-family:inherit; font-size:18px; line-height:1;
  color:var(--gold); background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer}

/* ── Menu dọc bên trái (chính là #luong-menu) ── */
body.vo #luong-menu{display:flex; flex-direction:column; position:fixed; z-index:25; top:var(--vo-cao) !important; left:0 !important;
  right:auto !important; bottom:0; width:var(--vo-rong) !important; max-height:none; padding:8px; overflow-y:auto;
  background:color-mix(in srgb, var(--navy2) 55%, var(--navy)); border:0; border-right:1px solid var(--line); border-radius:0;
  box-shadow:none}
body.vo #luong-menu.hide{display:flex}
.vo-dau{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 4px 8px; border-bottom:1px solid var(--line);
  margin-bottom:6px}
.vo-ten-luong{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-l); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.vo-thu-nut{flex:none; width:26px; height:26px; margin:0; padding:0; font-family:inherit; font-size:14px; line-height:1;
  color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer}
.vo-thu-nut:hover{color:var(--gold)}
body.vo #luong-menu input[type=search]{margin:0 0 6px; padding:6px 8px; font-size:13px; border-radius:6px}
body.vo .luong-ds button{display:flex; align-items:center; gap:2px; min-height:34px; padding:6px 10px; font-size:13px; line-height:1.25;
  border-radius:6px; border-left:3px solid transparent}
body.vo .luong-ds button[aria-current="page"]{background:color-mix(in srgb, var(--gold) 14%, transparent); border-left-color:var(--gold)}
body.vo .luong-nhom{padding:10px 10px 4px; font-size:11px}
.vo-ic{flex:none; display:inline-block; width:22px; text-align:center}
.vo-luong-ds{display:none}

/* Thu gọn thành cột biểu tượng */
body.vo.vo-thu #luong-menu{width:var(--vo-thu) !important; padding:8px 6px}
body.vo.vo-thu .vo-ten-luong, body.vo.vo-thu #luong-loc, body.vo.vo-thu .luong-nhom, body.vo.vo-thu .vo-nhan,
body.vo.vo-thu .luong-trong{display:none}
body.vo.vo-thu .vo-dau{justify-content:center}
body.vo.vo-thu .luong-ds button{justify-content:center; padding:6px 0}

/* ── Vùng nội dung ── */
body.vo #v-main > :not(header):not(#luong-menu):not(.vo-phu){margin-left:var(--vo-rong)}
body.vo.vo-thu #v-main > :not(header):not(#luong-menu):not(.vo-phu){margin-left:var(--vo-thu)}
body.vo .card{margin:12px 24px; padding:16px 20px; border-radius:8px}
body.vo .card h3{font-size:15px}

/* ── Chuẩn nút / thẻ / ô nhập gọn ── */
body.vo .btn{min-height:32px; padding:6px 14px; font-size:13px; line-height:1.2; border-radius:6px}
body.vo .btn-sm, body.vo .btn-danger, body.vo .btn-success{min-height:26px; padding:3px 10px; font-size:12px; border-radius:6px}
body.vo .btn-outline, body.vo .btn-danger, body.vo .btn-success{border-width:1px}
body.vo .pill{padding:2px 8px; font-size:11px; line-height:16px}
body.vo input:not([type=checkbox]):not([type=radio]), body.vo select, body.vo textarea{padding:7px 10px; font-size:14px; border-radius:6px; border-width:1px}

/* ── Màn hẹp: menu dọc thành ngăn trượt từ trái, mở bằng ☰ ── */
.vo-phu{display:none}
@media (max-width:999px){
  body.vo{--vo-rong:0px}
  body.vo .vo-nut-menu{display:inline-block}
  body.vo #tabs-wrap{display:none}
  /* Ngăn đóng phải ẨN HẲN (visibility) sau khi trượt xong — chỉ đẩy ra ngoài màn thì Tab bàn phím vẫn vào được các mục,
     và lúc trượt về nó còn lộ dưới menu tài khoản (bộ đo 390px bắt chong_lan, 05/10). */
  body.vo #luong-menu{width:min(300px, 86vw) !important; transform:translateX(-102%); visibility:hidden;
    transition:transform .18s ease-out, visibility 0s linear .18s; z-index:45}
  body.vo.vo-mo #luong-menu{transform:none; visibility:visible; transition:transform .18s ease-out; box-shadow:8px 0 32px rgba(0,0,0,.5)}
  body.vo.vo-mo .vo-phu{display:block; position:fixed; inset:var(--vo-cao) 0 0 0; z-index:44; background:rgba(0,0,0,.45)}
  body.vo .vo-thu-nut{display:none}
  body.vo .vo-luong-ds{display:flex; flex-direction:column; gap:2px; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--line)}
  body.vo .vo-luong-ds button{min-height:34px; margin:0; padding:6px 10px; text-align:left; font-family:inherit; font-size:13px; font-weight:600;
    color:var(--muted); background:transparent; border:0; border-radius:6px; cursor:pointer}
  body.vo .vo-luong-ds button.on{color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, transparent)}
  body.vo.vo-thu #v-main > :not(header):not(#luong-menu):not(.vo-phu){margin-left:0}
  body.vo .card{margin:10px 12px; padding:14px}
  body.vo input:not([type=checkbox]):not([type=radio]), body.vo select, body.vo textarea{font-size:16px}
}