/* cc-admin-ui.css v1 – giao diện admin Kilnify (chỉ áp dụng khi <html class="cc-admin">) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
html.cc-admin{--ac:#8b4f1f;--ac2:#b8722e;--ink:#0f172a;--mut:#64748b;--line:#e8ecf2;--side:#14110f}
html.cc-admin body{background:#f5f6f8!important;color:var(--ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif!important;-webkit-font-smoothing:antialiased}
html.cc-admin #root>div{background:#f5f6f8}

/* ── Sidebar ── */
html.cc-admin aside{width:248px!important;background:linear-gradient(180deg,#1b1613,#120f0d)!important;border:0!important;box-shadow:none!important;color:#d6cfc8}
html.cc-admin aside>div:first-child{padding:22px 20px 16px!important;border:0!important}
html.cc-admin aside>div:first-child>div:first-child{color:#fff!important;font-family:Inter,sans-serif!important;font-weight:800;font-size:19px;letter-spacing:-.02em}
html.cc-admin aside>div:first-child>div:last-child{color:#a3835f!important;text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:600;margin-top:3px}
html.cc-admin aside nav{padding:6px 12px!important}
html.cc-admin aside nav a{border-radius:10px!important;padding:10px 12px!important;font-size:13.5px;font-weight:500;color:#c9c0b7!important;background:transparent!important;margin-bottom:2px;position:relative;transition:background .15s,color .15s}
html.cc-admin aside nav a span{width:22px;text-align:center;font-size:15px;filter:saturate(.8)}
html.cc-admin aside nav a:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
html.cc-admin aside nav a[class*="bg-ceramic-100"]{background:rgba(212,146,74,.18)!important;color:#fff!important;font-weight:600}
html.cc-admin aside nav a[class*="bg-ceramic-100"]::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#e8b87a}
html.cc-admin aside>div:last-child{border:0!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:12px!important}
html.cc-admin aside>div:last-child *{color:#b9afa5!important}
html.cc-admin aside>div:last-child a:hover,html.cc-admin aside>div:last-child button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
html.cc-admin aside nav::-webkit-scrollbar{width:6px}html.cc-admin aside nav::-webkit-scrollbar-thumb{background:#3a322c;border-radius:6px}

/* ── Nội dung ── */
html.cc-admin main{background:transparent!important}
html.cc-admin main>div{max-width:1280px;margin:0 auto;padding:32px 36px!important}
html.cc-admin main h1{font-size:26px!important;font-weight:800!important;letter-spacing:-.025em;color:var(--ink)}
html.cc-admin main h2{letter-spacing:-.01em}
html.cc-admin main [class*="rounded-2xl"],html.cc-admin main [class*="rounded-xl"][class*="bg-white"]{border-radius:16px!important}
html.cc-admin main .bg-white{background:#fff;border-color:var(--line)!important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.04)}
html.cc-admin main .grid>[class*="border-amber-200"],html.cc-admin main .grid>[class*="border-green-200"],html.cc-admin main .grid>[class*="border-blue-200"],html.cc-admin main .grid>[class*="border-purple-200"]{background:#fff!important;border-color:var(--line)!important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.05);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
html.cc-admin main .grid>[class*="border-amber-200"]:hover,html.cc-admin main .grid>[class*="border-green-200"]:hover,html.cc-admin main .grid>[class*="border-blue-200"]:hover,html.cc-admin main .grid>[class*="border-purple-200"]:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(16,24,40,.09)}
html.cc-admin main .grid>[class*="border-amber-200"]::after,html.cc-admin main .grid>[class*="border-green-200"]::after,html.cc-admin main .grid>[class*="border-blue-200"]::after,html.cc-admin main .grid>[class*="border-purple-200"]::after{content:"";position:absolute;left:0;right:0;top:0;height:3px}
html.cc-admin main .grid>[class*="border-amber-200"]::after{background:#f59e0b}html.cc-admin main .grid>[class*="border-green-200"]::after{background:#10b981}
html.cc-admin main .grid>[class*="border-blue-200"]::after{background:#3b82f6}html.cc-admin main .grid>[class*="border-purple-200"]::after{background:#8b5cf6}
html.cc-admin main .grid>[class*="border-"] .text-3xl{font-size:22px!important;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#f6f1ea;border-radius:12px}
html.cc-admin main .grid>[class*="border-"] .text-2xl{font-size:28px!important;font-weight:800!important;letter-spacing:-.03em}
html.cc-admin main .text-xs.text-gray-500{text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ── Bảng ── */
html.cc-admin main table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
html.cc-admin main thead th,html.cc-admin main th{background:#faf8f5!important;color:var(--mut)!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.07em;padding:12px 16px!important;border-bottom:1px solid var(--line)!important;text-align:left}
html.cc-admin main td{padding:13px 16px!important;border-bottom:1px solid #f1f3f6!important;vertical-align:middle}
html.cc-admin main tbody tr{transition:background .12s}html.cc-admin main tbody tr:hover{background:#fcfaf7}

/* ── Form & nút ── */
html.cc-admin main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),html.cc-admin main select,html.cc-admin main textarea{border:1px solid #d9dee6!important;border-radius:10px!important;background:#fff;padding:9px 12px;font-size:14px;transition:border-color .15s,box-shadow .15s}
html.cc-admin main input:focus,html.cc-admin main select:focus,html.cc-admin main textarea:focus{outline:none!important;border-color:var(--ac2)!important;box-shadow:0 0 0 4px rgba(184,114,46,.15)!important}
html.cc-admin main label{font-weight:600;color:#334155}
html.cc-admin main button{border-radius:10px;font-weight:600;transition:transform .1s,box-shadow .15s,background .15s}
html.cc-admin main button:active{transform:scale(.98)}
html.cc-admin main button[class*="bg-ceramic-7"],html.cc-admin main button[class*="bg-ceramic-8"],html.cc-admin main button[class*="bg-ceramic-6"]{background:linear-gradient(135deg,#a05a22,#6b3a15)!important;color:#fff!important;box-shadow:0 2px 8px rgba(107,58,21,.28)}
html.cc-admin main button[class*="bg-ceramic-7"]:hover,html.cc-admin main button[class*="bg-ceramic-8"]:hover{box-shadow:0 4px 14px rgba(107,58,21,.38)}
html.cc-admin main img{border-radius:10px}
html.cc-admin main a[class*="text-ceramic"]{font-weight:600}
html.cc-admin main [class*="rounded-full"][class*="text-xs"],html.cc-admin main span[class*="rounded-full"]{font-weight:600}

/* Gợi ý nhận diện ID Analytics */
.cc-id-hint{margin-top:6px;font-size:12px;font-weight:600;display:flex;gap:6px;align-items:center}
.cc-id-hint.ok{color:#047857}.cc-id-hint.no{color:#b45309}

/* ── Mobile ── */
#cc-burger,#cc-scrim{display:none}
@media (max-width:1023px){
  html.cc-admin aside{position:fixed!important;left:0;top:0;z-index:60;transform:translateX(-102%);transition:transform .25s ease;height:100vh!important;box-shadow:0 0 40px rgba(0,0,0,.4)!important}
  html.cc-admin.cc-nav-open aside{transform:none}
  html.cc-admin #cc-burger{display:flex;position:fixed;top:12px;left:12px;z-index:50;width:42px;height:42px;border:0;border-radius:12px;background:#1b1613;color:#fff;font-size:20px;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  html.cc-admin.cc-nav-open #cc-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(15,10,6,.5);backdrop-filter:blur(2px)}
  html.cc-admin main>div{padding:68px 16px 24px!important}
  html.cc-admin main table{display:block;overflow-x:auto;white-space:nowrap}
}