:root {
	--wd-text-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #333333;
	--wd-text-font-size: 15px;
	--wd-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-transform: none;
	--wd-title-color: #222222;
	--wd-entities-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgba(51, 51, 51, 0.65);
	--wd-alternative-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 18px;
	--wd-header-el-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 15px;
	--wd-brd-radius: 15px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(25,118,243);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(73,51,209);
	--btn-accented-bgcolor-hover: rgb(65,46,188);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(244,244,244);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-weight: 500;
	text-transform: capitalize;
}
html .wd-checkout-steps {
	text-transform: capitalize;
}
html table th {
	text-transform: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(247,247,247);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(247,247,247);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(247,247,247);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(247,247,247);
	background-image: none;
}
html .btn.wd-buy-now-btn {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	background: rgb(221,51,51);
}
html .btn.wd-buy-now-btn:hover {
	color: rgb(204,0,85)8;
	background: rgb(10,88,202);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(118,118,118);
	--wd-form-placeholder-color: rgb(119,119,119);
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 15px;
	--wd-arrow-color: rgb(36,36,36);
	--wd-arrow-color-hover: rgb(51,51,51);
	--wd-arrow-color-dis: rgb(36,36,36);
	--wd-arrow-bg: rgb(244,244,244);
	--wd-arrow-bg-hover: rgb(239,239,239);
	--wd-arrow-bg-dis: rgb(244,244,244);
	--wd-arrow-radius: 20px;
}
.wd .product-label.onsale {
	background-color: rgb(221,51,51);
}
.wd .product-label.new {
	background-color: rgb(221,51,51);
}
.wd .product-label.featured {
	background-color: rgb(221,51,51);
}
.wd .product-label.out-of-stock {
	background-color: rgb(30,115,190);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1600px;
--wd-form-brd-radius: 5px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1600px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* ************* 11111 TOP BAR *************************** */

/*==== CSS-001A - TOP BAR - ADDRESS ĐỊA CHỈ TRÊN =====*/
@media (min-width: 1025px) {
    .whb-column5 .topbar-address {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #FFF;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }

    .whb-column5 .topbar-address-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        display: block;
    }
}


/*=== TOP BAR TIN NỔI BẬT===*/
@media (min-width: 1025px) {
    .whb-column7 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
    }

    .whb-column7 .topbar-featured {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        text-transform: none;
        white-space: nowrap;
    }

    .whb-column7 .topbar-featured-icon {
        width: 30px;
        height: 30px;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 50%;
        flex: 0 0 30px;
    }

    .whb-column7 .wd-header-my-account {
        display: flex;
        align-items: center;
        margin: 0;
    }
}


