/* =====================================================================
   THẦY PHONG VŨ – TRANG TỔNG HỢP (2026-10-21)
   1) Menu chính desktop: gọn, một hàng, menu đa cột   2) Gợi ý công cụ (chip, thẻ giữa bài, bước tiếp theo, sidebar, thẻ nổi)
   3) Trang chủ: hero, nhu cầu, lộ trình, bài mới
   Biến màu --pg-* lấy từ tpv-site.css. Tăng TPV_HUB_VER (hub.php) khi sửa.
   ===================================================================== */
:root { --tpv-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- Icon tròn dùng chung ---------- */
.tpv-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--pg-gold-2); background: radial-gradient(circle at 35% 30%, rgba(124,58,237,.5), rgba(124,58,237,.12) 72%); border: 1px solid var(--pg-line); }
.tpv-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tpv-ic svg .f { fill: currentColor; stroke: none; }
.tpv-ic--lg { width: 52px; height: 52px; } .tpv-ic--lg svg { width: 27px; height: 27px; }
[hidden] { display: none !important; }

/* =====================================================================
   1) MENU CHÍNH – DESKTOP (≥ 850px)
   Một hàng, chữ sans 14.5px, không viết hoa; bảng thả đa cột (.tpv-mega = rộng bằng khung header, .tpv-drop = theo nội dung).
   Cấu trúc menu trong wp-admin: mục cấp 1 (đặt class tpv-mega / tpv-drop [tpv-drop--r]) → cấp 2 là TIÊU ĐỀ CỘT (url #) → cấp 3 là liên kết.
   ===================================================================== */
