:root{
  --maroon: #A4243B;
  --cream: #D8C99B;
  --gold: #D8973C;
  --rust: #BD632F;
  --slate: #273E47;

  --lime: #D8973C;      /* accent chính: nút, mục menu đang chọn */
  --olive: #273E47;     /* màu tối: sidebar, tiêu đề */
  --bg: #FAF3E7;        /* nền trang, phái sinh từ --cream */
  --card: #FFFFFF;
  --text: #2A2118;
  --muted: #8C7A5B;
  --danger: #A4243B;    /* trùng với maroon trong palette - hợp vai trò cảnh báo */
  --success: #6B8F4E;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(39,62,71,0.08);
  --shadow-hover: 0 6px 20px rgba(39,62,71,0.14);
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Roboto',Arial,sans-serif; background:var(--bg); color:var(--text);
}
a{color:var(--olive); text-decoration:none;}

/* ---- Auth pages ---- */
.auth-bg{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--slate), var(--rust));
  padding:20px;
}
.auth-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-hover);
  padding:36px 32px; width:100%; max-width:420px;
}
.brand{margin:0 0 4px; font-size:24px; color:var(--olive);}
.subtitle{color:var(--muted); margin:0 0 20px; font-size:14px;}
.form label{display:block; font-size:13px; font-weight:500; margin:14px 0 6px; color:var(--olive);}
.form input, .form select, .form textarea{
  width:100%; padding:11px 14px; border:1px solid #E6DCC8; border-radius:10px; font-size:14px;
  background:#FFFDF9; transition:border-color .15s;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color: var(--olive); background:#fff;
}
.btn-primary{
  margin-top:22px; width:100%; padding:12px; border:none; border-radius:10px;
  background:var(--lime); color:var(--olive); font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:var(--shadow);
}
.btn-primary:hover{box-shadow:var(--shadow-hover); transform:translateY(-1px);}
.switch-link{text-align:center; margin-top:18px; font-size:13px; color:var(--muted);}
.alert{padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:6px;}
.alert-error{background:#F7E2E5; color:var(--danger);}
.alert-success{background:#EAF1E1; color:var(--success);}

/* ---- App shell ---- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:264px; background:var(--olive); flex-shrink:0;
  position:sticky; top:0; height:100vh; overflow:visible; transition:width .18s ease;
}
.sidebar.collapsed{width:76px;}
.sidebar-inner{
  height:100%; overflow-y:auto; padding:18px 14px; display:flex; flex-direction:column; color:#EFE3D8;
}
.sidebar.collapsed .sidebar-inner{padding:18px 10px;}

.sidebar-toggle{
  position:absolute; top:18px; right:-13px; width:26px; height:26px; border-radius:50%;
  background:var(--cream); color:var(--olive); border:2px solid var(--olive); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; z-index:5;
}

.sidebar-brand{display:flex; align-items:center; gap:12px; padding:4px 8px 18px; flex-shrink:0;}
.sidebar.collapsed .sidebar-brand{justify-content:center; padding:4px 0 18px;}
.brand-box{
  width:38px; height:38px; border-radius:11px; background:var(--lime); color:var(--olive);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;
}
.brand-box-admin{background:#EFE3D8; color:var(--olive);}
.brand-name{font-size:14.5px; font-weight:700; color:#fff; line-height:1.3;}
.brand-sub{font-size:11.5px; color:rgba(239,227,216,0.65); line-height:1.3;}
.sidebar.collapsed .brand-name, .sidebar.collapsed .brand-sub{display:none;}

.sidebar-nav{display:flex; flex-direction:column; gap:2px;}
.sidebar-nav a{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:#E8DCCF; font-size:13.5px; font-weight:500;
}
.sidebar-nav a .ic{display:flex; align-items:center; justify-content:center; width:20px; flex-shrink:0;}
.sidebar-nav a:hover{background:rgba(255,255,255,0.08);}
.sidebar-nav a.active{background:var(--lime); color:var(--olive); font-weight:700;}
.sidebar-nav a.nav-cta{margin-top:12px; border:1px solid var(--lime); background:rgba(255,255,255,0.06); border-radius:10px; font-weight:700;}
.sidebar-nav a.nav-cta:hover{background:var(--lime); color:var(--olive);}
.sidebar.collapsed .sidebar-nav a{justify-content:center; padding:10px 6px;}
.sidebar.collapsed .sidebar-nav a .label{display:none;}
/* Nhóm menu cha/con (VOUCHER, Báo Cáo) */
.nav-group{display:block;}
.nav-group>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px; color:#E8DCCF; font-size:13.5px; font-weight:600;
}
.nav-group>summary::-webkit-details-marker{display:none;}
.nav-group>summary .ic{display:flex; align-items:center; justify-content:center; width:20px; flex-shrink:0;}
.nav-group>summary:hover{background:rgba(255,255,255,0.08);}
.nav-group>summary .nav-caret{margin-left:auto; font-size:11px; opacity:.7; transition:transform .2s;}
.nav-group[open]>summary .nav-caret{transform:rotate(90deg);}
.sidebar-nav a.subnav{padding-left:30px; font-size:13px; opacity:.94;}
.sidebar-nav a.subnav .ic{width:16px;}
.sidebar.collapsed .nav-group>summary{justify-content:center; padding:10px 6px;}
.sidebar.collapsed .nav-group>summary .label,
.sidebar.collapsed .nav-group>summary .nav-caret{display:none;}
.sidebar.collapsed .sidebar-nav a.subnav{padding-left:6px; justify-content:center;}

.sidebar-bottom{
  margin-top:auto; padding-top:12px; border-top:1px solid rgba(239,227,216,0.15);
  display:flex; flex-direction:column; gap:2px; flex-shrink:0;
}
.sidebar-account{
  display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:2px; border-radius:10px; color:inherit;
}
.sidebar-account:hover{background:rgba(255,255,255,0.08);}
.sidebar.collapsed .sidebar-account{justify-content:center; padding:8px 0;}
.account-avatar{
  width:28px; height:28px; border-radius:50%; background:var(--lime); color:var(--olive);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; flex-shrink:0;
}
.account-name{font-size:13px; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar.collapsed .account-name{display:none;}

.sidebar-bottom a{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:#E8DCCF; font-size:13.5px; font-weight:500;
}
.sidebar-bottom a .ic{display:flex; align-items:center; justify-content:center; width:20px; flex-shrink:0;}
.sidebar-bottom a:hover{background:rgba(255,255,255,0.08);}
.sidebar-bottom .logout-link{color:#F3B4A0;}
.sidebar-bottom .logout-link:hover{background:rgba(243,180,160,0.12);}
.sidebar.collapsed .sidebar-bottom a{justify-content:center; padding:10px 6px;}
.sidebar.collapsed .sidebar-bottom a .label{display:none;}

.main{flex:1; min-width:0; padding:26px 30px; max-width:1200px;}
.nav-hamburger{display:none; background:none; border:0; font-size:24px; line-height:1; cursor:pointer; padding:2px 8px; color:var(--olive); border-radius:8px;}
.nav-hamburger:hover{background:rgba(0,0,0,.05);}
.nav-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40;}
.nav-backdrop.show{display:block;}
.stat-ok{color:#2e9b57; font-size:18px; font-weight:700;}
.stat-no{color:#e5484d; font-size:18px; font-weight:700;}
.btn-manage .mg-ic{display:none;}
body{overflow-x:clip;}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.topbar h2{margin:0; font-size:22px;}
.user-chip{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted);}
.user-chip .logout{color:var(--danger); font-weight:600;}

.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .sidebar{position:fixed; z-index:50; transform:translateX(-100%); transition:transform .2s ease; height:100vh; width:250px;}
  .sidebar.collapsed{width:250px;}
  .sidebar.open{transform:translateX(0);}
  .sidebar.collapsed .label, .sidebar.collapsed .brand-name, .sidebar.collapsed .brand-sub, .sidebar.collapsed .account-name{display:block;}
  .sidebar-toggle{display:none;}
  .nav-hamburger{display:inline-block;}
  .main{padding:16px;}
  .topbar h2{font-size:18px;}
  .card{overflow-x:auto;}
  .user-chip{font-size:12px;}
  .btn-manage .mg-tx{display:none;}
  .btn-manage .mg-ic{display:inline;}
}


.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;}
.card:hover{box-shadow:var(--shadow-hover);}
.kpi .label{font-size:13px; color:var(--muted);}
.kpi .value{font-size:28px; font-weight:700; color:var(--olive); margin-top:4px;}
.kpi .icon{font-size:22px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
table th{text-align:left; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:2px solid #EFE3D0;}
table td{padding:10px 12px; border-bottom:1px solid #F3EAD9;}
.badge{padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600;}
.badge-active{background:#EAF1E1; color:var(--success);}
.badge-expired{background:#F7E2E5; color:var(--danger);}
.badge-suspended{background:#F6E4CC; color:var(--rust);}

.btn{display:inline-block; padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600; border:none; cursor:pointer;}
.btn-lime{background:var(--lime); color:var(--olive);}
.btn-outline{background:transparent; border:1.5px solid var(--olive); color:var(--olive);}
.btn-danger{background:#F7E2E5; color:var(--danger);}
.btn-sm{padding:6px 12px; font-size:12.5px;}

.section-title{font-size:15px; font-weight:700; margin:0 0 14px; color:var(--olive);}
.hint{font-size:12.5px; color:var(--muted); margin-top:4px;}

/* Collapse chú thích dùng chung toàn app (giống ô "Lưu ý" ở Voucher) */
.tips{margin:8px 0 16px; background:#f1f8ff; border:1px solid #d6e6f7; border-radius:14px; overflow:hidden;}
.tips>summary{cursor:pointer; list-style:none; padding:12px 18px; font-weight:600; color:#1565c0; font-size:13.5px;}
.tips>summary::-webkit-details-marker{display:none;}
.tips>summary::after{content:"▾"; float:right; transition:transform .2s; color:#1565c0;}
.tips[open]>summary::after{transform:rotate(180deg);}
.tips-body{padding:0 18px 14px; font-size:12.8px; color:#37474f; line-height:1.9;}
.tips-body b{color:#1f2d3d;}

/* Nút tăng/giảm cho input số (− [ô] +) — áp toàn app qua stepper.js */
.hs-stepper{display:inline-flex; align-items:stretch; vertical-align:middle; max-width:100%;}
.hs-stepper.full{display:flex; width:100%;}
.hs-stepper > input[type="number"]{text-align:center; border-radius:0 !important; -moz-appearance:textfield; position:relative; z-index:1;}
.hs-stepper.full > input[type="number"]{flex:1 1 auto; min-width:0;}
.hs-stepper > input[type="number"]::-webkit-inner-spin-button,
.hs-stepper > input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.hs-step-btn{flex:0 0 auto; width:28px; min-width:28px; border:1px solid #ddd; background:#f4f7fb; color:#1976D2;
  font-size:17px; font-weight:600; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none; transition:background .12s;}
.hs-step-btn:hover{background:#e3f0fc;}
.hs-step-btn:active{background:#bbdefb;}
.hs-step-btn.dec{border-radius:8px 0 0 8px; border-right:0;}
.hs-step-btn.inc{border-radius:0 8px 8px 0; border-left:0;}
@media (max-width:600px){ .hs-step-btn{width:34px; min-width:34px;} }
.key-box{
  display:flex; gap:8px; align-items:center; background:#F7EFDD; border:1px dashed #D8C99B;
  border-radius:10px; padding:10px 14px; font-family:monospace; font-size:13px; word-break:break-all;
}
.color-swatch{width:34px; height:34px; border-radius:8px; border:1px solid #ddd; cursor:pointer;}
.tabs{display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid #E5E9DB; flex-wrap:wrap;}
.tabs a{padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent;}
.tabs a.active{color:var(--olive); border-color:var(--lime);}

.active-site-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--cream), #FFFFFF); border:1px solid #E9DFC4;
  border-radius:12px; padding:10px 16px; margin:-8px 0 18px;
}
.asb-icon{font-size:16px;}
.asb-text{font-size:13.5px; color:var(--text); flex:1;}
.asb-text b{color:var(--olive);}
.asb-slug{font-size:11.5px; color:var(--muted); background:#fff; padding:2px 8px; border-radius:10px; margin-left:4px;}
.asb-switch{font-size:12.5px; font-weight:700; color:var(--olive); background:#fff; padding:6px 12px; border-radius:8px; border:1px solid #E9DFC4; white-space:nowrap;}
.asb-switch:hover{background:var(--lime);}

.chart-bars{display:flex; align-items:flex-end; gap:4px; height:120px; margin-top:10px;}
.chart-bar{flex:1; background:var(--lime); border-radius:4px 4px 0 0; min-height:2px; position:relative;}
.chart-bar:hover{opacity:.8;}
.chart-bar .bar-val{position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10.5px; color:var(--muted); white-space:nowrap;}
.chart-labels{display:flex; gap:4px; margin-top:6px;}
.chart-labels span{flex:1; text-align:center; font-size:10px; color:var(--muted);}
.chart-toggle{display:flex; gap:6px; margin-bottom:4px;}
.chart-toggle button{font-size:12px; padding:5px 12px; border-radius:8px; border:1px solid #E9DFC4; background:#fff; cursor:pointer; color:var(--muted);}
.chart-toggle button.on{background:var(--olive); color:#fff; border-color:var(--olive);}