:root{ --navy:#1F3557;--band:#1F3557;--gold:#D9AE4E;--gold2:#C4972F;--goldsoft:#FBF4E1;--goldtext:#8A6516; --bg:#F5F7FA;--surface:#fff;--surface2:#F8FAFC; --line:#E3E7EE;--ink:#1F3557;--mute:#5F6C80;--link:#2B4C86; --g:#127A47;--r:#C0392B;--rbtn:#C0392B;--a:#B7791F; --gsoft:#E7F5ED;--gtext:#0E5C36;--gline:#BFE5CF; --asoft:#FDF4E2;--atext:#8A5A0B;--aline:#EFDCAE; --rsoft:#FDEDEB;--rtext:#9B2C1D;--rline:#F2C9C3; --csoft:#EAF0FB;--ctext:#22447F;--cline:#C9D8F2; --nsoft:#F1F3F7;--ntext:#5F6C80;--nline:#E3E7EE; --tipbg:#EEF3FB;--tipink:#3D5679;--warnbg:#FDF6E8;--warnink:#7A5B12; --rad:12px;--shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04)} /* ---- chế độ tối: đổi token, phần còn lại giữ nguyên ---- */ body[data-theme="dark"]{ --navy:#101A2E;--band:#18233D;--gold:#D9AE4E;--gold2:#E0BC63;--goldsoft:#33290F;--goldtext:#E0BC63; --bg:#0D1524;--surface:#151E33;--surface2:#1A2540; --line:#2A3654;--ink:#E6EAF2;--mute:#93A1BE;--link:#8FB0FF; --g:#3DBB74;--r:#E2685A;--rbtn:#B5352A;--a:#E0AE52; --gsoft:#12301F;--gtext:#6EE79F;--gline:#1F5B3B; --asoft:#33280F;--atext:#F0C878;--aline:#5E4718; --rsoft:#331714;--rtext:#FF9C88;--rline:#5F2A22; --csoft:#17233F;--ctext:#A8BCFF;--cline:#2E3F66; --nsoft:#1A2540;--ntext:#93A1BE;--nline:#2A3654; --tipbg:#16233C;--tipink:#A8BCDF;--warnbg:#2A2210;--warnink:#EDCF93; --shadow:0 1px 2px rgba(0,0,0,.45)} @media(prefers-color-scheme:dark){ body[data-theme="auto"]{ --navy:#101A2E;--band:#18233D;--gold:#D9AE4E;--gold2:#E0BC63;--goldsoft:#33290F;--goldtext:#E0BC63; --bg:#0D1524;--surface:#151E33;--surface2:#1A2540; --line:#2A3654;--ink:#E6EAF2;--mute:#93A1BE;--link:#8FB0FF; --g:#3DBB74;--r:#E2685A;--rbtn:#B5352A;--a:#E0AE52; --gsoft:#12301F;--gtext:#6EE79F;--gline:#1F5B3B; --asoft:#33280F;--atext:#F0C878;--aline:#5E4718; --rsoft:#331714;--rtext:#FF9C88;--rline:#5F2A22; --csoft:#17233F;--ctext:#A8BCFF;--cline:#2E3F66; --nsoft:#1A2540;--ntext:#93A1BE;--nline:#2A3654; --tipbg:#16233C;--tipink:#A8BCDF;--warnbg:#2A2210;--warnink:#EDCF93; --shadow:0 1px 2px rgba(0,0,0,.45)}} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5; font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%} a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline} /* ---- thanh trên: nền navy như mẫu ---- */ header{background:var(--navy);color:#fff;padding:13px 22px;display:flex; justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .brand{margin:0;font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;color:#fff} .logomark{width:auto;height:34px;max-width:150px;object-fit:contain;display:block;flex:0 0 auto}/*[15/10 b52 logongang]*/@media(min-width:821px){#arrdd .mv,#arrdd .gmv{min-width:30px!important;min-height:28px!important;height:28px!important;padding:0 8px!important;font-size:12px!important;line-height:1!important}#arrdd .sw{transform:scale(.78);transform-origin:center}#arrdd .chl li{padding-top:5px!important;padding-bottom:5px!important}#arrdd .grph{padding-top:8px!important;padding-bottom:8px!important}} @media(max-width:520px){.logomark{width:auto;height:29px;max-width:120px}}@media(max-width:820px){#arrdd .chl li{grid-template-columns:16px 20px minmax(0,1fr) auto auto!important;gap:6px!important;padding-left:6px!important;padding-right:6px!important}#arrdd .chl li>span:last-child:empty{display:none}#arrdd .cn{min-width:0}#arrdd .cn input{width:100%;min-width:0;box-sizing:border-box}#arrdd .bar{display:flex;gap:4px;flex-wrap:nowrap}#arrdd .mv,#arrdd .gmv{min-width:36px!important;min-height:36px!important;height:36px!important;padding:0 6px!important}#arrdd .grph{flex-wrap:wrap;gap:6px}#arrdd .cn small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} .who{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px} .who .u{color:rgba(255,255,255,.75);font-family:ui-monospace,Menlo,monospace} .ic{width:16px;height:16px;vertical-align:-3px;flex:0 0 auto} .ic.good{color:var(--g)}.ic.bad{color:var(--r)} h2 .ic,h3 .ic{width:14px;height:14px;vertical-align:-2px;margin-right:6px} nav a .ic{width:15px;height:15px;vertical-align:-3px;margin-right:7px} button .ic,.btn .ic,summary .ic{width:14px;height:14px;vertical-align:-2px;margin-right:5px} .tip .ic,.warn .ic,.pill .ic{width:13px;height:13px;vertical-align:-2px;margin-right:3px} label .ic{width:12px;height:12px;vertical-align:-1px;margin-right:3px} .themebtn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22); color:#fff;border-radius:8px;padding:0 12px;height:36px;line-height:0;margin:0} .themebtn .ic{width:16px;height:16px;margin:0;vertical-align:middle} .langpick{display:inline-block} .langpick select{width:auto;height:36px;min-height:36px;padding:0 32px 0 11px;font-size:12.5px;border-radius:8px; background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center} .langpick select option{color:#1F3557;background:#fff} nav{background:var(--navy);border-top:1px solid rgba(255,255,255,.09);padding:0 22px; display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch} nav::-webkit-scrollbar{display:none} nav a{padding:12px 15px;color:rgba(255,255,255,.68);font-size:13.5px;font-weight:600; white-space:nowrap;border-bottom:3px solid transparent} nav a:hover{color:#fff;text-decoration:none} nav a.on{color:#fff;border-bottom-color:var(--gold)} /* Nhãn gom nhóm menu (26/09/2026) — chữ mờ không bấm được, chỉ để mắt lướt nhanh biết cụm nào là việc hằng ngày, cụm nào là tra cứu/quản lý/hạ tầng. border-left làm gạch chia cụm luôn, khỏi cần thêm phần tử riêng. */ nav .navgrp{align-self:center;padding:0 14px 0 16px;margin-left:6px;border-left:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.38);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap} nav .navgrp:first-child{border-left:0;margin-left:0;padding-left:2px} /* Menu xổ (28/09/2026): nhóm Tra cứu / Nội dung / Hệ thống. */ @media(min-width:769px){nav{overflow:visible;flex-wrap:wrap}} nav details.navdd{position:relative} nav details.navdd summary{list-style:none;cursor:pointer;padding:12px 15px;color:rgba(255,255,255,.68); font-size:13.5px;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;user-select:none} nav details.navdd>summary,nav details.navdd[open]>summary{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none} nav details.navdd>summary.on{border-bottom-color:var(--gold)} nav details.navdd summary::-webkit-details-marker{display:none} nav details.navdd>summary:before,nav details.navdd[open]>summary:before{content:none} nav details.navdd summary:after{content:" ▾";font-size:11px;opacity:.8} nav details.navdd[open] summary:after{content:" ▴"} nav details.navdd summary:hover{color:#fff} nav details.navdd summary.on{color:#fff;border-bottom-color:var(--gold)} nav .ddm{position:absolute;top:100%;left:0;z-index:60;min-width:230px;background:var(--navy); border:1px solid rgba(255,255,255,.14);border-top:0;border-radius:0 0 10px 10px;box-shadow:0 10px 26px rgba(0,0,0,.28); display:flex;flex-direction:column;padding:6px 0} nav .ddm a{border-bottom:0;border-left:3px solid transparent;padding:10px 16px} nav .ddm a.on{border-left-color:var(--gold);border-bottom-color:transparent;background:rgba(255,255,255,.06)} .wrap{padding:22px;max-width:1680px;margin:0 auto} a.tile{color:inherit;text-decoration:none}a.tile:hover{border-color:var(--gold)} /* 1280 cat nut 'Block' o Thiet bi du man hinh con trong 2 ben */ h2{margin:26px 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.7px; color:var(--mute);font-weight:700} h2:first-child{margin-top:0} h3{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--ink)} small{color:var(--mute);font-size:12px} .mute{color:var(--mute)} .mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px} .copy{cursor:pointer;border-bottom:1px dashed var(--line)} .copy:hover{color:var(--link);border-bottom-color:var(--link)} .nowrap{white-space:nowrap} /* overflow-x:auto chứ không phải hidden: hidden (để bo góc) cắt cụt bảng rộng hơn card mà không cuộn được — trang Thiết bị mất 370px ở màn 1024. auto vẫn bo góc, bảng rộng thì cuộn ngang. */ .card{background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch} .sec{background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow);padding:18px 20px;margin-bottom:14px} /* ---- bảng ---- */ .card>table{width:100%;border-collapse:collapse;font-size:13.5px} table{width:100%;border-collapse:collapse;font-size:13.5px} th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle} th{background:var(--surface2);color:var(--mute);font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.5px} tr:last-child td{border-bottom:0} tbody tr:hover td,table tr:hover td{background:var(--surface2)} tr.off td{background:var(--surface2);color:var(--mute)} /* ---- nút ---- */ button,.btn{border:1px solid transparent;border-radius:9px;padding:7px 13px;margin:2px 1px; font-size:12.5px;font-weight:600;cursor:pointer;display:inline-block;line-height:1.45; font-family:inherit;transition:filter .12s} button:hover,.btn:hover{filter:brightness(.94);text-decoration:none} .b{background:var(--navy);color:#fff} .g{background:var(--gold);color:#42320A} .r{background:var(--rbtn);color:#fff} .x{background:var(--surface);color:var(--r);border-color:var(--rline)} .gray{background:var(--surface);color:var(--ink);border-color:var(--line)} .v{background:var(--goldsoft);color:var(--warnink);border-color:var(--aline)} .big{padding:11px 20px;font-size:14px;border-radius:10px} select.mini{width:auto;min-height:32px;height:32px;padding:0 27px 0 9px;font-size:12px; margin-right:3px;vertical-align:middle;background-position:right 9px center} input.mini2{width:64px;min-height:32px;height:32px;padding:0 9px;font-size:12px; margin-right:3px;vertical-align:middle;display:inline-block} .qrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px} .qchip{background:var(--gsoft);color:var(--gtext);border:1px solid var(--gline); border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:600} .qchip.zero{background:var(--nsoft);color:var(--ntext);border-color:var(--nline)} .qchip b{font-weight:800} /* ---- form ---- */ input,textarea,select{background:var(--surface);border:1px solid var(--line);color:var(--ink); border-radius:9px;padding:10px 12px;font-size:14px;width:100%;font-family:inherit} select{-webkit-appearance:none;appearance:none;min-height:40px;padding-right:34px; background-repeat:no-repeat;background-position:right 12px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B7A90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5 11 1.5'/%3E%3C/svg%3E")} input:focus,textarea:focus,select:focus{outline:0;border-color:var(--navy); box-shadow:0 0 0 3px rgba(31,53,87,.09)} input::placeholder,textarea::placeholder{color:var(--mute)} input[type=checkbox]{width:18px;height:18px;accent-color:var(--navy);margin:0 8px 0 0;flex:0 0 auto} label{display:block;margin:0 0 5px;font-size:11px;color:var(--mute);font-weight:700; text-transform:uppercase;letter-spacing:.4px} .f{margin-bottom:12px} .f small{display:block;margin-top:4px;line-height:1.45} .grid{display:grid;gap:14px} /* each cell: label reserves 2 lines (bottom-aligned) so inputs line up even with 1 vs 2 line labels */ .grid>div{display:flex;flex-direction:column} .grid>div>label{flex:0 0 auto;min-height:2.9em;line-height:1.3;display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 4px;margin:0 0 5px} .g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap} .bar>div{min-width:120px} .bar .grow{flex:1;min-width:200px} form.inl{display:inline} /* ---- dải số liệu navy (như dải thống kê của mẫu) ---- */ .band{background:var(--band);border-radius:16px;padding:8px 4px;display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:18px} .band .it{padding:16px 18px;text-align:center} a.it{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:background .12s,transform .12s} a.it:hover{background:rgba(255,255,255,.10);transform:translateY(-1px)} .band .l{font-size:11px;text-transform:uppercase;letter-spacing:.6px; color:rgba(255,255,255,.62);font-weight:700} .band .n{font-size:30px;font-weight:800;color:var(--gold);line-height:1.15;margin:3px 0} .band .n.w{color:#fff} .band .n.zero{color:rgba(255,255,255,.32)} .band .s{font-size:11px;color:rgba(255,255,255,.66)} .s::first-letter,.l::first-letter{text-transform:uppercase} .tile{background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:16px 18px;box-shadow:var(--shadow)} .tile .l{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mute);font-weight:700} .tile .n{font-size:27px;font-weight:800;color:var(--ink);line-height:1.15;margin:3px 0} /* ---- nhãn trạng thái ---- */ .pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px; font-weight:700;white-space:nowrap;border:1px solid} .pill.g{background:var(--gsoft);color:var(--gtext);border-color:var(--gline)} .pill.a{background:var(--asoft);color:var(--atext);border-color:var(--aline)} .pill.r{background:var(--rsoft);color:var(--rtext);border-color:var(--rline)} .pill.c{background:var(--csoft);color:var(--ctext);border-color:var(--cline)} .pill.n{background:var(--nsoft);color:var(--ntext);border-color:var(--nline)} .pill.gold{background:var(--goldsoft);color:var(--warnink);border-color:var(--aline)} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px} .dot.on{background:#22A05B;box-shadow:0 0 0 3px rgba(34,160,91,.16)} .dot.off{background:var(--line)} /* ---- hộp thông báo ---- */ .ok{background:var(--gsoft);border:1px solid var(--gline);color:var(--gtext); padding:12px 15px;border-radius:11px;margin-bottom:14px;font-weight:600} .err{background:var(--rsoft);border:1px solid var(--rline);color:var(--rtext); padding:12px 15px;border-radius:11px;margin-bottom:14px;font-weight:600} .tip{background:var(--tipbg);border-left:3px solid var(--link);border-radius:0 10px 10px 0; padding:12px 15px;margin:12px 0;color:var(--tipink);font-size:12.5px;line-height:1.65} .warn{background:var(--warnbg);border-left:3px solid var(--gold);border-radius:0 10px 10px 0; padding:12px 15px;margin:12px 0;color:var(--warnink);font-size:12.5px;line-height:1.65} .tip a{color:var(--link);font-weight:600} /* ---- bộ lọc dạng chip ---- */ .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px} .chips a{padding:7px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line); font-size:12.5px;font-weight:600;color:var(--mute)} .chips a.on{background:var(--navy);color:#fff;border-color:var(--navy)} .chips a:hover{text-decoration:none;color:var(--ink)} .chips a.on:hover{color:#fff} /* ---- tab chủ sở hữu (admin / nguồn VMS / từng đại lý) ---- Cố ý KHÁC kiểu với .chips ở dưới: tab = "xem hàng của ai", chip = "lọc trạng thái". Hai hàng cùng kiểu thì nhìn như một bộ lọc 12 nút, rất dễ bấm nhầm. */ .tabs{display:flex;gap:3px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:0 0 13px} .tabs a{padding:9px 15px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0; margin-bottom:-2px;font-size:13.5px;font-weight:600;color:var(--mute)} .tabs a b{margin-left:6px;font-weight:700;color:var(--mute)} .chips a.on b{color:inherit!important;opacity:.85} /* chip dang chon nen navy: so dem mau --mute con 2.3:1 */ /* khong opacity: .7 lam so dem con 2.7:1 o nen sang */ .tabs a:hover{text-decoration:none;background:var(--surface2);color:var(--ink)} /* --ink chứ không phải --navy: ở nền tối --navy là màu NỀN (#101A2E) -> chữ tab đang chọn tàng hình. Nền sáng hai biến cùng giá trị #1F3557 nên không đổi gì. */ .tabs a.on{background:var(--surface);border-color:var(--line);color:var(--ink); box-shadow:0 -2px 0 var(--gold) inset} .tabs a.on:hover{background:var(--surface)} .tabs a.nil{font-weight:500} /* tab rỗng — vẫn bấm được. Trước là opacity:.45 = chữ 1.9:1, gần như không đọc được */ /* [2026-09-22] Ô chọn đại lý cạnh 3 tab cố định — xem otabs trong accounts_html(): thay vì mỗi đại lý một tab (dài dần không giới hạn), đại lý cụ thể nào chọn qua đây. */ .dealersel{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:13.5px; font-weight:600;color:var(--mute);background:var(--surface);vertical-align:top} .dealersel:hover{color:var(--ink)} /* form rơi xuống dòng riêng dưới hàng tab; select chung ăn width:100% -> cộng margin cũ là lòi mép phải */ form.dealerform{display:block;margin:0 0 12px} .dealerform .dealersel{width:auto;min-width:240px;max-width:100%} /* dòng đang được chọn trong bảng phân loại */ tr.on td{background:var(--csoft);box-shadow:-3px 0 0 var(--navy) inset} /* ---- khung xổ ---- */ details{margin-bottom:14px} details>summary{cursor:pointer;background:var(--surface);border:1px solid var(--line); border-radius:12px;padding:13px 18px;font-weight:700;font-size:13.5px;color:var(--ink); list-style:none;box-shadow:var(--shadow)} details>summary::-webkit-details-marker{display:none} details>summary:before{content:"+ ";color:var(--gold2);font-weight:800} details[open]>summary:before{content:"− "} details[open]>summary{border-radius:12px 12px 0 0;border-bottom:0;box-shadow:none} details .sec{border-radius:0 0 12px 12px;margin-bottom:0;border-top:0} .perm{display:flex;align-items:center;font-size:13px;color:var(--ink); text-transform:none;letter-spacing:0;font-weight:500;margin:0;padding:7px 0;cursor:pointer} /* ================= ĐIỆN THOẠI ================= */ @media(max-width:820px){ .wrap{padding:16px 13px 44px} header{padding:12px 14px}nav{padding:0 8px} nav a{padding:12px 12px;font-size:13px} .brand{font-size:16px} button,.btn{padding:10px 15px;font-size:13px;min-height:38px} /* vùng chạm to hơn */ select,select.mini,.langpick select,.themebtn,input.mini2{min-height:40px;height:auto} .chips a{padding:9px 15px} .big{padding:13px 20px;width:100%;text-align:center} .bar .grow,.bar>div{min-width:100%} .bar>button,.bar>.btn{width:100%} .band{padding:4px}.band .it{padding:13px 10px}.band .n{font-size:24px} /* bảng -> thẻ xếp dọc, hết cuộn ngang */ .card{border:0;background:transparent;box-shadow:none;overflow:visible} .card table,.card thead,.card tbody,.card tr,.card th,.card td{display:block;width:auto} .card thead,.card tr.hd{display:none} .card tr{background:var(--surface);border:1px solid var(--line);border-radius:13px; margin-bottom:11px;padding:5px 0;box-shadow:var(--shadow)} .card tr:hover td,.card tbody tr:hover td{background:transparent} /* flex-wrap: 1 ô có nhiều dòng (vd CID + "hiện pass"/ghi chú nối bằng
) trước đây bị ép chung 1 hàng flex -> dồn cục, chữ vỡ dòng lung tung (phát hiện lúc audit di động). Wrap cho các mẩu phụ tự rơi xuống dòng dưới thay vì giành chỗ với giá trị chính. */ .card td{border:0;padding:8px 15px;display:flex;flex-wrap:wrap;justify-content:space-between; align-items:center;gap:4px 14px;text-align:right} .card td:before{content:attr(data-l);color:var(--mute);font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.5px;text-align:left;flex:0 0 38%} .card td:empty{display:none} .card td .mono,.card td{overflow-wrap:anywhere;word-break:break-word} .nowrap{white-space:normal} body{overflow-x:hidden} .card td[data-l=""]{justify-content:flex-start;flex-wrap:wrap;gap:6px; padding-top:11px;margin-top:3px;border-top:1px solid var(--line)} .card td[data-l=""]:before{display:none} /* bảng không gắn data-l (đổi tên kênh, ảnh, dữ liệu cache): không chừa cột nhãn 38% -> hết tràn phải */ .card td:not([data-l]):before{display:none} .card td:not([data-l]){justify-content:flex-start;text-align:left} .card td input[type=file]{max-width:100%} .card td[data-l=""] button,.card td[data-l=""] .btn{margin:0} .card tr.off{opacity:.72} /* dòng đầu của thẻ = tiêu đề, cho to và canh trái */ .card tr td:first-child{font-size:15px;font-weight:700;padding-top:11px} .card tr td:first-child:before{font-size:10.5px;font-weight:700} } /* Bang rong hon card (>820px) thi cot nut cuoi (Block/Sua/Xoa...) ghim ben phai, cac cot khac cuon duoi no. Chi ap khi cot cuoi thuc su chua nut; bang vua card thi sticky khong co tac dung. */ @media(min-width:821px){ .card table:has(tbody tr > td:last-child :is(form,button,.btn)) tr > :last-child{ position:sticky;right:0;z-index:1;background:var(--surface);box-shadow:-8px 0 12px -8px rgba(0,0,0,.35)} .card table:has(tbody tr > td:last-child :is(form,button,.btn)) thead tr > :last-child, .card table:has(tbody tr > td:last-child :is(form,button,.btn)) tr.hd > :last-child{background:var(--surface2)} } /* ---- nút ☰: dưới 768px nav gập thành danh sách dọc, bấm ☰ mới mở ---- Trước đây nav luôn là dải link cuộn ngang (tới 11 mục với admin), trên điện thoại phải vuốt nhiều lần mới thấy mục cần. Thuần CSS (checkbox #navtg + label), không JS. Tablet/desktop giữ nguyên dải ngang. Khối này phải đứng SAU khối 820px để thắng `nav{padding:0 8px}`. */ .navtg{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .navbtn{display:none} @media(max-width:768px){ .navbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; border-radius:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22); color:#fff;font-size:20px;line-height:1;cursor:pointer;margin:0;user-select:none} .navtg:focus-visible ~ header .navbtn{outline:2px solid var(--gold);outline-offset:2px} .navtg:checked ~ header .navbtn{background:rgba(255,255,255,.22)} nav{flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;border-top:0; transition:max-height .2s ease} .navtg:checked ~ nav{max-height:80vh;overflow-y:auto;border-top:1px solid rgba(255,255,255,.09)} nav a{padding:14px 18px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06); border-left:3px solid transparent} nav a.on{border-bottom-color:rgba(255,255,255,.06);border-left-color:var(--gold); background:rgba(255,255,255,.06)} /* tên đăng nhập đã rõ qua huy hiệu ADMIN/ĐẠI LÝ; bỏ đi thì "Đăng xuất" lên chung dòng, header từ 3 dòng còn 2 trên màn 390px */ .who .u{display:none} .dealerform .dealersel{width:100%} /* nav xổ dọc ở breakpoint này (khối trên) -> nhãn nhóm cũng xổ dọc theo, thành tiêu đề cụm thay vì vạch chia ngang. Đứng SAU khối nav cột ở trên để thắng cascade. */ nav .navgrp{border-left:0;border-top:1px solid rgba(255,255,255,.09); width:100%;padding:10px 12px 4px;margin:2px 0 0} nav .navgrp:first-child{border-top:0;padding-top:12px} nav details.navdd{width:100%} nav details.navdd summary{padding:14px 18px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06); border-left:3px solid transparent} nav details.navdd summary.on{border-bottom-color:rgba(255,255,255,.06);border-left-color:var(--gold)} nav .ddm{position:static;box-shadow:none;border:0;border-radius:0;padding:0 0 0 14px;min-width:0} } /* Bảng "Phân loại" là ma trận nhóm × 7 cột số. Gập thành thẻ như bảng thường thì mỗi gói thành 1 thẻ cao 8 dòng — ~16 gói là ~5000px phải cuộn qua mới tới danh sách tài khoản. Trên điện thoại giữ dạng bảng gọn, cuộn ngang, cột tên nhóm dính bên trái. Phải đứng SAU khối 820px ở trên. */ @media(max-width:820px){ .card.mx{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad); overflow-x:auto;-webkit-overflow-scrolling:touch} .card.mx table{display:table;width:max-content;min-width:100%;border-collapse:collapse} .card.mx tbody{display:table-row-group} .card.mx tr,.card.mx tr.hd{display:table-row;background:transparent;border:0;border-radius:0; margin:0;padding:0;box-shadow:none} .card.mx th,.card.mx td{display:table-cell;padding:8px 11px;text-align:right;white-space:nowrap; font-size:13px;border-bottom:1px solid var(--line)} .card.mx td:before{display:none} .card.mx tr td:first-child,.card.mx tr th:first-child{position:sticky;left:0;z-index:1; background:var(--surface);text-align:left;font-size:13px;padding-top:8px} .card.mx tr.on td{background:var(--surface2)} } @media(max-width:360px){ .card td{flex-direction:column;align-items:flex-start;text-align:left;gap:2px} .card td:before{flex:none} } /* ================= [v2 05/10] khung mới ================= */ /* G1: quy tắc chung details>summary (nền trắng, viền, bo góc) đè lên menu xổ trên thanh navy -> chữ trắng trên nền trắng, đại lý không thấy menu. Trả summary trong nav/header về trong suốt. */ nav details.navdd>summary,header details.hmenu>summary{background:transparent;border:0;box-shadow:none;border-radius:0} nav details.navdd[open]>summary{border-radius:0} nav details.navdd>summary:before,header details.hmenu>summary:before{content:none} nav .navsep{width:1px;background:rgba(255,255,255,.14);margin:9px 6px;align-self:stretch} nav .ddm a{color:rgba(255,255,255,.82)}nav .ddm a:hover{color:#fff;background:rgba(255,255,255,.06)} /* ô tra khách trên header */ .gsearch{flex:1 1 300px;max-width:520px;margin:0} .gsearch input{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff; height:38px;padding:0 12px 0 34px;border-radius:9px;font-size:13.5px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m14 14-3.2-3.2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:11px center} .gsearch input::placeholder{color:rgba(255,255,255,.62)} .gsearch input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,174,78,.25)} /* menu tên (góc phải) */ header details.hmenu{position:relative;margin:0} header details.hmenu>summary{list-style:none;cursor:pointer;color:#fff;font-size:13px;font-weight:600; padding:0 12px;height:36px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.22)!important; background:rgba(255,255,255,.10)!important;border-radius:8px!important;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis} header details.hmenu>summary::-webkit-details-marker{display:none} header .hmm{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:240px;background:var(--surface); border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column} header .hmm a{display:flex;flex-direction:column;padding:8px 11px;border-radius:8px;color:var(--ink);text-decoration:none} header .hmm a:hover{background:var(--surface2)} header .hmm a small{color:var(--mute);font-size:12px} header{position:relative;z-index:50} nav{position:relative;z-index:40} /* menu ⋯ trên từng dòng bảng (vị trí cố định đặt bằng JS để không bị .card cắt) */ details.rowmenu{display:inline-block;margin:0;position:relative} details.rowmenu>summary{list-style:none;cursor:pointer;padding:6px 11px!important;border-radius:9px!important; font-weight:800;font-size:15px;line-height:1;box-shadow:none!important;background:var(--surface)!important;border:1px solid var(--line)!important} details.rowmenu>summary:before,details.langdd>summary:before{content:none!important} details.rowmenu>summary::-webkit-details-marker{display:none} details.rowmenu .rmm{position:fixed;z-index:80;min-width:210px;background:var(--surface);border:1px solid var(--line); border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column;text-align:left} details.rowmenu .rmm a,details.rowmenu .rmm button{display:block;width:100%;text-align:left;background:none;border:0; color:var(--ink);padding:8px 10px;border-radius:7px;margin:0;font-size:13px;font-weight:600} details.rowmenu .rmm a:hover,details.rowmenu .rmm button:hover{background:var(--surface2);text-decoration:none;filter:none} details.rowmenu .rmm .danger{color:var(--r)} details.rowmenu .rmm form{display:block} details.rowmenu .rmm .cap{font-size:11px;color:var(--mute);padding:4px 10px} /* thanh thao tác hàng loạt */ .bulkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--goldsoft);border:1px solid var(--aline); border-radius:11px;padding:8px 12px;margin:0 0 10px} .bulkbar select{width:auto;min-height:34px;height:34px;padding:0 30px 0 10px;font-size:12.5px} .bulkbar b{font-size:13px} td.ck,th.ck{width:30px;padding-right:0} /* công tắc bật/tắt */ .sw{width:42px;height:24px;border-radius:13px;border:1px solid var(--line);background:var(--g);position:relative;padding:0;margin:0;cursor:pointer;vertical-align:middle} .sw:after{content:"";position:absolute;top:3px;left:21px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .12s} .sw.off{background:var(--line)}.sw.off:after{left:3px} /* trang xếp kênh kéo-thả */ .chl{list-style:none;margin:0;padding:0} .chl li{display:grid;grid-template-columns:24px 36px minmax(0,1fr) 120px 44px auto;gap:10px;align-items:center; padding:6px 12px;border-bottom:1px solid var(--line);background:var(--surface)} .chl li:last-child{border-bottom:0} .chl li.hid .cn{opacity:.5;text-decoration:line-through} .chl li.drag{opacity:.35}.chl li.over{box-shadow:inset 0 2px 0 var(--gold)} .chl li.chg{box-shadow:inset 3px 0 0 var(--gold)} .chl .hdl{cursor:grab;color:var(--mute);text-align:center;user-select:none;font-size:16px} .chl .cn input{border:1px solid transparent;background:transparent;padding:4px 6px;font-weight:600;min-height:0} .chl .cn input:hover{border-color:var(--line)}.chl .cn input:focus{border-color:var(--gold);background:var(--surface)} .chl .cn small{display:block;padding-left:7px} .grp{margin-bottom:12px}.grph{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;background:var(--surface2);border-bottom:1px solid var(--line)} .savebar{position:sticky;bottom:0;z-index:30;margin-top:12px;background:var(--navy);color:#fff;border-radius:12px; padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 30px rgba(0,0,0,.3)} .savebar .grow{flex:1;min-width:180px} /* chọn ngôn ngữ bằng cờ */ .langpick{position:relative} details.langdd{margin:0} /* [patch26] header: flag button aligned with siblings, .ldm 6px below */ details.langdd>summary{list-style:none;cursor:pointer;display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:9px; border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12.5px;min-height:34px} details.langdd>summary::-webkit-details-marker{display:none} details.langdd .ldm{position:absolute;right:0;top:calc(100% + 6px);z-index:120;background:var(--surface);border:1px solid var(--line); border-radius:11px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px;min-width:170px;display:flex;flex-direction:column;gap:2px} details.langdd .ldm button{display:flex;gap:9px;align-items:center;justify-content:flex-start;background:transparent;color:var(--ink); border:0;box-shadow:none;padding:8px 10px;border-radius:8px;font-weight:600;min-height:0;width:100%} details.langdd .ldm button:hover,details.langdd .ldm button.on{background:var(--goldsoft)} svg.flag{border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)} /* băng cảnh báo sức khoẻ */ .alertband{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--rsoft);border:1px solid var(--rline); color:var(--rtext);border-radius:11px;padding:10px 14px;margin-bottom:14px;font-weight:600} .alertband .grow{flex:1;min-width:200px} @media(max-width:768px){ header{gap:8px}.gsearch{order:5;flex-basis:100%;max-width:none} .hide-s{display:none!important} header details.hmenu>summary{max-width:120px} .chl li{grid-template-columns:22px minmax(0,1fr) 44px auto} .chl li .c-num,.chl li .c-epg{display:none} } /* [patch27] man hep: .who xuong hang can trai -> .ldm/.hmm (right:0 theo nut) tran mep trai. Neo vao header, cach mep 8px. */ @media(max-width:767px){ header form.langpick,header details.hmenu{position:static} header details.langdd .ldm,header .hmm{top:auto;margin-top:6px;left:auto;right:8px;max-width:calc(100vw - 16px);box-sizing:border-box} header details.langdd .ldm{max-height:60vh;overflow-y:auto} header details.langdd .ldm button{flex-shrink:0} } /* ============ [UX 08/10] lớp hoàn thiện trình bày — KHÔNG đổi endpoint/logic ============ */ /* (1) Chuẩn hoá các form "nhãn ôm input" KIỂU CŨ (Branding · Màn hình chính · OTA · Danh mục · Hot) cho đều nhịp và vừa màn điện thoại. Selector CHỈ bắt input/select nằm TRONG