@media (min-width: 850px) {
  #masthead .header-inner { position: relative; }
  #masthead .header-nav-main.nav { position: static; flex-wrap: nowrap; white-space: nowrap; align-items: center; }
  #masthead .header-nav-main.nav > li { margin: 0 1px; }
  #masthead .header-nav-main.nav > li > a.nav-top-link,
  #masthead .header-nav-main.nav > li > a {
    font-family: var(--tpv-sans); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2;
    padding: 12px 10px; border-radius: 8px; transition: background .2s, color .2s; flex-wrap: nowrap; white-space: nowrap; }
  #masthead .header-nav-main.nav > li:hover > a, #masthead .header-nav-main.nav > li.current-dropdown > a { background: rgba(232,199,125,.12); color: #fff !important; }
  #masthead .header-nav-main.nav > li > a .icon-angle-down { font-size: 14px; margin-left: 2px; opacity: .65; }
  #masthead .header-nav-main.nav > li.current-menu-item > a::after, #masthead .header-nav-main.nav > li.active > a::after { display: none; }
  #masthead .header-nav-main.nav > li.current-menu-ancestor > a, #masthead .header-nav-main.nav > li.current-menu-item > a { color: var(--pg-gold) !important; }
  #masthead .header-nav-main.nav > li.header-search > a { padding: 12px 8px; }
  #logo { max-width: 290px; }
  #logo img { max-height: 58px !important; }

  /* Bảng thả chung */
  #masthead .nav-dropdown { font-family: var(--tpv-sans); padding: 14px 8px 12px; min-width: 250px; border-radius: 14px; margin-top: 0; }
  #masthead .nav-dropdown li > a { font-family: var(--tpv-sans); font-size: 14px; font-weight: 500; padding: 8px 12px; border: 0 !important; margin: 0; border-radius: 8px; line-height: 1.35; letter-spacing: 0; }
  #masthead .nav-dropdown li > a:hover { background: rgba(232,199,125,.1); color: var(--pg-gold-2) !important; }
  #masthead .nav-dropdown > li.nav-dropdown-col { display: block; width: auto; min-width: 0; border: 0; white-space: normal; }
  #masthead .nav-dropdown .nav-column { padding: 0; }
  #masthead .nav-dropdown > li.nav-dropdown-col > a { font-family: var(--tpv-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-gold) !important;
    cursor: default; padding: 4px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--pg-line-soft) !important; border-radius: 0; background: none !important; pointer-events: none; }
  #masthead .nav-dropdown .menu-item-has-children { margin-top: 0; }

  /* Bảng thả theo nội dung (đặt ngay dưới mục cha) */
  #masthead li.tpv-drop > .nav-dropdown { display: grid; grid-template-columns: repeat(var(--tpv-cols, 1), minmax(190px, auto)); gap: 4px 18px; width: max-content; max-width: calc(100vw - 32px); }
  #masthead li.tpv-drop > .nav-dropdown > li:not(.nav-dropdown-col) { grid-column: 1 / -1; }
  #masthead li.tpv-drop--2 { --tpv-cols: 2; } #masthead li.tpv-drop--3 { --tpv-cols: 3; }
  #masthead li.tpv-drop--r > .nav-dropdown { left: auto; right: -12px; }
  #masthead li.tpv-drop--r:hover > .nav-dropdown, #masthead li.tpv-drop--r.current-dropdown > .nav-dropdown, #masthead li.tpv-drop--r:focus-within > .nav-dropdown { left: auto !important; right: -12px; }

  /* Bảng thả toàn khung (mega) – canh theo .header-inner */
  #masthead li.tpv-mega { position: static; }
  #masthead li.tpv-mega > .nav-dropdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 22px; padding: 24px 26px 18px; width: auto; max-width: none; top: 100%; margin-top: -4px; }
  #masthead li.tpv-mega:hover > .nav-dropdown, #masthead li.tpv-mega.current-dropdown > .nav-dropdown, #masthead li.tpv-mega:focus-within > .nav-dropdown { left: 0 !important; right: 0; }
  #masthead li.tpv-mega > .nav-dropdown > li.tpv-mega-all { grid-column: 1 / -1; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--pg-line-soft); text-align: right; }
  #masthead li.tpv-mega > .nav-dropdown > li.tpv-mega-all > a { display: inline-block; font-weight: 700; color: var(--pg-gold) !important; }
  /* Cầu nối vô hình để chuột đi từ mục cha xuống bảng không bị đóng */
  #masthead li.has-dropdown > .nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
  /* Mở bằng bàn phím */
  #masthead li.has-dropdown:focus-within > .nav-dropdown { left: -15px; max-height: inherit; opacity: 1; visibility: visible; }
  #masthead li.tpv-drop:focus-within > .nav-dropdown { left: -15px; }
  /* Ô lưới 2 cột cho danh sách ngắn (số chủ đạo 1–22) */
  #masthead .nav-dropdown li.tpv-cols2 > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
  /* Gạch dưới mục "Công cụ" nổi bật */
  #masthead .header-nav-main.nav > li.tpv-hot > a { color: #2a1d05 !important; background: var(--pg-gold-btn); }
  #masthead .header-nav-main.nav > li.tpv-hot:hover > a, #masthead .header-nav-main.nav > li.tpv-hot.current-dropdown > a { background: var(--pg-gold-btn); color: #000 !important; filter: brightness(1.06); }
  #masthead .header-nav-main.nav > li.tpv-hot > a .icon-angle-down { color: #2a1d05 !important; }
}
@media (min-width: 850px) and (max-width: 1180px) {
  #logo { max-width: 230px; } #logo img { max-height: 50px !important; }
  #masthead .header-nav-main.nav > li > a.nav-top-link, #masthead .header-nav-main.nav > li > a { font-size: 13.5px; padding: 11px 7px; }
}

/* =====================================================================
   2) GỢI Ý CÔNG CỤ
   ===================================================================== */
