/* ==========================================================
   vitToolBox – Lớp đồng bộ giao diện cho MỌI công cụ
   ----------------------------------------------------------
   Nạp SAU CSS riêng của từng tool để mọi tool có cùng một kiểu
   nút, ô nhập, vùng tải file, panel, tab và cùng hiệu ứng.
   Chỉ ghi đè phần "nhìn" (màu, viền, bo góc, cỡ chữ, chiều cao,
   hiệu ứng), KHÔNG đụng bố cục (display, position, width...).

   Tool mới: dùng đúng các class dưới đây là tự đồng bộ.
     Nút chính  : .action-btn.primary  (hoặc .btn.btn-primary)
     Nút phụ    : .action-btn          (hoặc .btn.btn-outline)
     Nút xoá    : .action-btn.danger
     Nút icon   : .icon-btn
     Lựa chọn   : .tab-btn / .type-btn / .mode-btn (+ .active)
     Ô nhập     : .form-control  + nhãn .form-label
     Vùng upload: .upload-placeholder / .upload-state
     Panel      : .panel-card  (+ .panel-header)

   Hiệu ứng chuẩn:
     hover  → viền/chữ xanh, nền xanh nhạt
     nhấn   → thu nhỏ 0.97
     focus  → vòng sáng xanh
     chuyển → var(--t) = 0.16s
   ========================================================== */

/* ---------- 0. Hiệu ứng nền cho mọi phần tử bấm được ---------- */
main :is(button, [role="button"], a, label[for], select, summary, input[type="checkbox"], input[type="radio"],
    input[type="color"], input[type="range"], [onclick]) {
    transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t),
        transform var(--t), opacity var(--t) !important;
}

main :is(button, [role="button"], [onclick]):not(:disabled):active {
    transform: scale(.97) !important;
}

main :is(button, [onclick], [role="button"], .type-btn, .method-btn, .template-item, .radio-option) {
    cursor: pointer;
}

main :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: none !important;
    box-shadow: var(--ring) !important;
}

