/*
 * Trường Trần Shop — chỉ giữ bản sửa Top xem.
 * Toàn bộ override responsive/header/sidebar đã được hoàn tác.
 */

html[data-layout="horizontal"] body .tt-top-slider {
    min-width: 0 !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
}

html[data-layout="horizontal"] body .tt-top-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
    min-width: 0 !important;
}

html[data-layout="horizontal"] body .tt-top-picture,
html[data-layout="horizontal"] body .tt-top-img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-layout="horizontal"] body .tt-top-picture {
    display: block !important;
    aspect-ratio: 5 / 4 !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] body .tt-top-img {
    height: 100% !important;
    object-fit: contain !important;
}

html[data-layout="horizontal"] body .tt-top-info {
    flex: 1 1 auto !important;
}

html[data-layout="vertical"] body .tt-top-box {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-layout="vertical"] body .tt-top-slider {
    --tt-top-gap: clamp(8px, 2.4vw, 12px);
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: var(--tt-top-gap) !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
}

html[data-layout="vertical"] body .tt-top-slider::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html[data-layout="vertical"] body .tt-top-card {
    flex: 0 0 calc((100% - var(--tt-top-gap)) / 2) !important;
    min-width: 0 !important;
    max-width: calc((100% - var(--tt-top-gap)) / 2) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    scroll-snap-align: none !important;
    box-sizing: border-box !important;
}

html[data-layout="vertical"] body .tt-top-card:nth-child(odd) {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}

html[data-layout="vertical"] body .tt-top-slider.tt-top-has-odd::after {
    content: "";
    flex: 0 0 calc((100% - var(--tt-top-gap)) / 2);
    min-width: 0;
}

html[data-layout="vertical"] body .tt-top-picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 4 !important;
    overflow: hidden !important;
    background: #09111f !important;
}

html[data-layout="vertical"] body .tt-top-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 10px 10px 0 0 !important;
}

html[data-layout="vertical"] body .tt-top-info {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: clamp(58px, 16vw, 72px) !important;
    padding: clamp(7px, 2vw, 10px) !important;
}

html[data-layout="vertical"] body .tt-top-title {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    font-size: clamp(.72rem, 2.7vw, .92rem) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

html[data-layout="vertical"] body .tt-top-price {
    margin-top: 6px !important;
    font-size: clamp(.8rem, 3vw, 1rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

html[data-layout="vertical"] body .tt-top-price::before {
    content: "Size: ";
    color: #94a3b8;
    font-size: .82em;
    font-weight: 700;
}

.tt-top-arrows button:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

@media (max-width: 349px) {
    html[data-layout="vertical"] body .tt-top-slider {
        --tt-top-gap: 7px;
    }

    html[data-layout="vertical"] body .tt-top-title {
        font-size: .68rem !important;
    }

    html[data-layout="vertical"] body .tt-top-price {
        font-size: .76rem !important;
    }
}

/* Top xem: giữ nguyên toàn bộ ảnh theo tỷ lệ gốc, không dùng khung 5/4. */
#lazyTopDayBox .tt-top-picture,
#lazyTopWeekBox .tt-top-picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    overflow: hidden !important;
}

#lazyTopDayBox .tt-top-img,
#lazyTopWeekBox .tt-top-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* Mobile: Top xem là bản thu nhỏ của card 2 cột, sát mép nhưng vẫn đủ 2 card. */
@media (max-width: 767px) {
    html[data-layout="vertical"] body #lazyTopDaySlider,
    html[data-layout="vertical"] body #lazyTopWeekSlider {
        --tt-top-gap: 8px;
        width: calc(100% + 32px) !important;
        max-width: none !important;
        margin-inline: -16px !important;
    }

    html[data-layout="vertical"] body #lazyTopDayBox .tt-top-card,
    html[data-layout="vertical"] body #lazyTopWeekBox .tt-top-card {
        border-radius: 12px !important;
    }
}

/* Danh mục: ẩn badge số lượng để nhãn và dấu tích không chồng nhau. */
html body
.tt-launcher-sidebar.tt-launcher-sidebar-left
.tt-launcher-menu-group[aria-label="Danh mục"]
> .tt-launcher-menu-item
> .tt-launcher-menu-count,
html body
.tt-launcher-sidebar.tt-launcher-sidebar-left
> .grid-category
> .tt-customer-list-nav
> b[data-tt-local-count] {
    display: none !important;
}

