/* audit-web — giao diện báo cáo.
   Gốc là phong cách công cụ học từ axi: nền xám nhạt, thẻ trắng viền mảnh, MỘT
   màu nhấn. Bản 05/08 giữ nguyên tinh thần đó nhưng nâng phần nhìn: màu nhấn
   không còn là một mã màu rời mà là cả một dải sinh ra từ brand_color của chính
   website khách (color-mix), nền có vệt sáng, số quan trọng có hình để nhìn.

   Kỹ thuật dùng ở đây, ghi lại để khỏi tra lại:
   · @property + conic-gradient  → vòng điểm chạy được từ 0 tới điểm thật
   · color-mix(in oklab)         → dải màu phái sinh, không phải bảng màu gõ tay
   · container query             → bảng giá và lộ trình đo theo BỀ NGANG CỘT,
                                    không đo theo bề ngang cửa sổ (cột báo cáo
                                    hẹp hơn cửa sổ vì có mục lục bên phải)
   · animation-timeline          → thanh tiến độ đọc và hiệu ứng hiện dần, chạy
                                    bằng CSS, không tốn một dòng JS nào
   Mọi hiệu ứng đều bọc trong @supports và tắt sạch khi máy khách bật
   prefers-reduced-motion. Trình duyệt cũ mất hiệu ứng, chữ và số vẫn nguyên. */

@property --goc { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --day { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  /* Lấy từ chính vietbaic.com (biến CSS của họ, đọc bằng DOM 01/08):
     --primary #6366f1 · --secondary #f97316 · --dark #1e293b · --light #f8fafc
     Trên trang report, --nhan bị thay bằng brand_color của website khách. */
  --nen: #f7f8fb;
  --mat: #ffffff;
  --vien: #e4e8ef;
  --vien-dam: #cbd5e1;
  --chu: #131a26;
  --nhe: #4a5568;   /* chữ thân bài phụ — đậm hơn slate-500 cũ, đọc đỡ mỏi */
  --mo: #78849a;    /* chỉ dùng cho chú thích ngắn, đừng dùng cho cả đoạn */
  --nhan: #6366f1;
  --nhan-dam: #4f46e5;
  --nhan-nhat: #eef0fe;
  --cam: #f97316;
  --tren-nhan: #ffffff;
  --do: #c8362f;
  --do-nen: #fdf1f0;
  --xanh: #15803d;
  --xanh-nen: #f0fdf4;
  --xanh-vien: #bbf7d0;
  --vang: #b45309;

  /* dải phái sinh: đổi --nhan một chỗ là cả trang đổi theo, khỏi gõ tay */
  --nhan-vien: color-mix(in oklab, var(--nhan) 30%, var(--vien));
  --nhan-mo:   color-mix(in oklab, var(--nhan) 7%, #fff);
  --nhan-sang: color-mix(in oklab, var(--nhan) 55%, #fff);
  --nhan-hoi:  color-mix(in oklab, var(--nhan) 16%, transparent);

  --bo: 14px;
  --bo-nho: 10px;
  --bo-lon: 20px;

  --anh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --anh-2: 0 2px 4px -2px rgba(16, 24, 40, .05), 0 12px 26px -10px rgba(16, 24, 40, .12);
  --anh-3: 0 6px 12px -6px rgba(16, 24, 40, .08), 0 26px 50px -16px rgba(16, 24, 40, .20);
  --eas: cubic-bezier(.22, .68, .36, 1);

  --chu-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "SF Pro Text",
              "Segoe UI", system-ui, Roboto, Inter, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `[hidden]` phải thắng mọi khai báo display khác. Chuẩn HTML đặt nó ở lớp
   user-agent nên bất kỳ dòng `display:flex` nào có chọn lọc cao hơn cũng đè
   được — và thế là gọi `el.hidden = true` xong phần tử vẫn nằm đó (sập đúng
   kiểu này ở ô kể ngành nghề, 19/08). */
[hidden] { display: none !important; }

/* Vệt sáng đứng yên phía sau toàn trang, pha từ chính màu thương hiệu của
   website đang được phân tích. Nền phẳng tuyệt đối làm báo cáo trông như bản
   in nháp; vệt này nhạt tới mức không đọc ra là màu gì, chỉ thấy trang có
   chiều sâu. background-attachment: fixed để cuộn không kéo theo vệt. */
html {
  background:
    radial-gradient(58% 42% at 8% -6%, color-mix(in oklab, var(--nhan) 13%, transparent), transparent 68%),
    radial-gradient(48% 38% at 104% 4%, color-mix(in oklab, var(--nhan) 9%, transparent), transparent 70%),
    var(--nen);
  background-attachment: fixed;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: transparent;
  color: var(--chu);
  font: 16px/1.6 var(--chu-font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklab, var(--nhan) 22%, #fff); color: var(--chu); }

/* Bàn phím phải nhìn thấy mình đang ở đâu — nhưng chuột thì đừng vẽ vòng. */
:focus-visible {
  outline: 2px solid var(--nhan);
  outline-offset: 2px;
  border-radius: 6px;
}

.bo { max-width: 760px; margin: 0 auto; padding: 0 20px; }

h1 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.22; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.32; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 650; line-height: 1.45; }
p { line-height: 1.65; text-wrap: pretty; }
a { color: var(--nhan-dam); }
.nhe { color: var(--nhe); }
.mo { color: var(--mo); }
.nho { font-size: 14px; }
.giua { text-align: center; }

/* Con số đứng cạnh chữ mà nhảy bề ngang thì bảng trông lỏng lẻo. */
.diem-so, .sk-so, .tr-dem, .cum-so, .bt-so, .goi .gia, .tk-hangso, .o-so .n, .th-diem b {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nhan-dam);
  margin-bottom: 10px;
}
.eyebrow::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--nhan), transparent);
}

/* ── nút ───────────────────────────────────────────────────────────────────
   MÀU NÚT KHÔNG ĐI THEO --nhan. Trên trang report, --nhan là màu thương hiệu
   của chính website khách; backlink123 ra vàng đồng nên nút bấm thành nâu xỉn,
   nhìn như nút đã bị vô hiệu hoá (K 15/08: "màu nút tôi đang không hài lòng").
   Màu nhấn của khách vẫn dùng cho nhãn, thanh số liệu, viền — chỗ nào cần nói
   "đây là website của bạn". Còn chỗ cần người ta ĐƯA TAY RA BẤM thì phải là
   một màu đủ mạnh, và giống nhau ở mọi báo cáo.

   Vệt sáng chạy ngang chỉ chạy khi rê chuột, không chạy nền liên tục — thứ
   nhấp nháy suốt ngày đọc như quảng cáo rẻ tiền và tốn pin máy khách. */
.nut {
  --nut-1: #6d5efc;
  --nut-2: #9b4dfb;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--nut-1), var(--nut-2));
  color: #fff; border: 0;
  border-radius: 14px; padding: 15px 26px; font-size: 16px; font-weight: 650;
  font-family: inherit; cursor: pointer; text-decoration: none;
  letter-spacing: -.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 4px rgba(41, 24, 110, .18),
    0 12px 28px -10px rgba(109, 94, 252, .70);
  transition: transform .18s var(--eas), box-shadow .18s var(--eas), filter .18s var(--eas);
  white-space: nowrap;
}
.nut::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
}
.nut:hover {
  transform: translateY(-2px); filter: saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 4px 8px rgba(41, 24, 110, .20),
    0 18px 36px -12px rgba(109, 94, 252, .85);
}
@media (prefers-reduced-motion: no-preference) {
  .nut:hover::after { animation: loe .7s var(--eas); }
  @keyframes loe { to { transform: translateX(120%); } }
}
.nut:active { transform: translateY(0); }
.nut > * { position: relative; }
.nut:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.nut-rong { width: 100%; }

