/* 9D-goi-ui.css — "gói UI" lần cuối: điều khiển / hộp / màu còn dạng mặc định trình duyệt hoặc lệch tông đen–xanh ngọc. Bên Hải, 24/09/2026 16:45.
   Nguồn: đợt rà 85 phát hiện, 38 xác nhận (4 hướng: điều khiển form, popup/UI trình duyệt, màu cứng, khối sinh bằng JS). Đi kèm 9D-goi-ui.js.
   Không sửa mã gốc, chỉ phủ lên. Nạp SAU 9C. Web thật: thêm <link rel="stylesheet" href="/lop-phu/9D-goi-ui.css"> + <script src="/lop-phu/9D-goi-ui.js"></script>. */

/* ===== 1. Ô nhập: chữ gợi ý, tự điền (autofill), tiêu điểm ===== */
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--panel) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 9999s ease-out}
#awTuong .aw-em input{background:var(--panel);color:var(--ink);transition:border-color .15s,box-shadow .15s}
#awTuong .aw-em input:focus{outline:none;border-color:var(--accent);box-shadow:var(--xc-glow)}
#awTuong .aw-em input.aw-sai{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
#awTuong .aw-loi{color:var(--red)}
.f input{color:var(--ink);transition:border-color .15s,box-shadow .15s}
.f input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}
.f input::-webkit-outer-spin-button,.f input::-webkit-inner-spin-button{opacity:.6}
.cmd input{color:var(--ink);transition:border-color .15s}
.cmd input:focus{border-bottom-color:var(--accent)}
.askrow input{background:var(--panel);transition:border-color .15s,box-shadow .15s}
.askrow input:focus{box-shadow:0 0 0 3px var(--accent2)}

/* ===== 2. Thanh trượt: "Tự thử số của bạn" (ngăn chi tiết) đang là thanh native → vẽ tay như tab Dự báo (.sl); thêm Firefox + tiêu điểm phím ===== */
.nd-try input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;background:color-mix(in srgb,var(--dim) 72%,var(--line));outline:none;cursor:pointer;margin:8px 0 4px}
.nd-try input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:99px;background:var(--accent);border:3px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.nd-try input[type=range]::-moz-range-thumb,.sl input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:99px;background:var(--accent);border:3px solid var(--panel);cursor:pointer}
.sl input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:color-mix(in srgb,var(--dim) 72%,var(--line))}
.nd-try input[type=range]:focus-visible::-webkit-slider-thumb,.sl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 1px 4px rgba(0,0,0,.3)}