/* Màu 7 nút Danh mục theo bản backup cũ — chỉ màu, không đổi bố cục. */
html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .mode-tabs > .mode-tab.tab-sell {
    background: #0a1728 !important;
    color: #bff8ff !important;
    border-color: rgba(28, 215, 244, .58) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .mode-tabs > .mode-tab.tab-sell > i {
    color: #35e8ff !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .mode-tabs > .mode-tab.tab-sell.active {
    background: linear-gradient(135deg, #087d93, #10bcd5) !important;
    color: #fff !important;
    border-color: #70f3ff !important;
    box-shadow: 0 4px 12px rgba(18, 203, 229, .22) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .mode-tabs > .mode-tab.tab-rental {
    background: #0a1728 !important;
    color: #dac9ff !important;
    border-color: rgba(151, 92, 255, .58) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .mode-tabs > .mode-tab.tab-rental > i {
    color: #aa79ff !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .mode-tabs > .mode-tab.tab-rental.active {
    background: linear-gradient(135deg, #5524a7, #7e3ae0) !important;
    color: #fff !important;
    border-color: #c4a2ff !important;
    box-shadow: 0 4px 12px rgba(126, 58, 224, .2) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.solid-red {
    background: #1a1720 !important;
    color: #ffd7a1 !important;
    border-color: rgba(255, 157, 46, .6) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.solid-red > i {
    color: #ffad3e !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.solid-red.active {
    background: linear-gradient(135deg, #ffbe20, #ff8d13) !important;
    color: #111827 !important;
    border-color: #ffe39a !important;
    box-shadow: 0 4px 12px rgba(255, 166, 24, .2) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.solid-dark {
    background: #171714 !important;
    color: #f1ca8c !important;
    border-color: rgba(211, 133, 27, .56) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.solid-dark > i {
    color: #d99431 !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.solid-dark.active {
    background: linear-gradient(135deg, #7b4109, #b5660f) !important;
    color: #fff4df !important;
    border-color: #e9a33b !important;
    box-shadow: 0 4px 12px rgba(181, 102, 15, .2) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.tt-customer-list-nav-recent {
    background: #0b1728 !important;
    color: #a9ccff !important;
    border-color: rgba(70, 133, 255, .62) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.tt-customer-list-nav-recent > i {
    color: #5ea4ff !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.tt-customer-list-nav-recent.active {
    background: linear-gradient(135deg, #1f58b8, #3d7df0) !important;
    color: #fff !important;
    border-color: #8bbaff !important;
    box-shadow: 0 4px 12px rgba(61, 125, 240, .2) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.tt-customer-list-nav-saved {
    background: #1d111c !important;
    color: #ffb0c0 !important;
    border-color: rgba(226, 63, 97, .62) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.tt-customer-list-nav-saved > i {
    color: #f05a7b !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > a.btn-solid.tt-customer-list-nav-saved.active {
    background: linear-gradient(135deg, #7f1734, #b82950) !important;
    color: #fff !important;
    border-color: #ff9caf !important;
    box-shadow: 0 4px 12px rgba(184, 41, 80, .2) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > button.btn-solid.tt-customer-price-main {
    background: #151a21 !important;
    color: #ffd58a !important;
    border-color: rgba(237, 170, 52, .64) !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > button.btn-solid.tt-customer-price-main > i:first-child {
    color: #f0ad3c !important;
}

html[data-layout="vertical"] body .tt-launcher-sidebar.tt-launcher-sidebar-left > .grid-category > button.btn-solid.tt-customer-price-main[aria-expanded="true"] {
    background: linear-gradient(135deg, #ffbf2e, #ff8c21) !important;
    color: #172033 !important;
    border-color: #ffe19b !important;
    box-shadow: 0 4px 12px rgba(255, 160, 30, .2) !important;
}

/* Nút Tùy chọn giá đang hiển thị trong menu nổi: dùng cùng màu bản cũ. */
html body #ttFloatFilter .tt-filter-split.grid-category > button#ttPriceBtn.btn-solid.tt-customer-price-main {
    background: #151a21 !important;
    color: #ffd58a !important;
    border-color: rgba(237, 170, 52, .64) !important;
    box-shadow: none !important;
}

html body #ttFloatFilter .tt-filter-split.grid-category > button#ttPriceBtn.btn-solid.tt-customer-price-main > i {
    color: #f0ad3c !important;
}

html body #ttFloatFilter .tt-filter-split.grid-category > button#ttPriceBtn.btn-solid.tt-customer-price-main:hover:not([aria-expanded="true"]) {
    box-shadow: none !important;
}

html body #ttFloatFilter .tt-filter-split.grid-category > button#ttPriceBtn.btn-solid.tt-customer-price-main[aria-expanded="true"] {
    background: linear-gradient(135deg, #ffbf2e, #ff8c21) !important;
    color: #172033 !important;
    border-color: #ffe19b !important;
    box-shadow: 0 4px 12px rgba(255, 160, 30, .2) !important;
}

html body #ttFloatFilter .tt-filter-split.grid-category > button#ttPriceBtn.btn-solid.tt-customer-price-main[aria-expanded="true"] > i {
    color: #172033 !important;
}