main :is(button, input, select, textarea):disabled,
main [disabled] {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

/* ---------- 1. Nút ---------- */
main :is(.action-btn, .btn, .btn-outline, .btn-secondary, .tool-btn, .refresh-btn,
    .toggle-btn, .btn-copy, .btn-clear, .dl-btn, .capture-big-btn, .search-box button) {
    min-height: var(--ctl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: var(--r-md) !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: none !important;
}

main :is(.action-btn, .btn, .btn-outline, .btn-secondary, .tool-btn, .refresh-btn,
    .toggle-btn, .btn-copy, .btn-clear, .dl-btn):not(:disabled):hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: var(--brand-50) !important;
}

/* nút chính */
main :is(.action-btn.primary, .btn-primary, .btn.primary, .capture-big-btn, .search-box button,
    .dl-btn.primary, .toggle-btn.active) {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

main :is(.action-btn.primary, .btn-primary, .btn.primary, .capture-big-btn, .search-box button, .dl-btn.primary):not(:disabled):hover {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -4px rgba(29, 111, 242, .55) !important;
}

/* nút xoá */
main :is(.action-btn.danger, .btn.danger, .icon-btn.danger, .btn-danger) {
    color: var(--danger) !important;
    border-color: #f3c4c4 !important;
    background: var(--surface) !important;
}

main :is(.action-btn.danger, .btn.danger, .icon-btn.danger, .btn-danger):not(:disabled):hover {
    background: var(--danger-50) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

/* nút chỉ có icon */
main :is(.icon-btn, .icon-tool-btn, .btn-icon) {
    min-width: var(--ctl-h);
    min-height: var(--ctl-h) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ink-2) !important;
    font-size: .95rem !important;
    box-shadow: none !important;
}

main :is(.icon-btn, .icon-tool-btn, .btn-icon):not(:disabled):hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: var(--brand-50) !important;
}

main :is(.icon-btn, .icon-tool-btn, .btn-icon).active {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* ---------- 2. Nút lựa chọn / tab ---------- */
main :is(.tab-btn, .type-btn, .mode-btn, .method-btn, .filter-btn, .sidebar-tab, .radio-option, .template-item) {
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--r-md) !important;
    color: var(--ink-2) !important;
    font-size: .93rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

main :is(.tab-btn, .type-btn, .mode-btn, .method-btn, .filter-btn, .sidebar-tab, .radio-option, .template-item):hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: var(--brand-50) !important;
}

main :is(.tab-btn, .type-btn, .mode-btn, .method-btn, .filter-btn, .sidebar-tab, .radio-option, .template-item):active {
    transform: scale(.97);
}

main :is(.tab-btn, .type-btn, .mode-btn, .method-btn, .filter-btn, .sidebar-tab, .radio-option, .template-item).active,
main .radio-option:has(input:checked) {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

main :is(.tab-btn, .type-btn, .mode-btn, .method-btn, .filter-btn, .sidebar-tab, .template-item).active :is(i, span, small, p, h4) {
    color: #fff !important;
}

main .type-btn.link-btn {
    border-style: dashed !important;
}

/* ---------- 3. Ô nhập ---------- */
main :is(input[type="text"], input[type="number"], input[type="url"], input[type="email"],
    input[type="tel"], input[type="search"], input[type="password"], input:not([type]), select, textarea):not(.code-textarea):not(:is(.search-box, .bank-search-box, .editor-wrapper, .input-wrapper, .color-input-wrapper, .timeline-container) *) {
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--r-md) !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    transition: border-color var(--t), box-shadow var(--t) !important;
}

main :is(input[type="text"], input[type="number"], input[type="url"], input[type="email"],
    input[type="tel"], input[type="search"], input[type="password"], input:not([type]), select):not(:is(.search-box, .bank-search-box, .editor-wrapper, .input-wrapper, .color-input-wrapper, .timeline-container) *) {
    min-height: var(--ctl-h);
}

main :is(input, select, textarea):not(:is(.search-box, .bank-search-box, .editor-wrapper, .input-wrapper) *):hover {
    border-color: var(--brand-200) !important;
}

main :is(input, select, textarea):focus,
main :is(.search-box, .input-wrapper, .input-container, .editor-wrapper, .bank-search-box):focus-within {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: var(--ring) !important;
}

main :is(.search-box input, .bank-search-box input, .editor-wrapper textarea, .input-wrapper input):focus {
    box-shadow: none !important;
}

main :is(.search-box, .input-wrapper, .input-container, .editor-wrapper, .bank-search-box) {
    border-color: var(--line-strong) !important;
    border-radius: var(--r-lg) !important;
    transition: border-color var(--t), box-shadow var(--t) !important;
}

main ::placeholder {
    color: #9ca3af !important;
}

main input[type="range"],
main input[type="checkbox"],
main input[type="radio"],
main progress {
    accent-color: var(--brand);
}

main input[type="color"] {
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
}

main input[type="color"]:hover {
    border-color: var(--brand);
}

main .range-slider {
    background: var(--brand-100) !important;
}

main .range-slider::-webkit-slider-thumb {
    background: var(--brand) !important;
    box-shadow: none !important;
    transition: transform var(--t);
}

main .range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

main .range-slider::-moz-range-thumb {
    background: var(--brand) !important;
}

/* nhãn */
main :is(.form-label, .config-label, .prop-label, .slider-label, .link-label, .input-section > label, .option-group > h3) {
    font-size: .93rem !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
}

/* ---------- 4. Vùng tải file ---------- */
main :is(.upload-placeholder, .upload-state, .scan-drop-zone, .upload-box-small, .logo-upload-box) {
    border: 1.5px dashed var(--brand-200) !important;
    background: var(--brand-50) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t) !important;
}

main :is(.upload-placeholder, .upload-state, .scan-drop-zone, .upload-box-small, .logo-upload-box):hover,
main :is(.upload-placeholder, .upload-state, .scan-drop-zone, .upload-box-small, .logo-upload-box):is(.drag-over, .dragover, .dragging) {
    border-color: var(--brand) !important;
    background: var(--brand-100) !important;
}

main :is(.upload-placeholder, .upload-state, .scan-drop-zone, .upload-box-small, .logo-upload-box):active {
    transform: scale(.995);
}

main :is(.upload-placeholder, .upload-content, .scan-drop-zone, .upload-box-small, .logo-upload-box)>i,
main .scan-icon-circle,
main .scan-icon-circle i {
    color: var(--brand) !important;
    transition: transform var(--t);
}

