/* Bảng màu sơn mài – Phường Kim Liên */
:root{
  --lacquer:#1C0A08; --lacquer-2:#2B110D; --lacquer-3:#3B1712;
  --cinnabar:#A51D1B; --cinnabar-deep:#6E1412;
  --gold:#C9A24B; --gold-soft:#E9D6A3; --gold-pale:#F5EBCF;
  --paper:#FBF6EA; --paper-2:#F3E9D2; --paper-line:#E2D3B1;
  --ink:#1D2F45; --ink-soft:#3E5671; --muted:#6B7F96;
  --bg:#F3F8FD; --surface:#FFFFFF; --soft:#E7F0F9; --line:#D5E3F0;
  --link:#2A62A0; --map-bg:var(--lacquer);
  --serif:"Playfair Display","Noto Serif",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0F1A28;--surface:#152335;--soft:#1C2E45;--line:#2A4060;--ink:#E6EEF8;--ink-soft:#BFD0E4;--muted:#8DA3BD;--link:#8EC0F2;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0F1A28;--surface:#152335;--soft:#1C2E45;--line:#2A4060;--ink:#E6EEF8;--ink-soft:#BFD0E4;--muted:#8DA3BD;--link:#8EC0F2;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#3F7FBE}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* thanh đầu trang */
header.top{display:flex;align-items:center;gap:18px;padding:10px 22px;flex-wrap:wrap;
  position:relative;background:var(--pat-lotus-w) 0 0/160px,linear-gradient(180deg,#4586C6,#336FAD);color:#fff;
  border-bottom:1px solid #A9CDEE;padding-bottom:10px}
header.top::after{display:none;content:"";position:absolute;left:0;right:0;bottom:3px;height:10px;background:var(--pat-band) 0 0/24px 10px repeat-x;opacity:.85;pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.brand .logo{width:46px;height:46px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.brand h1,.brand strong{margin:0;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.15;color:#FFFFFF;display:block;letter-spacing:.01em}
.brand p,.brand small{margin:2px 0 0;font-size:12.5px;color:rgba(255,255,255,.85);display:block}

.chip{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.chip .dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.chip[aria-pressed="true"]{background:rgba(255,255,255,.2);border-color:#fff}
.chip[aria-pressed="false"]{opacity:.45}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:6px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;line-height:1.2}
.btn:hover{border-color:#5B95CF}
.btn.primary{background:linear-gradient(180deg,#4A8BCB,#2F69A6);border-color:#2F69A6;color:#fff}
.btn.ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.26)}
.btn.small{padding:6px 11px;font-size:13px}
.btn.danger{color:#B4321F}
.pending{color:var(--muted);font-style:italic}
.draft-bar{background:var(--gold);color:var(--lacquer);font-size:13.5px;padding:7px 22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.draft-bar a{color:var(--lacquer);font-weight:700}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ===== Nền xanh dương nhẹ, trơn (đã bỏ họa tiết; muốn bật lại thì gán SVG vào các biến --pat-*) ===== */
:root{
  --pat-lotus:none;
  --pat-lotus-w:none;
  --pat-drum:none;
  --pat-drum-w:none;
  --pat-band:none;
  --festive-grad:radial-gradient(ellipse at 50% 30%,#FBFDFF 0%,#E3EFFA 42%,#CBE0F3 80%,#B9D4EE 100%);
}
.festive{
  background:var(--pat-drum) right -150px top -150px/540px no-repeat,
             var(--pat-drum) left -190px bottom -190px/640px no-repeat,
             var(--pat-lotus) 0 0/160px,
             var(--festive-grad);
}