/* ══════════════════════════════════════════════════════════════
   FindBase — giao diện công khai

   Bộ thiết kế lấy từ design/home-seo-rich-v2.html: bảng màu, chữ, bo góc,
   đổ bóng, nền lưới mờ, thanh đầu trang kính mờ.

   KHÁC BẢN MẪU Ở NHỮNG CHỖ SAU, VÀ ĐỀU CÓ LÝ DO:
     · không có thanh giá vàng chạy ngang — bản mẫu ghi cứng hai con số
       mâu thuẫn nhau trên cùng một trang;
     · không có ô "Mã số thuế cá nhân 12 số" ở thanh tìm kiếm — 12 số là
       số căn cước, và luồng đó thuộc Giai đoạn 2;
     · không có liên kết "API Dữ liệu" ở chân trang — F7.4 ghi rõ không làm;
     · chân trang có lối vào yêu cầu gỡ dữ liệu — F2.9, P0 bắt buộc.
   ══════════════════════════════════════════════════════════════ */

/* Thuộc tính hidden phải thắng MỌI khai báo display.
   Quy tắc mặc định của trình duyệt là [hidden]{display:none}, cùng độ ưu tiên với
   một lớp — nên .bang-luu{display:flex} viết sau là đè mất nó, và một bảng đáng lẽ
   ẩn lại hiện ra thành vạch kẻ 1px giữa màn hình. Cùng lỗi ấy dính cả
   .ray-luu và .dem-luu. */
[hidden]{display:none !important}

:root{
  --bg:#f6f8fa;
  --surface:#fdfdfe;
  --surface-glass:rgba(253,253,254,.9);
  --surface-glass-card:rgba(253,253,254,.95);
  --surface-2:#f1f4f8;
  --border:#e3e8ef;
  --border-subtle:rgba(226,232,240,.8);

  --text-main:#2f3a4a;
  --text-muted:#525f70;
  --text-sub:#64707f;
  --text-dim:#828d9d;

  --primary:#3568c4;
  --primary-dark:#2b559f;
  --primary-light:#5b8ad6;
  --primary-glow:rgba(53,104,196,.10);
  --primary-soft:#eef3fb;
  --primary-soft-border:#cfdcf0;

  --cyan:#2b6a94;      --cyan-soft:#eef6fb;
  --emerald:#2f7d63;   --emerald-soft:#edf7f2;
  --amber:#8f5f16;     --amber-soft:#faf5e9;
  --rose:#ab4a5e;      --rose-soft:#f9eef0;
  --purple:#5d61b0;    --purple-soft:#f2f2fa;

  --shadow-subtle:0 2px 8px -2px rgba(47,58,74,.035);
  --shadow-card:0 6px 18px -6px rgba(47,58,74,.045), 0 2px 5px -2px rgba(47,58,74,.02);
  --shadow-float:0 16px 32px -14px rgba(47,58,74,.07), 0 4px 10px -4px rgba(47,58,74,.025);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:9999px;

  /* Cả ba đều có bộ ký tự tiếng Việt — xem ghi chú ở _Layout.cshtml về việc
     Outfit và Fira Code thì không, và hậu quả là gì. Đổi phông ở đây thì kiểm
     lại bằng: tải tệp css2 của Google và tìm chuỗi "vietnamese". */
  --f-heading:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",Consolas,monospace;

  /* ── Những chỗ trước đây viết màu thẳng vào luật ──
     Gom lại thành token vì mỗi cái đều phải đổi theo giao diện. Xem khối
     "BA GIAO DIỆN" ngay dưới. */
  --nen-dom-1:rgba(53,104,196,.028);   /* quầng sáng góc trên trái  */
  --nen-dom-2:rgba(49,121,168,.028);   /* quầng sáng góc trên phải  */
  --nen-luoi:rgba(227,232,239,.18);    /* lưới ca-rô 44px           */
  --topbar-nen:rgba(248,250,252,.78);  /* thanh đầu trang, kính mờ  */
  --hang-hover:rgba(241,245,249,.55);  /* hàng bảng khi rê chuột    */
  --vien-emerald:#c3ded1;
  --vien-rose:#e6ced4;
  --vien-rose-nhat:#eed7dd;
  --nen-canh-bao:#fffbfc;
  --dam-1:#5a6779;  --dam-2:#485465;   /* nút xám đậm, trạng thái "đang" */
  --dam-1-ho:#48546a; --dam-2-ho:#3c4757;
  --chu-nguoc:#fff;                    /* chữ trên nền đặc, mọi giao diện */
  --lop-trang-mo:rgba(255,255,255,.7); /* huy hiệu trên nền màu     */
  --nen-o-tra:#fff;                    /* ô nhập trong khối tra ở trang chủ */
  --sao-chep-ho:#e4ebf6;
  --man-mo-nen:rgba(15,23,42,.42);
  --ok:#16a34a;
  --dai-tieu-de:linear-gradient(135deg,#3d4a5c 0%,#3568c4 60%,#2b6a94 100%);
  --dai-o-tra:linear-gradient(120deg,#eaeef7,#e8eff8 45%,#e6f2f6);
  --vien-kinh:rgba(255,255,255,.9);   /* gờ sáng trên khối kính mờ */
  --quang-kinh:rgba(99,102,241,.08);
  --vien-the:rgba(226,232,240,.95);
  --nen-goi-y:rgba(238,242,255,.9);
  --nen-vien-thuoc:rgba(255,255,255,.85);
  --amber-luu-ho:#f2e7d4;

  /* ── Bốn tên gọi khác của bốn token trên ──
     Chúng được DÙNG ở 26 chỗ trong tệp này nhưng chưa bao giờ được KHAI.
     var() trỏ vào một biến không tồn tại thì cả khai báo hỏng ở mức giá trị
     tính toán, mà với thuộc tính rút gọn thì hỏng cả bộ: "border:1px solid
     var(--line)" không ra viền mảnh hơn — nó ra KHÔNG VIỀN, vì border-style
     rơi về none. Hai mươi đường viền lặng lẽ không vẽ, ở mọi giao diện.

     Lỗi này có từ trước, chỉ lộ ra khi làm giao diện tối: nền tối thì thẻ tách
     nhau bằng viền chứ không bằng độ sáng, nên chỗ thiếu viền nhìn ra ngay.

     Giữ tên cũ thay vì đi sửa 26 chỗ gọi: đây là hai lối gọi của cùng một thứ,
     và mọi giao diện chỉ cần định nghĩa bộ gốc. */
  --line:var(--border);
  --line-nhat:var(--border-subtle);
  --text:var(--text-main);
  --primary-wash:var(--primary-soft);
}

/* ══════════════════════════════════════════════════════════════
   BA GIAO DIỆN
   ══════════════════════════════════════════════════════════════

   Mặc định — không có data-theme, hoặc data-theme="diu" — là TÔNG DỊU: nền
   #f6f8fa hơi ngả lam, thẻ trắng nổi lên trên. Đó là diện mạo trang đã chạy
   từ đầu, và nó vẫn là mặc định: người đang quen mắt không bị đổi giao diện
   dưới chân chỉ vì có thêm hai lựa chọn.

   Hai giao diện kia CHỈ ghi đè token, không đụng tới một luật bố cục nào.
   Nghĩa là muốn biết giao diện tối có hỏng chỗ nào không, chỉ cần đi tìm màu
   nào còn viết thẳng vào luật thay vì gọi token — chứ không phải đọc lại cả
   2.500 dòng.

   VÌ SAO :root[data-theme=…] CHỨ KHÔNG PHẢI prefers-color-scheme: đây là lựa
   chọn của người dùng, không phải của hệ điều hành. Máy đặt tối mà người ta
   vẫn muốn trang này sáng thì đó là quyền của họ. Trang không đoán hộ.
   ══════════════════════════════════════════════════════════════ */

/* ── SÁNG: trắng thật, không ngả lam ────────────────────────
   Khác tông dịu đúng ở một chỗ: nền trang là trắng tinh, nên thẻ không còn
   "nổi" bằng độ sáng nữa mà phải nổi bằng VIỀN. Viền vì thế đậm hơn một bậc,
   không thì cả trang phẳng lì thành một mảng trắng. */
:root[data-theme="sang"]{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-glass:rgba(255,255,255,.9);
  --surface-glass-card:rgba(255,255,255,.95);
  --surface-2:#f4f6f9;
  --border:#dde3ec;
  --border-subtle:rgba(221,227,236,.85);

  --nen-dom-1:rgba(53,104,196,.02);
  --nen-dom-2:rgba(49,121,168,.02);
  --nen-luoi:rgba(226,232,240,.30);
  --topbar-nen:rgba(255,255,255,.82);
  --hang-hover:rgba(244,246,249,.75);
  --nen-o-tra:#fff;
  --sao-chep-ho:#eef2f8;
  --vien-kinh:rgba(232,237,244,.9);   /* nền đã trắng thì gờ trắng vô hình */
  --vien-the:#dde3ec;
  --nen-vien-thuoc:#fff;
}

/* ── TỐI ────────────────────────────────────────────────────
   Nền #151b25 chứ không phải đen tuyền: đen tuyền cạnh chữ trắng cho độ
   tương phản kịch trần, và mắt đọc bảng số hàng giờ thì mỏi rất nhanh.

   Chữ chính #dfe5ee chứ không phải #fff, cùng một lý do.

   Năm màu ngữ nghĩa (emerald, rose, amber, cyan, purple) phải SÁNG HẲN LÊN:
   bản sáng chọn chúng để đọc rõ trên nền trắng, đặt nguyên như thế lên nền
   tối thì chữ chìm hẳn. Còn nền "-soft" của chúng thì ngược lại, phải TỐI
   hẳn xuống — nền phấn của giao diện sáng đặt vào đây sẽ chói hơn cả thẻ.

   Bóng đổ chuyển sang đen đặc. Bóng xám nhạt kiểu giao diện sáng đặt trên nền
   tối thì không thấy gì, mà thẻ mất bóng là mất luôn thứ tự lớp. */
:root[data-theme="toi"]{
  --bg:#151b25;
  --surface:#1d242f;
  --surface-glass:rgba(29,36,47,.9);
  --surface-glass-card:rgba(29,36,47,.95);
  --surface-2:#252d3a;
  --border:#333c4b;
  --border-subtle:rgba(51,60,75,.8);

  --text-main:#dfe5ee;
  --text-muted:#b3bccb;
  --text-sub:#98a3b4;
  --text-dim:#7b8697;

  --primary:#6f9ce8;
  --primary-dark:#8db3ef;   /* "dark" ở đây là bậc NỔI HƠN, không phải tối hơn */
  --primary-light:#4d7cc9;
  --primary-glow:rgba(111,156,232,.16);
  --primary-soft:#22314a;
  --primary-soft-border:#3b537c;

  --cyan:#6bb3dd;      --cyan-soft:#1b2c38;
  --emerald:#63c39d;   --emerald-soft:#16302a;
  --amber:#d8a44e;     --amber-soft:#2e2718;
  --rose:#e58198;      --rose-soft:#33212a;
  --purple:#9a9de0;    --purple-soft:#25263c;

  --shadow-subtle:0 2px 8px -2px rgba(0,0,0,.4);
  --shadow-card:0 6px 18px -6px rgba(0,0,0,.5), 0 2px 5px -2px rgba(0,0,0,.3);
  --shadow-float:0 16px 32px -14px rgba(0,0,0,.6), 0 4px 10px -4px rgba(0,0,0,.35);

  --nen-dom-1:rgba(111,156,232,.05);
  --nen-dom-2:rgba(107,179,221,.04);
  --nen-luoi:rgba(255,255,255,.028);
  --topbar-nen:rgba(21,27,37,.82);
  --hang-hover:rgba(37,45,58,.6);
  --vien-emerald:#2d5a49;
  --vien-rose:#5c3944;
  --vien-rose-nhat:#4b2f38;
  --nen-canh-bao:#2a1f24;
  --dam-1:#3a4453;  --dam-2:#2c3542;
  --dam-1-ho:#46515f; --dam-2-ho:#38414f;
  --lop-trang-mo:rgba(255,255,255,.14);
  --nen-o-tra:#252d3a;
  --sao-chep-ho:#2f3a4a;
  --man-mo-nen:rgba(0,0,0,.6);
  --ok:#3ec27a;
  /* Dải chữ tiêu đề: bản sáng đi từ xám than sang lam đậm. Đảo lại thành
     sáng dần, vì trên nền tối thì đầu dải xám than đọc thành một vệt mờ. */
  --dai-tieu-de:linear-gradient(135deg,#e8edf6 0%,#7ba7ec 55%,#6bb3dd 100%);
  --dai-o-tra:linear-gradient(120deg,#232c3b,#1f2a3a 45%,#1c2c34);
  --vien-kinh:rgba(255,255,255,.06);
  --quang-kinh:rgba(111,156,232,.10);
  --vien-the:#333c4b;
  --nen-goi-y:rgba(34,49,74,.9);
  --nen-vien-thuoc:rgba(37,45,58,.85);
  --amber-luu-ho:#3d3320;
}

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

body{
  min-height:100vh;font-family:var(--f-body);color:var(--text-main);
  background-color:var(--bg);
  background-image:
    radial-gradient(at 15% 15%, var(--nen-dom-1) 0px, transparent 50%),
    radial-gradient(at 85% 12%, var(--nen-dom-2) 0px, transparent 48%),
    linear-gradient(to right, var(--nen-luoi) 1px, transparent 1px),
    linear-gradient(to bottom, var(--nen-luoi) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,44px 44px,44px 44px;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ── thanh đầu trang, kính mờ, dính trên ─────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:var(--topbar-nen);border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;gap:20px;padding:14px 28px;
}
.brandmark{
  display:flex;align-items:center;gap:9px;font-family:var(--f-heading);
  font-weight:800;font-size:19px;color:var(--text-main);text-decoration:none;letter-spacing:-.02em}
.brandmark:hover{text-decoration:none}
/* Khai width/height thật trên thẻ img để trình duyệt chừa sẵn chỗ; không có
   thì bố cục giật một nhịp khi ảnh tải xong — đúng thứ Google đo là CLS. */
.brandmark img{height:34px;width:auto;display:block}
/* Chọn bản logo theo giao diện. Đặt ngay đây, cạnh luật kích thước, để ai sửa
   chiều cao logo cũng thấy luôn là có hai tệp chứ không phải một.

   PHẢI viết "img.gd-toi" chứ không phải ".gd-toi": luật ngay trên là
   ".brandmark img" — hai mảnh, nên nó thắng một mảnh ".gd-toi" và cả hai logo
   cùng hiện, nằm cạnh nhau trên thanh đầu trang. */
.brandmark img.gd-toi{display:none}
:root[data-theme="toi"] .brandmark img.gd-sang{display:none}
:root[data-theme="toi"] .brandmark img.gd-toi{display:block}
/* Bản có huy hiệu MST: huy hiệu chiếm phần trên nên phải cao hơn thì khối chữ
   mới bằng bản thường (473/669 chiều cao ảnh là chữ). 46px cho ra chữ cao
   32,5px — coi như không đổi so với 34px. */
.brandmark img.mst{height:46px}
/* Thu đệm dọc lại để thanh chỉ dày thêm 4px thay vì 12px. */
.topbar.co-nganh{padding-top:10px;padding-bottom:10px}
@media (max-width:640px){
  .brandmark img.mst{height:38px}
}
/* ── nút ba gạch, chỉ có trên màn hình hẹp ──
   Ô đánh dấu ẩn đi nhưng VẪN nhận được tiêu điểm bàn phím — display:none thì
   nó rơi khỏi thứ tự tab và nhãn không bấm bằng phím cách được nữa. */
.cong-tac-menu{position:absolute;width:1px;height:1px;opacity:0;margin:0;
  pointer-events:none}
.nut-menu{display:none}

.topbar nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}

/* ── nút tài khoản trên thanh ── */
.nut-tk{position:relative;display:grid;place-items:center;width:38px;height:38px;
  flex:none;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  color:var(--text-muted);text-decoration:none;transition:.15s}
.nut-tk:hover{border-color:var(--primary-soft-border);background:var(--primary-soft);
  color:var(--primary-dark);text-decoration:none}
.nut-tk svg{width:19px;height:19px}
/* Số mục đã lưu. Nền đậm và chữ trắng để đọc được ở cỡ 10px trên nền tròn. */
.tk-dem{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--primary);color:#fff;font-family:var(--f-mono);
  font-size:10.5px;font-weight:700;line-height:1;border:2px solid var(--surface)}
.topbar nav a{
  padding:8px 15px;border-radius:var(--r-full);text-decoration:none;
  color:var(--text-muted);font-size:14.5px;font-weight:600;transition:.15s}
.topbar nav a:hover{background:var(--surface-2);color:var(--text-main);text-decoration:none}
.topbar nav a.on{background:var(--primary-soft);color:var(--primary-dark)}

/* ── mục thả xuống trong thanh điều hướng ──
   Ba công cụ địa giới hành chính gom vào một ô. Dựng bằng <details> nên chạy
   được bằng chạm và bằng bàn phím mà không cần JavaScript. */
.menu-thu{position:relative}
.menu-thu > summary{
  display:flex;align-items:center;gap:5px;list-style:none;cursor:pointer;
  padding:8px 13px 8px 15px;border-radius:var(--r-full);
  color:var(--text-muted);font-size:14.5px;font-weight:600;transition:.15s;
  -webkit-tap-highlight-color:transparent}
.menu-thu > summary::-webkit-details-marker{display:none}
.menu-thu > summary:hover{background:var(--surface-2);color:var(--text-main)}
.menu-thu.on > summary{background:var(--primary-soft);color:var(--primary-dark)}
.menu-thu > summary svg{width:15px;height:15px;transition:transform .15s}
.menu-thu[open] > summary svg{transform:rotate(180deg)}
.menu-thu[open] > summary{background:var(--surface-2);color:var(--text-main)}

.thu-noi-dung{
  position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:290px;
  display:flex;flex-direction:column;gap:2px;padding:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,32,60,.14)}
.thu-noi-dung a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none}
.thu-noi-dung a b{display:block;font-size:14px;font-weight:600;color:var(--text-main)}
.thu-noi-dung a span{display:block;margin-top:1px;font-size:12.5px;color:var(--text-sub);
  font-weight:400;line-height:1.4}
.thu-noi-dung a:hover{background:var(--surface-2);text-decoration:none}
.thu-noi-dung a.on{background:var(--primary-soft)}
.thu-noi-dung a.on b{color:var(--primary-dark)}

/* Trên màn hình hẹp thanh điều hướng xuống hàng riêng và chiếm hết bề ngang,
   nên thả xuống dạng hộp nổi neo mép phải sẽ tràn ra ngoài. Cho nó chảy theo
   dòng luôn. */
@media (max-width:760px){
  .thu-noi-dung{position:static;min-width:0;box-shadow:none;margin-top:4px}

  /* Bảy mục không nằm vừa một hàng ở 390px. Trước đây chúng xuống bốn hàng
     chen cạnh logo và ăn gần 370px chiều cao — người mở trang trên điện thoại
     thấy menu trước, nội dung sau. Giờ gói lại sau một nút. */
  /* Thứ tự trên màn hình hẹp: logo — khoảng trống — tài khoản — ba gạch.
     Nút tài khoản khai trong mã SAU thẻ nav, nên phải đảo bằng order, kẻo nó
     rơi xuống bên phải nút ba gạch. */
  .nut-tk{order:2;margin-left:auto}
  .nut-menu{order:3;
    display:grid;place-items:center;width:42px;height:42px;flex:none;
    cursor:pointer;border-radius:12px;
    border:1px solid var(--border);background:var(--surface);
    color:var(--text-main);-webkit-tap-highlight-color:transparent}
  .nut-menu svg{width:21px;height:21px}
  /* Ba gạch đổi thành dấu nhân khi đang mở: nút phải nói nó làm gì TIẾP THEO. */
  .nut-menu .v-dong{display:none}
  .cong-tac-menu:checked ~ .nut-menu .v-mo{display:none}
  .cong-tac-menu:checked ~ .nut-menu .v-dong{display:block}
  .cong-tac-menu:checked ~ .nut-menu{background:var(--primary-soft);
    border-color:var(--primary-soft-border);color:var(--primary-dark)}
  .cong-tac-menu:focus-visible ~ .nut-menu{outline:2px solid var(--primary);
    outline-offset:2px}

  /* Tấm thả xuống trải hết bề ngang, neo vào chính thanh — .topbar đã
     position:sticky nên nó là mốc cho position:absolute. */
  .topbar nav{display:none}
  .cong-tac-menu:checked ~ nav{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;z-index:45;
    padding:8px;border-bottom:1px solid var(--border);
    background:var(--surface);box-shadow:0 14px 30px rgba(15,32,60,.12);
    max-height:calc(100vh - 70px);overflow-y:auto}
  /* Mục trong tấm thả xuống là DÒNG, không phải viên thuốc xếp ngang: ngón
     tay cần vùng chạm cao, và mắt cần một cột thẳng để dò. */
  .cong-tac-menu:checked ~ nav > a,
  .cong-tac-menu:checked ~ nav .menu-thu > summary{
    padding:11px 14px;border-radius:10px;font-size:15px}
  .cong-tac-menu:checked ~ nav .menu-thu > summary{justify-content:space-between}
}

main{max-width:1080px;margin:0 auto;padding:38px 24px 72px}

h1{font-family:var(--f-heading);font-size:38px;font-weight:800;line-height:1.18;
  letter-spacing:-.025em;margin:0 0 12px}
h2{font-family:var(--f-heading);font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:34px 0 14px}
h3{font-family:var(--f-heading);font-size:15px;font-weight:700;margin:0 0 6px}

.lede{color:var(--text-muted);font-size:16.5px;margin:0 0 26px;max-width:66ch}
.muted,.mo{color:var(--text-sub)}
.mo{font-size:13.5px;margin:0 0 16px}
.mono,.ma{font-family:var(--f-mono);font-size:.93em;letter-spacing:-.01em}
.hint{font-size:14.5px;line-height:1.6;color:var(--text-sub);margin:0 0 30px;padding-left:4px}
.sep{color:var(--text-dim);margin:0 6px}

/* ── ô tìm kiếm ───────────────────────────────────────────── */
.searchbar{
  display:flex;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-full);
  box-shadow:var(--shadow-float);max-width:860px;margin:0 auto 14px;
  transition:.18s}
