/* Phân tích log truy cập: công cụ chạy trong khung nhúng (assets/phan-tich/), vì bộ chữ Tailwind
   của công cụ sẽ phá đầu trang và chân trang của website nếu nạp thẳng vào trang.
   Khung cao cố định theo màn hình, cuộn nằm trong khung: đo chiều cao theo nội dung từng làm trang
   giật mỗi lần công cụ vẽ lại biểu đồ.
   Bố cục hai cột dùng bộ lớp tl-cc trong src/shared/tools.css: cột trái là các bước và bảng tra,
   cột phải là khung công cụ (ô kéo thả và kết quả đều nằm trong khung, nên không có khối "Chưa chạy"). */
.tl-page .pl-goi-y { margin: 0 0 16px 30px; font-size: 13.5px; line-height: 1.5; color: #616a7a; }
.tl-page .pl-thu { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tl-page .pl-lien-phu { color: #616a7a; font-weight: 500; }
.tl-page .pl-san { position: relative; height: calc(100vh - 120px); min-height: 560px; }
.tl-page .pl-khung { display: block; width: 100%; height: 100%; border: 1px solid #dbe3f5; border-radius: 16px; background: #f4f7fd; }
.tl-page .pl-dang-mo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; border: 1px solid #dbe3f5; border-radius: 16px; background: #fff; color: #616a7a; font-size: 15px; }
.tl-page .pl-dang-mo[hidden] { display: none; }
.tl-page .pl-dang-mo b { color: #212025; font-size: 17px; }
.tl-page .pl-dang-mo span { max-width: 52ch; line-height: 1.6; }
.tl-page .pl-cc .tl-cc-phai .tl-keu-goi-khung { margin-top: 20px; }
@media (max-width: 860px) {
  .tl-page .pl-san { height: calc(100vh - 90px); min-height: 520px; }
}
@media (max-width: 760px) {
  .tl-page .pl-goi-y { margin-left: 0; }
  .tl-page .pl-cc .tl-cc-phai { padding: 10px; }
}
/* Đường dẫn tệp log dài không có dấu cách: cho ngắt giữa chữ để ô bảng tra không đẩy trang tràn ngang trên điện thoại. */
.tl-page .pl-cc .tl-cc-tra li { min-width: 0; }
.tl-page .pl-cc .tl-cc-tra li > span:last-child { min-width: 0; }
.tl-page .pl-cc .tl-cc-tra li b { overflow-wrap: anywhere; }
/* Vùng kéo thả ở cột trái; khung công cụ ở cột phải chỉ hiện khi bắt đầu phân tích. */
.tl-page .pl-tha { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; margin: 0 0 10px; border: 2px dashed #80a4f7; border-radius: 14px; background: #f4f7fd; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.tl-page .pl-tha:hover, .tl-page .pl-tha.dang-keo { border-color: #004aef; background: #e3ebff; }
.tl-page .pl-tha svg { width: 34px; height: 34px; fill: none; stroke: #004aef; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-page .pl-tha b { color: #212025; font-size: 15.5px; }
.tl-page .pl-tha span { color: #616a7a; font-size: 13px; }
.tl-page .pl-tep-chon { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #dbe3f5; border-radius: 12px; background: #fff; font-size: 14px; }
.tl-page .pl-tep-chon[hidden] { display: none; }
.tl-page .pl-tep-chon b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #212025; }
.tl-page .pl-tep-chon span { color: #616a7a; }
.tl-page .pl-bo { border: 0; background: none; font-size: 20px; line-height: 1; color: #616a7a; cursor: pointer; padding: 0 2px; }
.tl-page .pl-goi-y-nho { margin: 0 0 16px; font-size: 13px; }
.tl-page .pl-san[hidden] { display: none; }
.tl-page .pl-vd-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tl-page .pl-vd-so div { border: 1px solid #dbe3f5; border-radius: 12px; padding: 12px; }
.tl-page .pl-vd-so b { display: block; color: #004aef; font-size: 20px; }
.tl-page .pl-vd-so span { font-size: 12.5px; color: #616a7a; }
.tl-page .pl-vd-bot { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-page .pl-vd-bot li { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 10px; font-size: 13.5px; color: #212025; }
.tl-page .pl-vd-bot i { height: 10px; border-radius: 5px; background: #80a4f7; }
.tl-page .pl-vd-bot em { font-style: normal; text-align: right; color: #616a7a; }
@media (max-width: 760px) { .tl-page .pl-vd-so { grid-template-columns: 1fr 1fr; } }