/* =========================================================
   CAB CUSTOM UI - MOBILE <= 549px
   File: assets/css/mobile.css
   Danh mục: 2 hàng, ~3 ô/màn hình, vuốt ngang + nút mũi tên.
   ========================================================= */

.cab-home-cat{
  margin:22px 0 28px;padding:0 0 8px;border:0;border-radius:0;box-shadow:none;background:transparent;max-width:none;overflow:hidden;
}
.cab-home-cat__head{margin:0 0 12px;padding:0 16px;text-align:left}
.cab-home-cat__head-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cab-home-cat__head h2{margin:0;font-size:20px;line-height:1.15;color:#153a60;letter-spacing:-.02em;white-space:nowrap}
.cab-home-cat__desktop-title{display:none}.cab-home-cat__mobile-title{display:inline}
.cab-home-cat__head p{display:none}
.cab-home-cat__controls{display:flex;align-items:center;gap:5px;min-width:0}
.cab-home-cat__nav{width:30px;height:30px;border:1px solid #d8e5f2;border-radius:50%;background:#fff;color:#3972B9;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;box-shadow:none}
.cab-home-cat__nav:disabled{opacity:.3}
.cab-home-cat__view-all{display:inline-flex;align-items:center;gap:2px;color:#3972B9!important;font-size:11px;line-height:1;font-weight:700;text-decoration:none!important;white-space:nowrap;margin-left:1px}
.cab-home-cat__view-all span{font-size:18px;line-height:.8}
.cab-home-cat__viewport{overflow:hidden}
.cab-home-cat__grid{
  --cab-mobile-gap:9px;
  display:grid;
  grid-template-rows:repeat(2,150px);
  grid-auto-flow:column;
  grid-auto-columns:calc((100vw - 58px)/3);
  gap:var(--cab-mobile-gap);
  overflow-x:auto;overflow-y:hidden;
  padding:2px 16px 11px;margin:0;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-inline:contain;
}
.cab-home-cat__grid::-webkit-scrollbar{display:none}
.cab-home-cat__card{
  min-width:0;min-height:150px;height:150px;padding:7px 6px 9px;border-radius:14px;background:#fff!important;border:1px solid #e6e9ee;
  box-shadow:0 2px 7px rgba(28,62,97,.08);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  scroll-snap-align:start;overflow:hidden;text-decoration:none!important;color:inherit!important;
}
.cab-home-cat__card:hover{transform:none;box-shadow:0 2px 7px rgba(28,62,97,.08);background:#fff}
.cab-home-cat__visual{position:static;order:1;width:100%;height:96px;flex:0 0 96px;display:flex;align-items:center;justify-content:center;margin:0}
.cab-home-cat__visual img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:none}
.cab-home-cat__visual--fallback{position:static;order:1;width:100%;height:96px;flex:0 0 96px;border-radius:10px;background:#eef5fd;color:#3972B9;font-size:32px;font-weight:800}
.cab-home-cat__copy{order:2;width:100%;padding:0;margin:4px 0 0;text-align:center;min-width:0}
.cab-home-cat__parent{display:none}
.cab-home-cat__title{color:#183B65;font-size:12.5px;line-height:1.18;font-weight:700;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cab-home-cat__desc,.cab-home-cat__arrow{display:none!important}
/* =========================================================
   CAB MOBILE CATEGORY
   2 hàng - ~3 ô/màn hình - vuốt ngang
   ========================================================= */

.cab-home-cat {
    margin: 22px 0 28px;
    padding: 0 0 8px;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    background: transparent;
    max-width: none;
    overflow: hidden;
}


/* ===== HEADER ===== */

.cab-home-cat__head {
    margin: 0 0 12px;
    padding: 0 16px;
    text-align: left;
}

.cab-home-cat__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}


/* Tiêu đề danh mục mobile */
.cab-home-cat__head h2 {
    margin: 0 !important;

    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;

    color: #3972B9 !important;

    letter-spacing: -0.02em !important;
    white-space: nowrap;
}


/* Desktop title ẩn trên mobile */
.cab-home-cat__desktop-title {
    display: none !important;
}

.cab-home-cat__mobile-title {
    display: inline !important;
}


/* Ẩn mô tả section */
.cab-home-cat__head p {
    display: none !important;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.cab-home-cat__controls {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}


/* MŨI TÊN TRÒN THẬT */
.cab-home-cat .cab-home-cat__nav {
    width: 32px !important;
    height: 32px !important;

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

    max-width: 32px !important;
    max-height: 32px !important;

    flex: 0 0 32px !important;
    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid #d8e5f2 !important;
    border-radius: 999px !important;

    background: #fff !important;
    color: #3972B9 !important;

    box-sizing: border-box !important;

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

    font-size: 20px !important;
    line-height: 1 !important;

    box-shadow: none !important;
}

.cab-home-cat .cab-home-cat__nav:disabled {
    opacity: .3;
}


/* XEM TẤT CẢ */
.cab-home-cat__view-all {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;

    color: #3972B9 !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

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

    margin-left: 1px;
}

.cab-home-cat__view-all span {
    font-size: 18px;
    line-height: .8;
}


/* =========================================================
   CATEGORY SLIDER
   ========================================================= */

.cab-home-cat__viewport {
    overflow: hidden;
}

.cab-home-cat__grid {
    --cab-mobile-gap: 9px;

    display: grid;

    /* 2 hàng */
    grid-template-rows: repeat(2, 150px);

    /* Xếp theo cột để vuốt ngang */
    grid-auto-flow: column;

    /* khoảng 3 ô / màn hình */
    grid-auto-columns: calc((100vw - 58px) / 3);

    gap: var(--cab-mobile-gap);

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

    padding: 2px 16px 11px;
    margin: 0;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scroll-padding-left: 16px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.cab-home-cat__grid::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   CARD
   ========================================================= */

.cab-home-cat__card {
    min-width: 0;

    height: 150px;
    min-height: 150px;

    padding: 7px 6px 9px;

    border-radius: 14px;

    background: #fff !important;
    border: 1px solid #e6e9ee;

    box-shadow: 0 2px 7px rgba(28, 62, 97, .08);

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    scroll-snap-align: start;

    overflow: hidden;

    text-decoration: none !important;
    color: inherit !important;
}

.cab-home-cat__card:hover {
    transform: none;
    background: #fff !important;

    box-shadow: 0 2px 7px rgba(28, 62, 97, .08);
}


/* =========================================================
   IMAGE
   ========================================================= */

.cab-home-cat__visual {
    position: static;

    order: 1;

    width: 100%;
    height: 96px;
    flex: 0 0 96px;

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

    margin: 0;
}

.cab-home-cat__visual img {
    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    filter: none;
}


/* Nếu category chưa có ảnh */
.cab-home-cat__visual--fallback {
    position: static;

    order: 1;

    width: 100%;
    height: 96px;
    flex: 0 0 96px;

    border-radius: 10px;

    background: #eef5fd;

    color: #3972B9;

    font-size: 32px;
    font-weight: 800;
}


/* =========================================================
   CATEGORY NAME
   ========================================================= */

.cab-home-cat__copy {
    order: 2;

    width: 100%;

    padding: 0;
    margin: 4px 0 0;

    text-align: center;

    min-width: 0;
}


/* Không cần tên category cha trên mobile */
.cab-home-cat__parent {
    display: none !important;
}


.cab-home-cat__title {
    margin: 0;

    color: #183B65;

    font-size: 12.5px;
    line-height: 1.18;
    font-weight: 700;

    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* Mobile bỏ mô tả + nút arrow trong từng card */
.cab-home-cat__desc,
.cab-home-cat__arrow {
    display: none !important;
}


/* =========================================================
   ĐỒNG BỘ CÁC TIÊU ĐỀ SẢN PHẨM
   ========================================================= */

.cab-section-title-sync,
.cab-section-title-sync *,
.cab-best-seller-title,
.cab-best-seller-title * {

    color: #3972B9 !important;
    -webkit-text-fill-color: #3972B9 !important;

    font-size: 20px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -0.02em !important;
}
/* =========================================================
   FIX TIÊU ĐỀ + XEM THÊM CÙNG 1 HÀNG
   ========================================================= */

@media (max-width: 549px) {

    /* Hàng tiêu đề Flatsome */
    .section-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        gap: 10px !important;
    }


    /* SẢN PHẨM BÁN CHẠY / SẢN PHẨM GỢI Ý */
    .section-title .section-title-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        margin: 0 !important;

        color: #3972B9 !important;
        -webkit-text-fill-color: #3972B9 !important;

        font-size: 20px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;

        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }


    /* XEM THÊM */
    .section-title > a {
        flex: 0 0 auto !important;

        margin: 0 0 0 auto !important;
        padding: 0 !important;

        color: #3972B9 !important;
        -webkit-text-fill-color: #3972B9 !important;

        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        white-space: nowrap !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }


    /* Mũi tên cạnh XEM THÊM */
    .section-title > a i {
        font-size: 16px !important;
        line-height: 1 !important;
    }


    /* Bỏ đường kẻ Flatsome nếu nó chiếm chỗ */
    .section-title > b {
        display: none !important;
    }

}
/* =========================================================
   MOBILE PRODUCT SECTION HEADER
   Tiêu đề trái + XEM THÊM phải cùng 1 hàng
   ========================================================= */

.cab-mobile-product-title-row {
    width: 100% !important;

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

    gap: 12px !important;

    margin: 0 0 14px !important;
    padding: 0 16px !important;

    box-sizing: border-box !important;
}


/* Tiêu đề */
.cab-mobile-product-title-row h1,
.cab-mobile-product-title-row h2,
.cab-mobile-product-title-row h3,
.cab-mobile-product-title-row h4,
.cab-mobile-product-title-row h5,
.cab-mobile-product-title-row h6 {

    margin: 0 !important;
    padding: 0 !important;

    flex: 1 1 auto !important;

    color: #3972B9 !important;
    -webkit-text-fill-color: #3972B9 !important;

    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* XEM THÊM */
.cab-mobile-product-title-row > a {

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #3972B9 !important;
    -webkit-text-fill-color: #3972B9 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    display: inline-flex !important;
    align-items: center !important;
}
/* =========================================================
   SẢN PHẨM BÁN CHẠY
   Căn trái/phải giống DANH MỤC HÀNG HÓA
   ========================================================= */

.cab-mobile-best-header {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;

    align-items: center !important;
    column-gap: 12px !important;

    padding: 0 16px !important;
    margin: 24px 0 14px !important;

    box-sizing: border-box !important;
}


/* Ẩn đường kẻ Flatsome */
.cab-mobile-best-header > b {
    display: none !important;
}


/* SẢN PHẨM BÁN CHẠY */
.cab-mobile-best-header .section-title-main,
.cab-mobile-best-header h1,
.cab-mobile-best-header h2,
.cab-mobile-best-header h3 {

    margin: 0 !important;
    padding: 0 !important;

    min-width: 0 !important;

    color: #3972B9 !important;
    -webkit-text-fill-color: #3972B9 !important;

    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* XEM THÊM */
.cab-mobile-best-more {
    margin: 0 !important;
    padding: 0 !important;

    justify-self: end !important;

    color: #3972B9 !important;
    -webkit-text-fill-color: #3972B9 !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}