.searchbar:focus-within{border-color:var(--primary-light);
  box-shadow:var(--shadow-float),0 0 0 4px var(--primary-glow)}
.searchbar input{
  flex:1;min-width:0;border:none;background:none;font:inherit;font-size:16.5px;
  padding:19px 10px 19px 28px;color:var(--text-main)}
.searchbar input:focus{outline:none}
.searchbar input::placeholder{color:var(--text-dim)}
.searchbar button{
  font:inherit;font-family:var(--f-heading);font-weight:700;font-size:15px;cursor:pointer;
  border:none;background:none;color:var(--primary);padding:19px 30px 19px 18px;
  border-radius:var(--r-full)}
/* Nút này PHẢI mang lớp riêng. Quy tắc button:not([class]):hover bên dưới
   phủ nền xanh đậm lên mọi nút không khai lớp, mà ở đây chữ cũng đang là xanh
   đậm — xanh đậm trên xanh đậm là mất chữ. Chính kiểu lỗi mà ghi chú ở quy tắc
   ấy đã cảnh báo, chỉ là còn sót đúng nút này. */
.searchbar .nut-tim:hover{background:var(--primary-soft);color:var(--primary-dark)}

/* ── số liệu, đọc từ kho ──────────────────────────────────── */
.so-lieu{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:0 0 42px}
.so-lieu .mot-so{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 22px;box-shadow:var(--shadow-subtle)}
.so-lieu .con-so{font-family:var(--f-mono);font-size:27px;font-weight:600;
  line-height:1.1;color:var(--primary)}
.so-lieu .nhan{font-size:13px;color:var(--text-sub);margin-top:7px;line-height:1.5}

/* ── thẻ ──────────────────────────────────────────────────── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.card{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px 22px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-subtle);transition:.18s}
.card:hover{border-color:var(--primary-soft-border);box-shadow:var(--shadow-card);
  transform:translateY(-2px);text-decoration:none}
.card .t{font-family:var(--f-heading);font-weight:700;font-size:16px;margin-bottom:5px}
.card .s{font-size:13.5px;color:var(--text-sub);line-height:1.55}

.chip{display:inline-block;font-size:12px;padding:3px 11px;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted)}
.chip.place{background:var(--emerald-soft);color:var(--emerald);border-color:var(--vien-emerald)}
.chip.biz{background:var(--primary-soft);color:var(--primary-dark);border-color:var(--primary-soft-border)}

.note{
  background:var(--surface-glass-card);border:1px solid var(--border);
  border-left:3px solid var(--primary);border-radius:var(--r-sm);
  padding:16px 20px;font-size:14px;line-height:1.7;color:var(--text-muted);margin:26px 0 0}
.note b{color:var(--text-main)}

.pill-list{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px;padding:0}
.pill-list li a{
  display:inline-block;padding:6px 13px;border-radius:var(--r-full);font-size:13.5px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-muted);
  text-decoration:none}
.pill-list li a:hover{border-color:var(--primary-soft-border);color:var(--primary-dark);
  background:var(--primary-soft);text-decoration:none}

/* ── bảng ─────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-subtle)}
/* Hộp báo rỗng nằm trong .tablewrap, mà khung ấy không có đệm — nó sinh ra để
   ôm một cái bảng, và bảng thì tự có đệm trong từng ô. Chữ trần thả vào đó là
   dính sát viền. */
.empty{padding:22px 24px;font-size:15px;line-height:1.6;color:var(--text-sub)}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;font-family:var(--f-heading);font-size:12px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--text-sub);
  padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);
  white-space:nowrap}
tbody td{padding:11px 16px;border-top:1px solid var(--border-subtle);vertical-align:top}
tbody tr:hover td{background:var(--hang-hover)}

.phan-trang{display:flex;align-items:center;gap:14px;margin:16px 0 0;font-size:14px}
.phan-trang a{padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface);text-decoration:none;font-weight:600}
.phan-trang a:hover{border-color:var(--primary-soft-border);background:var(--primary-soft);
  text-decoration:none}

/* ══════════ Trang hồ sơ doanh nghiệp ══════════ */
.ho-so{max-width:880px;margin:0 auto}
.ho-so-dau{margin:0 0 26px}
.ho-so-dau .loai{font-size:12px;color:var(--text-sub);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700}
.ho-so-dau .loai .chi-nhanh{margin-left:9px;padding:2px 9px;border-radius:var(--r-full);
  background:var(--purple-soft);color:var(--purple);text-transform:none;letter-spacing:0}
.ho-so-dau h1{font-size:29px;line-height:1.34;margin:8px 0 12px}
.ma-va-trang-thai{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ma-va-trang-thai .ma{font-size:18px;font-weight:500;color:var(--text-muted)}
.trang-thai{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted)}
.trang-thai.dang-hoat-dong{background:var(--emerald-soft);color:var(--emerald);border-color:var(--vien-emerald)}
.trang-thai.ngung{background:var(--rose-soft);color:var(--rose);border-color:var(--vien-rose)}
.trang-thai.nho{font-size:11.5px;padding:2px 9px}
.ten-khac{margin-top:10px;font-size:14px;color:var(--text-sub);display:flex;gap:16px;flex-wrap:wrap}

.khoi{background:var(--surface-glass-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:26px 28px;margin:0 0 16px;box-shadow:var(--shadow-card)}
.khoi h2{font-size:15px;margin:0 0 16px;color:var(--primary-dark);
  text-transform:uppercase;letter-spacing:.05em}
.khoi h3{font-size:13.5px;margin:0 0 7px}
.khoi h3 .tu{font-weight:400;color:var(--text-dim);font-size:12px;margin-left:5px}
.khoi.nguon{background:var(--surface-2)}

dl.cap{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:9px 22px;
  margin:0;font-size:14.5px}
dl.cap dt{color:var(--text-sub)}
dl.cap dd{margin:0}
dl.cap.tu-con-so{margin-bottom:18px;font-size:14px}

.dia-chi-tho{margin:0 0 16px;font-size:15.5px;line-height:1.6}
.hai-he{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:660px){.hai-he{grid-template-columns:1fr}}
.hai-he .he{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:16px 18px}
.hai-he .don-vi{margin:0;font-size:14.5px;line-height:1.55}
.chua-chac{margin:8px 0 0;font-size:13px;color:var(--text-sub);line-height:1.6}
ul.ung-vien{margin:9px 0 0;padding-left:20px;font-size:13.5px;line-height:1.8}
.do-chac-chan{margin:16px 0 0;font-size:13px;color:var(--text-sub)}

table.bang-nganh td{padding:9px 10px;border-top:1px solid var(--border-subtle)}
table.bang-nganh tr:first-child td{border-top:none}
table.bang-nganh .ma-nganh{font-family:var(--f-mono);color:var(--text-sub);
  width:70px;white-space:nowrap}
table.bang-nganh tr.chinh td{background:var(--primary-soft)}
table.bang-nganh .nhan{margin-left:9px;font-size:11px;font-weight:600;padding:2px 9px;
  border-radius:var(--r-full);background:var(--primary);color:#fff}
table.bang-nganh .chi-tiet{color:var(--text-sub);font-size:13px;margin-top:4px}

ul.lien-he,ul.cay,ul.danh-sach{list-style:none;margin:0;padding:0;font-size:14.5px}
ul.lien-he li,ul.cay li{padding:9px 0;border-top:1px solid var(--border-subtle)}
ul.lien-he li:first-child,ul.cay li:first-child{border-top:none}
ul.lien-he .loai-so{font-size:11.5px;color:var(--text-dim);margin-left:10px;
  text-transform:uppercase;letter-spacing:.04em}
ul.cay li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
ul.danh-sach{padding-left:20px;list-style:disc;line-height:1.8}
ul.danh-sach li{margin-bottom:8px}
.chinh-sach{margin:16px 0 0;font-size:13px;color:var(--text-sub);line-height:1.65}
.khuyen-cao{margin:18px 0 0;font-size:13px;color:var(--text-sub);line-height:1.7}

/* ── khối xuất hoá đơn: dựng theo tờ HOÁ ĐƠN ĐỎ ──
   Người dùng khối này là kế toán, và thứ họ chép sang là tờ hoá đơn giá trị
   gia tăng. Cho khối trông đúng như tờ giấy ấy thì họ nhận ra ngay công dụng
   mà không phải đọc tiêu đề.

   Ba chi tiết lấy từ mẫu hoá đơn thật:
     · nền kem ngả hồng, không phải trắng
     · viền và chữ màu đỏ son
     · lưới hoa văn bảo an mờ chạy chéo

   Hoa văn vẽ bằng repeating-linear-gradient chứ không phải ảnh: không thêm
   một lượt tải, không mờ khi phóng to, và đổi màu theo biến. Độ mờ để rất
   thấp — nó phải là nền, không được tranh chữ. */
pre.khoi-hoa-don{
  font-family:var(--f-mono);font-size:13px;line-height:1.9;margin:0 0 12px;
  padding:18px 20px;border-radius:var(--r-sm);
  /* Dùng --rose của bảng màu sẵn có, không đặt thêm một sắc đỏ thứ hai:
     trang đã dùng --rose cho tình trạng "Ngừng hoạt động" và cho khối cảnh
     báo. Thêm một màu đỏ riêng cho khối này là để hai thứ cùng nghĩa mà khác
     màu. #e6ced4 là viền hồng đã dùng ở .trang-thai.ngung và .canh-bao. */
  color:var(--rose);
  border:1px solid var(--vien-rose);
  box-shadow:0 1px 2px rgba(171,74,94,.06), inset 0 0 0 1px #fff;
  background-color:var(--nen-canh-bao);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(171,74,94,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg,
      rgba(171,74,94,.05) 0 2px, transparent 2px 9px);
  white-space:pre-wrap;word-break:break-word}
/* Nhãn đầu dòng ("Tên đơn vị:", "Mã số thuế:") không tách được thành thẻ riêng
   vì cả khối là một <pre> để chép nguyên văn — nên chỉ làm đậm toàn khối một
   nấc, đủ để đọc trên nền kem mà không phá thứ được chép đi. */
pre.khoi-hoa-don{font-weight:500}
@media (max-width:520px){
  pre.khoi-hoa-don{padding:14px 14px;font-size:12.5px;line-height:1.8}
}
.nut-chep,button,a.nut{
  font-family:var(--f-heading);font-size:14.5px;font-weight:700;cursor:pointer;
  border:none;padding:11px 22px;border-radius:var(--r-full);
  background:var(--primary);color:#fff;text-decoration:none;display:inline-block;
  transition:.15s}
.nut-chep{background:var(--primary-soft);color:var(--primary-dark);
  border:1px solid var(--primary-soft-border);padding:8px 18px;font-size:13.5px}
.nut-chep:hover{background:var(--primary);color:#fff}
/* CHỈ áp cho nút không mang lớp nào.
   Bản cũ là "button:hover" — độ ưu tiên (0,1,1), cao hơn mọi lớp thành phần
   (0,1,0) — nên nó đè nền xanh đậm lên mọi nút chưa tự khai nền hover, và chữ
   trên nút chìm hẳn. Kiểu lỗi không báo gì, chỉ lộ ra khi có người rê chuột. */
button:not([class]):hover,a.nut:hover{background:var(--primary-dark);text-decoration:none}

/* ── không tìm thấy / đang bóc ─────────────────────────────── */
.khong-thay{background:var(--surface-glass-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:34px 32px;box-shadow:var(--shadow-card)}
.khong-thay h1{font-size:24px;margin:0 0 14px}
.khong-thay p{font-size:14.5px;line-height:1.7;margin:0 0 14px;max-width:64ch}
.canh-bao{color:var(--rose);background:var(--rose-soft);border:1px solid var(--vien-rose);
  border-radius:var(--r-sm);padding:12px 16px}
.khong-thay code{font-family:var(--f-mono);background:var(--surface-2);
  padding:2px 6px;border-radius:5px}
.chinh-thuc{font-size:13px;color:var(--text-sub);margin-top:20px !important}
/* ── khối chờ TO, dùng khi người dùng thật sự phải đợi ── */
.cho-to{display:flex;align-items:center;gap:16px;margin:18px auto;max-width:520px;
  padding:20px 22px;border:1px solid var(--primary-soft-border);border-radius:14px;
  background:var(--primary-soft)}
.cho-chu{display:flex;flex-direction:column;gap:3px;min-width:0}
.cho-chu b{font-family:var(--f-heading);font-size:16px;color:var(--primary-dark)}
.cho-chu span{font-size:13.5px;line-height:1.5;color:var(--text-sub)}
/* Vòng xoay 34px thay vì 13px: vòng nhỏ bằng chữ thì người dùng không chắc
   trang có đang làm gì không, rồi họ bấm lại — mà mỗi lần bấm lại là một lượt
   vào hàng đợi và một lượt tính vào hạn mức. */
.quay-to{flex:none;width:34px;height:34px;border-radius:50%;
  border:3px solid var(--primary-soft-border);border-top-color:var(--primary);
  animation:xoay .8s linear infinite}
@media (prefers-reduced-motion:reduce){
  /* Không quay thì phải có dấu hiệu khác, kẻo thành một vòng tròn đứng im
     chẳng nói lên điều gì. */
  .quay-to{animation:none;border-top-color:var(--primary);opacity:.6}
  .cho-to{animation:tho-nhe 2s ease-in-out infinite}
}
@keyframes tho-nhe{0%,100%{opacity:1}50%{opacity:.75}}
.cho-xong{text-align:center;margin:18px auto;max-width:520px}

.dang-boc{margin:8px 0 6px}
.thanh-chay{height:5px;border-radius:var(--r-full);background:var(--border);overflow:hidden}
/* Vạch chỉ TIẾN ĐỘ THẬT, không phải vạch trượt vô định.
   Vạch trượt nói "đang bận"; vạch này nói "đã đi được bao xa" — và vì phần
   trăm lấy từ tiến độ thật của máy bóc nên nó không nói dối.

   Hiệu ứng chuyển động nằm Ở TRONG phần đã chạy, không kéo dài vạch ra thêm.
   Cho vạch tự bò lên trong lúc chờ thì trông sống động hơn thật, nhưng đó là
   nói dối: tới lúc nó bò tới 90% mà máy bóc vẫn ở bước 1 thì người dùng mất
   niềm tin vào mọi con số khác trên trang. */
.thanh-chay{position:relative}
.thanh-chay span{position:relative;display:block;height:100%;width:0;overflow:hidden;
  border-radius:var(--r-full);background:var(--primary);
  transition:width .45s cubic-bezier(.16,1,.3,1)}
/* Dải sáng chạy qua phần đã hoàn thành — báo "đang làm", không báo tiến độ. */
.thanh-chay span::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:loe 1.5s linear infinite}
@keyframes loe{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
/* Phần chưa chạy thở nhẹ, để cả thanh không trông như đã đứng hình. */
.dang-boc .thanh-chay{animation:tho 2.2s ease-in-out infinite}
@keyframes tho{0%,100%{opacity:1}50%{opacity:.72}}

/* Vòng xoay cạnh dòng chữ */
.dang-boc .quay{display:inline-block;width:14px;height:14px;margin-right:8px;
  vertical-align:-2px;border-radius:50%;
  border:2px solid var(--primary-soft-border);border-top-color:var(--primary);
  animation:xoay .8s linear infinite}
.dang-boc .buoc{margin:11px 0 0 !important;font-size:14px;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){
  .thanh-chay span{transition:none}
  .thanh-chay span::after,.dang-boc .thanh-chay,.dang-boc .quay{animation:none}
  .dang-boc .quay{border-top-color:var(--primary-soft-border)}
}

/* ══════════ Quyền chủ thể dữ liệu ══════════ */
.yeu-cau,.minh-bach{max-width:780px;margin:0 auto}
.bieu-mau{display:flex;flex-direction:column;gap:18px}
.bieu-mau label{display:flex;flex-direction:column;gap:6px;font-size:14px;
  font-weight:700;font-family:var(--f-heading)}
.bieu-mau input,.bieu-mau select,.bieu-mau textarea{
  font:inherit;font-family:var(--f-body);font-weight:400;padding:11px 14px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-main)}
.bieu-mau input:focus,.bieu-mau select:focus,.bieu-mau textarea:focus{
  outline:none;border-color:var(--primary-light);box-shadow:0 0 0 4px var(--primary-glow)}
.bieu-mau .ghi-chu{font-weight:400;font-size:13px;color:var(--text-sub);line-height:1.6}
.bieu-mau .tuy-chon{font-weight:400;font-size:12px;color:var(--text-dim)}
.bieu-mau button{align-self:flex-start}
.khoi.xong{border-color:var(--emerald);background:var(--emerald-soft)}
table.bang-nguon td.so{font-family:var(--f-mono);text-align:right}

/* ── chân trang ───────────────────────────────────────────── */
footer{border-top:1px solid var(--border);background:var(--surface);
  padding:32px 24px;font-size:13.5px;color:var(--text-sub);line-height:1.75}
footer > *{max-width:1080px;margin:0 auto}

@media (max-width:720px){
  h1{font-size:29px}

  /* ── LỀ HAI BÊN TRÊN MÀN HÌNH HẸP ──
     Thanh trên và phần thân phải dùng CHUNG một con số. Trước đây thanh 16px
     còn thân 18px, nên logo lệch hai điểm ảnh so với dòng đường dẫn ngay dưới
     nó — đủ để mắt thấy là "không thẳng" mà không chỉ ra được vì sao.

     max(...) với env(safe-area-inset-*) là để phòng máy có tai thỏ: khi xoay
     ngang, phần khuyết ăn vào mép trái và nội dung chui xuống dưới nó. Máy
     không có tai thỏ thì env() trả 0 và max() giữ nguyên 18px. */
  main{padding:26px max(18px, env(safe-area-inset-right)) 56px max(18px, env(safe-area-inset-left))}
  .topbar{gap:12px;
    padding:12px max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left))}

  .searchbar input{padding:16px 8px 16px 20px;font-size:16px}
  .searchbar button{padding:16px 22px 16px 14px}
  dl.cap{grid-template-columns:1fr;gap:3px 0}
  dl.cap dt{margin-top:9px}
}

/* ══════════════════════════════════════════════════════════════
   Trang chủ — bố cục theo design/home-seo-rich-v2.html
   ══════════════════════════════════════════════════════════════ */
main.rong{max-width:1180px}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:46px 0 30px;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);
  color:var(--text-muted);font-size:13px;font-weight:600;box-shadow:var(--shadow-subtle);
  margin-bottom:24px}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 3px rgba(5,150,105,.15);flex:none}
.hero h1{max-width:900px;font-size:clamp(34px,5.2vw,60px);font-weight:800;
  line-height:1.08;letter-spacing:-.03em;margin-bottom:18px}
.gradient-text{background:var(--dai-tieu-de);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{max-width:660px;font-size:17px;color:var(--text-muted);line-height:1.62;
  margin-bottom:32px}

.search-container{position:relative;width:100%;max-width:860px;margin:0 auto;z-index:30}
.search-card{position:relative;padding:10px;border-radius:var(--r-lg);
  background:var(--surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--vien-kinh);
  box-shadow:var(--shadow-float),0 0 0 1px var(--quang-kinh);transition:.3s}
.search-card:focus-within{box-shadow:var(--shadow-float),0 0 0 4px var(--primary-glow)}
.search-row{display:flex;align-items:center;gap:10px}
.scope-selector-btn{display:flex;align-items:center;gap:10px;min-width:150px;height:56px;
  padding:0 16px;border-radius:var(--r-md);background:var(--primary-soft);
  border:1px solid var(--primary-soft-border);color:var(--primary);font-weight:700;
  font-size:14px;user-select:none;flex:none}
.scope-icon-box{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:#fff;font-size:15px;box-shadow:0 2px 5px rgba(67,56,202,.12)}
.search-input-field{flex:1;min-width:0;width:100%;height:56px;padding:0 12px;border:none;
  outline:none;background:transparent;color:var(--text-main);font-family:var(--f-body);
  font-size:18px;font-weight:600}
.search-input-field::placeholder{color:var(--text-dim);font-weight:500}
.search-submit-btn{display:grid;place-items:center;width:56px;height:56px;flex:none;
  border:none;border-radius:var(--r-md);cursor:pointer;padding:0;
  background:linear-gradient(135deg,#4a63c0 0%,#3f56a8 100%);color:#fff;
  box-shadow:0 5px 14px rgba(63,86,168,.26);transition:.2s}
.search-submit-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(63,86,168,.32)}
.search-submit-btn svg{width:22px;height:22px}

.detect-hint-bar{display:none;align-items:center;justify-content:center;gap:10px;
  margin:12px auto 0;padding:7px 16px;border-radius:var(--r-full);
  background:var(--nen-goi-y);border:1px solid var(--primary-soft-border);
  color:var(--primary);font-size:12.5px;font-weight:700;width:max-content}

.quick-queries-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px}
.quick-pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;
  border-radius:var(--r-full);background:var(--nen-vien-thuoc);border:1px solid var(--border);
  color:var(--text-muted);font-family:var(--f-mono);font-size:13px;font-weight:500;
  text-decoration:none;box-shadow:var(--shadow-subtle);transition:.2s}
