@font-face{font-family:'Beautique Display';src:url('fonts/beautique-display-regular.woff2') format('woff2');font-weight:400;font-display:swap;}

:root{
  color-scheme:light;
  --primary:#732634; --primary-deep:#59202b; --accent:#f4b585; --accent-dark:#a65d30; --on-accent:#59202b;
  --bg:#f6eedf; --surface:#ffffff; --surface-2:#fbf6ec; --ink:#2f1b20; --muted:#6f5a5e; --line:#ecdfc8;
  --danger:#b3261e; --ok:#1d7a3e;
  /* màu dữ liệu – bảng categorical đã kiểm định (dataviz) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948;
  --grid:#ece4d6; --axis:#6f5a5e;
  --shadow:0 1px 2px rgba(47,27,32,.06),0 4px 16px rgba(47,27,32,.05);
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --primary:#e9a3ad; --primary-deep:#f3c4ca; --accent:#f4b585; --accent-dark:#f4b585; --on-accent:#3b1219;
    --bg:#1a1416; --surface:#241c1f; --surface-2:#2c2326; --ink:#f3ebe6; --muted:#c2b1b0; --line:#3d3134;
    --danger:#ff8a80; --ok:#6fd08f;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --grid:#342a2d; --axis:#c2b1b0; --shadow:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --primary:#e9a3ad; --primary-deep:#f3c4ca; --accent:#f4b585; --accent-dark:#f4b585; --on-accent:#3b1219;
  --bg:#1a1416; --surface:#241c1f; --surface-2:#2c2326; --ink:#f3ebe6; --muted:#c2b1b0; --line:#3d3134;
  --danger:#ff8a80; --ok:#6fd08f;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --grid:#342a2d; --axis:#c2b1b0; --shadow:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 'Be Vietnam Pro',system-ui,sans-serif;}
[hidden]{display:none !important}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
h1,h2,h3{margin:0;font-weight:400}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* thanh trên */
.topbar{background:#732634;color:#fff;position:sticky;top:0;z-index:20}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.brand img{flex:none;border-radius:8px}
.brand span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand strong{font-weight:600;font-size:16px}
.brand small{color:#f4b585;font-size:12px}
.userbox{display:flex;align-items:center;gap:10px;min-width:0}
.who{display:flex;flex-direction:column;text-align:right;line-height:1.2;min-width:0}
.who b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.who small{color:#f4b585;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.topbar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.1)}

main{padding:24px 0 64px}
.loading{padding:80px 0;text-align:center;color:var(--muted)}

/* tiêu đề 2 dòng cùng cỡ, căn trái */
.head{margin:8px 0 16px}
.head h2,.auth-intro h1{font-family:'Beautique Display',Georgia,serif;font-size:clamp(26px,4vw,38px);line-height:1.15;color:var(--primary)}
.head h2 span,.auth-intro h1 span{text-transform:uppercase}
.head p,.auth-intro p{margin:8px 0 0;color:var(--muted)}
h3{font-size:17px;font-weight:600;margin-bottom:12px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}

/* nút & form */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;min-height:44px;transition:background .15s,opacity .15s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#efa46b}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:6px 12px;min-height:36px;font-size:14px}
.btn-block{width:100%}
.btn-link{background:none;border:0;color:var(--accent-dark);font:inherit;font-weight:600;cursor:pointer;padding:4px 6px}
.form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--muted)}
input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
input:focus,select:focus,.btn:focus-visible,.tab:focus-visible,.chip:focus-visible{outline:2px solid var(--accent-dark);outline-offset:1px}
.hint{font-weight:400;font-size:12px}
.msg{margin:0;min-height:1.2em;font-size:14px;color:var(--danger)}
.msg.ok{color:var(--ok)}

/* đăng nhập */
.auth{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;padding:40px 0}
.auth-intro p{max-width:none}
.auth-card{padding:24px}
.google-box{margin:18px 0 4px}
#google-btn{display:flex;justify-content:center;min-height:44px}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:16px 0 4px}
.divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--line)}
.auth .form{margin-top:16px}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:10px 16px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;min-height:44px}
.tab.is-active{color:var(--primary);border-bottom-color:var(--accent)}
.tabs-main{margin-bottom:12px}

/* thanh công cụ nhập */
.toolbar,.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.toolbar label,.filters label{width:auto;min-width:160px}
.day-nav{display:flex;gap:8px}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer;min-height:36px}
.chip.is-active{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:16px;flex-wrap:wrap}
.actions .msg{flex:1}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.row-between h3{margin:0}

/* bảng */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2)}
.tbl th.num,.tbl td.num{text-align:right}
.tbl tfoot td{font-weight:700;background:var(--surface-2)}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl .sub{display:block;font-size:12px;color:var(--muted);font-weight:400}
.tbl .muted{color:var(--muted)}
.tbl .empty{color:var(--muted);text-align:center;padding:24px}
.tbl input{min-height:40px;padding:8px 10px}
.tbl-entry td{vertical-align:middle}
.tbl-entry input.n{text-align:right;min-width:90px}
.tbl-entry input.money{min-width:150px}
.tbl-entry input.note{min-width:160px}
.tbl-entry input.invalid{border-color:var(--danger)}
.tbl-daily tr.nodata td{color:var(--muted)}
.ch-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}
.tag-warn{display:inline-block;font-size:12px;color:var(--danger);font-weight:600}

