/* MẪU CSS — TRANG TRONG (kho.html). Sếp sửa thoải mái.
⛔ Chỗ cắm PHẢI còn: #050505 #f6f4f0 #e6b261
⭐ CẤU TẠO: đây là KHO, không phải trang giới thiệu. Ruột trang là HỆ KHAY —
mỗi loại thư viện một khay kéo ra, y như tủ mẫu vật liệu ngoài đời.
⭐ Chữ vẫn gõ ra kiểu dòng lệnh, và có lớp RADAR bám con trỏ.
⛔⛔ ĐỪNG TẮT CHUYỂN ĐỘNG BẰNG CHỔI QUÉT `*{animation:none}`. Xem cong.css.
*/
:root{
--nen:#050505; --tam:#111111; --the:#111111; --chu:#f6f4f0;
--chu2:#a3a099; --diem:#e6b261; --vien:rgba(230,178,97,.20);
--kim:linear-gradient(140deg,#f0d090 0%,#e6b261 42%,#b8842f 100%);
--may:cubic-bezier(.4,0,.2,1);
--mono:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--pad:clamp(16px,3.2vw,46px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--nen);color:var(--chu2);font-family:var(--mono);font-size:15px;
line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--diem);color:var(--nen)}
.lop{max-width:1560px;margin:0 auto;padding:0 var(--pad)}
/* ── nền ── */
.nen-luoi{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(230,178,97,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(230,178,97,.05) 1px,transparent 1px);background-size:46px 46px}
.nen-nhieu{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.075;
background-image:radial-gradient(rgba(255,255,255,.5) .6px,transparent .6px);background-size:3px 3px}
.beam{position:fixed;left:0;right:0;top:-260px;height:260px;z-index:1;pointer-events:none}
.crt{position:fixed;inset:0;z-index:2;pointer-events:none}
.prog{position:fixed;left:0;top:0;height:2px;width:0;background:var(--kim);z-index:60}
/* ══ RADAR BÁM CON TRỎ ══════════════════════════════════════════════
⛔ `pointer-events:none` trên CẢ lớp — thiếu chữ này là radar nuốt mọi cú bấm. */
.radar{position:fixed;left:0;top:0;z-index:70;pointer-events:none;
transform:translate3d(-200px,-200px,0);will-change:transform}
/* ⛔ Radar phải đọc được trên CẢ nền đen LẪN ảnh sản phẩm nền trắng.
Chỉ tô vàng thì nằm trên ảnh trắng là chìm mất. Thêm viền tối bằng drop-shadow. */
.radar i{position:absolute;left:50%;top:50%;border-radius:50%;
transform:translate(-50%,-50%);border:1.5px solid var(--diem);
filter:drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 0 5px rgba(0,0,0,.65))}
.radar .v{width:24px;height:24px;opacity:.85;
box-shadow:0 0 10px rgba(230,178,97,.5),inset 0 0 8px rgba(230,178,97,.25)}
.radar .v::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;
background:var(--diem);border-radius:50%;transform:translate(-50%,-50%)}
.radar .p,.radar .p2{width:24px;height:24px;opacity:0}
.radar .toa{position:absolute;left:24px;top:15px;font-size:9.5px;letter-spacing:.14em;
color:var(--diem);opacity:.9;white-space:nowrap;
text-shadow:0 0 4px #000,0 0 8px #000,0 1px 2px #000}
/* vòng quét toả ra — do JS bật lớp `.dong`, nên chổi CSS không quét mất */
.dong .radar .p{animation:ping 2.4s var(--may) infinite}
.dong .radar .p2{animation:ping 2.4s var(--may) 1.2s infinite}
@keyframes ping{
0%{width:24px;height:24px;opacity:.85}
100%{width:160px;height:160px;opacity:0}}
/* bám vào thứ bấm được -> vòng khoá mục tiêu */
.radar.bam .v{width:52px;height:52px;border-color:var(--diem);
box-shadow:0 0 22px rgba(230,178,97,.75),inset 0 0 14px rgba(230,178,97,.3)}
.radar .v{transition:width .18s var(--may),height .18s var(--may)}
@media(hover:none){.radar{display:none}}
/* ══ THANH TRÊN ═════════════════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;
justify-content:space-between;gap:18px;padding:12px var(--pad);
border-bottom:1px solid transparent;transition:background .25s var(--may),border-color .25s}
.nav.dac{background:rgba(5,5,5,.9);backdrop-filter:blur(9px);border-bottom-color:var(--vien)}
.hieu{display:flex;align-items:center;gap:12px}
.hieu img{height:44px;width:auto}
/* ⛔⛔ LUẬT LOGO 3D — chép nguyên khối từ ~/AAS-Studio/LUAT-LOGO-3D.md §3.
Hai ô trên trang kho: khoá nhận diện đầu trang 44px · chân trang 34px — cả hai đều
trên 24px nên đều xoay, không rơi vào ngoại lệ «ô nhỏ».
⛔ @keyframes xoay-logo khai ĐÚNG MỘT lần trong cả trang; đổi cỡ bằng biến --l3d. */
.logo3d{
--l3d:44px;
width:var(--l3d);height:var(--l3d);display:block;flex:none;
background-image:url(assets/logo-turntable.png);
background-repeat:no-repeat;
background-size:calc(var(--l3d) * 72) var(--l3d);
animation:xoay-logo 6s steps(72) infinite;
filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.logo3d.chan{--l3d:34px}
@keyframes xoay-logo{
from{background-position:0 0}
to{background-position:calc(var(--l3d) * -72) 0}
}
.hieu .ten{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.hieu .ten b{font-size:14px;font-weight:700;letter-spacing:.19em;color:var(--chu);
text-transform:uppercase}
.hieu .ten s{text-decoration:none;font-size:10px;letter-spacing:.16em;color:var(--diem);
text-transform:uppercase}
/* ⛔⛔ THUỘC TÍNH `hidden` PHẢI THẮNG MỌI LUẬT `display` TỰ ĐẶT.
Trình duyệt chỉ khai `[hidden]{display:none}` ở mức yếu nhất, nên bất kỳ lớp nào của
mình đặt `display` cũng đè qua. Bắt tận tay ngày 05/08: nút TẢI MÔ HÌNH 3D mang
`hidden` mà `.nut{display:inline-flex}` vẫn kéo hiện ra — mã chưa có tệp 3D nào mà
trang vẫn bày một nút bấm trỏ vào `#`. Hứa với kiến trúc sư một thứ chưa có.
Không thấy lỗi này bằng cách đọc mã; phải chụp ảnh rồi mở ra nhìn mới thấy. */
[hidden]{display:none!important}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.2em;
text-transform:uppercase;cursor:pointer;padding:12px 22px;border:1px solid var(--diem);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nut.dac{background:var(--diem);color:var(--nen)}
.nut.mo{background:transparent;color:var(--diem)}
.nut.mo:hover{background:var(--diem);color:var(--nen)}
.nut.dac:hover{filter:brightness(1.16)}
/* ══ THANH ĐIỀU KHIỂN ═══════════════════════════════════════════════ */
.dieu-khien{padding:clamp(18px,3vh,32px) 0 clamp(12px,2vh,20px)}
.trang-thai{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--vien);
padding:8px 14px;font-size:11px;letter-spacing:.17em;color:var(--chu2);
background:rgba(10,10,10,.6);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.cham{width:7px;height:7px;border-radius:50%;background:var(--diem);
animation:nhap 1.4s steps(2) infinite}
@keyframes nhap{0%,49%{opacity:1}50%,100%{opacity:.18}}
.lenh{margin-top:15px;display:flex;align-items:baseline;gap:9px;font-size:13px;
letter-spacing:.04em;color:var(--chu);min-height:1.6em}
.lenh s{text-decoration:none;color:var(--diem);flex:none}
.con{display:inline-block;width:.58em;height:1.02em;background:var(--diem);
vertical-align:-.14em;margin-left:2px;animation:conNhay 1.05s steps(2) infinite}
@keyframes conNhay{0%,49%{opacity:1}50%,100%{opacity:0}}
.go-tim{margin-top:14px;display:flex;align-items:center;gap:10px;border:1px solid var(--vien);
background:rgba(9,9,9,.78);padding:14px 18px}
.go-tim .nhac{color:var(--diem);flex:none}
.go-tim input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--chu);
font-family:var(--mono);font-size:clamp(13px,1.05vw,15px);letter-spacing:.03em}
.go-tim input::placeholder{color:#6a6862}
.go-tim .so-ket{flex:none;font-size:11px;letter-spacing:.14em;color:var(--chu2)}
.go-tim .so-ket b{color:var(--diem);font-weight:400}
.chi-so{margin-top:16px;display:grid;gap:10px;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.chi-so .d{border:1px solid var(--vien);background:rgba(9,9,9,.6);padding:12px 14px}
.chi-so .d .t{font-size:10.5px;letter-spacing:.14em;color:var(--chu2);text-transform:uppercase}
.chi-so .d .v{margin-top:5px;font-size:13px;color:var(--diem)}
.chi-so .d .thanh{margin-top:7px;height:4px;background:rgba(255,255,255,.08);overflow:hidden}
.chi-so .d .thanh i{display:block;height:100%;width:0;background:var(--kim);
transition:width 1s var(--may)}
/* ══ ĐẦU MỤC ════════════════════════════════════════════════════════ */
/* ⛔ GIỮ CHỖ CHO CHỮ ĐANG GÕ. Chữ gõ ra từng ký tự nên khối nào ôm sát chữ sẽ co lại
rồi bung ra — cả trang nảy lên nảy xuống một nhịp. Mỗi khối có chữ gõ phải giữ đúng
chiều cao (và chiều ngang nếu là ô có viền) của chữ đầy đủ. */
.dau-muc{margin-bottom:clamp(14px,2.2vh,22px)}
.dau-muc .so{min-height:1.5em}
.dau-muc h2{min-height:1.15em}
.dau-muc p{min-height:3.6em}
.trang-thai{min-width:min(100%,30em);justify-content:flex-start}
.chi-so .d .t{min-height:1.5em}
.chi-so .d .v{min-height:1.5em}
.faq summary{min-height:1.6em}
/* ⛔ `display:block` BẮT BUỘC: hieu-ung.css đổi h2 sang inline-block để gạch vàng
chạy đúng bề ngang CHỮ. Nhãn `// KHO` mà còn inline là đè lên tiêu đề. */
.dau-muc .so{display:block;font-size:10.5px;letter-spacing:.24em;color:var(--diem)}
.dau-muc h2{margin-top:6px;font-size:clamp(20px,2.4vw,32px);font-weight:800;
letter-spacing:.03em;color:var(--chu);text-transform:uppercase}
.dau-muc p{margin-top:9px;max-width:76ch;font-size:13.5px;color:var(--chu2);line-height:1.8}
.kho-khay,.muc-lon{padding:clamp(22px,4vh,46px) 0;border-top:1px solid var(--vien)}
/* ══ HỆ KHAY ════════════════════════════════════════════════════════ */
.day-khay{display:flex;flex-direction:column;gap:10px}
.khay{border:1px solid var(--vien);background:rgba(9,9,9,.66);position:relative;
clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))}
.khay.co:hover{border-color:rgba(230,178,97,.42)}
/* mặt khay — cái Sếp nhìn thấy khi khay đóng */
.khay .mat{width:100%;display:grid;align-items:center;gap:clamp(10px,1.6vw,22px);
grid-template-columns:64px minmax(0,1fr) 96px 92px 30px;
background:none;border:0;padding:clamp(12px,1.7vh,18px) clamp(13px,1.7vw,20px);
font-family:var(--mono);text-align:left;cursor:pointer;color:inherit}
.khay.cho .mat{cursor:default;opacity:.62}
.khay .mat .so{font-size:11px;letter-spacing:.16em;color:var(--diem)}
/* ⭐ TÊN KHAY GÕ RA KIỂU DÒNG LỆNH — dấu nhắc `>` đứng sẵn, tên gõ sau (app.js).
⛔ `min-height` giữ chỗ theo dòng chữ: thiếu là lúc tên còn rỗng cả mặt khay co lại
rồi bật ra, chín khay nảy một lượt. */
.khay .mat .ten{display:flex;align-items:baseline;gap:9px;min-width:0;min-height:1.5em}
.khay .mat .ten s{text-decoration:none;color:var(--diem);flex:none;
font-size:clamp(12px,1.05vw,15px)}
.khay .mat .ten b{font-weight:400;font-size:clamp(12.5px,1.15vw,16px);letter-spacing:.13em;
color:var(--chu);text-transform:uppercase;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;min-width:0}
/* con trỏ nhấp nháy chạy theo chữ đang gõ — JS gỡ đi khi khay gõ xong */
.khay .mat .ten .con{vertical-align:-.12em}
.khay .mat .mo-dong{text-align:right;font-size:9.5px;letter-spacing:.17em;color:var(--chu2);
white-space:nowrap}
.khay.mo .mat .mo-dong{color:var(--diem)}
.khay .mat .dem{text-align:right;font-size:17px;color:var(--diem);white-space:nowrap}
.khay .mat .dem s{text-decoration:none;font-size:9.5px;color:var(--chu2);
letter-spacing:.14em;margin-left:4px}
.khay .mat .dem.cho{font-size:10.5px;color:var(--chu2);letter-spacing:.13em}
/* tay nắm khay — mũi xuống, xoay khi mở */
.khay .mat .tay{justify-self:end;width:26px;height:26px;border:1px solid var(--vien);
position:relative;transition:transform .35s var(--may),border-color .2s}
.khay .mat .tay::after{content:"";position:absolute;left:50%;top:46%;width:7px;height:7px;
border-right:1px solid var(--diem);border-bottom:1px solid var(--diem);
transform:translate(-50%,-50%) rotate(45deg)}
.khay.mo .mat .tay{transform:rotate(180deg);border-color:var(--diem)}
.khay.cho .mat .tay{opacity:.35}
/* ⭐ DẢI ẢNH CHẠY TRÊN MẶT KHAY — khay đóng chỉ bày dải này, bấm mới bung hết.
⛔ ĐỪNG mở sẵn khay nào: kho 119 món mở sẵn là phải kéo hết mới tới khay kế,
kho càng lớn càng tệ. Đây là lỗi Sếp bắt ngày 05/08. */
.khay .ray{overflow:hidden;padding:0 clamp(13px,1.7vw,20px) clamp(12px,1.7vh,17px);
cursor:pointer;max-height:200px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
transition:opacity .3s var(--may),max-height .4s var(--may)}
.khay.mo .ray{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none}
.chay-khay{display:flex;gap:7px;width:max-content;will-change:transform}
.chay-khay img{width:clamp(62px,5.6vw,82px);height:clamp(62px,5.6vw,82px);
object-fit:contain;background:#0d0d0d;border:1px solid var(--vien);padding:5px;flex:none;
transition:border-color .2s var(--may)}
.khay.co:hover .chay-khay img{border-color:rgba(230,178,97,.34)}
/* lòng khay — kéo ra bằng grid-rows, không cần biết chiều cao trước */
.khay .long{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--may)}
.khay.mo .long{grid-template-rows:1fr}
.khay .long>div{overflow:hidden;min-height:0}
.khay .luoi{padding:0 clamp(13px,1.7vw,20px) clamp(14px,2vh,20px)}
/* vạch trong lòng khay cho ra chất ngăn kéo */
.khay .long>div::before{content:"";display:block;height:1px;
margin:0 clamp(13px,1.7vw,20px) clamp(13px,1.8vh,18px);
background:linear-gradient(90deg,var(--diem),transparent)}
/* ══ Ô SẢN PHẨM ═════════════════════════════════════════════════════ */
.luoi{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.m{display:block;text-align:left;background:rgba(13,13,13,.9);border:1px solid var(--vien);
padding:0;cursor:pointer;font-family:var(--mono);color:inherit;overflow:hidden;
transition:border-color .2s var(--may),transform .2s var(--may)}
.m:hover{border-color:var(--diem);transform:translateY(-2px)}
.m .a{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.m .a img{width:100%;height:100%;object-fit:contain;padding:8px}
.m .t{padding:9px 11px 11px;border-top:1px solid var(--vien)}
.m .t b{display:block;font-size:11.5px;font-weight:400;letter-spacing:.09em;color:var(--diem)}
.m .t s{display:block;margin-top:3px;text-decoration:none;font-size:10px;color:var(--chu2);
letter-spacing:.06em}
/* ══ KHỐI CHỜ / NHÓM / FAQ ══════════════════════════════════════════ */
.nhom{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.nhom .o{border:1px solid var(--vien);background:rgba(9,9,9,.62);padding:16px 18px}
.nhom .o h3{font-size:13px;font-weight:400;letter-spacing:.13em;color:var(--chu);
text-transform:uppercase}
.nhom .o .cho{margin-top:9px;font-size:11px;letter-spacing:.13em;color:var(--chu2)}
.nhom .o .dem{margin-top:9px;font-size:20px;color:var(--diem)}
/* ⛔ TÊN LỚP PHẢI KHỚP MÃ DỰNG: khoi_cho() trong dung_web_thuvien.py phát ra
`cho-noi-dung`, không phải `khoi-cho`. Đặt sai tên là khối mất khung và chữ dính liền
— nhìn qua vẫn có chữ nên rất dễ cho trôi. Nhận cả hai tên cho chắc. */
.cho-noi-dung,.khoi-cho{border:1px dashed var(--vien);background:rgba(9,9,9,.5);padding:22px;
font-size:13.5px;color:var(--chu2);line-height:1.85}
.cho-noi-dung b,.khoi-cho b{display:block;color:var(--diem);letter-spacing:.14em;
margin-bottom:8px;font-weight:400;text-transform:uppercase}
details{border-top:1px solid var(--vien);padding:15px 0}
summary{cursor:pointer;font-size:14px;color:var(--chu);letter-spacing:.05em;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";color:var(--diem)}
details[open] summary::before{content:"− "}
details p{margin-top:10px;font-size:13.5px;color:var(--chu2);line-height:1.85;max-width:86ch}
/* ══ XEM CHI TIẾT ═══════════════════════════════════════════════════ */
.xem{position:fixed;inset:0;z-index:80;background:rgba(3,3,3,.93);display:none;
place-items:center;padding:var(--pad);backdrop-filter:blur(5px)}
.xem.mo{display:grid}
.xem .hop{display:grid;gap:clamp(16px,2.4vw,34px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
max-width:1080px;width:100%;border:1px solid var(--vien);background:var(--tam);
padding:clamp(16px,2.4vw,30px);align-items:center}
.xem .anh{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.xem .anh img{width:100%;height:100%;object-fit:contain;padding:12px}
.xem .ma{font-size:clamp(20px,2.4vw,30px);color:var(--diem);letter-spacing:.08em}
.xem dl{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:11px 18px;font-size:13.5px}
.xem dt{color:var(--chu2);letter-spacing:.11em;text-transform:uppercase;font-size:11px}
.xem dd{color:var(--chu)}
.dong-x{position:fixed;right:20px;top:20px;z-index:81;display:none;width:44px;height:44px;
border:1px solid var(--vien);background:rgba(9,9,9,.9);color:var(--chu);cursor:pointer;
font-size:16px}
.dong-x.mo{display:block}
/* ══ CHÂN TRANG + BĂNG CHỮ CHẠY ═════════════════════════════════════ */
.chan-trang{display:flex;align-items:center;gap:16px;padding:26px var(--pad) 20px;
border-top:1px solid var(--vien);font-size:11.5px;color:var(--chu2);letter-spacing:.09em}
.chan-trang img{height:34px;width:auto}
.bang{overflow:hidden;border-top:1px solid var(--vien);background:rgba(9,9,9,.7);
padding:11px 0;font-size:11px;letter-spacing:.13em;color:var(--chu2);white-space:nowrap}
.bang i{display:inline-block;font-style:normal;will-change:transform}
.bang b{color:var(--diem);font-weight:400}
/* ⛔ LUẬT R9 — nội dung HIỆN MẶC ĐỊNH; chỉ khi JS đủ hạ tầng mới ẩn chờ hiệu ứng. */
.ja .hien-dan{opacity:0;transform:translateY(14px)}
.ja .hien-dan.ra{opacity:1;transform:none;
transition:opacity .6s var(--may),transform .6s var(--may)}
/* ══ MÀN HẸP ════════════════════════════════════════════════════════ */
@media(max-width:900px){
.khay .mat{grid-template-columns:44px minmax(0,1fr) 74px 26px;row-gap:9px}
.khay .mat .mo-dong{display:none}
.xem .hop{grid-template-columns:minmax(0,1fr)}
.go-tim{flex-wrap:wrap}
.go-tim input{flex:1 1 100%;order:3;margin-top:6px}
}
/* ⛔⛔ TẮT CHUYỂN ĐỘNG — ĐÍCH DANH, KHÔNG QUÉT CHỔI.
Con trỏ nhấp nháy, radar và băng chữ chạy VẪN CHẠY: trang trí biên độ nhỏ. */
@media(prefers-reduced-motion:reduce){
.hien-dan{opacity:1!important;transform:none!important}
.m:hover{transform:none}
html{scroll-behavior:auto}
}
/* ⭐ Khay bung ra thì ô sản phẩm hiện dần theo lớp, không đổ ập một lúc. */
.khay.mo .luoi .m{animation:oRa .42s var(--may) both}
.khay .luoi .m:nth-child(n+9){animation-delay:.05s}
.khay .luoi .m:nth-child(n+17){animation-delay:.09s}
.khay .luoi .m:nth-child(n+25){animation-delay:.13s}
.khay .luoi .m:nth-child(n+33){animation-delay:.17s}
@keyframes oRa{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ══ GIỎ CHỌN — chọn món → moodboard + phiếu báo giá (thêm 09/08) ═══════════
⛔ Nút chọn nằm CẠNH nút xem ảnh, không lồng vào trong: nút lồng nút thì bấm
chỗ nào cũng nổ cả hai, và trình đọc màn hình đọc ra một thứ vô nghĩa.
⛔ Mọi màu lấy từ biến nhận diện, không gõ cứng mã màu (R16). */
.mo{position:relative}
.mo .m{width:100%}
.chon{position:absolute;top:7px;right:7px;z-index:2;
display:flex;align-items:center;gap:5px;padding:5px 8px;
background:rgba(5,5,5,.82);border:1px solid var(--vien);border-radius:3px;
color:var(--chu2);font-family:var(--mono);cursor:pointer;
opacity:0;transition:opacity .16s ease,border-color .16s ease,color .16s ease}
.mo:hover .chon,.chon:focus-visible,.chon[aria-pressed="true"]{opacity:1}
.chon span{font-size:13px;line-height:1}
.chon s{text-decoration:none;font-size:9px;letter-spacing:.14em}
.chon:hover{border-color:var(--diem);color:var(--diem)}
.chon[aria-pressed="true"]{border-color:var(--diem);color:var(--nen);background:var(--diem)}
.mo:has(.chon[aria-pressed="true"]) .m{border-color:var(--diem)}
/* thanh giỏ — nằm dưới đáy, chỉ hiện khi đã chọn ít nhất một món */
.gio{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(140%);
z-index:60;display:flex;align-items:center;gap:14px;
padding:11px 16px;background:rgba(5,5,5,.94);backdrop-filter:blur(9px);
border:1px solid var(--diem);border-radius:4px;
transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.gio.ra{transform:translateX(-50%) translateY(0)}
.gio .dem-gio{font-size:12px;letter-spacing:.12em;color:var(--diem)}
.gio .dem-gio b{font-size:15px;font-weight:700}
.gio button{padding:8px 13px;background:transparent;border:1px solid var(--vien);
border-radius:3px;color:var(--chu2);font-family:var(--mono);font-size:10.5px;
letter-spacing:.13em;cursor:pointer;transition:border-color .16s,color .16s}
.gio button:hover{border-color:var(--diem);color:var(--diem)}
.gio button.chinh{border-color:var(--diem);color:var(--nen);background:var(--diem);font-weight:700}
.gio .bo{border:0;color:var(--chu2);opacity:.6;padding:8px 4px}
@media (max-width:640px){
.gio{left:12px;right:12px;bottom:12px;transform:translateY(140%);flex-wrap:wrap;
justify-content:center}
.gio.ra{transform:translateY(0)}
.chon{opacity:1} /* điện thoại không có chuột để rê — hiện sẵn */
}
/* ══ TRANG MOODBOARD ══════════════════════════════════════════════════════ */
.nut-ve{padding:8px 13px;border:1px solid var(--vien);border-radius:3px;
color:var(--chu2);text-decoration:none;font-size:10.5px;letter-spacing:.13em}
.nut-ve:hover{border-color:var(--diem);color:var(--diem)}
.mb-thanh{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:22px 0 18px}
.mb-o{display:flex;flex-direction:column;gap:6px}
.mb-o s{text-decoration:none;font-size:9.5px;letter-spacing:.15em;color:var(--chu2)}
.mb-o input,.mb-o select{padding:9px 11px;background:rgba(13,13,13,.9);
border:1px solid var(--vien);border-radius:3px;color:var(--chu);
font-family:var(--mono);font-size:12.5px}
.mb-o input:focus,.mb-o select:focus{outline:0;border-color:var(--diem)}
.mb-thanh .chinh{align-self:flex-end;padding:11px 16px;background:var(--diem);
border:1px solid var(--diem);border-radius:3px;color:var(--nen);
font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;font-weight:700;cursor:pointer}
.mb-thanh .chinh:disabled{opacity:.4;cursor:not-allowed}
.mb-khung{overflow-x:auto;border:1px solid var(--vien);border-radius:4px;
background:rgba(13,13,13,.6);padding:12px}
.mb-khung canvas{display:block;max-width:100%;height:auto}
.mb-trong{margin:20px 0;color:var(--chu2);font-size:13px}
.mb-trong a{color:var(--diem)}
.mb-ghi{margin-top:16px;font-size:12px}