.quick-pill:hover{border-color:var(--primary-soft-border);background:var(--primary-soft);
  color:var(--primary-dark);text-decoration:none;transform:translateY(-1px)}

.category-tiles-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
  width:100%;max-width:1040px;margin:34px auto 0}
.category-tile{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:20px 12px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-subtle);
  text-decoration:none;color:var(--text-main);transition:.2s}
.category-tile:hover{border-color:var(--primary-soft-border);box-shadow:var(--shadow-card);
  transform:translateY(-3px);text-decoration:none}
.tile-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:21px}
.tile-name{font-family:var(--f-heading);font-size:13px;font-weight:700;text-align:center;
  line-height:1.35}

.stats-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:44px 0}
.stat-card{display:flex;align-items:center;gap:15px;padding:20px 22px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-subtle)}
.stat-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--surface-2);font-size:21px;flex:none}
.stat-num{font-family:var(--f-mono);font-size:23px;font-weight:600;line-height:1.15;
  color:var(--primary)}
.stat-lab{font-size:12.5px;color:var(--text-sub);margin-top:3px;line-height:1.45}

.seo-card-section{padding:32px;border-radius:var(--r-lg);background:var(--surface-glass-card);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--vien-the);box-shadow:var(--shadow-card);margin-bottom:24px}
.seo-section-header{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.seo-header-content{min-width:0;max-width:820px}
.the-nhom{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;margin-bottom:10px;
  border-radius:var(--r-full);background:var(--primary-soft);
  border:1px solid var(--primary-soft-border);color:var(--primary);
  font-family:var(--f-heading);font-size:12px;font-weight:800;letter-spacing:.02em}
.the-nhom svg{width:14px;height:14px;flex:none}
.the-nhom.tim{background:var(--purple-soft);color:var(--purple);border-color:transparent}
.seo-section-header h2{margin:0 0 8px;font-size:26px;line-height:1.34;letter-spacing:-.02em}
.seo-header-content .seo-desc{margin-bottom:0;font-size:14.5px;line-height:1.65}
.nut-chuyen-trang{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);
  color:var(--primary);font-family:var(--f-heading);font-size:13.5px;font-weight:700;
  box-shadow:var(--shadow-subtle);white-space:nowrap;text-decoration:none;transition:.18s}
.nut-chuyen-trang:hover{background:var(--primary-soft);border-color:var(--primary-soft-border);
  transform:translateY(-1px);text-decoration:none}
.nut-chuyen-trang svg{width:16px;height:16px;flex:none}
.seo-link{font-family:var(--f-heading);font-weight:700;font-size:14px;white-space:nowrap}
.seo-desc{font-size:15px;line-height:1.75;color:var(--text-muted);margin-bottom:14px;max-width:76ch}

