/* DANH MỤC SẢN PHẨM - VẠCH ĐỎ CĂN GIỮA CẢ 2 DÒNG */
.tva-cats h2{
    border-left:0 !important;
    padding-left:20px !important;
    background:none !important;
}

.tva-cats .cat-heading .col-inner{
    position:relative;
    padding-left:0 !important;
}

.tva-cats .cat-heading .col-inner::before{
    content:"";
    position:absolute;
    left:0;
    top: 54%;
    transform:translateY(-50%);

    width:10px;
    height:40px;
    background:#e7000b;
    border-radius:2px;
}

/* Chữ nhỏ giữ thẳng hàng cũ */
.tva-cats .cat-heading p{
    margin-left:0px !important;
}
/* HERO: không tạo khoảng trắng */
.tva-trang-chu-home {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.tva-trang-chu-home .row,
.tva-trang-chu-home .col,
.tva-trang-chu-home .col-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Chỉ tạo khoảng cách cho khối Cam kết */
.tva-cam-ket {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ==================================================
   MENU KHUYẾN MÃI - ICON GỐC TRANG MẪU
   ================================================== */

#menu-item-473 > a {
    color: #D97706 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    transition: color .2s ease !important;
}

/* Lucide Flame - SVG path gốc */
#menu-item-473 > a::before {
    content: "" !important;

    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;

    background-color: #D97706 !important;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* Hover */
#menu-item-473 > a:hover {
    color: #B45309 !important;
}

#menu-item-473 > a:hover::before {
    background-color: #B45309 !important;
}
/* ===== NÚT PREV / NEXT ===== */
.slider .flickity-prev-next-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;

    background: rgba(15,15,15,.65) !important;
    border: 1px solid rgba(255,255,255,.22) !important;

    opacity: 1 !important;
    color: #fff !important;
    transition: all .25s ease !important;
}

/* ÉP MŨI TÊN LUÔN TRẮNG */
.slider .flickity-prev-next-button svg,
.slider .flickity-prev-next-button svg path,
.slider .flickity-prev-next-button .arrow {
    fill: #fff !important;
    color: #fff !important;
}

/* HOVER = ĐỎ TƯƠI */
.slider .flickity-prev-next-button:hover {
    background: #ff0015 !important;
    border-color: #ff0015 !important;
    color: #fff !important;
}

/* Hover vẫn ép mũi tên trắng */
.slider .flickity-prev-next-button:hover svg,
.slider .flickity-prev-next-button:hover svg path,
.slider .flickity-prev-next-button:hover .arrow {
    fill: #fff !important;
    color: #fff !important;
}

/* ===== TVAUDIO - SLIDER DOT- NúT CHUYỂN BANER ===== */

.flickity-page-dots .dot {
    width: 8px !important;
    height: 8px !important;
    margin: 0 5px !important;

    border: 0 !important;
    border-radius: 99px !important;

    background: #888 !important;
    opacity: 1 !important;

    transition: all .3s ease !important;
}

/* Slide đang chọn = thanh đỏ */
.flickity-page-dots .dot.is-selected {
    width: 32px !important;
    background: #ed1c24 !important;
}
/* ===== FIX SLIDER TRANG CHỦ TVAUDIO ===== */

.home .slider {
    position: relative !important;
}

.home .slider .flickity-viewport {
    height: 520px !important;
    min-height: 520px !important;
    overflow: hidden !important;
    position: relative !important;
}

.home .slider .flickity-slider {
    position: absolute !important;
    width: 100% !important;
    height: 520px !important;
    left: 0 !important;
    top: 0 !important;
}

.home .slider .banner {
    position: absolute !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    top: 0 !important;
}
/* ===================================================
   THU NHỎ VÀ CĂN CHỈNH NÚT TÌM KIẾM ĐỎ
   =================================================== */

/* 1. Thu hẹp độ rộng và chiều cao nút Tìm đỏ */
.header-main .searchform button[type="submit"],
.header-main .searchform .search-submit {
    width: 50px !important;       /* Thu gọn độ rộng nút */
    height: 30px !important;      /* Căn chiều cao vừa vặn */
    min-width: unset !important;
    padding: 0 !important;
    margin-right: 4px !important;  /* Tạo khoảng trống nhẹ với mép phải */
    border-radius: 4px !important; /* Bo góc mềm mại */
}

/* 2. Căn giữa lại icon kính kính phóng đại trong nút */
.header-main .searchform button[type="submit"] i,
.header-main .searchform .search-submit i,
.header-main .searchform button[type="submit"] svg {
    font-size: 14px !important;
    transform: scale(0.9) !important;
}


