/* Giai đoạn 1: chỉ chuẩn hóa khung Desktop Launcher, không đổi logic nội dung. */
@media (min-device-width: 1180px) and (min-device-height: 700px) and (orientation: landscape) {
    .tt-launcher-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        background: rgba(2, 12, 22, .97) !important;
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(30, 180, 255, .18) !important;
    }

    .tt-launcher-header-inner {
        width: calc(100% - 28px) !important;
        max-width: 1920px !important;
        height: 100%;
        margin: 0 auto !important;
    }

    .tt-launcher-shell-phase1 {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) 250px !important;
        grid-auto-flow: row;
        column-gap: 12px !important;
        row-gap: 0 !important;
        align-items: start;
        width: calc(100% - 28px) !important;
        max-width: 1900px !important;
        margin: 12px auto 0 !important;
        padding: 0 0 20px !important;
    }

    .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left {
        position: sticky !important;
        top: 72px !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 86px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
    }

    .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        display: block !important;
        position: sticky !important;
        top: 72px !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: start;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 86px) !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
    }

    .tt-launcher-shell-phase1 > .tt-launcher-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left::-webkit-scrollbar,
    .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right::-webkit-scrollbar {
        display: none;
    }

    .tt-launcher-main > .profile-tactical {
        height: 320px !important;
        min-height: 300px !important;
        max-height: 325px !important;
    }

    .tt-launcher-main > .tt-home-live-panel {
        margin-top: 12px !important;
    }

    .tt-launcher-main > .tt-desktop-persistent-stats[hidden] {
        display: grid !important;
    }

    .tt-launcher-main > .tt-price-filter-panel {
        margin-top: 10px !important;
        margin-bottom: 12px !important;
    }

    .tt-launcher-main > #productGrid {
        margin-top: 0 !important;
    }

    /* Top ngày/tuần chỉ thuộc trang chủ. Không được ép phần tử hidden hiện
       trở lại trên Desktop Launcher. */
    .tt-launcher-main > .tt-launcher-top-grid[hidden] {
        display: none !important;
    }

    .site-footer {
        width: 100% !important;
        clear: both;
    }

    /* Header controls: compact, balanced and scoped to Desktop Launcher only. */
    .search-bar-unified.tt-search-after-stats {
        top: 10px !important;
        width: clamp(320px, 27vw, 500px) !important;
        min-width: 320px !important;
        max-width: 500px !important;
        height: 38px !important;
        border-radius: 9px !important;
        box-shadow: 0 0 0 1px rgba(59, 174, 238, .24), 0 8px 22px rgba(0, 0, 0, .2) !important;
    }

    .search-bar-unified.tt-search-after-stats .inp-search-unified {
        height: 38px !important;
        padding-inline: 14px !important;
        font-size: 12px !important;
        line-height: 38px !important;
    }

    .search-bar-unified.tt-search-after-stats .btn-search-unified {
        width: 100px !important;
        min-width: 100px !important;
        height: 38px !important;
        border-radius: 0 9px 9px 0 !important;
        font-size: 11px !important;
        letter-spacing: .15px;
        background: linear-gradient(135deg, #087cff, #12aef3) !important;
    }

    .tt-launcher-context-nav {
        gap: 8px !important;
    }

    .tt-launcher-home-button,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn {
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .05px;
        transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease !important;
    }

    .tt-launcher-home-button {
        padding-inline: 13px !important;
        color: #dceaff !important;
        border-color: rgba(73, 151, 211, .32) !important;
        background: linear-gradient(180deg, rgba(10, 31, 48, .96), rgba(5, 20, 34, .96)) !important;
    }

    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn {
        border-color: rgba(18, 194, 255, .62) !important;
        background: linear-gradient(135deg, rgba(0, 151, 224, .24), rgba(3, 73, 128, .18)) !important;
        box-shadow: inset 3px 0 0 #18c8ff, 0 0 18px rgba(0, 159, 232, .08) !important;
    }

    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn {
        color: #ffe29a !important;
        border-color: rgba(255, 173, 0, .48) !important;
        background: linear-gradient(135deg, rgba(255, 145, 0, .14), rgba(75, 45, 0, .14)) !important;
    }

    .tt-launcher-home-button:hover,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn:hover,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn:hover {
        color: #fff !important;
        border-color: rgba(77, 211, 255, .72) !important;
        box-shadow: 0 0 18px rgba(22, 174, 238, .16) !important;
    }

    .tt-right-panel {
        overflow: hidden;
        margin-bottom: 12px;
        border: 1px solid rgba(52, 167, 232, .2);
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(8, 27, 44, .97), rgba(3, 17, 29, .97));
        box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    }

    .tt-right-panel-title {
        margin: 0;
        padding: 12px 14px;
        color: #59c9ff;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        border-bottom: 1px solid rgba(52, 167, 232, .14);
        background: linear-gradient(90deg, rgba(12, 89, 133, .24), transparent 74%);
    }

    .tt-sidebar-banner-panel {
        padding: 6px !important;
        margin-bottom: 10px !important;
        border-color: rgba(165, 61, 255, .42) !important;
        background: linear-gradient(180deg, rgba(16, 10, 35, .98), rgba(3, 17, 29, .98)) !important;
        box-shadow: inset 0 0 0 1px rgba(111, 49, 214, .12), 0 0 22px rgba(132, 28, 255, .12) !important;
    }

    .tt-sidebar-banner-viewport {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        overflow: hidden;
        border: 1px solid rgba(177, 70, 255, .58);
        border-radius: 10px;
        background: radial-gradient(circle at 50% 18%, rgba(87, 32, 157, .38), transparent 44%), #030b17;
        box-shadow: inset 0 0 22px rgba(100, 31, 195, .2);
    }

    .tt-sidebar-banner-slide {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: auto;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(7%);
        transition: opacity .34s ease, transform .34s ease, visibility .34s ease;
    }

    .tt-sidebar-banner-slide.is-active {
        position: relative;
        inset: auto;
        z-index: 2;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .tt-sidebar-banner-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center top;
        background: transparent;
    }

    .tt-sidebar-banner-panel[data-banner-count="0"] .tt-sidebar-banner-viewport {
        min-height: 300px;
    }

    .tt-sidebar-banner-empty {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 18px;
        color: #8ca5ba;
        text-align: center;
        background: linear-gradient(180deg, rgba(15, 20, 46, .9), rgba(3, 14, 25, .96));
    }

    .tt-sidebar-banner-empty i {
        color: #a64cff;
        font-size: 38px;
        filter: drop-shadow(0 0 12px rgba(166, 76, 255, .45));
    }

    .tt-sidebar-banner-empty strong {
        color: #eef5ff;
        font-size: 14px;
        letter-spacing: .5px;
    }

    .tt-sidebar-banner-empty span {
        font-size: 11px;
    }

    .tt-sidebar-banner-empty a {
        padding: 7px 11px;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid rgba(49, 183, 255, .5);
        border-radius: 7px;
        background: rgba(0, 123, 206, .2);
    }

    .tt-sidebar-banner-arrow {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 30px;
        height: 42px;
        padding: 0;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .18);
        background: rgba(1, 8, 17, .7);
        transform: translateY(-50%);
        backdrop-filter: blur(7px);
    }

    .tt-sidebar-banner-arrow.is-prev {
        left: 5px;
        border-radius: 0 8px 8px 0;
    }

    .tt-sidebar-banner-arrow.is-next {
        right: 5px;
        border-radius: 8px 0 0 8px;
    }

    .tt-sidebar-banner-dots {
        position: absolute;
        right: 0;
        bottom: 10px;
        left: 0;
        z-index: 4;
        display: flex;
        justify-content: center;
        gap: 6px;
    }

    .tt-sidebar-banner-dots button {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .38);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
        transition: width .18s ease, background .18s ease;
    }

    .tt-sidebar-banner-dots button.is-active {
        width: 20px;
        background: #27c7ff;
        box-shadow: 0 0 10px rgba(39, 199, 255, .65);
    }

    .tt-featured-list {
        padding: 8px 10px 4px;
    }

    .tt-featured-item {
        position: relative;
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 10px;
        min-height: 78px;
        padding: 8px 0;
        color: #eef7ff;
        text-decoration: none;
        border-bottom: 1px solid rgba(99, 170, 214, .11);
    }

    .tt-featured-item:last-child {
        border-bottom: 0;
    }

    .tt-featured-item img {
        width: 76px;
        height: 72px;
        object-fit: cover;
        border-radius: 7px;
        border: 1px solid rgba(66, 178, 242, .2);
        background: #071522;
    }

    .tt-featured-picture {
        display: block;
        width: 76px;
        height: 72px;
    }

    .tt-top-picture {
        display: block;
        width: 100%;
    }

    .tt-launcher-top-grid .tt-top-picture,
    .tt-launcher-top-grid .tt-top-img {
        height: 120px !important;
    }

    .tt-featured-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding-right: 2px;
    }

    .tt-featured-copy strong {
        color: #f4f8fc;
        font-size: 12px;
        line-height: 1.1;
    }

    .tt-featured-copy span {
        display: -webkit-box;
        overflow: hidden;
        color: #d9e5ef;
        font-size: 11px;
        line-height: 1.25;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tt-featured-copy b {
        color: #ffd326;
        font-size: 13px;
        line-height: 1.1;
    }

    .tt-featured-item small {
        position: absolute;
        right: 0;
        bottom: 9px;
        color: #8095a6;
        font-size: 9px;
    }

    .tt-right-outline-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 34px;
        margin: 4px 10px 10px;
        color: #dcecff;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid rgba(54, 139, 255, .55);
        border-radius: 7px;
    }

    .tt-commitment-list {
        display: grid;
        gap: 7px;
        margin: 0;
        padding: 10px 12px 12px;
        list-style: none;
    }

    .tt-commitment-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #b9c7d2;
        font-size: 10px;
        font-weight: 500;
    }

    .tt-commitment-list i {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        color: #c5d3df;
        border: 1px solid rgba(176, 203, 222, .28);
        border-radius: 50%;
    }

    .tt-right-support-title {
        border-top: 1px solid rgba(52, 167, 232, .12);
    }

    .tt-right-support-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 9px 9px 11px;
    }

    .tt-right-support-links a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 5px 3px 4px;
        color: #e9f6ff;
        font-size: 9px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid rgba(34, 165, 237, .34);
        border-radius: 7px;
        background: rgba(12, 83, 128, .34);
    }

    .tt-right-support-links a:hover {
        border-color: rgba(35, 194, 255, .72);
        background: rgba(12, 105, 166, .48);
        transform: translateY(-1px);
    }

    .tt-right-support-links img {
        display: block;
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    .tt-right-support-links span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1;
        text-transform: uppercase;
    }

    .tt-right-empty {
        margin: 8px 0 12px;
        color: #8297a8;
        font-size: 11px;
        text-align: center;
    }

    /* Vietnamese-safe typography and shared Desktop Launcher button system. */
    :root {
        --tt-font-ui: "Inter", "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
        --tt-font-gaming: "Rajdhani", "Be Vietnam Pro", "Segoe UI", sans-serif;
        --tt-btn-h: 38px;
        --tt-btn-radius: 9px;
        --tt-btn-font: 12px;
        --tt-btn-gap: 7px;
    }

    body {
        font-family: var(--tt-font-ui) !important;
    }

    .tt-launcher-shell,
    .tt-launcher-header,
    .tt-launcher-sidebar,
    .tt-launcher-main,
    .site-footer {
        font-family: var(--tt-font-ui) !important;
        font-size: 14px;
        line-height: 1.4;
        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .tt-launcher-menu-title,
    .tt-right-panel-title,
    .tt-home-live-title,
    .tt-guide-menu-title,
    .tt-top-header h4 {
        font-family: "Be Vietnam Pro", "Inter", "Segoe UI", sans-serif !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        letter-spacing: .2px !important;
    }

    .tt-launcher-menu-title {
        font-size: 13px !important;
    }

    .tt-launcher-menu-item,
    .mode-tab {
        font-family: var(--tt-font-ui) !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

    .tt-launcher-price-item {
        min-height: 34px;
        display: flex;
        align-items: center;
        padding-inline: 10px !important;
        font-family: var(--tt-font-ui) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .product-title {
        font-family: var(--tt-font-ui) !important;
        font-size: 14px !important;
        line-height: 1.42 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

    .tt-top-title,
    .tt-featured-copy span,
    .tt-launcher-quick-support a,
    .tt-live-stat small,
    .tt-commitment-list li {
        font-family: var(--tt-font-ui) !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

    .tt-live-stat strong,
    .tt-vip-badge,
    .price-tag {
        font-family: var(--tt-font-gaming) !important;
    }

    .tt-launcher-home-button,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn,
    .main-header .btn-outline-warning {
        min-height: var(--tt-btn-h) !important;
        height: var(--tt-btn-h) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--tt-btn-gap) !important;
        padding: 0 14px !important;
        border-radius: var(--tt-btn-radius) !important;
        font-family: var(--tt-font-ui) !important;
        font-size: var(--tt-btn-font) !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        text-transform: none !important;
    }

    .tt-launcher-home-button,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatText,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceText {
        font-family: "Be Vietnam Pro", "Inter", "Segoe UI", Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        font-synthesis: none;
        text-transform: none !important;
        text-rendering: optimizeLegibility;
    }

    .tt-launcher-home-button > i,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn > i,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn > i {
        color: #e7f8ff !important;
        font-family: "Phosphor" !important;
        font-size: 14px !important;
        font-weight: normal !important;
        line-height: 1 !important;
    }

    .btn-tactical {
        height: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 0 13px !important;
        border-radius: 9px !important;
        font-family: var(--tt-font-ui) !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }

    .btn-price-flat,
    .tt-filter-choice,
    .tt-launcher-price-custom {
        height: 34px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 9px !important;
        font-family: var(--tt-font-ui) !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        text-transform: none !important;
    }

    .tt-launcher-price-custom {
        padding-inline: 10px !important;
    }

    .btn-detail,
    .btn-copy-code,
    .tt-custom-price-actions button,
    .tt-right-support-links a,
    .tt-right-outline-link {
        font-family: var(--tt-font-ui) !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    .btn-admin-circle,
    .admin-action-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: inline-grid !important;
        place-items: center !important;
        padding: 0 !important;
        border-radius: 50% !important;
        line-height: 1 !important;
    }

    /* Keep the complete desktop header together while the SPA content scrolls. */
    body {
        padding-top: 58px !important;
    }

    .main-header,
    .tt-launcher-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 9000 !important;
    }

    .search-bar-unified.tt-search-after-stats,
    .tt-launcher-context-nav > #ttFloatFilter.tt-float-filter {
        z-index: 9010 !important;
    }

    .tt-launcher-main {
        position: relative;
        z-index: auto;
    }

    /* Pagination must remain clickable, but never sit above menus or dialogs. */
    html body .pagination-container-modern {
        z-index: 20 !important;
    }

    html body .pagination-container-modern .pagi-dropdown {
        z-index: 30 !important;
    }

    .swal2-container {
        z-index: 20000 !important;
    }

    html body.swal2-shown .pagination-container-modern {
        z-index: 0 !important;
    }

    .tt-admin-announcement,
    .tt-admin-announcement-window,
    .tt-live-ticker,
    .tt-live-ticker-window {
        overflow: hidden !important;
        isolation: isolate;
    }
}

/* Desktop header: reuse the mobile quick-contact destinations in the space
   immediately after search. Mobile/portrait keeps its original bottom bar. */
@media (min-device-width: 1180px) and (min-device-height: 700px) and (orientation: landscape) {
    .main-header .container.tt-launcher-header-inner {
        grid-template-columns:
            var(--launcher-sidebar-width)
            clamp(320px, 22vw, 420px)
            232px
            minmax(0, 1fr)
            auto !important;
        column-gap: 8px !important;
    }

    .search-bar-unified.tt-search-after-stats {
        width: clamp(320px, 22vw, 420px) !important;
        min-width: 320px !important;
        max-width: 420px !important;
    }

    .tt-launcher-header-quicklinks {
        grid-column: 3;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 232px;
        min-width: 0;
        height: 42px;
    }

    .tt-launcher-header-quicklinks a {
        display: inline-flex;
        flex: 0 0 50px;
        width: 50px;
        height: 42px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        overflow: hidden;
        border: 1px solid rgba(43, 177, 239, .18);
        border-radius: 9px;
        color: #ddecf8;
        background: rgba(5, 22, 36, .74);
        text-decoration: none;
        transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .tt-launcher-header-quicklinks a:hover {
        color: #fff;
        border-color: rgba(46, 202, 255, .58);
        background: rgba(12, 67, 98, .72);
        transform: translateY(-1px);
    }

    .tt-launcher-header-quicklinks img {
        display: block;
        width: 26px;
        height: 26px;
        margin: 0;
        object-fit: contain;
    }

    .tt-launcher-header-quicklinks span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-family: "Be Vietnam Pro", "Inter", "Segoe UI", Arial, sans-serif;
        font-size: 7px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .tt-launcher-context-nav {
        grid-column: 4 !important;
        justify-self: start;
    }

    .main-header .container > a:last-child {
        grid-column: 5 !important;
    }
}

@media (width: 0px) {
    .main-header .container > a:last-child {
        display: none !important;
    }

    .main-header .container.tt-launcher-header-inner {
        grid-template-columns:
            var(--launcher-sidebar-width)
            clamp(320px, 22vw, 380px)
            176px
            minmax(0, 1fr) !important;
    }

    .search-bar-unified.tt-search-after-stats {
        width: clamp(320px, 22vw, 380px) !important;
        max-width: 380px !important;
    }

    .tt-launcher-header-quicklinks {
        width: 176px;
        gap: 6px;
    }

    .tt-launcher-header-quicklinks a {
        flex-basis: 40px;
        width: 40px;
    }

    .tt-launcher-header-quicklinks img {
        width: 25px;
        height: 25px;
    }

    .tt-launcher-header-quicklinks span {
        display: none;
    }
}

@media (width: 0px) {
    .tt-launcher-shell-phase1 {
        grid-template-columns: 180px minmax(0, 1fr) 190px !important;
        gap: 10px !important;
    }

    .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        display: block !important;
    }

    #productGrid > .feed-item-scroll {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
    }
}

