/* * ══ PHONG INTER — TU CHUA, KHONG GOI RA NGOAI ══════════════════════════════ * * Template dung Inter. Lay Google Fonts thi mot lan hong mang la ca giao dien * doi phong — phan mem nay chay trong luc dang phat song nen khong duoc phep * phu thuoc vao do. Ba tap ky tu (viet, latin-ext, latin) nam trong `phong/`, * tong 144 KB. `font-display: swap` de chu hien ngay bang phong du phong roi * doi, khong bao gio de trang trong chu. */ @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/phong/inter-vi.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/phong/inter-latext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/phong/inter-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* * ══ TOKEN — CHEP NGUYEN TU TEMPLATE shadcn ══════════════════════════════════ * * Nguon: shadcnstore/shadcn-dashboard-landing-template (MIT), * `nextjs-version/src/app/globals.css`. Moi gia tri oklch duoi day la gia tri * THAT trong tep do, khong phai phong theo. * * Vi sao oklch chu khong phai hex: `oklch(.97 0 0)` va `oklch(.922 0 0)` cach * nhau dung mot buoc do sang mat nguoi cam nhan duoc. Voi hex thi phai do tay * tung cap. Ca thang xam cua template dat tren truc do sang nay. * * ── MAC DINH LA SANG ────────────────────────────────────────────────────── * Template lay sang lam mac dinh (`:root` sang, `.dark` toi). Truoc day ben * minh nguoc lai. Da doi cho giong template. */ :root { --radius: .625rem; /* 10px */ --radius-sm: calc(var(--radius) - 4px); /* 6px */ --radius-md: calc(var(--radius) - 2px); /* 8px */ --radius-lg: var(--radius); /* 10px */ --radius-xl: calc(var(--radius) + 4px); /* 14px */ --background: oklch(1 0 0); --foreground: oklch(.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(.145 0 0); --primary: oklch(.205 0 0); --primary-foreground: oklch(.985 0 0); --secondary: oklch(.97 0 0); --secondary-foreground: oklch(.205 0 0); --muted-bg: oklch(.97 0 0); /* * ── MOT BAC TOI HON TEMPLATE, VA DAY LA LY DO ────────────────────────── * * Template dat `oklch(.556 0 0)`. Do that: tren nen TRANG no dat 4,74:1 — * qua chuan. Nhung chu mo phan lon nam tren nen MO (`--muted-bg`, * `oklch(.97 0 0)`): dau bang, thanh tab, nhan phu. O do no chi con * **4,35:1**, duoi chuan AA 4,5. * * Do la loi cua chinh bang mau shadcn, khong phai cua minh — nhung chu shop * doc bang so ca ngay, nen khong the giu nguyen mot con so duoi chuan tren * MOI man hinh. * * `.535` la buoc toi thieu du de qua: 5,17 tren trang, 4,75 tren nen mo. * Lech template ba don vi RGB (115 -> 109) — mat khong phan biet duoc. * Ban TOI cua template do duoc 5,86-7,66, dat san, nen giu nguyen. */ --muted-foreground: oklch(.535 0 0); --accent-bg: oklch(.97 0 0); --accent-foreground: oklch(.205 0 0); --destructive: oklch(.577 .245 27.325); --border: oklch(.922 0 0); --input: oklch(.922 0 0); --ring: oklch(.708 0 0); --chart-1: oklch(.646 .222 41.116); --chart-2: oklch(.6 .118 184.704); --chart-3: oklch(.398 .07 227.392); --chart-4: oklch(.828 .189 84.429); --chart-5: oklch(.769 .188 70.08); --sidebar: oklch(.985 0 0); --sidebar-foreground: oklch(.145 0 0); --sidebar-primary: oklch(.205 0 0); --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.97 0 0); --sidebar-accent-foreground: oklch(.205 0 0); --sidebar-border: oklch(.922 0 0); --sidebar-ring: oklch(.708 0 0); /* Bong do — dung dung thang cua template. */ --bong-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --bong-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --bong-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --bong-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); /* * THANG CHU — tam bac, khong hon. * Truoc do co 286 khai bao font-size voi hon 12 gia tri le. Bat ky co chu * nao khong nam trong bang nay deu la loi; `test/thang-giao-dien.test.js` chan. */ --chu-xs: .75rem; --dong-xs: 1rem; /* 12/16 */ --chu-sm: .875rem; --dong-sm: 1.25rem; /* 14/20 */ --chu-base: 1rem; --dong-base: 1.5rem; /* 16/24 */ --chu-lg: 1.125rem; --dong-lg: 1.75rem; /* 18/28 */ --chu-xl: 1.25rem; --dong-xl: 1.75rem; /* 20/28 */ --chu-2xl: 1.5rem; --dong-2xl: 2rem; /* 24/32 */ --chu-3xl: 1.875rem; --dong-3xl: 2.25rem; /* 30/36 */ /* THANG KHOANG CACH — luoi 4pt. */ --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 20px; --k-6: 24px; --k-8: 32px; --k-12: 48px; --k-16: 64px; /* * ── BI DANH CHO MA CU ───────────────────────────────────────────────── * 3.674 dong CSS va 10.706 dong JS dang goi ten cu. Anh xa sang ten moi thay * vi doi hang loat: doi hang loat la cach chac chan de sot mot cho roi khong * ai thay cho tao nao bi hong. */ --bg: var(--background); --panel: var(--card); --panel-2: var(--secondary); --panel-3: oklch(.94 0 0); --line: var(--border); --text: var(--foreground); --muted: var(--muted-foreground); --accent: var(--primary); --on-accent: var(--primary-foreground); --accent-text: var(--primary); --accent-dim: var(--accent-bg); --bad: var(--destructive); --bad-nut: var(--destructive); --on-bad: #fff; --r: var(--radius-lg); --shadow: var(--bong-sm); /* * Mau trang thai — template khong dinh nghia "dat/canh bao" nen phan nay giu * cua minh. Gia tri lay tu ban Sang cu, deu da do dat AA tren nen trang. */ --ok: #12734a; --ok-text: #12734a; --warn: #8a5a00; --warn-text: #8a5a00; --tin: #1a5fa8; --tin-text: #1a5fa8; --bad-text: #b3261e; --chip-tin: #1e5fa8; --chip-do: #b3261e; --chip-vang: #8a5a00; --chip-tim: #5b3fc4; /* * ── SAC THAI NEN/VIEN CUA MAU TRANG THAI ─────────────────────────────── * * Truoc day moi cho tu go `var(--warn-nen)`. Hai hau qua: * 1. Che do toi KHONG lat duoc — mot nen vang nhat go cung van sang choi * tren nen den. * 2. Cung mot y ("nen canh bao") co bon sac khac nhau (.10 .12 .14 .16) * tuy cho, vi moi lan viet la mot lan go lai tu dau. * * `color-mix` dan xuat tu chinh token mau, nen doi che do la ca bo doi theo. */ --ok-nen: color-mix(in oklch, var(--ok) 14%, transparent); --ok-vien: color-mix(in oklch, var(--ok) 40%, transparent); --warn-nen: color-mix(in oklch, var(--warn) 14%, transparent); --warn-vien:color-mix(in oklch, var(--warn) 40%, transparent); --bad-nen: color-mix(in oklch, var(--bad) 14%, transparent); --bad-vien: color-mix(in oklch, var(--bad) 40%, transparent); --tin-nen: color-mix(in oklch, var(--tin) 14%, transparent); --tin-vien: color-mix(in oklch, var(--tin) 40%, transparent); } /* * BAN TOI — chep tu khoi `.dark` cua template. * * Cho dang chu y: vien dung DO TRONG (`oklch(1 0 0 / 10%)`) chu khong phai mau * dac. Vien mau dac tren nen den luon trong nhu mot duong ke bi ve len; vien * trong thi hoa vao nen dung nhu template. */ :root[data-giao-dien="toi"] { --background: oklch(.145 0 0); --foreground: oklch(.985 0 0); --card: oklch(.205 0 0); --card-foreground: oklch(.985 0 0); --popover: oklch(.205 0 0); --popover-foreground: oklch(.985 0 0); --primary: oklch(.922 0 0); --primary-foreground: oklch(.205 0 0); --secondary: oklch(.269 0 0); --secondary-foreground: oklch(.985 0 0); --muted-bg: oklch(.269 0 0); --muted-foreground: oklch(.708 0 0); --accent-bg: oklch(.269 0 0); --accent-foreground: oklch(.985 0 0); --destructive: oklch(.704 .191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(.556 0 0); --chart-1: oklch(.488 .243 264.376); --chart-2: oklch(.696 .17 162.48); --chart-3: oklch(.769 .188 70.08); --chart-4: oklch(.627 .265 303.9); --chart-5: oklch(.645 .246 16.439); --sidebar: oklch(.205 0 0); --sidebar-foreground: oklch(.985 0 0); --sidebar-primary: oklch(.488 .243 264.376); --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.269 0 0); --sidebar-accent-foreground: oklch(.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(.556 0 0); --panel-3: oklch(.269 0 0); --on-bad: #fff; /* Do lai cho nen toi — gia tri ban Toi cu, deu dat AA tren oklch(.145 0 0). */ --ok: #35c07a; --ok-text: #35c07a; --warn: #e8b930; --warn-text: #e8b930; --tin: var(--tin-text); --tin-text: var(--tin-text); --bad-text: #f0555a; --chip-tin: #8ec5ff; --chip-do: #ff9d9d; --chip-vang: #ffd28a; --chip-tim: #b8a6ff; } /* * ══ TIEU DE: NEO THEO VAI TRO, KHONG THEO THE ═══════════════════════════════ * * ── DO THAT ─────────────────────────────────────────────────────────────── * Dot doi cap the tieu de (cho dung ngu nghia: mot h1 moi man, khong bo cap) * lam CHIN quy tac CSS im lang mat tac dung — chung neo vao `h3`/`h4` cu. * Bo kiem xanh, phep do ngu nghia sach, chi co anh chup moi lo ra mot cai * (ten the phien), va tam cai con lai phai quet CSS moi thay. * * Nay moi quy tac tieu de trong tep nay dung `:is(h1, h2, h3, h4)`: no neo vao * VAI TRO "tieu de cua khoi nay", khong vao mot con so co the doi. */ * { box-sizing: border-box; } /* * BAT BUOC. Thuoc tinh hidden cua HTML chi la 'display: none' o bang kieu mac dinh * cua trinh duyet, nen BAT KY quy tac display nao cua minh cung de lam no vo hieu * (vi du '#login { display: grid }'). Khi do man hinh dang nhap khong bao gio an di * ma cung khong bao loi gi — chi thay giao dien bi day xuong duoi man hinh. */ [hidden] { display: none !important; } /* * ── LOP NEN — chep tu `@layer base` cua template ────────────────────────── * * Template dat co chu goc 16px/1.5 (mac dinh cua Tailwind), khong phai 15px. * Mot pixel nghe nho nhung no keo lech CA thang chu: moi bac rem deu tinh tu * day. Sai goc thi khong the "giong het" duoc. */ * { border-color: var(--border); } :focus-visible { outline: 2px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--chu-base); line-height: 1.5; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Template co dung quy tac nay — man net cao doi sang khu rang phu diem anh. */ @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { body { -webkit-font-smoothing: subpixel-antialiased; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; } h2 { font-size: var(--chu-base); } h3 { font-size: var(--chu-base); } .muted { color: var(--muted); font-size: var(--chu-sm); } .hint { color: var(--muted); font-size: var(--chu-sm); margin: var(--k-1) 0 var(--k-3); line-height: 1.5; } .error { color: var(--bad-text); font-size: var(--chu-sm); } /* ---------- dang nhap ---------- */ .screen { min-height: 100vh; } #login { display: grid; place-items: center; padding: var(--k-4); } .login-card { width: min(390px, 100%); box-shadow: var(--shadow); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--k-6); } label { display: block; margin: var(--k-3) 0; font-size: var(--chu-sm); color: var(--muted); font-weight: 500; } input, select, textarea { display: block; width: 100%; margin-top: var(--k-1); padding: var(--k-2) var(--k-3); background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-md); font: inherit; transition: border-color .12s; } input:hover, select:hover { border-color: var(--panel-3); } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } button, .file-btn { font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; padding: var(--k-2) var(--k-4); border-radius: var(--radius-md); border: 1px solid transparent; transition: filter .12s, background .12s; } button:hover:not(:disabled), .file-btn:hover { filter: brightness(1.12); } button.primary, .file-btn { background: var(--accent); color: var(--on-accent); } button.ghost { background: var(--panel-2); color: var(--text); border-color: var(--line); } button.danger { background: var(--bad-nut); color: var(--on-bad); } button.big { padding: var(--k-3) var(--k-5); font-size: var(--chu-base); } button.sm { padding: var(--k-1) var(--k-2); font-size: var(--chu-sm); } /* * Nut mo: DOI MAU chu khong lam nhat di. * * `opacity: .45` tren nut cam nen trang cho ra chu trang tren cam nhat — do * duoc 1,6:1, gan nhu khong doc noi. Nguoi dung bam hoai roi tuong may treo. * Nay nut mo trong nhu mot nut khac han: nen xam, chu xam dam, van doc duoc. */ button:disabled, .file-btn:disabled { cursor: not-allowed; opacity: 1; background: var(--muted-bg); color: var(--muted-foreground); border-color: var(--line); box-shadow: none; } .file-btn { display: inline-block; } /* ---------- khung: thanh ben + vung noi dung ---------- * * Truoc day bay tab xep NGANG tren mot hang. Ba cai gia phai tra: * 1. Hang tab an het chieu ngang nen dai trang thai luong bi day xuong hang * thu hai — tren cua so hep no bien mat han. * 2. Khong nhom duoc theo viec: "Bang thong" nam canh "Cai dat" nhu the * chung cung loai. * 3. Them mot man hinh la mot lan chen chuc. * * Thanh ben luon nhin thay, nhom duoc theo viec, va tra lai ca chieu cao cho * noi dung — dung cai dang bi thieu. */ :root { --rail: 15rem; --dau: 3.25rem; } #app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; } .khung { min-width: 0; display: flex; flex-direction: column; } .rail { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; gap: var(--k-1); padding: var(--k-3) var(--k-3) var(--k-3); background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; } .brand { display: flex; align-items: center; gap: var(--k-2); font-weight: 700; letter-spacing: -.02em; padding: 0 var(--k-2) var(--k-4); color: var(--text); } .brand svg { color: var(--accent); flex: none; } .rail nav { display: flex; flex-direction: column; gap: 0; } .rail-nhom { font-size: var(--chu-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: var(--k-4) var(--k-2) var(--k-1); } .rail-nhom:first-child { padding-top: 0; } /* * Muc dang mo va muc dang re chuot phai KHAC NHAU nhin thay ngay. * Truoc day ca hai deu la mot vien pill co nen — nhin anh chup tinh khong doan * duoc dang o dau. Nay: dang mo = nen dam + vach cam ben trai; re chuot = doi * nen, giu mau chu. Hai tin hieu khac loai, khong nham duoc. */ .rail .tab { display: flex; align-items: center; gap: var(--k-2); width: 100%; text-align: left; background: transparent; color: var(--muted); padding: var(--k-2) var(--k-2); border-radius: var(--radius-md); border: 0; font-weight: 500; } .rail .tab svg { flex: none; opacity: .8; } .rail .tab > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .tab:hover:not(.active) { background: var(--panel-2); color: var(--text); } /* Vach doc DA GO — mot luat o cuoi tep tung dat `box-shadow: none` de tat no, * nhung de lai khai bao o day la de lai mot dong ma NOI NGUOC voi cai chay * that. Nguoi doc sau se tin no. Xoa han. */ .rail .tab.active { background: var(--accent-dim); color: var(--accent-text); font-weight: 600; } .rail .tab.active svg { opacity: 1; } .rail-chan { margin-top: auto; padding-top: var(--k-3); display: grid; gap: var(--k-2); border-top: 1px solid var(--line); } .rail-chan select { width: 100%; margin: 0; padding-block: var(--k-1); padding-left: var(--k-2); font-size: var(--chu-sm); } .rail-ai { display: flex; align-items: center; gap: var(--k-2); min-width: 0; } .rail-ai .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--chu-xs); } header { display: flex; align-items: center; gap: var(--k-4); min-height: var(--dau); padding: var(--k-2) var(--k-6); background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } header .right { margin-left: auto; display: flex; align-items: center; gap: var(--k-2); } /* Dau trang trong khi KHONG co phien nao chay: dung de mot dai rong cao 52px. * `:has` de chinh no bien mat, khong phai them mot co trong ma JS. */ /* Bo `min-height: 0`: de dau trang LUON cao dung `--dau` o ca hai trang thai. * Chi khi do `--dau` moi la chieu cao THAT, va cac thanh dinh neo theo no moi * khop — mot ben tu co lai theo noi dung thi con so kia thanh mot loi doan. */ header:not(:has(.nav-live:not([hidden]))) { padding: var(--k-1) var(--k-6); } /* * `--dau` PHAI THEO trang thai that cua dau trang. * * Khong phien nao chay thi dau trang thu lai con ~2rem. Cac thanh dinh khac * (`.ct-dau`) neo theo `--dau`, nen giu no o 3,25rem se de mot khe ho hai chuc * pixel cho noi dung chay qua ben duoi. */ /* `:has` KHONG long duoc trong `:has` — ban dau viet * `:root:has(header:not(:has(.nav-live:not([hidden]))))` va ca quy tac im lang * khong khop gi, de lai mot khe ho 13px. Bam thang vao co `hidden` cua dai. */ :root:has(#nav-live[hidden]) { --dau: 2.4rem; } @media (max-width: 900px) { #app { grid-template-columns: minmax(0, 1fr); } .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); } .rail .brand { padding: 0 var(--k-2) 0 var(--k-1); } .rail nav { flex-direction: row; flex-wrap: wrap; flex: 1; } .rail-nhom { display: none; } .rail-chan { margin: 0 0 0 auto; padding: 0; border: 0; grid-auto-flow: column; align-items: center; } .rail-chan select { width: auto; } } /* * Tab dang mo va tab dang re chuot phai KHAC NHAU nhin thay ngay. * * Truoc day ca hai deu la mot vien pill co nen — nhin anh chup tinh khong doan * duoc dang o tab nao. Nay: dang mo = chu cam + gach chan; re chuot = doi nen, * giu mau chu. Hai tin hieu khac loai, khong nham duoc. */ .tab { background: transparent; color: var(--muted); padding: var(--k-2) var(--k-3); border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent; } .tab:hover:not(.active) { background: var(--panel-2); color: var(--text); } .tab.active { background: var(--accent-dim); color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; } /* ---------- dai trang thai luong tren thanh nav ---------- * Buoi live 2-3 tieng thi phan lon thoi gian chu shop o tab khac. Truoc day * sau tren bay tab khong co cho nao cho biet luong con song, va muon dung gap * thi phai bam ve tab Phien phat roi mo phien ra. */ .nav-live { display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; padding: var(--k-1) var(--k-1) var(--k-1) var(--k-2); border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); } .nav-live .nl-ten { background: none; border: 0; padding: 0 var(--k-1); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-live .nl-ten:hover { text-decoration: underline; } .nav-live .nl-so { font-size: var(--chu-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Duoi 1,0x nghia la ffmpeg khong theo kip thoi gian that — luong tut dan roi * Shopee ngat. Day la thu duy nhat o dai nay duoc phep doi mau. */ .nav-live .nl-so.cham-qua { color: var(--bad-text); font-weight: 600; } @media (max-width: 1240px) { .nav-live .nl-so { display: none; } } /* Cua so 1920 ma noi dung khoa o 1400 la bo phi 520px — dung cai nguoi dung * keu "trong". Rong ra, nhung van co tran de dong chu khong dai qua muc doc. */ /* * `main` LA MOT FLEX ITEM (cha `.khung` la flex row). * * Nen `max-width` + `margin: 0 auto` KHONG keo gian no — flex item mac dinh co * lai vua noi dung roi tu can giua. Hau qua do duoc tren cua so 1920: tab co * bang rong thi `main` = 1665px va noi dung bat dau o x=218; tab noi dung hep * thi `main` co con 871px va troi vao giua, bat dau o x=637. * * Tuc moi tab le mot kieu, va nua man hinh bo trong — dung cai nguoi dung keu * "card trong chiem cho bat hop ly". Do la LOI BO CUC, khong phai loi tung the. * * `flex: 1` de no chiem het phan con lai; `min-width: 0` de bang rong khong day * ca khung phinh ra (mac dinh flex item khong co nho hon noi dung). */ main { flex: 1; min-width: 0; padding: var(--k-6) var(--k-6); max-width: 1760px; } /* * TIEU DE TRAI, NUT GOM BEN PHAI. * * `space-between` chia deu KHOANG TRONG giua moi con, nen mot thanh co bon con * ("San pham" + ba nut) bay ra bon vat the roi rac giua man hinh — mat khong * gom duoc chung thanh mot nhom hanh dong. Voi hai con thi ket qua y het cai * cu, nen doi nay khong dong gi den cac thanh khac. */ .toolbar { display: flex; align-items: center; margin-bottom: var(--k-4); gap: var(--k-2); } .toolbar > :first-child { margin-right: auto; } /* * O CHON/O NHAP TRONG THANH CONG CU: RONG THEO NOI DUNG, khong nuot het cho. * * DO THAT 25/08/2026, chu shop: "cai dropdown list chon shop no dai ngoang * qua xau". Do duoc: `#new-stream-shop` co DUNG HAI lua chon ma rong 1002px. * * Nguyen nhan: luat chung `input, select, textarea { width: 100% }` (cho o * nhap trong bieu mau, dung cho ngu canh do) gap `.toolbar` la flex container * — `width: 100%` thanh "an het phan con lai cua hang". Khong ai viet ra y do * nay ca, no la tac dung phu cua hai luat dung chung. * * `width: auto` + `max-width` de o co lai vua noi dung, va van co tran phong * khi ten shop rat dai. */ /* * MOI o chon/o nhap dung trong MOT HANG NGANG deu phai OM NOI DUNG. * * Ban va dau chi neo vao `.toolbar`, nen nam man khac van nguyen loi: do * duoc `#sp-sapxep` 802px, `#ma-ten`/`#ma-shop` 723px, o loc `/cau-tra-loi` * 736px, `#sp-tim`/`#tv-tim` 544px — deu la o vai chu ma keo gan het hang. * Nguyen nhan chung: luat `input, select, textarea { width: 100% }` (viet cho * o nhap trong BIEU MAU, xep doc duoi nhan) gap container flex. * * Liet ke cac container hang ngang thay vi doi luat chung — doi luat chung se * lam moi o trong bieu mau co lai, mot thay doi rong hon nhieu so voi cho * dang sua. */ .toolbar select, .toolbar input:not([type="checkbox"]):not([type="radio"]), .add-row select, .add-row input:not([type="checkbox"]):not([type="radio"]), .vh-loc select, .vh-loc input:not([type="checkbox"]):not([type="radio"]), .vh-gv-chon select, .vh-gv-chon input:not([type="checkbox"]):not([type="radio"]), .ctc-dong select, .ctc-dong input:not([type="checkbox"]):not([type="radio"]), .hang-nut select, .hang-nut input:not([type="checkbox"]):not([type="radio"]) { width: fit-content; max-width: 16rem; margin-top: 0; } /* ---------- hang so lieu tong quan ---------- */ /* `dense`: hai o "lon" chiem 2 cot lam vai luot chan mot khoang trong o hang sau (5 o, chia khong deu theo be rong man hinh) — dense lap day khoang do bang o ke tiep vua vao, thay vi de trong hang khuyet mot cach kho coi. */ /* * Ban CU cua `.tiles` DA GO. Khuon hang the nam o MOT cho duy nhat — cuoi tep * (`.tiles, .dem-luoi, .cvd-dem, .tt-grid`). Giu lai ban nay thi no danh voi * luat chung ve so cot va khoang cach, va nguoi doc se sua nham o day roi * khong thay gi doi (CLAUDE.md §3). */ /* * MARGIN DOC CUA O LUOI PHAI BANG 0 — neu khong, "cung hang cao bang nhau" * IM LANG HONG. * * ── DO THAT 25/08/2026, chu shop dem lai lan thu ba: "3 cai card tren cung * van chieu cao khac nhau la sao" ──────────────────────────────────────── * Do duoc: hang luoi cao 54px, nhung o dau chi cao 42px. Ca hai o co noi dung * Y HET nhau (`.tile-dau` 24px + padding 16px). Khac biet duy nhat: * * .tile.live -> margin-bottom: 12px * .tile -> margin-bottom: 0 * * Nguon cua 12px do KHONG phai luat nao cua `.tile`: no den tu lop CHUNG TEN * `.live` (dong 926 — khoi "dang phat" o buong lai, mot thu hoan toan khac), * va o "phien dang phat" vo tinh mang ca hai lop (`class="tile live"`). * * Grid `stretch` keo o ra bang chieu cao HANG, roi margin AN vao trong phan * do — nen o co margin thap hon dung bang margin. Do chieu cao thi thay lech, * ma doc CSS cua `.tile` thi khong thay gi sai ca: day la ly do loi nay sua * ba lan khong het. * * Chan tai goc, cho MOI o luoi, khong chi cho `.live`: lop chung nao khac * mang margin toi day sau nay cung khong lam lech duoc nua. */ /* * `.tiles > .tile` chu KHONG `.tiles > *`: ban dau viet `> *` (do dam dac * 0,1,0) — NGANG BANG voi `.live` (cung 0,1,0), va `.live` nam SAU trong tep * (dong ~926) nen `.live` thang. Do lai tren production sau khi trien khai: * margin van 12px, o van lech 58/70. Hai lop cung do dam dac thi thu tu quyet * dinh, va thu tu la thu de vo tinh doi khi ai do chen them luat. * * `> .tile` la 0,2,0 — thang chac chan, khong phu thuoc vi tri trong tep. */ .tiles > .tile { margin-block: 0; } .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--k-3) var(--k-4); display: flex; flex-direction: column; gap: 0; } /* Dong phu duoi nhan: canh bao ve do day du cua con so, khong phai mot nhan thu hai. Nho hon va mo hon de mat doc nhan truoc. */ /* * THE "DANG PHAT" O BANG DIEU HANH — CHI CON DUNG MOT DONG. * * Chu shop 25/08/2026 noi thang hai lan: "bo dong thu 3 di, bo di chu khong * phai ghep". Cac ban truoc (ep 1 dong roi cat "…" ten phien; tach 2 dong * rieng cho phan "dang chieu") deu bi bac vi VAN con dong thu hai — du la * ghep hay tach, chu shop khong can no nua. `.dp-chieu`/`.dp-video-*` (dong * "dang chieu video gi") da bi XOA HAN khoi app.js, khong con dung o day. */ .dp-dau { flex-wrap: wrap; row-gap: 2px; } /* O "Can chu y" la mot cai NUT, nen chu trong no phai canh trai nhu the khac. */ button.tile { text-align: left; font: inherit; cursor: pointer; } button.tile:disabled { cursor: default; } .tile b { font-size: var(--chu-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; } /* * NHAN CUA O KPI: 14px (`--chu-sm`), khong phai 12px. * * Doi chieu ma nguon template shadcn 25/08/2026: `CardHeader` cua the thong * ke co nhan **14px / weight 400 / mau mo**, va so lon 24px/600. Ban minh * dung 12px cho nhan — nho hon mot bac. * * DEM TREN CA TEP: `--chu-xs` (12px) dang duoc dung 136 lan, `--chu-sm` * (14px) 118 lan — tuc 12px moi la co chu CHU DAO cua ban minh. Template thi * nguoc lai: "14px chiem ~90% giao dien, phan cap bang DAM NHAT va MAU chu * KHONG bang co chu". Do la ly do giao dien minh trong vun va li ti hon han * template, dung nhu chu shop noi. * * 12px chi con dung cho thu template cung de 12px: badge/chip, va nhan nhom * viet hoa o thanh ben. */ .tile span { font-size: var(--chu-sm); color: var(--muted); } .tile.live b { color: var(--ok-text); } .tile.alert b { color: var(--bad-text); } /* ---------- hang phien ---------- * * Truoc day day la the doc cao 290px, hai cai mot hang: anh bia 116px + ten + * so lieu + nut. Ba phien la day mot man hinh, va "Can chu y" — cho noi viec * dang phai lam — bi day xuong duoi nep gap. * * Cung tung ay thong tin, xep NGANG thanh mot hang cao 60px: anh bia thu nho, * ten + trang thai, tien do, so lieu, nut. Muoi phien van nam gon trong mot man. */ /* * `.ds-phien`, KHONG phai `.grid`. * * Loi da mac trong chinh lan sua nay: doi nghia cua lop chung `.grid` thanh * mot cot. `#kb-list` cung dung `.grid`, nen 14 the kich ban tu bon cot roi * xuong MOT cot — trang Ban hang cao 7.369px, hon tam man cuon. Lop chung thi * dung chung; muon doi bo cuc thi dat lop rieng. */ .grid { display: grid; gap: var(--k-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* * THE PHIEN XEP THEO LUOI, khong phai moi cai mot dai tran man hinh. * * Ban cu la MOT cot: mot phien "san sang" chi co ten, ten shop, "1 video · 59s" * va hai nut — chung do chu nghia nam tren mot the rong 1.330px, nen giua the * la ~700px trong. Ba phien la ba dai trong nhu the xep chong. * * Nay the tu xep theo be rong: man rong thi ba the mot hang, man hep thi mot. * * NGOAI TRU phien DANG PHAT — the do mang theo dai tien do (dang chieu video * nao, den phut nao, con bao lau, tiep theo la gi) va con so ky thuat. Cai do * can ca chieu ngang, va no cung la cai duy nhat dang duoc nhin lau. */ /* * `auto-fit` + TRAN TREN, khong phai `auto-fill` + `1fr`. * * `auto-fill` giu lai ca nhung cot RONG: bon the trong mot luoi nam cot thi cot * thu nam van chiem cho, va dai the dung ngan o 4/5 be ngang — trong dung cai * cho nguoi dung dang che. * * `auto-fit` thu cac cot rong lai va cho the con lai gian ra cho vua. Nhung * gian KHONG GIOI HAN thi mot the don lai keo dai 1.300px — dung cai benh cu. * Nen tran tren nam o CHINH CAI THE (`max-width`), khong o mo ta cot. * * Vi sao khong `minmax(24rem, 34rem)`: so cot cua `auto-fit` duoc tinh bang ve * TREN khi ve do la mot do dai xac dinh. Dat 34rem thi mot khung 1.023px chi * ra HAI cot thay vi ba — it the hon tren mot hang, tuc nguoc dung dieu dang * muon. `1fr` khong xac dinh nen so cot tinh theo ve DUOI. */ /* * FLEX-WRAP, KHONG PHAI GRID auto-fit. * * Do that tren man 1920px cua chu shop: luoi `auto-fit` voi hai the thi hai cot * rong deu bi thu lai, hai cot con lai moi cot ~660px, ma the bi tran * `max-width` chan o 416px — nen giua hai the la mot LO 244px. Voi `auto-fill` * thi nguoc lai: cac cot rong o lai va dai the dung ngan o mot phan ba man. * * Flex giai duoc ca hai: `flex: 1 1 ` cho the gian ra lap kin hang * khi it, `max-width` chan khong cho no dai qua muc, va phan du don HET ve ben * PHAI — khong bao gio thanh mot lo o giua. * * ── DO THAT 24/08/2026, CHU SHOP TU BAO ──────────────────────────────────── * `max-width: 42rem` (672px) tung dat de "the don khong keo dai het man" — * nhung noi dung ben trong the (anh nho + ten + nut) la BO CUC CO DINH, * khong co gi de gian them khi rong ra. The don ("test", phien nhap) gian * toi 672px trong khi ba the cung hang chi 407px — rong hon 65%, va phan du * la khoang TRANG bên trong chinh cai the, khong phai ben ngoai no. Chu shop * ta dung: "de 1 dong rieng nhung no tu dung lai dai han ra ... rong han * luon". Ha tran xuong gan bang co the tu nhien (~26rem ≈ 407px do duoc) — * the don van gian nhe de khong lech han voi hang tren, nhung khong con * phong to roi rong o giua. * * SUA LAI 24/08/2026: 26rem (416px) VAN con rong hon ca the tu nhien khi du * hang (~407px do duoc) — the don van la the RONG NHAT man, dung dieu chu * shop chui ("dai han ra"). Ha xuong duoi muc tu nhien: the don gio DUNG o * tran 25rem (400px) — hep hon ca the day hang mot chut, thay vi rong hon. * Mat nguoi de bo qua the cuoi hep hon vai px hon nhieu so voi the cuoi phinh * to ro ret. */ /* * `align-items: stretch` (mac dinh flex) — CHU SHOP YEU CAU RO 25/08/2026: * "cac the cung loai tren cung mot man hinh bat buoc chieu cao va chieu rong * phai bang nhau, neu khong nhin cuc ky kho chiu". Tung doi sang `flex-start` * de tranh khoang trang duoi the ngan (xem `.sc-foot` — do la cach sua dung: * neo nut xuong day bang `margin-top: auto`, KHONG PHAI bo stretch). */ /* gap 16px — luoi the cua template dung 16px, khong phai 8px. */ .ds-phien { display: flex; flex-wrap: wrap; gap: var(--k-4); align-items: stretch; } /* * DO THAT 25/08/2026, THIET KE LAI THEO YEU CAU CHU SHOP — the cu (grid ba * hang/hai cot, anh `grid-row: 1/span 3` roi `align-self:center`) lam anh TROI * xuong giua the thay vi thang hang voi ten phien, va "toc do/duong truyen/da * phat" choan mot hang rieng cao rong. Chu shop: "anh no dung rieng 1 hang ma * thua rat nhieu hai ben tren duoi ... nhin no qua xau". * * Bo cuc moi la MOT COT FLEX don gian, khong con grid/row-span: * [anh · ten · chip · trang thai] <- .sc-top, anh thang hang voi DONG DAU * [so video · canh bao] <- .sc-phu, rong het the * [da phat NN:NN ............ nut] <- .sc-foot, mot dong, hai dau * * The gon lai (17rem thay vi 24rem) nen bon the vua mot hang thay vi ba — * chu shop cung yeu cau dieu nay rieng. * * DO THAT 25/08/2026: tung co them dong "[tien do video dang phat]" giua * `.sc-phu` va `.sc-foot`. Chu shop noi thang hai lan "bo dong thu 3 di, bo * di chu khong phai ghep" — `tienDoPhatHtml()` trong app.js gio tra ve rong, * `[data-tiendo]` van con trong DOM (de vong lam moi khong nem loi) nhung * khong hien gi. The chi con DUNG BA dong nhu tren. */ /* 19/21rem thay 17/19rem: hang chan cua the DANG PHAT co "đã phát 3:24:42" + ba nut, 17rem khong du nen nut cuoi tung tran ra ngoai vien (chu shop chup man hinh 25/08/2026). Ty le max/basis 1,105 — van duoi tran 1,15 cua bai kiem "the dung mot minh khong duoc phong to". */ .ds-phien > .stream-card { flex: 1 1 19rem; max-width: 21rem; } .ds-phien > .nhom-cu { flex: 1 1 100%; } /* Phien da dung nam trong mot the gap — luoi nam o `div` ben trong, khong dat tren chinh `details` (xem chu thich cho `.nhom-cu` trong app.js). */ /* Radius 14 + bong nhe + padding 16 — dong bo voi `.tile`/`.dp-the`, xem chu thich o `.dp-the`. */ .stream-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--bong-xs); cursor: pointer; transition: border-color .14s, background .14s; display: flex; flex-direction: column; gap: var(--k-2); padding: var(--k-4); /* Luoi an toan: du tinh sai o dau, khong gi duoc ve ra ngoai vien the — xem chu thich o `.sc-foot` (nut "Dừng" da tung tran ra ngoai). */ overflow: hidden; } .stream-card:hover { border-color: var(--accent); background: var(--panel-2); } .stream-card.on { border-color: var(--ok-vien); } /* * `align-items: center` — CHU SHOP QUYET DINH 25/08/2026: * * "cai anh thumbnail no lech so voi title va ten shop, cho no can vertical * vao giua 2 thang di, hien tai anh no tit o tren ma thua khoang trong o * duoi" * * Chu thich cu o day ghi nguoc lai ("doi thanh `center` la quay lai dung loi * cu") — nhung do la ket luan cua TOI hoi truoc, khong phai cua chu shop. Anh * cao ~27px con `.sc-dau` cao hai dong (ten rieng mot dong + chip shop/trang * thai), nen `flex-start` de anh dinh sat dinh va bo trong han phia duoi. * Chu shop nhin thay va goi dung ten no. Lam theo. */ /* * ── ANH BIA LA MOT O VUONG, VA NO CAO BANG DUNG KHOI CHU BEN CANH ───────── * * Chu shop 26/08/2026: "phần sc-poster phải để thành hình vuông, không để chữ * nhật như hiện tại được, phần trên bằng với phần trên title, phần dưới bằng * với tên shop". * * Do that truoc khi sua: 44 x 27,5 px (`aspect-ratio: 16/10`), dat giua theo * chieu doc canh mot khoi `.sc-dau` cao hai dong (~44px) — nen no thua mot * khoang tren va mot khoang duoi, va hai canh khong thang voi cai gi ca. * * Cach lam KHONG phai dat `width`/`height` bang mot con so doan truoc: hai * dong chu do co the la 40px hay 48px tuy co chu va tuy ngon ngu. Neo vao * CHINH khoi chu: * * `.sc-top { align-items: stretch }` — o anh cao bang hang, tuc bang * `.sc-dau` (khoi cao nhat) * `.sc-poster { align-self: stretch; aspect-ratio: 1; width: auto }` * — cao theo hang, rong bang cao * * Ket qua: canh tren cua anh = canh tren dong ten, canh duoi = canh duoi dong * chip ten shop, va vi `aspect-ratio: 1` nen no vuong dung theo dinh nghia. * Hai dong chu ~44px, tuc o vuong ~44px — gan y het be rong cu, khong the nao * pha vo bo cuc. * * `min-width: 0` de khi ten qua dai, o anh khong bi grid bop meo thanh chu * nhat: `flex: none` giu no, nhung `aspect-ratio` can mot trong hai chieu la * co dinh that. */ .sc-top { display: flex; align-items: stretch; gap: var(--k-2); min-width: 0; } .sc-poster { align-self: stretch; aspect-ratio: 1; width: auto; min-width: 40px; border-radius: var(--radius-sm); background: var(--panel-2) center/cover no-repeat; position: relative; display: grid; place-items: center; flex: none; } .sc-poster .ph { color: var(--muted); font-size: var(--chu-base); opacity: .35; } /* * TEN CHIEM TRON DONG DAU, chip/trang thai xuong dong duoi. * * The gio hep hon truoc (17rem thay vi 24rem) nen cang khong du cho ten + chip * + trang thai chung mot hang — `flex: 1 0 100%` bat ten xuong dong rieng, * cat bang dau ba cham thay vi bop chip trang thai thanh "Sẵn / sàng". */ .sc-dau { display: flex; align-items: center; gap: var(--k-1) var(--k-2); min-width: 0; flex-wrap: wrap; flex: 1 1 auto; } .sc-dau > :is(h1, h2, h3) { flex: 1 0 100%; font-size: var(--chu-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-phu { display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap; font-size: var(--chu-xs); min-width: 0; } /* 14px theo template (nhan/chu phu tren the van la `text-sm`), khong 12px — xem chu thich o `.tile span`. */ .sc-phu .muted { font-size: var(--chu-sm); } /* * MOT DONG, HAI DAU — "da phat" ben trai, nut ben phai. * * Truoc day day la HAI khoi rieng (`.sc-metrics` ba o + `.sc-foot` nut), tong * cong hai hang rieng biet. Chu shop yeu cau bo toc do/duong truyen (con lai o * buong lai, xem `metricsHtml`) va gop "da phat" chung dong voi nut cho gon. */ /* `margin-top: auto` — the "test"/"sẵn sàng" (khong co `.sc-tiendo`) bi `.ds-phien` keo cao bang the dang phat cung hang; day nut Bat dau/Mo xuong DAY the thay vi de no dinh ngay sau ten phien roi bo trong ca khoang duoi — khoang trong (neu co) nam GIUA noi dung va nut, khong con "trong hoac". */ /* * DO THAT 25/08/2026 (chu shop chup man hinh): NUT "Dừng" TRAN HAN RA NGOAI * VIEN THE. Hang chan cua the dang phat co "đã phát 3:24:42" + ba nut * (Xem/Bỏ qua/Dừng); the rong 17rem (272px) khong du, ma `.sc-thoigian` co * `white-space: nowrap` con `.sc-nut` co `flex: none` — KHONG CAI NAO chiu co * lai, nen phan thua day thang nut cuoi ra ngoai khung. * * Ba lop chan, tu nhe den nang: * 1. `.sc-thoigian` duoc co/cat truoc (no la chu, mat vai ky tu con doc duoc; * nut ma tran ra ngoai thi khong bam duoc). * 2. `.sc-foot` cho xuong dong khi that su khong du cho. * 3. `.stream-card { overflow: hidden }` — luoi an toan cuoi: du tinh sai o * dau, khong gi duoc phep ve ra ngoai vien the nua. */ .sc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--k-2); margin-top: auto; flex-wrap: wrap; row-gap: var(--k-1); } .sc-thoigian { font-size: var(--chu-xs); color: var(--muted); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sc-thoigian b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } .sc-nut { display: flex; gap: var(--k-1); align-items: center; flex: none; } .badge { display: inline-flex; align-items: center; gap: var(--k-1); padding: var(--k-1) var(--k-2); border-radius: 999px; white-space: nowrap; flex: none; font-size: var(--chu-xs); font-weight: 600; background: var(--muted-bg); color: var(--muted-foreground); } .badge.running { background: var(--ok-nen); color: var(--ok-text); } .badge.reconnecting, .badge.starting { background: var(--warn-nen); color: var(--warn-text); } .badge.failed { background: var(--bad-nen); color: var(--bad-text); } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.running::before { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } .warn-line { color: var(--warn-text); font-size: var(--chu-sm); } .bad-line { color: var(--bad-text); font-size: var(--chu-sm); } /* ---------- thu vien video ---------- * Cac quy tac `.vcard` / `.vgrid` (the doc 190x300px) da go: thu vien gio la * BANG, xem `.v-bang` o cuoi file. Giu lai chung thi nguoi doc sau tuong bo cuc * the con hoat dong — va dung theo kieu do ma dau hieu bam-de-xem tren anh thu * nho da bi mat mot luot. */ /* ---------- bang ---------- */ table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } /* Dem o bang: .65rem tren duoi cho ra hang cao 75px voi mot dong chu — nhan * len 14 hang la mot man hinh chi de dung dem. .42rem van du thoang de doc va * lay lai ~15% chieu cao moi bang tren ca ung dung. */ /* * Ban CU cua `th, td` DA GO — khuon `table.tsx` o cuoi tep ghi de HOAN TOAN * ca ba thuoc tinh no dat (`text-align`, `padding`, `border-bottom`), cung do * dam dac (0,0,1) va nam sau nen thang. Giu lai chi lam nguoi doc tuong day * la noi dat khuon bang, roi sua o day va khong thay gi doi (CLAUDE.md §3). */ tbody tr:hover { background: var(--panel-2); } /* * LUAT `th` O DAY DA BI XOA — no la MA CHET, va toi vua sua nham vao no. * * DO THAT 25/08/2026: doi chieu ma nguon template shadcn thay tieu de cot * phai 14px, toi sua luat `th` o day tu `--chu-xs` sang `--chu-sm`, chay * kiem dot bien — va bai kiem KHONG DO. Truy ra: co MOT luat `th {` THU HAI * o duoi (khoi "BANG — table.tsx", ~dong 4300) khai lai DU CA NAM thuoc tinh * cua luat nay (font-weight/font-size/color/background/...), nam SAU nen * thang tuyet doi. * * Tuc la bang DA dung 14px san tu truoc; cho toi sua khong phai cho dang * chay. Dung benh CLAUDE.md muc 3 — hai duong cho mot viec, va duong THANG * lai khong phai duong toi dang sua. Xoa han thay vi de lai, de nguoi sau * (ke ca toi) khong sua nham lan nua. */ /* `td.right/th.right` cung da co ban day du hon o khuon `table.tsx` (kem * `font-variant-numeric: tabular-nums`) — ban o day go di. */ .bar { height: 7px; background: var(--panel-3); border-radius: var(--radius-sm); overflow: hidden; margin: var(--k-2) 0; } .bar > div { height: 100%; width: 0; background: var(--accent); transition: width .25s; } /* ---------- trang thai rong ---------- */ .empty { color: var(--muted); text-align: center; padding: var(--k-12) var(--k-6); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); } .empty .big-icon { font-size: var(--chu-3xl); display: block; margin-bottom: var(--k-2); opacity: .5; } .empty b { display: block; color: var(--text); margin-bottom: var(--k-1); font-size: var(--chu-base); } /* ---------- ngan chi tiet ---------- */ /* ---------- ban dieu khien phien ---------- * Truoc day day la mot NGAN HEP ben phai (540px) trong cua so 1568px: bo phi * 2/3 man hinh, va chin khoi gap chong nhau cao 2.258px trong mot cua so 851px. * Moi thao tac deu phai cuon roi mo gap. Nay la mot LUOI TOAN MAN HINH — cai * nao hay dung thi luon mo va nam tren, cai nao la cau hinh thi gap va nam duoi. */ /* * BA TANG, khong phai mot luoi tha noi. * * Truoc day ca ngan la MOT luoi auto-fill: moi khoi tu tim cho. Do duoc tren * anh chup: mo mot khoi ra thi ba khoi cung hang dung nguyen, de lai mot vung * trang rong het chieu ngang cao ~150px — cang dung cang thung lo. Va "Xoa * phien" thi troi giua vung trang do, canh cac nut hay bam. * * Nay chia theo VIEC: * tang 1 — dai so lieu + dang phat : het chieu ngang, luon nhin thay * tang 2 — ba viec lam trong luc phat: luoi 12 cot, ti le co dinh * tang 3 — cau hinh va so sach : XEP DOC, nen khong bao gio thung lo */ /* * Ngan dieu khien KHONG che thanh dieu huong. * * Truoc day no phu kin man hinh: dang live ma muon liec Tinh trang hay sua gia * o Ban hang la hai lan bam di, hai lan bam ve — va mat luon khung xem truoc * trong luc do. Doi thu giu nguyen thanh ben trong suot buoi. Nay chua tu dinh * thanh nav (~60px) tro xuong. */ .drawer { position: fixed; inset: var(--dau) 0 0 var(--rail); background: var(--bg); z-index: 30; display: flex; flex-direction: column; } @media (max-width: 900px) { .drawer { inset: 0; } } .drawer-inner { flex: 1; overflow-y: auto; padding: 0 var(--k-6) 40px; display: flex; flex-direction: column; gap: var(--k-4); } /* `stretch` chu khong `start`: ba khoi cao khac nhau thi khoi thap de lai mot * vung trang bang chieu cao chenh lech — do duoc ~300px o goc duoi trai. Keo * nen khoi xuong het hang thi khong con lo, va danh sach binh luan cung co san * cho de dai ra khi nguoi xem bat dau hoi. */ /* * `align-items: start`, KHONG phai `stretch`. * * Quy tac cu keo gian ba khoi cho bang khoi cao nhat. Ly do ban dau la DANH * SACH BINH LUAN nam trong day va can cho de dai ra — nhung no da chuyen vao * buong lai (`.buong-bl`) tu lau. Ly do mat roi, quy tac o lai. * * Do duoc: ca ba khoi deu cao DUNG 513px. "Cach tra loi binh luan" chua mot o * danh dau va mot o so — rong khoang 90%. "San pham dang ghim" cung the. Gan * 800px trong tren mot man hinh cao 799px, va no day cac khoi thao tac xuong * duoi nep gap. * * Ai doi lai `stretch`: kiem xem danh sach binh luan da quay ve day chua. Neu * chua thi dung doi. */ .dk-lam { display: grid; gap: var(--k-4); align-items: start; grid-template-columns: repeat(12, minmax(0, 1fr)); } .dk-lam > details { display: flex; flex-direction: column; } .dk-lam > details > summary { flex: none; } .dk-lam > #d-bl-box { grid-column: span 6; } .dk-lam > #d-ghim-box { grid-column: span 6; } @media (max-width: 1280px) { .dk-lam { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dk-lam > #d-bl-box, .dk-lam > #d-ghim-box { grid-column: span 1; } } @media (max-width: 820px) { .dk-lam { grid-template-columns: minmax(0, 1fr); } } /* * Cau hinh va so sach: thanh GAP LAI xep vua man, MO RA thi chiem ca hang. * * Xep ngang co dinh thi mo mot khoi la ba khoi cung hang dung nguyen, de lai * mot vung trang rong het chieu ngang — do duoc tren anh chup, cao ~150px. * Xep doc mot cot thi khong thung lo nua nhung bo trong ca nua ben phai. * * `details[open]` cho ca hang, cong `dense`, giai quyet ca hai: dong lai thi * nam gon 4-5 cai mot hang, mo ra thi duoc ca chieu rong de doc. */ /* * `.dk-phu` la MOT COT cac nhom; moi nhom co luoi rieng cua no. * * Ban truoc de ca bay khoi trong CUNG mot luoi `auto-fit`, nen nhan nhom chi * la mot dong chu troi giua dong chay — sau nhan "Dung moi ngay" van la sau o * xep lien nhau, va bon o cua nhom khac nam ngay canh Hen gio. Nhan khong cat * duoc gi thi no khong phai nhan. */ .dk-phu { display: flex; flex-direction: column; gap: 0; } .dk-luoi { display: grid; gap: var(--k-2); align-items: start; grid-auto-flow: row dense; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .dk-phu > .khu-nguy-hiem { align-self: stretch; margin-top: var(--k-4); } .dk-luoi > details[open] { grid-column: 1 / -1; } /* * NHAN NHOM — mot hang chu vat het be ngang, cat day the thanh ba cum. * * Khong ke o giua: bay o giong het nhau thi mat khong bam duoc dau la thu dung * moi ngay. Cai duy nhat can la mot cai moc de mat dung lai. */ .dk-nhom { margin: var(--k-4) 0 var(--k-2); display: flex; align-items: baseline; gap: var(--k-2); font-size: var(--chu-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .dk-nhom::after { content: ''; flex: 1; height: 1px; background: var(--line); } .dk-nhom-y { font-size: var(--chu-xs); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .75; } .dk-nhom:first-child { margin-top: 0; } /* Dau bang: ten phien, trang thai, va NUT CHINH — luon nhin thay, khong phai * cuon xuong day moi bam duoc Dung nhu truoc. */ .drawer-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--k-4); flex-wrap: wrap; margin: 0 -var(--k-6) 0; padding: var(--k-3) var(--k-6); background: var(--panel); border-bottom: 1px solid var(--line); } .drawer-head :is(h1, h2, h3, h4) { margin: 0; font-size: var(--chu-lg); letter-spacing: -.02em; } .drawer-actions { display: flex; gap: var(--k-2); align-items: center; flex-wrap: wrap; margin-left: auto; } /* Loi thoat "tao phien MOI ben Shopee" — chi hien khi bi chan, va phai trong nhu mot canh bao chu khong nhu mot tuy chon binh thuong: tick nham la mot phien thua tren gian hang that. */ .ep-tao { display: inline-flex; align-items: center; gap: var(--k-1); font-size: var(--chu-sm); color: var(--warn-text); border: 1px solid var(--warn); border-radius: var(--radius-md); padding: var(--k-1) var(--k-2); cursor: pointer; } /* * ── GOC RE CUA BAC BO GOC LE ────────────────────────────────────────────── * * Luat nay dat `--radius-lg` (10px) va dem `12px 16px` cho MOI `
` * trong ung dung. Do la nguon cua sau cai hop 10px do duoc tren production * 27/08/2026 — toi da di va tung LOP mot (`.dt-phien`, `.canh-bao`...) trong * khi cai le loi la chinh luat GOC nay. * * `
` o day duoc dung nhu mot THE gap duoc, nen no phai mang bac cua * the: `--radius-xl` + dem deu 16px, y het `.o` va `.tile`. * * `details[open] { padding-bottom }` cung go: dem deu bon phia thi khong can * mot ngoai le cho trang thai mo. */ details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--k-4); margin: 0; align-self: start; } summary { cursor: pointer; font-weight: 600; font-size: var(--chu-base); list-style: none; display: flex; align-items: center; gap: var(--k-2); } summary::-webkit-details-marker { display: none; } /* * ── DAU GAP/MO CUA `
` — HINH, KHONG PHAI KY TU ────────────────── * * Chu shop 26/08/2026: "vẫn quá nhiều chỗ tao thấy mày đang dùng ::before hay * after thế, nó cực kỳ nhỏ lạc quẻ xấu". * * Day chinh la cho do, va no la cho DONG NHAT ca ung dung: quy tac * `summary::before` khong gan lop nao, nen no ve len MOI the `
` — * hang phien da dung, cac khoi gap trong ngan phien, chi tiet ky thuat... * * Ban cu: `content: '\25B8'` (▸) o `font-size: .8em`. Ba khuyet diem, dung * ba chu chu shop dung: * * "nhỏ" — `.8em` cua chu 14px la 11px, canh mot bo icon 16px. * "lạc quẻ" — ▸ la tam giac DAC; ca bo icon con lai la net vien 2px, dau * tron. Khong cung mot ho hinh. * "xấu" — glyph nay do PHONG CHU ve, ma Inter khong co no, nen trinh * duyet roi ve phong du phong cua he dieu hanh: moi may mot * hinh, va thuong lech duong chan chu. * * Nay dung `chevron-right` cua lucide — dung hinh ma `ico('chevron-right')` * sinh ra trong `app.js`, ve bang `mask` nen `currentColor` to lai duoc va co * dat bang `px` (16px, bang moi hinh khac). Mo ra thi XOAY 90 do thay vi doi * sang mot hinh thu hai: mot hinh, mot phep xoay, va no chuyen dong muot. */ summary::before { content: ''; display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; background-color: var(--muted-foreground); -webkit-mask: var(--ico-chevron-phai) center/16px 16px no-repeat; mask: var(--ico-chevron-phai) center/16px 16px no-repeat; transition: transform .15s ease; } details[open] > summary::before { transform: rotate(90deg); } /* Khoi rong: nhung thu vua dai vua hay dung. Ti le do .dk-lam dat. */ .het-hang { grid-column: 1 / -1; } /* ---------- dai so lieu ban hang ---------- * Nguoi xem · thich · binh luan · don · doanh thu — LY DO DUY NHAT de ngoi * canh mot phien hai tieng. Truoc day chung nam trong mot khoi gap lai o duoi, * nen mo trang ra la mot dau gach ngang va khong ai bam mo. */ .kpi { display: flex; align-items: center; gap: var(--k-4); flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--k-3) var(--k-4); } /* Cac o keo sat nhau, KHONG trai deu het chieu ngang: nam con so cach nhau * 280px thi mat phai chay qua ca man hinh de doc mot dong. */ .kpi-o { display: flex; flex-wrap: wrap; gap: var(--k-1) var(--k-12); flex: 1; min-width: 0; } .kpi-o > div { display: flex; flex-direction: column; min-width: 5.5rem; } .kpi-o b { font-size: var(--chu-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .kpi-o span { font-size: var(--chu-sm); color: var(--muted); } .kpi-o .tien b { color: var(--ok-text); } .kpi-o .chua b { color: var(--muted); font-weight: 500; } .kpi-ben { display: flex; align-items: center; gap: var(--k-2); flex: none; } .kpi-ben .muted { font-size: var(--chu-sm); } /* * Chua doc duoc: noi VI SAO ngay tai cho — nhung CHI dong ly do mac ao canh * bao, khong phai ca dai. * * Truoc day ca khoi to nen vang vien vang, nen liec mot cai no doc thanh "co * loi" chu khong phai "day la bang diem cua phien". Bang diem thi luon phai * trong ra bang diem, ke ca khi chua co so. */ .kpi-vuong { flex-basis: 100%; font-size: var(--chu-sm); color: var(--warn-text); display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; margin-top: var(--k-2); padding: var(--k-2) var(--k-3); border-radius: var(--radius-md); background: var(--warn-nen); } /* Chua co so: mot dong, tra lai ~80px cho khung xem truoc va hang doi. */ .kpi.gon-mot-dong { padding: var(--k-2) var(--k-4); } .kpi.gon-mot-dong .kpi-vuong { margin-top: 0; background: none; padding: 0; } .kpi-chua { display: flex; align-items: baseline; gap: var(--k-2); flex-wrap: wrap; } .kpi-chua b { font-size: var(--chu-sm); } .kpi-chua span { font-size: var(--chu-sm); color: var(--muted); } .live { background: linear-gradient(135deg, var(--panel), var(--panel-2)); border: 1px solid var(--ok-nen); border-radius: var(--radius-lg); padding: var(--k-4) var(--k-4); margin-bottom: var(--k-3); } .live-row { display: flex; align-items: center; gap: var(--k-3); } .live-row.metrics { margin-top: var(--k-3); gap: var(--k-6); } .live-row.metrics b { font-size: var(--chu-xl); display: block; font-variant-numeric: tabular-nums; } .live-row.metrics label { margin: 0; font-size: var(--chu-xs); } .notice { font-size: var(--chu-sm); margin: var(--k-2) 0 0; color: var(--warn-text); } .queue { list-style: none; margin: var(--k-2) 0; padding: 0; } .queue li { display: flex; align-items: center; gap: var(--k-2); background: var(--panel-2); border-radius: var(--radius-md); padding: var(--k-2) var(--k-2); margin-bottom: var(--k-1); } .queue li img { width: 30px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); background: var(--panel-3); } .queue li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--chu-sm); } .queue li .dur { color: var(--muted); font-size: var(--chu-xs); font-variant-numeric: tabular-nums; } .queue li button { padding: 0 var(--k-2); font-size: var(--chu-sm); } .add-row { display: flex; gap: var(--k-2); align-items: center; margin: var(--k-2) 0; } .add-row select, .add-row input { margin: 0; } /* O danh dau: o vuong o TREN CUNG mot dong voi chu dau, chu chay tiep xuong * duoi thang le — khong phai chu bi ep thanh cot hep ben canh o vuong. Do * duoc: trong cot 300px, "Tu ghim theo video dang phat" vo thanh ba dong lech. */ label.inline { display: flex; align-items: center; gap: var(--k-2); margin: var(--k-2) 0; color: var(--text); line-height: 1.5; } /* Nhan CO O DANH DAU thi khong dung flex: flex bien MOI doan chu thanh mot cot * rieng, nen trong cot 300px "Tu ghim theo video dang phat" vo thanh ba dong * lech nhau. Tha o vuong ra le trai va de chu chay quanh no nhu van ban thuong. */ label.inline:has(> input[type="checkbox"]:first-child), label.inline:has(> input[type="radio"]:first-child) { display: block; } label.inline > input[type="checkbox"]:first-child, label.inline > input[type="radio"]:first-child { float: left; width: auto; margin: var(--k-1) var(--k-2) 0 0; } label.inline::after { content: ''; display: block; clear: both; } label.inline input { width: auto; margin: 0; } label.inline > span.muted, label.inline .muted { font-weight: 400; } /* Che do gon: bo luon phan giai thich trong ngoac o nhan va nhan phu. */ /* * `.gon` CHI AN VAN XUOI, KHONG AN NHAN CHUC NANG. * * Hai dong `label.inline .muted` va `.bl-tudong .muted` DA GO khoi lop nay * (26/08/2026). Chung an ca mot so NHAN trong ngan phien — thu nguoi dung can * de biet mot o chon dang lam gi, khong phai van giai thich. Khi lop `.gon` * duoc bat vinh vien thi cac nhan do bien mat han, va do la mot phan cua * chuyen chu shop bao "mất hết detail chọn video". * * Con lai dung mot loai: `.hint` — cac doan van xuoi giai thich man hinh. */ body.gon summary + .hint { display: none; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; } .dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } /* `warn` — co su co nang, nhung he van chay. Khong duoc dung mau cua `bad`: * hai chuyen khac nhau (may chet / may song ma co viec can nguoi) ma cung mau * thi cai nay se bi doc nham thanh cai kia. */ .dot.warn { background: var(--warn); } .log { list-style: none; margin: var(--k-2) 0 0; padding: 0; max-height: 280px; overflow-y: auto; } .log li { display: flex; gap: var(--k-2); font-size: var(--chu-sm); padding: 6px 0; border-bottom: 1px solid var(--line); } .log li:last-child { border-bottom: none; } .log li time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .log li .why { color: var(--bad-text); } #d-name { cursor: text; } .rename { cursor: text; border-bottom: 1px dashed transparent; } .rename:hover { border-bottom-color: var(--muted); } .mt { margin-top: var(--k-8); } #member-table select { width: auto; margin: 0; padding-block: var(--k-1); padding-left: var(--k-2); font-size: var(--chu-sm); } #shop-table input { margin: 0; padding: var(--k-1) var(--k-2); } .toast { position: fixed; bottom: var(--k-5); left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--k-3) var(--k-4); z-index: 40; max-width: min(560px, 92vw); box-shadow: var(--shadow); } .toast.bad { border-color: var(--bad); color: var(--bad-text); } .toast.ok { border-color: var(--ok); } @media (max-width: 700px) { header { gap: var(--k-2); padding: var(--k-2) var(--k-4); } header nav { order: 3; width: 100%; overflow-x: auto; } main { padding: var(--k-4); } .drawer-inner { padding: var(--k-4); } } .panel-log { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--k-1) var(--k-4); max-height: none; } .panel-log li { padding: var(--k-2) 0; } .panel-log li .who { color: var(--muted); } .panel-log li a { color: var(--accent-text); text-decoration: none; cursor: pointer; } .panel-log li a:hover { text-decoration: underline; } /* ── Tinh trang he thong ── */ .cham { display:inline-block; width:8px; height:8px; border-radius:50%; /* `--do` khong bao gio ton tai — bo di, dung thang bien that. */ background: var(--bad); margin-left: var(--k-1); vertical-align: middle; } /* * `auto-fit`, KHONG phai `auto-fill`. * * `auto-fill` giu lai cac cot RONG: do tren cua so 1600, dai nay tao 5 cot * 252px cho 3 o — ba o dung o 990px roi bo trong 320px con lai. `auto-fit` gom * cot rong lai nen cac o that gian ra day hang. * * `.tiles` da dung `auto-fit` tu dau — do la ly do dai KPI o cac man khac day * ma dai nay thi khong. */ /* * BON O DEU NHAU, VA KHONG KEO TRAN MAN — chu shop 25/08/2026 chup man hinh: * "4 cai card chu to, margin xau cuc ky xau". * * Ban truoc dung `max-content` (om sat chu) de bot "to", nhung no lam BON O * RONG KHAC HAN NHAU (297/181/193/180px do duoc) — nhin xoc xech, dung cai * "margin xau" chu shop noi. Ma quay lai `1fr` deu nhau thi moi o ~390px cho * ba chu ngan — lai "to" nhu cu. * * Ca hai deu sai vi cung mot ly do: de LUOI quyet dinh be rong theo man hinh. * Chot `max-width` cho CA LUOI thay vi cho tung o: bon o deu nhau tuyet doi * (1fr), nhung tong chi 880px nen moi o ~205px — vua du ba dong chu, khong * phinh ra chiem tron be ngang man 1.601px. */ /* * ── `.tt-grid` DUNG CHUNG LUAT HANG THE, KHONG CO BAN RIENG ────────────── * * Chu shop 26/08/2026: *"sao trang tình trạng hệ thống 4 card díu nhau rồi để * khoảng trống bên phải thế, tao đã bảo card dùng chung cấu trúc giữa tất cả * các trang cơ mà, nó phải dàn ngang sát 2 bên đều nhau"*. * * Ban cu o day dat BA thu rieng, va ca ba deu danh nhau voi luat chung: * * `max-width: 880px` -> hang the dung lai o 880px trong mot vung rong * 1601px, de ho 672px ben phai. Day la nguyen * nhan chinh. * `grid-template-columns` -> chot cung bon cot, thang `grid-auto-flow: * column` cua luat chung. * `gap: var(--k-2)` -> 8px, trong khi moi hang the khac dung 16px. * * Ca ba da go. `.tt-grid` co ten trong bo chon cua luat chung o cuoi tep * (`.tiles, .dem-luoi, .cvd-dem, .tt-grid`) — do la noi duy nhat dat khuon * hang the, cho moi man. */ /* * DO THAT 25/08/2026, chu shop bao "cac card tren dau cuc to cuc trong": Grid * mac dinh keo moi `.tt-o` CUNG HANG cao bang o cao nhat — o "Su co nang" co * them nut "Danh dau da doc" nen cao hon han hai o kia (149px ca ba, trong khi * "Chay lien tuc"/"Viec hong" chi can ~100px cho ba dong chu). Khac voi * `.sc-foot` (co mot "day" ro rang de neo), o day khong phai o nao cung co nut * — nen CAN GIUA theo chieu doc thay vi neo day: o ngan thi noi dung nam giua * khung, khong con dong lai tren dinh de trong het phia duoi. * * DO THAT LAN 2, 25/08/2026 (chu shop van bao "to ngu nhu cho" sau lan sua * tren, agent phan bien doc lap xac nhan): lan truoc chi nen CHIEU DOC (bot * padding se lam o 25/08 sau), con CHIEU NGANG van keo `1fr` deu nhau du chu * ben trong chi choan chua toi nua be rong — khoang trang NGANG cung gop phan * "to". Doi `1fr` -> `max-content` de o OM SAT chu, khong keo day theo luoi; * `minmax(180px, ...)` van giu san mot mep toi thieu de khong qua chat khi * chu rat ngan ("0"). Padding giam k-3(12px) -> k-1(4px), `.so` giam * chu-2xl(24px) -> chu-lg(18px) — trang tinh trang can LIEC NHANH nhieu tin * hieu, khong can mot con so "hero" phong truong nhu trang chu. */ /* Radius 14 + bong nhe cho khop ba he the kia; padding 12px (4px la qua sat mep — template: "chu khong bao gio sat mep"). `gap: 2px` -> 4px cho thuoc thang. */ .tt-o { border:1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--bong-xs); padding: var(--k-3); background: var(--panel); display: flex; flex-direction: column; justify-content: center; gap: var(--k-1); } .tt-o :is(h1, h2, h3, h4) { margin: 0; font-size: var(--chu-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .tt-o .so { font-size: var(--chu-base); font-weight:600; line-height: 1.2; } .tt-o.co-loi { border-color: var(--bad-vien); background: var(--bad-nen); } /* Vach mau canh trai DA GO 26/08/2026 — cung dot voi 21 vach khac (chu shop: * *"nhieu card co vien border ben phai mau do hay mau xanh... bo cai mau do * di"*). Hop ba canh 1px + mot canh 3px nhin nhu bi xo, va mau van con day du * o VIEN CA HOP va nen — khong mat tin hieu nao. */ .tt-muc { border: 1px solid var(--border); padding: var(--k-2) var(--k-3); margin: var(--k-3) 0; background: var(--muted-bg); border-radius: var(--radius-lg); } .tt-muc.nang, .tt-muc.chet { border-color: var(--bad-vien); background: var(--bad-nen); } .tt-muc.canh-bao { border-color: var(--warn-vien); background: var(--warn-nen); } .tt-muc .ma { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size: var(--chu-xs); color:var(--muted); } .tt-muc .noi { margin: var(--k-1) 0; } .tt-muc .lam { font-size: var(--chu-xs); color:var(--tin-text); } .tt-muc .tu { font-size: var(--chu-xs); color: var(--ok-text); } .tt-muc .chitiet { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size: var(--chu-xs); color:var(--muted); margin-top: var(--k-1); word-break:break-all; } /* * Trang thai SACH la mot dong, khong phai mot khoang trong. * * `padding:24px` + can giua bien mot cau "khong co su co nao" thanh mot hop cao * ~120px. Do la tin TOT — no khong dang chiem cho bang mot danh sach su co that. */ .tt-sach { padding: var(--k-2) 0; color:var(--ok-text,var(--muted)); } /* * SU CO: TUNG chot be rong 62rem (992px) khi khung con 1.330px, cho khong * keo het man. * * DO THAT 25/08/2026: khung the nay nay da rong 1.601px (`main` da noi tu * lan sua khac), nen 62rem chi con lap 62% — 609px trang HOAN TOAN o ben * phai, dong ffmpeg/Shopee cuoi cung troi lo lung giua trang. Cung mot benh * voi `.kb-bang`/`.v-bang` da sua ngay hom nay: chot be rong tuyet doi khong * theo kip khung cha lon dan. Moi muc la mot dong log ky thuat dai (URL, * thong bao ffmpeg), khong phai van xuoi can gioi han do dai dong doc — nen * bo tran, khong thay bang mot con so khac. */ #tt-danhsach { max-width: none; } /* ---------- tinh trang tung bo phan ---------- * "Chua co su co nao" khong tra loi duoc cau hoi that: CSDL con song khong, * may phat con nhan viec khong, hang viec co dang tac khong. Ba thu do quyet * dinh phien co phat duoc hay khong, va chung deu hong theo kieu IM LANG. */ .bo-phan { list-style: none; margin: var(--k-2) 0 0; padding: 0; display: grid; gap: var(--k-2); } .bo-phan .bp { display: grid; gap: 0; padding: var(--k-2) var(--k-3); border-radius: var(--radius-md); border-left: 3px solid var(--ok); background: var(--panel-2); } .bo-phan .bp.chet { border-left-color: var(--bad); background: var(--bad-nen); } .bo-phan .bp b { font-size: var(--chu-sm); } .bo-phan .bp span { font-size: var(--chu-sm); color: var(--muted); } .bo-phan .bp em { font-size: var(--chu-sm); font-style: normal; color: var(--bad-text); } .bo-phan .bp-dong { display: flex; align-items: center; gap: var(--k-2); justify-content: space-between; font-size: var(--chu-sm); margin-top: var(--k-1); } .bo-phan .bp-dong span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dem rieng DA GO — dung bac dem chung cua `table.tsx`. Xem `.bang-gon`. */ /* Moc thoi gian cua tung con so: hai o dem tu hai moc khac nhau ma khong o nao * khai bao thi con so lon nhat tren trang doc thanh "moi thu on". */ .tt-o .tt-moc { font-size: var(--chu-xs); color: var(--muted); margin-top: 0; line-height: 1.375; } .danh-sach-nho { list-style: none; margin: var(--k-2) 0 0; padding: 0; display: grid; gap: var(--k-2); font-size: var(--chu-sm); } .danh-sach-nho li { display: grid; gap: 0; padding-left: var(--k-3); border-left: 2px solid var(--warn); } .danh-sach-nho li.xong { border-left-color: var(--ok); color: var(--ok-text); } .danh-sach-nho .muted { font-size: var(--chu-sm); } .danh-sach-nho em { font-style: normal; font-size: var(--chu-xs); color: var(--tin-text); } /* Dau trang thu vien: tom tat + viec can lam, nam NGANG. */ /* `align-items: start`, khong `stretch`: hop "Can de y" ben phai cao gap ba * lan ba o tom tat ben trai, va `stretch` keo ba o do cao theo — de lai ba * vung trang cao ~120px. Do duoc tren anh chup. */ /* Ba o tom tat XEP DOC trong mot cot hep, khong trai ngang. * Trai ngang thi ba o cao 56px nam canh mot hop "Can de y" cao 240px — de lai * mot lo trang gan 200px x 700px giua trang, dung cai nguoi dung keu "trong". * Xep doc thi hai cot xap xi bang chieu cao. */ /* * MOT COT, khong phai hai. * * Ban cu chia 22rem cho ba o dem va phan con lai cho the "Can de y". The do * gap lai chi cao 44px, nen ket qua tren man 1568px la mot hop rong ~1.000 x * 130px nam giua trang, canh mot cot ba o dem xep DOC — trong khi chinh lop * cua cot do ten la `.ngang`. * * Nay: ba o dem chay ngang het be rong, "Can de y" nam duoi, cung het be rong. */ /* * BA O DEM ben trai, the "Can de y" ben PHAI — khong xep chong. * * The "Can de y" gap lai chi cao 44px; de no mot minh mot hang la mot dai * 1.330x44px ma chu chi chiem 130px dau. Dat canh ba o dem thi khong con * khoang trong nao, va no van bung ra duoc khi mo. */ /* * MOT HANG DUY NHAT: ba o dem + the "Can de y", tat ca la anh em. * * Ban truoc chia hai cot `1fr / 20rem`, nen tren man 1920px the "Can de y" bi * day sang tan x=1275 va dung mot minh nhu bi vut ra ria, con giua no voi ba o * dem la mot khoang trang. Xep chung vao CUNG mot hang flex thi khong con ranh * gioi nao de tao ra khoang do. */ /* `.tv-dau` DA GO 26/08/2026 cung luc voi `.bo-phan.ngang` o Thu vien video: * sau khi "Cần để ý" tach ra hang rieng, cai boc nay chi con boc DUNG mot * thu, va ba luat flex cua no danh voi luat hang the dung chung. Ba o tom tat * gio la `.tiles` — cung khuon voi moi man khac. */ /* KHONG CO GIAN, KHONG CO KEO — nut nay khong con la mot the trong hang. * `flex: none` de ba the so lieu chia het phan con lai; `align-self: center` * de nut cao 36px nam giua hang chu khong cao bang the. */ /* `.tv-thieu-hop` da TACH khoi `.tv-dau` (chu shop 26/08/2026) — no la mot * hang rieng ngay duoi hang the, khong con la mot o trong hang do. */ .tv-thieu-hang { display: flex; justify-content: flex-end; margin: 0 0 var(--k-4); } /* Khung/nen cu DA GO: cai co khung bay gio la chinh cai nut `.ghost` ben * trong. Hop chi con la moc neo cho tam noi. */ .tv-thieu-hop { position: relative; } .tv-thieu-hop :is(h1, h2, h3, h4) { margin: 0 0 var(--k-1); } /* Bao loi phai o lai cho toi khi nguoi dung dong — xem chu thich ham toast() */ .toast { display: flex; align-items: flex-start; gap: var(--k-3); } .toast-x { background: none; border: 0; font-size: var(--chu-xl); line-height: 1; cursor: pointer; color: inherit; opacity: .65; padding: 0 2px; } .toast-x:hover { opacity: 1; } .badge.dung { background: var(--warn-nen); color: var(--warn-text); border-color: var(--warn-vien); white-space: nowrap; } /* ── Canh bao tuan thu quy dinh Shopee ── * LOI DA MAC: nen dat cung mau SANG (var(--bad-nen)) trong khi chu ke thua mau SANG * cua giao dien toi — chu gan nhu tang hinh. Nay mau nen lay tu bien theo che * do, va chu LUON dat mau ro rang thay vi ke thua. */ #d-tuanthu { grid-column: 1 / -1; margin: 0; } .tt-đầu { margin: 0 0 var(--k-2); font-size: var(--chu-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .tuanthu { border-left: 3px solid var(--line); padding: var(--k-3) var(--k-4); margin: 0 0 var(--k-2); background: var(--panel-2); border-radius: var(--radius-lg); color: var(--text); } .tuanthu.nang { border-left-color: var(--bad); background: var(--bad-nen); } .tuanthu.canh-bao { border-left-color: var(--warn); background: var(--warn-nen); } .tuanthu.goi-y { border-left-color: var(--tin-text); background: var(--tin-nen); } .tuanthu .nhan { display: inline-block; font-size: var(--chu-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .tuanthu.nang .nhan { color: var(--bad-text); } .tuanthu.canh-bao .nhan { color: var(--warn-text); } .tuanthu.goi-y .nhan { color: var(--tin-text); } .tuanthu .noi { margin: var(--k-1) 0; line-height: 1.5; color: var(--text); } .tuanthu .lam { font-size: var(--chu-sm); line-height: 1.5; color: var(--text); font-weight: 500; } .tuanthu .can-cu { font-size: var(--chu-xs); color: var(--muted); margin-top: var(--k-1); } /* `--muted` tren nen trang la du do (4.5:1+), nhung ba khoi `.tuanthu` deu * to mau nen (`-nen`), va tren do `--muted` tut duoi 4.5:1 (do duoc 4.18-4.24 * cho `.canh-bao`/`.goi-y`). Dung lai dung mau `.nhan` da chon rieng cho tung * nen do — do la mau da kiem, khong bia mau moi. */ .tuanthu.nang .can-cu { color: var(--bad-text); } .tuanthu.canh-bao .can-cu { color: var(--warn-text); } .tuanthu.goi-y .can-cu { color: var(--tin-text); } /* ── Xem truoc video ── */ .xem-lop { position: fixed; inset: 0; background: rgb(0 0 0 / 50%); z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--k-5); } .xem-hop { background: var(--panel); border-radius: var(--radius-xl); overflow: hidden; max-width: min(460px, 94vw); width: 100%; box-shadow: 0 20px 60px rgb(0 0 0 / 50%); display: flex; flex-direction: column; max-height: 92vh; } .xem-dau { display: flex; align-items: center; justify-content: space-between; gap: var(--k-2); padding: var(--k-3) var(--k-4); border-bottom: 1px solid var(--line); font-weight: 600; } .xem-dau span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #xem-player { width: 100%; background: #000; max-height: 68vh; display: block; } .xem-chan { display: flex; align-items: center; justify-content: space-between; gap: var(--k-2); padding: var(--k-3) var(--k-4); border-top: 1px solid var(--line); flex-wrap: wrap; } .xem-nut { display: flex; gap: var(--k-2); flex-wrap: wrap; } .xem-chan a.ghost { text-decoration: none; } /* * `.sc-tiendo`/`.td-*` (dong "dang chieu video gi" tren `.stream-card`) da bi * XOA — chu shop 25/08/2026 noi thang "bo dong thu 3 di, bo di chu khong * phai ghep". `tienDoPhatHtml()` trong app.js gio tra ve rong. */ .ch-tiendo { display: grid; gap: var(--k-1); margin-top: var(--k-1); } .ch-tiendo .td-thanh i { background: var(--tin-text); transition: width .8s linear; } .sc-nut { display: flex; gap: var(--k-1); align-items: center; } /* Ban va rieng cho the `` trong hang nut DA GO: `.sc-nut > *` o cuoi tep * cho ca `` lan `