/* Giao diện chung cho khu Cộng tác viên và các trang quản trị CTV */
:root{
  --bg:#f5f7f7;--surface:#fff;--ink:#16202e;--ink-2:#3b4656;--muted:#6b7684;--faint:#9aa3ae;
  --line:#e6eaee;--line-2:#f1f4f5;
  --green:#16a86a;--green-hover:#11925b;--green-dark:#0d7a4b;--green-soft:#e6f6ee;
  --amber:#b26a07;--amber-soft:#fff3dc;--blue:#2a4f9c;--blue-soft:#eef4ff;--violet:#6957d6;--violet-soft:#efedfb;
  --red:#c2414b;--red-soft:#fdecee;--momo:#a50064;--momo-soft:#fbeaf3;--yt:#e62117;
  --shadow-sm:0 1px 3px rgba(17,24,39,.06);--shadow-md:0 10px 30px -12px rgba(17,24,39,.14);
  --font-head:"Lexend","Be Vietnam Pro",system-ui,sans-serif;--side:260px
}
*{box-sizing:border-box}
body{margin:0;font:14.5px/1.55 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
[hidden]{display:none!important}

/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;z-index:40;transition:transform .25s ease;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:4px 10px 20px;border-bottom:1px solid var(--line)}
.brand-mark{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#22c27f,#12a062);color:#fff;box-shadow:0 6px 14px -4px rgba(22,168,106,.5)}
.brand-name{display:block;font:600 17px/1.2 var(--font-head);letter-spacing:-.3px}
.brand-accent{color:var(--green)}
.brand-cap{display:block;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.8px;color:var(--faint)}
.nav-title{padding:22px 12px 8px;font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:10px;color:var(--ink-2);font-weight:500;transition:background .15s,color .15s}
.nav-link svg{color:var(--faint);flex:0 0 auto}
.nav-link:hover{background:var(--line-2);color:var(--ink)}
.nav-link.active{background:var(--green-soft);color:var(--green-dark);font-weight:600}
.nav-link.active svg{color:var(--green)}
.nav-badge{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--momo);color:#fff;font-size:11.5px;font-weight:600;text-align:center}
.side-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.side-card{padding:14px;border-radius:12px;background:linear-gradient(140deg,#0d3b2a,#1f6b4c);color:#d4efe2;font-size:12.5px;line-height:1.55;margin-bottom:10px}
.side-card strong{display:block;color:#fff;font:600 14px var(--font-head);margin-bottom:2px}
.inline-form{margin:0}
.logout{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--red);font-weight:500;cursor:pointer;text-align:left}
.logout:hover{background:var(--red-soft)}

/* Main */
.main{margin-left:var(--side);min-width:0}
.topbar{position:sticky;top:0;z-index:30;height:68px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.top-left{display:flex;align-items:center;gap:12px;min-width:0}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);cursor:pointer;place-items:center;flex-shrink:0}
.crumb{font-size:12.5px;color:var(--muted)}
.top-title{margin:2px 0 0;font:600 18px/1.2 var(--font-head);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:10px}
.chip-user{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green-dark);font:600 15px var(--font-head);flex-shrink:0}
.chip-user b{display:block;font-size:13px;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-user span{display:block;font-size:12px;color:var(--muted)}
.content{max-width:1320px;margin:0 auto;padding:26px 32px 48px}
.overlay{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 18px -8px rgba(22,168,106,.75)}
.btn-primary:hover{background:var(--green-hover)}
.btn-light{background:#fff;color:var(--ink-2);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-light:hover{border-color:#cfd6dc;color:var(--ink)}
.btn-danger{background:#fff;color:var(--red);border:1px solid #f3c7cc}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.btn-block{width:100%;height:48px;font-size:15px}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Alerts */
.alert{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:12px;margin-bottom:18px;font-size:14px}
.alert svg{flex:0 0 auto;margin-top:1px}
.alert.err{background:var(--red-soft);color:#8f2b33;border:1px solid #f6cdd2}
.alert.ok{background:var(--green-soft);color:#0f5e3b;border:1px solid #bfe5d1}
.alert.info{background:var(--blue-soft);color:var(--blue);border:1px solid #d3e1fb}
.alert.warn{background:var(--amber-soft);color:#7a4a06;border:1px solid #f6dfae}

/* Page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h2{margin:0 0 4px;font:600 24px/1.25 var(--font-head);letter-spacing:-.6px}
.page-head p{margin:0;color:var(--muted)}
.welcome{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 26px;margin-bottom:22px;border-radius:18px;border:1px solid #d6efe2;background:linear-gradient(120deg,#e9f6ef 0%,#f1f9f5 60%,#fff 100%)}
.welcome h2{margin:0 0 6px;font:600 23px/1.25 var(--font-head);letter-spacing:-.6px}
.welcome p{margin:0;color:var(--muted)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.stat{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.stat-label{font-size:13px;color:var(--muted);font-weight:500}
.stat-value{margin-top:8px;font:600 26px/1.1 var(--font-head);letter-spacing:-.6px}
.stat-note{margin-top:8px;font-size:12px;color:var(--faint)}
.stat-ic{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.stat.hero{background:linear-gradient(130deg,#0d3b2a,#1f6b4c 60%,#2e8562);border-color:transparent;color:#fff}
.stat.hero .stat-label,.stat.hero .stat-note{color:#bfe5d1}
.stat.hero .stat-ic{background:rgba(255,255,255,.14);color:#fff}
.ic-green{background:var(--green-soft);color:var(--green)}.ic-violet{background:var(--violet-soft);color:var(--violet)}
.ic-amber{background:var(--amber-soft);color:var(--amber)}.ic-blue{background:var(--blue-soft);color:var(--blue)}.ic-momo{background:var(--momo-soft);color:var(--momo)}

/* Panels & tables */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-head h3{margin:0;font:600 16px/1.3 var(--font-head);letter-spacing:-.2px}
.panel-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.panel-body{padding:20px}
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead{background:#fafbfb}
th{padding:12px 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
td{padding:13px 14px;border-top:1px solid var(--line-2);vertical-align:middle;color:var(--ink-2)}
tbody tr:hover{background:#f8fbf9}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.strong{font-weight:600;color:var(--ink)}
.sub{font-size:12px;color:var(--faint)}
.empty{padding:44px 16px;text-align:center;color:var(--muted)}
.empty .big{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.empty strong{display:block;margin-bottom:6px;color:var(--ink);font:600 16px var(--font-head)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--line-2);border:1px solid var(--line);overflow-x:auto}
.tab{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:500;white-space:nowrap}
.tab b{font-size:11.5px;padding:1px 7px;border-radius:999px;background:#e3e8ec;color:var(--ink-2)}
.tab.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.tab.active b{background:var(--green-soft);color:var(--green-dark)}
.tab.hot b{background:var(--momo);color:#fff}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-approved,.b-active,.b-paid{background:var(--green-soft);color:var(--green-dark)}
.b-pending{background:var(--momo-soft);color:var(--momo)}
.b-draft{background:var(--line-2);color:var(--muted)}
.b-rejected,.b-blocked{background:var(--red-soft);color:var(--red)}
.b-live{background:var(--blue-soft);color:var(--blue)}

/* Forms */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.full{grid-column:1/-1}
.field label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.req{color:var(--red);margin-left:2px}
.counter{font-size:12px;font-weight:400;color:var(--faint)}
.control{position:relative}
.control>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.control .suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--faint);pointer-events:none}
.input,input.input,textarea.input,select.input{display:block;width:100%;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.control>svg~.input{padding-left:40px}
.control .input.has-suffix{padding-right:52px}
textarea.input{height:auto;min-height:140px;padding:11px 13px;line-height:1.6;resize:vertical}
.input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(22,168,106,.12)}
.input::placeholder{color:#a9b1bb}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hint{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.hint b{color:var(--ink-2);font-weight:600}

/* Editor (mô tả có ảnh) */
.editor{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.editor:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(22,168,106,.12)}
.ed-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px;border-bottom:1px solid var(--line);background:var(--line-2)}
.ed-tabs,.ed-tools{display:flex;gap:4px;align-items:center}
.ed-tab,.ed-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.ed-tab.active{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.ed-btn{background:#fff;border-color:var(--line);color:var(--ink-2)}
.ed-btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.ed-btn.primary:hover{background:var(--green-hover)}
.ed-write{position:relative}
.editor textarea{display:block;width:100%;min-height:240px;padding:12px 14px;border:0;outline:none;resize:vertical;line-height:1.65;font-size:14.5px;color:var(--ink)}
.ed-drop{position:absolute;inset:6px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--green);border-radius:10px;background:rgba(230,246,238,.92);color:var(--green-dark);pointer-events:none}
.ed-write.drag .ed-drop{display:flex}
.ed-preview{min-height:240px;max-height:560px;overflow:auto;padding:14px 16px;line-height:1.75;color:var(--ink-2);overflow-wrap:anywhere}
.ed-foot{padding:8px 12px;border-top:1px solid var(--line);background:#fcfdfd;font-size:12px;color:var(--muted)}
.ed-foot code,.mono{font:12px "JetBrains Mono",ui-monospace,Consolas,monospace;background:var(--line-2);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.ok-text{color:var(--green-dark)}.bad-text{color:var(--red)}
.desc-render figure,.ed-preview figure{margin:14px 0}
.desc-render img,.ed-preview img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.desc-render figcaption,.ed-preview figcaption{margin-top:6px;font-size:12.5px;color:var(--muted);text-align:center}
.desc-render{line-height:1.75;color:var(--ink-2);overflow-wrap:anywhere}

/* Dropzone */
.drop{position:relative;display:grid;place-items:center;gap:6px;padding:26px 18px;text-align:center;border:1.5px dashed #cfd8df;border-radius:14px;background:#fbfcfc;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.drag{border-color:var(--green);background:#f3fbf7}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.drop strong{font:600 15px var(--font-head)}
.drop p{margin:0;font-size:12.5px;color:var(--muted)}
.filebox{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--line-2)}
.filebox .ic{flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#0d3b2a,#1f6b4c 55%,#2e8562)}
.filebox b{display:block;font-weight:600;overflow-wrap:anywhere}

/* Two columns */
.columns{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.stack{display:grid;gap:20px}
.aside{position:sticky;top:88px;display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:20px}
.card h3{margin:0 0 12px;font:600 15px var(--font-head)}
.kv{display:grid;gap:2px}
.kv div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.kv div:last-child{border:0}
.kv span{color:var(--muted)}.kv b{font-weight:600;text-align:right;overflow-wrap:anywhere}

/* Auth (đăng nhập / đăng ký) */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(900px 500px at 10% -10%,#dff3e8,transparent 60%),radial-gradient(700px 500px at 110% 110%,#e3f1ec,transparent 60%),#f2f6f4;font-size:15px}
.auth{width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px -30px rgba(13,59,42,.35)}
.auth-visual{position:relative;overflow:hidden;padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(140,220,185,.35),transparent 40%),linear-gradient(150deg,#0b2f22 0%,#0f4a33 55%,#1c7a52 100%)}
.auth-visual .brand{border:0;padding:0;color:#fff}
.auth-visual .brand-accent{color:#7be3b0}
.auth-visual h1{margin:14px 0 10px;font:700 30px/1.2 var(--font-head);letter-spacing:-.8px}
.auth-visual h1 span{color:#7be3b0}
.auth-visual p{margin:0;color:#bfe0d0;font-size:14.5px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#c9efdc;font-size:12.5px;font-weight:500}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#7be3b0}
.feat{display:flex;align-items:center;gap:12px;padding:11px 13px;margin-top:10px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#e3f5ec}
.feat span{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#7be3b0}
.auth-form{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.auth-form h2{margin:0 0 6px;font:600 25px/1.25 var(--font-head);letter-spacing:-.6px}
.auth-form .lead{margin:0 0 22px;color:var(--muted);font-size:14px}
.auth-form .field{margin-bottom:14px}
.auth-form .input{height:48px}
.auth-links{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.auth-links a{color:var(--green-dark);font-weight:600}

/* Responsive */
@media(max-width:1200px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1080px){.columns{grid-template-columns:1fr}.aside{position:static}}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-md)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .overlay{display:block;position:fixed;inset:0;z-index:35;background:rgba(17,24,39,.35)}
  .main{margin-left:0}.menu-btn{display:grid}
  .topbar{padding:0 18px}.content{padding:20px 18px 40px}
}
@media(max-width:820px){.auth{grid-template-columns:1fr}.auth-visual{padding:24px}.auth-visual .feats,.auth-visual .vfoot{display:none}.auth-visual h1{font-size:23px}.auth-form{padding:28px 22px}}
@media(max-width:640px){
  .crumb,.chip-user .who,.top-actions .btn-light span{display:none}
  .chip-user{padding-left:10px}
  .grid2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:16px}.stat-ic{display:none}.stat-value{font-size:21px}
  .panel-head,.panel-body{padding-left:16px;padding-right:16px}
  .auth-body{padding:14px;place-items:start center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}