/* Lớp màu "sang": xanh navy đậm + vàng ánh kim + nền kem, đồng bộ với website. Nạp sau app.css. */
:root {
  --ink-navy: #2b1d16; --link: #7a2a1d;
  --navy: #b5452f; --navy-2: #d4663f; --navy-deep: #7a2a1d; --gold: #c9a45c; --gold-dark: #94702c; --gold-soft: #f1dfae;
  --bg: #f6f2ea; --card: #fff; --line: #e7dfcf; --line-2: #f1ebdf; --sand: #ece4d3; --text: #2b1d16; --muted: #6d7385;
  --blue-bg: #f8f1e1; --radius: 14px;
  --metal: linear-gradient(135deg, #f3e3b6 0%, #d2b06a 34%, #a8823a 62%, #e9d39b 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(43, 29, 22, .04), 0 14px 34px -16px rgba(43, 29, 22, .2);
}
body { font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 420px at 92% -6%, rgba(201, 164, 92, .2), transparent 62%),
    radial-gradient(760px 420px at -8% 18%, rgba(212, 102, 63, .08), transparent 60%), var(--bg); background-attachment: fixed; }
h1, h2, .stat b, .act b, .sums .grand th, .sums .grand td, .login-co b {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-variant-numeric: lining-nums; color: var(--ink-navy); }
h1 { font-size: 29px; letter-spacing: 0; }
h2 { font-size: 19px; }
a { color: var(--link); }