@media (max-width:980px){
  .category-tiles-grid{grid-template-columns:repeat(3,1fr)}
  .stats-overview{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hero{padding:30px 0 20px}
  .category-tiles-grid{grid-template-columns:repeat(2,1fr)}
  .stats-overview{grid-template-columns:1fr}
  .scope-selector-btn{display:none}
  .search-card{padding:8px}
  .seo-card-section{padding:22px 18px}
  .seo-section-header{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ── bảng xếp hạng được tra nhiều nhất ── */
.bang-xep-hang{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  list-style:none;margin:0;padding:0}
@media (max-width:820px){.bang-xep-hang{grid-template-columns:1fr}}
/* BỐN cột, không phải ba: hàng có số thứ tự, nội dung, nút chép mã và nút
   lưu. Khai ba cột thì thẻ thứ tư rớt xuống dòng mới, treo lủng lẳng dưới ô
   số thứ tự — đúng chỗ hỏng nhìn thấy trên trang chủ. */
/* Cột đầu để AUTO, không chốt 38px.

   Ô này chứa ba loại nội dung khác nhau: số thứ hạng một chữ số ở bảng "tra
   nhiều nhất", năm bốn chữ số ở kết quả tìm theo tên, và ngày "22/08" ở trang
   mới thành lập. Chốt cứng 38px thì hai loại sau tràn ra ngoài viền bo — chữ
   nằm đè lên nền trắng bên cạnh. Cho cột co theo nội dung, còn ô thì giữ bề
   rộng TỐI THIỂU 38px để số một chữ số vẫn ra hình vuông cân. */
.dong-xep-hang{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:14px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--border);box-shadow:0 2px 6px rgba(15,23,42,.02);
  transition:.2s cubic-bezier(.16,1,.3,1)}
.dong-xep-hang:hover{border-color:var(--primary-soft-border);box-shadow:var(--shadow-card);
  transform:translateY(-2px)}
.dong-xep-hang .hang{display:grid;place-items:center;min-width:38px;height:38px;
  padding:0 8px;white-space:nowrap;
  border-radius:11px;font-family:var(--f-heading);font-weight:800;font-size:15px;
  background:var(--surface-2);color:var(--text-sub)}
.dong-xep-hang .hang-1{background:linear-gradient(135deg,#e2c179,#cfab5c);color:#4d3a0f}
.dong-xep-hang .hang-2{background:linear-gradient(135deg,#d2dae4,#aeb8c6);color:#2f3a4a}
.dong-xep-hang .hang-3{background:linear-gradient(135deg,#e3b795,#cd9a74);color:#43290f}
.dong-xep-hang .noi-dung{min-width:0;display:flex;flex-direction:column;gap:2px;
  text-decoration:none;color:inherit}
.dong-xep-hang .noi-dung:hover{text-decoration:none}
.dong-xep-hang .noi-dung:hover .ten-dn{color:var(--primary)}
.dong-xep-hang .ten-dn{font-family:var(--f-heading);font-weight:700;font-size:14.5px;
  line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.15s}
.dong-xep-hang .dia-chi-nho{font-size:12.5px;color:var(--text-sub);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ô mã + nút chép ở cuối một dòng kết quả. Nút chỉ hiện khi rê vào dòng —
   một cột nút xám chạy dọc bốn mươi dòng là nhiễu thị giác. Bàn phím và cảm
   ứng vẫn tới được. */
.dong-xep-hang .o-ma{display:flex;align-items:center;gap:5px}

/* ── biến thể MST DƯỚI TÊN ──
   Trang ngành xếp mã số thuế dưới tên chứ không ở mép phải, cho giống trang
   tỉnh và trang xã. Chỉ còn ba ô lưới nên phải khai lại số cột: giữ bốn cột
   trong khi chỉ có ba con thì ô trạng thái nhảy sang cột thứ ba và dính vào
   nội dung.

   Nút chép ở đây LUÔN hiện, không đợi rê chuột như biến thể mép phải: khi mã
   nằm giữa khối nội dung, một nút ẩn hiện lên lúc rê làm dòng nhảy chỗ. */
.ds-ket-qua.mst-duoi .dong-xep-hang{grid-template-columns:auto minmax(0,1fr) auto}
.ds-ket-qua.mst-duoi .noi-dung{min-width:0;display:flex;flex-direction:column;
  gap:2px;align-items:flex-start}
.ds-ket-qua.mst-duoi .ten-dn{text-decoration:none;color:inherit}
.ds-ket-qua.mst-duoi .ten-dn:hover{color:var(--primary)}
.ds-ket-qua.mst-duoi .o-mst-duoi{margin-top:6px}
.ds-ket-qua.mst-duoi .o-ma .hop-sao-chep{opacity:1}
@media (max-width:560px){
  .ds-ket-qua.mst-duoi .dong-xep-hang{grid-template-columns:auto minmax(0,1fr)}
  .ds-ket-qua.mst-duoi .trang-thai{grid-column:2;justify-self:start;margin-top:4px}
}
.dong-xep-hang .o-ma .hop-sao-chep{opacity:0;transition:opacity .12s}
.dong-xep-hang:hover .o-ma .hop-sao-chep,
.dong-xep-hang .o-ma .hop-sao-chep:focus-visible{opacity:1}
@media (hover:none){.dong-xep-hang .o-ma .hop-sao-chep{opacity:1}}

/* ── biến thể có cột tỉnh, dùng cho kết quả tìm theo tên ──
   Chỉ ở đây mới cần: mọi danh sách khác đã đứng sẵn trong một địa bàn, nhắc
   lại tên tỉnh ở từng dòng là thừa. Nên thêm một lớp riêng thay vì sửa dòng
   gốc — bảng "tra nhiều nhất" ngay trên cùng trang vẫn dùng dòng gốc. */
.dong-xep-hang.co-tinh{grid-template-columns:118px auto minmax(0,1fr) auto auto}
.o-tinh-dau{min-width:0;font-family:var(--f-heading);font-size:12.5px;font-weight:700;
  line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-right:10px;border-right:1px solid var(--border-subtle,var(--border))}
.o-tinh-dau a{color:var(--primary);text-decoration:none}
.o-tinh-dau a:hover{text-decoration:underline}
.o-tinh-dau.chua-ro{color:var(--text-dim);font-weight:600}
@media (max-width:900px){
  /* Cột tỉnh lên hàng riêng phía trên tên, không ép ngang với năm và tên —
     ba cột hẹp cạnh nhau thì cột nào cũng cụt. Ba cột chứ không hai, vì cùng
     lý do như dòng gốc: hai cột thì nhãn tình trạng rơi vào cột 34px. */
  .dong-xep-hang.co-tinh{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}
  .o-tinh-dau{grid-column:1/-1;border-right:0;padding:0;border-bottom:1px solid var(--border-subtle,var(--border));
    padding-bottom:7px}
}

/* ── bảng kê chung: danh mục ngành, và bất cứ bảng liệt kê nào sau này ── */
/* Bảng dài hàng chục dòng thì viền và nền xen kẽ không phải trang trí: chúng
   là thứ giữ mắt đi đúng hàng khi rê ngang từ tên sang con số ở cột cuối. */
.cuon-ngang{overflow-x:auto}
.bang-ke{width:100%;border-collapse:collapse;font-size:14px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bang-ke th,.bang-ke td{padding:9px 13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.bang-ke thead th{background:var(--surface-2);font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-sub);white-space:nowrap}
.bang-ke tbody tr:nth-child(even){background:var(--surface-2)}
.bang-ke tbody tr:hover{background:var(--primary-soft)}
.bang-ke tbody tr:last-child td{border-bottom:0}
.bang-ke a{text-decoration:none;color:var(--text-main);font-weight:600}
.bang-ke a:hover{color:var(--primary)}
.bang-ke .cot-stt{width:52px;text-align:right;font-family:var(--f-mono);font-size:12px;
  color:var(--text-sub);font-variant-numeric:tabular-nums}
.bang-ke .cot-ma{width:96px}
.bang-ke .cot-ma .ma{font-family:var(--f-mono);font-size:12.5px;color:var(--text-sub)}
.bang-ke .cot-so{width:118px;text-align:right;font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Khối bị dính sát khối trên khi khối trên là một danh sách thẻ có bóng đổ —
   bóng ăn hết khoảng cách nên nhìn như hai khối chồng nhau. */
.khoi.cach-tren{margin-top:34px}

/* Hộp mã số thuế bấm để chép */
.hop-sao-chep{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:var(--r-sm);background:var(--primary-soft);
  border:1px solid var(--primary-soft-border);color:var(--primary);
  font-family:var(--f-mono);font-size:12.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;cursor:pointer;appearance:none;transition:.15s}
.hop-sao-chep:hover{background:var(--sao-chep-ho);transform:scale(1.03)}
.hop-sao-chep:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hop-sao-chep svg{width:14px;height:14px;flex:none;opacity:.7}
.hop-sao-chep .bt-xong{display:none}
.hop-sao-chep.xong{background:var(--emerald-soft);color:var(--emerald);border-color:transparent}
.hop-sao-chep.xong .bt-chep{display:none}
.hop-sao-chep.xong .bt-xong{display:block;opacity:1}
@media (prefers-reduced-motion:reduce){
  .dong-xep-hang,.hop-sao-chep,.nut-chuyen-trang{transition:none}
  .dong-xep-hang:hover,.hop-sao-chep:hover,.nut-chuyen-trang:hover{transform:none}
}
/* ── Màn hẹp: bốn ô xếp lại thành hai hàng ──
   Dòng có bốn con: huy hiệu, khối tên, nhãn tình trạng, hộp mã. Ở lưới HAI
   cột, chúng tự rải thành 1-2 / 1-2 — nghĩa là nhãn tình trạng rơi vào cột
   đầu rộng 34px và bị bóp thành một vệt chữ dựng đứng. Đó là chỗ vỡ nhìn thấy
   trên trang "mới thành lập".

   Ba cột thì đủ chỗ: hàng trên là huy hiệu và tên trải hết phần còn lại, hàng
   dưới là tình trạng bên trái, mã số thuế dồn sang phải — thẳng lề với tên. */
@media (max-width:520px){
  .dong-xep-hang{grid-template-columns:auto minmax(0,1fr) auto;row-gap:9px}
  .dong-xep-hang .hang{min-width:34px;height:34px;padding:0 7px;font-size:14px}
  .dong-xep-hang > .noi-dung{grid-column:2 / -1}
  .dong-xep-hang > .trang-thai{grid-column:2;justify-self:start}
  .dong-xep-hang > .o-ma{grid-column:3;justify-self:end}
  .dong-xep-hang .hop-sao-chep{width:fit-content}
  .seo-section-header h2{font-size:21px}
}

/* ══ chuyên trang mã số thuế ══════════════════════════════════ */
/* Sáu pixel là chỗ hai khối chạm nhau chứ không phải cách nhau. Trang hẹp vốn
   đã có luật riêng đẩy xuống 18px; trang rộng thì không, nên tiêu đề dính ngay
   dưới mặt đường dẫn. Cho hai bên cùng một con số. */
.duong-dan{display:flex;align-items:center;gap:8px;max-width:1180px;margin:0 auto 18px;
  padding:14px 0 0;font-size:13px;color:var(--text-sub)}
.duong-dan a{color:var(--text-muted);font-weight:600;text-decoration:none}
.duong-dan a:hover{color:var(--primary)}
.duong-dan svg{width:13px;height:13px;opacity:.5;flex:none}
.hero-hep{padding-top:16px}
/* ── câu hỏi thường gặp ── */
.hoi-dap{margin:0}
.hoi-dap dt{margin:14px 0 0;font-weight:700;font-size:14.5px;color:var(--text)}
.hoi-dap dt:first-child{margin-top:0}
.hoi-dap dd{margin:5px 0 0;font-size:14px;line-height:1.7;color:var(--text-sub)}
.hs-tom-tat{margin:2px 0 20px;font-size:14.5px;line-height:1.75;color:var(--text-sub);
  max-width:78ch}
/* ── danh sách doanh nghiệp liên quan ── */
/* ── danh sách kết quả tra cứu ──
   Lớp này chưa từng có khai báo nào: nó đang sống bằng mặc định của trình
   duyệt, nên thụt vào 40px không vì lý do gì. Dấu đầu dòng thì đã mất sẵn —
   mỗi dòng là display:grid nên không còn là list-item nữa, chỉ còn trơ lại
   phần thụt lề.

   Kết quả tìm theo TÊN còn nằm trong .hero, mà .hero căn giữa mọi thứ. Căn
   giữa hợp cho một câu giới thiệu, nhưng sai cho danh sách: mỗi dòng một độ
   dài nên tên công ty bắt đầu ở một chỗ khác nhau, mắt không có mép nào để dò
   xuống. */
.ds-ket-qua{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px}
.khoi-tra{width:100%}
.khoi-tra .hint,.khoi-tra .ds-ket-qua{text-align:left}

.ds-lien-quan{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2px}
.ds-lien-quan li{padding:9px 12px;border-radius:9px}
.ds-lien-quan li:hover{background:var(--surface-2)}
.ds-lien-quan a{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--text)}
.ds-lien-quan a:hover .ten{color:var(--primary)}
.ds-lien-quan .ten{font-weight:600;font-size:14px}
/* Mã số thuế là thứ người ta tới đây để lấy — nó phải nổi hơn dòng địa chỉ
   ngay trên nó, chứ không mờ hơn. Viên nhãn nhạt cùng kiểu với ô mã ở trang
   kết quả tìm, để cùng một dữ liệu trông giống nhau ở mọi chỗ. */
.ds-lien-quan .ma{font-family:var(--f-mono);font-size:12.5px;font-weight:700;
  flex:none;padding:2px 8px;border-radius:7px;
  background:var(--primary-soft);color:var(--primary-dark)}
 .ds-lien-quan.gon{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ds-lien-quan.gon .ten{font-weight:500;font-size:13.5px}
.ds-lien-quan .dc{display:block;margin-top:2px;font-size:12.5px;color:var(--text-sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── danh sách liên quan dạng HÀNG ──
   Lưới ba cột cho mỗi ô một chiều cao khác nhau: tên dài thì xuống hai dòng,
   tên ngắn thì một — nhìn xuống thấy răng cưa, và địa chỉ bị cắt ba chấm ngay
   giữa chừng vì mỗi ô chỉ rộng một phần ba. Một hàng chiếm hết bề ngang thì
   mã số thuế xếp thẳng cột bên phải, và địa chỉ đủ chỗ để đọc hết. */
.ds-lien-quan.hang{grid-template-columns:1fr;gap:0}
.ds-lien-quan.hang li{padding:10px 12px;border-radius:0;
  border-bottom:1px solid var(--line-nhat,var(--line))}
.ds-lien-quan.hang li:first-child{border-top-left-radius:9px;border-top-right-radius:9px}
.ds-lien-quan.hang li:last-child{border-bottom:0;border-radius:0 0 9px 9px}
/* Số thứ tự — tên+địa chỉ — mã và nút chép. Ba cột cố định thì mã số thuế
   của mọi hàng thẳng một đường, đọc dọc xuống được. */
.ds-lien-quan.hang li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;column-gap:12px}
.ds-lien-quan.hang li:nth-child(even){background:var(--surface-2)}
.ds-lien-quan.hang li:hover{background:var(--primary-soft,var(--surface-2))}
.ds-lien-quan.hang .stt{font-family:var(--f-mono);font-size:12px;font-weight:700;
  color:var(--text-sub);text-align:right;font-variant-numeric:tabular-nums}
.ds-lien-quan.hang a{display:block;min-width:0}
.ds-lien-quan.hang .ten{display:block}
/* Cả bề ngang là của địa chỉ nên cho xuống dòng thay vì cắt cụt. */
.ds-lien-quan.hang .dc{white-space:normal;padding-right:0}
.ds-lien-quan.hang .o-ma{display:flex;align-items:center;gap:4px;flex:none}
.ds-lien-quan.hang .o-ma .ma{font-variant-numeric:tabular-nums}

/* ── dạng HÀNG, HAI CỘT trên màn rộng ──
   Danh sách 34 tỉnh xếp một cột thì kéo dài quá nửa màn hình mà mỗi hàng chỉ
   có một cái tên và một con số — hai phần ba bề ngang bỏ trống. Hai cột lấp
   chỗ ấy và cắt đôi chiều dài.

   Dưới 900px quay lại một cột: hai cột trên màn hẹp thì tên tỉnh dài phải
   xuống dòng, và răng cưa còn khó đọc hơn danh sách dài.

   Viền dưới của .hang vẽ theo THỨ TỰ tài liệu nên ở lưới hai cột nó không
   còn khớp: ô áp chót ở cột trái vẫn kẻ viền trong khi ô cuối cột phải thì
   không. Nên ở đây bỏ viền, chỉ dùng nền so le để phân dòng.
   Nền so le cũng phải tính lại: nth-child(even) ở hai cột tạo bàn cờ. Tô
   theo cặp — 4n+1 và 4n+2 — thì mỗi HÀNG NGANG cùng một nền. */
.ds-lien-quan.hang.hai-cot{grid-template-columns:1fr 1fr;column-gap:10px}
.ds-lien-quan.hang.hai-cot li{border-bottom:0;border-radius:7px}
.ds-lien-quan.hang.hai-cot li:first-child,
.ds-lien-quan.hang.hai-cot li:last-child{border-radius:7px}
.ds-lien-quan.hang.hai-cot li:nth-child(even){background:transparent}
.ds-lien-quan.hang.hai-cot li:nth-child(4n+1),
.ds-lien-quan.hang.hai-cot li:nth-child(4n+2){background:var(--surface-2)}
.ds-lien-quan.hang.hai-cot li:hover{background:var(--primary-soft,var(--surface-2))}
@media (max-width:900px){
  .ds-lien-quan.hang.hai-cot{grid-template-columns:1fr;column-gap:0}
  .ds-lien-quan.hang.hai-cot li{border-radius:0;
    border-bottom:1px solid var(--line-nhat,var(--line))}
  .ds-lien-quan.hang.hai-cot li:last-child{border-bottom:0}
  .ds-lien-quan.hang.hai-cot li:nth-child(4n+1),
  .ds-lien-quan.hang.hai-cot li:nth-child(4n+2){background:transparent}
  .ds-lien-quan.hang.hai-cot li:nth-child(even){background:var(--surface-2)}
}
/* Nút chép chỉ hiện khi rê vào hàng — mười nút xám xếp dọc là nhiễu thị giác.
   Bàn phím và cảm ứng vẫn tới được: khi nút nhận tiêu điểm nó hiện lại. */
.ds-lien-quan.hang .o-ma .hop-sao-chep{opacity:0;transition:opacity .12s}
.ds-lien-quan.hang li:hover .hop-sao-chep,
.ds-lien-quan.hang .hop-sao-chep:focus-visible{opacity:1}
@media (hover:none){.ds-lien-quan.hang .hop-sao-chep{opacity:1}}
@media (max-width:640px){
  .ds-lien-quan.hang li{grid-template-columns:24px minmax(0,1fr);row-gap:4px}
  .ds-lien-quan.hang .o-ma{grid-column:2}
}

/* ── kết quả tìm địa bàn: một nơi vào, nhiều lối ra ── */
.ds-dia-ban{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.the-dia-ban{padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface)}
.dia-ban-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.dia-ban-ten{font-family:var(--f-heading);font-weight:700;font-size:16px}
.dia-ban-cha{font-size:13px;color:var(--text-sub)}

/* Các lối ra xếp thành lưới: hôm nay một ô, mai ba ô, không phải sửa gì. */
.loi-ra{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.loi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);text-decoration:none;
  color:var(--text-main);transition:.15s}
a.loi:hover{border-color:var(--primary);background:var(--primary-soft);text-decoration:none}
.loi-bieu{font-size:19px;line-height:1;flex:none}
.loi-chu{display:flex;flex-direction:column;min-width:0}
.loi-chu b{font-size:14px;font-weight:600}
.loi-chu span{font-size:12.5px;color:var(--text-sub)}
.loi-mui{margin-left:auto;color:var(--text-sub);flex:none}
a.loi:hover .loi-mui{color:var(--primary)}
/* Lối chưa có gì: mờ đi và KHÔNG bấm được. Dẫn người ta tới một trang trống
   là phí một cú bấm; nói thẳng là chưa có thì họ đi tìm chỗ khác ngay. */
.loi.tat{opacity:.5;cursor:default}

/* ── thanh lọc của bảng tra mã ── */
.loc-ma{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.loc-ma label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;
  color:var(--text-sub)}
.loc-ma select,.loc-ma input{font:inherit;font-size:14.5px;font-weight:400;
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--text-main);min-width:220px}
.loc-ma select:focus,.loc-ma input:focus{outline:none;border-color:var(--primary)}
.loc-ma .nut-tim{padding:10px 22px;border-radius:9px;background:var(--primary);color:#fff}
.loc-ma .nut-tim:hover{background:var(--primary-dark);color:#fff}
/* Hàng lọc dóng theo đáy (align-items:flex-end) vì mấy ô nhập có nhãn phía
   trên nên khối của chúng cao hơn. Liên kết này không có nhãn, dóng giữa thì
   nó trôi lên lưng chừng — dóng đáy rồi đệm cho ngang tầm chữ trong nút. */
.loc-ma .bo-loc{align-self:flex-end;padding-bottom:11px;font-size:13.5px;
  color:var(--text-sub)}
.bang-ke .cot-loai{width:96px;white-space:nowrap}
.bang-ke .o-ma{display:flex;align-items:center;gap:5px}
.bang-ke .o-ma .hop-sao-chep{opacity:0;transition:opacity .12s}
.bang-ke tr:hover .hop-sao-chep,
.bang-ke .hop-sao-chep:focus-visible{opacity:1}
@media (hover:none){.bang-ke .hop-sao-chep{opacity:1}}

/* ── khối lượt xem ── */
.xem-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin-bottom:14px}
.xem-o{padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2)}
.xem-o span{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-sub)}
.xem-o b{font-size:19px;font-variant-numeric:tabular-nums}
.xem-bieu-do{margin:0 0 12px}
/* preserveAspectRatio="none" nên chiều cao do CSS quyết, bề ngang co theo khung. */
.xem-bieu-do svg{width:100%;height:150px;display:block}
.xem-ke{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.xem-cot{fill:var(--primary-soft-border,#9fc7e8)}
.xem-cot.cao-nhat{fill:var(--primary)}
.xem-nhan{font-size:9px;fill:var(--text-sub)}
.xem-nhan-xet{line-height:1.7}


/* Vòng xoay nhỏ dùng trong ô giá trị đang chờ lấp. */
.quay.nho{display:inline-block;width:13px;height:13px;vertical-align:-2px;
  border-radius:50%;border:2px solid var(--primary-soft-border);
  border-top-color:var(--primary);animation:xoay .8s linear infinite}
@media (prefers-reduced-motion:reduce){.quay.nho{animation:none}}

/* ── đầu trang hồ sơ: tên một dòng, địa chỉ ngay dưới ── */
/* Tên chiếm hết bề ngang còn lại và XUỐNG DÒNG khi dài, không cắt ba chấm.
   Cắt cụt thì người đọc mất đúng phần phân biệt hai công ty cùng họ tên đầu —
   "… đầu tư xây dựng Tr…" không nói được đó là Trường Thành hay Trung Thành. */
.hs-chu h1{overflow-wrap:anywhere}
.hs-dia-chi{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--text-sub)}

/* Ba ô thì chia ba phần bằng nhau, không để ô thứ tư rơi xuống dòng lẻ loi.

   Chốt cứng ba cột chứ không auto-fit theo bề rộng tối thiểu: từ khi trang hồ
   sơ có thêm cột phải, cột trái chỉ còn khoảng 730px — ba ô rộng tối thiểu
   248px cộng hai khe không nhét vừa, nên ô "Tình trạng" rơi xuống một mình.
   Nội dung ba ô đều ngắn, 230px là thừa chỗ. */
.hs-o-nhanh.ba-o{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.hs-o-nhanh.ba-o{grid-template-columns:1fr}}

/* ── bảng thông tin pháp lý ── */
/* Viền đủ rõ để mắt bám được hàng, và nền xen kẽ để không lạc dòng khi mắt
   đi ngang qua khoảng trống giữa nhãn và giá trị — bảng này có cột nhãn rộng
   230px nên khoảng trống ấy dài. */
.bang-phap-ly{width:100%;border-collapse:collapse;font-size:14.5px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bang-phap-ly th,
.bang-phap-ly td{padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.bang-phap-ly th{border-right:1px solid var(--line)}
.bang-phap-ly tbody tr:nth-child(odd){background:var(--surface-2)}
.bang-phap-ly tr:last-child th,
.bang-phap-ly tr:last-child td{border-bottom:0}
.bang-phap-ly th{width:230px;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-sub);white-space:nowrap}
.bang-phap-ly td{color:var(--text)}
.bang-phap-ly td.xanh{color:var(--emerald);font-weight:700}
.bang-phap-ly td.do{color:var(--rose);font-weight:700}
/* Nhãn "Mới" trên hàng địa giới hiện hành. Đây là thứ phân biệt FindBase với
   nguồn gốc: giấy đăng ký viết theo địa giới cũ và không tự đổi, còn hàng này
   trả lời "hôm nay nó thuộc đâu". */
.bang-phap-ly .the-moi{display:inline-block;margin-right:8px;padding:2px 9px;
  border-radius:999px;background:var(--emerald-soft);color:var(--emerald);
  border:1px solid var(--emerald);font-size:11px;font-weight:800;
  letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
.bang-phap-ly td.nhat{color:var(--text-sub)}
/* Ghi chú phụ trong ô: nhỏ và nhạt, để không tranh chỗ với chính giá trị. */
.bang-phap-ly .chua-chac{display:inline;margin-left:6px;font-size:12.5px;
  color:var(--text-sub);font-weight:400}
/* Xã rồi tỉnh, ngăn bằng dấu phẩy do CSS đặt — xem ghi chú ở MaSoThue.cshtml
   về khoảng trắng Razor sinh ra giữa hai thẻ. */
/* Địa chỉ đầy đủ theo địa giới mới: xuống dòng riêng dưới cặp xã–tỉnh, vì nó
   dài và là thứ để CHÉP chứ không phải để bấm đi tiếp. */
.dia-chi-moi{display:flex;align-items:baseline;gap:6px;margin-top:6px;
  font-size:13.5px;line-height:1.55;color:var(--text-main)}
.dia-chi-moi > span{min-width:0}

/* inline-flex chứ không phải inline, và đó là cả cách sửa lỗi.

   Razor giữ nguyên xuống dòng và thụt lề giữa hai thẻ; trình duyệt gộp chúng
   thành MỘT DẤU CÁCH. Với display:inline, dấu cách ấy đứng trước dấu phẩy do
   ::before đặt vào, ra "Phường Sài Gòn , Thành phố Hồ Chí Minh" — thừa một
   khoảng trắng ngay trước dấu phẩy.

   Hộp flex thì BỎ QUA mọi khoảng trắng giữa các mục, nên dấu phẩy dính sát
   chữ mà mã Razor vẫn được thụt lề thoải mái. */
.dia-hang{display:inline-flex;flex-wrap:wrap;align-items:baseline}
.dia-hang > *{display:inline}
.dia-hang > * + *::before{content:", "}

/* Danh sách ứng viên khi xã cũ bị chia: xếp ngang, ngăn bằng dấu chấm giữa. */
.ung-vien-hang{display:inline-flex;flex-wrap:wrap;align-items:baseline}
.ung-vien-hang a,.ung-vien-hang span{display:inline}
.ung-vien-hang a + a::before,
.ung-vien-hang a + span::before,
.ung-vien-hang span + a::before,
.ung-vien-hang span + span::before{content:" · ";color:var(--text-sub)}
.bang-phap-ly td .ma{font-family:var(--f-mono)}
/* Rê chuột đổi nền cả hàng — mắt bám ngang qua khoảng trống giữa nhãn và giá trị. */
.bang-phap-ly tbody tr:hover{background:var(--surface-2)}
@media (max-width:640px){
  .bang-phap-ly th,.bang-phap-ly td{display:block;padding:2px 12px;border-bottom:0}
  .bang-phap-ly th{width:auto;border-right:0}
  .bang-phap-ly tbody tr{display:block;padding:9px 0;
    border-bottom:1px solid var(--line)}
  /* ── BỎ SỌC XEN KẼ ──
     Sọc sinh ra để mắt bám ngang từ cột nhãn sang cột giá trị. Trên màn hình
     hẹp hai cột ấy XẾP CHỒNG, nên không còn gì để bám ngang — mà mảng nền xám
     giờ trùm cả nhãn lẫn giá trị, biến bảng thành một chồng khối xám đậm nhạt
     xen nhau. Vạch ngăn giữa các hàng đã đủ tách. */
  .bang-phap-ly tbody tr:nth-child(odd),
  .bang-phap-ly tbody tr:hover{background:none}
  /* Nhãn nhẹ đi một bậc: nó là chú thích cho giá trị bên dưới, không phải
     tiêu đề ngang hàng. */
  .bang-phap-ly th{font-size:10.5px;letter-spacing:.06em;font-weight:700;
    color:var(--text-dim)}
  .bang-phap-ly td{font-size:14px;line-height:1.6}
}
.nut-tai-lai{margin-left:6px;padding:3px 12px;border:1px solid var(--line);
  border-radius:999px;background:transparent;font:inherit;font-weight:600;
  font-size:13px;color:var(--primary);cursor:pointer}
.nut-tai-lai:hover{border-color:var(--primary);background:var(--primary-wash)}
.hop-sao-chep.nho{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;vertical-align:middle;margin-left:6px;
  border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--text-muted);cursor:pointer}
.hop-sao-chep.nho:hover{border-color:var(--primary);color:var(--primary);
  background:var(--primary-wash)}
.hop-sao-chep.nho svg{width:12px;height:12px}
.hop-sao-chep.nho .bt-xong,.hop-sao-chep.nho.xong .bt-chep{display:none}
.hop-sao-chep.nho.xong .bt-xong{display:block}
.hop-sao-chep.nho.xong{border-color:var(--ok,#16a34a);color:var(--ok,#16a34a)}
.lien-he .nut-an-so{margin-left:4px}
.nut-an-so{display:inline-block;padding:3px 10px;font-size:12.5px;
  border:1px solid var(--line);border-radius:999px;font-weight:600;
  text-decoration:none;color:var(--text-muted)}
.nut-an-so:hover{border-color:var(--primary);color:var(--primary);
  background:var(--primary-wash)}
.khuyen-cao.cuoi-trang{max-width:1180px;margin:18px auto 0;font-size:12.5px;
  line-height:1.7;color:var(--text-sub)}
main:not(.rong) > .duong-dan{padding-top:0;margin:0 0 18px}

/* ── ô tra cứu nhận những gì ──
   Trước đây chỗ này là hai thẻ BẤM ĐƯỢC để chọn dạng mã. Bỏ hẳn: máy chủ tự
   nhận diện, nên bộ chọn không đổi được kết quả. Còn lại là nhãn thuần.

   Vì không bấm được nên chúng phải TRÔNG như không bấm được: nền nhạt hơn ô
   tra, không đổ bóng, không đổi màu khi rê chuột, con trỏ vẫn là mũi tên. Một
   nhãn trông giống nút mà bấm không ra gì còn khó chịu hơn cả bộ chọn cũ. */
/* align-self:stretch là bắt buộc, không phải trang trí.

   .hero là flex cột với align-items:center, nên mọi con của nó lấy bề rộng
   THEO NỘI DUNG chứ không theo khung. Năm cái nhãn cộng lại 866px: trên màn
   hình 605px, hàng nhãn thò ra 175px mỗi bên, và overflow-x:auto không bao
   giờ chạy vì hộp đã tự nở ra vừa nội dung — không có gì để cuộn.

   Cho nó kéo hết bề ngang của khung thì hộp bị chặn lại, và lúc ấy quy tắc
   cuộn ngang ở khối màn hình hẹp mới có tác dụng. */
.ho-tro-dang{display:flex;justify-content:center;align-items:center;gap:6px;
  flex-wrap:wrap;align-self:stretch;margin:0 0 12px}
/* ── con chip "tự nhận diện" ──
   Ba lớp chồng lên nhau, tất cả bằng CSS thuần:
     1. quầng sáng thở ra thở vào  (::before)
     2. chính con chip, lõi giữa nhấp nháy như đang xử lý
     3. ba đốm sáng chạy vòng quanh, lệch pha nhau

   Không thư viện, không kịch bản, không ảnh — hiệu ứng nằm trong hai khung
   hình và ba thẻ <i> rỗng. Cả cụm rộng đúng 26px nên nó thay chỗ của cụm chữ
   "Tự nhận diện:" mà không đẩy hàng nhãn xuống dòng. */
.ho-tro-nhan{position:relative;display:inline-grid;place-items:center;
  width:26px;height:26px;flex:none;margin-right:4px;color:var(--primary)}
.ho-tro-nhan::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.30),rgba(53,104,196,.16) 45%,transparent 70%);
  animation:chip-tho 2.8s ease-in-out infinite}
.chip-ai{position:relative;width:19px;height:19px;
  animation:chip-doi-mau 2.8s ease-in-out infinite}
/* Lõi giữa sáng lệch pha với cả con chip: nhìn ra "đang tính", chứ không
   phải cả khối cùng phập phồng như một nút đang chờ bấm. */
.chip-ai .loi{fill:currentColor;stroke:none;animation:chip-loi 1.4s ease-in-out infinite}

/* Ba đốm chạy quanh. Mỗi đốm là một điểm gắn ở tâm rồi đẩy ra bán kính 13px,
   nên chỉ cần đổi góc là nó đi hết vòng. */
.ho-tro-nhan .tia{position:absolute;top:50%;left:50%;width:3px;height:3px;
  margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#7c5cff;
  animation:chip-quay 3.6s linear infinite}
.ho-tro-nhan .tia:nth-of-type(2){animation-delay:-1.2s;background:var(--primary)}
.ho-tro-nhan .tia:nth-of-type(3){animation-delay:-2.4s;background:#7c5cff}

@keyframes chip-tho{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%    {opacity:.9; transform:scale(1.12)}
}
@keyframes chip-doi-mau{
  0%,100%{color:var(--primary)}
  50%    {color:#7c5cff}
}
@keyframes chip-loi{
  0%,100%{opacity:.35}
  50%    {opacity:1}
}
@keyframes chip-quay{
  from{transform:rotate(0deg)   translateX(13px) rotate(0deg);   opacity:0}
  15% {opacity:1}
  85% {opacity:1}
  to  {transform:rotate(360deg) translateX(13px) rotate(-360deg); opacity:0}
}
/* Tắt hết chuyển động khi người dùng khai là không muốn: con chip vẫn ở đó,
   chỉ đứng yên. */
@media (prefers-reduced-motion:reduce){
  .ho-tro-nhan::before,.chip-ai,.chip-ai .loi{animation:none}
  .ho-tro-nhan .tia{display:none}
}
.the-ho-tro{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:var(--r-full);background:var(--surface-2);
  border:1px solid var(--border-subtle,var(--border));
  color:var(--text-muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.the-ho-tro b{font-family:var(--f-mono);font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:var(--r-full);
  background:var(--primary-soft);color:var(--primary)}
@media (max-width:560px){
  .ho-tro-dang{gap:5px}
  .the-ho-tro{font-size:11.5px;padding:4px 9px}
  /* Con chip chỉ rộng 26px nên nó đi kèm ngay đầu hàng thẻ, không cần chiếm
     trọn một dòng như cụm chữ trước đây. */
  .ho-tro-nhan{width:22px;height:22px;margin-right:2px}
  .chip-ai{width:16px;height:16px}
}

/* ══ tình trạng hoạt động ══════════════════════════════════════
   Mười ba ô cùng khuôn, chữ dài ngắn rất khác nhau — từ "Ngừng hoạt động" hai
   chữ tới "Chờ xác minh tình trạng hoạt động tại địa chỉ đã đăng ký" ba dòng.
   Hai luật giữ cho lưới không loạn:

   1. align-content:start — mọi thứ bám MÉP TRÊN. Bản cũ căn giữa theo chiều
      dọc, nên trong cùng một hàng, ô nhãn một dòng đẩy số của nó xuống giữa
      thẻ còn ô nhãn ba dòng thì không: các con số nằm ở ba độ cao khác nhau
      và mắt không có đường ngang nào để lướt.
   2. Biểu tượng cũng align-self:start, đứng ngang với CON SỐ. Bản cũ cho chấm
      tròn trải cả hai hàng rồi căn giữa, nên ở thẻ nhãn ba dòng nó trôi xuống
      cạnh chữ, trông như đang chấm câu cho nhãn chứ không như đang gắn nhãn
      cho con số. */
.luoi-tinh-trang{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px}
.o-tinh-trang{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-content:start;padding:15px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-subtle)}

/* Ô vuông bo tròn chứ không phải chấm tròn: chấm 9px chỉ đủ chỗ cho MÀU, mà
   màu thì chỉ chia được hai ba nhóm. Ô 36px chở được một hình, và hình mới là
   thứ tách "tạm nghỉ" khỏi "ngừng vĩnh viễn" khi cả hai đều không xanh. */
.o-tinh-trang .bieu-tuong{grid-row:1/3;align-self:start;display:grid;place-items:center;
  width:36px;height:36px;border-radius:11px;background:var(--surface-2);color:var(--text-dim)}
.o-tinh-trang .bieu-tuong svg{width:19px;height:19px}
/* Ba tông có màu. Tông thứ tư — "an", tức "Chưa xác định" — KHÔNG có luật
   riêng: nó nhận đúng nền xám trung tính khai ở trên, và như thế là cố ý.
   Không biết thì đừng tô màu, vì mọi màu ở đây đều là một lời phán. */
.o-tinh-trang.song .bieu-tuong{background:var(--emerald-soft);color:var(--emerald)}
.o-tinh-trang.tam  .bieu-tuong{background:var(--amber-soft);color:var(--amber)}
.o-tinh-trang.tat  .bieu-tuong{background:var(--rose-soft);color:var(--rose)}

/* tabular-nums: các con số xếp thành cột dọc thì chữ số phải cùng bề ngang,
   không thì "1.431.874" và "1.111.111" dài ngắn khác nhau ngay trong cùng
   một phông. */
.o-tinh-trang .so-luong{font-family:var(--f-heading);font-size:21px;font-weight:800;
  letter-spacing:-.02em;line-height:1.3;color:var(--text-main);
  font-variant-numeric:tabular-nums}
.o-tinh-trang .ten-tt{font-size:12.5px;color:var(--text-sub);line-height:1.4;margin-top:1px}

/* lưới tỉnh thành */
.luoi-tinh{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.o-tinh{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--border);text-decoration:none;color:inherit;
  box-shadow:0 2px 6px rgba(15,23,42,.02);transition:.2s cubic-bezier(.16,1,.3,1)}
.o-tinh:hover{border-color:var(--primary-soft-border);box-shadow:var(--shadow-card);
  transform:translateY(-2px);text-decoration:none}
.o-tinh-chu{display:flex;flex-direction:column;gap:2px;min-width:0}
.o-tinh .ten-tinh{font-family:var(--f-heading);font-weight:700;font-size:14.5px;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.15s}
.o-tinh:hover .ten-tinh{color:var(--primary)}
.o-tinh .so-dn{font-family:var(--f-mono);font-size:12px;color:var(--text-sub)}
.o-tinh-loai{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:4px 9px;border-radius:var(--r-full);
  background:var(--primary-soft);color:var(--primary)}

/* hỏi đáp */
.luoi-hoi-dap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.the-hoi-dap{border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-subtle);
  align-self:start}
.the-hoi-dap > summary{display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;list-style:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.the-hoi-dap > summary::-webkit-details-marker{display:none}
.the-hoi-dap > summary:hover h3{color:var(--primary)}
/* Mũi tên vẽ bằng hai cạnh viền xoay 45 độ — không thêm thẻ nào, nên
   <summary> giữ đúng mẫu nội dung "một thẻ tiêu đề duy nhất". */
.the-hoi-dap > summary::after{content:"";flex:none;width:8px;height:8px;margin:5px 2px 0 0;
  border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:rotate(45deg);transition:transform .18s}
.the-hoi-dap[open] > summary::after{transform:rotate(-135deg);margin-top:8px}
.the-hoi-dap[open] > summary h3{color:var(--primary)}
.the-hoi-dap h3{margin:0;flex:1;min-width:0;font-size:15.5px;line-height:1.35;color:var(--text-main)}
.the-hoi-dap > p{margin:0;padding:0 18px 16px;font-size:14px;line-height:1.72;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.the-hoi-dap > summary::after{transition:none}}
.the-hoi-dap b{color:var(--text-main)}
.the-hoi-dap code{font-family:var(--f-mono);font-size:12.5px;padding:1px 6px;
  border-radius:5px;background:var(--surface-2);color:var(--text-main)}

/* ══ danh sách doanh nghiệp theo địa bàn ══════════════════════ */
.bo-cuc-dia-ban{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;
  max-width:1180px;margin:0 auto;align-items:start}
@media (max-width:1100px){.bo-cuc-dia-ban{grid-template-columns:1fr}}
.cot-du-lieu{min-width:0}
.duong-dan .dang-o{color:var(--primary);font-weight:700}

/* Nhịp dọc của phần đầu danh sách: mặt đường dẫn — 26px — tiêu đề — 8px —
   câu phụ đề — 28px — danh sách. Trước đây cả cụm dính chùm vào nhau nên mắt
   không tách được đâu là tiêu đề, đâu là dòng đầu tiên của dữ liệu. */
.dau-danh-sach{margin:8px 0 28px}
.the-khu-vuc{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;margin-bottom:8px;
  border-radius:var(--r-full);background:var(--primary-soft);
  border:1px solid var(--primary-soft-border);color:var(--primary);
  font-family:var(--f-heading);font-size:12.5px;font-weight:800}
.dau-danh-sach h1{margin:0;font-size:clamp(23px,3.4vw,33px);line-height:1.35;letter-spacing:-.02em}
.dau-danh-sach .phu-de{margin:8px 0 0;color:var(--text-muted);font-size:14.5px;line-height:1.6}
.dau-danh-sach .phu-de strong{color:var(--text-main)}

/* Tiêu đề cho một khối bảng nằm giữa trang. scroll-margin-top vì nó cũng là
   đích của liên kết #danh-sach-mst — không có nó thì thanh điều hướng dính
   trên đầu che mất đúng dòng vừa nhảy tới. */
.dau-khoi{margin:34px 0 12px;font-size:19px;line-height:1.35;letter-spacing:-.01em;
  scroll-margin-top:78px}
.dau-khoi span{margin-left:8px;color:var(--text-muted);font-family:var(--f-body);
  font-size:13px;font-weight:500;letter-spacing:0}

/* ── hạn mức đã lưu: con số + thanh tiến độ ──
   Thanh nằm DƯỚI con số chứ không thay nó: con số trả lời "bao nhiêu", thanh
   trả lời "còn bao nhiêu chỗ" — hai câu hỏi khác nhau, người dùng cần cả hai. */
.hm-so{display:block;font-size:13px;color:var(--text-muted)}
.hm-so b{color:var(--text-main)}
.hm-thanh{display:block;height:6px;margin-top:6px;border-radius:var(--r-full);
  background:var(--surface-2);overflow:hidden}
.hm-thanh>span{display:block;height:100%;border-radius:inherit;
  background:var(--primary);transition:width .25s}
.hm-thanh.gan-day>span{background:var(--amber)}
.hm-thanh.day>span{background:var(--rose)}
.hm-nhac{display:block;margin-top:5px;font-size:12px;font-weight:700;color:var(--rose)}
@media (prefers-reduced-motion:reduce){.hm-thanh>span{transition:none}}

/* ── trang 404 ──
   Con số to là mốc để mắt bắt ngay "đây là trang lỗi", trước cả khi đọc chữ.
   Nhạt và nằm sau tiêu đề vì nó là trang trí, không phải thông tin — nên cũng
   mang aria-hidden để trình đọc màn hình bỏ qua. */
.trang-hut{position:relative}
.hut-so{font-family:var(--f-heading);font-size:clamp(56px,12vw,104px);font-weight:800;
  line-height:.9;letter-spacing:-.04em;color:var(--primary-soft);margin-bottom:-6px;
  user-select:none}
.hut-duong{margin:-6px 0 0;font-size:13px;color:var(--text-sub)}
.hut-duong code{padding:2px 7px;border-radius:7px;background:var(--surface-2);
  font-family:var(--f-mono);font-size:12.5px;word-break:break-all}
.trang-hut .o-tra-nhanh{margin:0 0 8px}
.hut-loi{margin:0;padding-left:20px;line-height:2}
.hut-loi a{font-weight:700}

.thanh-loc{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:16px;
  padding:14px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-subtle)}
.thanh-loc .o-loc{display:flex;flex-direction:column;gap:5px;min-width:0}
.thanh-loc .o-loc>span{font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-sub)}
.thanh-loc select{height:42px;padding:0 10px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-main);
  font-family:var(--f-body);font-size:13px;font-weight:600;cursor:pointer}
.thanh-loc select:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.thanh-loc button{height:42px;padding:0 20px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--dam-1),var(--dam-2));color:#fff;
  font-family:var(--f-heading);font-size:13.5px;font-weight:700;
  box-shadow:0 3px 9px rgba(47,58,74,.14)}
.thanh-loc button:hover{background:linear-gradient(135deg,var(--dam-1-ho),var(--dam-2-ho));transform:translateY(-1px)}
.thanh-loc .xoa-loc{align-self:center;font-size:13px;font-weight:600;color:var(--text-sub)}

/* thẻ bảng */
.the-bang{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);
  box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:18px}
.bang-dau{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);
  font-size:13px;color:var(--text-muted)}
.bang-dau strong{color:var(--text-main)}
.bang-dau-phu{font-size:12.5px;color:var(--text-sub)}
.bang-rong{margin:0;padding:26px 20px;color:var(--text-muted);font-size:14.5px;line-height:1.7}
.bang-cuon{overflow-x:auto}
.bang-dn{width:100%;border-collapse:collapse;text-align:left;font-size:13.5px}
.bang-dn thead tr{background:var(--surface-2);border-bottom:1px solid var(--border)}
.bang-dn th{padding:11px 14px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.bang-dn td{padding:13px 14px;vertical-align:top;border-bottom:1px solid var(--border-subtle)}
.bang-dn tbody tr:last-child td{border-bottom:0}
.bang-dn tbody tr:hover{background:var(--primary-soft)}
/* ── BỀ NGANG CÁC CỘT CỐ ĐỊNH: SIẾT LẠI CHO TÊN CÓ CHỖ ──
   Đo ở bố cục hai cột (bảng rộng 792px): năm cột cố định ăn 588px, chừa cho
   tên và trụ sở đúng 204px — tên công ty Việt Nam vì thế bẻ hai đến ba dòng,
   trong khi cột "Ngày cấp" rộng 112px cho một chuỗi 10 ký tự.

   Mỗi con số dưới đây là bề rộng nội dung THẬT cộng 28px đệm ô:
     mã số thuế  viên nhãn ~118px       ngày cấp  "08/04/2025" ~66px
     tình trạng  "Đang hoạt động" ~102  nút lưu   ~66px
   Cộng lại còn 506px, tên được 286px — hơn phân nửa so với trước. */
.bang-dn .c-stt{width:44px;font-family:var(--f-mono);font-weight:700;color:var(--text-dim)}
/* Viên nhãn mã số thuế nằm trong ô đầu, dưới địa chỉ — không còn cột riêng.
   Tách khỏi địa chỉ một nhịp để nó đọc như một mẩu riêng chứ không như dòng
   cuối của địa chỉ. */
.bang-dn .o-mst-duoi{margin-top:8px}
.bang-dn .c-ngay{width:96px;font-size:12.5px;color:var(--text-sub);white-space:nowrap}
/* 140px, không phải 128. Viên nhãn "Đang hoạt động" — tình trạng của gần chín
   phần mười bản ghi — đo được rộng ĐÚNG 107px. Trừ 28px đệm ô, cột 128px chỉ
   chừa 100px nên nhãn bẻ làm hai dòng, và một viên bo tròn hết cỡ mà hai dòng
   thì chữ trông lệch hẳn khỏi tâm. 140px chừa 112px, dư 5px. */
/* 152px chứ không phải 140. Đo trên trang tỉnh: viên nhãn "Ngừng hoạt động"
   cần 115px cho một dòng, mà 140 trừ đệm ô chỉ còn 112 — thiếu đúng 3px nên
   nó bẻ hai dòng và làm dòng bảng cao gấp rưỡi.

   KHÔNG đặt white-space:nowrap: có một tình trạng dài là "Ngừng hoạt động,
   chưa chấm dứt hiệu lực mã số thuế", nó phải được xuống dòng. */
.bang-dn .c-tt{width:152px}
.ten-dn-bang{display:block;font-family:var(--f-heading);font-weight:700;font-size:14.5px;
  line-height:1.35;color:var(--primary);text-decoration:none}
.ten-dn-bang:hover{text-decoration:underline}
.dia-chi-bang{margin-top:3px;font-size:12px;line-height:1.45;color:var(--text-sub)}
/* Căn giữa: tình trạng dài hiếm gặp — "ngừng hoạt động nhưng chưa hoàn thành
   thủ tục" — vẫn bẻ dòng dù cột đã rộng. Căn trái thì hai dòng lệch nhau trong
   một hình bo tròn, căn giữa thì nó vẫn đọc được như một viên nhãn. */
.the-tt{display:inline-block;padding:3px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;line-height:1.5;text-align:center}
.the-tt.song{background:var(--emerald-soft);color:var(--emerald)}
.the-tt.tat{background:var(--rose-soft);color:var(--rose)}

/* phân trang */
.thanh-phan-trang{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;padding:15px 18px;border-top:1px solid var(--border)}
.pt-chu{font-size:13px;color:var(--text-sub)}
.pt-chu strong{color:var(--text-main)}
.pt-nut{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pt-nut a,.pt-nut>span{padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:700;
  text-decoration:none;border:1px solid var(--border);background:var(--surface);
  color:var(--text-main);line-height:1.5}
.pt-nut a:hover{border-color:var(--primary-soft-border);background:var(--primary-soft);
  color:var(--primary);text-decoration:none}
.pt-nut .pt-so{min-width:34px;text-align:center;padding:6px 8px}
.pt-nut .pt-so.dang{background:linear-gradient(135deg,var(--dam-1),var(--dam-2));border-color:transparent;
  color:#fff;box-shadow:0 3px 8px rgba(47,58,74,.14)}
.pt-nut .tat{color:var(--text-dim);background:var(--surface-2);cursor:default}
.pt-nut .ba-cham{border:0;background:none;color:var(--text-dim);padding:6px 2px}
.pt-nhay{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-sub)}
.pt-nhay input{width:64px;height:31px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-main);text-align:center;font-weight:700;
  font-family:var(--f-mono);font-size:12.5px}
.pt-nhay button{padding:5px 11px;border-radius:7px;border:0;cursor:pointer;
  background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:11.5px}
.pt-nhay button:hover{background:var(--primary);color:#fff}

.the-phu{padding:20px 22px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-subtle)}
.the-phu h2{margin:0 0 12px;font-size:18px}
.cap.gon{margin-top:16px;font-size:13.5px}

/* ── cây địa bàn cột phải ── */
.cot-ben{position:sticky;top:14px;display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1100px){.cot-ben{position:static}}
.cay-danh-sach.thap{max-height:300px}

/* ── cây địa bàn: thu gọn khi quá dài ──
   Cùng lối với bảng ngành nghề ở trang hồ sơ — ô đánh dấu ẩn + nhãn làm nút,
   không JavaScript. Xem khối ghi chú ở .hop-nganh về lý do.

   Danh sách vốn đã có max-height và tự cuộn, nhưng một khung cuộn 168 dòng
   vẫn là 168 dòng: thanh cuộn tí xíu báo cho người đọc biết còn rất nhiều thứ
   phía dưới, mà mười dòng đầu mới là thứ họ cần. */
.cay-dia-ban{position:relative}
.cay-dia-ban .cong-tac-mo{position:absolute;width:1px;height:1px;opacity:0;
  margin:0;pointer-events:none}
.cong-tac-mo:not(:checked) ~ .cay-danh-sach li.an-bot{display:none}
/* Thu gọn thì danh sách ngắn, bỏ luôn khung cuộn — hai thanh cuộn lồng nhau
   trên một danh sách mười dòng chỉ tổ rối. */
.cay-dia-ban:has(.cong-tac-mo:not(:checked)) .cay-danh-sach{max-height:none;overflow:visible}
.nut-mo-cay{margin-top:8px;padding:8px 12px;font-size:12.5px}

.cay-dia-ban{display:flex;flex-direction:column;
  padding:16px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-card)}
.cay-dau{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--border)}
.cay-dau svg{width:18px;height:18px;color:var(--primary);flex:none}
.cay-dau h2{margin:0;font-size:15px}
.cay-tinh{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-radius:var(--r-md);background:var(--primary-soft);
  border:1px solid var(--primary-soft-border);color:var(--primary);
  font-family:var(--f-heading);font-size:13.5px;font-weight:700;text-decoration:none}
.cay-tinh:hover{text-decoration:none;filter:brightness(.97)}
.cay-so{flex:none;font-family:var(--f-mono);font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-sub)}
.cay-tinh .cay-so{background:var(--lop-trang-mo);color:var(--primary)}
.cay-ghi-chu{margin:9px 2px 0;font-size:11.5px;line-height:1.5;color:var(--text-sub)}
.cay-tim{position:relative;margin:12px 0 8px}
.cay-tim svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--text-dim);pointer-events:none}
.cay-tim input{width:100%;height:36px;padding:0 10px 0 32px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-main);
  font-family:var(--f-body);font-size:13px}
.cay-tim input:focus-visible{outline:2px solid var(--primary);outline-offset:-1px}
.cay-danh-sach{list-style:none;margin:0;padding:0 4px 0 0;max-height:58vh;overflow-y:auto;
  scrollbar-width:thin}
/* Kho hình dùng chung: chỉ để chứa <symbol>, không bao giờ vẽ ra. */
.kho-hinh{position:absolute;width:0;height:0;overflow:hidden}

/* Hàng trong cây: liên kết co giãn, nút lưu bám mép phải và chỉ hiện khi rê
   chuột tới — 168 ngôi sao xám cùng lúc làm danh sách trông như một bảng điều
   khiển, trong khi thứ người đọc cần thấy là tên địa bàn. Đã lưu thì hiện
   thường trực, vì lúc ấy nó là thông tin chứ không còn là nút. */
.cay-danh-sach>li{display:flex;align-items:center;gap:2px}
.cay-danh-sach>li>.cay-xa{flex:1 1 auto;min-width:0}
.cay-xa{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--text-muted);
  font-size:13px;line-height:1.4}
.cay-xa:hover{background:var(--surface-2);color:var(--text-main);text-decoration:none}
.cay-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cay-xa.dang{background:var(--primary);color:#fff;font-weight:700}
.cay-xa.dang .cay-so{background:rgba(255,255,255,.22);color:#fff}
.cay-khong{margin:8px 2px 0;font-size:12.5px;color:var(--text-sub)}
.cay-tat-ca{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12.5px;font-weight:700;color:var(--primary);text-decoration:none}

@media (max-width:640px){
  .bang-dn:not(.bang-xa) .c-ngay{display:none}
  .bang-dn th,.bang-dn td{padding:11px 10px}
  .thanh-loc{gap:8px}
  .thanh-loc .o-loc{flex:1 1 140px}
  .thanh-loc select{width:100%}
}

/* ══ hồ sơ mã số thuế, theo bản mẫu chi-tiet ══════════════════ */
.the-ho-so{max-width:1180px;margin:14px auto 0;padding:30px 32px;
  border-radius:24px;background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-card)}
@media (max-width:640px){.the-ho-so{padding:20px 18px;border-radius:18px}}

.hs-dau{display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.hs-danh-tinh{display:flex;align-items:flex-start;min-width:0;flex:1 1 420px}
.hs-chu{min-width:0}
/* 14px chứ không phải 7px giữa hàng nhãn và tên đơn vị.

   Hàng nhãn nói về TƯ CÁCH — còn hoạt động không, thuộc loại gì — còn tên là
   danh tính. Hai loại thông tin khác nhau thì phải thấy được là hai khối, chứ
   không dính vào nhau thành một mảng chữ. Ở 7px chúng đọc như một cụm liền,
   nhất là trên điện thoại khi hàng nhãn xuống hai dòng. */
.hs-nhan{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hs-nhan .trang-thai{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:var(--r-full);font-size:12.5px;font-weight:700}
.hs-nhan .trang-thai i{width:8px;height:8px;border-radius:50%;background:currentColor;
  flex:none;display:inline-block}
.hs-nhan .trang-thai.dang-hoat-dong{background:var(--emerald-soft);color:var(--emerald)}
.hs-nhan .trang-thai.ngung{background:var(--rose-soft);color:var(--rose)}
.hs-loai{padding:4px 10px;border-radius:var(--r-full);background:var(--primary-soft);
  border:1px solid var(--primary-soft-border);color:var(--primary);
  font-size:12px;font-weight:700}
.hs-chu h1{margin:0;font-size:clamp(21px,3.1vw,31px);line-height:1.32;letter-spacing:-.02em}
.hs-ten-khac{margin-top:5px;font-size:14px;line-height:1.6;color:var(--text-sub)}
.hs-ten-khac strong{color:var(--text-main)}
.hs-nut{display:flex;gap:10px;flex-wrap:wrap}
/* Con mắt đếm lượt xem, đứng cạnh nút Lưu. Cố ý NHẠT hơn nút Lưu: Lưu là việc
   người đọc làm, còn đây chỉ là một con số để biết — cùng độ đậm thì hai thứ
   tranh nhau sự chú ý và cái đáng bấm lại chìm đi. */
.hs-luot-xem{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  color:var(--text-sub);font-size:13.5px;text-decoration:none;transition:.15s}
.hs-luot-xem:hover{border-color:var(--primary-soft-border);background:var(--primary-soft);
  color:var(--primary-dark);text-decoration:none}
.hs-luot-xem svg{width:16px;height:16px;flex:none}
.hs-luot-xem b{font-family:var(--f-heading);font-weight:700;font-size:14.5px;
  font-variant-numeric:tabular-nums;color:var(--text-main)}
.hs-luot-xem:hover b{color:var(--primary-dark)}
/* Màn hình hẹp: bỏ chữ, giữ con mắt và con số. */
@media (max-width:520px){.hs-luot-xem span{display:none}}
/* Nhảy tới khối biểu đồ mà không bị thanh điều hướng dính che mất tiêu đề. */
#luot-xem{scroll-margin-top:90px}
.hop-sao-chep.to{padding:11px 18px;border-radius:12px;font-size:13.5px}
.hop-sao-chep.to svg{width:16px;height:16px;opacity:1}

.hs-o-nhanh{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:14px;margin:22px 0 4px}
.hs-o-nhanh.hai-cot{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.hs-o-nhanh.hai-cot{grid-template-columns:1fr}}
.hs-o{padding:15px 16px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--border);min-width:0}
.hs-o>span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim)}
.hs-o>div{margin-top:4px;font-family:var(--f-heading);font-size:15.5px;font-weight:700;
  line-height:1.35;color:var(--text-main);word-break:break-word}
.hs-o>div.ma{display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:20px;color:var(--primary)}
.hs-o>div.ma .hop-sao-chep.nho{margin-left:0;flex:none}
.hs-o>div a{color:var(--primary);text-decoration:none}
.hs-o>div a:hover{text-decoration:underline}
.hs-o>div.xanh{color:var(--emerald)}
.hs-o>div.do{color:var(--rose)}
.hs-o em{display:inline-block;margin-left:6px;font-style:normal;font-size:12px;
  font-weight:600;color:var(--text-sub)}

.the-ho-so .khoi{margin-top:26px;padding:0;background:none;border:0;box-shadow:none}
.the-ho-so .khoi h2{margin:0 0 13px;font-size:18px;font-weight:800}
.cap.hai-cot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
@media (max-width:700px){.cap.hai-cot{grid-template-columns:1fr}}
.cap.hai-cot dt{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim)}
.cap.hai-cot dd{margin:3px 0 0;font-size:14.5px;font-weight:600;color:var(--text-main)}
.cap.hai-cot>div{min-width:0}

