/* Start custom CSS for html, class: .elementor-element-f6460dc *//* ===== Base ===== */
.sb-guide{font-family:'Be Vietnam Pro','Poppins',Arial,sans-serif;color:#2b3a67;line-height:1.7;}
.sb-guide *{box-sizing:border-box;}
.sb-guide img{max-width:100%;height:auto;border-radius:12px;display:block;}

/* ===== Hero ===== */
.sb-guide-hero{position:relative;background:linear-gradient(135deg,#2b6cf6 0%,#1fc8db 100%);color:#fff;text-align:center;padding:70px 20px 90px;overflow:hidden;}
.sb-guide-hero::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:60px;background:#fff;clip-path:polygon(0 100%,100% 100%,100% 0,0 60%);}
.sb-guide-hero .icon{font-size:42px;margin-bottom:14px;opacity:.95;}
.sb-guide-hero h1{font-size:40px;font-weight:700;margin:0 0 14px;text-shadow:0 3px 14px rgba(0,0,0,.18);}
.sb-guide-hero p{font-size:17px;max-width:680px;margin:0 auto;opacity:.95;}
.sb-guide-hero .sb-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);padding:7px 18px;border-radius:50px;font-size:14px;margin-top:18px;}

/* ===== Layout ===== */
.sb-guide-wrap{max-width:1180px;margin:0 auto;padding:50px 24px 70px;display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;}

/* ===== TOC ===== */
.sb-guide-toc{position:sticky;top:90px;background:#fff;border:1px solid #e7eefc;border-radius:16px;padding:22px;box-shadow:0 8px 28px rgba(43,108,246,.08);}
.sb-guide-toc h4{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#2b6cf6;margin:0 0 16px;}
.sb-guide-toc ul{list-style:none;margin:0;padding:0;}
.sb-guide-toc li{margin-bottom:6px;}
.sb-guide-toc a{display:block;font-size:14.5px;color:#5a6781;text-decoration:none;padding:9px 12px;border-radius:8px;transition:all .25s ease;}
.sb-guide-toc a:hover{background:linear-gradient(135deg,#2b6cf6,#1fc8db);color:#fff;transform:translateX(4px);}

/* ===== Content ===== */
.sb-guide-content{min-width:0;}
.sb-guide-section{background:#fff;border:1px solid #eef2fb;border-radius:18px;padding:32px 34px;margin-bottom:28px;box-shadow:0 6px 22px rgba(43,108,246,.06);transition:box-shadow .35s ease,transform .35s ease;}
.sb-guide-section:hover{box-shadow:0 14px 40px rgba(43,108,246,.14);transform:translateY(-3px);}
.sb-guide-section h2{display:flex;align-items:center;gap:14px;font-size:24px;font-weight:700;color:#1d2b50;margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid #eef2fb;}
.sb-guide-section h2 .num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#2b6cf6,#1fc8db);color:#fff;font-size:17px;}
.sb-guide-section h3{font-size:18px;font-weight:600;color:#2b6cf6;margin:26px 0 12px;}
.sb-guide-section p{margin:0 0 14px;padding:4px 10px;border-radius:8px;transition:background .3s ease;}
.sb-guide-section p:hover{background:#f6f9ff;}
.sb-guide-section a{color:#2b6cf6;font-weight:500;text-decoration:none;border-bottom:1px dashed #9bc0ff;transition:.25s;}
.sb-guide-section a:hover{color:#1fc8db;border-bottom-color:#1fc8db;}

/* Steps list */
.sb-steps{list-style:none;margin:18px 0;padding:0;counter-reset:step;}
.sb-steps li{position:relative;padding:14px 16px 14px 56px;margin-bottom:12px;background:#f6f9ff;border-radius:12px;border-left:3px solid transparent;transition:all .3s ease;counter-increment:step;}
.sb-steps li::before{content:counter(step);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2b6cf6,#1fc8db);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.sb-steps li:hover{background:#fff;border-left-color:#1fc8db;box-shadow:0 6px 18px rgba(43,108,246,.12);transform:translateX(5px);}

/* Image figure */
.sb-fig{margin:22px 0;}
.sb-fig img{border:1px solid #eef2fb;box-shadow:0 8px 24px rgba(0,0,0,.08);transition:transform .4s ease,box-shadow .4s ease;}
.sb-fig img:hover{transform:scale(1.015);box-shadow:0 16px 40px rgba(0,0,0,.16);}
.sb-fig figcaption{text-align:center;font-size:13.5px;color:#8893ac;margin-top:10px;font-style:italic;}

/* Note / tip box */
.sb-note{display:flex;gap:14px;background:#eef6ff;border:1px solid #d4e6ff;border-left:4px solid #2b6cf6;border-radius:12px;padding:16px 18px;margin:18px 0;font-size:14.5px;}
.sb-note i{color:#2b6cf6;font-size:20px;margin-top:2px;}
.sb-note.tip{background:#eafbf6;border-color:#bdeee2;border-left-color:#14e0c0;}
.sb-note.tip i{color:#0e9e87;}

/* Code block */
.sb-code{position:relative;background:#0f1b33;border-radius:14px;padding:20px 22px;margin:18px 0;overflow:auto;}
.sb-code pre{margin:0;color:#d7e3ff;font-family:'Fira Code','Consolas',monospace;font-size:13.5px;line-height:1.6;white-space:pre;}
.sb-code .lang{position:absolute;top:10px;right:14px;font-size:11px;letter-spacing:1px;color:#5d7bb5;text-transform:uppercase;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .sb-guide-wrap{grid-template-columns:1fr;padding:36px 18px 56px;}
  .sb-guide-toc{position:relative;top:0;}
  .sb-guide-hero h1{font-size:30px;}
  .sb-guide-section{padding:24px 20px;}
  .sb-guide-section h2{font-size:20px;}
}

/* ===== Code block + nút copy ===== */
.sb-code{position:relative;background:#0f1b33;border-radius:14px;padding:44px 0 0;margin:18px 0;overflow:hidden;}
.sb-code .sb-code-bar{position:absolute;top:0;left:0;width:100%;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);}
.sb-code .lang{font-size:11px;letter-spacing:1px;color:#7d97cf;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif;}
.sb-code .sb-copy-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);color:#cfe0ff;border:1px solid rgba(255,255,255,.15);border-radius:8px;font-size:12px;font-weight:500;padding:5px 12px;cursor:pointer;transition:all .25s ease;font-family:'Be Vietnam Pro',sans-serif;}
.sb-code .sb-copy-btn:hover{background:linear-gradient(135deg,#2b6cf6,#1fc8db);color:#fff;border-color:transparent;}
.sb-code .sb-copy-btn.copied{background:#0e9e87;color:#fff;border-color:transparent;}
.sb-code pre{margin:0;padding:18px 22px;color:#d7e3ff;font-family:'Fira Code','Consolas',monospace;font-size:13px;line-height:1.65;white-space:pre;overflow-x:auto;}
.sb-code pre::-webkit-scrollbar{height:8px;}
.sb-code pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;}

/* tiêu đề phụ ví dụ */
.sb-api-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#1d2b50;background:#eef6ff;border:1px solid #d4e6ff;border-radius:50px;padding:6px 16px;margin:24px 0 4px;}
.sb-api-label i{color:#2b6cf6;}

/* ===== Ảnh to & rõ hơn ===== */
.sb-fig img{
  width:100%;
  cursor:zoom-in;
}
/* ảnh screenshot rộng -> cho phép tràn ra ngoài khung nội dung một chút */
.sb-fig.wide{
  margin-left:-30px;
  margin-right:-30px;
}
.sb-fig.wide img{
  border-radius:14px;
}
@media (max-width:900px){
  .sb-fig.wide{ margin-left:0; margin-right:0; }
}

/* ===== Lightbox (xem ảnh full) ===== */
.sb-lightbox{
  position:fixed; inset:0; z-index:99999;
  background:rgba(8,15,32,.92);
  display:none; align-items:center; justify-content:center;
  padding:30px; cursor:zoom-out;
  opacity:0; transition:opacity .3s ease;
}
.sb-lightbox.open{ display:flex; opacity:1; }
.sb-lightbox img{
  max-width:96%; max-height:92%;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:sbZoomIn .3s ease;
}
.sb-lightbox .sb-lb-close{
  position:absolute; top:22px; right:28px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  border:none; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.sb-lightbox .sb-lb-close:hover{ background:#2b6cf6; }
@keyframes sbZoomIn{ from{transform:scale(.92);opacity:0;} to{transform:scale(1);opacity:1;} }/* End custom CSS */