/* Giao diện theo mockup: thanh bên xanh đậm, nội dung nền sáng, thẻ bo góc, nhãn màu nhạt. */
:root {
  --nen: #f3f6fb; --the: #ffffff; --chu: #1f2a37; --chu-phu: #5b6b7f; --vien: #e3e9f2;
  --ben: #0d2a4d; --ben-2: #0a2140; --ben-chu: #d8e3f3; --chinh: #1d5bd8; --chinh-dam: #1848ad; --chinh-nhat: #e8f0ff;
  --tieu-de-bang: #eef3fb; --bo: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: var(--chu); background: var(--nen); }
a { color: var(--chinh); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }

/* ---------- bố cục ---------- */
.khung { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.ben { background: linear-gradient(180deg, var(--ben), var(--ben-2)); color: var(--ben-chu); display: flex; flex-direction: column; }
.logo { display: flex; gap: 10px; align-items: center; padding: 18px 18px 14px; color: #fff; }
.logo b { display: block; font-size: 18px; letter-spacing: .5px; }
.logo small { font-size: 12px; opacity: .8; }
.menu { list-style: none; margin: 8px 0; padding: 0 10px; }
.menu a { display: flex; gap: 12px; align-items: center; padding: 11px 12px; color: var(--ben-chu); border-radius: 8px; margin-bottom: 4px; }
.menu a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.menu a.dang-chon { background: var(--chinh); color: #fff; font-weight: 600; }
.menu svg { width: 18px; height: 18px; flex: none; }
.ben-cuoi { margin-top: auto; padding: 14px 18px; font-size: 12px; opacity: .7; }

.tren { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--the); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 5; }
.tren .tieu-de-trang { flex: 1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tren .tieu-de-trang h1 { font-size: 20px; }
.tren .tieu-de-trang span { color: var(--chu-phu); }
.chuong { position: relative; cursor: pointer; }
.chuong svg { width: 22px; height: 22px; color: var(--chu-phu); }
.chuong .so { position: absolute; top: -6px; right: -8px; background: #e02424; color: #fff; font-size: 11px; border-radius: 10px; padding: 0 5px; }
.hop-tb { display: none; position: absolute; right: 0; top: 30px; width: 340px; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: 0 8px 24px rgba(15,40,80,.12); padding: 8px; }
.chuong:focus-within .hop-tb, .chuong:hover .hop-tb { display: block; }
.hop-tb a { display: block; padding: 8px; border-radius: 6px; color: var(--chu); font-size: 13px; }
.hop-tb a.moi { font-weight: 600; }
.nguoi { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #3b5b86; color: #fff; display: grid; place-items: center; font-weight: 600; }
.nguoi small { display: block; color: var(--chu-phu); }

.noi-dung { padding: 20px 24px 8px; }
.chan { display: flex; justify-content: space-between; padding: 14px 24px; color: var(--chu-phu); font-size: 12px; }

/* ---------- thành phần ---------- */
.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; margin-bottom: 16px; }
.the-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.the-dau h2 { margin: 0; }
.luoi { display: grid; gap: 16px; }
.luoi-2 { grid-template-columns: 1fr 1fr; } .luoi-3 { grid-template-columns: repeat(3, 1fr); }
.luoi-4 { grid-template-columns: repeat(4, 1fr); } .luoi-6 { grid-template-columns: repeat(6, 1fr); }
.chinh-phu { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .chinh-phu { grid-template-columns: 1fr; } .luoi-6 { grid-template-columns: repeat(3, 1fr); } }

.loc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.loc label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.o-nhap, select, input[type=text], input[type=url], input[type=number], input[type=date], input[type=search], input[type=password], textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cfd8e6; border-radius: 8px; font: inherit; background: #fff; color: inherit; }
textarea { min-height: 80px; }
.hang-tim { display: flex; gap: 10px; margin-bottom: 14px; }
.hang-tim input { flex: 1; padding: 10px 12px; }
.nut { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--chinh); background: #fff; color: var(--chinh); cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; }
.nut:hover { background: var(--chinh-nhat); text-decoration: none; }
.nut-chinh { background: var(--chinh); color: #fff; }
.nut-chinh:hover { background: var(--chinh-dam); }
.nut-do { border-color: #d92d20; color: #d92d20; }
.nut-nho { padding: 4px 10px; font-size: 13px; }
.nut:disabled { opacity: .5; cursor: not-allowed; }

table.bang { width: 100%; border-collapse: collapse; }
.bang th { background: var(--tieu-de-bang); text-align: left; font-weight: 600; padding: 9px 10px; font-size: 13px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang td { padding: 9px 10px; border-bottom: 1px solid #edf1f7; vertical-align: top; }
.bang tr:hover td { background: #fafcff; }
.bang tr.chon td { background: #eef4ff; }
.cuon-ngang { overflow-x: auto; }
.nho { font-size: 12px; color: var(--chu-phu); }
.dam { font-weight: 600; }

.nhan { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nhan-xanh { background: #def7e7; color: #11703a; } .nhan-do { background: #fde4e1; color: #b42318; }
.nhan-vang { background: #fff1d6; color: #9a5b00; } .nhan-cam { background: #ffe7d1; color: #b54708; }
.nhan-lam { background: #e3edff; color: #1d4ed8; } .nhan-tim { background: #efe5ff; color: #6b21a8; }
.nhan-tim-nhat { background: #f4edff; color: #7e4ab8; } .nhan-xam { background: #eceff3; color: #475467; }

.chi-so { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 14px; }
.chi-so .bieu-tuong { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.chi-so b { font-size: 22px; display: block; }
.chi-so span { color: var(--chu-phu); font-size: 13px; }

.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--vien); margin-bottom: 16px; flex-wrap: wrap; }
.tab a { padding: 10px 16px; color: var(--chu-phu); border-bottom: 3px solid transparent; font-weight: 600; }
.tab a.dang-chon { color: var(--chinh); border-color: var(--chinh); }
.tab a:hover { text-decoration: none; color: var(--chinh); }

.thong-tin { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; }
.thong-tin dt { color: var(--chu-phu); } .thong-tin dd { margin: 0; }
.day-thong-tin { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--vien); margin-top: 12px; }
.day-thong-tin div small { display: block; color: var(--chu-phu); margin-bottom: 4px; }

.phan-trang { display: flex; gap: 6px; justify-content: center; margin-top: 14px; align-items: center; }
.phan-trang a, .phan-trang span { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--vien); border-radius: 8px; padding: 0 8px; background: #fff; }
.phan-trang .dang-chon { background: var(--chinh); color: #fff; border-color: var(--chinh); }

.thong-diep { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.thong-diep.success { background: #def7e7; color: #11703a; } .thong-diep.error { background: #fde4e1; color: #b42318; }
.thong-diep.warning { background: #fff1d6; color: #9a5b00; } .thong-diep.info { background: #e3edff; color: #1d4ed8; }
.ghi-chu { background: #f7f9fc; border: 1px dashed #cfd8e6; border-radius: 8px; padding: 10px 14px; color: var(--chu-phu); font-size: 13px; }
.canh-bao { background: #fff8e6; border: 1px solid #ffe2a8; border-radius: 8px; padding: 10px 14px; }

/* dòng thời gian */
.dong-tg { display: flex; align-items: flex-start; margin: 10px 0 4px; overflow-x: auto; }
.moc { flex: 1; min-width: 150px; text-align: center; position: relative; padding-top: 22px; }
.moc::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; border-top: 2px solid #b8c6dc; }
.moc:first-child::before { left: 50%; } .moc:last-child::before { right: 50%; }
.moc i { position: absolute; top: 0; left: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: #9fb0c8; border: 3px solid #fff; box-shadow: 0 0 0 1px #9fb0c8; }
.moc.xanh i { background: #16a34a; box-shadow: 0 0 0 1px #16a34a; } .moc.lam i { background: var(--chinh); box-shadow: 0 0 0 1px var(--chinh); }
.moc.do i { background: #d92d20; box-shadow: 0 0 0 1px #d92d20; }
.moc b { display: block; } .moc span { color: var(--chu-phu); font-size: 13px; }

/* so sánh điều khoản */
.so-sanh { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 8px; align-items: stretch; }
.so-sanh .cot { border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.so-sanh .cot > div:first-child { padding: 10px 14px; font-weight: 600; }
.so-sanh .cu > div:first-child { background: #eef4ff; } .so-sanh .moi > div:first-child { background: #fff0ee; color: #b42318; }
.so-sanh .than { padding: 12px 14px; white-space: pre-wrap; background: #fffaf0; line-height: 1.6; }
.so-sanh ins { background: #ffe1dc; color: #b42318; text-decoration: none; font-weight: 600; }
.so-sanh del { color: #98a2b3; }
.mui-ten { display: grid; place-items: center; color: var(--chinh); font-size: 22px; }

/* cây điều khoản */
.cay { max-height: 520px; overflow: auto; font-size: 13px; }
.cay details { margin-left: 10px; } .cay summary { cursor: pointer; padding: 3px 0; }
.cay a { display: block; padding: 3px 6px; border-radius: 6px; color: var(--chu); }
.cay a.dang-chon { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }

/* hộp thoại */
.phu-mo { position: fixed; inset: 0; background: rgba(15,30,60,.45); display: none; z-index: 20; }
.phu-mo.hien { display: grid; place-items: center; }
.hop-thoai { background: #fff; border-radius: 14px; width: min(1180px, 95vw); max-height: 92vh; overflow: auto; padding: 18px 22px; }
.hop-thoai-dau { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* văn bản hợp nhất */
.vb-hop-nhat { line-height: 1.7; }
.vb-hop-nhat .chuong-hn { font-weight: 700; margin-top: 14px; text-transform: uppercase; }
.vb-hop-nhat .dieu-hn { font-weight: 700; margin-top: 10px; }
.vb-hop-nhat .khoan-hn { margin-left: 14px; } .vb-hop-nhat .diem-hn { margin-left: 28px; }
.vb-hop-nhat .nhan-gc { background: #e3edff; color: #1d4ed8; border-radius: 4px; padding: 0 5px; font-size: 12px; cursor: pointer; border: 0; font-weight: 600; }
.vb-hop-nhat .da-sua { background: #fffaf0; }

.dang-nhap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--ben), #1d4f8f); }
.dang-nhap .the { width: 380px; padding: 28px; }
#so-do { height: 380px; border: 1px solid var(--vien); border-radius: var(--bo); background: #fbfcfe; }
.chu-giai { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.chu-giai li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.chu-giai i { width: 34px; border-top: 2px solid; }
pre.json { background: #f7f9fc; border: 1px solid var(--vien); border-radius: 8px; padding: 10px; font-size: 12px; overflow: auto; max-height: 260px; }

/* Nhật ký: JSON xuống dòng, không tràn khung */
pre.json { white-space: pre-wrap; word-break: break-word; overflow-x: hidden; }

/* ---------- Giai đoạn 6: ô chat hỏi đáp (góc Form 1) ---------- */
.cb-mo { position: fixed; right: 24px; bottom: 24px; z-index: 15; display: inline-flex; gap: 8px; align-items: center;
  padding: 12px 18px; border: 0; border-radius: 999px; background: var(--chinh); color: #fff; font: inherit; font-weight: 600;
  box-shadow: 0 8px 24px rgba(29,91,216,.35); cursor: pointer; }
.cb-mo:hover { background: var(--chinh-dam); }
.cb-khung { position: fixed; right: 24px; bottom: 84px; z-index: 16; width: min(440px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--vien); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,40,80,.22); overflow: hidden; }
.cb-khung[hidden] { display: none; }
.cb-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, var(--ben), var(--ben-2)); color: #fff; }
.cb-dau small { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.cb-dong { background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.cb-tuy-chon { display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--vien); background: var(--tieu-de-bang); }
.cb-tuy-chon label { flex: 1; font-size: 12px; color: var(--chu-phu); display: flex; flex-direction: column; gap: 3px; }
.cb-tuy-chon select, .cb-tuy-chon input { padding: 5px 8px; font-size: 13px; }
.cb-tin { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--nen); }
.cb-nguoi { align-self: flex-end; max-width: 85%; background: var(--chinh); color: #fff; padding: 8px 12px; border-radius: 12px 12px 2px 12px; white-space: pre-wrap; }
.cb-may { align-self: flex-start; max-width: 96%; background: #fff; border: 1px solid var(--vien); padding: 10px 12px; border-radius: 12px 12px 12px 2px; }
.cb-may p { margin: 0 0 8px; }
.cb-khong { border-color: #f5c16c; background: #fffaf0; }
.cb-chu { white-space: pre-wrap; line-height: 1.55; }
.cb-so { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 1px; border-radius: 10px;
  background: var(--chinh-nhat); color: var(--chinh); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.cb-so:hover { background: var(--chinh); color: #fff; text-decoration: none; }
.cb-trich { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--vien); display: grid; gap: 8px; font-size: 13px; }
.cb-trich li { display: flex; gap: 8px; align-items: flex-start; }
.cb-goi-y { display: grid; gap: 6px; }
.cb-goi-y button { text-align: left; background: var(--chinh-nhat); border: 1px solid #cfdcf7; color: var(--chinh-dam); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.cb-dg { margin-top: 8px; font-size: 12px; color: var(--chu-phu); display: flex; gap: 6px; align-items: center; }
.cb-dg button { border: 1px solid var(--vien); background: #fff; border-radius: 6px; padding: 2px 8px; font: inherit; cursor: pointer; }
.cb-cho { color: var(--chu-phu); font-style: italic; }
.cb-nhap { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--vien); }
.cb-nhap textarea { flex: 1; resize: none; }
.cb-chan { padding: 6px 14px 10px; font-size: 11.5px; color: var(--chu-phu); }

/* Màn hình 1366–1536px: không để bảng rộng đẩy cả trang tràn ngang */
.khung > main, .chinh-phu > *, .luoi > * { min-width: 0; }
.the:has(> table.bang), .the:has(> form > table.bang) { overflow-x: auto; }