/* trang tỉnh: bảng đơn vị cấp xã */
.bang-xa .c-loai{width:110px}
.bang-dn .c-luu{width:92px;text-align:right}
.bang-xa .c-so{width:130px;text-align:right;font-family:var(--f-mono);font-size:13.5px}
.bang-xa .c-so b{color:var(--text-main)}
.bang-xa td{vertical-align:middle}
.doi-sap{display:inline-flex;gap:4px;padding:3px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--border)}
.doi-sap a{padding:4px 12px;border-radius:var(--r-full);font-size:12.5px;font-weight:700;
  color:var(--text-sub);text-decoration:none}
.doi-sap a:hover{color:var(--text-main);text-decoration:none}
.doi-sap a.dang{background:var(--primary);color:#fff}
.bang-chan{margin:0;padding:14px 18px;border-top:1px solid var(--border);
  background:var(--surface-2);font-size:13px;line-height:1.65;color:var(--text-muted)}
.bang-chan b{color:var(--text-main)}
.hs-o>div.cam{color:var(--amber)}

/* ô tra mã số thuế trên các trang danh sách.
   Nền có màu để nổi hơn thanh lọc nền trắng ngay bên dưới — hai việc khác nhau
   thì phải nhìn ra là khác nhau. */
.an-di{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.o-tra-nhanh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-lg);
  background:var(--dai-o-tra);
  border:1px solid var(--primary-soft-border);
  box-shadow:0 4px 12px -8px rgba(53,104,196,.22)}
