/*
 * Responsive layer loaded after the theme styles.
 * Breakpoints: mobile < 768px, tablet 768-1199px, desktop >= 1200px.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

@supports (overflow: clip) {
    body {
        overflow-x: clip;
    }
}

img,
video,
iframe,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.row,
.col,
.container,
.container-width,
.section-content {
    min-width: 0;
}

/* Search overlay and shared header elements. */
.top-popup-content {
    width: min(100%, 1200px);
}

.autocomplete-suggestions {
    width: 100%;
    max-height: min(420px, calc(100dvh - 96px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ldp_hero_section .btn-primary {
    max-width: 300px;
}

/* Home category mosaic. */
@media (max-width: 1023px) {
    .parent.category-grid {
        width: min(calc(100% - 32px), 960px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .parent.category-grid>.category-item {
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .parent.category-grid .category-item img {
        height: clamp(220px, 34vw, 320px);
        border-width: 4px;
        border-radius: 28px !important;
    }

    .parent.category-grid .category-item h3 {
        right: auto !important;
        bottom: 16px !important;
        left: 16px !important;
        max-width: calc(100% - 32px);
        padding: 9px 18px;
        border-width: 3px;
        white-space: normal;
    }

    .category-section .icon-button,
    .video-section .icon-button-logo {
        transform: translate(-50%, -7%) scale(.82);
    }
}

/* Main homepage hero. */
@media (max-width: 1199px) {
    #hero-section {
        min-height: min(780px, calc(100svh - 72px));
        padding: 80px 0 36px;
    }

    #hero-section .hs-inner,
    #hero-section .hs-tabs-wrap {
        width: min(calc(100% - 40px), 960px);
    }

    #hero-section .hs-left {
        gap: 22px;
    }

    #hero-section .hs-tabs-wrap {
        margin-top: 36px;
        padding-inline: 0;
    }
}

@media (max-width: 767px) {
    #hero-section {
        min-height: auto;
        padding: clamp(56px, 12vw, 76px) 0 28px;
    }

    #hero-section .hs-inner,
    #hero-section .hs-tabs-wrap {
        width: min(calc(100% - 24px), 640px);
    }

    #hero-section .hs-left {
        gap: 18px;
    }

    #hero-section .hs-h1 {
        font-size: clamp(28px, 9vw, 38px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    #hero-section .hs-promo-card {
        gap: 12px;
    }

    #hero-section .hs-cta-row,
    #hero-section .hs-cta-row a {
        width: 100%;
    }

    #hero-section .hs-cta-row a {
        justify-content: center;
    }

    #hero-section .hs-arrows {
        display: none;
    }

    #hero-section .hs-tabs-wrap {
        margin-top: 28px;
    }

    #hero-section .hs-tabs {
        gap: 8px;
        padding-top: 16px;
    }
}

/* Blog archive. */
@media (max-width: 767px) {
    .post_card_horizontal {
        margin-bottom: 22px;
        border-radius: 14px;
    }

    .post_card_horizontal .post_featured {
        aspect-ratio: 16 / 10;
    }

    .post_card_horizontal .post_content_wrap {
        padding: 20px;
    }

    .post_card_horizontal .post_title {
        margin-bottom: 12px;
        font-size: clamp(20px, 6vw, 24px);
    }

    .post_card_horizontal .entry-content {
        margin-bottom: 16px;
        font-size: 15px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 32px;
    }

    .pagination .page-numbers {
        width: 40px;
        height: 40px;
    }
}

