/* ============================================================================
   tokens.css — Design system nhadatdongnai
   Trích TRỰC TIẾP từ mockup "Trang chủ timnhatot.vn.dc.html" (đã đếm tần suất hex).
   Nạp TRƯỚC mọi CSS port từ kimholding để biến cam/Playfair thành xanh/Be Vietnam Pro.
   Sửa màu ở ĐÂY, không sửa rải rác trong template.
   ========================================================================== */

/* Be Vietnam Pro — tự host (tải sẵn từ Google Fonts v12, KHÔNG gọi Google lúc chạy — spec §6c).
   Font Việt-native: dấu câu chuẩn, hiện đại, hợp sàn BĐS. 6 độ đậm (400–900) × 3 bộ ký tự.
   unicode-range giữ nguyên của Google để trình duyệt chỉ tải bộ nào cần. */
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bvp-vietnamese-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bvp-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bvp-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/bvp-vietnamese-500.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/bvp-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/bvp-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bvp-vietnamese-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bvp-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bvp-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/bvp-vietnamese-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/bvp-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/bvp-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/bvp-vietnamese-800.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/bvp-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/bvp-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/bvp-vietnamese-900.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/bvp-latin-ext-900.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/bvp-latin-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -- Thương hiệu (xanh dương, 117 lần trong mockup) -- */
  --kh-brand:          #1652E4;
  --kh-brand-hover:    #1243C4;
  --kh-brand-tint:     #EDF2FE;   /* nền nhạt, chip active */
  --kh-brand-tint-2:   #F2F6FF;   /* nền nhạt hơn nữa */
  --kh-brand-line:     #DBE6FD;   /* viền trong vùng tint */
  --kh-brand-pale:     #B9CDF9;   /* icon/đường mảnh trên nền brand */

  /* -- Chữ -- */
  --kh-ink:            #10224E;   /* tiêu đề + GIÁ (mockup dùng navy, không phải đỏ) */
  --kh-text:           #22345F;
  --kh-text-2:         #33456F;
  --kh-text-3:         #41527E;
  --kh-muted:          #4A5B85;
  --kh-muted-2:        #64748B;
  --kh-muted-3:        #7C8AAD;
  --kh-placeholder:    #93A0BD;

  /* -- Nền & viền -- */
  --kh-bg:             #FFFFFF;
  --kh-bg-alt:         #F5F7FB;   /* section xen kẽ */
  --kh-bg-footer:      #F8FAFD;
  --kh-hero:           #0E1F4C;   /* nền hero đậm */
  --kh-line:           #E6EAF2;   /* viền thẻ */
  --kh-line-strong:    #DDE4F0;   /* viền ô nhập */

  /* -- Trạng thái -- */
  /* 30/07 audit: 2 màu đậm thêm 1 nấc cho chữ TRẮNG trên badge đạt 4.5:1
     (cũ #0E8F46 = 4.17 · #D97706 = 3.19 — đo WCAG). Sắc gần như cũ. */
  --kh-success:        #0D8641;   /* badge "Mới", "Đang mở bán" — 4.66:1 */
  --kh-warning:        #AC5F05;   /* "Sắp mở bán" — 4.78:1 */
  --kh-danger:         #E5484D;   /* badge số thông báo (khối đặc, chữ đậm) */
  --kh-danger-text:    #E1292F;   /* đỏ làm CHỮ trên nền sáng — 4.61:1 (audit #3) */
  --kh-heart:          #F43F5E;   /* tim đã lưu */

  /* -- Nền phụ hay lặp (audit 30/07: đặt tên cho 3 mã gõ tay 7–11 lần) -- */
  --kh-chip-bg:        #F1F4FA;   /* chip trơn, nút tròn xám */
  --kh-banner-bg:      #E8EDF7;   /* nền khối banner/placeholder ảnh */
  --kh-danger-tint:    #FEF2F2;   /* nền đỏ nhạt (đăng xuất, cảnh báo) */

  /* -- Bo góc (thang 4 mức, theo mockup) -- */
  --kh-r-sm:  8px;    /* badge nhỏ */
  --kh-r:     10px;   /* nút, ô nhập — dùng nhiều nhất (18 lần) */
  --kh-r-md:  12px;
  --kh-r-lg:  16px;   /* ảnh thẻ */
  --kh-r-xl:  18px;   /* thẻ video, khối lớn */
  --kh-r-full: 999px; /* chip, pill */

  /* -- Đổ bóng -- */
  --kh-sh:        0 1px 3px rgba(16,34,78,.08);
  --kh-sh-hover:  0 18px 36px rgba(16,34,78,.12);

  /* ↓ CHỈ dùng cho thẻ có khung ở 2 trang danh sách (.kh-lsgrid--boxed trong
     bds.css). Để riêng, KHÔNG sửa --kh-sh-hover ở trên, vì biến đó đang được
     9 chỗ khác dùng (thẻ bài viết, thẻ môi giới, đăng tin, tài khoản…) — đổi nó
     là đổi lây sang những trang không nằm trong phạm vi yêu cầu. */
  --kh-sh-card:      0 18px 32px -12px rgba(11,27,63,.26), 0 6px 12px -6px rgba(11,27,63,.14);
  --kh-line-hover:   #CBD5E8;   /* viền lúc rê chuột, đậm hơn viền thường 1 bậc */
  --kh-sh-float:  0 18px 48px rgba(6,16,44,.22);
  --kh-sh-cta:    0 8px 20px rgba(22,82,228,.30);

  /* -- Bố cục -- */
  /* 25/07: 1200 → 1600 cho TOÀN SITE. Trước đó chỉ 3 trang danh sách được nới,
     làm header/chân trang lệch với nội dung. Đo ở màn 1440: khung 1200 để hở 144px
     mỗi bên trong khi lưới thẻ vẫn kẹt 2 thẻ/hàng.
     Bài viết KHÔNG bị dòng chữ kéo dài: `.ndn-prose` tự khoá 760px riêng. */
  --kh-container:   1600px;
  --kh-gutter:      24px;
  --kh-section-y:   56px;
  /* Chiều cao TOÀN BỘ header, ĐÃ TÍNH CẢ đường viền đáy 1px (25/07: 69 → 60).
     14 chỗ dùng biến này làm mốc ghim (thanh lọc, cột bản đồ, mục lục bài viết),
     nên nó PHẢI bằng đúng số đo thật của header — trước đây khai 68 trong khi
     header cao 69, khiến thanh lọc lúc cuộn nhích lên 1px và liếm mất đường kẻ đáy.
     Ruột header lấy `calc(var(--kh-header-h) - 1px)` ở home.css. */
  --kh-header-h:    60px;
  /* Chiều cao THANH LỌC ở trang danh sách (26/07: 60 → 50 cho sát header hơn).
     Khai ở đây vì cột bản đồ neo theo "header + thanh lọc"; trước đó số 60 bị chép
     tay ở 4 công thức calc khác nhau — sửa một chỗ là hở dải trống ở 3 chỗ còn lại. */
  --kh-fbar-h:      50px;

  /* -- Chữ: Be Vietnam Pro self-host, KHÔNG gọi Google Fonts (chặn rò dữ liệu + đỡ 1 request) -- */
  --kh-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Breakpoint mockup: 1139 (ẩn nav ngang) · 1023 (tin tức 1 cột) · 767 (mobile) */