.o-tra-khung{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:12px;
  height:44px;padding:0 18px;border-radius:var(--r-full);background:var(--surface);
  border:1px solid var(--vien-kinh);box-shadow:0 1px 3px rgba(15,23,42,.06);
  transition:.18s}
.o-tra-nhanh:focus-within .o-tra-khung{box-shadow:0 0 0 3px var(--primary-glow)}
.o-tra-kinh{width:24px;height:24px;flex:none;color:var(--primary)}
.o-tra-khung input{width:100%;min-width:0;border:0;outline:none;background:none;
  color:var(--text-main);font-family:var(--f-body);font-size:14.5px}
.o-tra-khung input::placeholder{color:var(--text-dim)}
.o-tra-nhanh button{flex:none;height:44px;padding:0 24px;border:0;cursor:pointer;
  border-radius:var(--r-full);background:var(--primary);color:#fff;
  font-family:var(--f-heading);font-size:14px;font-weight:700;
  box-shadow:0 6px 14px -4px var(--primary-glow)}
.o-tra-nhanh button:hover{background:var(--primary-dark);transform:translateY(-1px)}
@media (max-width:620px){
  .o-tra-nhanh{padding:10px}
  .o-tra-khung{height:42px;padding:0 14px;flex:1 1 100%}
  .o-tra-nhanh button{height:42px;padding:0 18px;flex:1 1 100%}
}

.don-vi a,.ung-vien a{color:var(--primary);text-decoration:none}
.don-vi a:hover,.ung-vien a:hover{text-decoration:underline}

/* ══ nút lưu và danh sách đã lưu ══════════════════════════════ */
.nut-luu{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 13px;border-radius:var(--r-full);cursor:pointer;appearance:none;
  background:var(--surface);border:1px solid var(--border);color:var(--text-sub);
  font-family:var(--f-heading);font-size:12.5px;font-weight:700;
  line-height:1.5;white-space:nowrap;transition:.16s}
.nut-luu:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.nut-luu:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nut-luu svg{width:15px;height:15px;flex:none}
.nut-luu .sao-day{display:none}
.nut-luu.da-luu{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.nut-luu.da-luu .sao-rong{display:none}
.nut-luu.da-luu .sao-day{display:block}
/* Ghi hỏng — hết dung lượng hoặc trình duyệt chặn. Báo ra, không nuốt im. */
.nut-luu.luu-hong{border-color:var(--rose);color:var(--rose);background:var(--rose-soft)}
.nut-luu.luu-hong .nhan::after{content:" — không lưu được"}
/* Ngôi sao trong cây: một hình duy nhất, đầy hay rỗng do CSS quyết. Xem
   <symbol id="i-sao"> trong _CayDiaBan. */
.nut-luu.cay .sao{fill:none;stroke:currentColor}
.nut-luu.cay.da-luu .sao{fill:currentColor}
/* Hiện thường trực, chỉ nhạt đi. Danh sách thu gọn còn mười dòng nên mười
   ngôi sao nhạt không làm rối, mà chỉ hiện khi rê chuột thì trên màn cảm ứng
   coi như không có nút — người dùng đâu biết phải rê vào đâu. */
.nut-luu.cay{padding:5px;border:0;background:none;color:var(--text-dim)}
.nut-luu.cay:hover{background:var(--amber-soft);color:var(--amber)}
.nut-luu.cay.da-luu{color:var(--amber);background:none}
li:hover>.nut-luu.cay{color:var(--text-sub)}
li:hover>.nut-luu.cay:hover,li:hover>.nut-luu.cay.da-luu{color:var(--amber)}

.nut-luu.gon{padding:5px;border-radius:9px}
.nut-luu.gon .nhan{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* Dòng đã lưu được đẩy lên đầu danh sách */
.dong-da-luu{position:relative}
tr.dong-da-luu{background:var(--amber-soft)}
tr.dong-da-luu .c-stt{color:var(--amber)}
/* Vệt sáng phủ CẢ hàng, kể cả ngôi sao — nền dừng ngay trước nút thì trông
   như cái nút không thuộc về hàng đang được đánh dấu. */
li.dong-da-luu{background:var(--amber-soft);border-radius:9px}
li.dong-da-luu>.cay-xa{color:var(--amber);font-weight:700}
li.dong-da-luu>.cay-xa:hover{background:none}
li.dong-da-luu>.cay-xa .cay-so{background:var(--lop-trang-mo);color:var(--amber)}
li.dong-da-luu>.cay-xa.dang{background:var(--primary);color:#fff}

/* Số đếm trên thanh điều hướng */
.dem-luu{display:inline-block;min-width:18px;margin-left:5px;padding:1px 6px;
  border-radius:var(--r-full);background:var(--amber-soft);color:var(--amber);
  font-family:var(--f-mono);font-size:11px;font-weight:700;text-align:center}

/* Trang /da-luu */
.trang-luu{max-width:1180px;margin:0 auto}
.ds-da-luu{list-style:none;margin:0;padding:0}
.ds-da-luu li{display:grid;grid-template-columns:minmax(0,1fr) 150px 100px auto;
  align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--border-subtle)}
.ds-da-luu li:last-child{border-bottom:0}
.ds-da-luu li:hover{background:var(--surface-2)}
.muc-chu{display:flex;flex-direction:column;gap:2px;min-width:0;text-decoration:none;color:inherit}
.muc-ten{font-family:var(--f-heading);font-weight:700;font-size:14.5px;line-height:1.35;
  color:var(--primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muc-phu{font-size:12px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muc-ma{font-family:var(--f-mono);font-size:12.5px;color:var(--text-sub)}
.muc-ngay{font-size:12px;color:var(--text-dim);white-space:nowrap}
.muc-bo{padding:5px 11px;border-radius:8px;cursor:pointer;appearance:none;
  background:var(--surface);border:1px solid var(--border);color:var(--text-sub);
  font-family:var(--f-heading);font-size:12px;font-weight:700}
.muc-bo:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-soft)}
@media (max-width:760px){
  .ds-da-luu li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .muc-ma{grid-column:1}
  .muc-ngay{display:none}
}

/* Ngăn vùng: khối trên nói về địa bàn đang xem, khối dưới là đi tìm chỗ khác.
   Hai việc khác nhau thì cần một đường kẻ, không chỉ là một khoảng trống. */
.o-tra-nhanh{position:relative;margin-top:34px}
.o-tra-nhanh::before{content:"";position:absolute;left:0;right:0;top:-18px;
  height:1px;background:var(--border)}

/* ══ dựng lại phần đầu trang danh sách ═══════════════════════
   Trước đó một màn hình có tới sáu thẻ nền trắng bo góc: nhãn khu vực, dãy ô
   số liệu, ghi chú, ô tra, đầu bảng, ô lọc. Sáu thứ cùng trọng lượng thì mắt
   không biết bám vào đâu, và ô tra — thứ dùng nhiều nhất — chìm nghỉm.

   Ba việc đã làm:
     • Dãy 4 ô số liệu → một DẢI CHỮ, không viền không nền. Số liệu là thứ để
       liếc qua, không phải thứ để bấm, nên không đáng chiếm một thẻ.
     • Thanh lọc gộp vào ĐẦU BẢNG. Nó điều khiển bảng, nên nó thuộc về bảng.
     • Ghi chú địa giới đẩy xuống DƯỚI bảng. Là tra cứu tham khảo, không phải
       thao tác — người cần số liệu phải thấy số liệu trước.
   Còn lại hai thẻ: ô tra và bảng. */

/* Hàng dưới tiêu đề, dồn về phải — chỗ của nút lưu. */
.dau-cuoi{display:flex;justify-content:flex-end;margin:18px 0 6px}

/* Dải số liệu: chữ, không thẻ */
.dai-so-lieu{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  margin:14px 0 0;font-size:14px;color:var(--text-muted)}
.dai-so-lieu>span{display:inline-flex;align-items:baseline;gap:6px}
.dai-so-lieu b{font-family:var(--f-heading);font-size:16px;font-weight:800;
  color:var(--text-main);letter-spacing:-.01em}
.dai-so-lieu .canh b{color:var(--amber)}
.dai-so-lieu .mo{color:var(--text-sub)}
.dai-so-lieu>span+span::before{content:"·";margin-right:14px;
  color:var(--text-dim);font-size:11px;font-weight:400}
/* Màn hình hẹp: BỎ HẲN dấu ngăn cách.

   Dải này xuống ba dòng ở 430px. Dấu chấm giữa gắn bằng ::before nên khi một
   mục rơi xuống dòng mới, dấu ấy đi theo và nằm ở ĐẦU dòng — trông như một
   dấu đầu dòng lạc lõng, không phải dấu ngăn cách. Khe 14px đã đủ tách các
   mục khi chúng nằm cùng hàng. */
@media (max-width:560px){.dai-so-lieu{gap:8px 14px;font-size:13px}
  .dai-so-lieu>span+span::before{content:none}}

/* Ô tra: thẻ NỔI NHẤT trên trang, đứng ngay sau tiêu đề */
.o-tra-nhanh{margin-top:20px;padding:16px;border-width:1.5px}
.o-tra-nhanh::before{display:none}
.o-tra-khung{height:50px;font-size:15px}
.o-tra-khung input{font-size:15.5px}
.o-tra-nhanh button{height:50px;padding:0 30px;font-size:15px}
.o-tra-kinh{width:26px;height:26px}

/* Nút lưu bản vừa: đủ nổi để thấy ngay, không to đến mức tranh chỗ với tiêu đề */
.nut-luu.vua{padding:9px 17px;font-size:13px;gap:7px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-sub)}
.nut-luu.vua svg{width:16px;height:16px}
.nut-luu.vua:hover{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.nut-luu.vua.da-luu{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.nut-luu.vua.da-luu:hover{background:var(--amber-luu-ho)}

/* Đầu bảng: một hàng duy nhất — chữ bên trái, công cụ bên phải. */
.bang-dau{flex-wrap:nowrap;align-items:center;gap:16px;padding:11px 16px}
.bang-dau-trai{min-width:0;font-size:13px;line-height:1.45;color:var(--text-muted)}
.bang-dau .thanh-loc,.bang-dau-phai{display:flex;align-items:center;gap:8px;
  flex:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
.bang-dau .thanh-loc select,.bang-dau .cay-tim input{height:34px;font-size:12.5px}
.bang-dau .thanh-loc select{padding:0 8px}
.bang-dau .thanh-loc button{height:34px;padding:0 14px;font-size:12.5px}
.bang-dau .cay-tim{margin:0;width:210px}
.bang-dau .cay-tim input{padding-left:30px}
.bang-dau .cay-tim svg{left:9px;width:14px;height:14px}
/* Không cho "Nhiều nhất" bẻ làm hai dòng: nó là một nhãn nút, và nút hai dòng
   trong một cặp chuyển đổi làm cả cặp cao lệch. */
.bang-dau .doi-sap a{padding:4px 10px;font-size:12px;white-space:nowrap}
.bang-dau .xoa-loc{font-size:12px}
@media (max-width:900px){
  .bang-dau{flex-wrap:wrap;row-gap:10px}
  .bang-dau .cay-tim{width:100%}
}

/* Ghi chú đẩy xuống cuối, gọn lại */
.ghi-chu-cuoi{margin-top:22px}
.ghi-chu-cuoi>.note{margin-top:12px}

/* ══ thanh nổi bên trái: nhóm đã lưu ══════════════════════════
   Chỉ hiện khi có mục đã lưu, và chỉ trên màn đủ rộng để nó không đè lên nội
   dung. Màn hẹp thì đã có mục "Đã lưu" trên thanh điều hướng và trang /da-luu.
   ------------------------------------------------------------ */
/* Khung ngoài KHÔNG có nền: nó chỉ xếp chỗ. Nền và viền nằm ở từng hộp con,
   nhờ vậy hai vùng tách rời thật sự chứ không phải hai phần của một tấm. */
/* Bề ngang LÚC NGHỈ khai một chỗ, để bảng bung ra biết mình phải né bao nhiêu.
   Chỉ tính phần biểu tượng: 10 + 42 + 10 = 62. Nhãn bung ra khi rê vào thì
   đè tạm lên nội dung, chấp nhận được vì lúc ấy người dùng đang thao tác —
   còn để nhãn mở suốt thì thanh chiếm 242px và che nội dung vĩnh viễn. */
:root{--ray-trai:14px; --ray-rong:62px}
.ray-luu{position:fixed;left:var(--ray-trai);top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ray-hop{display:flex;flex-direction:column;gap:8px;padding:12px 10px;
  border-radius:var(--r-lg);background:var(--surface-glass-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);box-shadow:var(--shadow-float)}

/* Hộp tra cứu nổi hẳn lên: viền và nền theo màu thương hiệu thay vì kính mờ.
   Nó là việc làm ngay, còn hộp dưới là thứ để quay lại — hai vai trò khác
   nhau thì không nên trông giống hệt nhau. */
.ray-hop-tra{background:var(--primary-soft);border-color:var(--primary-soft-border)}
.ray-hop-tra .ray-nhan{color:var(--primary-dark);font-weight:700}
.ray-tra .ray-tron{background:var(--surface);border-color:var(--primary);
  color:var(--primary);box-shadow:0 2px 8px rgba(53,104,196,.18)}
/* Ô tra cứu nhanh trong bảng nổi. Cùng cửa /ma-so-thue?key= với ô ở trang chủ,
   nên không sinh thêm một đường xử lý thứ hai phải nhớ giữ đồng bộ. */
.bang-tra{display:flex;gap:8px;padding:12px 14px 4px}
.bang-tra input{flex:1;min-width:0;font:inherit;font-size:14px;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.bang-tra input:focus{outline:none;border-color:var(--primary)}
/* Nút hình vuông mang kính lúp thay cho chữ "Tra": chữ ấy lặp lại đúng thứ
   tiêu đề bảng đã nói, mà lại chiếm mất chỗ của ô nhập — vốn là chỗ cần rộng. */
.bang-tra button{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:0;border-radius:10px;background:var(--primary);color:#fff;cursor:pointer;
  padding:0;transition:.15s}
.bang-tra button:hover{background:var(--primary-dark)}
.bang-tra button svg{width:18px;height:18px}

/* Màn mờ. Nằm DƯỚI thanh nổi (z-index 40) nên nút vừa bấm vẫn sáng — người
   dùng thấy được ô tra cứu này từ đâu ra. */
.man-mo{position:fixed;inset:0;z-index:39;background:var(--man-mo-nen);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  animation:hien-man .15s ease-out}
@keyframes hien-man{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.man-mo{animation:none}}
.bang-tra-goi-y{margin:0;padding:4px 14px 14px;font-size:12.5px;color:var(--text-sub)}
.ray-tra:hover .ray-tron,.ray-tra[aria-expanded="true"] .ray-tron{
  background:var(--primary);border-color:var(--primary);color:#fff}
.ray-tra:hover,.ray-tra[aria-expanded="true"]{color:var(--primary-dark)}

.ray-nut{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--text-sub);font-family:var(--f-heading);
  font-size:13px;font-weight:700;text-align:left;white-space:nowrap}
.ray-tron{position:relative;display:grid;place-items:center;width:42px;height:42px;
  flex:none;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border);color:var(--text-muted);transition:.18s}
.ray-tron svg{width:19px;height:19px}
.ray-dem{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--amber);color:#fff;font-family:var(--f-mono);font-size:10.5px;
  font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--surface)}
/* Nhãn cụp lại lúc nghỉ, bung khi rê vào hoặc khi có tiêu điểm bàn phím.
   Mỗi nút vẫn mang thuộc tính title, nên rê vào là trình duyệt hiện chú thích
   kể cả trước khi nhãn kịp bung — người dùng không phải đoán biểu tượng. */
.ray-nhan{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:.2s cubic-bezier(.16,1,.3,1)}
.ray-luu:hover .ray-nhan,.ray-luu:focus-within .ray-nhan{max-width:170px;opacity:1}
/* ── hộp đổi giao diện ─────────────────────────────────────────
   Cùng cột trái với thanh "đã lưu" nhưng neo ở ĐÁY, không ở giữa. Thanh kia
   dùng top:50% + translateY(-50%); đặt hộp này vào cùng chỗ thì hai thứ chồng
   lên nhau, mà chiều cao thanh kia lại đổi theo số nhóm đã lưu nên không có
   con số bù trừ nào đúng được lâu.

   Mượn nguyên .ray-hop cho phần khung, nên nó tự đi theo mọi thay đổi về kính
   mờ, viền và bóng của thanh kia. */
.ray-giao-dien{position:fixed;left:var(--ray-trai);bottom:18px;z-index:40}
.ray-hop-gd{gap:4px;padding:6px}
.gd-nut{display:flex;align-items:center;gap:9px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--text-sub);font-family:var(--f-heading);
  font-size:12.5px;font-weight:700;text-align:left;white-space:nowrap}
.gd-tron{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:transparent;border:1px solid transparent;
  color:var(--text-dim);transition:.18s}
.gd-tron svg{width:17px;height:17px}
.gd-nut:hover .gd-tron{background:var(--surface-2);color:var(--text-muted)}
.gd-nut.dang .gd-tron{background:var(--primary-soft);border-color:var(--primary-soft-border);
  color:var(--primary)}
.gd-nut.dang{color:var(--primary-dark)}
.gd-nut:focus-visible .gd-tron{outline:2px solid var(--primary);outline-offset:2px}
/* Nhãn cụp lại y như thanh "đã lưu" — cùng một cột thì phải cư xử giống nhau. */
.gd-nhan{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:.2s cubic-bezier(.16,1,.3,1)}
.ray-giao-dien:hover .gd-nhan,.ray-giao-dien:focus-within .gd-nhan{max-width:90px;opacity:1}
.ray-giao-dien{opacity:.5;transition:opacity .18s}
.ray-giao-dien:hover,.ray-giao-dien:focus-within{opacity:1}
@media (prefers-reduced-motion:reduce){.gd-nhan,.gd-tron{transition:none}}

.ray-luu{opacity:.5;transition:opacity .18s}
.ray-luu:hover,.ray-luu:focus-within{opacity:1}
.ray-nut:hover .ray-tron,.ray-nut[aria-expanded="true"] .ray-tron{
  background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.ray-nut:hover,.ray-nut[aria-expanded="true"]{background:none;color:var(--amber)}
.ray-nut:focus-visible .ray-tron{outline:2px solid var(--primary);outline-offset:2px}

/* Bảng bung ra cạnh thanh */
.bang-luu{position:fixed;left:calc(var(--ray-trai) + var(--ray-rong) + 18px);
  top:50%;transform:translateY(-50%);z-index:41;
  width:330px;max-height:76vh;display:flex;flex-direction:column;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-float);overflow:hidden}
/* Bản GIỮA TRANG, dùng cho ô tra cứu nhanh — xem ghi chú trong ray-luu.js.
   Rộng hơn hẳn vì nó có một ô nhập: 330px cắt cụt dòng gợi ý ngay giữa chữ. */
.bang-luu.giua{left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(540px, calc(100vw - 32px))}
/* Nhắc phím tắt. Bàn phím không tồn tại trên màn hình cảm ứng nên ẩn đi ở đó
   — bày một phím tắt không bấm được chỉ làm người đọc bối rối. */
/* ── nhắc phím tắt: lắc rồi đổi kính lúp thành tên phím ── */
.ray-phim{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-heading);font-weight:800;font-size:15px;
  color:var(--primary);opacity:0;transition:opacity .18s}
.ray-tra.nhac .ray-phim{opacity:1}
.ray-tra.nhac .ray-tron svg{opacity:0;transition:opacity .18s}
/* Lắc NHẸ và ngắn. Biên độ lớn thì thành thứ người ta muốn tắt đi, mà mục
   đích chỉ là kéo mắt liếc qua một cái. */
.ray-tra.nhac .ray-tron{animation:lac-nhac .55s ease-in-out}
@keyframes lac-nhac{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px) rotate(-4deg)}
  40%{transform:translateX(3px) rotate(4deg)}
  60%{transform:translateX(-2px) rotate(-2deg)}
  80%{transform:translateX(2px) rotate(2deg)}
}
@media (prefers-reduced-motion:reduce){
  .ray-tra.nhac .ray-tron{animation:none}
}