/* WooCommerce product detail and custom catalogue blocks. */
.ta-size-table,
.box_banggia .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
    .ta-trust-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .ta-outfit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ta-product-grid-row,
    .wks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ta-promo-banner-content {
        flex-wrap: wrap;
    }

    .ta-promo-banner-text {
        min-width: min(420px, 100%);
    }

    .wks-sidebar {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .single-product .product-main {
        padding-top: 24px;
    }

    .single-product .product-info {
        padding-top: 20px;
    }

    .ta-actions {
        flex-wrap: wrap;
    }

    .ta-btn-cart,
    .ta-btn-buy {
        flex: 1 1 calc(50% - 5px);
        min-width: 145px;
    }

    .ta-trust {
        padding-block: 24px;
    }

    .ta-trust-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .ta-trust-item {
        min-width: 0;
    }

    .ta-trust-text strong {
        font-size: 16px;
    }

    .ta-section-title {
        font-size: 22px;
    }

    .ta-outfit-grid,
    .ta-product-grid-row,
    .wks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ta-slider-prev {
        left: 4px;
    }

    .ta-slider-next {
        right: 4px;
    }

    .ta-promo-banner-inner {
        padding-inline: 16px;
    }

    .ta-promo-banner-content {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .ta-promo-banner-left {
        width: 72px;
        height: 64px;
    }

    .ta-promo-banner-badges {
        justify-content: flex-start;
    }

    .ta-promo-banner-btn {
        min-height: 44px;
        justify-content: center;
    }

    .ta-product-card-name,
    .ta-product-card-price {
        font-size: 15px;
    }

    .wks-toolbar,
    .wks-toolbar__left,
    .wks-toolbar__right {
        width: 100%;
        align-items: stretch;
    }

    .wks-toolbar__right {
        justify-content: space-between;
    }

    .wks-sortby {
        min-width: 0;
        flex: 1;
    }

    .wks-sortby select {
        min-width: 0;
        width: 100%;
    }

    .wks-card__body {
        padding: 10px;
    }

    .wks-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wks-card__addbtn,
    .wks-card__quickview {
        width: 100%;
        min-height: 40px;
    }

    .wks-pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 374px) {

    .ta-outfit-grid,
    .ta-product-grid-row,
    .wks-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Landing page foundations. */
.page-template-ldp #header,
.page-template-ldp #footer {
    display: none;
}

.page-template-ldp #main,
#ldp-fullpage,
#ldp-fullpage .ldp-fullpage-section {
    width: 100%;
    min-width: 0;
}

#ldp-fullpage {
    overflow-x: hidden;
    background: #050a30;
}

@supports (overflow: clip) {
    #ldp-fullpage {
        overflow-x: clip;
    }
}

#ldp-fullpage .container,
#ldp-fullpage .sv-container,
#ldp-fullpage .sv-process__container,
#ldp-fullpage .sv-corporate__container,
#ldp-fullpage .gallery-container,
#ldp-fullpage .qtct-container,
#ldp-fullpage .kh-reviews__container {
    /* width: min(calc(100% - clamp(32px, 6vw, 64px)), 1280px);
  max-width: 1280px; */
    margin-inline: auto;
}

#ldp-fullpage :where(h1, h2, h3, p, li, a, button, span) {
    overflow-wrap: break-word;
}

#ldp-fullpage :where(.section-heading h1, .section-title, .sv-heading h2,
    .sv-process__heading h2, .why-us__title, .sv-corporate__content h2,
    .gallery-title, .qtct-title, .kh-reviews__title, .faq-ldp__title,
    .lh-title) {
    text-wrap: balance;
}

#ldp-fullpage :where(.categories-section, #gallery) {
    padding-block: clamp(64px, 8vh, 96px);
}

#ldp-fullpage .kh-reviews {
    padding-block: clamp(64px, 8vh, 96px);
}

.ldp_hero_section {
    min-height: 100svh;
    padding-block: clamp(48px, 7vh, 88px);
}

.ldp_hero_section .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

.ldp_hero_section .btn-primary,
.ldp_hero_section .btn-secondary {
    min-height: 48px;
    margin: 0;
}

.ldp_hero_section .card,
.ldp_hero_section .hero__right {
    min-width: 0;
}

.ldp_hero_section .card {
    width: min(100%, 560px);
}

.ldp_hero_section .tabs,
.ldp_hero_section .card__chips,
.customizer-section .product-tabs,
.gallery-filters {
    scrollbar-width: none;
}

.ldp_hero_section .tabs::-webkit-scrollbar,
.ldp_hero_section .card__chips::-webkit-scrollbar,
.customizer-section .product-tabs::-webkit-scrollbar,
.gallery-filters::-webkit-scrollbar {
    display: none;
}

