/* ==========================================================================
   Custom Header Elements – Hotline & Account/Login
   Dùng cho WoodMart Header Builder (HTML Block)
   ========================================================================== */

/* --- Container chung --- */
.vpp-header-block {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    font-family: 'Quicksand', 'Inter', sans-serif;
}

/* --- Mỗi item (hotline hoặc account) --- */
.vpp-header-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: #ffffff;
    transition: opacity 0.25s ease;
    cursor: pointer;
    position: relative;
}

.vpp-header-item:hover {
    opacity: 0.85;
    color: #ffffff;
}

/* --- Icon circle --- */
.vpp-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.vpp-header-item:hover .vpp-header-icon {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.05);
}

.vpp-header-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Text area --- */
.vpp-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.vpp-header-main {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.vpp-header-sub {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

/* --- Đường phân cách giữa 2 item --- */
.vpp-header-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* --- Account: sub link "Đăng ký" hover riêng --- */
.vpp-header-sub a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.vpp-header-sub a:hover {
    color: #ffffff;
    text-decoration: underline !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .vpp-header-block {
        gap: 18px;
    }

    .vpp-header-icon {
        width: 36px;
        height: 36px;
    }

    .vpp-header-icon svg {
        width: 17px;
        height: 17px;
    }

    .vpp-header-main {
        font-size: 14px;
    }

    .vpp-header-sub {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .vpp-header-block {
        gap: 12px;
    }

    .vpp-header-text {
        display: none;
    }

    .vpp-header-divider {
        display: none;
    }

    .vpp-header-icon {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   Menu SP – Menu sản phẩm với icon Thiên Long
   Menu slug: menu-sp

   NOTE: Alignment (text-center), gap (--nav-gap: 120px), và hover
   đều được quản lý bởi WoodMart Header Builder.
   CSS ở đây chỉ bổ sung style mà WoodMart không cung cấp.
   ========================================================================== */

/* --- Mũi tên dropdown (WoodMart không tự thêm cho secondary nav) --- */
ul#menu-menu-sp > li.menu-item-has-children > a .wd-nav-chevron {
    transition: transform 0.2s ease;
}

ul#menu-menu-sp > li.menu-item-has-children:hover > a .wd-nav-chevron {
    transform: rotate(180deg);
}

/* ==========================================================================
   Icon gán theo menu item ID
   DISABLED: WoodMart đã gán icon qua menu settings (<img class="wd-nav-img">)
   Không cần dùng CSS ::before nữa để tránh lặp icon.
   ========================================================================== */

/* ==========================================================================
   Mega Menu SP – Xóa khoảng hở & nền trắng container
   Target: .whb-header-bottom (header bottom row chứa menu-sp)
   ========================================================================== */

/* 1. Xóa khoảng hở giữa menu bar và mega menu dropdown */
.whb-header-bottom .wd-dropdown {
    margin-top: 0 !important;
}

/* 2. Xóa hover bridge (pseudo-element tạo khoảng trống phía trên dropdown) */
.whb-header-bottom .wd-dropdown::after {
    height: 0 !important;
}

/* 3. Container dropdown trong suốt, xóa nền trắng và shadow */
.whb-header-bottom .wd-dropdown-menu {
    --wd-dropdown-bg-color: transparent;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 4. Khi sticky, cũng giữ sát menu */
.whb-sticked .whb-header-bottom .wd-dropdown:not(.sub-sub-menu) {
    margin-top: 0 !important;
}

.whb-sticked .whb-header-bottom .wd-dropdown:not(.sub-sub-menu)::after {
    height: 0 !important;
}

/* ==========================================================================
   Custom color for specific header element requested by user
   ========================================================================== */
div.wd-page-wrapper.website-wrapper > header > div > div.whb-row.whb-general-header.whb-sticky-row.whb-with-bg.whb-without-border.whb-color-dark.whb-flex-flex-middle > div > div > div.whb-column.whb-mobile-left.whb-column_mobile2.whb-hidden-lg > div,
div.wd-page-wrapper.website-wrapper > header > div > div.whb-row.whb-general-header.whb-sticky-row.whb-with-bg.whb-without-border.whb-color-dark.whb-flex-flex-middle > div > div > div.whb-column.whb-mobile-left.whb-column_mobile2.whb-hidden-lg > div * {
    color: #ffffff !important;
}

div.wd-page-wrapper.website-wrapper > header > div > div.whb-row.whb-general-header.whb-sticky-row.whb-with-bg.whb-without-border.whb-color-dark.whb-flex-flex-middle > div > div > div.whb-column.whb-mobile-left.whb-column_mobile2.whb-hidden-lg > div svg {
    fill: #ffffff !important;
}