@media (width: 0px) {
    .tt-launcher-shell-phase1 {
        grid-template-columns: 205px minmax(0, 1fr) 220px !important;
        gap: 12px !important;
    }
}

@media (width: 0px) {
    .tt-launcher-shell-phase1 {
        grid-template-columns: 220px minmax(0, 1fr) 250px !important;
        gap: 14px !important;
    }
}

@media (width: 0px) {
    #productGrid > .feed-item-scroll {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
    }
}

/* Product cards use the same cyan frame in both responsive modes. */
#productGrid .product-card {
    border: 1px solid rgba(28, 200, 255, .42) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 180, .06), 0 10px 24px rgba(0, 0, 0, .16) !important;
}

#productGrid .product-card:hover {
    border-color: rgba(36, 218, 255, .72) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22), 0 0 16px rgba(24, 200, 255, .12) !important;
}

#productGrid .product-card .tt-vip-badge,
#productGrid .product-card .vip-badge {
    width: max-content !important;
    max-width: 110px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 235, 145, .9) !important;
    border-radius: 999px !important;
    color: #342100 !important;
    background: linear-gradient(135deg, #ffe879, #ffb300) !important;
    font-size: 10px !important;
    line-height: 22px !important;
    font-weight: 800 !important;
}

#productGrid .product-card .product-price,
#productGrid .product-card .contact-price,
#productGrid .product-card .price-tag {
    color: #ff654f !important;
}