/* Chip "Công cụ liên quan" đầu bài */
.tpv-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin: 0 0 22px; padding: 10px 14px; border: 1px solid var(--pg-line-soft); border-radius: 14px; background: rgba(255,255,255,.03); }
.tpv-pt__lb { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-muted); margin-right: 4px; }
.tpv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 5px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--pg-gold-2); background: rgba(232,199,125,.08); border: 1px solid var(--pg-line); transition: background .2s, color .2s; }
.tpv-chip .tpv-ic { width: 26px; height: 26px; } .tpv-chip .tpv-ic svg { width: 14px; height: 14px; }
.tpv-chip:hover { background: var(--pg-gold); color: #231800; } .tpv-chip:hover .tpv-ic { color: #231800; }
.tpv-chip.is-used::after { content: "✓"; font-size: 11px; opacity: .75; }

/* Thẻ chèn giữa bài */
.tpv-inl { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 30px 0; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--pg-line); background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(232,199,125,.1)); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.tpv-inl__b { min-width: 0; } .tpv-inl__b b { display: block; font-size: 17px; line-height: 1.3; color: var(--pg-gold-2); margin-bottom: 3px; font-family: var(--pg-serif); }
.tpv-inl__b span { display: block; font-size: 14px; line-height: 1.55; color: var(--pg-muted); }
.tpv-inl__go, .tpv-ncard__go, .tpv-float__go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700;
  text-decoration: none; color: #2a1d05 !important; background: var(--pg-gold-btn); transition: filter .2s, transform .2s; }
.tpv-inl__go:hover, .tpv-ncard:hover .tpv-ncard__go, .tpv-float__go:hover { filter: brightness(1.08); }
.tpv-inl__go i, .tpv-ncard__go i { font-style: normal; }

/* Khối "Bước tiếp theo" (cuối bài, cuối kết quả tra cứu, trang chuyên mục) */
.tpv-next { margin: 40px 0 28px; padding: 24px 22px 20px; border-radius: 18px; border: 1px solid var(--pg-line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(124,58,237,.3), transparent 60%), linear-gradient(160deg, #1b1048, #0d0724); box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.tpv-next__head { margin-bottom: 16px; }
.tpv-next__kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-violet); margin-bottom: 6px; }
#main .tpv-next__t, .tpv-next__t { margin: 0 0 6px; font-size: 24px; line-height: 1.25; background: none !important; -webkit-text-fill-color: var(--pg-gold-2); color: var(--pg-gold-2) !important; filter: none; }
.tpv-next__sub { margin: 0; font-size: 14px; color: var(--pg-muted); line-height: 1.6; }
.tpv-next__prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--pg-muted); }
.tpv-next__bar { flex: 0 1 200px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.tpv-next__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--pg-gold-btn); transition: width .6s ease; }
.tpv-next__list { display: grid; gap: 10px; }
.tpv-next__all { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
.tpv-next__all i { font-style: normal; }
.tpv-ncard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--pg-line-soft); background: rgba(255,255,255,.04); transition: border-color .2s, background .2s, transform .2s; }
.tpv-ncard:hover { border-color: var(--pg-line); background: rgba(232,199,125,.08); transform: translateY(-2px); }
.tpv-ncard .tpv-ic { width: 44px; height: 44px; } .tpv-ncard .tpv-ic svg { width: 22px; height: 22px; }
.tpv-ncard__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tpv-ncard__b b { font-size: 16px; line-height: 1.3; color: var(--pg-gold-2); }
.tpv-ncard__b span { font-size: 13.5px; line-height: 1.5; color: var(--pg-muted); }
.tpv-ncard.is-used { opacity: .72; } .tpv-ncard.is-used .tpv-ncard__b b::after { content: " ✓ đã dùng"; font-size: 11.5px; font-weight: 500; color: var(--pg-violet); }
.tpv-ncard[hidden] { display: none !important; }
/* Bản rộng (trang chủ, trang chuyên mục): 3 cột, thẻ dọc */
.tpv-chen-footer .tpv-next__list, .tpv-personal__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tpv-chen-footer .tpv-ncard, .tpv-personal .tpv-ncard { grid-template-columns: auto 1fr; grid-template-areas: "ic b" "go go"; align-content: start; }
.tpv-chen-footer .tpv-ncard .tpv-ic, .tpv-personal .tpv-ncard .tpv-ic { grid-area: ic; }
.tpv-chen-footer .tpv-ncard__b, .tpv-personal .tpv-ncard__b { grid-area: b; }
.tpv-chen-footer .tpv-ncard__go, .tpv-personal .tpv-ncard__go { grid-area: go; justify-self: start; }
.tpv-chen-footer { margin-top: 10px; }

