/* MrboAds — lớp phủ "kỹ thuật": lưới nền, chữ mono cho nhãn/số, viền mảnh, bo góc nhỏ.
   Nạp sau style nội trang nên các khai báo ở đây đè lên. */

:root{
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --vien:#e3ddd0;
  --luoi:rgba(21,22,26,.055);
  --luoi-toi:rgba(255,255,255,.055);
  --bong:0 1px 0 rgba(21,22,26,.03);
  --bong2:0 1px 0 rgba(21,22,26,.04), 0 10px 24px rgba(21,22,26,.06);
  --goc:4px;
}

/* ── Nền lưới kỹ thuật ─────────────────────────────── */
body{
  background-image:
    linear-gradient(var(--luoi) 1px,transparent 1px),
    linear-gradient(90deg,var(--luoi) 1px,transparent 1px);
  background-size:72px 72px;
  background-position:-1px -1px;
  /* KHÔNG dùng background-attachment:fixed — bắt vẽ lại nền mỗi khung hình khi cuộn */
}
section,main{position:relative}

/* ── Mono cho nhãn, số, siêu dữ liệu ───────────────── */
.nhan,.so-n,.so-t,.he-so,.lt-tuan,.the-tag span,.loai,.ngay,.meta,.vet,
.tool-di,.deal-proj,.kenh span,.tieu small,.tacgia span{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* Nhãn section: dạng [ TAG ] thay vì viên thuốc bo tròn */
.nhan{
  background:transparent;border:1px solid var(--vang);border-radius:3px;
  padding:4px 9px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
}
.nhan::before{content:'[ ';opacity:.5}
.nhan::after{content:' ]';opacity:.5}
.toi .nhan{border-color:rgba(245,137,31,.45);background:transparent}

/* ── Bo góc & viền: vuông vức, mảnh ────────────────── */
.the,.he-o,.tool,.form-hop,.hop,.logos span,.deal-card,.ico,.nut,
.form-hop input,.form-hop textarea,.form-hop select,.muc,.ct{
  border-radius:var(--goc)!important;
}
.the-tag span,.logo i{border-radius:3px!important}
.the,.he-o,.tool,.hop{box-shadow:var(--bong)}
.the:hover,.tool:hover{transform:none;box-shadow:var(--bong2);border-color:var(--vang2)}

/* ── Nút: phẳng, nhãn mono ─────────────────────────── */
.nut{font-family:var(--mono);font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.nut-chinh{background:var(--vang);box-shadow:none;border-color:var(--vang)}
.nut-chinh:hover{transform:none;background:#996c0d;box-shadow:none}
.nut-phu:hover{transform:none;border-color:var(--vang)}

/* ── Header: viền dưới rõ, logo kiểu con trỏ ───────── */
header{background:rgba(251,250,247,.9);border-bottom:1px solid var(--vien)}
.logo{font-family:var(--mono);font-weight:700;letter-spacing:-.03em}
.logo i{background:var(--chu);color:var(--vang2);font-family:var(--mono)}
.hd nav a{font-size:14.5px}

/* ── Hero: lưới xanh mảnh + chỉ dấu ────────────────── */
.hero-bg::before{opacity:.55}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--luoi) 1px,transparent 1px),
    linear-gradient(90deg,var(--luoi) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%);
}
.tin span::before{content:'▸';color:var(--vang);font-weight:400}