/* Portrait and compact landscape keep the established mobile shell, one card per row. */
@media (orientation: portrait) {
    .tt-launcher-sidebar-left {
        display: contents !important;
    }

    .tt-launcher-sidebar-left > .tt-launcher-only {
        display: none !important;
    }

    .tt-launcher-sidebar-left > .mode-tabs,
    .tt-launcher-sidebar-left > .grid-category {
        display: grid !important;
    }

    .tt-launcher-sidebar-right {
        display: none !important;
    }

    .tt-launcher-shell,
    .tt-launcher-shell-phase1 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    .tt-launcher-main {
        width: 100% !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    #productGrid {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-inline: auto !important;
    }

    #productGrid > .feed-item-scroll {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        left: 0 !important;
        margin: 0 0 16px !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
    }

    #productGrid .product-card {
        width: 100% !important;
        max-width: none !important;
        border-radius: 16px !important;
    }

    #productGrid .product-thumb-box {
        width: 100% !important;
        height: auto !important;
        /* Keep every media slot equal while the original image stays full-width.
           The tallest current product artwork is about 1.121:1, so 28:25
           prevents cropping and leaves intentional empty space for shorter art. */
        aspect-ratio: 28 / 25;
        overflow: hidden;
    }

    #productGrid .product-body {
        min-height: 0 !important;
        padding: 12px 14px !important;
    }

    #productGrid .product-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2;
    }
}