/* Widget sidebar bài viết */
.tpv-sb { margin: 0 0 22px; padding: 16px 14px 12px; border-radius: 16px; border: 1px solid var(--pg-line); background: linear-gradient(160deg, rgba(124,58,237,.3), rgba(13,7,36,.9)); }
.tpv-sb__k { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #2a1d05; background: var(--pg-gold-btn); padding: 2px 9px; border-radius: 99px; margin-bottom: 8px; }
#main .tpv-sb__t, .tpv-sb__t { margin: 0 0 10px; font-size: 18px; line-height: 1.25; background: none !important; -webkit-text-fill-color: var(--pg-gold-2); color: var(--pg-gold-2) !important; filter: none; }
.tpv-sbtool { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; text-decoration: none; transition: background .2s; }
.tpv-sbtool:hover { background: rgba(232,199,125,.1); }
.tpv-sbtool__b { display: flex; flex-direction: column; min-width: 0; } .tpv-sbtool__b b { font-size: 14px; line-height: 1.3; color: var(--pg-gold-2); } .tpv-sbtool__b span { font-size: 12.5px; color: var(--pg-violet-2); }
.tpv-sbtool.is-used .tpv-sbtool__b span::after { content: " · đã dùng ✓"; color: var(--pg-muted); }
.tpv-sb__all { display: block; margin-top: 6px; padding: 6px; font-size: 13px; font-weight: 600; text-align: right; text-decoration: none; }

/* Thẻ nổi (desktop) + thanh tiến độ đọc */
.tpv-float { position: fixed; left: 18px; bottom: 18px; z-index: 990; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 360px; max-width: calc(100vw - 36px);
  padding: 12px 14px 12px 12px; border-radius: 16px; border: 1px solid var(--pg-line); background: rgba(13,7,36,.97); box-shadow: 0 16px 44px rgba(0,0,0,.6); animation: tpv-float-in .4s ease both; }
.tpv-float .tpv-ic { width: 42px; height: 42px; }
.tpv-float__b { min-width: 0; display: flex; flex-direction: column; } .tpv-float__b b { font-size: 14.5px; line-height: 1.3; color: var(--pg-gold-2); } .tpv-float__b span { font-size: 12px; color: var(--pg-muted); line-height: 1.4; }
.tpv-float__go { padding: 8px 14px; font-size: 13px; }
.tpv-float__x { position: absolute; right: 6px; top: -12px; width: 24px; height: 24px; padding: 0; line-height: 1; border-radius: 50%; font-size: 16px; cursor: pointer; border: 1px solid var(--pg-line); background: #1b1048; color: var(--pg-gold-2); }
@keyframes tpv-float-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
html.tpv-lite .tpv-float { animation: none; }
.tpv-rbar { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; }
.tpv-rbar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--pg-gold-btn); box-shadow: 0 0 10px rgba(232,199,125,.6); }
@media (max-width: 1099px) { .tpv-float { display: none !important; } }
@media (max-width: 599px) {
  .tpv-inl { grid-template-columns: auto 1fr; } .tpv-inl__go { grid-column: 1 / -1; justify-content: center; }
  .tpv-ncard { grid-template-columns: auto 1fr; } .tpv-ncard__go { grid-column: 1 / -1; justify-content: center; }
  .tpv-next { padding: 20px 14px 16px; } #main .tpv-next__t { font-size: 21px; }
}
@media (max-width: 849px) { .tpv-chen-footer .tpv-next__list, .tpv-personal__list { grid-template-columns: 1fr; } }

/* =====================================================================
   3) TRANG CHỦ TỔNG HỢP
   ===================================================================== */
.tpv-sec { text-align: center; max-width: 720px; margin: 64px auto 26px; }
.tpv-sec__k { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pg-violet); margin-bottom: 10px; }
#main .tpv-sec h2 { margin: 0 0 10px; font-size: 34px; line-height: 1.2; }
.tpv-sec p { margin: 0; color: var(--pg-muted); font-size: 16px; line-height: 1.65; }
#cong-cu-tra-cuu, #theo-nhu-cau { scroll-margin-top: 90px; }

