/* Giao diện riêng của công cụ này. Sửa ở đây không ảnh hưởng công cụ khác. */
.tl-page{--blue:#004aef; --blue-d:#0033b3; --green:#07ef9c; --cyan:#0fd6f7; --yellow:#ffce00;
  --bg:#f4f7fd; --surface:#ffffff; --ink:#212025; --text:#434343; --muted:#616a7a;
  --line:#dbe3f5; --blue-soft:#e3ebff; --green-soft:#dcfbef; --cyan-soft:#e3fafe; --yellow-soft:#fff6d6;
  --red:#dc2f2f; --red-soft:#f6cbcb; --red-ink:#8f1d1d;
  --font-body:inherit;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.tl-page .fig{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;min-width:0}
.tl-page .fig svg{display:block;width:100%;height:auto}
.tl-page .fig-cap{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.tl-page .fig-cap b{color:var(--ink)}
.tl-page .note{margin-top:18px;background:var(--blue-soft);border-radius:14px;padding:14px 18px;font-size:14.5px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;color:var(--ink);min-width:0}
.tl-page .note .ic{width:20px;height:20px;margin-top:3px;fill:var(--blue);flex:none}
.tl-page .note.warn{background:var(--yellow-soft)}
.tl-page .note.warn .ic{fill:#7a5f00}
.tl-page .bul{margin-top:12px;padding-left:0;list-style:none}
.tl-page .bul li{position:relative;padding-left:22px;margin-top:8px;font-size:15px}
.tl-page .bul li:before{content:"";position:absolute;left:4px;top:10px;width:7px;height:7px;border-radius:2px;background:var(--blue)}
.tl-page .tbl-wrap{overflow-x:auto;margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px}

/* Khối công cụ hai cột: dùng bộ lớp tl-cc trong src/shared/tools.css, ở đây chỉ phần riêng.
   Cột trái hẹp hơn mẫu (tối đa 300px) để cột phải đủ chỗ cho thẻ xem trước rộng đúng 600px chữ như Google.
   Màn chưa đủ rộng thì thẻ giữ nguyên bề rộng và cuộn ngang trong khung, chữ không tự ngắt thêm. */
.tl-page .tl-cc.serp-cc{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
@media (max-width:980px){.tl-page .tl-cc.serp-cc{grid-template-columns:minmax(0,1fr)}}
.tl-page .serp-cc .tl-cc-phai{padding-left:20px;padding-right:20px}
.tl-page .serp-cc .tl-cc-trai input[type="text"],.tl-page .serp-cc .tl-cc-trai textarea{color:var(--ink);font:400 15px/1.5 var(--font-body);padding:11px 13px;margin-bottom:16px}
.tl-page .serp-cc .tl-cc-trai textarea{min-height:96px;resize:vertical;margin-bottom:8px}
.tl-page .serp-goi-y{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.tl-page .serp-gat{max-width:320px}
.tl-page .ggl-khung{overflow-x:auto;padding-bottom:4px}
.tl-page .serp-nhan-do{margin:18px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
@media (max-width:760px){.tl-page .serp-cc .tl-cc-phai{padding-left:14px;padding-right:14px}}

.tl-page .ggl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-sizing:content-box;width:600px;font-family:Arial,Helvetica,sans-serif} /* phần chữ rộng đúng 600px như Google; công cụ đã tự chia dòng theo bề rộng này */
.tl-page .ggl-card.ggl-dien_thoai{width:340px}
@media (max-width:760px){.tl-page .ggl-card{padding:14px 12px}}
.tl-page .ggl-hang-site{display:flex;align-items:center;gap:10px}
.tl-page .ggl-favicon{width:26px;height:26px;border-radius:50%;background:var(--blue-soft);flex:none;display:block;border:1px solid var(--line)}
.tl-page .ggl-sitename{font-size:14px;color:#202124;line-height:1.3}
.tl-page .ggl-url{font-size:12.5px;color:#4d5156;line-height:1.3;overflow-wrap:anywhere}
.tl-page .ggl-title{margin-top:6px;font-size:20px;line-height:1.3;color:#1a0dab;white-space:nowrap} /* công cụ đã tự cắt tiêu đề kèm dấu ... theo bề rộng Google */
.tl-page .ggl-desc{margin-top:4px;font-size:14px;line-height:1.57;color:#4d5156;white-space:pre} /* giữ đúng các dòng công cụ đã chia, trình duyệt không tự ngắt thêm */
.tl-page .ggl-rong{color:#9aa0a6}

.tl-page .serp-do{margin-top:10px;display:grid;gap:8px}
.tl-page .gh{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--bg);border-radius:12px;padding:10px 13px;border-left:4px solid var(--line)}
.tl-page .gh .ten{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.tl-page .gh .ten span{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.tl-page .gh .dem{font:700 13px/1 var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap;padding:5px 9px;border-radius:999px}
.tl-page .gh.ok{border-left-color:var(--green)}
.tl-page .gh.ok .dem{background:var(--green-soft);color:#046b47}
.tl-page .gh.gan{border-left-color:var(--yellow)}
.tl-page .gh.gan .dem{background:var(--yellow-soft);color:#7a5f00}
.tl-page .gh.qua{border-left-color:var(--red)}
.tl-page .gh.qua .dem{background:var(--red-soft);color:var(--red-ink)}
.tl-page .gh.trong{border-left-color:var(--line)}
.tl-page .gh.trong .dem{background:var(--surface);color:var(--muted)}
.tl-page .thanh{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:5px}
.tl-page .thanh i{display:block;height:100%;background:var(--blue);border-radius:999px}