/* ─────────────────────────────────────────────────────────────
   Hướng dẫn sử dụng RCam — giao diện trang
   Bảng màu lấy y hệt trang chủ (web/index.html) để 2 trang cùng một bộ mặt.
   ───────────────────────────────────────────────────────────── */
:root{
  --page:radial-gradient(900px 480px at 50% -180px, rgba(237,108,44,.06), rgba(237,108,44,0) 60%), #f7f3ee;
  --bg:#fbf8f4; --panel:#ffffff; --panel2:#f4ede4;
  --line:#e5ddd2;
  --text:#241e18; --muted:#86796b; --brand:#ed6c2c; --brand2:#c8541a;
  color-scheme:light;
  --ok:#1e7d43; --okbg:rgba(30,125,67,.10);
  --danger:#c0392b; --danger-bg:rgba(192,57,43,.08);
  --warn:#b97f1e; --warnbg:rgba(185,127,30,.10);
  --info:#1c6ea4; --infobg:rgba(28,110,164,.09);
  --radius:14px;
  --chrome:#17120d; --chrome-ink:#f5ede1; --chrome-mut:#b7aa99; --chrome-line:#4a3d2e;
  --hdr:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--page);background-attachment:fixed;color:var(--text);
  line-height:1.62;font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--brand)}
button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;font-size:14px;font-weight:600}
.wrap{max-width:1320px;margin:0 auto;padding:0 16px}
.spacer{flex:1}
.skiplink{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 14px;z-index:99}
.skiplink:focus{left:8px;top:8px}

/* ── Header ── */
header.top{background:var(--chrome);position:sticky;top:0;z-index:40}
.brandbar{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:nowrap}
/* Dùng đúng ảnh logo của trang chủ (web/index.html), không thay bằng emoji */
.logo{width:40px;height:40px;border-radius:11px;background:var(--brand);display:flex;flex:0 0 auto;
  align-items:center;justify-content:center;text-decoration:none;overflow:hidden;
  box-shadow:0 4px 14px rgba(237,108,44,.35)}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