/* Hero */
.tpv-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; max-width: 1040px; margin: 10px auto 0; padding: 30px 0 6px; }
.tpv-hero__k { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pg-gold); margin-bottom: 14px; }
.tpv-hero__k::before { content: ""; width: 34px; height: 1px; background: var(--pg-gold); }
#main .tpv-hero h1 { margin: 0 0 14px; font-size: 46px; line-height: 1.12; color: var(--pg-gold-2); }
.tpv-hero__lead { margin: 0 0 12px; font-size: 19px; line-height: 1.6; color: var(--pg-text); }
.tpv-hero__lead strong { color: var(--pg-gold-2); }
.tpv-hero__p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--pg-muted); max-width: 600px; }
.tpv-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.tpv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-size: 15.5px; font-weight: 700; text-decoration: none; transition: filter .2s, background .2s, transform .2s; }
.tpv-btn--gold { color: #2a1d05 !important; background: var(--pg-gold-btn); box-shadow: 0 10px 26px rgba(232,199,125,.22); }
.tpv-btn--gold:hover { filter: brightness(1.08); transform: translateY(-2px); }
.tpv-btn--line { color: var(--pg-gold-2) !important; border: 1px solid var(--pg-line); background: rgba(255,255,255,.04); }
.tpv-btn--line:hover { background: rgba(232,199,125,.12); }
.tpv-hero__pic { position: relative; }
.tpv-hero__pic img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 22px 50px rgba(0,0,0,.55); border: 1px solid var(--pg-line); }
.tpv-hero__pic::before { content: ""; position: absolute; inset: -12px -12px 12px 12px; border: 1px solid var(--pg-line); border-radius: 26px; z-index: -1; }
.tpv-hero .tpv-stats, #main .tpv-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.tpv-stats li { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; }
#main .tpv-stats { margin: 0 !important; padding: 0 !important; } .tpv-stats b { font-size: 26px; line-height: 1.1; font-family: var(--pg-serif); color: var(--pg-gold); } .tpv-stats span { font-size: 13px; color: var(--pg-muted); }

/* Dải cá nhân hoá */
.tpv-personal { max-width: 1040px; margin: 34px auto 0; padding: 22px 24px 22px; border-radius: 18px; border: 1px solid var(--pg-line);
  background: radial-gradient(120% 160% at 100% 0%, rgba(232,199,125,.14), transparent 55%), linear-gradient(160deg, #22134f, #120a2e); }
.tpv-personal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 16px; }
#main .tpv-personal__t { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.tpv-personal__sub { margin: 0; font-size: 14.5px; color: var(--pg-muted); }
.tpv-personal .tpv-next__prog { margin-top: 0; }

/* Nhu cầu */
.tpv-intents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
.tpv-intent { padding: 22px 20px 16px; border-radius: 16px; border: 1px solid var(--pg-line-soft); background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  transition: border-color .25s, transform .25s; }
.tpv-intent:hover { border-color: var(--pg-line); transform: translateY(-3px); }
#main .tpv-intent__t { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.tpv-intent > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--pg-muted); }
.tpv-intent__l { display: flex; flex-direction: column; gap: 6px; }
.tpv-intent__l a { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--pg-gold-2);
  background: rgba(255,255,255,.04); border: 1px solid transparent; transition: background .2s, border-color .2s; }
