/*
 * Product detail: dedicated landscape layout.
 * Portrait/tablet portrait/mobile keep the existing DOM flow and styling.
 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Home breakpoint recovery (1100-1200px landscape).
   Legacy Masonry may leave absolute inline coordinates behind when crossing
   the old 1180px device-width rule.  Keep this narrow override in the final
   stylesheet so cached JS cannot push the price panel/cards below a black
   product-grid background. */
@media (min-width: 1100px) and (max-width: 1200px) and (orientation: landscape) {
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > .tt-price-filter-panel,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > #ttPriceFilterPanel_main {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > #productGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 14px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > #productGrid > .feed-item-scroll {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        inset: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
}

/* LAST RULE: keep the 1280/1366 iPad detail canvas inside the viewport. */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container.container {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container .tt-detail-landscape-shell {
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-main,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-product-top {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-main {
        grid-column: 2 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-product-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .95fr) !important;
        gap: var(--tt-desktop-gap) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-media-column,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-info-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Product detail uses the same 900–1439 compact-desktop shell. */
@media (min-width: 900px) and (max-width: 1439px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: calc(100dvh - var(--tt-header-height, 58px)) !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container {
        width: calc(100% - 16px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 auto !important;
        padding: 8px 0 !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell {
        display: grid !important;
        grid-template-columns: clamp(120px, 15vw, 205px) minmax(0, 1fr) clamp(120px, 15vw, 205px) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: clamp(6px, .8vw, 10px) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: none !important;
        scrollbar-width: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar:first-child { grid-column: 1 !important; }
    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar:last-child { grid-column: 3 !important; }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-main {
        grid-column: 2 !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-product-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(220px, .9fr) !important;
        gap: clamp(7px, .9vw, 11px) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-product-top > *,
    html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-media-column,
    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-info-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .mobile-bottom-nav,
    html[data-layout="horizontal"] body.tt-detail-page .bottom-nav,
    html[data-layout="horizontal"] body.tt-detail-page .mobile-nav-bar,
    html[data-layout="horizontal"] body.tt-detail-page .tt-mobile-bottom-nav {
        display: none !important;
    }
}

.tt-detail-landscape-shell,
.tt-detail-landscape-main,
.tt-landscape-product-top {
    display: contents !important;
}

.tt-detail-landscape-sidebar {
    display: none !important;
}

.tt-detail-landscape-search {
    display: none !important;
}

.tt-landscape-media-column {
    display: contents;
}

.tt-landscape-thumb-nav {
    display: contents;
}

.tt-landscape-thumb-arrow,
.tt-landscape-thumb-strip,
.tt-landscape-service-grid,
.tt-landscape-contact-actions {
    display: none;
}

@media (min-device-width: 1180px) and (orientation: landscape),
       (min-width: 900px) and (max-device-width: 1179px) and (orientation: landscape) {
    body.tt-detail-page {
        overflow-x: clip;
        padding-top: 0 !important;
    }

    body.tt-detail-page .detail-container {
        display: block !important;
        grid-template-columns: none !important;
        width: min(100%, 1780px) !important;
        max-width: 1780px !important;
        padding: 14px 12px 24px !important;
    }

    .tt-detail-landscape-shell {
        display: grid !important;
        grid-template-columns: 176px minmax(0, 1fr) 196px !important;
        gap: 12px;
        align-items: start;
    }

    .tt-detail-landscape-main {
        display: block !important;
        min-width: 0;
    }

    .tt-detail-landscape-sidebar {
        display: block !important;
        position: sticky !important;
        top: 72px !important;
        align-self: start;
        min-width: 0;
        max-height: calc(100vh - 86px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none;
    }

    .tt-detail-landscape-sidebar .tt-launcher-only {
        display: block !important;
    }

    .tt-detail-landscape-sidebar::-webkit-scrollbar {
        display: none;
    }

    body.tt-detail-page .tt-launcher-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    body.tt-detail-page .tt-detail-landscape-search {
        display: flex !important;
    }

    body.tt-detail-page .tt-launcher-context-nav .tt-launcher-current-section,
    body.tt-detail-page .tt-launcher-context-nav .tt-launcher-current-price {
        display: flex !important;
    }

    html body.tt-detail-page header.main-header a.tt-spa-desktop-back {
        display: inline-flex !important;
        position: absolute !important;
        top: 10px !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;
        align-items: center;
        gap: 5px;
        min-height: 38px;
        flex: none;
    }

    .tt-landscape-sticky-stack {
        position: sticky;
        top: 82px;
        display: grid;
        gap: 10px;
        max-height: calc(100vh - 96px);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .tt-landscape-panel {
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(34, 211, 238, .18);
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(9, 24, 39, .98), rgba(4, 14, 27, .98));
        box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
        color: #dbeafe;
    }

    .tt-landscape-panel-title {
        margin: 0 0 9px;
        color: #67e8f9;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .tt-landscape-nav,
    .tt-landscape-price-links,
    .tt-landscape-support,
    .tt-landscape-socials {
        display: grid;
        gap: 6px;
    }

    .tt-landscape-nav a,
    .tt-landscape-price-links a,
    .tt-landscape-support a {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        padding: 8px 9px;
        border: 1px solid rgba(148, 163, 184, .15);
        border-radius: 9px;
        background: rgba(15, 30, 48, .76);
        color: #e2e8f0;
        font-size: 9px;
        font-weight: 800;
        line-height: 1.25;
        text-decoration: none;
    }

    .tt-landscape-nav a:hover,
    .tt-landscape-price-links a:hover,
    .tt-landscape-support a:hover {
        border-color: #22d3ee;
        color: #67e8f9;
    }

    .tt-landscape-nav i,
    .tt-landscape-support i {
        flex: none;
        color: #22d3ee;
        font-size: 15px;
    }

    .tt-landscape-price-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tt-landscape-price-links a {
        justify-content: center;
        padding-inline: 4px;
        text-align: center;
    }

    .tt-landscape-shop-stat {
        display: grid;
        gap: 8px;
    }

    .tt-landscape-shop-stat > div {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        color: #94a3b8;
        font-size: 10px;
    }

    .tt-landscape-shop-stat i,
    .tt-landscape-shop-stat strong {
        color: #facc15;
    }

    .tt-landscape-product-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(282px, .9fr);
        gap: 12px;
        align-items: start;
        min-width: 0;
        container-type: inline-size;
    }

    .tt-landscape-media-column {
        display: block;
        min-width: 0;
    }

    .tt-landscape-media-column > .tt-detail-hero,
    .tt-landscape-product-top > .tt-detail-info-card {
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
    }

    .tt-landscape-media-column .tt-detail-hero {
        position: relative;
        overflow: hidden;
        border-radius: 14px 14px 0 0 !important;
    }

    .tt-landscape-media-column .tt-detail-hero a,
    .tt-landscape-media-column .tt-detail-hero img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .tt-landscape-product-top .tt-detail-info-card {
        position: relative !important;
        top: auto !important;
        padding: 13px !important;
    }

    .tt-landscape-product-top .tt-detail-product-title {
        margin: 0 0 8px !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        letter-spacing: -.015em;
    }

    .tt-landscape-product-top .tt-shop-badges {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .tt-landscape-product-top .tt-badge {
        padding: 5px 7px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .tt-landscape-product-top .tt-price-rental-line {
        min-height: 54px !important;
        padding: 8px 10px !important;
    }

    .tt-landscape-product-top .tt-inline-label,
    .tt-landscape-product-top .tt-inline-stat {
        font-size: 10px !important;
    }

    .tt-landscape-product-top .tt-inline-stat strong {
        max-width: none !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .tt-landscape-product-top .tt-shop-ready-line,
    .tt-landscape-product-top .tt-date-line,
    .tt-landscape-product-top .tt-support-line,
    .tt-landscape-product-top .tt-order-message {
        font-size: 9.5px !important;
        line-height: 1.4 !important;
    }

    .tt-landscape-thumb-nav {
        display: block;
        width: 100%;
    }

    .tt-landscape-thumb-strip {
        display: flex;
        gap: 4px;
        width: 100%;
        margin: 0;
        padding: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid rgba(34, 211, 238, .18);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        background: #07111f;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tt-landscape-thumb-strip::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .tt-landscape-thumb-arrow {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 54px;
        padding: 0;
        border: 1px solid rgba(34, 211, 238, .45);
        border-radius: 11px;
        background: rgba(2, 10, 23, .94);
        color: #facc15;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
        transform: translateY(-50%);
    }

    .tt-landscape-thumb-arrow:hover {
        border-color: #22d3ee;
        color: #fff;
        background: #082239;
    }

    .tt-landscape-thumb-arrow:disabled {
        cursor: default;
        opacity: .3;
        border-color: rgba(148, 163, 184, .25);
        color: #94a3b8;
    }

    .tt-landscape-thumb-arrow.is-left {
        left: 10px;
    }

    .tt-landscape-thumb-arrow.is-right {
        right: 10px;
    }

    .tt-landscape-thumb {
        flex: 0 0 calc((100% - 12px) / 4);
        width: calc((100% - 12px) / 4);
        height: 82px;
        padding: 1px;
        overflow: hidden;
        border: 2px solid transparent;
        border-radius: 6px;
        background: #020617;
        cursor: pointer;
        scroll-snap-align: center;
        transition: border-color .16s ease, transform .16s ease;
    }

    .tt-landscape-thumb:hover,
    .tt-landscape-thumb.is-active {
        border-color: #22d3ee;
        transform: translateY(-1px);
    }

    .tt-landscape-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        object-fit: cover;
    }

    .tt-landscape-service-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 8px;
    }

    .tt-landscape-service-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 72px;
        padding: 7px 4px;
        border: 1px solid currentColor;
        border-radius: 10px;
        background: rgba(4, 15, 29, .9);
        font: inherit;
        text-align: center;
    }

    button.tt-landscape-service-card {
        cursor: pointer;
    }

    .tt-landscape-service-card i {
        font-size: 18px;
    }

    .tt-landscape-service-card strong {
        overflow: hidden;
        max-width: 100%;
        font-size: 9px;
        font-weight: 900;
        line-height: 1.25;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .tt-landscape-service-card span {
        overflow: hidden;
        max-width: 100%;
        color: #cbd5e1;
        font-size: 8px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tt-landscape-service-card.is-stock { color: #22c55e; }
    .tt-landscape-service-card.is-rental { color: #22d3ee; }
    .tt-landscape-service-card.is-installment { color: #c084fc; }
    .tt-landscape-service-card.is-disabled { color: #f87171; }

    /* Acc order / ký gửi belongs to customers: amber distinguishes it from
       both shop-owned green and the red reserved for sold accounts. */
    .tt-landscape-service-grid.is-order-account .tt-landscape-service-card {
        color: #fbbf24 !important;
        border-color: rgba(251, 146, 60, .82) !important;
        background: linear-gradient(180deg, rgba(80, 42, 8, .94), rgba(35, 22, 7, .97)) !important;
        box-shadow: inset 0 0 0 1px rgba(253, 186, 116, .1), 0 8px 20px rgba(120, 53, 15, .2);
    }

    .tt-landscape-service-grid.is-order-account .tt-landscape-service-card strong {
        color: #fbbf24 !important;
    }

    .tt-landscape-service-grid.is-order-account .tt-landscape-service-card span {
        color: #ffedd5 !important;
    }

    /* Acc mới nhất is inventory owned by the shop: one consistent green tone
       across availability, rental and installment cards. */
    .tt-landscape-service-grid.is-shop-account .tt-landscape-service-card {
        color: #22c55e !important;
        border-color: rgba(34, 197, 94, .78) !important;
        background: linear-gradient(180deg, rgba(7, 62, 37, .94), rgba(4, 29, 23, .97)) !important;
        box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .08), 0 8px 20px rgba(5, 90, 48, .18);
    }

    .tt-landscape-service-grid.is-shop-account .tt-landscape-service-card strong {
        color: #2ee675 !important;
    }

    .tt-landscape-service-grid.is-shop-account .tt-landscape-service-card span {
        color: #d1fae5 !important;
    }

    .tt-landscape-contact-actions {
        display: grid;
        gap: 8px;
        margin-top: 8px;
    }

    .tt-landscape-contact-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        border: 0;
        border-radius: 9px;
        background: linear-gradient(110deg, #13bce7, #a855f7);
        color: #fff;
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
    }

    .tt-landscape-contact-primary:disabled {
        cursor: not-allowed;
        opacity: .55;
    }

    .tt-landscape-contact-socials {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .tt-landscape-contact-socials a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 31px;
        padding: 5px;
        border: 1px solid rgba(34, 211, 238, .25);
        border-radius: 7px;
        background: #082239;
        color: #e2e8f0;
        font-size: 8px;
        font-weight: 900;
        text-decoration: none;
        text-transform: uppercase;
    }

    .tt-landscape-contact-socials img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .tt-landscape-product-top .tt-detail-info-card > .tt-installment-btn {
        display: none !important;
    }

    .tt-landscape-product-top #collapseCalculator {
        width: 100cqw;
        max-width: 100cqw;
        margin-top: 14px !important;
        margin-left: calc(100% + 13px - 100cqw);
    }

    .tt-landscape-product-top #collapseCalculator > .card {
        width: 100%;
        padding: 22px !important;
        border: 1px solid rgba(34, 211, 238, .26) !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, #0c182b, #07111f) !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .3) !important;
    }

    .tt-landscape-product-top #collapseCalculator > .card > .border-bottom {
        padding: 0 0 18px !important;
    }

    .tt-landscape-product-top #collapseCalculator .row.g-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
    }

    .tt-landscape-product-top #collapseCalculator .row.g-3 > div {
        width: auto;
        padding: 0;
    }

    .tt-landscape-product-top #collapseCalculator h5 {
        margin-bottom: 18px !important;
        font-size: 19px;
    }

    .tt-landscape-product-top #collapseCalculator .tg-label {
        min-height: 34px;
        font-size: 12px;
        line-height: 1.35;
    }

    .tt-landscape-product-top #collapseCalculator .tg-input {
        min-height: 44px;
        font-size: 14px;
    }

    body.tt-detail-page .tt-detail-gallery-section {
        margin-top: 12px !important;
    }

    body.tt-detail-page .tt-gallery-heading {
        min-height: 46px;
        padding: 10px 8px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    body.tt-detail-page .tt-gallery-heading > div {
        gap: 7px;
    }

    body.tt-detail-page .tt-gallery-heading i {
        font-size: 18px !important;
    }

    body.tt-detail-page .tt-gallery-heading > span {
        flex: none;
        font-size: 13px !important;
        white-space: nowrap;
    }

    body.tt-detail-page #galleryFeed {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: hidden;
        border-radius: 10px;
    }

    body.tt-detail-page #galleryFeed > .tt-gallery-item {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden;
        border-radius: 0;
        background: #020617;
    }

    body.tt-detail-page #galleryFeed > .tt-gallery-item:first-child {
        grid-column: 1 / -1 !important;
    }

    body.tt-detail-page #galleryFeed > .tt-gallery-item img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .tt-landscape-vip-card {
        display: grid;
        gap: 8px;
    }

    .tt-landscape-vip-card img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
        object-fit: contain;
    }

    .tt-landscape-vip-label {
        color: #fde047;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .tt-landscape-vip-card > strong {
        overflow: hidden;
        color: #f8fafc;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tt-landscape-vip-card > span {
        color: #facc15;
        font-size: 18px;
        font-weight: 900;
    }

    .tt-landscape-commitments,
    .tt-landscape-shop-info {
        display: grid;
        gap: 8px;
    }

    .tt-landscape-commitments p {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 6px;
        margin: 0;
        color: #cbd5e1;
        font-size: 10px;
        line-height: 1.45;
    }

    .tt-landscape-commitments i,
    .tt-landscape-shop-info small i {
        color: #22c55e;
        font-size: 15px;
    }

    .tt-landscape-shop-info > strong {
        color: #f8fafc;
        font-size: 13px;
    }

    .tt-landscape-shop-info > span,
    .tt-landscape-shop-info > small {
        color: #94a3b8;
        font-size: 10px;
        line-height: 1.45;
    }

    .tt-landscape-socials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tt-landscape-socials .tt-landscape-panel-title {
        grid-column: 1 / -1;
    }

    .tt-landscape-socials a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 62px;
        padding: 7px 4px;
        border: 1px solid rgba(148, 163, 184, .18);
        border-radius: 10px;
        background: rgba(15, 30, 48, .8);
        color: #f8fafc;
        font-size: 9px;
        font-weight: 900;
        text-decoration: none;
    }

    .tt-landscape-socials img {
        width: 27px;
        height: 27px;
        object-fit: contain;
    }

    body.tt-detail-page .detail-related-container {
        width: min(100%, 1780px) !important;
        max-width: 1780px !important;
        padding-right: 220px !important;
        padding-left: 208px !important;
    }

    body.tt-detail-page .detail-related-container .tt-related-lazy-box {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    body.tt-detail-page .detail-related-container .tt-related-slider {
        gap: 12px !important;
    }

    body.tt-detail-page .detail-related-container .tt-related-card {
        flex: 0 0 calc((100% - 12px) / 2) !important;
        min-width: calc((100% - 12px) / 2) !important;
    }

    body.tt-detail-page .detail-related-container .tt-related-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* iPad/compact landscape final placement.
   This file is loaded after desktop-fixed.css, so the correction must live
   here. In Safari's desktop mode the viewport can be exactly 1280/1366px. */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container.container {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container .tt-detail-landscape-shell {
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-main {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-product-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .95fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: var(--tt-desktop-gap) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-media-column,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-info-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* iPad/tablet landscape: use the same launcher components before the home
 * launcher's 1180px desktop breakpoint becomes active. */
@media (min-width: 900px) and (max-device-width: 1179px) and (orientation: landscape) {
    body.tt-detail-page .tt-detail-landscape-search {
        display: none !important;
    }

    html body.tt-detail-page .main-header .tt-launcher-context-nav .tt-launcher-current-section,
    html body.tt-detail-page .main-header .tt-launcher-context-nav .tt-launcher-current-price {
        display: none !important;
    }

    .main-header .tt-launcher-context-nav {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-left: auto;
        margin-right: 8px;
    }

    html body.tt-detail-page .main-header .tt-launcher-context-nav {
        display: none !important;
    }

    /* When the tablet header hides search/context, keep the contact icons at
       the right edge instead of leaving every control cramped on the left. */
    html[data-layout="horizontal"] body.tt-detail-page .main-header .tt-launcher-header-inner {
        grid-template-columns: 130px 150px minmax(0, 1fr) 140px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .main-header .tt-launcher-header-quicklinks {
        grid-column: 4 !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        justify-self: end !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .main-header a.tt-spa-desktop-back {
        grid-column: 2 !important;
    }

    .main-header .tt-launcher-context-nav a,
    .main-header .tt-launcher-current-price {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        padding: 7px 10px;
        border: 1px solid rgba(34, 211, 238, .28);
        border-radius: 10px;
        background: #0a1a2b;
        color: #e2e8f0;
        font-size: 10px;
        font-weight: 900;
        text-decoration: none;
    }

    .main-header .tt-launcher-home-button {
        color: #facc15 !important;
    }

    .tt-detail-landscape-sidebar .tt-launcher-menu {
        display: grid !important;
        gap: 10px;
    }

    .tt-detail-landscape-sidebar .tt-launcher-menu-group,
    .tt-detail-landscape-sidebar .tt-right-panel {
        overflow: hidden;
        padding: 11px;
        border: 1px solid rgba(34, 211, 238, .17);
        border-radius: 14px;
        background: linear-gradient(145deg, #071725, #04101e);
        color: #dbeafe;
    }

    .tt-detail-landscape-sidebar .tt-launcher-menu-title,
    .tt-detail-landscape-sidebar .tt-right-panel-title {
        display: block;
        margin: 0 0 8px;
        color: #5ee7ff;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .tt-detail-landscape-sidebar .tt-launcher-menu-item,
    .tt-detail-landscape-sidebar .tt-launcher-price-item,
    .tt-detail-landscape-sidebar .tt-launcher-quick-support a {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        margin-top: 5px;
        padding: 7px 8px;
        border: 1px solid rgba(148, 163, 184, .12);
        border-radius: 8px;
        background: #0b1d2e;
        color: #dbeafe;
        font-size: 10px;
        font-weight: 800;
        text-decoration: none;
    }

    .tt-detail-landscape-sidebar .tt-launcher-menu-item.active {
        border-color: #22d3ee;
        background: rgba(14, 116, 144, .25);
        color: #67e8f9;
    }

    .tt-detail-landscape-sidebar .tt-launcher-menu-count {
        margin-left: auto;
        color: #22d3ee;
    }

    .tt-detail-landscape-sidebar .tt-launcher-price-custom {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-height: 34px;
        margin-top: 7px;
        border: 1px solid #67e8f9;
        border-radius: 9px;
        background: linear-gradient(135deg, #34d4f3, #0ea5e9);
        color: #03111f;
        font-size: 9px;
        font-weight: 900;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-custom-price:not([hidden]) {
        display: grid;
        gap: 5px;
        margin-top: 7px;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-money-input {
        display: flex;
        align-items: center;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 8px;
        background: #020617;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-money-input input {
        width: 100%;
        min-width: 0;
        padding: 7px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #f8fafc;
        font-size: 10px;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-money-input span {
        padding-right: 7px;
        color: #94a3b8;
        font-size: 8px;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-price-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-price-actions button {
        min-height: 30px;
        border: 0;
        border-radius: 8px;
        background: #16a34a;
        color: #fff;
        font-size: 9px;
        font-weight: 900;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-banner-viewport {
        position: relative;
        overflow: hidden;
        border-radius: 11px;
        background: #020617;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-banner-slide {
        display: none;
        margin: 0;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-banner-slide.is-active {
        display: block;
    }

    .tt-detail-landscape-sidebar .tt-sidebar-banner-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .tt-detail-landscape-sidebar .tt-commitment-list {
        display: grid;
        gap: 7px;
        margin: 0 0 12px;
        padding: 0;
        list-style: none;
        color: #cbd5e1;
        font-size: 9px;
    }

    .tt-detail-landscape-sidebar .tt-commitment-list i {
        margin-right: 5px;
        color: #22d3ee;
    }

    .tt-detail-landscape-sidebar .tt-right-support-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .tt-detail-landscape-sidebar .tt-right-support-links a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 6px 2px;
        border: 1px solid rgba(34, 211, 238, .18);
        border-radius: 8px;
        color: #e2e8f0;
        font-size: 7px;
        font-weight: 900;
        text-decoration: none;
    }

    .tt-detail-landscape-sidebar .tt-right-support-links img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }
}

/*
 * Khung desktop tĩnh: dùng device-width để Ctrl+/Ctrl- không làm layout
 * nhảy qua các breakpoint 1180/1400/1700. Zoom chỉ phóng/thu nguyên khung.
 * Tablet có chiều rộng vật lý nhỏ hơn vẫn dùng layout co giãn phía trên.
 */
@media (min-device-width: 1180px) and (orientation: landscape),
       (min-width: 900px) and (max-device-width: 1179px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page .detail-container {
        width: 1280px !important;
        min-width: 1280px !important;
        max-width: 1280px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 0 24px !important;
    }

    html[data-layout="horizontal"] .tt-detail-landscape-shell {
        grid-template-columns: 180px minmax(0, 1fr) 190px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 10px;
    }

    html[data-layout="horizontal"] .tt-landscape-product-top {
        grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr);
        gap: 14px;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        padding-right: 204px !important;
        padding-left: 194px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container .tt-related-card {
        flex-basis: calc((100% - 24px) / 3) !important;
        min-width: calc((100% - 24px) / 3) !important;
    }
}

/* LAST RULE: keep the 1280/1366 iPad detail canvas inside the viewport. */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container.container {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container .tt-detail-landscape-shell {
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-main,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-product-top {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-main {
        grid-column: 2 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-product-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .95fr) !important;
        gap: var(--tt-desktop-gap) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-landscape-media-column,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-info-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* FINAL DETAIL TWO-STATE CONTRACT. */
html[data-layout="horizontal"] body.tt-detail-page,
html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(100dvh - 58px) !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container,
html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell {
    display: grid !important;
    grid-template-columns: clamp(150px, 16vw, 230px) minmax(0, 1fr) clamp(160px, 17vw, 240px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: clamp(6px, .8vw, 12px) !important;
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: 1440px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
    transform: none !important;
}

/* Cancel every legacy centring offset. The shell is already centred by
   width/max-width + auto margins; an additional left:50vw/calc(...) shifts
   the whole product workspace to the right on ultrawide screens and SPA. */
html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page
#ttSpaContent > .detail-container > .tt-detail-landscape-shell {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: 1 / -1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page
#ttSpaContent > .detail-container > .tt-detail-landscape-shell
> .tt-detail-landscape-sidebar.tt-launcher-sidebar {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell > * { min-width: 0 !important; }
/* Keep the iPad detail shell on its single viewport row. Legacy sidebar rules
   used `grid-row: 1 / span 50`; Safari then creates implicit rows and reduces
   the centre product pane to roughly half height, leaving a black lower area. */
html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell > .tt-launcher-sidebar-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell > .tt-detail-landscape-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell > .tt-launcher-sidebar-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-main {
    grid-column: 2 !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-product-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .9fr) !important;
    gap: clamp(7px, .9vw, 12px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-product-top > *,
html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-media-column,
html[data-layout="horizontal"] body.tt-detail-page .tt-detail-info-card { min-width: 0 !important; max-width: 100% !important; }

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

html[data-layout="vertical"] body.tt-detail-page,
html[data-layout="vertical"] body.tt-detail-page #ttSpaContent,
html[data-layout="vertical"] body.tt-detail-page #ttSpaContent > .detail-container,
html[data-layout="vertical"] body.tt-detail-page .tt-detail-landscape-shell,
html[data-layout="vertical"] body.tt-detail-page .tt-detail-landscape-main,
html[data-layout="vertical"] body.tt-detail-page .tt-landscape-product-top {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

html[data-layout="vertical"] body.tt-detail-page .tt-detail-landscape-sidebar,
html[data-layout="vertical"] body.tt-detail-page .tt-launcher-sidebar-left,
html[data-layout="vertical"] body.tt-detail-page .tt-launcher-sidebar-right { display: none !important; }

/* Final tablet-header authority. At browser zoom/device emulation, legacy
   desktop rules otherwise stretch the quick-link grid across the empty final
   column or pack every header control against the logo. */
@media (min-width: 900px) and (max-width: 1179px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner {
        grid-template-columns: 130px 150px minmax(0, 1fr) 140px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-quicklinks {
        grid-column: 4 !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        justify-self: end !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
        grid-column: 2 !important;
    }
}

/* Product-detail header stays compact at every horizontal width and browser
   zoom level. Its content follows the same 1440px canvas as the page instead
   of stretching navigation buttons across an ultrawide viewport. */
html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner {
    width: min(calc(100% - 20px), 1440px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    grid-template-columns: 130px 150px minmax(0, 1fr) 140px !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-detail-landscape-search,
html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav {
    display: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
    grid-column: 2 !important;
    position: static !important;
    inset: auto !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-quicklinks {
    display: grid !important;
    grid-column: 4 !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    justify-self: end !important;
}

/* Exact home-header contract for product pages. The only substitution is the
   back action occupying the home search field's second grid column. */
html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner {
    grid-template-columns: clamp(145px, 14vw, 190px) minmax(230px, 330px) minmax(160px, 210px) minmax(0, 1fr) !important;
    gap: clamp(4px, .7vw, 10px) !important;
    width: calc(100% - 16px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-quicklinks {
    display: grid !important;
    grid-column: 3 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav {
    display: flex !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav > .tt-launcher-home-button,
html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav > .tt-launcher-current-section,
html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav > .tt-launcher-current-price:not([hidden]) {
    display: inline-flex !important;
}

html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav > .tt-launcher-current-price[hidden] {
    display: none !important;
}

/* At the iPad/contracted breakpoint, use the exact measured home-page tracks:
   logo 130, search slot 240, quick links 140, then contextual navigation. */
@media (min-width: 769px) and (max-width: 1179px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner {
        grid-template-columns: 130px 240px 140px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-quicklinks {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
}

/* Match the home header's medium-desktop contract (the common 1366px layout). */
@media (min-width: 1280px) and (max-width: 1366px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner {
        grid-template-columns: 130px 300px 140px minmax(420px, 1fr) !important;
        column-gap: clamp(6px, .55vw, 8px) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-quicklinks {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
}

/* Match the home header on large/zoomed-out desktop canvases. */
@media (min-width: 1367px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner {
        grid-template-columns: clamp(140px, 14vw, 210px) 300px clamp(190px, 18vw, 340px) clamp(370px, 34vw, 600px) !important;
        justify-content: space-between !important;
        column-gap: clamp(6px, .55vw, 10px) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-quicklinks {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Nút giải thích loại acc trên trang chi tiết. */
.tt-account-explain-box {
    box-sizing: border-box;
    min-width: 0;
}
.tt-account-explain-box .tt-account-explain-copy {
    min-width: 0;
    text-align: left !important;
}
.tt-account-explain-box.is-consignment {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
}
.tt-account-explain-box.is-consignment .tt-account-explain-copy {
    width: 100%;
}
.tt-account-explain-box.is-shop {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
}
.tt-account-explain-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid #fde047;
    border-radius: 10px;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    color: #1f2937 !important;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 7px 16px rgba(245, 158, 11, .24);
}
.tt-account-explain-btn:hover,
.tt-account-explain-btn:focus-visible {
    background: linear-gradient(135deg, #fef08a, #fbbf24);
    color: #111827 !important;
    transform: translateY(-1px);
}
@media (max-width: 560px) {
    .tt-account-explain-box.is-shop {
        flex-wrap: wrap;
    }
    .tt-account-explain-box.is-shop .tt-account-explain-btn {
        margin-left: auto;
    }
}

/* Thu gọn nút giải thích để vừa khung thông tin tài khoản. */
.tt-order-message.tt-account-explain-box.is-consignment {
    gap: 6px !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
}
.tt-order-message.tt-account-explain-box.is-consignment .tt-account-explain-btn,
.tt-shop-ready-line.tt-account-explain-box.is-shop .tt-account-explain-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, .22) !important;
}
.tt-shop-ready-line.tt-account-explain-box.is-shop {
    gap: 8px !important;
    padding: 8px 10px !important;
}

/* Acc ký gửi: hai dòng bên trái, nút giải thích cao bằng hai dòng bên phải. */
.tt-order-message.tt-account-explain-box.is-consignment {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
}
.tt-order-message.tt-account-explain-box.is-consignment .tt-account-explain-copy {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}
.tt-order-message.tt-account-explain-box.is-consignment .tt-account-explain-btn {
    align-self: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}