/* =========================================================
   ROOT VARIABLES
========================================================= */
.sgb-banner {
    --btn-bg: #8bc800;
    --btn-text: #ffffff;
    --btn-border: transparent;
}

/* =========================================================
   BANNER WRAPPER
========================================================= */
.sgb-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */
.sgb-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    pointer-events: none;
}

/* =========================================================
   CONTENT
========================================================= */
.sgb-inner {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.sgb-left {
    max-width: 520px;
}

.sgb-left h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.sgb-left p {
    font-size: 18px;
    margin: 16px 0 24px;
    line-height: 1.6;
}

/* =========================================================
   CTA BUTTON – BASE
========================================================= */
.sgb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 14px 28px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;

    position: relative;
    cursor: pointer;

    border-style: solid;
    border-color: var(--btn-border);

    transition: all .25s ease;
}

.sgb-btn i {
    font-size: 14px;
}

.sgb-btn:hover {
    transform: translateY(-2px);
    opacity: .95;
}

/* =========================================================
   CTA BUTTON – STYLES (KIỂU NÚT)
========================================================= */

/* SOLID */
.sgb-btn-solid {
    background: var(--btn-bg);
    color: var(--btn-text);
    border-width: 0;
}

/* OUTLINE */
.sgb-btn-outline {
    background: transparent;
    color: var(--btn-bg);
    border-width: 2px;
    border-color: var(--btn-bg);
}

/* GRADIENT */
.sgb-btn-gradient {
    background: linear-gradient(
        135deg,
        var(--btn-bg),
        rgba(255,255,255,0.35)
    );
    color: #fff;
    border-width: 0;
    background-size: 200% 200%;
}

/* CUT CORNER */
.sgb-btn-cut-corner {
    background: var(--btn-bg);
    color: var(--btn-text);
    border-width: 0;
    clip-path: polygon(
        8% 0,
        100% 0,
        100% 70%,
        92% 100%,
        0 100%,
        0 30%
    );
}

/* =========================================================
   CTA EFFECTS (HIỆU ỨNG – CỘNG THÊM)
========================================================= */

/* GLOW */
.sgb-btn.sgb-glow:hover {
    box-shadow:
        0 0 10px rgba(255,255,255,.6),
        0 0 20px rgba(255,255,255,.4),
        0 0 40px rgba(255,255,255,.2);
}

/* PULSE */
.sgb-btn.sgb-pulse {
    animation: sgbPulse 1.8s infinite;
}

@keyframes sgbPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
    70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* NEON */
.sgb-btn.sgb-neon {
    text-shadow:
        0 0 5px rgba(255,255,255,.9),
        0 0 15px rgba(0,255,255,.9);
    animation: neonFlicker 1.6s infinite alternate;
}

@keyframes neonFlicker {
    from { opacity: 1; }
    to   { opacity: .85; }
}

/* FLOAT */
.sgb-btn.sgb-float {
    animation: sgbFloat 3s ease-in-out infinite;
}

@keyframes sgbFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* SHAKE */
.sgb-btn.sgb-shake:hover {
    animation: sgbShake .4s;
}

@keyframes sgbShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* BOUNCE */
.sgb-btn.sgb-bounce {
    animation: sgbBounce 2s infinite;
}

@keyframes sgbBounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}

/* RIPPLE */
.sgb-btn.sgb-ripple {
    overflow: hidden;
}

.sgb-btn.sgb-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.35);
    border-radius: inherit;
    opacity: 0;
}

.sgb-btn.sgb-ripple:hover::after {
    animation: sgbRipple .6s ease-out;
}

@keyframes sgbRipple {
    from { opacity: .6; transform: scale(0); }
    to   { opacity: 0; transform: scale(2.5); }
}

/* ATTENTION */
.sgb-btn.sgb-attention {
    animation: sgbAttention 1.8s infinite;
}