/*==== TOP BAR CHỮ CHẠY NGANG=====*/
@media (min-width: 1025px) {
    .whb-column6 {
        min-width: 0;
        overflow: hidden;
        container-type: inline-size;
    }

    .whb-column6 .topbar-ticker {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        overflow: hidden;
        color: #FFD43B;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }

    .whb-column6 .topbar-ticker-track {
        flex: 0 0 auto;
        display: inline-block;
        animation: topbar-ticker 16s linear infinite;
        will-change: transform;
    }

    .whb-column6 .topbar-ticker:hover .topbar-ticker-track {
        animation-play-state: paused;
    }

    @keyframes topbar-ticker {
        from {
            transform: translateX(100cqw);
        }

        to {
            transform: translateX(calc(75cqw - 100%));
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .whb-column6 .topbar-ticker-track {
            animation: none;
            transform: none;
        }
    }
}


/* =========================================================
   CSS-002F — MAIN HEADER COLUMN 3 OPTIMIZED
   SEACH + HOTLINE + ZALO + GIỎ HÀNG
   ========================================================= */
@media (min-width: 1025px) {

    /* Cột 3: Tối đa 600px trên màn to,
       tự thu nhỏ khoảng cách nếu màn hẹp */
    .whb-main-header .whb-column10 {
        flex: 0 1 600px;
        max-width: 600px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(8px, 1.2vw, 20px);
        padding-inline: clamp(10px, 1.5vw, 30px);
        box-sizing: border-box;
        min-width: 0;
    }

    .whb-main-header .whb-column10 > * {
        flex: 0 0 auto;
        min-width: 0;
    }
}


/* =========================================================
   CART BADGE — GIỎ HÀNG
   Nền đỏ — số trắng
   ========================================================= */
.wd-cart-number {
    background-color: #E53935 !important;
    color: #FFFFFF !important;
}


/* ************* 2222222 THANH DƯỚI BOTTOM HEADER + STICKY
*************************** */


/* =========================================================
   CSS-003A — HEADER BOTTOM 5 NÚT HEADER
   ========================================================= */
@media (min-width: 1025px) {

    .whb-column11 .header-bottom-benefits {
        display: flex;
        width: 100%;
        height: 36px;
        gap: 14px;
        box-sizing: border-box;
    }

    .whb-column11 .benefit-item {
        flex: 1 1 0;
        min-width: 0;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
        box-sizing: border-box;
        background: #1976F3;
        color: #FFF;
        border-radius: 8px;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        transition: background-color .2s ease;
    }

    .whb-column11 .benefit-icon {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .whb-column11 .benefit-icon svg {
        display: block;
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px;
        color: #FFF;
    }

    .whb-column11 .benefit-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #FFF;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
    }

    .whb-column11 .benefit-item:hover {
        background: #1565D8;
    }
}


/* =========================================================
   CSS-010A - STICKY HEADER & CATEGORIES BUTTON
   ========================================================= */
.wd-header-html:has(.tl-sticky-categories) {
    display: none;
}

.whb-header.whb-sticked .wd-header-html:has(.tl-sticky-categories) {
    display: flex;
}

.tl-sticky-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 190px;
    height: 36px;
    background: #0A58CA;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background-color .25s ease, transform .25s ease;
    font-family: Roboto, sans-serif;
}

.tl-sticky-categories-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.tl-sticky-categories-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tl-sticky-categories:hover {
    background: #1565c0;
}

.tl-sticky-categories:active {
    transform: scale(.98);
}

body .whb-header .whb-general-header .wd-header-cats {
    display: none;
}

body .whb-header.whb-sticked .whb-general-header .wd-header-cats,
body .whb-header.whb-clone .wd-header-cats {
    display: inline-flex;
}

.menu-opener {
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .tl-sticky-categories {
        width: 170px;
        height: 34px;
    }
}

@media (max-width: 767px) {
    .wd-header-html:has(.tl-sticky-categories) {
        display: none !important;
    }
}


/*=====================================================================
  TIÊU ĐỀ VÀ DANH MỤC TRANG CHỦ
=====================================================================*/

/* =========================================================
   MTL - CATEGORY HEADER
   Dùng chung cho các section danh mục trang chủ
   ========================================================= */

/* =========================================================
   1. HEADER - DESKTOP
   ---------------------------------------------------------
   Tiêu đề | Danh mục căn phải | Xem Tất Cả
   ========================================================= */

.mtl-cat-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    width: 100%;
    margin: 0 0 12px;

    column-gap: 12px;
}


/* =========================================================
   2. TIÊU ĐỀ
   ========================================================= */

.mtl-cat-title {
    min-width: 0;
}

