/* Traffic engine — trang Nhiệm vụ (page-unlock) + Quảng cáo (advertiser). */

/* ===== Thông báo ===== */
.wallet-msg.is-ok { color: #0a7d2c; background: #e3f6e8; }
.wallet-msg.is-error { color: #b32d2e; background: #fbe5e5; }
.wallet-msg { padding: 10px 14px; border-radius: 12px; font-size: 14px; margin: 12px 0; }

/* ===== TRANG NHIỆM VỤ — "Hướng dẫn lấy mã" (#nv-guide) =====
   Port trang page-unlock.php của traffictop.net (ảnh chủ site 26/09/2026) vào khung app của theme.
   Màu theo spec chủ site: bước = thẻ trắng viền #E5E7EB bo 12px, số tròn #2F80ED; minh hoạ trang đích nền
   xanh lá #E8F0E8, chữ "Kéo xuống cuối trang" #27AE60, dải chân trang #1F2A44. Mọi phần tử bấm được có VÙNG
   BẤM ≥ 44px: chip/nút vuông bước 1 giữ HÌNH nhỏ như ảnh mẫu (lõi .nv-*-in) nhưng khung <a> cao 44px, lề âm
   để hàng chữ vẫn thẳng với số tròn 28px. */
.nv-guide { padding: 18px 16px; }
.nv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nv-title { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #1E40AF; }
.nv-title svg { flex: none; color: #2F80ED; }
.nv-timer { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: #F0F9FF; color: #0369A1; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.nv-timer svg { flex: none; }
.nv-timer strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.nv-timer.warn { background: #FEF3C7; color: #92400E; }
.nv-timer.crit { background: #FEE2E2; color: #991B1B; }
.nv-timer.exp { background: #F3F4F6; color: #4B5563; }
.nv-hint { margin: 4px 0 14px; text-align: center; font-size: 13px; color: #6B7280; }

.nv-steps { display: flex; flex-direction: column; gap: 12px; }
.nv-step { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; }
.nv-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #2F80ED; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.nv-body { flex: 1; min-width: 0; padding-top: 3px; }
.nv-body p { margin: 0; font-size: 14px; line-height: 1.55; color: #4B5563; }
.nv-body strong { font-weight: 800; }

/* Bước 1: "Truy cập [G Google.com] [↗]" trên MỘT hàng. */
.nv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-height: 28px; margin-top: -3px; font-size: 14px; color: #4B5563; }
.nv-chip { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; text-decoration: none; }
.nv-chip-in { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; background: #fff; border: 1px solid #D1D5DB; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.35; color: #1F2937; }
.nv-chip:hover .nv-chip-in { border-color: #2F80ED; }
.nv-g { flex: none; }
.nv-goto { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -7px -8px -7px; text-decoration: none; }
.nv-goto-in { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: #2F80ED; color: #fff; }
.nv-goto:hover .nv-goto-in { background: #1D6FD8; }
.nv-chip:focus-visible .nv-chip-in, .nv-goto:focus-visible .nv-goto-in { outline: 3px solid rgba(47,128,237,.45); outline-offset: 2px; }

/* Bước 2: ô tìm kiếm Google MINH HOẠ (div, không phải input). */
.nv-gsearch { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; padding: 0 16px; background: #fff; border: 1px solid #D1D5DB; border-radius: 999px; box-shadow: 0 1px 6px rgba(32,33,36,.12); }
.nv-gkw { flex: 1; min-width: 0; padding: 9px 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: #1F2937; overflow-wrap: anywhere; }
.nv-gtools { display: flex; align-items: center; gap: 12px; flex: none; color: #6B7280; }

/* Bước 3: ảnh kết quả Google trải HẾT bề ngang thẻ (lấn sang cột số: 28px + khe 12px). */
.nv-shot { display: block; margin: 10px 0 0 -40px; width: calc(100% + 40px); }
.nv-shot img, img.nv-shot { display: block; width: 100%; height: auto; border: 1px solid #E5E7EB; border-radius: 10px; }
img.nv-shot-nc { margin-left: 0; width: 100%; }
.nv-serp { margin: 10px 0 0 -40px; padding: 12px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; }
.nv-serp-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.nv-serp-h img { flex: none; border: 1px solid #E5E7EB; border-radius: 50%; }
.nv-serp-host { font-size: 13px; font-weight: 600; line-height: 1.2; color: #202124; }
.nv-serp-url { font-size: 12px; color: #5F6368; word-break: break-all; }
.nv-serp-title { margin: 2px 0; font-size: 18px; font-weight: 500; line-height: 1.3; color: #1A0DAB; }
.nv-serp-desc { font-size: 13px; line-height: 1.5; color: #4D5156; }

/* Bước cuối: minh hoạ trang đích — kéo xuống chân trang, bấm biển THPT (ảnh nút THẬT của widget). */
.nv-screen { position: relative; height: 186px; margin: 12px 0 4px; background: #E8F0E8; border: 2px solid #D3E2D3; border-radius: 14px; overflow: hidden; }
.nv-scr-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px; background: #DCE8DC; border-bottom: 1px solid #CCDCCC; }
.nv-scr-bar i { width: 8px; height: 8px; border-radius: 50%; background: #B4C6B4; }
.nv-scr-lines { padding: 13px 15px; }
.nv-scr-lines span { display: block; height: 9px; margin: 0 0 10px; border-radius: 5px; background: #CCD6CC; }
.nv-scr-lines span:nth-child(1) { width: 66%; }
.nv-scr-lines span:nth-child(2) { width: 88%; }
.nv-scr-lines span:nth-child(3) { width: 52%; opacity: .55; }
/* Neo theo MÉP DƯỚI (bài học lentop/traffictop): neo trên là chữ bị dải chân trang cắt mất nửa. */
.nv-scroll { position: absolute; left: 15px; bottom: 76px; font-size: 13px; font-weight: 800; line-height: 1.3; color: #27AE60; }
.nv-scroll strong { display: block; font-size: 16px; }
.nv-scroll em { display: block; margin-top: 2px; font-size: 20px; font-style: normal; line-height: 1; animation: nvDown 1.1s ease-in-out infinite; }
@keyframes nvDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.nv-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px 10px; background: #1F2A44; text-align: center; line-height: 0; }
.nv-foot-l { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; }
.nv-foot-l i { display: block; width: 34px; height: 5px; border-radius: 3px; background: #3A4766; }
/* Nút thật trên trang đích nằm GIỮA chân trang (widget.js gắn in-flow, canh giữa) → minh hoạ đặt đúng chỗ đó. */
.nv-foot-badge { display: inline-block; width: auto; height: 32px; max-width: 140px; border-radius: 6px; vertical-align: middle; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); animation: nvPulse 1.6s ease-in-out infinite; }
@keyframes nvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.nv-note { margin-top: 10px !important; line-height: 1.5; }

/* Ô nhập mã + TIẾP TỤC (+ Turnstile nếu bật) + "Đổi từ khoá". */
.nv-code { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.nv-code-input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 16px; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .5px; text-align: center; color: var(--text); background: #fff; border: 1px solid #D1D5DB; border-radius: 12px; }
.nv-code-input::placeholder { font-weight: 500; letter-spacing: 0; color: #9CA3AF; }
.nv-code-input:focus { outline: none; border-color: #2F80ED; box-shadow: 0 0 0 3px rgba(47,128,237,.18); }
.nv-code .ttp-turnstile { margin: 0 !important; }
.nv-submit { min-height: 48px; font-size: 15.5px; letter-spacing: .4px; }
.nv-switch { min-height: 44px; font-size: 14px; }
.nv-code .wallet-msg { margin: 0; }

@media (max-width: 400px) {
	.nv-guide { padding: 16px 12px; }
	.nv-step { gap: 10px; padding: 12px; }
	.nv-shot, .nv-serp { margin-left: -38px; width: calc(100% + 38px); }
	.nv-chip-in { padding: 4px 10px; }
}
/* Máy 360px: tiêu đề + đồng hồ vẫn chung một hàng như ảnh mẫu. */
@media (max-width: 380px) {
	.nv-head { column-gap: 6px; }
	.nv-title { font-size: 16px; gap: 6px; }
	.nv-title svg { width: 20px; height: 20px; }
	.nv-timer { padding: 5px 8px; font-size: 12px; gap: 4px; }
}

/* Chế độ tối: thẻ/chữ theo token của theme; minh hoạ (ảnh chụp Google, trang đích) giữ màu gốc như một bức ảnh. */
[data-theme="dark"] .nv-title { color: #A9C3FF; }
[data-theme="dark"] .nv-title svg { color: #6EA8FF; }
[data-theme="dark"] .nv-timer { background: rgba(59,130,246,.18); color: #A9CCFF; }
[data-theme="dark"] .nv-timer.warn { background: rgba(245,158,11,.18); color: #FCD34D; }
[data-theme="dark"] .nv-timer.crit { background: rgba(239,68,68,.2); color: #FCA5A5; }
[data-theme="dark"] .nv-timer.exp { background: rgba(148,163,184,.16); color: #CBD5E1; }
[data-theme="dark"] .nv-hint { color: var(--muted); }
[data-theme="dark"] .nv-step { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .nv-body p, [data-theme="dark"] .nv-row { color: #D6DCEC; }
[data-theme="dark"] .nv-note { color: var(--muted) !important; }
[data-theme="dark"] .nv-chip-in { background: var(--surface); border-color: #3A4466; color: var(--text); }
[data-theme="dark"] .nv-gsearch { background: #303134; border-color: #5F6368; box-shadow: none; }
[data-theme="dark"] .nv-gkw { color: #E8EAED; }
[data-theme="dark"] .nv-gtools { color: #9AA0A6; }
[data-theme="dark"] .nv-shot img, [data-theme="dark"] img.nv-shot { border-color: var(--border); }
[data-theme="dark"] .nv-code-input { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .nv-code-input::placeholder { color: #8A94B0; }

/* ===== TRANG QUẢNG CÁO ===== */
.qc-tiers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.qc-tiers-lbl { font-size: 13px; color: #5b6b86; font-weight: 600; }
.qc-tier { font-size: 12.5px; background: #e7f8f0; color: #0a9d62; padding: 4px 10px; border-radius: 999px; font-weight: 600; }

.qc-form { display: flex; flex-direction: column; gap: 12px; }
.qc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: #0f1e3d; }
.qc-form input, .qc-form select {
	font: inherit; padding: 11px 13px; border: 1px solid #d7e0f0; border-radius: 11px;
	background: #fff; font-weight: 400;
}
.qc-form input:focus, .qc-form select:focus { outline: none; border-color: #2563eb; }
.qc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qc-estimate { font-size: 15px; color: #0f1e3d; padding: 4px 0; }
.qc-estimate b { color: #2563eb; }

.qc-camps { display: flex; flex-direction: column; gap: 12px; }
.qc-camp { border: 1px solid #e3ecfb; border-radius: 14px; padding: 14px; background: #fbfcff; }
.qc-camp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.qc-badge { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.qc-camp-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #5b6b86; margin-bottom: 10px; }
.qc-bar { height: 8px; border-radius: 999px; background: #e9f1ff; overflow: hidden; margin-bottom: 5px; }
.qc-bar span { display: block; height: 100%; background: linear-gradient(90deg,#1d4ed8,#3b82f6); }
.qc-camp-progress small { color: #5b6b86; font-size: 12.5px; }
.qc-reject { display: block; color: #b32d2e; font-size: 12.5px; margin-top: 6px; }

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