input {
  width: 100%; padding: 14px 15px; font: inherit; font-size: 16px;
  border: 1px solid var(--vien-dam); border-radius: 12px; background: #fff;
  color: var(--chu); outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus { border-color: var(--nhan); box-shadow: 0 0 0 4px color-mix(in oklab, var(--nhan) 16%, transparent); }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.loi-o { color: var(--do); font-size: 14px; margin-top: 8px; }
.dong-ho { margin-top: 18px; font-size: 13.5px; color: var(--mo); font-variant-numeric: tabular-nums; }

.hang { display: flex; gap: 10px; }
.hang > div { flex: 1; }
@media (max-width: 560px) {
  .hang { flex-direction: column; }
  .hang .nut { width: 100%; }
}

/* ── thẻ ─────────────────────────────────────────────────────────────── */
.the {
  background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 22px;
  box-shadow: var(--anh-1);
}
.the + .the { margin-top: 12px; }
.the h3 { margin-bottom: 6px; }

.muc { padding: 42px 0; border-top: 1px solid var(--vien); }
.muc:first-child { border-top: 0; }

/* ── các màn của trang chủ ───────────────────────────────────────────── */
.man { display: none; }
.man.hien { display: block; animation: len .35s ease; }
@keyframes len { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dau { padding: 56px 0 8px; }
.dau h1 { max-width: 18ch; }
.dau .sub { margin-top: 12px; font-size: 17px; color: var(--nhe); max-width: 54ch; }
.tin-cay { margin-top: 12px; font-size: 13.5px; color: var(--mo); }
.tin-cay.nhan-ra { color: var(--xanh); font-weight: 550; }
.hoi { margin-top: 12px; font-size: 19px; font-weight: 600; color: var(--chu); line-height: 1.4; letter-spacing: -.01em; }
.loc { margin-top: 14px; font-size: 14.5px; color: var(--nhe); line-height: 1.65; max-width: 50ch; }
.loc b { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 620; color: var(--chu); }
.vd { margin-top: 30px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px 20px; }
.vd-nhan { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nhan-dam); margin-bottom: 12px; }
.vd-hang { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--vien); font-size: 15px; }
.vd-hang:first-of-type { border-top: 0; }
.vd-hang .k { color: var(--nhe); }
.vd-hang .v { font-weight: 650; text-align: right; }
.vd-ket { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vien); font-size: 13.5px; color: var(--mo); }
.tin-cay.nhan-ra::before { content: "✓ "; }
ul.gom { list-style: none; margin-top: 10px; }
ul.gom li { padding: 8px 0 8px 22px; position: relative; font-size: 15px; color: var(--nhe); border-top: 1px solid var(--vien); line-height: 1.55; }
ul.gom li:first-child { border-top: 0; }
ul.gom li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--nhan); }
.bang-chung { margin-top: 12px; background: var(--nhan-mo); border-radius: var(--bo); padding: 18px 20px; }
.bang-chung .bc-h { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nhan-dam); margin-bottom: 8px; }
@media (max-width: 560px) { .dau { padding: 32px 0 4px; } h1 { font-size: 26px; } }

/* ── bước đọc: chỗ người ta ngồi nhìn, phải sống ─────────────────────── */
.buoc { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }
.buoc li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.buoc .ic {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.buoc .cho { color: var(--mo); }
.buoc .cho .ic { border: 1.5px solid var(--vien-dam); }
.buoc .chay { font-weight: 600; }
.buoc .chay .ic {
  border: 2.5px solid var(--vien-dam); border-top-color: var(--nhan);
  animation: quay .9s linear infinite;
}
.buoc .xong { color: var(--nhe); }
.buoc .xong .ic {
  background: var(--xanh-nen); border: 1px solid var(--xanh-vien); color: var(--xanh);
}
.buoc .hong { color: var(--do); }
.buoc .hong .ic { background: var(--do-nen); border: 1px solid #f3c9c6; color: var(--do); }
@keyframes quay { to { transform: rotate(360deg); } }

/* ── kết quả sơ bộ ───────────────────────────────────────────────────── */
.so-lon { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.o-so {
  flex: 1 1 140px; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 16px 18px; box-shadow: var(--anh-1);
}
.o-so .n { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.o-so .t { font-size: 13.5px; color: var(--nhe); margin-top: 3px; }

.dong { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--vien); font-size: 15px; }
.dong:first-child { border-top: 0; }
.dong .k { color: var(--nhe); flex: 0 0 34%; }
.dong .v { flex: 1; font-weight: 550; }

.chip {
  display: inline-block; background: var(--nhan-mo);
  border: 1px solid var(--nhan-vien); color: var(--nhan-dam);
  border-radius: 20px; padding: 4px 12px; font-size: 13.5px; font-weight: 550;
  margin: 0 5px 5px 0;
}

.khoa { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 22px; }
.khoa ul { list-style: none; margin-top: 10px; }
.khoa li { padding: 9px 0 9px 26px; position: relative; font-size: 15px; color: var(--nhe); border-top: 1px solid var(--vien); }
.khoa li:first-child { border-top: 0; }
.khoa li::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 9px; height: 9px;
  border: 1.5px solid var(--mo); border-radius: 2px;
}

/* ── bảng giá ────────────────────────────────────────────────────────── */
.goi {
  position: relative;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-lon);
  padding: 24px; box-shadow: var(--anh-1);
  display: flex; flex-direction: column;
  transition: transform .2s var(--eas), box-shadow .2s var(--eas);
}
.goi + .goi { margin-top: 14px; }
.goi:hover { transform: translateY(-2px); box-shadow: var(--anh-2); }
/* Gói nổi bật: viền vẽ bằng gradient (hai lớp nền, một lớp bo trong padding-box,
   một lớp bo ngoài border-box) — viền một màu phẳng trông như khung bảng. */
.goi.nb {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--mat), var(--mat)) padding-box,
    linear-gradient(150deg, var(--nhan), color-mix(in oklab, var(--nhan) 35%, var(--cam))) border-box;
  box-shadow: var(--anh-2);
}
.goi .ten { font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--nhan-dam); }
/* "đ/tháng" xuống dòng hẳn: để nó chảy tiếp sau con số thì cột hẹp đẩy nó rơi
   xuống một cách ngẫu nhiên, ba gói lệch nhau mỗi gói một kiểu. */
.goi .gia { font-size: 31px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 2px; line-height: 1.12; }
.goi .gia span { display: block; font-size: 13.5px; font-weight: 500; color: var(--nhe); letter-spacing: 0; margin-top: 3px; }
.goi .mo-ta-goi { font-size: 14px; color: var(--nhe); margin-top: 6px; }
.goi .hop-dong { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vien); font-size: 13px; color: var(--mo); }
.goi ul { list-style: none; margin: 14px 0 auto; }
.goi li { padding: 8px 0 8px 28px; position: relative; font-size: 14.5px; color: #3d434c; line-height: 1.55; }
.goi li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--nhan-mo); border: 1px solid var(--nhan-vien);
}
.goi li::after {
  content: ""; position: absolute; left: 5px; top: 14px; width: 8px; height: 4px;
  border-left: 1.8px solid var(--nhan-dam); border-bottom: 1.8px solid var(--nhan-dam);
  transform: rotate(-45deg);
}
/* Cờ "phổ biến nhất" đứng ngoài dòng chảy, ngồi lên viền thẻ: để nó chiếm một
   dòng trong thẻ thì gói giữa tụt xuống, ba mức giá không còn thẳng hàng và
   mắt hết so được theo hàng ngang. */
.co {
  position: absolute; top: -12px; right: 20px;
  background: linear-gradient(135deg, var(--cam), #fb923c); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 13px; border-radius: 20px;
  box-shadow: 0 6px 16px -6px rgba(249, 115, 22, .85);
}

/* ── report ──────────────────────────────────────────────────────────── */
/* Đầu trang gọn còn một dải mảnh. Bản trước cao gần nửa màn hình điện thoại
   cho ba dòng chẳng nói được gì, đẩy câu đắt nhất của báo cáo xuống khuất
   (K 19/08). Giờ: nhãn nhỏ, tên miền, hết. Vệt sáng pha từ màu thương hiệu
   của chính website đó giữ lại, vì nó là thứ duy nhất ở đây làm cho dải này
   trông như của riêng họ. */
.rp-dau {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 200% at 0% 50%, color-mix(in oklab, var(--nhan) 13%, transparent), transparent 70%),
    linear-gradient(180deg, #fff, color-mix(in oklab, var(--nhan) 3%, #fff));
  border-bottom: 1px solid var(--vien);
}
.rp-dau-trong {
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  padding-top: 16px; padding-bottom: 16px;
}
.rp-dau-nhan {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mo);
}
.rp-dau .dom {
  display: flex; align-items: center; gap: 9px;
  font-size: 20px; font-weight: 750; letter-spacing: -.02em;
  word-break: break-word;
}
/* Chấm xanh đang thở: dấu hiệu nhỏ nhất cho thấy đây là bản vừa đo xong, chứ
   chẳng phải trang tĩnh ai cũng thấy giống nhau. */
