:root { --maroon: #5b1517; --wine: #3a0e11; --gold: #e2b04e; --gold-deep: #8a5f0e; --paper: #f4f0ec; --card: #fffefc; --ink: #261719; --muted: #76675f; --line: #e2d8d2; --tint: #ebe3dd; --jade: #1d5b54; --red: #a02424; --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Fraunces', Georgia, serif; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14.5px/1.5 var(--sans); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.ah { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: 58px; padding: 0 20px; background: var(--maroon); border-bottom: 3px solid var(--gold); color: #f6ece4; }
.ah-brand { display: flex; align-items: baseline; gap: 12px; }
.mark { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--gold); line-height: 1; }
.ah-title { font-size: 14px; color: #e6cfc4; }
.ah-state { margin-left: 8px; font-size: 13px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.ah-state.dirty { background: var(--gold); color: var(--wine); font-weight: 600; }
.ah-act { margin-left: auto; display: flex; gap: 10px; }

.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--maroon); background: var(--maroon); color: #fff6ee; font-weight: 600; font-size: 14px; border-radius: 3px; text-decoration: none; white-space: nowrap; }
.abtn:hover { background: var(--wine); }
.abtn.ghost { background: transparent; color: var(--maroon); }
.abtn.ghost:hover { background: rgba(91, 21, 23, .08); }
.ah .abtn.ghost { color: #f6ece4; border-color: rgba(246, 236, 228, .5); }
.ah .abtn.ghost:hover { background: rgba(255, 255, 255, .12); }
.abtn.gold { background: var(--gold); border-color: var(--gold); color: var(--wine); }
.abtn.gold:hover { background: #f0c46a; }
.abtn.danger { background: transparent; color: var(--red); border-color: #d9b3b3; }
.abtn.danger:hover { background: #fbeeee; }
.abtn.sm { padding: 5px 10px; font-size: 13px; }
.abtn[disabled] { opacity: .45; cursor: not-allowed; }

.alayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 61px); }
.anav { background: var(--card); border-right: 1px solid var(--line); padding: 16px 0; position: sticky; top: 61px; align-self: start; height: calc(100vh - 61px); }
.anav button { display: block; width: 100%; text-align: left; padding: 11px 22px; border: 0; border-left: 4px solid transparent; background: transparent; font-weight: 500; }
.anav button:hover { background: var(--paper); }
.anav button.on { border-left-color: var(--gold); background: var(--paper); color: var(--maroon); font-weight: 600; }
.anav .n { float: right; font-size: 12px; color: var(--muted); font-weight: 400; }
.amain { padding: 26px 30px 60px; min-width: 0; outline: none; }
.amain > h1 { font-size: 26px; color: var(--maroon); margin-bottom: 4px; }
.lead { margin: 0 0 20px; color: var(--muted); max-width: 70ch; }

.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.list { background: var(--card); border: 1px solid var(--line); border-radius: 3px; max-height: calc(100vh - 190px); overflow: auto; position: sticky; top: 80px; }
.list-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.li { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.li:hover { background: var(--paper); }
.li.on { background: #fbf2de; box-shadow: inset 3px 0 0 var(--maroon); }
.li img, .li .ph { width: 38px; height: 48px; object-fit: cover; background: var(--tint); border-radius: 2px; flex: none; }
.li .t { flex: 1; min-width: 0; font-weight: 500; line-height: 1.3; }
.li .t small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--tint); color: #4a3a38; white-space: nowrap; }
.pill.hidden { background: #efe2e2; color: var(--red); }
.pill.soldout { background: #fbf2de; color: var(--gold-deep); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 20px 22px; margin-bottom: 18px; }
.card > h2 { font-size: 19px; color: var(--maroon); margin-bottom: 14px; }
.card > h2 small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.form-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.form-head h2 { font-size: 24px; color: var(--maroon); margin-right: auto; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.span2 { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f > span { font-weight: 600; font-size: 13.5px; }
.f > em { font-style: normal; font-size: 12.5px; color: var(--muted); }
input[type=text], input[type=number], input[type=url], input[type=password], input[type=search], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid #d3c6bf; background: #fff; border-radius: 3px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(226, 176, 78, .35); }
textarea { resize: vertical; line-height: 1.5; }
textarea.mono { font-size: 14px; line-height: 1.65; }
input[type=color] { width: 56px; height: 38px; padding: 2px; border: 1px solid #d3c6bf; border-radius: 3px; background: #fff; }
.chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.chk input { width: 17px; height: 17px; accent-color: var(--maroon); margin: 0; }
.tones { display: flex; flex-wrap: wrap; gap: 8px; }
.tone { padding: 5px 12px; border: 1px solid #d3c6bf; border-radius: 99px; background: #fff; font-size: 13.5px; }
.tone.on { background: var(--maroon); border-color: var(--maroon); color: #fff6ee; }

.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.imc { border: 1px solid var(--line); background: #fff; border-radius: 3px; overflow: hidden; }
.imc img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--tint); }
.imc .bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.imc .tag { padding: 3px 8px; font-size: 12px; background: var(--maroon); color: #fff6ee; }
.imc .src { padding: 0 8px 6px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop { display: grid; place-items: center; min-height: 150px; border: 2px dashed #cdb9ae; border-radius: 3px; background: #fffaf2; text-align: center; padding: 12px; color: var(--muted); }
.drop.over { border-color: var(--maroon); background: #fbf2de; }
.drop b { color: var(--maroon); }
.drop input { display: none; }

table.rows { width: 100%; border-collapse: collapse; }
table.rows th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.rows td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rows input[type=text], table.rows input[type=number], table.rows select { padding: 6px 8px; }
table.rows .num { width: 112px; }
table.rows .chs { display: flex; gap: 10px; white-space: nowrap; }
table.rows .acts { white-space: nowrap; text-align: right; }
.tbl-scroll { overflow-x: auto; }

.help { padding: 12px 16px; background: #eaf1ee; border-left: 3px solid var(--jade); font-size: 13.5px; margin-bottom: 14px; }
.help code { background: #fff; padding: 1px 7px; border-radius: 2px; font-size: 13px; font-family: var(--sans); font-weight: 600; color: var(--maroon); }
.help ul { margin: 6px 0 0; padding-left: 18px; }
.warn { padding: 12px 16px; background: #fbf2de; border-left: 3px solid var(--gold); margin-bottom: 14px; font-size: 14px; }
.warn.bad { background: #fbeeee; border-color: var(--red); }
.pol-prev { padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 3px; max-height: 520px; overflow: auto; }
.pol-prev h3 { font-size: 18px; margin: 18px 0 6px; } .pol-prev h3:first-child { margin-top: 0; }
.pol-prev h4 { font-size: 15px; margin: 12px 0 4px; }
.pol-prev p { margin: 6px 0; } .pol-prev ul { margin: 4px 0; padding-left: 20px; } .pol-prev li::marker { color: var(--gold-deep); }
.pol-prev .note { padding: 10px 14px; background: #fbf2de; border-left: 3px solid var(--gold); }

.pv-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.pv-wrap { background: var(--tint); padding: 14px; border-radius: 3px; display: flex; justify-content: center; }
.pv-wrap iframe { width: 100%; height: calc(100vh - 220px); min-height: 520px; border: 1px solid var(--line); background: #fff; border-radius: 3px; }
.pv-wrap.mobile iframe { width: 390px; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 12px 38px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--maroon); color: var(--gold); font-weight: 600; font-size: 13px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; padding: 11px 20px; background: var(--wine); color: #fff6ee; border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); max-width: 90vw; }
.toast.bad { background: var(--red); }
.login { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(36, 10, 12, .8); padding: 16px; }
.login-box { width: min(380px, 100%); background: var(--paper); padding: 26px; border-radius: 3px; display: flex; flex-direction: column; gap: 12px; }
.login-box h2 { color: var(--maroon); font-size: 22px; }
.login-box p { margin: 0; color: #4a3a38; }
.login-box .err { color: var(--red); }
.ah-who { align-self: center; font-size: 13px; color: #e6cfc4; white-space: nowrap; }
.ah-who b { color: #fff6ee; font-weight: 600; }

/* Tài khoản */
.aud-checks { display: flex; flex-direction: column; gap: 8px; }
.pill.role-superadmin { background: var(--maroon); color: #fff6ee; }
.pill.role-admin { background: #fbf2de; color: var(--gold-deep); }
.pill.off { background: #efe2e2; color: var(--red); }
.pw-out { font-family: ui-monospace, Menlo, monospace; background: #fff; padding: 2px 8px; border: 1px solid var(--line); border-radius: 2px; }

@media (max-width: 980px) {
  .alayout { grid-template-columns: 1fr; }
  .anav { position: static; height: auto; display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .anav button { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 11px 16px; }
  .anav button.on { border-bottom-color: var(--gold); }
  .anav .n { display: none; }
  .split { grid-template-columns: 1fr; }
  .list { position: static; max-height: 300px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .amain { padding: 18px 14px 60px; }
  .ah-title { display: none; }
}

.f > em a { color: var(--maroon); font-weight: 500; }

table.rows { min-width: 1040px; }
table.rows td:first-child input { min-width: 150px; }
table.rows select { min-width: 150px; }
table.rows .chs { gap: 12px; }
table.rows .chk { font-size: 13px; font-weight: 400; }

code { font-family: var(--sans); font-weight: 600; color: var(--maroon); }

/* ---------- Giao diện và chữ ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.swatch { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: #fffdfb; }
.swatch input[type=color] { width: 54px; height: 54px; padding: 0; border: 1px solid var(--line); background: none; border-radius: 3px; cursor: pointer; flex: none; }
.swatch b { display: block; }
.swatch small { display: block; color: var(--muted); font-size: 12.5px; }
.swatch .abtn { margin-top: 6px; }