/* ===================================================
   ĐỒNG BỘ FONT CHỮ MENU NGANG VỚI TOÀN BỘ WEBSITE
   =================================================== */

.header-bottom .nav > li > a {
    /* Ép font đồng bộ với các phần khác của website */
    font-family: inherit !important; 
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 600 !important; /* Độ đậm vừa phải, nét chữ tròn mượt */
    letter-spacing: -0.2px !important; /* Co nhẹ khoảng cách chữ cho tự nhiên */
    text-transform: none !important; /* Giữ hoa/thường chuẩn */
    -webkit-font-smoothing: antialiasing !important; /* Làm mịn nét chữ trên Chrome/Safari */
}

/* Hiệu ứng rê chuột vào đổi màu đỏ tươi nổi bật */
.header-bottom .nav > li:hover > a {
    color: #d71921 !important;
}
/* ===================================================
   TẠO ĐỔ BÓNG ĐƯỜNG PHÂN CÁCH HEADER NHƯ MẪU
   =================================================== */

/* 1. Xóa đường kẻ border-bottom xám cứng ở header main */
.header-main {
    border-bottom: none !important;
    position: relative !important;
    z-index: 10 !important;
    /* Đổ bóng nhẹ hắt xuống dưới thanh main header */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Tùy chỉnh đổ bóng cho thanh menu dưới (Header Bottom) */
.header-bottom {
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* Đổ bóng mịn màng phía dưới thanh menu ngang */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
/* ===================================================
   KHÓA CỨNG KÍCH THƯỚC LOGO GỌN ĐẸP & CHUẨN CỘT
   =================================================== */

/* 1. Ép cứng chiều cao ảnh Logo (sếp có thể đổi 28px thành 25px hoặc 30px tùy thích) */
.header-main .logo img,
.header-main #logo img {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* 2. Cân chỉnh icon loa nhỏ gọn tương xứng với logo */
.header-main .logo a::before {
    width: 32px !important;
    height: 32px !important;
    margin-right: 8px !important;
    background-size: 18px 18px !important;
}

/* 3. Khóa độ rộng tổng thể của cột Logo & Cột Danh mục khớp chính xác 220px */
.header-main .header-nav-left,
.header-main .logo,
.header-bottom .header-vertical-menu,
.header-bottom .header-nav-left {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
}
/* ===================================================
   FIX GIÓNG HÀNG THẲNG TẮP & CHỐNG ĐÈ LOGO/SEARCH
   =================================================== */

/* 1. Nền tổng thể thanh menu dưới màu TRẮNG SẠCH */
.header-bottom {
    background-color: #ffffff !important;
}

/* 2. Căn container 1440px gióng thẳng lề trái/phải */
.header-main .header-inner,
.header-bottom .header-inner {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Khóa chiều rộng Logo + Icon loa để KHÔNG BỊ Ô SEARCH ĐÈ LÊN */
.header-main .header-nav-left,
.header-main .logo {
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
}

/* 4. Đẩy ô Search sang phải, tạo khoảng cách an toàn với Logo */
.header-main .header-nav-main {
    margin-left: 20px !important;
}

/* 5. Cố định mép trái của nút "Danh mục" ĐÚNG 280px bằng trục với Logo */
.header-bottom .header-vertical-menu,
.header-bottom .header-nav-left {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 6. Ép nút Danh mục đỏ mở rộng ôm trọn cột 280px */
.header-bottom .header-vertical-menu > a,
.header-bottom .header-vertical-menu .btn {
    width: 100% !important;
    border-radius: 8px 8px 0 0 !important;
}
/* ===================================================
   TỰ ĐỘNG CHÈN ICON LOA NHẮP NHÁY TRƯỚC LOGO
   =================================================== */

/* 1. Căn lề hiển thị flex cho thẻ chứa Logo */
.header-main .logo a {
    display: inline-flex !important;
    align-items: center !important;
}

/* 2. Tạo ô vuông đỏ + Icon loa trắng tự động đằng trước logo */
.header-main .logo a::before {
    content: "" !important;
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    margin-right: 10px !important;
    background-color: #d71921 !important; /* Đỏ thương hiệu */
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    
    /* Nhúng trực tiếp SVG icon loa màu trắng */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'%3E%3C/path%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* Animation nhấp nháy phát sáng */
    animation: speakerPulse 1.8s infinite !important;
}

/* 3. Hiệu ứng tỏa ánh sáng đỏ xung quanh */
@keyframes speakerPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(215, 25, 33, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(215, 25, 33, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(215, 25, 33, 0);
        transform: scale(1);
    }
}


/* ===================================================
   CẤU HÌNH ICON MENU FLATSOME - BẢN TĂNG KÍCH THƯỚC ICON
   =================================================== */

/* 1. Thiết lập vị trí tương đối cho thẻ <a> và xóa nền đè */
.header-vertical-menu .nav-vertical-fly-out > li > a {
    position: relative !important;
    background-color: transparent !important;
    transition: color 0.2s ease !important;
}

/* 2. Đưa icon lên tầng trên, TĂNG KÍCH THƯỚC ICON và áp filter ĐỎ */
.header-vertical-menu .nav-vertical-fly-out > li > a img.ux-menu-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 23px !important;  /* Tăng chiều rộng icon (có thể tăng lên 28px nếu muốn to hơn) */
    height: 23px !important; /* Tăng chiều cao icon */
    object-fit: contain !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: brightness(0) saturate(100%) invert(18%) sepia(88%) saturate(5412%) hue-rotate(352deg) brightness(98%) contrast(107%) !important;
}

/* 3. Bình thường: Ô vuông nền TRẮNG (#ffffff) - Tăng kích thước ô nền cho vừa icon */
.header-vertical-menu .nav-vertical-fly-out > li > a::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;  /* Tăng kích thước ô vuông nền */
    height: 36px !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
    pointer-events: none !important;
}

/* 4. Hover: Ô vuông dưới icon chuyển sang XÁM SÁNG (#f2f2f2) */
.header-vertical-menu .nav-vertical-fly-out > li:hover > a::before {
    background-color: #f2f2f2 !important;
}

/* 5. Hover: Chữ chuyển ĐỎ & Nền menu item giữ sạch */
.header-vertical-menu .nav-vertical-fly-out > li:hover > a {
    color: #d71921 !important;
    background-color: transparent !important;
}
/* =====================================================
   TOPBAR
   ===================================================== */

#top-bar {
    background: #b71c1c !important;
    border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
}

#top-bar .flex-row {
    min-height: 38px !important;
}


