/* CSS chung của khung trang công cụ. Chỉ có khung: hero, bài viết, hỏi đáp, kêu gọi, thẻ.
   Giao diện riêng của từng công cụ nằm trong tool.css ở thư mục công cụ đó.
   Mọi lớp bắt đầu bằng tl- để không đụng CSS của theme. */
.tl-page, body.tools-seongon {
  /* Phông chữ cho các tool.css dùng var(--font-body), var(--font-mono): thiếu hai biến này thì cả dòng font: bị bỏ, chữ về 17px. */
  --font-body: Gilroy, 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tl-page {
  --lam: #004aef; --luc: #07ef9c; --cyan: #0fd6f7; --vang: #ffce00;
  --lam-nhat: #e3ebff; --luc-nhat: #dcfbef; --vang-nhat: #fff6d6; --do: #dc2f2f; --do-nhat: #f6cbcb;
  --nen: #f4f7fd; --vien: #dbe3f5; --chu-dam: #212025; --chu: #434343; --chu-phu: #616a7a;
  background: var(--nen); color: var(--chu); font-size: 17px; line-height: 1.65;
}
.tl-khung { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.tl-vun { padding: 8px 0 0; }
.tl-vun .rank-math-breadcrumb { font-size: 14px; color: var(--chu-phu); padding: 14px 0; }
.tl-vun a { color: var(--lam); }
.tl-vun .separator { margin: 0 6px; }

.tl-hero { background: var(--lam); color: #fff; padding: 48px 0 56px; }
.tl-hero .tl-mat { color: var(--luc); font-weight: 700; letter-spacing: .04em; font-size: 14px; text-transform: uppercase; margin: 0 0 10px; }
.tl-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.2; font-weight: 700; margin: 0 0 16px; max-width: 900px; }
.tl-hero .tl-sapo { font-size: 18px; max-width: 860px; margin: 0; color: #fff; }
.tl-hero .tl-sapo strong { color: #fff; font-weight: 700; }
.tl-the-nho { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.tl-the-nho li { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 4px 14px; font-size: 14px; }

.tl-cong-cu { margin-top: -28px; position: relative; }
.tl-hop { background: #fff; border: 1px solid var(--vien); border-radius: 22px; padding: 28px; }

.tl-bai { padding: 48px 0 8px; }
.tl-bai h2, .tl-muc h2 { color: var(--chu-dam); font-size: clamp(24px, 3vw, 32px); line-height: 1.3; font-weight: 700; margin: 36px 0 12px; }
.tl-bai h3 { color: var(--chu-dam); font-size: 21px; line-height: 1.35; font-weight: 700; margin: 26px 0 8px; }
.tl-bai p { margin: 0 0 14px; }
.tl-bai strong { color: var(--chu-dam); }
.tl-bai ul, .tl-bai ol { margin: 0 0 16px; padding-left: 22px; }
.tl-bai ul { list-style: disc; } .tl-bai ol { list-style: decimal; }
.tl-bai li { margin-bottom: 6px; }
.tl-bai a { color: var(--lam); text-decoration: underline; }
.tl-bai img { max-width: 100%; height: auto; border-radius: 16px; }
.tl-bai figure { margin: 20px 0; }
.tl-bai figcaption { font-size: 14px; color: var(--chu-phu); margin-top: 8px; }
.tl-bai blockquote, .tl-ghi-chu { background: var(--lam-nhat); border-left: 4px solid var(--lam); border-radius: 12px; padding: 14px 18px; margin: 16px 0; color: var(--chu-dam); }
.tl-bang, .tl-page .tbl-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--vien); border-radius: 14px; background: #fff; }
.tl-bang table, .tl-page .tbl-wrap table { border-collapse: collapse; width: 100%; font-size: 16px; }
.tl-bang th, .tl-page .tbl-wrap th { background: var(--lam-nhat); color: var(--chu-dam); text-align: left; padding: 10px 14px; font-weight: 700; }
.tl-bang td, .tl-page .tbl-wrap td { border-top: 1px solid var(--vien); padding: 10px 14px; vertical-align: top; }

.tl-muc { padding: 24px 0 8px; }
.tl-hoi { background: #fff; border: 1px solid var(--vien); border-radius: 14px; margin-bottom: 10px; padding: 0 18px; }
.tl-hoi summary { cursor: pointer; font-weight: 700; color: var(--chu-dam); padding: 14px 0; }
.tl-hoi[open] summary { color: var(--lam); }
.tl-hoi p { margin: 0 0 14px; }

.tl-keu-goi { background: var(--lam); color: #fff; border-radius: 22px; padding: 30px 32px; margin: 36px 0 8px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tl-keu-goi h2 { color: #fff; font-size: 26px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; }
.tl-keu-goi p { margin: 0; max-width: 680px; }
.tl-nut { display: inline-block; background: var(--luc); color: var(--chu-dam); font-weight: 700; border-radius: 999px; padding: 12px 24px; white-space: nowrap; }
.tl-nut:hover { background: #fff; }

.tl-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 14px 0 0; }
.tl-the { display: block; height: 100%; background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 18px 20px; color: var(--chu); transition: border-color .15s; }
.tl-the:hover { border-color: var(--lam); }
.tl-the h3, .tl-the .tl-ten { display: block; color: var(--chu-dam); font-weight: 700; font-size: 19px; line-height: 1.35; margin: 0 0 6px; }
.tl-the p { margin: 0; font-size: 15px; line-height: 1.5; }
.tl-cuoi { height: 56px; }
.tl-nhap { background: var(--vang); color: var(--chu-dam); text-align: center; font-size: 14px; padding: 6px; font-weight: 700; }

@media (max-width: 640px) {
  .tl-hero { padding: 32px 0 48px; }
  .tl-hop { padding: 18px; border-radius: 16px; }
  .tl-keu-goi { padding: 22px; }
}

/* Tiêu đề bên trong khung công cụ */
.tl-hop h2 { color: var(--chu-dam); font-size: 22px; line-height: 1.35; font-weight: 700; margin: 0 0 6px; }
.tl-hop .block + .block { margin-top: 28px; }
.tl-hop .sub { color: var(--chu-phu); margin: 0 0 14px; }

/* Thanh menu trái.
   Từ 1280px: menu là thanh bên dính sát mép trái màn hình, nền trắng, viền phải thẳng, chạy từ dưới đầu trang
   tới đáy màn hình; phần thân và chân trang dịch sang phải 260px để không bị che.
   Đầu trang của theme dính ở trên; JS ghi chiều cao thật vào --tl-dau.
   Hẹp hơn 1280px: menu là ngăn trượt mở bằng nút "Tất cả công cụ" góc dưới trái.
   Phần nội dung nằm giữa khoảng còn lại bên phải thanh menu. */
.tl-than { position: relative; }
.tl-page [id] { scroll-margin-top: 96px; }
.tl-ben ul { list-style: none; margin: 0; padding: 0; }
.tl-ben-trong { font-size: 15px; font-weight: 500; line-height: 1.45; }

/* Menu trái */
.tl-ben-trai { position: fixed; left: 0; top: var(--tl-dau, 76px); bottom: 0; width: 260px; z-index: 900; background: #fff; border-right: 1px solid var(--vien); }
.tl-ben-trai .tl-ben-trong { height: 100%; overflow-y: auto; scrollbar-width: thin; padding: 0 0 24px; }
.tl-ben-dau { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid var(--vien); }
.tl-ben-tieu { display: block; color: var(--chu-dam); font-weight: 700; font-size: 16px; margin: 0; }
a.tl-ben-tieu:hover { color: var(--lam); }
.tl-ben-dong { display: none; margin-left: auto; }
.tl-nhom-ten { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; padding: 0 20px; color: var(--chu-dam); font-size: 15.5px; font-weight: 700; } /* tên nhóm cỡ gần dòng "Tất cả công cụ" */
.tl-bt { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--lam); }
.tl-ben-trai .tl-nhom a { display: block; padding: 8px 20px 8px 48px; color: var(--chu); border-left: 3px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* mỗi tên một hàng; tên dài đặt tenMenu ngắn trong page.json */
.tl-ben-trai .tl-nhom a:hover { color: var(--lam); background: var(--nen); }
.tl-ben-trai .tl-nhom a[aria-current="page"] { color: var(--lam); background: var(--lam-nhat); border-left-color: var(--lam); font-weight: 700; }

.tl-mo-menu, .tl-man-che { display: none; }

@media (min-width: 1280px) {
  /* Chỉ trang có menu trái mới dịch sang phải; trang tổng /tools/ không có menu nên giữ nguyên. */
  .tools-seongon:has(#tl-menu-tong) .tl-page, .tools-seongon:has(#tl-menu-tong) footer.footer { margin-left: 260px; }
  /* Khung trải hết bề ngang bên phải thanh menu; lề phải 100px chừa cho cụm nút gọi, Zalo, Messenger. */
  .tools-seongon:has(#tl-menu-tong) .tl-page .tl-khung { max-width: none; margin: 0; padding: 0 100px 0 32px; }
}
@media (max-width: 1279px) {
  .tl-ben-trai { top: 0; width: min(320px, 86vw); z-index: 10001; border-right: 0; box-shadow: 0 0 40px rgba(0,0,0,.18); transform: translateX(-105%); transition: transform .2s; }
  .tl-ben-trai.tl-mo { transform: none; }
  .tl-ben-dong { display: block; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--chu-phu); cursor: pointer; padding: 0 4px; }
  .tl-mo-menu { display: block; position: fixed; left: 16px; bottom: 20px; z-index: 9999; background: var(--lam); color: #fff; font: inherit; font-size: 15px; font-weight: 700; border: 0; border-radius: 999px; padding: 11px 20px; box-shadow: 0 6px 20px rgba(0,74,239,.3); cursor: pointer; }
  body.tl-menu-mo .tl-man-che { display: block; position: fixed; inset: 0; background: rgba(33,32,37,.45); z-index: 10000; }
}
@media print { .tl-ben, .tl-mo-menu, .tl-man-che { display: none !important; } .tools-seongon .tl-page, .tools-seongon footer.footer { margin-left: 0; } }

/* Ô chọn tệp, nút, ô nhập mặc định lấy phông của trình duyệt; ép về phông của website. Ô gõ mã (lớp có chữ "ma" hay textarea đặt mono riêng) vẫn giữ phông mono của nó. */
.tl-page input, .tl-page button, .tl-page select { font-family: inherit; }
.tl-page input[type="file"] { font-size: 15px; }

/* Ba ô dưới khung công cụ: 1 Câu hỏi thường gặp, 2 Hướng dẫn sử dụng, 3 Kiến thức.
   Mặc định đều đóng; phần chữ vẫn nằm trong mã trang để Google đọc, chỉ bị che bằng CSS. */
.tl-ba-o { padding: 28px 0 8px; }
.tl-o-nut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tl-o { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 18px; background: #fff; border: 1px solid var(--lam); border-radius: 14px; color: var(--lam); font: 700 16px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.tl-o:hover { background: var(--lam-nhat); }
.tl-o[aria-expanded="true"] { background: var(--lam); color: #fff; }
.tl-o-so { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--luc); color: var(--chu-dam); font-size: 13px; }
.tl-o-mui { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.tl-o[aria-expanded="true"] .tl-o-mui { transform: rotate(-135deg) translateY(-3px); }
.tl-o-phan { display: none; margin-top: 14px; background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 8px 28px 24px; }
.tl-o-phan.tl-mo-phan { display: block; }
.tl-o-phan > h2, .tl-o-phan .tl-bai > h2:first-child { color: var(--chu-dam); font-size: 24px; line-height: 1.3; font-weight: 700; margin: 18px 0 12px; }
.tl-o-phan .tl-bai { padding: 0; } /* chữ trải hết bề ngang ô */
.tl-o-phan .tl-hoi { border-radius: 12px; }
.tl-buoc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tl-buoc li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: center; background: var(--nen); border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; }
.tl-buoc-so { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--luc); color: var(--chu-dam); font-weight: 700; }
.tl-buoc-nhan { color: var(--chu-phu); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl-buoc-chu { color: var(--chu-dam); font-weight: 600; line-height: 1.4; }
@media (max-width: 760px) {
  .tl-o-nut, .tl-buoc { grid-template-columns: minmax(0, 1fr); }
  .tl-o-phan { padding: 4px 18px 18px; }
}
@media print { .tl-o-nut { display: none; } .tl-o-phan { display: block !important; } }

/* Tab Kiến thức: thẻ bài blog SEONGON có ảnh, và danh sách tài liệu Google. */
.tl-o-phan .tl-chi-tiet { margin-top: 26px; border-top: 1px solid var(--vien); padding-top: 6px; }
.tl-kt-nhom { color: var(--chu-dam); font-size: 18px; font-weight: 700; margin: 22px 0 12px; }
.tl-kt-the { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; }
.tl-kt-the a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; color: var(--chu); text-decoration: none; transition: border-color .15s; }
.tl-kt-the a:hover { border-color: var(--lam); }
.tl-kt-the img { display: block; width: 100%; height: auto; aspect-ratio: 558 / 346; object-fit: cover; background: var(--nen); }
.tl-kt-the .tl-kt-ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 12px 14px 6px; color: var(--chu-dam); font-weight: 700; font-size: 16px; line-height: 1.4; }
.tl-kt-the .tl-kt-mo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 14px; font-size: 14px; line-height: 1.5; }
.tl-kt-doc { margin: auto 14px 14px; padding-top: 10px; color: var(--lam); font-size: 14px; font-weight: 700; }
.tl-kt-gg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-kt-gg a { display: flex; flex-direction: column; gap: 4px; height: 100%; background: var(--nen); border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; color: var(--chu); text-decoration: none; }
.tl-kt-gg a:hover { border-color: var(--lam); }
.tl-kt-nguon { color: var(--chu-phu); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl-kt-gg .tl-kt-ten { color: var(--lam); font-weight: 700; line-height: 1.4; }
.tl-kt-gg .tl-kt-mo { font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) { .tl-kt-gg { grid-template-columns: minmax(0, 1fr); } }
.tl-bai .tl-nguon-bai { font-size: 14px; color: var(--chu-phu); margin-top: -4px; }
.tl-bai .tl-nguon-bai a { color: var(--lam); }
/* Hình lấy từ bài blog SEONGON (dùng thẳng địa chỉ ảnh trên seongon.com), bấm vào mở bài gốc. */
.tl-bai .tl-hinh-bai { margin: 14px auto 18px; max-width: 640px; } /* ảnh nằm giữa ô */
.tl-bai .tl-hinh-bai img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--vien); }
.tl-bai .tl-hinh-bai figcaption { font-size: 13.5px; color: var(--chu-phu); margin-top: 6px; text-align: center; }
.tl-bai .tl-hinh-bai figcaption a { color: var(--lam); }

/* Thẻ công cụ có ảnh đại diện (Công cụ liên quan, trang tổng). */
.tl-the.tl-the-co-anh { padding: 0 0 18px; overflow: hidden; }
.tl-the-anh { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin-bottom: 14px; background: var(--lam); }
.tl-the.tl-the-co-anh h3, .tl-the.tl-the-co-anh .tl-ten, .tl-the.tl-the-co-anh p { padding: 0 20px; }

/* Phần đầu trang công cụ gọn (thay cho dải xanh cao 376px): đường dẫn trong dải xanh, tiêu đề một hàng, nhãn bên phải. */
.tl-hero.tl-hero-gon { padding: 14px 0 48px; }
.tl-vun-dau .rank-math-breadcrumb { padding: 0 0 12px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.tl-vun-dau .rank-math-breadcrumb p { margin: 0; }
.tl-vun-dau a { color: #fff; }
.tl-vun-dau a:hover { color: var(--luc); }
.tl-vun-dau .separator { margin: 0 6px; }
.tl-hero-hang { display: flex; flex-direction: column; gap: 12px; } /* tiêu đề và mô tả trọn bề ngang, ba nhãn nằm dưới */
.tl-hero-chu { min-width: 0; }
.tl-hero-gon h1 { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.2; margin: 0 0 8px; max-width: none; }
.tl-hero-gon .tl-sapo { font-size: 16px; line-height: 1.55; max-width: 1100px; color: rgba(255,255,255,.92); }
.tl-hero-gon .tl-the-nho { margin: 0; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
.tl-hero-gon .tl-the-nho li { font-size: 13px; padding: 3px 12px; white-space: nowrap; }
@media (max-width: 760px) {
  .tl-hero.tl-hero-gon { padding: 12px 0 40px; }
}
/* Số thứ tự ba ô tự đánh theo số ô thực có trên trang. */
.tl-o-nut { counter-reset: o; }
.tl-o-so::before { counter-increment: o; content: counter(o); }

/* Ba nút ô: anh Phúc chốt kiểu A (thanh tab gạch chân) ngày 07/11/2026; kiểu B, C giữ lại để tham khảo. */
.tl-o-bt { display: none; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-o-chu { display: flex; flex-direction: column; min-width: 0; }
.tl-o-chu b { font-weight: 700; }
.tl-o-chu small { display: none; font-size: 13px; font-weight: 500; opacity: .8; }

/* Kiểu A · Thanh tab gạch chân: ba tab trên một hàng, nội dung dính liền bên dưới trong cùng một thẻ. */
.tl-ba-o.kieu-a .tl-o-nut { display: flex; gap: 0; background: #fff; border: 1px solid var(--vien); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 0 12px; }
.tl-ba-o.kieu-a .tl-o { flex: 0 0 auto; width: auto; min-height: 60px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--chu-phu); padding: 10px 18px; }
.tl-ba-o.kieu-a .tl-o:hover { color: var(--lam); background: none; }
.tl-ba-o.kieu-a .tl-o[aria-expanded="true"] { color: var(--lam); border-bottom-color: var(--lam); background: none; }
.tl-ba-o.kieu-a .tl-o-so, .tl-ba-o.kieu-a .tl-o-mui { display: none; }
.tl-ba-o.kieu-a .tl-o-bt { display: block; }
.tl-ba-o.kieu-a .tl-o-phan { margin-top: 0; border-radius: 0 0 16px 16px; border-top: 1px solid var(--vien); }

/* Kiểu B · Nút gạt viên thuốc: một khối nền nhạt chứa ba lựa chọn, lựa chọn đang mở nền lam. */
.tl-ba-o.kieu-b .tl-o-nut { display: inline-flex; gap: 4px; background: var(--lam-nhat); border-radius: 999px; padding: 5px; }
.tl-ba-o.kieu-b .tl-o { width: auto; min-height: 46px; border: 0; border-radius: 999px; background: none; padding: 8px 22px; }
.tl-ba-o.kieu-b .tl-o:hover { background: rgba(255,255,255,.6); }
.tl-ba-o.kieu-b .tl-o[aria-expanded="true"] { background: var(--lam); color: #fff; box-shadow: 0 4px 14px rgba(0,74,239,.25); }
.tl-ba-o.kieu-b .tl-o-so, .tl-ba-o.kieu-b .tl-o-mui { display: none; }
.tl-ba-o.kieu-b .tl-o-bt { display: block; }

/* Kiểu C · Thẻ có biểu tượng và số lượng: mỗi nút là một thẻ lớn cho biết bên trong có gì. */
.tl-ba-o.kieu-c .tl-o { min-height: 84px; padding: 14px 18px; border-color: var(--vien); color: var(--chu-dam); gap: 14px; }
.tl-ba-o.kieu-c .tl-o:hover { border-color: var(--lam); background: #fff; }
.tl-ba-o.kieu-c .tl-o-so { display: none; }
.tl-ba-o.kieu-c .tl-o-bt { display: block; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--lam-nhat); color: var(--lam); box-sizing: border-box; }
.tl-ba-o.kieu-c .tl-o-chu small { display: block; color: var(--chu-phu); opacity: 1; }
.tl-ba-o.kieu-c .tl-o[aria-expanded="true"] { background: var(--lam); border-color: var(--lam); color: #fff; }
.tl-ba-o.kieu-c .tl-o[aria-expanded="true"] .tl-o-bt { background: rgba(255,255,255,.16); color: #fff; }
.tl-ba-o.kieu-c .tl-o[aria-expanded="true"] .tl-o-chu small { color: #c0d2fb; }
@media (max-width: 760px) {
  .tl-ba-o.kieu-a .tl-o-nut { overflow-x: auto; }
  .tl-ba-o.kieu-b .tl-o-nut { display: flex; border-radius: 16px; flex-wrap: wrap; }
}
/* Kiểu A trên điện thoại: ba tab chia đều bề ngang, bỏ biểu tượng, chữ được xuống dòng. */
@media (max-width: 760px) {
  .tl-ba-o.kieu-a .tl-o-nut { overflow: visible; padding: 0 4px; }
  .tl-ba-o.kieu-a .tl-o { flex: 1 1 0; min-width: 0; padding: 10px 6px; justify-content: center; text-align: center; font-size: 14px; line-height: 1.25; }
  .tl-ba-o.kieu-a .tl-o-bt { display: none; }
}
/* Ngày cập nhật trong hàng nhãn đầu trang. */
.tl-the-nho .tl-ngay { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; background: rgba(255,255,255,.14); }
.tl-the-nho .tl-ngay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* Hàng nhãn đầu trang chia hai khu: đầu là ngày cập nhật và phiên bản (nổi, nền trắng), đuôi là ba nhãn tính năng. */
.tl-hero-nhan { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; }
.tl-hero-nhan .tl-the-nho { margin: 0; }
.tl-the-nho.tl-meta .tl-ngay { background: #fff; color: var(--lam); border-color: #fff; font-weight: 700; font-size: 14px; padding: 5px 14px; }
.tl-the-nho.tl-meta .tl-ngay svg { width: 15px; height: 15px; stroke-width: 2; }
.tl-the-nho.tl-meta time { font-weight: 700; }
.tl-the-nho.tl-tinh-nang li { display: inline-flex; align-items: center; gap: 6px; }
.tl-the-nho.tl-tinh-nang li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--luc); }
@media (max-width: 760px) { .tl-hero-nhan { justify-content: flex-start; } }
/* Điện thoại: ba nhãn tính năng thành dòng chữ nhỏ có chấm, không viền; ngày và phiên bản nhỏ lại. */
@media (max-width: 760px) {
  .tl-hero-nhan { gap: 10px; }
  .tl-the-nho.tl-meta .tl-ngay { font-size: 13px; padding: 4px 11px; }
  .tl-the-nho.tl-tinh-nang { gap: 4px 14px; }
  .tl-the-nho.tl-tinh-nang li { border: 0; padding: 0; font-size: 13px; color: rgba(255,255,255,.88); white-space: normal; }
}
/* Điện thoại: thẻ bài blog trong tab Kiến thức thành dải trượt ngang. */
@media (max-width: 760px) {
  .tl-kt-the { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -18px; padding: 0 18px 8px; scrollbar-width: none; }
  .tl-kt-the::-webkit-scrollbar { display: none; }
  .tl-kt-the li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ===== BỘ LỚP KHỐI CÔNG CỤ HAI CỘT (theo trang mẫu kiem-tra-ma-phan-hoi đã duyệt 07/11/2026) =====
   Khung HTML trong tool.html:
   <div class="tl-cc">
     <div class="tl-cc-trai">            thẻ nhập
       <h2>…</h2>
       <p class="tl-bc"><b>1</b>…</p> … (label cũng dùng class tl-bc)
       <button class="tl-cc-nut">Nút chính</button>
       <p class="tl-cc-thu"><button class="tl-cc-lien">Chưa có …? Thử với …</button></p>
       <div class="tl-cc-tra"><p class="tl-cc-tra-ten">Tiêu đề</p><ul><li><span class="tl-cc-ma">…</span><span><b>…</b>…</span></li></ul></div>
     </div>
     <div class="tl-cc-phai">            kết quả
       <div class="tl-cc-cho">           phần hiện lúc chưa chạy (JS ẩn khi có kết quả)
         <div class="tl-cc-cho-dau"><b>Chưa chạy</b><span>…</span></div>
         <p class="tl-cc-cho-chu">… kết quả sẽ hiện ở đây.</p>
         <div class="tl-cc-vd"><p class="tl-cc-vd-nhan">Ví dụ kết quả …</p> …nội dung mẫu mờ… </div>
       </div>
       … vùng kết quả của công cụ …
       <!--keu-goi-->                    ô kêu gọi tự chèn vào cuối cột kết quả
     </div>
   </div>                                                                    */
.tl-hop:has(> .tl-cc) { background: transparent; border: 0; padding: 0; }
.tl-cc { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.tl-cc-trai, .tl-cc-phai { background: #fff; border: 1px solid var(--vien); border-radius: 20px; padding: 24px; min-width: 0; box-shadow: 0 1px 2px rgba(0,74,239,.04), 0 8px 24px rgba(0,74,239,.06); }
.tl-cc-trai { display: flex; flex-direction: column; }
.tl-cc-phai { display: flex; flex-direction: column; }
.tl-hop .tl-cc-trai h2 { font-size: 19px; margin: 0 0 16px; }
.tl-cc .tl-bc { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--chu-dam); letter-spacing: 0; text-transform: none; }
.tl-cc .tl-bc b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lam); color: #fff; font-size: 12px; }
.tl-cc .tl-bc small { font-weight: 400; color: var(--chu-phu); font-size: 13px; }
.tl-cc-trai input[type="text"], .tl-cc-trai input[type="url"], .tl-cc-trai input[type="number"], .tl-cc-trai textarea, .tl-cc-trai select { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid #d7dfe2; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tl-cc-trai input:hover, .tl-cc-trai textarea:hover, .tl-cc-trai select:hover { border-color: #80a4f7; }
.tl-cc-trai input:focus, .tl-cc-trai textarea:focus, .tl-cc-trai select:focus { outline: none; border-color: var(--lam); box-shadow: 0 0 0 3px #c0d2fb; }
.tl-cc-gat { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--nen); border-radius: 12px; padding: 4px; margin: 0 0 18px; }
.tl-cc-gat > button { border: 0; border-radius: 9px; background: none; padding: 9px 6px; font: 600 14.5px/1.2 var(--font-body); color: var(--chu); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.tl-cc-gat > button:hover { color: var(--lam); }
.tl-cc-gat > button[aria-pressed="true"], .tl-cc-gat > button[aria-selected="true"], .tl-cc-gat > button.dang-chon { background: #fff; color: var(--lam); box-shadow: 0 1px 4px rgba(0,74,239,.15); }
.tl-cc-nut { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 12px; background: var(--lam); color: #fff; font: 700 16px/1.2 var(--font-body); padding: 13px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,74,239,.25); transition: transform .15s, box-shadow .15s, background .15s; }
.tl-cc-nut:hover { background: #195bef; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,74,239,.3); }
.tl-cc-nut:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(0,74,239,.22); }
.tl-cc-nut:focus-visible, .tl-cc-lien:focus-visible, .tl-cc-gat > button:focus-visible { outline: 2px solid var(--luc); outline-offset: 2px; }
.tl-cc-thu { margin: 12px 0 0; text-align: center; }
.tl-cc-lien { background: none; border: 0; padding: 0; color: var(--lam); font: 600 14px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl-cc-lien:hover { color: #195bef; }
.tl-cc-tra { margin-top: 22px; padding: 16px; background: var(--nen); border-radius: 14px; }
.tl-cc-tra-ten { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--chu-dam); }
.tl-cc-tra-ten svg { width: 18px; height: 18px; fill: none; stroke: var(--lam); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-cc-tra ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tl-cc-tra li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--chu-phu); transition: transform .15s, box-shadow .15s; }
.tl-cc-tra li:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,74,239,.08); }
.tl-cc-tra li b { display: block; color: var(--chu-dam); font-size: 14.5px; }
.tl-cc-ma { flex: none; min-width: 46px; text-align: center; border-radius: 8px; padding: 2px 6px; font: 700 13px/1.5 'JetBrains Mono', monospace; background: var(--lam-nhat); color: var(--lam); }
.tl-cc-ma.luc { background: var(--luc-nhat); color: #046b47; } .tl-cc-ma.vang { background: var(--vang-nhat); color: #7a5f00; } .tl-cc-ma.do { background: var(--do-nhat); color: #8f1d1d; }
.tl-cc-cho-dau { display: flex; justify-content: space-between; align-items: center; color: var(--chu-phu); font-size: 16px; }
.tl-cc-cho-dau b { color: var(--chu-dam); font-size: 17px; }
.tl-cc-cho-chu { margin: 10px 0 16px; color: var(--chu-phu); font-size: 14.5px; border-top: 4px solid #ebeff0; padding-top: 12px; }
.tl-cc-vd { margin-top: 8px; }
.tl-cc-vd > *:not(.tl-cc-vd-nhan) { opacity: .6; }
.tl-cc-vd-nhan { display: inline-block; font-size: 12px; font-weight: 700; color: var(--lam); background: var(--lam-nhat); border-radius: 999px; padding: 3px 10px; margin: 0 0 12px; }
.tl-cc-cho[hidden] { display: none !important; }
.tl-cc-phai .tl-keu-goi-khung { margin: auto 0 0; padding: 18px 22px; border-radius: 16px; gap: 16px; flex-wrap: nowrap; align-items: center; }
.tl-cc-phai > :not(.tl-keu-goi-khung):not(.tl-cc-cho) ~ .tl-keu-goi-khung { margin-top: 24px; }
.tl-hop .tl-cc-phai .tl-keu-goi-khung h2 { color: #fff; font-size: 19px; margin: 0 0 4px; }
.tl-cc-phai .tl-keu-goi-khung p { font-size: 14px; line-height: 1.5; color: #e3ebff; }
.tl-cc-phai .tl-keu-goi-khung .tl-nut { flex: none; }
@media (min-width: 981px) { .tl-cc { min-height: max(520px, calc(100vh - 300px)); } }
@media (max-width: 980px) { .tl-cc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .tl-cc-trai, .tl-cc-phai { padding: 18px; }
  .tl-cc-tra { padding: 12px; margin-top: 18px; }
  .tl-cc-tra ul { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tl-cc-tra li { flex-direction: column; gap: 6px; padding: 10px; }
  .tl-cc-tra li > span:last-child { font-size: 0; }
  .tl-cc-tra li b { font-size: 13.5px; }
  .tl-cc-vd { display: none; }
  .tl-cc-phai .tl-keu-goi-khung { flex-wrap: wrap; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tl-cc * { transition: none !important; transform: none !important; } }
/* Vá chung (07/11/2026): nút khoá khi đang chạy, nút kêu gọi không tràn trên điện thoại, chữ dài trong bảng tra tự ngắt. */
.tl-cc-nut:disabled, .tl-cc-nut[aria-disabled="true"] { background: #d7dfe2; color: #908f92; box-shadow: none; transform: none; cursor: not-allowed; }
.tl-cc-lien:disabled { color: #908f92; text-decoration: none; cursor: not-allowed; }
.tl-cc-tra li b, .tl-cc-tra li span { overflow-wrap: anywhere; }
.tl-cc-tra li > span:last-child { min-width: 0; }
@media (max-width: 760px) {
  .tl-keu-goi .tl-nut { white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; }
}
/* Ô kêu gọi trong cột kết quả: màn vừa (dưới 1440px) cho nút xuống dưới mô tả để không tràn khung. */
@media (max-width: 1439px) {
  .tl-cc-phai .tl-keu-goi-khung, .mp-phai .tl-keu-goi-khung { flex-wrap: wrap; }
  .tl-cc-phai .tl-keu-goi-khung .tl-nut, .mp-phai .tl-keu-goi-khung .tl-nut { white-space: normal; text-align: center; max-width: 100%; }
}