.rp-cham {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--xanh); box-shadow: 0 0 0 3px color-mix(in oklab, var(--xanh) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .rp-cham { animation: tho 2.4s ease-in-out infinite; }
  @keyframes tho { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--xanh) 6%, transparent); } }
}
@media (min-width: 700px) {
  .rp-dau-trong { align-items: baseline; }
  .rp-dau .dom { font-size: 23px; }
}

.bang { width: 100%; border-collapse: collapse; font-size: 15px; }
.bang td { padding: 13px 0; border-top: 1px solid var(--vien); }
.bang tr:first-child td { border-top: 0; }
.bang td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 14px; font-variant-numeric: tabular-nums; }
.bang tr.xau td:last-child { color: var(--do); }

.canh {
  background: linear-gradient(180deg, var(--mat), var(--nhan-mo));
  border: 1px solid var(--vien);
  border-left: 3px solid var(--nhan); border-radius: var(--bo); padding: 22px;
  box-shadow: var(--anh-1);
}
.bc { list-style: none; margin-top: 14px; }
.bc li { margin-top: 6px; }
.bc a, .bc span {
  display: block; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-nho); padding: 10px 13px; font-size: 14px; word-break: break-word;
  text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.bc a:hover { border-color: var(--nhan); transform: translateX(2px); }

.luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .luoi { grid-template-columns: repeat(3, 1fr); } }
.luoi figure { margin: 0; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nho); overflow: hidden; }
.luoi img { width: 100%; height: 118px; object-fit: cover; display: block; background: var(--nen); }
.luoi figcaption { font-size: 13px; padding: 9px 11px; line-height: 1.4; color: var(--nhe); }

.chang { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 22px; }
.chang + .chang { margin-top: 12px; }
.chang .ten-chang { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nhan-dam); margin-bottom: 14px; }
.viec { padding: 13px 0; border-top: 1px solid var(--vien); }
.viec:first-of-type { border-top: 0; padding-top: 0; }
.viec .v { font-weight: 600; }
.viec .m { font-size: 14px; color: var(--nhe); margin-top: 3px; }

.chan { padding: 26px 0 48px; color: var(--mo); font-size: 13px; }

/* ── dải cụm chủ đề: cho thấy độ lệch bằng hình, không cần đọc số ── */
.cum { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px 20px; box-shadow: var(--anh-1); }
.cum-hang { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cum-ten { flex: 0 0 34%; font-size: 14px; line-height: 1.35; }
.cum-thanh { flex: 1; height: 10px; background: var(--nen); border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); }
.cum-thanh span {
  display: block; height: 100%; border-radius: 20px; min-width: 3px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--nhan) 70%, #fff), var(--nhan));
  transform-origin: left center;
}
.cum-so { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--nhe); white-space: nowrap; }
.cum-hang.le .cum-ten { color: var(--nhe); }
.cum-hang.le .cum-thanh span { background: linear-gradient(90deg, #e2e8f0, var(--vien-dam)); }
@media (max-width: 480px) { .cum-ten { flex: 0 0 40%; font-size: 13px; } }

ol.hoi { margin: 10px 0 0 18px; }
ol.hoi li { padding: 7px 0 7px 4px; font-size: 15px; color: var(--nhe); line-height: 1.55; }

/* ── sức khoẻ website ────────────────────────────────────────────────── */
.sk-hang { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 15px 0; border-top: 1px solid var(--vien); }
.sk-hang:first-child { border-top: 0; }
.sk-trai { display: flex; gap: 11px; align-items: flex-start; }
.sk-y { display: block; font-size: 13.5px; color: var(--nhe); margin-top: 3px; line-height: 1.5; }
.sk-so { font-weight: 700; white-space: nowrap; font-size: 15px; }
.sk-so.cham { color: var(--do); }
.sk-so.vua { color: var(--vang); }
.sk-so.tot { color: var(--xanh); }
/* Tên class phải khác tên mức: `.cham.cham` khớp MỌI phần tử có class "cham"
   (selector lặp không đòi hai class khác nhau), nên chấm nào cũng ra đỏ. */
.dau-cham { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--vien-dam); }
.dau-cham.tot { background: var(--xanh); box-shadow: 0 0 0 3px color-mix(in oklab, var(--xanh) 16%, transparent); }
.dau-cham.vua { background: var(--cam); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cam) 16%, transparent); }
.dau-cham.cham { background: var(--do); box-shadow: 0 0 0 3px color-mix(in oklab, var(--do) 14%, transparent); }