@media (orientation: portrait) {
    .tt-portrait-content,
    .tt-launcher-main,
    #productGrid {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #productGrid .product-card > a.tt-spa-link {
        display: block !important;
        width: 100% !important;
    }

    #productGrid .product-thumb-box {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        background: none !important;
    }

    #productGrid .product-thumb {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        object-fit: unset !important;
        object-position: center !important;
        transform: none !important;
    }
}

/* Desktop Launcher has one definitive product width: four equal columns. */
@media (min-device-width: 1180px) and (min-device-height: 700px) and (orientation: landscape) {
    #ttPriceFilterPanel_main .grid-price.theme-sell {
        grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)) !important;
        grid-auto-flow: row !important;
    }

    #ttPriceFilterPanel_main .grid-price.theme-sell > .tt-custom-price-open,
    .tt-launcher-sidebar-left .tt-launcher-price-custom {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #03131e !important;
        border-color: rgba(126, 235, 255, .95) !important;
        background: linear-gradient(135deg, #5ee7ff, #11bdf4 58%, #0798df) !important;
        box-shadow: 0 0 0 1px rgba(32, 202, 255, .22), 0 0 18px rgba(19, 196, 255, .28) !important;
        font-weight: 800 !important;
    }

    #ttPriceFilterPanel_main .grid-price.theme-sell > .tt-custom-price-open i,
    .tt-launcher-sidebar-left .tt-launcher-price-custom i {
        color: #03131e !important;
        font-size: 14px !important;
    }

    #ttPriceFilterPanel_main .grid-price.theme-sell > .tt-custom-price-open:hover,
    .tt-launcher-sidebar-left .tt-launcher-price-custom:hover {
        color: #001019 !important;
        border-color: #d9f9ff !important;
        background: linear-gradient(135deg, #8ff0ff, #35d1ff 58%, #0bacef) !important;
        box-shadow: 0 0 0 2px rgba(61, 218, 255, .22), 0 0 24px rgba(19, 196, 255, .42) !important;
        transform: translateY(-1px);
    }

    .tt-sidebar-custom-price {
        display: grid;
        gap: 6px;
        width: 100%;
        margin-top: 8px;
        padding: 9px;
        border: 1px solid rgba(35, 202, 255, .34);
        border-radius: 10px;
        background: rgba(3, 15, 27, .96);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    }

    .tt-launcher-sidebar-left .tt-launcher-price-item.active,
    #ttPriceFilterPanel_main .grid-price.theme-sell > .btn-price-flat.active {
        color: #f4fcff !important;
        border-color: rgba(35, 211, 255, .82) !important;
        background: rgba(12, 151, 210, .18) !important;
        box-shadow: inset 3px 0 0 #20d5ff, 0 0 14px rgba(24, 200, 255, .12) !important;
        font-weight: 700 !important;
    }

    .tt-launcher-sidebar-left .tt-launcher-price-item.active {
        position: relative;
        padding-right: 38px !important;
    }

    .tt-launcher-sidebar-left .tt-launcher-price-item.active::after {
        content: "✓";
        position: absolute;
        top: 50%;
        right: 9px;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
        border: 1px solid rgba(255, 255, 255, .9);
        border-radius: 50%;
        color: #05658a;
        background: #f4fcff;
        box-shadow: 0 0 12px rgba(48, 214, 255, .28);
        font-family: "Be Vietnam Pro", "Inter", sans-serif;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
    }

    .tt-sidebar-custom-price[hidden] {
        display: none !important;
    }

    .tt-sidebar-custom-price label {
        margin: 0;
        color: #8bdfff;
        font-size: 10px;
        line-height: 1.2;
        font-weight: 700;
    }

    .tt-sidebar-money-input {
        position: relative;
        min-width: 0;
    }

    .tt-sidebar-money-input input {
        width: 100%;
        height: 34px;
        padding: 0 38px 0 9px;
        border: 1px solid rgba(75, 151, 205, .28);
        border-radius: 8px;
        outline: 0;
        color: #eef9ff;
        background: #061321;
        font-family: var(--tt-font-ui);
        font-size: 11px;
    }

    .tt-sidebar-money-input input:focus {
        border-color: rgba(42, 210, 255, .72);
        box-shadow: 0 0 0 2px rgba(32, 199, 255, .1);
    }

    .tt-sidebar-money-input span {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        color: #7f94a5;
        font-size: 8px;
        font-weight: 700;
        pointer-events: none;
    }

    .tt-sidebar-price-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 2px;
    }

    .tt-sidebar-price-actions button {
        min-width: 0;
        height: 32px;
        padding: 0 4px;
        border: 1px solid rgba(50, 204, 255, .34);
        border-radius: 8px;
        color: #eafaff;
        background: rgba(9, 54, 80, .86);
        font-family: var(--tt-font-ui);
        font-size: 9px;
        line-height: 1;
        font-weight: 700;
    }

    .tt-sidebar-price-actions button:first-child {
        color: #03131e;
        border-color: rgba(126, 235, 255, .9);
        background: linear-gradient(135deg, #5ee7ff, #11bdf4);
    }

    #productGrid {
        width: 100% !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #productGrid > .feed-item-scroll {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
        margin: 0 !important;
        padding: 0 7px 16px !important;
        box-sizing: border-box !important;
    }

    #productGrid .product-card {
        width: 100% !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 14px !important;
    }

    #productGrid .product-thumb-box {
        width: 100% !important;
        height: auto !important;
        /* Equal slots, full-width originals, and no crop for current artwork. */
        aspect-ratio: 28 / 25 !important;
        overflow: hidden;
    }

    #productGrid .product-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 126px !important;
        padding: 11px 12px !important;
    }

    #productGrid .product-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    #productGrid .product-actions,
    #productGrid .product-meta {
        margin-top: auto;
    }
}