/* dải lũy kế dưới form nhập */
.cum-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cum-strip .k{font-size:12px;color:var(--muted)}
.cum-strip .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.cum-strip .cap{grid-column:1/-1;font-size:13px;color:var(--muted)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .k{font-size:13px;color:var(--muted)}
.kpi .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3;word-break:break-word}
.kpi .d{font-size:12px;color:var(--muted)}

/* biểu đồ */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:0}
.chart{margin:0 0 0}
.chart figcaption{font-weight:600;font-size:15px;margin-bottom:10px}
.chart figcaption small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.cbox{position:relative;height:260px}
.charts + .card{margin-top:16px}

/* admin */
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.inline-add{display:flex;gap:8px;margin-bottom:12px}
.inline-add input{flex:1}
.tbl select{min-height:36px;padding:4px 8px;min-width:140px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1100px){ .kpis{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){
  .auth{grid-template-columns:1fr;gap:20px;padding:16px 0}
  .charts,.admin-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  main{padding-top:16px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi .v{font-size:18px}
  .toolbar label,.filters label{min-width:0;flex:1 1 140px}
  .brand small{display:none}
  .who small{display:none}
  .who b{max-width:110px}
  .card{padding:14px}
  .cbox{height:230px}
  .actions .btn{width:100%}
}

/* Page đang chạy quảng cáo */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pages-block{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pages-block h3{margin-bottom:4px}
.pages-hint{margin:0 0 10px;font-size:13px;color:var(--muted)}
.pages-hint.prefill{color:var(--accent-dark);font-weight:500}
.tbl-pages select{min-width:130px}
.tbl-pages input.p-name{min-width:200px}
.tbl-pages input.p-url{min-width:240px}
.tbl-pages td:last-child{width:44px}
.btn-icon{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:8px}
.btn-icon:hover{background:var(--surface-2);color:var(--danger)}
#pages-add{margin-top:10px}
.tbl a{color:var(--accent-dark);word-break:break-all;white-space:normal}

/* Góp ý */
.tab .count{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--danger);color:#fff;font-size:12px;line-height:20px;text-align:center;margin-left:4px}
.fb-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;align-items:start}
.fb-grid .form h3{margin-bottom:0}
textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;resize:vertical;min-height:120px}
textarea:focus{outline:2px solid var(--accent-dark);outline-offset:1px}
.fb-filters{margin-bottom:12px}
.fb-item{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.fb-item.st-new{border-left-color:var(--accent)}
.fb-item.st-doing{border-left-color:var(--s1)}
.fb-item.st-done{border-left-color:var(--ok)}
.fb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-bottom:6px}
.fb-meta b{color:var(--ink);font-weight:600}
.fb-meta .urgent{color:var(--danger);font-weight:600}
.fb-content{white-space:pre-wrap;word-break:break-word}
.fb-reply{margin-top:10px;padding:10px 12px;background:var(--surface-2);border-radius:10px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.fb-reply .who-r{display:block;font-size:12px;color:var(--muted);margin-bottom:2px;white-space:normal}
.fb-admin{display:grid;grid-template-columns:180px 1fr auto;gap:8px;margin-top:10px;align-items:start}
.fb-admin textarea{min-height:44px}
.fb-empty{color:var(--muted);padding:24px;text-align:center}
@media (max-width:860px){ .fb-grid{grid-template-columns:1fr} .fb-admin{grid-template-columns:1fr} }
@media (max-width:560px){ .hide-sm{display:none} .tab{padding:10px 12px} }

/* Trang đăng nhập: ảnh phối cảnh + mô tả */
#view-auth.auth{align-items:start;grid-template-columns:minmax(0,1fr) 420px;padding-top:24px}
#view-auth .auth-card{position:sticky;top:88px}
.auth-photo{margin:0 0 22px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--line);box-shadow:var(--shadow)}
.auth-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
@media (max-width:860px){
  #view-auth.auth{grid-template-columns:1fr}
  #view-auth .auth-card{position:static}
  }
@media (max-width:560px){
  .auth-photo{margin:0 -16px 18px;border-radius:0;aspect-ratio:3/2;box-shadow:none}
}
@media (max-width:860px){
  #view-auth .auth-intro{display:contents}
  #view-auth .auth-photo{order:1;margin-bottom:0}
  #view-auth .auth-intro h1{order:2}
  #view-auth .auth-intro > p{order:3;margin-top:-8px}
  #view-auth .auth-card{order:4}
  #view-auth }

/* nút hiện/ẩn mật khẩu */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:48px}
.pw-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer}
.pw-toggle:hover{color:var(--primary);background:var(--surface-2)}
.pw-toggle:focus-visible{outline:2px solid var(--accent-dark);outline-offset:1px}