/* ==========================================================================
   BẢNG MÀU CHỦ ĐẠO (CSS VARIABLES) - ÁP DỤNG TOÀN WEB
   ========================================================================== */
:root {
    /* ==========================================================================
       1. MÀU THƯƠNG HIỆU CHÍNH (Tone Đỏ Viettel)
       ========================================================================== */
    --theme-color: #ee0033;         /* Linh hồn web: Viền menu con, icon menu, chấm slide active, thanh header ghim, nút chức năng chính */
    --theme-color-alt: #ee002d;     /* Vạch kẻ viền trái Banner, nền mặc định của nút Đăng ký SMS */
    --theme-color-dark: #c40000;    /* Đỏ sậm: Pha với theme-color tạo dải màu gradient sang trọng cho Menu Header */
    --theme-color-hover: #cc0026;   /* Kích hoạt khi hover vào nút Đăng ký SMS (tạo cảm giác nổi 3D) */
    --theme-color-mobile: #cc002b;  /* Nền đỏ đặc khối dành riêng cho menu xổ xuống trên Mobile */
	--theme-color-mobile-light: #b30019;   /* Đỏ vừa để làm dải màu mượt hơn nếu dùng Gradient */
    --theme-color-rgb: 238, 0, 51;  /* Mã RGB: Dùng để tạo lớp kính mờ (glassmorphism) cho Header và bóng đổ menu PC */
    --theme-color-dark-rgb: 196, 0, 0; /* Mã RGB: Đổ bóng cho thanh Menu Header khi cuộn trang */

    /* ==========================================================================
       2. MÀU NHẤN/ĐIỂM XUYẾT (Tone Vàng)
       ========================================================================== */
    --accent-color: #ffcc00;        /* Nổi bật trên nền đỏ: Viền dưới Menu, màu icon/chữ khi Active/Hover, gạch chân menu PC, thanh progress bar Banner */

    /* ==========================================================================
       3. MÀU CẢNH BÁO / ĐANG CHỌN (Tone Đỏ Bootstrap)
       ========================================================================== */
    --danger-color: #dc3545;        /* Chữ khi hover Breadcrumb, text giá tiền/cảnh báo, nền nút Tab đang chọn, số người xem (FOMO) */
    --danger-color-rgb: 220, 53, 69;/* Mã RGB: Tạo hiệu ứng bóng đổ tỏa sáng nhấp nháy (pulse) cho nút Copy cú pháp */

    /* ==========================================================================
       4. MÀU NỀN HỒNG NHẠT
       ========================================================================== */
    --bg-pink-light: #fff5f6;       /* Nền hover cho menu con trên PC, nền các dòng bảng thông số, nền trong cùng hộp "Cú pháp đăng ký" */
    --bg-pink-lighter: #ffe5e9;     /* Nền khối bo tròn (chứa tên gói cước) ở phần trên cùng của Thẻ sản phẩm */
    
    /* ==========================================================================
       5. MÀU XANH LÁ
       ========================================================================== */
    --green-color: #28a745;         /* Viền thẻ gói cước chẵn, nhãn dán (Ribbon Hot/Khuyên dùng), viền hộp thông báo FOMO */
    --green-color-dark: #198754;    /* Màu chữ tên gói cước và giá tiền bên trong khối header bo tròn của thẻ gói cước chẵn */
    --green-bg-light: #e8f5e9;      /* Màu nền xanh nhạt, thay thế nền hồng tại khối header bo tròn của thẻ gói cước chẵn */
}

/* ==========================================================================
   CẤU HÌNH HỆ THỐNG CỐT LÕI & NỀN TRANG
   ========================================================================== */
body {
    font-size: 16px;
    background-color: #f4f6f9;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   FIX LỖI GIẬT TRANG VÀ NÚT BACK-TO-TOP KHI MỞ POPUP SWEETALERT 2
   ========================================================================== */
/* Hỗ trợ tuyệt đối cho các trình duyệt (Tránh giật layout) */
html {
    scrollbar-gutter: stable;
}

/* Ép trình duyệt luôn giữ thanh cuộn dọc  */
body.swal2-shown {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

/* =========================================================
   FIX LỖI Ô VUÔNG MỜ CỦA NÚT TẮT SWEETALERT2
   ========================================================= */
body .swal2-container .swal2-close:focus,
body .swal2-container .swal2-close:active,
body .swal2-container .swal2-close:hover,
body .swal2-container .swal2-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* CSS ẢNH VÀ LINK CHO BÀI VIẾT VÀ SẢN PHẨM TRONG CKEDITOR */
.post-content img, .product-content img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain; 
    display: block; 
    margin: 10px auto; 
}
.post-content iframe, .product-content iframe {
    max-width: 100% !important;
}
.post-content p, .post-content span,
.product-content p, .product-content span {
    background-color: transparent !important;
}