/* sb-pages.css — CSS dùng chung cho các trang phụ (Điều khoản, Bảo mật, 404).
   Tải cùng font với app (Nunito + Baloo 2) để giao diện thống nhất. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@400;600;700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#1A2340;-webkit-font-smoothing:antialiased}

/* ── Trang văn bản dài: Điều khoản / Bảo mật ── */
body.sb-doc{background:#F4FBF9;line-height:1.7}
.sb-doc .wrap{max-width:820px;margin:0 auto;padding:24px 20px 64px}
.sb-doc .top{display:flex;align-items:center;gap:12px;padding:18px 0}
.sb-doc .top img{height:40px;width:40px;border-radius:12px;box-shadow:0 3px 8px rgba(17,145,122,.18)}
.sb-doc .top .brand{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:22px;color:#0E8F79}
.sb-doc .card{background:#fff;border-radius:20px;padding:32px 28px;box-shadow:0 8px 30px rgba(16,143,121,.08)}
.sb-doc h1{font-size:26px;color:#12314A;margin-bottom:6px}
.sb-doc .updated{color:#7a8aa0;font-size:13px;margin-bottom:22px}
.sb-doc h2{font-size:18px;color:#0E8F79;margin:26px 0 8px}
.sb-doc p,.sb-doc li{color:#33415a;font-size:15px}
.sb-doc ul{margin:6px 0 6px 22px}
.sb-doc li{margin:4px 0}
.sb-doc a{color:#13B392;font-weight:700;text-decoration:none}
.sb-doc a:hover{text-decoration:underline}
.sb-doc .back{display:inline-block;margin-top:24px;padding:11px 20px;background:linear-gradient(135deg,#1FCBA6,#13B392);color:#fff;border-radius:12px;font-weight:800}
.sb-doc .note{background:#F0FBF8;border-left:4px solid #1FCBA6;border-radius:10px;padding:12px 16px;margin:16px 0;font-size:14px}
.sb-doc footer{text-align:center;color:#9aa7ba;font-size:13px;padding-top:28px}
@media (max-width:560px){ .sb-doc .card{padding:24px 18px} .sb-doc h1{font-size:23px} }

/* Văn bản dài được sb-doc.js gom thành: mở đầu · mục lục (+ liên kết) · các mục.
   Màn hẹp: đọc liền một mạch như cũ (mục lục ẩn, liên kết xuống cuối). */
.doc-tabs .card{display:flex;flex-direction:column}
.doc-tabs .doc-toc{order:3}
.doc-tabs .doc-toc-list{display:none}
/* Desktop: mục lục trái + 1 mục bên phải → cả trang vừa 1 màn hình, không cuộn */
@media (min-width:901px){
  body.sb-doc.doc-tabs{height:100vh;height:100dvh}
  .doc-tabs .wrap{max-width:1180px;height:100%;display:flex;flex-direction:column;padding:8px 24px 14px}
  .doc-tabs .top{flex:0 0 auto;padding:10px 0}
  .doc-tabs .card{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:clamp(240px,24%,300px) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);column-gap:32px;padding:26px 32px}
  .doc-tabs .doc-intro{grid-column:1 / -1;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #E6F2EF}
  .doc-tabs .doc-intro .updated{margin-bottom:8px}
  .doc-tabs .doc-toc{order:0;display:flex;flex-direction:column;gap:14px;min-height:0}
  .doc-tabs .doc-toc-list{display:flex;flex-direction:column;gap:4px}
  .doc-toc-btn{text-align:left;border:none;background:transparent;cursor:pointer;border-radius:12px;padding:9px 12px;
    font:700 15px/1.35 'Nunito',Arial,sans-serif;color:#33415a}
  .doc-toc-btn:hover{background:#F0FBF8;color:#0E8F79}
  .doc-toc-btn.on{background:linear-gradient(135deg,#1FCBA6,#13B392);color:#fff}
  .doc-tabs .top .doc-links{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
  .doc-tabs .top .doc-links .back{margin-top:0;padding:8px 16px}
  .doc-tabs .top .doc-links p{margin:0 !important;font-size:14px}
  .doc-tabs .doc-sec{display:none}
  .doc-tabs .doc-sec.on{display:block}
  .doc-tabs .doc-sec h2{margin-top:0;font-size:22px}
  .doc-tabs .doc-sec p,.doc-tabs .doc-sec li{font-size:16px}
  .doc-tabs footer{flex:0 0 auto;padding-top:10px}
}

/* ── Trang lỗi 404 ── */
body.sb-error{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(170deg,#DFF4EF 0%,#E8F4FB 45%,#F1F8FF 72%,#FFFFFF 100%);color:#12314A}
.sb-error .box{max-width:460px;text-align:center;background:#fff;border-radius:24px;padding:40px 28px;
  box-shadow:0 26px 60px rgba(18,49,74,.14);border:1px solid #EEF4F2}
.sb-error .emoji{font-size:64px;line-height:1}
.sb-error .code{font-family:'Baloo 2','Nunito',sans-serif;font-size:66px;font-weight:800;color:#1FCBA6;margin:6px 0;line-height:1.2}
.sb-error h1{font-size:22px;margin-bottom:8px}
.sb-error p{color:#5A6890;font-weight:600;line-height:1.6;margin-bottom:22px}
.sb-error a.btn{display:inline-block;padding:13px 26px;border-radius:14px;text-decoration:none;font-weight:900;
  color:#fff;background:linear-gradient(135deg,#1FCBA6,#13B392);box-shadow:0 10px 22px rgba(19,179,146,.32)}
.sb-error a.btn:hover{transform:translateY(-2px)}
.sb-error .links{display:flex;justify-content:center;gap:10px 16px;flex-wrap:wrap;margin-top:20px;font-size:13px;font-weight:800}
.sb-error .links a{color:#0E8F79;text-decoration:none}
.sb-error .links a:hover{text-decoration:underline}
@media (min-width:901px) and (max-height:820px){
  .doc-tabs .card{padding:22px 30px}
  .doc-tabs .doc-intro{padding-bottom:12px;margin-bottom:14px}
  .doc-toc-btn{padding:7px 12px}
}
@media (min-width:901px) and (max-height:720px){
  .doc-tabs .doc-toc-list{gap:2px}
  .doc-toc-btn{padding:6px 12px}
}