/* Vietnamese uppercase needs extra line-box room for tone marks. */
@media (min-device-width: 1180px) and (min-device-height: 700px) and (orientation: landscape) {
    .tt-launcher-home-button,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatBtn,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceBtn,
    .tt-launcher-context-nav > #ttFloatFilter #ttCatText,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceText {
        line-height: 1.35 !important;
    }

    .tt-launcher-context-nav > #ttFloatFilter .tt-filter-split.grid-category {
        grid-template-columns: minmax(130px, .9fr) minmax(165px, 1.1fr) !important;
    }

    .tt-launcher-context-nav > #ttFloatFilter #ttCatText,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceText {
        padding-block: 2px;
    }

    /* Keep both Vietnamese context labels fully visible in the desktop header. */
    .tt-launcher-context-nav > #ttFloatFilter.tt-float-filter {
        flex-basis: 330px;
        min-width: 330px !important;
        max-width: 340px !important;
    }

    .tt-launcher-context-nav > #ttFloatFilter .tt-filter-split.grid-category {
        grid-template-columns: minmax(150px, .95fr) minmax(170px, 1.05fr) !important;
    }

    .tt-launcher-context-nav > #ttFloatFilter #ttCatText,
    .tt-launcher-context-nav > #ttFloatFilter #ttPriceText {
        text-overflow: clip;
    }
}

