:root{
  color-scheme:light;
  --primary-color:#2A53A2;      /* Xanh chủ đạo */
  --primary-dark:#16336B;       /* Xanh đậm: tiêu đề & thanh menu (chuẩn hoá từ mã cô cung cấp) */
  --accent-color:#C62828;       /* Đỏ điểm nhấn */
  --background-color:#F3F8FC;   /* Xanh rất nhạt cho nền */
  --card-color:#FFFFFF;         /* Nền trắng */
  --text-color:#1F2937;         /* Chữ chính */
  --muted-color:#5F6B76;        /* Chữ phụ */
  --border-color:#D9E3EC;       /* Đường viền */
  --pub:#E6F0E2; --pub-t:#2f6b2c; --int:#FCE9DD; --int-t:#9c3f12; --sec:#F9D7DC; --sec-t:#9b1c2e;
  --radius:10px; --shadow:0 1px 3px rgba(22,51,107,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,"Segoe UI",sans-serif;background:var(--background-color);color:var(--text-color);font-size:14px;line-height:1.5}
a{color:var(--primary-color);text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* ===== Header: brand bar (light) + nav bar (dark blue) ===== */
.brandbar{background:var(--card-color);border-bottom:1px solid var(--border-color)}
.brandrow{display:flex;align-items:center;gap:14px;min-height:88px;position:relative}
.brand{display:flex;align-items:center;gap:14px;color:var(--text-color)}
.logo-img{height:72px;width:auto;max-width:76px;object-fit:contain;display:block;flex:0 0 auto}
.brand .bt b{display:block;font-size:16px;color:var(--primary-dark);letter-spacing:.3px;line-height:1.2}
.brand .bt span{display:block;font-size:12.5px;color:var(--muted-color);margin-top:2px}
.burger{display:none;background:none;border:1px solid var(--border-color);color:var(--primary-dark);font-size:20px;border-radius:8px;padding:4px 11px;cursor:pointer;margin-left:auto}
.navbar{background:var(--primary-dark);border-bottom:3px solid var(--accent-color)}
.nav{display:flex;gap:2px}
.nav a{color:#e4ecf7;padding:12px 16px;font-weight:bold;font-size:13.5px;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.nav a.active{color:#fff;background:rgba(255,255,255,.10);box-shadow:inset 0 -3px 0 var(--accent-color)}

/* ===== Breadcrumb ===== */
.crumb{font-size:12.5px;color:var(--muted-color);padding:12px 0 0}
.crumb a{color:var(--primary-color)} .crumb b{color:var(--text-color)}

/* ===== Home ===== */
.hero{background:linear-gradient(180deg,#eaf2fb,var(--background-color));border-bottom:1px solid var(--border-color)}
.hero .container{padding:34px 18px 30px;text-align:center}
.hero h1{font-size:24px;color:var(--primary-dark);margin:6px 0 4px;letter-spacing:.4px}
.hero .sysname{font-size:14px;color:var(--muted-color);margin-bottom:18px}
.searchbig{display:flex;gap:8px;max-width:680px;margin:0 auto;flex-wrap:wrap}
.searchbig input{flex:1;min-width:200px;padding:12px 14px;border:1px solid var(--border-color);border-radius:10px;font-size:15px}
.searchbig select{padding:12px;border:1px solid var(--border-color);border-radius:10px;background:#fff}
.btn{background:var(--primary-color);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-weight:bold;font-size:14px;cursor:pointer;display:inline-block}
.btn:hover{background:var(--primary-dark)}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.bigcard{background:var(--card-color);border:1px solid var(--border-color);border-top:3px solid var(--primary-color);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.bigcard.qppl{border-top-color:var(--accent-color)}
.bigcard h3{margin:0 0 6px;color:var(--primary-dark);font-size:17px}
.bigcard p{color:var(--muted-color);margin:0 0 14px;font-size:13px;flex:1}
.bignum{font-size:34px;font-weight:bold;color:var(--primary-color);line-height:1}
.bigcard.qppl .bignum{color:var(--accent-color)}
.bignum small{font-size:13px;font-weight:normal;color:var(--muted-color)}
.sec-title{font-size:15px;color:var(--primary-dark);font-weight:bold;margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--border-color)}
.updated{color:var(--muted-color);font-size:12.5px;margin:10px 0 30px;text-align:center}

/* ===== List pages ===== */
.page{padding:16px 0 40px}
.page h2{font-size:20px;color:var(--primary-dark);margin:8px 0 2px}
.toolbar{background:var(--card-color);border:1px solid var(--border-color);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin:14px 0}
.toolbar .srow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.toolbar input[type=text]{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--border-color);border-radius:8px;font-size:14px}
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.filters select{width:100%;padding:8px 9px;border:1px solid var(--border-color);border-radius:8px;background:#fff;font-size:13px}
.barrow{display:flex;align-items:center;gap:12px;margin:6px 2px 14px;flex-wrap:wrap}
.count{font-size:13px;color:var(--muted-color)} .count b{color:var(--primary-color)}
.clear{margin-left:auto;background:#fff;border:1px solid var(--border-color);color:var(--primary-color);border-radius:8px;padding:7px 14px;font-weight:bold;cursor:pointer;font-size:13px}
.clear:hover{background:#eef4fb}

/* ===== Cards ===== */
.card{background:var(--card-color);border:1px solid var(--border-color);border-radius:var(--radius);padding:13px 15px;margin-bottom:9px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow);transition:border-color .12s ease, transform .12s ease}
.card:hover{border-color:var(--primary-color);transform:translateY(-1px)}
.meta{flex:1;min-width:0}
.lv{font-size:11.5px;color:var(--primary-color);font-weight:bold;margin-bottom:3px}
.ty{font-weight:bold;color:#111827;margin-bottom:6px;line-height:1.35}
.row2{font-size:12px;color:var(--muted-color);display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.row2 b{color:#374151;font-weight:normal}
.badge{font-size:11px;padding:2px 9px;border-radius:20px;white-space:nowrap;font-weight:bold}
.b-loai{background:#e8eefb;color:#26417e}
.pub{background:var(--pub);color:var(--pub-t)} .int{background:var(--int);color:var(--int-t)} .sec{background:var(--sec);color:var(--sec-t)}
.st{background:#e8eefb;color:var(--primary-color)}
.open{white-space:nowrap;background:var(--primary-color);color:#fff;padding:8px 13px;border-radius:8px;font-size:12.5px;font-weight:bold;align-self:center}
.open:hover{background:var(--primary-dark)}
.empty{text-align:center;color:#9ca3af;padding:40px;background:var(--card-color);border:1px dashed var(--border-color);border-radius:var(--radius)}
.note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px 12px;border-radius:8px;font-size:12.5px;margin:10px 0}
.foot{border-top:1px solid var(--border-color);background:#fff;color:var(--muted-color);font-size:12px;padding:16px 0;text-align:center}

/* ===== Responsive ===== */
@media(max-width:760px){
  .brandrow{min-height:64px;gap:10px;flex-wrap:wrap}
  .logo-img{height:48px;max-width:52px}
  .brand .bt b{font-size:13.5px}
  .brand .bt span{font-size:11.5px}
  .burger{display:block}
  .nav{display:none;flex-direction:column;gap:0;padding:6px;background:var(--primary-dark)}
  .nav.open{display:flex}
  .nav a{border-radius:6px}
  .cards2{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
}

/* ===== Two-column layout: Văn bản nội bộ ===== */
.filters4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pickcat{display:none;width:100%;margin:4px 0 10px;background:#fff;border:1px solid var(--border-color);color:var(--primary-dark);font-weight:bold;padding:11px 14px;border-radius:8px;cursor:pointer;text-align:left}
.layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.side{background:var(--card-color);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:12px}
.side-h{background:#eef4fb;color:var(--primary-dark);font-weight:bold;font-size:12.5px;letter-spacing:.4px;padding:12px 14px;border-bottom:1px solid var(--border-color)}
.cats{list-style:none;margin:0;padding:6px}
.cats li{list-style:none}
.grp-h,.cat-item{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;text-align:left;
  padding:10px 10px;border-radius:8px;border-left:3px solid transparent;color:var(--text-color);font-size:13.5px;line-height:1.3}
.grp-h:hover,.cat-item:hover{background:#f2f7fc}
.grp-h .rom{color:var(--muted-color);font-size:12px;font-weight:normal;flex:0 0 auto;min-width:20px}
.grp-h .nm,.cat-item .nm{flex:1;font-weight:bold;white-space:normal;word-break:break-word}
.cat-item .nm{font-weight:normal}
.grp-h .cnt,.cat-item .cnt{flex:0 0 auto;background:#eef2f8;color:var(--muted-color);font-size:11px;border-radius:20px;padding:1px 8px;font-weight:bold}
.grp-h .arw{flex:0 0 auto;color:var(--muted-color);font-size:11px}
.sub{list-style:none;margin:2px 0 4px;padding:0 0 0 6px}
.sub .cat-item{padding-left:22px;font-size:13px}
.grp-h.active,.cat-item.active{background:#e8f0fb;border-left-color:var(--primary-dark)}
.cat-item.active{border-left-color:var(--accent-color)}
.grp-h.active .cnt,.cat-item.active .cnt{background:var(--primary-color);color:#fff}
.content{min-width:0}
.ctitle{font-size:15px;font-weight:bold;color:var(--primary-dark);background:var(--card-color);border:1px solid var(--border-color);border-left:4px solid var(--primary-color);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.kw{font-size:13px;color:var(--muted-color)}
.content .barrow{margin-top:12px}

@media(max-width:760px){
  .filters4{grid-template-columns:1fr 1fr}
  .pickcat{display:block}
  .layout{grid-template-columns:1fr}
  .side{display:none;position:static;margin-bottom:12px}
  .side.open{display:block}
}

/* ===== QPPL page ===== */
.lead{color:var(--muted-color);font-size:13.5px;margin:4px 0 12px;max-width:760px}
.searchbox{background:var(--card-color);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.searchbox .srow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.searchbox .srow input{flex:1;min-width:220px;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-size:14px}
.searchbox .filters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.searchbox .filters select{width:100%;padding:8px 9px;border:1px solid var(--border-color);border-radius:8px;background:#fff;font-size:13px}
.advrow{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.linklike{background:none;border:none;color:var(--primary-color);font-weight:bold;cursor:pointer;font-size:13px;padding:4px 0}
.linklike:hover{text-decoration:underline}
.adv{margin-top:10px;border-top:1px dashed var(--border-color);padding-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.adv .fld label{display:block;font-size:12px;color:var(--muted-color);margin-bottom:4px;font-weight:bold}
.adv .fld input{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:8px;background:#f7f9fc;font-size:13px}
.adv .hint{font-size:11px;color:#9aa5b1;font-style:italic;margin-top:3px}
.quickbar{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.qbtn{background:#fff;border:1px solid var(--border-color);color:var(--text-color);border-radius:20px;padding:7px 15px;font-size:13px;font-weight:bold;cursor:pointer}
.qbtn:hover{background:#eef4fb}
.qbtn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
.resultinfo{font-size:13px;color:var(--text-color);margin:6px 2px 12px}
.resultinfo b{color:var(--primary-color)} .resultinfo .cond{color:var(--muted-color);font-size:12.5px}
.qcard{background:var(--card-color);border:1px solid var(--border-color);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;display:flex;gap:14px;box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.qcard:hover{border-color:var(--primary-color);transform:translateY(-1px)}
.qmeta{flex:1;min-width:0}
.qtop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.qso{font-size:12px;color:var(--muted-color);font-weight:bold}
.qty{font-size:15.5px;font-weight:bold;color:#111827;line-height:1.4;margin-bottom:7px}
.qactions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:center;flex:0 0 auto}
.hl{font-size:11px;padding:2px 10px;border-radius:20px;font-weight:bold;white-space:nowrap}
.hl-active{background:#E6F0E2;color:#2f6b2c}
.hl-pending{background:#E1EDFB;color:#1c4f9c}
.hl-expired{background:#EAEDF0;color:#5f6b76}
.hl-replaced{background:#F9D7DC;color:#9b1c2e}
.hl-amended{background:#FCE9D6;color:#9a5b12}
.hl-unknown{background:#F1F3F5;color:#8a94a0}
.qdetail{margin-top:10px}
.dt{width:100%;border-collapse:collapse;font-size:12.5px}
.dt th{text-align:left;color:var(--muted-color);font-weight:bold;padding:5px 10px 5px 0;vertical-align:top;white-space:nowrap;width:160px}
.dt td{padding:5px 0;color:var(--text-color);border-bottom:1px solid #eef2f6}
.dt .na{color:#9aa5b1}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.persel{font-size:13px;color:var(--muted-color)}
.persel select{padding:6px 8px;border:1px solid var(--border-color);border-radius:8px}
.pgnav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pg{background:#fff;border:1px solid var(--border-color);color:var(--text-color);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px;font-weight:bold}
.pg:hover:not(:disabled){background:#eef4fb} .pg:disabled{opacity:.45;cursor:default}
.pg.cur{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
.dots{color:var(--muted-color);padding:0 4px}

@media(max-width:760px){
  .searchbox{display:none} .searchbox.open{display:block}
  .searchbox .filters{grid-template-columns:1fr 1fr}
  .adv{grid-template-columns:1fr}
  .qcard{flex-direction:column} .qactions{flex-direction:row;align-items:stretch;justify-content:flex-start}
  .qactions .open,.qactions .linklike{flex:1;text-align:center}
}
.qactions .src2{background:#fff;color:var(--primary-color);border:1px solid var(--primary-color)}
.qactions .src2:hover{background:#eef4fb}
.reloadbar{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.reloadbtn{background:#fff;border:1px solid var(--border-color);color:var(--primary-color);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:bold;cursor:pointer}
.reloadbtn:hover{background:#eef4fb}
.loadstate{font-size:12px;color:var(--muted-color)}

/* ===== TRANG CHỦ (hoàn thiện) ===== */
.home-main{padding-top:24px;padding-bottom:8px}
.sys-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sys-card{display:flex;flex-direction:column;background:var(--card-color);border:1px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease;color:var(--text-color);min-height:236px}
.sys-card.qppl{border-top-color:var(--accent-color)}
.sys-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(22,51,107,.14)}
.sys-card .ico{width:50px;height:50px;color:var(--primary-color)}
.sys-card.qppl .ico{color:var(--accent-color)}
.sys-card .ico svg{width:50px;height:50px}
.sys-card h3{font-size:19px;color:var(--primary-dark);margin:14px 0 8px;line-height:1.3}
.sys-card p{color:var(--muted-color);font-size:13.5px;line-height:1.55;flex:1;margin:0 0 18px}
.sys-btn{align-self:flex-start;background:var(--primary-color);color:#fff;font-weight:bold;font-size:13px;padding:11px 20px;border-radius:8px;letter-spacing:.4px}
.sys-card.qppl .sys-btn{background:var(--accent-color)}
.sys-card:hover .sys-btn{filter:brightness(.94)}

.intro{margin:34px 0 6px;background:var(--card-color);border:1px solid var(--border-color);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.intro-grid{display:grid;grid-template-columns:330px 1fr}
.intro-img{background:linear-gradient(135deg,#eaf2fb,#f3f8fc);border-right:1px solid var(--border-color);overflow:hidden;min-height:260px;position:relative}
.intro-img img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.intro-img .cap{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--muted-color);font-style:italic;text-align:center;padding:16px}
.intro-text{padding:22px 26px}
.intro-text h2{font-size:16.5px;color:var(--primary-dark);margin:0 0 10px;line-height:1.35}
.intro-text .lead2{font-size:13.5px;color:var(--text-color);line-height:1.6;margin:0 0 16px}
.tagline{font-size:12.5px;color:var(--muted-color);margin:0 0 14px}
.mvv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.mvv .box{background:#f7fafd;border:1px solid var(--border-color);border-radius:10px;padding:12px 13px}
.mvv .box h4{margin:0 0 5px;font-size:13px;color:var(--primary-color)}
.mvv .box p{margin:0;font-size:12px;color:var(--text-color);line-height:1.5}

.home-credit{text-align:center;color:var(--muted-color);font-size:13px;padding:26px 16px 12px;line-height:1.5}

@media(max-width:760px){
  .sys-cards{grid-template-columns:1fr}
  .intro-grid{grid-template-columns:1fr}
  .intro-img{border-right:none;border-bottom:1px solid var(--border-color)}
  .mvv{grid-template-columns:1fr}
}