/* custom.css - theme: black & red */
:root{
  --brand:#d32f2f;
  --dark:#0b0b0b;
  --muted:#6c6c6c;
}
body{background:linear-gradient(180deg,#060606,#0e0e0e); color:#fff;}
.navbar-brand{font-weight:700; color:var(--brand) !important;}
.btn-primary{background:var(--brand); border-color:var(--brand);}
.card{background:#121212; border:1px solid rgba(255,255,255,0.03);}
footer{background:#070707;}
a.nav-link{color:rgba(255,255,255,0.85);}
a.nav-link:hover{color:var(--brand);}
.hero-title{color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.6);}
.product-price{color:var(--brand); font-weight:700;}
/* Custom CSS for Note/Annotation */
.note-container {
    position: relative;
}

/* Custom CSS for Note/Annotation */
.note-container {
    position: relative;
}

.bootstrap-note {
    position: absolute;
    top: -20px; /* Điều chỉnh vị trí note */
    right: -5px;
    background-color: yellow; /* Màu nổi bật */
    color: black;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    z-index: 1000; /* Đảm bảo note hiển thị trên các thành phần khác */
    transform: rotate(-5deg); /* Thêm chút hiệu ứng */
    white-space: nowrap; /* Ngăn xuống dòng */
    pointer-events: none; /* Giúp dễ dàng click qua note nếu cần */
}

/* --- Note for custom.css --- */
/* Custom variables/classes used: --brand, --dark, .hero-title, .product-price, .bootstrap-note, Custom Navbar/Card/Footer styling */