/* ── sổ cái ──────────────────────────────────────────────────────────── */
.sc { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.sc-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc table { min-width: 720px; width: 100%; border-collapse: collapse; font-size: 14px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.sc th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--nhe); padding: 11px 12px; background: var(--nen); border-bottom: 1px solid var(--vien); }
.sc td { padding: 11px 12px; border-top: 1px solid var(--vien); }
.sc tr.nong td { background: #fffaf0; }
.sc .tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.sc .tag-nong { background: #fef2e2; color: var(--vang); }
.sc .tag-ok { background: var(--xanh-nen); color: var(--xanh); }
.sc .tag-no { background: #fee2e2; color: #b91c1c; }
.sc-dau { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sc-loc { display: flex; gap: 6px; }
.sc-loc a { padding: 6px 13px; border-radius: 20px; border: 1px solid var(--vien);
  background: var(--mat); color: var(--nhe); text-decoration: none;
  font-size: 13.5px; font-weight: 600; }
.sc-loc a.dang { background: var(--nhan); border-color: var(--nhan); color: #fff; }

/* Phễu: mỗi chặng một thanh, dài theo tỉ lệ so với chặng đầu. Nhìn cái là
   thấy chỗ tụt, khỏi phải chia nhẩm trong đầu. */
.phieu { background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 8px 20px; }
.ph-hang { display: flex; align-items: center; gap: 16px; padding: 13px 0;
  border-top: 1px solid var(--vien); }
.ph-hang:first-child { border-top: 0; }
.ph-ten { flex: 0 0 30%; font-weight: 650; font-size: 15px; }
.ph-ten span { display: block; font-weight: 400; font-size: 12.5px; color: var(--mo); margin-top: 2px; }
.ph-ray { flex: 1; height: 12px; background: var(--nen); border-radius: 20px; overflow: hidden; }
.ph-ray > i { display: block; height: 100%; border-radius: 20px; min-width: 2px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--nhan) 55%, #fff), var(--nhan)); }
.ph-so { flex: 0 0 190px; text-align: right; font-weight: 750; font-size: 19px;
  font-variant-numeric: tabular-nums; }
.ph-so span { display: block; font-weight: 500; font-size: 12.5px; color: var(--mo); }
@media (max-width: 640px) {
  .ph-hang { flex-wrap: wrap; }
  .ph-ten { flex: 1 1 100%; }
  .ph-so { flex: 0 0 auto; font-size: 17px; text-align: left; }
}


/* ══ khung VietBaiC ══════════════════════════════════════════════════════ */
.dinh {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--vien), 0 2px 20px rgba(16, 24, 40, .05);
}
@supports not (backdrop-filter: blur(2px)) { .dinh { background: #fff; } }
.dinh-trong {
  max-width: 1140px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}
.dinh-logo { line-height: 0; flex: none; }
.dinh-logo img { height: 38px; width: auto; display: block; }
.dinh-menu { display: none; gap: 22px; margin-left: 8px; }
.dinh-menu a {
  color: var(--chu); text-decoration: none; font-size: 15px; font-weight: 500;
  white-space: nowrap;
}
.dinh-menu a:hover { color: var(--nhan-dam); }
.dinh-phai { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dinh-dt { display: none; color: var(--chu); font-weight: 650; text-decoration: none; white-space: nowrap; }
.dinh-nut {
  background: linear-gradient(180deg, #fb923c, var(--cam)); color: #fff;
  text-decoration: none; white-space: nowrap;
  padding: 9px 20px; border-radius: 25px; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(249, 115, 22, .9);
  transition: transform .18s var(--eas), box-shadow .18s var(--eas);
}
.dinh-nut:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(249, 115, 22, .9); }
@media (min-width: 900px) { .dinh-menu { display: flex; } .dinh-dt { display: block; } }
@media (max-width: 400px) { .dinh-nut { padding: 9px 15px; font-size: 13.5px; } }

.chan-lon { background: #131a26; color: rgba(255, 255, 255, .7); margin-top: 56px; }
.chan-trong {
  max-width: 1140px; margin: 0 auto; padding: 46px 20px 30px;
  display: grid; grid-template-columns: 1fr; gap: 30px;
}
@media (min-width: 700px) { .chan-trong { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } }
.chan-cot p { font-size: 14.5px; line-height: 1.7; margin-bottom: 10px; }
.chan-ten { color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.chan-nhan {
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 14px;
}
.chan-cot a {
  display: block; color: rgba(255, 255, 255, .7); text-decoration: none;
  font-size: 14.5px; padding: 5px 0;
}
.chan-cot a:hover { color: #fff; }
.chan-cuoi {
  border-top: 1px solid rgba(255, 255, 255, .12); text-align: center;
  padding: 20px; font-size: 13px; color: rgba(255, 255, 255, .5);
}

/* ══ điểm nhấn cho mắt lướt ══════════════════════════════════════════════
   Khối chữ dài toàn một màu xám thì mắt trượt thẳng xuống, không bám vào
   đâu. Con số và tên riêng là chỗ mắt dừng tự nhiên — cho chúng đậm màu và
   đậm nét hơn phần còn lại. */
.so-nhan { color: var(--chu); font-weight: 700; }
.loc .so-nhan { color: var(--nhan-dam); }


/* ══ hero trang chủ ══════════════════════════════════════════════════════
   Nền phẳng + chữ căn trái làm trang trông như bản nháp. Một vệt sáng phía
   sau và một tấm trắng nổi lên đủ để mắt biết phải nhìn vào đâu. */
.hero {
  padding: 58px 0 72px; text-align: center;
  background: radial-gradient(60% 120% at 50% -10%, var(--nhan-mo) 0%, transparent 62%);
}
.hero h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.03em; }
.hero .hoi {
  margin: 14px auto 0; max-width: 30ch; font-size: 18px; font-weight: 500;
  color: var(--nhe); line-height: 1.45;
}
@media (min-width: 700px) {
  .hero { padding: 76px 0 90px; }
  .hero h1 { font-size: 46px; }
  .hero .hoi { font-size: 20px; }
}

.tam {
  max-width: 640px; margin: 32px auto 0; background: var(--mat);
  border: 1px solid var(--vien); border-radius: var(--bo-lon); padding: 26px;
  box-shadow: var(--anh-3);
  text-align: left;
}
.tam .tin-cay { margin-top: 10px; text-align: center; }
.tam input { font-size: 17px; padding: 15px 16px; }
.tam .nut { padding: 15px 24px; }

/* Dòng lọc ngân sách: tách hẳn thành một ô riêng trong tấm trắng. Để nó chảy
   tiếp sau đoạn trên thì thành một nùi chữ xám, mắt trượt qua luôn. */
.tam .loc {
  margin: 20px 0 0; padding: 15px 17px; background: var(--nhan-mo);
  border: 1px solid var(--nhan-vien);
  border-radius: var(--bo); font-size: 14.5px; line-height: 1.6; max-width: none;
  color: var(--nhe);
}
.tam .loc b { color: var(--chu); font-size: 15px; display: block; margin-bottom: 3px; }
.so-mo {
  background: 0; border: 0; padding: 0; font: inherit; color: var(--nhan-dam);
  font-weight: 700; cursor: pointer; border-bottom: 1px dashed currentColor;
}
.so-mo .mui { display: inline-block; margin-left: 5px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.so-mo.dang-mo .mui { transform: translateY(-2px) rotate(180deg); }
.goi-so { margin-top: 12px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nho); padding: 4px 14px; }
.goi-hang { text-decoration: none; color: inherit; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--vien); font-size: 14.5px; }
.goi-hang:first-child { border-top: 0; }
.goi-mo { display: block; font-size: 13px; color: var(--nhe); margin-top: 1px; }
.goi-hang:hover { background: var(--nhan-mo); }
.goi-gia { font-weight: 700; white-space: nowrap; color: var(--nhan-dam); }
.goi-mui { font-weight: 400; }
.goi-nut { margin-top: 16px; }

/* nhịp rà lại, đứng cạnh tên món trong khối "hỏng lại theo thời gian" */
.rp .viec .nhip, .viec .nhip {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 20px;
  background: var(--nhan-mo); border: 1px solid var(--nhan-vien); color: var(--nhan-dam);
  font-size: 12px; font-weight: 700; vertical-align: 2px;
}

/* nhãn nhỏ trong thẻ soi trang */
.nhan-nho { font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mo); margin-bottom: 8px; }
.chip b { font-weight: 700; opacity: .65; margin-left: 3px; }
.viec-ds .viec:first-child { border-top: 0; padding-top: 0; }

/* ── điểm tổng: vòng tròn chạy từ 0 tới điểm thật ─────────────────────────
   Con số 51 nằm trơ một mình thì người đọc phải tự tưởng tượng nó nằm đâu
   trên thang 100. Vòng cung vẽ luôn quãng đó. Góc quét là một biến kiểu
   <angle> khai báo bằng @property nên trình duyệt nội suy được — biến CSS
   thường thì conic-gradient nhảy phát một, không chạy. */
.diem-o { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.diem-vong {
  --mau: var(--vien-dam);
  position: relative; flex: none; width: 138px; height: 138px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--mau) var(--goc), color-mix(in oklab, var(--mau) 14%, var(--vien)) 0);
  --goc: calc(var(--d, 0) * 3.6deg);
}
.diem-vong::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--mat); box-shadow: inset 0 1px 3px rgba(16, 24, 40, .07);
}
.diem-vong > * { position: relative; }
.diem-vong.tot { --mau: var(--xanh); }
.diem-vong.vua { --mau: var(--vang); }
.diem-vong.cham { --mau: var(--do); }
@media (prefers-reduced-motion: no-preference) {
  .diem-vong { animation: quet 1.2s var(--eas) both; }
  @keyframes quet { from { --goc: 0deg; } }
}
.diem-so { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.diem-so span { font-size: 15px; font-weight: 600; color: var(--mo); }
.diem-so.tot { color: var(--xanh); }
.diem-so.vua { color: var(--vang); }
.diem-so.cham { color: var(--do); }
.diem-ben { flex: 1 1 260px; }
.diem-h { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.sk-so .ts { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--mo); }

/* nút mở rộng — phần giải thích dài giấu ở đây, ai muốn hiểu sâu thì bấm */
.mo-them { margin-top: 16px; border-top: 1px solid var(--vien); padding-top: 14px; }
.mo-them > summary {
  cursor: pointer; font-size: 14px; font-weight: 650; color: var(--nhan-dam);
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px; background: var(--nhan-mo);
  border: 1px solid var(--nhan-vien);
  transition: background .15s ease;
}
.mo-them > summary:hover { background: color-mix(in oklab, var(--nhan) 12%, #fff); }
.mo-them > summary::-webkit-details-marker { display: none; }
.mo-them > summary::after { content: "＋"; font-weight: 700; }
.mo-them[open] > summary::after { content: "−"; }
.mo-them p { margin-top: 12px; font-size: 14.5px; color: var(--nhe); line-height: 1.7; }
.buoc .dung { color: var(--mo); }
.buoc .dung .ic { border: 1.5px dashed var(--vien-dam); }

/* ── bảng tick từng trang (K vẽ 03/08) ────────────────────────────────────
   Dấu tick dùng ký tự kèm màu, KHÔNG dùng emoji: emoji mỗi máy vẽ một kiểu
   và đọc rẻ tiền. Chữ đứng cạnh dấu để người khó phân biệt màu vẫn đọc được
   trạng thái, đừng bắt màu gánh một mình. */
.tr-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tr-diem { font-weight: 800; font-size: 20px; white-space: nowrap; }
.tr-diem span { font-size: 13px; font-weight: 600; color: var(--mo); }
.tr-diem.tot { color: var(--xanh); }
.tr-diem.vua { color: var(--vang); }
.tr-diem.kem { color: var(--do); }

.tick-ds { margin-top: 12px; }
.tick {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--vien); font-size: 14.5px;
}
.tick:first-child { border-top: 0; }
.tick-o {
  flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; align-self: flex-start; margin-top: 1px;
}
.tick.dat .tick-o { color: var(--xanh); background: var(--xanh-nen); border: 1px solid var(--xanh-vien); }
.tick.chua .tick-o { color: var(--do); background: var(--do-nen); border: 1px solid #f3c9c6; }
.tick.chua .tick-ten { color: var(--nhe); }
.tick-ten { flex: 1; }
.tick-chi { color: var(--mo); font-size: 13px; text-align: right; }

.chip.nhat { background: transparent; border: 1px dashed var(--vien-dam); color: var(--nhe); }

/* Câu dài thì đừng mượn .nhan-nho: class đó viết hoa toàn bộ, hợp với nhãn ba
   bốn chữ, còn cả câu viết hoa thì đọc như đang quát (bắt được 03/08). */
.nhan-cau { font-size: 13.5px; color: var(--nhe); margin-bottom: 8px; }

/* ── ba việc ưu tiên ──────────────────────────────────────────────────── */
.ut { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--vien); }
.ut:first-child { border-top: 0; }
.ut-so {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--nhan-mo);
  color: var(--nhan-dam); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ut-viec { font-weight: 650; font-size: 16px; line-height: 1.45; }
.ut-y { color: var(--nhe); font-size: 14.5px; margin-top: 4px; line-height: 1.6; }
.ut-nhan { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.the-nhan {
  font-size: 12.5px; color: var(--nhe); background: var(--mat);
  border: 1px solid var(--vien); border-radius: 20px; padding: 3px 11px;
}
.the-nhan.manh { color: var(--do); border-color: #f0c9c6; background: var(--do-nen); }

/* ── mở đầu: câu chuyện trước, điểm số bên cạnh ───────────────────────── */
.mo-dau-o { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.mo-dau-chu { flex: 1 1 420px; }
.mo-dau-h { font-size: 31px; line-height: 1.28; letter-spacing: -.025em; font-weight: 800; }
/* Câu thứ hai nói cái giá của chi tiết vừa nêu — to hơn chữ thân bài một nhịp
   để nó còn thuộc về phần mở đầu, chưa rơi xuống hàng chú thích. */
.mo-dau-y { margin-top: 12px; font-size: 17.5px; line-height: 1.55; color: var(--nhe); max-width: 58ch; }
.mo-dau-y strong, .mo-dau-y b { color: var(--chu); font-weight: 700; }
/* Vế khen: một dòng, có dấu tick, đứng khiêm tốn dưới phần nặng ký. */
.mo-dau-khen {
  margin-top: 14px; padding-left: 26px; position: relative;
  font-size: 14.5px; color: var(--nhe); max-width: 58ch;
}
.mo-dau-khen::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--xanh); font-weight: 800;
}
.mo-dau-diem {
  flex: 0 0 auto; display: flex; gap: 18px; align-items: center;
  padding-left: 30px; border-left: 1px solid var(--vien);
}
/* min-width:0 để đoạn chữ bên phải vòng điểm xuống dòng được. Bỏ dòng này thì
   trên điện thoại nó đẩy ngang ra ngoài màn hình (bắt được 05/08). */
.mo-dau-diem > div { min-width: 0; }
@media (max-width: 720px) {
  .mo-dau-h { font-size: 25px; }
  /* flex-basis 100%: để "0 0 auto" thì khối này rộng bằng nội dung dài nhất
     bên trong và đẩy ngang ra ngoài màn hình điện thoại. */
  .mo-dau-diem { flex: 1 1 100%; padding-left: 0; border-left: 0; padding-top: 6px; gap: 14px; }
  .diem-vong { width: 118px; height: 118px; }
  .diem-so { font-size: 36px; }
}

/* ── lộ trình ba bước ─────────────────────────────────────────────────── */
.lo-trinh { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lt-the {
  flex: 1 1 240px; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 20px;
  box-shadow: var(--anh-1);
  transition: transform .2s var(--eas), box-shadow .2s var(--eas);
}
.lt-the:hover { transform: translateY(-3px); box-shadow: var(--anh-2); }
/* Bước 1 là nút thắt nặng nhất — nền ấm và viền đậm hơn để mắt dừng ở đó
   trước. Màu không gánh một mình: số thứ tự và thứ tự đọc đã nói rồi. */
.lt-the.dau {
  border-color: #e6c58f;
  background: linear-gradient(165deg, #fffdf7, #fdf4e3);
  box-shadow: 0 2px 4px -2px rgba(120, 80, 10, .10), 0 16px 32px -14px rgba(120, 80, 10, .30);
}
.lt-so {
  width: 28px; height: 28px; border-radius: 50%; background: var(--vien);
  color: var(--nhe); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.lt-the.dau .lt-so { background: linear-gradient(160deg, #f0cf95, #d8a44a); color: #4d3406; }
.lt-tieu-de { font-weight: 700; font-size: 16.5px; line-height: 1.4; letter-spacing: -.01em; }
.lt-y { color: var(--nhe); font-size: 14.5px; line-height: 1.6; margin-top: 8px; }
.lt-moc { font-weight: 750; font-size: 15px; margin-top: 14px; letter-spacing: -.01em; }
.lt-viec { font-size: 13.5px; color: var(--nhe); margin-top: 10px; }
/* Dòng "biết là xong khi": in nghiêng nhẹ và lùi vào, đọc như lời người tư vấn
   nói thêm chứ không phải một hạng mục nữa trong danh sách. */
.lt-do {
  margin-top: 9px; padding-left: 12px; border-left: 2px solid var(--vien);
  font-size: 13px; color: var(--mo); line-height: 1.55;
}
.the-nhan.nhip-the {
  background: var(--nhan-mo); border-color: var(--nhan-vien);
  color: var(--nhan-dam); font-weight: 600;
}
.lt-mui { align-self: center; color: var(--vien-dam); font-size: 20px; }
@media (max-width: 899px) { .lt-mui { display: none; } }

/* ── bức tranh nội dung: thanh ngang, đúng một thanh màu cam ───────────── */
.bt-o { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.bt-chu { flex: 1 1 260px; }
.bt-thanh { flex: 2 1 380px; }
.bt-hang { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.bt-ten { flex: 0 0 34%; font-size: 14px; color: var(--nhe); }
.bt-ray { flex: 1; height: 10px; background: var(--vien); border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); }
.bt-day { height: 100%; border-radius: 6px; transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in oklab, var(--xanh) 55%, #fff), var(--xanh)); }
.bt-day.lo { background: linear-gradient(90deg, #eaa53f, #d98324); }
.bt-so { flex: 0 0 46px; text-align: right; font-weight: 750; font-size: 14px; }

/* ── bảng từ khoá gộp thứ hạng ────────────────────────────────────────── */
.tk-hang { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 0; border-top: 1px solid var(--vien); }
.tk-hang:first-child { border-top: 0; }
.tk-cum { font-weight: 650; font-size: 15.5px; }
.tk-y { color: var(--mo); font-size: 13px; margin-top: 3px; }
.tk-hangso { font-weight: 700; font-size: 13.5px; white-space: nowrap;
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--vien);
  background: var(--nen); color: var(--nhe); }
.tk-hangso.tot { color: var(--xanh); background: var(--xanh-nen); border-color: var(--xanh-vien); }
.tk-hangso.vua { color: var(--vang); background: #fef6e7; border-color: #f2ddb4; }
.tk-hangso.cham { color: var(--do); background: var(--do-nen); border-color: #f3c9c6; }

/* ── địa chỉ trang, bấm được ──────────────────────────────────────────── */
.tr-url { display: block; font-size: 13px; color: var(--nhan-dam); margin-top: 4px;
  word-break: break-all; text-decoration: none; }
.tr-url:hover { text-decoration: underline; }
.tr-the .tr-dau { align-items: flex-start; }
.tr-the { transition: box-shadow .2s var(--eas); }
.tr-the:hover { box-shadow: var(--anh-2); }

/* ── bài mới nhất và chỉ mục ──────────────────────────────────────────── */
.ci-o { background: linear-gradient(180deg, var(--mat), var(--xanh-nen));
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xanh); border-radius: var(--bo); padding: 20px 24px;
  box-shadow: var(--anh-1); }
.ci-o.chua { border-left-color: #d98324; background: linear-gradient(180deg, var(--mat), #fdf6ea); }
.ci-dau { font-weight: 750; font-size: 17px; letter-spacing: -.01em; }
.ci-y { color: var(--nhe); font-size: 14.5px; margin-top: 6px; }
.ci-tieu-de { margin-top: 10px; font-size: 14.5px; font-weight: 600; }

/* ── khung báo cáo: desktop dùng hết bề ngang, điện thoại xếp dọc ──────── */
.bo-rong { max-width: 1180px; }
.rp-khung { display: block; }
/* Cột chính là hộp đo cho container query: bảng giá và lộ trình phải theo bề
   ngang CỘT, không theo bề ngang cửa sổ — cửa sổ 1100px mà cột chỉ còn 830px
   thì ba cột giá vẫn bị ép. */
.rp-chinh { container-type: inline-size; container-name: rp; }
@media (min-width: 1040px) {
  .rp-khung { display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 52px;
    align-items: start; }
  .rp-muc-luc { position: sticky; top: 84px; padding-top: 40px; }
}
.rp-muc-luc { display: none; }
@media (min-width: 1040px) { .rp-muc-luc { display: block; } }
.ml-nhan { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mo); margin-bottom: 12px; }
.rp-muc-luc a { display: block; padding: 8px 0 8px 14px; font-size: 14px;
  color: var(--nhe); text-decoration: none; border-left: 2px solid var(--vien);
  transition: color .15s ease, border-color .15s ease, padding-left .15s ease; }
.rp-muc-luc a:hover { color: var(--nhan-dam); border-left-color: var(--nhan); }
/* Mục đang đọc: người đọc cuộn giữa một báo cáo dài cần biết mình đang ở đâu */
.rp-muc-luc a.dang {
  color: var(--nhan-dam); font-weight: 650;
  border-left-color: var(--nhan); padding-left: 18px;
}
.muc[id] { scroll-margin-top: 84px; }

/* Ba bước phải nằm CÙNG MỘT HÀNG trên desktop — xuống hàng lẻ một ô thì bố
   cục gãy, mà lộ trình đọc theo hàng ngang mới ra nghĩa "bước 1 rồi bước 2". */
@container rp (min-width: 820px) {
  .lo-trinh { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0 12px; }
  .lt-the { flex: none; }
}
@container rp (max-width: 819px) { .lo-trinh { flex-direction: column; } .lt-the { flex: none; } }

/* Ba gói đứng cạnh nhau khi cột đủ rộng: so giá theo hàng ngang mới ra nghĩa
   "trả thêm ngần này thì được thêm gì". Xếp dọc thì phải nhớ trang trước. */
@container rp (min-width: 760px) {
  #bang-gia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  #bang-gia > .eyebrow, #bang-gia > h2, #bang-gia > p { grid-column: 1 / -1; }
  #bang-gia > h2 { margin-bottom: 2px; }
  .goi + .goi { margin-top: 0; }
  .goi.nb { transform: translateY(-6px); }
  .goi.nb:hover { transform: translateY(-8px); }
}

/* ── thanh dính đáy màn điện thoại ────────────────────────────────────── */
.thanh-day { display: none; }
@media (max-width: 780px) {
  .thanh-day {
    display: flex; align-items: center; gap: 12px; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--vien);
    box-shadow: 0 -6px 24px rgba(16, 24, 40, .08);
  }
  .td-chu { flex: 1; min-width: 0; }
  .td-nhan { font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--mo); }
  .td-viec { font-size: 14px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .thanh-day .nut { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
  body { padding-bottom: 82px; }
}

/* ── dấu vết thương hiệu: bản đồ độ phủ ───────────────────────────────── */
.th-o { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .th-o { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); } }
.th-diem { margin-top: 16px; display: flex; align-items: baseline; gap: 7px; }
.th-diem b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.th-diem span { color: var(--nhe); font-size: 14px; }
.th-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 520px) { .th-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.th-o-nho { background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 14px 15px; box-shadow: var(--anh-1); }
.th-o-nho.co { border-color: #bfe0c8; background: linear-gradient(165deg, #fff, #f2fbf4); }
.th-dau { font-weight: 800; color: var(--mo); }
.th-o-nho.co .th-dau { color: var(--xanh); }
.th-ten { font-weight: 600; font-size: 14px; margin-top: 4px; }
.th-vi-du { color: var(--mo); font-size: 12.5px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── từng trang: hai cột cần chỉnh / đang ổn ──────────────────────────── */
.tr-dem { font-size: 13.5px; color: var(--nhe); white-space: nowrap; font-weight: 600; }
/* Thanh mảnh dưới tên trang: bao nhiêu phần hạng mục đã đạt, thấy trong một
   nháy thay vì phải đọc "9/13". --p do template đổ ra từ chính hai số đó. */
.tr-thanh { height: 5px; border-radius: 4px; background: var(--vien); overflow: hidden; margin-top: 12px; }
.tr-thanh > i { display: block; height: 100%; border-radius: 4px; width: calc(var(--p, 0) * 1%);
  background: linear-gradient(90deg, color-mix(in oklab, var(--nhan) 55%, #fff), var(--nhan));
  transform-origin: left center; }
.tick-hai-cot { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 16px; }
@container rp (min-width: 700px) { .tick-hai-cot { grid-template-columns: 1.15fr 1fr; gap: 34px; } }
.tick-nhan { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mo); margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--vien); }
.tick-so { color: var(--nhe); font-size: 13px; margin-top: 2px; }
.tick-can { color: var(--do); font-size: 13px; margin-top: 3px; }
.tick-hai-cot .tick { align-items: flex-start; }
.tick-hai-cot .tick-ten { font-weight: 600; }
.bt-so { display: flex; flex-direction: column; align-items: flex-end; }
.bt-ti { font-weight: 500; font-size: 11.5px; color: var(--mo); }

/* ── dấu vết thương hiệu: xem trước kết quả tìm kiếm ──────────────────── */
.serp-ds { margin-top: 18px; }
.serp-hang { padding: 15px 0; border-top: 1px solid var(--vien); }
.serp-hang:first-child { border-top: 0; }
.serp-nhan { display: inline-block; font-size: 11.5px; font-weight: 600;
  color: var(--nhe); background: var(--mat); border: 1px solid var(--vien);
  border-radius: 20px; padding: 2px 9px; margin-bottom: 7px; }
.serp-nhan.minh { color: var(--nhan-dam); border-color: var(--nhan-vien); background: var(--nhan-mo); }
.serp-tieu-de { display: block; color: var(--nhan-dam); font-size: 16px;
  text-decoration: none; line-height: 1.4; font-weight: 550; }
.serp-tieu-de:hover { text-decoration: underline; }
.serp-host { color: var(--mo); font-size: 13px; margin-top: 3px; }

/* ── khối kết ─────────────────────────────────────────────────────────────
   Phần cuối là chỗ người đọc quyết định bấm hay đóng tab. Cho nó một tấm nền
   riêng pha màu thương hiệu, viền rõ, để mắt biết báo cáo đã tới đoạn kết
   thay vì trôi tiếp như mọi mục ở trên. */
.muc-ket {
  margin-top: 12px; padding: 30px; border-top: 0;
  border: 1px solid var(--nhan-vien); border-radius: var(--bo-lon);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--nhan) 12%, transparent), transparent 60%),
    linear-gradient(170deg, #fff, color-mix(in oklab, var(--nhan) 6%, #fff));
  box-shadow: var(--anh-2);
}
.muc-ket .the { background: rgba(255, 255, 255, .72); border-color: var(--nhan-vien); box-shadow: none; }
.muc-ket .nut { margin-top: 4px; }
@media (max-width: 560px) { .muc-ket { padding: 24px 20px; } }

/* ── ba kênh liên hệ ──────────────────────────────────────────────────────
   Một việc chính to hẳn, hai lối phụ nhỏ và ngang hàng nhau. Ba nút bằng nhau
   thì người đọc phải chọn giúp mình, mà mỗi quyết định thêm là một chỗ để bỏ
   đi. Nút cao 52px trở lên: ngón cái bấm trượt là mất luôn một lead. */
.lien-he { margin-top: 4px; }
.lh-chinh { min-height: 54px; font-size: 17px; }
.lh-y { margin-top: 10px; font-size: 13.5px; color: var(--nhe); line-height: 1.6; }
.lh-khac { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.lh-nut {
  flex: 1 1 190px; min-height: 52px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; padding: 9px 16px;
  background: var(--mat); border: 1px solid var(--vien-dam); border-radius: 12px;
  text-decoration: none; color: var(--chu);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lh-nut:hover { border-color: var(--nhan); transform: translateY(-1px); box-shadow: var(--anh-1); }
.lh-nut b { font-size: 15px; font-weight: 650; }
.lh-nut span { font-size: 13px; color: var(--mo); }

/* ── thanh tiến độ đọc ────────────────────────────────────────────────────
   Báo cáo dài hơn mười màn hình. Vạch mảnh trên đỉnh cho biết còn bao nhiêu,
   chạy bằng animation-timeline nên không cần một dòng JS và không giật khi
   cuộn nhanh. Trình duyệt chưa hỗ trợ thì vạch ẩn hẳn. */
.tien-do { display: none; }
@supports (animation-timeline: scroll()) {
  .tien-do {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
    transform-origin: 0 50%; scale: 0 1;
    background: linear-gradient(90deg, var(--nhan), color-mix(in oklab, var(--nhan) 45%, var(--cam)));
    animation: doc-den-dau linear both;
    animation-timeline: scroll(root);
  }
  @keyframes doc-den-dau { to { scale: 1 1; } }
}

/* ── hiện dần khi cuộn tới ────────────────────────────────────────────────
   Mỗi mục nhấc lên một nhịp khi lọt vào tầm mắt: báo cáo dài đọc đỡ phẳng,
   và mắt biết mục mới bắt đầu. Chỉ bật khi máy khách không xin giảm chuyển
   động, và chỉ khi trình duyệt làm được bằng CSS — không đánh đổi bằng JS. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rp-chinh > .muc {
      animation: hien-dan linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 46%;
    }
    @keyframes hien-dan {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: none; }
    }
    /* Thanh số liệu chạy từ trái sang khi mục lọt vào tầm mắt */
    .bt-day, .cum-thanh span, .tr-thanh > i {
      animation: chay-thanh var(--eas) both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    @keyframes chay-thanh { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ── in ra giấy hoặc lưu PDF ──────────────────────────────────────────────
   Khách hay gửi báo cáo này cho sếp. Bỏ khung website, bỏ thanh dính, mở hết
   phần gấp lại, và đừng cắt một thẻ làm đôi giữa hai trang. */
@media print {
  html { background: #fff; }
  .dinh, .chan-lon, .thanh-day, .tien-do, .rp-muc-luc { display: none !important; }
  .rp-khung { display: block !important; }
  .bo, .bo-rong { max-width: none; padding: 0; }
  .muc { padding: 20px 0; break-inside: avoid; }
  .the, .goi, .lt-the, .canh, .ci-o, .cum { box-shadow: none; break-inside: avoid; }
  .mo-them > div, .mo-them p { display: block !important; }
  a { color: var(--chu); }
}

/* ── sẵn sàng cho máy trả lời (GEO) ───────────────────────────────────────
   Dùng lại ngôn ngữ hình của bảng tick từng trang: dấu tròn, chữ trạng thái
   đứng cạnh dấu, màu chỉ là lớp thứ hai. Khác một chỗ — cột phải đếm bao
   nhiêu trang đang có, vì mấy dấu hiệu này thường thiếu đồng loạt cả website
   (cùng một bộ giao diện sinh ra chúng). */
/* Mỗi dòng là một nút mở: bấm vào thấy ngay trang nào đang có, trang nào
   thiếu, kèm số đo của chính trang đó. Vùng bấm là CẢ DÒNG, cao tối thiểu
   52px — chệch vài pixel là trượt, mà đây lại là chỗ đáng bấm nhất mục. */
.geo-hang { border-top: 1px solid var(--vien); }
.geo-hang:first-child { border-top: 0; }
.geo-hang > summary, .geo-hang.geo-tinh {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px;
  list-style: none; cursor: pointer; border-radius: var(--bo-nho);
  transition: background .15s ease;
}
.geo-hang.geo-tinh { cursor: default; }
.geo-hang > summary::-webkit-details-marker { display: none; }
.geo-hang > summary:hover { background: var(--nen); }
.geo-hang > summary::after {
  content: "▾"; align-self: center; color: var(--mo); font-size: 12px;
  transition: transform .18s var(--eas);
}
.geo-hang[open] > summary::after { transform: rotate(180deg); }
.geo-chi { padding: 4px 4px 16px 46px; }
.geo-chi-hang { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--vien); }
.geo-chi-hang:first-child { border-top: 0; }
.geo-chi-o { flex: 0 0 16px; font-weight: 800; font-size: 12px; color: var(--xanh); margin-top: 2px; }
.geo-chi-hang.chua .geo-chi-o { color: var(--do); }
.geo-chi-ten { font-size: 14px; font-weight: 650; color: var(--chu); text-decoration: none; }
a.geo-chi-ten:hover { color: var(--nhan-dam); text-decoration: underline; }
.geo-chi-hien { font-size: 12.5px; color: var(--mo); margin-top: 2px; line-height: 1.5; }
@media (max-width: 560px) { .geo-chi { padding-left: 12px; } }
.geo-o { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; margin-top: 1px;
  color: var(--xanh); background: var(--xanh-nen); border: 1px solid var(--xanh-vien); }
.geo-hang.chua .geo-o { color: var(--do); background: var(--do-nen); border-color: #f3c9c6; }
.geo-hang.mot-phan .geo-o { color: var(--vang); background: #fef6e7; border-color: #f2ddb4; }
.geo-chu { flex: 1; min-width: 0; }
.geo-ten { font-weight: 650; font-size: 15px; }
.geo-hien { font-size: 13px; color: var(--mo); margin-top: 2px; }
.geo-can { font-size: 13px; color: var(--do); margin-top: 4px; line-height: 1.5; }
.geo-dem { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 3px 10px; border-radius: 20px; background: var(--nen);
  border: 1px solid var(--vien); color: var(--mo); }
.geo-dem.du { color: var(--xanh); background: var(--xanh-nen); border-color: var(--xanh-vien); }
.geo-dem.mot-phan { color: var(--vang); background: #fef6e7; border-color: #f2ddb4; }
.geo-trang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.geo-the { display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 13px; font-weight: 650; padding: 5px 12px; border-radius: 20px;
  background: var(--mat); border: 1px solid var(--vien); }
.geo-the b { font-weight: 600; color: var(--nhe); }
.geo-the.tot { border-color: var(--xanh-vien); background: var(--xanh-nen); color: var(--xanh); }
.geo-the.vua { border-color: #f2ddb4; background: #fef6e7; color: var(--vang); }
.geo-the.cham { border-color: #f3c9c6; background: var(--do-nen); color: var(--do); }
@media (max-width: 560px) {
  .geo-hang { flex-wrap: wrap; }
  .geo-dem { margin-left: 32px; }
}

/* Khối dấu vết thương hiệu giờ nằm trong mục AI Search (K gộp 18/08): nó trả
   lời đúng vế "ai ngoài kia đang nhắc tới bạn", thứ máy trả lời đối chiếu
   trước khi tin một cái tên. Tách khỏi bảng dấu hiệu bằng một vạch mảnh. */
.geo-th { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--vien); }
.geo-th h3 { font-size: 19px; letter-spacing: -.015em; }

/* ── từ khoá: bảng gọn + khối khoảng trống ────────────────────────────────
   Thứ hạng đã kể ở câu mở đầu nên bảng ở đây chỉ còn một dòng mỗi cụm. Đất
   nhường cho khoảng trống, thứ khách chưa biết và tự tra cũng khó ra. */
.tk-gon { padding: 4px 22px; }
.tk-gon .tk-hang { padding: 12px 0; }
.trong-o {
  margin-top: 18px; padding: 22px 24px; border-radius: var(--bo);
  border: 1px solid var(--nhan-vien);
  background:
    radial-gradient(80% 140% at 100% 0%, color-mix(in oklab, var(--nhan) 10%, transparent), transparent 62%),
    linear-gradient(170deg, #fff, var(--nhan-mo));
  box-shadow: var(--anh-1);
}
.trong-o h3 { font-size: 17px; letter-spacing: -.01em; }
.trong-luoi { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.trong-the {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; background: var(--mat);
  border: 1px solid var(--nhan-vien); box-shadow: var(--anh-1);
  font-size: 14.5px; font-weight: 600; color: var(--chu);
}
.trong-the::before {
  content: "+"; color: var(--nhan-dam); font-weight: 800; font-size: 15px;
}
.trong-y { margin-top: 14px; font-size: 13.5px; color: var(--nhe); line-height: 1.6; max-width: 62ch; }

/* ── điện thoại: nơi phần lớn khách đọc ───────────────────────────────────
   Bốn thứ đổi so với màn rộng: nhịp mục thưa vừa đủ, tiêu đề bớt một bậc,
   thẻ bớt đệm để chữ được nhiều chỗ hơn, và mọi hiệu ứng rê chuột tắt hẳn.
   Trên màn cảm ứng, trạng thái hover dính lại sau cú chạm và trông như lỗi. */
@media (hover: none) {
  .lt-the:hover, .goi:hover, .the:hover, .tr-the:hover, .lh-nut:hover,
  .nut:hover, .bc a:hover { transform: none; box-shadow: var(--anh-1); }
  .nut:hover { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 4px rgba(41, 24, 110, .18),
    0 12px 28px -10px rgba(109, 94, 252, .70); }
}
@media (max-width: 560px) {
  .muc { padding: 30px 0; }
  .bo { padding: 0 16px; }
  .mo-dau-h { font-size: 23px; line-height: 1.3; }
  .mo-dau-y { font-size: 16px; }
  h2 { font-size: 19px; }
  .the, .canh, .khoa, .chang { padding: 18px 16px; }
  .the[style*="22px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .lt-the { padding: 16px; }
  .trong-o { padding: 18px 16px; }
  .tk-hang { flex-direction: column; align-items: flex-start; gap: 8px; }
  .geo-hien, .geo-can { font-size: 12.5px; }
}
/* Đã thử `content-visibility: auto` cho từng mục để lần vẽ đầu nhẹ hơn, rồi
   bỏ: mấy mục này đang chạy hiệu ứng hiện dần bằng `animation-timeline: view()`,
   mà bỏ qua việc dựng hình phần chưa cuộn tới thì hai thứ đá nhau và mục nhấp
   nháy lúc lọt vào tầm mắt. Trang dài thật, nhưng chưa nặng tới mức phải đánh
   đổi (19/08). */

/* ── danh sách bài có link ────────────────────────────────────────────────
   Ba dòng hiện sẵn, phần còn lại nằm sau một cú bấm và cuộn trong hộp. Đổ cả
   danh sách ra thì mục này dài hơn cả phần phân tích, mà nó chỉ là bằng chứng
   phụ. Hộp cuộn giữ bố cục đứng yên dù website có bốn chục bài hay bốn nghìn. */
.bai-o { margin-top: 18px; }
.bai-nhan {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mo); margin-bottom: 8px;
}
.bai-hang {
  display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
  padding: 11px 14px; border: 1px solid var(--vien); border-radius: var(--bo-nho);
  background: var(--mat); text-decoration: none; color: var(--chu);
  transition: border-color .15s ease, transform .15s ease;
}
.bai-hang + .bai-hang, .bai-cuon .bai-hang { margin-top: 8px; }
.bai-hang:hover { border-color: var(--nhan); transform: translateX(2px); }
.bai-tieu-de {
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bai-duong {
  flex: 0 0 auto; max-width: 42%; font-size: 12.5px; color: var(--mo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bai-them { margin-top: 10px; }
.bai-them > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 650; color: var(--nhan-dam);
  padding: 8px 14px; border-radius: 999px;
  background: var(--nhan-mo); border: 1px solid var(--nhan-vien);
}
.bai-them > summary::-webkit-details-marker { display: none; }
.bai-them > summary::after { content: "▾"; }
.bai-them[open] > summary::after { content: "▴"; }
.bai-cuon {
  margin-top: 10px; max-height: 320px; overflow-y: auto; padding-right: 6px;
  scrollbar-width: thin; overscroll-behavior: contain;
}
.bai-cuon::-webkit-scrollbar { width: 8px; }
.bai-cuon::-webkit-scrollbar-thumb { background: var(--vien-dam); border-radius: 20px; }
@media (max-width: 560px) {
  .bai-hang { flex-direction: column; gap: 3px; }
  .bai-duong { max-width: 100%; }
}

/* ── mục lục: vùng bấm rộng ra ────────────────────────────────────────────
   Bản trước chỉ có chữ là bấm được, chệch vài pixel là trượt (K 19/08). Giờ
   cả dòng là một ô bấm cao 40px, nền sáng lên khi rê chuột, vạch bên trái dày
   thêm ở mục đang đọc. */
.rp-muc-luc a {
  padding: 11px 12px 11px 14px; border-radius: 0 10px 10px 0;
  min-height: 40px; display: flex; align-items: center;
}
.rp-muc-luc a:hover { background: var(--nhan-mo); }
.rp-muc-luc a.dang { background: var(--nhan-mo); border-left-width: 3px; padding-left: 13px; }

/* ── ô để lại Zalo trong lúc chờ ──────────────────────────────────────────
   Hiện sẵn từ giây đầu, đặt ngay dưới danh sách bước đang chạy. Đợi tới lúc
   người ta hết kiên nhẫn mới mời thì phần lớn đã đóng tab rồi. */
.cho-zalo {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--bo);
  border: 1px solid var(--nhan-vien);
  background: linear-gradient(170deg, #fff, var(--nhan-mo));
}
.cho-zalo-p { font-size: 14.5px; color: var(--nhe); margin-bottom: 12px; }
.cho-zalo label { font-size: 12.5px; color: var(--mo); font-weight: 600; }

/* Điện thoại: chữ và nhãn đếm chen nhau trong một hàng thì tên dấu hiệu bị ép
   xuống cột hẹp, đọc rất mệt. Xếp lại thành lưới: dấu và mũi tên giữ hàng
   trên, tên chiếm hết bề ngang, nhãn đếm tụt xuống dưới. */
@media (max-width: 560px) {
  .geo-hang > summary, .geo-hang.geo-tinh {
    display: grid; grid-template-columns: 22px 1fr 16px;
    grid-template-areas: "o chu mui" ". dem dem";
    gap: 8px 10px; padding: 14px 2px;
  }
  .geo-hang > summary .geo-o, .geo-hang.geo-tinh .geo-o { grid-area: o; }
  .geo-chu { grid-area: chu; }
  .geo-dem { grid-area: dem; justify-self: start; }
  .geo-hang > summary::after { grid-area: mui; align-self: start; margin-top: 3px; }
}

/* ── ô kể ngành nghề ──────────────────────────────────────────────────────
   Đặt ngay dưới danh sách cụm từ khoá, đúng lúc người đọc đang tự hỏi "mấy
   cụm này có đúng nghề mình không". Mời họ SỬA cho mình chứ đừng mời liên hệ:
   người ta sẵn lòng sửa hơn hẳn sẵn lòng bị bán, mà sửa xong là đã bỏ công
   vào rồi, bước gửi đi sau đó thành việc tự nhiên. */
.nghe-o { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--nhan-vien); }
.nghe-moi { font-size: 14px; color: var(--nhe); line-height: 1.6; max-width: 62ch; }
#form-nghe { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: flex-start; }
#o-nghe {
  flex: 1 1 320px; min-height: 62px; padding: 13px 15px; font: inherit; font-size: 15px;
  border: 1px solid var(--vien-dam); border-radius: 12px; background: #fff;
  color: var(--chu); outline: 0; resize: vertical; line-height: 1.55;
}
#o-nghe:focus { border-color: var(--nhan); box-shadow: 0 0 0 4px color-mix(in oklab, var(--nhan) 16%, transparent); }
#form-nghe .nut { flex: 0 0 auto; }
.nghe-nhan {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mo); margin: 4px 0 8px;
}
.nghe-chu {
  margin: 0; padding: 15px 17px; border-radius: 12px;
  background: var(--mat); border: 1px solid var(--vien);
  font: inherit; font-size: 14.5px; line-height: 1.65; color: var(--chu);
  white-space: pre-wrap; word-break: break-word;
}
.nghe-y { margin-top: 10px; font-size: 13px; color: var(--mo); }
.nghe-nut { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.nut-vien {
  background: var(--mat); color: var(--chu); border: 1px solid var(--vien-dam);
  box-shadow: var(--anh-1);
}
.nut-vien::after { content: none; }
.nut-vien.da-chep { border-color: var(--xanh-vien); background: var(--xanh-nen); color: var(--xanh); }
.geo-chi-url { font-size: 12px; color: var(--nhan-dam); margin-top: 2px; word-break: break-all; }
@media (max-width: 560px) {
  #form-nghe .nut, .nghe-nut .nut { width: 100%; }
}

/* ── hết lượt kiểm tra ────────────────────────────────────────────────────
   Chặn suông thì người ta đóng tab. Khối này nói đúng ranh giới của bản tự
   động rồi mở một cửa khác, nên cú nhắn Zalo thành bước tiếp theo hiển nhiên
   chứ chẳng phải lời chào hàng. */
.het-luot {
  margin-top: 18px; padding: 20px; border-radius: var(--bo);
  border: 1px solid var(--nhan-vien); text-align: left;
  background: linear-gradient(170deg, #fff, var(--nhan-mo));
}
.het-h { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.het-p { margin-top: 8px; font-size: 14.5px; color: var(--nhe); line-height: 1.65; }
.het-nut { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.het-nut .nut { flex: 1 1 auto; }