/* ============================================================ DEVTOOLS — LAYOUT FIX Thêm vào SAU style gốc: ============================================================ */ /* ── Design tokens bổ sung ─────────────────────────────────── */ :root { --gap: 20px; --gap-sm: 12px; --gap-xs: 8px; --pad: 22px; /* padding card-body đồng nhất */ --pad-head: 14px 20px; /* padding card-head đồng nhất */ --col-side: 300px; /* cột sidebar/log cố định */ --max-tool: 1200px; /* max-width chung cho mọi tool */ --max-narrow: 760px; /* tool 1 cột (cắt chuỗi, lọc…) */ --radius-sm: 10px; } /* ── Wrapper chung cho MỌI tool-panel ──────────────────────── */ .tool-panel { max-width: var(--max-tool); } /* card-head & card-body đồng nhất ──────────────────────────── */ .card-head { padding: var(--pad-head); } .card-body { padding: var(--pad); } /* ── Layout helper classes (thay thế inline style grid) ─────── */ /* 2 cột bằng nhau */ .l-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } /* Cột chính + cột phụ cố định (log / history) */ .l-main-side { display: grid; grid-template-columns: 1fr var(--col-side); gap: var(--gap); align-items: start; } /* Stack dọc */ .l-stack { display: flex; flex-direction: column; gap: var(--gap); } .l-stack-sm { gap: var(--gap-sm); } /* Stretch card theo chiều cao */ .l-stretch { display: flex; flex-direction: column; height: 100%; } .l-stretch .card-body { flex: 1; display: flex; flex-direction: column; } .l-stretch textarea.inp { flex: 1; min-height: 220px; resize: none; } /* ── Tool: Check Live UID ───────────────────────────────────── */ #tool-liveuid .l-grid2 { align-items: stretch; } #tool-liveuid .card { height: 100%; } /* ── Tool: OCR ──────────────────────────────────────────────── */ #tool-ocr .l-grid2 { align-items: stretch; } #tool-ocr .card { height: 100%; } #tool-ocr #ocr-output { min-height: 340px; } /* ── Tool: Check IP ─────────────────────────────────────────── */ #tool-checkip .l-stack { max-width: var(--max-tool); } /* ── Tool: Mahoa / Cloudflare (main + side) ─────────────────── */ #tool-mahoa .mahoa-grid, #tool-cloudflare .cf-main-grid { gap: var(--gap); } /* ── Tool: Email ────────────────────────────────────────────── */ #tool-email .email-gen-grid { grid-template-columns: 320px 1fr; gap: var(--gap); align-items: start; max-width: var(--max-tool); } /* ── Tool: PHP encode ───────────────────────────────────────── */ #tool-phpencode .card { max-width: var(--max-tool); } /* ── Tool: Cắt chuỗi / Lọc trùng (narrow) ──────────────────── */ #tool-cat .card, #tool-loctrung .card { max-width: var(--max-narrow); } /* ── Tool: ReCAPTCHA (narrow) ───────────────────────────────── */ #tool-recaptcha .card { max-width: var(--max-narrow); } /* ── Card height đồng nhất trong cùng 1 row ─────────────────── */ .l-grid2 > .card, .l-grid2 > div > .card { height: 100%; box-sizing: border-box; } /* ── Textarea chiều cao tối thiểu đồng nhất ─────────────────── */ .tool-panel textarea.inp { min-height: 120px; } /* ── Stat badge trong Live UID ──────────────────────────────── */ #tool-liveuid .uid-stats { display: flex; gap: var(--gap-sm); align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); } /* ── Log / history panel chiều cao cuộn nhất quán ───────────── */ #cf-logList, #mahoa-logList { max-height: 65vh; overflow-y: auto; } /* ── Map full-width đồng nhất ───────────────────────────────── */ #ci-map { height: 360px; width: 100%; } /* ───────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────── */ /* Tablet: ≤ 1024px — cột phụ thu lại */ @media (max-width: 1024px) { :root { --col-side: 260px; --gap: 16px; } #tool-email .email-gen-grid { grid-template-columns: 280px 1fr; } } /* Tablet nhỏ: ≤ 860px — main+side → stack dọc */ @media (max-width: 860px) { .l-main-side, #tool-mahoa .mahoa-grid, #tool-cloudflare .cf-main-grid, #tool-email .email-gen-grid { grid-template-columns: 1fr; } /* Log panel không cần max-height quá thấp khi stack dọc */ #cf-logList, #mahoa-logList { max-height: 40vh; } } /* Mobile: ≤ 768px — tất cả về 1 cột */ @media (max-width: 768px) { :root { --gap: 12px; --pad: 16px; --max-narrow: 100%; } .l-grid2, .grid2, .grid3 { grid-template-columns: 1fr !important; } /* tool 2 cột (OCR, LiveUID, CheckIP…) */ #tool-ocr .l-grid2, #tool-liveuid .l-grid2, #tool-checkip .l-grid2 { grid-template-columns: 1fr; } /* PHP encode — textarea 2 cột */ #tool-phpencode .grid2.cm-big { grid-template-columns: 1fr; } /* Email tool */ #tool-email .email-gen-grid { grid-template-columns: 1fr; } /* Stat dòng Live UID */ #tool-liveuid .uid-stats { gap: var(--gap-xs); font-size: 12px; } /* Map thấp hơn trên mobile */ #ci-map { height: 240px; } /* OCR output */ #tool-ocr #ocr-output { min-height: 200px; } /* Card-head flex-wrap cho nút */ .card-head { flex-wrap: wrap; row-gap: var(--gap-xs); } /* Topbar title ngắn hơn */ .topbar-title { font-size: 13px; } /* Stat badge Live UID stack */ #tool-liveuid [style*="display: flex"][style*="justify-content: space-between"] { flex-direction: column; align-items: flex-start !important; gap: 6px; } } /* Mobile nhỏ: ≤ 400px */ @media (max-width: 400px) { :root { --pad: 12px; } .btn { padding: 9px 14px; font-size: 12px; } .content-area { padding: 10px; } }