@keyframes sgbAttention {
    0% { transform: scale(1); }
    10% { transform: scale(1.08); }
    20% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* =========================================================
   BACKGROUND EFFECTS
========================================================= */

/* SNOW */
.sgb-effect-snow::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 20px 20px;
    animation: snowMove 8s linear infinite;
    opacity: .35;
    z-index: 2;
}

@keyframes snowMove {
    from { background-position: 0 0; }
    to   { background-position: 0 200px; }
}

/* PARTICLE */
.sgb-effect-particle::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: particleMove 14s linear infinite;
    opacity: .35;
    z-index: 2;
}

@keyframes particleMove {
    from { background-position: 0 0; }
    to   { background-position: 300px 300px; }
}

/* FIREWORK */
.sgb-effect-firework::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,200,0,.8) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,50,50,.8) 2px, transparent 2px);
    background-size: 80px 80px;
    animation: fireworkMove 6s linear infinite;
    opacity: .45;
    z-index: 2;
}

@keyframes fireworkMove {
    from { background-position: 0 0, 40px 40px; }
    to   { background-position: 200px -200px, -200px 200px; }
}

/* NEON BACKGROUND */
.sgb-effect-neon {
    box-shadow:
        0 0 20px rgba(0,255,255,.4),
        0 0 40px rgba(0,255,255,.25);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px) {
    .sgb-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sgb-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
 {
        padding: 40px;
    }

    .sgb-left h1 {
        font-size: 30px;
    }

    .sgb-right img {
        max-width: 340px;
    }
}

@media (max-width: 768px) {
    .sgb-inner {
        flex-direction: column;
        text-align: center;
    }

    .sgb-left {
        max-width: 100%;
    }

    .sgb-left h1 {
        font-size: 28px;
    }

    .sgb-left p {
        font-size: 16px;
    }

    .sgb-right img {
        margin-top: 24px;
    }
}
/* ================= IMAGE EFFECTS ================= */

.sgb-right img {
    transition: all .4s ease;
}

/* FLOAT */
.sgb-right.sgb-img-float img {
    animation: imgFloat 4s ease-in-out infinite;
}

@keyframes imgFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ZOOM HOVER */
.sgb-right.sgb-img-zoom img:hover {
    transform: scale(1.05);
}

/* GLOW */
.sgb-right.sgb-img-glow img {
    box-shadow:
        0 10px 40px rgba(0,0,0,.25),
        0 0 20px rgba(255,255,255,.3);
}
/*css điều khiển độ sắc nét và viền*/
.sgb-title-soft h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.sgb-title-sharp h1 {
  -webkit-text-stroke: 1px #062f52;
  text-shadow:
    0 3px 0 #062f52,
    0 6px 10px rgba(0,0,0,.45);
}
.sgb-title-ultra h1 {
  -webkit-text-stroke: 1.4px #062f52;
  letter-spacing: 1.6px;
  text-shadow:
    0 4px 0 #062f52,
    0 8px 16px rgba(0,0,0,.5);
}
.sgb-border-none {
  background: transparent;
}
.sgb-border-dashed {
  border: 4px dashed #ffd400;
}
.sgb-border-stripe {
  background:
    repeating-linear-gradient(
      45deg,
      #ffd400,
      #ffd400 10px,
      #111 10px,
      #111 20px
    );
  padding: 18px;
}
.sgb-border-neon {
  box-shadow:
    0 0 20px rgba(0,255,255,.5),
    0 0 40px rgba(0,255,255,.35);
}
@media (max-width:768px){
  .sgb-title-ultra h1{
    -webkit-text-stroke: .9px;
    font-size: 28px;
  }
}
.sgb-benefits-advanced {
  margin: 20px 0;
}

.sgb-benefit-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sgb-benefit-line i {
  font-size: 1.1em;
}
/* =========================================================
   TITLE EFFECTS – H1
========================================================= */

/* Bình thường */
.sgb-title-effect-normal h1 {
  font-weight: 600;
}