@media (width: 0px) {
    .main-header .container.tt-launcher-header-inner {
        grid-template-columns:
            var(--launcher-sidebar-width)
            300px
            160px
            minmax(0, 1fr) !important;
    }

    .search-bar-unified.tt-search-after-stats {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    .tt-launcher-header-quicklinks {
        width: 160px;
        gap: 4px;
    }

    .tt-launcher-header-quicklinks a {
        flex-basis: 37px;
        width: 37px;
    }
}

/* Portrait/mobile: keep a stable one-column document flow. Masonry is disabled
   by ttReflowProductGrid() in this mode; these rules also neutralize stale
   inline coordinates restored from SPA/browser cache. */
@media (orientation: portrait) {
    #productGrid {
        display: block !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #productGrid > .feed-item-scroll {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #productGrid .product-thumb-box {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    #productGrid .product-thumb {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: center top !important;
    }
}

/* Product listing only: two wide cards per row on Desktop Launcher. */
@media (min-device-width: 1180px) and (min-device-height: 700px) and (orientation: landscape) {
    #productGrid > .feed-item-scroll {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    #productGrid .product-thumb-box {
        width: 100% !important;
        height: auto !important;
        /* Equal slots, full-width originals, and no crop for current artwork. */
        aspect-ratio: 28 / 25 !important;
        overflow: hidden !important;
    }

    #productGrid .product-thumb {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: center top !important;
    }
}
/* Modal quản trị được đưa ra ngoài vùng SPA. Luôn giữ nó ẩn nếu trang chủ
   vừa bị thay thế và CSS nội tuyến của trang chủ chưa/không còn tồn tại. */
#ttAnnouncementModal:not(.show) {
    display: none !important;
}

/* TABLET LANDSCAPE / COMPACT DESKTOP: 900px–1439px.
   This block is deliberately last so old device-width queries cannot turn
   the three-column shell into a mixed mobile/desktop layout. */
