/* Khoi tab xe (gia xe theo khoang gia / hang xe / phan khuc) - trang gia xe + trang chu.
   Nap media=print -> all tu template block (khong thuoc 10 file critical). JS: tbxTabBlock trong js/main.js */
.nav-simple > li > a {
    transition: background-color .15s, color .15s, border-color .15s;
}
.nav-simple > li > a:hover,
.nav-simple > li > a:focus {
    background: #eef1f6;
    border-color: transparent;
}
.nav-simple > li.active > a,
.nav-simple > li.active > a:hover,
.nav-simple > li.active > a:focus {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

/* Hang tab tran ngang: mep mo bao con tab bi che + nut mui ten cho chuot */
.tbx-tabs-wrap {
    position: relative;
}
.tbx-tabs-wrap .nav-simple {
    scrollbar-width: none;
}
.tbx-tabs-wrap .nav-simple::-webkit-scrollbar {
    display: none;
}
.tbx-tabs-wrap.tbx-more-r .nav-simple {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.tbx-tabs-wrap.tbx-more-l .nav-simple {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}
.tbx-tabs-wrap.tbx-more-l.tbx-more-r .nav-simple {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.tbx-tabs-arr {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 24, 39, .12);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tbx-tabs-arr::before {
    content: "";
    width: 8px;
    height: 8px;
    border: solid #111827;
    border-width: 2px 2px 0 0;
}
.tbx-tabs-arr-l {
    left: 0;
}
.tbx-tabs-arr-l::before {
    margin-left: 3px;
    transform: rotate(-135deg);
}
.tbx-tabs-arr-r {
    right: 0;
}
.tbx-tabs-arr-r::before {
    margin-right: 3px;
    transform: rotate(45deg);
}
.tbx-tabs-arr:hover {
    background: #f5f7fb;
}
/* [hidden] -> an khi CSS chua tai; chi hien voi chuot (may cham vuot ngang duoc) */
@media (hover: hover) and (pointer: fine) {
    .tbx-more-l > .tbx-tabs-arr-l[hidden],
    .tbx-more-r > .tbx-tabs-arr-r[hidden] {
        display: flex;
    }
}

.tbx-pr-skeleton {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.tbx-pr-skeleton span {
    display: block;
    aspect-ratio: 4 / 4.2;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f3f6 25%, #e7eaef 37%, #f1f3f6 63%);
    background-size: 400% 100%;
    animation: tbx-pr-shimmer 1.2s ease-in-out infinite;
}
@keyframes tbx-pr-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}
.tbx-pr-empty {
    padding: 24px 0;
    text-align: center;
    color: #6b7280;
}
@media (max-width: 767px) {
    .tbx-pr-skeleton {
        grid-template-columns: 1fr;
    }
    .tbx-pr-skeleton span:nth-child(n+2) {
        display: none;
    }
}