.phim-tat + .phim-tat{margin-left:5px}
.phim-tat{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-sub);
  font-family:var(--f-mono);font-size:11px;font-weight:600;line-height:1.5;
  white-space:nowrap;vertical-align:1px}
.ray-nhan .phim-tat{background:var(--lop-trang-mo)}
@media (hover:none){.phim-tat{display:none}}

.bang-luu-dau{display:flex;align-items:center;gap:8px;padding:13px 14px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.bang-luu-dau b{flex:1;font-family:var(--f-heading);font-size:14px}
.bang-luu-so{padding:2px 8px;border-radius:var(--r-full);background:var(--amber-soft);
  color:var(--amber);font-family:var(--f-mono);font-size:11.5px;font-weight:700}
.bang-luu-dong{border:0;background:none;cursor:pointer;color:var(--text-dim);
  font-size:15px;line-height:1;padding:2px 4px}
.bang-luu-dong:hover{background:var(--surface-2);color:var(--text-main)}
.bang-luu ul{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;scrollbar-width:thin}
.bang-luu li{display:flex;align-items:center;gap:6px;border-radius:10px}
.bang-luu li:hover{background:var(--surface-2)}
.bang-luu li a{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  padding:8px 10px;text-decoration:none;color:inherit}
.bang-luu .l-ten{font-family:var(--f-heading);font-weight:700;font-size:13px;
  line-height:1.35;color:var(--primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bang-luu .l-phu{font-size:11.5px;color:var(--text-sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bang-luu .l-bo{flex:none;margin-right:8px;border:0;background:none;cursor:pointer;
  color:var(--text-dim);font-size:13px;line-height:1;padding:4px 5px;border-radius:6px}
.bang-luu .l-bo:hover{background:var(--rose-soft);color:var(--rose)}
.bang-luu-tatca{display:block;padding:11px 14px;border-top:1px solid var(--border);
  background:var(--surface-2);color:var(--primary);text-decoration:none;
  font-family:var(--f-heading);font-size:12.5px;font-weight:700}
.bang-luu-tatca:hover{text-decoration:none;background:var(--primary-soft)}

@media (max-width:1240px){
  .ray-luu,.bang-luu{display:none}
  /* Thanh "đã lưu" biến mất ở đây, nhưng hộp giao diện thì KHÔNG: nó không
     phụ thuộc bề ngang cột trái, và ẩn nó đi thì trên điện thoại — đúng chỗ
     người ta đọc trong bóng tối nhất — không còn cách nào bật giao diện tối.

     Đổi sang nằm NGANG. Cột dọc ba nút cao 120px ở góc trái đè lên chữ suốt
     chiều dài trang; nằm ngang thì nó chỉ chiếm một dải sát mép dưới. */
  .ray-hop-gd{flex-direction:row;gap:2px}
  .ray-giao-dien{bottom:12px}
  .ray-giao-dien:hover .gd-nhan,.ray-giao-dien:focus-within .gd-nhan{max-width:0;opacity:0}
}
/* Màn hình vừa: thanh còn chỗ nhưng bảng thì hết — thu nhãn lại cho cả hai
   cùng lọt, thay vì để bảng tràn ra ngoài mép phải. */
@media (max-width:1180px){
  .ray-luu:hover .ray-nhan,.ray-luu:focus-within .ray-nhan{max-width:112px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ray-nhan,.ray-tron{transition:none}
}

/* Nút đang xử lý: khoá lại và xoay vòng, để không ai bấm hai lần. */
button.dang-xu-ly{position:relative;color:transparent !important;cursor:progress;
  pointer-events:none}
button.dang-xu-ly>*{visibility:hidden}
button.dang-xu-ly::after{content:"";position:absolute;top:50%;left:50%;
  width:17px;height:17px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:#fff;
  animation:xoay .7s linear infinite}
.nut-luu.dang-xu-ly::after,.thanh-loc button.dang-xu-ly::after{color:#fff}
.pt-nhay button.dang-xu-ly::after,.nut-chep.dang-xu-ly::after{color:var(--primary)}
button:disabled{opacity:.85}
@keyframes xoay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  button.dang-xu-ly::after{animation-duration:2.4s}
}

/* Khối kết quả tra cứu: tách hẳn khỏi ô nhập ở trên.
   Dính sát thì trông như một phần của ô nhập chứ không phải câu trả lời cho nó. */
.khoi-tra{margin-top:22px}
.khoi-tra>p{margin:0 0 10px}
.khoi-tra .canh-bao{padding:13px 18px;border-radius:var(--r-md);
  background:var(--rose-soft);border:1px solid var(--vien-rose-nhat);color:var(--rose);
  font-size:14.5px;line-height:1.6}
.khoi-tra .chinh-thuc{margin-top:12px;font-size:13px;color:var(--text-sub)}

/* ══ khu tài khoản ════════════════════════════════════════════ */
.bo-cuc-tai-khoan{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;
  max-width:1180px;margin:0 auto;align-items:start}
@media (max-width:900px){.bo-cuc-tai-khoan{grid-template-columns:1fr}}
.cot-tai-khoan{min-width:0}

.menu-tk{position:sticky;top:14px;display:flex;flex-direction:column;gap:2px;
  padding:10px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-subtle)}
@media (max-width:900px){.menu-tk{position:static}}
.menu-tk-muc{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r-md);color:var(--text-muted);text-decoration:none;
  font-family:var(--f-heading);font-size:13.5px;font-weight:700;line-height:1.35}
.menu-tk-muc svg{width:17px;height:17px;flex:none;opacity:.8}
.menu-tk-muc:hover{background:var(--surface-2);color:var(--text-main);text-decoration:none}
.menu-tk-muc.dang{background:var(--primary-soft);color:var(--primary)}
.menu-tk-muc.dang svg{opacity:1}
/* Đăng xuất là nút trong form (POST), không phải thẻ a — nên phải gỡ hết nền,
   viền và canh chữ mà trình duyệt tự gán cho button, để nó nằm cùng hàng lối
   với các mục còn lại. */
.menu-tk-thoat{display:block}
.menu-tk-thoat button{width:100%;border:0;background:none;text-align:left;
  cursor:pointer;font:inherit}
.menu-tk-so{margin-left:auto;padding:1px 7px;border-radius:var(--r-full);
  background:var(--amber-soft);color:var(--amber);
  font-family:var(--f-mono);font-size:11px;font-weight:700}

.menu-tk-con{display:flex;flex-direction:column;gap:1px;
  margin:2px 0 2px 22px;padding-left:11px;border-left:1px solid var(--border)}
.menu-tk-con a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:9px;color:var(--text-sub);text-decoration:none;
  font-size:12.5px;font-weight:600;line-height:1.35}
.menu-tk-con a:hover{background:var(--surface-2);color:var(--text-main);text-decoration:none}
.menu-tk-con a.dang{background:var(--primary-soft);color:var(--primary);font-weight:700}
/* Ngăn rỗng thì mờ đi chứ KHÔNG ẩn: người dùng cần thấy có bốn ngăn để biết
   lưu được những gì. Ẩn đi thì tính năng cũng biến mất theo. */
.menu-tk-con a.rong{color:var(--text-dim)}
.menu-tk-con span{font-family:var(--f-mono);font-size:11px;flex:none}

/* Thân thẻ thông tin */
.tk-than{padding:16px 18px}
.tk-than>.mo{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:var(--text-sub)}
.tk-hang{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.tk-hang:last-child{border-bottom:0}
.tk-nhan{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-dim);padding-top:2px}
.tk-gia{font-size:14px;line-height:1.6;color:var(--text-muted)}
.tk-gia b{color:var(--text-main)}
@media (max-width:600px){.tk-hang{grid-template-columns:1fr;gap:3px}}

/* Hai thẻ đăng nhập cạnh nhau */
.luoi-dang-nhap{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:16px;margin-bottom:18px}
.the-dn{margin-bottom:0}
.nut-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:46px;border-radius:var(--r-md);cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--text-main);
  font-family:var(--f-heading);font-size:14px;font-weight:700}
.nut-google:hover{background:var(--surface-2)}
.nut-google svg{width:19px;height:19px;flex:none}
.nut-google:disabled{opacity:.55;cursor:not-allowed}

.form-dn{display:flex;flex-direction:column;gap:14px}
.o-nhap{display:flex;flex-direction:column;gap:6px}
.o-nhap>span{font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim)}
.o-nhap input[type=tel]{height:44px;padding:0 14px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-main);
  font-family:var(--f-body);font-size:15px}
.o-nhap input[type=tel]:disabled{opacity:.6}
.nut-dn{height:46px;border:0;border-radius:var(--r-md);cursor:pointer;
  background:var(--primary);color:#fff;
  font-family:var(--f-heading);font-size:14.5px;font-weight:700}
.nut-dn:hover{background:var(--primary-dark)}
.nut-dn:disabled{opacity:.5;cursor:not-allowed}

/* Ô passcode kiểu iPhone */
.pc-nhom{display:flex;gap:9px}
.pc-o{width:46px;height:54px;text-align:center;border-radius:var(--r-md);
  border:1.5px solid var(--border);background:var(--surface);color:var(--text-main);
  font-family:var(--f-mono);font-size:22px;font-weight:700;transition:.15s}
.pc-o:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow)}
.pc-o.co{border-color:var(--primary-soft-border);background:var(--primary-soft)}
.pc-o:disabled{opacity:.5}
.pc-nhom.thieu .pc-o{border-color:var(--rose);animation:lac .3s}
@keyframes lac{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pc-hien{align-self:flex-start;margin-top:2px;padding:4px 0;border:0;background:none;
  cursor:pointer;color:var(--primary);font-family:var(--f-heading);
  font-size:12.5px;font-weight:700}
.pc-hien:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:420px){.pc-o{width:40px;height:48px;font-size:19px}.pc-nhom{gap:6px}}
@media (prefers-reduced-motion:reduce){.pc-nhom.thieu .pc-o{animation:none}}

/* Lời báo khi không lưu được — chạm trần hoặc trình duyệt chặn ghi. */
.bao-luu{position:fixed;left:50%;bottom:26px;z-index:60;max-width:min(460px,92vw);
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  padding:13px 20px;border-radius:var(--r-full);
  background:var(--text-main);color:#fff;font-family:var(--f-heading);
  font-size:13.5px;font-weight:600;line-height:1.5;text-align:center;
  box-shadow:var(--shadow-float);transition:.22s cubic-bezier(.16,1,.3,1)}
.bao-luu.hien{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){.bao-luu{transition:none}}

.bieu-mau .goi-y{display:block;margin-top:6px;font-size:12.5px;line-height:1.6;
  color:var(--text-sub)}

/* ── chân trang, theo bản mẫu ── */
footer .chan{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;max-width:1180px;margin:0 auto}
.chan-thuong-hieu{flex:1 1 340px;font-size:13.5px;color:var(--text-sub);
  max-width:52ch;line-height:1.65}
.chan-thuong-hieu b{color:var(--text-main)}
.chan-lien-ket{display:flex;gap:12px 24px;flex-wrap:wrap;
  margin-left:auto;justify-content:flex-end}
.chan-lien-ket a{font-size:13.5px;font-weight:600;color:var(--text-muted);text-decoration:none}
.chan-lien-ket a:hover{color:var(--primary);text-decoration:none}
@media (max-width:760px){
  footer .chan{flex-direction:column;align-items:flex-start;gap:16px}
  /* flex:1 1 340px là để chia BỀ NGANG khi hai khối xếp hàng ngang. Xoay sang
     xếp cột thì 340px ấy thành CHIỀU CAO tối thiểu, nên dòng thương hiệu cao
     ba trăm bốn mươi điểm ảnh cho ba dòng chữ — đó chính là khoảng trống rỗng
     giữa chân trang. Xếp cột thì để nó tự co theo nội dung. */
  .chan-thuong-hieu{flex:0 0 auto}
  .chan-lien-ket{gap:14px 18px;margin-left:0;justify-content:flex-start}
}
.trang-van{max-width:760px;margin:0 auto}
.trang-van h2{font-size:19px;margin:30px 0 12px}
.trang-van p,.trang-van li{font-size:15px;line-height:1.78;color:var(--text-muted);
  margin:0 0 13px}
.trang-van b{color:var(--text-main)}
.trang-van ul{padding-left:22px}

/* ══════════════════════════════════════════════════════════════
   Trang hồ sơ hai cột — cột phải là cây địa bàn

   Dùng lại đúng khung .bo-cuc-dia-ban của trang tỉnh và trang xã, nên ở đây
   chỉ còn mấy chỗ chỉnh cho thẻ hồ sơ nằm vừa trong ô lưới.
   ══════════════════════════════════════════════════════════════ */
/* Thẻ hồ sơ vốn tự canh giữa trang bằng margin auto và chừa 14px phía trên.
   Trong ô lưới thì nó đã đúng chỗ rồi, còn 14px kia đẩy nó lệch xuống so với
   đỉnh cột phải. */
.cot-du-lieu > .the-ho-so{max-width:none;margin-top:0}

/* ── khối "doanh nghiệp cùng khu vực" ──
   Hai vòng — cùng xã, rồi cùng tỉnh — trong một mục. Vạch dọc bên trái để
   mắt thấy ngay đây là hai nhánh của cùng một chuyện, không phải hai mục rời. */
.khu-vuc-vong + .khu-vuc-vong{margin-top:18px}
.the-ho-so .khu-vuc-vong h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin:0 0 9px;font-size:14px;font-weight:700;color:var(--text-main)}
.khu-vuc-so{font-family:var(--f-mono);font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--text-sub)}
.khu-vuc-them{display:inline-block;margin-top:9px;font-size:13px;font-weight:700;
  color:var(--primary);text-decoration:none}
.khu-vuc-them:hover{text-decoration:underline}

/* ── khối lượt xem địa bàn ──
   Hàng phụ dưới tiêu đề: nhãn cấp, số doanh nghiệp, và lối sang trang địa bàn. */
.dia-ban-xem-phu{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  margin:0 0 12px;font-size:13px}
.dia-ban-xem-phu a{font-weight:700;color:var(--primary);text-decoration:none}
.dia-ban-xem-phu a:hover{text-decoration:underline}

/* ── bảng ngành nghề: thu gọn khi quá dài ──
   Không dùng JavaScript. Ô đánh dấu ẩn đi + nhãn của nó làm nút bấm, nên mọi
   dòng vẫn nằm trong mã nguồn trang (máy tìm kiếm đọc đủ), bấm được bằng chuột
   và bằng bàn phím, và bố cục không nhảy một nhịp như khi để kịch bản thu bảng
   lại sau lúc trang đã vẽ xong. */
.hop-nganh{position:relative}
/* Giấu ô đánh dấu mà vẫn để bàn phím tới được — display:none thì nó rơi khỏi
   thứ tự tab và nhãn không còn bấm bằng phím cách được nữa. */
.hop-nganh .cong-tac-mo{position:absolute;width:1px;height:1px;opacity:0;
  margin:0;pointer-events:none}
/* ═══ CHỈ GIẤU LÚC CHƯA MỞ, KHÔNG "HIỆN LẠI" LÚC MỞ ═══
   Viết kiểu :checked ~ … {display:X} thì phải gọi đúng tên X của từng danh
   sách — table-row cho bảng, grid cho hàng liên quan, flex cho cây địa bàn.
   Gọi sai một cái là bố cục vỡ, mà quy tắc ấy lại đặc hiệu hơn quy tắc gốc
   nên nó luôn thắng. Đã vỡ đúng như thế một lần ở khối "cùng người đại diện":
   đặt block, đè mất display:grid của .ds-lien-quan.hang li.
   Neo vào :not(:checked) thì lúc mở KHÔNG có quy tắc nào áp, thẻ giữ nguyên
   display của chính nó — khỏi phải biết nó là gì. */
.hop-nganh .cong-tac-mo:not(:checked) ~ .bang-nganh tr.an-bot{display:none}

/* Khối "cùng người đại diện" dùng lại đúng bộ này, chỉ khác thẻ bị giấu là
   li chứ không phải tr. */
.hop-lien-quan{position:relative}
.hop-lien-quan .cong-tac-mo{position:absolute;width:1px;height:1px;opacity:0;
  margin:0;pointer-events:none}
.hop-lien-quan .cong-tac-mo:not(:checked) ~ .ds-lien-quan li.an-bot{display:none}

.nut-mo-them{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:10px;padding:9px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-2);
  font-family:var(--f-heading);font-size:13px;font-weight:700;color:var(--primary)}
.nut-mo-them:hover{border-color:var(--primary-soft-border);background:var(--primary-soft)}
.nut-mo-them svg{width:15px;height:15px;transition:transform .18s}
/* Mũi tên quay lên khi đã mở — dấu hiệu duy nhất cho biết bấm lần nữa là đóng. */
.cong-tac-mo:checked ~ .nut-mo-them svg{transform:rotate(180deg)}
.cong-tac-mo:focus-visible ~ .nut-mo-them{outline:2px solid var(--primary);outline-offset:2px}
.nut-mo-them .khi-mo{display:none}
.cong-tac-mo:checked ~ .nut-mo-them .khi-dong{display:none}
.cong-tac-mo:checked ~ .nut-mo-them .khi-mo{display:inline}
@media (prefers-reduced-motion:reduce){.nut-mo-them svg{transition:none}}


/* ══════════════════════════════════════════════════════════════
   MÀN HÌNH HẸP — ĐẶT Ở CUỐI TỆP, VÀ ĐÓ LÀ ĐIỀU KIỆN ĐỂ NÓ CHẠY
   ══════════════════════════════════════════════════════════════

   @media KHÔNG cộng thêm trọng số cho bộ chọn. Hai luật cùng trọng số thì
   luật đứng SAU trong tệp thắng — bất kể cái nào nằm trong media query.

   Khối @media (max-width:720px) ở khoảng dòng 455 nằm TRƯỚC chỗ khai .hero,
   .hero-desc, .duong-dan, .luoi-tinh-trang. Đặt luật cho mấy bộ chọn ấy vào
   đó thì chúng bị chính luật gốc bên dưới đè lại, và trang trên điện thoại
   không đổi gì — luật vẫn nằm trong tệp, vẫn khớp media, mà không có tác dụng.
   Đây là kiểu hỏng im lặng: mở bảng kiểm tra thấy luật gạch ngang, không có
   lỗi nào báo ra.

   Nên mọi tinh chỉnh cho màn hình hẹp nhắm vào bộ chọn khai ở nửa sau tệp
   đều phải nằm ở ĐÂY. Thêm luật mới thì thêm vào khối này, đừng thêm lên trên.  */
