/* Giao diện trình sửa clip. NGÔN NGỮ THIẾT KẾ — theo bản dựng Stitch `stitch_d_n_kh_i_nghi_p/`. Ba điều làm nên cái nhìn đó, và cả ba đều nằm ở đây chứ không rải rác: 1. KHỐI NỔI TRÊN NỀN ĐEN. Nền trang là đen tuyệt đối, còn mỗi cột là một khối xám bo góc nổi lên, cách nhau 8px. Trước đây các cột dán liền nhau và ngăn bằng một sợi chỉ 1px — mắt phải tự đi tìm ranh giới. 2. NHẤN XANH LÁ, CHỮ ĐEN TRÊN NHẤN. Xanh dương cũ trùng với màu chữ liên kết và với chính màu thương hiệu trong nhiều clip, nên khung chọn lẫn vào nội dung. Xanh lá không xuất hiện trong clip nào. 3. XÁM TRUNG TÍNH, KHÔNG ÁM XANH. Bảng màu cũ ám xanh dương ở mọi cấp (#0e1420, #263349…). Vỏ phần mềm ám màu thì màu thật của clip bị đọc lệch — đúng thứ không được phép xảy ra ở công cụ chỉnh màu. Nền tối để khung hình clip nổi lên, giống mọi công cụ dựng phim — mắt bám vào khung hình chứ không bám vào vỏ phần mềm. */ :root { --trang-nen: #000000; /* nền sâu nhất, khe giữa các khối */ --nen: #121212; /* khối chính: cột, thanh */ --nen-2: #181818; /* thẻ con, thanh công cụ */ --nen-3: #242424; /* rê chuột, ô nhập */ --nen-4: #333333; /* viền rõ, rãnh thanh trượt */ --vach: #262626; --chu: #ffffff; --chu-mo: #b3b3b3; --chu-mo-2: #727272; --nhan: #31d975; --nhan-sang: #44f38b; --nhan-nhe: rgba(49, 217, 117, .15); --tren-nhan: #06140c; /* chữ nằm TRÊN màu nhấn */ --cam: #f97316; --do: #ef4444; --xanh: #31d975; /* THANG CỠ CHỮ — ba bậc, không phải chín cỡ rời. Đo trước khi sửa: 57 trên 74 chỗ khai cỡ chữ nằm trong khoảng 10–12px, và chỉ ĐÚNG MỘT chỗ đạt 15px. Gần như không có chữ nào thoải mái để đọc, mà đây là công cụ ngồi trong đó vài tiếng mỗi ngày — xem `docs/KHONG-GIAN-LAM-VIEC.md`. Luật dùng: chật thì NỚI Ô CHỨA, đừng hạ cỡ chữ xuống lại. Hạ xuống là quay về đúng chỗ vừa đi ra. */ --chu-nho: 12px; /* nhãn phụ, đơn vị, dấu hiệu — thứ chỉ liếc qua */ --chu-vua: 14px; /* MẶC ĐỊNH: nhãn núm, tên lớp, nút, ô nhập */ --chu-to: 16px; /* tiêu đề bảng, tên clip */ --bo-nho: 4px; --bo: 8px; --bo-khoi: 10px; --bo-tron: 999px; /* NHỊP CHUNG. Mọi chuyển động trong vỏ phần mềm dùng đúng bộ này, để cả giao diện chạy cùng một nhịp thay vì mỗi chỗ một kiểu. 150–300ms là khoảng "có phản hồi mà không phải chờ"; dài hơn là chậm chạp. Đường cong vào có đuôi vượt nhẹ cho giống lò xo — thứ tạo cảm giác mượt. */ --nhip-nhanh: 150ms; --nhip: 220ms; --da-vao: cubic-bezier(.22, 1, .36, 1); --da-ra: cubic-bezier(.4, 0, 1, 1); /* Phông chữ tải từ Google Fonts, KÈM ĐỦ đường lùi hệ thống: mạng hỏng thì giao diện vẫn đúng, chỉ khác nét chữ. Không đưa phông vào clip — clip phải đo được cỡ chữ trên mọi máy, xem `measureFit()` của bộ dựng. */ /* Phao chỉ còn `system-ui`: Roboto/Noto không có file đi kèm, rơi vào đó là lệch mặt chữ mà chẳng có gì báo. Rơi về system-ui nghĩa là bộ chữ hỏng, nhìn ra ngay. */ --font: var(--bo-chu, "Be Vietnam Pro", system-ui, sans-serif); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--trang-nen); color: var(--chu); /* KHÔNG có phần đậm nhạt ở đây. Bản trước lọt chữ `None` vào đúng chỗ này (`font: None var(--chu-vua)/1.5 …`) — script đổi hàng loạt ghi ra giá trị rỗng của Python. `font:` rút gọn mà sai một từ là trình duyệt VỨT CẢ DÒNG, nên mất luôn cả cỡ chữ lẫn phông, và cả trình sửa rơi về Times New Roman. Hỏng nhìn thấy ngay mà không ai báo, vì CSS không kêu bao giờ. `tools/kiem-chu.mjs` bắt được ca này. */ font: var(--chu-vua)/1.5 var(--font); height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; } /* Khối nổi trên nền đen: 8px đệm ngoài, 8px khe giữa các khối. */ #app { display: flex; flex-direction: column; height: 100vh; padding: 8px; gap: 8px; } /* Thanh cuộn mảnh, chỉ hiện khi rê vào — như mọi công cụ dựng phim. */ .ds-canh, .ds-lop, .bang-tt, .video-ds, .khung-ds, .menu-them { scrollbar-width: thin; scrollbar-color: transparent transparent; } .ds-canh:hover, .ds-lop:hover, .bang-tt:hover, .video-ds:hover, .khung-ds:hover { scrollbar-color: var(--nen-4) transparent; } .ds-canh::-webkit-scrollbar, .ds-lop::-webkit-scrollbar, .bang-tt::-webkit-scrollbar, .menu-them::-webkit-scrollbar { width: 7px; height: 7px; } .ds-canh::-webkit-scrollbar-thumb, .ds-lop::-webkit-scrollbar-thumb, .bang-tt::-webkit-scrollbar-thumb, .menu-them::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--bo-tron); } .ds-canh:hover::-webkit-scrollbar-thumb, .ds-lop:hover::-webkit-scrollbar-thumb, .bang-tt:hover::-webkit-scrollbar-thumb { background: var(--nen-4); } /* ---------- thanh trên ---------- */ .thanh-tren { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; background: var(--nen); border-radius: var(--bo-khoi); flex: none; } /* Ô hiệu: chữ tắt của Mắt Bão, chỗ neo mắt ở góc trái — giống mọi phần mềm dựng phim, và cũng là chỗ duy nhất trong vỏ được dùng màu thương hiệu. */ /* Dấu M của logo. Ảnh cao 128px thu xuống 15px nên nét vẫn sắc trên màn hình 2×; đừng thay bằng bản nhỏ hơn. */ .o-hieu { height: 15px; width: auto; flex: none; display: block; } .hieu { font-weight: 600; font-size: var(--chu-vua); letter-spacing: .1px; color: var(--chu-mo); } .hieu b { font-weight: 800; color: var(--chu); } .day { flex: 1; } .phu { color: var(--chu-mo); font-size: var(--chu-vua); } .lien-ket { color: var(--chu-mo); text-decoration: none; font-size: var(--chu-vua); } .lien-ket:hover { color: var(--nhan); } .chon { background: var(--nen-3); color: var(--chu); border: 1px solid var(--vach); border-radius: var(--bo); padding: 7px 11px; font: inherit; min-width: 260px; } .chon:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; } /* ---------- thân ---------- */ .than { display: flex; flex: 1; min-height: 0; gap: 8px; } .cot-trai, .cot-phai { flex: none; background: var(--nen); border-radius: var(--bo-khoi); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Bề rộng do người dùng kéo, nhớ trong máy — xem `web/cot.js`. Số ở đây chỉ là đường lùi cho lần chạy đầu, trước khi JS kịp đặt biến. */ .cot-trai { width: var(--cot-trai, 272px); } .cot-phai { width: var(--cot-phai, 316px); } /* ẨN HẲN MỘT CỘT — xem `web/cot.js`. Giấu cả tay nắm kéo đi cùng: để lại một tay nắm cạnh chỗ trống thì kéo nó ra cái gì? Và `display:none` chứ không phải bề rộng 0 — cột bề rộng 0 vẫn ăn `Tab`, người dùng bàn phím sẽ đi lạc vào một cột vô hình. */ #app[data-an-trai="1"] .cot-trai, #app[data-an-trai="1"] .keo-cot[data-cot="trai"], #app[data-an-phai="1"] .cot-phai, #app[data-an-phai="1"] .keo-cot[data-cot="phai"] { display: none; } /* Nút đang bật thì sáng màu nhấn — người dùng phải biết vì sao cột biến mất. */ .nut-tron[aria-pressed="true"] { color: var(--nhan); background: var(--nhan-nhe); } /* Đường thoát khi bản chạy không dựng được video — xem `web/exportpanel.js`. */ .duong-thoat { margin-top: 10px; padding: 14px; border-radius: var(--bo); background: var(--nen-2); border: 1px solid var(--nen-4); } .duong-thoat b { display: block; font-size: var(--chu-vua); } .duong-thoat p { margin: 6px 0 12px; font-size: var(--chu-nho); color: var(--chu-mo); } .duong-thoat .thoat-chi { margin: 10px 0 0; color: var(--chu-mo-2); } /* ---------- tay nắm kéo cột ---------- */ /* Vạch mảnh 4px nhưng vùng bấm rộng 12px: tay nắm đúng 4px thì phải ngắm mới trúng. Nới bằng đệm ngang rồi kéo lề âm cho nó không chiếm thêm chỗ. */ .keo-cot { flex: none; width: 4px; margin: 0 -4px; padding: 0 4px; background-clip: content-box; background-color: transparent; cursor: col-resize; border-radius: var(--bo-tron); position: relative; z-index: 5; transition: background-color var(--nhip-nhanh) var(--da-ra); } .keo-cot:hover, .keo-cot.dang-keo { background-color: var(--nhan); } .keo-cot:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; } /* Đang kéo thì khoá con trỏ ở kiểu co giãn và cấm bôi đen chữ — không thì rê qua danh sách thành phần là bôi đen cả loạt tên món. */ body:has(.keo-cot.dang-keo) { cursor: col-resize; user-select: none; } body:has(.keo-cot.dang-keo) iframe { pointer-events: none; } .tieu-de-cot { padding: 10px 12px; font-size: var(--chu-nho); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--chu-mo); border-bottom: 1px solid var(--vach); flex: none; background: var(--nen-2); } .ds-canh { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; } .ds-canh li { padding: 8px 10px; border-radius: var(--bo); cursor: pointer; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; border: 1px solid transparent; } .ds-canh li { transition: background var(--nhip-nhanh) var(--da-ra); } .ds-canh li:hover { background: var(--nen-3); border-color: rgba(255,255,255,.08); } .ds-canh li[aria-current="true"] { background: var(--nhan); color: var(--tren-nhan); font-weight: 600; } .ds-canh li[aria-current="true"] .giay-canh { color: var(--tren-nhan); opacity: .75; } .ds-canh .giay-canh { color: var(--chu-mo); font-size: var(--chu-vua); font-variant-numeric: tabular-nums; } .trong { padding: 16px 14px; color: var(--chu-mo); font-size: var(--chu-vua); } .ghi-chu { color: var(--chu-mo-2); font-size: var(--chu-vua); margin: 10px 0 0; } /* ---------- giữa ---------- */ .giua { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .bang-bao { margin: 12px 16px 0; padding: 10px 14px; background: #3a2a12; border: 1px solid #6b4a1c; border-left: 3px solid var(--cam); border-radius: 0 8px 8px 0; font-size: var(--chu-vua); color: #f0d9bd; } .an { display: none !important; } .san-khau { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px; overflow: hidden; } /* Chỉ sân khấu của clip mới làm khung chứa đo được — `.boc-khung` cần biết CẢ HAI cạnh của nó (xem `cqh` ngay bên dưới). Không đặt cho cả `.san-khau` vì hai sân còn lại (khung nhấn, video) cao theo nội dung, mà `container-type: size` thì cắt đứt đúng cái đường phụ thuộc đó. */ #san-clip { container-type: size; } /* KHUNG XEM PHẢI GIỮ ĐÚNG TỈ LỆ CỦA CLIP — cả hai chiều, không chỉ một. * * Bản cũ viết `height: 100%` KÈM `aspect-ratio`, và hai dòng đó cãi nhau: chiều * cao đã định sẵn nên bề ngang tính ra từ tỉ lệ, rồi `max-width` cắt bề ngang * lại cho vừa cột — mà chiều cao thì KHÔNG được tính lại. Kết quả là tỉ lệ bị bẻ * gãy IM LẶNG. * * Đo thật trên clip 1280×720 trong cửa sổ cao 977px: khung ra 483×799, tức tỉ lệ * 0,605 — dọc hẳn, trong khi `--ti-le` vẫn đang là `1280 / 720`. Bộ dựng bên * trong tự co cho vừa nên clip vẫn đúng hình, chỉ là nằm giữa hai dải trắng trên * dưới; người dùng mở clip ngang lên thấy một khung dọc và tưởng dự án hỏng. * * Cách chữa: đừng định sẵn cạnh nào cả, lấy CẠNH NÀO CHẠM TRƯỚC. `cqw`/`cqh` đo * đúng lòng trong của sân khấu (đã trừ padding), nên không phải cộng trừ tay. */ .boc-khung { position: relative; background: #000; border-radius: var(--bo); /* KHÔNG `overflow: hidden` Ở ĐÂY. Nó vốn chỉ để bo tròn bốn góc iframe. Nhưng nó cắt luôn tay nắm co giãn: món nào rộng bằng cả khung thì tám tay nắm nằm đúng ngoài mép, bị cắt sạch — bấm vào là trúng sân khấu chứ không trúng tay nắm, và người dùng tưởng tính năng hỏng. Chuyển việc bo góc xuống chính iframe (`#khung`), chỗ duy nhất thật sự cần. Phần tràn vẫn được `#san-clip` cắt, nên phóng to không lem ra ngoài sân khấu. */ box-shadow: 0 14px 46px rgba(0, 0, 0, .6); aspect-ratio: var(--ti-le, 16 / 9); max-width: 100%; max-height: 100%; /* Đường lùi cho trình duyệt chưa có truy vấn khung chứa: chiếm hết bề ngang, cao tính theo tỉ lệ. Hẹp hơn mức có thể ở sân khấu lùn, nhưng KHÔNG BAO GIỜ méo tỉ lệ — mà méo tỉ lệ mới là lỗi người dùng nhìn thấy. */ width: 100%; width: min(100cqw, calc(100cqh * var(--ti-le, 16 / 9))); } #khung { width: 100%; height: 100%; border: 0; display: block; background: #000; border-radius: var(--bo); /* trước đây do `.boc-khung` cắt hộ */ } /* Đang phóng thì `.boc-khung` bỏ bo góc, iframe cũng phải bỏ theo, không thì ở mức 400% cái bo góc bị phóng thành một đường cong to tướng. */ .boc-khung.dang-phong #khung { border-radius: 0; } /* Lớp phủ vẽ khung chọn — LUÔN ở trang cha, không bao giờ chèn vào iframe. Chèn vào iframe là làm bẩn đúng cái lát nữa đem đi xuất video. */ .lop-phu { position: absolute; inset: 0; pointer-events: none; } .dieu-khien { display: flex; align-items: center; gap: 14px; padding: 12px 18px 16px; flex: none; } .thanh-tua { flex: 1; accent-color: var(--nhan); cursor: pointer; } .dong-ho { color: var(--chu-mo); font-variant-numeric: tabular-nums; font-size: var(--chu-vua); min-width: 130px; text-align: right; } /* Nút dạng viên thuốc — bo tròn hẳn, không viền, chữ đậm và nhỏ. Đây là thứ đổi nhiều nhất so với bản cũ, và cũng là thứ thấy đầu tiên. */ .nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--nen-3); color: var(--chu); border: 0; border-radius: var(--bo-tron); padding: 7px 15px; font: 600 var(--chu-vua)/1 var(--font); cursor: pointer; white-space: nowrap; } .nut { transition: background var(--nhip-nhanh) var(--da-ra), border-color var(--nhip-nhanh) var(--da-ra), transform var(--nhip-nhanh) var(--da-vao); } .nut:hover:not(:disabled) { background: var(--nen-4); transform: scale(1.02); } /* Lún xuống một chút khi bấm. Không đổi kích thước ô, chỉ transform — nên không làm xô lệch những thứ xung quanh. */ .nut:active:not(:disabled) { transform: scale(.97); } .nut:disabled { opacity: .45; cursor: default; } .nut.chinh { background: var(--nhan); color: var(--tren-nhan); font-weight: 700; } .nut.chinh:hover:not(:disabled) { background: var(--nhan-sang); box-shadow: 0 0 16px rgba(49, 217, 117, .38); } .nut.vien { background: transparent; border: 1px solid var(--nen-4); } .nut.vien:hover:not(:disabled) { background: transparent; border-color: var(--chu); } /* ---------- lời nhắc ---------- */ .bao { /* Nằm TRÊN thanh phát, không đè lên: thanh phát cao 62px + 8px khe ngoài. */ position: fixed; left: 50%; bottom: 82px; transform: translateX(-50%); background: var(--nen-3); border: 1px solid var(--vach); padding: 11px 18px; border-radius: var(--bo); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: var(--chu-vua); z-index: 100; max-width: min(560px, 90vw); /* Nền mờ: lời nhắc nổi trên khung hình clip, mà khung hình thì lắm chi tiết. Làm nhoè cái phía sau thì chữ đọc ra ngay mà không phải tô nền đục kín. */ background: color-mix(in srgb, var(--nen-3) 88%, transparent); backdrop-filter: blur(14px); animation: bao-hien var(--nhip) var(--da-vao); } @keyframes bao-hien { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .bao.hong { border-color: var(--do); background: #2c1416; color: #ffd9da; } .ds-canh .khong-the { color: var(--chu-mo-2); font-size: var(--chu-vua); cursor: default; padding: 12px 11px; line-height: 1.5; } .ds-canh .khong-the:hover { background: none; } /* ============ LỚP BẮT SỰ KIỆN & KHUNG CHỌN ============ */ /* iframe nuốt hết chuột, nên lớp này phủ lên trên để trang cha bắt được. Nó nằm khít iframe ⇒ toạ độ trùng 1-1, không phải quy đổi. */ .lop-bat { position: absolute; inset: 0; cursor: default; } .lop-bat.keo-duoc { cursor: move; } .khung-chon, .khung-re { position: absolute; display: none; pointer-events: none; border: 1.5px solid var(--nhan); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); } .khung-re { border-color: rgba(49, 217, 117, .55); border-style: solid; } /* Ba kiểu viền cho ba trạng thái — nhìn là biết kéo được hay không. */ .khung-chon[data-kieu="tu"] { border-style: solid; } .khung-chon[data-kieu="dat"] { border-style: dashed; } .khung-chon[data-kieu="con"] { border-style: dotted; border-color: #a3a3a3; } .khung-nhan { position: absolute; left: -1.5px; top: -21px; background: var(--nhan); color: var(--tren-nhan); font-size: var(--chu-nho); font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 4px 4px 0 0; white-space: nowrap; } .khung-chon[data-kieu="con"] .khung-nhan { background: #a3a3a3; } /* ============ DANH SÁCH THÀNH PHẦN ============ */ .ds-lop { overflow-y: auto; flex: 1; padding: 5px 0 10px; min-height: 90px; } .lop-hang { display: flex; align-items: center; gap: 7px; padding: 5px 10px; cursor: pointer; font-size: var(--chu-vua); } .lop-hang { transition: background var(--nhip-nhanh) var(--da-ra); } .lop-hang:hover { background: var(--nen-3); } .lop-hang.dang { background: var(--nhan); color: var(--tren-nhan); } .lop-cham { width: 7px; height: 7px; border-radius: 2px; background: var(--chu-mo-2); flex: none; } .lop-hang.dang .lop-cham { background: var(--tren-nhan); } .lop-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lop-dau { margin-left: auto; font-size: var(--chu-nho); color: var(--chu-mo-2); flex: none; } .lop-hang.dang .lop-dau { color: var(--tren-nhan); opacity: .7; } /* ---------- KÉO ĐỔI CHỖ TRONG CỘT THÀNH PHẦN ---------- Thứ tự trong danh sách chính là thứ tự vẽ, nên kéo ở đây đổi cả hình lẫn nhịp bay vào. Vạch chỉ dẫn phải nói rõ SẼ RƠI VÀO ĐÂU trước khi người dùng nhả tay: một vạch mảnh giữa hai hàng là "chen vào giữa", còn cả hàng sáng lên là "vào trong cụm này". Thiếu phân biệt đó thì kéo vào cụm và kéo qua cụm trông y hệt nhau. */ .lop-hang { position: relative; } .lop-hang.dang-keo { opacity: .4; } .lop-hang.tha-tren::before, .lop-hang.tha-duoi::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--nhan); border-radius: 2px; pointer-events: none; } .lop-hang.tha-tren::before { top: -1px; } .lop-hang.tha-duoi::after { bottom: -1px; } .lop-hang.tha-vao { background: var(--nhan-nhe); box-shadow: inset 0 0 0 1px var(--nhan); border-radius: var(--bo-nho); } /* Thả vào chỗ trống dưới danh sách = đem ra ngoài cùng. Đây là đường DUY NHẤT lôi một món ra khỏi cụm, nên nó phải có dấu hiệu riêng. */ .ds-lop.tha-cuoi { box-shadow: inset 0 -2px 0 var(--nhan); } .cot-trai .ds-canh { flex: 0 0 auto; max-height: 34%; } /* ============ BẢNG THUỘC TÍNH ============ */ .bang-tt { overflow-y: auto; flex: 1; padding-bottom: 24px; } .chi-duong { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--vach); font-size: var(--chu-vua); color: var(--chu-mo); position: sticky; top: 0; background: var(--nen-2); z-index: 2; } .chi-o { background: none; border: 0; color: var(--chu-mo); font: inherit; padding: 2px 4px; border-radius: 4px; cursor: pointer; } .chi-o:hover { background: var(--nen-3); color: var(--chu); } .chi-o.dang { color: var(--chu); font-weight: 600; } .chi-mui { color: var(--nen-4); } .muc { padding: 12px 12px 4px; border-bottom: 1px solid var(--vach); } .muc-ten { margin: 0 0 11px; font-size: var(--chu-nho); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--chu); } .num { margin-bottom: 12px; } .num-nhan { display: block; font-size: var(--chu-vua); color: var(--chu-mo); margin-bottom: 4px; } .num-nhan.an-nhan { display: none; } .num-goi { margin: 4px 0 0; font-size: var(--chu-nho); color: var(--chu-mo-2); line-height: 1.45; } .o-nhap { width: 100%; background: var(--nen-3); color: var(--chu); border: 1px solid transparent; border-radius: var(--bo-nho); padding: 6px 9px; font: inherit; font-size: var(--chu-vua); font-variant-numeric: tabular-nums; } .o-nhap:focus { border-color: var(--nhan); } .o-nhap:focus-visible { outline: 2px solid var(--nhan); outline-offset: -1px; border-color: var(--nhan); } .o-van { resize: vertical; line-height: 1.5; font-family: inherit; } .o-so { text-align: right; } .num-so { display: flex; align-items: center; gap: 8px; } .num-so .truot { flex: 1; accent-color: var(--nhan); min-width: 0; } .num-so .o-so { width: 68px; flex: none; } .cap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cap .num { margin-bottom: 8px; } .doan, .nac { display: flex; gap: 3px; flex-wrap: wrap; } .doan-o, .nac-o { flex: 1; min-width: 0; background: var(--nen); color: var(--chu-mo); border: 1px solid var(--vach); border-radius: 6px; padding: 5px 4px; font: inherit; font-size: var(--chu-nho); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doan-o[aria-pressed="true"], .nac-o[aria-pressed="true"] { background: var(--nhan); border-color: var(--nhan); color: var(--tren-nhan); font-weight: 600; } .nac-o { flex: 0 0 calc(25% - 3px); } .num-mau { display: flex; gap: 7px; align-items: center; } .o-mau { width: 38px; height: 30px; padding: 0; border: 1px solid var(--vach); border-radius: 6px; background: none; cursor: pointer; flex: none; } .o-ma { flex: 1; font-family: ui-monospace, monospace; font-size: var(--chu-vua); } .nhieu { display: flex; flex-direction: column; gap: 5px; } .nhieu-o, .cong-tac { display: flex; align-items: center; gap: 7px; font-size: var(--chu-vua); cursor: pointer; } .nhieu-o input, .cong-tac input { accent-color: var(--nhan); } .num-anh .anh-xem { margin-top: 7px; background: var(--nen); border: 1px solid var(--vach); border-radius: 7px; padding: 7px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: var(--chu-nho); color: var(--chu-mo-2); } .num-anh .anh-xem img { max-width: 100%; max-height: 90px; display: block; } .nhac { margin: 0 0 10px; padding: 8px 10px; font-size: var(--chu-vua); line-height: 1.5; background: var(--nen); border-left: 2px solid var(--chu-mo-2); border-radius: 0 6px 6px 0; color: var(--chu-mo); } .nut.nho { padding: 6px 11px; font-size: var(--chu-vua); } /* ============ THANH TRÊN ============ */ .dau-ban { font-size: var(--chu-vua); color: var(--cam); } /* ============ NÚT TRÊN ĐẦU CỘT ============ */ .tieu-de-cot { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .cot-nut { display: flex; gap: 2px; } .nut-ti { background: none; border: 1px solid transparent; color: var(--chu-mo); border-radius: 5px; width: 22px; height: 22px; padding: 0; font-size: var(--chu-vua); line-height: 1; cursor: pointer; } .nut-ti:hover:not(:disabled) { background: var(--nen-3); border-color: var(--vach); color: var(--chu); } .nut-ti:disabled { opacity: .3; cursor: default; } .menu-them { position: absolute; z-index: 30; background: var(--nen-3); border: 1px solid var(--vach); border-radius: 9px; padding: 5px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); max-height: 320px; overflow-y: auto; background: color-mix(in srgb, var(--nen-3) 90%, transparent); backdrop-filter: blur(16px); /* Bung ra từ phía nút vừa bấm, không phải hiện đột ngột giữa trời — cho mắt nối được cái menu với cái nút đã gọi nó ra. */ animation: menu-bung var(--nhip-nhanh) var(--da-vao); transform-origin: top left; } @keyframes menu-bung { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } } .menu-them button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--chu); font: inherit; font-size: var(--chu-vua); padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .menu-them button:hover { background: var(--nhan); color: var(--tren-nhan); } /* ============ THẺ CỘT PHẢI ============ */ .the-hang { display: flex; gap: 2px; padding: 6px 8px 0; background: var(--nen-2); border-bottom: 1px solid var(--vach); flex: none; } .the { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--chu-mo); font: 600 var(--chu-nho)/1 var(--font); letter-spacing: .02em; padding: 11px 6px; cursor: pointer; border-radius: var(--bo-nho) var(--bo-nho) 0 0; } .the[aria-selected="true"] { color: var(--nhan); border-bottom-color: var(--nhan); background: var(--nen-3); } .the { transition: color var(--nhip-nhanh) var(--da-ra), border-color var(--nhip) var(--da-vao); } .the:hover { color: var(--chu); } /* ============ XUẤT VIDEO ============ */ .nut.rong { width: 100%; } /* Nút là thẻ thì phải gỡ gạch chân — `.nut` viết cho