main :is(.upload-placeholder, .scan-drop-zone):hover > i,
main .upload-state:hover .upload-content > i,
main .scan-drop-zone:hover .scan-icon-circle {
    transform: translateY(-3px);
}

main .scan-icon-circle {
    background: #fff !important;
}

main :is(.upload-placeholder, .upload-content, .scan-drop-zone) h3,
main .scan-title {
    font-size: 1.05rem !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
}

main :is(.upload-placeholder, .upload-content, .scan-drop-zone) p,
main .scan-subtitle {
    color: var(--muted) !important;
    font-size: .93rem !important;
}

main :is(.upload-placeholder, .upload-content, .scan-drop-zone)>i {
    font-size: 2.2rem !important;
}

main .upload-section {
    background: transparent !important;
    border: 0 !important;
}

/* ---------- 5. Panel / thẻ kết quả ---------- */
main :is(.panel-card, .info-panel, .properties-panel, .control-panel, .config-panel, .result-card,
    .otp-card, .domain-main-card, .ip-main-card, .basic-panel, .detail-panel, .tech-panel, .map-panel,
    .preview-panel, .video-info-panel, .diff-result-main, .result-box, .response-container,
    .bot-manager-section, .api-methods-section, .params-section, .response-section, .watermark-sidebar,
    .picker-sidebar, .coords-sidebar > *, .live-link-box, .qr-preview-container, .avatar-preview-container) {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
}

main :is(.panel-header, .panel-head, .diff-result-header, .result-header, .ip-header, .domain-header, .group-header) {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    border-color: var(--line) !important;
}

main :is(.panel-card, .info-panel, .properties-panel, .control-panel, .config-panel) h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
}

/* danh sách có thể bấm */
main :is(.saved-bots-list > *, .points-list > *, .saved-colors-list > *, .color-row, .bank-options-list > *, .data-item) {
    transition: background var(--t), border-color var(--t);
}

main :is(.saved-bots-list > *, .points-list > *, .saved-colors-list > *, .bank-options-list > *):hover {
    background: var(--brand-50) !important;
}

/* thanh thống kê */
main .diff-stat-item {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
    transition: border-color var(--t), transform var(--t) !important;
}

main .diff-stat-item:hover {
    border-color: var(--brand-200) !important;
    transform: translateY(-1px) !important;
}

main .diff-stat-icon {
    background: var(--brand-50) !important;
    color: var(--brand) !important;
}

main .diff-stat-value {
    color: var(--ink) !important;
}

/* badge */
main :is(.badge, .timer-badge, .dnssec-badge) {
    background: var(--brand-50) !important;
    color: var(--brand) !important;
    border-color: var(--brand-100) !important;
}

main .tip-card.warning {
    border-color: var(--line) !important;
    border-left-color: var(--brand) !important;
    background: var(--surface) !important;
}

main .tip-card.warning i {
    color: var(--brand) !important;
}

/* ---------- 6. Thông báo nổi ---------- */
#notification,
#copy-toast,
.toast {
    background: var(--ink) !important;
    color: #fff !important;
    border-radius: var(--r-md) !important;
    font-size: .93rem !important;
    box-shadow: var(--sh-lg) !important;
}

/* ---------- 7. Loading ---------- */
main .spinner {
    border-top-color: var(--brand) !important;
}

/* ---------- 8. Mobile ---------- */
@media (max-width: 640px) {
    main :is(.action-btn, .btn) {
        min-height: 40px !important;
    }
}

/* ==========================================================
   9. Vùng chọn file chuẩn (.vt-drop) – dùng cho MỌI tool
   ========================================================== */
.vt-drop {
    position: relative;
    width: 100%;
    min-height: 220px;
    padding: 28px 20px;
    border: 1.5px dashed var(--brand-200);
    border-radius: var(--r-lg);
    background: var(--brand-50);
    color: var(--ink);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    display: flex;
}

.vt-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.vt-drop:hover,
.vt-drop.is-over,
.vt-drop.drag-over,
.vt-drop.dragover,
.vt-drop.active {
    border-color: var(--brand);
    background: var(--brand-100);
}

.vt-drop.is-over {
    box-shadow: var(--ring);
}

