/* page-tools — Bộ công cụ kiểm tra, dựng theo ceoacc.com/client/ceotools. Số đo lấy từ getComputedStyle trên bản gốc (đơn vị CSS chưa nhân zoom .86). Giữ đúng đơn vị gốc: px chỗ gốc dùng px, rem chỗ gốc dùng rem (mb-3/mb-4/p-4/mt-2, nút .btn, .alert…) để khi khung chung đặt html 15.5px ở điện thoại (như ceoacc) mọi khoảng cách co theo đúng tỉ lệ. Mọi luật gói trong #page-tools để không lan sang trang khác. Phông "Plus Jakarta Sans" (tiêu đề) do prototype.html nạp sẵn. */ #page-tools { --ct-label: #213446; --ct-list-text: #212529; --ct-card-ink: #212529; /* màu chữ kế thừa của .card lồng trong (Bootstrap) */ --ct-nav-bg: var(--cg-surface); --ct-live-bg: #e6f4ea; --ct-dead-bg: #fce8e6; --ct-unknown-bg: #f0f0f0; --ct-success: #3cb72c; --ct-danger: #f42b3d; --ct-secondary: #8f9fbc; --ct-info: #19b3b3; --ct-warning: #db7e06; --ct-dark: #01041b; --ct-code: #3378ff; --ct-fill: #2465bd; } .cg-dark #page-tools { --ct-label: #fff; --ct-list-text: var(--cg-text); --ct-card-ink: var(--cg-text); --ct-nav-bg: #1d2734; --ct-live-bg: #173a2c; --ct-dead-bg: #3f2730; --ct-unknown-bg: var(--cg-soft); } #page-tools [hidden] { display: none !important; } /* flow-root: giữ margin-bottom 30px của thẻ cuối trong khung như cột flex của gốc (không tràn ra ngoài) */ #page-tools .ct-shell { display: flow-root; max-width: 1450px; margin: 0 auto; } /* === Khung giới thiệu (.ctools-intro) === */ #page-tools .ct-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .7fr); align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 1.25rem; border: 1px solid var(--cg-line); border-radius: 24px; background: linear-gradient(135deg, var(--cg-surface) 35%, var(--cg-blue-soft)); box-shadow: var(--cg-shadow); color: var(--cg-text); } #page-tools .ct-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11px; font-weight: 500; line-height: 1.55; letter-spacing: .04em; color: var(--cg-primary); background: var(--cg-blue-soft); } #page-tools .ct-intro h1 { margin: 0 0 5px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; color: var(--cg-text); } #page-tools .ct-intro p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--cg-muted); } #page-tools .ct-privacy { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--cg-line); border-radius: 20px; background: var(--cg-soft); color: var(--cg-muted); font-size: 12px; line-height: 1.6; } /* Icon được co như gốc (flex-shrink mặc định) nên rộng đúng bằng nét chữ, không giữ 1.25em */ #page-tools .ct-privacy i { margin-top: 3px; font-size: 12px; color: var(--cg-primary); } #page-tools .ct-privacy strong { font-weight: 700; color: var(--cg-text); } /* === Hàng tab công cụ (.tool-nav-wrap / .tool-nav-item) === Gốc: rê chuột KHÔNG đổi màu (luật :hover bị CSS glass đè) — chỉ tab .active khác màu. */ #page-tools .ct-nav { width: 100%; padding: 7px; margin-bottom: 1.875rem; border: 1px solid var(--cg-line); border-radius: 20px; background: var(--ct-nav-bg); box-shadow: var(--cg-shadow); } #page-tools .ct-nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } #page-tools .ct-nav-item { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-color: transparent; border-radius: 14px; background: transparent; color: var(--cg-muted); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.55; text-align: center; cursor: pointer; transition: all .2s ease; } #page-tools .ct-nav-item i { font-size: 15px; } /* rộng 1.25em + canh giữa: mặc định của Font Awesome 7 */ #page-tools .ct-nav-item.active { background: var(--cg-blue-soft); color: var(--cg-primary); border-color: var(--cg-line); box-shadow: 0 2px 6px rgba(64, 153, 255, .25); } .cg-dark #page-tools .ct-nav-item:hover:not(.active) { background: #293a50; color: #9ed0ff; } /* === Thẻ nội dung từng công cụ === */ #page-tools .ct-pane { display: none; } #page-tools .ct-pane.active { display: block; } #page-tools .ct-card { position: relative; display: flex; flex-direction: column; margin-bottom: 30px; border: 1px solid var(--cg-line); border-radius: 24px; background: linear-gradient(155deg, var(--cg-surface) 65%, var(--cg-soft)); box-shadow: var(--cg-shadow); color: var(--cg-text); font-size: 14px; line-height: 1.6; } #page-tools .ct-card-body { flex: 1 1 auto; padding: 1.875rem; } #page-tools .ct-group, #page-tools .ct-mb { margin-bottom: 1.875rem; } #page-tools .ct-group-sm { margin-bottom: 1.25rem; } #page-tools .ct-mt { margin-top: .625rem; } #page-tools .ct-label { display: inline-block; margin-bottom: .5rem; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ct-label); } #page-tools .ct-help { display: block; margin-top: .25rem; font-size: 14px; line-height: 1.6; color: var(--cg-text); } /* === Ô nhập (.form-control) === */ #page-tools .ct-input { display: block; width: 100%; height: 46px; padding: 10px 14px; border: 1px solid var(--cg-line-strong); border-radius: 12px; background: var(--cg-surface); color: var(--cg-text); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 45px; transition: border-color .15s, box-shadow .15s; } #page-tools textarea.ct-input { height: auto; padding: 6px 14px; line-height: 1.3; resize: vertical; } #page-tools .ct-input::placeholder { color: var(--cg-muted); opacity: 1; } #page-tools .ct-input:focus { outline: 0; border-color: var(--cg-primary); box-shadow: 0 0 0 2px var(--cg-field-ring); } #page-tools .ct-input[readonly] { background: var(--cg-soft); color: var(--cg-muted); } #page-tools .ct-input.ct-res-list { background: var(--cg-surface); color: var(--ct-list-text); } /* Ô kết quả tab Chó có style riêng font-size .9rem ở gốc (thắng cả luật 16px của điện thoại) */ #page-tools .ct-input.ct-res-list-fb { font-size: .9rem; } /* === Nút (.btn) === */ #page-tools .ct-btn { display: inline-block; padding: .625rem 1.25rem; border: 1px solid transparent; border-radius: 12px; background: transparent; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 21px; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; } #page-tools .ct-btn:disabled { opacity: .65; cursor: default; } #page-tools .ct-btn-primary { background: var(--ct-fill); border-color: var(--ct-fill); color: #fff; box-shadow: 0 4px 8px rgba(255, 255, 255, .05); } /* Gốc: nút xanh không đổi khi rê chuột; chỉ khi đang nhấn mới đậm lên */ #page-tools .ct-btn-primary:not(:disabled):active { background: #0056ff; border-color: #0052f2; } #page-tools .ct-btn-info { background: var(--ct-info); border-color: var(--ct-info); color: #fff; box-shadow: 0 4px 8px rgba(255, 255, 255, .05); } #page-tools .ct-btn-info:not(:disabled):is(:hover, :focus) { background: #149191; border-color: #138686; } #page-tools .ct-btn-info:not(:disabled):active { background: #138686; border-color: #117b7b; } /* .btn:focus / :disabled / :active của gốc bỏ bóng */ #page-tools .ct-btn:is(:focus, :disabled, :active) { box-shadow: none; } #page-tools .ct-btn-outline-primary { color: var(--cg-primary); border-color: var(--cg-line-strong); } #page-tools .ct-btn-outline-primary:not(:disabled):is(:hover, :active) { color: var(--cg-primary); background: var(--cg-blue-soft); border-color: var(--cg-primary); } #page-tools .ct-btn-outline-secondary { color: var(--ct-secondary); border-color: var(--ct-secondary); } #page-tools .ct-btn-outline-success { color: var(--ct-success); border-color: var(--ct-success); } #page-tools .ct-btn-outline-danger { color: var(--ct-danger); border-color: var(--ct-danger); } #page-tools .ct-btn-outline-info { color: var(--ct-info); border-color: var(--ct-info); } #page-tools .ct-btn-outline-warning { color: var(--ct-warning); border-color: var(--ct-warning); } #page-tools .ct-btn-outline-dark { color: var(--ct-dark); border-color: var(--ct-dark); } #page-tools .ct-btn-outline-secondary:not(:disabled):is(:hover, :active) { color: #fff; background: var(--ct-secondary); } #page-tools .ct-btn-outline-success:not(:disabled):is(:hover, :active) { color: #fff; background: var(--ct-success); } #page-tools .ct-btn-outline-danger:not(:disabled):is(:hover, :active) { color: #fff; background: var(--ct-danger); } #page-tools .ct-btn-outline-info:not(:disabled):is(:hover, :active) { color: #fff; background: var(--ct-info); } #page-tools .ct-btn-outline-warning:not(:disabled):is(:hover, :active) { color: #fff; background: var(--ct-warning); } #page-tools .ct-btn-outline-dark:not(:disabled):is(:hover, :active) { color: #fff; background: var(--ct-dark); } .cg-dark #page-tools :is(.ct-btn-outline-secondary, .ct-btn-outline-success, .ct-btn-outline-danger, .ct-btn-outline-info, .ct-btn-outline-warning) { color: #fff; } .cg-dark #page-tools .ct-btn-outline-dark { color: #fff; border-color: var(--cg-muted); } .cg-dark #page-tools .ct-btn-outline-dark:not(:disabled):is(:hover, :active) { background: var(--cg-soft); } #page-tools .ct-btn-sm { padding: .25rem .5rem; font-size: 12px; line-height: 18px; border-radius: 10px; } #page-tools .ct-block { display: inline-block; width: 100%; } #page-tools .ct-btn-row { display: flex; } #page-tools .ct-btn-wrap { flex-wrap: wrap; } #page-tools .ct-fill { flex: 1 1 auto; } /* Hàng nút Kiểm tra + Huỷ của tab Gà (#instagram .ig-check-actions) */ #page-tools .ct-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } #page-tools .ct-actions > .ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 20px; font-weight: 600; white-space: nowrap; } #page-tools .ct-btn-cancel { color: #526680; border-color: #cedaeb; background: #f5f8fc; box-shadow: 0 1px 2px rgba(30, 60, 100, .04); } #page-tools .ct-btn-cancel svg { flex: none; } #page-tools .ct-btn-cancel:hover { color: #245fae; border-color: #9fb9df; background: #eaf1fb; } #page-tools .ct-btn-cancel:active { background: #dfeafa; } .cg-dark #page-tools .ct-btn-cancel { color: #c6d7ee; border-color: #455c78; background: #29394e; } .cg-dark #page-tools .ct-btn-cancel:hover { color: #eef5ff; border-color: #6f94c6; background: #344b68; } /* === Ô kết quả Sống / Chết / Không rõ (.row.g-4 > .col-md-* > .card) === */ #page-tools .ct-res-grid { display: grid; column-gap: 30px; } #page-tools .ct-res-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #page-tools .ct-res-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #page-tools .ct-res { position: relative; display: flex; flex-direction: column; min-width: 0; margin-bottom: 30px; border-radius: 16px; } #page-tools .ct-res.is-live { background: var(--ct-live-bg); --ct-tone: var(--ct-success); } #page-tools .ct-res.is-dead { background: var(--ct-dead-bg); --ct-tone: var(--ct-danger); } #page-tools .ct-res.is-unknown { background: var(--ct-unknown-bg); --ct-tone: var(--ct-secondary); } #page-tools .ct-res-body { flex: 1 1 auto; padding: 20px; } #page-tools .ct-res-title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--ct-tone); } #page-tools .ct-badge { display: inline-block; padding: .3em .6em; border-radius: 50px; font-size: 75%; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; vertical-align: baseline; text-transform: capitalize; color: #fff; background: var(--ct-tone, var(--ct-secondary)); } /* === Thông báo (.alert) === */ #page-tools .ct-alert { position: relative; display: flex; align-items: stretch; margin-bottom: 1rem; padding: .55rem 1rem; border: 1px solid transparent; border-radius: 20px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } #page-tools .ct-progress-alert, #page-tools #ct-totp-error { margin-top: 1.25rem; } #page-tools .ct-alert-small { font-size: 11.2px; } #page-tools .ct-alert-info { color: #0d5d5d; background: #d1f0f0; border-color: #159696; } #page-tools .ct-alert-warning { color: #724203; background: #f8e5cd; border-color: #b86a05; } #page-tools .ct-alert-danger { color: #7f1620; background: #fdd5d8; border-color: #cd2433; text-align: left; } .cg-dark #page-tools .ct-alert-info { color: #19b3b3; background: rgba(25, 179, 179, .2); } .cg-dark #page-tools .ct-alert-warning { color: #db7e06; background: rgba(219, 126, 6, .2); } .cg-dark #page-tools .ct-alert-danger { color: #f42b3d; background: rgba(244, 43, 61, .2); } /* === Đang tải (.spinner-border) === */ #page-tools .ct-loading { margin: 1.25rem 0; text-align: center; } #page-tools .ct-loading p { margin: .625rem 0 1rem; } #page-tools .ct-spinner { display: inline-block; width: 32px; height: 32px; vertical-align: text-bottom; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--ct-code); animation: ct-spin .75s linear infinite; } #page-tools .ct-loading-info .ct-spinner { color: var(--ct-info); } @keyframes ct-spin { to { transform: rotate(360deg); } } /* === 2FA: thẻ mã (.card.bg-light > .card-body.py-4) + thanh tiến trình (.progress) === */ #page-tools .ct-totp-result { text-align: center; } #page-tools .ct-totp-box { position: relative; display: flex; flex-direction: column; margin-bottom: 30px; border-radius: 16px; background: var(--cg-soft); color: var(--ct-card-ink); } #page-tools .ct-totp-body { flex: 1 1 auto; padding: 1.875rem 20px; } #page-tools .ct-totp-code { margin-bottom: 1.25rem; font-size: 56px; font-weight: 300; line-height: 1.2; color: var(--ct-code); font-variant-numeric: tabular-nums; } #page-tools .ct-totp-meta { margin-top: .625rem; } #page-tools .ct-progress { display: flex; height: 6px; overflow: hidden; border-radius: 3px; font-size: .75rem; line-height: 0; background: #e9ecef; box-shadow: inset 0 .1rem .1rem rgba(0, 0, 0, .1); } #page-tools .ct-progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; height: 100%; color: #fff; text-align: center; white-space: nowrap; background: var(--ct-success); transition: width .6s ease; } #page-tools .ct-totp-timer { margin-top: .625rem; font-size: 11.2px; line-height: 1.6; color: var(--cg-muted); } /* === Xử lý văn bản: lưới cột (.row g-4) === */ /* Cột .col-md-* của gốc xếp chồng sát nhau trên điện thoại (không có khoảng dọc) */ #page-tools .ct-cols { display: grid; column-gap: 30px; row-gap: 0; } #page-tools .ct-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #page-tools .ct-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* === Bảng thư đọc được (.data-table) === */ #page-tools .ct-table-wrap { overflow-x: auto; border: 1px solid var(--cg-line); border-radius: 16px; } #page-tools .ct-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.6; text-align: left; } #page-tools .ct-table th { padding: 15px 20px; background: var(--cg-soft); color: var(--cg-muted); font-size: 12px; font-weight: 600; border-bottom: 2px solid var(--cg-line); white-space: nowrap; } #page-tools .ct-table td { padding: 15px 20px; border-top: 1px solid var(--cg-line); vertical-align: top; color: var(--cg-text); } #page-tools .ct-table tr:first-child td { border-top: 0; } #page-tools .ct-table .ct-mail-preview { color: var(--cg-muted); max-width: 520px; } /* === Điện thoại / máy tính bảng (luật gốc: