/* Hướng dẫn sử dụng — Hady Leaders. Phông Arial; đỏ #D02130 tiêu đề; vàng #FFB901 đường kẻ/viền nhấn; nền nhấn #FFF8E6 */
:root { --do: #D02130; --do-dam: #A8192A; --vang: #FFB901; --kem: #FFF8E6; --xen: #FAFAFA; --chu: #1F1F1F; --nhat: #5F5F5F; --vien: #E6E6E6; --nen: #F6F5F1;
  --tg-nen: #DCE6EE; --tg-toi: #E3F8CF; --tg-bot: #FFFFFF; --xanh: #1E7B4F; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--chu); background: var(--nen); font-size: 16px; line-height: 1.55; }
a { color: var(--do); }
img { max-width: 100%; }
.dau { background: #fff; border-bottom: 3px solid var(--vang); }
.dau .trong { max-width: 1040px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.dau img { width: 42px; height: auto; }
.dau .ten { font-weight: bold; color: var(--do); font-size: 18px; line-height: 1.2; }
.dau .ten small { display: block; color: var(--nhat); font-weight: normal; font-size: 12px; }
.dau .gian { flex: 1; }
.dau a.ve { font-size: 14px; text-decoration: none; white-space: nowrap; }
.khung { max-width: 1040px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 28px; color: var(--do); margin: 8px 0 6px; line-height: 1.25; }
h2 { font-size: 22px; color: var(--do); margin: 0 0 6px; }
h3 { font-size: 18px; margin: 18px 0 6px; }
.dan { color: var(--nhat); margin: 0 0 18px; font-size: 16px; }
.nhan { background: var(--kem); border-left: 4px solid var(--vang); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.nhan.canh { background: #FDECEE; border-left-color: var(--do); }
.khoi { background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 20px; margin-bottom: 16px; min-width: 0; }
.so-buoc { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--do); color: #fff; font-weight: bold; margin-right: 8px; flex: none; }
.buoc-dau { display: flex; align-items: center; margin-bottom: 6px; }
.buoc-dau h2, .buoc-dau h3 { margin: 0; }
.hai { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .hai { grid-template-columns: 1fr; } h1 { font-size: 24px; } .khoi { padding: 16px; } }
ul.gon { margin: 6px 0; padding-left: 20px; } ul.gon li { margin: 4px 0; }
kbd, code.go { background: #fff; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font-family: Arial, sans-serif; font-size: 15px; white-space: nowrap; }
table.bang { width: 100%; border-collapse: collapse; font-size: 15px; }
table.bang th { background: var(--do); color: #fff; text-align: left; padding: 9px 10px; }
table.bang td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
table.bang tbody tr:nth-child(even) td { background: var(--xen); }
.cuon { overflow-x: auto; }

/* ---- Thẻ công cụ (trang chủ) ---- */
.luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.the { background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-height: 180px; }
a.the:hover { border-color: var(--vang); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.the .bieu { font-size: 30px; line-height: 1; }
.the .tieu { font-weight: bold; font-size: 18px; color: var(--chu); }
.the .mo { color: var(--nhat); font-size: 15px; flex: 1; }
.the .chan { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nhan-nho { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--vien); color: var(--nhat); background: #fff; white-space: nowrap; }
.nhan-nho.co { border-color: #9cd3b5; color: var(--xanh); background: #effaf3; }
.nhan-nho.sap { border-style: dashed; }
.the.sap { background: #FBFBFA; }
.the.sap .tieu { color: var(--nhat); }
.di-tiep { font-weight: bold; color: var(--do); font-size: 15px; }

/* ---- Thẻ chuyển vai trò ---- */
.tab { display: flex; gap: 8px; margin: 16px 0; position: sticky; top: 0; z-index: 4; background: var(--nen); padding: 8px 0; }
.tab button { flex: 1; font: inherit; font-weight: bold; padding: 12px 10px; border-radius: 12px; border: 2px solid var(--vien); background: #fff; color: var(--chu); cursor: pointer; min-height: 48px; }
.tab button[aria-selected="true"] { border-color: var(--do); background: var(--do); color: #fff; }
.trang-tab[hidden] { display: none; }
.muc-luc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.muc-luc a { font-size: 14px; text-decoration: none; background: #fff; border: 1px solid var(--vien); border-radius: 99px; padding: 6px 12px; color: var(--chu); }
.muc-luc a:hover { border-color: var(--vang); }

/* ---- Mô phỏng Telegram ---- */
.tg { background: var(--tg-nen); border-radius: 18px; overflow: hidden; border: 1px solid #c9d6e0; max-width: 440px; width: 100%; font-size: 14.5px; }
.tg .thanh { background: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #d8e0e6; }
.tg .thanh .anh-dai { width: 34px; height: 34px; border-radius: 50%; background: var(--vang); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.tg .thanh b { display: block; font-size: 15px; }
.tg .thanh small { color: #7a8a96; font-size: 12px; }
.tg .ruot { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.tin { max-width: 88%; border-radius: 14px; padding: 7px 10px 6px; box-shadow: 0 1px 1px rgba(0,0,0,.08); position: relative; }
.tin .ai { font-weight: bold; font-size: 13px; color: #2a7ab0; margin-bottom: 2px; }
.tin.toi { align-self: flex-end; background: var(--tg-toi); border-bottom-right-radius: 4px; }
.tin.bot { align-self: flex-start; background: var(--tg-bot); border-bottom-left-radius: 4px; }
.tin.bot .ai { color: var(--do); }
.tin .gio { font-size: 11px; color: #8a9aa6; text-align: right; margin-top: 2px; }
.tin .tra-loi { border-left: 3px solid #2a7ab0; padding: 2px 8px; margin-bottom: 4px; font-size: 13px; color: #446; background: rgba(42,122,176,.06); border-radius: 4px; }
.nut-tg { display: grid; gap: 4px; margin-top: 4px; align-self: flex-start; max-width: 88%; width: 88%; }
.nut-tg .hang { display: flex; gap: 4px; }
.nut-tg span { flex: 1; text-align: center; background: rgba(255,255,255,.75); border-radius: 8px; padding: 7px 4px; font-size: 13px; font-weight: bold; color: #2a6f9e; }
.nut-tg span.chon { outline: 3px solid var(--vang); background: #fff; }
.bill { background: #fff; border-radius: 10px; padding: 10px; border: 1px solid #e3e3e3; font-size: 13px; color: #333; margin-bottom: 4px; }
.bill .ok { color: var(--xanh); font-weight: bold; }
.bill .tien { font-size: 20px; font-weight: bold; margin: 4px 0; }
.bill .mo-nhoe { filter: blur(3px); }
.bill .dong { display: flex; justify-content: space-between; gap: 10px; color: #666; }
.chi-tay { font-size: 13px; color: var(--do-dam); font-weight: bold; margin-top: 6px; }

/* ---- Mô phỏng trang báo cáo ---- */
.web { border: 1px solid #ccc; border-radius: 12px; overflow: hidden; background: #F5F5F2; font-size: 13px; }
.web .url { background: #eee; padding: 6px 10px; color: #555; font-size: 12px; border-bottom: 1px solid #ddd; }
.web .ruot { padding: 10px; }
.web .so4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.web .o { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 6px 8px; }
.web .o b { display: block; font-size: 16px; }
.web .o.chinh { border-top: 3px solid var(--do); }
.web .cot-ngang { display: grid; grid-template-columns: 120px 1fr; gap: 4px 8px; align-items: center; background: #fff; border-radius: 8px; padding: 8px; border: 1px solid #e5e5e5; }
.web .cot-ngang i { display: block; height: 10px; background: var(--do); border-radius: 0 3px 3px 0; }
.web .nut-do { background: var(--do); color: #fff; border-radius: 6px; padding: 3px 8px; font-weight: bold; float: right; }
.ghim { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vang); color: #000; font-size: 12px; font-weight: bold; margin-right: 4px; vertical-align: middle; }

/* ---- Bảng tra nhanh (in 1 trang A4) ---- */
.tra-nhanh { border: 2px solid var(--vang); }
.tra-nhanh .o-tra { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 760px) { .tra-nhanh .o-tra { grid-template-columns: 1fr; } }
.tra-nhanh .o-tra > div { background: var(--kem); border-radius: 10px; padding: 10px 12px; }
.tra-nhanh h4 { margin: 0 0 4px; color: var(--do); font-size: 15px; }
.nut-in { font: inherit; font-weight: bold; background: var(--do); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; min-height: 44px; }
.cuoi { text-align: center; color: #999; font-size: 12px; padding: 10px 16px 30px; letter-spacing: .5px; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .khong-in { display: none !important; }
}
[id] { scroll-margin-top: 84px; }