.vt-drop:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.vt-drop-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--brand);
    font-size: 1.35rem;
    box-shadow: var(--sh-sm);
    transition: transform var(--t);
}

.vt-drop:hover .vt-drop-icon,
.vt-drop.is-over .vt-drop-icon {
    transform: translateY(-3px);
}

.vt-drop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vt-drop-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}

.vt-drop-hint {
    font-size: .9rem;
    color: var(--muted);
}

.vt-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--ctl-h);
    padding: 0 16px;
    margin-top: 4px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    font-weight: 500;
    transition: background var(--t), transform var(--t);
}

.vt-drop:hover .vt-drop-btn {
    background: var(--brand-600);
}

.vt-drop:active .vt-drop-btn {
    transform: scale(.97);
}

/* bản nhỏ (chọn logo...) */
.vt-drop.vt-drop-sm {
    min-height: 0;
    padding: 12px 14px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
}

.vt-drop-sm .vt-drop-icon {
    width: 34px;
    height: 34px;
    font-size: .95rem;
    flex-shrink: 0;
}

.vt-drop-sm .vt-drop-title {
    font-size: .95rem;
}

/* ==========================================================
   10. Thông báo chung (VT.toast)
   ========================================================== */
.vt-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: #fff;
    font-size: .93rem;
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
}

.vt-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.vt-toast i {
    color: #7fb2ff;
}

.vt-toast.error i {
    color: #fca5a5;
}

/* ==========================================================
   11. Khối giao diện chuẩn cho tool mới (vt-*)
   ========================================================== */
.vt-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vt-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 760px) {
    .vt-grid-2 {
        grid-template-columns: 1fr;
    }
}

.vt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vt-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink-2);
}

.vt-label small {
    font-weight: 400;
    color: var(--muted);
}

.vt-textarea {
    width: 100%;
    min-height: 260px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.55;
    tab-size: 4;
}

.vt-textarea[readonly] {
    background: var(--surface-2) !important;
}

.vt-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.vt-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .93rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}

.vt-opt select,
.vt-opt input[type="number"] {
    width: auto;
    min-width: 80px;
}

.vt-opt input[type="range"] {
    width: 140px;
}

.vt-opt output {
    min-width: 36px;
    font-weight: 600;
    color: var(--brand);
}

.vt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vt-actions .spacer {
    flex: 1;
}

.vt-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.vt-seg button {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font-weight: 500;
    cursor: pointer;
}

.vt-seg button:hover {
    color: var(--brand);
}

.vt-seg button.active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--sh-sm);
}

.vt-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: .93rem;
    background: var(--brand-50);
    color: var(--brand-700);
}

.vt-msg.error {
    background: var(--danger-50);
    color: var(--danger);
}

.vt-msg.ok {
    background: var(--success-50);
    color: var(--success);
}

/* danh sách file (nén, đổi định dạng, PDF) */
.vt-files {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.vt-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    transition: background var(--t);
}

.vt-file+.vt-file {
    border-top: 1px solid var(--line);
}

.vt-file:hover {
    background: var(--surface-2);
}

.vt-file img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    flex-shrink: 0;
    background: var(--surface-2);
}

.vt-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.vt-file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-file-meta {
    font-size: .86rem;
    color: var(--muted);
}

.vt-file-meta b {
    color: var(--brand);
    font-weight: 600;
}

.vt-file .btn {
    flex-shrink: 0;
}

/* kết quả dạng bảng key – value (hash, timestamp) */
.vt-kv {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.vt-kv-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    background: var(--surface);
    transition: background var(--t);
}

.vt-kv-row+.vt-kv-row {
    border-top: 1px solid var(--line);
}

.vt-kv-row:hover {
    background: var(--surface-2);
}

.vt-kv-key {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 500;
}

.vt-kv-val {
    word-break: break-all;
    color: var(--ink);
}

@media (max-width: 560px) {
    .vt-kv-row {
        grid-template-columns: 1fr auto;
    }

    .vt-kv-key {
        grid-column: 1 / -1;
    }
}

.vt-big {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}

.vt-meter {
    height: 6px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.vt-meter span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--brand);
    border-radius: 99px;
    transition: width .25s var(--ease), background .25s;
}

