@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
:root{--burgundy:#701d2b;--burgundy-2:#55121f;--burgundy-3:#8f3142;--gold:#c7a35b;--gold-soft:#f4ead6;--cream:#faf7f2;--surface:#fff;--surface-2:#f5f2ee;--ink:#242124;--muted:#747078;--line:#e8e1da;--success:#16804b;--danger:#b42318;--shadow:0 12px 35px rgba(57,28,34,.07);--shadow-lg:0 20px 60px rgba(57,28,34,.12);--radius:16px;--sidebar:278px;--sidebar-collapsed:88px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f4f1;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.55}body.no-scroll{overflow:hidden}a{color:var(--burgundy);text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;color:#fff;background:linear-gradient(180deg,#581421 0%,#701d2b 45%,#641824 100%);box-shadow:8px 0 35px rgba(49,17,23,.13);transition:width .25s ease,transform .25s ease}.sidebar::after{content:"";position:absolute;inset:auto -30px 70px auto;width:120px;height:120px;border-radius:50%;background:rgba(199,163,91,.07);filter:blur(2px);pointer-events:none}.brand{height:88px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}.brand-link{display:flex;align-items:center;gap:12px;color:#fff;min-width:0}.brand-mark{width:52px;height:52px;flex:0 0 52px;background:#fff;border-radius:14px;display:grid;place-items:center;box-shadow:0 8px 25px rgba(0,0,0,.12)}.brand-mark img{width:42px;height:42px;object-fit:contain}.brand-copy{display:flex;flex-direction:column;min-width:0}.brand-copy strong{font-size:17px;letter-spacing:.02em}.brand-copy small{color:rgba(255,255,255,.68);font-size:11px;margin-top:1px;white-space:nowrap}.icon-btn{border:0;background:transparent;color:inherit;display:grid;place-items:center}.sidebar-collapse{width:30px;height:30px;border-radius:8px;color:rgba(255,255,255,.65)}.sidebar-collapse:hover{background:rgba(255,255,255,.1);color:#fff}.sidebar-collapse svg{width:15px;height:15px;transition:transform .25s}.sidebar-user{margin:16px 14px 4px;padding:12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#d2ae67,#a97c31);color:#fff;font-weight:800;box-shadow:0 5px 15px rgba(0,0,0,.14)}.avatar-sm{width:38px;height:38px;border-radius:11px}.sidebar-user-copy{min-width:0;display:flex;flex-direction:column}.sidebar-user-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-copy span{font-size:11px;color:rgba(255,255,255,.62)}.side-nav{padding:12px 12px 20px;overflow:auto;flex:1}.nav-section{padding:13px 10px 7px;color:rgba(255,255,255,.4);font-size:9px;font-weight:800;letter-spacing:.12em}.nav-item{position:relative;display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.8);padding:11px 12px;border-radius:12px;margin:3px 0;font-weight:600;transition:.18s ease}.nav-item:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateX(1px)}.nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:inset 3px 0 0 var(--gold)}.nav-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}.nav-icon svg{width:18px;height:18px}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-bottom{padding:14px;border-top:1px solid rgba(255,255,255,.1)}.logout-link{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;padding:10px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);font-weight:600}.logout-link:hover{background:rgba(255,255,255,.1)}.main{margin-left:var(--sidebar);min-height:100vh;transition:margin-left .25s ease}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar.collapsed .brand-copy,.sidebar.collapsed .sidebar-user-copy,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section span,.sidebar.collapsed .logout-link span{display:none}.sidebar.collapsed .brand{justify-content:center;padding:14px 10px;position:relative}.sidebar.collapsed .brand-link{justify-content:center}.sidebar.collapsed .sidebar-collapse{display:grid;position:absolute;right:10px;top:12px;background:rgba(255,255,255,.08);color:#fff;z-index:2}.sidebar.collapsed .sidebar-user{justify-content:center;padding:10px}.sidebar.collapsed .nav-item{justify-content:center}.sidebar.collapsed .logout-link{padding:11px}.sidebar.collapsed + .main{margin-left:var(--sidebar-collapsed)}.sidebar.collapsed .sidebar-collapse svg{transform:rotate(180deg)}.topbar{position:sticky;z-index:40;top:0;min-height:84px;padding:15px 30px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.topbar-left{display:flex;align-items:center;gap:12px}.mobile-menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);color:var(--burgundy);background:#fff;border-radius:11px}.page-heading .eyebrow{font-size:9px;color:var(--burgundy);font-weight:800;letter-spacing:.11em;text-transform:uppercase}.page-heading h1{margin:3px 0 0;font-size:23px;line-height:1.2;letter-spacing:-.02em}.topbar-actions{display:flex;align-items:center;gap:10px}.top-action{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:#fff}.top-action:hover{color:var(--burgundy);border-color:#d7c9c2}.user-menu{position:relative}.user-trigger{border:1px solid var(--line);background:#fff;border-radius:12px;padding:5px 9px 5px 6px;display:flex;align-items:center;gap:9px;color:var(--ink)}.user-trigger:hover{border-color:#d6c9c2}.user-trigger-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}.user-trigger-text strong{font-size:12px}.user-trigger-text small{font-size:10px;color:var(--muted)}.user-trigger>svg{width:14px;height:14px;color:var(--muted)}.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);display:none}.user-dropdown.show{display:block}.user-dropdown a{display:block;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:13px}.user-dropdown a:hover{background:var(--cream);color:var(--burgundy)}.content{width:100%;max-width:1600px;margin:0 auto;padding:28px 30px 50px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden}.card-head{min-height:62px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fdfcfb)}.card-head h2{margin:0;font-size:16px;letter-spacing:-.01em}.card-body{padding:20px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;box-shadow:var(--shadow);min-height:112px}.stat::after{content:"";position:absolute;right:-20px;bottom:-28px;width:85px;height:85px;border-radius:50%;background:var(--gold-soft)}.stat span{display:block;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.stat b{display:block;font-size:23px;line-height:1.15;color:var(--burgundy);position:relative;z-index:1}.quick{display:flex;gap:10px;flex-wrap:wrap}.quick a{padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--cream);font-weight:700;transition:.18s}.quick a:hover{border-color:#d9c5bb;transform:translateY(-1px);box-shadow:0 7px 18px rgba(57,28,34,.06)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d8d1ca;background:#fff;color:#3f3b3e;padding:10px 14px;border-radius:10px;font-weight:700;transition:.18s}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(57,28,34,.06)}.btn.primary{background:linear-gradient(135deg,var(--burgundy),var(--burgundy-3));border-color:var(--burgundy);color:#fff;box-shadow:0 7px 18px rgba(112,29,43,.16)}.btn.primary:hover{background:var(--burgundy-2)}.btn.small{padding:6px 9px;font-size:12px}.btn.wide{width:100%;margin-top:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:700;margin:0 0 7px;color:#403a3e}input,select,textarea{width:100%;border:1px solid #d9d2cc;border-radius:10px;background:#fff;padding:11px 12px;outline:0;color:var(--ink);transition:.18s}input:hover,select:hover,textarea:hover{border-color:#cfc3bb}input:focus,select:focus,textarea:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(112,29,43,.08)}textarea{min-height:105px;resize:vertical}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.toolbar select,.toolbar input{max-width:560px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.data{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:#fff}.data th,.data td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.data th{background:#f7f3ee;color:#625b60;font-size:11px;text-transform:uppercase;letter-spacing:.03em}.data tr:last-child td{border-bottom:0}.data tr:hover td{background:#fffcf8}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}.profile-grid div{padding:13px 15px;border-bottom:1px solid var(--line)}.profile-grid div:nth-last-child(-n+2){border-bottom:0}.profile-grid b{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.profile-grid span{font-weight:600}.alert{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:11px;margin-bottom:17px;border:1px solid}.alert.success{background:#effaf4;color:#166534;border-color:#ccebd8}.alert.danger{background:#fff1f1;color:#991b1b;border-color:#f3cccc}.alert.fade-out{opacity:0;transform:translateY(-5px);transition:.3s}.muted{color:var(--muted)}.empty{text-align:center;padding:70px;color:var(--muted)}.public-wrap{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:30px;background:radial-gradient(circle at 20% 10%,#fff,#f5ede5 55%,#eee5dd)}.login-card{position:relative;width:min(470px,100%);background:rgba(255,255,255,.98);border:1px solid var(--line);box-shadow:var(--shadow-lg);border-radius:22px;padding:38px;text-align:center}.login-card::before{content:"";position:absolute;top:0;left:12%;right:12%;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:99px}.login-card h1{font-family:"Playfair Display",Georgia,serif;font-size:23px;color:var(--burgundy);line-height:1.3;margin:10px 0 4px}.login-logo{width:118px;height:118px;object-fit:contain;margin:0 auto 8px}.login-card form{text-align:left;margin-top:24px}.login-card label{margin-top:14px}.login-card code{background:var(--cream);padding:2px 5px}.quick .btn{background:var(--burgundy);color:#fff;border-color:var(--burgundy)}.mobile-overlay{display:none}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--cream);padding:2px 6px;border-radius:6px}
@media(max-width:1150px){:root{--sidebar:245px}.content{padding:24px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:14px 24px}}
@media(max-width:900px){.sidebar{transform:translateX(-102%);width:278px}.sidebar.mobile-open{transform:translateX(0)}.main,.sidebar.collapsed + .main{margin-left:0}.mobile-overlay{position:fixed;z-index:45;inset:0;background:rgba(31,19,22,.48);backdrop-filter:blur(2px);display:block;opacity:0;visibility:hidden;transition:.2s}.mobile-overlay.show{opacity:1;visibility:visible}.mobile-menu-btn{display:grid}.sidebar-collapse{display:none}.topbar{min-height:72px}.content{padding:18px}.top-action{display:none}}
@media(max-width:620px){.topbar{padding:11px 14px}.page-heading .eyebrow{display:none}.page-heading h1{font-size:18px}.user-trigger-text,.user-trigger>svg{display:none}.user-trigger{padding:4px}.content{padding:12px}.stats{grid-template-columns:1fr;gap:10px}.stat{min-height:94px}.form-grid,.profile-grid{grid-template-columns:1fr}.profile-grid div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.profile-grid div:last-child{border-bottom:0}.card{border-radius:13px}.card-head,.card-body{padding:14px}.login-card{padding:28px 20px;border-radius:18px}.quick{flex-direction:column}.quick a,.quick .btn{width:100%}}

/* UPDATE 4 - sidebar toggle button: always visible and easy to find */
.brand{position:relative}
.sidebar-collapse{position:absolute;right:-14px;top:30px;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--burgundy);border:1px solid #e2d7d0;box-shadow:0 6px 16px rgba(49,17,23,.18);z-index:80;display:grid;place-items:center}
.sidebar-collapse:hover{background:#fff;color:var(--burgundy-2);border-color:#cdb9ad;transform:scale(1.05)}
.sidebar-collapse svg{width:17px;height:17px;transition:transform .25s ease}
.sidebar.collapsed .sidebar-collapse{position:absolute;right:-14px;top:30px;background:#fff;color:var(--burgundy);display:grid}
.sidebar.collapsed .sidebar-collapse svg{transform:rotate(180deg)}
@media(max-width:900px){.sidebar-collapse{display:none!important}}


/* =========================================================
   CIV APP — PREMIUM UI V2
   UI ONLY: no PHP / DB / route / JS changes.
   ========================================================= */

:root{
  --civ-red:#701d2b;
  --civ-red-dark:#4e111c;
  --civ-red-mid:#8d3042;
  --civ-gold:#c8a45d;
  --civ-ink:#241f21;
  --civ-muted:#746b6e;
  --civ-bg:#f5f3f0;
  --civ-card:#ffffff;
  --civ-line:#e7e1dc;
  --civ-green:#2d9b68;
  --civ-shadow:0 12px 34px rgba(54,27,34,.07);
}

/* Overall canvas */
body{
  background:
    radial-gradient(900px 420px at 82% -8%,rgba(200,164,93,.12),transparent 65%),
    linear-gradient(180deg,#faf9f7 0%,var(--civ-bg) 100%);
  color:var(--civ-ink);
}

/* Sidebar */
.sidebar{
  background:
    radial-gradient(240px 240px at 100% 12%,rgba(200,164,93,.12),transparent 70%),
    linear-gradient(180deg,#4f101b 0%,#701d2b 44%,#5d1723 100%);
  box-shadow:10px 0 38px rgba(49,17,23,.15);
}
.sidebar-user{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-section{
  color:rgba(255,255,255,.50);
  padding-top:17px;
}
.nav-item{
  min-height:42px;
  border:1px solid transparent;
}
.nav-item:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.06);
  transform:translateX(2px);
}
.nav-item.active{
  background:linear-gradient(90deg,rgba(255,255,255,.19),rgba(255,255,255,.065));
  border-color:rgba(255,255,255,.09);
  box-shadow:inset 3px 0 0 var(--civ-gold),0 7px 18px rgba(0,0,0,.09);
}
.nav-item svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}

/* Brand */
.brand{
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.brand-mark{
  border:1px solid rgba(200,164,93,.25);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* Main header */
.topbar{
  background:rgba(255,255,255,.91);
  border-bottom-color:rgba(220,213,207,.85);
  box-shadow:0 5px 24px rgba(53,31,36,.045);
  backdrop-filter:blur(14px);
}
.page-heading h1{
  font-weight:800;
  letter-spacing:-.025em;
}
.page-heading .eyebrow{
  color:#8b7770;
  letter-spacing:.14em;
}

/* Search / user controls */
.search-box,.user-trigger{
  border-color:#e2dcd6;
  background:#fff;
  box-shadow:0 3px 12px rgba(50,30,35,.035);
}
.search-box:focus-within{
  border-color:rgba(112,29,43,.38);
  box-shadow:0 0 0 4px rgba(112,29,43,.065);
}

/* Content cards */
.content{
  padding-top:30px;
}
.card{
  background:linear-gradient(180deg,#fff 0%,#fefdfc 100%);
  border-color:var(--civ-line);
  border-radius:18px;
  box-shadow:var(--civ-shadow);
}
.card:hover{
  border-color:#ddd3cc;
  box-shadow:0 16px 42px rgba(54,27,34,.085);
}
.card-head{
  min-height:66px;
  border-bottom-color:#eee8e3;
}
.card-head h2{
  font-weight:800;
  letter-spacing:-.015em;
}

/* Statistic cards */
.stat{
  position:relative;
  overflow:hidden;
  border-color:var(--civ-line);
  border-radius:17px;
  background:linear-gradient(145deg,#fff 0%,#fcfaf8 100%);
  box-shadow:0 9px 27px rgba(54,27,34,.06);
}
.stat::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--civ-gold),#e0c48a);
}
.stat::after{
  background:radial-gradient(circle,var(--civ-gold-light,#f5eadb),transparent 68%);
}
.stat:hover{
  transform:translateY(-3px);
  border-color:#d8ccc2;
  box-shadow:0 17px 36px rgba(54,27,34,.095);
}
.stat span{
  color:#756b6e;
  font-weight:700;
  letter-spacing:.035em;
}
.stat b{
  color:var(--civ-red);
  font-weight:850;
}

/* Primary actions */
.btn.primary,
.quick .btn{
  background:linear-gradient(135deg,#641624 0%,#8d3042 100%);
  border-color:#641624;
  box-shadow:0 8px 20px rgba(112,29,43,.17);
}
.btn.primary:hover,
.quick .btn:hover{
  background:linear-gradient(135deg,#52101c 0%,#762637 100%);
  box-shadow:0 12px 26px rgba(112,29,43,.22);
  transform:translateY(-1px);
}
.btn{
  border-radius:10px;
  font-weight:700;
}

/* Forms */
input,select,textarea{
  border-color:#dcd4ce;
  background:#fff;
  border-radius:10px;
  color:var(--civ-ink);
}
input:hover,select:hover,textarea:hover{
  border-color:#cfc4bc;
}
input:focus,select:focus,textarea:focus{
  border-color:#8d3042;
  box-shadow:0 0 0 4px rgba(112,29,43,.075);
  outline:0;
}

/* Data tables */
.table-wrap{
  border-color:var(--civ-line);
  border-radius:14px;
  box-shadow:0 5px 18px rgba(54,27,34,.025);
}
.data th{
  background:linear-gradient(180deg,#faf7f3,#f3eee9);
  color:#5d5357;
  font-weight:800;
  letter-spacing:.01em;
}
.data td{
  padding-top:12px;
  padding-bottom:12px;
  border-bottom-color:#eee9e5;
}
.data tbody tr:nth-child(even) td{
  background:#fffdfb;
}
.data tbody tr:hover td{
  background:#fff8ef;
}

/* Profile */
.profile-grid{
  border-color:var(--civ-line);
  border-radius:14px;
  overflow:hidden;
}
.profile-grid div{
  background:#fff;
}
.profile-grid div:hover{
  background:#fffbf6;
}
.profile-grid strong{
  color:var(--civ-red);
}

/* Quick action / announcement blocks */
.quick a{
  background:linear-gradient(180deg,#fffdf9,#f8f1e9);
  border-color:#dfd5cc;
  border-radius:12px;
}
.quick a:hover{
  border-color:#cdb9a4;
  box-shadow:0 8px 20px rgba(54,27,34,.07);
}

/* Alerts */
.alert{
  border-radius:12px;
  box-shadow:0 5px 16px rgba(54,27,34,.035);
}

/* Dropdowns */
.user-dropdown{
  border-color:#e5ddd7;
  box-shadow:0 20px 48px rgba(47,28,34,.15);
  border-radius:14px;
  overflow:hidden;
}
.user-dropdown a:hover{
  background:#faf5ef;
}

/* Login page */
.login-card{
  border-color:#e6ded8;
  box-shadow:0 22px 60px rgba(54,27,34,.13);
}

/* Scrollbars */
.sidebar::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar{
  width:7px;
  height:7px;
}
.sidebar::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb{
  background:rgba(112,29,43,.28);
  border-radius:99px;
}
.sidebar::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track{
  background:transparent;
}

/* Accessible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(200,164,93,.45);
  outline-offset:2px;
}

/* Mobile polish */
@media(max-width:900px){
  .content{padding-top:20px}
  .card{box-shadow:0 9px 25px rgba(54,27,34,.06)}
}
@media(max-width:620px){
  .content{padding-top:14px}
  .card{border-radius:14px}
  .stat{border-radius:14px}
}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

/* CIV ADMIN DASHBOARD V3 — 3D nhẹ, đầy đủ các nhóm chức năng */
.civ-admin-dashboard{margin:0 0 20px}
.civ-dash-hero{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:23px 25px;margin-bottom:22px;border-radius:18px;color:#fff;background:linear-gradient(115deg,#123B70 0%,#1D5B96 58%,#2878B8 100%);box-shadow:0 10px 24px rgba(18,59,112,.18),inset 0 1px 0 rgba(255,255,255,.18);position:relative;overflow:hidden}
.civ-dash-hero:after{content:"";position:absolute;width:170px;height:170px;right:-55px;bottom:-90px;border-radius:50%;border:1px solid rgba(255,255,255,.09)}
.civ-dash-kicker{font-size:9px;font-weight:800;letter-spacing:.15em;opacity:.72;margin-bottom:6px}.civ-dash-hero h2{margin:0;font-size:25px;line-height:1.15}.civ-dash-hero p{margin:7px 0 0;font-size:12px;opacity:.8}.civ-dash-hero-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:2}.civ-dash-hero-actions a{display:inline-flex;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;font-size:10px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.civ-dash-section-head{display:flex;justify-content:space-between;align-items:end;margin:0 0 11px}.civ-dash-section-head h3{margin:0;color:#321f24;font-size:17px}.civ-dash-section-head span{display:block;color:#8a777a;font-size:10.5px;margin-top:3px}.civ-dash-section-head-spaced{margin-top:23px}
.civ-dash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:21px}.civ-dash-stat{position:relative;min-height:108px;padding:16px;border-radius:15px;text-decoration:none;color:#fff;overflow:hidden;background:linear-gradient(145deg,#651424,#792037);box-shadow:0 5px 0 #56101e,0 9px 18px rgba(74,18,31,.09),inset 0 1px 0 rgba(255,255,255,.13);transition:transform .18s ease,box-shadow .18s ease}.civ-dash-stat:hover{transform:translateY(-3px);box-shadow:0 7px 0 #56101e,0 13px 22px rgba(74,18,31,.13),inset 0 1px 0 rgba(255,255,255,.16);color:#fff}.civ-dash-stat:after{content:"";position:absolute;width:85px;height:85px;right:-28px;bottom:-36px;border-radius:50%;background:rgba(235,211,160,.10)}.civ-dash-stat-icon{display:inline-grid;width:29px;height:29px;place-items:center;border-radius:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);position:relative;z-index:2}.civ-dash-stat-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}.civ-dash-stat-label{display:block;margin-top:11px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.73);position:relative;z-index:2}.civ-dash-stat strong{display:block;font-size:25px;line-height:1.1;margin-top:4px;position:relative;z-index:2}.civ-dash-stat em{position:absolute;right:13px;top:13px;font-style:normal;font-size:9px;color:#ecd8a9;opacity:.8}
.civ-dash-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}.civ-dash-panel{background:#fff;border:1px solid #e8deda;border-radius:16px;box-shadow:0 6px 20px rgba(55,30,30,.045);overflow:hidden}.civ-dash-panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 18px;border-bottom:1px solid #eee5e1}.civ-dash-panel-head h3{margin:0;font-size:15px;color:#30272a}.civ-dash-panel-head span{font-size:10px;color:#8b7d7f}.civ-dash-panel-head a{font-size:10px;color:#751c31;text-decoration:none;font-weight:800}.civ-dash-finance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:13px}.civ-dash-finance-grid a{padding:13px 14px;border-radius:11px;text-decoration:none;background:#fbf7f4;border:1px solid #eee2dc;color:#36282b}.civ-dash-finance-grid a:hover{border-color:#d8bbc1;background:#fff8f8}.civ-dash-finance-grid span{display:block;font-size:9px;text-transform:uppercase;color:#8b797c;font-weight:800}.civ-dash-finance-grid b{display:block;color:#771d32;font-size:17px;margin-top:5px}.civ-dash-progress{padding:2px 15px 16px}.civ-dash-progress>div{display:flex;justify-content:space-between;font-size:10px;color:#7f7073;margin-bottom:6px}.civ-dash-progress b{color:#741b30}.civ-dash-progress i{display:block;height:6px;background:#eee6e2;border-radius:20px;overflow:hidden}.civ-dash-progress u{display:block;height:100%;border-radius:20px;text-decoration:none;background:#7a2034}
.civ-dash-list{padding:5px 12px 8px}.civ-dash-list a{display:grid;grid-template-columns:29px 1fr auto 13px;align-items:center;gap:9px;padding:9px 5px;border-bottom:1px solid #f0e9e6;text-decoration:none;color:#403438;font-size:11px}.civ-dash-list a:last-child{border-bottom:0}.civ-dash-list a:hover{background:#fcf7f6}.civ-dash-list-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#f8eeee;color:#762036}.civ-dash-list-icon svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}.civ-dash-list b{color:#751c31;font-size:12px}.civ-dash-list i{font-style:normal;color:#a18f92;font-size:18px}
.civ-dash-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.civ-dash-module-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.civ-dash-module{display:flex;align-items:center;gap:11px;min-height:66px;padding:12px 13px;border:1px solid #e9dfdb;border-radius:13px;background:#fff;text-decoration:none;color:#3b2d31;box-shadow:0 4px 14px rgba(60,34,35,.035);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.civ-dash-module:hover{transform:translateY(-2px);border-color:#d8b8bf;box-shadow:0 8px 18px rgba(70,28,40,.08);color:#3b2d31}.civ-dash-module>span{flex:0 0 31px;width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#f8edef;color:#751d31}.civ-dash-module>span svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}.civ-dash-module div{min-width:0;flex:1}.civ-dash-module b{display:block;font-size:11px;color:#3b2d31}.civ-dash-module small{display:block;margin-top:3px;color:#938184;font-size:9px;line-height:1.35}.civ-dash-module>i{font-style:normal;color:#ae9ca0;font-size:17px}.civ-dash-note{display:flex;gap:11px;align-items:flex-start;margin-top:17px;padding:12px 14px;border-radius:12px;background:#faf6f3;border:1px solid #eadfda}.civ-dash-note>span{color:#7a2034}.civ-dash-note>span svg{width:17px;height:17px;stroke:currentColor;fill:none}.civ-dash-note b{font-size:10px;color:#5a4448}.civ-dash-note p{margin:3px 0 0;font-size:9.5px;color:#8d7e81;line-height:1.5}
.civ-admin-dashboard>.card{margin-top:16px}.civ-admin-dashboard>.card .card-head{display:none}.civ-admin-dashboard>.card .card-body{padding:13px}.civ-admin-dashboard .admin-overview-actions{margin:0}
@media(max-width:1150px){.civ-dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.civ-dash-module-grid,.civ-dash-module-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.civ-dash-columns{grid-template-columns:1fr}}
@media(max-width:700px){.civ-dash-hero{align-items:flex-start;flex-direction:column}.civ-dash-hero-actions{width:100%}.civ-dash-hero-actions a{flex:1;text-align:center;justify-content:center}.civ-dash-stats{grid-template-columns:1fr 1fr;gap:9px}.civ-dash-stat{min-height:102px;padding:14px}.civ-dash-module-grid,.civ-dash-module-grid-4{grid-template-columns:1fr}.civ-dash-panel-head{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:460px){.civ-dash-stats{grid-template-columns:1fr}.civ-dash-finance-grid{grid-template-columns:1fr}}

/* CIV APP — vòng thống kê hiện đại ở cuối Tổng quan */
.civ-dash-bottom-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(430px,.75fr);gap:14px;align-items:stretch;margin-top:14px}
.civ-dash-circle-panel{background:#fff;border:1px solid #eadfd9;border-radius:18px;padding:16px 18px;box-shadow:0 7px 22px rgba(75,20,30,.055)}
.civ-dash-circle-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.civ-dash-circle-head h3{margin:0;font-size:14px;color:#292322}.civ-dash-circle-head span:not(.civ-dash-circle-total){display:block;color:#927e77;font-size:10px;margin-top:3px}.civ-dash-circle-total{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:900;color:#701d2d;background:#fbf4f1;border:1px solid #ead7d1}
.civ-dash-circles{display:flex;justify-content:space-between;gap:10px;padding:4px 6px 1px}.civ-circle-stat{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#4b403c;min-width:100px}.civ-circle-ring{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 7px 16px rgba(45,30,35,.10),inset 0 1px 2px rgba(255,255,255,.65)}
.civ-circle-ring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;box-shadow:inset 0 1px 5px rgba(50,30,35,.08)}
.civ-circle-red .civ-circle-ring{background:conic-gradient(#8a2038 0 74%,#d7b6bd 74% 100%)}
.civ-circle-blue .civ-circle-ring{background:conic-gradient(#246b9e 0 61%,#b9d1df 61% 100%)}
.civ-circle-orange .civ-circle-ring{background:conic-gradient(#e18a2f 0 68%,#efd5b6 68% 100%)}
.civ-circle-core{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#fff,#fbf8f6);box-shadow:0 2px 8px rgba(40,20,25,.08)}
.civ-circle-core strong{font-size:16px;line-height:1;color:#3b302d;font-weight:900}.civ-circle-core small{font-size:8px;color:#927e77;margin-top:4px;text-transform:uppercase;font-weight:800;letter-spacing:.04em}.civ-circle-stat>b{font-size:10px;font-weight:900}.civ-circle-red>b{color:#8a2038}.civ-circle-blue>b{color:#246b9e}.civ-circle-orange>b{color:#cf7923}
.civ-circle-stat:hover .civ-circle-ring{transform:translateY(-2px);box-shadow:0 10px 20px rgba(45,30,35,.13),inset 0 1px 2px rgba(255,255,255,.65)}.civ-circle-ring{transition:transform .18s ease,box-shadow .18s ease}
@media(max-width:900px){.civ-dash-bottom-grid{grid-template-columns:1fr}.civ-dash-circles{justify-content:space-around}}
@media(max-width:520px){.civ-dash-circles{gap:4px}.civ-circle-ring{width:72px;height:72px}.civ-circle-core{width:54px;height:54px}.civ-circle-core strong{font-size:14px}.civ-circle-stat{min-width:80px}}


/* V5 — 3 vòng thống kê các mảng: đặt ngay dưới 8 card tổng quan, 3D rất nhẹ */
.civ-dash-pill-panel{margin:14px 0 18px;background:#fff;border:1px solid #eadfd9;border-radius:17px;padding:13px 16px 14px;box-shadow:0 7px 20px rgba(60,25,32,.045)}
.civ-dash-pill-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.civ-dash-pill-title b{display:block;font-size:13px;color:#302827}.civ-dash-pill-title span{display:block;font-size:9px;color:#9a8580;margin-top:2px}.civ-dash-pill-title small{font-size:8px;font-weight:900;color:#8b6570;letter-spacing:.12em}
.civ-dash-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.civ-pill-stat{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 9px;border:1px solid #eee4df;border-radius:13px;background:#fffdfa;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.civ-pill-stat:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(55,25,31,.09);border-color:#dfd0c9}
.civ-pill-ring{--pct:50%;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--pill-color) var(--pct),#eee9e6 0);box-shadow:0 4px 10px rgba(45,25,30,.08);position:relative}
.civ-pill-ring:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;border:1px solid rgba(100,70,70,.06)}
.civ-pill-core{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;align-content:center;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.civ-pill-core strong{font-size:15px;line-height:1;color:#392f2d;font-weight:900}.civ-pill-core small{font-size:6px;line-height:1;margin-top:3px;font-weight:900;letter-spacing:.06em;color:#8e7c78}
.civ-pill-copy{min-width:0;flex:1}.civ-pill-copy b{display:block;font-size:10px;color:#443936;font-weight:900}.civ-pill-copy small{display:block;font-size:8px;line-height:1.35;color:#9b8882;margin-top:3px}.civ-pill-stat>i{font-style:normal;font-size:17px;color:#b7a39d}
.pill-red{--pill-color:#8b2038}.pill-blue{--pill-color:#2876aa}.pill-orange{--pill-color:#d78228}
@media(max-width:800px){.civ-dash-pills{grid-template-columns:1fr}.civ-pill-stat{padding:8px 10px}}


/* CIV V6 — vòng thống kê 3 mảng, giao diện chắc chắn hiển thị */
.civ-area-circles{margin:16px 0 18px;background:#fff;border:1px solid #e9ddd7;border-radius:18px;padding:15px 18px;box-shadow:0 8px 24px rgba(60,25,32,.06)}
.civ-area-circles-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.civ-area-circles-head b{display:block;color:#302827;font-size:14px}.civ-area-circles-head span{display:block;margin-top:3px;color:#9a8580;font-size:9px}.civ-area-circles-head small{font-size:8px;font-weight:900;letter-spacing:.12em;color:#8b6570}
.civ-area-circles-row{display:flex;justify-content:flex-end;gap:18px;align-items:center}
.civ-area-circle-card{position:relative;display:flex;align-items:center;gap:11px;min-width:245px;padding:8px 10px;border:1px solid #eee3de;border-radius:15px;background:#fffdfa;text-decoration:none;overflow:hidden;transition:.18s ease}
.civ-area-circle-card:hover{transform:translateY(-3px);border-color:#dfcec7;box-shadow:0 10px 22px rgba(55,25,31,.10)}
.civ-area-circle{position:relative;flex:0 0 82px;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--area) var(--area-pct),#eee9e6 0);box-shadow:0 5px 12px rgba(45,25,30,.10),inset 0 1px 1px rgba(255,255,255,.7)}
.civ-area-circle:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;border:1px solid rgba(80,55,55,.06)}
.civ-area-circle:after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid color-mix(in srgb,var(--area) 22%,transparent)}
.civ-area-circle-inner{position:relative;z-index:2;width:61px;height:61px;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;background:linear-gradient(145deg,#fff,#fbf6f3);box-shadow:0 2px 5px rgba(50,30,30,.06)}
.civ-area-circle-inner strong{font-size:17px;line-height:1;color:#302827;font-weight:900}.civ-area-circle-inner small{font-size:6px;line-height:1;margin-top:4px;font-weight:900;letter-spacing:.08em;color:var(--area)}
.civ-area-copy{min-width:0;flex:1}.civ-area-copy b{display:block;font-size:10px;font-weight:900;color:var(--area-dark)}.civ-area-copy small{display:block;margin-top:4px;font-size:8px;line-height:1.4;color:#9b8882}.civ-area-circle-card>i{font-style:normal;color:#ad9a94;font-size:18px}
@media(max-width:1100px){.civ-area-circles-row{justify-content:stretch}.civ-area-circle-card{min-width:0;flex:1}}
@media(max-width:800px){.civ-area-circles-row{display:grid;grid-template-columns:1fr;gap:8px}.civ-area-circle-card{width:100%;box-sizing:border-box}}

/* =========================================================
   CIV DASHBOARD V8
   Chỉ xử lý màu/độ nổi của các khối dưới 8 ô đỏ.
   Không thay đổi kích thước, layout, route hay chức năng.
   ========================================================= */

/* Các panel lớn: trắng/kem ở trái, cam ấm rõ dần về mép phải */
.civ-admin-dashboard .civ-dash-panel{
  background:linear-gradient(90deg,#ffffff 0%,#fffdf9 34%,#fff8f0 56%,#f8e5d1 78%,#e5a365 100%);
  border-color:#e4d5ca;
  box-shadow:0 8px 22px rgba(67,39,28,.055);
}

.civ-admin-dashboard .civ-dash-panel-head{
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,252,248,.94) 60%,rgba(247,225,204,.76) 100%);
  border-bottom-color:#eaded5;
}

/* Ô tài chính */
.civ-admin-dashboard .civ-dash-finance-grid a{
  background:linear-gradient(90deg,#fffefd 0%,#fffaf5 38%,#faead9 62%,#efc79f 82%,#df9755 100%);
  border-color:#e4d4c8;
}
.civ-admin-dashboard .civ-dash-finance-grid a:hover{
  background:linear-gradient(90deg,#ffffff 0%,#fff8f1 36%,#f8dfc3 61%,#edba83 82%,#d98642 100%);
  border-color:#d7b79d;
}

/* Danh sách vận hành */
.civ-admin-dashboard .civ-dash-list a{
  background:linear-gradient(90deg,#ffffff 0%,#fffdfb 35%,#fff8f1 61%,#f5dfc8 82%,#e4a062 100%);
  border-bottom-color:#eaded6;
}
.civ-admin-dashboard .civ-dash-list a:hover{
  background:linear-gradient(90deg,#ffffff 0%,#fff9f3 35%,#f8dfc3 61%,#edbd89 82%,#d98642 100%);
}

/* Tất cả ô module phía dưới */
.civ-admin-dashboard .civ-dash-module{
  background:linear-gradient(90deg,#ffffff 0%,#fffdf9 31%,#fff7ed 51%,#f8e1c8 69%,#efc08d 85%,#dc8d48 100%);
  border-color:#e3d3c7;
  box-shadow:0 4px 14px rgba(66,40,29,.05);
  position:relative;
  overflow:hidden;
}

.civ-admin-dashboard .civ-dash-module:hover{
  background:linear-gradient(90deg,#ffffff 0%,#fffaf4 31%,#f9e2c9 51%,#f2cda6 69%,#e9aa6b 85%,#d77f39 100%);
  border-color:#d6b69b;
  box-shadow:0 9px 21px rgba(72,41,26,.10);
}

.civ-admin-dashboard .civ-dash-module>span{
  background:linear-gradient(145deg,#fff7ef,#f6dfca);
  color:#751d31;
  border-color:rgba(175,91,43,.18);
}

/* Ba thẻ mảng hoạt động: chỉ tạo ánh cam nhẹ bên phải, không phủ cả thẻ */
.civ-admin-dashboard .civ-area-circle-card{
  background:linear-gradient(90deg,#ffffff 0%,#fffdfa 42%,#fff7ef 63%,#f3dcc3 83%,#e5a264 100%);
  border-color:#e4d5cb;
}
.civ-admin-dashboard .civ-area-circle-card:hover{
  background:linear-gradient(90deg,#ffffff 0%,#fff9f3 40%,#f9e3cc 61%,#edbf8e 82%,#db8842 100%);
}

/* Dải ghi chú cuối */
.civ-admin-dashboard .civ-dash-note{
  background:linear-gradient(90deg,#fffefd 0%,#fffaf5 42%,#f8e5d1 73%,#e8b078 100%);
  border-color:#e3d4ca;
}

/* Giữ 8 ô thống kê trên cùng màu đỏ đô — không áp dụng gradient cam */
.civ-admin-dashboard .civ-dash-stat{
  background:linear-gradient(145deg,#651424,#792037);
}



/* =========================================================
   CIV APP — ĐỒNG BỘ MÀU TOÀN HỆ THỐNG V10
   Nguyên tắc: trái sáng/kem → phải cam ấm.
   Giữ nguyên layout, kích thước, route, dữ liệu và chức năng.
   Riêng .civ-dash-stat (8 ô đỏ trên Tổng quan) giữ đỏ đô.
   ========================================================= */

/* Card nội dung chung của các trang */
.content > .card,
.content .card:not(.civ-dash-panel):not(.login-card){
  background:linear-gradient(90deg,
    #ffffff 0%,
    #fffdfb 38%,
    #fff9f3 60%,
    #f7e5d3 82%,
    #e9b276 100%);
  border-color:#e5d7ce;
  box-shadow:0 8px 25px rgba(68,40,29,.055);
}

.content > .card:hover,
.content .card:not(.civ-dash-panel):not(.login-card):hover{
  border-color:#dcc0aa;
  box-shadow:0 13px 31px rgba(68,40,29,.085);
}

/* Tiêu đề card: vẫn sáng, chỉ bắt ánh cam ở phía phải */
.content .card-head{
  background:linear-gradient(90deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,253,250,.96) 58%,
    rgba(249,231,214,.72) 100%);
  border-bottom-color:#eaded6;
}

/* Các ô thống kê thông thường trên những trang khác */
.content .stat:not(.civ-dash-stat){
  background:linear-gradient(90deg,
    #ffffff 0%,
    #fffdf9 38%,
    #fff8f0 61%,
    #f6dfc9 82%,
    #e7aa6d 100%);
  border-color:#e3d5cc;
  box-shadow:0 7px 22px rgba(66,39,29,.055);
}

.content .stat:not(.civ-dash-stat):hover{
  background:linear-gradient(90deg,
    #ffffff 0%,
    #fffaf5 36%,
    #f9e4cf 60%,
    #efc18f 82%,
    #db8a43 100%);
}

/* Thanh công cụ / nút nhanh */
.content .quick a,
.content .quick .quick-item{
  background:linear-gradient(90deg,
    #ffffff 0%,
    #fffdf9 40%,
    #fff7ee 63%,
    #f5dfc8 83%,
    #e5a162 100%);
  border-color:#e5d7cf;
}

.content .quick a:hover,
.content .quick .quick-item:hover{
  background:linear-gradient(90deg,
    #ffffff 0%,
    #fffaf4 38%,
    #f9e3cc 61%,
    #edbf8d 82%,
    #d98642 100%);
  border-color:#d9b99f;
}

/* Vùng bảng dữ liệu: giữ trắng để dễ đọc, chỉ tạo ánh cam phía phải */
.content .table-wrap{
  background:linear-gradient(90deg,
    #ffffff 0%,
    #fffefd 45%,
    #fffaf5 68%,
    #f8e7d5 86%,
    #edbc85 100%);
  border-color:#e4d7cf;
  box-shadow:0 7px 22px rgba(63,38,29,.045);
}

/* Header bảng */
.content .data th{
  background:linear-gradient(90deg,
    #faf8f6 0%,
    #faf7f3 55%,
    #f3dfca 100%);
  color:#4b3539;
}

/* Dòng bảng: cực nhẹ, không làm mất khả năng đọc */
.content .data tbody tr:hover{
  background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,250,245,.96) 62%,
    rgba(244,214,187,.58) 100%);
}

/* Các khu vực form bên trong card */
.content .form-grid,
.content .form-row{
  background:linear-gradient(90deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,252,248,.58) 62%,
    rgba(247,226,207,.34) 100%);
  border-radius:12px;
}

/* Input vẫn trắng để không ảnh hưởng thao tác */
.content input,
.content select,
.content textarea{
  background:rgba(255,255,255,.96);
  border-color:#ddd2cb;
}

/* Nút chính giữ đỏ đô — nhận diện CIV */
.content .btn.primary,
.content .quick .btn{
  background:linear-gradient(135deg,#641624 0%,#8d3042 100%);
  border-color:#641624;
}

/* Nút phụ: chuyển nhẹ sang kem/cam */
.content .btn:not(.primary){
  background:linear-gradient(90deg,#fff,#fff9f3 68%,#f1c99f 100%);
  border-color:#dfcfc4;
  color:#6d2835;
}

.content .btn:not(.primary):hover{
  background:linear-gradient(90deg,#fff,#fff5eb 65%,#e9a865 100%);
  border-color:#d6b79d;
}

/* Badge / nhãn nhỏ */
.content .badge,
.content .tag,
.content .chip{
  border-color:#e3cdbd;
  background:linear-gradient(90deg,#fff,#fff7ef 70%,#f0c89f 100%);
}

/* Alert: nền rất nhẹ, không biến thành mảng màu */
.content .alert{
  background:linear-gradient(90deg,
    #fffefd 0%,
    #fffaf5 62%,
    #f7e2cd 100%);
  border-color:#e5d5ca;
}

/* Các liên kết menu nội dung khi hover */
.content a:not(.btn):not(.civ-dash-stat):not(.civ-dash-module):not(.civ-area-circle-card):not(.civ-pill-stat):hover{
  text-decoration-color:#c8793d;
}

/* Không áp dụng hiệu ứng màu cam cho phần đăng nhập */
.login-page .card,
.login-card{
  background:#fff;
}

/* Mobile: giữ nguyên bố cục, chỉ giảm độ tương phản màu */
@media(max-width:700px){
  .content > .card,
  .content .card:not(.civ-dash-panel):not(.login-card){
    background:linear-gradient(90deg,#fff 0%,#fffaf5 68%,#f1d0ae 100%);
  }
}


/* =========================================================
   CIV DASHBOARD - FINAL COLOR OVERRIDE
   Force dashboard gradients so older rules cannot flatten them.
   Layout/function untouched.
   ========================================================= */
.civ-admin-dashboard .civ-dash-panel{
  background:linear-gradient(100deg,#ffffff 0%,#fffdf9 30%,#fff8ef 55%,#f6dec2 78%,#df934b 100%) !important;
}
.civ-admin-dashboard .civ-dash-panel-head{
  background:linear-gradient(100deg,#ffffff 0%,#fffdf9 48%,#fae8d5 100%) !important;
}
.civ-admin-dashboard .civ-dash-finance-grid a{
  background:linear-gradient(100deg,#ffffff 0%,#fffaf5 30%,#fae8d5 58%,#efbf89 82%,#dc8a42 100%) !important;
}
.civ-admin-dashboard .civ-dash-list a{
  background:linear-gradient(100deg,#ffffff 0%,#fffdfb 32%,#fff7ed 58%,#f4d9bd 82%,#df9857 100%) !important;
}
.civ-admin-dashboard .civ-dash-module{
  background:linear-gradient(100deg,#ffffff 0%,#fffdf9 28%,#fff7ed 50%,#f7dfc5 70%,#edb97f 86%,#da863f 100%) !important;
  border-color:#e1d0c3 !important;
}
.civ-admin-dashboard .civ-dash-module:hover{
  background:linear-gradient(100deg,#ffffff 0%,#fffaf4 28%,#f9e4cf 50%,#f1cca3 70%,#e5a365 86%,#d47b35 100%) !important;
}
.civ-admin-dashboard .civ-area-circle-card{
  background:linear-gradient(100deg,#ffffff 0%,#fffdfa 35%,#fff7ed 58%,#f3d9bb 82%,#df9653 100%) !important;
}
.civ-admin-dashboard .civ-area-circle-card:hover{
  background:linear-gradient(100deg,#ffffff 0%,#fff9f3 35%,#f8e0c7 58%,#edbc86 82%,#d9843e 100%) !important;
}
.civ-admin-dashboard .civ-dash-note{
  background:linear-gradient(100deg,#ffffff 0%,#fffaf5 40%,#f8e4cf 72%,#e5a76a 100%) !important;
}
/* Những vùng section có card trắng bên trong: chỉ thêm ánh cam rất nhẹ ở bên phải */
.civ-admin-dashboard .card:not(.civ-dash-panel),
.civ-admin-dashboard .civ-dash-section{
  background:linear-gradient(100deg,#ffffff 0%,#fffdfa 48%,#fff8f0 75%,#f1c99d 100%) !important;
}
/* Giữ nguyên 8 ô thống kê đỏ đô */
.civ-admin-dashboard .civ-dash-stat{
  background:linear-gradient(145deg,#651424,#792037) !important;
}


/* =========================================================
   CIV APP - ĐỒNG BỘ MÀU TOÀN DASHBOARD
   Chỉ bổ sung màu/hiệu ứng, không thay đổi bố cục/chức năng.
   ========================================================= */

/* Các panel lớn */
.civ-admin-dashboard .civ-dash-panel,
.civ-admin-dashboard .civ-dash-section,
.civ-admin-dashboard .civ-dash-card{
  background:linear-gradient(90deg,#ffffff 0%,#fffdfa 38%,#fff8f0 62%,#f4d4b0 84%,#e4a05f 100%) !important;
  border-color:#e6d5c7 !important;
}

/* Header của từng khu vực */
.civ-admin-dashboard .civ-dash-panel-head,
.civ-admin-dashboard .civ-dash-section-head{
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,251,246,.94),rgba(249,229,207,.72)) !important;
}

/* Các ô chức năng/quick links */
.civ-admin-dashboard .civ-dash-module,
.civ-admin-dashboard .civ-dash-quick,
.civ-admin-dashboard .civ-dash-action,
.civ-admin-dashboard .civ-dash-link{
  background:linear-gradient(90deg,#ffffff 0%,#fffdf9 34%,#fff7ec 55%,#f6dfc5 74%,#e7aa6c 100%) !important;
  border-color:#e3d1c2 !important;
  box-shadow:0 3px 12px rgba(77,48,31,.055) !important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease !important;
}

/* Danh sách vận hành */
.civ-admin-dashboard .civ-dash-list a,
.civ-admin-dashboard .civ-dash-list > div{
  background:linear-gradient(90deg,#ffffff 0%,#fffdfb 40%,#fff8f0 64%,#f4ddc5 82%,#e4a05f 100%) !important;
  border-color:#eadbd0 !important;
}

/* Các ô tài chính */
.civ-admin-dashboard .civ-dash-finance-grid a,
.civ-admin-dashboard .civ-finance-item{
  background:linear-gradient(90deg,#ffffff 0%,#fffaf5 35%,#fae8d3 60%,#f0c697 82%,#dc934f 100%) !important;
  border-color:#e2d0c0 !important;
}

/* Khu vực các mảng hoạt động */
.civ-admin-dashboard .civ-area-circles,
.civ-admin-dashboard .civ-area-circle-card{
  background:linear-gradient(90deg,#ffffff 0%,#fffdfa 38%,#fff7ed 60%,#f5d9bb 82%,#e6a15f 100%) !important;
  border-color:#e6d5c7 !important;
}

/* Hover nhẹ, không đổi kích thước */
.civ-admin-dashboard .civ-dash-module:hover,
.civ-admin-dashboard .civ-dash-quick:hover,
.civ-admin-dashboard .civ-dash-action:hover,
.civ-admin-dashboard .civ-dash-link:hover{
  background:linear-gradient(90deg,#ffffff 0%,#fff9f3 34%,#f9e3cd 56%,#efc18e 76%,#d98a43 100%) !important;
  box-shadow:0 7px 18px rgba(78,46,27,.10) !important;
}

/* Các khối cuối trang */
.civ-admin-dashboard .civ-dash-note,
.civ-admin-dashboard .civ-dash-footer{
  background:linear-gradient(90deg,#ffffff 0%,#fffaf5 42%,#f8e4ce 72%,#e6a567 100%) !important;
  border-color:#e5d5ca !important;
}

/* Không áp dụng gradient cam cho 8 ô thống kê đỏ phía trên */
.civ-admin-dashboard .civ-dash-stat{
  background:linear-gradient(135deg,#6e1c32 0%,#8e2541 58%,#a82e4c 100%) !important;
  color:#fff !important;
}

/* Nút/nhận diện vẫn đỏ đô CIV */
.civ-admin-dashboard a,
.civ-admin-dashboard button{
  --civ-accent:#7b2035;
}

/* Đảm bảo các ô bên trong vẫn trắng/kem, tạo chiều sâu chứ không nhuộm toàn bộ */
.civ-admin-dashboard .civ-dash-panel .civ-dash-finance-grid > *,
.civ-admin-dashboard .civ-dash-panel .civ-dash-list > *,
.civ-admin-dashboard .civ-dash-panel .civ-dash-module-grid > *{
  border-color:#e5d6cb;
}

/* =========================================================
   CIV — 3 MẢNG HOẠT ĐỘNG: MÀU THEO BIẾN INLINE
   Quan trọng: PHP đã gán --area cho từng thẻ.
   Không dùng gradient trắng-cam chung nữa.
   ========================================================= */
.civ-admin-dashboard .civ-area-circle-card:nth-child(1){
  --area:#8b1e36 !important;
  --area-dark:#5f1023 !important;
}
.civ-admin-dashboard .civ-area-circle-card:nth-child(2){
  --area:#2876aa !important;
  --area-dark:#174e78 !important;
}
.civ-admin-dashboard .civ-area-circle-card:nth-child(3){
  --area:#d47a20 !important;
  --area-dark:#a9550c !important;
}
.civ-admin-dashboard .civ-area-circle-card:nth-child(1),
.civ-admin-dashboard .civ-area-circle-card:nth-child(2),
.civ-admin-dashboard .civ-area-circle-card:nth-child(3){
  background:var(--area) !important;
  background-image:linear-gradient(135deg,var(--area) 0%,color-mix(in srgb,var(--area) 82%,#000 18%) 100%) !important;
  border-color:color-mix(in srgb,var(--area) 72%,#fff 28%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--area) 28%,transparent) !important;
}
.civ-admin-dashboard .civ-area-circle-card:nth-child(1):hover,
.civ-admin-dashboard .civ-area-circle-card:nth-child(2):hover,
.civ-admin-dashboard .civ-area-circle-card:nth-child(3):hover{
  background:var(--area) !important;
  background-image:linear-gradient(135deg,var(--area) 0%,color-mix(in srgb,var(--area) 72%,#000 28%) 100%) !important;
}
.civ-admin-dashboard .civ-area-circle-card .civ-area-copy b,
.civ-admin-dashboard .civ-area-circle-card .civ-area-copy small,
.civ-admin-dashboard .civ-area-circle-card>i{
  color:#fff !important;
}
.civ-admin-dashboard .civ-area-circle-card .civ-area-circle-inner small{
  color:var(--area) !important;
}