/* Hub — cùng tông với Workspace KOVA (navy, chữ K). */
:root { --navy: #0F2043; --ink: #111827; --muted: #6B7280; --line: #E5E7EB; --bg: #F9FAFB; --soft: #F3F4F6;
  --ok: #04695C; --bad: #B42318; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/var(--mx-lh-body) var(--mx-font-body); -webkit-text-size-adjust: 100%; }
a { color: var(--navy); }
h1, h2, h3, .brand, .card-t { font-family: var(--mx-font-heading); }
h1 { margin: 0; line-height: var(--mx-lh-tight); font-size: 26px; color: var(--navy); letter-spacing: -.01em; }
h2 { margin: 0 0 12px; font-size: 16px; line-height: var(--mx-lh-heading); }
code { font: 12.5px var(--mx-font-mono); background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); } .sm { font-size: 12px; } .nowrap { white-space: nowrap; } .bad-t { color: var(--bad); }

/* thanh trên */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px;
  background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--navy); text-decoration: none; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.top-right form { margin: 0; }
.top-right button, .btn-sm { font: inherit; padding: 5px 12px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff;
  color: #374151; cursor: pointer; text-decoration: none; }
.top-right button:hover, .btn-sm:hover { border-color: var(--navy); color: var(--navy); }
.top-link { text-decoration: none; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.top-link.on, .top-link:hover { background: #EEF1F6; }
.top-email { color: var(--muted); }

/* trang chủ */
.home { max-width: 1100px; margin: 0 auto; padding: 56px 20px 64px; }
.hero h1 { font-size: 36px; font-weight: 800; line-height: var(--mx-lh-tight); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lead { font-size: 17px; color: #374151; max-width: 680px; margin: 12px 0 0; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 13px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--navy); }
a.chip:hover { border-color: var(--navy); }
.chip.plain { color: #374151; }
.sect { margin-top: 44px; }
.para { max-width: 720px; color: #374151; }
.para-lead { max-width: 760px; margin: 0 0 14px; font: 700 21px/1.5 var(--mx-font-heading); color: var(--navy); letter-spacing: -.005em; }
/* ---- phần dưới trang chủ: thẻ 2 cột ---- */
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.pc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px 28px;
  box-shadow: 0 1px 2px rgba(16,31,60,.04); }
.pc.wide { grid-column: 1 / -1; }
.pc-h { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.pc-h h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--navy); }
.pc-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #EAF0F9; color: #2457A7; }
.pc-ic svg { width: 21px; height: 21px; }
.pc .para { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: #334155; }
.pc .para-lead { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--navy); }
.pc .pc-sub { color: #64748B; margin-bottom: 16px; }
.pc-contact { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px dashed #CBD5E1; display: grid; gap: 4px; }
.pc-contact li, .pc-contact a { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #334155; text-decoration: none; padding: 4px 0; }
.pc-contact a:hover { color: #2457A7; }
.ci { display: inline-flex; color: #2457A7; } .ci svg { width: 17px; height: 17px; }
.sk-grid { display: grid; gap: 2px; }
.sk { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid #F1F5F9; }
.sk:last-child { border-bottom: 0; }
.sk-b { width: 34px; height: 34px; border-radius: 9px; background: #EAF0F9; color: #2457A7;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.sk-b svg { width: 17px; height: 17px; }
.sk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sk-n { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.sk-pct { flex: none; font-size: 12px; font-weight: 600; color: #64748B; font-variant-numeric: tabular-nums; }
.sk-track { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: #E2E8F0; overflow: hidden; }
.sk-fill { display: block; height: 100%; border-radius: inherit; background: #2457A7; }
.pc-list { display: grid; gap: 12px; }
.pc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1.5px dashed #CBD5E1;
  border-radius: 14px; background: #FBFCFE; }
.pc-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-num svg { width: 19px; height: 19px; }
.pc-item.step .pc-num { background: #EAF0F9; color: #2457A7; }
.pc-item h3 { margin: 1px 0 4px; font-size: 15.5px; font-weight: 700; line-height: var(--mx-lh-heading); color: var(--navy); }
.pc-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #475569; }
.pc .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pc .card { background: #F8FAFC; border-color: #EEF2F7; border-radius: 14px; }
@media (max-width: 860px) {
  .pc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pc { padding: 20px 18px 22px; border-radius: 16px; }
}


@media (max-width: 700px) { .para-lead { font-size: 18px; } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: var(--ink); }
a.card:hover { border-color: var(--navy); box-shadow: 0 6px 18px rgba(15,32,67,.08); }
.card-t { font-weight: 600; line-height: var(--mx-lh-heading); font-size: 15px; color: var(--navy); }
.card-d { color: #4B5563; font-size: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.tag { font-size: 11.5px; background: var(--soft); border-radius: 999px; padding: 1px 8px; color: #374151; }
.foot { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* đăng nhập, lỗi */
.login { display: grid; place-items: center; min-height: calc(100vh - 56px); padding: 16px; }
.login-box { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.login-box h1 { font-size: 22px; }
.login-box label, .grid-form label { display: block; margin-top: 14px; font-weight: 600; font-size: 13px; }
input[type=email], input[type=password], input[type=search], select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  font: inherit; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }
button.primary, .btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.login-box button.primary { margin-top: 18px; width: 100%; padding: 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.alert { padding: 9px 12px; border-radius: 8px; margin: 12px 0; font-size: 13px; }
.alert.err { background: #FEE2E2; color: #7F1D1D; } .alert.ok { background: #ECFDF5; color: var(--ok); }
.narrow { max-width: 640px; margin: 56px auto; padding: 0 16px; }

/* quản trị */
.admin { max-width: 1200px; margin: 0 auto; padding: 20px 20px 56px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.head-row p { margin: 4px 0 0; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-top: 16px; }
.btn { font: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff; color: #374151; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn.primary:hover { color: #fff; opacity: .9; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.danger { color: var(--bad); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1.5px solid var(--navy); white-space: nowrap; }
.tbl td { padding: 9px 8px; border-bottom: 1px solid #EEF1F5; vertical-align: top; }
.tbl tr.off td { opacity: .55; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: #12B76A; } .dot.bad { background: var(--bad); } .dot.gray { background: #D0D5DD; }
.bars { display: flex; gap: 1px; height: 20px; align-items: stretch; min-width: 200px; }
.bars i { flex: 1; border-radius: 1px; background: #D0D5DD; } .bars i.ok { background: #32D583; } .bars i.bad { background: #F04438; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.facts dt { font-size: 12px; color: var(--muted); } .facts dd { margin: 2px 0 0; font-weight: 500; }
.plan { background: var(--soft); border-radius: 8px; padding: 14px; font-size: 12.5px; white-space: pre-wrap; margin: 0 0 12px; }
form.inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
form.inline input[type=password] { width: 150px; margin: 0; padding: 5px 8px; }
.checks { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.checks label { font-weight: 400; margin: 0; white-space: nowrap; font-size: 13px; }
.actions { white-space: nowrap; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; }
.grid-form .checks { grid-column: 1 / -1; margin-top: 14px; }
.grid-form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.k-l { font-size: 12px; color: var(--muted); } .k-v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
ol.top { margin: 0; padding-left: 20px; } ol.top li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; margin: 0; padding: 6px 8px; }
.ev { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--soft); }
.ev.login { background: #ECFDF5; color: var(--ok); } .ev.login_failed, .ev.login_denied { background: #FEE2E2; color: var(--bad); }

/* ---- trang chủ dạng portfolio: khung trắng trên nền navy (MINDORAX) ---- */
.pf-wrap { position: relative; overflow: hidden; background: #101F3C; padding: 48px 56px; }
.pf-wrap::before, .pf-wrap::after { content: ""; position: absolute; z-index: 0; width: 150px; height: 150px;
  background-image: radial-gradient(circle, rgba(22,188,229,.45) 2.5px, transparent 3px); background-size: 25px 25px; }
.pf-wrap::before { top: 12px; right: 18px; }
.pf-wrap::after { bottom: 14px; left: 14px; background-image: radial-gradient(circle, rgba(157,180,222,.5) 2.5px, transparent 3px); }
.pf-card { position: relative; z-index: 1; max-width: 1320px; min-height: calc(100vh - 96px); margin: 0 auto; display: flex;
  flex-direction: column; background: #fff; border-radius: 16px; padding: 26px 44px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.pf-top { display: flex; align-items: center; gap: 16px; }
.pf-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.pf-nav form { margin: 0; }
.pf-ico { display: inline-flex; color: var(--navy); }
.pf-ico:hover { color: #2457A7; }
.pf-acc { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff;
  color: #334155; text-decoration: none; cursor: pointer; }
.pf-acc:hover { border-color: var(--navy); color: var(--navy); }
.pf-hero { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px 0; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; }
.pf-hero.no-photo { grid-template-columns: minmax(0, 1fr); }
.pf-text h1 { margin: 0; font-size: clamp(30px, 3.6vw, 50px); font-weight: 600; line-height: var(--mx-lh-tight);
  letter-spacing: -.015em; color: var(--navy); }
.pf-text h1 span { display: block; }
.pf-text h1 .hl { display: inline; background: linear-gradient(transparent 60%, #E3EAF7 60%); -webkit-box-decoration-break: clone;
  box-decoration-break: clone; }
.pf-intro { max-width: 500px; margin: 24px 0 30px; }
.pf-intro p { margin: 0 0 12px; }
.pf-intro .i1 { font: 600 20px/1.45 var(--mx-font-heading); color: var(--navy); }
.pf-intro .i2 { font-size: 16px; line-height: 1.65; color: #334155; }
.pf-intro .i3 { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: #64748B; font-weight: 500; }
.pf-cta { display: inline-block; padding: 12px 30px; border-radius: 8px; background: #2457A7; color: #fff; font-weight: 600;
  font-size: 15px; text-decoration: none; box-shadow: 0 8px 18px rgba(36,87,167,.25); }
.pf-cta:hover { background: #1C4689; }
.pf-photo { position: relative; justify-self: center; width: min(100%, 320px); margin: 0; }
.pf-photo img { position: relative; z-index: 2; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  filter: grayscale(1) contrast(1.04); transition: filter .5s; }
.pf-photo:hover img { filter: none; }
.pf-block { position: absolute; z-index: 1; top: 7%; left: 10%; right: -10%; bottom: -7%; background: #2457A7; }
.pf-dots { position: absolute; z-index: 0; top: -55px; left: -85px; width: 180px; height: 210px;
  background-image: radial-gradient(circle, #9DB4DE 3.5px, transparent 4px); background-size: 30px 30px; }
.pf-more { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--navy);
  font-size: 16px; font-weight: 500; text-decoration: none; }
.pf-more span { display: inline-flex; animation: pf-bob 2.2s ease-in-out infinite; }
@keyframes pf-bob { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .pf-more span { animation: none; } .pf-photo img { transition: none; } }
@media (max-width: 860px) {
  .pf-wrap { padding: 16px; }
  .pf-wrap::before, .pf-wrap::after { width: 90px; height: 90px; }
  .pf-card { min-height: calc(100vh - 32px); padding: 16px 18px 18px; border-radius: 14px; }
  .pf-nav { gap: 12px; } .pf-ico svg { width: 21px; height: 21px; }
  .pf-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 32px 0 28px; }
  .pf-photo { order: -1; width: min(62%, 250px); }
  .pf-dots { top: -28px; left: -48px; width: 120px; height: 150px; background-size: 24px 24px; }
  .pf-intro { margin: 18px 0 24px; } .pf-intro .i1 { font-size: 18px; } .pf-intro .i2 { font-size: 15px; } .pf-intro .i3 { font-size: 13.5px; }
}
@media (max-width: 420px) { .pf-top .brand span { display: none; } }

@media (max-width: 700px) {
  .top { padding: 0 12px; gap: 10px; } .top-email { display: none; }
  .home { padding: 36px 16px 48px; } .hero h1 { font-size: 28px; }
  .admin { padding: 14px 12px 40px; } .grid-form, .kpis { grid-template-columns: minmax(0, 1fr); }
  .head-row { flex-direction: column; }
}

/* ---- Trang chủ: neo-retro ấm (giấy kem, nét nâu cà phê, bóng đặc lệch) ----
   Bảng màu lấy từ ảnh 3D: nâu cà phê (chữ + nét), vàng mù tạt (nhấn lớn), đỏ đất (áo khoác — thanh / số),
   xanh ngọc (màn hình — icon). Chỉ áp dụng trong .pf-page; trang Quản trị / Đăng nhập giữ giao diện cũ. */
.pf-page {
  --rt-paper: #F5EEE3; --rt-card: #FFFBF4; --rt-soft: #FAF3E7; --rt-line: #E8DCC8; --rt-tan: #D9C7A7;
  --rt-ink: #3B2A1F; --rt-text: #5A4A3E; --rt-muted: #8C7A6B;
  --rt-mustard: #E3A72F; --rt-mustard-soft: #F5E1B0;
  --rt-clay: #C2553A; --rt-clay-soft: #F6DED5;
  --rt-teal: #2E7D7A; --rt-teal-soft: #DCEDEA;
  --navy: var(--rt-ink); --ink: var(--rt-ink); --muted: var(--rt-muted);
  color: var(--rt-ink);
  background-color: var(--rt-paper);
  background-image: radial-gradient(rgba(59,42,31,.07) 1px, transparent 1.2px); background-size: 20px 20px;
}
.pf-page a { color: var(--rt-clay); }
/* đầu trang */
.pf-page .pf-wrap { background: transparent; }
.pf-page .pf-wrap::before, .pf-page .pf-wrap::after { background-image: radial-gradient(circle, rgba(227,167,47,.6) 2.5px, transparent 3px); }
.pf-page .pf-card { background: var(--rt-card); border: 2px solid var(--rt-ink); border-radius: 12px; box-shadow: 12px 12px 0 var(--rt-mustard); }
.pf-page .pf-top .brand { color: var(--rt-ink); }
.pf-page .pf-ico { color: var(--rt-ink); } .pf-page .pf-ico:hover { color: var(--rt-clay); }
.pf-page .pf-text h1 .hl { background: linear-gradient(transparent 62%, var(--rt-mustard-soft) 62%); }
.pf-page .pf-intro .i2 { color: var(--rt-text); }
.pf-page .pf-intro .i3 { display: inline-block; padding: 4px 10px; border: 1.5px solid var(--rt-ink); border-radius: 6px;
  color: var(--rt-ink); font-size: 12.5px; font-weight: 600; background: var(--rt-mustard-soft); }
.pf-page .pf-more { color: var(--rt-ink); }
.pf-page .pf-acc { border-color: var(--rt-tan); color: var(--rt-ink); background: var(--rt-card); }
/* ảnh: có khung (ảnh thường) / không khung (ảnh đã tách nền) */
.pf-page .pf-block { background: var(--rt-mustard); }
.pf-page .pf-dots { background-image: radial-gradient(circle, rgba(59,42,31,.22) 3.5px, transparent 4px); }
.pf-photo.free { width: min(100%, 470px); }
.pf-photo.free::before { content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: 2%; height: 16%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(59,42,31,.22), transparent); }
.pf-photo.free img { aspect-ratio: auto; object-fit: contain; filter: none; }
.pf-photo.free:hover img { filter: none; }
/* thẻ bên dưới */
.pf-page .pc { background: var(--rt-card); border: 2px solid var(--rt-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--rt-tan); }
.pf-page .pc-h { border-bottom: 2px solid var(--rt-ink); }
.pf-page .pc-h h2 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--rt-ink); }
.pf-page .pc-ic { width: 42px; height: 42px; background: var(--rt-teal-soft); color: var(--rt-teal); border: 2px solid var(--rt-ink); }
.pf-page .pc .para { color: var(--rt-text); }
.pf-page .pc .para-lead { color: var(--rt-ink); }
.pf-page .pc .pc-sub { color: var(--rt-muted); }
.pf-page .pc-item { background: var(--rt-soft); border: 1.5px dashed rgba(59,42,31,.4); border-radius: 10px; }
.pf-page .pc-item h3 { color: var(--rt-ink); }
.pf-page .pc-item p { color: var(--rt-text); }
.pf-page .pc-num { background: var(--rt-clay); color: #fff; border: 2px solid var(--rt-ink); }
.pf-page .pc-item.step .pc-num { background: var(--rt-mustard-soft); color: var(--rt-ink); border: 2px solid var(--rt-ink); }
.pf-page .sk { border-bottom-color: var(--rt-line); }
.pf-page .sk-b { background: var(--rt-teal-soft); color: var(--rt-teal); border: 1.5px solid var(--rt-ink); border-radius: 8px; }
.pf-page .sk-n { color: var(--rt-ink); }
.pf-page .sk-pct { color: var(--rt-muted); }
.pf-page .sk-track { height: 9px; background: var(--rt-card); border: 1.5px solid var(--rt-ink); }
.pf-page .sk-fill { background: var(--rt-clay); border-radius: 0; }
.pf-page .pc .card { background: var(--rt-soft); border: 1.5px solid var(--rt-ink); border-radius: 10px; transition: transform .15s, box-shadow .15s; }
.pf-page .card-t { color: var(--rt-ink); } .pf-page .card-d { color: var(--rt-text); }
.pf-page a.card:hover, .pf-page .pc a.card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rt-mustard); border-color: var(--rt-ink); }
.pf-page .tag { background: var(--rt-card); border: 1px solid var(--rt-line); color: var(--rt-text); }
.pf-page .sect h2 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--rt-ink); }
.pf-page .muted { color: var(--rt-muted); }
@media (max-width: 860px) {
  .pf-page .pf-card { box-shadow: 7px 7px 0 var(--rt-mustard); }
  .pf-page .pc { box-shadow: 4px 4px 0 var(--rt-tan); }
  .pf-photo.free { order: -1; width: min(86%, 340px); }
}
@media (prefers-reduced-motion: reduce) { .pf-page .pc .card { transition: none; } }
.pf-hero:has(.pf-photo.free) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
.pf-photo.free { width: min(100%, 540px); }
@media (max-width: 860px) { .pf-hero:has(.pf-photo.free) { grid-template-columns: minmax(0, 1fr); } .pf-photo.free { width: min(92%, 380px); } }
/* bỏ xanh ngọc ở phần dưới: icon tiêu đề = vàng nhạt + nâu, ô kỹ năng = đỏ đất nhạt + đỏ đất (cùng màu thanh) */
.pf-page .pc-ic { background: var(--rt-mustard-soft); color: var(--rt-ink); }
.pf-page .sk-b { background: var(--rt-clay-soft); color: var(--rt-clay); }
/* số bước ở "Cách tôi tiếp cận dữ liệu" cùng màu đỏ đất với các mục nhỏ khác */
.pf-page .pc-item.step .pc-num { background: var(--rt-clay); color: #fff; }

/* ---- /menu: chọn nơi làm việc sau khi đăng nhập (cùng phong cách trang chủ) ---- */
.mn-top { display: flex; align-items: center; gap: 16px; max-width: 980px; margin: 0 auto; padding: 22px 20px; }
.mn-top .brand { color: var(--rt-ink); }
.mn-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.mn-right form { margin: 0; }
.mn-email { color: var(--rt-muted); }
.mn { max-width: 980px; margin: 0 auto; padding: 40px 20px 72px; }
.mn-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-clay); }
.mn h1 { margin: 0 0 28px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--rt-ink); }
.mn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.pf-page .mn-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 22px; background: var(--rt-card);
  border: 2px solid var(--rt-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--rt-tan); text-decoration: none;
  color: var(--rt-ink); transition: transform .15s, box-shadow .15s; }
.mn-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--rt-mustard); }
.mn-card .pc-ic { margin-bottom: 6px; }
.mn-t { font: 700 21px/1.3 var(--mx-font-heading); }
.mn-d { font-size: 14px; line-height: 1.6; color: var(--rt-text); }
.mn-go { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--rt-clay); }
.mn-back { margin-top: 32px; font-size: 13.5px; }
.mn-back a { color: var(--rt-text); }
@media (max-width: 600px) { .mn-email { display: none; } .mn { padding-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .mn-card { transition: none; } }


/* ======================================================================
   Trang chủ — bản dịu (v2): màu nhạt hơn, nét mảnh hơn; font retro
   Fraunces = tiêu đề / câu nhấn · Inter = nội dung · IBM Plex Mono = số, %, nhãn nhỏ
   ====================================================================== */
.pf-page {
  --rt-paper: #F7F2EA; --rt-card: #FFFCF7; --rt-soft: #FBF6EE; --rt-line: #EADFD0; --rt-tan: #E6D8C3;
  --rt-border: #CDB9A3;
  --rt-ink: #3D3029; --rt-text: #66574C; --rt-muted: #9A897B;
  --rt-clay: #C8765C; --rt-clay-soft: #F4E2D9;
  --rt-mustard: #EFCB7B; --rt-mustard-soft: #F8EBC6;
  background-image: radial-gradient(rgba(61,48,41,.05) 1px, transparent 1.2px);
}
.pf-page .pf-card { border: 1.5px solid var(--rt-border); border-radius: 16px; box-shadow: 10px 10px 0 var(--rt-mustard); }
.pf-page .pf-top .brand span { font: 600 18px/1.2 var(--rt-font-display); font-variation-settings: "SOFT" 100; letter-spacing: 0; }
.pf-page .pf-text h1 { font-family: var(--rt-font-display); font-weight: 600; font-variation-settings: "SOFT" 100;
  font-optical-sizing: auto; letter-spacing: -.015em; line-height: 1.15; }
.pf-page .pf-intro .i1 { font: italic 500 21px/1.45 var(--rt-font-display); font-variation-settings: "SOFT" 100; color: var(--rt-ink); }
.pf-page .pf-intro .i3 { font: 500 12px/1.5 var(--rt-font-mono); letter-spacing: .02em; border: 1.5px dashed var(--rt-border);
  border-radius: 6px; background: var(--rt-mustard-soft); color: var(--rt-ink); }
.pf-page .pf-more { font: 500 12px/1.4 var(--rt-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rt-text); }
/* thẻ */
.pf-page .pc { border: 1.5px solid var(--rt-border); border-radius: 16px; box-shadow: 4px 4px 0 var(--rt-tan); }
.pf-page .pc-h { border-bottom: 1.5px solid var(--rt-line); padding-bottom: 16px; }
.pf-page .pc-h h2 { font: 600 23px/1.25 var(--rt-font-display); font-variation-settings: "SOFT" 100; text-transform: none;
  letter-spacing: -.005em; color: var(--rt-ink); }
.pf-page .pc-ic { width: 40px; height: 40px; background: var(--rt-mustard-soft); color: var(--rt-ink); border: 1.5px solid var(--rt-border); }
.pf-page .pc .para-lead { font: 500 19px/1.5 var(--rt-font-display); font-variation-settings: "SOFT" 100; color: var(--rt-ink); }
.pf-page .pc .pc-sub { font: 500 12px/1.5 var(--rt-font-mono); letter-spacing: .03em; color: var(--rt-muted); }
.pf-page .pc-item { border: 1.5px dashed var(--rt-border); border-radius: 12px; }
.pf-page .pc-item h3 { font-weight: 600; }
.pf-page .pc-n { font: 500 13px/1 var(--rt-font-mono); color: var(--rt-clay); margin-right: 4px; }
.pf-page .pc-num, .pf-page .pc-item.step .pc-num { background: var(--rt-clay); color: #fff; border: 0;
  font: 500 13px/1 var(--rt-font-mono); }
.pf-page .sk-b { background: var(--rt-clay-soft); color: var(--rt-clay); border: 0; }
.pf-page .sk-n { font-weight: 500; }
.pf-page .sk-pct { font: 500 12px/1 var(--rt-font-mono); color: var(--rt-muted); }
.pf-page .sk-track { height: 6px; background: var(--rt-line); border: 0; border-radius: 99px; }
.pf-page .sk-fill { background: var(--rt-clay); border-radius: 99px; }
.pf-page .pc .card { border: 1.5px solid var(--rt-border); border-radius: 12px; }
.pf-page .card-t { font: 600 17px/1.3 var(--rt-font-display); font-variation-settings: "SOFT" 100; }
.pf-page .tag { font: 500 11px/1.6 var(--rt-font-mono); }
.pf-page a.card:hover, .pf-page .pc a.card:hover { box-shadow: 4px 4px 0 var(--rt-mustard); border-color: var(--rt-border); }
.pf-page .sect h2 { font: 600 23px/1.25 var(--rt-font-display); font-variation-settings: "SOFT" 100; text-transform: none; letter-spacing: 0; }
/* trang /menu */
.pf-page .mn-eyebrow { font: 500 12px/1.4 var(--rt-font-mono); letter-spacing: .12em; }
.pf-page .mn h1 { font-family: var(--rt-font-display); font-weight: 600; font-variation-settings: "SOFT" 100; }
.pf-page .mn-card { border: 1.5px solid var(--rt-border); border-radius: 16px; box-shadow: 4px 4px 0 var(--rt-tan); }
.pf-page .mn-card:hover { box-shadow: 8px 8px 0 var(--rt-mustard); }
.pf-page .mn-t { font: 600 24px/1.25 var(--rt-font-display); font-variation-settings: "SOFT" 100; }
.pf-page .mn-go { font: 500 12.5px/1.4 var(--rt-font-mono); letter-spacing: .04em; }
@media (max-width: 860px) {
  .pf-page .pf-card { box-shadow: 6px 6px 0 var(--rt-mustard); }
  .pf-page .pc { box-shadow: 3px 3px 0 var(--rt-tan); }
  .pf-page .pf-intro .i1 { font-size: 19px; }
}

/* ======================================================================
   Trang chủ — bản "phai màu" (v3): sắc độ thấp, kem ngả vàng, hạt giấy in, ảnh hơi phai như ảnh in cũ
   ====================================================================== */
.pf-page {
  --rt-paper: #F4EDE1; --rt-card: #FBF6EC; --rt-soft: #F6EFE3; --rt-line: #E5D9C6; --rt-tan: #E2D3BC;
  --rt-border: #C9B8A2;
  --rt-ink: #4A3D34; --rt-text: #6E6055; --rt-muted: #A09080; --rt-icon: #6B5446;
  --rt-clay: #CF8E74; --rt-clay-soft: #F2DDD2;
  --rt-mustard: #EDCF8A; --rt-mustard-soft: #F6E8C4;
}
/* hạt giấy in phủ toàn trang (SVG nhiễu, không tải ảnh ngoài) */
.pf-page::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .29  0 0 0 0 .24  0 0 0 0 .2  0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.pf-page .pf-intro .i1 { font-style: normal; }
.pf-page .pf-ico { color: var(--rt-icon); }
.pf-photo.free img { filter: sepia(.2) saturate(.78) contrast(.95) brightness(1.03); }
.pf-photo.free:hover img { filter: sepia(.2) saturate(.78) contrast(.95) brightness(1.03); }
.pf-page .pc-ic { color: var(--rt-icon); }
.pf-page .pc-n { color: #B9775F; }
@media (prefers-reduced-transparency: reduce) { .pf-page::before { display: none; } }


/* ======================================================================
   Trang chủ — v4 "cửa sổ trình duyệt cổ": kem · nâu xám · nâu đậm · vàng mù tạt (không dùng đỏ)
   Thẻ = cửa sổ: thanh tiêu đề nâu xám, tên trong ô "thanh địa chỉ", nút _ □ ×, viền + bóng đặc nâu đậm.
   ====================================================================== */
.pf-page {
  --rt-paper: #F2ECE1; --rt-card: #F6F1E8; --rt-soft: #EFE7DA; --rt-line: #DCCFBD; --rt-tan: #6B4F33;
  --rt-border: #6B4F33; --rt-bar: #8B7867;
  --rt-ink: #5A3E26; --rt-text: #6B5A4A; --rt-muted: #9A8A7A; --rt-icon: #6B4F33;
  --rt-mustard: #EDB95E; --rt-mustard-soft: #F3D9A6; --rt-clay: #EDB95E; --rt-clay-soft: #F6E6C6;
  background-color: var(--rt-paper);
  background-image:
    radial-gradient(circle at 100% 0, #B3A496 0 300px, transparent 301px),
    radial-gradient(circle at 0 100%, #F0CD8F 0 340px, transparent 341px);
  background-attachment: fixed; background-size: auto; background-repeat: no-repeat;
}
.pf-page::before { opacity: .3; }
.pf-page .pf-wrap::before, .pf-page .pf-wrap::after { display: none; }
/* khung đầu trang = cửa sổ lớn */
.pf-page .pf-card { padding-top: 0; border: 2.5px solid var(--rt-border); border-radius: 16px; background: var(--rt-card);
  box-shadow: 14px 14px 0 var(--rt-border); overflow: hidden; }
.pf-page .pf-top { margin: 0 -44px; padding: 14px 44px; background: var(--rt-bar); border-bottom: 2.5px solid var(--rt-border); }
.pf-page .pf-top .brand span { color: var(--rt-card); }
.pf-page .pf-top .brand img { outline: 2px solid var(--rt-card); border-radius: 7px; }
.pf-page .pf-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--rt-card);
  border: 2.5px solid var(--rt-border); color: var(--rt-border); }
.pf-page .pf-ico svg { width: 18px; height: 18px; }
.pf-page .pf-ico:hover { background: var(--rt-mustard); color: var(--rt-border); }
.pf-page .pf-nav { gap: 10px; }
.pf-page .pf-acc { background: var(--rt-card); border: 2.5px solid var(--rt-border); color: var(--rt-ink); border-radius: 999px; }
.pf-page .pf-text h1 { color: var(--rt-ink); }
.pf-page .pf-text h1 .hl { background: linear-gradient(transparent 62%, var(--rt-mustard-soft) 62%); }
.pf-page .pf-intro .i1 { color: var(--rt-ink); }
.pf-page .pf-intro .i3 { border: 2px solid var(--rt-border); border-style: solid; border-radius: 8px; background: var(--rt-card); }
.pf-photo.free img, .pf-photo.free:hover img { filter: sepia(.38) saturate(.62) contrast(.96) brightness(1.03); }
/* thanh dưới cùng màu mù tạt chứa "Xem giới thiệu" */
.pf-page .pf-more { align-self: stretch; flex-direction: row; justify-content: center; gap: 8px; margin: 0 -44px -24px;
  padding: 16px 44px; background: var(--rt-mustard); border-top: 2.5px solid var(--rt-border); color: var(--rt-ink); font-weight: 600; }
/* thẻ = cửa sổ nhỏ */
.pf-page .pc { padding: 0 26px 26px; background: var(--rt-card); border: 2.5px solid var(--rt-border); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--rt-border); overflow: hidden; }
.pf-page .pc-h { margin: 0 -26px 22px; padding: 12px 16px; gap: 12px; background: var(--rt-bar); border-bottom: 2.5px solid var(--rt-border); }
.pf-page .pc-ic { width: 38px; height: 38px; flex: none; background: var(--rt-card); color: var(--rt-border); border: 2.5px solid var(--rt-border); }
.pf-page .pc-ic svg { width: 18px; height: 18px; }
.pf-page .pc-h h2 { flex: 1; min-width: 0; padding: 6px 18px; background: var(--rt-card); border: 2.5px solid var(--rt-border);
  border-radius: 999px; font-size: 19px; color: var(--rt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-page .win { flex: none; display: inline-flex; color: var(--rt-card); padding-left: 4px; }
.pf-page .pc .para { color: var(--rt-text); }
.pf-page .pc .para-lead { color: var(--rt-ink); }
.pf-page .pc .pc-sub { color: var(--rt-muted); }
.pf-page .pc-item { background: transparent; border: 0; border-bottom: 2px dashed var(--rt-line); border-radius: 0; padding: 14px 4px; }
.pf-page .pc-list { gap: 0; }
.pf-page .pc-item:last-child { border-bottom: 0; }
.pf-page .pc-num, .pf-page .pc-item.step .pc-num { background: var(--rt-mustard); color: var(--rt-ink); border: 0; }
.pf-page .pc-n { color: var(--rt-bar); }
.pf-page .sk-b { background: var(--rt-card); color: var(--rt-border); border: 2px solid var(--rt-border); }
.pf-page .sk-track { height: 10px; background: var(--rt-card); border: 2px solid var(--rt-border); }
.pf-page .sk-fill { background: var(--rt-mustard); }
.pf-page .pc .card { background: var(--rt-soft); border: 2px solid var(--rt-border); }
.pf-page .tag { background: var(--rt-card); border: 1.5px solid var(--rt-border); color: var(--rt-ink); }
.pf-page a.card:hover, .pf-page .pc a.card:hover { box-shadow: 5px 5px 0 var(--rt-mustard); border-color: var(--rt-border); }
.pf-page .sect h2 { color: var(--rt-ink); }
.pf-page a { color: var(--rt-ink); }
/* /menu */
.pf-page .mn-card { background: var(--rt-card); border: 2.5px solid var(--rt-border); box-shadow: 8px 8px 0 var(--rt-border); }
.pf-page .mn-card:hover { box-shadow: 11px 11px 0 var(--rt-mustard); }
.pf-page .mn-card .pc-ic { background: var(--rt-mustard); }
.pf-page .mn-go, .pf-page .mn-eyebrow { color: var(--rt-bar); }
@media (max-width: 860px) {
  .pf-page { background-image: radial-gradient(circle at 100% 0, #B3A496 0 160px, transparent 161px),
    radial-gradient(circle at 0 100%, #F0CD8F 0 180px, transparent 181px); }
  .pf-page .pf-card { padding-top: 0; box-shadow: 8px 8px 0 var(--rt-border); }
  .pf-page .pf-top { margin: 0 -18px; padding: 12px 18px; }
  .pf-page .pf-more { margin: 0 -18px -18px; padding: 14px 18px; }
  .pf-page .pc { padding: 0 18px 20px; box-shadow: 6px 6px 0 var(--rt-border); }
  .pf-page .pc-h { margin: 0 -18px 18px; }
  .pf-page .win { display: none; }
}

/* ---- v5: tiêu đề Be Vietnam Pro đậm in hoa (như mẫu); câu nhấn Be Vietnam Pro đậm vừa, viết thường ---- */
.pf-page .pf-text h1 { font: 800 clamp(28px, 3.3vw, 46px)/1.18 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .005em; }
.pf-page .pf-top .brand span { font: 800 15px/1.2 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .06em; }
.pf-page .pf-intro .i1 { font: 600 19px/1.5 var(--mx-font-heading); }
.pf-page .pc-h h2 { font: 800 15px/1.3 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .07em; padding: 8px 18px; }
.pf-page .pc .para-lead { font: 600 17px/1.55 var(--mx-font-heading); }
.pf-page .card-t { font: 700 15.5px/1.35 var(--mx-font-heading); }
.pf-page .sect h2 { font: 800 16px/1.3 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .07em; }
.pf-page .mn h1 { font: 800 clamp(26px, 3vw, 38px)/1.2 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .01em; }
.pf-page .mn-t { font: 800 18px/1.3 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .05em; }
.pf-page .pc-item h3 { font: 700 15px/1.35 var(--mx-font-heading); }
@media (max-width: 860px) { .pf-page .pf-intro .i1 { font-size: 17px; } }

/* ---- trang đăng nhập quản trị: cùng kiểu cửa sổ ---- */
.lg { display: grid; place-items: center; min-height: calc(100vh - 90px); padding: 16px 16px 56px; }
.lg-win { width: 100%; max-width: 420px; padding: 0 26px 26px; }
.lg-win .pc-h { margin-bottom: 20px; }
.lg-sub { margin: 0 0 6px; font: 500 12px/1.5 var(--rt-font-mono); color: var(--rt-muted); }
.pf-page .lg-win label { display: block; margin-top: 16px; font: 700 12px/1.4 var(--mx-font-heading); text-transform: uppercase;
  letter-spacing: .07em; color: var(--rt-ink); }
.pf-page .lg-win input[type=email], .pf-page .lg-win input[type=password] { margin-top: 6px; padding: 11px 14px; background: var(--rt-card);
  border: 2px solid var(--rt-border); border-radius: 999px; color: var(--rt-ink); font: 14px/1.4 var(--mx-font-body); }
.pf-page .lg-win input:focus { outline: none; box-shadow: 0 0 0 3px var(--rt-mustard-soft); }
.pf-page .lg-btn { display: block; width: 100%; margin-top: 22px; padding: 12px; border: 2.5px solid var(--rt-border); border-radius: 999px;
  background: var(--rt-mustard); color: var(--rt-ink); font: 800 14px/1 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; box-shadow: 4px 4px 0 var(--rt-border); transition: transform .1s, box-shadow .1s; }
.pf-page .lg-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--rt-border); }
.pf-page .lg-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--rt-border); }
.pf-page .lg-win .alert.err { background: #F6E6C6; color: var(--rt-ink); border: 2px solid var(--rt-border); border-radius: 10px; }
.mn-back-link { font-size: 13px; color: var(--rt-ink); }
@media (prefers-reduced-motion: reduce) { .pf-page .lg-btn { transition: none; } }
.pf-page .mn-top .brand span { font: 800 15px/1.2 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .06em; }
.pf-page .pf-text h1 { font-size: clamp(24px, 2.6vw, 38px); }

/* ======================================================================
   Trang Quản trị — cùng kiểu "cửa sổ trình duyệt cổ" với trang chủ
   Màu trạng thái: xanh rêu phai (tốt) / gỉ sắt phai (lỗi) — dịu theo bảng màu kem-nâu
   ====================================================================== */
.pf-page { --rt-ok: #6E8B5A; --rt-ok-soft: #E3EAD6; --rt-bad: #A9533A; --rt-bad-soft: #F3DDD3; }
.ad-top { max-width: 1240px; }
.pf-page .ad-top .mn-right { gap: 10px; }
.pf-page .ad-win { max-width: 1240px; margin: 8px auto 64px; padding: 0; background: var(--rt-card); border: 2.5px solid var(--rt-border);
  border-radius: 16px; box-shadow: 12px 12px 0 var(--rt-border); overflow: hidden; }
/* tab = tab trình duyệt trên thanh nâu xám */
.pf-page .tabs { display: flex; align-items: flex-end; gap: 6px; margin: 0; padding: 12px 16px 0; background: var(--rt-bar);
  border-bottom: 2.5px solid var(--rt-border); overflow-x: auto; }
.pf-page .tabs a { padding: 10px 18px; margin-bottom: -2.5px; border: 2.5px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0;
  color: var(--rt-card); font: 800 12.5px/1.2 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.pf-page .tabs a:hover { background: rgba(246,241,232,.15); }
.pf-page .tabs a.on { background: var(--rt-card); color: var(--rt-ink); border-color: var(--rt-border); }
.pf-page .tabs .win { margin-left: auto; align-self: center; padding: 0 4px 10px; }
.pf-page .ad-body { padding: 24px 28px 30px; }
.pf-page .head-row h1 { margin: 0; font: 800 24px/1.25 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .03em; color: var(--rt-ink); }
.pf-page .head-row p, .pf-page .ad-body .muted { color: var(--rt-muted); }
/* hộp nội dung */
.pf-page .box { background: var(--rt-card); border: 2px solid var(--rt-border); border-radius: 12px; box-shadow: 5px 5px 0 var(--rt-tan);
  padding: 18px 20px; margin-top: 20px; }
.pf-page .box h2 { font: 800 14px/1.3 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--rt-ink);
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px dashed var(--rt-line); }
/* bảng */
.pf-page .tbl { color: var(--rt-text); }
.pf-page .tbl th { font: 500 11.5px/1.3 var(--rt-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--rt-muted);
  border-bottom: 2px solid var(--rt-border); }
.pf-page .tbl td { border-bottom: 1.5px dashed var(--rt-line); }
.pf-page .tbl a { color: var(--rt-ink); }
.pf-page .tbl b { color: var(--rt-ink); }
/* trạng thái */
.pf-page .dot.ok { background: var(--rt-ok); } .pf-page .dot.bad { background: var(--rt-bad); } .pf-page .dot.gray { background: var(--rt-line); }
.pf-page .bad-t { color: var(--rt-bad); }
.pf-page .bars i { background: var(--rt-line); border-radius: 2px; } .pf-page .bars i.ok { background: #9DB386; } .pf-page .bars i.bad { background: #C77B62; }
.pf-page .facts dt { font: 500 11.5px/1.4 var(--rt-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--rt-muted); }
.pf-page .facts dd { color: var(--rt-ink); }
.pf-page .ev { font: 500 11.5px/1.6 var(--rt-font-mono); background: var(--rt-soft); color: var(--rt-text); border: 1.5px solid var(--rt-line); }
.pf-page .ev.login { background: var(--rt-ok-soft); color: var(--rt-ok); border-color: transparent; }
.pf-page .ev.login_failed, .pf-page .ev.login_denied { background: var(--rt-bad-soft); color: var(--rt-bad); border-color: transparent; }
/* KPI */
.pf-page .kpi { background: var(--rt-card); border: 2px solid var(--rt-border); border-radius: 12px; box-shadow: 4px 4px 0 var(--rt-tan); }
.pf-page .k-l { font: 500 11.5px/1.4 var(--rt-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--rt-muted); }
.pf-page .k-v { font: 600 28px/1.2 var(--rt-font-mono); color: var(--rt-ink); }
/* nút */
.pf-page .btn { background: var(--rt-card); border: 2px solid var(--rt-border); border-radius: 999px; color: var(--rt-ink); font-weight: 600; }
.pf-page .btn:hover { background: var(--rt-mustard-soft); color: var(--rt-ink); border-color: var(--rt-border); }
.pf-page .btn.primary { background: var(--rt-mustard); color: var(--rt-ink); border-color: var(--rt-border); box-shadow: 3px 3px 0 var(--rt-border);
  font: 800 12.5px/1.2 var(--mx-font-heading); text-transform: uppercase; letter-spacing: .07em; padding: 9px 18px; }
.pf-page .btn.primary:hover { opacity: 1; color: var(--rt-ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rt-border); }
.pf-page .btn.danger { color: var(--rt-bad); border-color: var(--rt-bad); }
.pf-page .btn.danger:hover { background: var(--rt-bad-soft); }
/* ô nhập */
.pf-page .ad-body input[type=email], .pf-page .ad-body input[type=password], .pf-page .ad-body input[type=search],
.pf-page .ad-body input[type=text], .pf-page .ad-body select { background: var(--rt-card); border: 2px solid var(--rt-border); border-radius: 999px;
  color: var(--rt-ink); padding: 8px 14px; }
.pf-page .ad-body input:focus, .pf-page .ad-body select:focus { outline: none; box-shadow: 0 0 0 3px var(--rt-mustard-soft); border-color: var(--rt-border); }
.pf-page .grid-form label, .pf-page .ad-body label { color: var(--rt-ink); }
.pf-page .checks input { accent-color: var(--rt-border); }
.pf-page .plan { font: 12.5px/1.6 var(--rt-font-mono); background: var(--rt-soft); border: 2px dashed var(--rt-line); color: var(--rt-ink); }
.pf-page .ad-body .alert.ok { background: var(--rt-ok-soft); color: var(--rt-ok); border: 2px solid var(--rt-ok); }
.pf-page .ad-body .alert.err { background: var(--rt-bad-soft); color: var(--rt-bad); border: 2px solid var(--rt-bad); }
@media (max-width: 860px) {
  .pf-page .ad-win { margin: 0 12px 40px; box-shadow: 6px 6px 0 var(--rt-border); }
  .pf-page .ad-body { padding: 18px 14px 22px; }
  .pf-page .tabs .win { display: none; }
}
/* sửa trùng tên class: "ol.top" (danh sách) ≠ ".top" (thanh đầu trang cũ); ".ev.login" (nhãn) ≠ ".login" (trang đăng nhập cũ) */
.pf-page ol.top { display: block; position: static; height: auto; padding: 0 0 0 22px; margin: 0; background: none; border: 0;
  font-size: 13.5px; color: var(--rt-text); }
.pf-page ol.top li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1.5px dashed var(--rt-line); }
.pf-page ol.top li:last-child { border-bottom: 0; }
.pf-page ol.top li b { font-family: var(--rt-font-mono); color: var(--rt-ink); }
.pf-page .ev { display: inline-block; min-height: 0; place-items: normal; padding: 1px 9px; border-radius: 999px; }
/* nút icon (Menu, Đăng xuất) cùng kiểu nút mạng xã hội */
.pf-page button.pf-ico { padding: 0; font: inherit; cursor: pointer; }
.pf-page .mn-right .pf-ico { width: 38px; height: 38px; }