.vt-empty {
    padding: 28px;
    text-align: center;
    color: var(--muted);
    font-size: .93rem;
}

/* ==========================================================
   12. Nút "Dán" (tự gắn vào ô có data-paste)
   ========================================================== */
.vt-paste-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.vt-paste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--brand-100);
    border-radius: 6px;
    background: var(--brand-50);
    color: var(--brand);
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    z-index: 2;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}

.vt-paste:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.vt-paste:active {
    transform: scale(.94);
}

.vt-paste.done {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.vt-paste.done i::before {
    content: "\f00c";
}

/* nằm trong ô 1 dòng, sát mép phải */
.vt-paste.is-end {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

main .vt-paste.is-end:active {
    transform: translateY(-50%) scale(.94) !important;
}

main .vt-has-paste:not(textarea) {
    padding-right: 72px !important;
}

/* góc trên phải của ô nhiều dòng */
.vt-paste.is-corner {
    position: absolute;
    top: 8px;
    right: 10px;
}

main textarea.vt-has-paste {
    padding-top: 40px !important;
}

/* trong thanh ngang (ô tìm tên miền, IP, 2FA...) */
.vt-paste.is-inline {
    flex-shrink: 0;
    align-self: center;
    margin: 0 6px;
    height: 32px;
}

/* ==========================================================
   13. Điện thoại: chữ trong ô nhập ≥ 16px để iPhone không tự phóng to
   (:is(..., #_) để thắng mọi quy tắc cỡ chữ khác)
   ========================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
    :is(input, select, textarea, #_vt):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
        font-size: 16px !important;
    }
}

html {
    touch-action: manipulation;   /* bỏ phóng to khi chạm đúp */
}

/* ô bị JS của tool ẩn đi → ẩn luôn khung chứa nút Dán */
.vt-paste-wrap:has(> .hidden),
.vt-paste-wrap:has(> [hidden]),
.vt-paste-wrap:has(> [style*="display: none"]),
.vt-paste-wrap:has(> [style*="display:none"]) {
    display: none;
}

/* ==========================================================
   14. Phần giới thiệu / hướng dẫn: 1 khung, cấu trúc rõ ràng
   ========================================================== */
.tool-info-section {
    margin-top: 32px !important;
    padding: 24px 28px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    font-size: .95rem;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .tool-info-section {
        padding: 18px 16px !important;
    }
}

.tool-info-section h2 {
    font-size: 1.2rem !important;
    margin: 0 0 8px !important;
    color: var(--ink) !important;
}

.tool-info-section h3 {
    font-size: 1.02rem !important;
    margin: 24px 0 12px !important;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--ink) !important;
}

.tool-info-section h2 + h3 {
    border-top: 0;
    padding-top: 0;
}

.tool-info-section > p,
.tool-info-section li {
    color: var(--ink-2) !important;
}

.tool-info-section ul {
    padding-left: 20px !important;
}

.tool-info-section li {
    margin-bottom: 6px !important;
}

.tool-info-section li strong {
    color: var(--ink);
}

/* ---- Tính năng: lưới 2 cột, tiêu đề đậm + mô tả bên dưới ---- */
.tool-info-section :is(.feature-grid, .support-grid, .demo-grid) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px 28px !important;
    margin: 0 !important;
}

.tool-info-section :is(.feature-box, .support-card, .demo-card) {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: left !important;
}

/* icon đứng riêng → ẩn; icon trong tiêu đề → giữ nhỏ, màu xanh */
.tool-info-section :is(.feature-box, .demo-card, .support-card) > i,
.tool-info-section :is(.demo-icon, .feature-icon) {
    display: none !important;
}

.tool-info-section :is(.feature-box, .demo-card) h4 {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px !important;
    font-size: .97rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
}

.tool-info-section :is(.feature-box, .demo-card) h4 i {
    color: var(--brand) !important;
    font-size: .85rem;
    width: 16px;
    text-align: center;
}

.tool-info-section :is(.feature-box, .demo-card) p {
    margin: 0 !important;
    font-size: .93rem !important;
    color: var(--muted) !important;
}

/* ---- Các bước: danh sách đánh số ---- */
.tool-info-section .step-grid {
    display: flex !important;
    flex-direction: column;
    gap: 14px !important;
    margin: 0 !important;
}

