/*
Theme Name: Woodmart Child
Theme URI: https://khoducthanh.vn
Author: khoducthanh.vn
Template: woodmart
Version: 1.0.0
Text Domain: woodmart-child
*/

:root {
    --color-primary: #ed1c24;
}

/* Buttons */
.wd-btn-main,
.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order {
    background-color: #ed1c24 !important;
    border-color: #ed1c24 !important;
}

/* Links & accents */
a,
.color-primary,
.woodmart-color-scheme-dark .wd-header-link:hover {
    color: #ed1c24;
}

/* Hover states */
a:hover,
.wd-nav > li > a:hover,
.woodmart-navigation .menu > li > a:hover {
    color: #ed1c24;
}

/* Badge giảm giá: nền ĐỎ thương hiệu, chữ trắng. */
.onsale,
.woocommerce span.onsale,
.product-labels .product-label.onsale {
    background-color: #ed1c24 !important;
    color: #fff !important;
}
.woodmart-wishlist-btn:hover,
.woodmart-compare-btn:hover {
    background-color: #ed1c24 !important;
}

/* Badge giảm giá: sát mép TRONG vùng ảnh, góc trên-PHẢI (đổi chỗ với nhãn thương hiệu).
   CHỈ áp cho box trong danh sách. Ảnh trang sản phẩm KHÔNG cần đụng: theme vốn đã đặt
   badge ở bên phải (.woocommerce-product-gallery .product-labels{inset-inline-end:15px}),
   ép right:0 chỉ làm nó dán sát mép, lệch với phần còn lại.
   Theme dùng thuộc tính logic inset-inline-start/end nên phải !important mới đè được.
   align-items:flex-end để khi có nhiều nhãn thì chúng xếp thẳng mép phải. */
.wd-product .wd-product-wrapper { position: relative; }
.wd-product .product-labels {
    /* Sát mép, thẳng hàng với 2 nút ở đáy. Trước phải lùi 10px để né đường cong 20px của
       ô ảnh; giờ ô ảnh vuông góc nên không cần né nữa. */
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    align-items: flex-end !important;
    /* Theme cho nhãn trong box danh sách z-index:1 nên nó chui xuống dưới nhãn thương
       hiệu (5) và lớp phủ khi rê chuột. 11 = trên tất cả, kể cả mức 10 của trang chi tiết. */
    z-index: 11 !important;
}

/* Nhãn THƯƠNG HIỆU góc trên-TRÁI, đối diện badge giảm giá.
   KHÔNG nền: chỉ chữ xanh đậm. Nằm trên ảnh sản phẩm (gần như luôn nền trắng) nên chữ
   đậm đủ đọc, mà bỏ được mảng màu đặc chen ngang ảnh. Giữ bóng chữ rất nhẹ để phòng
   trường hợp rơi trúng vùng ảnh sáng. */
.wd-product .kdt-loop-brand {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    max-width: 60%;
    /* Sát lề TRÁI như badge giảm giá sát lề phải. Badge giảm giá có NỀN nên khối màu của nó
       chạm mép dù chữ bên trong vẫn có đệm; nhãn thương hiệu KHÔNG nền nên chữ chính là thứ
       nhìn thấy — còn đệm trái 8px là trông thụt vào so với badge kia. Bỏ đệm trái, giữ đệm
       phải để chữ dài không dính vào badge giảm giá. */
    padding: 5px 8px 5px 0;
    background: none;
    color: #0b6baa;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease;
}
/* Link DANH MỤC dưới tên sản phẩm: theme để --wd-link-color = gray-400, không gạch chân —
   nhìn hệt chữ mô tả nên không ai biết bấm được. Đổi sang màu link của site (#0B6BAA, cùng
   màu quy ước trong CLAUDE.md) và hover đỏ + gạch chân như mọi link nội dung khác.
   Đặt qua chính biến của theme thay vì ép `color` trên thẻ <a>: theme dựng màu link từ bộ
   biến này, ép thẳng màu sẽ lệch ở trạng thái hover/visited. */
.wd-product .wd-product-cats {
    --wd-link-color: #0B6BAA;
    --wd-link-color-hover: #ed1c24;
    --wd-link-decor-hover: underline;
}
.wd-product .wd-product-cats a {
    color: #0B6BAA;
}
.wd-product .wd-product-cats a:hover {
    color: #ed1c24;
    text-decoration: underline;
}

.wd-product .kdt-loop-brand:hover {
    color: #ed1c24;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   BADGE THƯƠNG HIỆU trên ẢNH CHÍNH trang chi tiết SP (PHP: functions.php mục 6d-6).
   Góc TRÊN-TRÁI vì nhãn giảm giá ĐO ĐƯỢC ở góc TRÊN-PHẢI: quy tắc chung của theme là
   `inset-inline-start:7px` (trái) nhưng riêng trong gallery có quy tắc hẹp hơn lật sang phải
   (`.woocommerce-product-gallery .product-labels{inset-inline-start:auto;inset-inline-end:15px}`).

   Tận dụng luôn kiểu "thẻ trắng bo góc + đổ bóng" mà theme đã có cho
   `.product-design-default .wd-product-brands a`, chỉ thu nhỏ: theme đặt min-height 70px
   + padding 10px (đo được khối cao đúng 70px) — quá lớn để nằm trên ảnh.

   ⚠️ Selector phải ĐẠT (0,3,x) mới đè được `.product-design-default .wd-product-brands a`
      (0,3,0) — child style.css nạp ở vị trí 2 còn CSS theme ở 45+, nên bằng điểm là THUA.
--------------------------------------------------------------------------- */
.woocommerce-product-gallery .wd-product-brands.kdt-brand-badge {
    position: absolute;
    top: 7px;
    inset-inline-start: 7px;
    z-index: 3;               /* nhãn giảm giá z-index 1 */
    float: none;              /* ở chỗ cũ (cạnh tiêu đề) theme cho float:left */
    margin: 0;
    max-width: 42%;           /* nhãn giảm giá max-width 50% ở phía đối diện -> không chạm nhau */
}
.woocommerce-product-gallery .wd-product-brands.kdt-brand-badge a {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    /* Khi hãng KHÔNG có logo, theme in TEXT tên hãng vào chính thẻ <a> này -> cho giống
       badge thương hiệu ở danh sách SP (.kdt-loop-brand). Ảnh thì mấy dòng chữ này vô hại. */
    color: #0B6BAA;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.woocommerce-product-gallery .wd-product-brands.kdt-brand-badge a:hover {
    /* theme cho opacity .5 khi hover -> logo mờ đi như bị vô hiệu hoá. Đổi thành nổi khối lên. */
    opacity: 1;
    color: #ed1c24;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.woocommerce-product-gallery .wd-product-brands.kdt-brand-badge img {
    width: auto;              /* theme: width:100% -> logo giãn hết bề rộng badge */
    max-width: 100%;
    height: auto;
    max-height: 26px;         /* logo hãng là ảnh NGANG (vd 264×80) -> phải chặn theo CHIỀU CAO */
}

/* Cả DẢI info-box trên trang chủ: NỀN XANH #0b6baa cho toàn CONTAINER (không phải từng box).
   Container có sẵn nền navy #0D0625 đặt qua vc_custom (!important) -> đè bằng selector 2-class
   (.wd-rs...vc_custom cùng 1 phần tử) + !important. Box bên trong để trong suốt, chỉ chữ+icon trắng. */
.wd-rs-67bc3c0545ee1.vc_custom_1740389397127 {
    background-color: #0b6baa !important;
}
.wd-rs-67bc3c0545ee1 .wd-info-box .info-box-title,
.wd-rs-67bc3c0545ee1 .wd-info-box .info-box-inner,
.wd-rs-67bc3c0545ee1 .wd-info-box .info-box-inner p,
.wd-rs-67bc3c0545ee1 .wd-info-box .info-box-inner a {
    color: #fff !important;
}
.wd-rs-67bc3c0545ee1 .wd-info-box .info-svg-wrapper img {
    filter: brightness(0) invert(1);
}
/* Icon ngọn lửa box "Danh mục nổi bật" (#wd-677805b44a9d0) -> ĐỎ #ed1c24. SVG là <img> nên tô bằng filter. */
#wd-677805b44a9d0 .info-svg-wrapper img {
    filter: brightness(0) saturate(100%) invert(19%) sepia(94%) saturate(6932%) hue-rotate(359deg) brightness(96%) contrast(118%);
}

/* Countdown slide 3 (hero, wd-rs-68dbcd1f51c8d) nền xanh #0b6baa -> ép chữ số + nhãn TRẮNG. */
.wd-rs-68dbcd1f51c8d .wd-timer-value,
.wd-rs-68dbcd1f51c8d .wd-timer-text,
.wd-rs-68dbcd1f51c8d .wd-timer-label {
    color: #fff !important;
}

/* Borders & outlines */
.wd-cart-widget-total,
input:focus,
textarea:focus {
    border-color: #ed1c24;
}

/* Grid sản phẩm: ép vùng ảnh tỉ lệ vuông đồng nhất -> hàng đều, tránh khoảng trắng */
.wd-products .wd-product .wd-product-img-link,
.wd-products .wd-product .product-image-link {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.wd-products .wd-product .wd-product-grid-slider,
.wd-products .wd-product .wd-product-grid-slide,
.wd-products .wd-product .wd-fill {
    height: 100% !important;
}
.wd-products .wd-product .wd-product-img-link img,
.wd-products .wd-product .product-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Menu ngành hàng dưới header (element menu = secondary nav) — theme không cấp CSS position cho
   dropdown secondary, nên tự bật. Wrapper dropdown là div.wd-dropdown-menu (không phải ul.wd-sub-menu).
   Target riêng #menu-danh-muc-header để KHÔNG ảnh hưởng menu top bar. */
/* Icon ngành hàng (category_icon_alt) + chữ trên 1 dòng */
#menu-danh-muc-header > li > a.woodmart-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
#menu-danh-muc-header > li > a .wd-nav-img,
#menu-danh-muc-header > li > a .wd-nav-img svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Hover menu CẤP 1 (chỉ desktop — mobile là menu drilldown, không có hover):
   chữ nhạt bớt, KHÔNG đổi sắc và KHÔNG gạch chân.
   Thanh này nền đỏ #ED1C24 nên mọi màu chữ khác trắng đều tụt tương phản
   (#0B6BAA chỉ còn 1,28:1) — giảm độ trắng là cách duy nhất giữ chữ vẫn đọc được.
   Bám li:hover (không phải a:hover) để trạng thái giữ nguyên khi chuột đã đi xuống
   panel mega menu — panel nằm trong chính li đó. */
@media (min-width: 1025px) {
    #menu-danh-muc-header > li > a.woodmart-nav-link {
        transition: color 0.15s ease;
    }
    #menu-danh-muc-header > li:hover > a.woodmart-nav-link,
    #menu-danh-muc-header > li:focus-within > a.woodmart-nav-link {
        color: rgba(255, 255, 255, 0.7);
    }
}

/* === MEGA MENU full-width nhiều cột + banner (giống demo Marketplace 2) ===
   Theme không cấp CSS position cho dropdown secondary nav -> tự dựng.
   Anchor theo cột trái của thanh đỏ (.whb-header-bottom .whb-col-left) để dropdown trải rộng. */
