/* Style dùng CHUNG cho các trang công cụ tính toán SEO (tinh-luong-gross-net.html,
   tinh-thue-thu-nhap-ca-nhan.html, …). Dùng kèm /brand.css (token màu/chữ). Tách ra đây
   để các trang khỏi lặp khối <style> — đổi giao diện 1 chỗ.
   ⚠ CHROME (header + sidebar) MIRROR shell SEO của seo.py (_page) để trang công cụ trông
   liền mạch với /gia-nha, /tai-chinh. Sửa shell bên seo.py thì đối chiếu lại đây. */

/* ===== SHELL SEO (đồng bộ /gia-nha, /tai-chinh) ===== */
/* Reset + body: MIRROR seo.py _page (không có 2 dòng này → chữ body rơi về serif mặc định,
   lệch hẳn với các bit dùng var(--disp)). Đồng bộ với seo.py:329-330. */
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
header{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header .hd{max-width:1260px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
header .brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:18px;font-weight:700;font-family:var(--disp);letter-spacing:-.01em}
header .brand img{width:30px;height:30px;border-radius:8px;flex:none}
header .brand .dot{color:var(--brand-ink)}
header .hsearch-wrap{position:relative;flex:1;min-width:0;max-width:560px;margin:0 16px}
header .hsearch{display:flex;align-items:center;gap:8px;background:var(--raised);border:1px solid var(--line-strong);border-radius:999px;padding:9px 9px 9px 18px}
header .hsearch:focus-within{border-color:var(--brand-ink);box-shadow:0 0 0 3px var(--brand-wash);background:var(--panel)}
header .hsearch input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;color:var(--ink);outline:none;font-family:inherit}
header .hsearch button{border:0;background:var(--brand);color:var(--on-brand);font-weight:700;cursor:pointer;font-size:14px;font-family:var(--disp);flex:none;border-radius:999px;padding:8px 18px}
header .hsearch button:hover{background:var(--brand-ink);color:#fff}
header .hdapp{color:var(--on-brand);background:var(--brand);text-decoration:none;font-size:13px;font-weight:700;border-radius:999px;padding:7px 15px;font-family:var(--disp);white-space:nowrap;flex:none}
header .hdapp:hover{background:var(--brand-ink);color:#fff}
/* Lối tắt bên phải header — khối <nav class="hquick"> do backend tiêm lúc chạy
   (seo.tool_static_page, dùng chung seo._HQUICK với trang SSR). Bản tĩnh trên đĩa KHÔNG có khối
   này: backend chết thì trang vẫn đọc được, chỉ thiếu 5 nút. MIRROR seo.py — sửa bên đó thì sửa đây. */
header .hquick{display:flex;align-items:center;gap:6px;flex:none;margin:0 12px 0 4px}
header .hquick .hq{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);text-decoration:none;font-family:var(--disp)}
header .hquick .hq:hover{border-color:var(--brand-ink);color:var(--brand-ink);background:var(--raised)}
header .hquick .hq.on{border-color:var(--brand-ink);color:var(--brand-ink);background:var(--brand-wash)}
/* Gói <details class="hqw">: DESKTOP giấu nút bật và ÉP hiện nav dù details đang đóng (override
   được luật ẩn của trình duyệt) -> một khối markup dùng cho cả hai bề rộng. */
header details.hqw{display:contents}
header details.hqw>summary{display:none}
header details.hqw>nav.hquick{display:flex}
/* ⚠️ Chrome 131+ giấu thân <details> đang ĐÓNG bằng ::details-content{content-visibility:hidden} —
   cơ chế mới, `display` ở trên không override được nữa nên hàng icon tụt rộng 0px và trôi khỏi mép
   phải màn hình (chỉ hỏng trên Chromium). Trình duyệt cũ bỏ qua luật này. Giữ khớp với app/seo.py. */
header details.hqw::details-content{content-visibility:visible;display:contents}
header .hquick .hqlb{display:none}
/* ≤720px: gập còn MỘT nút tròn, bấm mở lưới icon có nhãn. Hàng ngang cũ tuy vừa màn 375px nhưng
   chiếm trọn một dòng dưới ô tìm kiếm, đẩy nội dung thật xuống. */
@media(max-width:720px){
header .hd{flex-wrap:wrap}
header details.hqw{display:block;order:9;position:relative}
header details.hqw>summary{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;position:relative;margin:9px 0 1px;list-style:none}
header details.hqw>summary::-webkit-details-marker{display:none}
header details.hqw[open]>summary{border-color:var(--brand-ink);color:var(--brand-ink);background:var(--brand-wash)}
header details.hqw>nav.hquick{display:none}
/* Bảng thả XUỐNG (absolute): để trong luồng thì nút bật bị đẩy xuống dòng riêng, đúng thứ vừa gập lại để tránh. */
header details.hqw[open]>nav.hquick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:absolute;right:0;top:calc(100% + 4px);z-index:60;width:min(320px,92vw);padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 14px 34px rgba(0,0,0,.14)}
header details.hqw[open] .hq{width:auto;height:auto;flex-direction:column;gap:5px;padding:11px 6px;border-radius:11px;background:var(--bg)}
header .hquick .hqlb{display:block;font-size:12px;line-height:1.25;text-align:center}
header details.hqw[open] .hq.on .hqlb{font-weight:600}
}