.tool-info-section .step-card {
    display: grid !important;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.tool-info-section .step-number {
    grid-row: span 2;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    font-size: .85rem !important;
    box-shadow: none !important;
}

.tool-info-section .step-card h4 {
    margin: 3px 0 2px !important;
    font-size: .97rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
}

.tool-info-section .step-card p {
    margin: 0 !important;
    font-size: .93rem !important;
    color: var(--ink-2) !important;
}

/* ---- Lưu ý / mẹo: khối nền xanh nhạt ---- */
.tool-info-section .tips-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
}

.tool-info-section :is(.tip-box, .tip-card) {
    display: block !important;
    padding: 12px 14px !important;
    background: var(--brand-50) !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}

.tool-info-section :is(.tip-box, .tip-card) > i {
    display: none !important;
}

.tool-info-section :is(.tip-content, .tip-card) h4 {
    margin: 0 0 2px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--brand-700) !important;
}

.tool-info-section :is(.tip-content, .tip-card) p {
    margin: 0 !important;
    font-size: .92rem !important;
    color: var(--ink-2) !important;
}

/* ==========================================================
   Khung ngoài của mọi tool (.tool-panel – bọc sẵn trong Tool.astro)
   Một thẻ trắng duy nhất, giống hệt khung "Hướng dẫn" bên dưới.
   Bên trong: thẻ con chỉ có viền mảnh, không đổ bóng.
   ========================================================== */
.tool-panel {
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

/* khung riêng của tool cũ → bỏ khoảng cách/nền thừa, để .tool-panel lo */
.tool-panel > :is(.tool-container, .twofa-container, .domain-lookup-container, .ip-lookup-container,
    .watermark-layout, .extractor-main-container) {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.tool-panel > :last-child {
    margin-bottom: 0 !important;
}

/* thẻ con: phẳng, viền mảnh */
.tool-panel :is(.panel-card, .info-panel, .properties-panel, .control-panel, .config-panel, .video-extractor-container,
    .stat-card, .stat-item, .result-card, .card, .ip-card, .ip-main-card, .domain-card, .result-dashboard > *) {
    box-shadow: none !important;
}

.tool-panel .vt-options {
    background: var(--surface-2);
}

@media (max-width: 768px) {
    .tool-panel {
        padding: 16px;
    }
}

/* ==========================================================
   Trình chỉnh sửa (Chỉnh ảnh nhanh, Làm mờ ảnh, Làm mờ video)
   Khung: thanh công cụ trên · vùng làm việc · thanh hành động dưới
   ========================================================== */
.editor-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}

.editor-container .editor-workspace {
    padding: 16px;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.editor-toolbar.bottom-bar {
    justify-content: space-between;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.editor-toolbar .tool-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.editor-toolbar:not(.bottom-bar) .tool-group:not(:last-of-type) {
    padding-right: 16px;
    border-right: 1px solid var(--line);
}

.tool-group-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2);
}

.editor-toolbar .icon-btn {
    min-width: var(--ctl-h);
    width: auto;
    padding: 0 10px;
}

.editor-values {
    display: flex;
    gap: 12px;
    margin-left: auto;
    font-size: .85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .editor-toolbar:not(.bottom-bar) .tool-group:not(:last-of-type) {
        padding-right: 0;
        border-right: 0;
    }

    .editor-values {
        margin-left: 0;
    }
}

/* tiêu đề nhỏ trong thẻ có padding (Đã lưu, Đã đánh dấu…): không dải nền, nút nằm cùng hàng */
.tool-panel :is(.saved-colors-panel, .saved-points-panel) > .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

.tool-panel :is(.saved-colors-panel, .saved-points-panel) > .panel-header h3 {
    margin: 0 !important;
}

.tool-panel :is(.saved-colors-panel, .saved-points-panel) .header-actions {
    display: flex;
    gap: 6px;
}

/* video: khung riêng của tool nằm trong .tool-panel → bỏ viền/padding để không thành 2 lớp khung */
.tool-panel :is(.video-editor-container, .video-extractor-container) {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

.tool-panel .saved-colors-panel .btn-clear {
    width: var(--ctl-h);
    min-width: var(--ctl-h);
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}