/* QTDND S&G – giao diện theo bộ 17 màn hình V2 đã duyệt */
:root{--navy:#0F2A4A;--navy2:#1B426F;--xanh:#1F5FC9;--nen:#F3F5F8;--vien:#E1E6EE;--chu:#13233A;--mo:#566579}
*{box-sizing:border-box}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,'Segoe UI',Roboto,Arial,sans-serif;font-size:13.5px;background:var(--nen);color:var(--chu);-webkit-font-smoothing:antialiased}
a{color:var(--xanh);text-decoration:none}a:hover{color:#123F8C}
.khung{display:flex;min-height:100vh}
.menu{width:256px;flex-shrink:0;background:var(--navy);display:flex;flex-direction:column;padding:20px 14px;gap:18px}
.menu .logo{display:flex;align-items:center;gap:10px;padding:0 6px 12px;border-bottom:1px solid #23466F}
.menu .logo b{color:#fff;font-size:16px;letter-spacing:.4px;display:block}.menu .logo small{color:#A9BCD6;font-size:10.5px}
.menu .nhom{display:flex;align-items:center;gap:10px;padding:8px 12px 2px;color:#fff;font-size:14px;font-weight:600}
.menu a{display:block;padding:7px 10px 7px 34px;border-radius:7px;color:#C9D6E8;font-size:12.5px;line-height:1.35}
.menu a:hover{background:var(--navy2);color:#fff}.menu a.chon{background:#2B6BD6;color:#fff;font-weight:600}
.menu .chan{margin-top:auto;border:1px solid #23466F;border-radius:8px;padding:10px 12px;color:#A9BCD6;font-size:11.5px;line-height:1.6}
.noi-dung{flex:1;min-width:0;display:flex;flex-direction:column}
.dau{height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#fff;border-bottom:1px solid var(--vien);gap:12px}
.dau h1{margin:0;font-size:13px;font-weight:600;color:var(--mo)}.dau h1 b{color:var(--chu)}
.dau .phai{display:flex;gap:12px;align-items:center;font-size:12.5px}
.than{padding:20px 28px 24px;display:flex;flex-direction:column;gap:14px}
.tieu-de-lon{margin:0;font-size:26px;font-weight:700;color:var(--navy)}.mo-ta{margin:-8px 0 0;color:var(--mo)}
select,input,button,textarea{font:inherit}
select,input{height:34px;border:1px solid #C9D3E1;border-radius:7px;padding:0 10px;background:#fff;color:var(--chu)}
button,.nut{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:8px;font-weight:600;cursor:pointer;border:1px solid var(--xanh);background:var(--xanh);color:#fff;white-space:nowrap}
.nut.phu{background:#fff;color:#1B3A63;border-color:#C9D3E1}
/* thẻ, bảng (dùng chung cho loi/giao_dien.py và các template) */
.card,.the{background:#fff;border:1px solid var(--vien);border-radius:10px}
section.card{padding:14px 16px;display:flex;flex-direction:column;gap:10px}.the{padding:14px 16px}
.the h2,.ttl2{margin:0;font-size:14px;font-weight:700;color:var(--navy)}
.ttl{margin:0;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:var(--navy);text-transform:uppercase}
table.t,.the table{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th,.the th{background:#F1F4F9;text-align:left;font-weight:600;color:#3E5068;padding:7px 8px;border-bottom:1px solid var(--vien);white-space:nowrap}
table.t td,.the td{padding:6px 8px;border-bottom:1px solid #EDF0F4;vertical-align:top}
table.t tr.tot td{font-weight:700;background:#F8FAFC}
.n,td.s,th.s{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.c{text-align:center}
.chip,.nhan{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.ok{background:#E3F3EA;color:#146239}.warn{background:#FFF0DB;color:#86470A}.bad{background:#FCE6E3;color:#9E2717}
.info{background:#E6EEFC;color:#1A4CA8}.na{background:#ECEFF3;color:#46536A}
.src,.nguon{font-size:11px;color:#5F6F85}.muted{color:var(--mo)}
ul.b{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55}ul.b li{margin-bottom:3px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--vien);overflow-x:auto}
.tab{padding:10px 16px;font-size:13px;color:#3E5068;border-bottom:3px solid transparent;white-space:nowrap}
.tabon{color:var(--xanh);font-weight:700;border-bottom-color:var(--xanh)}
.dai-ky{padding:10px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.hang{display:flex;gap:16px;align-items:center}.gian{flex-grow:1;min-width:0}.nho{font-size:12px;font-weight:600;color:#3E5068}
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--vien);border-radius:10px;padding:12px 14px}.kpi .so{font-size:24px;font-weight:700;color:var(--navy)}
.tb{padding:10px 14px;border-radius:8px}.tb.success{background:#E3F3EA}.tb.error{background:#FCE6E3}
.dang-nhap{max-width:380px;margin:12vh auto;background:#fff;border:1px solid var(--vien);border-radius:12px;padding:28px}
.dang-nhap input{width:100%;margin:4px 0 12px}.dang-nhap button{width:100%;justify-content:center}
table.co-dinh{table-layout:fixed}
@media (max-width:1100px){.luoi-dong{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:760px){.khung{flex-direction:column}.menu{width:100%}.luoi-dong{grid-template-columns:1fr!important}.hang{flex-direction:column;align-items:stretch}.than{padding:16px}.card,.the{overflow-x:auto}}
/* Lượt 7 */
.dau-trang{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.dau-trang .mo-ta{margin:0}
.hanh-dong{display:flex;gap:10px;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:#3E5068}
.inp{height:34px;border:1px solid #C9D3E1;border-radius:8px;padding:0 10px;background:#fff;color:#0F2A4A;font-size:13px}
textarea.inp{height:auto;padding:6px 10px}
.loc{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.muc-luc a{display:block;padding:5px 8px;border-radius:6px;font-size:12px;color:#1B3A63;text-decoration:none}.muc-luc a:hover{background:#EEF3FC}
.bc h3{font-size:13.5px;margin:14px 0 6px;color:#0F2A4A}.bc p{font-size:12.5px;line-height:1.6;margin:4px 0}
form.dong{display:inline}
section.card{min-width:0;overflow-x:auto}
/* Bản 1.2: chữ trong ô nhập không in đậm theo nhãn */
.fld .inp,.fld textarea,.fld select{font-weight:400}
/* ============================ Bản 2.0 ============================ */
.tb.warning{background:#FFF0DB}.tb.info{background:#E6EEFC}
.nut.nho,button.nho{height:28px;padding:0 10px;font-size:12px}
.nut.nguy,button.nguy{background:#B8321F;border-color:#B8321F;color:#fff}
.nut.rong{width:100%;justify-content:center}
.hang-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center;grid-column:1/-1}
.form-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;align-items:end}
.form-luoi .rong,.fld.rong{grid-column:1/-1}
fieldset.fld{border:1px solid var(--vien);border-radius:8px;padding:8px 10px;margin:0}
.hang-chon{display:flex;gap:14px;flex-wrap:wrap}.chon{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:500}
.chon input,.fld input[type=checkbox]{height:auto}
.loi-o{color:#9E2717;font-size:11.5px;font-weight:500}
.dong-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.inp.nho{width:110px}
/* tải file: vùng kéo thả */
.vung-tai{display:flex;flex-direction:column;gap:10px}
.o-tha{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px dashed #B9C7DC;border-radius:10px;padding:22px;text-align:center;cursor:pointer;color:#1B3A63;background:#FAFCFF}
.o-tha.dang-tha{border-color:var(--xanh);background:#EEF4FF}
.o-tha input[type=file]{height:auto;border:0;max-width:100%}
/* đầu trang */
.nut-menu{display:none;background:none;border:0;color:inherit;font-size:20px;height:auto;padding:4px 8px}
.chuong{position:relative;font-size:17px;line-height:1}.so-tb{position:absolute;top:-6px;right:-10px;background:#B8321F;color:#fff;border-radius:999px;font-size:10px;padding:1px 5px;font-weight:700}
.tai-khoan{position:relative}.tai-khoan summary{cursor:pointer;list-style:none;color:var(--mo)}.tai-khoan summary::-webkit-details-marker{display:none}
.tk-menu{position:absolute;right:0;top:26px;background:#fff;border:1px solid var(--vien);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;z-index:20;min-width:160px;box-shadow:0 6px 18px rgba(15,42,74,.12)}
.chon-ky{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.o-ky{width:96px}.goi-y-ky{max-width:280px}
.dai-ho-tro{background:#FFF0DB;color:#86470A;padding:8px 28px;font-size:12.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #F3D6A8}
.menu .nhom-sh{border-top:1px solid #23466F;padding-top:10px}
/* thẻ: thu gọn, phóng to (GN-04) */
.nut-the{display:inline-flex;gap:4px;margin-left:auto;margin-right:8px}
.nut-the button{height:24px;width:26px;padding:0;justify-content:center;background:#fff;color:#3E5068;border:1px solid #D5DDE8;border-radius:6px;font-size:13px;font-weight:600}
section.card.the-gon>*:not(.dau-the){display:none!important}
section.card.the-to{position:fixed;inset:12px;z-index:50;overflow:auto;box-shadow:0 10px 40px rgba(15,42,74,.35)}
body.co-the-to::after{content:"";position:fixed;inset:0;background:rgba(15,42,74,.35);z-index:40}
.dieu-khien-the{display:flex;gap:8px;justify-content:flex-end;margin-bottom:-6px}
.trang-dang-nhap .dang-nhap h1{margin-top:0;font-size:20px}
/* điện thoại, máy tính bảng (GN-03) */
@media (max-width:900px){
  .nut-menu{display:inline-flex}
  .menu{position:fixed;inset:0 auto 0 0;width:280px;max-width:86vw;z-index:60;transform:translateX(-105%);transition:transform .2s;overflow-y:auto}
  body.menu-mo .menu{transform:none;box-shadow:0 0 0 100vmax rgba(15,42,74,.4)}
  .khung{flex-direction:row}.menu .dong-menu{display:inline-flex;margin-left:auto;color:#fff}
  .dau{height:auto;min-height:52px;padding:8px 14px;flex-wrap:wrap}.an-dt{display:none}
  .than{padding:14px 12px}.dai-ho-tro{padding:8px 14px}
  .kpi-row,.luoi-dong{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  section.card{padding:12px!important}
  table.t td:first-child,table.t th:first-child{position:sticky;left:0;background:#fff;z-index:1}
  table.t th:first-child{background:#F1F4F9}
}
@media (max-width:520px){.kpi-row,.luoi-dong{grid-template-columns:1fr!important}.form-luoi{grid-template-columns:1fr}.chon-ky .goi-y-ky{flex-basis:100%}}
@media print{.menu,.dau,.nut-the,.dieu-khien-the,.dai-ho-tro{display:none!important}.khung{display:block}}
.tro-giup{display:inline-flex;width:22px;height:22px;border-radius:11px;border:1px solid #C9D3E1;align-items:center;justify-content:center;font-weight:700;color:#1B3A63}