.mtl-cat-title h2 {
    margin: 0;
    padding: 0;

    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   3. KHUNG DANH MỤC
   ---------------------------------------------------------
   Đây là viewport cố định.
   ========================================================= */

.mtl-cat-links {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;
}


/* =========================================================
   4. DÃY DANH MỤC - DESKTOP
   ---------------------------------------------------------
   Căn phải về phía Xem Tất Cả
   ========================================================= */

.mtl-cat-scroll {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
    min-width: 0;

    gap: 7px;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mtl-cat-scroll::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   5. NÚT DANH MỤC
   ========================================================= */

.mtl-cat-scroll a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 30px;
    padding: 0 10px;

    border: 1px solid #e5e5e5;
    border-radius: 5px;

    background: #f8f9fa;
    color: #222;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/* Hover */

.mtl-cat-scroll a:hover {
    background: #1976f3;
    border-color: #1976f3;
    color: #fff;
}


/* =========================================================
   6. XEM TẤT CẢ
   ========================================================= */

.mtl-cat-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 30px;
    padding: 0 11px;

    border: 1px solid #d9d9d9;
    border-radius: 5px;

    background: #fff;

    color: #1976f3 !important;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;
    white-space: nowrap;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/* Hover */

.mtl-cat-all:hover {
    background: #1976f3;
    border-color: #1976f3;
    color: #fff !important;
}


/* =========================================================
   7. MOBILE
   ---------------------------------------------------------
   Hàng 1:
   Tiêu đề                         Xem Tất Cả
   Hàng 2:
   DELL | HP | LENOVO | ASUS | ... →
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .mtl-cat-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;

        column-gap: 8px;
        row-gap: 8px;

        margin-bottom: 10px;
    }


    /* -----------------------------------------------------
       TITLE
       ----------------------------------------------------- */

    .mtl-cat-title {
        grid-column: 1;
        grid-row: 1;

        min-width: 0;
    }

    .mtl-cat-title h2 {
        font-size: 20px;
        line-height: 1.25;

        white-space: normal;
    }


    /* -----------------------------------------------------
       XEM TẤT CẢ
       ----------------------------------------------------- */

    .mtl-cat-all {
        grid-column: 2;
        grid-row: 1;

        align-self: start;

        min-height: 30px;
        padding: 0 8px;

        font-size: 14px;
        font-weight: 700;
    }


    /* -----------------------------------------------------
       KHUNG DANH MỤC
       ----------------------------------------------------- */

    .mtl-cat-links {
        grid-column: 1 / -1;
        grid-row: 2;

        position: relative;

        width: 100%;
        min-width: 0;

        overflow: hidden;

        padding: 1px 0 4px;
    }


    /* -----------------------------------------------------
       DÃY CUỘN NGANG
       ----------------------------------------------------- */

    .mtl-cat-scroll {
        display: flex;
        align-items: center;

        justify-content: flex-start;

        width: 100%;
        min-width: 0;

        gap: 7px;

        overflow-x: auto;
        overflow-y: hidden;

        padding-right: 42px;

        white-space: nowrap;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-x;
    }

    .mtl-cat-scroll::-webkit-scrollbar {
        display: none;
    }


    /* -----------------------------------------------------
       NÚT DANH MỤC MOBILE
       ----------------------------------------------------- */

    .mtl-cat-scroll a {
        flex: 0 0 auto;

        min-height: 30px;
        padding: 0 10px;

        font-size: 13px;
        font-weight: 500;
    }


    /* =====================================================
       FADE CỐ ĐỊNH
       -----------------------------------------------------
       Lớp này thuộc khung .mtl-cat-links,
       không di chuyển theo .mtl-cat-scroll.
       ===================================================== */

    .mtl-cat-links::after {
        content: "";

        position: absolute;
        z-index: 20;

        top: 1px;
        right: 0;
        bottom: 4px;

        width: 58px;

        background: linear-gradient(
            to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.12) 15%,
            rgba(255,255,255,0.45) 40%,
            rgba(255,255,255,0.78) 65%,
            rgba(255,255,255,0.96) 85%,
            rgba(255,255,255,1) 100%
        );

        pointer-events: none;
    }
}


/* =========================================================
   8. MOBILE NHỎ
   ========================================================= */

@media (max-width: 480px) {

    .mtl-cat-header {
        column-gap: 6px;
        row-gap: 7px;
    }


    /* Title */

    .mtl-cat-title h2 {
        font-size: 18px;
    }


    /* Xem tất cả */

    .mtl-cat-all {
        min-height: 29px;
        padding: 0 7px;

        font-size: 14px;
        font-weight: 700;
    }


    /* Category */

    .mtl-cat-scroll {
        gap: 6px;
        padding-right: 38px;
    }


    .mtl-cat-scroll a {
        min-height: 29px;
        padding: 0 9px;

        font-size: 13px;
    }


    /* Fade */

    .mtl-cat-links::after {
        width: 52px;
    }
}



