/* =========================================================================
   Trang hướng dẫn kết nối fanpage.
   Tự chứa màu riêng để dùng được cả trong khung quản trị lẫn trang giới thiệu.
   ========================================================================= */
.guide{display:grid;gap:14px}
.gstep{display:flex;gap:18px;background:#fff;border:1px solid #e5e9ee;border-radius:14px;padding:24px 26px;
  box-shadow:0 8px 26px rgba(18,17,15,.04)}
.gnum{flex:0 0 40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#edbb02,#ff9800);color:#1a1310;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 8px 18px rgba(237,187,2,.26)}
.gbody{min-width:0;flex:1}
.gbody h3{font-size:17px;font-weight:800;color:#12110f;margin:0 0 10px}
.gbody p{margin:0 0 11px;font-size:14.5px;line-height:1.75;color:#4a5560}
.gbody p:last-child{margin-bottom:0}
.gbody a{color:#004e78;font-weight:600}
.ghint{background:#fffaf0;border-left:3px solid #edbb02;padding:11px 15px;border-radius:0 8px 8px 0;font-size:13.5px}
.glist{margin:0 0 11px;padding-left:20px;font-size:14.5px;line-height:1.85;color:#4a5560}
.gperms{display:flex;gap:8px;flex-wrap:wrap}
.gperm{background:#fdf3dc;color:#8a6d1a;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.gperm-opt{background:#e9f2f8;color:#004e78}
.gtable{width:100%;border-collapse:collapse;margin-top:8px}
.gtable th{text-align:left;padding:10px 14px 10px 0;font-size:13px;color:#6b7280;white-space:nowrap;
  vertical-align:top;width:150px;font-weight:600}
.gtable td{padding:10px 0;font-size:13.5px;border-bottom:1px solid #f1f4f7;color:#4a5560}
.gtable code{word-break:break-all;background:#f3f5f8;padding:2px 6px;border-radius:4px;font-size:12.5px}
.gbody code{background:#f3f5f8;padding:2px 6px;border-radius:4px;font-size:12.5px}
.gfaq{background:#fff;border:1px solid #e5e9ee;border-radius:14px;overflow:hidden;margin-top:26px}
.gfaq h3{font-size:15px;font-weight:800;color:#12110f;padding:16px 20px;border-bottom:1px solid #e5e9ee;margin:0}
.gfaq table{width:100%;border-collapse:collapse}
.gfaq th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#8a94a0;
  padding:11px 20px;background:#fafbfc;border-bottom:1px solid #e5e9ee}
.gfaq td{padding:13px 20px;border-bottom:1px solid #f1f4f7;font-size:13.5px;color:#4a5560;vertical-align:top}
.gfaq tr:last-child td{border-bottom:0}
.gfaq b{color:#12110f}
@media (max-width:640px){
  .gstep{flex-direction:column;gap:12px;padding:18px 16px}
  .gtable th{width:auto;display:block;padding:10px 0 2px}
  .gtable td{display:block;padding:0 0 10px}
  .gfaq th,.gfaq td{padding:11px 14px}
}

/* Khối lưu ý — tự chứa để bản công khai không cần app.css */
.guide-wrap .notice,.lp-section .notice{background:#fffaf0;border:1px solid #f3e2bd;border-radius:12px;
  padding:15px 18px;margin-bottom:20px;font-size:14px;color:#4a5560;line-height:1.7}
.guide-wrap .notice b,.lp-section .notice b{color:#12110f}

/* Khối chuẩn bị đầu trang */
.gprep{background:#fff;border:1px solid #e5e9ee;border-radius:14px;padding:22px 26px;margin-bottom:20px;
  box-shadow:0 8px 26px rgba(18,17,15,.04)}
.gprep h3{font-size:16px;font-weight:800;color:#12110f;margin:0 0 12px}
.gprep ul{margin:0;padding-left:20px;font-size:14.5px;line-height:1.85;color:#4a5560}
.gprep li{margin-bottom:5px}
.gprep li b{color:#12110f}
.gnote{margin:14px 0 0;padding:12px 15px;background:#f2f8f4;border-left:3px solid #1E6B3C;
  border-radius:0 8px 8px 0;font-size:13.5px;color:#335642}

/* Thời lượng ước tính cạnh tiêu đề bước */
.gtime{font-size:11.5px;font-weight:700;color:#8a6d1a;background:#fdf3dc;border-radius:20px;
  padding:3px 10px;margin-left:9px;vertical-align:middle;white-space:nowrap}

/* Bước then chốt và cảnh báo */
.gstep-key{border-color:#f0c36d;background:linear-gradient(180deg,#fffdf7,#fff)}
.gwarn{background:#fdf1ee;border-left:3px solid #b03a14;padding:12px 15px;border-radius:0 8px 8px 0;
  font-size:13.5px;color:#7a3a24}
.gwarn b{color:#8c2d10}

/* Bảng giải thích quyền */
.gperm-table{border:1px solid #e5e9ee;border-radius:10px;overflow:hidden;margin:4px 0 12px}
.gperm-table table{width:100%;border-collapse:collapse}
.gperm-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#8a94a0;padding:9px 14px;background:#fafbfc;border-bottom:1px solid #e5e9ee}
.gperm-table td{padding:9px 14px;font-size:13px;border-bottom:1px solid #f1f4f7;color:#4a5560}
.gperm-table tr:last-child td{border-bottom:0}
.gperm-table td code{background:#fdf3dc;color:#8a6d1a;font-weight:700;font-size:12px}
.gperm-table tr.opt td code{background:#e9f2f8;color:#004e78}
.gfaq + .gfaq{margin-top:18px}
@media (max-width:640px){
  .gprep{padding:18px 16px}
  .gtime{display:inline-block;margin:6px 0 0}
  .gperm-table th,.gperm-table td{padding:8px 11px;font-size:12.5px}
}