/* Ẩn các khối AlpineJS khi chưa khởi tạo xong */
[x-cloak] {
    display: none !important;
}

/* Ẩn các icon thô khi đang load để tránh chớp màn hình */
i[data-lucide] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Đảm bảo click vào icon luôn xuyên qua và truyền trực tiếp xuống phần tử cha */
i[data-lucide],
i[data-lucide] *,
svg.lucide,
svg.lucide *,
.lucide,
.lucide * {
    pointer-events: none !important;
}

/* Cấu hình màu sắc của NProgress bằng biến CSS dynamic */
#nprogress .bar {
    background: var(--theme-color) !important;
    height: 3px !important;
    z-index: 99999 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--theme-color), 0 0 5px var(--theme-color) !important;
}

#nprogress .spinner {
    display: none !important;
    /* Tắt spinner xoay tròn vì đã có thanh loading bar rất tinh tế */
}

/* Hiệu ứng mờ dần khi chuyển trang */
body {
    transition: opacity 0.15s ease-in-out;
}

body.page-leaving {
    opacity: 0.7;
    pointer-events: none;
}

/* Tự động bù trừ khoảng cách khi cuộn tới anchor để tránh bị Header Sticky che khuất */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* Bù trừ chiều cao của header (64px) + khoảng đệm an toàn */
}

/* Bổ sung scroll-margin-top cho các tiêu đề trong bài viết để hiển thị đẹp mắt nhất */
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    scroll-margin-top: 80px;
}

.blog-content {
    color: rgb(75 85 99);
    font-size: 1.0625rem;
    line-height: 1.85;
}

.blog-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: rgb(17 24 39);
    font-size: clamp(1.45rem, 1.9vw, 1.75rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
}

.blog-content h2:first-child {
    margin-top: 0;
}

.blog-content h3 {
    margin-top: 1.75rem;
    margin-bottom: .75rem;
    color: rgb(17 24 39);
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.35;
}

.blog-content p {
    margin-top: 1rem;
}

.blog-content ul,
.blog-content ol {
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.blog-content ul {
    list-style: disc;
}

.blog-content ol {
    list-style: decimal;
}

.blog-content li {
    margin-top: .5rem;
}

.dark .blog-content {
    color: rgb(203 213 225);
}

.dark .blog-content h2,
.dark .blog-content h3 {
    color: white;
}

/* Hạ z-index của header và nâng z-index của main khi modal Hướng dẫn tương tác mở để tránh bị đè */
body.demo-modal-open header {
    z-index: 30 !important;
}
body.demo-modal-open main {
    z-index: 50 !important;
}

/* Ẩn scrollbar cho các khu vực cuộn ngang (như slider voucher) */
.scrollbar-none::-webkit-scrollbar {
    display: none !important;
}
.scrollbar-none {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}