@media (max-width: 576px) {
	/* ==================================================
   MOBILE HEADER: SEARCH & LOGO ON STICKY
   Website: Máy Tính Thiên Lợi
   ================================================== */

/* Logo: hiện ban đầu, ẩn khi cuộn */
.whb-sticked .site-logo,
.whb-clone .site-logo {
    display: none !important;
}

/* Search: ẩn ban đầu, hiện khi cuộn */
.whb-general-header :is(.wd-header-search, .search-button, .wd-search-form) {
    display: none !important;
}

.whb-sticked :is(.wd-header-search, .search-button, .wd-search-form),
.whb-clone :is(.wd-header-search, .search-button, .wd-search-form) {
    display: inline-flex !important;
}


/* ==================================================
   MOBILE HEADER: NỀN XANH #0A58CA & ICON CHỮ TRẮNG
   ================================================== */

/* Nền Main Header */
header.whb-header .whb-general-header {
    background-color: #0A58CA;
}

/* Icon, text, menu, cart màu trắng */
header.whb-header .whb-general-header .wd-tools-element > a,
header.whb-header .whb-general-header .wd-tools-element .wd-tools-icon,
header.whb-header .whb-general-header .wd-tools-element .wd-tools-text {
    color: #ffffff;
}


/* ==================================================
   MOBILE — CĂN MÉP HAI BÊN
   ================================================== */

@media (max-width: 767px) {

    /* Elementor / WoodMart container: full width */
    .elementor-element-main,
    .elementor-container,
    .wd-page-content .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Giữ lề an toàn cho nội dung văn bản */
    .elementor-widget-text-editor {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    
    /* ==================================================
       TRANG CHỦ MOBILE — KHOẢNG HỞ 8PX TRÊN SLIDER
       ================================================== */

    body.home #main-content.wd-content-layout {
        padding-top: 1px !important;
    }


    /* ==================================================
       CSS-XXX — ICON TRẢ GÓP MOBILE BOTTOM MENU
       ================================================== */

    .wd-toolbar-link-1 .wd-custom-icon img {
        width: 24px !important;
        height: 24px !important;
    }
}


 /* =====================================================
      
       ===================================================== */

@media (max-width: 767px) {

    /* =====================================================
       MOBILE MENU - WIDTH
       ===================================================== */

    .mobile-nav.wd-side-hidden.wd-side-hidden-nav.wd-left {
        width: 85vw !important;
        max-width: 85vw !important;
    }

    /* =====================================================
       MOBILE CATEGORIES MENU
       ===================================================== */

    /* Hiển thị mũi tên cho danh mục có submenu */
    body .wd-nav-mobile
    .menu-item-has-block
    > .wd-nav-opener {
        display: inline-flex !important;
    }

    /* Đường phân cách giữa tên và mũi tên */
    body .wd-nav-mobile
    > li.menu-item-has-children
    > .wd-nav-opener {
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10) !important;
    }

    /* Chiều cao danh mục */
    body .wd-nav-mobile > li > a {
        min-height: 45px !important;
        height: 45px !important;
        padding: 5px 10px !important;
        font-weight: 500 !important;
    }

    /* Chiều cao mục con */
    body .wd-nav-mobile > li > ul li > a {
        min-height: 45px !important;
        height: 45px !important;
        padding: 5px 10px !important;
        font-weight: 500 !important;
    }

    /* =====================================================
       SUBMENU
       ===================================================== */

    body .wd-nav-mobile ul.wd-sub-menu,
    body .wd-nav-mobile ul.wd-sub-menu > li,
    body .wd-nav-mobile ul.wd-sub-menu > li > a {
        background-color: #f5f5f5 !important;
    }

    /* Submenu cấp 2 */
    body .wd-nav-mobile ul.sub-sub-menu,
    body .wd-nav-mobile ul.sub-sub-menu > li,
    body .wd-nav-mobile ul.sub-sub-menu > li > a {
        background-color: #f5f5f5 !important;
    }

    /* Hover */
    body .wd-nav-mobile ul.wd-sub-menu > li:hover > a,
    body .wd-nav-mobile ul.sub-sub-menu > li:hover > a {
        background-color: #eeeeee !important;
    }
}

}