@media (max-width: 767px) {
  :root {
    --kh-gutter:    16px;
    --kh-section-y: 40px;
  }
}

/* ---- Reset tối thiểu ---- */
*, *::before, *::after { box-sizing: border-box; }

/* Form control (button/input/select/textarea) KHÔNG tự kế thừa font — trình duyệt ép
   Arial mặc định. Bắt chúng dùng chung font trang, nếu không nút/ô nhập lệch tông. */
button, input, select, textarea, optgroup { font-family: inherit; }

body {
  margin: 0;
  font-family: var(--kh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--kh-text);
  background: var(--kh-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--kh-ink); font-weight: 700; letter-spacing: -.3px; margin: 0; }
a { color: var(--kh-brand); text-decoration: none; }
a:hover { color: var(--kh-brand-hover); }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--kh-brand); color: #fff; }

/* Tailwind v4 và trình duyệt hiện đại bỏ cursor:pointer mặc định của <button> */
button:not(:disabled), [role="button"], a[href], label[for], summary,
select, [role="tab"], [role="menuitem"], [role="option"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ── Chuyển động mượt dùng chung ────────────────────────────────────────────
   Trước đây 96 chỗ đổi màu/nền/viền lúc hover mà KHÔNG khai transition → đổi
   đánh "cạch" một cái, cảm giác thô. Khai một lần ở đây cho mọi thứ bấm được.

   🔴 KHÔNG dùng `transition: all` — `all` ôm luôn width/height/top/left, mỗi lần
   bố cục đổi là trình duyệt phải vẽ lại từng khung hình, máy yếu là khựng. Chỉ liệt
   kê đúng 6 thuộc tính vẽ-lại-rẻ. */
/* Bọc trong :where() để ĐỘ ƯU TIÊN BẰNG 0 — mọi luật riêng của từng khối vẫn
   thắng, đây chỉ là mức nền cho những chỗ chưa khai gì.
   Vì sao phải quét theo tiền tố class chứ không chỉ a/button: rất nhiều hiệu ứng
   nằm ở CON của phần tử được hover (kiểu `.kh-vcard:hover .kh-vcard__veil`), mà
   con thì thường là <div>/<span> — không khai ở đây thì chúng đổi cái "cạch".
   Trừ Leaflet ra: bản đồ tự chạy hiệu ứng riêng bằng transform, chèn thêm
   chuyển động vào là kéo lê lúc phóng to/thu nhỏ. */
:where(
  a, button, [role="button"], summary, label[for], select,
  [class*="kh-"], [class*="ndn-"], [class*="nda-"], [class*="khp-"], [class*="ndp-"], [class*="ndt-"], [class*="kha-"]
):not([class*="leaflet"]) {
  transition:
    background-color .18s ease,
    border-color     .18s ease,
    color            .18s ease,
    box-shadow       .2s  ease,
    opacity          .18s ease,
    transform        .22s cubic-bezier(.22, .61, .36, 1);
}

/* Ai không muốn hiệu ứng (cài đặt hệ điều hành) thì tắt sạch — đã có luật
   prefers-reduced-motion ở cuối file. */

/* ── Ô CHỌN (select) — một kiểu duy nhất cho cả site ────────────────────────
   Trước 25/07: 11 ô select rải 5 trang, 8 ô còn để mũi tên MẶC ĐỊNH của trình
   duyệt (mỗi hệ điều hành vẽ một kiểu, Windows khác Mac khác Android), cao thì
   42/44/45px mỗi nơi một số. Gom về một luật.

   🔴 Mũi tên vẽ bằng ảnh SVG nhúng thẳng vào CSS, KHÔNG dùng phần tử ::after như
   cách cũ: ::after phải có thẻ bọc mới đặt được, mà 8 ô kia không có thẻ bọc.
   🔴 appearance:none phải kèm cả bản -webkit- cho Safari, thiếu là iPhone vẫn
   hiện mũi tên xanh mặc định của nó. */
select {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background-color: var(--kh-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kh-ink);
  cursor: pointer;
}
select:hover:not(:disabled) { border-color: var(--kh-brand-line); }
select:focus { outline: none; border-color: var(--kh-brand); box-shadow: 0 0 0 3px var(--kh-brand-tint); }
select:disabled { background-color: var(--kh-bg-alt); color: var(--kh-muted-3); cursor: not-allowed; }

/* Các ô đã có class riêng đặt padding — độ ưu tiên cao hơn luật `select` ở trên
   nên phải chừa lại chỗ cho mũi tên, không thì chữ chui xuống dưới mũi tên. */
/* 🔴 Vì sao phải viết lại mũi tên ở đây: các khối trên khai `background: <màu>`
   dạng VIẾT TẮT — mà viết tắt thì XOÁ SẠCH background-image đã đặt ở luật `select`.
   Chọn selector `select.ndp-input` (đích danh cả thẻ lẫn class) để độ ưu tiên cao
   hơn `.ndp-input`, thắng bất kể file nào nạp trước nạp sau. */
select.ndp-input,
select.ndt-in,
.nda-add__body select,
.nda-lead__act select,
select.ndl-in {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}

/* iOS (iPhone/iPad Safari) tự phóng to trang khi chạm vào ô CHỮ có cỡ < 16px → vỡ
   giao diện. Nâng MỌI ô nhập lên tối thiểu 16px trên thiết bị CẢM ỨNG. Dùng
   (pointer: coarse) thay vì bề rộng để phủ cả iPad và iPhone khi XOAY NGANG (media
   theo max-width bỏ sót 2 ca này); desktop chuột (pointer: fine) giữ 14px thiết kế.
   !important để thắng cỡ < 16px đặt theo class rải rác ở nhiều file CSS. Chừa
   .kha-otp-box (ô OTP cố ý 19–22px — đã ≥ 16px, không bị phóng to). */
@media (pointer: coarse) {
  input:not(.kha-otp-box), select, textarea { font-size: 16px !important; }
}

/* ── THANH CUỘN MẢNH — dùng chung cho mọi khối cuộn được ───────────────────
   Kiểu gốc lấy từ ô chọn khu vực ở trang chủ (.kh-apick__list): rộng 6px, thanh
   kéo màu viền nhạt, rãnh trong suốt. Trước đây chỉ 1 khối có kiểu này, 8 khối
   còn lại xài thanh cuộn xám to đùng mặc định của Windows.

   Firefox hiểu `scrollbar-width` / `scrollbar-color`; Chrome, Edge, Safari hiểu
   `::-webkit-scrollbar` — phải khai CẢ HAI, thiếu bên nào là bên đó về mặc định. */
.kh-apick__list,      /* ô chọn khu vực — trang chủ            */
.kh-sug,              /* gợi ý tìm kiếm — trang chủ            */
.kh-fdd__panel,       /* bảng lọc xổ xuống — trang khu vực     */
.kh-apanel__list,     /* danh sách khu vực trong bảng lọc      */
.kh-modal__body,      /* thân hộp thoại lọc nâng cao           */
.ndp-ac__list,        /* gợi ý xã cũ — trang đăng tin          */
.khp-pop__body,       /* 3 bảng nhỏ trên header                */
.nda-pop__list,       /* bảng chuông — khu quản lý             */
.ndl-box,             /* hộp để lại thông tin                  */
.nda-accpop,          /* bảng Tài khoản ở cột trái             */
.kh-fdd__opts,
.kh-loairow__tree,
.kh-combo__menu,
.ndn-toc {            /* mục lục trang tĩnh                    */
  scrollbar-width: thin;
  scrollbar-color: var(--kh-line-strong) transparent;
}
.kh-apick__list::-webkit-scrollbar,
.kh-sug::-webkit-scrollbar,
.kh-fdd__panel::-webkit-scrollbar,
.kh-apanel__list::-webkit-scrollbar,
.kh-modal__body::-webkit-scrollbar,
.ndp-ac__list::-webkit-scrollbar,
.khp-pop__body::-webkit-scrollbar,
.nda-pop__list::-webkit-scrollbar,
.ndl-box::-webkit-scrollbar,
.nda-accpop::-webkit-scrollbar,
.kh-fdd__opts::-webkit-scrollbar,
.kh-loairow__tree::-webkit-scrollbar,
.kh-combo__menu::-webkit-scrollbar,
.ndn-toc::-webkit-scrollbar { width: 6px; height: 6px; }

.kh-apick__list::-webkit-scrollbar-thumb,
.kh-sug::-webkit-scrollbar-thumb,
.kh-fdd__panel::-webkit-scrollbar-thumb,
.kh-apanel__list::-webkit-scrollbar-thumb,
.kh-modal__body::-webkit-scrollbar-thumb,
.ndp-ac__list::-webkit-scrollbar-thumb,
.khp-pop__body::-webkit-scrollbar-thumb,
.nda-pop__list::-webkit-scrollbar-thumb,
.ndl-box::-webkit-scrollbar-thumb,
.nda-accpop::-webkit-scrollbar-thumb,
.kh-fdd__opts::-webkit-scrollbar-thumb,
.kh-loairow__tree::-webkit-scrollbar-thumb,
.kh-combo__menu::-webkit-scrollbar-thumb,
.ndn-toc::-webkit-scrollbar-thumb { background: var(--kh-line-strong); border-radius: 3px; }

.kh-apick__list::-webkit-scrollbar-thumb:hover,
.kh-sug::-webkit-scrollbar-thumb:hover,
.kh-fdd__panel::-webkit-scrollbar-thumb:hover,
.kh-apanel__list::-webkit-scrollbar-thumb:hover,
.kh-modal__body::-webkit-scrollbar-thumb:hover,
.ndp-ac__list::-webkit-scrollbar-thumb:hover,
.khp-pop__body::-webkit-scrollbar-thumb:hover,
.nda-pop__list::-webkit-scrollbar-thumb:hover,
.ndl-box::-webkit-scrollbar-thumb:hover,
.nda-accpop::-webkit-scrollbar-thumb:hover,
.kh-fdd__opts::-webkit-scrollbar-thumb:hover,
.kh-loairow__tree::-webkit-scrollbar-thumb:hover,
.kh-combo__menu::-webkit-scrollbar-thumb:hover,
.ndn-toc::-webkit-scrollbar-thumb:hover { background: var(--kh-muted-2); }

.kh-apick__list::-webkit-scrollbar-track,
.kh-sug::-webkit-scrollbar-track,
.kh-fdd__panel::-webkit-scrollbar-track,
.kh-apanel__list::-webkit-scrollbar-track,
.kh-modal__body::-webkit-scrollbar-track,
.ndp-ac__list::-webkit-scrollbar-track,
.khp-pop__body::-webkit-scrollbar-track,
.nda-pop__list::-webkit-scrollbar-track,
.ndl-box::-webkit-scrollbar-track,
.nda-accpop::-webkit-scrollbar-track,
.kh-fdd__opts::-webkit-scrollbar-track,
.kh-loairow__tree::-webkit-scrollbar-track,
.kh-combo__menu::-webkit-scrollbar-track,
.ndn-toc::-webkit-scrollbar-track { background: transparent; }

/* Chỉ hiện cho trình đọc màn hình (H1 SEO ẩn ở hero) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Bố cục dùng chung */
.kh-container { width: 100%; max-width: var(--kh-container); margin: 0 auto; padding: 0 var(--kh-gutter); }
.kh-section   { padding: var(--kh-section-y) 0; }
.kh-section--alt { background: var(--kh-bg-alt); }

/* Vòng focus — không tắt outline (giữ dùng được bằng bàn phím) */
:focus-visible { outline: 2px solid var(--kh-brand); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}