.btitle{min-width:0}
.btitle h1{font-size:18px;margin:0;color:var(--chrome-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btitle small{color:var(--chrome-mut);display:block;font-weight:400;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langtoggle{display:flex;border:1px solid var(--chrome-line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.langbtn{background:transparent;color:var(--chrome-mut);padding:5px 11px;font-size:12px;border-radius:0;font-weight:700}
.langbtn.active{background:var(--brand);color:#fff}
.btn-ghost{background:transparent;color:var(--chrome-mut);border:1px solid var(--chrome-line);
  text-decoration:none;display:inline-block}
.btn-ghost:hover{color:var(--chrome-ink);border-color:var(--brand)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.homelink{flex:0 0 auto}
@media(max-width:720px){ .homelink{display:none} .btitle small{display:none} }

/* ── Bố cục 3 cột ── */
.layout{display:grid;grid-template-columns:264px minmax(0,1fr) 210px;gap:28px;align-items:start;
  padding-top:22px;padding-bottom:60px}
@media(max-width:1180px){ .layout{grid-template-columns:250px minmax(0,1fr)} .onthis{display:none} }
@media(max-width:900px){ .layout{grid-template-columns:minmax(0,1fr);gap:0} }

/* ── Mục lục ── */
.toc{position:sticky;top:calc(var(--hdr) + 14px);max-height:calc(100vh - var(--hdr) - 30px);
  overflow-y:auto;overscroll-behavior:contain;padding-bottom:10px}
.searchbox{position:relative;margin-bottom:12px}
.searchbox input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font-size:14px;font-family:inherit}
.searchbox input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.searchbox .sic{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.6}
.toclist{list-style:none;margin:0;padding:0;counter-reset:ch}
.toclist li{margin:1px 0}
.toclist a{display:flex;gap:9px;align-items:center;padding:8px 11px;border-radius:9px;
  text-decoration:none;color:var(--text);font-size:14.5px;border:1px solid transparent}
.toclist a .ci{font-size:15px;width:20px;text-align:center;flex:0 0 auto}
.toclist a:hover{background:var(--panel);border-color:var(--line)}
.toclist a.on{background:var(--brand);color:#fff;font-weight:700}
.toclist a.on .ci{filter:grayscale(1) brightness(3)}
.tocfoot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.printall{font-size:13px;color:var(--muted);text-decoration:none}
.printall:hover{color:var(--brand)}
.tocfab{display:none}
@media(max-width:900px){
  .tocfab{display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 4px;padding:11px 14px;
    background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:11px;font-size:15px}
  .toc{position:static;max-height:none;overflow:visible;display:none;margin:8px 0 6px;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
  .toc.open{display:block}
}

/* ── Kết quả tìm ── */
.results{margin-bottom:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);overflow:hidden}
.results .rhit{display:block;padding:9px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.results .rhit:last-child{border-bottom:none}
.results .rhit:hover{background:var(--panel2)}
.results .rc{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.3px}
.results .rt{font-size:14px;font-weight:600;margin:1px 0}
.results .rs{font-size:12.5px;color:var(--muted);line-height:1.45}
.results mark{background:rgba(237,108,44,.24);color:inherit;border-radius:3px;padding:0 2px}
.results .rnone{padding:12px;font-size:13.5px;color:var(--muted)}

/* ── Vùng nội dung ── */
.doc{min-width:0}
.content{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 38px 38px}
@media(max-width:640px){ .content{padding:20px 17px 26px;border-radius:12px} }
.loading{color:var(--muted)}

.content h1{font-size:29px;line-height:1.25;margin:2px 0 6px;letter-spacing:-.3px}
.content h2{font-size:21.5px;margin:38px 0 12px;padding-top:14px;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr) + 14px)}
.content h2:first-of-type{border-top:none;padding-top:0}
.content h3{font-size:17.5px;margin:26px 0 8px;scroll-margin-top:calc(var(--hdr) + 14px)}
.content h4{font-size:15.5px;margin:20px 0 6px;color:var(--brand2)}
.content p{margin:11px 0}
.content ul,.content ol{margin:11px 0;padding-left:24px}
.content li{margin:6px 0}
.content li>ul,.content li>ol{margin:6px 0}
.content strong{color:#160f09}
.content hr{border:none;border-top:1px solid var(--line);margin:28px 0}
.content blockquote{margin:14px 0;padding:2px 0 2px 16px;border-left:3px solid var(--line);color:var(--muted)}
.content code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;
  font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--brand2)}
.content pre{background:#241e18;color:#f3ece2;border-radius:10px;padding:13px 15px;overflow-x:auto;font-size:13px}
.content pre code{background:none;border:none;color:inherit;padding:0;font-size:13px}
.lead{font-size:17px;color:var(--muted);margin:6px 0 4px}

/* Đường dẫn nút bấm trong app: Menu ▸ Xuất ▸ Word */
.content .path{background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:1px 7px;font-size:.9em;font-weight:600;color:var(--text);white-space:nowrap}

/* Bảng */
.tablewrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:11px}
.content table{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--panel)}
.content th,.content td{padding:10px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.content thead th{background:var(--panel2);font-size:13px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--muted);white-space:nowrap}
.content tbody tr:last-child td{border-bottom:none}

/* Hình minh hoạ */
figure{margin:22px 0;text-align:center}
figure img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
figure figcaption{font-size:13px;color:var(--muted);margin-top:8px;font-style:italic}
figure.plain img{border:none;background:none}

/* Khối lưu ý */
.note{margin:18px 0;padding:13px 16px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);font-size:14.7px}
.note>:first-child{margin-top:0}
.note>:last-child{margin-bottom:0}
.note .nh{font-weight:800;display:block;margin-bottom:3px}
.note.tip{background:var(--okbg);border-color:rgba(30,125,67,.3)}
.note.tip .nh{color:var(--ok)}
.note.warn{background:var(--warnbg);border-color:rgba(185,127,30,.35)}
.note.warn .nh{color:var(--warn)}
.note.danger{background:var(--danger-bg);border-color:rgba(192,57,43,.3)}
.note.danger .nh{color:var(--danger)}
.note.info{background:var(--infobg);border-color:rgba(28,110,164,.28)}
.note.info .nh{color:var(--info)}

/* Danh sách chú thích số ①②③ đi kèm hình */
ol.keys{list-style:none;padding-left:0;counter-reset:k;margin:14px 0}
ol.keys>li{counter-increment:k;position:relative;padding-left:36px;margin:9px 0;font-size:15px}
ol.keys>li::before{content:counter(k);position:absolute;left:0;top:1px;width:25px;height:25px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center}

/* Hỏi & Đáp */
details.faq{border:1px solid var(--line);border-radius:11px;margin:9px 0;background:var(--panel);overflow:hidden}
details.faq>summary{cursor:pointer;padding:13px 16px;font-weight:650;font-size:15.3px;list-style:none;
  display:flex;gap:10px;align-items:flex-start}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::before{content:"›";color:var(--brand);font-weight:800;font-size:19px;line-height:1.2;
  transition:transform .18s;flex:0 0 auto}
details.faq[open]>summary::before{transform:rotate(90deg)}
details.faq[open]>summary{background:var(--panel2);border-bottom:1px solid var(--line)}
details.faq .fa{padding:4px 16px 14px 32px;font-size:14.8px}
details.faq .fa>:first-child{margin-top:10px}

/* Thẻ liên kết chương (dùng ở trang Tổng quan) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;margin:18px 0}
.cards a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;text-decoration:none;color:var(--text);transition:.15s}
.cards a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 18px rgba(36,30,24,.07)}
.cards .ci{font-size:21px}
.cards .ct{font-weight:700;margin:5px 0 2px;font-size:15.5px}
.cards .cd{font-size:13px;color:var(--muted);line-height:1.45}

/* Chuyển chương */
.pager{display:flex;gap:12px;margin-top:20px}
.pv{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 15px;
  text-decoration:none;color:var(--text);min-width:0}
.pv:hover{border-color:var(--brand)}
.pv .pl{font-size:12px;color:var(--muted);display:block}
.pv b{font-size:14.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv.nx{text-align:right}
.pv[hidden]{display:none}
.docfoot{margin-top:24px;text-align:center;font-size:12.5px;color:var(--muted)}
.docfoot a{color:var(--muted)}

/* Cột phải: mục con trong chương */
.onthis{position:sticky;top:calc(var(--hdr) + 14px);max-height:calc(100vh - var(--hdr) - 30px);
  overflow-y:auto;font-size:13.2px}
.onthis .oth{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin-bottom:8px}
.onthis a{display:block;padding:4px 0 4px 11px;border-left:2px solid var(--line);color:var(--muted);
  text-decoration:none;line-height:1.4}
.onthis a:hover{color:var(--brand)}
.onthis a.on{color:var(--brand);border-left-color:var(--brand);font-weight:600}
.onthis a.lvl3{padding-left:22px;font-size:12.6px}

/* ── Chế độ in / xem toàn bộ ── */
.allsep{margin:44px 0 0;border-top:2px dashed var(--line)}
@media print{
  header.top,.toc,.onthis,.pager,.tocfab,.skiplink,.docfoot{display:none!important}
  .layout{grid-template-columns:1fr;padding:0}
  .content{border:none;padding:0}
  body{background:#fff;font-size:12pt}
  .content h2{page-break-after:avoid}
  figure,.note,details.faq,.tablewrap{page-break-inside:avoid}
  details.faq>summary::before{content:""}
  details.faq .fa{display:block!important}
  a{color:inherit;text-decoration:none}
}