/* seongon.css — lớp giao diện SEONGON cho AI Log Analyzer (06/11/2026).
 * Cùng luật với seongon-shim.js: thân index.html và static/* giữ nguyên, khác biệt nằm ở đây.
 * Theo ma-nguon/TIEU-CHI-GIAO-DIEN.md: không gradient, không vạch màu dày mép trái, chữ vàng không
 * nằm trên nền trắng, hàng tab là dải lam dính đầu khung, một hàng, đổi thành ô chọn từ 640px. */

/* Chữ: cùng họ chữ với website (Gilroy), rồi tới Be Vietnam Pro. Lớp của Font Awesome vẫn thắng
   vì chọn theo lớp, còn quy tắc này chọn mọi phần tử. */
* { font-family: Gilroy, 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; }
body { background: #f4f7fd !important; color: #434343; }

/* Thẻ: nền trắng, viền mảnh, bóng nhẹ */
.card { border: 1px solid #dbe3f5; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); border-radius: 16px; }

/* ── Bỏ gradient ── */
[class*="bg-gradient-to-"] { background-image: none !important; background-color: #ffffff !important; }
[class*="bg-gradient-to-"][class*="from-accent"],
[class*="bg-gradient-to-"][class*="from-yellow"],
[class*="bg-gradient-to-"][class*="from-amber"] { background-color: #fff6d6 !important; }
[class*="bg-gradient-to-"][class*="from-navy"],
[class*="bg-gradient-to-"][class*="from-blue"],
[class*="bg-gradient-to-"][class*="from-indigo"] { background-color: #e3ebff !important; }
[class*="bg-gradient-to-"][class*="from-cyan"],
[class*="bg-gradient-to-"][class*="from-sky"] { background-color: #e3fafe !important; }
[class*="bg-gradient-to-"][class*="from-green"],
[class*="bg-gradient-to-"][class*="from-emerald"],
[class*="bg-gradient-to-"][class*="from-teal"] { background-color: #dcfbef !important; }
[class*="bg-gradient-to-"][class*="from-red"],
[class*="bg-gradient-to-"][class*="from-rose"],
[class*="bg-gradient-to-"][class*="from-orange"] { background-color: #fdecec !important; }
[class*="bg-gradient-to-"][class*="from-purple"],
[class*="bg-gradient-to-"][class*="from-violet"],
[class*="bg-gradient-to-"][class*="from-pink"] { background-color: #f1ecff !important; }
/* Khối chữ trắng trên gradient: nền lam đặc */
[class*="bg-gradient-to-"].text-white,
.text-white > [class*="bg-gradient-to-"],
.header-gradient, .footer-gradient, .header-glass { background: #004aef !important; background-image: none !important; }
[class*="bg-gradient-to-"].text-white *:not(.bg-white):not([class*="bg-accent"]):not([class*="bg-white"]) { color: #fff !important; }
/* Thanh tiến độ và thanh tỉ lệ: màu đặc */
#progress-bar { background: #004aef !important; }
[class*="bg-gradient-to-"].h-full, [class*="bg-gradient-to-"].h-2, [class*="bg-gradient-to-"].h-3 { background-color: #ffce00 !important; }

/* ── Bỏ vạch màu dày mép trái ── */
[class*="border-l-4"], [class*="border-l-2"], .geo-insight, .insight-card {
  border-left-width: 1px !important;
}
[class*="border-l-4"], [class*="border-l-2"] { border: 1px solid rgba(33, 32, 37, .1) !important; }
.geo-insight { border: 1px solid #dbe3f5 !important; }
.insight-card { border: 1px solid #dbe3f5 !important; }

/* ── Chữ vàng không nằm trên nền trắng ── */
.text-accent-400, .text-accent-500, .text-accent-600 { color: #7a5f00 !important; }
.bg-accent-500.text-white, .bg-accent-500 .text-white { color: #212025 !important; }
.btn-primary { background: #004aef !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
.btn-primary:hover { background: #003fca !important; }
.btn-primary .text-white, .btn-primary i { color: #fff !important; }
.text-navy-500 { color: #004aef; }
h1, h2, h3, h4 { color: #212025; }
.card h3.text-navy-500, .card h2.text-navy-500 { color: #212025 !important; }

/* ── Hàng tab ── */
.sg-tabbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 6px;
  background: #004aef; border-radius: 14px; padding: 8px;
  box-shadow: 0 6px 18px rgba(0, 74, 239, .22);
  overflow: visible !important; margin-bottom: 18px !important;
}
.sg-tabbar .sg-tabs {
  display: flex !important; flex-wrap: nowrap; gap: 4px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; background: none !important; padding: 0 !important;
  min-width: 0 !important; border-radius: 0 !important;
}
.sg-tabbar .sg-tabs::-webkit-scrollbar { display: none; }
.sg-tabbar .tab-btn {
  flex: none; white-space: nowrap; border-radius: 999px !important; padding: 9px 14px !important;
  color: #fff !important; background: transparent !important; font-size: 15px !important; font-weight: 600;
  box-shadow: none !important; transition: background .15s;
}
.sg-tabbar .tab-btn i { color: inherit !important; opacity: .85; }
.sg-tabbar .tab-btn:hover { background: rgba(255, 255, 255, .14) !important; }
.sg-tabbar .tab-btn.active { background: #fff !important; color: #004aef !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .12) !important; }
.sg-tabbar .tab-btn:focus-visible { outline: 2px solid #07ef9c; outline-offset: 1px; }
.sg-mui {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.sg-mui:not([disabled]):hover { background: rgba(255, 255, 255, .3); }
.sg-mui[disabled] { opacity: .3; cursor: default; }
.sg-mui[hidden] { display: none; }
.sg-chon { display: none; align-items: center; gap: 10px; width: 100%; color: #fff; font-size: 14px; font-weight: 600; }
.sg-chon select {
  flex: 1; min-width: 0; border-radius: 10px; border: 0; padding: 10px 12px; font-size: 16px;
  color: #212025; background: #fff;
}
@media (max-width: 640px) {
  .sg-tabbar .sg-tabs, .sg-tabbar .sg-mui { display: none !important; }
  .sg-chon { display: flex; }
}

/* ── Phần giới thiệu trước khi nhập ── */
.sg-gioi-thieu { margin-top: 20px; border-top: 1px solid #dbe3f5; padding-top: 18px; }
.sg-gioi-thieu[hidden] { display: none; }
.sg-gt-dau { font-weight: 700; color: #212025; margin: 0 0 10px; font-size: 15px; }
.sg-gioi-thieu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-gioi-thieu li { border: 1px solid #dbe3f5; border-radius: 12px; padding: 12px 14px; background: #fff; font-size: 14px; line-height: 1.55; color: #434343; }
.sg-gioi-thieu li b { display: block; color: #004aef; margin-bottom: 4px; font-size: 15px; }
.sg-gt-rieng { margin: 12px 0 0; font-size: 13.5px; color: #046b47; }
@media (max-width: 760px) { .sg-gioi-thieu ul { grid-template-columns: 1fr; } }

/* ── Bảng: cột ngắn không gãy chữ ── */
.data-table th { white-space: nowrap; }
.data-table td { vertical-align: top; }

/* Thu gọn bảng dài */
.sg-loc { display: block; width: 100%; max-width: 360px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid #dbe3f5; border-radius: 10px; font-size: 15px; color: #212025; background: #fff; }
.sg-loc:focus { outline: 2px solid #004aef; outline-offset: 0; }
.sg-xem-them { display: block; margin: 12px auto 0; padding: 9px 18px; border-radius: 999px; border: 1px solid #004aef; background: #fff; color: #004aef; font-weight: 600; font-size: 14px; cursor: pointer; white-space: normal; max-width: 100%; }
.sg-xem-them:hover { background: #e3ebff; }
.sg-xem-them[hidden], .sg-rong[hidden] { display: none; }
.sg-rong { margin: 10px 0 0; font-size: 14px; color: #616a7a; }
@media print { .sg-xem-them, .sg-loc { display: none !important; } tr[style*="display: none"] { display: table-row !important; } }

/* Khung nhúng: bỏ lề thừa, nội dung sát mép khung */
#app-main { padding: 16px !important; }
@media (max-width: 640px) { #app-main { padding: 10px !important; } }

@media print {
  .sg-tabbar, #upload-section { display: none !important; }
}

/* Tràn ngang ở bề 390: ô lưới mặc định không co nhỏ hơn nội dung */
#app-main .grid > *, #app-main .card { min-width: 0; max-width: 100%; }
#tab-panels .flex.items-center.gap-3, .card .flex.items-center.justify-between { flex-wrap: wrap; gap: 8px; }

/* Đã có kết quả: ẩn ô kéo thả lớn, còn dòng tên tệp với nút Xoá để chọn tệp khác */
body.sg-co-kq #drop-zone { display: none !important; }
body.sg-co-kq #file-info { margin-top: 0 !important; }

/* Không đọc được dòng nào: chỉ hiện lời giải thích, ẩn phần báo cáo rỗng */
.sg-kq-rong { display: none; padding: 20px 22px; margin-bottom: 16px; }
body.sg-kq-0 .sg-kq-rong { display: block; }
body.sg-kq-0 #results-section > :not(#sg-kq-rong) { display: none !important; }
.sg-kq-rong b { display: block; font-size: 18px; color: #212025; margin-bottom: 8px; }
.sg-kq-rong p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #434343; }

/* Bảng do lớp đệm quản lý: không giới hạn chiều cao, vì đã có 20 dòng và nút "Xem thêm" */
.sg-vo { max-height: none !important; }

/* Điện thoại: bảng từ 5 cột trở lên chuyển thành thẻ. Ô đầu (tên mục) chiếm cả hàng, các ô ngắn
   xếp ba cột, tên cột ghi nhỏ phía trên giá trị, để mỗi thẻ chỉ cao khoảng ba dòng chữ. */
@media (max-width: 640px) {
  table.sg-the, table.sg-the tbody { display: block; width: 100%; }
  table.sg-the thead { display: none; }
  table.sg-the tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 6px; border: 1px solid #dbe3f5; border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; background: #fff; }
  table.sg-the tr[style*="display: none"] { display: none !important; }
  table.sg-the td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; max-width: none !important; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
  table.sg-the td::before { content: attr(data-nhan); display: block; font-size: 11.5px; color: #616a7a; font-weight: 600; text-transform: none; }
  table.sg-the td:first-child { grid-column: 1 / -1; font-weight: 600; color: #212025; font-size: 14.5px; }
  table.sg-the td:first-child::before { display: none; }
  table.sg-the td:empty { display: none; }
  table.sg-the .truncate { white-space: normal !important; overflow: visible !important; }
}
.data-table td .rounded-full, .data-table td [class*="px-2"] { white-space: nowrap; }

/* Đề xuất GEO: nhãn mức việc ghi bằng chữ, không chỉ bằng màu */
#geo-recommendations > div h4::before {
  display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 2px;
}
#geo-recommendations > div[class*="border-red"] h4::before { content: "Sửa ngay"; background: #f6cbcb; color: #8f1d1d; }
#geo-recommendations > div[class*="border-yellow"] h4::before { content: "Nên sửa"; background: #fff6d6; color: #7a5f00; }
#geo-recommendations > div[class*="border-blue"] h4::before { content: "Thông tin"; background: #e3ebff; color: #004aef; }
#geo-recommendations > div[class*="border-green"] h4::before { content: "Tốt"; background: #dcfbef; color: #046b47; }

/* Xu hướng: chưa đủ ngày thì chỉ hiện lời giải thích, không hiện biểu đồ trống */
#trend-charts.opacity-50 { display: none; }

/* Việc nên làm tiếp và lời mời dịch vụ */
.sg-viec-tiep { padding: 20px 22px; margin-bottom: 24px; }
.sg-viec-tiep h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #212025; }
.sg-viec-tiep p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #434343; }
.sg-viec-tiep ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.sg-viec-tiep li { margin: 4px 0; font-size: 15px; }
.sg-viec-tiep li a { color: #004aef; text-decoration: underline; }
.sg-moi { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #004aef; color: #fff; border-radius: 14px; padding: 16px 18px; }
.sg-moi p { margin: 0; flex: 1 1 280px; color: #fff; }
.sg-moi-nut { flex: none; background: #fff; color: #004aef; font-weight: 700; border-radius: 999px; padding: 10px 18px; text-decoration: none; }
.sg-moi-nut:hover { background: #e3ebff; }

/* Ghi chú tab tính trên dòng mẫu */
.sg-bao-mau { margin: 0 0 14px; padding: 10px 14px; border: 1px solid #dbe3f5; border-radius: 12px; background: #e3ebff; color: #212025; font-size: 14px; line-height: 1.55; }
.sg-bao-mau[hidden] { display: none; }

/* Mục gấp "Xem đủ…" */
details.sg-xem-du { margin-top: 16px; }
details.sg-xem-du > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #004aef; border-radius: 999px; background: #fff; color: #004aef; font-weight: 600; font-size: 14.5px; }
details.sg-xem-du > summary::-webkit-details-marker { display: none; }
details.sg-xem-du > summary::after { content: "▾"; }
details.sg-xem-du[open] > summary::after { content: "▴"; }
details.sg-xem-du > summary:hover { background: #e3ebff; }
details.sg-xem-du[open] > summary { margin-bottom: 16px; }

/* Thẻ trên điện thoại: ô có chữ dài (URL, IP, ngày giờ, User-Agent) chiếm cả hàng để không gãy vụn */
@media (max-width: 640px) {
  table.sg-the td.sg-dai { grid-column: 1 / -1; overflow-wrap: anywhere; word-break: normal; }
  table.sg-the td.sg-dai * { white-space: normal !important; }
}
.sg-rong { color: #616a7a; }

/* Nút tải PDF không mang màu đỏ trạng thái lỗi */
[onclick*="exportReportPDF"] { background: #004aef !important; border-color: #004aef !important; color: #fff !important; }
[onclick*="exportReportPDF"] * { color: #fff !important; }

/* Dải dính: ô phạm vi ngày + hàng tab cùng dính ở đầu khung khi cuộn (07/11/2026). */
.sg-dinh { position: sticky; top: 0; z-index: 30; background: #f4f7fd; padding: 8px 0 2px; margin: -8px 0 18px; }
.sg-dinh > .card { margin-bottom: 10px !important; padding: 10px 14px !important; }
.sg-dinh .sg-tabbar { position: static; margin-bottom: 0 !important; }
/* Khung nhúng ở cột phải hẹp (~560px): vẫn hiện hàng tab có nút ‹ ›, chỉ đổi sang ô chọn khi dưới 420px. */
@media (min-width: 421px) and (max-width: 640px) {
  .sg-tabbar .sg-tabs, .sg-tabbar .sg-mui { display: flex !important; }
  .sg-tabbar .sg-mui[hidden] { display: none !important; }
  .sg-chon { display: none !important; }
}
/* Dòng phạm vi ngày gọn một hàng. */
.sg-dinh > .card .flex { gap: 8px !important; row-gap: 6px !important; }
.sg-dinh > .card input[type="date"] { padding: 4px 8px !important; font-size: 13px !important; }
.sg-dinh > .card .flex-grow { display: none; }