/* ============================================================
khung.css — bộ khung dùng chung Thế Giới Công Nghệ Bình Minh
Dựng đêm 2026-08-24. Phục vụ tại https://congnghebinhminh.com/chung/khung.css
Nguồn: gom toàn bộ CSS nội tuyến của /var/www/binhminh/trongnha.html
+ thanh trên / cột trái + NĂM TRẠNG THÁI của ô.
============================================================ */
/* ---------- 1. Bảng màu (giữ nguyên từ trongnha.html) ---------- */
:root{
--ground:#0F1420; --surface:#171E2E; --surface-2:#1E2739;
--ink:#EAEEF6; --ink-2:#9AA6BC; --ink-3:#6D7A91;
--accent:#FF7A45; --accent-soft:#2E1C16;
--line:#2B3448; --line-soft:#212938;
--ok:#4FC38A; --ok-bg:#0F2A1E;
--wip:#D9C24E; --wip-bg:#2A2210;
--canh:#FF9A4D; --canh-bg:#331E0C;
--cot:236px;
--glow:rgba(255,122,69,.13);
}
/* ---------- 2. Nền chung ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* ---------- 3. Thanh trên ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topin{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em}
.brand span{color:var(--accent)}
.spacer{flex:1}
.who{font-size:13.5px;color:var(--ink-2)}
.role{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
background:var(--accent-soft);color:var(--accent);padding:3px 8px;border-radius:3px;margin-left:8px}
.out{font-size:13px;color:var(--ink-3);border:1px solid var(--line);padding:5px 12px;border-radius:4px}
.out:hover{border-color:var(--accent);color:var(--accent)}
.quaylai{font-size:13px;color:var(--ink-3);white-space:nowrap}
.quaylai:hover{color:var(--accent)}
/* ---------- 4. Thân trang + cột trái ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:32px 24px 80px}
.than{max-width:1080px;margin:0 auto;display:flex;align-items:flex-start;gap:0}
.than > .wrap{flex:1;min-width:0;margin:0;max-width:none}
.cottrai{width:var(--cot);flex:0 0 var(--cot);padding:32px 20px 80px 24px;
position:sticky;top:57px;align-self:flex-start}
.cottrai .nhom{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;padding:0 10px}
.cottrai .nhom + .nhom{margin-top:0}
.cottrai ul{list-style:none;margin:0 0 22px;padding:0}
.cottrai li{margin:0}
.cottrai a,.cottrai span.muc{display:block;padding:7px 10px;border-radius:5px;font-size:13.5px;
color:var(--ink-2);border-left:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.cottrai a:hover{background:var(--surface-2);color:var(--ink)}
.cottrai a.dang{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:500}
.cottrai span.muc{color:var(--ink-3);opacity:.55;cursor:default}
/* ---------- 5. Ô nhỏ (thẻ) — bản cũ, giữ để trang hiện tại chạy y nguyên ---------- */
h2{font-family:Archivo,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;margin-bottom:38px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;display:block;
transition:border-color .15s,transform .15s}
.card.live:hover{border-color:var(--accent);transform:translateY(-2px)}
.card.live:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.soon{opacity:.55;cursor:default}
.ct{font-family:Archivo,sans-serif;font-weight:600;font-size:15.5px;margin-bottom:3px}
.cd{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--accent);margin-bottom:9px}
.card.soon .cd{color:var(--ink-3)}
.cs{font-size:12.5px;color:var(--ink-2);font-weight:300;line-height:1.5;margin-bottom:11px}
.chip{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.08em;
text-transform:uppercase;padding:3px 7px;border-radius:3px}
.chip.on{background:var(--ok-bg);color:var(--ok)}
.chip.off{background:var(--wip-bg);color:var(--wip)}
/* ---------- 6. Dải tóm tắt + chân trang ---------- */
.strip{background:var(--surface);border:1px dashed var(--line);border-radius:8px;padding:18px 22px;margin-bottom:34px}
.strip .lbl{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.strip .txt{font-size:13.5px;color:var(--ink-3);font-weight:300}
footer{max-width:1080px;margin:0 auto;padding:0 24px 60px;font-size:12.5px;color:var(--ink-3);font-weight:300}
/* ============================================================
7. NĂM TRẠNG THÁI CỦA Ô
Dùng: … / …
Ô KHÔNG CÓ QUYỀN thì KHÔNG vẽ ra HTML — cố ý không có lớp cho nó.
============================================================ */
/* nền chung của mọi ô */
.o{position:relative;display:block;background:var(--surface);border:1px solid var(--line);
border-radius:8px;padding:18px 20px;min-height:118px;
transition:border-color .15s,transform .15s,opacity .15s}
.o .ot{font-family:Archivo,sans-serif;font-weight:600;font-size:15.5px;margin-bottom:3px}
.o .od{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--accent);margin-bottom:9px}
.o .os{font-size:12.5px;color:var(--ink-2);font-weight:300;line-height:1.5;margin-bottom:11px}
.o .obao{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.08em;
text-transform:uppercase;padding:3px 7px;border-radius:3px;background:var(--surface-2);color:var(--ink-3)}
/* --- 7.1 .o-dangchay — màu đầy đủ, bấm được --- */
.o-dangchay{cursor:pointer}
.o-dangchay .obao{background:var(--ok-bg);color:var(--ok)}
.o-dangchay:hover{border-color:var(--accent);transform:translateY(-2px)}
.o-dangchay:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* --- 7.2 .o-dangtai — xám NHẤP NHÁY, KHÔNG có chữ --- */
.o-dangtai{border-color:var(--line-soft);cursor:progress;pointer-events:none;
animation:o-nhapnhay 1.15s ease-in-out infinite}
.o-dangtai > *{visibility:hidden} /* nuốt mọi chữ bên trong */
.o-dangtai::before,.o-dangtai::after{content:"";position:absolute;left:20px;
background:var(--surface-2);border-radius:4px;display:block}
.o-dangtai::before{top:20px;width:55%;height:15px}
.o-dangtai::after{top:46px;width:80%;height:11px;
box-shadow:0 20px 0 -1px var(--surface-2),0 40px 0 -3px var(--surface-2)}
@keyframes o-nhapnhay{0%,100%{opacity:1}50%{opacity:.42}}
/* --- 7.3 .o-rong — khung đầy đủ, chữ "Chưa có dữ liệu trong khoảng này" --- */
/* Khung, tiêu đề, mã, nhãn vẫn nguyên vẹn; chỉ phần mô tả bị thay bằng câu báo rỗng.
Chữ do CSS cấp, HTML không cần ghi gì thêm. */
.o-rong{cursor:default}
.o-rong .obao{background:var(--surface-2);color:var(--ink-3)}
.o-rong .os{font-size:0;line-height:0}
.o-rong .os::after{content:"Chưa có dữ liệu trong khoảng này";
font-size:12.5px;line-height:1.5;font-weight:300;font-style:italic;color:var(--ink-3)}
.o-rong:empty::after,
.o-rong:not(:has(.os))::after{content:"Chưa có dữ liệu trong khoảng này";display:block;
font-size:12.5px;line-height:1.5;font-weight:300;font-style:italic;color:var(--ink-3)}
/* --- 7.4 .o-chuaxay — xám TĨNH, mờ 55%, không bấm được, chữ "Đang xây" --- */
.o-chuaxay{opacity:.55;cursor:default;pointer-events:none;filter:grayscale(1);
animation:none;transition:none}
.o-chuaxay .od{color:var(--ink-3)}
.o-chuaxay .obao{background:var(--wip-bg);color:var(--wip)}
.o-chuaxay .obao:empty::after{content:"Đang xây"} /* nhãn để trống thì CSS tự điền */
.o-chuaxay:hover{transform:none;border-color:var(--line)}
/* --- 7.5 .o-loi — VIỀN CAM, phần còn lại vẫn sống (vẫn bấm được, chữ vẫn rõ) --- */
.o-loi{border-color:var(--canh);border-width:1px;cursor:pointer}
.o-loi .obao{background:var(--canh-bg);color:var(--canh)}
.o-loi:hover{border-color:var(--canh);transform:translateY(-2px)}
.o-loi:focus-visible{outline:2px solid var(--canh);outline-offset:2px}
/* ---------- 8. Nhường người dùng & màn hình nhỏ ---------- */
@media (prefers-reduced-motion:reduce){
*{transition:none!important}
.o-dangtai{animation:none;opacity:.6}
}
@media(max-width:900px){
.than{display:block}
.cottrai{width:auto;flex:none;position:static;padding:20px 24px 0}
.cottrai ul{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.cottrai a,.cottrai span.muc{border-left:none;border:1px solid var(--line)}
}
@media(max-width:560px){
.wrap{padding:24px 16px 60px}
.topin{padding:12px 16px}
.cottrai{padding:16px 16px 0}
}
/* ============================================================
THEM: CHE DO SANG (noi vao cuoi khung.css — khong sua dong nao o tren)
May chu dong dau nen ngay khi
tai trang da biet chon che do nao -> KHONG loe toi roi moi sang.
Khong co cookie -> data-theme rong -> dung :root o tren = che do TOI.
Bang mau bieu do (--s1..--s4) DUNG CHUNG ca hai che do: da do lai tren
nen trang, dat ca 5 phep kiem mu mau.
Moi mau chu duoi day deu >= 4.5:1 tren the trang va tren nen xam.
============================================================ */
:root{ color-scheme: dark; }
:root[data-theme="sang"]{
--ground:#F2F5FA; --surface:#FFFFFF; --surface-2:#EDF1F7;
--ink:#17202F; --ink-2:#4E5C73; --ink-3:#67748A;
--accent:#C9501C; --accent-soft:#FDEEE6;
--line:#DCE3ED; --line-soft:#EAEFF6;
--ok:#12805A; --ok-bg:#E4F5EC;
--wip:#8A6D00; --wip-bg:#FBF3D6;
--canh:#B23C0B; --canh-bg:#FDE9DC;
--glow:rgba(201,80,28,.10);
color-scheme: light;
}
/* nut doi giao dien tren thanh tren */
.topbar .nutmau{
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:30px; margin-left:2px; padding:0;
background:transparent; border:1px solid var(--line); border-radius:7px;
color:var(--ink-2); cursor:pointer;
transition:border-color .15s, color .15s, background .15s;
}
.topbar .nutmau:hover{ border-color:var(--accent); color:var(--accent); background:var(--surface-2); }
.topbar .nutmau svg{ display:block; }