/* =========================================================
   CAB CUSTOM UI - DESKTOP / TABLET
   File: assets/css/desktop.css
   ========================================================= */

:root{
  --cab-blue:#3972B9;
  --cab-blue-dark:#285B9D;
  --cab-blue-soft:#EEF5FD;
  --cab-text:#23364F;
  --cab-muted:#60748E;
}

/* =========================================================
   HOME CATEGORY CAROUSEL - DESKTOP
   4 cột x 2 hàng mỗi màn; bấm mũi tên để qua nhóm tiếp theo.
   ========================================================= */
.cab-home-cat{
  max-width:1320px;
  margin:34px auto 42px;
  padding:34px 38px 40px;
  background:#fff;
  border:1px solid #dce6f0;
  border-radius:24px;
  box-shadow:0 10px 28px rgba(40,91,157,.08);
  box-sizing:border-box;
  overflow:hidden;
}
.cab-home-cat__head{margin-bottom:24px}
.cab-home-cat__head-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cab-home-cat__head h2{margin:0;color:var(--cab-blue);font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.cab-home-cat__mobile-title{display:none}
.cab-home-cat__head p{margin:8px 0 0;color:var(--cab-muted);font-size:15px;line-height:1.4}
.cab-home-cat__controls{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cab-home-cat__nav{
  width:42px;height:42px;border:1px solid #d8e5f2;border-radius:50%;background:#fff;color:var(--cab-blue);
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-size:28px;line-height:1;
  box-shadow:0 4px 12px rgba(40,91,157,.08);transition:.2s ease;
}
.cab-home-cat__nav:hover{background:var(--cab-blue);color:#fff;border-color:var(--cab-blue)}
.cab-home-cat__nav:disabled{opacity:.32;cursor:default;background:#fff;color:var(--cab-blue)}
.cab-home-cat__view-all{display:inline-flex;align-items:center;gap:3px;margin-left:6px;color:var(--cab-blue)!important;font-size:13px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.cab-home-cat__view-all span{font-size:20px;line-height:1}
.cab-home-cat__viewport{overflow:hidden}
.cab-home-cat__grid{
  --cab-cat-gap:18px;
  --cab-cat-card-w:calc((100% - (var(--cab-cat-gap) * 3))/4);
  display:grid;
  grid-template-rows:repeat(2,205px);
  grid-auto-flow:column;
  grid-auto-columns:var(--cab-cat-card-w);
  gap:var(--cab-cat-gap);
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px 12px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cab-home-cat__grid::-webkit-scrollbar{display:none}
.cab-home-cat__card{
  position:relative;display:flex;min-width:0;min-height:205px;height:205px;padding:22px;border-radius:20px;
  background:var(--cab-blue-soft);overflow:hidden;text-decoration:none!important;color:inherit!important;
  box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;scroll-snap-align:start;
}
.cab-home-cat__card:nth-child(4n+2),.cab-home-cat__card:nth-child(4n+3){background:#f5f9fe}
.cab-home-cat__card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(57,114,185,.14);background:#e8f2fc}
.cab-home-cat__copy{position:relative;z-index:2;width:58%;padding-right:4px}
.cab-home-cat__parent{color:#7c91a9;font-size:11px;line-height:1.2;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.cab-home-cat__title{color:var(--cab-blue-dark);font-size:20px;line-height:1.2;font-weight:800;margin:0 0 10px}
.cab-home-cat__desc{color:var(--cab-muted);font-size:13px;line-height:1.4}
.cab-home-cat__visual{position:absolute;
  right:6px;
  top:22px;
  width:48%;
  height:165px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.cab-home-cat__visual img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(40,91,157,.10))}
.cab-home-cat__visual--fallback{right:22px;top:44px;width:110px;height:110px;border-radius:50%;background:#dcebf9;color:var(--cab-blue);font-size:42px;font-weight:800}
.cab-home-cat__arrow{position:absolute;left:22px;bottom:19px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--cab-blue);font-size:24px;line-height:1;font-weight:700;box-shadow:0 6px 14px rgba(40,91,157,.08)}

@media(max-width:991px) and (min-width:550px){
  .cab-home-cat{margin-left:18px;margin-right:18px;padding:28px}
  .cab-home-cat__head h2{font-size:28px}
  .cab-home-cat__grid{--cab-cat-card-w:44%;
  }
}
/* Đồng bộ tiêu đề section Flatsome với tiêu đề danh mục CAB */
.section-title-main {
    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color:var(--cab-blue)!important;
}
/* Arrow box tròn */
.cab-cat-nav button,
.cab-cat-arrow,
.cab-category-nav button,
.cab-category-carousel .swiper-button-prev,
.cab-category-carousel .swiper-button-next {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1.5px solid #cfe0f4 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* icon mũi tên ở giữa */
.cab-cat-nav button i,
.cab-cat-arrow i,
.cab-category-nav button i,
.cab-category-carousel .swiper-button-prev::after,
.cab-category-carousel .swiper-button-next::after {
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* FIX NÚT MŨI TÊN THÀNH HÌNH TRÒN */
.cab-home-cat .cab-home-cat__nav {
    width: 44px !important;
    height: 44px !important;

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

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

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

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

    border-radius: 999px !important;
    box-sizing: border-box !important;

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

    line-height: 1 !important;
    font-size: 28px !important;
}
/* Đồng bộ tiêu đề sản phẩm với MUA SẮM THEO DANH MỤC */
.cab-section-title-sync,
.cab-section-title-sync * {
    color: #3972B9 !important;
    -webkit-text-fill-color: #3972B9 !important;

    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}