.whb-header-bottom .whb-header-bottom-inner {
    position: relative;
}
.whb-header-bottom .whb-col-left,
nav.whb-wd-dept-menu,
#menu-danh-muc-header,
#menu-danh-muc-header > li.menu-item-has-children {
    position: static;
}
#menu-danh-muc-header > li.menu-item-has-children > .wd-dropdown-menu {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    display: block !important;
    padding: 0;
    background: #fff !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 10px 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
#menu-danh-muc-header > li.menu-item-has-children:hover > .wd-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#menu-danh-muc-header .wd-dropdown-menu .container {
    display: flex;
    gap: 32px;
    width: 100% !important;
    max-width: none !important;
    padding: 26px 34px !important;
}
/* lưới danh mục con nhiều cột */
#menu-danh-muc-header .wd-sub-menu {
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: 2px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    box-shadow: none;
}
#menu-danh-muc-header .wd-sub-menu > li {
    display: block;
    width: auto;
    margin: 0;
}
#menu-danh-muc-header .wd-sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: #333;
    white-space: normal;
    text-transform: none;
    font-weight: 400;
    line-height: 1.35;
    border-bottom: 1px solid #f2f2f2;
}
/* Icon menu cấp con (Woodmart render native khi danh mục con có icon): giữ màu tối
   (nền dropdown trắng), KHÔNG đảo trắng như menu chính trên thanh đỏ. */
#menu-danh-muc-header .wd-sub-menu .wd-nav-img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    filter: none;
}
#menu-danh-muc-header .wd-sub-menu > li > a:hover {
    color: #ed1c24;
}
/* banner khuyến mãi bên phải (CSS gradient + chữ, không phụ thuộc ảnh) */
#menu-danh-muc-header .wd-dropdown-menu .container::after {
    content: "Ưu đãi tháng này\AGiảm đến 50%\A+ Miễn phí lắp đặt";
    white-space: pre-line;
    flex: 0 0 230px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ed1c24, #a11015);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
}

/* Bộ lọc danh mục (sidebar shop): bỏ thanh cuộn, hiện đầy đủ danh mục */
.wd-product-category-filter .wd-scroll-content {
    max-height: none !important;
}
.wd-product-category-filter .wd-scroll {
    overflow: visible !important;
}
.wd-product-category-filter .wd-scrollbar,
.wd-product-category-filter .wd-scroll-scrollbar {
    display: none !important;
}

/* Icon ngành hàng trên menu bar: dùng ẢNH danh mục (thumbnail). Ảnh có cái sáng cái tối -> đặt trên
   NỀN TRẮNG bo góc (chip) để icon nào cũng rõ trên thanh đỏ. */
#menu-danh-muc-header > li > a .wd-nav-img {
    background: #fff;
    border-radius: 4px;
    padding: 2px;
    box-sizing: content-box;
    object-fit: contain;
}

/* Ô ảnh danh mục con đặt ở page-title area: full-width ngay dưới tiêu đề (như demo) */
.wd-woo-page-title .wd-title-wrapp {
    display: block;
    width: 100%;
}
/* Danh sách danh mục con dưới tiêu đề trang danh mục (functions.php, hook
   woodmart_before_shop_page). Trước là carousel ô ảnh tròn, đổi sang danh sách có icon:
   ảnh danh mục phần lớn < 300px nên phóng to là vỡ hạt, mà ô lớn chiếm gần nửa màn hình
   điện thoại. Icon 26px thì ảnh nhỏ vẫn nét và thấy hết danh mục cùng lúc.
   3 cột trên desktop, 2 cột tablet/mobile, 1 cột màn hẹp. */
/* Nút "Quay lại" bên trái tiêu đề trang: ẨN HẲN.
   Theme vẫn in nút (.wd-back-btn, class with-back-btn trên khối tiêu đề) nhưng icon của nó
   là GLYPH của font biểu tượng: .wd-back-btn>a:before{content:"\f121";font-family:"woodmart-font"}
   — mà bản Woodmart 8.4 này KHÔNG nạp @font-face "woodmart-font" ở bất kỳ file CSS nào của
   trang (đã dò cả 79 file). Kết quả: nút rỗng, chỉ còn ô trống 40px chen giữa lề trái và
   tiêu đề. Theme đã tự ẩn nó dưới 1024px, nên lỗi chỉ thấy trên desktop.
   Ẩn thay vì vẽ lại icon: demo cũng không có nút này, và nó chỉ chạy history.back(). */
.wd-page-title .wd-back-btn {
    display: none !important;
}

/* Khối đầu trang danh sách: breadcrumb + carousel danh mục, full-width trên vùng chính. */
.kdt-shop-top {
    padding-top: 4px;
    padding-bottom: 0;
}

.kdt-shop-top .woocommerce-breadcrumb,
.kdt-shop-top .yoast-breadcrumb {
    margin-bottom: 14px;
}

/* Cân khoảng trắng TRÊN/DƯỚI dải danh mục.
   Dưới nó là <main class="wd-content-layout"> với padding-block 40px của theme (base.min.css),
   nên trước đây trên chỉ ~10px mà dưới tới ~60px — lệch hẳn. Hạ padding-top của main xuống
   14px cho bằng khoảng cách breadcrumb -> danh mục. CHỈ áp khi có khối .kdt-shop-top đứng
   ngay trước (dùng bộ chọn anh-em liền kề) để trang khác giữ nguyên 40px. */
.kdt-shop-top + .wd-content-layout {
    padding-top: 14px;
}

.kdt-cat-carousel-wrap {
    position: relative;
    width: 100%;
    clear: both;
    /* Không lề: khoảng cách trên do breadcrumb lo, khoảng cách dưới do padding-top
       của <main> lo (xem quy tắc .kdt-shop-top + .wd-content-layout ở trên). */
    margin: 0;
}

/* Cuộn ngang bằng scroll-snap thay vì Swiper: hook chạy TRƯỚC main loop nên script của
   element Woodmart chưa chắc đã nạp, mà việc ở đây chỉ là cuộn + bám cột. */
.kdt-cat-carousel {
    display: flex;
    column-gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kdt-cat-carousel::-webkit-scrollbar {
    display: none;
}

/* Bề rộng cột = (100% - tổng khe) / số cột nhìn thấy. 3 cột desktop, 2 tablet/mobile,
   1 cột màn hẹp (dưới 480px tên danh mục dài sẽ gãy chữ nếu ép 2 cột). */
.kdt-cat-col {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

/* Mobile GIỮ 2 CỘT (không tụt về 1): tên dài thì xuống dòng trong ô, đỡ hơn là
   mỗi màn chỉ thấy 3 danh mục. */
@media (max-width: 1024px) {
    .kdt-cat-carousel {
        column-gap: 10px;
    }
    .kdt-cat-col {
        flex: 0 0 calc((100% - 10px) / 2);
    }
}

/* Mũi tên hai bên, hiện ở mọi cỡ màn (mobile vẫn vuốt được, nhưng có nút thì rõ là
   còn nội dung bên phải).
   ⚠ PHẢI !important + thêm một lớp cha. Theme có
     :is(.btn,.button,button,[type=submit],[type=button]) { position:relative; display:inline-flex;
                                                            padding:...; min-height:...; background:... }
   trong base.min.css. `:is()` lấy độ ưu tiên của thành phần MẠNH NHẤT bên trong, tức là
   bằng đúng một lớp (.btn) — ngang với .kdt-cat-nav — mà file theme nạp SAU style.css của
   child nên hoà thì THEME THẮNG. Hậu quả đã gặp: position rơi về relative -> hai nút chui
   vào dòng chảy, đội danh sách xuống và hiện thành hai ô xám ở góc trái (ảnh chụp mobile
   2026-08-03: cuộn tới đâu ô xám nhảy tới đó, vì nút prev/next ẩn-hiện theo vị trí cuộn). */
.kdt-cat-carousel-wrap .kdt-cat-nav {
    position: absolute !important;
    top: 50%;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%);
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #333;
    cursor: pointer;
}

.kdt-cat-carousel-wrap .kdt-cat-nav svg {
    width: 16px;
    height: 16px;
}

.kdt-cat-carousel-wrap .kdt-cat-prev {
    left: -14px;
    right: auto;
}

.kdt-cat-carousel-wrap .kdt-cat-prev svg {
    transform: rotate(180deg);
}

.kdt-cat-carousel-wrap .kdt-cat-next {
    right: -14px;
    left: auto;
}

.kdt-cat-carousel-wrap .kdt-cat-nav:hover {
    border-color: #ed1c24 !important;
    color: #ed1c24;
}

/* Hết đường thì giấu nút — bấm mà không nhúc nhích là khách tưởng hỏng. */
.kdt-cat-carousel-wrap.kdt-o-dau .kdt-cat-prev,
.kdt-cat-carousel-wrap.kdt-o-cuoi .kdt-cat-next {
    display: none !important;
}

@media (max-width: 1024px) {
    .kdt-cat-carousel-wrap .kdt-cat-nav {
        width: 26px !important;
        height: 26px !important;
        background: rgba(255, 255, 255, 0.92) !important;
    }
    .kdt-cat-carousel-wrap .kdt-cat-nav svg {
        width: 14px;
        height: 14px;
    }
    .kdt-cat-carousel-wrap .kdt-cat-prev {
        left: -6px;
    }
    .kdt-cat-carousel-wrap .kdt-cat-next {
        right: -6px;
    }
}

.kdt-cat-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    color: inherit;
    line-height: 1.3;
}

/* Mục đầu mỗi cột bỏ đệm trên, mục cuối bỏ đệm dưới — nếu không cả dải bị đẩy
   xuống thêm 5px ở trên và 5px ở dưới mà không để làm gì. */
.kdt-cat-col .kdt-cat-item:first-child {
    padding-top: 0;
}

.kdt-cat-col .kdt-cat-item:last-child {
    padding-bottom: 0;
}

.kdt-cat-item:hover .kdt-cat-name {
    color: #ed1c24;
    text-decoration: underline;
}