/* =====================================================
   SEARCH - KHUNG TÌM KIẾM
   ===================================================== */

.header-search-form .searchform {
    width: 100% !important;
}

.header-search-form .searchform .flex-row.relative {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 3px !important;
    border: 1px solid #c5c5c5 !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
}

/* vùng nhập */
.header-search-form .searchform .flex-col.flex-grow {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* ô nhập */
.header-search-form input[type="search"] {
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #333 !important;
    font-size: 14.5px !important;
}

/* nút tìm */
.header-search-form .searchform .ux-search-submit {
    position: static !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #e60000 !important;
    color: #fff !important;
}
/*Giỏ Hàng================================*/
/* =====================================================
   TOPBAR
   ===================================================== */

#top-bar {
    background: #b71c1c !important;
    border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
}

#top-bar .flex-row {
    min-height: 38px !important;
}


/* =====================================================
   SEARCH - KHUNG TÌM KIẾM
   ===================================================== */

.header-search-form .searchform {
    width: 100% !important;
}

.header-search-form .searchform .flex-row.relative {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 3px !important;
    border: 1px solid #c5c5c5 !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
}

/* Vùng nhập */
.header-search-form .searchform .flex-col.flex-grow {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Ô nhập */
.header-search-form input[type="search"] {
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #333 !important;
    font-size: 14.5px !important;
}

/* Nút tìm */
.header-search-form .searchform .ux-search-submit {
    position: static !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #e60000 !important;
    color: #fff !important;
}


/* =====================================================
   HEADER CART - FIX LỖI TÚI XÁM + KHÔNG NHẢY VỊ TRÍ BADGE
   ===================================================== */

/* 1. KHUNG TỰ ĐỘNG GIÃN RỘNG THEO NỘI DUNG (FLEXIBLE) */
.header-main .cart-item .header-cart-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    overflow: visible !important;

    background-color: #fff5f5 !important;
    border: 1px solid #ffccd1 !important;
    border-radius: 10px !important;
    
    padding: 6px 16px 6px 6px !important; 
    
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}

/* 2. Ô MÀU ĐỎ + ICON TÚI TRẮNG */
.header-main .cart-item .header-cart-link::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    border-radius: 6px !important;
    background-color: #e60000 !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    z-index: 1 !important;
}

/* 3. TRIỆT SẠCH TÚI XÁM GỐC CỦA FLATSOME (ĐÃ KHÓA KỸ CHỐNG HIỆN LẠI) */
.header-main .cart-item .cart-icon,
.header-main .cart-item i[class*="icon-"],
.header-main .cart-item i[data-icon-label] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    z-index: 10 !important;
}