/* Keep tablet layouts spacious and use normal document scrolling. */
@media (max-width: 1199px) {
    #ldp-fullpage .ldp-fullpage-section {
        height: auto !important;
        min-height: 0 !important;
    }

    #ldp-fullpage .fp-overflow {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .ldp_hero_section {
        min-height: 100svh !important;
    }

    .ldp_hero_section .hero__grid,
    .customizer-section .customizer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ldp_hero_section .hero__right {
        width: min(100%, 580px);
        margin-inline: auto;
    }

    .customizer-section .left-panel,
    .customizer-section .right-panel {
        width: min(100%, 840px);
        margin-inline: auto;
    }

    .qtct-grid {
        gap: 40px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .ldp_hero_section .hero__grid {
        gap: 48px;
    }

    .ldp_hero_section .hero__left {
        width: min(100%, 780px);
        margin-inline: auto;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .qtct-grid {
        grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr);
        align-items: stretch;
    }
}

/* Landing page: mobile. */
@media (max-width: 767px) {

    #ldp-fullpage .container,
    #ldp-fullpage .sv-container,
    #ldp-fullpage .sv-process__container,
    #ldp-fullpage .sv-corporate__container,
    #ldp-fullpage .gallery-container,
    #ldp-fullpage .qtct-container,
    #ldp-fullpage .kh-reviews__container {
        width: min(calc(100% - 24px), 640px);
    }

    #ldp-fullpage :where(.categories-section, #gallery, .customizer-section,
        .sv-before-after, .sv-process, #why-us, .sv-corporate, .qtct-section,
        .kh-reviews, .faq-ldp, .lh-bao-gia) {
        padding-block: clamp(52px, 14vw, 72px);
    }

    #ldp-fullpage :where(.section-heading h1, .section-title,
        .sv-before-after .sv-heading h2, .sv-process__heading h2,
        #why-us .why-us__title, .sv-corporate__content h2, .gallery-title,
        .qtct-title, .kh-reviews__title, .faq-ldp__title, .lh-title) {
        font-size: clamp(28px, 8.5vw, 34px);
        line-height: 1.15;
    }

    #ldp-fullpage :where(.section-heading, .section-header, .sv-heading,
        .sv-process__heading, .why-us__heading, .gallery-header, .qtct-header,
        .kh-reviews__header, .faq-ldp__header) {
        margin-bottom: 34px;
    }

    .ldp_hero_section {
        min-height: auto !important;
        padding-block: 48px 56px;
    }

    .ldp_hero_section .hero__grid {
        gap: 36px;
    }

    .ldp_hero_section .hero__left {
        gap: 18px;
    }

    .ldp_hero_section .badge {
        max-width: 100%;
        padding-inline: 12px;
        letter-spacing: .07em;
        line-height: 1.5;
        text-align: left;
    }

    .ldp_hero_section .hero__heading {
        font-size: clamp(31px, 10vw, 42px);
    }

    .ldp_hero_section .hero__desc {
        font-size: 15px;
    }

    .ldp_hero_section .btn-group,
    .ldp_hero_section .btn-primary,
    .ldp_hero_section .btn-secondary {
        width: 100%;
    }

    .ldp_hero_section .card {
        padding: 14px;
        border-radius: 18px;
    }

    .ldp_hero_section .tabs {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .ldp_hero_section .tab {
        flex: 0 0 auto;
        min-width: 96px;
        min-height: 40px;
        scroll-snap-align: start;
    }

    .ldp_hero_section .card__chips {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .ldp_hero_section .chip {
        flex: 0 0 auto;
        min-height: 36px;
        padding-inline: 10px;
    }

    .ldp_hero_section .hero__stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ldp_hero_section .stat {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .filter-panel {
        align-items: stretch;
    }

    .filter-button,
    .personalize-button,
    .personalize-btn,
    .sv-product-tab,
    .sv-process__step,
    .sv-corporate__tab,
    .filter-btn,
    .faq-ldp__question {
        min-height: 44px;
    }

    .customizer-section .left-panel,
    .customizer-section .right-panel {
        padding: 16px;
        border-radius: 18px;
    }

    .customizer-section .product-tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .customizer-section .product-tab {
        flex: 0 0 86px;
        scroll-snap-align: start;
    }

    .customizer-section .font-grid {
        max-height: none;
        grid-template-columns: minmax(0, 1fr);
    }

    .customizer-section .position-controls-bottom,
    .customizer-section .pricing-row {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .sv-before-after .sv-product-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sv-process .sv-process__step-copy>span {
        -webkit-line-clamp: 2;
    }

    #why-us .why-us__tab-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #why-us .why-us__tab {
        width: 100%;
    }

    #why-us .why-us__table-wrap {
        margin-inline: -12px;
        padding-bottom: 6px;
    }

    .sv-corporate .sv-corporate__tabs {
        overflow-x: auto;
    }

    .gallery-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-inline: -12px;
        padding-inline: 12px;
        overflow-x: auto;
    }

    .filter-btn {
        flex: 0 0 auto;
    }

    .gallery-grid {
        gap: 12px;
    }

    .qtct-header {
        margin-bottom: 34px;
    }

    .qtct-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .qtct-steps {
        margin-inline: -12px;
        padding: 0 12px 6px;
        overflow-x: auto;
        flex-direction: row;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .qtct-steps::-webkit-scrollbar {
        display: none;
    }

    .qtct-step {
        flex: 0 0 min(82vw, 320px);
        scroll-snap-align: start;
    }

    .qtct-step.is-active {
        transform: none;
    }

    .qtct-showcase-info {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }

    .kh-reviews .kh-reviews__card {
        padding: 20px;
        border-radius: 18px;
    }

    .kh-reviews .kh-reviews__grid {
        gap: 22px;
    }

    .kh-reviews .kh-reviews__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .faq-ldp {
        padding-inline: 0;
    }

    .faq-ldp__question {
        padding: 16px;
    }

    .faq-ldp__q-left {
        min-width: 0;
    }

    .faq-ldp__q-text {
        font-size: 15px;
        line-height: 1.45;
    }

    .faq-ldp__answer-inner {
        padding: 4px 16px 16px;
    }

    .lh-bao-gia .lh-content {
        padding-inline: 12px;
    }

    .personalize-btn {
        width: 100%;
    }

    .btn-label {
        white-space: normal;
        text-align: center;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .parent.category-grid {
        width: min(calc(100% - 24px), 440px);
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .parent.category-grid .category-item img {
        height: clamp(220px, 72vw, 300px);
    }

    .top-popup {
        height: auto;
        min-height: 76px;
    }

    .top-popup-content {
        min-height: 76px;
        padding: 10px 48px 10px 12px;
    }

    .close-btn {
        top: 10px;
        right: 12px;
    }

    .ldp_hero_section .card__preview {
        bottom: 22px;
        padding-inline: 10px;
    }

    .ldp_hero_section .card__preview-inner {
        max-width: 100%;
        padding: 8px 10px;
    }

    .ldp_hero_section .card__preview-name {
        font-size: 18px;
    }

    .category-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-filters .filter-button:first-child {
        grid-column: auto;
    }

    .sv-before-after .sv-product-tabs,
    #why-us .why-us__tab-list,
    .sv-corporate .sv-corporate__tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tms-options-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Quote modal: fit short phones and avoid iOS form zoom. */
.tms-overlay {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.tms-modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 639px) {
    #form_pop_quote {
        width: calc(100% - 16px) !important;
        max-width: none !important;
    }

    .tms-modal {
        padding: 18px;
        border-radius: 18px;
    }

    .tms-form {
        gap: 16px;
    }

    .tms-input,
    .tms-textarea,
    .tms-select,
    .tms-contact-section .tms-contact-grid input {
        font-size: 16px;
    }
}

/* Touch devices do not have hover; keep important gallery copy visible. */
@media (hover: none),
(pointer: coarse) {

    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    .gallery-grid .card-overlay {
        background: linear-gradient(to top, rgba(2, 6, 23, .94), rgba(2, 6, 23, 0) 68%);
        opacity: 1;
    }

    .gallery-card:hover,
    .product-card:hover,
    .qtct-step:hover,
    .sv-process .sv-process__step:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .icon-button *,
    .icon-button-logo *,
    .qtct-showcase-glow,
    .qtct-live-dot,
    .btn-icon,
    .btn-sparkle-top,
    .btn-sparkle-bottom {
        animation: none !important;
    }
}