/* Khung icon cố định: ảnh danh mục mỗi cái một tỉ lệ, không ghim khung thì chữ so le. */
.kdt-cat-ico-wrap {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

/* Cỡ CỐ ĐỊNH, không dùng max-width/height: ảnh có thuộc tính width/height gốc (92, 100,
   150) nên lúc chưa tải xong trình duyệt dựng chỗ đúng bằng cỡ gốc — ra mấy ô xám to
   đùng chen giữa danh sách, đó là chỗ "khoảng trắng lạ" trong ảnh chụp. */
.kdt-cat-ico-wrap .kdt-cat-ico {
    width: 26px;
    height: 26px;
    max-width: 26px;
    object-fit: contain;
}

.kdt-cat-ico-empty svg {
    display: block;
    width: 19px;
    height: 19px;
    color: #ed1c24;
}

.kdt-cat-name {
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;   /* tên dài xuống dòng thay vì đẩy tràn cột */
}

@media (max-width: 1024px) {
    .kdt-cat-name {
        font-size: 13px;
    }
}

/* ============ DESKTOP: đổi sang dạng Ô ẢNH như demo (ảnh trên, tên dưới) ============
   Cùng một HTML, chỉ đổi CSS. Mấu chốt là `display: contents` cho .kdt-cat-col: cột
   không còn sinh khung nữa, 3 mục bên trong nhảy thẳng lên làm con của dải cuộn ->
   một HÀNG NGANG các ô, thay vì 3 dòng chồng nhau. Không phải đổi PHP, và mobile vẫn
   giữ nguyên dạng danh sách (nơi ảnh nhỏ hiển thị nét hơn).
   ⚠ Ảnh danh mục phần lớn nhỏ hơn 300px (ND-5) nên ở cỡ 110px sẽ không nét bằng bản
   demo — muốn nét thật phải upload lại ảnh danh mục. */
@media (min-width: 1025px) {
    .kdt-cat-col {
        display: contents;
    }

    .kdt-cat-carousel {
        column-gap: 16px;
    }

    /* Kéo chuột để cuộn: đổi con trỏ cho khách biết dải này kéo được. */
    .kdt-cat-carousel {
        cursor: grab;
    }

    .kdt-cat-carousel.kdt-dang-keo {
        cursor: grabbing;
        scroll-snap-type: none;   /* đang kéo mà còn bám điểm neo thì giật cục */
        scroll-behavior: auto;
        user-select: none;        /* kéo ngang mà bôi đen cả đống chữ thì rất bẩn */
    }

    /* Tắt kéo-thả sẵn có của ảnh/liên kết, nếu không rê chuột là nhấc "bóng ma" ảnh lên. */
    .kdt-cat-carousel a,
    .kdt-cat-carousel img {
        -webkit-user-drag: none;
        user-drag: none;
    }

    .kdt-cat-item {
        flex: 0 0 150px;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        text-align: center;
        scroll-snap-align: start;
    }

    /* first/last-child ở trên là để bỏ đệm dọc của dạng danh sách — dạng ô không cần */
    .kdt-cat-col .kdt-cat-item:first-child,
    .kdt-cat-col .kdt-cat-item:last-child {
        padding: 0;
    }

    /* Bo GÓC chứ không bo tròn: ảnh sản phẩm phần lớn là hình chữ nhật nằm trên nền
       trắng, cắt tròn thì hai bên bị khoét mất phần thân máy. */
    .kdt-cat-ico-wrap {
        flex: 0 0 auto;
        width: 110px;
        height: 110px;
        overflow: hidden;
        border-radius: 10px;
        background: #fff;
    }

    .kdt-cat-ico-wrap .kdt-cat-ico {
        width: 100%;
        height: 100%;
        max-width: none;
        padding: 8px;
        object-fit: contain;
    }

    /* Mũi tên canh giữa theo Ô ẢNH (cao 110px), không phải giữa cả ô gồm tên bên dưới —
       canh theo cả ô thì nút tụt xuống ngang phần chữ, nhìn lệch. */
    .kdt-cat-carousel-wrap .kdt-cat-nav {
        top: 55px;
    }

    .kdt-cat-ico-empty svg {
        width: 42px;
        height: 42px;
    }

    .kdt-cat-name {
        font-size: 15px;
    }
}

/* === PORT từ cena-child: mô hình "gọi để lấy giá" === */
/* SP chưa set giá -> hotline (woocommerce_empty_price_html) */
.kdt-contact-price a {
    color: #0b6baa;
    font-weight: 700;
    white-space: nowrap;
}

/* TRONG DANH SÁCH SP: SP trống giá thì dòng hotline thay chỗ giá, nằm trong <span class="price">
   nên ăn luôn cỡ chữ của giá (to hơn hẳn). SP có giá thì dòng hotline là .kdt-loop-hotline 11px.
   Hai dòng nhìn giống nhau mà lệch cỡ -> ép .kdt-contact-price trong loop về đúng 11px.
   KHÔNG đụng trang sản phẩm: ở đó nó thay cho giá thật nên phải to. */
.wd-product .price .kdt-contact-price,
.wd-product .price .kdt-contact-price a {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
/* Trang SP: chỉ giữ nút "Mua ngay" (buy-now), ẩn nút "Thêm vào giỏ" */
.single-product div.product form.cart .single_add_to_cart_button {
    display: none !important;
}
/* Nút "Mua ngay" = primary button: nền đỏ đặc + chữ TRẮNG (mặc định btn-accent cho chữ đỏ nhạt) */
.single-product div.product form.cart .wd-buy-now-btn {
    margin-left: 0 !important;
    background-color: #ed1c24 !important;
    border-color: #ed1c24 !important;
    color: #fff !important;
    font-weight: 700;
}
.single-product div.product form.cart .wd-buy-now-btn:hover,
.single-product div.product form.cart .wd-buy-now-btn:focus {
    background-color: #c8161d !important;
    border-color: #c8161d !important;
    color: #fff !important;
}
/* Nút "Mua ngay" + hotline (chốt 2) nằm trên cùng 1 hàng */
.single-product div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}
.kdt-cart-hotline {
    flex: 0 0 auto !important;   /* ghi đè flex-basis:100% của Woodmart -> nằm cạnh nút, không wrap */
    width: auto !important;
    margin: 0;
    white-space: nowrap;
}
/* 🐛 QUY TẮC `font-size: 18px` Ở ĐÂY TRƯỚC NAY VÔ TÁC DỤNG — đã bỏ, đừng viết lại kiểu đó.
   `.kdt-hot-line { font-size: 20px }` nằm NGAY BÊN DƯỚI trong cùng file, cùng độ đặc hiệu (0,1,0),
   nên nó thắng theo thứ tự. Đo trên bản dựng thật: cỡ chữ thực tế là **20px**, không phải 18px.
   Muốn nhỏ hơn thì selector phải đặc hiệu hơn — dùng cả hai class như dưới đây (0,2,0).

   📐 Vì sao phải nhỏ lại (đo ở dải mobile 390px, trang SP):
     form rộng 360 · [số lượng] 80 + [Đặt Hàng] 98 + [hotline] 161 + 2 khe 16px = **371 > 360**
   → thiếu **11px**, hotline rớt xuống dòng riêng. Chỉ hụt một chút, nên giảm cỡ chữ là đủ,
   không cần đụng bố cục. */
.kdt-hot-line.kdt-cart-hotline {
    /* 18px = BẰNG dòng CTA xanh ở trên (`.kdt-price-hotline`), chủ dự án chốt 2026-08-10.

       ⛔ RỚT DÒNG TRÊN MÁY HẸP LÀ CHẤP NHẬN ĐƯỢC — chủ dự án đã biết và đồng ý, ĐỪNG "SỬA".
       Đo thật (bề rộng hotline: 18px→142 · 16px→127 · 15px→120; ô số lượng 80 + nút 98 + 2 khe 32
       là cố định nên phần còn lại cho hotline chỉ là `form − 210`):
         · 390px  hotline nằm cạnh nút, dư 8px
         · 375px  rớt xuống dòng riêng
         · 360px  rớt xuống dòng riêng
       Không cỡ chữ nào vừa cả ba khổ mà vẫn dễ đọc — phải xuống 15px mới vừa 360px, và chủ dự án
       thấy cỡ đó quá bé. Rớt dòng thì hotline vẫn đọc được, vẫn bấm gọi được, chỉ tốn một dòng.
       Muốn vừa mọi máy mà giữ 18px thì cách đúng là THU Ô SỐ LƯỢNG (80px → ~56px), không phải
       giảm tiếp cỡ chữ. Chủ dự án chưa chọn hướng đó. */
    font-size: 18px;
    gap: 6px;
}
.kdt-hot-line.kdt-cart-hotline svg {
    width: 20px;
    height: 20px;
}
/* CTA hotline dưới giá + nút hotline nhấp nháy (trang SP) */
.kdt-hot-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #ed1c24;
    line-height: 1;
    background: none !important; /* là LINK chữ, không phải nút -> không nền (theme gán nền đỏ, rõ trong quick-view) */
}
/* Theme thêm ::before {content:""; position:absolute; inset:0; background đỏ} lên link (stretched overlay):
   trong quick-view .summary-inner là position:absolute -> overlay phủ CẢ cột phải (bắt hover) + hiện khung đỏ.
   CTA hotline không cần overlay này -> bỏ hẳn: hết hover-cả-cột LẪN nền đỏ. */