/* ===== 3. Nút: vùng bấm nút đóng ✕, hover viền xanh ngọc thống nhất, nút × dải BETA ===== */
#awGia .aw-dong,#awAi .aw-dong,#awQcHop .aw-dong,#dx{width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:9px;line-height:1;color:var(--dim);transition:background-color .15s,color .15s}
#awGia .aw-dong:hover,#awAi .aw-dong:hover,#awQcHop .aw-dong:hover,#dx:hover{background:var(--panel2);color:var(--ink)}
.aw-beta .aw-beta-x:hover{background:rgba(255,255,255,.12);color:#f2f2f2!important;opacity:1}
html[data-theme=light] .aw-beta{color:#d4d4d4!important}
html[data-theme=light] .aw-beta .aw-beta-x{color:#8f8f8f!important}
.nd-b,.tog,.aw-nut,.aw-tr,#awAuth .aw-tra button{transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s,background-color .15s,filter .15s}
.nd-b:not(.p):hover,.tog:not(.on):hover,.theme:hover,.aw-nut:not(.aw-xanh):hover,.aw-tr:not([disabled]):not(.on):hover,#awAuth .aw-tra button:hover{border-color:var(--accent);color:var(--ink)}
.nd-b.p:hover,.aw-nut.aw-xanh:hover,.aw-tr.on:hover{filter:brightness(1.08)}

/* ===== 4. Màu cứng / biến chưa khai: chữ trên nền xanh ngọc, --card, thanh #awAuth ===== */
:root{--card:var(--panel)}
.aw-xanh{color:#06221b!important}                              /* mã gốc color:#05140c!important → phải !important mới ăn */
.aw-dk:not(.aw-dk2){color:#06221b}
html[data-theme=light] .aw-xanh{color:#fff!important}
html[data-theme=light] .aw-dk:not(.aw-dk2),html[data-theme=light] #awGia .aw-nhan:not(.aw-xam),html[data-theme=light] #awTuong .aw-logo,html[data-theme=light] #awTuong .aw-em button,html[data-theme=light] .tr.aw-khoa-dong:hover::after{color:#fff}
#awAuth .aw-hang{background:var(--panel);border-color:var(--line)}
#awAuth .aw-tra input{background:var(--panel);border-color:var(--line);color:var(--ink);transition:border-color .15s,box-shadow .15s}
#awAuth .aw-tra input:focus{outline:none;border-color:var(--accent);box-shadow:var(--xc-glow)}
#awAuth .aw-tra button{background:var(--panel2);border-color:var(--line);color:var(--ink2)}

/* ===== 5. Hộp nổi (modal) = --panel nổi 1 bậc trên nền, thẻ con --panel2; màn phủ tối hơn; toast nổi trên modal ===== */
#awGia .aw-gia-hop,#awTuong .aw-hop,#awAi .aw-ai-hop,#awQcHop .aw-qch{background:var(--panel);border-color:var(--line);box-shadow:0 30px 90px rgba(0,0,0,.55),var(--xc-glow)}
html[data-theme=light] #awGia .aw-gia-hop,html[data-theme=light] #awTuong .aw-hop,html[data-theme=light] #awAi .aw-ai-hop,html[data-theme=light] #awQcHop .aw-qch{box-shadow:0 30px 90px rgba(13,19,17,.18),var(--xc-glow)}
#awTuong,#awGia,#awAi,#awQcHop{background:rgba(0,0,0,.72)}
html[data-theme=light] #awTuong,html[data-theme=light] #awGia,html[data-theme=light] #awAi,html[data-theme=light] #awQcHop{background:rgba(13,19,17,.45)}
#awGia .aw-goi,#awAi .aw-ai-o{background:var(--panel2);border-color:var(--line)}
#awGia .aw-goi:not(.aw-noi):hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
#awGia .aw-nhan.aw-xam{background:var(--panel);border:1px solid var(--line);color:var(--dim)}
#awAi .aw-ai-o .aw-ai-link input{background:var(--bg)}
html[data-theme=light] #awAi .aw-ai-o .aw-ai-link input{background:var(--panel)}
.scrim,#cmdk{background:rgba(0,0,0,.6)}                          /* gốc rgba(15,14,11,.4) đen ngả nâu, trên #050505 gần vô hình */
html[data-theme=light] .scrim,html[data-theme=light] #cmdk{background:rgba(13,19,21,.35)}
.draw{box-shadow:-24px 0 64px rgba(0,0,0,.55)}
html[data-theme=light] .draw{box-shadow:-12px 0 40px rgba(13,19,17,.12)}
#toast{z-index:10001}

/* ===== 6. Thanh cuộn: gốc thumb --line #232323 trên #050505 ≈ tàng hình → sáng hơn, rê chuột vào vùng cuộn thì rõ hẳn ===== */
html[data-theme=dark] *,:root:not([data-theme=light]) *{scrollbar-color:color-mix(in srgb,var(--dim) 55%,var(--line)) transparent}
html[data-theme=light] *{scrollbar-color:color-mix(in srgb,var(--dim) 50%,var(--line)) transparent}
:is(aside.nav,.draw,.cmd .res,#awAi,#awGia,.tbl,.popbox):hover{scrollbar-color:var(--dim) transparent}

/* ===== 7. Hộp thoại theo tông (thay prompt/confirm hệ thống), hộp chép link, tooltip — markup do 9D-goi-ui.js sinh ===== */
#aw-hoi{position:fixed;inset:0;z-index:10002;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);animation:awHoiNen .18s ease-out both}
@keyframes awHoiNen{from{opacity:0}to{opacity:1}}
#aw-hoi .aw-hoi-hop{width:min(420px,100%);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;box-shadow:0 30px 90px rgba(0,0,0,.55),var(--xc-glow);animation:awHoiHop var(--aw-spring-t,.45s) var(--aw-spring,ease-out) both}
@keyframes awHoiHop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
#aw-hoi .aw-hoi-m{font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 14px;white-space:pre-line}
#aw-hoi input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;font-size:14px;margin-bottom:14px;outline:none;transition:border-color .15s,box-shadow .15s}
#aw-hoi input:focus{border-color:var(--accent);box-shadow:var(--xc-glow)}
#aw-hoi .aw-hoi-n{display:flex;gap:8px;justify-content:flex-end}
#aw-hoi .aw-nut{font-family:inherit;background:transparent;color:var(--ink2);cursor:pointer}
#aw-hoi .aw-nut:hover{border-color:var(--accent);color:var(--ink)}
#aw-hoi .aw-nut.aw-xanh,#aw-hop-chep .aw-nut.aw-xanh{background:var(--accent);border-color:var(--accent);color:#06221b!important}   /* nut OK/Chep dac xanh ngoc (khong thi .aw-xanh color!important lam chu toi tren nen trong suot) */
#aw-hoi .aw-nut.aw-xanh:hover,#aw-hop-chep .aw-nut.aw-xanh:hover{filter:brightness(1.08);color:#06221b!important}
#aw-hop-chep{position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px}
#aw-hop-chep .aw-hc-hop{position:relative;width:min(460px,100%);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:20px 20px 16px;box-shadow:0 30px 90px rgba(0,0,0,.55),var(--xc-glow);animation:awHoiHop var(--aw-spring-t,.45s) var(--aw-spring,ease-out) both}
#aw-hop-chep .aw-hc-t{font-weight:600;font-size:14.5px;margin-bottom:10px;padding-right:26px}
#aw-hop-chep .aw-hc-hang{display:flex;gap:8px}
#aw-hop-chep .aw-hc-o{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:13px/1.3 ui-monospace,Consolas,monospace}
#aw-hop-chep .aw-hc-o:focus{outline:none;border-color:var(--accent);box-shadow:var(--xc-glow)}
#aw-hop-chep .aw-hc-chep{border-radius:10px;font-family:inherit;cursor:pointer}
#aw-hop-chep .aw-hc-mo{color:var(--dim);font-size:12px;margin-top:8px}
#aw-hop-chep .aw-hc-x{position:absolute;top:10px;right:10px;border:0;background:none;color:var(--dim);font-size:18px;line-height:1;cursor:pointer}
#aw-hop-chep .aw-hc-x:hover{color:var(--ink)}
#aw-tip{position:fixed;left:0;top:0;z-index:10003;pointer-events:none;max-width:280px;padding:5px 9px;border-radius:8px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45);font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;word-break:break-word;opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .16s cubic-bezier(0,0,.2,1)}
#aw-tip.on{opacity:1;transform:none}

/* ===== 8. Nút Google thô ở 3 chỗ (#awGbtn thanh đầu trang, #awGbtn2 ngăn chi tiết, #awGbtn3 tường đăng ký) → nút vẽ theo tông, nút Google thật phủ trong suốt (cách của 9C) ===== */
#awGbtn .aw-gg-ve,#awGbtn2 .aw-gg-ve,#awGbtn3 .aw-gg-ve{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:240px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s}
#awGbtn .aw-gg-ve:hover,#awGbtn2 .aw-gg-ve:hover,#awGbtn3 .aw-gg-ve:hover{border-color:var(--accent);box-shadow:var(--xc-glow)}
.aw-gg-ve>svg{width:16px;height:16px;flex:none}
.aw-gg-ve .aw-gg-gsi{position:absolute;inset:0;opacity:.01;overflow:hidden;display:flex;align-items:center;justify-content:center}
.aw-gg-ve .aw-gg-gsi *{cursor:pointer}
#awTuong .aw-g{min-height:40px}

/* ===== 9. Emoji hệ thống còn sót → hình vẽ cùng bộ: 🔒 ổ khoá, ⭐ theo dõi, 📣/🟢/⚪ hộp nhà quảng cáo ===== */
.tr.aw-khoa-dong:hover::after{content:"Unlock";padding-left:26px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306221b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:9px center;background-size:12px 12px}
html[lang="vi"] .tr.aw-khoa-dong:hover::after{content:"Mở khoá"}
.aw-khoa-ic{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--accent2);color:var(--accent);vertical-align:-5px;margin-right:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.aw-khoa-ic svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#dbody .aw-khung .aw-khoa-ic{width:44px;height:44px;border-radius:12px;margin:0 0 4px;vertical-align:0}
#dbody .aw-khung .aw-khoa-ic svg{width:22px;height:22px}
#awGia h2 .aw-khoa-ic{vertical-align:-3px}
.aw-sao-td{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-1px;background:var(--accent);-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.4l6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.4l6-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.aw-cham{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--dim);margin-right:7px;vertical-align:1px}
.aw-cham.on{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.aw-qc-ic{display:inline-grid;place-items:center;width:14px;height:14px;color:var(--accent);vertical-align:-2px;flex:none}
.aw-qc-ic svg{width:14px;height:14px}
.aw-qc-l{display:inline-flex;align-items:center;gap:5px}
#awQcHop h3 .aw-qc-ic{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
#awQcHop h3 .aw-qc-ic svg{width:18px;height:18px}

/* ===== 10. Khối "Máy vừa đọc được gì" (sau khi tra domain ngoài kho) dán sát mép ngăn, dùng nhầm lớp .f ===== */
#dbody .ds.nd{margin:0 22px 26px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
#dbody .ds.nd h3{margin:0 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#dbody .ds.nd h3 .f{display:inline;margin:0 0 0 auto;text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px}
@media(max-width:860px){#dbody .ds.nd{margin:0 16px 22px}}

/* ===== 11. Bảng giá: 3 thẻ lệch bề rộng (Hải chụp 24/09 21:46) — gốc repeat(3,1fr) = minmax(auto,1fr) nên nút chữ dài (nowrap) kéo cột giãn; thẻ Pro bị ép hẹp ===== */
#awGia .aw-gia{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#awGia .aw-goi{min-width:0}
#awGia .aw-goi .aw-nut{white-space:normal;line-height:1.3;padding-top:9px;padding-bottom:9px}
#awGia .aw-nhan{max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){#awGia .aw-gia{grid-template-columns:1fr}}

/* ===== 12. Dải "Tiền, tính từng bước" (ngăn chi tiết): ô kết quả .nd-t.res nền xanh (94) nhưng chữ phụ vẫn màu --dim → đọc không nổi; "chưa đo" cũng chìm.
   Hải chụp 24/09 23:45. Chữ phụ theo màu accent, ngắt dòng gọn (text-wrap), ô rộng tối thiểu để không rơi chữ lẻ ===== */
.nd-t{min-width:0}
.nd-t small{text-wrap:balance;overflow-wrap:anywhere}
.nd-t.res small{color:var(--accent)!important;opacity:.85}
.nd-t.res b.no{color:var(--accent)!important;opacity:.9}
.nd-t b.no{color:var(--ink2)}

/* ===== 13. Chữ phụ sáng hơn (Hải 24/09 23:55: "xám pha đen khó nhìn", nhưng vẫn giữ xám, không trắng toàn phần).
   Chế độ tối: --dim #8f8f8f → #b3b3b3 (≈ 8,5:1 trên #050505), --ink2 #d4d4d4 → #e4e4e4, --ink #f2f2f2 → #fafafa.
   Các chỗ mã gốc làm mờ thêm bằng opacity (.n small .7, .srt i .4, nút trang disabled .35, .aw-tien small .7, .aw-mo-k .6) nâng lên. Chế độ sáng giữ nguyên. ===== */
html[data-theme=dark],:root:not([data-theme=light]){--ink:#fafafa;--ink2:#e4e4e4;--dim:#b3b3b3}
.n small,small>a.aw-lk,.aw-tien small,.aw-mo{opacity:.92}
.th .srt i{opacity:.7}
.aw-tr[disabled]{opacity:.55}
.aw-mo-k{opacity:.75}
.tr .dm{color:var(--dim)}

/* ===== 14. Đầu ngăn chi tiết: logo 44px nhưng ảnh 28px trôi trong ô không viền → nhìn lệch (Hải 24/09 23:52). Ô logo có viền + nền panel2, ảnh 30px, căn giữa đúng khối tên ===== */
.nd-r1{align-items:center}
.nd-r1 .ava{width:44px;height:44px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);align-self:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
.nd-r1 .ava img{width:30px!important;height:30px!important;border-radius:6px}
.nd-r1 .ava .ini{font-size:16px!important}
.nd-r1 h2{margin:0;line-height:1.15}
.nd-r1 .nd-meta{margin-top:3px}