/* Thanh trên: navy chuyển sắc, viền vàng ánh kim */
.top { height: 62px; background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 46%, #17397f 100%); border-bottom: 0; box-shadow: 0 8px 26px rgba(122, 42, 29, .3); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #94702c, #f3e3b6 18%, #c9a45c 38%, #f8eecb 54%, #c9a45c 70%, #94702c); }
.logo span { font-family: "Playfair Display", Georgia, serif; font-size: 17px; letter-spacing: .02em; }
.logo small { font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; color: var(--gold-soft); letter-spacing: .22em; font-size: 10.5px; margin-top: 2px; }
.logo img { box-shadow: 0 0 0 1px rgba(201, 164, 92, .7), 0 4px 12px rgba(0, 0, 0, .25); }
.nav a { color: #d5dcef; font-weight: 500; }
.nav a.on { background: rgba(201, 164, 92, .16); color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .45); }
.me summary small { color: var(--gold-soft); }
.me-menu { border-color: var(--sand); }
.me-menu a:hover, .me-menu button:hover { background: #f8f1e1; }

/* Nút */
.btn { border-color: #ddd4c1; border-radius: 9px; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { background: #fbf7ee; border-color: var(--gold); }
.btn.primary { background: linear-gradient(180deg, #c04e33, var(--navy)); border-color: var(--navy); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px rgba(181, 69, 47, .26); }
.btn.primary:hover { background: linear-gradient(180deg, #21489b, #0e2756); border-color: var(--navy); }
.btn.gold, .btn.primary.big { background: var(--metal); border-color: #b08a3e; color: #231a05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 8px 20px rgba(148, 112, 44, .36); }
.btn.gold:hover, .btn.primary.big:hover { background: var(--metal); filter: brightness(1.06); transform: translateY(-1px); border-color: #b08a3e; }
.btn.ghost { background: transparent; border-color: rgba(241, 223, 174, .55); color: var(--gold-soft); }
.btn.ghost:hover { background: rgba(201, 164, 92, .16); border-color: var(--gold-soft); }
.btn.danger:hover { background: var(--red-bg); border-color: #efc1c1; }
input, select, textarea { border-color: #dcd4c3; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(201, 164, 92, .5); border-color: var(--gold-dark); }
input[type=checkbox] { accent-color: var(--gold-dark); }

/* Thẻ, số liệu */
.card, .stat, .act, .sheet-wrap { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.act { overflow: hidden; padding: 22px 24px; }
.act b { font-size: 22px; }
.act.xuat { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, #1a3f8c 100%); border-color: var(--navy); }
.act.xuat b { color: var(--gold-soft); }
.act.xuat::before { content: ""; position: absolute; right: -70px; top: -90px; width: 230px; height: 230px; border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0 48%, rgba(243, 227, 182, .95) 66%, rgba(201, 164, 92, .25) 84%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.act.xuat::after { content: ""; position: absolute; right: 26px; bottom: 18px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff6d8, #d2b06a 46%, #8a6727 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.act.nhap, .act.shot { border-left: 1px solid var(--line); background: linear-gradient(180deg, #fff, #fdfaf3); }
.act.nhap::before, .act.shot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--metal); }
.act kbd { border-color: var(--sand); }
.stat { position: relative; overflow: hidden; padding-top: 17px; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--metal); }
.stat b { font-size: 27px; }
.stat.alert { background: #fff7e2; border-color: #ecd49a; }
.guide { border-left: 1px solid var(--line); position: relative; overflow: hidden; padding-left: 26px; }
.guide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--metal); }

/* Bảng */
.tbl th { background: transparent; color: #86744a; border-bottom-color: var(--sand); font-weight: 600; }
.tbl td { border-bottom-color: var(--line-2); }
.tbl.click tbody tr[data-href]:hover { background: #fbf5e8; }
.tbl.grid th, .lines th { background: linear-gradient(180deg, #fcf8ef, #f4ecda); color: #5f5030; border-bottom: 1px solid #d9c9a3; }
.tbl.grid td, .tbl.grid th { border-right-color: var(--line-2); }
.tbl.grid tbody tr:nth-child(even) { background: #fdfbf6; }
.tbl.grid.click tbody tr[data-href]:hover { background: #f9f1df; }
.tbl tfoot td { background: #f9f3e5; border-top: 2px solid var(--gold); color: var(--ink-navy); }
.tbl td.code { color: #4a5674; }
.tbl.edit td[data-f]:hover { box-shadow: inset 0 0 0 1px var(--gold); background: #fffaf0; }
.tbl.edit td.editing { box-shadow: inset 0 0 0 2px var(--gold-dark); }
.tag.xuat { background: #e8ecf7; color: var(--ink-navy); }
.bar-cell i { background: linear-gradient(90deg, var(--navy), #2a4f9e 55%, var(--gold)); }
.chip { border-color: var(--line); }
.chip:hover { border-color: var(--gold); }
.chip.on { background: linear-gradient(180deg, #c04e33, var(--navy)); border-color: var(--navy); color: var(--gold-soft); }
.tabs { background: #ede5d3; }
.tab.on { color: var(--ink-navy); }

/* Phiếu */
.vc.xuat .vc-main { border-top: 4px solid var(--gold); }
.lines-wrap { border-color: var(--sand); border-radius: 10px; }
.lines tr.need { background: #fff5db; }
.sums .grand th, .sums .grand td { border-top: 2px solid var(--gold); font-size: 23px; }
.vc-actions { background: rgba(250, 247, 241, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #dcc998; box-shadow: 0 -8px 24px rgba(43, 29, 22, .08); }
.sg-box { border-color: #d9c9a3; border-radius: 11px; box-shadow: 0 18px 44px rgba(43, 29, 22, .24); }
.sg-new { color: var(--gold-dark); }
.dlg { box-shadow: 0 0 0 1px rgba(201, 164, 92, .4), 0 30px 70px rgba(122, 42, 29, .45); }
.dlg::backdrop { background: rgba(122, 42, 29, .55); }
.toast { background: linear-gradient(135deg, var(--navy-deep), var(--navy-2)); box-shadow: 0 0 0 1px rgba(201, 164, 92, .55), 0 14px 34px rgba(122, 42, 29, .38); }
.toast.bad { background: var(--red); box-shadow: 0 14px 34px rgba(120, 20, 20, .35); }

/* Đăng nhập: nền navy có sàn lưới phối cảnh và vòng ánh kim */
.login { position: relative; overflow: hidden; background: radial-gradient(1000px 560px at 50% -12%, #21479c 0%, var(--navy) 52%, var(--navy-deep) 100%); background-attachment: scroll; }
.login::before { content: ""; position: absolute; left: -60%; right: -60%; bottom: -6%; height: 58%; pointer-events: none;
  background-image: linear-gradient(rgba(201, 164, 92, .26) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 164, 92, .26) 1px, transparent 1px);
  background-size: 58px 58px; transform: perspective(680px) rotateX(63deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(transparent, #000 34%, transparent 96%); mask-image: linear-gradient(transparent, #000 34%, transparent 96%); }
.login::after { content: ""; position: absolute; width: 560px; height: 560px; right: -150px; top: -190px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 205deg, transparent 0 50%, rgba(243, 227, 182, .95) 68%, rgba(201, 164, 92, .2) 86%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.login-card { position: relative; z-index: 1; overflow: hidden; border-top: 0; border-radius: 18px; padding: 34px 30px 26px;
  box-shadow: 0 0 0 1px rgba(201, 164, 92, .45), 0 40px 90px rgba(0, 0, 0, .5), 0 0 80px rgba(201, 164, 92, .12); }
.login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--metal); }
.login-brand { border-bottom-color: var(--sand); }
.login-co b { font-size: 26px; letter-spacing: .06em; }
.login-co b::after { background: var(--metal); width: 56px; }
.login-title h1 { font-size: 20px; }

@media (max-width: 1180px) {
  .nav { top: 62px; background: var(--navy-deep); border-bottom: 2px solid var(--gold); }
}

.tbl.edit td[data-f=grp], .tbl.edit td[data-f=unit], .tbl.grid td.muted { white-space: nowrap; }

/* Logo: chỉ dùng biểu tượng TP (đã làm nét), tên công ty là chữ thật nên luôn sắc và cân giữa */
.logo img { height: 42px; width: auto; padding: 4px 9px; border-radius: 10px; background: #fff; }
.login-card { justify-items: stretch; text-align: center; }
.login-card label { text-align: left; }
.login-brand { gap: 10px; padding-bottom: 18px; }
.login-brand img { height: 92px; width: auto; filter: drop-shadow(0 8px 14px rgba(190, 20, 26, .22)); }
.login-co { margin: 0; }
.login-co small { font-size: 12.5px; letter-spacing: .2em; color: #7a6a45; font-weight: 600; }
.login-co b { font-size: 30px; letter-spacing: .08em; line-height: 1.2; margin-top: 4px; }
.login-co b::after { width: 64px; margin-top: 10px; }
.login-note { font-size: 13px; color: var(--muted); margin: 2px 0 0; }

/* Dòng "Công ty TNHH SX DV TM" màu xanh navy; tên "Lý Thành Phát" chữ vàng ánh kim */
.login-co small { color: var(--link); font-weight: 700; }
.login-co b { color: #a8823a; background: linear-gradient(100deg, #7d5b1c 0%, #b8913f 22%, #ecd596 45%, #c9a45c 58%, #8f6b24 80%, #c9a45c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)) drop-shadow(0 2px 3px rgba(125, 91, 28, .28)); }
.login-co b::after { -webkit-text-fill-color: initial; }
.logo span { color: #e9d39b; background: linear-gradient(100deg, #f3e3b6, #d2b06a 45%, #f8eecb 70%, #c9a45c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo small { -webkit-text-fill-color: var(--gold-soft); }

/* Lời chào ở trang Tổng quan */
.hello { position: relative; margin-bottom: 18px; }
.hello-day { margin: 0 0 2px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #86744a; font-weight: 600; }
.hello h1 { font-size: 34px; margin-bottom: 6px; }
.hello-wish { display: inline-block; margin: 0 0 12px; padding: 6px 0 6px 14px; border-left: 3px solid var(--gold);
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 18px; color: var(--gold-dark); }
.hello .muted { margin: 0; }
@media (max-width: 820px) { .hello h1 { font-size: 27px; } .hello-wish { font-size: 16px; } }

/* Đăng nhập: tên tài khoản ghi sẵn chữ hoa, bấm để chọn */
.who { border: 0; padding: 0; margin: 0; min-width: 0; text-align: left; }
.who legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.who-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.who-item { position: relative; display: block; cursor: pointer; }
.who-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.who-item span { display: block; padding: 13px 10px; border: 1.5px solid #dcd4c3; border-radius: 11px; background: #fff; text-align: center;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--ink-navy); transition: background .12s, border-color .12s, box-shadow .12s; }
.who-item:hover span { border-color: var(--gold); background: #fffaf0; }
.who-item input:focus-visible + span { outline: 2px solid rgba(201, 164, 92, .6); outline-offset: 2px; }
.who-item input:checked + span { background: linear-gradient(180deg, #c04e33, var(--navy)); border-color: var(--navy); color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px rgba(181, 69, 47, .28), 0 0 0 1px rgba(201, 164, 92, .7); }

/* Hai nút lập phiếu trên thanh trên: bình thường viền vàng, đang ở phiếu nào thì nút đó sáng vàng; rê chuột vào cũng sáng */
.top-actions .btn.ghost { transition: background .15s, color .15s, box-shadow .15s, transform .12s; }
.top-actions .btn.ghost:hover { background: rgba(201, 164, 92, .22); color: #fff; }
.top-actions .btn.ghost.on, .top-actions .btn.ghost:active { background: var(--metal); border-color: #b08a3e; color: #231a05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 6px 18px rgba(201, 164, 92, .45); }
.top-actions .btn.ghost.on:hover { filter: brightness(1.06); }

/* Bảng chọn nhanh trên phiếu xuất */
.quick h2 { margin-bottom: 4px; }
.quick-hint { font-size: 13px; margin: 0 0 10px; }
.quick-repeat { width: 100%; margin-bottom: 10px; white-space: normal; text-align: left; justify-content: flex-start; color: var(--ink-navy); border-color: var(--gold); background: #fffaf0; }
.quick-list { display: grid; gap: 6px; max-height: calc(100vh - 290px); overflow-y: auto; margin: 0 -6px; padding: 0 6px 2px; }
.quick-item { position: relative; display: block; width: 100%; text-align: left; padding: 8px 38px 8px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; cursor: pointer; font: inherit; color: var(--text); transition: border-color .12s, background .12s, transform .08s; }
.quick-item b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.quick-item small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.quick-item i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: 14px; color: var(--gold-dark); background: #f8f1e1; }
.quick-item:hover { border-color: var(--gold); background: #fffaf0; }
.quick-item:active { transform: scale(.985); }
.quick-item.picked { background: #f3f7f3; border-color: #cfe3d6; }
.quick-item.picked i { background: var(--green); color: #fff; }
@media (max-width: 1180px) { .quick-list { max-height: 260px; } }

/* Nút gợi ý dạng chữ (ví dụ "Điền số kế tiếp") */
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--ink-navy); }

/* Phiếu xuất không còn ô PO: chia lại 4 cột */
@media (min-width: 1181px) { .vc.xuat .vc-partner { grid-template-columns: 2fr 3.4fr 1.4fr 1.4fr; } }

/* Lịch sử đăng nhập */
.dot.bad { background: var(--red); }
.dot.off { background: #b6bdc9; }
.stat b.when { font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; font-size: 18px; font-weight: 700; }

/* Nhắc trên phiếu xuất khi kho chưa có số tồn đầu */
.stock-note { margin: -4px 0 12px; padding: 7px 12px; border-radius: 8px; background: #fff7e2; border: 1px solid #ecd49a; color: var(--amber); font-size: 13.5px; font-weight: 600; }
.stock-note a { color: var(--ink-navy); text-decoration: underline; }

/* Báo thiếu hàng ngay trên phiếu xuất */
.short-box { margin: 0 0 10px; padding: 9px 13px; border-radius: 9px; background: var(--red-bg); border: 1px solid #efb4b4; color: var(--red); }
.short-box b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.short-box span { display: block; font-size: 13.5px; font-weight: 600; }
.lines tr.short { background: #fdf0f0; }
.lines tr.short .p-qty { border-color: #e39a9a; background: #fff; color: var(--red); font-weight: 700; }
.quick-item small .out { color: var(--red); font-weight: 700; }
.quick-item small .in { color: var(--green); font-weight: 600; }

/* Báo sắp hết hàng */
.toast.warn { background: #a15c00; box-shadow: 0 14px 34px rgba(120, 70, 0, .35); }
.sg-stock.low { color: var(--amber); }
.quick-item small .low { color: var(--amber); font-weight: 700; }

/* Cột «Đang tồn» ở mục Hàng hóa: gõ thẳng số đang có trong kho */
.tbl.edit td.stock { background: #fffaf0; color: var(--ink-navy); }
.tbl.edit td.stock.neg { color: var(--red); }
.tbl.edit th.stock-h { color: var(--ink-navy); }

/* Dòng "Thêm mặt hàng": ô Mã đứng đầu như cột MÃ của bảng */
.addrow input[name=code] { width: 128px; font-family: Consolas, "Courier New", monospace; font-size: 13.5px; text-transform: uppercase; }
.addrow input[name=code]::placeholder { font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; text-transform: none; }

/* Thanh so sánh tiền bán theo ngày (trang Báo cáo): thanh vàng ánh kim trên rãnh kem */
.bar-cell { vertical-align: middle !important; }
.bar { display: block; height: 12px; border-radius: 999px; background: #efe8d8; box-shadow: inset 0 1px 2px rgba(43, 29, 22, .12); overflow: hidden; }
.bar i, .bar-cell .bar i { display: block; height: 100%; margin: 0; min-width: 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%, rgba(90, 62, 10, .12)),
              linear-gradient(90deg, #a8823a 0%, #d9bb74 38%, #f3e3b6 60%, #c9a45c 82%, #94702c 100%);
  box-shadow: 0 0 0 1px rgba(148, 112, 44, .35) inset; }

/* Nhắc việc cần làm (vàng) và nút chính trong bảng */
.alert.warnbox { background: #fff7e2; border: 1px solid #ecd49a; color: var(--amber); }
.alert.warnbox a { color: var(--ink-navy); text-decoration: underline; margin-left: 4px; }
.inline-form button.strong { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* Phiếu sản xuất: hai bảng (vật tư đã dùng / hàng làm ra), không có giá tiền */
.vc.sx .vc-body { grid-template-columns: minmax(0, 1fr); }
.vc.sx .vc-main { border-top: 4px solid var(--gold); }
.vc.sx .c-price, .vc.sx .c-amt, .vc.sx .sums, .vc.sx .f-ship, .vc.sx .f-phone, .vc.sx .f-inv, .vc.sx .f-po { display: none; }
.vc.sx .vc-partner { grid-template-columns: minmax(0, 440px); margin-bottom: 4px; }
.vc.sx .vc-foot { grid-template-columns: minmax(0, 1fr); }
.sec { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font: 700 18px "Playfair Display", Georgia, serif; color: var(--ink-navy); }
.sec small { font: 500 13px "Be Vietnam Pro", "Segoe UI", sans-serif; color: var(--muted); }
.sec::before { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 17px/1 "Segoe UI", sans-serif; color: #fff; }
.sec.used::before { content: "−"; background: #b3402a; }
.sec.made::before { content: "+"; background: var(--green); }
.tag.sx { background: #f3e7c9; color: #7a5a1e; }
.actions3.four { grid-template-columns: repeat(4, 1fr); }
.actions3.four .act { padding: 20px 20px; }
.actions3.four .act b { font-size: 20px; }
@media (max-width: 1240px) { .actions3.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .actions3.four { grid-template-columns: minmax(0, 1fr); } }
.top-actions .sx-btn { display: none; }
@media (min-width: 1440px) { .top-actions .sx-btn { display: inline-flex; } }

/* Ai lập phiếu, lúc nào */
.who-when { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.who-when b { color: var(--ink-navy); font-variant-numeric: tabular-nums; }

/* Phiếu sản xuất: bảng hàng làm ra có thêm ô «Còn làm dở» */
.vc.sx .made-table .c-price { display: table-cell; width: 130px; }
.vc.sx .made-table td.c-price input { border-color: #ecd49a; background: #fffaf0; }
.vc.sx .sec small { line-height: 1.35; }
.tag.wip { background: #fff1cf; color: var(--amber); margin-left: 4px; }

/* tên hàng trong bảng: chữ navy đậm, rê chuột mới chuyển xanh; tránh cả bảng toàn chữ xanh */
.tbl td a { color: var(--ink-navy); }
.tbl td a:hover { color: var(--link); text-decoration: underline; }

/* đổi logo trong Cài đặt */
.logo-row { display: flex; align-items: center; gap: 18px; margin: 6px 0 18px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; }
.logo-preview { height: 64px; width: auto; }

/* ---------- Quản lý website ---------- */
.th { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: inline-block; background: #fff; }
.th.none { display: inline-grid; place-items: center; color: #c00; font-weight: 700; }
.web-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.web-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .web-grid, .web-grid.three { grid-template-columns: 1fr; } }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.thumb { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.thumb.main { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 164, 92, .25); }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.thumb figcaption { font-size: 12px; padding: 6px 8px 0; color: var(--muted); }
.thumb-acts { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 8px 8px; }
.thumb-acts button { font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.thumb-acts button.danger { color: #c00; border-color: #efb4b4; }
.chung-img { max-width: 100%; max-height: 180px; display: block; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; padding: 8px; }
.chung-img.favicon { max-height: 80px; }
.joblog { margin-top: 12px; padding: 12px 14px; background: #0f1f3d; color: #fbf3e8; border-radius: 10px; font: 12.5px/1.5 Consolas, "Courier New", monospace; white-space: pre-wrap; max-height: 320px; overflow: auto; }
.stat b.sm { font-size: 18px; }
.crumbs { margin: 0 0 2px; font-size: 13px; }
label.check { display: flex; align-items: center; gap: 8px; }
label.check input { width: auto; }
.form label small.hint { display: block; color: var(--muted); font-weight: 400; margin-bottom: 4px; }
.card.form textarea { width: 100%; }
.card.form > label { display: block; margin: 14px 0 0; }
.card.form > label textarea, .card.form > label input { margin-top: 5px; }
.card.form > h2 { margin-top: 18px; }