.kdt-hot-line::before {
    content: none !important;
}
/* CTA "Ưu đãi hôm nay ..." nằm dưới giá */
.kdt-price-hotline {
    margin: 10px 0 4px;
    font-size: 18px;
}
.kdt-hot-line:hover { color: #a11015; }
.kdt-hot-line .kdt-hot-line-anim {
    display: inline-block;
    animation: kdt-hot-line-ring 1s linear infinite;
    transform-origin: 50% 50%;
}
/* Giống web cũ: xoay ±10° + màu icon nhấp nháy #ed1c24 <-> #333 (SVG fill=currentColor) */
@keyframes kdt-hot-line-ring {
    0%   { color: #ed1c24; transform: rotate(-10deg); }
    50%  { color: #333;    transform: rotate(0deg); }
    100% { color: #ed1c24; transform: rotate(10deg); }
}
/* Form CF7 tư vấn giá dưới phần tóm tắt SP */
.form-tu-van-wrapper {
    margin-top: 20px;
}
.form-tu-van-wrapper .wpcf7 {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 6px;
}
.form-tu-van-wrapper .wpcf7 h5 {
    color: #ed1c24 !important;
    margin-bottom: 15px;
}
.form-tu-van-wrapper .wpcf7-submit {
    background: #ed1c24 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    font-weight: 700;
    border: 0;
}
.form-tu-van-wrapper .wpcf7-form-control { max-width: 100% !important; }

/* TẠM ẨN wishlist + so sánh (chức năng chưa hoạt động: thiếu page 17/19, click không add).
   Bật lại: xóa block này + option wishlist/compare=1 + burger show_wishlist/compare=true. */
.wd-header-wishlist,
.wd-header-compare,
.wd-wishlist-btn,
.wd-compare-btn,
.mobile-nav .wd-wishlist-btn,
.mobile-nav .wd-compare-btn {
    display: none !important;
}
/* CF7: ẩn <br> thừa (field ẩn page-title/page-url) NHƯNG giữ khoảng cách đều bằng margin,
   không để nút Gửi dính lên ô SĐT. */
.form-tu-van-wrapper .wpcf7 br { display: none; }
.form-tu-van-wrapper .wpcf7 label { display: block; margin: 0 0 14px; }
.form-tu-van-wrapper .wpcf7 label .wpcf7-form-control { margin-top: 4px; }
.form-tu-van-wrapper .wpcf7 p { margin: 0 0 14px; }
.form-tu-van-wrapper .wpcf7-submit { display: block; margin: 6px 0 0; }

/* Nút "Mua ngay" trên card danh sách = dùng NGUYÊN style native của nút thêm giỏ (icon/hover/bố cục).
   Không override màu -> đồng nhất với nút thêm giỏ của theme. */

/* Mobile: hiện nút "Xem nhanh" (wd-quick-view) đối diện nút giỏ (góc dưới-phải ảnh).
   Mặc định wrap actions ẩn trên mobile (hover desktop). Chỉ giữ Xem nhanh cho gọn. */
@media (max-width: 768.98px) {
    /* Wrap Xem nhanh về sát góc dưới-phải (mirror nút giỏ ở góc dưới-trái, không nhích lên/vào trong) */
    .wd-products .wd-product .wd-buttons.wd-pos-r-t {
        display: flex !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        /* Nền trắng + đổ bóng nằm ở WRAPPER .wd-buttons (woo-loop-prod-predefined:
           background:var(--bgcolor-white); box-shadow:1px 1px 1px), KHÔNG phải ở thẻ <a>.
           Xoá nền ở <a> nên vẫn thấy nền — phải xoá ở đây mới hết. */
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .wd-products .wd-product .wd-quick-view-btn {
        display: block !important;
    }
    .wd-products .wd-product .wd-buttons.wd-pos-r-t .wd-wishlist-btn,
    .wd-products .wd-product .wd-buttons.wd-pos-r-t .wd-compare-btn {
        display: none !important;
    }
    /* Cả 2 nút cùng size 32 (override min-height:38 của theme).
       Dùng `.wd-add-btn > a` chứ KHÔNG dùng `.add_to_cart_button`: sản phẩm KHÔNG mua được
       (trống giá, như box combo trang chủ) thì WooCommerce render link "Đọc tiếp" với class
       `button product_type_simple add-to-cart-loop` — KHÔNG có `add_to_cart_button`. Bắt theo
       class đó là bỏ sót đúng nhóm này, nút giữ nguyên nền hồng đặc của theme. */
    .wd-products .wd-product .wd-add-btn > a,
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        line-height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Xem nhanh: chỉ hiện ICON, ẩn chữ */
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view .wd-action-text {
        display: none !important;
    }
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view .wd-action-icon,
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view .wd-action-icon::before {
        height: auto !important;
        margin: 0 !important;
    }
    /* BỎ NỀN, chỉ còn khung mờ. Icon phải đổi từ trắng sang xám đậm: nền hồng/xám mất đi
       thì icon trắng nằm trên ảnh sản phẩm (đa số nền trắng) sẽ không nhìn thấy gì.
       Giữ nguyên vị trí và hình dáng cũ: Mua ngay góc dưới-trái, Xem nhanh góc dưới-phải,
       mỗi nút bo một góc quay vào trong. */
    .wd-products .wd-product .wd-add-btn > a,
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view {
        background-color: transparent !important;
        background-image: none !important;
        border: 1px solid #0b6baa !important;   /* khung xanh, cùng tông link/nhãn thương hiệu */
        border-radius: 6px !important;          /* bo đủ 4 góc */
        box-shadow: none !important;
        color: #0b6baa !important;
    }

    /* Riêng nút giỏ phải thêm `body` mới bo được góc. Theme có
         .wd-product.wd-hover-quick .wd-add-btn>a { border-radius: 0 !important }
       độ ưu tiên (0,3,1) — ĐÚNG BẰNG selector của mình ở trên, mà file theme nạp sau
       style.css của child nên hoà thì theme thắng: nút giỏ vuông góc trong khi nút Xem
       nhanh (không bị luật đó) bo 6px -> hai nút lệch nhau. */
    body .wd-products .wd-product .wd-add-btn > a {
        border-radius: 6px !important;
    }
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view .wd-action-icon,
    .wd-products .wd-product .wd-quick-view-btn .open-quick-view .wd-action-icon::before,
    .wd-products .wd-product .wd-add-btn > a::before {
        color: #0b6baa !important;
    }

    /* Chữ trong nút ("Đọc tiếp" / "Mua ngay"): ẩn, chỉ giữ icon — nút chỉ rộng 32px. */
    .wd-products .wd-product .wd-add-btn > a .wd-action-text {
        display: none !important;
    }
}

/* Tổng tiền giỏ hàng trên header (.wd-tools-text): mặc định đỏ nhạt (btn-accent) trên nền đỏ -> mờ.
   Đổi TRẮNG cho rõ. Chỉ target phần hiện trên header, KHÔNG đụng giá trong dropdown mini-cart. */
.wd-header-cart .wd-tools-text .wd-cart-subtotal,
.wd-header-cart .wd-tools-text .wd-cart-subtotal .amount,
.wd-header-cart .wd-tools-text .woocommerce-Price-amount,
.wd-header-cart .wd-tools-text .woocommerce-Price-currencySymbol {
    color: #fff !important;
}

/* Footer: dòng nội dung trên cùng đang sát mép trên (main-footer padding-top:0).
   Thêm khoảng đệm trên cho thoáng. */
/* Footer: siết nhịp dòng thật chặt. Mặc định theme dùng --li-mb 10px + line-height 1.4
   (base.min.css) cộng margin đoạn văn của WPBakery -> cột chính sách 8 mục dài gần một
   màn điện thoại, nhìn rỗng hoác. Footer là chỗ tra cứu nhanh, không phải chỗ đọc lâu,
   nên nén được. 1.15 là mức thấp nhất còn an toàn với chữ có dấu tiếng Việt: dấu mũ/dấu
   thanh nằm cao hơn chữ hoa, xuống nữa là dòng trên đè dòng dưới. */
.wd-footer,
.wd-footer .widget,
.wd-footer div[class^="vc_wp"],
.wd-footer .wpb_text_column,
.wd-footer .wpb_text_column p,
.wd-footer .widget_nav_menu ul.menu li,
.wd-footer .widget_nav_menu ul.menu li a {
    line-height: 1.15;
}

/* ⚠ Khoảng cách giữa các mục KHÔNG nằm ở line-height mà ở margin-bottom của <li>:
   base.min.css có
     :is(.widget,.wd-widget,div[class^="vc_wp"]) :is(ul,ol) { --li-mb: 15px }
   Độ ưu tiên của nó là (0,1,1) — ĐÚNG BẰNG `.wd-footer ul` của mình, mà file theme nạp
   sau style.css của child nên hoà thì theme thắng: --li-mb vẫn 15px. Đó là lý do hai cột
   menu không nhúc nhích trong khi khối văn bản (không phải <li>) thì co lại đúng.
   Phải vừa nâng độ ưu tiên vừa chặn thẳng margin của <li>. */
.wd-footer .widget ul,
.wd-footer .widget ol,
.wd-footer div[class^="vc_wp"] ul,
.wd-footer ul,
.wd-footer ol {
    --li-mb: 0px;
    --list-mb: 8px;
}

.wd-footer .widget_nav_menu ul.menu li,
.wd-footer .widget ul li {
    margin-bottom: 0 !important;
}

.wd-footer .widget_nav_menu ul.menu li a {
    display: block;
    padding-block: 3px;   /* vùng bấm vẫn đủ dày dù dòng đã sát nhau */
}

.wd-footer .wpb_text_column p {
    margin-bottom: 4px;
}

/* Tiêu đề cột: thẻ thật là <h2 class="widgettitle"> chứ KHÔNG phải .widget-title —
   viết thiếu tên lớp này nên trước đó vẫn dính margin-bottom 20px của theme. */
.wd-footer .widgettitle,
.wd-footer .widget-title,
.wd-footer .wpb_text_column strong {
    margin-bottom: 6px;
}

/* Khoảng cách GIỮA CÁC BOX. Ba nguồn cộng dồn, phải chặn cả ba:
     js_composer : .wpb_content_element { margin-bottom: 35px }
     base.min.css: .widget { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px }
   Cộng lại gần 100px giữa hai cột khi xếp dọc trên điện thoại. Viền ngăn cũng bỏ luôn:
   nền footer sáng nên nó thành một vạch xám lửng lơ. */
.wd-footer .wpb_content_element {
    margin-bottom: 18px;
}

.wd-footer .widget {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wd-footer .vc_column-inner,
.wd-footer .wpb_column {
    margin-bottom: 0;
}

.wd-footer .main-footer {
    padding-top: 50px;
}

/* Ẩn badge "protected by reCAPTCHA" ở góc dưới bên phải. */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* ⛔ ĐÃ GỠ (2026-08-08) — băng dán ép 4 cột cho box "Danh mục nổi bật" bằng flex + width:25%.
   Nó được viết khi phần tử còn mang `style="grid"`, một giá trị của Woodmart ĐỜI CŨ mà bản hiện
   tại không còn nhận. Vì giá trị lạc schema, theme không đi vào nhánh lưới mới nên không nạp CSS
   chiều rộng -> .wd-col về full-width, xếp dọc 1 cột. Băng dán chữa đúng triệu chứng đó.

   Sau khi chuẩn hoá `style` về `default` (chuan-hoa-trang-chu.py), phần tử đi vào nhánh lưới mới
   và tự mang class `wd-grid-g` = `display:grid` + `gap: var(--wd-gap)` + số cột theo `--wd-col-*`.
   Lúc này băng dán trở thành THỦ PHẠM: `.wd-cats.elements-grid.columns-4` có độ đặc hiệu (0,3,0)
   nên thắng `.wd-grid-g` (0,1,0), ép lại `display:flex` — nhưng `gap` của lưới VẪN ÁP DỤNG cho
   flex. Thành ra 4 ô × 25% CỘNG 3 khe 20px thì tràn dòng -> desktop rớt còn 3 ô/hàng, mobile
   2 ô × 50% cộng khe 10px cũng tràn -> tụt về 1 cột dài. Đúng triệu chứng đã báo.

   Bài học: băng dán CSS chữa hậu quả của dữ liệu sai sẽ quay ra phá khi dữ liệu được sửa đúng.
   Sửa gốc xong thì phải gỡ băng dán, nếu không chỉ đổi lỗi này lấy lỗi khác.
   Số cột giờ do thuộc tính `columns` của phần tử quyết định (desktop 4 / mobile 2). */

/* Widget chat Chatwoot (ND-103) — trên MOBILE ẩn bong bóng, lối vào là nút "Chat" trên thanh
   công cụ đáy (thay chỗ nút "Tài khoản"; PHP dựng ở `functions.php` mục 23).

   Vì sao ẩn: để hai lối vào chat không cùng lúc nằm ở góc phải dưới — bong bóng Chatwoot
   (`bottom:20px`) đè đúng lên thanh công cụ, che nút Giỏ hàng ở giữa.
   `!important` là bắt buộc: Chatwoot chèn style của nó SAU stylesheet của theme.

   Không đụng `.woot-widget-holder`: khi mở, Chatwoot tự phủ toàn màn hình ở `<=667px` với
   `z-index: 2147483000` — nằm trên thanh công cụ (`z-index: 350`), nên ô nhập tin nhắn không bị
   che. Bản trước tôi cắt chiều cao khung chat cho tránh thanh công cụ; nay thừa, đã bỏ. */
@media (max-width: 768.98px) {
    .woot-widget-bubble {
        display: none !important;
    }
}

/* Nút "lên đầu trang" bị bong bóng chat ĐÈ MẤT trên desktop (chủ dự án báo 2026-08-09).
   Đo được: `.scrollToTop { position:fixed; right:20px; bottom:20px; 50×50; z-index:350 }`
   còn `.woot-widget-bubble { bottom:20px; 64×64; z-index:2147483000 }` — trùng đúng chỗ, và
   bong bóng có z-index lớn hơn 6 triệu lần nên nó nằm trên, nút cuộn coi như biến mất.

   Nâng nút cuộn lên trên bong bóng: bong bóng chiếm dải 20→84px, đặt 96px là hở 12px.
   ⚠️ Phải `!important`: `style.css` của child theme nạp ở vị trí **2** còn
   `parts/opt-scrolltotop.min.css` ở vị trí **72** — cùng độ đặc hiệu thì file nạp SAU thắng,
   nên không có `!important` là quy tắc này thua. (Đây cũng là lý do vài chỗ khác trong file
   này phải dùng độ đặc hiệu cao hơn thay vì viết selector đơn giản.)

   Chỉ áp từ 769px — dưới mức đó bong bóng đã bị ẩn, không có gì để tránh. */
@media (min-width: 769px) {
    .scrollToTop {
        bottom: 96px !important;
    }
}

/* Nút "Chat" trên thanh công cụ: icon SVG nội tuyến nên phải tự canh cỡ — các nút khác của
   Woodmart dùng icon font, không có quy tắc nào áp cho <svg>. */
.kdt-toolbar-chat .wd-tools-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto;
}

/* Nút này có HAI trạng thái, PHP in sẵn cả hai icon lẫn cả hai nhãn (functions.php mục 23):
     · mặc định            = GỌI  (máy chat có thể đang tắt -> nhãn phải khớp hành vi tel:)
     · .kdt-chat-san-sang  = CHAT (js/chatwoot.js gắn lớp này khi `chatwoot:ready` thực sự bắn)
   Chat chết thì không có sự kiện nào -> lớp không được gắn -> nút ở nguyên trạng thái hotline.

   ⚠️ Phải đủ ĐỘ ĐẶC HIỆU để thắng quy tắc `display:block` ngay bên trên: nó là (0,2,1) nên
   selector ẩn phải kèm class của chính <svg> — `.kdt-toolbar-chat .wd-tools-icon svg.kdt-icon-chat`
   là (0,3,1). Viết `.kdt-icon-chat { display:none }` trần là KHÔNG ăn, cả hai icon cùng hiện. */
.kdt-toolbar-chat .wd-tools-icon svg.kdt-icon-chat,
.kdt-toolbar-chat .kdt-nhan-chat {
    display: none;
}

.kdt-toolbar-chat.kdt-chat-san-sang .wd-tools-icon svg.kdt-icon-goi,
.kdt-toolbar-chat.kdt-chat-san-sang .kdt-nhan-goi {
    display: none;
}

/* ⛔ HAI dòng dưới đây phải đi CÙNG NHAU. Bản đầu chỉ hiện lại ICON mà quên hiện lại NHÃN:
   ở trạng thái "chat sẵn sàng", nhãn "Gọi" bị ẩn (quy tắc ngay trên) còn nhãn "Chat" vẫn nằm
   trong nhóm ẩn mặc định → nút hiện **icon trơ trọi, không một chữ nào**, trong khi hai nút
   "Cửa hàng"/"Giỏ hàng" bên cạnh đều có chữ. Chủ dự án báo đúng chỗ này ("icon chat thiếu text").
   Chỉ lộ ra khi chụp bản dựng thật ở trạng thái chat đang sống — đọc CSS suông rất dễ trượt,
   vì thiếu sót nằm ở chỗ KHÔNG có dòng nào cả. */
.kdt-toolbar-chat.kdt-chat-san-sang .wd-tools-icon svg.kdt-icon-chat {
    display: block;
}
.kdt-toolbar-chat.kdt-chat-san-sang .kdt-nhan-chat {
    display: inline;
}

/* Widget chat Chatwoot (ND-103) — ghi chú số đo, KHÔNG còn quy tắc bố cục nào bên dưới.

   ⚠️ ĐÍNH CHÍNH (ND-108): đoạn này trước ghi "chat chỉ chạy trên desktop, mobile KHÔNG có phần tử
   Chatwoot nào để mà chỉnh" — ĐÃ HẾT ĐÚNG. Từ khi mobile có nút "Chat" trên thanh công cụ thì
   `sdk.js` phải nạp cả trên mobile, nên phần tử Chatwoot CÓ tồn tại và bong bóng phải ẩn bằng CSS
   (quy tắc `.woot-widget-bubble` ở khối trên). Để nguyên câu cũ thì người đọc sau sẽ tưởng khối
   ẩn bong bóng là thừa và xoá đi — lúc đó bong bóng đè lên nút Giỏ hàng.

   📐 Giữ lại số đo đã đo được, phòng khi sau này bật lại chat cho mobile (đừng đo lại từ đầu):
     · Thanh công cụ đáy Woodmart `.wd-toolbar`: `position:fixed; bottom:0; height:55px; z-index:350`,
       chỉ hiện ở `max-width: 768.98px`.
     · Chatwoot v4.16.2: `.woot-widget-bubble { bottom:20px; position:fixed; z-index:2147483000 }`
       — KHÔNG `!important`, nên `!important` của mình thắng dù Chatwoot chèn style sau.
     · Chatwoot chuyển khung chat sang toàn màn hình ở `max-width: 667px` (`top:0; height:100%`),
       **lệch** với điểm ngắt 768.98px của thanh công cụ → bật lại thì phải tách 2 dải, gộp một
       là ở dải 668–768px khung chat dạng bảng nổi bị kéo cao bằng cả màn hình.
     · Lớp `.woot--bubble-holder` trong tài liệu Chatwoot đời cũ KHÔNG tồn tại ở bản này. */

/* Bộ lọc "Danh mục" (widget_product_categories — dùng ở CẢ sidebar shop lẫn khay lọc mobile,
   cùng một khối HTML nên một bộ quy tắc là đủ): kẻ phân cách giữa các mục.

   ⚠ Bộ lọc này CÓ PHÂN CẤP CHA/CON, nên không thể kẻ một kiểu cho tất cả: kẻ đều nhau thì
   danh mục con trông ngang hàng danh mục cha, đọc xong không biết "Bếp từ nhập khẩu Thái Lan"
   thuộc về đâu — nhất là khi cuộn giữa chừng, chỗ đó không còn thấy tên cha. Vì vậy:
     · CHA  — nét đậm hơn (gray-300), kéo hết chiều ngang: tách hẳn nhóm này với nhóm kia.
     · CON  — nét nhạt (gray-200) và tự thụt vào 15px theo `.children` của theme: đọc ra ngay
              là các dòng cùng một nhóm.
   Không đặt viền cho `li` đầu tiên (`li + li`): viền trên cùng sẽ đè lên tiêu đề "Danh mục".
   (Đã thử thêm một vạch dọc bên trái khối `.children` để nối con về cha — chủ dự án bỏ,
   2026-08-09: phần thụt lề + nét kẻ nhạt đã đủ, thêm vạch dọc là rối.)

   Dùng biến màu CÓ SẴN của theme (`--brdcolor-gray-*`) chứ không ghi mã màu cứng — hai biến này
   đã có sẵn bản cho nền sáng và nền tối, ghi cứng là hỏng khi theme đổi bảng màu. */
.widget_product_categories .product-categories > li + li {
    border-top: 1px solid var(--brdcolor-gray-300);
}
.widget_product_categories .product-categories .children > li + li {
    border-top: 1px solid var(--brdcolor-gray-200);
}

/* Bộ lọc Thương hiệu (woodmart layered nav, sidebar shop): brand có thumbnail hiện logo (60×30).
   Brand CHƯA có thumbnail (li KHÔNG có class .wd-swatch-wrap) -> chèn Ô TRỐNG cùng kích thước để đồng
   nhất khung (yêu cầu: "để ô trống"). Ô trống đặt trên .wd-filter-lable::before — KHÔNG dùng a::before
   vì a::before đã là checkbox native (.wd-checkboxes-on li>a:before) -> tránh đè mất checkbox. */
.woodmart-woocommerce-layered-nav .wc-layered-nav-term:not(.wd-swatch-wrap) > a .wd-filter-lable::before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 30px;
    margin-right: 10px;
    background: #f7f7f7;
    border: 1px solid #ececec;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Badge onsale trong box danh sách: để NGUYÊN kiểu của theme (.wd-shape-round-sm = bo 12px,
   min-width 40px) cho giống hệt badge trên trang chi tiết. Trước đây ép bo 3px + ôm sát chữ,
   thành ra hai nơi hai kiểu. Box RÚT GỌN ở trang chủ vẫn có kiểu riêng (bên dưới) vì ô quá nhỏ. */

/* Desktop (>=1025px) hover: nút Xem nhanh (.wd-buttons.wd-pos-r-t) ra CHÍNH GIỮA vùng ảnh. */
@media (min-width: 1025px) {
    .wd-product .wd-buttons.wd-pos-r-t {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* === Màu nhấn XANH #0b6baa: top bar + CTA "Ưu đãi hôm nay" (nhãn thương hiệu đã đổi ở trên) === */
/* Top bar: nền nâu (header config, whb-with-bg) -> xanh */
.whb-top-bar.whb-with-bg,
.whb-top-bar {
    background-color: #0b6baa !important;
}
/* CTA "Ưu đãi hôm nay 098.402.1177" dưới giá (kdt-price-hotline dùng chung .kdt-hot-line màu đỏ) -> xanh */
.kdt-price-hotline.kdt-hot-line {
    color: #0b6baa !important;
}
.kdt-price-hotline.kdt-hot-line:hover {
    color: #095a90 !important;
}
/* Icon nhấp nháy của CTA này theo tông xanh (thay vì đỏ<->xám) */
.kdt-price-hotline .kdt-hot-line-anim {
    animation-name: kdt-hot-line-ring-blue;
}
@keyframes kdt-hot-line-ring-blue {
    0%   { color: #0b6baa; transform: rotate(-10deg); }
    50%  { color: #333;    transform: rotate(0deg); }
    100% { color: #0b6baa; transform: rotate(10deg); }
}

/* Danh sách SP: dòng CTA "Ưu đãi hôm nay" dưới giá trong mỗi box (link tel, màu #0b6baa) */
.wd-product .kdt-loop-hotline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 5px;
    color: #0b6baa;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.wd-product .kdt-loop-hotline:hover { color: #095a90; }
.wd-product .kdt-loop-hotline svg { flex: 0 0 auto; width: 13px; height: 13px; }

/* Box SP RÚT GỌN (wd-hover-small, trang chủ): ẩn tag thương hiệu + dòng CTA hotline, hiện nhãn giảm giá (badge góc trên-trái). */
.wd-hover-small .kdt-loop-brand,
.wd-hover-small .kdt-loop-hotline {
    display: none !important;
}
.wd-hover-small .kdt-small-onsale {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
}
.wd-hover-small .kdt-small-onsale .onsale {
    white-space: nowrap;
    display: inline-block;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 7px !important;
    line-height: 1.3 !important;
}

/* Banner "Phụ kiện tủ bếp" trang chủ (cột trái hàng SP): ảnh nền demo (headphones/dummy.xtemos)
   không load. Thay bằng ẢNH PHỤ KIỆN TỦ BẾP thật của cửa hàng (cover, canh dưới). */
body .vc_custom_1736167821439 {
    background-image: url(https://khoducthanh.vn/wp-content/uploads/2026/04/8660.jpg) !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    padding-bottom: 240px !important;
}

/* ⛔ ĐÃ GỠ 2026-08-11 — băng dán ghim cứng nền gradient cho box "Ưu đãi combo"
   (`.vc_row-inner.vc_custom_1736166499471, body .vc_custom_1736166499471`).

   Nó ra đời khi nền của hàng đó còn trỏ vào ẢNH DEMO `section-disount-games-bg` (không tải được),
   nên phải ghim gradient xanh trong child theme để giữ diện mạo.

   Nay KHÔNG cần nữa: chính WPBakery đã khai đúng gradient đó trong CSS của phần tử —
   `.vc_custom_1736166499471 { … background-image: linear-gradient(135deg,#2f6fd0 0%,#123f86 100%) !important … }`
   (đo trên bản dựng thật trước khi gỡ). Giữ lại là **hai nguồn cho cùng một giá trị**: sửa màu
   trong WPBakery sẽ không ăn, vì băng dán ở đây đè lên và người sửa không biết tại sao.

   ⚠️ Màu nền vẫn là XANH ĐẬM, nên quy tắc mũi tên carousel màu trắng bên dưới VẪN CẦN.
   Nếu sau này đổi nền sang màu sáng thì phải xem lại chỗ đó, không thì mũi tên trắng biến mất. */

/* Danh sách SP kiểu gọn (product_hover="small": box "Đã xem gần đây", "Top 100 thiết bị")
   — GHIM khung ảnh 65x74.
   Theme để `.wd-hover-small .wd-product-thumb { flex:0 0 auto; max-width:50% }`, tức bề rộng
   ảnh do CHÍNH ẢNH quyết định. Element xin cỡ "65x74" nhưng KHÔNG SP nào có sẵn crop đó
   (mẫu 400 ảnh đại diện: 0 ảnh có) -> WordPress trả về file lớn hơn (vd 825x504 nằm ngang),
   ảnh phình tới trần 50% chiều rộng hàng, đè bẹp phần chữ. SP nào trông đúng chỉ vì ảnh gốc
   của nó tình cờ đã là 65x74.
   Ghim cứng khung nên mọi SP đều một khuôn, bất kể có crop hay không.
   Dùng `body` để tăng độ ưu tiên: style.css của child nạp TRƯỚC các part CSS của theme,
   cùng độ ưu tiên là theme thắng. */
body .wd-product.wd-hover-small .wd-product-thumb {
    flex: 0 0 65px;
    width: 65px;
    max-width: 65px;
}
body .wd-product.wd-hover-small .wd-product-thumb img {
    width: 100%;
    height: 74px;
    object-fit: contain;
}

/* Ảnh cột trái box combo: demo dùng banner NGANG (attachment 1233), migrate remap sang
   ảnh sản phẩm VUÔNG 1024x1024 (7002i.jpg) + img_size="full" -> cột trái cao ~640px trong
   khi cột carousel chỉ ~420px, chừa 200px nền xanh trống bên phải = trông vỡ layout.
   Chặn chiều cao ảnh trên desktop cho hai cột gần bằng nhau. Mobile hai cột xếp dọc nên
   không cần chặn. Sửa gốc là thay bằng ảnh banner ngang. */
@media (min-width: 1025px) {
    .vc_custom_1736166499471 #wd-677bdfa4448ee img {
        max-height: 300px;
        width: auto;
        display: block;
        margin-inline: auto;
    }
}

/* Mũi tên carousel trong box combo: mặc định theme là xám đậm (--color-gray-800),
   nằm trên nền xanh nên gần như chìm. Đổi sang trắng.
   Mũi tên dùng kiểu wd-pos-sep -> nằm NGOÀI khung sản phẩm, tức trên chính nền xanh,
   không phải trên thẻ sản phẩm trắng. */
.vc_custom_1736166499471 .wd-nav-arrows {
    --wd-arrow-color: #fff;
    --wd-arrow-color-hover: rgba(255, 255, 255, 0.7);
    --wd-arrow-color-dis: rgba(255, 255, 255, 0.35);
}

/* "Bài viết mới" trang chủ: dùng widget NATIVE woodmart-recent-posts trong custom sidebar-1203
   (post woodmart_sidebar ID 1203 + widget, dựng lại vì demo import thiếu — xem migrate). Render
   đúng demo "Last articles" (thumb bo góc + tiêu đề + ngày + số comment) nên KHÔNG cần CSS. */

/* FAQ theo sản phẩm (section .kdt-faq render bởi functions.php mục 7, dữ liệu meta _kdt_faq).
   Accordion <details> native — không cần JS. Nằm giữa tabs mô tả và "Sản phẩm liên quan". */
.kdt-faq {
    margin: 0;   /* nằm trong tab rồi, tab đã có padding riêng */
}

.kdt-faq-item {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}

.kdt-faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 42px 12px 16px;
    font-weight: 600;
    position: relative;
    color: #333;
}

.kdt-faq-item > summary::-webkit-details-marker {
    display: none;
}

/* Mũi tên: xoay khi mở */
.kdt-faq-item > summary::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #ed1c24;
    border-bottom: 2px solid #ed1c24;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.kdt-faq-item[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}

.kdt-faq-item > summary:hover {
    color: #ed1c24;
}

.kdt-faq-answer {
    padding: 0 16px 14px;
    color: #555;
    line-height: 1.7;
}

.kdt-faq-answer p {
    margin: 0;
}

.kdt-faq-answer a {
    color: #ed1c24;
    font-weight: 600;
    white-space: nowrap;
}

/* BOX SẢN PHẨM (danh sách): hiện ĐỦ tên sản phẩm.
   Woodmart cắt tên còn 1 dòng bằng max-height = --wd-line-count * --wd-line-height
   (class "title-line-one" trên container lưới), tên dài mất đuôi -> khách không đọc
   được mã máy.
   PHẢI dùng !important: style.css của child nạp ở vị trí 1, còn rule cắt nằm trong
   woo-opt-title-limit-predefined.min.css mà theme nạp động tận vị trí 58 -> cùng
   specificity thì file đứng sau thắng. Đặt luôn --wd-line-count cho chắc. */
.wd-product,
.wd-product .wd-entities-title {
    --wd-line-count: 99;
}

.wd-product .wd-entities-title,
[class*="title-line-"] .wd-product .wd-entities-title,
.wd-line-clamp.wd-entities-title {
    max-height: none !important;
    overflow: visible !important;
    display: block;
    -webkit-line-clamp: unset;
}

.wd-product .wd-entities-title {
    margin-bottom: 6px;
}

/* Ô Quốc gia ở trang đặt hàng: khoá cứng Việt Nam nên ẩn hẳn khỏi form
   (vẫn để field tồn tại vì WooCommerce cần giá trị này để tính vận chuyển). */
.kdt-hidden-field,
#billing_country_field,
#shipping_country_field {
    display: none !important;
}

/* Giỏ hàng: bỏ dòng "Giao hàng đến <tỉnh>." — địa chỉ thật lấy ở bước đặt hàng,
   dòng này chỉ là mặc định Hà Nội nên dễ hiểu nhầm là đã chốt nơi giao. */
.woocommerce-shipping-destination,
.shipping-calculator-button,
.wd-shipping-calculator {
    display: none !important;
}

/* CHỮ ĐẬM MÀU HƠN.
   Màu chữ nền của theme là #767676 — tương phản với nền trắng chỉ 4,54:1, vừa đúng ngưỡng
   tối thiểu nên đọc lâu bị mỏi, rõ nhất ở mô tả sản phẩm và bảng thông số.
   Hạ xuống #333 (12,6:1). Tiêu đề giữ #242424 vốn đã đậm. */
/* !important vì theme đặt lại biến này trong <style> inline ở <head>, luôn đứng sau
   file CSS của child (child nạp ở vị trí 1, CSS theme ở 3-75). */
:root {
    --wd-text-color: #333 !important;
}

body,
p, li, dd, dt, td, th,
.wd-entities-title,
.product-short-description,
.woocommerce-product-details__short-description,
.woocommerce-product-attributes-item__value,
.woocommerce-product-attributes-item__label,
.kdt-faq-answer,
.wd-product-cats a,
.widget {
    color: #333;
}

/* Chữ phụ (meta, ghi chú) nhạt hơn một bậc nhưng vẫn đủ tương phản — #767676 -> #595959 (7:1) */
.wd-product-cats,
.product_meta,
.woocommerce-result-count,
.post-meta,
small {
    color: #595959;
}

/* LINK: xanh trầm, hover đỏ brand.
   Vì sao không để link đỏ luôn: đỏ đang là màu của nút "Đặt hàng", giá khuyến mãi và
   hotline — link đỏ nữa thì loãng hết tín hiệu "bấm vào đây để mua".
   Vì sao đổi sắc xanh: #007AFF cũ chỉ đạt 4,02:1 trên nền trắng, dưới ngưỡng 4,5:1.
   #0B6BAA (màu chủ chọn) đạt 5,62:1 — đạt AA cho cả chữ thường.
   Hover thêm gạch chân: đỏ #ED1C24 chỉ 4,38:1, không nên để màu là tín hiệu duy nhất. */
:root {
    --wd-link-color: #0B6BAA !important;
    --wd-link-color-hover: #ED1C24 !important;
}

.wd-entry-content a:not(.btn):not(.button):not([class*="wd-"]),
.woocommerce-product-details__short-description a,
.kdt-faq-answer a,
.woocommerce-Tabs-panel a:not(.btn) {
    color: #0B6BAA;
}

.wd-entry-content a:not(.btn):not(.button):not([class*="wd-"]):hover,
.woocommerce-product-details__short-description a:hover,
.kdt-faq-answer a:hover,
.woocommerce-Tabs-panel a:not(.btn):hover {
    color: #ED1C24;
    text-decoration: underline;
}

/* Dải "Chọn theo giá" trên /shop và 7 ngành hàng (functions.php mục 13).
   Vừa là lối tắt cho khách, vừa là đường dẫn để Google tìm ra 64 trang khoảng giá. */
.kdt-price-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kdt-price-band {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: all 0.15s ease;
}

.kdt-price-band:hover {
    border-color: #ED1C24;
    color: #ED1C24;
}

.kdt-price-band.is-active {
    background: #ED1C24;
    border-color: #ED1C24;
    color: #fff;
}

/* Widget "Chọn theo giá" nằm trong sidebar hẹp: nút xuống dòng gọn, chữ nhỏ hơn dải cũ
   (dải cũ chạy ngang hết chiều rộng trang nên rộng rãi hơn). */
/* Chip LỌC XUẤT XỨ: cùng hình thức chip khoảng giá, thêm số lượng SP.
   Khác về hành vi: giá chọn MỘT, xuất xứ chọn NHIỀU (logic HOẶC) — nên có thêm chip "Bỏ chọn". */
.kdt-xx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kdt-xx-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #fff;
    color: #333;
    font-size: 13px;
    transition: all 0.15s ease;
}

.kdt-xx-chip em {
    font-style: normal;
    font-size: 11px;
    color: #999;
}

.kdt-xx-chip:hover {
    border-color: #ED1C24;
    color: #ED1C24;
}

.kdt-xx-chip.is-active {
    background: #ED1C24;
    border-color: #ED1C24;
    color: #fff;
}

.kdt-xx-chip.is-active em {
    color: rgba(255, 255, 255, 0.8);
}

.kdt-xx-clear {
    border-style: dashed;
    color: #666;
}

.widget .kdt-price-bands .kdt-price-band {
    padding: 5px 11px;
    font-size: 13px;
}

/* ===== TAB TRANG SẢN PHẨM: 3 tab ngang ở MỌI kích thước + thanh tab dính khi cuộn =====
   Theme mặc định chuyển sang accordion khi màn <=1024px (JS singleProductTabsAccordion đổi
   class, kèm CSS `@media(max-width:1024px){.tabs-layout-tabs{display:none}}`).
   JS đã vô hiệu hoá ở functions.php; phần CSS dưới đây gỡ nốt rào cản hiển thị. */
@media (max-width: 1024px) {
    .woocommerce-tabs.tabs-layout-tabs {
        display: block !important;
    }
    /* 3 tab nằm ngang, không xuống dòng; hẹp quá thì cuộn ngang thay vì vỡ */
    .tabs-layout-tabs .wd-nav-tabs {
        flex-wrap: nowrap;
        --nav-gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs-layout-tabs .wd-nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .tabs-layout-tabs .wd-nav-tabs > li > a {
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Thanh tab dính lại khi cuộn xuống đọc nội dung dài.
   top = --kdt-tab-top, do JS (functions.php, footer trang SP) ĐO cạnh dưới của header
   theo từng khung hình. Không hằng số được: header này `whb-hide-on-scroll` — cuộn
   xuống thì trốn lên (thanh tab phải chiếm luôn đỉnh màn hình), cuộn lên thì hiện lại
   (thanh tab phải tụt xuống nằm dưới nó). Header cũng có HAI hàng dính (general 60px +
   bottom 50px) chứ không phải một, và cỡ đổi giữa mobile/desktop/khi dính.
   Giá trị dự phòng dưới đây chỉ dùng khi JS chết. */
.tabs-layout-tabs > .wd-nav-tabs-wrapper {
    position: sticky;
    top: var(--kdt-tab-top, calc(var(--wd-header-general-sticky-h, 60px) + var(--wd-header-bottom-sticky-h, 50px)));
    z-index: 20;
    /* Nền đục là BẮT BUỘC: đang dính mà trong suốt thì chữ cuộn qua hiện xuyên sau thanh tab.
       KHÔNG đổ bóng (cả desktop lẫn mobile) — theme không có, thêm vào là lạc kiểu. */
    background: #fff;
}

/* ĐƯỜNG KẺ phân cách + khoảng trắng quanh thanh tab — CẢ desktop lẫn mobile.
   Ba thứ phải sửa cùng lúc, sửa lẻ cái nào cũng hỏng:

   1. Đường kẻ: theme bỏ nó trên mobile (woo-single-prod-el-tabs-predefined:
      @media max-width:1024px { .product-tabs-wrapper { border-top: none } }) vì mặc
      định mobile là accordion, không cần vạch ngăn. Ta ép kiểu tab nên phải trả lại.
   2. Margin âm: theme đặt calc(--wd-single-spacing * -1 - 1px) cho thanh tab, cái
      -1px kéo nó lên ĐÈ đúng 1px đường kẻ. Nguyên bản không sao vì thanh tab trong
      suốt; nền nó giờ đục (bắt buộc để dính) nên nuốt mất đường kẻ. Về 0.
   3. Khoảng trắng: bỏ margin âm rồi thì khoảng hở trên/dưới rơi về mặc định của
      theme (--wd-single-spacing 40px desktop / 20px mobile + nav-pd 30px/20px), cộng
      dồn thành trên chật dưới rộng. Đặt số cụ thể cho cân, giống nhau ở cả hai cỡ màn.

   `body` để thắng độ ưu tiên: style.css của child nạp ở vị trí #1 còn file part của
   theme ở #41 — cùng độ ưu tiên thì cái nạp sau thắng. Riêng luật huỷ margin âm phải
   đủ 4 lớp mới hơn được .product-tabs-wrapper .tabs-layout-tabs>.wd-nav-tabs-wrapper. */
body .product-tabs-wrapper {
    border-top: 1px solid var(--brdcolor-gray-300);
    margin-top: 24px;    /* thở phía TRÊN đường kẻ */
    padding-top: 24px;   /* thở phía DƯỚI đường kẻ, trước thanh tab */
}

body .product-tabs-wrapper .tabs-layout-tabs > .wd-nav-tabs-wrapper {
    margin-top: 0;
    margin-bottom: 24px; /* thanh tab -> nội dung */
}

/* Đệm trong của hàng tab. Số trên cũng là khoảng cách từ chữ lên vạch đỏ đánh dấu
   tab đang mở (kiểu underline-reverse vẽ vạch ở CẠNH TRÊN, top:0). */
body .tabs-layout-tabs > .wd-nav-tabs-wrapper .wd-nav-tabs {
    --nav-pd: 14px 0 14px 0;
}

@media (max-width: 1024px) {
    .tabs-layout-tabs > .wd-nav-tabs-wrapper {
        top: var(--kdt-tab-top, calc(var(--wd-header-general-sm-h, 38px) + var(--wd-header-bottom-sm-h, 56px)));
        /* Tràn hết bề ngang để nền đục che kín, không hở mép cho chữ lọt qua. */
        margin-inline: calc(var(--wd-gap-sm, 10px) * -1);
        padding-inline: var(--wd-gap-sm, 10px);
    }
}

/* Ô sản phẩm VUÔNG GÓC (bỏ --wd-brd-radius 20px của theme).
   Vì sao: .wd-product-thumb bo 20px + overflow:hidden nên mọi thứ dán sát 4 góc — badge
   giảm giá, nhãn thương hiệu, nút giỏ, nút xem nhanh — đều bị đường cong xén mất một
   miếng. Vuông góc thì lấy lại đủ chỗ mà không phải né từng cái một.
   GIỮ NGUYÊN overflow:hidden — nó không phải thủ phạm: ô ảnh có carousel nhiều ảnh
   (.wd-product-grid-slider) và hiệu ứng phóng to khi rê chuột, bỏ cắt tràn là các ảnh
   sau trào ra nằm cạnh nhau.
   Bo cả .wd-product-wrapper: để riêng ảnh vuông trong thẻ bo tròn thì góc ảnh chìa ra
   ngoài đường cong của thẻ. */
.wd-products .wd-product .wd-product-thumb,
.wd-products .wd-product .wd-product-wrapper {
    border-radius: 0 !important;
}

/* ============================================================
   SLIDER TRANG CHỦ — khung VUÔNG đúng tỉ lệ ảnh
   ============================================================
   Ba slide dùng ảnh sản phẩm VUÔNG 1024x1024 làm nền tràn viền
   (.wd-slide-bg img { object-fit: cover }), mà module slider của
   WPBakery chỉ có MỘT trường ảnh — không có ảnh riêng cho mobile.
   Theme đặt slide cao cố định 575px desktop / 500px mobile, nên trên
   điện thoại khung ~390x500 (đứng) cắt mất hai bên sản phẩm.

   Cho khung thành VUÔNG => ảnh vừa khít, không cắt.

   ⚠️ CHỈ ở hai dải, không phải mọi cỡ màn (chủ dự án chốt 2026-08-07: vuông ở
   desktop và mobile, tablet chấp nhận cắt trên dưới). Lý do là bề rộng CỘT chứa
   slider đổi theo màn:
     · >= 1200px : cột `vc_col-lg-2/5` = 40% -> khung ~480px, vuông vừa đẹp
       (hiện theme để 575px, tức đang cắt trên dưới);
     · 768-1199  : class lg KHÔNG áp dụng nên cột chiếm FULL WIDTH -> vuông sẽ
       thành khung cao ~1000px, cao hơn cả màn hình. Để nguyên 500px của theme,
       chấp nhận cắt trên dưới;
     · <= 767px  : khung ~bề rộng máy -> vuông vừa khít.
   Ngắt điểm 1200px lấy từ chính js_composer (`vc_col-lg-*` nằm trong
   `@media (min-width:1200px)`), không phải số tự chọn — đổi số này là khung
   nhảy sang dải sai.

   Dùng chính biến `--wd-aspect-ratio` của theme (`.wd-slide` đã có
   `aspect-ratio: var(--wd-aspect-ratio)`) thay vì tự đặt aspect-ratio:
   đi cùng chiều với theme thì không phải chọi độ ưu tiên.

   `min-height: fit-content` làm hai việc trong một dòng: huỷ 500px của
   theme, VÀ giữ sàn bằng chiều cao nội dung. Cần cái sàn đó vì
   `.wd-slide { overflow: hidden }` — máy hẹp (320px) mà nội dung cao hơn
   khung vuông thì bị CẮT MẤT chứ không tràn ra thấy được. Trình duyệt cũ
   không hiểu `fit-content` sẽ bỏ qua dòng này và rơi về 500px như cũ.

   !important là bắt buộc: theme in 500px trong thẻ <style> giữa trang
   với bộ chọn `#slider-<term_id> .wd-slide` (có ID nên luôn thắng).
   Cố ý KHÔNG viết `#slider-44351` ở đây — id đó sinh từ term, dựng lại
   cây là đổi số (nguyên tắc ND-14 bước 0). */
@media (max-width: 767px), (min-width: 1200px) {
    body .wd-slider .wd-slide {
        --wd-aspect-ratio: 1 / 1;
        min-height: fit-content !important;
    }
}

/* ============================================================ HEADER MOBILE (ND-83)
   Chủ dự án chốt 2026-08-12: dồn **logo + ô tìm kiếm về CÙNG MỘT DÒNG**, bỏ icon Tài khoản.

   Phần chuyển phần tử làm ở DB (option `whb_header_501104`): `mobilesearch` chuyển từ
   `column_mobile5` (row header-bottom) sang `column_mobile4` (row general-header), và bỏ
   `account`. Hai quy tắc dưới đây chỉ dọn hai hệ quả ĐO ĐƯỢC của việc đó.

   📐 Số đo tại khổ 390px TRƯỚC khi thêm CSS này:
     row general-header  cao 38 · cột mobile: left 118 | center 145 | right 118
     row header-bottom   cao 57 · cột mobile: 380×56 nhưng **0 phần tử con**  <- dải đỏ trống
*/

/* (1) Row `header-bottom` ẩn trên mobile — làm bằng THAM SỐ BUILDER `hide_mobile`, KHÔNG bằng CSS.
   🐛 Bản đầu tôi dùng `@media(max-width:1024px){.whb-header-bottom{display:none}}`. Hàng biến mất
      NHƯNG chiều cao vẫn được tính: `--wd-header-bottom-sm-h: 56px` vẫn nằm trong `--wd-header-h`,
      mà Woodmart dùng biến đó dựng vùng đệm lúc header DÍNH ⇒ **một dải trắng lớn ngay dưới
      menubar** (chủ dự án báo). Băng dán CSS chữa phần nhìn thấy, phép tính bên dưới vẫn số cũ.
   ⇒ Đã chuyển sang `hide_mobile = true` cho row (xem `an-row-mobile.php`). Không còn CSS ở đây. */

/* (2) Bố cục 3 cột mobile — KHÔNG đè bằng CSS nữa, CỐ Ý (chủ dự án 2026-08-12: "làm như sửa
   trong admin"). Bản trước tôi ghi 3 quy tắc `flex` đè lên
     `.whb-general-header :is(.whb-mobile-left,.whb-mobile-right){flex:1 1 0%}`
   và phải thêm `body` để vượt độ đặc hiệu — tức một băng dán chống lại chính theme.

   ✅ Cách đúng, làm trong HEADER BUILDER (option `whb_header_501104`, admin sửa được):
        column_mobile2 [☰ + logo] · column_mobile3 (RỖNG) · column_mobile4 [ô tìm kiếm]
      Cột giữa rỗng -> Woodmart tự gắn class `whb-empty-column`, và **chính theme** có quy tắc
        `.whb-empty-column + .whb-mobile-right { flex: 1 1 auto }`
      cho cột phải giãn hết phần còn lại. Không cần CSS của mình.

   📌 Thứ builder KHÔNG làm được thì mới để lại ở dưới. */


/* ---------------------------------------------- GALLERY SP MOBILE: ô VUÔNG (ND-83)
   Chủ dự án 2026-08-12: "gallery nhỏ xuống 1/2 so với bây giờ và là hình vuông".

   🔬 Nguyên nhân đo được (SP mẫu, khổ 390px): 4 ảnh có TỈ LỆ KHÁC NHAU —
        228×228 (1.00) · **228×469 (0.49, ảnh dựng đứng 504×1037)** · 228×128 · 228×171
      Carousel lấy chiều cao theo ô CAO NHẤT -> khung 469px trong khi ảnh đang xem chỉ 228px
      => khoảng trắng ~240px. Ép mỗi ô về vuông thì khung còn 228 = đúng "một nửa".

   `object-fit: contain` chứ KHÔNG `cover`: `cover` sẽ **cắt** ảnh dựng đứng, mà đây là ảnh sản
   phẩm — cắt mất phần thân máy là mất thông tin khách cần. `contain` để nguyên ảnh, chừa nền
   trắng hai bên; đổi lại ảnh dựng đứng sẽ nhỏ hơn trong ô.

   ⚠️ Chỉ áp ≤1024px vì chủ dự án đang sửa mobile. **Desktop có ĐÚNG lỗi này**
      (đo: khung 952 / ảnh 463) — chưa sửa, đã báo để chủ dự án quyết. */
@media (max-width: 1024px) {
    body .wd-gallery-images .wd-carousel-item,
    body .wd-gallery-images .woocommerce-product-gallery__image {
        aspect-ratio: 1 / 1;
        height: auto;
    }
    body .wd-gallery-images .woocommerce-product-gallery__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* Dải thumbnail gallery: BỀ RỘNG một nửa + ô VUÔNG
   (chủ dự án 2026-08-12: "gallery nhỏ xuống 1/2 ... là hình vuông", rồi "vẫn dài như cũ").

   🔬 Mô hình kích cỡ THẬT của theme (đọc `woo-single-prod-el-gallery-opt-thumb-left.min.css`):
        .wd-gallery-images    { max-width: calc(100% - var(--wd-thumbs-width, 132px)) }
        .wd-gallery-thumb     { height: var(--wd-thumbs-height, auto) }
        .wd-carousel-item     { width: 100%; height: calc(100% / var(--wd-col)) }
        .wd-carousel-item img { height: calc(100% - var(--wd-gap)); object-fit: cover }
      ⇒ Bề rộng dải KHÔNG do tuỳ chọn `…_gallery_image_width` quyết định (cái đó chỉ đổi cỡ ảnh
        TẢI VỀ — đo được: `<img width="70">` nhưng ô vẫn 122). Bề rộng do biến
        **`--wd-thumbs-width`**, đang rơi về mặc định **132px**.

   🐛 VÀ VÌ SAO BẢN ĐẦU CỦA TÔI KHÔNG ĂN GÌ: theme đặt CẢ `width` LẪN `height` cho ô, nên
      `aspect-ratio` bị bỏ qua; hơn nữa selector của theme là (0,3,0) còn của tôi (0,2,1) → theme
      thắng. Phải viết đủ 3 lớp `.thumbs-position-left .wd-gallery-thumb .wd-carousel-item` + `body`
      để lên (0,3,1) VÀ phải bỏ `height` cố định đi mới có chỗ cho tỉ lệ.

   📐 66px = nửa của 132. Kéo theo ảnh chính rộng ra `360 − 66 = 294` và vẫn vuông; ô thumbnail
      thành 66 × (294/4 ≈ 73) — gần vuông, `aspect-ratio` kéo về đúng vuông. */
@media (max-width: 1024px) {
    body .thumbs-position-left {
        --wd-thumbs-width: 66px;
    }
    body .thumbs-position-left .wd-gallery-thumb .wd-carousel-item {
        /* ⚠️ `!important` là BẮT BUỘC, đã thử không có thì KHÔNG ăn dù độ đặc hiệu của tôi cao hơn
           ((0,3,1) vs (0,3,0)). Lý do: `.wd-carousel-inner{position:absolute;inset:0}` cho dải một
           chiều cao XÁC ĐỊNH, nên `height: calc(100%/var(--wd-col))` của theme thắng trong tính
           toán layout. Đã kiểm bằng 2 bản thử cục bộ: có `!important` -> ô 56×56 (vuông);
           bỏ `position:absolute` cũng vuông nhưng **phá bố cục** (dải phình 298px). */
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    /* `contain` để không cắt ảnh thumbnail dựng đứng; theme mặc định là `cover`. */
    body .thumbs-position-left .wd-gallery-thumb .wd-carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        margin-bottom: 0;
    }
}

/* Ô KẾT QUẢ TÌM KIẾM trên mobile: rộng gần sát lề (chủ dự án 2026-08-12).
   🔬 Mặc định ô kết quả `position:absolute` bám `.wd-search-results-wrapper` (`position:relative`),
      nên bề rộng đúng bằng form tìm kiếm — đo được **158px, x=194→352** trên khổ 390: hẹp, đọc
      tên sản phẩm bị cắt.
   ✅ Bỏ `position:relative` của wrapper -> khối chứa lùi lên `.whb-main-header` (rộng cả header),
      rồi `left/right: 8px` cho ô kết quả. Đo sau khi sửa: **374px, x=8→382**, lề 8px mỗi bên,
      và vẫn nằm DƯỚI input (y=63 so với input kết ở 40) nên không đè ô nhập.
   ⚠️ Đã thử `position: fixed` trước: bề rộng tính theo viewport nên **tràn ra ngoài** (473px,
      lề phải −91px). Không dùng.
   Chỉ ≤1024px và chỉ trong `.whb-mobile-right` — desktop không có cột này nên không ảnh hưởng. */
@media (max-width: 1024px) {
    body .whb-mobile-right .wd-search-results-wrapper {
        position: static;
    }
    body .whb-mobile-right .wd-dropdown-results {
        left: 8px;
        right: 8px;
    }
}

/* Vùng CHI TIẾT SẢN PHẨM trên mobile: giãn dòng nhỏ lại (chủ dự án 2026-08-12).
   📐 Đo trước khi sửa (khổ 390px, SP có 6 gạch đầu dòng):
        font 15px · line-height 24px (tỉ lệ 1.6) · `li` margin-bottom 10px
        mô tả ngắn cao 194px · nội dung tab cao 567px
      Trên màn hẹp, tỉ lệ 1.6 + 10px giữa các mục làm khối mô tả trải rất dài, khách phải cuộn
      nhiều mới tới nút Đặt Hàng.
   Chỉ ≤1024px — desktop rộng nên giãn dòng 1.6 vẫn dễ đọc, không đụng. */
@media (max-width: 1024px) {
    body .summary.entry-summary,
    body .woocommerce-product-details__short-description,
    body .wd-tab-content,
    body .wc-tab,
    body .kdt-faq {
        line-height: 1.45;
    }
    /* Khoảng cách GIỮA CÁC MỤC: 10px -> 4px -> **2px** (chủ dự án yêu cầu thu hẹp thêm 2026-08-12).
       Giữ 2px chứ không 0: còn một ranh giới mảnh giữa các thông số. Đo được ở SP 6 mục:
         mb 10px -> mô tả ngắn 194px · mb 4px -> 151px · mb 2px -> ~139px */
    body .summary.entry-summary li,
    body .wd-tab-content li,
    body .wc-tab li {
        margin-bottom: 2px;
    }
    /* Đoạn văn trong tab: 20px -> 12px. */
    body .wd-tab-content p,
    body .wc-tab p {
        margin-bottom: 12px;
    }
}

/* Trang chi tiết SP trên mobile: thu hẹp khoảng cách GIỮA CÁC KHỐI + ẩn điều hướng SP trước/sau.
   (chủ dự án 2026-08-12: "không chỉ li mà còn khoảng cách giữa ảnh sản phẩm, title, các mục khác";
    "ẩn wd-products-nav")

   🔬 Đo được: mọi khối trong `.summary` cách nhau **20px**, và tất cả đến từ MỘT biến của theme —
      `.wd-set-mb { --wd-mb: 15px }` + `.wd-set-mb > * { margin-bottom: var(--wd-mb) }`, trang SP
      nâng lên 20px. Khe giữa ẢNH SP và phần chữ do biến khác: `--wd-single-spacing`
      (`.product-image-summary-inner > div:not(:last-child){margin-bottom:var(--wd-single-spacing)}`).
   ⇒ Sửa hai BIẾN đó là gọn nhất, không phải liệt kê từng khối (breadcrumb, thương hiệu, tiêu đề,
      giá, CTA hotline, mô tả ngắn, nút mua, form tư vấn, meta…) — liệt kê tay thì thêm khối mới
      là lại hở.
   📐 Khe cũ / mới: giữa các khối **20 → 10px** (8 khe ⇒ tiết kiệm ~80px), ảnh↔chữ theo cùng mức. */
@media (max-width: 1024px) {
    body .summary-inner.wd-set-mb {
        --wd-mb: 10px;
    }
    body .product-image-summary-inner {
        --wd-single-spacing: 10px;
    }
    /* Điều hướng "sản phẩm trước / sau" — chủ dự án cho ẩn. Chỉ ẩn, KHÔNG xoá khỏi HTML: nó là
       liên kết nội bộ, để nguyên trong mã thì bot vẫn đi qua được. */
    body .wd-products-nav {
        display: none;
    }

    /* 4 khối có margin RIÊNG nên không theo `--wd-mb`, đo được vẫn còn khe 20–25px.
       Ba trong bốn là margin do CHÍNH TÔI thêm ở các mục trước trong file này — nếu chỉ hạ
       `--wd-mb` mà bỏ qua chúng thì khối nhìn vẫn thưa không đều. */
    body .summary-inner .price {
        margin-bottom: 10px;   /* theme: 15px -> cộng với mt của CTA hotline thành khe 25 */
    }
    body .summary-inner .kdt-price-hotline {
        margin-top: 0;         /* của tôi: 10px */
    }
    body .summary-inner .woocommerce-product-details__short-description {
        margin-bottom: 10px;   /* theme tự đặt 20px, không theo --wd-mb */
    }
    body .summary-inner .form-tu-van-wrapper {
        margin-top: 10px;      /* của tôi: 20px -> gộp lề với .cart thành khe 20 */
    }
}

/* Badge thương hiệu trên ảnh chính — bản MOBILE (bản desktop ở đầu file, mục 6d-6).
   ⚠️ Selector phải GIỐNG HỆT bản desktop: bản kia là (0,3,1) nên nếu ở đây viết ngắn hơn
      (vd `body .kdt-brand-badge img`) thì điểm THẤP hơn và bản desktop thắng ngay trong
      media query — thu nhỏ sẽ không có tác dụng nào cả. */
@media (max-width: 1024px) {
    .woocommerce-product-gallery .wd-product-brands.kdt-brand-badge a {
        padding: 3px 6px;
        font-size: 10px;
    }
    .woocommerce-product-gallery .wd-product-brands.kdt-brand-badge img {
        max-height: 20px;
    }
}