.shell{max-width:1260px;margin:0 auto;padding:20px 16px 64px;display:grid;grid-template-columns:212px minmax(0,1fr);gap:26px;align-items:start}
.side{position:sticky;top:74px}
.side .snav{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px}
.side .sgrp{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:11px 12px 5px}
.side details.sgrp-d{border:0}
.side summary.sgrp{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;padding:11px 12px 5px}
.side summary.sgrp::-webkit-details-marker{display:none}
.side summary.sgrp::after{content:"⌄";margin-left:auto;font-size:13px;color:var(--faint);transition:transform .15s;transform:translateY(-2px)}
.side details.sgrp-d[open]>summary.sgrp::after{transform:translateY(0) rotate(180deg)}
.side summary.sgrp:hover{color:var(--brand-ink)}
/* Mục MỚI: chấm đỏ ở tiêu đề nhóm (nhóm đóng thì không thấy gì bên trong) + tem MỚI/HOT ở mục.
   Giữ ĐỒNG BỘ với khối tương ứng trong seo.py `_page` — 9 trang /tinh-* dùng file này. */
.side .sgrpt{display:inline-flex;align-items:center;gap:6px;min-width:0}
.side .sdot{width:6px;height:6px;border-radius:999px;background:#E4573D;flex:none}
.side .stag{margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:#A63A24;background:#FDECE8;border-radius:4px;padding:1px 5px;vertical-align:middle}
.side .stag.shot{color:#8A5A00;background:#FFF2D6}
.side a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.side a:hover{background:var(--raised);color:var(--brand-ink)}
.side a.on{background:var(--brand-wash);color:var(--brand-ink);font-weight:600}
.side .scta{display:block;text-align:center;background:var(--brand);color:var(--on-brand);border-radius:999px;padding:10px;font-weight:700;font-family:var(--disp);margin:10px 4px 4px}
.side .scta:hover{background:var(--brand-ink);color:#fff}

/* Cột nội dung (máy tính + bài viết) = ô thứ 2 của grid shell */
.wrap{min-width:0;max-width:860px}
@media(max-width:900px){
  .shell{grid-template-columns:1fr;padding-top:14px}
  .side{display:none}
  header .hsearch-wrap{max-width:none;margin:0 10px}
  header .hdapp{display:none}
  .wrap{max-width:none}
}

/* ===== Cột PHẢI "Việc làm mới nhất" (ô thứ 3 của grid shell) =====
   MIRROR box cột phải trang chủ app (index.tsx railHead/railCoRow): đầu box = icon + tên +
   chú thích nhỏ, mỗi dòng = logo 38 + tên + dòng phụ. Trang công cụ là HTML TĨNH nên nội dung
   do tool.js bơm (fetch /api/app/jobs) -> class .has-rail cũng do JS gắn: JS tắt/API lỗi thì
   shell giữ nguyên 2 cột, KHÔNG để lại cột trống.
   ≥1180px mới đủ chỗ cho cột 3; hẹp hơn box tụt xuống DƯỚI nội dung (mobile vẫn thấy). */
.rail{min-width:0}
@media(min-width:1180px){
  .shell.has-rail{grid-template-columns:212px minmax(0,1fr) 300px}
  .rail{position:sticky;top:74px}
}
@media(min-width:901px) and (max-width:1179px){ .rail{grid-column:2/-1;max-width:560px;margin-top:10px} }
@media(max-width:900px){ .rail{grid-column:1/-1;margin-top:10px} }
.rbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 12px 10px}
.rbox+.rbox{margin-top:14px}
.rhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;padding:2px 4px 8px}
.rhead .ric{font-size:13.5px;line-height:1}
.rhead b{font-family:var(--disp);font-size:15px;color:var(--ink)}
.rhead .rnote{font-size:11.5px;color:var(--faint)}
a.rjob{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:12px;text-decoration:none;color:var(--ink)}
a.rjob+a.rjob{border-top:1px solid var(--line);border-radius:12px}
a.rjob:hover{background:var(--raised)}
.rlogo{width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line);background:var(--panel);object-fit:contain}
.rlogo.ph{display:flex;align-items:center;justify-content:center;background:var(--raised);color:var(--muted);font-family:var(--disp);font-weight:700;font-size:16px}
.rjb{min-width:0;flex:1}
.rjt{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);
     display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rjs{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rjp{display:block;font-size:12px;font-weight:600;color:var(--brand-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rall{display:block;text-align:center;margin-top:8px;padding:9px;border-radius:999px;background:var(--brand-wash);
      color:var(--brand-ink);font-weight:600;font-size:13px;text-decoration:none}
.rall:hover{background:var(--brand);color:var(--on-brand)}
.rskel{height:56px;border-radius:12px;background:var(--raised);margin:6px 0;animation:rpulse 1.2s ease-in-out infinite}
@keyframes rpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ===== Component máy tính (giữ nguyên) ===== */
h1{font-family:var(--disp);font-size:27px;line-height:1.25;margin:6px 0 8px;letter-spacing:-.02em;color:var(--ink)}
.lede{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 22px}
.calc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.seg{display:flex;background:var(--raised);border-radius:999px;padding:4px;margin-bottom:18px}
.seg button{flex:1;border:0;background:transparent;font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--muted);padding:11px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--brand);color:var(--on-brand)}
label.f{display:block;font-size:13.5px;color:var(--muted);font-weight:600;margin:14px 0 7px}
.ibox{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 14px}
.ibox input{flex:1;border:0;outline:0;background:transparent;font-size:19px;font-family:var(--disp);color:var(--ink);padding:14px 0}
.ibox .suf{color:var(--faint);font-size:14px}
/* Ô CHỌN trong .ibox (nơi đăng ký ở /tinh-phi-lan-banh…): thiếu luật này thì select rơi về giao
   diện mặc định của trình duyệt — hộp nhỏ xíu, viền xám, nằm lọt thỏm trong khung đã bo viền,
   lệch hẳn ô nhập ngay trên. Kê đúng theo .ibox input; tắt appearance nên phải TỰ vẽ mũi tên. */
.ibox select{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:19px;
  font-family:var(--disp);color:var(--ink);padding:14px 22px 14px 0;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364736C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:12px 8px}
.rhint{display:inline-block;margin:8px 2px 2px;font-size:13px;font-weight:600;color:var(--brand-ink);text-decoration:none}
.rhint:hover{text-decoration:underline}
.result{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-top:18px;overflow:hidden}
.rrow{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14.5px}
.rrow .rl{color:var(--muted)} .rrow .rv{font-family:var(--disp);font-weight:600;color:var(--ink)}
.rrow.big{background:var(--raised)} .rrow.big .rl{color:var(--ink);font-weight:600} .rrow.big .rv{font-size:20px}
.rrow.accent .rv{color:var(--brand-ink)}
.rrow+.rrow{border-top:1px solid var(--line)}
.upd{font-size:12.5px;color:var(--faint);font-family:var(--mono);margin-top:8px}
article{margin-top:40px}
article h2{font-family:var(--disp);font-size:21px;margin:34px 0 10px;color:var(--ink);letter-spacing:-.01em}
article h3{font-size:16.5px;margin:20px 0 6px;color:var(--ink)}
article p,article li{color:var(--ink);font-size:15.5px;line-height:1.65}
article ul,article ol{padding-left:22px;margin:8px 0}
.formula{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;padding:12px 15px;margin:12px 0;font-family:var(--mono);font-size:13.5px;color:var(--ink);overflow-x:auto}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line)}
th{background:var(--raised);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:600}
td.n{text-align:right;font-family:var(--disp);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:0}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:8px 0;padding:2px 16px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--ink);padding:13px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--brand-ink)}
.faq details p{margin:0 0 13px;color:var(--muted)}
.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.related a{background:var(--brand-wash);color:var(--brand-ink);text-decoration:none;font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:999px}
.disc{font-size:13px;color:var(--faint);line-height:1.6;margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.twords{font-size:12.5px;color:var(--muted);font-style:italic;margin:5px 2px 0}

/* Toast báo đã copy link (tool.js dùng) */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Giải thích nhanh thuật ngữ — ngay cạnh máy tính (mỗi mục 1 dòng, có link bài chi tiết). */
.gloss{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 18px;margin-top:16px}
.gloss>summary{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--ink);padding:12px 0;cursor:pointer;list-style:none}
.gloss>summary::-webkit-details-marker{display:none}
.gloss>summary::before{content:'💡 ';}
.gloss dl{margin:0 0 10px;padding:0}
.gloss dt{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--brand-ink);margin-top:10px}
.gloss dd{margin:2px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* Nguồn tham khảo — danh sách văn bản pháp luật + link. */
.src{list-style:none;padding:0;margin:10px 0 0}
.src li{position:relative;padding-left:18px;font-size:14px;line-height:1.6;color:var(--muted);margin:7px 0}
.src li::before{content:'§';position:absolute;left:0;color:var(--brand-ink);font-weight:700}
.src a{color:var(--brand-ink);text-decoration:none;font-weight:600}
.src a:hover{text-decoration:underline}
article .note{background:var(--brand-wash);border-radius:10px;padding:12px 15px;margin:14px 0;font-size:14px;line-height:1.6;color:var(--ink)}