/* Chữ đậm */
.sgb-title-effect-bold h1 {
  font-weight: 900;
}

/* Chữ nổi (đổ bóng) */
.sgb-title-effect-shadow h1 {
  font-weight: 700;
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.5);
}

/* Viền trắng */
.sgb-title-effect-stroke h1 {
  font-weight: 800;
  -webkit-text-stroke: 2px #ffffff;
  text-shadow: none;
}

/* Đậm + nổi */
.sgb-title-effect-bold-shadow h1 {
  font-weight: 900;
  text-shadow:
    0 3px 0 rgba(0,0,0,.4),
    0 8px 18px rgba(0,0,0,.6);
}

/* Đậm + viền */
.sgb-title-effect-bold-stroke h1 {
  font-weight: 900;
  -webkit-text-stroke: 2px #ffffff;
  text-shadow:
    0 4px 10px rgba(0,0,0,.4);
}

.sgb-cta-sub {
    margin-top: 8px;
    opacity: 0.95;
}

.sgb-trust {
    margin-top: 6px;
    font-weight: 500;
}
.sgb-effect-gradient-move {
    background-size: 300% 300% !important;
    animation: sgbGradientMove 10s ease infinite;
}

@keyframes sgbGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.sgb-effect-mesh::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.1), transparent 50%);
    z-index: 0;
}
.sgb-effect-blur-orb::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.15);
    filter: blur(80px);
    border-radius: 50%;
    top: -80px;
    right: -80px;
}
.sgb-effect-light-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.15),
        transparent 70%
    );
    animation: sgbSweep 6s infinite;
}

@keyframes sgbSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.sgb-effect-wave::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 120%, rgba(255,255,255,.2), transparent 60%);
}
.sgb-effect-sparkle::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: .15;
}
.sgb-effect-floating-dots::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.25) 2px, transparent 2px);
    background-size: 80px 80px;
}
.sgb-effect-grid-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 60px 60px;
}
.sgb-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sgb-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
/* =========================================================
   SMART BANNER – BORDER STYLES
   Áp dụng cho: .sgb-banner.sgb-border-*
========================================================= */

/* Base */
.sgb-banner {
    position: relative;
    overflow: hidden;
}

/* Không viền */
.sgb-border-none {
    border: none;
}

/* ---------------------------------------------------------
   BASIC
--------------------------------------------------------- */

/* Viền mảnh */
.sgb-border-solid {
    border: 2px solid rgba(255,255,255,0.35);
}