.header-main .cart-item .cart-icon::before,
.header-main .cart-item i[class*="icon-"]::before,
.header-main .cart-item i[data-icon-label]::before {
    content: "" !important;
    display: none !important;
    opacity: 0 !important;
}

/* 4. BADGE SỐ LƯỢNG MÀU ĐEN (GIỮ NGUYÊN 100% THÔNG SỐ CỦA SẾP) */
.header-main .cart-item [data-icon-label]::after,
.header-main .cart-item i::after {
    content: attr(data-icon-label) !important;
    position: absolute !important;
    top: 1px !important;
    left: 26px !important;
    right: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    background: #111111 !important;
    color: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 50% !important;

    font-family: Arial, sans-serif !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
    z-index: 99 !important;
}

/* 5. KHỐI TIÊU ĐỀ & GIÁ TIỀN */
.header-main .cart-item .header-cart-title {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;

    font-size: 0 !important;
    line-height: 1.2 !important;

    flex: 1 0 auto !important;
    white-space: nowrap !important;

    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* CHỮ "GIỎ HÀNG" */
.header-main .cart-item .header-cart-title::before {
    content: "GIỎ HÀNG" !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #4a4a4a !important;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}

/* SỐ TIỀN CĂNG MỊN */
.header-main .cart-item .header-cart-title .cart-price,
.header-main .cart-item .header-cart-title .amount,
.header-main .cart-item .header-cart-title span {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #e60000 !important;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-shadow: none !important;

    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* TIÊU DIỆT DẤU / CỦA FLATSOME */
.header-main .cart-item .header-cart-title .cart-price::before {
    content: none !important;
}
/* =====================================================
   WISHLIST HEADER - TINH CHỈNH GIAO DIỆN
   ===================================================== */

.header-main .wishlist-link .tva-wishlist-info {
    margin-left: 9px !important;
    gap: 0 !important;
}

.header-main .wishlist-link .tva-wishlist-title {
    text-transform: none !important;
    color: #555 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.header-main .wishlist-link .tva-wishlist-count {
    text-transform: none !important;
    color: #222 !important;
    font-size: 13px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* đảm bảo badge YITH nằm đúng trên góc tim */
.header-main .wishlist-link .wishlist-icon[data-icon-label] {
    position: relative !important;
}
/* WISHLIST - BADGE ĐỎ */
.header-main .wishlist-link .wishlist-icon[data-icon-label]::after {
    background-color: #e60000 !important;
    color: #ffffff !important;
}
/*kết thúc bộ đếm yêu thích trên trang===================*/

/* =====================================================
   HEADER - ĐẨY TÀI KHOẢN / YÊU THÍCH / GIỎ HÀNG SANG PHẢI
   ===================================================== */

@media (min-width: 850px) {

    /* Header giữ giới hạn 1230px */
    .header-main .header-inner {
        width: 100% !important;
        max-width: 14400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Logo giữ kích thước tự nhiên */
    .header-main #logo {
        flex: 0 0 auto !important;
    }

    /* Search ăn toàn bộ phần trống */
    .header-main .header-inner > .flex-col.flex-left.flex-grow {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .header-main .header-inner > .flex-col.flex-left.flex-grow .header-search-form {
        width: 100% !important;
        max-width: none !important;
    }

    .header-main .header-inner > .flex-col.flex-left.flex-grow .searchform {
        width: 100% !important;
        max-width: none !important;
    }

    /* Tài khoản + Wishlist + Giỏ hàng dạt sang phải */
    .header-main .header-inner > .flex-col.flex-right {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        margin-left: 15px !important;
    }

    /* Giữ 3 mục trên cùng một hàng */
    .header-main .header-inner > .flex-col.flex-right .header-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }

    .header-main .header-inner > .flex-col.flex-right .header-nav > li {
        flex: 0 0 auto !important;
    }
}
/* =====================================================
   TVAUDIO - MAIN HEADER GIỚI HẠN 1440PX
   ===================================================== */

@media (min-width: 1400px) {

    .header-main .header-inner {
        width: 100% !important;
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

}
/*Bottom danh mục sản phẩm, tư vấn AI, sản phẩm nổi bật*/
/* 1. Đổi nút Vertical Menu sang màu đỏ tươi TVAUDIO */
.header-bottom .vertical-menu-title {
    background-color: #d71921 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px 6px 0 0 !important;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 8px !important;
}

.header-bottom .vertical-menu-title * {
    color: #ffffff !important;
}

/* 2. ĐỊNH DẠNG KHUNG MENU DỌC ĐÈ SLIDER Trang chủ */
.home .header-bottom .vertical-menu-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 270px !important;
    z-index: 999 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5;
}

/* 3. Style Nút Tư vấn AI màu đen bo góc bên phải */
.header-bottom .button[data-bgcolor],
.header-bottom .nav-right .button {
    background-color: #111111 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    border: none !important;
}
/*Căn chỉnh ở giữa header logo tài khoản, yêu=====*/
.container,
.row {
    max-width: 1440px;
}
/* MENU DANH MỤC BO TRÒN=======*/
/* Nút Danh mục */
.header-vertical-menu__opener {
    border-radius: 13px 13px 0 0 !important;
}
/* menu cấp 1 trượt xuống mượt */
.header-vertical-menu > .header-vertical-menu__fly-out {
    transform: translateY(-12px);
    transition: transform .6s cubic-bezier(.22,1,.36,1) !important;
}

.header-vertical-menu:hover > .header-vertical-menu__fly-out {
    transform: translateY(0);
}
/* menu cấp 1 - trượt nguyên khối từ trên xuống */
.header-vertical-menu > .header-vertical-menu__fly-out {
    transform: translate3d(0, -20px, 0) !important;
    transition: transform 1s ease-out !important;
}

.header-vertical-menu:hover > .header-vertical-menu__fly-out {
    transform: translate3d(0, 0, 0) !important;
}
/* MENU CON - mở ngang như cửa trượt */
.header-vertical-menu .nav-vertical-fly-out > li > ul.sub-menu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-25px);
    transition:
        opacity .6s ease,
        transform 1s ease,
        visibility 0s linear 1s !important;
}

/* rê vào mục cha */
.header-vertical-menu .nav-vertical-fly-out > li:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity .6s ease,
        transform 1s ease,
        visibility 0s !important;
}
/* menu con xổ ngang - bo 2 góc phía trên */
.header-vertical-menu .nav-vertical-fly-out > li > ul.sub-menu {
    border-radius: 13px 13px 0 0 !important;
    overflow: hidden !important;
}
/*Thanh trượt ngang chỉnh sửa theo khung===*/
/* ===================================================
   CĂN SUB-MENU NGANG BẰNG DANH MỤC CHA DANG HOVER
   =================================================== */

/* 1. Đặt khung chứa menu con theo vị trí của từng dòng danh mục cha */
.header-vertical-menu .nav-vertical-fly-out > li {
    position: relative !important;
}

/* 2. Căn mép trên menu con dính liền với mép trên của mục cha */
.header-vertical-menu .nav-vertical-fly-out > li > .nav-dropdown {
    top: 0 !important;
    transform: none !important; /* Xóa animation dịch chuyển dọc nếu có */
}
/* ===================================================
   TẠO HIỆU ỨNG TRƯỢT/MỜ MƯỢT MÀ CHO SUB-MENU
   =================================================== */

/* 1. Thiết lập trạng thái ẩn ban đầu của menu con */
.header-vertical-menu .nav-vertical-fly-out > li > .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important; /* Dịch nhẹ sang phải 10px */
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.35s !important; /* Thời gian chuyển động 0.35 giây mượt mà */
}

/* 2. Hiệu ứng trượt và hiện rõ khi rê chuột vào dòng danh mục cha */
.header-vertical-menu .nav-vertical-fly-out > li:hover > .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important; /* Trượt về vị trí chuẩn */
}
 /* ===================================================
   TẠO HIỆU ỨNG TRƯỢT/MỜ MƯỢT MÀ CHO SUB-MENU
   =================================================== */

/* 1. Thiết lập trạng thái ẩn ban đầu của menu con */
.header-vertical-menu .nav-vertical-fly-out > li > .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important; /* Dịch nhẹ sang phải 10px */
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.35s !important; /* Thời gian chuyển động 0.35 giây mượt mà */
}

/* 2. Hiệu ứng trượt và hiện rõ khi rê chuột vào dòng danh mục cha */
.header-vertical-menu .nav-vertical-fly-out > li:hover > .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important; /* Trượt về vị trí chuẩn */
}
/* menu con - hover chữ đỏ */
.header-vertical-menu .nav-vertical-fly-out ul.sub-menu > li > a:hover {
    color: #ed0000 !important;
}
/* chữ menu con - mảnh hơn */
.header-vertical-menu .nav-vertical-fly-out ul.sub-menu > li > a {
    font-weight: 400 !important;
}