.tpv-intent__l a > span:nth-child(2) { flex: 1; }
.tpv-intent__l a i { font-style: normal; opacity: .6; transition: transform .2s, opacity .2s; }
.tpv-intent__l a:hover { background: rgba(232,199,125,.1); border-color: var(--pg-line); } .tpv-intent__l a:hover i { opacity: 1; transform: translateX(3px); }
.tpv-intent__l a.is-used::after { content: "✓"; font-size: 12px; color: var(--pg-violet); order: 3; }
.tpv-intent--ban-than { border-top: 3px solid #b48cff; } .tpv-intent--tinh-yeu { border-top: 3px solid #f08fb0; } .tpv-intent--su-nghiep { border-top: 3px solid #e8c77d; }
.tpv-intent--nha-xe { border-top: 3px solid #e0805a; } .tpv-intent--hom-nay { border-top: 3px solid #7fb4ff; } .tpv-intent--con-cai { border-top: 3px solid #7fd6b0; }

/* Đã dùng (lưới thẻ lớn) */
.tpv-tool.is-used .tpv-tool__cta::before { content: "✓ Đã dùng · "; opacity: .8; font-weight: 500; }

/* Lộ trình */
.tpv-jrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
.tpv-jr { padding: 22px 20px 18px; border-radius: 16px; border: 1px solid var(--pg-line); background: linear-gradient(165deg, #1b1048, #0d0724); }
#main .tpv-jr__t { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.tpv-jr > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--pg-muted); }
.tpv-jr ol { list-style: none; margin: 0; padding: 0; position: relative; }
.tpv-jr ol::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--pg-line); }
.tpv-jr li { margin: 0 0 8px; position: relative; }
.tpv-jr li a { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 0; text-decoration: none; border-radius: 12px; }
.tpv-jr__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--pg-gold-2);
  background: #22134f; border: 1px solid var(--pg-line); position: relative; z-index: 1; }
.tpv-jr__s { display: flex; flex-direction: column; } .tpv-jr__s b { font-size: 15px; line-height: 1.3; color: var(--pg-gold-2); } .tpv-jr__s span { font-size: 12.5px; color: var(--pg-violet-2); }
.tpv-jr li a:hover .tpv-jr__n { background: var(--pg-gold); color: #231800; }
.tpv-jr li.is-used .tpv-jr__n { background: var(--pg-purple); color: #fff; border-color: transparent; } .tpv-jr li.is-used .tpv-jr__n::after { content: "✓"; position: absolute; font-size: 15px; background: var(--pg-purple); width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tpv-jr li.is-next .tpv-jr__n { background: var(--pg-gold-btn); color: #231800; box-shadow: 0 0 0 4px rgba(232,199,125,.2); }
.tpv-jr__p { margin-top: 8px; font-size: 12.5px; color: var(--pg-muted); }

/* Bài mới + chủ đề */
.tpv-blog { max-width: 1040px; margin: 0 auto; }
.tpv-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tpv-pcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; text-decoration: none; border: 1px solid var(--pg-line-soft); background: rgba(255,255,255,.04); transition: transform .25s, border-color .25s; }
.tpv-pcard:hover { transform: translateY(-4px); border-color: var(--pg-line); }
.tpv-pcard__i { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #22134f, #0d0724); overflow: hidden; }
.tpv-pcard__i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpv-pcard__b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.tpv-pcard__b em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-violet); }
.tpv-pcard__b b { font-size: 16.5px; line-height: 1.4; color: var(--pg-gold-2); font-family: var(--pg-serif); }
.tpv-pcard__d { margin-top: auto; font-size: 12.5px; color: var(--pg-muted); }
.tpv-blog__topics { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }
.tpv-blog__topics > span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); margin-right: 6px; }
.tpv-blog__topics a { padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--pg-gold-2); border: 1px solid var(--pg-line); background: rgba(255,255,255,.04); }
.tpv-blog__topics a:hover { background: var(--pg-gold); color: #231800; } .tpv-blog__topics em { font-style: normal; opacity: .6; font-size: 12px; margin-left: 2px; }

@media (max-width: 849px) {
  .tpv-hero { grid-template-columns: 1fr; gap: 26px; padding-top: 14px; } .tpv-hero__pic { order: -1; max-width: 200px; } #main .tpv-hero h1 { font-size: 34px; } .tpv-hero__lead { font-size: 17px; }
  .tpv-intents, .tpv-jrs, .tpv-blog__grid { grid-template-columns: 1fr; gap: 14px; } .tpv-sec { margin-top: 48px; } #main .tpv-sec h2 { font-size: 27px; }
  .tpv-personal { padding: 18px 16px; }
}
@media (min-width: 850px) and (max-width: 1099px) { .tpv-intents, .tpv-jrs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpv-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chỉnh nhỏ (1.0.6) */
.tpv-next__txt { white-space: nowrap; }
.tpv-personal .tpv-ncard__b span, .tpv-chen-footer .tpv-ncard__b span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 850px) { #logo { flex: 0 0 auto; } }
@media (min-width: 850px) and (max-width: 1023px) {
  #logo { max-width: 175px; } #logo img { max-height: 40px !important; }
  #masthead .header-nav-main.nav > li > a.nav-top-link, #masthead .header-nav-main.nav > li > a { font-size: 12.5px; padding: 10px 5px; }
  #masthead .header-nav-main.nav > li > a .icon-angle-down { display: none; }
}
@media (max-width: 849px) { .tpv-hero__pic { max-width: 150px; } }

/* =====================================================================
   NÚT ĐỔI GIAO DIỆN SÁNG / TỐI (theme-mode.php) – cố định góc phải dưới, cả desktop lẫn mobile
   ===================================================================== */
.tpv-tm { position: fixed; right: 14px; bottom: 84px; z-index: 99990; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 12px; margin: 0;
  border-radius: 999px; cursor: pointer; font: 600 14px/1 var(--tpv-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: #f8e6b4; background: rgba(13,7,36,.94); border: 1.5px solid rgba(232,199,125,.75); box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 0 4px rgba(232,199,125,.12);
  transition: transform .2s, box-shadow .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.tpv-tm:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 5px rgba(232,199,125,.2); }
.tpv-tm:focus-visible { outline: 3px solid #b48cff; outline-offset: 3px; }
.tpv-tm__ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #f8e6b4, #e8c77d 55%, #b8932f); color: #2a1d05; }
.tpv-tm__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tpv-tm__moon { display: none; }
.tpv-tm__to-dark { display: none; }
html.tpv-light .tpv-tm { color: #3a2a00; background: rgba(255,252,244,.97); border-color: #8a6300; box-shadow: 0 8px 24px rgba(60,40,10,.25), 0 0 0 4px rgba(138,99,0,.14); }
html.tpv-light .tpv-tm__ic { background: linear-gradient(135deg, #3b2a7a, #5b2fc0); color: #fff; }
html.tpv-light .tpv-tm__sun, html.tpv-light .tpv-tm__to-light { display: none; }
html.tpv-light .tpv-tm__moon { display: block; } html.tpv-light .tpv-tm__to-dark { display: inline; }
@media (max-width: 849px) {
  .tpv-tm { right: 12px; bottom: 76px; height: 44px; padding: 0 14px 0 10px; font-size: 13.5px; }
}
@media (max-width: 849px) { .tpv-tm--c { padding: 0; width: 46px; justify-content: center; } .tpv-tm--c .tpv-tm__tx { display: none; } .tpv-tm--c .tpv-tm__ic { width: 30px; height: 30px; } }
@media print { .tpv-tm { display: none; } }

/* Dải dự đoán XSMB mới nhất */
.tpv-xsl { max-width: 1040px; margin: 24px auto; padding: 16px 18px; border: 1px solid var(--pg-line-soft, rgba(232,199,125,.25)); border-radius: 16px; background: rgba(255,255,255,.04); }
.tpv-xsl__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.tpv-xsl__h h3 { margin: 0; font-size: 16px; }
.tpv-xsl__h a { font-size: 13px; white-space: nowrap; }
.tpv-xsl ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.tpv-xsl li { margin: 0; }
.tpv-xsl li a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; text-decoration: none; border-bottom: 1px dashed var(--pg-line-soft, rgba(232,199,125,.2)); }
.tpv-xsl__d { flex: none; font-size: 12.5px; opacity: .7; }
.tpv-xsl li b { font-weight: 500; font-size: 14.5px; line-height: 1.35; }
.tpv-xsl em { flex: none; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--pg-gold-btn, #e8c77d); color: #231800; }
.tpv-xsl--home { margin-top: 28px; }
@media (max-width: 640px) { .tpv-xsl ul { grid-template-columns: 1fr; } }
.tpv-xsl__db { flex: none; margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .85; }
/* Chip công cụ đầu bài chỉ cho điện thoại/máy tính bảng; máy tính đã có widget "Công cụ cho bài này" ở sidebar */
@media (min-width: 850px) { .tpv-pt { display: none; } }