@media (max-width:720px){
  /* ══ Ô TRA PHẢI NẰM TRONG MÀN HÌNH ĐẦU ══
     Người mở trang trên điện thoại đến để GÕ MỘT MÃ. Trước đây trên máy
     390×740 họ phải cuộn xuống mới thấy ô nhập, vì các khối phía trên cộng lại
     vượt 690px. Không bỏ khối nào — giấu chữ trên điện thoại là tự bỏ đi đúng
     bản mà Google lập chỉ mục. Chỉ siết lại: chữ nhỏ hơn một bậc, khoảng cách
     dọc hẹp hơn, hàng nhãn cuộn ngang thay vì xuống dòng. */
  main{padding-top:16px}
  .duong-dan{padding-top:8px;margin-bottom:10px}
  .hero{padding:12px 0 18px}
  .hero-hep{padding-top:6px}
  .hero-badge{margin-bottom:14px;padding:5px 13px;font-size:12.5px}
  .hero h1{font-size:26px;line-height:1.2;margin-bottom:10px}
  .hero-desc{font-size:14.5px;line-height:1.55;margin-bottom:16px}

  /* Hàng nhãn: MỘT hàng cuộn ngang. Ba hàng xuống dòng ăn 105px chiều cao ở
     đúng chỗ đắt nhất của trang. Tràn ra sát hai mép để người dùng thấy ngay
     là còn nữa bên phải — cắt gọn trong lề thì nó trông như đã hết. */
  /* KHÔNG dùng lề âm để tràn ra sát mép. Hộp này đã kéo hết bề ngang khung
     (align-self:stretch ở luật gốc), nên lề âm chỉ làm nó rộng hơn khung
     36px — sinh thanh cuộn ngang cho cả trang. Nhãn cuối bị cắt ở mép phải
     đã đủ nói là còn nữa. */
  .ho-tro-dang{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ho-tro-dang::-webkit-scrollbar{display:none}
  .the-ho-tro{flex:none}

  /* ── Lưới tình trạng: HAI ô một hàng ──
     Bảng tra hiện có MƯỜI BA tình trạng (trước đây chín — con số này lớn dần
     theo bảng ref.entity_status, đừng chốt cứng nó vào bố cục). Một ô một hàng
     thì khối này dài hơn hai nghìn pixel — người đọc phải vuốt qua chừng ấy
     màn hình nhỏ để đi hết một thứ vốn là bảng để liếc.

     Ép ĐÚNG hai cột chứ không để auto-fit tự quyết: bề ngang còn lại chỉ
     khoảng 318px, không đủ 205px × 2 nên auto-fit rơi về một cột. Con số và
     nhãn thu lại một bậc cho vừa ô hẹp: "1.575.548" ở cỡ 21px chiếm 105px,
     không nhét vừa nửa hàng.

     Giữ chữ CĂN TRÁI, không căn giữa. Chín ô này là một cột số để dò mắt từ
     trên xuống; căn giữa thì mỗi con số bắt đầu ở một chỗ khác nhau, và nhãn
     dài ngắn khác nhau làm mép chữ răng cưa cả hai bên. */
  .luoi-tinh-trang{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .o-tinh-trang{padding:12px;column-gap:9px}
  .o-tinh-trang .so-luong{font-size:17px;line-height:1.25}
  .o-tinh-trang .ten-tt{font-size:11.5px;line-height:1.35}
  /* Ô biểu tượng nhỏ lại theo. Giữ 36px ở hai cột trên màn 430px thì riêng nó
     ăn hơn một phần tư bề ngang thẻ, và nhãn ba dòng thành năm dòng. */
  .o-tinh-trang .bieu-tuong{width:30px;height:30px;border-radius:9px}
  .o-tinh-trang .bieu-tuong svg{width:16px;height:16px}

  /* ── Bảng đơn vị cấp xã: bỏ cột "Loại" ──
     Bảng rộng 455px trong khung 392px nên cột "Lưu" bị cắt mất ở mép phải.
     Cột bỏ đi phải là cột KHÔNG mang thông tin mới: mọi tên đơn vị đều đã mở
     đầu bằng đúng chữ ấy — "Phường Sài Gòn", "Xã Bình Khánh", "Đặc khu Côn
     Đảo" — nên viên nhãn "Phường" bên cạnh chỉ chép lại từ đầu tiên.

     Bỏ 87px ấy thì bảng còn 368px, nằm gọn trong khung, và tên đơn vị hết bị
     bẻ làm ba dòng. Cột "Lưu" giữ lại: nó là thao tác, không phải chữ. */
  .bang-xa .c-loai{display:none}


  /* ══ BẢNG DOANH NGHIỆP: ĐỔI THÀNH THẺ ══
     Bảng này rộng 534px trong khung 392px — cột "Tình trạng" bị cắt, cột "Lưu"
     nằm hẳn ngoài màn hình. Khác bảng đơn vị cấp xã ở chỗ KHÔNG có cột nào
     thừa để bỏ: số thứ tự, tên kèm trụ sở, mã số thuế, tình trạng đều là
     thông tin thật.

     Nên đổi hướng đọc: bỏ hàng tiêu đề, mỗi dòng thành một thẻ xếp dọc — tên
     và địa chỉ ở trên, rồi mã số thuế, tình trạng và nút lưu xuống hàng dưới.
     Không mất dữ liệu nào, và không còn gì phải vuốt ngang.

     Hàng tiêu đề bỏ được vì từng ô đã tự nói nó là gì: mã số thuế là dãy số
     trong khung bấm-để-chép, tình trạng là viên nhãn màu, nút lưu có chữ. *@ */
  /* ═══ CHỈ BẢNG DOANH NGHIỆP, KHÔNG PHẢI MỌI .bang-dn ═══
     Bảng đơn vị cấp xã ở trang tỉnh khai class="bang-dn bang-xa" — nó mượn
     phần tạo dáng chung. Nếu viết .bang-dn trần thì nó dính luôn kiểu thẻ này
     và vỡ ra: số thứ tự, tên, con số, nút lưu mỗi thứ một hàng.
     Bảng ấy đã vừa khung sau khi bỏ cột "Loại", nên nó phải ở lại dạng bảng. */
  .bang-dn:not(.bang-xa) thead{display:none}
  .bang-dn:not(.bang-xa),
  .bang-dn:not(.bang-xa) tbody,
  .bang-dn:not(.bang-xa) td{display:block;width:auto}
  /* Dòng là một khay flex xuống hàng được, không phải khối chữ chảy tự do.
     Nhờ vậy nút Lưu đẩy được sang phải bằng margin-left:auto, và nó nằm sát
     mép phải dù đang ở chung hàng với nhãn tình trạng hay đã tụt xuống hàng
     riêng — chỗ quen thuộc của một thao tác, tách khỏi phần thông tin. */
  .bang-dn:not(.bang-xa) tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
    position:relative;padding:14px 14px 14px 48px;
    border-bottom:1px solid var(--border-subtle)}
  .bang-dn:not(.bang-xa) tbody tr:last-child{border-bottom:0}
  .bang-dn:not(.bang-xa) td{padding:0;border:0}
  /* Chỗ cho số thứ tự chừa bằng ĐỆM CỦA CẢ DÒNG, không phải đệm của từng ô.
     Thụt từng ô thì ô nào rơi xuống hàng mới lại bắt đầu ở mép — viên nhãn
     tình trạng tụt ra ngoài, lệch hẳn với tên và mã số thuế bên trên nó.
     Ô này position:absolute nên nó đứng ngoài dòng chảy flex. */
  .bang-dn:not(.bang-xa) .c-stt{position:absolute;top:14px;left:14px;width:auto}
  .bang-dn .c-ngay{display:none}
  /* Tên và trụ sở chiếm trọn một hàng; mã số thuế, tình trạng, nút lưu chảy
     chung hàng dưới. */
  .bang-dn:not(.bang-xa) tbody tr > td:nth-child(2){flex:1 0 100%}
  .bang-dn:not(.bang-xa) .c-luu{margin-left:auto}
  /* Trên màn hình cảm ứng không có "rê chuột" để hiện nút chép. */
  .bang-dn:not(.bang-xa) .hop-sao-chep{opacity:1}

  /* Đường dẫn điều hướng: bốn mắt ở 430px làm từng mắt bị bẻ đôi — "Trang
     chủ" thành hai dòng. Cho cả dải xuống dòng GIỮA các mắt, còn trong một
     mắt thì giữ nguyên. */
  .duong-dan{flex-wrap:wrap;row-gap:2px}
  .duong-dan a,.duong-dan>span{white-space:nowrap}
}

/* ── lọc theo mục đã lưu (trang xã) ──
   Ba nút liền khối, cùng lối với cặp "Nhiều nhất / Theo tên" ở trang tỉnh —
   cùng một loại thao tác thì trông phải giống nhau. */
.loc-da-luu{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--border)}
.loc-da-luu button{padding:5px 12px;border:0;border-radius:var(--r-full);cursor:pointer;
  background:none;font:inherit;font-family:var(--f-heading);font-size:12.5px;
  font-weight:700;color:var(--text-sub);white-space:nowrap}
.loc-da-luu button:hover{color:var(--text-main)}
.loc-da-luu button.dang{background:var(--primary);color:#fff}
.loc-da-luu button b{font-weight:700;opacity:.75;margin-left:2px}
.loc-da-luu button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
/* Câu nhắc phạm vi: nhỏ và nhạt, nhưng KHÔNG bỏ — nó là chỗ duy nhất nói rằng
   bộ lọc chỉ chạy trong trang đang xem. */

/* Nút phân trang ở trang "đã lưu" là <button>, không phải <a> — số trang giữ
   trong bộ nhớ chứ không nằm trên đường dẫn (dữ liệu ở trình duyệt, dán đường
   dẫn cho người khác thì họ ra trang khác hẳn). Cho chúng mượn dáng của nút
   phân trang thường. */
.thanh-phan-trang .pt-nut button{padding:6px 11px;border-radius:8px;font-size:12.5px;
  font-weight:700;border:1px solid var(--border);background:var(--surface);
  color:var(--text-main);line-height:1.5;cursor:pointer;font-family:inherit}
.thanh-phan-trang .pt-nut button:hover{border-color:var(--primary-soft-border);
  background:var(--primary-soft);color:var(--primary)}
.thanh-phan-trang .pt-nut button.pt-so{min-width:34px;text-align:center;padding:6px 8px}

/* ── Thống kê doanh nghiệp trong xã (#thong-ke-xa) ──────────────────
   Dùng biến màu sẵn có, không đặt màu cứng: chủ đề đổi thì khối này đổi theo. */
.tk-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:14px}
.tk-mot{border:1px solid var(--border);border-radius:var(--r-md,10px);
  padding:11px 13px;background:var(--surface-2)}
.tk-mot b{display:block;font-family:var(--f-mono);font-size:21px;font-weight:800;
  line-height:1.15;color:var(--primary-dark)}
.tk-mot span{display:block;margin-top:3px;font-size:12px;color:var(--text-sub)}
.tk-mot.tk-song b{color:var(--ok)}

.tk-tinh{margin:0 0 16px;font-size:12.5px;color:var(--text-sub)}
.tk-tinh b{font-family:var(--f-mono);color:var(--text-main)}

.tk-tieu{margin:16px 0 8px!important;font-size:13.5px;font-weight:700}

/* Ngành nghề: tên | thanh | số. minmax(0,…) trên cột tên cho phép nó co lại
   để ellipsis hoạt động — thiếu nó thì lưới giãn ra và thanh bị đẩy tràn. */
.tk-nganh{list-style:none;margin:0;padding:0}
.tk-nganh li{display:grid;grid-template-columns:minmax(0,1fr) 42% auto;
  align-items:center;gap:10px;padding:4px 0}
.tk-ten{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-thanh{height:8px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.tk-thanh i{display:block;height:100%;background:var(--primary);border-radius:inherit}
.tk-so{font-family:var(--f-mono);font-size:12px;font-weight:700;
  color:var(--text-sub);text-align:right;min-width:3ch}

/* Loại hình / tình trạng: nhãn trái, số phải, gạch đứt nối giữa. */
.tk-dl{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:0 10px;margin:0;font-size:12.5px}
.tk-dl dt,.tk-dl dd{margin:0;padding:6px 0;border-bottom:1px dashed var(--border-subtle)}
.tk-dl dd{font-family:var(--f-mono);font-weight:700;text-align:right;color:var(--text-main)}

@media (max-width:560px){
  .tk-nganh li{grid-template-columns:minmax(0,1fr) 30% auto}
  .tk-mot b{font-size:18px}
}

/* ── Dòng đang mở (.dang-mo) ───────────────────────────────────────
   Báo cú bấm đã ăn, trong lúc chờ trang sau hiện.

   Chỉ làm MỜ, không khoá con trỏ: người dùng vẫn phải bấm lại được nếu
   mạng hỏng. Khoá lại là biến một trang chậm thành một trang chết.

   ═══ VÌ SAO MỌI THỨ ĐỀU HOÃN 160ms ═══

   Bộ chọn ở site.js nay gồm cả cây địa bàn, mà các đích không chậm như nhau.
   Đo nguội trên bản chạy thật ngày 26/8/2026:

       trang xã     0,11 - 0,25s
       hồ sơ DN     0,25 - 0,34s
       trang tỉnh   0,16 - 1,41s

   Hiện tức thì thì trang xã 150ms chỉ kịp chớp xám một cái rồi trang mới đè
   lên — trông như trang giật, tức là tệ hơn không báo gì. Hoãn 160ms thì cú
   nào về trước mốc đó không vẽ gì cả, cú nào chậm hơn mới thấy báo. Người
   dùng chỉ gặp hiệu ứng đúng lúc họ bắt đầu phải chờ.

   160ms lấy theo ngưỡng quen thuộc: dưới ~100ms người ta cảm nhận là tức
   thì, quanh 200ms mới bắt đầu thấy có độ trễ. */
.dang-mo{position:relative;opacity:.55;transition:opacity .12s ease .16s}

/* ── HÀNG BẢNG thì KHÔNG được position:relative ──
   Đặt position:relative lên <tr> là chỗ trình duyệt xử lý không nhất quán:
   hàng thành khối chứa cho con tuyệt đối, và ô mất canh cột. Đo ngày
   29/8/2026 trên bảng doanh nghiệp của trang tỉnh: dòng vừa bấm bị đẩy lệch
   nguyên một cột, tên công ty co lại xuống bốn dòng trong khi cột bên cạnh
   bỏ trống.

   Nên với <tr> thì bỏ hẳn vạch chạy và dùng NỀN ĐỔI MÀU — không có phần tử
   tuyệt đối nào, không đụng tới bố cục bảng, và vẫn báo được cú bấm đã ăn.
   Vẫn hoãn 160ms như bản gốc để trang nhanh khỏi nháy. */
tr.dang-mo{position:static}
tr.dang-mo::before{content:none}
tr.dang-mo>td{animation:dangMoO 1.1s ease-in-out .16s infinite backwards}
@keyframes dangMoO{
  0%,100%{background-color:transparent}
  50%{background-color:var(--primary-soft)}
}

/* Vạch chạy ở mép trên dòng — thấy được mà không đẩy bố cục dịch một pixel
   nào, nên không gây CLS.

   backwards LÀ PHẦN BẮT BUỘC, không phải trang trí: trong 160ms chờ, phần
   tử vẫn tồn tại và vẫn được vẽ. Không có backwards thì nó vẽ theo trạng
   thái tĩnh — một vạch xanh đặc, kín chiều ngang — đúng thứ mà độ hoãn sinh
   ra để tránh. Có backwards thì nó giữ khung 0%, tức scaleX(0), nên không
   thấy gì. */
.dang-mo::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--primary);border-radius:2px;
  transform-origin:left;animation:dangMo 1.1s ease-in-out .16s infinite backwards}
@keyframes dangMo{
  0%{transform:scaleX(0);opacity:.35}
  50%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:.35;transform-origin:right}
}

/* Vòng quay nhỏ cạnh tên, cho người đọc đang nhìn vào chữ chứ không nhìn mép.

   Ở đây backwards KHÔNG đủ: viền tròn do chính quy tắc vẽ ra chứ không do
   khung hình nào, nên nó hiện ngay từ mili giây đầu dù phần quay còn đang
   chờ. Phải cho opacity:0 rồi kéo lên bằng một hiệu ứng hiện riêng, cùng
   mốc hoãn. */
.dang-mo .ten-dn::after,.dang-mo a.ten-dn-bang::after{
  content:"";display:inline-block;width:.72em;height:.72em;margin-left:7px;
  vertical-align:-1px;border:2px solid var(--primary);border-right-color:transparent;
  border-radius:50%;opacity:0;
  animation:dangMoQuay .6s linear .16s infinite,dangMoHien .12s linear .16s both}
@keyframes dangMoQuay{to{transform:rotate(360deg)}}
@keyframes dangMoHien{from{opacity:0}to{opacity:1}}

/* Người đã tắt hiệu ứng chuyển động thì bỏ phần quay và phần đập, chỉ giữ
   độ mờ — vẫn nói được "đã bấm" mà không có gì nhấp nháy.

   BẪY: viết animation:none ở đây là xoá luôn animation-delay, nên vạch và
   vòng quay hiện TỨC THÌ — đúng cái nháy mà độ hoãn 160ms sinh ra để tránh,
   và chỉ nhóm người này gặp. Nên thay bằng dangMoHien: nó chỉ kéo opacity,
   không dịch chuyển gì, mà vẫn mang theo mốc hoãn. */
@media (prefers-reduced-motion:reduce){
  .dang-mo::before{animation:dangMoHien .01s linear .16s both;transform:scaleX(1)}
  .dang-mo .ten-dn::after,.dang-mo a.ten-dn-bang::after{
    animation:dangMoHien .01s linear .16s both}
}
}


/* ══════════════════════════════════════════════════════════════════
   BIỂU ĐỒ CỘT — mã số thuế cấp mới theo tuần / tháng / năm
   ------------------------------------------------------------------
   Vẽ bằng CSS thuần, không thư viện: mỗi cột là một <li> cao theo biến
   --cao do máy chủ tính sẵn. Không có JavaScript nào cả, nên biểu đồ
   hiện ngay ở lượt vẽ đầu và vẫn đúng khi tắt kịch bản.

   Con số nằm SẴN trong DOM (.bd-gia, .bd-doc) chứ không sinh ra lúc rê
   chuột — trình đọc màn hình và máy tìm kiếm đọc được, chuột chỉ làm nó
   hiện lên.
   ══════════════════════════════════════════════════════════════════ */

.bd-luu-y{
  margin:0 0 18px; padding:14px 18px;
  background:var(--amber-soft); border:1px solid var(--border);
  border-left:3px solid var(--amber);
  border-radius:var(--r-sm);
  font-size:13.5px; line-height:1.65; color:var(--text-muted);
}
.bd-luu-y strong{color:var(--text-main)}
.bd-luu-y em{font-style:normal; color:var(--text-main); font-weight:600}

.bieu-do{margin:0; padding:4px 0 0}

.bieu-do .bd-cot{
  list-style:none; margin:0;
  display:flex; align-items:flex-end; gap:3px;
  height:190px;
  /* Cột hẹp mà nhiều thì cho cuộn NGANG trong khung, không cho cả trang
     tràn — xem quy ước phần tử rộng ở cuối tệp này. */
  overflow-x:auto; overflow-y:hidden;
  /* ĐỆM HAI BÊN LÀ BẮT BUỘC, không phải trang trí.
     .bd-gia định vị tuyệt đối và căn giữa cột, nên ở cột ĐẦU và cột CUỐI nó
     thò ra khỏi khung ~18px. Phần thò ấy tính vào scrollWidth, thế là thanh
     cuộn ngang hiện lên ngay cả khi các cột thừa chỗ. Đệm 22px nuốt trọn nó. */
  padding:0 22px;
}
.bieu-do .bd-cot > li{
  position:relative; flex:1 1 0; min-width:14px;
  display:flex; flex-direction:column; justify-content:flex-end;
  height:100%;
}
.bieu-do .bd-thanh{
  display:block; width:100%; height:var(--cao);
  background:linear-gradient(180deg,var(--primary-light),var(--primary));
  border-radius:3px 3px 0 0;
  transition:filter .12s ease;
}
.bieu-do .bd-cot > li:hover .bd-thanh,
.bieu-do .bd-cot > li:focus-within .bd-thanh{filter:brightness(1.18)}

/* Trị số trên đầu cột: chỉ hiện khi rê vào hoặc lia bàn phím tới. */
.bieu-do .bd-gia{
  position:absolute; left:50%; bottom:calc(var(--cao) + 4px);
  transform:translateX(-50%);
  font:600 11px/1 var(--f-mono); color:var(--text-main);
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .12s ease;
}
.bieu-do .bd-cot > li:hover .bd-gia,
.bieu-do .bd-cot > li:focus-within .bd-gia{opacity:1}

/* KHÔNG overflow:hidden. Cột tuần rộng ~17px còn nhãn "23/12" rộng gấp đôi,
   nên cắt là mất chữ — ảnh chụp 27/8/2026 hiện ra "23/" và "17/2". Nhãn cột
   chẵn đã bị ẩn (xem .bd-tuan bên dưới) nên chữ có đúng chỗ trống để tràn vào. */
.bieu-do .bd-nhan{
  margin-top:5px; text-align:center;
  font:500 9.5px/1 var(--f-body); color:var(--text-dim);
  white-space:nowrap; overflow:visible;
}

/* Nhãn đầy đủ cho trình đọc màn hình. Không dùng display:none — cái đó
   giấu khỏi CẢ trình đọc màn hình, tức mất luôn dữ liệu của biểu đồ. */
.bieu-do .bd-doc{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.bieu-do figcaption{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--border-subtle);
  font-size:12px; color:var(--text-dim);
}

/* Hai mươi sáu tuần thì nhãn chen nhau — bỏ nhãn cột chẵn. Dữ liệu vẫn
   nguyên, chỉ bớt chữ. */
.bieu-do.bd-tuan .bd-cot > li:nth-child(even) .bd-nhan{visibility:hidden}

@media (max-width:640px){
  .bieu-do .bd-cot{height:150px}
  .bieu-do.bd-thang .bd-cot > li:nth-child(even) .bd-nhan{visibility:hidden}
  .bieu-do.bd-nam .bd-cot > li:nth-child(even) .bd-nhan{visibility:hidden}
}

@media (prefers-reduced-motion:reduce){
  .bieu-do .bd-thanh,
  .bieu-do .bd-gia{transition:none}
}


/* Ghi chú dưới khối xuất hoá đơn: vì sao địa chỉ ở đây khác giấy đăng ký.
   Xem chú thích trong MaSoThue.cshtml về Nghị định 70/2025/NĐ-CP. */
.hoa-don-ghi-chu{
  margin:10px 0 0; padding:10px 14px;
  background:var(--amber-soft); border-left:3px solid var(--amber);
  border-radius:var(--r-sm);
  font-size:13px; line-height:1.6; color:var(--text-muted);
}
.hoa-don-ghi-chu b{color:var(--text-main)}
.hoa-don-ghi-chu .nhat{color:var(--text-dim); font-size:12.5px}