/* ── Dải số: như bảng đồng hồ đo ───────────────────── */
.so{background:#fff}
.so-n{letter-spacing:-.04em}
.so-t{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* ── Lộ trình: đánh số mono, mốc vuông ─────────────── */
.lt-tuan{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.he-so{font-size:11.5px;letter-spacing:.14em}

/* ── Khối tối: lưới sáng mảnh ──────────────────────── */
.toi{
  background-image:
    linear-gradient(var(--luoi-toi) 1px,transparent 1px),
    linear-gradient(90deg,var(--luoi-toi) 1px,transparent 1px);
  background-size:72px 72px;
}
.deal-card{border-radius:var(--goc)}

/* ── Nội dung bài viết: code, trích dẫn, mục lục ───── */
article code,main code,p code,li code{
  font-family:var(--mono);font-size:.9em;background:var(--nen2);
  border:1px solid var(--vien);border-radius:3px;padding:1px 5px;
}
pre{font-family:var(--mono);background:var(--toi);color:#e6e3dc;border-radius:var(--goc);
  padding:16px 18px;overflow:auto;font-size:13.5px;line-height:1.6}
pre code{background:none;border:none;padding:0;color:inherit}
.vet{font-size:12.5px;letter-spacing:-.01em}
.muc{border-left:2px solid var(--vang)}

/* ── Hỏi đáp: dấu +/- vuông ────────────────────────── */
.hoi summary::after{font-family:var(--mono);font-size:20px;top:19px}

/* ── Chân trang ────────────────────────────────────── */
.ft{font-family:var(--mono);font-size:13px;letter-spacing:-.01em}

@media(max-width:620px){
  body{background-size:48px 48px}
  .toi{background-size:48px 48px}
}

/* ═══ MOBILE ═══════════════════════════════════════════
   Vấn đề gốc: trang chủ ẩn sạch menu dưới 900px (.anmb), trang con ẩn một
   phần (.an) → điện thoại gần như không điều hướng được. Dưới đây trả lại
   menu dạng dải cuộn ngang trên một hàng riêng, và bỏ nút CTA trong header
   vì đã có thanh CTA dính đáy. */
@media(max-width:900px){
  .anmb,.an{display:inline-flex!important}

  .hd{flex-wrap:wrap;min-height:0;padding-top:9px;gap:10px}
  .hd > nav > .nut{display:none}              /* trùng với thanh đáy */

  .hd nav{
    width:100%;margin-left:0;gap:18px;
    padding:7px 20px 8px;margin-inline:-20px;
    border-top:1px solid var(--vien);
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .hd nav::-webkit-scrollbar{display:none}
  .hd nav a{white-space:nowrap;font-size:13.5px;font-family:var(--mono);font-weight:500}
  .hd nav a:last-child{padding-right:14px}

  /* mono rộng hơn chữ thường ~15%: hạ cỡ để nhãn và nút không vỡ dòng */
  .nut{font-size:13.5px;padding:13px 18px}
  .nhan{font-size:10px;letter-spacing:.03em;padding:4px 7px;line-height:1.5}
  .so-t{font-size:10.5px;letter-spacing:.04em}
  .vet{font-size:11.5px}
  .ft{font-size:12px}

  /* chừa chỗ cho bong bóng chat ở góc phải, không để nó đè lên nút */
  .thanh{padding-right:70px}
}

@media(max-width:380px){
  .hd nav{gap:14px}
  .hd nav a{font-size:12.5px}
  .nhan{font-size:9.2px}
  .nut{font-size:12.5px;padding:12px 14px}
}

/* ═══ HIỆU NĂNG CUỘN ═══════════════════════════════════
   Mấy thứ dưới đây là nguyên nhân kinh điển gây giật khi cuộn trên điện thoại:
   mỗi khung hình trình duyệt phải đọc lại và vẽ lại cả vùng màn hình. */
@media(max-width:900px){
  /* backdrop-filter trên header dính: bắt làm mờ lại nền mỗi khung hình.
     Đổi sang nền đục, nhìn gần như y hệt mà không tốn gì. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fbfaf7}

  /* Lưới mờ chồng thêm ở hero + mask radial: bỏ trên mobile, nền lưới chính
     của body đã đủ. */
  .hero-bg::after{display:none}

  /* Khe sáng chạy vô tận dưới dải số: chạy cả khi không ai nhìn. */
  .so::after{display:none}

  /* Băng ảnh giao dịch: thay vì tự chạy vô tận (giữ một lớp hợp thành rất
     rộng sống suốt phiên), cho người dùng tự vuốt — hợp thói quen mobile hơn. */
  .bang{overflow-x:auto;mask-image:none;-webkit-mask-image:none;
    scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
  .bang::-webkit-scrollbar{display:none}
  .bang-track{animation:none;padding-right:14px}
  .deal-card{scroll-snap-align:start}
}

/* ═══ MENU THỐNG NHẤT (15/10/2026) ═════════════════════
   Mọi trang dùng chung 5 mục. Link ngoài tách khỏi nhóm nội bộ bằng đường kẻ
   và dấu mũi tên, để bấm vào là biết sẽ rời khỏi website. */
.hd nav{display:flex;align-items:center;gap:22px;margin-left:auto}

.hd nav .ngoai{position:relative;padding-left:22px;margin-left:2px}
.hd nav .ngoai::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--vien);
}
.hd nav .ngoai::after{content:'↗';font-size:11px;margin-left:4px;opacity:.55}

/* Nút Nhận tư vấn: trước đây chỉ trang chủ có, nay mọi trang */
.hd nav .nut-tv{min-height:40px;padding:9px 18px;font-size:13.5px;margin-left:4px}

@media(max-width:900px){
  /* Trên dải cuộn ngang, đường kẻ dọc gây rối hơn là giúp — bỏ, giữ mũi tên */
  .hd nav .ngoai{padding-left:0}
  .hd nav .ngoai::before{display:none}
  .hd nav .nut-tv{display:none}   /* đã có thanh CTA dính đáy */
}

/* Khối công cụ bên ngoài trên trang /cong-cu/ — tách khỏi nhóm công cụ tự làm */
.muc-ngoai{margin-top:46px;padding-top:26px;border-top:1px solid var(--vien)}
.dan-nho{font-size:15px;color:var(--chu3);margin:-4px 0 18px}
.bai-ngoai{display:block;background:var(--nen2)}
.bai-ngoai .nhan-ngoai{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--chu3);border:1px solid var(--vien);
  border-radius:3px;padding:2px 6px;margin-left:7px;
}
.bai-ngoai h2::after{content:' ↗';font-size:.7em;opacity:.5}
.bai-ngoai .lien{color:var(--vang);font-weight:600}
.sau-the{font-size:14px;color:var(--chu3);margin-top:10px}
.sau-the a{color:var(--vang);font-weight:600}