@media (min-width: 900px) and (max-width: 1439px) and (orientation: landscape) {
    :root { --tt-header-height: 58px; }

    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header {
        position: sticky !important;
        inset: 0 0 auto !important;
        z-index: 1200 !important;
        width: 100% !important;
        height: var(--tt-header-height) !important;
        min-height: var(--tt-header-height) !important;
        max-height: var(--tt-header-height) !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-inner {
        display: grid !important;
        grid-template-columns: clamp(112px, 14vw, 180px) minmax(170px, 1fr) auto auto !important;
        align-items: center !important;
        gap: clamp(4px, .65vw, 9px) !important;
        width: calc(100% - 16px) !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-inner > * { min-width: 0 !important; }
    html[data-layout="horizontal"] .main-header .logo-text {
        gap: 5px !important;
        font-size: clamp(15px, 1.65vw, 21px) !important;
        white-space: nowrap !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats {
        display: flex !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
        margin: 0 !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] .search-bar-unified .inp-search-unified {
        min-width: 0 !important;
        padding-inline: 10px !important;
        font-size: clamp(11px, 1.15vw, 14px) !important;
    }

    html[data-layout="horizontal"] .search-bar-unified .btn-search-unified {
        flex: 0 0 clamp(72px, 9vw, 108px) !important;
        width: clamp(72px, 9vw, 108px) !important;
        min-width: 0 !important;
        padding: 0 7px !important;
        font-size: clamp(10px, 1vw, 13px) !important;
        white-space: nowrap !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 3px !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks a {
        flex: 0 0 clamp(32px, 3.6vw, 42px) !important;
        width: clamp(32px, 3.6vw, 42px) !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 3px !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks span { display: none !important; }

    html[data-layout="horizontal"] .tt-launcher-context-nav {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav > a,
    html[data-layout="horizontal"] .tt-launcher-context-nav > button,
    html[data-layout="horizontal"] .tt-launcher-context-nav > span {
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 clamp(6px, .8vw, 11px) !important;
        gap: 4px !important;
        font-size: clamp(9px, .95vw, 12px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html[data-layout="horizontal"] .tt-launcher-shell,
    html[data-layout="horizontal"] .tt-launcher-shell-phase1 {
        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;
        column-gap: clamp(6px, .8vw, 10px) !important;
        align-items: stretch !important;
        width: calc(100% - 16px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: calc(100dvh - var(--tt-header-height)) !important;
        margin: 0 auto !important;
        padding: 8px 0 !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > * { min-width: 0 !important; }

    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left,
    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        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"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left { grid-column: 1 !important; }
    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right { grid-column: 3 !important; }
    html[data-layout="horizontal"] .tt-launcher-sidebar-left::-webkit-scrollbar,
    html[data-layout="horizontal"] .tt-launcher-sidebar-right::-webkit-scrollbar { display: none !important; }

    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-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;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] .tt-launcher-sidebar-left .tt-launcher-only,
    html[data-layout="horizontal"] .tt-launcher-sidebar-left .tt-launcher-menu,
    html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-launcher-only {
        display: block !important;
    }

    html[data-layout="horizontal"] .tt-launcher-sidebar-left a,
    html[data-layout="horizontal"] .tt-launcher-sidebar-left button,
    html[data-layout="horizontal"] .tt-launcher-sidebar-right a,
    html[data-layout="horizontal"] .tt-launcher-sidebar-right button {
        min-width: 0 !important;
        padding: clamp(6px, .8vw, 10px) !important;
        font-size: clamp(9px, 1vw, 12px) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    html[data-layout="horizontal"] .tt-launcher-sidebar-right img,
    html[data-layout="horizontal"] .tt-sidebar-banner-slide img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

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

/* FINAL TWO-STATE RESPONSIVE CONTRACT. No breakpoint or device detection. */
html.is-layout-changing *,
html.is-layout-changing *::before,
html.is-layout-changing *::after {
    transition: none !important;
    animation: none !important;
}

html[data-layout="horizontal"],
html[data-layout="horizontal"] body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .tt-launcher-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .tt-launcher-header-inner {
    display: grid !important;
    grid-template-columns: clamp(145px, 14vw, 190px) minmax(230px, 330px) minmax(160px, 210px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(4px, .7vw, 10px) !important;
    width: calc(100% - 16px) !important;
    max-width: 1440px !important;
    height: 58px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .tt-launcher-header-inner > * { min-width: 0 !important; }
html[data-layout="horizontal"] .main-header .logo-text {
    font-size: clamp(14px, 1.6vw, 23px) !important;
    white-space: nowrap !important;
}

html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
}

html[data-layout="horizontal"] .search-bar-unified .inp-search-unified { min-width: 0 !important; }
html[data-layout="horizontal"] .search-bar-unified .btn-search-unified {
    flex: 0 0 clamp(68px, 8vw, 106px) !important;
    width: clamp(68px, 8vw, 106px) !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    font-size: clamp(9px, 1vw, 13px) !important;
    white-space: nowrap !important;
}

html[data-layout="horizontal"] .tt-launcher-header-quicklinks {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: clamp(4px, .55vw, 8px) !important;
}

html[data-layout="horizontal"] .tt-launcher-header-quicklinks a {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 3px !important;
}

.tt-cover-portrait { display: none; }
html[data-layout="horizontal"] .tt-cover-landscape { display: block !important; }
html[data-layout="horizontal"] .tt-cover-portrait { display: none !important; }
html[data-layout="vertical"] .tt-cover-landscape,
html[data-layout="vertical"] .tt-cover-arrow,
html[data-layout="vertical"] .tt-cover-dots { display: none !important; }
html[data-layout="vertical"] .tt-cover-portrait {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

html[data-layout="horizontal"] .tt-launcher-header-quicklinks img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}
html[data-layout="horizontal"] .tt-launcher-header-quicklinks span { display: none !important; }

html[data-layout="horizontal"] .tt-launcher-context-nav {
    display: flex !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 4px !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .tt-launcher-context-nav > * {
    min-width: 0 !important;
    height: 38px !important;
    padding-inline: clamp(5px, .8vw, 11px) !important;
    font-size: clamp(9px, .9vw, 12px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-layout="horizontal"] .tt-launcher-shell,
html[data-layout="horizontal"] .tt-launcher-shell-phase1 {
    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: calc(100dvh - 58px) !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .tt-launcher-shell-phase1 > * { min-width: 0 !important; }
html[data-layout="horizontal"] .tt-launcher-sidebar-left,
html[data-layout="horizontal"] .tt-launcher-sidebar-right {
    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"] .tt-launcher-sidebar-left { grid-column: 1 !important; }
html[data-layout="horizontal"] .tt-launcher-sidebar-right { grid-column: 3 !important; }
html[data-layout="horizontal"] .tt-launcher-sidebar-left::-webkit-scrollbar,
html[data-layout="horizontal"] .tt-launcher-sidebar-right::-webkit-scrollbar { display: none !important; }

html[data-layout="horizontal"] .tt-launcher-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;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-left a,
html[data-layout="horizontal"] .tt-launcher-sidebar-left button,
html[data-layout="horizontal"] .tt-launcher-sidebar-right a,
html[data-layout="horizontal"] .tt-launcher-sidebar-right button {
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right img,
html[data-layout="horizontal"] .tt-sidebar-banner-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

html[data-layout="horizontal"] .mobile-bottom-nav,
html[data-layout="horizontal"] .bottom-nav,
html[data-layout="horizontal"] .mobile-nav-bar,
html[data-layout="horizontal"] .tt-mobile-bottom-nav,
html[data-layout="horizontal"] .mobile-drawer,
html[data-layout="horizontal"] .drawer-mobile,
html[data-layout="horizontal"] .floating-contact-wrap {
    display: none !important;
}

/* Never keep the mobile category controls beside the desktop launcher menu. */
html[data-layout="horizontal"] .tt-launcher-sidebar-left > .mode-tabs,
html[data-layout="horizontal"] .tt-launcher-sidebar-left > .grid-category {
    display: none !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-left > .tt-launcher-only,
html[data-layout="horizontal"] .tt-launcher-sidebar-right > .tt-launcher-only {
    display: block !important;
}

/* Horizontal essentials are declared here as the last line of defence, so a
   stale portrait rule cannot hide the center panels or enlarge right-rail UI. */
html[data-layout="horizontal"] .tt-launcher-main > .tt-home-live-panel {
    display: grid !important;
}

html[data-layout="horizontal"] .tt-launcher-main > .tt-price-filter-panel,
html[data-layout="horizontal"] .tt-launcher-main > #productGrid {
    display: block !important;
}

/* Product listing must remain in normal document flow. This final rule
   deliberately replaces legacy Bootstrap floats/Masonry coordinates so the
   grid height always follows its cards after resize and orientation changes. */
html[data-layout="horizontal"] .tt-launcher-main > #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 14px !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

html[data-layout="horizontal"] .tt-launcher-main > #productGrid > .feed-item-scroll {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-right-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(30, 180, 255, .18) !important;
    border-radius: 12px !important;
    background: #061625 !important;
    box-sizing: border-box !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-right-panel-title {
    margin: 0 !important;
    padding: 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #43d6ff !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-commitment-list {
    margin: 0 !important;
    padding: 10px 12px !important;
    list-style: none !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-commitment-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    margin: 0 0 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-right-support-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 10px !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-right-support-links a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 7px 3px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .tt-launcher-sidebar-right .tt-right-support-links img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

/* Compact horizontal: keep all four statistics readable inside the center column. */
@media (max-width: 1150px) and (orientation: landscape) {
    html[data-layout="horizontal"] .tt-home-live-grid {
        gap: 6px !important;
    }

    html[data-layout="horizontal"] .tt-live-stat {
        grid-template-columns: 27px minmax(0, 1fr) !important;
        column-gap: 5px !important;
        padding: 8px 6px !important;
    }

    html[data-layout="horizontal"] .tt-live-stat .tt-live-icon {
        width: 25px !important;
        height: 25px !important;
    }

    html[data-layout="horizontal"] .tt-home-live-panel .tt-live-stat > strong {
        font-size: 18px !important;
    }

    html[data-layout="horizontal"] .tt-home-live-panel .tt-live-stat > small {
        width: 100% !important;
        font-size: 9px !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

html[data-layout="vertical"],
html[data-layout="vertical"] body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

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

html[data-layout="vertical"] .tt-launcher-shell,
html[data-layout="vertical"] .tt-launcher-shell-phase1,
html[data-layout="vertical"] .tt-launcher-main,
html[data-layout="vertical"] #productGrid {
    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"] #productGrid > .feed-item-scroll {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
}

/* Horizontal recovery is state-driven, never viewport-breakpoint-driven. */
    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::before {
        grid-column: 1 / -1 !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;
    }

html[data-layout="horizontal"] .vertical-only,
html[data-layout="vertical"] .horizontal-only {
    display: none !important;
}