/* Viền + đổ bóng (card) */
.sgb-border-shadow {
    box-shadow:
        0 10px 30px rgba(0,0,0,0.25),
        inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* ---------------------------------------------------------
   INDUSTRIAL / RECRUIT
--------------------------------------------------------- */

/* Viền nét đứt */
.sgb-border-dashed {
    border: 2px dashed rgba(255,255,255,0.5);
}

/* Viền chấm */
.sgb-border-dotted {
    border: 2px dotted rgba(255,255,255,0.5);
}

/* Viền vằn công trình */
.sgb-border-stripe {
    border: 4px solid transparent;
    background-clip: padding-box;
}

.sgb-border-stripe::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    background:
        repeating-linear-gradient(
            45deg,
            #facc15 0 10px,
            #111827 10px 20px
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Viền cắt góc */
.sgb-border-cut-corner {
    clip-path: polygon(
        20px 0,
        100% 0,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0 100%,
        0 20px
    );
    border: 2px solid rgba(255,255,255,0.4);
}

/* ---------------------------------------------------------
   MODERN / GRADIENT
--------------------------------------------------------- */

/* Viền gradient */
.sgb-border-gradient {
    border: 3px solid transparent;
    background:
        linear-gradient(#0000, #0000),
        linear-gradient(135deg, #38bdf8, #a855f7);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Viền gradient phát sáng */
.sgb-border-gradient-glow {
    border: 3px solid transparent;
    background:
        linear-gradient(#0000, #0000),
        linear-gradient(135deg, #22d3ee, #c084fc);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 25px rgba(168,85,247,0.5);
}

/* ---------------------------------------------------------
   GLOW / NEON
--------------------------------------------------------- */

/* Viền neon */
.sgb-border-neon {
    border: 2px solid #22d3ee;
    box-shadow:
        0 0 10px #22d3ee,
        0 0 25px rgba(34,211,238,0.8);
}

/* Glow mềm */
.sgb-border-soft-glow {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.25),
        0 0 30px rgba(255,255,255,0.25);
}

/* ---------------------------------------------------------
   GLASS / 3D
--------------------------------------------------------- */

/* Viền kính mờ */
.sgb-border-glass {
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
}

/* Viền inset (lõm) */
.sgb-border-inset {
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.25),
        inset 0 10px 20px rgba(0,0,0,0.35);
}

/* Viền nổi 3D */
.sgb-border-outset {
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.3),
        0 15px 30px rgba(0,0,0,0.4);
}

/* ---------------------------------------------------------
   SPECIAL
--------------------------------------------------------- */

/* Viền động */
.sgb-border-animated {
    border: 3px solid transparent;
    background:
        linear-gradient(#0000, #0000),
        linear-gradient(90deg, #22d3ee, #a855f7, #22d3ee);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: sgbBorderMove 4s linear infinite;
}

@keyframes sgbBorderMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ---------------------------------------------------------
   SAFETY
--------------------------------------------------------- */
.sgb-banner::before,
.sgb-banner::after {
    pointer-events: none;
}

/*ribbon*/
/* ======================================================
   RIBBON CORE
====================================================== */
.sgb-banner {
    position: relative;
    overflow: hidden;
}

.sgb-ribbon {
    position: absolute;
    z-index: 20;
    color: var(--sgb-ribbon-text, #fff);
    background: var(--sgb-ribbon-bg, #ef4444);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .5px;
    pointer-events: none;
}

/* ======================================================
   POSITION
====================================================== */
.sgb-ribbon-right {
    top: 18px;
    right: -42px;
    transform: rotate(45deg);
}

.sgb-ribbon-left {
    top: 18px;
    left: -42px;
    transform: rotate(-45deg);
}

/* ======================================================
   STYLE: CORNER DIAGONAL (PHỔ BIẾN)
====================================================== */
.sgb-ribbon-corner-diagonal {
    width: 160px;
    text-align: center;
    padding: 8px 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* ======================================================
   STYLE: CORNER TRIANGLE
====================================================== */
.sgb-ribbon-corner-triangle {
    width: 0;
    height: 0;
    background: transparent;
}

.sgb-ribbon-corner-triangle.sgb-ribbon-right {
    border-top: 60px solid var(--sgb-ribbon-bg);
    border-left: 60px solid transparent;
    right: 0;
    top: 0;
    transform: none;
}

.sgb-ribbon-corner-triangle.sgb-ribbon-left {
    border-top: 60px solid var(--sgb-ribbon-bg);
    border-right: 60px solid transparent;
    left: 0;
    top: 0;
    transform: none;
}

.sgb-ribbon-corner-triangle::after {
    content: attr(data-text);
}

/* ======================================================
   STYLE: RIBBON STRIP (DẢI VẢI)
====================================================== */
.sgb-ribbon-ribbon-strip {
    top: 18px;
    padding: 8px 16px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.sgb-ribbon-ribbon-strip.sgb-ribbon-left {
    border-radius: 4px 0 0 4px;
}

/* ======================================================
   STYLE: BADGE (HUY HIỆU TRÒN)
====================================================== */
.sgb-ribbon-badge {
    top: 16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-align: center;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.sgb-ribbon-badge.sgb-ribbon-right {
    right: 16px;
    transform: none;
}

.sgb-ribbon-badge.sgb-ribbon-left {
    left: 16px;
    transform: none;
}

/* ======================================================
   STYLE: MINIMAL
====================================================== */
.sgb-ribbon-minimal {
    top: 16px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
}

.sgb-ribbon-minimal.sgb-ribbon-right {
    right: 16px;
    transform: none;
}

.sgb-ribbon-minimal.sgb-ribbon-left {
    left: 16px;
    transform: none;
}

/* ======================================================
   17–20: SALE / TAG
====================================================== */
.sgb-ribbon-sale-tag {
    transform:none;
    top:16px;
    right:16px;
    padding:8px 18px;
    clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%,10% 50%);
}
.sgb-ribbon-label-pin {
    transform:none;
    top:16px;
    right:16px;
    padding:8px 14px;
    position:relative;
}
.sgb-ribbon-label-pin::after {
    content:"";
    position:absolute;
    bottom:-8px;
    left:50%;
    transform:translateX(-50%);
    width:8px;
    height:8px;
    background:#000;
    border-radius:50%;
}
/* ======================================================
   SALE – ĐỨNG / SIMPLE
====================================================== */

/* SALE FLAG */
.sgb-ribbon-sale-flag {
    transform: none;
    top: 14px;
    right: 14px;
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 4px;
    background: var(--sgb-ribbon-bg);
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* SALE BOX CORNER */
.sgb-ribbon-sale-corner-box {
    transform: none;
    top: 0;
    right: 0;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 0 0 0 6px;
    background: var(--sgb-ribbon-bg);
}

/* SALE VERTICAL (ĐỨNG THẲNG) */
.sgb-ribbon-sale-vertical {
    transform: none;
    top: 20px;
    right: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 12px 6px;
    font-size: 12px;
    border-radius: 4px 0 0 4px;
    background: var(--sgb-ribbon-bg);
}

/* SALE TAG SIMPLE */
.sgb-ribbon-sale-tag-simple {
    transform: none;
    top: 18px;
    right: 18px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 999px;
    background: var(--sgb-ribbon-bg);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}

/* ======================================================
   STYLE: GLOW / NEON
====================================================== */
.sgb-ribbon-glow {
    width: 160px;
    padding: 8px 0;
    text-align: center;
    box-shadow:
        0 0 10px var(--sgb-ribbon-bg),
        0 0 24px var(--sgb-ribbon-bg),
        0 0 48px rgba(255,255,255,.2);
    animation: sgbGlowPulse 2.4s ease-in-out infinite;
}

@keyframes sgbGlowPulse {
    0%   { box-shadow: 0 0 8px var(--sgb-ribbon-bg); }
    50%  { box-shadow: 0 0 28px var(--sgb-ribbon-bg); }
    100% { box-shadow: 0 0 8px var(--sgb-ribbon-bg); }
}

/* ======================================================
   MOBILE FIX
====================================================== */
@media (max-width: 640px) {
    .sgb-ribbon-corner-diagonal,
    .sgb-ribbon-glow {
        width: 130px;
        font-size: 11px;
    }

    .sgb-ribbon-badge {
        width: 54px;
        height: 54px;
        font-size: 10px;
    }
}

/*end*/
/* ================= LOGO OVER BANNER ================= */

.sgb-banner {
    position: relative;
}

.sgb-banner-logo {
    position: absolute;
    z-index: 6; /* cao hơn background, thấp hơn modal */
    pointer-events: none;
    max-width: 30%;
}

/* Positions */
.sgb-logo-top-left {
    top: 16px;
    left: 16px;
}

.sgb-logo-top-right {
    top: 16px;
    right: 16px;
}

.sgb-logo-bottom-left {
    bottom: 16px;
    left: 16px;
}

.sgb-logo-bottom-right {
    bottom: 16px;
    right: 16px;
}

/* Optional đẹp hơn */
.sgb-banner-logo {
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}